/* ============================================================
   音乐页样式（music.css）
   ------------------------------------------------------------
   本文件只负责音乐页（music.html）自身的版式：播放器卡片、作品网格、
   解锁区、歌单抽屉、频谱、歌词面板…… 其余分工见下。

   【CSS 归属地图】
     css/music.css    音乐页基础版式 + 层级 token（唯一权威来源，见文件末尾 :root）
     css/app.css      App 外壳与二级页：窄屏主块 + 桌面扩展（桌面全屏播放页、
                      「音乐 App 共享层」），以及文末的「隔离兜底」块
     css/mobile.css   看板娘与窄屏专属兜底（避让规则全部窄屏专属）
     css/style.css    全站基础与 lightbox

   【z-index 阶梯】唯一权威在本文件末尾的 :root
     （--z-drawer-mask / --z-drawer / --z-toast / --z-modal
       = 10005 / 10006 / 10010 / 10020）。完整阶梯：
       迷你播放器 9980 < 顶栏 9990 < 底部 tab 9998 < 二级页 detail-view 9999
       < mp 遮罩 10000 < drawer 遮罩 10005 < drawer 10006
       < toast 10010 < 上传弹窗 10020 < lightbox / 看板娘 99999
     注意：看板娘(99999) 高于 toast(10010) 与弹窗(10020)，两者重叠时 toast 会被
     看板娘盖住。将来要修就【抬高 toast】，不要压低看板娘 —— 按既定决定未动看板娘。

   【隔离兜底】手机端注入的节点（#fsOpenBtn / .fs-open-btn / #fsStage /
     #nsPlatformChips）在 >=769px 一律
     display:none !important，规则位于 css/app.css 的「隔离兜底」块。
     #mpRecentStrip / .mp-strip 原在本清单里，阶段六随「最近播放」功能
     整体移除，已从两条规则里一并删掉。
     实测结论：剩余几条全部保留，一条都不可删。
       · 逐个强制注入同名节点，若没有兜底它们都会渲染出来
         （裸 button 变 inline-block 51x19；类选择器变 block 1210x24）
         —— 每条都是承载性的；
       · 1440/820 下整体禁用全部 30 条窄屏媒体规则，页面布局指纹一字不差
         —— 窄屏样式在桌面端贡献为零，没有漏出来的节点；
       · 窄屏注入后不刷新直接拉宽到 1440，这 6 个节点会被 AppShell.onMode
         全部摘掉；兜底防的是「resize 之后又有事件把节点插回来」这个竞态。
     => 纵深防御，保持现状。

   【强压声明】本文件 88 条 !important（多为 font-size / padding / width），
     app.css 88 条、mobile.css 79 条。清理时必须逐条在六档实测，
     不能靠选择器特异性推断 —— 本项目出现过「看着冗余、实际在窄屏阻止折行」的规则。

   【格式】原先 4 条压缩行（22080 / 1848 / 518 / 418 字符）已展开为多行，
     经 nows() 逐字节相同 + CSSOM 指纹（317 条规则 / 46013 / -682472992）
     双重校验无损。
   ============================================================ */
.music-container{
  max-width:1100px;
  margin:0 auto;
  padding:2rem 2rem 4rem;
  position:relative;
  z-index:20
}
.music-header{
  text-align:center;
  margin-bottom:2rem
}
.player-card{
  background:rgba(255,250,252,0.92);
  backdrop-filter:blur(6px);
  border-radius:2.5rem;
  padding:1.5rem 2rem 2rem;
  margin:1rem 0 2rem;
  box-shadow:0 18px 32px -12px rgba(216,112,140,0.2);
  border:1px solid #ffe2ec;
  transition:all var(--d-2)
}
.player-dual{
  display:flex;
  flex-wrap:wrap;
  gap:2rem
}
.player-left{
  flex:1.2;
  min-width:240px
}
.player-right{
  flex:1.8;
  min-width:260px
}
.disc-zone{
  display:flex;
  justify-content:center;
  margin:0.5rem 0 1rem
}
.vinyl{
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fbd9e4,#efbfcf);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 25px rgba(203,106,128,0.3);
  position:relative;
  border:2px solid #ffd2e0
}
.cover-inner{
  width:86%;
  height:86%;
  border-radius:50%;
  overflow:hidden;
  animation:rotateVinyl 20s linear infinite paused;
  background:#ffeef4;
  box-shadow:inset 0 0 0 2px #fff8f9,0 2px 10px rgba(0,0,0,0.1)
}
.cover-inner.playing{
  animation-play-state:running
}
@keyframes rotateVinyl{
  from{
    transform:rotate(0deg)
  }
  to{
    transform:rotate(360deg)
  }
}
.cover-img{
  width:100%;
  height:100%;
  object-fit:cover
}
.song-details{
  text-align:center;
  margin:0.8rem 0 0.6rem
}
.track-title{
  font-size:1.5rem;
  font-weight:700;
  font-family:'Noto Serif SC',serif;
  background:linear-gradient(135deg,#b84c6c,#e27e9b);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent
}
.track-artist{
  color:#c78299;
  margin-top:4px;
  font-size:0.85rem;
  font-weight:500
}
.progress-area{
  padding:0 8px;
  margin-top:0.5rem
}
.progress-bar-bg{
  width:100%;
  height:5px;
  background:#ffdee8;
  border-radius:10px;
  cursor:pointer
}
.progress-fill{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#f39bb9,#db7b9b);
  border-radius:10px
}
.controls-row{
  display:flex;
  justify-content:center;
  gap:1.5rem;
  padding:1rem 0 0.5rem
}
.ctrl-btn{
  background:#ffeef2;
  border:none;
  color:#c45c7c;
  font-size:1.3rem;
  width:44px;
  height:44px;
  border-radius:60px;
  cursor:pointer;
  transition:var(--d-2);
  box-shadow:0 3px 8px rgba(165,79,99,0.1)
}
.ctrl-btn:hover{
  background:#ffe2ea;
  color:#ab4a68;
  scale:1.02
}
.play-main{
  background:linear-gradient(145deg,#f0a0ba,#e06a8f);
  color:white;
  width:58px;
  height:58px;
  font-size:1.6rem;
  box-shadow:0 6px 14px rgba(224,106,143,0.3)
}
.mode-strip{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin:0.8rem 0 0.5rem;
  flex-wrap:wrap
}
.mode-chip{
  background:#fff4f7;
  padding:5px 14px;
  border-radius:40px;
  font-size:0.7rem;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:#ac6b80;
  transition:var(--d-2);
  border:1px solid #ffcdda
}
.mixer{
  padding:0.5rem 0.5rem;
  display:flex;
  align-items:center;
  gap:12px
}
.volume-slider{
  flex:1;
  height:4px;
  -webkit-appearance:none;
  background:#ffd5e2;
  border-radius:5px
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  background:#e4779a;
  border-radius:50%;
  cursor:pointer
}
.lyric-panel{
  background:#fff2f6cc;
  border-radius:1.8rem;
  padding:0.6rem 1rem;
  max-height:80px;
  overflow-y:auto;
  text-align:center;
  font-size:0.8rem;
  color:#a65875;
  margin:1rem 0;
  border:1px solid #ffe0ea
}
.playlist-scroll{
  max-height:280px;
  overflow-y:auto
}
.track-item{
  background:#fffafc;
  border-radius:80px;
  padding:8px 16px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  transition:var(--d-1);
  border:1px solid #ffdee8
}
.track-info{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:0.85rem;
  color:#5b3f48;
  font-weight:500
}
.track-duration{
  font-size:0.7rem;
  margin:0 6px;
  color:#da95ae
}
.cherry-tip{
  background:#fbebef;
  border-radius:18px;
  padding:0.2rem 0.8rem;
  color:#be6b84;
  font-family:monospace;
  border:1px dashed #ffb3c6;
  text-align:center;
  font-size:0.7rem;
  margin-top:0.8rem
}
.spectrum-line{
  margin:15px auto 5px;
  width:100%;
  position:relative
}
.spectrum-line::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,#e06a8f,#f0a0ba,#e06a8f);
  border-radius:2px
}
.spectrum-line .spectrum-bars{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:4px;
  height:48px;
  position:relative;
  z-index:1
}
.spectrum-line .spectrum-bar{
  width:8px;
  background:linear-gradient(180deg,#e06a8f,#b84c6c);
  border-radius:3px 3px 0 0
}
.modal-global{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,240,245,0.95);
  backdrop-filter:blur(12px);
  justify-content:center;
  align-items:center;
  z-index:var(--z-modal,10020)
}
.modal-card{
  background:#fffafc;
  max-width:440px;
  width:90%;
  border-radius:2rem;
  padding:1.5rem;
  border:1px solid #ffb7cc;
  box-shadow:0 20px 35px rgba(162,81,104,0.2)
}
.upload-area{
  border:2px dashed #e282a2;
  border-radius:1.5rem;
  padding:18px;
  text-align:center;
  margin:12px 0;
  cursor:pointer;
  background:#fff5f8
}
.submit-glow{
  background:linear-gradient(95deg,#f39bbc,#e06a8f);
  width:100%;
  padding:12px;
  border-radius:40px;
  font-weight:bold;
  margin-top:16px;
  border:none;
  color:white;
  cursor:pointer
}
.toast{
  position:fixed;
  bottom:25px;
  left:25px;
  background:#e27e9be0;
  backdrop-filter:blur(8px);
  padding:8px 20px;
  border-radius:60px;
  font-size:0.8rem;
  z-index:var(--z-toast,10010);
  display:none;
  color:white;
  font-weight:500
}
.btn-cherry{
  background:#ffe9ef;
  padding:0.4rem 1.2rem;
  border-radius:40px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#b95272;
  text-decoration:none;
  border:1px solid #ffc2d4;
  font-size:0.8rem
}
hr.sakura-divider{
  margin:1.2rem 0;
  border:none;
  height:2px;
  background:linear-gradient(90deg,transparent,#f7bfd2,#ff90b5,#f7bfd2,transparent)
}
@media (max-width:720px){
  .music-container{
    padding:1rem 1rem 2rem
  }
  .player-dual{
    flex-direction:column
  }
  .vinyl{
    width:160px;
    height:160px
  }
  .track-title{
    font-size:1.2rem
  }
  .spectrum-line .spectrum-bars{
    gap:3px;
    height:38px
  }
  .spectrum-line .spectrum-bar{
    width:6px
  }
}
::-webkit-scrollbar{
  width:5px
}
::-webkit-scrollbar-track{
  background:#ffdee8;
  border-radius:10px
}
::-webkit-scrollbar-thumb{
  background:#e294b0;
  border-radius:10px
}
@media (max-width:768px){
  body{
    -webkit-text-size-adjust:100%
  }
  .about-container,.container,main,.page-container{
    padding:0.8rem 0.9rem 2rem !important;
    margin:0.5rem 0.4rem !important
  }
  /* 阶段一 T1.2：去掉 !important，让 css/music-mobile.css（本页最后一个
     <link>）能接管这两个字号并做「短屏压缩」。本文件只在 music.html 加载，
     去掉强压不会波及其它页面。 */
  .blog-title{
    font-size:1.55rem
  }
  .subhead{
    font-size:0.85rem
  }
  .intro-name{
    font-size:1.35rem !important
  }
  .sakura-avatar-frame{
    width:100px !important;
    height:100px !important
  }
  .info-grid,.grid,.card-grid{
    grid-template-columns:1fr !important;
    gap:0.6rem
  }
  .profile-card,.card,.post-card{
    padding:1rem !important
  }
  img,video,iframe,canvas{
    max-width:100% !important;
    height:auto
  }
  .sakura-flurry,#sakura-flurry{
    opacity:0.3
  }
  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap
  }
}
@media (max-width:768px){
  .music-container{
    width:auto !important;
    padding:0.6rem !important;
    margin:0.4rem !important
  }
  .player-card{
    /* 阶段一 T1.2：padding / vinyl 尺寸的 !important 已摘除，
       改由 css/music-mobile.css 接管（它在本页最后加载，同特异性即可胜出）。 */
    padding:0.9rem;
    margin:0.5rem 0 !important;
    border-radius:16px !important
  }
  .player-left,.player-right{
    min-width:0 !important;
    width:100% !important
  }
  .vinyl{
    width:108px;
    height:108px
  }
  .track-artist{
    font-size:0.8rem !important
  }
  .progress-bar-bg{
    height:7px !important
  }
  .controls-row{
    /* 阶段一 T1.2：margin 的 !important 已摘除（music-mobile.css 接管纵向预算） */
    gap:0.9rem !important;
    margin:0.9rem 0 0.5rem
  }
  .ctrl-btn{
    width:48px !important;
    height:48px !important;
    font-size:1.05rem !important;
    border-radius:50% !important
  }
  .ctrl-btn.play-main{
    width:62px !important;
    height:62px !important;
    font-size:1.4rem !important
  }
  .mode-strip{
    flex-wrap:wrap !important;
    gap:0.4rem !important
  }
  .mode-chip{
    padding:0.35rem 0.8rem !important;
    font-size:0.8rem !important
  }
  .mixer{
    gap:0.5rem !important
  }
  .volume-slider{
    width:88px !important
  }
  .lyric-panel{
    min-height:120px !important;
    font-size:0.85rem !important
  }
  .btn-cherry{
    min-height:40px !important;
    padding:0.45rem 0.9rem !important;
    font-size:0.88rem !important
  }
  .playlist-scroll{
    /* 阶段四 T4.2：max-height / padding / white-space 三处 !important 已摘除，
       改由 css/music-mobile.css 接管（歌单已从抽屉搬到内容页首屏，行版式整套重做）。 */
    max-height:42vh
  }
  .track-item{
    padding:0.65rem 0.7rem
  }
  .track-info{
    white-space:normal;
    line-height:1.4
  }
  .glass-icon{
    font-size:1rem !important
  }
  .spectrum-bars{
    transform:scale(0.85) !important
  }
}
.page-tabs{
  display:flex;
  justify-content:center;
  gap:0.8rem;
  margin:0.4rem 0 1.6rem
}
.page-tab,.ns-subtab{
  border:none;
  background:rgba(255,250,252,0.8);
  border:1px solid #ffe2ec;
  color:#b1627d;
  padding:0.55rem 1.4rem;
  border-radius:40px;
  font-size:0.95rem;
  cursor:pointer;
  transition:all var(--d-3) var(--e-spring);
  font-family:inherit
}
.page-tab:hover,.ns-subtab:hover{
  translate:0 -2px;
  box-shadow:0 6px 16px #ffd0de88
}
.page-tab.active,.ns-subtab.active{
  background:linear-gradient(135deg,#ffb6c1,#ff8fab);
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 18px #ff8fab99
}
.stats-bar{
  display:flex;
  justify-content:center;
  gap:2.5rem;
  flex-wrap:wrap;
  margin:0.5rem 0 1.8rem;
  padding:0.8rem 1.5rem;
  background:rgba(255,250,252,0.7);
  backdrop-filter:blur(4px);
  border-radius:60px;
  border:1px solid #ffe2ec
}
.stat-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  color:#b1627d
}
.stat-item i{
  color:#e982a2;
  font-size:1.1rem
}
.stat-number{
  font-weight:700;
  font-size:1.1rem;
  color:#954e68
}
.filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  justify-content:center;
  margin-bottom:1.8rem
}
.filter-tab,.pl-view{
  background:#fff4f7;
  border:1px solid #ffd5e2;
  padding:0.5rem 1.2rem;
  border-radius:60px;
  font-size:0.8rem;
  font-weight:500;
  color:#b1627d;
  cursor:pointer;
  transition:var(--d-2)
}
.filter-tab:hover,.pl-view:hover{
  background:#ffecf0;
  translate:0 -1px
}
.filter-tab.active,.pl-view.active{
  background:#ffe2ea;
  border-color:#e982a2;
  color:#a14563;
  box-shadow:0 2px 8px rgba(233,130,162,0.2)
}
.works-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.4rem;
  margin:1rem 0 2rem
}
.work-card{
  background:rgba(255,250,252,0.92);
  backdrop-filter:blur(4px);
  border-radius:1.8rem;
  overflow:hidden;
  border:1px solid #ffe2ec;
  transition:all var(--d-2) var(--e-out);
  box-shadow:0 6px 14px rgba(216,112,140,0.08);
  cursor:pointer;
  position:relative
}
.work-card:hover{
  translate:0 -6px;
  box-shadow:0 16px 28px -8px rgba(233,130,156,0.25);
  background:#fffffcf5
}
.work-card .card-cover{
  width:100%;
  aspect-ratio:1 / 1;
  background:linear-gradient(145deg,#fbd9e4,#f0a0ba);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:3.2rem;
  color:rgba(255,255,255,0.7);
  transition:var(--d-3);
  position:relative
}
.work-card:hover .card-cover{
  scale:1.02
}
.work-card .card-cover i{
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.1))
}
.work-card .play-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:var(--d-3)
}
.work-card:hover .play-overlay{
  opacity:1
}
.work-card .play-overlay .play-circle{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c45c7c;
  font-size:1.4rem;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  transition:var(--d-2)
}
.work-card:hover .play-overlay .play-circle{
  scale:1.05
}
.work-card .card-body{
  padding:0.9rem 1rem 1rem
}
.work-card .card-title{
  font-weight:600;
  font-size:0.95rem;
  color:#3d2a30;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:0.2rem
}
.work-card .card-artist{
  font-size:0.75rem;
  color:#b27b88;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.work-card .card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:0.5rem;
  padding-top:0.4rem;
  border-top:1px solid #ffecf0
}
.work-card .card-tag{
  font-size:0.6rem;
  padding:0.15rem 0.6rem;
  border-radius:30px;
  background:#ffecf0;
  color:#c47690
}
.work-card .card-dur{
  font-size:0.65rem;
  color:#c78b9f
}
.work-card.playing{
  border-color:#e982a2;
  box-shadow:0 0 0 2px #f6a5c0,0 12px 24px -8px rgba(233,130,162,0.3)
}
.work-card.playing .card-cover{
  animation:pulseCover 2s ease-in-out infinite
}
@keyframes pulseCover{
  0%,100%{
    transform:scale(1)
  }
  50%{
    transform:scale(1.03)
  }
}
.empty-works{
  text-align:center;
  padding:3rem 1rem;
  background:rgba(255,250,252,0.7);
  border-radius:2rem;
  color:#b98898;
  border:1px dashed #ffcdda
}
@media (max-width:720px){
  .works-grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:1rem
  }
  .blog-title{
    font-size:2rem
  }
  .stats-bar{
    gap:1.2rem;
    padding:0.6rem 1rem
  }
  .stat-item{
    font-size:0.7rem
  }
  .stat-number{
    font-size:0.9rem
  }
  .work-card .card-cover{
    font-size:2.2rem
  }
  .work-card .card-title{
    font-size:0.8rem
  }
}
@media (max-width:420px){
  .works-grid{
    grid-template-columns:repeat(2,1fr);
    gap:0.8rem
  }
  .filter-tab,.pl-view{
    font-size:0.7rem;
    padding:0.3rem 0.8rem
  }
}
::-webkit-scrollbar{
  width:5px
}
::-webkit-scrollbar-track{
  background:#ffdee8;
  border-radius:10px
}
::-webkit-scrollbar-thumb{
  background:#e294b0;
  border-radius:10px
}
@media (max-width:768px){
  body{
    -webkit-text-size-adjust:100%
  }
  .about-container,.container,main,.page-container{
    padding:0.8rem 0.9rem 2rem !important;
    margin:0.5rem 0.4rem !important
  }
  /* 阶段一 T1.2：去掉 !important，让 css/music-mobile.css（本页最后一个
     <link>）能接管这两个字号并做「短屏压缩」。本文件只在 music.html 加载，
     去掉强压不会波及其它页面。 */
  .blog-title{
    font-size:1.55rem
  }
  .subhead{
    font-size:0.85rem
  }
  .intro-name{
    font-size:1.35rem !important
  }
  .sakura-avatar-frame{
    width:100px !important;
    height:100px !important
  }
  .info-grid,.grid,.card-grid{
    grid-template-columns:1fr !important;
    gap:0.6rem
  }
  .profile-card,.card,.post-card{
    padding:1rem !important
  }
  img,video,iframe,canvas{
    max-width:100% !important;
    height:auto
  }
  .sakura-flurry,#sakura-flurry{
    opacity:0.3
  }
  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap
  }
}
@media (max-width:768px){
  .page-tabs{
    gap:0.5rem
  }
  .page-tab,.ns-subtab{
    padding:0.45rem 1rem;
    font-size:0.88rem
  }
  .stats-bar{
    gap:1rem;
    padding:0.6rem 0.8rem
  }
  .works-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:0.8rem
  }
  .work-card .card-title{
    font-size:0.85rem
  }
  .work-card .card-artist{
    font-size:0.75rem
  }
}
@media (max-width:420px){
  .works-grid{
    grid-template-columns:1fr 1fr !important;
    gap:0.6rem
  }
  .work-card{
    border-radius:1.2rem
  }
}
/* ===== 第三方音乐面板 + 美化补丁（从 music.html 迁入） ===== */#tab-netease{
  padding:0.2rem 0
}
.unlock-section{
  margin-top:1.6rem;
  padding-top:1.2rem;
  border-top:1px dashed #ffc2d4
}
.unlock-title{
  color:#b34e6b;
  font-size:1rem;
  font-weight:600;
  margin-bottom:0.3rem
}
.unlock-hint{
  color:#8a7a80;
  font-size:0.78rem;
  line-height:1.6;
  margin-bottom:0.7rem
}
.ns-searchbar{
  display:flex;
  gap:0.5rem;
  margin-bottom:1rem
}
.ns-platform{
  flex:0 0 auto;
  min-width:0;
  padding:0.5rem 0.4rem;
  border:1px solid #ffc2d4;
  border-radius:12px;
  background:#fff8fa;
  color:#b34e6b;
  font-size:0.82rem;
  outline:none
}
.ns-searchbar input{
  flex:1;
  border:1px solid #ffe2ec;
  background:#fff8fb;
  border-radius:30px;
  padding:0.65rem 1.1rem;
  font-size:0.95rem;
  color:#8a4a5c;
  outline:none;
  font-family:inherit
}
.ns-searchbar input:focus{
  border-color:#ffb6c1;
  box-shadow:0 0 0 3px #ffb6c155
}
.ns-searchbar .btn-cherry{
  border:none;
  background:linear-gradient(135deg,#ffb6c1,#ff8fab);
  color:#fff;
  border-radius:30px;
  padding:0.65rem 1.2rem;
  font-size:0.92rem;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap
}
.ns-item{
  display:flex;
  align-items:center;
  gap:0.8rem;
  background:#fff6f9;
  border:1px solid #ffe8f0;
  border-radius:14px;
  padding:0.8rem 0.9rem;
  margin-bottom:0.55rem;
  transition:var(--d-2);
  cursor:pointer
}
.ns-item:active{
  transform:scale(0.98);
  background:#ffecf3
}
.ns-item.playing{
  border-color:#ff8fab;
  box-shadow:0 0 12px #ff8fab55
}
.ns-info{
  flex:1;
  min-width:0
}
.ns-name{
  font-weight:600;
  color:#b34262;
  font-size:0.95rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.ns-artist{
  font-size:0.78rem;
  color:#9a5f72;
  margin-top:0.15rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.ns-dur{
  font-size:0.8rem;
  color:#c78a9a
}
.ns-play{
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffb6c1,#ff8fab);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  flex-shrink:0
}
.ns-loading,.ns-empty{
  text-align:center;
  color:#9a5f72;
  padding:2rem 0;
  font-size:0.9rem
}
>@keyframes musicFloat{
  0%,100%{
    transform:translateY(0)
  }
  50%{
    transform:translateY(-3px)
  }
}
@keyframes glowPulse{
  0%,100%{
    box-shadow:0 0 10px #ff8fab66
  }
  50%{
    box-shadow:0 0 22px #ff8fabcc
  }
}
@keyframes shimmer{
  0%{
    background-position:-200% 0
  }
  100%{
    background-position:200% 0
  }
}
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(10px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes noteJump{
  0%,100%{
    transform:translateY(0) rotate(-6deg)
  }
  50%{
    transform:translateY(-5px) rotate(8deg)
  }
}
.btn-cherry{
  background:linear-gradient(135deg,#ffb6c1,#ff8fab,#ff7a9e) !important;
  background-size:200% 200% !important;
  color:#fff !important;
  font-weight:600 !important;
  box-shadow:0 4px 14px #ff8fab66;
  transition:all var(--d-3) var(--e-out) !important;
  animation:shimmer 3s linear infinite
}
.btn-cherry:hover{
  translate:0 -2px;
  box-shadow:0 8px 22px #ff8fab99
}
.btn-cherry:active{
  transform:scale(0.96)
}
.ns-platform:focus{
  border-color:#ff8fab;
  box-shadow:0 0 0 3px #ff8fab33
}
.ns-item{
  animation:fadeInUp 0.3s ease backwards
}
.ns-item:nth-child(2){
  animation-delay:0.04s
}
.ns-item:nth-child(3){
  animation-delay:0.08s
}
.ns-item:nth-child(4){
  animation-delay:0.12s
}
.ns-item:nth-child(5){
  animation-delay:0.16s
}
.ns-item:nth-child(6){
  animation-delay:0.2s
}
.ns-item:nth-child(7){
  animation-delay:0.24s
}
.ns-item:nth-child(8){
  animation-delay:0.28s
}
.ns-item.playing{
  background:linear-gradient(135deg,#fff0f5,#ffe3ec) !important;
  border-color:#ff8fab !important;
  animation:glowPulse 1.6s ease infinite
}
.ns-item.playing .ns-name{
  color:#e25b84
}
.ns-item.playing .ns-play i{
  animation:noteJump 0.8s ease infinite
}
.ns-loading::before{
  content:'♪';
  display:inline-block;
  margin-right:0.4rem;
  color:#ff8fab;
  animation:noteJump 0.7s ease infinite
}
.unlock-title{
  background:linear-gradient(135deg,#e25b84,#ff8fab);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:1.05rem;
  display:inline-block
}
.bn-item.active i{
  animation:musicFloat 2s ease infinite;
  color:#ff7a9e
}
.unlock-section{
  margin-top:1.6rem;
  padding-top:1.2rem;
  border-top:1px dashed #ffc2d4
}
.unlock-title{
  color:#b34e6b;
  font-size:1rem;
  font-weight:600;
  margin-bottom:0.3rem
}
.unlock-hint{
  color:#8a7a80;
  font-size:0.78rem;
  line-height:1.6;
  margin-bottom:0.7rem
}
.unlock-drop{
  border:2px dashed #ffc2d4;
  border-radius:16px;
  background:#fff8fa;
  padding:1.2rem 1rem;
  text-align:center;
  color:#c98a9f;
  margin-bottom:0.8rem;
  transition:all var(--d-2)
}
.unlock-drop.over{
  background:#fff0f4;
  border-color:#e982a2
}
.unlock-drop i{
  font-size:1.6rem;
  display:block;
  margin-bottom:0.4rem;
  color:#e982a2
}
.unlock-drop p{
  font-size:0.8rem;
  margin:0 0 0.5rem
}
.unlock-btn{
  background:linear-gradient(135deg,#ff9eb5,#ff7a9e);
  color:#fff;
  border:none;
  border-radius:20px;
  padding:0.5rem 1.2rem;
  font-size:0.85rem;
  cursor:pointer
}
.unlock-results{
  display:flex;
  flex-direction:column;
  gap:0.5rem
}
.ul-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff8fa;
  border:1px solid #ffe2ec;
  border-radius:12px;
  padding:0.55rem 0.8rem;
  gap:0.5rem
}
.ul-item.err{
  border-color:#ffc9c9;
  background:#fff6f6
}
.ul-info{
  flex:1;
  min-width:0
}
.ul-name{
  font-size:0.82rem;
  color:#8a4a5c;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.ul-status{
  font-size:0.72rem;
  color:#b78a98
}
.ul-item.err .ul-status{
  color:#d06a6a
}
.ul-actions{
  display:flex;
  gap:0.4rem;
  flex:0 0 auto
}
.ul-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #ffc2d4;
  background:#fff;
  color:#d06a8c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  text-decoration:none;
  cursor:pointer
}
.ns-actions{
  display:flex;
  align-items:center;
  gap:0.4rem;
  flex:0 0 auto
}
.ns-dl{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #ffc2d4;
  background:#fff;
  color:#c98a9f;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  cursor:pointer
}
.ns-dl:active{
  transform:scale(0.92)
}
.po-searchbar{
  display:flex;
  gap:0.5rem;
  margin-bottom:1rem
}
.po-searchbar input{
  flex:1;
  border:1px solid #ffe2ec;
  background:#fff8fb;
  border-radius:30px;
  padding:0.6rem 1rem;
  font-size:0.9rem;
  color:#8a4a5c;
  outline:none
}
#po-results,#pc-results{
  margin-bottom:1rem
}
.po-group-title{
  color:#d06a8c;
  font-size:0.82rem;
  font-weight:600;
  margin:0.4rem 0 0.5rem
}
.po-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
  background:#fff8fa;
  border:1px solid #ffe2ec;
  border-radius:12px;
  padding:0.5rem 0.8rem;
  margin-bottom:0.45rem
}
.po-info{
  flex:1;
  min-width:0
}
.po-name{
  font-size:0.83rem;
  color:#8a4a5c;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.po-artist{
  font-size:0.72rem;
  color:#b78a98;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.po-dur{
  font-size:0.75rem;
  color:#b78a98;
  flex:0 0 auto
}
.po-actions{
  display:flex;
  gap:0.4rem;
  flex:0 0 auto
}
.po-play,.po-dl{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid #ffc2d4;
  background:#fff;
  color:#d06a8c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  cursor:pointer
}
.po-loading,.po-empty{
  color:#b78a98;
  font-size:0.8rem;
  padding:0.6rem 0
}
.po-card{
  display:flex;
  align-items:center;
  gap:0.6rem;
  background:#fff8fa;
  border:1px solid #ffe2ec;
  border-radius:14px;
  padding:0.55rem 0.8rem;
  margin-bottom:0.5rem
}
.po-card-cover{
  width:42px;
  height:42px;
  border-radius:10px;
  background:linear-gradient(135deg,#ffd5e2,#ffb3c7);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.1rem;
  flex:0 0 auto
}
.po-card-info{
  flex:1;
  min-width:0
}
.po-card-name{
  font-size:0.83rem;
  color:#8a4a5c;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.po-card-artist{
  font-size:0.72rem;
  color:#b78a98;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.po-card-actions{
  display:flex;
  gap:0.4rem;
  flex:0 0 auto
}
.po-card-play,.po-card-dl{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid #ffc2d4;
  background:#fff;
  color:#d06a8c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  cursor:pointer
}
.lyric-panel{
  overflow-y:auto;
  scroll-behavior:smooth
}
.lyr-line{
  padding:0.18rem 0.2rem;
  font-size:0.8rem;
  color:#b78a98;
  transition:all var(--d-2);
  border-radius:6px
}
.lyr-line.active{
  color:#e982a2;
  font-weight:600;
  font-size:0.9rem;
  background:rgba(255,214,228,0.35)
}
.po-card-cover{
  position:relative;
  overflow:hidden
}
.po-card-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px
}
.st-7dce5011{
  color:#ce809b;
}
.st-99ff0a8c{
  cursor:pointer;
  background:#ffeef2;
  width:32px;
  height:32px;
  border-radius:30px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.st-11ddc8e7{
  color:#e07f9d;
}
.st-ead0ed48{
  cursor:pointer;
  color:#e06a8f;
  text-decoration:underline;
  margin-left:6px;
}
.st-199ade66{
  text-align:center;
  margin-top:1rem;
}
.st-93b8ea5b{
  display:none;
}
.st-cb458930{
  display:none
}
.st-224b51a7{
  display:none;
}
.st-c0b9e821{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.st-445d912d{
  color:#be6f8b;
}
.st-508e6572{
  background:none;
  border:none;
  font-size:1.8rem;
  color:#dc8aa7;
}
.st-05cec806{
  font-size:0.75rem;
  color:#ad6e85;
}

/* ==== 歌单删除 / 收藏 / 筛选（UX 增强） ==== */
.track-item{
  position:relative
}
.track-fav{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:22px;
  border-radius:50%;
  color:#e0b0c0;
  cursor:pointer;
  margin-left:4px;
  flex:0 0 auto;
  font-size:0.8rem;
  transition:var(--d-2);
  background:none;
  border:none
}
.track-fav:hover{
  color:#e76f9d;
  scale:1.15
}
.track-fav.on{
  color:#e76f9d
}
.track-del{
  display:none;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#ffe2ea;
  color:#d06a8c;
  cursor:pointer;
  margin-left:6px;
  flex:0 0 auto;
  border:none;
  font-size:0.75rem
}
.track-del:hover{
  background:#ffcdd9;
  color:#b34b68
}
.track-item:hover .track-del{
  display:flex
}
@media (hover:none){
  .track-del{
    display:flex
  }
}
.st-fav-toggle{
  color:#dcc0cb;
  transition:var(--d-2)
}
.st-fav-toggle.active{
  background:#ffe2ea !important;
  color:#e76f9d !important
}
.ns-add{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #ffc2d4;
  background:#fff;
  color:#e07f9d;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  cursor:pointer
}
.ns-add:active{
  transform:scale(0.92)
}
.po-item .po-cover{
  width:40px;
  height:40px;
  border-radius:10px;
  background:linear-gradient(135deg,#ffd5e2,#ffb3c7);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1rem;
  flex:0 0 auto;
  position:relative;
  overflow:hidden
}
.po-item .po-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px
}
.po-hist{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.4rem;
  background:#fff6f9;
  border:1px dashed #ffc2d4;
  border-radius:14px;
  padding:0.5rem 0.8rem;
  margin-bottom:0.8rem;
  font-size:0.78rem;
  color:#b98a9b
}
.po-hist-chip{
  cursor:pointer;
  background:#ffdde8;
  color:#c25f7e;
  border-radius:30px;
  padding:0.15rem 0.7rem;
  transition:var(--d-2)
}
.po-hist-chip:hover{
  background:#ffc9d9
}
.po-hist-clear{
  cursor:pointer;
  color:#d06a8c;
  text-decoration:underline;
  margin-left:auto
}


/* ===== 多歌单视图切换条（视觉复用 .filter-tab，见上方共用选择器）===== */
.pl-views{display:flex;flex-wrap:wrap;gap:0.6rem;padding:0 6px;margin-bottom:12px}
.pl-view b{font-weight:600;font-size:0.72rem;opacity:.7}
.pl-view.active b{opacity:.95}

/* ===== 第三方音乐子页签（视觉复用 .page-tab）===== */
.ns-subtabs{display:flex;gap:0.8rem;margin:0 0 1.2rem}

/* ===== 进度条可拖拽 ===== */
.progress-bar-bg{touch-action:none;user-select:none}
.progress-bar-bg.seeking .progress-fill{transition:none}
.progress-bar-bg.seeking{filter:brightness(1.06)}

@media (prefers-reduced-motion: reduce){
  .cover-inner{animation:none!important}
  .spectrum-line .spectrum-bar{transition:none!important}
}

/* ===== 播放器版式改版：仿「演示页面」结构，元素与配色沿用本站粉色系 ===== */
.player-card{padding:1.8rem 2rem 1.6rem}
.player-dual{align-items:flex-start;gap:2.2rem}
.player-left{display:flex;flex-direction:column;align-items:center}

/* 唱臂（纯装饰，仿黑胶唱机） */
.player-left .disc-zone{position:relative}
.player-left .tonearm{position:absolute;top:-16px;right:-4px;width:60px;height:60px;pointer-events:none;opacity:.8;z-index:10}
.player-left .tonearm i{display:block;font-size:42px;color:#e2a8bd;filter:drop-shadow(0 3px 6px rgba(177,98,125,.28));transform:rotate(25deg)}

/* 频谱：挪到黑胶正下方，收窄居中 */
.player-left .spectrum-line{width:100%;max-width:330px;margin:0.9rem auto 0}

/* 歌曲信息：移到右栏顶部并左对齐 */
.player-right .song-details{text-align:left;margin:0 0 0.75rem}
.player-right .track-title{font-size:1.75rem;line-height:1.25}
/* 长曲名必须有溢出处理。
   实测（headless Chrome，390px）：注入 74 字符无空格曲名后
   .track-title clientW=331 / scrollW=1000 —— 溢出 669px，
   而页面靠 html,body{overflow-x:hidden}（css/mobile.css:62-65）硬裁掉，
   没有省略号，用户看到的是「标题被拦腰切断」且无从得知还有内容。
   旁边同类节点 .track-info 是带 nowrap+ellipsis 的，所以这里是漏写。
   两行截断：CJK 混排曲名在手机上两行足够，再长就该省略。 */
.player-right .track-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.player-right .track-artist{display:flex;align-items:center;gap:6px;font-size:0.82rem}
.player-right .track-artist i{font-size:0.72rem;color:#e982a2}

/* 歌词：三行预览、左侧强调边、当前行高亮（滚动由 LyricHelper 负责） */
.player-right .lyric-panel{
  position:relative;
  height:152px;
  max-height:152px;
  min-height:0!important;
  margin:0 0 0.9rem;
  padding:0.6rem 1rem;
  background:#fff2f6;
  border:1px solid #ffe0ea;
  border-left:4px solid #e982a2;
  border-radius:18px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
  text-align:left;
  font-size:0.82rem;
  color:#b98297
}

.player-right .lyric-panel::-webkit-scrollbar{display:none}
.player-right .lyric-panel .lyr-line{line-height:1.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.72;transition:color var(--d-2),opacity var(--d-2)}
.player-right .lyric-panel .lyr-line.active{color:#a14563;font-weight:600;opacity:1;text-shadow:0 0 10px rgba(233,130,162,.4)}

/* 进度条：时间分列两侧 */
.player-right .progress-area{display:flex;align-items:center;gap:12px;padding:0;margin:0.2rem 0 0}
.player-right .progress-area .time{flex:0 0 auto;min-width:40px;font-size:0.72rem;color:#b77d8f;font-variant-numeric:tabular-nums}
.player-right .progress-area .time:last-child{text-align:right}
.player-right .progress-area .progress-bar-bg{flex:1 1 auto;width:auto;height:6px;box-shadow:inset 0 1px 3px rgba(177,98,125,.16)}

/* 控制键：居中，主键放大成圆形 */
.player-right .controls-row{align-items:center;gap:2rem;padding:1.1rem 0 0.8rem}
.player-right .ctrl-btn{width:46px;height:46px;font-size:1.05rem;background:#ffeef2;color:#c45c7c;box-shadow:0 4px 10px rgba(165,79,99,.12)}
.player-right .ctrl-btn:hover{background:#ffe2ea;color:#a14563;translate:0 -2px}
.player-right .ctrl-btn.play-main{width:66px;height:66px;font-size:1.5rem;color:#fff;background:linear-gradient(145deg,#f0a0ba,#e06a8f);box-shadow:0 10px 22px rgba(224,106,143,.4),0 0 0 3px rgba(255,182,193,.38)}
.player-right .ctrl-btn.play-main:hover{scale:1.05;background:linear-gradient(145deg,#f4aec5,#e5789a)}

/* 底部一行：模式左 / 音量右 */
/* 底部：所有按钮必须排成「一行」，之前 space-between + wrap 会把歌单胶囊挤到第二行 */
.player-right .extra-actions{display:flex;align-items:center;justify-content:space-between;gap:0.55rem;flex-wrap:nowrap;margin:0 0 0.9rem}
.player-right .extra-actions .mode-strip{margin:0;justify-content:flex-start;gap:0.4rem;flex-wrap:nowrap!important}
.player-right .extra-actions .mode-chip{padding:0.3rem 0.6rem!important;font-size:0.72rem!important;gap:5px}
.player-right .extra-actions .mode-chip i{font-size:0.72rem}
/* 触控目标：这些 mode-chip 实测只有 27px 高（390px 下 40x27 / 51x27 / 47x27），
   远低于 44px 的可点标准 —— 它们是手机端最常用的一组控件（循环/随机/倍速/歌单）。
   mobile.css:165-166 当初把 .mode-chip 排除在 44px 批量提升之外，
   理由是「这一行必须永不换行，抬高会把行挤断」，那个权衡在当年成立。

   这里不抬高真实高度（那会撑高整行、破坏一行约束），而是用绝对定位的透明 ::before
   把「可点区域」上下各撑开，视觉与布局都保持 27px 不变。
   与进度条命中区（css/app.css 的 .progress-bar-bg::before）是同一套手法。
   取值 44px 是 iOS HIG / Material 的通用最小可点尺寸。 */
.player-right .extra-actions .mode-chip{position:relative}
.player-right .extra-actions .mode-chip::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:44px;
  margin-top:-22px;
  border-radius:22px;
}
.player-right .extra-actions .mixer{margin-left:auto;padding:0;gap:0.4rem!important}
.player-right .extra-actions .mixer .volume-slider{width:72px!important}
.player-right .extra-actions .pl-drawer-trigger b{font-size:0.7rem}

@media (max-width:768px){
  /* ---------- 首屏必须放得下「播放」按钮 ----------
     实测改前（390x844，底栏 56）：播放器卡片 top=303 bottom=902，
     而视口只有 844 —— 控制行 bottom=837 正好被底栏压住，
     音量/歌单那一行（bottom=872）整个在首屏之外。
     用户进页面第一眼看不到播放键，得先滑一下。

     省出来的空间主要来自黑胶区：.player-left 原来占 184px，
     而移动端封面只有 108px —— 76px 是上下留白与频谱条的余量。
     桌面端那块留白是唱片机的构图需要，手机上不值得用 76px 去换。
     所以窄屏下：黑胶区收紧、歌单/音量行提到控制行下面同一屏内。 */
  .player-card{padding-top:0.9rem}
  .player-dual{gap:0.7rem}
  .player-left{min-height:0}
  .disc-zone{margin-bottom:0.35rem}
  .player-left .vinyl{width:118px;height:118px}
  .player-left .cover-inner{width:96px;height:96px}
  /* 频谱区别定 height（会出横线穿条的 bug，见下），
     改用负底边距把它的视觉留白收掉：.spectrum-bars 是
     align-items:flex-end、条形从底部往上长，所以下方那点空间
     本来就是空的，收掉不影响观感，但能把音量行留在首屏里。 */
  .player-left .spectrum-line{margin-top:0.1rem;margin-bottom:-14px}

  /* ---------- 频谱那条横线为什么会「穿过」动画 ----------
     .spectrum-line::before 就是那条渐变横线，它是
       position: absolute; bottom: 0
     —— 贴在容器**底部**。而 .spectrum-bars 高 38~48px、
     align-items: flex-end，条形是从容器底部**往上长**的。
     所以容器只要比频谱条矮，横线就会从频谱条中间穿过去。
     实测给 .spectrum-line 定 height:22px 时，
     .spectrum-bars 仍是 32px 高，横线正好切在条身上。
     结论：.spectrum-line 的高度必须是 auto（内容高度），
     想省纵向空间就去动 .player-left 的其他部分。 */

  .player-right .track-title{font-size:1.35rem}
  .player-right .song-details{margin-bottom:0.35rem}
  /* 歌词面板是这块里最"软"的高度：12 行字里手机上真正会看的就那几行，
     从 112 收到 100 换来的是音量/歌单行能整个进首屏。 */
  .player-right .lyric-panel{height:100px;max-height:100px;margin-bottom:0.3rem}
  .player-right .progress-area{margin:0.2rem 0}
  .player-right .controls-row{gap:1.4rem;padding:0.6rem 0 0.45rem}
  .player-right .ctrl-btn.play-main{width:56px;height:56px;font-size:1.3rem}
  .player-left .tonearm{display:none}
  .player-right .extra-actions{gap:0.45rem;margin-bottom:0.6rem}
  .player-right .extra-actions .mode-chip{padding:0.26rem 0.5rem!important;font-size:0.68rem!important;gap:4px}
  .player-right .extra-actions .mixer .volume-slider{width:58px!important}
}
@media (max-width:420px){
  .player-right .lyric-panel{height:106px;max-height:106px;padding:0.5rem 0.8rem;font-size:0.76rem}
  /* 小屏横向只有 ~313px，三组控件放不下：文字标签收起来，只留图标 + 数值，
     这样仍然保持「一行」而不是折成两行。 */
  .player-right .extra-actions{gap:0.35rem}
  .player-right .extra-actions .mc-txt{display:none}
  .player-right .extra-actions .mode-chip{padding:0.26rem 0.52rem!important;font-size:0.68rem!important;gap:4px}
  .player-right .extra-actions .mixer{margin-left:auto;gap:0.3rem!important}
  .player-right .extra-actions .mixer .volume-slider{width:64px!important}
  .player-right .progress-area .time{min-width:34px;font-size:0.68rem}
}

/* ===== 歌单抽屉：可唤醒的小侧边栏（从右侧滑出，避开页面左侧导航）===== */
.pl-drawer-trigger{cursor:pointer}
.pl-drawer-trigger b{font-weight:600;font-size:0.72rem;opacity:.7}
.pl-drawer-mask{position:fixed;inset:0;background:rgba(120,60,80,.26);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity var(--d-2),visibility var(--d-2);z-index:var(--z-drawer-mask,10005)}
.pl-drawer-mask.show{opacity:1;visibility:visible}
.pl-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(360px,88vw);
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  padding:1.1rem 1rem 1rem;
  background:rgba(255,250,252,.98);
  backdrop-filter:blur(10px);
  border-left:1px solid #ffe2ec;
  border-radius:22px 0 0 22px;
  box-shadow:-14px 0 34px -12px rgba(177,98,125,.35);
  transform:translateX(102%);
  transition:transform var(--d-3) var(--e-inout);
  z-index:var(--z-drawer,10006)
}

.pl-drawer.show{transform:translateX(0)}
.pl-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0 4px;font-size:0.9rem;font-weight:600;color:#b1627d}
.pl-drawer-head .pl-drawer-tools{display:flex;align-items:center;gap:0.55rem}
.pl-drawer #plDrawerClose{cursor:pointer}
.pl-drawer .pl-views{margin-bottom:0.15rem}
.pl-drawer .playlist-scroll{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;padding-right:2px}
.pl-drawer .cherry-tip{margin-top:auto}
body.pl-drawer-open{overflow:hidden}
@media (max-width:480px){.pl-drawer{width:92vw;border-radius:18px 0 0 18px}}

/* ============================================================
 * 动效补充层（追加在文件末尾，不改动上面任何一条规则）
 * 说明：位移一律用独立的 translate / scale / rotate 属性，
 *       不动 transform，避免和已有的 transform 动画互相覆盖。
 * ============================================================ */

/* ---------- 1. 歌词高亮行换行时轻轻推进 ---------- */
.player-right .lyric-panel .lyr-line.active{
  animation: mc-lyr-in .42s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes mc-lyr-in{
  from{ opacity:.30; translate:9px 0;  filter:blur(2.5px); }
  to  { opacity:1;   translate:0 0;    filter:blur(0); }
}

/* ---------- 2. 播放中：播放按钮外扩光环 + 进度条流光 ---------- */
#playPauseBtn{ position:relative; }
#playPauseBtn::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(233,130,162,.6);
  opacity:0; pointer-events:none;
}
body.mc-playing #playPauseBtn::after{ animation: mc-ring 1.9s ease-out infinite; }
@keyframes mc-ring{
  0%  { opacity:.75; scale:.85; }
  100%{ opacity:0;   scale:1.35; }
}
#progressFill{ position:relative; overflow:hidden; }
body.mc-playing #progressFill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.65) 50%,transparent 80%);
  background-size:220% 100%;
  animation: mc-shimmer 1.9s linear infinite;
  pointer-events:none;
}
@keyframes mc-shimmer{
  from{ background-position:180% 0; }
  to  { background-position:-80% 0; }
}

/* ---------- 3. 曲名 / 封面切换动画 ---------- */
#trackName.mc-title-in{ animation: mc-title-in .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mc-title-in{
  from{ opacity:0; translate:0 10px; filter:blur(3px); }
  to  { opacity:1; translate:0 0;    filter:blur(0); }
}
#coverImg.mc-cover-in{ animation: mc-cover-in .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mc-cover-in{
  from{ opacity:.15; scale:.9; }
  to  { opacity:1;   scale:1; }
}

/* ---------- 4. 按钮按下反馈 ---------- */
.mc-ripple{ animation: mc-pop .5s cubic-bezier(.22,.61,.36,1); }
@keyframes mc-pop{
  0%  { scale:1; }
  35% { scale:.93; }
  100%{ scale:1; }
}

/* ---------- 5. 曲目行：hover 轻推，播放中高亮呼吸 ---------- */
.track-item{
  transition: translate var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out),
              background-color var(--d-2), border-color var(--d-2);
}
.track-item:hover{
  translate:5px 0;
  border-color:#ffc2d4;
  box-shadow:0 6px 16px rgba(224,106,143,.18);
}
.track-item.playing{
  border-color:#e982a2;
  background:linear-gradient(135deg,#fff0f6,#ffe4ee);
  box-shadow:0 0 0 2px rgba(246,165,192,.4), 0 8px 18px -6px rgba(233,130,162,.35);
}
.track-item.playing .track-name{ color:#c2506f; }

/* ---------- 6. 视图切换淡入 ---------- */
#tab-player.active, #tab-netease.active{ animation: mc-view-in .32s ease both; }
@keyframes mc-view-in{
  from{ opacity:0; translate:0 8px; }
  to  { opacity:1; translate:0 0; }
}

/* ---------- 7. 模式芯片切换时的轻微弹跳 ---------- */
.mode-chip.active{ animation: mc-chip .45s cubic-bezier(.22,.61,.36,1); }
@keyframes mc-chip{
  0%  { scale:1; }
  40% { scale:1.12; }
  100%{ scale:1; }
}

/* ---------- 8. 音量滑块 ---------- */
.volume-slider::-webkit-slider-thumb{ transition: scale var(--d-2), box-shadow var(--d-2); }
.volume-slider:hover::-webkit-slider-thumb{ scale:1.18; box-shadow:0 0 0 5px rgba(233,130,162,.16); }

/* ---------- 9. 抽屉展开时曲目行逐条滑入 ---------- */
.pl-drawer.show .track-item{ animation: mc-row-in .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mc-row-in{
  from{ opacity:0; translate:-14px 0; }
  to  { opacity:1; translate:0 0; }
}
.pl-drawer.show .track-item:nth-child(1){ animation-delay:.01s }
.pl-drawer.show .track-item:nth-child(2){ animation-delay:.03s }
.pl-drawer.show .track-item:nth-child(3){ animation-delay:.05s }
.pl-drawer.show .track-item:nth-child(4){ animation-delay:.07s }
.pl-drawer.show .track-item:nth-child(5){ animation-delay:.09s }
.pl-drawer.show .track-item:nth-child(6){ animation-delay:.11s }
.pl-drawer.show .track-item:nth-child(7){ animation-delay:.13s }
.pl-drawer.show .track-item:nth-child(8){ animation-delay:.15s }

/* ---------- 10. 看板娘跟着唱 ---------- */
/* 摆动加在 .wf-main 上，不动 #waifu-fab 本身 —— 拖拽用的是 left/top，不冲突 */
#waifu-fab.wf-singing .wf-main{ animation: mc-sing-sway 1.05s ease-in-out 3; }
@keyframes mc-sing-sway{
  0%  { translate:0 0;    rotate:0deg; }
  20% { translate:0 -7px; rotate:-1.5deg; }
  50% { translate:0 0;    rotate:0deg; }
  80% { translate:0 -5px; rotate:1.5deg; }
  100%{ translate:0 0;    rotate:0deg; }
}
#waifu-fab .wf-bubble.wf-sing{
  background:linear-gradient(135deg,#fff0f6,#ffe0ec) !important;
  border-color:#ffb6c1 !important;
  box-shadow:0 8px 22px rgba(233,130,162,.32) !important;
  animation: mc-bubble-in .34s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes mc-bubble-in{ from{ scale:.86; } to{ scale:1; } }
#waifu-fab .wf-bubble.wf-sing::before{
  content:'♪';
  position:absolute; left:-6px; top:-10px;
  font-size:.9rem; color:#e982a2;
  animation: mc-note 1.6s ease-in-out infinite;
}
@keyframes mc-note{
  0%,100%{ translate:0 0;     opacity:.55; }
  50%    { translate:2px -6px; opacity:1; }
}

/* ---------- 11. 关掉动效 ---------- */
@media (prefers-reduced-motion: reduce){
  .player-right .lyric-panel .lyr-line.active,
  #trackName.mc-title-in, #coverImg.mc-cover-in,
  .mc-ripple, .pl-drawer.show .track-item,
  #tab-player.active, #tab-netease.active,
  .mode-chip.active,
  body.mc-playing #playPauseBtn::after, body.mc-playing #progressFill::after,
  #waifu-fab.wf-singing .wf-main, #waifu-fab .wf-bubble.wf-sing,
  #waifu-fab .wf-bubble.wf-sing::before{ animation:none !important; }
}

/* ============================================================
   层级令牌（z-index token）—— 阶段 A2 建立
   ------------------------------------------------------------
   这套数字原来硬编码散在 music.css / app.css / mobile.css 里；
   更糟的是「把 toast / 上传弹窗 / 歌单抽屉抬到二级页之上」那几条
   被关在 @media (max-width:768px) 内 —— 桌面端与 iPad(820px) 一行
   都不命中，于是 desktop 实测抽屉 901 / toast 1100，全在
   .detail-view(9999) 之下。现在把它们接上变量并全视口生效。
     --z-mini-player 9980  迷你播放条
     --z-appbar      9990  顶栏
     --z-bot-tab     9998  底部导航
     --z-detail      9999  二级页（.detail-view）
     --z-mp-mask     10000 底部面板遮罩（.mp-mask）
     --z-drawer-mask 10005 歌单抽屉遮罩
     --z-drawer      10006 歌单抽屉
     --z-toast       10010 toast
     --z-modal       10020 上传弹窗
     --z-lightbox    99999 大图 lightbox
     --z-waifu       99999 看板娘
   目前只把「必须跨视口」的四条接上变量，其余在阶段 C 统一迁移。
   ============================================================ */
:root {
  --z-drawer-mask: 10005;
  --z-drawer: 10006;
  --z-toast: 10010;
  --z-modal: 10020;
}
/* ============================================================
   阶段 B4：本地音乐解锁收进 <details>
   ------------------------------------------------------------
   原来它直接摊在「第三方音乐 → 在线搜歌」首屏下方（实测 desktop
   y331 / h230），把搜索结果和页脚一起顶下去。改成原生 details：
   收起时只占一行 44px 的触控带，不依赖任何 JS。
   ============================================================ */
.unlock-section {
  padding-top: 0.2rem;
}
.unlock-section > summary.unlock-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.35rem 0.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.unlock-summary::-webkit-details-marker { display: none; }
.unlock-summary .unlock-title { color: #b34e6b; font-size: 1rem; font-weight: 600; margin: 0; }
.unlock-summary .unlock-sub {
  flex: 1;
  min-width: 0;
  font-size: 0.7rem;
  color: #c98a9f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unlock-summary .unlock-caret { flex: 0 0 auto; color: #d06a8c; transition: transform var(--d-2); }
.unlock-section[open] .unlock-caret { transform: rotate(180deg); }
.unlock-section[open] > summary.unlock-summary { margin-bottom: 0.15rem; }
.unlock-body { padding-top: 0.15rem; }

/* ============================================================
   阶段 B2：「作品卡片」降级
   ------------------------------------------------------------
   128 张卡 + 48 个艺术家标签原来一次性铺开：手机端实测 filterTabs
   高 1396px(SE) / 1012px(iPhone14)，作品网格要到 y1940 / y1520 才
   出现 —— 首屏（568 / 844）根本看不到作品。
   处理：首屏只渲染 12 张，末尾给「展开全部」；窄屏把艺术家标签压成
   单行横滑（高度 1396px → ~44px）。
   ============================================================ */
.works-more {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0.2rem auto 0;
  padding: 0.7rem 1.6rem;
  min-height: 44px;
  border: 1px dashed #ffc2d4;
  border-radius: 60px;
  background: #fff8fa;
  color: #b1627d;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--d-2);
}
.works-more:hover { background: #fff0f4; border-color: #e982a2; }
@media (max-width: 768px) {
  .filter-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 0 2px 8px;
    margin-bottom: 1.2rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { flex: 0 0 auto; white-space: nowrap; }
}

/* 阶段 B2 补充：≤380px（SE / 320 档）把统计条压扁
   ------------------------------------------------------------
   实测 320 宽时 .stats-bar 高 112px（三个指标各占一行），叠加
   页签 56 + 子页签 56 + 筛选条 52，作品网格被推到 y585 —— 首屏
   （568）刚好差 17px 看不到作品。这里收掉内边距/行距后网格落到
   首屏之内。只动 ≤380，不影响 390/414/428 的正常留白。 */
@media (max-width: 380px) {
  .stats-bar {
    gap: 0.9rem;
    margin: 0.4rem 0 1rem;
    padding: 0.5rem 0.9rem;
    border-radius: 18px;
  }
  .stat-item { font-size: 0.74rem; gap: 5px; }
  .stat-item i { font-size: 0.9rem; }
  .stat-number { font-size: 0.95rem; }
  .filter-tabs { margin-bottom: 0.9rem; }
}

/* ---------- 歌词副行：翻译 / 罗马音 ----------
   网关的 /api/lyric 同时返回 translated 和 roma，
   LyricHelper 按最近邻时间戳把它们挂到主歌词行上。 */
.lyr-line .lrc-main { display: block; }
.lyr-line .lrc-sub {
  display: block;
  font-size: .78em;
  line-height: 1.45;
  opacity: .72;
  margin-top: 2px;
}
.lyr-line .lrc-sub.roma { font-size: .72em; opacity: .58; letter-spacing: .01em; }
.lyr-line.active .lrc-sub { opacity: .92; }
.lyr-line.active .lrc-sub.roma { opacity: .8; }