#global-aplayer.aplayer-fixed {
  z-index: 9999;

  /* Narrower fixed player */
  --ap-width: 360px;

  /* Remove APlayer default white card to avoid "white base" leakage */
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /*
    Invert scheme for contrast:
    - Site is light => player is darker (still readable, not pure black)
    - Site is dark  => player is lighter (still soft, not pure white)
  */
  --ap-bg: rgba(15, 23, 42, 0.86);
  --ap-border: rgba(255, 255, 255, 0.10);
  --ap-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  --ap-title: #e5e9f0;
  --ap-sub: rgba(229, 233, 240, 0.72);
  --ap-icon: rgba(229, 233, 240, 0.85);
  --ap-bar: rgba(255, 255, 255, 0.22);
  --ap-loaded: rgba(255, 255, 255, 0.32);
  --ap-time: rgba(229, 233, 240, 0.75);
  --ap-hover: rgba(255, 255, 255, 0.06);
  --ap-active: rgba(255, 255, 255, 0.10);
  --ap-sep: rgba(255, 255, 255, 0.08);
  /* Lyrics are rendered over page background, so follow SITE scheme (not inverted player scheme). */
  --ap-lrc: rgba(7, 11, 20, 0.92);
  --ap-lrc-dim: 0.90;
  --ap-lrc-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 10px 26px rgba(0, 0, 0, 0.12);
  --ap-lrc-current: rgb(168, 210, 54);
}

/* Site dark -> player light (but not pure white) */
html[data-user-color-scheme='dark'] #global-aplayer.aplayer-fixed {
  --ap-bg: rgba(248, 250, 252, 0.92);
  --ap-border: rgba(15, 23, 42, 0.10);
  --ap-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  --ap-title: rgba(15, 23, 42, 0.92);
  --ap-sub: rgba(15, 23, 42, 0.65);
  --ap-icon: rgba(15, 23, 42, 0.75);
  --ap-bar: rgba(15, 23, 42, 0.18);
  --ap-loaded: rgba(15, 23, 42, 0.26);
  --ap-time: rgba(15, 23, 42, 0.70);
  --ap-hover: rgba(15, 23, 42, 0.06);
  --ap-active: rgba(15, 23, 42, 0.10);
  --ap-sep: rgba(15, 23, 42, 0.08);
  --ap-lrc: rgba(229, 233, 240, 0.92);
  --ap-lrc-dim: 0.72;
  --ap-lrc-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
  --ap-lrc-current: rgb(168, 210, 54);
}

#global-aplayer.aplayer-fixed,
#global-aplayer.aplayer-fixed .aplayer-body,
#global-aplayer.aplayer-fixed .aplayer-list {
  max-width: var(--ap-width);
}

/*
  Keep APlayer's fixed-mode positioning logic intact.
  Only skin visuals here to avoid breaking width/controls.
*/
#global-aplayer.aplayer-fixed .aplayer-body {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ap-border);
  box-shadow: var(--ap-shadow);
  background: var(--ap-bg);
  backdrop-filter: blur(10px);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#global-aplayer.aplayer-fixed .aplayer-info {
  /* APlayer fixed template sets inline display:none; force-enable */
  display: block !important;
}

#global-aplayer.aplayer-fixed .aplayer-title {
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ap-title);
}

#global-aplayer.aplayer-fixed .aplayer-author {
  font-size: 12px;
  color: var(--ap-sub);
}

#global-aplayer.aplayer-fixed .aplayer-bar {
  background: var(--ap-bar);
}

#global-aplayer.aplayer-fixed .aplayer-loaded {
  background: var(--ap-loaded);
}

#global-aplayer.aplayer-fixed .aplayer-time {
  color: var(--ap-time);
}

#global-aplayer.aplayer-fixed .aplayer-miniswitcher {
  background: var(--ap-hover);
  border-left: 1px solid var(--ap-sep);
  border-radius: 0 14px 14px 0;
}

#global-aplayer.aplayer-fixed .aplayer-miniswitcher .aplayer-icon path,
#global-aplayer.aplayer-fixed .aplayer-time .aplayer-icon path {
  fill: var(--ap-icon);
}

#global-aplayer.aplayer-fixed .aplayer-lrc {
  text-shadow: var(--ap-lrc-shadow);
}

#global-aplayer.aplayer-fixed .aplayer-lrc p {
  color: var(--ap-lrc);
  opacity: var(--ap-lrc-dim, 0.75);
}

#global-aplayer.aplayer-fixed .aplayer-lrc p.aplayer-lrc-current {
  color: var(--ap-lrc-current);
  opacity: 1;
  font-weight: 600;
  display: inline-block !important;
  padding: 0 8px !important;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.22);
  border: 1px solid rgba(15, 23, 42, 0.14);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-user-color-scheme='dark'] #global-aplayer.aplayer-fixed .aplayer-lrc p.aplayer-lrc-current {
  background: rgba(0, 0, 0, 0.35);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Light mode: add a readable lyric backdrop so it won't "disappear" on bright pages. */
html:not([data-user-color-scheme='dark']) #global-aplayer.aplayer-fixed .aplayer-lrc {
  /* APlayer fixed-mode lrc spans full viewport; shrink it to a pill around the text. */
  width: fit-content;
  max-width: calc(100vw - 24px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);

  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);

  text-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html:not([data-user-color-scheme='dark']) #global-aplayer.aplayer-fixed .aplayer-lrc p {
  color: rgba(0, 0, 0, 0.72);
  opacity: 1;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.70);
}

html:not([data-user-color-scheme='dark']) #global-aplayer.aplayer-fixed .aplayer-lrc p.aplayer-lrc-current {
  color: rgba(0, 0, 0, 0.92);
  opacity: 1;
  font-weight: 700;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85);
}

#global-aplayer.aplayer-fixed .aplayer-list {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ap-border);
  border-bottom: 0;
  box-shadow: var(--ap-shadow);
  background: var(--ap-bg);
  backdrop-filter: blur(10px);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#global-aplayer.aplayer-fixed .aplayer-list.aplayer-list-hide {
  /* Folded list should not leave a visible strip */
  border: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
}

#global-aplayer.aplayer-fixed .aplayer-list ol {
  padding: 6px 0;
}

#global-aplayer.aplayer-fixed .aplayer-list ol li {
  height: auto;
  line-height: 1.35;
  padding: 8px 12px;
  border-top: 1px solid var(--ap-sep);
}

#global-aplayer.aplayer-fixed .aplayer-list ol li:first-child {
  border-top: none;
}

#global-aplayer.aplayer-fixed .aplayer-list ol li:hover {
  background: var(--ap-hover);
}

#global-aplayer.aplayer-fixed .aplayer-list ol li.aplayer-list-light {
  background: var(--ap-active);
}

#global-aplayer.aplayer-fixed .aplayer-list-title {
  color: var(--ap-title);
}

#global-aplayer.aplayer-fixed .aplayer-list-index,
#global-aplayer.aplayer-fixed .aplayer-list-author {
  color: var(--ap-sub);
}

#global-aplayer.aplayer-fixed:has(.aplayer-list:not(.aplayer-list-hide)) .aplayer-list {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#global-aplayer.aplayer-fixed:has(.aplayer-list:not(.aplayer-list-hide)) .aplayer-body {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (max-width: 576px) {
  /* keep it inside viewport on small screens */
  #global-aplayer.aplayer-fixed {
    --ap-width: calc(100vw - 20px);
  }
}