/*  Fluid 毛玻璃 APlayer 终极美化版 */
/* ---- 播放器固定位置与外形 ---- */
.aplayer.aplayer-fixed {
  position: fixed !important;
  left: 0 !important;
  right: auto !important;
  bottom: 24px !important;
  width: 315px !important;
  z-index: 9997 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  /* 默认隐藏：完全隐藏在左边缘外 */
  opacity: 0;
  transform: translateX(-100%);
  transition:
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.35s ease;
}

/* 完全可见（悬停触发） */
.aplayer.aplayer-fixed.aplayer-visible {
  transform: translateX(0) !important;
  opacity: 1;
}/* 毛玻璃主体 (默认浅色背景) */
.aplayer.aplayer-fixed .aplayer-body {
  overflow: hidden !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.55) !important;   /* 浅色背景 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  width: 260px !important;
}.aplayer.aplayer-fixed .aplayer-body:hover {
  transform: translateY(-4px);
}/* ---- 歌单容器 ---- */
.aplayer .aplayer-list {
  border: none !important;
  background: transparent !important;
  overflow: hidden !important;
  border-radius: 24px !important; 
  overflow: hidden !important;          /* 真正四角圆角，非视觉欺骗 */
}/* 歌单内部滚动区 — corner-radius 跟随，避免内容戳破圆角 */
.aplayer .aplayer-list ol {
  border-radius: 24px !important;
}.aplayer .aplayer-list ol {
  margin: 0 !important;
  padding: 10px !important;
  background: transparent !important;
  max-height: 340px !important;
  list-style: none !important;
  overflow-y: auto !important;
}/* 每首歌条目 (Flex 垂直居中) - 毛玻璃效果 */
.aplayer .aplayer-list ol li {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;  /* 微白边框，增强玻璃感 */
  border-radius: 14px !important;
  margin-bottom: 8px !important;
  padding: 10px 14px !important;
  background: rgba(243, 243, 243, 0.6) !important;         /* 半透明白色背景 */
  color: rgba(0,0,0,0.85) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: all 0.25s ease;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 48px !important;
}/* 作者 */
.aplayer .aplayer-list ol li .aplayer-list-author {
  color: rgba(0,0,0,0.55) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 0 !important;
}/* hover */
.aplayer .aplayer-list ol li:hover {
  background: rgba(0,0,0,0.06) !important;
}/* 当前播放高亮 */
.aplayer .aplayer-list ol li.aplayer-list-light {
  background: linear-gradient(
    135deg,
    rgba(102,204,255,0.25),
    rgba(180,120,255,0.2)
  ) !important;
  color: #fff !important;               /* 高亮文字始终白色 */
}/* 顶部标题 */
.aplayer .aplayer-title {
  color: #222 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}/* 顶部艺术家 */
.aplayer .aplayer-author {
  color: rgba(0,0,0,0.7) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}/* 底部信息栏 */
.aplayer .aplayer-info {
  border-top: none !important;
  background: transparent !important;
  padding: 14px !important;
}/* 图标 (默认深色) */
.aplayer .aplayer-icon path {
  fill: rgba(0,0,0,0.75) !important;
}
.aplayer .aplayer-icon:hover path {
  fill: #0077cc !important;
}/* 进度条 */
.aplayer .aplayer-bar {
  background: rgba(0,0,0,0.1) !important;
}
.aplayer .aplayer-played {
  background: linear-gradient(90deg, #66ccff, #b388ff) !important;
}
.aplayer .aplayer-volume-bar {
  background: #66ccff !important;
}/* 封面 */
.aplayer .aplayer-pic {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
}/* 播放按钮边框 */
/* .aplayer .aplayer-button {
  border: -100px solid rgba(0,0,0,0.7) !important;
}
 */
/* 滚动条 */
.aplayer .aplayer-list ol::-webkit-scrollbar {
  width: 6px;
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
}/* 保险透明背景 */
.aplayer, .aplayer .aplayer-body, .aplayer .aplayer-info, .aplayer .aplayer-list {
  background-color: transparent !important;
}/* .aplayer * {
  box-sizing: border-box !important;
} *//* 折叠箭头 (隐藏但可点) */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher {
  position: absolute !important;
  right: -9px !important;
  top: 0 !important;
  width: 36px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border-left: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  transition: none !important;
  z-index: 20 !important;
}/* ---- APlayer 隐形触发区 ---- */
#aplayer-hover-zone {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 140px;
  z-index: 9995;
  cursor: pointer;
  /* 完全透明，不可见 */
  background: transparent;
  transition: opacity 0.2s ease;
}

/* 播放器可见时禁用触发区，避免遮挡 */
.aplayer.aplayer-fixed.aplayer-visible ~ #aplayer-hover-zone {
  opacity: 0;
  pointer-events: none;
}

/* ---- 音乐播放提示气泡 ---- */
#aplayer-hint {
  position: fixed;
  left: 20px;
  bottom: 115px;
  z-index: 9996;
  padding: 10px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  color: #333;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  user-select: none;
}

/* 显示状态 */
#aplayer-hint.show {
  opacity: 1;
  transform: translateY(0);
}

/* 小箭头 — 指向左下角触发区 */
#aplayer-hint::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 18px;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.72);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 0 0 3px 0;
  transform: rotate(45deg);
}

/* 暗色模式 */
[data-user-color-scheme="dark"] #aplayer-hint {
  background: rgba(40, 40, 50, 0.78);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

[data-user-color-scheme="dark"] #aplayer-hint::after {
  background: rgba(40, 40, 50, 0.78);
  border-color: rgba(255, 255, 255, 0.10);
}

/* =========================================
   深色主题覆盖 (类名 + 系统主题双保险)
   请将选择器换成你网站实际的暗色类名
========================================= */
/* 如果网站使用 data-theme="dark" (如 Fluid) */
[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-body {
  background: rgba(30, 30, 35, 0.6) !important;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}[data-user-color-scheme="dark"] .aplayer .aplayer-list ol li {
  color: rgba(255,255,255,0.92) !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-list ol li .aplayer-list-author {
  color: rgba(255,255,255,0.6) !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-list ol li:hover {
  background: rgba(255,255,255,0.08) !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-list ol li.aplayer-list-light {
  background: linear-gradient(
    135deg,
    rgba(102,204,255,0.22),
    rgba(180,120,255,0.18)
  ) !important;
  color: #fff !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-title {
  color: #fff !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-author {
  color: rgba(255,255,255,0.7) !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-icon path {
  fill: rgba(255,255,255,0.9) !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-icon:hover path {
  fill: #66ccff !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-bar {
  background: rgba(255,255,255,0.12) !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-button {
  border-color: rgba(255,255,255,0.9) !important;
}
[data-user-color-scheme="dark"] .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
}/* 同时兼容系统深色模式 (备用) */
@media (prefers-color-scheme: dark) {
  html:not([data-user-color-scheme="light"]) .aplayer.aplayer-fixed .aplayer-body {
    background: rgba(30, 30, 35, 0.6) !important;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-list ol li {
    color: rgba(255,255,255,0.92) !important;
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-list ol li .aplayer-list-author {
    color: rgba(255,255,255,0.6) !important;
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-list ol li:hover {
    background: rgba(255,255,255,0.08) !important;
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-title {
    color: #fff !important;
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-author {
    color: rgba(255,255,255,0.7) !important;
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-icon path {
    fill: rgba(255,255,255,0.9) !important;
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-icon:hover path {
    fill: #66ccff !important;
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-bar {
    background: rgba(255,255,255,0.12) !important;
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-button {
    border-color: rgba(255,255,255,0.9) !important;
  }
  html:not([data-user-color-scheme="light"]) .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
  }
}
/* Minimal glass music bar override */
.aplayer.aplayer-fixed {
  left: 24px !important;
  right: auto !important;
  bottom: 24px !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 9997 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translate3d(calc(-100% - 32px), 0, 0);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease;
}

.aplayer.aplayer-fixed.aplayer-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) !important;
}

.aplayer.aplayer-fixed .aplayer-body {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 8px 46px 8px 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(246, 242, 255, 0.54)) !important;
  box-shadow:
    0 18px 46px rgba(33, 38, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease !important;
}

.aplayer.aplayer-fixed .aplayer-body:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 22px 54px rgba(33, 38, 58, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

.aplayer.aplayer-fixed.aplayer-narrow {
  width: min(420px, calc(100vw - 32px)) !important;
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  width: 100% !important;
  height: auto !important;
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-pic {
  width: 58px !important;
  height: 58px !important;
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info {
  display: block !important;
  transform: none !important;
}

.aplayer.aplayer-fixed .aplayer-pic {
  flex: 0 0 58px !important;
  float: none !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow:
    0 10px 26px rgba(36, 42, 67, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

.aplayer.aplayer-fixed .aplayer-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(20, 22, 34, 0.16));
  pointer-events: none;
}

.aplayer.aplayer-fixed .aplayer-pic .aplayer-button {
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  opacity: 1 !important;
}

.aplayer.aplayer-fixed .aplayer-pic .aplayer-play {
  right: 50% !important;
  bottom: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 -15px -15px 0 !important;
}

.aplayer.aplayer-fixed .aplayer-pic .aplayer-play svg,
.aplayer.aplayer-fixed .aplayer-pic .aplayer-pause svg {
  position: static !important;
}

.aplayer.aplayer-fixed .aplayer-pic .aplayer-pause {
  right: 6px !important;
  bottom: 6px !important;
  width: 18px !important;
  height: 18px !important;
}

.aplayer.aplayer-fixed .aplayer-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 58px !important;
  margin-left: 12px !important;
  padding: 5px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-music {
  width: calc(100% - 100px) !important;
  height: 22px !important;
  margin: 0 0 11px !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.aplayer.aplayer-fixed .aplayer-title {
  color: rgba(25, 27, 40, 0.92) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.aplayer.aplayer-fixed .aplayer-author {
  color: rgba(58, 62, 82, 0.64) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-controller {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-controller .aplayer-bar-wrap {
  flex: 1 1 auto !important;
  min-width: 72px !important;
  margin: 0 !important;
  padding: 7px 0 !important;
}

.aplayer.aplayer-fixed .aplayer-bar,
.aplayer.aplayer-fixed .aplayer-loaded,
.aplayer.aplayer-fixed .aplayer-played {
  height: 3px !important;
  border-radius: 999px !important;
}

.aplayer.aplayer-fixed .aplayer-bar {
  background: rgba(35, 39, 55, 0.13) !important;
}

.aplayer.aplayer-fixed .aplayer-loaded {
  background: rgba(255, 255, 255, 0.48) !important;
}

.aplayer.aplayer-fixed .aplayer-played {
  background: linear-gradient(90deg, #7ecbff, #9b7cff) !important;
}

.aplayer.aplayer-fixed .aplayer-played .aplayer-thumb {
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  margin-top: -4.5px !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 2px rgba(145, 124, 255, 0.22),
    0 2px 8px rgba(57, 62, 92, 0.28) !important;
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-controller .aplayer-time {
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 18px !important;
  padding-left: 9px !important;
  color: rgba(58, 62, 82, 0.48) !important;
  font-size: 11px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
  max-width: 72px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.aplayer.aplayer-fixed .aplayer-icon {
  opacity: 0.72 !important;
  transition:
    opacity 180ms ease,
    transform 180ms ease !important;
}

.aplayer.aplayer-fixed .aplayer-icon:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

.aplayer.aplayer-fixed .aplayer-icon path,
.aplayer.aplayer-fixed .aplayer-icon circle {
  fill: rgba(32, 36, 52, 0.76) !important;
}

.aplayer.aplayer-fixed .aplayer-icon:hover path,
.aplayer.aplayer-fixed .aplayer-icon:hover circle {
  fill: #7f65ff !important;
}

.aplayer.aplayer-fixed .aplayer-icon-back,
.aplayer.aplayer-fixed .aplayer-icon-play,
.aplayer.aplayer-fixed .aplayer-icon-forward,
.aplayer.aplayer-fixed .aplayer-icon-menu {
  bottom: 38px !important;
  width: 18px !important;
  height: 18px !important;
}

.aplayer.aplayer-fixed .aplayer-icon-back {
  right: 94px !important;
}

.aplayer.aplayer-fixed .aplayer-icon-play {
  right: 68px !important;
}

.aplayer.aplayer-fixed .aplayer-icon-forward {
  right: 42px !important;
}

.aplayer.aplayer-fixed .aplayer-icon-menu {
  right: 16px !important;
}

.aplayer.aplayer-fixed .aplayer-miniswitcher {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  bottom: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important;
  transform: translateY(-50%) !important;
}

.aplayer.aplayer-fixed .aplayer-miniswitcher .aplayer-icon,
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon {
  width: 16px !important;
  height: 16px !important;
  transform: rotateY(180deg) !important;
}

.aplayer.aplayer-fixed .aplayer-lrc {
  display: none !important;
}

.aplayer.aplayer-fixed .aplayer-list {
  position: absolute !important;
  left: 0 !important;
  bottom: 92px !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-height: 280px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 22px !important;
  background: rgba(246, 248, 255, 0.62) !important;
  box-shadow:
    0 18px 46px rgba(33, 38, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

.aplayer.aplayer-fixed .aplayer-list.aplayer-list-hide {
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.aplayer.aplayer-fixed .aplayer-list ol {
  max-height: 280px !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow-y: auto !important;
  border-radius: inherit !important;
  background: transparent !important;
}

.aplayer.aplayer-fixed .aplayer-list ol li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 6px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.38) !important;
  color: rgba(25, 27, 40, 0.82) !important;
  font-size: 13px !important;
  line-height: 38px !important;
}

.aplayer.aplayer-fixed .aplayer-list ol li:hover {
  background: rgba(255, 255, 255, 0.62) !important;
}

.aplayer.aplayer-fixed .aplayer-list ol li.aplayer-list-light {
  background: rgba(139, 123, 255, 0.18) !important;
  color: rgba(25, 27, 40, 0.92) !important;
}

.aplayer.aplayer-fixed .aplayer-list ol li .aplayer-list-index {
  flex: 0 0 28px !important;
  margin-right: 0 !important;
  color: rgba(58, 62, 82, 0.48) !important;
}

.aplayer.aplayer-fixed .aplayer-list ol li .aplayer-list-author {
  margin-left: auto !important;
  color: rgba(58, 62, 82, 0.56) !important;
  font-size: 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#aplayer-hover-zone {
  width: 72px !important;
  height: 150px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
}

#aplayer-hint {
  left: 24px !important;
  bottom: 112px !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.66) !important;
  color: rgba(25, 27, 40, 0.78) !important;
  box-shadow: 0 12px 34px rgba(33, 38, 58, 0.14) !important;
}

#aplayer-hint::after {
  background: rgba(255, 255, 255, 0.66) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-body {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(135deg, rgba(38, 42, 58, 0.78), rgba(29, 31, 45, 0.58)) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-title {
  color: rgba(255, 255, 255, 0.94) !important;
}

[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-author,
[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-info .aplayer-controller .aplayer-time {
  color: rgba(255, 255, 255, 0.56) !important;
}

[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-icon path,
[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-icon circle {
  fill: rgba(255, 255, 255, 0.82) !important;
}

[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-bar {
  background: rgba(255, 255, 255, 0.16) !important;
}

[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-list {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(32, 35, 49, 0.72) !important;
}

[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-list ol li {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-list ol li .aplayer-list-index,
[data-user-color-scheme="dark"] .aplayer.aplayer-fixed .aplayer-list ol li .aplayer-list-author {
  color: rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 560px) {
  .aplayer.aplayer-fixed {
    left: 16px !important;
    bottom: 16px !important;
    width: calc(100vw - 32px) !important;
  }

  .aplayer.aplayer-fixed .aplayer-body {
    min-height: 68px !important;
    padding: 7px 40px 7px 7px !important;
    border-radius: 22px !important;
  }

  .aplayer.aplayer-fixed .aplayer-pic {
    flex-basis: 54px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
  }

  .aplayer.aplayer-fixed .aplayer-info {
    height: 54px !important;
    margin-left: 10px !important;
  }

  .aplayer.aplayer-fixed .aplayer-info .aplayer-music {
    width: calc(100% - 86px) !important;
    margin-bottom: 9px !important;
  }

  .aplayer.aplayer-fixed .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
    display: none !important;
  }

  .aplayer.aplayer-fixed .aplayer-icon-back {
    right: 82px !important;
  }

  .aplayer.aplayer-fixed .aplayer-icon-play {
    right: 58px !important;
  }

  .aplayer.aplayer-fixed .aplayer-icon-forward {
    right: 34px !important;
  }

  .aplayer.aplayer-fixed .aplayer-icon-menu {
    right: 12px !important;
  }

  .aplayer.aplayer-fixed .aplayer-list {
    bottom: 86px !important;
    width: calc(100vw - 32px) !important;
  }

  #aplayer-hint {
    left: 16px !important;
    bottom: 100px !important;
  }
}

.navbar {    /* 固定在页面顶部 */
    position: fixed !important;    /* 距离顶部 */
    top: 15px;    /* 水平居中 */
    left: 50%;
    transform: translateX(-50%);    /* 宽度 */
    width: calc(100% - 40px);    /* 最大宽度 */
    max-width: 1400px;    /* 防止被其它元素覆盖 */
    z-index: 9999;    /* 圆角 */
    border-radius: 22px;    /* 裁切高光层 */
    overflow: hidden;    /* 蓝紫渐变 */
    background: linear-gradient(
        135deg,
        rgba(55, 24, 233, 0.723),
        rgba(106, 45, 230, 0.7),
        rgba(136, 78, 235, 0.75),
        rgba(180, 141, 247, 0.75)
    );    
    /* 毛玻璃 */
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);    /* 阴影 */
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        0 8px 30px rgba(0,0,0,.18);    transition: background .5s ease, box-shadow .5s ease;
    will-change: backdrop-filter;
}
/* 顶部高光 */
.navbar::before {
    content: "";
    position: absolute;
    inset: 0;    border-radius: inherit;    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.08),
        rgba(255,255,255,0)
    );    pointer-events: none;
}

/* Ambient page motion — moved to html::before to isolate repaint */
body {
  background-color: #eef1f7;
}

/* Dedicated compositor layer for the animated aurora background.
   Using position:fixed + will-change avoids the background-attachment:fixed
   scroll-repaint penalty that would otherwise trigger on every scroll frame. */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #eef1f7;
  background-image:
    radial-gradient(circle at 16% 26%, rgba(132, 109, 255, 0.18), rgba(132, 109, 255, 0) 34rem),
    radial-gradient(circle at 86% 18%, rgba(102, 204, 255, 0.16), rgba(102, 204, 255, 0) 32rem),
    radial-gradient(circle at 72% 88%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 28rem),
    linear-gradient(180deg, #f4f6fb 0%, #eceff5 100%);
  background-size: 125% 125%, 130% 130%, 115% 115%, 100% 100%;
  animation: blog-aurora-breathe 18s ease-in-out infinite alternate;
  will-change: background-position;
  pointer-events: none;
}

[data-user-color-scheme="dark"] body {
  background-color: #171b25;
}
[data-user-color-scheme="dark"] html::before {
  background-color: #171b25;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(123, 93, 255, 0.22), rgba(123, 93, 255, 0) 32rem),
    radial-gradient(circle at 82% 20%, rgba(72, 181, 255, 0.15), rgba(72, 181, 255, 0) 34rem),
    radial-gradient(circle at 70% 88%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 28rem),
    linear-gradient(180deg, #181c27 0%, #141821 100%);
}

#board {
  animation: blog-panel-enter 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    transform 280ms ease,
    box-shadow 280ms ease;
}

#board:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 56px rgba(48, 53, 72, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.34);
}

.index-card {
  border-radius: 8px;
  animation: blog-card-enter 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    transform 240ms ease,
    background-color 240ms ease,
    box-shadow 240ms ease;
}

.index-card + .index-card {
  animation-delay: 110ms;
}

.index-card:hover {
  transform: translateY(-4px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.62),
    rgba(247, 250, 255, 0.38)
  );
  box-shadow:
    0 12px 34px rgba(53, 62, 88, 0.10),
    inset 0 0 0 1px rgba(112, 134, 255, 0.10);
}

[data-user-color-scheme="dark"] .index-card:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.055),
    rgba(102, 204, 255, 0.045)
  );
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(151, 132, 255, 0.14);
}

.navbar .nav-link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.navbar .nav-link::before,
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

.navbar .nav-link::before {
  top: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.24) 48%,
    rgba(102, 204, 255, 0.16) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-92%) skewX(-18deg);
}

.navbar .nav-link::after {
  bottom: 0.24rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff, #66ccff, rgba(255, 255, 255, 0));
  box-shadow: 0 0 14px rgba(102, 204, 255, 0.45);
  transform: scaleX(0.28);
}

.navbar .nav-link:hover::before,
.navbar .nav-link:focus-visible::before {
  opacity: 1;
  transform: translateX(92%) skewX(-18deg);
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

@keyframes blog-aurora-breathe {
  0% {
    background-position: 0% 8%, 100% 4%, 52% 100%, center;
  }
  100% {
    background-position: 10% 0%, 88% 16%, 64% 88%, center;
  }
}

@keyframes blog-panel-enter {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blog-card-enter {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  html::before,
  #board,
  .index-card,
  .navbar .nav-link,
  .navbar .nav-link::before,
  .navbar .nav-link::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Three.js local glitch layer for the Fluid banner background. */
#banner.banner {
  isolation: isolate;
}

#banner .banner-glitch-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
}

#banner .full-bg-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  #banner .banner-glitch-canvas {
    display: none !important;
  }
}