/*
  ФАЙЛ: contentlistbtn.css
  Назначение: стили нижней панели со списком контента и треков.
  Что редактируется в этом файле:
  - кнопка открытия списка: #tracksToggle, .tracks-toggle, .tracks-chevron
  - затемнение и фон при открытии панели: .tracks-overlay
  - панель списка и её анимации: .tracks-panel, body.tracks-open, body.tracks-closing, drag-состояния
  - верхняя зона поиска: .track-search-top, .track-search-wrap, .track-search, .track-search-clear
  - сам список треков: #tracks, ul#tracks li, .track-item
  - кнопки и элементы внутри списка: .content-btn, .contentlistbtn-list button и связанные active/press состояния
  Примечание: сюда выносить все визуальные правки списка контента, а не базовой страницы.
*/

html[data-theme="dark"] .tracks-toggle, html[data-theme="dark"] ul#tracks li, html[data-theme="dark"] .track-search{
  background: #2a2c31;
  border-color: #3a3c42;
  color: #f1f1f1;
}

html[data-theme="dark"] .track-search::placeholder{
  color: #9a9a9a !important;
  opacity: 1;
}

body.tracks-open{
  overflow: hidden;
  --tracks-ty: 0px;
}

body.tracks-closing{
  --tracks-ty: var(--tracks-closed-y);
}

.tracks-toggle{
  width: 100%;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  cursor: pointer;
  margin-bottom: 10px;
  transition: transform 0.08s ease;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  caret-color: currentColor;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
}

.tracks-toggle:active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: scale(0.99);
}

.tracks-toggle[disabled]{
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.tracks-chevron{
  font-size: 14px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform 0.2s ease;
  transform: rotate(180deg);
}

.tracks-toggle.open .tracks-chevron{
  transform: rotate(0deg);
}

.tracks-overlay{
  position: fixed;
  inset: 0;
  z-index: 1499;
  opacity: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.00);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 170ms linear, background-color 170ms linear, backdrop-filter 220ms ease-out, -webkit-backdrop-filter 220ms ease-out;
  will-change: opacity, backdrop-filter;
}

body.tracks-open .tracks-overlay{
  opacity: 1;
  pointer-events: auto;
  background: rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.tracks-closing .tracks-overlay{
  opacity: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.00);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity var(--tracks-close-ms) linear, background-color var(--tracks-close-ms) linear, backdrop-filter var(--tracks-close-ms) ease-out, -webkit-backdrop-filter var(--tracks-close-ms) ease-out;
}

body.dark .tracks-overlay{
  background: rgba(0,0,0,0.00);
}

body.dark.tracks-open .tracks-overlay{
  background: rgba(0,0,0,0.38);
}

body.tracks-open.tracks-dragging .tracks-overlay{
  opacity: var(--tracks-drag-opacity);
  backdrop-filter: blur(calc(10px * var(--tracks-drag-opacity)));
  -webkit-backdrop-filter: blur(calc(10px * var(--tracks-drag-opacity)));
}

body.dark.tracks-open.tracks-dragging .tracks-overlay{
  background: rgba(0,0,0, calc(0.38 * var(--tracks-drag-opacity)));
}

body:not(.dark).tracks-open.tracks-dragging .tracks-overlay{
  background: rgba(0,0,0, calc(0.12 * var(--tracks-drag-opacity)));
}

.track-search-top{
  display: none;
}

.tracks-panel{
  display: none;
}

ul#tracks{
  list-style: none;
  padding: 0 8px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

ul#tracks li{
  padding: 14px;
  background-color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 17px;
  text-align: center;
  transition: background-color 0.2s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  caret-color: currentColor;
  -ms-user-select: none;
  border: 1px solid #eee;
  width: 100%;
  box-sizing: border-box;
}

ul#tracks li, ul#tracks li *{
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

@media (hover: hover) and (pointer: fine){
  ul#tracks li:hover {
    background-color: #e6e6e6;
  }

}

ul#tracks li:active{
  background-color: #ffffff !important;
  color: inherit !important;
  border-color: #eee !important;
}

ul#tracks li.active-track{
  background-color: #ff8c00;
  color: #ffffff;
  border-color: #ff8c00;
}

ul#tracks li.press-armed{
  background-color: #e6e6e6;
  color: #222;
  border-color: #eee;
}

body.dark ul#tracks li.press-armed{
  background-color: #3a3c42;
  color: #f1f1f1;
  border-color: #3a3c42;
}

ul#tracks li.pending-track{
  background-color: #e6e6e6;
  color: #222;
}

body.dark ul#tracks li.pending-track{
  background-color: #3a3c42;
  border-color: #3a3c42;
  color: #f1f1f1;
}

ul#tracks li .track-artist, ul#tracks li .track-title, ul#tracks li .track-single{
  display: block;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

ul#tracks li .track-artist.scrolling, ul#tracks li .track-title.scrolling, ul#tracks li .track-single.scrolling{
  text-overflow: clip;
}

ul#tracks li .track-text{
  display: inline-block;
  max-width: none;
  white-space: nowrap;
  padding: 0 2px;
  will-change: transform;
  transform: translate3d(0,0,0);
}

@keyframes trackMarqueeStart{
  0% { transform: translate3d(0, 0, 0); }
  42% { transform: translate3d(calc(var(--scroll-left, 0px) * -1), 0, 0); }
  100% { transform: translate3d(var(--scroll-right, 0px), 0, 0); }
}

@keyframes trackMarqueeSideToSide{
  0% { transform: translate3d(var(--scroll-right, 0px), 0, 0); }
  100% { transform: translate3d(calc(var(--scroll-left, 0px) * -1), 0, 0); }
}

ul#tracks li .track-text.scroll-start{
  animation: trackMarqueeStart var(--scroll-start-duration, 8.6s) ease-in-out 1 both;
}

ul#tracks li .track-text.scroll-running{
  animation: trackMarqueeSideToSide var(--scroll-duration, 17.8s) ease-in-out infinite alternate;
}

ul#tracks li .track-artist{
  font-weight: 900;
}

ul#tracks li .track-title{
  font-weight: 700;
  opacity: 0.85;
}

ul#tracks li .track-single{
  font-weight: 800;
  min-height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

ul#tracks li.track-video .track-single{
  min-height: 1.15em;
  line-height: 1.15;
}

body.tracks-open #tracks li{
  opacity: 0;
  transform: translate3d(0, var(--tracks-item-in-y), 0) scale(var(--tracks-item-in-scale));
  transition: transform var(--tracks-item-ms) var(--tracks-bounce), opacity var(--tracks-item-opacity-ms) linear, background-color 0.2s ease;
  will-change: transform, opacity;
}

body.tracks-open.tracks-items-ready #tracks li{
  opacity: 1;
  transform: translate3d(0, 0px, 0) scale(1);
}

body.tracks-closing #tracks li{
  transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce){
  body.tracks-open #tracks li, body.tracks-open.tracks-items-ready #tracks li {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

}

.track-search-wrap{
  position: relative;
  width: 100%;
  margin: 0 0 10px 0;
}

.track-search-top .track-search-wrap{
  margin-bottom: 0 !important;
}

.track-search{
  width: 100%;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 44px 12px 14px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  caret-color: currentColor;
}

.track-search::-webkit-search-cancel-button, .track-search::-webkit-search-decoration, .track-search::-webkit-search-results-button, .track-search::-webkit-search-results-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.track-search::-ms-clear, .track-search::-ms-reveal{
  display: none;
  width: 0;
  height: 0;
}

.track-search::placeholder{
  color: #9a9a9a !important;
  font-weight: 700;
  opacity: 1;
}

.track-search:focus{
  border-color: #ff8c00;
}

.track-search-clear{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  color: #777;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  caret-color: currentColor;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  padding: 0;
}

.track-search-clear:hover{
  background: rgba(0, 0, 0, 0.06);
}

.track-search-clear:active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: translateY(-50%) scale(0.93);
}

body.dark .tracks-toggle, body.dark ul#tracks li, body.dark .track-search{
  background: #2a2c31;
  border-color: #3a3c42;
  color: #f1f1f1;
}

body.dark .track-search::placeholder{
  color: #9a9a9a !important;
  opacity: 1;
}

#tracksToggle{
  position: fixed;
  top: var(--tracks-top);
  left: 50%;
  width: min(500px, calc(100vw - 24px));
  z-index: 1602;
  transform: translate3d(-50%, var(--tracks-ty), 0);
  transition: transform var(--tracks-open-ms) var(--tracks-bounce);
  will-change: transform;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  caret-color: currentColor;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
}

body.tracks-closing #tracksToggle{
  transition: transform var(--tracks-close-ms) var(--tracks-ease);
}

body.tracks-open #tracksToggle:active, body.tracks-closing #tracksToggle:active, body.tracks-dragging #tracksToggle:active{
  transform: translate3d(-50%, var(--tracks-ty), 0) !important;
}

body.tracks-open .track-search-top{
  display: block;
  position: fixed;
  left: 50%;
  width: min(500px, calc(100vw - 24px));
  top: calc(var(--tracks-top) + var(--tracks-btn-h) + 10px);
  z-index: 1601;
  transform: translate3d(-50%, var(--tracks-panel-in), 0);
  opacity: 0;
  transition: transform var(--tracks-open-ms) var(--tracks-bounce), opacity 160ms linear;
  will-change: transform, opacity;
}

body.tracks-open.tracks-ready .track-search-top{
  transform: translate3d(-50%, 0px, 0);
  opacity: 1;
}

body.tracks-closing .track-search-top{
  transform: translate3d(-50%, 18px, 0);
  opacity: 0;
  transition: transform var(--tracks-close-ms) var(--tracks-ease), opacity 100ms linear;
}

body.tracks-open #tracksPanel{
  display: block;
  position: fixed;
  left: 50%;
  width: min(500px, calc(100vw - 24px));
  top: calc(var(--tracks-top) + var(--tracks-btn-h) + 10px + var(--tracks-search-h) + var(--tracks-gap));
  bottom: 0;
  overflow: auto;
  z-index: 10001;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
  transform: translate3d(-50%, var(--tracks-panel-in), 0);
  opacity: 0;
  transition: transform var(--tracks-open-ms) var(--tracks-bounce), opacity 160ms linear;
  will-change: transform, opacity;
}

body.tracks-open.tracks-ready #tracksPanel{
  transform: translate3d(-50%, 0px, 0);
  opacity: 1;
}

body.tracks-closing #tracksPanel{
  transform: translate3d(-50%, 26px, 0);
  opacity: 0;
  transition: transform var(--tracks-close-ms) var(--tracks-ease), opacity 100ms linear;
}

body.tracks-open.tracks-dragging #tracksToggle{
  transition: none !important;
  transform: translate3d(-50%, calc(var(--tracks-ty) + var(--tracks-drag-dy)), 0);
}

body.tracks-open.tracks-dragging .track-search-top{
  transition: none !important;
  transform: translate3d(-50%, var(--tracks-drag-dy), 0);
  opacity: var(--tracks-drag-opacity);
}

body.tracks-open.tracks-dragging #tracksPanel{
  transition: none !important;
  transform: translate3d(-50%, var(--tracks-drag-dy), 0);
  opacity: var(--tracks-drag-opacity);
}

.theme-transition-overlay .dark-scope .tracks-toggle, .theme-transition-overlay .dark-scope ul#tracks li, .theme-transition-overlay .dark-scope .track-search, .theme-transition-overlay .dark-scope .track-search-clear{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

.theme-transition-overlay .light-scope .tracks-toggle, .theme-transition-overlay .light-scope ul#tracks li, .theme-transition-overlay .light-scope .track-search, .theme-transition-overlay .light-scope .track-search-clear{
  background: #ffffff !important;
  border-color: #ddd !important;
  color: #222 !important;
}

body:has(.dropdown-overlay.open) #tracksToggle{
  z-index: 1200;
}

.tracks-toggle:active{
  transform: scale(0.99);
  background-color: #ffffff !important;
  border-color: #ddd !important;
  color: #222 !important;
}

body.dark .tracks-toggle:active{
  background-color: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

body.dark ul#tracks li:active, body.dark ul#tracks li.press-armed, html[data-theme="dark"] ul#tracks li:active, html[data-theme="dark"] ul#tracks li.press-armed{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255,140,0,.25), 0 0 12px rgba(255,140,0,.18) !important;
}

body.dark ul#tracks li.active-track{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}

body.dark ul#tracks li.pending-track{
  background-color: #3a3c42 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

@media (min-width: 900px){
  body {
    --tracks-closed-y: calc((100dvh - var(--tracks-top) - var(--tracks-bottom) - var(--safe-b)) - var(--tracks-btn-h));
  }

  body.tracks-open #tracksToggle {
    top: var(--tracks-top);
    transform: translate3d(-50%, 0px, 0);
  }

  body.tracks-open .track-search-top {
    top: calc(var(--tracks-top) + var(--tracks-btn-h) + 10px);
    z-index: 1601;
  }

  body.tracks-open #tracksPanel {
    top: calc(var(--tracks-top) + var(--tracks-btn-h) + 10px + var(--tracks-search-h) + var(--tracks-gap));
  }

}

ul#tracks li{
  -webkit-tap-highlight-color: rgba(255,140,0,.28);
}

ul#tracks li:active, ul#tracks li.press-armed, body.dark ul#tracks li:active, html[data-theme="dark"] ul#tracks li:active, html[data-theme="dark"] body ul#tracks li:active{
  background-color: #ff8c00 !important;
  color: #ffffff !important;
  border-color: #ff8c00 !important;
  box-shadow: 0 0 0 1px rgba(255,140,0,.25), 0 0 12px rgba(255,140,0,.18) !important;
}

#contentList button{
  -webkit-tap-highlight-color: rgba(255,140,0,.24);
}

#contentList button:active, #contentList button.press-armed{
  background-color: rgba(255,140,0,.22) !important;
  box-shadow: inset 0 0 0 9999px rgba(255,140,0,.16) !important;
  border-color: inherit !important;
  outline: none !important;
}

#contentList button:active *, #contentList button.press-armed *{
  border-color: inherit !important;
}

body.theme-animating .tracks-toggle, body.theme-freeze .tracks-toggle{
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation: none !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

body.tracks-open .container, html.tracks-open .container{
  filter: none;
}

#tracksOverlay[aria-hidden="false"], #tracksOverlay.open{
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body.theme-animating #tracksToggle, body.theme-freeze #tracksToggle{
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateZ(0) !important;
  -webkit-transform: translateX(-50%) translateZ(0) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  top: auto !important;
  bottom: auto !important;
}

#tracksToggle, .track-search-top{
  box-sizing: border-box;
}

#tracksToggle{
  position: fixed;
  left: 12px;
  right: 12px;
  width: auto;
  margin: 0 !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

body.theme-animating #tracksToggle, body.theme-freeze #tracksToggle{
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  margin: 0 !important;
  top: auto !important;
}

.theme-transition-clone #tracksToggle{
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
}

#tracksToggle{
  position: fixed !important;
  top: var(--tracks-top) !important;
  left: 50% !important;
  right: auto !important;
  width: min(500px, calc(100vw - 24px)) !important;
  max-width: 500px !important;
  margin: 0 !important;
  transform: translate3d(-50%, var(--tracks-ty), 0) !important;
  -webkit-transform: translate3d(-50%, var(--tracks-ty), 0) !important;
  box-sizing: border-box !important;
}

body.theme-animating #tracksToggle, body.theme-freeze #tracksToggle, .theme-transition-clone #tracksToggle{
  position: fixed !important;
  top: var(--tracks-top) !important;
  left: 50% !important;
  right: auto !important;
  width: min(500px, calc(100vw - 24px)) !important;
  max-width: 500px !important;
  transform: translate3d(-50%, var(--tracks-ty), 0) !important;
  -webkit-transform: translate3d(-50%, var(--tracks-ty), 0) !important;
}

#tracksToggle, body.theme-animating #tracksToggle, body.theme-freeze #tracksToggle, .theme-transition-clone #tracksToggle, body.tracks-open .track-search-top, body.tracks-closing .track-search-top, body.tracks-open #tracksPanel, body.tracks-closing #tracksPanel{
  width: min(500px, calc(100vw - 24px)) !important;
  max-width: 500px !important;
  box-sizing: border-box !important;
}

#tracksToggle{
  left: 50% !important;
  right: auto !important;
  transform: translate3d(-50%, var(--tracks-ty), 0) !important;
  -webkit-transform: translate3d(-50%, var(--tracks-ty), 0) !important;
}

body.tracks-open .track-search-top, body.tracks-closing .track-search-top, body.tracks-open #tracksPanel, body.tracks-closing #tracksPanel{
  left: 50% !important;
  right: auto !important;
}

#tracksToggle, .track-search-top, #tracksPanel{
  width: var(--site-width) !important;
  max-width: var(--site-max-width) !important;
  box-sizing: border-box !important;
}

#tracksToggle, .track-search-top, #tracksPanel{
  left: 50% !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

#tracksToggle{
  transform: translate3d(-50%, var(--tracks-ty), 0) !important;
  -webkit-transform: translate3d(-50%, var(--tracks-ty), 0) !important;
}

body.tracks-open .track-search-top{
  transform: translate3d(-50%, var(--tracks-panel-in), 0) !important;
  -webkit-transform: translate3d(-50%, var(--tracks-panel-in), 0) !important;
}

body.tracks-open.tracks-ready .track-search-top{
  transform: translate3d(-50%, 0px, 0) !important;
  -webkit-transform: translate3d(-50%, 0px, 0) !important;
}

body.tracks-closing .track-search-top{
  transform: translate3d(-50%, 18px, 0) !important;
  -webkit-transform: translate3d(-50%, 18px, 0) !important;
}

#tracksToggle, .track-search-top, #tracksPanel{
  width: var(--site-visual-width) !important;
  max-width: var(--site-max-width) !important;
  box-sizing: border-box !important;
  left: 50% !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.tracks-open, body.tracks-closing{
  padding-right: 0 !important;
}

body.dark ul#tracks li.pending-track.press-armed, body.dark ul#tracks li.active-track.press-armed, html[data-theme="dark"] ul#tracks li.pending-track.press-armed, html[data-theme="dark"] ul#tracks li.active-track.press-armed{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255,140,0,.25), 0 0 12px rgba(255,140,0,.18) !important;
}

@media (min-width: 769px){
  #tracksToggle, .tracks-toggle {
    margin-top: -4px !important;
  }

  

}

#tracksToggle, .tracks-toggle{
  margin-top: 6px !important;
}

#tracksToggle, .tracks-toggle, body.theme-animating #tracksToggle, body.theme-freeze #tracksToggle, .theme-transition-clone #tracksToggle, body.theme-animating .tracks-toggle, body.theme-freeze .tracks-toggle, .theme-transition-clone .tracks-toggle{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: var(--tracks-btn-h) !important;
  min-height: var(--tracks-btn-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

#tracksToggle, body.theme-animating #tracksToggle, body.theme-freeze #tracksToggle, .theme-transition-clone #tracksToggle{
  top: var(--tracks-top) !important;
  transform: translate3d(-50%, var(--tracks-ty), 0) !important;
  -webkit-transform: translate3d(-50%, var(--tracks-ty), 0) !important;
}

.content-btn, .contentlistbtn-list button, .contentlistbtn-list button{
  -webkit-tap-highlight-color: rgba(255,140,0,.24);
}

.content-btn:active, .contentlistbtn-list button:active, .contentlistbtn-list button:active, .content-btn.press-armed, .contentlistbtn-list button.press-armed, .contentlistbtn-list button.press-armed{
  background-color: rgba(255,140,0,.22) !important;
  box-shadow: inset 0 0 0 9999px rgba(255,140,0,.16) !important;
  border-color: inherit !important;
  outline: none !important;
}

.content-btn:active *, .contentlistbtn-list button:active *, .contentlistbtn-list button:active *, .content-btn.press-armed *, .contentlistbtn-list button.press-armed *, .contentlistbtn-list button.press-armed *{
  border-color: inherit !important;
}

/* Блок .track-item перенесён сюда из style.css для логичного хранения стилей списка треков. */

.track-item button{
  -webkit-tap-highlight-color: rgba(255,140,0,.24);
}

.track-item button:active, .track-item button.press-armed{
  background-color: rgba(255,140,0,.22) !important;
  box-shadow: inset 0 0 0 9999px rgba(255,140,0,.16) !important;
  border-color: inherit !important;
  outline: none !important;
}

.track-item button:active *, .track-item button.press-armed *{
  border-color: inherit !important;
}


/* FIX v16: move content list and notice up (desktop only) */
@media (min-width: 768px){
  .content-list-wrap, #contentListWrap, .contentlist-btn{
    transform: translateY(-8px) !important;
  }

  .notice-line, #noticeLine, .subscription-notice{
    transform: translateY(-8px) !important;
  }
}

/* FIX v17: desktop only precise lift (active + inactive) */
@media (min-width: 768px){
  .contentlist-btn,
  .content-list-wrap,
  #contentListWrap,
  .contentlist-btn.active{
    margin-top: -10px !important;
    transform: none !important;
  }
}

/* FIX v18: precise desktop lift (no layout break) */
@media (min-width: 768px){
  .contentlist-btn,
  #contentListWrap,
  .content-list-wrap{
    position: relative !important;
    top: -12px !important;
  }

  .contentlist-btn.active{
    position: relative !important;
    top: -12px !important;
  }
}

/* FIX v19: desktop lift content list (active+inactive) without layout shift */
@media (min-width: 768px){
  .contentlist-btn,
  #contentListWrap,
  .content-list-wrap,
  .contentlist-btn.active{
    margin-top: -12px !important;
  }
}

/* FIX v20: stronger lift content list (desktop only, active+inactive) */
@media (min-width: 768px){
  .contentlist-btn,
  .contentlist-btn.active,
  #contentListWrap,
  .content-list-wrap{
    margin-top: -16px !important;
  }
}

/* FIX v21: FORCE lift content list (desktop) */
@media (min-width: 768px){
  .contentlist-btn,
  .contentlist-btn.active,
  #contentListWrap,
  .content-list-wrap{
    transform: translateY(-20px) !important;
  }
}


/* FIX v22: REAL fix - move Content List up (fixed bottom element) */
@media (min-width: 768px){
  .contentlist-btn,
  #contentListWrap,
  .content-list-wrap{
    bottom: 80px !important;
  }
}


/* FIX v23: detach from bottom and move UP strongly */
@media (min-width: 768px){
  .contentlist-btn,
  #contentListWrap,
  .content-list-wrap{
    bottom: 160px !important;
  }
}


/* FIX v24: push Content List higher */
@media (min-width: 768px){
  .contentlist-btn,
  #contentListWrap,
  .content-list-wrap{
    bottom: 220px !important;
  }
}

/* FIX v25: FORCE move Content List UP (correct: fixed element) */
@media (min-width: 768px){
  body .contentlist-btn,
  body #contentListWrap,
  body .content-list-wrap{
    position: fixed !important;
    bottom: 260px !important;
  }
}

/* FIX v26: REAL lift content list (target wrapper) */
@media (min-width: 768px){
  .contentlist-wrap,
  .contentlist-container,
  .contentlist-btn-wrapper,
  #contentListWrap{
    position: fixed !important;
    bottom: 140px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    max-width: 600px !important;
  }
}

/* FIX v27: HARD override inline bottom (Content List) */
@media (min-width: 768px){
  .contentlist-btn,
  button.contentlist-btn,
  [class*="contentlist"]{
    bottom: 200px !important;
    top: auto !important;
  }
}


/* FIX v28: REAL desktop lift for Content List via tracks bottom variable */
@media (min-width: 768px){
  body{
    --tracks-bottom: 140px !important;
  }

  body #tracksToggle,
  body .tracks-toggle,
  body.theme-animating #tracksToggle,
  body.theme-freeze #tracksToggle,
  .theme-transition-clone #tracksToggle{
    top: var(--tracks-top) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate3d(-50%, var(--tracks-ty), 0) !important;
    -webkit-transform: translate3d(-50%, var(--tracks-ty), 0) !important;
  }
}


/* FIX v29: raise Content List + subscription higher */
@media (min-width: 768px){
  body{
    --tracks-bottom: 200px !important;
  }
}


/* FIX v30: raise Content List MUCH higher (~3x) */
@media (min-width: 768px){
  body{
    --tracks-bottom: 420px !important;
  }
}


/* FIX v31: raise Content List +1.5x higher */
@media (min-width: 768px){
  body{
    --tracks-bottom: 630px !important;
  }
}


/* FIX v33: keep Content List and subscription stable under browser zoom on desktop */
@media (min-width: 768px){
  body{
    --tracks-bottom: clamp(180px, 18vh, 220px) !important;
  }
}


/* FIX v34: desktop keep Content List fixed under browser zoom */
@media (min-width: 768px){
  body{
    --tracks-bottom: 630px !important; /* restore previous chosen level */
  }

  body #tracksToggle,
  body .tracks-toggle,
  body.theme-animating #tracksToggle,
  body.theme-freeze #tracksToggle,
  .theme-transition-clone #tracksToggle{
    top: 520px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;
  }
}


/* FIX v35: move Content List LOWER (desktop) */
@media (min-width: 768px){
  body #tracksToggle,
  body .tracks-toggle{
    top: 620px !important;
  }
}


/* FIX v36: move Content List LOWER (~1.5x more) */
@media (min-width: 768px){
  body #tracksToggle,
  body .tracks-toggle{
    top: 820px !important;
  }
}


/* FIX v40: keep Content List stable during theme switching */
@media (min-width: 768px){
  body #tracksToggle,
  body .tracks-toggle,
  body.theme-animating #tracksToggle,
  body.theme-animating .tracks-toggle,
  body.theme-freeze #tracksToggle,
  body.theme-freeze .tracks-toggle,
  .theme-transition-clone #tracksToggle,
  .theme-transition-clone .tracks-toggle{
    top: 820px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;
    transition: none !important;
    animation: none !important;
  }
}


/* FIX v41: restore desktop visibility of Content List button when bag is opened */
@media (min-width: 768px){
  body #tracksToggle,
  body .tracks-toggle,
  body.theme-animating #tracksToggle,
  body.theme-animating .tracks-toggle,
  body.theme-freeze #tracksToggle,
  body.theme-freeze .tracks-toggle,
  .theme-transition-clone #tracksToggle,
  .theme-transition-clone .tracks-toggle{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 120 !important;

    top: 690px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;
  }

  body.tracks-open #tracksToggle,
  body.tracks-open .tracks-toggle,
  body.bag-open #tracksToggle,
  body.bag-open .tracks-toggle,
  body.has-bag-results #tracksToggle,
  body.has-bag-results .tracks-toggle{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* FIX v42: restore desktop open animation like mobile */
@media (min-width: 768px){
  body{
    --tracks-bottom: 630px !important;
    --tracks-closed-y: calc((100dvh - var(--tracks-top) - var(--tracks-bottom) - var(--safe-b)) - var(--tracks-btn-h)) !important;
  }

  body #tracksToggle,
  body .tracks-toggle,
  body.theme-animating #tracksToggle,
  body.theme-animating .tracks-toggle,
  body.theme-freeze #tracksToggle,
  body.theme-freeze .tracks-toggle,
  .theme-transition-clone #tracksToggle,
  .theme-transition-clone .tracks-toggle{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1602 !important;

    top: var(--tracks-top) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, var(--tracks-ty), 0) !important;
    -webkit-transform: translate3d(-50%, var(--tracks-ty), 0) !important;
    transition: transform var(--tracks-open-ms) var(--tracks-bounce) !important;
    animation: none !important;
  }

  body.tracks-open #tracksToggle,
  body.tracks-open .tracks-toggle{
    top: var(--tracks-top) !important;
    transform: translate3d(-50%, 0px, 0) !important;
    -webkit-transform: translate3d(-50%, 0px, 0) !important;
  }

  body.tracks-closing #tracksToggle,
  body.tracks-closing .tracks-toggle{
    top: var(--tracks-top) !important;
    transform: translate3d(-50%, var(--tracks-closed-y), 0) !important;
    -webkit-transform: translate3d(-50%, var(--tracks-closed-y), 0) !important;
    transition: transform var(--tracks-close-ms) var(--tracks-ease) !important;
  }

  body.tracks-open .track-search-top{
    display: block !important;
    top: calc(var(--tracks-top) + var(--tracks-btn-h) + 10px) !important;
    left: 50% !important;
    transform: translate3d(-50%, var(--tracks-panel-in), 0) !important;
    -webkit-transform: translate3d(-50%, var(--tracks-panel-in), 0) !important;
  }

  body.tracks-open.tracks-ready .track-search-top{
    transform: translate3d(-50%, 0px, 0) !important;
    -webkit-transform: translate3d(-50%, 0px, 0) !important;
  }

  body.tracks-open #tracksPanel{
    top: calc(var(--tracks-top) + var(--tracks-btn-h) + 10px + var(--tracks-search-h) + var(--tracks-gap)) !important;
    left: 50% !important;
    transform: translate3d(-50%, var(--tracks-panel-in), 0) !important;
    -webkit-transform: translate3d(-50%, var(--tracks-panel-in), 0) !important;
  }

  body.tracks-open.tracks-ready #tracksPanel{
    transform: translate3d(-50%, 0px, 0) !important;
    -webkit-transform: translate3d(-50%, 0px, 0) !important;
  }
}


/* FIX v63: slight raise Content List (small adjustment) */
@media (min-width: 768px){
  body{
    --tracks-bottom: 600px !important;
  }
}


/* FIX v64: slightly higher again */
@media (min-width: 768px){
  body{
    --tracks-bottom: 560px !important;
  }
}


/* FIX v65: move UP (increase bottom) */
@media (min-width: 768px){
  body{
    --tracks-bottom: 640px !important;
  }
}


/* FIX v67: lock closed Content List position against browser zoom */
body.tracks-locked-closed:not(.tracks-open):not(.tracks-closing) #tracksToggle,
body.tracks-locked-closed:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
body.tracks-locked-closed.theme-animating:not(.tracks-open):not(.tracks-closing) #tracksToggle,
body.tracks-locked-closed.theme-animating:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
body.tracks-locked-closed.theme-freeze:not(.tracks-open):not(.tracks-closing) #tracksToggle,
body.tracks-locked-closed.theme-freeze:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
  top: var(--tracks-fixed-top, var(--tracks-top)) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translate3d(-50%, 0px, 0) !important;
  -webkit-transform: translate3d(-50%, 0px, 0) !important;
}


/* FIX v68: remove initial slide-up on page load (F5 / Ctrl+F5) */
html.preload body:not(.tracks-open):not(.tracks-closing){
  --tracks-ty: 0px !important;
}

html.preload body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
html.preload body:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
  transform: translate3d(-50%, 0px, 0) !important;
  -webkit-transform: translate3d(-50%, 0px, 0) !important;
  transition: none !important;
}


/* FIX v69: remove load animation WITHOUT breaking position */
html.preload body:not(.tracks-open):not(.tracks-closing){
  transition: none !important;
}

html.preload body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
html.preload body:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
  transition: none !important;
}


/* FIX v70: restore normal closed position for Content List */
body.tracks-locked-closed:not(.tracks-open):not(.tracks-closing) #tracksToggle,
body.tracks-locked-closed:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
body.tracks-locked-closed.theme-animating:not(.tracks-open):not(.tracks-closing) #tracksToggle,
body.tracks-locked-closed.theme-animating:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
body.tracks-locked-closed.theme-freeze:not(.tracks-open):not(.tracks-closing) #tracksToggle,
body.tracks-locked-closed.theme-freeze:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
  top: var(--tracks-top) !important;
  bottom: auto !important;
  transform: translate3d(-50%, var(--tracks-closed-y), 0) !important;
  -webkit-transform: translate3d(-50%, var(--tracks-closed-y), 0) !important;
}

html.preload body:not(.tracks-open):not(.tracks-closing){
  --tracks-ty: var(--tracks-closed-y) !important;
}

html.preload body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
html.preload body:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
  transform: translate3d(-50%, var(--tracks-closed-y), 0) !important;
  -webkit-transform: translate3d(-50%, var(--tracks-closed-y), 0) !important;
  transition: none !important;
}


/* FIX v72: keep closed Content List fixed during browser zoom */
body.tracks-zoom-locked:not(.tracks-open):not(.tracks-closing) #tracksToggle,
body.tracks-zoom-locked:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
  top: var(--tracks-locked-top, var(--tracks-top)) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translate3d(-50%, 0px, 0) !important;
  -webkit-transform: translate3d(-50%, 0px, 0) !important;
  transition: none !important;
}


/* FIX v73: prevent Content List falling animation on F5 / Ctrl+F5 */
body.tracks-zoom-lock-pending:not(.tracks-open):not(.tracks-closing) #tracksToggle,
body.tracks-zoom-lock-pending:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
  opacity: 0 !important;
  transition: none !important;
  animation: none !important;
}


/* FIX v30: hard-lock Content List exact closed position from working archive */
@media (min-width: 768px){
  html body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html body:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
  html.preload body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html.preload body:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
  html body.tracks-zoom-locked:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html body.tracks-zoom-locked:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
  html body.tracks-zoom-lock-pending:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html body.tracks-zoom-lock-pending:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
    position: fixed !important;
    top: 820px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: min(500px, calc(100vw - 24px)) !important;
    margin: 0 !important;
    transform: translate3d(-50%, 0px, 0) !important;
    -webkit-transform: translate3d(-50%, 0px, 0) !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: auto !important;
  }
}


/* FIX v31: raise Content List initial fixed position */
@media (min-width: 768px){
  html body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html body:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
  html.preload body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html.preload body:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
  html body.tracks-zoom-locked:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html body.tracks-zoom-locked:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
  html body.tracks-zoom-lock-pending:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html body.tracks-zoom-lock-pending:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
    top: 760px !important;
  }
}


/* FIX v32: raise Content List higher */
@media (min-width: 768px){
  html body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html body:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
  html.preload body:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html.preload body:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
  html body.tracks-zoom-locked:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html body.tracks-zoom-locked:not(.tracks-open):not(.tracks-closing) .tracks-toggle,
  html body.tracks-zoom-lock-pending:not(.tracks-open):not(.tracks-closing) #tracksToggle,
  html body.tracks-zoom-lock-pending:not(.tracks-open):not(.tracks-closing) .tracks-toggle{
    top: 700px !important;
  }
}


/* FIX v48: Content List hidden while favorites/history are open */
body.favorites-open #tracksToggle,
body.favorites-closing #tracksToggle,
body.history-open #tracksToggle{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: blur(12px) !important;
  -webkit-filter: blur(12px) !important;
}


/* FIX v56: Content List should blur/fade during Favorite bags like during Operations history */
body.favorites-open #tracksToggle,
body.favorites-closing #tracksToggle,
body.favorites-open .tracks-toggle,
body.favorites-closing .tracks-toggle{
  opacity: 0.18 !important;
  visibility: visible !important;
  pointer-events: none !important;
  filter: blur(12px) !important;
  -webkit-filter: blur(12px) !important;
}


/* FIX v57: Favorite bags should blur/fade Content List, not white-cover it */
body.favorites-open #tracksToggle,
body.favorites-closing #tracksToggle,
body.favorites-open .tracks-toggle,
body.favorites-closing .tracks-toggle{
  opacity: 0.18 !important;
  visibility: visible !important;
  pointer-events: none !important;
  filter: blur(12px) !important;
  -webkit-filter: blur(12px) !important;
}


/* FIX v134.6: Content List should blur/fade behind mobile video quality modal */
body.video-quality-modal-open #tracksToggle,
body.video-quality-modal-open .tracks-toggle,
html.video-quality-modal-open #tracksToggle,
html.video-quality-modal-open .tracks-toggle{
  opacity: 0.18 !important;
  visibility: visible !important;
  pointer-events: none !important;
  filter: blur(12px) !important;
  -webkit-filter: blur(12px) !important;
}


/* FIX v2.1.5: Content List must not blink on theme switch */
body.theme-switch-noanim #tracksToggle,
body.theme-switch-noanim #tracksToggle *,
body.theme-switch-noanim #tracksToggle::before,
body.theme-switch-noanim #tracksToggle::after,
body.theme-freeze #tracksToggle,
body.theme-freeze #tracksToggle *,
body.theme-freeze #tracksToggle::before,
body.theme-freeze #tracksToggle::after,
body.theme-animating #tracksToggle,
body.theme-animating #tracksToggle *,
body.theme-animating #tracksToggle::before,
body.theme-animating #tracksToggle::after{
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation: none !important;
}

body.theme-switch-noanim #tracksToggle.bag-theme-frozen,
body.theme-freeze #tracksToggle.bag-theme-frozen,
body.theme-animating #tracksToggle.bag-theme-frozen{
  background: var(--bag-freeze-bg, transparent) !important;
  background-color: var(--bag-freeze-bg, transparent) !important;
  border-color: var(--bag-freeze-border, transparent) !important;
  color: var(--bag-freeze-color, inherit) !important;
  box-shadow: var(--bag-freeze-shadow, none) !important;
  filter: var(--bag-freeze-filter, none) !important;
  opacity: var(--bag-freeze-opacity, 1) !important;
  -webkit-text-fill-color: var(--bag-freeze-color, currentColor) !important;
}

body.theme-switch-noanim #tracksToggle .bag-theme-frozen,
body.theme-freeze #tracksToggle .bag-theme-frozen,
body.theme-animating #tracksToggle .bag-theme-frozen,
body.theme-switch-noanim #tracksToggle .tracks-chevron,
body.theme-freeze #tracksToggle .tracks-chevron,
body.theme-animating #tracksToggle .tracks-chevron{
  color: var(--bag-freeze-color, currentColor) !important;
  fill: var(--bag-freeze-color, currentColor) !important;
  stroke: var(--bag-freeze-color, currentColor) !important;
  opacity: var(--bag-freeze-opacity, 1) !important;
  filter: var(--bag-freeze-filter, none) !important;
  -webkit-text-fill-color: var(--bag-freeze-color, currentColor) !important;
}

/* FIX v2.1.7: prevent Content List compositor blink on theme switch */
html.theme-switch-noanim body #tracksToggle,
html.theme-switch-noanim body .tracks-toggle,
body.theme-switch-noanim #tracksToggle,
body.theme-switch-noanim .tracks-toggle{
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  isolation: auto !important;
  transform-style: flat !important;
  contain: paint !important;
  transform: translate(-50%, var(--tracks-ty)) !important;
  -webkit-transform: translate(-50%, var(--tracks-ty)) !important;
}

html.theme-switch-noanim body #tracksToggle .tracks-chevron,
body.theme-switch-noanim #tracksToggle .tracks-chevron{
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

html.theme-switch-noanim body #tracksToggle.open .tracks-chevron,
body.theme-switch-noanim #tracksToggle.open .tracks-chevron{
  transform: rotate(0deg) !important;
}

html.theme-switch-noanim body #tracksToggle:not(.open) .tracks-chevron,
body.theme-switch-noanim #tracksToggle:not(.open) .tracks-chevron{
  transform: rotate(180deg) !important;
}


/* FIX v2.1.8: hard-freeze Content List colors during theme switch */
body.theme-switch-noanim #tracksToggle.contentlist-theme-frozen,
body.theme-switch-noanim #tracksToggle.contentlist-theme-frozen::before,
body.theme-switch-noanim #tracksToggle.contentlist-theme-frozen::after,
html.theme-switch-noanim body #tracksToggle.contentlist-theme-frozen,
html.theme-switch-noanim body #tracksToggle.contentlist-theme-frozen::before,
html.theme-switch-noanim body #tracksToggle.contentlist-theme-frozen::after{
  background: var(--contentlist-freeze-bg, transparent) !important;
  background-color: var(--contentlist-freeze-bg, transparent) !important;
  border-color: var(--contentlist-freeze-border, transparent) !important;
  color: var(--contentlist-freeze-color, inherit) !important;
  box-shadow: var(--contentlist-freeze-shadow, none) !important;
  filter: var(--contentlist-freeze-filter, none) !important;
  opacity: var(--contentlist-freeze-opacity, 1) !important;
  -webkit-text-fill-color: var(--contentlist-freeze-color, currentColor) !important;
}

body.theme-switch-noanim #tracksToggle.contentlist-theme-frozen *,
body.theme-switch-noanim #tracksToggle.contentlist-theme-frozen .tracks-chevron,
html.theme-switch-noanim body #tracksToggle.contentlist-theme-frozen *,
html.theme-switch-noanim body #tracksToggle.contentlist-theme-frozen .tracks-chevron{
  background: var(--contentlist-freeze-bg, transparent) !important;
  background-color: transparent !important;
  border-color: var(--contentlist-freeze-border, transparent) !important;
  color: var(--contentlist-freeze-color, inherit) !important;
  fill: var(--contentlist-freeze-color, currentColor) !important;
  stroke: var(--contentlist-freeze-color, currentColor) !important;
  box-shadow: none !important;
  filter: var(--contentlist-freeze-filter, none) !important;
  opacity: var(--contentlist-freeze-opacity, 1) !important;
  -webkit-text-fill-color: var(--contentlist-freeze-color, currentColor) !important;
}


/* FIX v2.1.9: remove Content List blink on theme switch without color freeze */
#tracksToggle,
.tracks-toggle{
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  isolation: auto !important;
  transform-style: flat !important;
  contain: layout style paint !important;
  transform: translate(-50%, var(--tracks-ty)) !important;
  -webkit-transform: translate(-50%, var(--tracks-ty)) !important;
}

#tracksToggle,
.tracks-toggle,
#tracksToggle::before,
#tracksToggle::after,
#tracksToggle *,
#tracksToggle *::before,
#tracksToggle *::after{
  transition-property: transform !important;
}

.tracks-chevron,
#tracksToggle .tracks-chevron{
  transition-property: transform !important;
}

body.tracks-open #tracksToggle,
body.tracks-open .tracks-toggle{
  transform: translate(-50%, 0px) !important;
  -webkit-transform: translate(-50%, 0px) !important;
}

body.tracks-closing #tracksToggle,
body.tracks-closing .tracks-toggle{
  transform: translate(-50%, var(--tracks-closed-y)) !important;
  -webkit-transform: translate(-50%, var(--tracks-closed-y)) !important;
}

html.theme-switch-noanim body #tracksToggle,
html.theme-switch-noanim body .tracks-toggle,
body.theme-switch-noanim #tracksToggle,
body.theme-switch-noanim .tracks-toggle,
html.theme-switch-noanim body #tracksToggle *,
body.theme-switch-noanim #tracksToggle *{
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  isolation: auto !important;
  transform-style: flat !important;
  contain: layout style paint !important;
}

html.theme-switch-noanim body #tracksToggle,
html.theme-switch-noanim body .tracks-toggle,
body.theme-switch-noanim #tracksToggle,
body.theme-switch-noanim .tracks-toggle{
  transform: translate(-50%, var(--tracks-ty)) !important;
  -webkit-transform: translate(-50%, var(--tracks-ty)) !important;
}

html.theme-switch-noanim body #tracksToggle.open .tracks-chevron,
body.theme-switch-noanim #tracksToggle.open .tracks-chevron{
  transform: rotate(0deg) !important;
}

html.theme-switch-noanim body #tracksToggle:not(.open) .tracks-chevron,
body.theme-switch-noanim #tracksToggle:not(.open) .tracks-chevron{
  transform: rotate(180deg) !important;
}


/* FIX v2.1.10: keep Content List theme colors stable and transition-free */
#tracksToggle,
#tracksToggle.tracks-toggle,
.tracks-toggle{
  transition-property: transform !important;
  transition-duration: var(--tracks-open-ms) !important;
}

body.theme-switch-noanim #tracksToggle,
body.theme-switch-noanim #tracksToggle *,
html.theme-switch-noanim body #tracksToggle,
html.theme-switch-noanim body #tracksToggle *{
  transition: none !important;
  animation: none !important;
}

/* FIX v2.1.11: Content List must look disabled on desktop and mobile until wallet+trial/subscription+found bag */
#tracksToggle.is-disabled,
#tracksToggle.wallet-ui-disabled,
#tracksToggle:disabled,
.tracks-toggle.is-disabled,
.tracks-toggle.wallet-ui-disabled,
.tracks-toggle:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(.08) !important;
}

@media (min-width: 768px){
  body #tracksToggle.is-disabled,
  body #tracksToggle.wallet-ui-disabled,
  body #tracksToggle:disabled,
  body .tracks-toggle.is-disabled,
  body .tracks-toggle.wallet-ui-disabled,
  body .tracks-toggle:disabled,
  body.theme-animating #tracksToggle.is-disabled,
  body.theme-animating #tracksToggle.wallet-ui-disabled,
  body.theme-animating #tracksToggle:disabled,
  body.theme-animating .tracks-toggle.is-disabled,
  body.theme-animating .tracks-toggle.wallet-ui-disabled,
  body.theme-animating .tracks-toggle:disabled,
  body.theme-freeze #tracksToggle.is-disabled,
  body.theme-freeze #tracksToggle.wallet-ui-disabled,
  body.theme-freeze #tracksToggle:disabled,
  body.theme-freeze .tracks-toggle.is-disabled,
  body.theme-freeze .tracks-toggle.wallet-ui-disabled,
  body.theme-freeze .tracks-toggle:disabled,
  .theme-transition-clone #tracksToggle.is-disabled,
  .theme-transition-clone #tracksToggle.wallet-ui-disabled,
  .theme-transition-clone #tracksToggle:disabled,
  .theme-transition-clone .tracks-toggle.is-disabled,
  .theme-transition-clone .tracks-toggle.wallet-ui-disabled,
  .theme-transition-clone .tracks-toggle:disabled{
    opacity: .45 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    filter: grayscale(.08) !important;
  }
}


/* FIX v2.1.13: keep Content List in theme colors when disabled, only make it look dim/inactive */
#tracksToggle.is-disabled,
#tracksToggle.wallet-ui-disabled,
#tracksToggle:disabled,
.tracks-toggle.is-disabled,
.tracks-toggle.wallet-ui-disabled,
.tracks-toggle:disabled{
  background: #ffffff !important;
  border-color: #ddd !important;
  color: #222 !important;
  box-shadow: none !important;
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: none !important;
}

#tracksToggle.is-disabled #tracksToggleText,
#tracksToggle.wallet-ui-disabled #tracksToggleText,
#tracksToggle:disabled #tracksToggleText,
.tracks-toggle.is-disabled #tracksToggleText,
.tracks-toggle.wallet-ui-disabled #tracksToggleText,
.tracks-toggle:disabled #tracksToggleText,
#tracksToggle.is-disabled .tracks-chevron,
#tracksToggle.wallet-ui-disabled .tracks-chevron,
#tracksToggle:disabled .tracks-chevron,
.tracks-toggle.is-disabled .tracks-chevron,
.tracks-toggle.wallet-ui-disabled .tracks-chevron,
.tracks-toggle:disabled .tracks-chevron{
  color: inherit !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #tracksToggle.is-disabled,
html[data-theme="dark"] #tracksToggle.wallet-ui-disabled,
html[data-theme="dark"] #tracksToggle:disabled,
html[data-theme="dark"] .tracks-toggle.is-disabled,
html[data-theme="dark"] .tracks-toggle.wallet-ui-disabled,
html[data-theme="dark"] .tracks-toggle:disabled,
body.dark #tracksToggle.is-disabled,
body.dark #tracksToggle.wallet-ui-disabled,
body.dark #tracksToggle:disabled,
body.dark .tracks-toggle.is-disabled,
body.dark .tracks-toggle.wallet-ui-disabled,
body.dark .tracks-toggle:disabled{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"] #tracksToggle.is-disabled #tracksToggleText,
html[data-theme="dark"] #tracksToggle.wallet-ui-disabled #tracksToggleText,
html[data-theme="dark"] #tracksToggle:disabled #tracksToggleText,
html[data-theme="dark"] .tracks-toggle.is-disabled #tracksToggleText,
html[data-theme="dark"] .tracks-toggle.wallet-ui-disabled #tracksToggleText,
html[data-theme="dark"] .tracks-toggle:disabled #tracksToggleText,
html[data-theme="dark"] #tracksToggle.is-disabled .tracks-chevron,
html[data-theme="dark"] #tracksToggle.wallet-ui-disabled .tracks-chevron,
html[data-theme="dark"] #tracksToggle:disabled .tracks-chevron,
html[data-theme="dark"] .tracks-toggle.is-disabled .tracks-chevron,
html[data-theme="dark"] .tracks-toggle.wallet-ui-disabled .tracks-chevron,
html[data-theme="dark"] .tracks-toggle:disabled .tracks-chevron,
body.dark #tracksToggle.is-disabled #tracksToggleText,
body.dark #tracksToggle.wallet-ui-disabled #tracksToggleText,
body.dark #tracksToggle:disabled #tracksToggleText,
body.dark .tracks-toggle.is-disabled #tracksToggleText,
body.dark .tracks-toggle.wallet-ui-disabled #tracksToggleText,
body.dark .tracks-toggle:disabled #tracksToggleText,
body.dark #tracksToggle.is-disabled .tracks-chevron,
body.dark #tracksToggle.wallet-ui-disabled .tracks-chevron,
body.dark #tracksToggle:disabled .tracks-chevron,
body.dark .tracks-toggle.is-disabled .tracks-chevron,
body.dark .tracks-toggle.wallet-ui-disabled .tracks-chevron,
body.dark .tracks-toggle:disabled .tracks-chevron{
  color: inherit !important;
}


/* FIX v2.1.15: Content List disabled state must be even paler, like player / track-not-selected, while staying in theme */
#tracksToggle.is-disabled,
#tracksToggle.wallet-ui-disabled,
#tracksToggle:disabled,
.tracks-toggle.is-disabled,
.tracks-toggle.wallet-ui-disabled,
.tracks-toggle:disabled{
  background: rgba(255,255,255,0.64) !important;
  border-color: rgba(221,221,221,0.62) !important;
  color: rgba(34,34,34,0.34) !important;
  box-shadow: none !important;
  opacity: .56 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: saturate(.82) !important;
}

#tracksToggle.is-disabled #tracksToggleText,
#tracksToggle.wallet-ui-disabled #tracksToggleText,
#tracksToggle:disabled #tracksToggleText,
.tracks-toggle.is-disabled #tracksToggleText,
.tracks-toggle.wallet-ui-disabled #tracksToggleText,
.tracks-toggle:disabled #tracksToggleText,
#tracksToggle.is-disabled .tracks-chevron,
#tracksToggle.wallet-ui-disabled .tracks-chevron,
#tracksToggle:disabled .tracks-chevron,
.tracks-toggle.is-disabled .tracks-chevron,
.tracks-toggle.wallet-ui-disabled .tracks-chevron,
.tracks-toggle:disabled .tracks-chevron{
  color: rgba(34,34,34,0.34) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #tracksToggle.is-disabled,
html[data-theme="dark"] #tracksToggle.wallet-ui-disabled,
html[data-theme="dark"] #tracksToggle:disabled,
html[data-theme="dark"] .tracks-toggle.is-disabled,
html[data-theme="dark"] .tracks-toggle.wallet-ui-disabled,
html[data-theme="dark"] .tracks-toggle:disabled,
body.dark #tracksToggle.is-disabled,
body.dark #tracksToggle.wallet-ui-disabled,
body.dark #tracksToggle:disabled,
body.dark .tracks-toggle.is-disabled,
body.dark .tracks-toggle.wallet-ui-disabled,
body.dark .tracks-toggle:disabled{
  background: rgba(42,44,49,0.60) !important;
  border-color: rgba(58,60,66,0.58) !important;
  color: rgba(241,241,241,0.34) !important;
}

html[data-theme="dark"] #tracksToggle.is-disabled #tracksToggleText,
html[data-theme="dark"] #tracksToggle.wallet-ui-disabled #tracksToggleText,
html[data-theme="dark"] #tracksToggle:disabled #tracksToggleText,
html[data-theme="dark"] .tracks-toggle.is-disabled #tracksToggleText,
html[data-theme="dark"] .tracks-toggle.wallet-ui-disabled #tracksToggleText,
html[data-theme="dark"] .tracks-toggle:disabled #tracksToggleText,
html[data-theme="dark"] #tracksToggle.is-disabled .tracks-chevron,
html[data-theme="dark"] #tracksToggle.wallet-ui-disabled .tracks-chevron,
html[data-theme="dark"] #tracksToggle:disabled .tracks-chevron,
html[data-theme="dark"] .tracks-toggle.is-disabled .tracks-chevron,
html[data-theme="dark"] .tracks-toggle.wallet-ui-disabled .tracks-chevron,
html[data-theme="dark"] .tracks-toggle:disabled .tracks-chevron,
body.dark #tracksToggle.is-disabled #tracksToggleText,
body.dark #tracksToggle.wallet-ui-disabled #tracksToggleText,
body.dark #tracksToggle:disabled #tracksToggleText,
body.dark .tracks-toggle.is-disabled #tracksToggleText,
body.dark .tracks-toggle.wallet-ui-disabled #tracksToggleText,
body.dark .tracks-toggle:disabled #tracksToggleText,
body.dark #tracksToggle.is-disabled .tracks-chevron,
body.dark #tracksToggle.wallet-ui-disabled .tracks-chevron,
body.dark #tracksToggle:disabled .tracks-chevron,
body.dark .tracks-toggle.is-disabled .tracks-chevron,
body.dark .tracks-toggle.wallet-ui-disabled .tracks-chevron,
body.dark .tracks-toggle:disabled .tracks-chevron{
  color: rgba(241,241,241,0.34) !important;
}


/* FIX v2.1.16: exact inactive Content List background palette requested by user */
html[data-theme="light"] #tracksToggle.is-disabled,
html[data-theme="light"] #tracksToggle.wallet-ui-disabled,
html[data-theme="light"] #tracksToggle:disabled,
html[data-theme="light"] .tracks-toggle.is-disabled,
html[data-theme="light"] .tracks-toggle.wallet-ui-disabled,
html[data-theme="light"] .tracks-toggle:disabled,
body:not(.dark) #tracksToggle.is-disabled,
body:not(.dark) #tracksToggle.wallet-ui-disabled,
body:not(.dark) #tracksToggle:disabled,
body:not(.dark) .tracks-toggle.is-disabled,
body:not(.dark) .tracks-toggle.wallet-ui-disabled,
body:not(.dark) .tracks-toggle:disabled{
  background: #f9fafc !important;
  border-color: #eceff4 !important;
  color: #a6afbb !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] #tracksToggle.is-disabled #tracksToggleText,
html[data-theme="light"] #tracksToggle.wallet-ui-disabled #tracksToggleText,
html[data-theme="light"] #tracksToggle:disabled #tracksToggleText,
html[data-theme="light"] .tracks-toggle.is-disabled #tracksToggleText,
html[data-theme="light"] .tracks-toggle.wallet-ui-disabled #tracksToggleText,
html[data-theme="light"] .tracks-toggle:disabled #tracksToggleText,
html[data-theme="light"] #tracksToggle.is-disabled .tracks-chevron,
html[data-theme="light"] #tracksToggle.wallet-ui-disabled .tracks-chevron,
html[data-theme="light"] #tracksToggle:disabled .tracks-chevron,
html[data-theme="light"] .tracks-toggle.is-disabled .tracks-chevron,
html[data-theme="light"] .tracks-toggle.wallet-ui-disabled .tracks-chevron,
html[data-theme="light"] .tracks-toggle:disabled .tracks-chevron,
body:not(.dark) #tracksToggle.is-disabled #tracksToggleText,
body:not(.dark) #tracksToggle.wallet-ui-disabled #tracksToggleText,
body:not(.dark) #tracksToggle:disabled #tracksToggleText,
body:not(.dark) .tracks-toggle.is-disabled #tracksToggleText,
body:not(.dark) .tracks-toggle.wallet-ui-disabled #tracksToggleText,
body:not(.dark) .tracks-toggle:disabled #tracksToggleText,
body:not(.dark) #tracksToggle.is-disabled .tracks-chevron,
body:not(.dark) #tracksToggle.wallet-ui-disabled .tracks-chevron,
body:not(.dark) #tracksToggle:disabled .tracks-chevron,
body:not(.dark) .tracks-toggle.is-disabled .tracks-chevron,
body:not(.dark) .tracks-toggle.wallet-ui-disabled .tracks-chevron,
body:not(.dark) .tracks-toggle:disabled .tracks-chevron{
  color: #a6afbb !important;
}

html[data-theme="dark"] #tracksToggle.is-disabled,
html[data-theme="dark"] #tracksToggle.wallet-ui-disabled,
html[data-theme="dark"] #tracksToggle:disabled,
html[data-theme="dark"] .tracks-toggle.is-disabled,
html[data-theme="dark"] .tracks-toggle.wallet-ui-disabled,
html[data-theme="dark"] .tracks-toggle:disabled,
body.dark #tracksToggle.is-disabled,
body.dark #tracksToggle.wallet-ui-disabled,
body.dark #tracksToggle:disabled,
body.dark .tracks-toggle.is-disabled,
body.dark .tracks-toggle.wallet-ui-disabled,
body.dark .tracks-toggle:disabled{
  background: #232529 !important;
  border-color: #2c3036 !important;
  color: #747b86 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #tracksToggle.is-disabled #tracksToggleText,
html[data-theme="dark"] #tracksToggle.wallet-ui-disabled #tracksToggleText,
html[data-theme="dark"] #tracksToggle:disabled #tracksToggleText,
html[data-theme="dark"] .tracks-toggle.is-disabled #tracksToggleText,
html[data-theme="dark"] .tracks-toggle.wallet-ui-disabled #tracksToggleText,
html[data-theme="dark"] .tracks-toggle:disabled #tracksToggleText,
html[data-theme="dark"] #tracksToggle.is-disabled .tracks-chevron,
html[data-theme="dark"] #tracksToggle.wallet-ui-disabled .tracks-chevron,
html[data-theme="dark"] #tracksToggle:disabled .tracks-chevron,
html[data-theme="dark"] .tracks-toggle.is-disabled .tracks-chevron,
html[data-theme="dark"] .tracks-toggle.wallet-ui-disabled .tracks-chevron,
html[data-theme="dark"] .tracks-toggle:disabled .tracks-chevron,
body.dark #tracksToggle.is-disabled #tracksToggleText,
body.dark #tracksToggle.wallet-ui-disabled #tracksToggleText,
body.dark #tracksToggle:disabled #tracksToggleText,
body.dark .tracks-toggle.is-disabled #tracksToggleText,
body.dark .tracks-toggle.wallet-ui-disabled #tracksToggleText,
body.dark .tracks-toggle:disabled #tracksToggleText,
body.dark #tracksToggle.is-disabled .tracks-chevron,
body.dark #tracksToggle.wallet-ui-disabled .tracks-chevron,
body.dark #tracksToggle:disabled .tracks-chevron,
body.dark .tracks-toggle.is-disabled .tracks-chevron,
body.dark .tracks-toggle.wallet-ui-disabled .tracks-chevron,
body.dark .tracks-toggle:disabled .tracks-chevron{
  color: #747b86 !important;
}


/* FIX v64: tighten Content List vertical gaps across audio/video on all platforms */
.track-search-wrap{
  margin: 0 0 0 0 !important;
}

ul#tracks{
  gap: 6px !important;
}

body.tracks-open .track-search-top{
  top: calc(var(--tracks-top) + var(--tracks-btn-h) + 6px) !important;
}

body.tracks-open #tracksPanel{
  top: calc(var(--tracks-top) + var(--tracks-btn-h) + 6px + var(--tracks-search-h) - 3px) !important;
}