.aplayer.aplayer-fixed {
  left: unset !important;
  right: 2rem !important;
  bottom: 2rem !important;
  color: #000;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* 列表展开时始终显示背景 */
.aplayer.aplayer-fixed.aplayer-withlist:not(.aplayer-narrow) {
  background: var(--card-bg, white) !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1) !important;
}

.aplayer.aplayer-fixed.aplayer-withlist:not(.aplayer-narrow) .aplayer-body {
  background: var(--card-bg, white) !important;
}

/* 暗色主题：列表展开时显示背景 */
:root.dark .aplayer.aplayer-fixed.aplayer-withlist:not(.aplayer-narrow) {
  background: var(--card-bg, oklch(0.23 0.015 var(--hue))) !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.4) !important;
}

:root.dark .aplayer.aplayer-fixed.aplayer-withlist:not(.aplayer-narrow) .aplayer-body {
  background: var(--card-bg, oklch(0.23 0.015 var(--hue))) !important;
}

/* 鼠标悬浮时显示背景 */
.aplayer.aplayer-fixed:hover {
  background: var(--card-bg, white) !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1) !important;
}

/* 暗色主题悬浮效果 */
:root.dark .aplayer.aplayer-fixed:hover {
  background: var(--card-bg, oklch(0.23 0.015 var(--hue))) !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.4) !important;
}

:root.dark .aplayer.aplayer-fixed {
  color: var(--btn-content, oklch(0.75 0.1 var(--hue)));
}

.aplayer.aplayer-fixed .aplayer-body {
  left: unset !important;
  right: 2rem !important;
  width: 400px !important;
  bottom: 2rem !important;
  max-width: calc(100% - 18px);
  padding-right: 0 !important;
  background: transparent !important;
  transition: background 0.3s ease;
}

/* 鼠标悬浮时显示主体背景 */
.aplayer.aplayer-fixed:hover .aplayer-body {
  background: transparent !important;
}

.aplayer.aplayer-fixed .aplayer-miniswitcher {
  right: unset;
  left: -18px;
  transform: rotate(180deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 触摸设备：始终显示 miniswitcher 和背景 */
@media (hover: none) and (pointer: coarse) {
  .aplayer.aplayer-fixed .aplayer-miniswitcher {
    display: block;
    opacity: 1;
    /* 触摸设备上半透明背景 */
    background: rgba(200, 200, 200, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* 触摸设备暗色主题：半透明背景 */
  :root.dark .aplayer.aplayer-fixed .aplayer-miniswitcher {
    background: rgba(100, 100, 100, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* 触摸设备上始终显示背景 */
  .aplayer.aplayer-fixed {
    background: var(--card-bg, white) !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1) !important;
  }
  
  :root.dark .aplayer.aplayer-fixed {
    background: var(--card-bg, oklch(0.23 0.015 var(--hue))) !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.4) !important;
  }
}

/* 非触摸设备：默认隐藏，悬停时显示 */
@media (hover: hover) {
  .aplayer.aplayer-fixed .aplayer-miniswitcher {
    display: none;
  }

  /* 鼠标悬停在播放器上时显示 miniswitcher */
  .aplayer.aplayer-fixed:hover .aplayer-miniswitcher {
    display: block;
    opacity: 1;
  }

  /* 收起状态下也支持悬停显示 */
  .aplayer.aplayer-fixed.aplayer-narrow:hover .aplayer-miniswitcher {
    display: block;
    opacity: 1;
  }

  /* 列表展开状态时始终显示收缩按钮 */
  .aplayer.aplayer-fixed.aplayer-withlist:not(.aplayer-narrow) .aplayer-miniswitcher {
    display: block !important;
    opacity: 1 !important;
  }
}

/* 禁用初始化时的过渡动画，只在加载完成后恢复 */
.aplayer.aplayer-fixed:not([data-initialized="true"]) .aplayer-body {
  transition: none !important;
}

.aplayer.aplayer-fixed:not([data-initialized="true"]) .aplayer-info {
  transition: none !important;
}

/* 缩小状态下禁用所有过渡动画 */
.aplayer.aplayer-narrow .aplayer-body {
  transition: none !important;
}

.aplayer.aplayer-narrow .aplayer-info {
  transition: none !important;
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  .aplayer.aplayer-fixed {
    right: 0 !important;
    bottom: 0rem !important;
  }
  .aplayer.aplayer-fixed .aplayer-body {
    right: 0 !important;
    bottom: 0rem !important;
  }
}

/* ===== 平板适配 ===== */
@media (min-width: 641px) and (max-width: 1280px) {
  .aplayer.aplayer-fixed {
    right: 0.5rem !important;
    bottom: 2rem !important;
  }
  .aplayer.aplayer-fixed .aplayer-body {
    right: 0.5rem !important;
    bottom: 2rem !important;
  }
}

/* 横屏模式适配 */
@media (orientation: landscape) and (max-height: 640px) {
  .aplayer.aplayer-fixed {
    right: 0.5rem !important;
    bottom: 2rem !important;
  }
  .aplayer.aplayer-fixed .aplayer-body {
    right: 0.5rem !important;
    bottom: 2rem !important;
  }
}

/* ===== 封面播放特效 ===== */
/* 封面基础样式 - 默认正方形（触摸设备） */
.aplayer .aplayer-pic {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
}

/* 确保封面图片适配 */
.aplayer .aplayer-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 桌面端：圆形封面 */
@media (hover: hover) {
  .aplayer .aplayer-pic {
    border-radius: 50%;
  }
  
  .aplayer .aplayer-pic img {
    border-radius: 50%;
  }
}

/* 缩小状态下禁用过渡动画 */
.aplayer.aplayer-narrow .aplayer-pic {
  transition: none !important;
}

/* 旋转动画关键帧 */
@keyframes aplayer-cover-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 亮色主题脉动动画 */
@keyframes aplayer-cover-pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}

/* 暗色主题脉动动画 */
@keyframes aplayer-cover-pulse-dark {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  }
}

/* 桌面端：播放状态旋转动画 */
@media (hover: hover) {
  /* 始终应用旋转动画，但通过 animation-play-state 控制播放/暂停 */
  .aplayer .aplayer-pic {
    animation: aplayer-cover-rotate 20s linear infinite,
      aplayer-cover-pulse 2s ease-in-out infinite;
    animation-play-state: paused;
  }

  /* 播放状态：恢复动画 */
  .aplayer[data-playing="true"] .aplayer-pic,
  .aplayer.aplayer-playing .aplayer-pic {
    animation-play-state: running;
  }

  /* 暂停状态：暂停动画（保持当前位置） */
  .aplayer[data-playing="false"] .aplayer-pic,
  .aplayer.aplayer-pause .aplayer-pic {
    animation-play-state: paused;
  }

  /* 暗色主题下的播放特效 */
  :root.dark .aplayer[data-playing="true"] .aplayer-pic,
  :root.dark .aplayer.aplayer-playing .aplayer-pic {
    animation: aplayer-cover-rotate 20s linear infinite,
      aplayer-cover-pulse-dark 2s ease-in-out infinite;
    animation-play-state: running;
  }

  /* 暗色主题暂停状态 */
  :root.dark .aplayer[data-playing="false"] .aplayer-pic,
  :root.dark .aplayer.aplayer-pause .aplayer-pic {
    animation: aplayer-cover-rotate 20s linear infinite,
      aplayer-cover-pulse-dark 2s ease-in-out infinite;
    animation-play-state: paused;
  }
}

/* 触摸设备：无旋转动画，保持静态 */
@media (hover: none) and (pointer: coarse) {
  .aplayer .aplayer-pic {
    animation: none !important;
  }
  
  .aplayer[data-playing="true"] .aplayer-pic,
  .aplayer.aplayer-playing .aplayer-pic,
  .aplayer[data-playing="false"] .aplayer-pic,
  .aplayer.aplayer-pause .aplayer-pic {
    animation: none !important;
    animation-play-state: paused !important;
  }
}

/* 桌面端：播放时隐藏暂停按钮，暂停时显示播放按钮 */
@media (hover: hover) {
  /* 播放状态时隐藏暂停按钮（封面在转，不需要暂停按钮） */
  .aplayer[data-playing="true"] .aplayer-pic .aplayer-pause,
  .aplayer.aplayer-playing .aplayer-pic .aplayer-pause {
    display: none !important;
  }
  
  /* 播放状态时隐藏播放按钮（因为已经播放了） */
  .aplayer[data-playing="true"] .aplayer-pic .aplayer-play,
  .aplayer.aplayer-playing .aplayer-pic .aplayer-play {
    display: none !important;
  }
  
  /* 暂停状态时隐藏暂停按钮，只显示播放按钮 */
  .aplayer[data-playing="false"] .aplayer-pic .aplayer-pause,
  .aplayer.aplayer-pause .aplayer-pic .aplayer-pause,
  .aplayer:not([data-playing="true"]):not(.aplayer-playing) .aplayer-pic .aplayer-pause {
    display: none !important;
  }
  
  /* 暂停状态时显示播放按钮（通过悬停显示） */
  .aplayer[data-playing="false"] .aplayer-pic:hover .aplayer-play,
  .aplayer.aplayer-pause .aplayer-pic:hover .aplayer-play,
  .aplayer:not([data-playing="true"]):not(.aplayer-playing) .aplayer-pic:hover .aplayer-play {
    display: block !important;
  }
}

/* ===== 亮色主题适配 ===== */

/* ===== 暗色主题适配 ===== */
:root.dark .aplayer {
  background: var(--card-bg, oklch(0.23 0.015 var(--hue)));
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}

:root.dark .aplayer.aplayer-withlist .aplayer-info {
  border-bottom: 1px solid var(--line-divider, rgba(255, 255, 255, 0.08));
}

:root.dark .aplayer.aplayer-fixed .aplayer-list {
  border: 1px solid var(--line-divider, rgba(255, 255, 255, 0.08));
  border-bottom: none;
}

:root.dark .aplayer.aplayer-fixed .aplayer-body {
  background: var(--card-bg, oklch(0.23 0.015 var(--hue)));
}

:root.dark .aplayer.aplayer-fixed .aplayer-lrc {
  text-shadow: -1px -1px 0 var(--card-bg, oklch(0.23 0.015 var(--hue)));
}

:root.dark .aplayer.aplayer-fixed .aplayer-info {
  border-top: 1px solid var(--line-divider, rgba(255, 255, 255, 0.08));
}

:root.dark .aplayer .aplayer-info .aplayer-music .aplayer-author {
  color: var(--content-meta, rgba(255, 255, 255, 0.6));
}

:root.dark
  .aplayer
  .aplayer-info
  .aplayer-controller
  .aplayer-bar-wrap
  .aplayer-bar {
  background: rgba(255, 255, 255, 0.2);
}

:root.dark
  .aplayer
  .aplayer-info
  .aplayer-controller
  .aplayer-bar-wrap
  .aplayer-bar
  .aplayer-loaded {
  background: rgba(255, 255, 255, 0.3);
}

:root.dark .aplayer .aplayer-info .aplayer-controller .aplayer-time {
  color: var(--content-meta, rgba(255, 255, 255, 0.6));
}

:root.dark
  .aplayer
  .aplayer-info
  .aplayer-controller
  .aplayer-time
  .aplayer-icon
  path {
  fill: var(--content-meta, rgba(255, 255, 255, 0.6));
}

:root.dark
  .aplayer
  .aplayer-info
  .aplayer-controller
  .aplayer-time
  .aplayer-icon:hover
  path {
  fill: var(--btn-content, oklch(0.75 0.1 var(--hue)));
}

:root.dark
  .aplayer
  .aplayer-info
  .aplayer-controller
  .aplayer-volume-wrap
  .aplayer-volume-bar-wrap
  .aplayer-volume-bar {
  background: rgba(255, 255, 255, 0.2);
}

:root.dark .aplayer .aplayer-lrc:before {
  background: linear-gradient(
    180deg,
    var(--card-bg, oklch(0.23 0.015 var(--hue))) 0,
    hsla(0, 0%, 100%, 0)
  );
}

:root.dark .aplayer .aplayer-lrc:after {
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0) 0,
    rgba(255, 255, 255, 0.1)
  );
}

:root.dark .aplayer .aplayer-lrc p {
  color: var(--content-meta, rgba(255, 255, 255, 0.6));
}

:root.dark .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

:root.dark .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

:root.dark .aplayer .aplayer-list ol li {
  border-top: 1px solid var(--line-divider, rgba(255, 255, 255, 0.08));
}

:root.dark .aplayer .aplayer-list ol li:hover {
  background: var(--btn-plain-bg-hover, oklch(0.3 0.035 var(--hue)));
}

:root.dark .aplayer .aplayer-list ol li.aplayer-list-light {
  background: var(--btn-plain-bg-hover, oklch(0.3 0.035 var(--hue)));
}

:root.dark .aplayer .aplayer-list ol li .aplayer-list-index {
  color: var(--content-meta, rgba(255, 255, 255, 0.6));
}

:root.dark .aplayer .aplayer-list ol li .aplayer-list-author {
  color: var(--content-meta, rgba(255, 255, 255, 0.6));
}

:root.dark .aplayer .aplayer-notice {
  background-color: var(--card-bg, oklch(0.23 0.015 var(--hue)));
  color: var(--content-meta, rgba(255, 255, 255, 0.6));
}

:root.dark .aplayer .aplayer-miniswitcher {
  background: var(--btn-regular-bg, oklch(0.33 0.035 var(--hue)));
  border-top: 1px solid var(--line-divider, #e5e7eb);
  border-bottom: 1px solid var(--line-divider, #e5e7eb);
  border-left: 1px solid var(--line-divider, #e5e7eb);
}

:root.dark .aplayer .aplayer-miniswitcher .aplayer-icon path {
  fill: var(--content-meta, rgba(255, 255, 255, 0.6));
}

:root.dark .aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
  fill: var(--btn-content, oklch(0.75 0.1 var(--hue)));
}

:root.dark .aplayer .aplayer-info .aplayer-music .aplayer-title {
  color: var(--btn-content, oklch(0.75 0.1 var(--hue)));
}

:root.dark .aplayer .aplayer-list ol li .aplayer-list-title {
  color: var(--btn-content, oklch(0.75 0.1 var(--hue)));
}