/* player */
#player.up{transform:none}
#pcard{
  position:relative;pointer-events:auto;width:100%;height:var(--mini-h);border-radius:32px;overflow:hidden;
  background:var(--md-surface-container);border:1px solid color-mix(in srgb,var(--md-outline) 30%,transparent);
  display:flex;align-items:center;gap:6px;padding:0 10px;cursor:pointer;
}
#pctl{display:flex;align-items:center;gap:2px;flex:0 0 auto}
#pctl button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--md-on-surface)}
#pctl button:hover{background:color-mix(in srgb,var(--md-on-surface) 9%,transparent)}
#pctl button:disabled{opacity:.32;pointer-events:none}
#pctl button#pplay{background:var(--md-primary);color:var(--md-on-primary)}
#pctl button#pplay:hover{background:color-mix(in srgb,var(--md-primary) 90%,#000)}
#pctl svg{width:20px;height:20px;fill:currentColor;stroke:none}
#pcenter{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px}
#pcenter .pcover{width:44px;height:44px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:var(--md-surface-container-high)}
#pmeta{min-width:0;text-align:left}
#pmeta .t{font-size:13px;line-height:17px;font-weight:700;letter-spacing:.1px}
#pmeta .s{font-size:11px;line-height:15px;letter-spacing:.3px;color:var(--md-secondary)}
#plike,#pmore{width:38px;height:38px;flex:0 0 auto;color:var(--md-on-surface)}
#plike svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
#pmore svg{width:20px;height:20px;fill:currentColor;stroke:none}
#plike:disabled,#pmore:disabled{opacity:.32;pointer-events:none}
#plike.on{color:var(--md-primary)}
#plike.on svg{fill:currentColor;stroke:none}
#pbar{position:absolute;left:18px;right:18px;bottom:5px;height:2px;border-radius:1px;pointer-events:none;
  background:color-mix(in srgb,var(--md-outline) 40%,transparent)}
#pbar::after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--p,0%);
  background:var(--md-primary);border-radius:1px;transition:width .25s linear}
@media (max-width:360px){
  #pcard{gap:2px}
  #pctl button{width:32px;height:32px}
  #pctl svg{width:18px;height:18px}
  #pcenter{gap:8px}
  #pcenter .pcover{width:40px;height:40px}
  #plike,#pmore{width:34px;height:34px}
}
/* ================= full player (Player.kt BottomSheetPlayer) ================= */
#np{
  position:fixed;inset:0;z-index:65;background:var(--md-surface);display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform var(--dur-sheet) var(--ease-sheet);overflow-y:auto;
}
#np.open{transform:none}
#np .nphandle{width:36px;height:4px;border-radius:2px;background:var(--md-outline-variant);margin:8px auto 2px;flex:0 0 auto}
#np .nptop{display:flex;align-items:center;padding:4px 12px 8px;flex:0 0 auto}
#np .npsp{width:48px;flex:0 0 auto}
#np .npfrom{flex:1;text-align:center;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.5px;
  color:var(--md-on-surface-variant);text-transform:uppercase}
#np .npart{display:grid;place-items:center;padding:12px 32px}
#np .npart img{width:min(72vw,420px);aspect-ratio:1;border-radius:16px;object-fit:cover;background:var(--md-surface-container-high)}
#np .npart video{display:none;width:min(92vw,720px);aspect-ratio:16/9;border-radius:16px;background:#000;object-fit:contain}
#np.video .npart img{display:none}
#np.video .npart video{display:block}
/* VideoModePill.kt: a small pill that switches the current track between audio and video. */
.vpill{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:16px;
  background:var(--md-surface-container-high);color:var(--md-on-surface);
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:.5px;
}
.vpill.on{background:var(--md-primary);color:var(--md-on-primary)}
.vpill svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#np .npmode{padding:14px 32px 0;display:flex;gap:8px;align-items:center}
#np .npmeta{padding:20px 32px 0}
#np .npt{font-size:22px;line-height:28px;font-weight:700}
#np .npa{font-size:16px;line-height:24px;letter-spacing:.15px;color:var(--md-on-surface-variant);margin-top:2px}
#np .npseek{padding:20px 24px 0}
#np .npseek input{width:100%;-webkit-appearance:none;height:4px;border-radius:2px;outline:0;
  background:color-mix(in srgb,var(--md-primary) 26%,transparent)}
#np .npseek input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--md-primary);cursor:pointer}
#np .npseek input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--md-primary);cursor:pointer}
#np .nptimes{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;line-height:16px;
  letter-spacing:.4px;color:var(--md-on-surface-variant);font-variant-numeric:tabular-nums}
#np .npctl{display:flex;align-items:center;justify-content:center;gap:9px;padding:24px 12px 8px}
#np .npctl button{display:grid;place-items:center;color:var(--md-on-surface);flex:0 0 auto}
#np .npctl svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#np .npx{width:46px;height:46px;border-radius:50%}
#np .npx svg{width:24px;height:24px}
#np .npx.on{color:var(--md-primary)}
#np #npmore{color:var(--md-on-surface-variant)}
#np .npx:hover,#np .npside:hover{background:color-mix(in srgb,var(--md-on-surface) 9%,transparent)}
#np .npside{width:54px;height:54px;border-radius:27px;background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
#np .npside svg{width:28px;height:28px;fill:currentColor;stroke:none}
#np .npplay{width:128px;max-width:33vw;height:64px;border-radius:32px;background:var(--md-primary);
  color:var(--md-on-primary);transition:width var(--dur-play) var(--ease-play)}
#np .npplay:active{width:140px}
#np .npplay svg{width:32px;height:32px;fill:currentColor;stroke:none}
#np .nppanel{padding:8px 0 32px;flex:1 1 auto;min-height:0}
#np .nptabs{display:flex;gap:6px;padding:6px 12px 10px;overflow-x:auto;scrollbar-width:none}
#np .nptabs::-webkit-scrollbar{display:none}
#np .nptab{min-height:40px;padding:0 18px;border-radius:16px;white-space:nowrap;flex:0 0 auto;
  font-size:14px;font-weight:500;letter-spacing:.1px;background:var(--md-surface-container);color:var(--md-on-surface)}
#np .nptab.on{background:var(--md-primary);color:var(--md-on-primary)}
#np .nppane[hidden]{display:none}

#np .qgrip{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;color:var(--md-on-surface-variant);
  cursor:grab;touch-action:none}
#np .qgrip svg{width:20px;height:20px}
#np li.row.dragging{background:var(--md-surface-container-highest);opacity:.9;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.5);cursor:grabbing}

#np .nplyrics{padding:4px 22px 8px;font-size:16px;line-height:1.5}
#np .nplyr-line{padding:6px 4px;border-radius:8px;color:var(--md-on-surface-variant);
  transition:color .18s,background .18s;cursor:pointer;scroll-margin:40vh}
#np .nplyr-line.on{color:var(--md-on-surface);font-weight:600;background:var(--md-surface-container-high)}
#np .nplyr-plain{white-space:pre-wrap;color:var(--md-on-surface-variant);font-size:15px;line-height:1.55;margin:0;padding:0 4px}
#np .nplyr-msg{padding:20px 4px;color:var(--md-on-surface-variant);font-size:14px}