/* ============================================================
   音乐播放器：独立页 + 首页迷你挂件
   ============================================================ */
.mp{
  --mp-accent:var(--primary);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.mp-main{display:flex;gap:26px;padding:30px 34px;align-items:center}
.mp-cover{
  width:190px;height:190px;flex:none;border-radius:14px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:grid;place-items:center;color:#fff;font-size:64px;
}
.mp-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.mp-cover img.show{opacity:1}
.mp-cover span{opacity:.85}
.mp-cover.hasimg span{opacity:0}
.mp-info{flex:1;min-width:0}
.mp-title{font-size:24px;font-weight:700;font-family:var(--font-head);letter-spacing:1px}
.mp-artist{color:var(--muted);margin:4px 0 14px;font-size:13.5px;letter-spacing:1px}
.mp-controls{display:flex;align-items:center;gap:10px;margin-bottom:12px;justify-content:center}
.mp-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);
  color:var(--text);font-size:15px;cursor:pointer;display:grid;place-items:center;transition:.2s;line-height:1;
}
.mp-btn svg{width:19px;height:19px}
.mp-btn:hover{border-color:var(--mp-accent);color:var(--mp-accent);transform:scale(1.06)}
.mp-play{width:54px;height:54px;background:linear-gradient(135deg,var(--primary),var(--accent));border:0;color:#fff;font-size:20px}
.mp-play svg{width:23px;height:23px}
.mp-play:hover{filter:brightness(1.08);color:#fff;transform:scale(1.05)}
.mp-mode svg{width:17px;height:17px}
.mp-mode.on{background:var(--mp-accent);color:#fff;border-color:transparent}
.mp-bar{
  height:5px;border-radius:4px;background:var(--line);cursor:pointer;position:relative;
}
.mp-prog{
  position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}
.mp-time{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;width:100%}
.mp-list{max-height:420px;overflow-y:auto;border-top:1px solid var(--line)}
.mp-list .mp-item{
  display:flex;align-items:center;gap:12px;padding:13px 34px;cursor:pointer;transition:.18s;
  border-bottom:1px dashed var(--line);
}
.mp-list .mp-item:last-child{border-bottom:0}
.mp-list .mp-item:hover{background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.mp-list .mp-item.on{background:color-mix(in srgb,var(--primary) 9%,transparent)}
.mp-list .mp-item .n{width:26px;text-align:center;color:var(--muted);font-size:12.5px;flex:none}
.mp-list .mp-item.on .n{color:var(--primary);font-weight:700}
.mp-list .mp-item .t{flex:1;min-width:0}
.mp-list .mp-item .t b{display:block;font-size:14.5px;font-weight:600}
.mp-list .mp-item .t small{color:var(--muted);font-size:12px}
.mp-list .mp-item .eq{color:var(--primary);font-size:11px;letter-spacing:1px;display:none;flex:none}
.mp-list .mp-item.on .eq{display:block}
.mp-list::-webkit-scrollbar{width:6px}
.mp-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* ---- 首页迷你挂件（右侧栏，小巧半透明，不喧宾夺主） ---- */
.mp-mini{
  display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:5px;
  padding:13px 14px;border-radius:16px;margin-bottom:18px;
  background:color-mix(in srgb,var(--card) 74%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 68%,transparent);
  box-shadow:none;position:relative;z-index:5;overflow:visible;
}
.mp-mini-cover{
  grid-column:1;grid-row:1 / span 2;align-self:start;
  width:46px;height:46px;border-radius:50%;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:grid;place-items:center;color:#fff;font-size:18px;
}
.mp-mini-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.mp-mini-cover img.show{opacity:1}
.mp-mini-cover.hasimg span{opacity:0}
.mp-mini-info{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-mini-info .mp-title{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-mini-info .mp-artist{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.mp-mini-info .mp-controls{margin:6px 0 0;gap:8px}
.mp-mini .mp-btn{
  width:28px;height:28px;border-radius:50%;font-size:0;
  border:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  background:color-mix(in srgb,var(--bg2) 55%,transparent);color:var(--text);
  display:grid;place-items:center;cursor:pointer;transition:.2s;line-height:1;
}
.mp-mini .mp-btn svg{width:15px;height:15px}
.mp-mini .mp-play{width:34px;height:34px;background:linear-gradient(135deg,var(--primary),var(--accent));border:0;color:#fff}
.mp-mini .mp-play svg{width:18px;height:18px}
.mp-mini .mp-play:hover{filter:brightness(1.08);color:#fff}
.mp-mini .mp-mode.on{background:var(--mp-accent);color:#fff;border-color:transparent}
.mp-mini .mp-bar{grid-column:1 / -1;height:3px;width:100%}
.mp-mini .mp-time{grid-column:1 / -1;margin-top:0;font-size:10.5px}
/* ---- 自定义选曲下拉（跟随主题，半透明） ---- */
.mp-mini .mp-drop-wrap{grid-column:1 / -1;position:relative}
.mp-mini .mp-drop{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:9px;cursor:pointer;user-select:none;
  border:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  background:color-mix(in srgb,var(--bg2) 55%,transparent);color:var(--text);
  transition:.18s;
}
.mp-mini .mp-drop:hover{border-color:color-mix(in srgb,var(--primary) 55%,transparent)}
.mp-mini .mp-drop.open{border-color:var(--primary)}
.mp-mini .mp-drop-cur{
  flex:1;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mp-mini .mp-drop-arr{width:14px;height:14px;flex:none;color:var(--muted);transition:transform .2s}
.mp-mini .mp-drop.open .mp-drop-arr{transform:rotate(180deg);color:var(--primary)}
.mp-mini .mp-drop-panel{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;
  max-height:240px;overflow-y:auto;border-radius:12px;padding:6px;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 32px color-mix(in srgb,var(--text) 12%,transparent);
}
.mp-mini .mp-drop-panel .mp-drop-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  cursor:pointer;transition:.15s;
}
.mp-mini .mp-drop-panel .mp-drop-item:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.mp-mini .mp-drop-panel .mp-drop-item.on{background:color-mix(in srgb,var(--primary) 13%,transparent)}
.mp-mini .mp-drop-panel .mp-drop-item .i{
  width:20px;flex:none;text-align:center;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.mp-mini .mp-drop-panel .mp-drop-item.on .i{color:var(--primary);font-weight:700}
.mp-mini .mp-drop-panel .mp-drop-item .t{flex:1;min-width:0}
.mp-mini .mp-drop-panel .mp-drop-item .t b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-mini .mp-drop-panel .mp-drop-item .t small{color:var(--muted);font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-mini .mp-drop-panel .mp-drop-item .eq{display:none;color:var(--primary);font-size:11px;flex:none}
.mp-mini .mp-drop-panel .mp-drop-item.on .eq{display:block}
.mp-mini .mp-drop-panel::-webkit-scrollbar{width:6px}
.mp-mini .mp-drop-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

@media (max-width:768px){
  .mp-main{flex-direction:column;padding:22px 16px;gap:16px;text-align:center}
  .mp-cover{width:150px;height:150px;font-size:46px}
  .mp-info{width:100%}
  .mp-controls{justify-content:center}
  .mp-main .mp-bar{max-width:320px;margin:0 auto}
  .mp-main .mp-time{max-width:320px;margin:6px auto 0}
  .mp-list .mp-item{padding:12px 16px}
  .mp-mini{gap:4px;padding:12px;margin-bottom:14px}
  .mp-mini-cover{width:42px;height:42px;font-size:16px}
  .mp-mini-info .mp-title{font-size:13px}
}

/* ---------- 加密音乐解锁弹层 & 锁标识 ---------- */
.mp-lock{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;background:rgba(8,8,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}
.mp-lock.open{display:flex}
.mp-lock-box{width:min(360px,92vw);background:var(--card,#fff);color:var(--text,#1c1c1e);border:1px solid var(--line,rgba(128,128,128,.25));border-radius:16px;padding:26px 24px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.mp-lock-box b{font-size:16px;letter-spacing:.5px}
.mp-lock-in{width:100%;box-sizing:border-box;padding:11px 14px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:10px;background:var(--bg,#faf8f4);color:inherit;font-size:14px;outline:none;transition:border-color .2s}
.mp-lock-in:focus{border-color:var(--accent,#6c5ce7)}
.mp-lock-btns button{flex:1;padding:9px 0;border-radius:10px;font-size:13.5px;cursor:pointer;border:none}
.mp-lock-ok{background:var(--accent,#6c5ce7);color:#fff;font-weight:600}
.mp-lock-no{background:rgba(128,128,128,.14);color:inherit}
.mp-item.mp-locked .t,.mp-drop-item.mp-locked .t{opacity:.72}
.mp-item .lk,.mp-drop-item .lk{font-style:normal;font-size:12px;margin-left:2px;vertical-align:1px}