/* Rabbit Radio v1.9.91 — wide clear-glass final component layer */

/* ==========================================================================
   0. ROOT CONTAINER FIXED POSITION & LAYOUT (RabbitzZz Proportions)
   Width: min(280px, calc(100vw - 28px)) matching #miniStatusCard
   ========================================================================== */
html body:not(.admin-page) .anime-music,
html body:not(.admin-page) #animeMusicPlayer,
html body:not(.admin-page) #animeMusicPlayer[data-fixed-viewport-ui="bottom"],
html body:not(.admin-page) aside#animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed),
html body:not(.admin-page) aside#animeMusicPlayer[data-fixed-viewport-ui="bottom"]:is(:hover, :focus-within, .is-open):not(.is-forced-closed),
html body:not(.admin-page) aside#animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open),
html body:not(.admin-page) aside#animeMusicPlayer.is-forced-closed {
  position: fixed !important;
  left: max(16px, env(safe-area-inset-left)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  right: auto !important;
  top: auto !important;
  z-index: 9990 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  pointer-events: auto !important;
  width: min(280px, calc(100vw - 28px)) !important;
  max-width: min(340px, calc(100vw - 28px)) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-sizing: border-box !important;
  background-color: rgba(255, 255, 255, .022) !important;
  transform: none !important;
}

@media (max-width: 768px) {
  html body:not(.admin-page) .anime-music,
  html body:not(.admin-page) #animeMusicPlayer,
  html body:not(.admin-page) aside#animeMusicPlayer {
    left: max(10px, env(safe-area-inset-left)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: min(280px, calc(100vw - 20px)) !important;
  }
  html body:not(.admin-page) #animeMusicPlayer .anime-music__panel-actions button,
  html body:not(.admin-page) #animeShuffleBtn,
  html body:not(.admin-page) #animeLoopBtn,
  html body:not(.admin-page) #animeCloseBtn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

/* ==========================================================================
   1. HORIZONTAL RECTANGLE FRAME (.anime-music__mini)
   Exact proportion and glass morphism as RabbitzZz (#miniStatusCard / .mini-status):
   - Width: min(280px, calc(100vw - 28px))
   - Height: 64px (min-height 64px, max-height 64px)
   - Border radius: 16px
   - Padding: 10px 12px
   - Frosted clear glass with subtle radial tint
   ========================================================================== */
html body:not(.admin-page) .anime-music__mini,
html body:not(.admin-page) #animeMusicPlayer .anime-music__mini,
html body:not(.admin-page) aside#animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) section.anime-music__mini,
html body:not(.admin-page) aside#animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) section.anime-music__mini,
html body:not(.admin-page) aside#animeMusicPlayer.is-forced-closed section.anime-music__mini,
html body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) .anime-music__mini,
html body:not(.admin-page) #animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) .anime-music__mini,
html body:not(.admin-page) #animeMusicPlayer.is-forced-closed .anime-music__mini {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
  width: 100% !important;
  max-width: min(280px, calc(100vw - 28px)) !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, .022) !important;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(247, 184, 205, .055), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .028), rgba(113, 110, 126, .035)) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
  box-shadow: 0 16px 42px rgba(18, 18, 28, .1), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__mini:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Elegant static glow when playing (low-overhead rendering) */
html body:not(.admin-page) #animeMusicPlayer.is-playing .anime-music__mini {
  border-color: rgba(114, 255, 217, 0.35) !important;
  box-shadow: 0 16px 42px rgba(18, 18, 28, .15), 0 0 14px rgba(114, 255, 217, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__mini::before,
html body:not(.admin-page) #animeMusicPlayer .anime-music__mini::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   2. VIDEO AVATAR 1x1 (Left side of the 64px card)
   - Size: 44px x 44px (Exact RabbitzZz avatar size)
   - Border radius: 12px
   - Video avatar with graceful image fallback
   - Clickable to toggle the playlist drawer
   ========================================================================== */
html body:not(.admin-page) #animeMusicPlayer #animePlaylistBtn,
html body:not(.admin-page) .anime-music__cover,
html body:not(.admin-page) #animeMusicPlayer .anime-music__cover,
html body:not(.admin-page) aside#animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) button.anime-music__cover,
html body:not(.admin-page) aside#animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) button.anime-music__cover,
html body:not(.admin-page) aside#animeMusicPlayer.is-forced-closed button.anime-music__cover,
html body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) .anime-music__cover,
html body:not(.admin-page) #animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) .anime-music__cover,
html body:not(.admin-page) #animeMusicPlayer.is-forced-closed .anime-music__cover {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
  background: #000000 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-sizing: border-box !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.25) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover > .anime-music__cover-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
  contain: strict !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  image-rendering: -webkit-optimize-contrast !important;
  transition: none !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover:hover > img {
  transform: scale(1.06) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover:hover > .anime-music__cover-video {
  transform: translateZ(0) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover > img {
  z-index: 1 !important;
  opacity: 1 !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover > .anime-music__cover-video {
  z-index: 2 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover.has-track-video > img {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover.has-track-video > .anime-music__cover-video {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__cover::after,
html body:not(.admin-page) #animeMusicPlayer .anime-music__cover::before {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   3. SONG TITLE & ARTIST META (ALWAYS VISIBLE, NEVER HIDDEN)
   Left-aligned beside the avatar like the RabbitzZz status card.
   ========================================================================== */
html body:not(.admin-page) .anime-music__body,
html body:not(.admin-page) #animeMusicPlayer .anime-music__body,
html body:not(.admin-page) aside#animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) div.anime-music__body,
html body:not(.admin-page) aside#animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) div.anime-music__body,
html body:not(.admin-page) aside#animeMusicPlayer.is-forced-closed div.anime-music__body,
html body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) .anime-music__body,
html body:not(.admin-page) #animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) .anime-music__body,
html body:not(.admin-page) #animeMusicPlayer.is-forced-closed .anime-music__body {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 6px 0 10px !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  text-align: left !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__meta {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

html body:not(.admin-page) #animeMusicPlayer #animeMusicTitle {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: left !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  width: 100% !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

html body:not(.admin-page) #animeMusicPlayer #animeMusicArtist {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-align: left !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* ==========================================================================
   4. CONTROLS (RIGHT SIDE OF THE 64px CARD)
   - #animeOpenListBtn: Playlist drawer icon button (Always visible!)
   - #animePlayBtn: 34px Circular Play/Pause button
   - #animeNextBtn: Next track button
   ========================================================================== */
html body:not(.admin-page) .anime-music__controls,
html body:not(.admin-page) #animeMusicPlayer .anime-music__controls,
html body:not(.admin-page) aside#animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) div.anime-music__controls,
html body:not(.admin-page) aside#animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) div.anime-music__controls,
html body:not(.admin-page) aside#animeMusicPlayer.is-forced-closed div.anime-music__controls,
html body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) .anime-music__controls,
html body:not(.admin-page) #animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) .anime-music__controls,
html body:not(.admin-page) #animeMusicPlayer.is-forced-closed .anime-music__controls {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Playlist drawer icon toggle button (Guaranteed visible) */
html body:not(.admin-page) #animeMusicPlayer .anime-music__controls button#animeOpenListBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__controls button#animeOpenListBtn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  transform: scale(1.08) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__controls button#animeOpenListBtn.is-active,
html body:not(.admin-page) #animeMusicPlayer.is-open .anime-music__controls button#animeOpenListBtn {
  background: rgba(114, 255, 217, 0.2) !important;
  border-color: rgba(114, 255, 217, 0.5) !important;
  color: #72ffd9 !important;
  box-shadow: 0 0 10px rgba(114, 255, 217, 0.3) !important;
}

/* Play / Pause Toggle Button (34px circular) */
html body:not(.admin-page) #animeMusicPlayer #animePlayBtn,
html body:not(.admin-page) #animeMusicPlayer .anime-music__play {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  font-size: 0.84rem !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

html body:not(.admin-page) #animeMusicPlayer #animePlayBtn:hover {
  transform: scale(1.1) !important;
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 255, 255, 0.35) !important;
}

html body:not(.admin-page) #animeMusicPlayer #animePlayBtn:active {
  transform: scale(0.92) !important;
}

/* Next Track Button */
html body:not(.admin-page) #animeMusicPlayer #animeNextBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.8rem !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body:not(.admin-page) #animeMusicPlayer #animeNextBtn:hover {
  color: #ffffff !important;
  transform: scale(1.15) !important;
}

/* Hide Prev and MiniLoop in 280px compact bar so it never overflows */
html body:not(.admin-page) #animeMusicPlayer .anime-music__controls button#animePrevBtn,
html body:not(.admin-page) #animeMusicPlayer .anime-music__controls button#animeMiniLoopBtn {
  display: none !important;
}

/* Hide volume slider & unneeded wrappers to keep 280px bar clean */
html body:not(.admin-page) aside#animeMusicPlayer .anime-music__volume,
html body:not(.admin-page) #animeMusicPlayer .anime-music__volume,
html body:not(.admin-page) aside#animeMusicPlayer div.anime-music__progress-wrap,
html body:not(.admin-page) #animeMusicPlayer .anime-music__progress-wrap,
html body:not(.admin-page) .anime-music__progress-wrap,
html body:not(.admin-page) aside#animeMusicPlayer div.anime-music__equalizer,
html body:not(.admin-page) #animeMusicPlayer .anime-music__equalizer,
html body:not(.admin-page) .anime-music__equalizer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
}

/* ==========================================================================
   5. PLAYLIST DRAWER PANEL (.anime-music__panel)
   Animation and proportions identical to RabbitzZz card morphing:
   - Width: min(280px, calc(100vw - 28px))
   - Radius: 16px
   - Transitions: 0.58s cubic-bezier(0.16, 1, 0.3, 1)
   ========================================================================== */
html body:not(.admin-page) .anime-music__panel,
html body:not(.admin-page) #animeMusicPlayer .anime-music__panel {
  width: 100% !important;
  max-width: min(280px, calc(100vw - 28px)) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, .022) !important;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(247, 184, 205, .055), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .028), rgba(113, 110, 126, .035)) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  box-sizing: border-box !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform-origin: bottom center !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__panel::before,
html body:not(.admin-page) #animeMusicPlayer .anime-music__panel::after {
  content: none !important;
  display: none !important;
}

/* OPEN PANEL STATE */
html body:not(.admin-page) aside#animeMusicPlayer.is-open section.anime-music__panel,
html body:not(.admin-page) #animeMusicPlayer.is-open .anime-music__panel,
html body:not(.admin-page) aside#animeMusicPlayer:is(:hover, :focus-within):not(.is-forced-closed) section.anime-music__panel,
html body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within):not(.is-forced-closed) .anime-music__panel {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 220px !important;
  max-height: min(360px, calc(100svh - 120px)) !important;
  padding: 12px 12px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0px) !important;
  transition:
    max-height 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    min-height 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.48s ease,
    border-color 0.48s ease,
    visibility 0s !important;
}

/* CLOSED PANEL STATE */
html body:not(.admin-page) aside#animeMusicPlayer:not(.is-open):not(:hover):not(:focus-within) section.anime-music__panel,
html body:not(.admin-page) aside#animeMusicPlayer.is-forced-closed section.anime-music__panel,
html body:not(.admin-page) #animeMusicPlayer:not(.is-open):not(:hover):not(:focus-within) .anime-music__panel,
html body:not(.admin-page) #animeMusicPlayer.is-forced-closed .anime-music__panel {
  display: flex !important;
  flex-direction: column !important;
  max-height: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: translateY(16px) scale(0.96) !important;
  filter: blur(4px) !important;
  transition:
    max-height 0.56s cubic-bezier(0.22, 1, 0.36, 1),
    min-height 0.56s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.56s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.42s ease,
    border-color 0.42s ease,
    visibility 0s linear 0.56s !important;
}

/* Panel Header */
html body:not(.admin-page) #animeMusicPlayer .anime-music__panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 8px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__panel-title strong {
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.05em !important;
  display: block !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__panel-title span {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  display: block !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__panel-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__panel-actions button,
html body:not(.admin-page) #animeShuffleBtn,
html body:not(.admin-page) #animeLoopBtn,
html body:not(.admin-page) #animeCloseBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.7rem !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__panel-actions button:hover,
html body:not(.admin-page) #animeShuffleBtn:hover,
html body:not(.admin-page) #animeLoopBtn:hover,
html body:not(.admin-page) #animeCloseBtn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  transform: scale(1.1) !important;
}

html body:not(.admin-page) #animeShuffleBtn.is-active,
html body:not(.admin-page) #animeLoopBtn.is-active {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   6. TRACK LIST CONTAINER (#animeTrackList)
   GUARANTEED VISIBILITY OF ALL 14 TRACKS:
   - flex layout with overflow-y: auto
   - scrollbar-gutter: stable
   - Smooth track hovering and selection
   ========================================================================== */
html body:not(.admin-page) #animeMusicPlayer .anime-music__tracks,
html body:not(.admin-page) .anime-music__tracks,
html body:not(.admin-page) #animeTrackList {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-height: 170px !important;
  max-height: min(260px, calc(100svh - 180px), calc(100vh - 180px)) !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  padding: 2px 3px 6px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__tracks::-webkit-scrollbar {
  width: 4px !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__tracks::-webkit-scrollbar-track {
  background: transparent !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-music__tracks::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
}

/* Section Headings */
html body:not(.admin-page) #animeMusicPlayer .anime-track-section,
html body:not(.admin-page) .anime-track-section {
  display: block !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(255, 255, 255, 0.4) !important;
  padding: 5px 8px 2px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* Track item: 1:1 Video avatar + Song title beside it */
html body:not(.admin-page) #animeMusicPlayer .anime-track,
html body:not(.admin-page) .anime-track {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 8px !important;
  margin: 0 0 2px 0 !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, 0.03) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 42px !important;
  position: relative !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-track:hover,
html body:not(.admin-page) .anime-track:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-track:active,
html body:not(.admin-page) .anime-track:active {
  background: rgba(255, 255, 255, 0.16) !important;
  transform: scale(0.98) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-track.is-active,
html body:not(.admin-page) .anime-track.is-active {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(114, 255, 217, 0.35) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), 0 0 12px rgba(114, 255, 217, 0.18) !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-track__number,
html body:not(.admin-page) .anime-track__number {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  min-width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-track.is-active .anime-track__number {
  color: #72ffd9 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(114, 255, 217, 0.6) !important;
}

/* 1:1 Video Avatar in each track row */
html body:not(.admin-page) #animeMusicPlayer .anime-track__cover,
html body:not(.admin-page) .anime-track__cover {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-track__cover > img,
html body:not(.admin-page) #animeMusicPlayer .anime-track__cover-video,
html body:not(.admin-page) .anime-track__cover > img,
html body:not(.admin-page) .anime-track__cover-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-track__cover > img { z-index: 1 !important; opacity: 1 !important; }
html body:not(.admin-page) #animeMusicPlayer .anime-track__cover-video { z-index: 2 !important; opacity: 0 !important; pointer-events: none !important; }
html body:not(.admin-page) #animeMusicPlayer .anime-track__cover.is-video-ready > img { opacity: 0 !important; }
html body:not(.admin-page) #animeMusicPlayer .anime-track__cover.is-video-ready > .anime-track__cover-video { opacity: 1 !important; }

/* Song title beside the 1:1 video avatar */
html body:not(.admin-page) #animeMusicPlayer .anime-track__meta,
html body:not(.admin-page) .anime-track__meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-track__meta b,
html body:not(.admin-page) .anime-track__meta b {
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

html body:not(.admin-page) #animeMusicPlayer .anime-track__meta span,
html body:not(.admin-page) .anime-track__meta span {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.64rem !important;
  font-weight: 450 !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Soundwave playing indicator */
html body:not(.admin-page) .anime-track__playing {
  display: flex !important;
  align-items: flex-end !important;
  gap: 2.5px !important;
  height: 14px !important;
  margin-left: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  flex-shrink: 0 !important;
}

html body:not(.admin-page) .anime-track.is-active .anime-track__playing {
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.admin-page) .anime-track__playing span {
  width: 2.5px !important;
  background: #ffffff !important;
  border-radius: 1px !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7) !important;
  animation: maomaoWave 1s ease-in-out infinite alternate !important;
}

html body:not(.admin-page) .anime-track__playing span:nth-child(1) { height: 60%; animation-delay: 0s !important; }
html body:not(.admin-page) .anime-track__playing span:nth-child(2) { height: 100%; animation-delay: 0.2s !important; }
html body:not(.admin-page) .anime-track__playing span:nth-child(3) { height: 40%; animation-delay: 0.4s !important; }
html body:not(.admin-page) .anime-track__playing span:nth-child(4) { height: 80%; animation-delay: 0.1s !important; }

@keyframes maomaoWave {
  from { height: 20%; }
  to { height: 100%; }
}