/* 音乐：主页 / 我的 / 播放器 / 悬浮球（原 index.html 第 3394-3618 行） */

/* ============================================================
   音乐：主页 / 我的 / 播放器 / 悬浮球
   ============================================================ */
.music-view{ background:var(--bg); position:relative; }
.music-head{
  flex:0 0 auto;
  display:flex; align-items:center; gap:2px;
  padding:var(--head-top) 10px 2px;
}
.music-head h1{ flex:1; margin:0 0 0 4px; font-size:20px; font-weight:700; }
.music-body{
  flex:1; min-height:0; overflow-y:auto;
  overscroll-behavior:contain;
  padding:8px 18px 90px;
}
.music-body::-webkit-scrollbar{ width:0; }
.mu-search{
  display:flex; align-items:center; gap:8px;
  background:var(--fill); border-radius:999px;
  padding:0 14px; height:42px;
}
.mu-search svg{ width:17px; height:17px; fill:none; stroke:var(--gray-2); stroke-width:2; stroke-linecap:round; }
.mu-search input{
  flex:1; border:none; background:none; outline:none;
  font-family:inherit; font-size:14px; color:var(--ink);
}
.mu-sec-title{
  display:flex; align-items:center; justify-content:space-between;
  margin:20px 2px 10px;
  font-size:15px; font-weight:700;
}
.mu-sec-title button{
  border:none; background:var(--fill); color:var(--gray-1);
  border-radius:999px; padding:5px 12px;
  font-family:inherit; font-size:11.5px; cursor:pointer;
}
.mu-playlists{
  display:flex; gap:12px; overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
}
.mu-playlists::-webkit-scrollbar{ height:0; }
.mu-pl-card{
  flex:0 0 116px; border:none; background:none; padding:0;
  text-align:left; cursor:pointer; font-family:inherit;
}
.mu-pl-card img{
  width:116px; height:116px; border-radius:18px; object-fit:cover;
  background:var(--fill);
}
.mu-pl-card span{
  margin-top:6px;
  font-size:11.5px; line-height:1.45; color:var(--ink);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.mu-song{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:7px 2px;
  border:none; background:none; cursor:pointer;
  text-align:left; font-family:inherit;
  border-radius:14px;
}
.mu-song:active{ background:var(--fill); }
.mu-song img, .mu-song .mu-cover-ph{
  width:46px; height:46px; border-radius:12px; object-fit:cover; flex:0 0 auto;
  background:var(--fill);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-3);
}
.mu-song .mu-cover-ph svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.mu-song-word{ flex:1; min-width:0; }
.mu-song-word b{
  display:block; font-size:13.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mu-song-word small{
  display:block; margin-top:2px; font-size:11px; color:var(--gray-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mu-song .mu-like{
  flex:0 0 auto; width:32px; height:32px;
  border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-3);
}
.mu-song .mu-like.on{ color:#FF4D6A; }
.mu-song .mu-like svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; }
.mu-song .mu-like.on svg{ fill:currentColor; }
.mu-empty{ padding:26px 0; text-align:center; font-size:12.5px; color:var(--gray-2); }
.mu-me-hero{
  display:flex; align-items:center; gap:14px;
  padding:14px 4px 4px;
}
.mu-me-hero img{ width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--fill); }
.mu-me-hero b{ font-size:17px; }
.mu-me-hero small{ display:block; margin-top:3px; font-size:11.5px; color:var(--gray-2); }
.mu-me-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:16px;
}
.mu-me-cell{
  border:none; border-radius:18px; padding:14px;
  background:var(--fill); text-align:left; cursor:pointer; font-family:inherit;
}
.mu-me-cell b{ display:block; font-size:14px; }
.mu-me-cell small{ display:block; margin-top:3px; font-size:11px; color:var(--gray-2); }
/* 音乐底栏：左右分页 + 中间播放器入口 */
.music-tab{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 20px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline);
}
.music-tab .mtab{
  border:none; background:none; cursor:pointer;
  font-family:inherit; font-size:11px; color:var(--gray-2);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.music-tab .mtab.on{ color:var(--ink); }
.music-tab .mtab svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.music-tab .mtab-play{
  width:54px; height:54px; border-radius:50%;
  border:none; cursor:pointer;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -8px rgba(11,11,15,.5);
  margin-top:-18px; overflow:hidden;
}
.music-tab .mtab-play svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.music-tab .mtab-play img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.music-tab .mtab-play.spin img{ animation:muSpin 12s linear infinite; }
@keyframes muSpin{ to{ transform:rotate(360deg); } }
/* 全屏播放器 */
.mu-player{
  position:absolute; inset:0; z-index:97;
  display:none; flex-direction:column;
  background:linear-gradient(180deg, #2A2A33, #141418);
  color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));
}
.mu-player.show{ display:flex; animation:viewIn .3s var(--ease-out) both; }
.mu-player-head{ display:flex; align-items:center; justify-content:space-between; }
.mu-player-head button{
  width:38px; height:38px; border:none; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mu-player-head button svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mu-player-cover{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:18px 0;
}
.mu-player-cover img, .mu-player-cover .mu-disc{
  width:min(64vw, 260px); height:min(64vw, 260px);
  border-radius:50%; object-fit:cover;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  background:#222;
}
.mu-player.playing .mu-player-cover img{ animation:muSpin 22s linear infinite; }
.mu-disc{ display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3); }
.mu-disc svg{ width:64px; height:64px; fill:none; stroke:currentColor; stroke-width:1.6; }
.mu-player-word{ text-align:center; }
.mu-player-word b{ display:block; font-size:19px; font-weight:700; }
.mu-player-word small{ display:block; margin-top:5px; font-size:12.5px; color:rgba(255,255,255,.55); }
.mu-prog{ margin-top:20px; }
.mu-prog input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:2px;
  background:rgba(255,255,255,.2);
  outline:none; cursor:pointer;
}
.mu-prog input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:none;
}
.mu-prog-time{
  display:flex; justify-content:space-between;
  margin-top:6px;
  font-size:10.5px; color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}
.mu-ctrl{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding:0 8px;
}
.mu-ctrl button{
  border:none; background:none; color:#fff; cursor:pointer;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
}
.mu-ctrl button svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mu-ctrl .mu-play-big{
  width:66px; height:66px; border-radius:50%;
  background:#fff; color:#141418;
}
.mu-ctrl .mu-play-big svg{ width:28px; height:28px; }
.mu-ctrl .mu-heart.on{ color:#FF4D6A; }
.mu-ctrl .mu-heart.on svg{ fill:currentColor; }
/* 悬浮球（在播放时离开播放器出现，可拖动） */
.mu-float{
  position:absolute; z-index:95;
  width:52px; height:52px; border-radius:50%;
  background:var(--ink);
  box-shadow:0 10px 24px -8px rgba(11,11,15,.55);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; touch-action:none;
  overflow:hidden;
}
.mu-float.show{ display:flex; }
.mu-float img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.mu-float.playing img{ animation:muSpin 10s linear infinite; }
.mu-float svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.9; }
/* 上传歌曲弹窗分段 */
.mu-up-seg{ display:flex; gap:6px; margin-bottom:12px; }
.mu-up-seg button{
  flex:1; height:36px; border:none; border-radius:12px;
  background:var(--fill); color:var(--gray-1);
  font-family:inherit; font-size:13px; cursor:pointer;
}
.mu-up-seg button.on{ background:var(--ink); color:#fff; }

/* ============ 网易云账号：登录 / 账号面板 ============ */
.mu-login-btn.on{ color:#E5342B; }
.mu-qr-pane{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:4px 0; }
.mu-qr-pane img{ width:180px; height:180px; border-radius:16px; background:#fff; padding:6px; box-shadow:0 4px 18px rgba(0,0,0,.08); }
.mu-qr-pane .friend-hint{ margin:0; text-align:center; }
.mu-acct-hero{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0 16px; }
.mu-acct-hero img{ width:72px; height:72px; border-radius:50%; object-fit:cover; background:var(--fill); }
.mu-acct-hero b{ font-size:16px; }
.mu-acct-hero span{ font-size:11.5px; color:var(--gray-2); text-align:center; }
.mu-me-wide{ width:100%; margin-top:10px; display:block; }

/* ============ 播放器：右上按钮组 / 歌词 / 一起听标签 ============ */
.mu-player-head-r{ display:flex; gap:8px; }
.mu-player-cover[hidden], .mu-lyric[hidden], #muTogetherTag[hidden], .mu-qr-pane[hidden]{ display:none; }
.mu-lyric{
  flex:1; min-height:0; overflow-y:auto;
  padding:24px 8px; text-align:center;
  mask-image:linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
  scrollbar-width:none; cursor:pointer;
}
.mu-lyric::-webkit-scrollbar{ width:0; }
.mu-lyric p{
  margin:0; padding:7px 0;
  font-size:14px; line-height:1.55; color:rgba(255,255,255,.42);
  transition:color .3s, transform .3s, font-size .3s;
}
.mu-lyric p.on{ color:#fff; font-size:16.5px; font-weight:600; }
.mu-lyric-empty{ color:rgba(255,255,255,.4) !important; padding-top:60px !important; }
#muTogetherTag{
  display:inline-block; margin-top:8px; padding:3px 10px;
  border-radius:999px; background:rgba(255,255,255,.12);
  font-size:11px; font-style:normal; color:rgba(255,255,255,.85);
}
#muTogetherTag::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#5EE39B; margin-right:6px; vertical-align:1px;
  animation:muPulse 1.4s ease-in-out infinite;
}
@keyframes muPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* 好友选择列表头像 */
.mu-pick-avatar{
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  background:var(--fill); color:var(--gray-1);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; margin-right:10px; vertical-align:middle;
}
#muPickList .sheet-item > span,
#muInvActList .sheet-item > span{ display:flex; align-items:center; }
#muPickList{ max-height:300px; overflow-y:auto; }