/* SHIFT Music */
.mxbar{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(10px + env(safe-area-inset-bottom)); z-index:55; width:min(560px,calc(100% - 20px));
  display:flex; align-items:center; gap:6px; padding:8px 8px 8px 8px; border-radius:16px; background:var(--panel); border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden; }
.mxbar.hidden{ display:none; }
body.mxon main{ padding-bottom:96px; }
.mxbar-prog{ position:absolute; left:0; right:0; top:0; height:3px; background:var(--line); }
.mxbar-prog i{ display:block; height:100%; width:0; background:var(--accent2); transition:width .25s linear; }
.mxbar-info{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; color:var(--ink); text-align:left; cursor:pointer; }
.mxbar-info img{ width:42px; height:42px; border-radius:9px; object-fit:cover; flex:0 0 42px; background:var(--panel2); }
.mxbar-info span{ min-width:0; display:flex; flex-direction:column; }
.mxbar-info b, .mxbar-info small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mxbar-info small{ color:var(--muted); font-size:12px; }
.mxbtn{ width:40px; height:40px; flex:0 0 40px; border-radius:50%; border:0; background:transparent; color:var(--ink); font-size:17px; display:grid; place-items:center; padding:0; cursor:pointer; }
.mxbtn.on{ background:var(--panel2); box-shadow:inset 0 0 0 2px var(--accent2); }
.mxbtn.mxplay{ background:var(--accent2); color:#fff; }
.mxbtn.mxplay.big{ width:64px; height:64px; flex-basis:64px; font-size:24px; }
.mxbtn.mxclose{ color:var(--muted); font-size:14px; }
@media (max-width:400px){ .mxbar #mxBarPrev{ display:none; } }
.mxnow{ text-align:center; padding:18px 16px; }
.mxcover{ width:min(260px,70vw); aspect-ratio:1; object-fit:cover; border-radius:16px; display:block; margin:0 auto 14px; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.mxtitle{ font-size:20px; font-weight:800; }
.mxseek, .mxvol input{ width:100%; accent-color:var(--accent2); margin:14px 0 2px; }
.mxtimes{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.mxctrls{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:8px; }
.mxvol{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.mxvol input{ margin:0; }
.mxthumb{ width:52px; height:52px; border-radius:10px; object-fit:cover; background:var(--panel2); }
.mxlist{ margin-top:10px; }
.mxrow{ width:100%; display:flex; align-items:center; gap:10px; padding:8px 4px; border:0; border-top:1px solid var(--line); background:none; color:var(--ink); text-align:left; cursor:pointer; }
.mxrow img{ width:40px; height:40px; border-radius:8px; object-fit:cover; }
.mxrow .mxn{ width:20px; text-align:center; color:var(--muted); font-size:13px; flex:0 0 20px; }
.mxrow .mxrt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mxrow .mxrt b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mxrow .mxrt small{ color:var(--muted); font-size:12px; }
.mxrow.on .mxrt b{ color:var(--accent2); }
.mxeq{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.mxeq i{ width:3px; background:var(--accent2); animation:mxeq .9s ease-in-out infinite; }
.mxeq i:nth-child(2){ animation-delay:.2s; } .mxeq i:nth-child(3){ animation-delay:.4s; }
.mxrow.paused .mxeq i{ animation:none; height:5px; }
@keyframes mxeq{ 0%,100%{ height:4px; } 50%{ height:14px; } }
@media (prefers-reduced-motion:reduce){ .mxeq i{ animation:none; height:8px; } }