/*
  ФАЙЛ: player.css
  Назначение: стили аудио- и видео-плеера, а также элементов управления воспроизведением.
  Что редактируется в этом файле:
  - блок текущего воспроизведения: .now-playing, .now-playing-inner, #nowPlaying
  - основная панель управления: .player-bar, .player-time, .seek-bar, .volume-bar
  - кнопки управления: .player-btn, .controls button, #prevBtn, #playPauseBtn, #repeatBtn, #nextBtn, #muteBtn
  - иконки и состояния active для кнопок плеера
  - inline-видео и полноэкранный video UI: #videoPlayerShell, #videoPlayer, .video-inline-*, .video-player-*
  - состояния video-player-active / fullscreen / dark и визуальное поведение плеера в этих режимах
  Примечание: все правки по плееру и video UI выносить сюда.
*/

html[data-theme="dark"] .now-playing, html[data-theme="dark"] .controls button, html[data-theme="dark"] .player-bar, html[data-theme="dark"] .player-btn{
  background: #2a2c31;
  border-color: #3a3c42;
  color: #f1f1f1;
}

html[data-theme="dark"] .btn-icon, html[data-theme="dark"] .now-playing-inner, html[data-theme="dark"] .player-time{
  color: #f1f1f1;
}

html[data-theme="dark"] .player-btn .icon-svg{
  fill: #fff;
}

html[data-theme="dark"] #repeatBtn.active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}

.now-playing{
  width: 100%;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.now-playing::before, .now-playing::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  background: inherit;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.now-playing::before{
  left: 0;
}

.now-playing::after{
  right: 0;
}

.now-playing-inner{
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: #222;
  line-height: 1.2;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 2px;
  position: relative;
  z-index: 1;
}

#nowPlayingText, .now-playing-text{
  display: inline;
  white-space: nowrap;
  max-width: 100%;
  line-height: inherit;
  vertical-align: baseline;
}

.now-playing-spacer{
  display: none !important;
}

.now-playing-inner.scroll{
  --np-scroll-shift: 8px;
  animation: nowPlayingSweep var(--np-scroll-duration, 17.8s) ease-in-out infinite !important;
  will-change: transform;
}

.player-bar{
  width: 100%;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  caret-color: currentColor;
}

.player-btn{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #000;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  padding: 0;
  line-height: 1;
}

.player-btn .icon-svg{
  width: 22px;
  height: 22px;
  display: block;
  fill: #000;
  flex: 0 0 auto;
}

body.dark .player-btn .icon-svg{
  fill: #fff;
}

.player-btn .icon-svg, body.dark .player-btn .icon-svg{
  transition: none !important;
}

.player-btn:focus, .player-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.player-btn:active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: scale(0.93);
}

.player-time{
  font-size: 13px;
  font-weight: 800;
  color: #222;
  white-space: nowrap;
  user-select: none;
  flex: 0 0 auto;
}

.player-time-sep{
  margin: 0 4px;
  opacity: 0.7;
}

.seek-bar{
  flex: 1 1 auto;
  min-width: 0;
  height: 6px;
  accent-color: #ff8c00;
  --seek-played-pct: 0%;
  --seek-buffered-pct: 0%;
  --seek-track-idle: rgba(0,0,0,0.18);
  --seek-track-buffered: rgba(255, 0, 0, 0.9);
  --seek-track-played: #ff8c00;
}

.volume-bar{
  flex: 0 0 auto;
  height: 6px;
  accent-color: #ff8c00;
  width: min(120px, 34vw);
  max-width: 140px;
}

.controls{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.controls button{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  caret-color: currentColor;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  line-height: 1;
}

.controls button:focus, .controls button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.btn-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: #000;
  position: static;
}

@media (hover: hover) and (pointer: fine){.controls button:hover {
    background-color: #ffffff;
  }}

.controls button:active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: scale(0.93);
}

.controls button:active .btn-icon{
  color: #ffffff !important;
}

#repeatBtn .icon-svg{
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}

#repeatBtn.active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}

#prevBtn .btn-icon{
  transform: translateX(-0.5px);
}

#nextBtn .btn-icon{
  transform: translateX(1.5px);
}

body.dark .now-playing, body.dark .controls button, body.dark .player-bar, body.dark .player-btn{
  background: #2a2c31;
  border-color: #3a3c42;
  color: #f1f1f1;
}

body.dark .now-playing-inner{
  color: #f1f1f1;
}

body.dark .player-time{
  color: #f1f1f1;
}

body.dark .btn-icon{
  color: #f1f1f1;
}

body.dark .controls button{
  color: #f1f1f1;
}

@media (max-width: 480px){.now-playing-inner {
    font-size: 14px;
  }.controls {
    gap: 10px;
  }.controls button {
    width: 50px;
    height: 50px;
  }.btn-icon {
    font-size: 24px;
  }.player-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 10px;
  }.player-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-size: 18px;
  }.player-btn .icon-svg {
    width: 22px;
    height: 22px;
  }.player-time {
    font-size: 12px;
    flex: 1 1 auto;
    min-width: 0;
  }.seek-bar {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    order: 10;
  }.volume-bar {
    width: min(120px, 42vw);
    max-width: 140px;
  }}

.theme-transition-overlay .dark-scope .now-playing, .theme-transition-overlay .dark-scope .controls button, .theme-transition-overlay .dark-scope .player-bar, .theme-transition-overlay .dark-scope .player-btn, .theme-transition-overlay .dark-scope .player-time{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

.theme-transition-overlay .light-scope .now-playing, .theme-transition-overlay .light-scope .controls button, .theme-transition-overlay .light-scope .player-bar, .theme-transition-overlay .light-scope .player-btn, .theme-transition-overlay .light-scope .player-time{
  background: #ffffff !important;
  border-color: #ddd !important;
  color: #222 !important;
}

.theme-transition-overlay .dark-scope .player-btn .icon-svg{
  fill: #fff !important;
}

.theme-transition-overlay .light-scope .player-btn .icon-svg{
  fill: #000 !important;
}

.theme-transition-overlay .dark-scope .btn-icon{
  color: #f1f1f1 !important;
}

.theme-transition-overlay .light-scope .btn-icon{
  color: #000 !important;
}

.theme-transition-overlay .dark-scope .now-playing-inner{
  color: #f1f1f1 !important;
}

.theme-transition-overlay .light-scope .now-playing-inner{
  color: #222 !important;
}

.theme-transition-overlay .btn-icon, .theme-transition-overlay .now-playing-inner{
  transition: none !important;
}

.now-playing{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.now-playing-inner{
  max-width: 100%;
  padding: 0 6px;
  box-sizing: border-box;
}

.now-playing-inner.scroll{
  animation: nowPlayingSweep var(--np-scroll-duration, 17.8s) ease-in-out infinite !important;
  will-change: transform;
}

.seek-bar, .volume-bar{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.seek-bar::-moz-range-track{
  height: 6px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(to right, var(--seek-track-played) 0, var(--seek-track-played) var(--seek-played-pct), var(--seek-track-buffered) var(--seek-played-pct), var(--seek-track-buffered) var(--seek-buffered-pct), var(--seek-track-idle) var(--seek-buffered-pct), var(--seek-track-idle) 100%);
}

.volume-bar::-moz-range-track{
  height: 6px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
}

.seek-bar::-moz-range-progress, .volume-bar::-moz-range-progress{
  height: 6px;
  border: none;
  border-radius: 999px;
  background: #ff8c00;
}

.seek-bar::-moz-range-thumb, .volume-bar::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 0;
  background: #ff8c00;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

.seek-bar::-moz-focus-outer, .volume-bar::-moz-focus-outer{
  border: 0 !important;
}

.seek-bar:focus, .volume-bar:focus{
  outline: none !important;
  box-shadow: none !important;
}

body.dark .seek-bar::-moz-range-track{
  background: linear-gradient(to right, var(--seek-track-played) 0, var(--seek-track-played) var(--seek-played-pct), var(--seek-track-buffered) var(--seek-played-pct), var(--seek-track-buffered) var(--seek-buffered-pct), var(--seek-track-idle) var(--seek-buffered-pct), var(--seek-track-idle) 100%);
}

body.dark .volume-bar::-moz-range-track{
  background: rgba(255,255,255,0.22);
}

.seek-bar::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--seek-track-played) 0, var(--seek-track-played) var(--seek-played-pct), var(--seek-track-buffered) var(--seek-played-pct), var(--seek-track-buffered) var(--seek-buffered-pct), var(--seek-track-idle) var(--seek-buffered-pct), var(--seek-track-idle) 100%);
  border: none;
}

.volume-bar::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  border: none;
}

body.dark .seek-bar{
  --seek-track-idle: rgba(255,255,255,0.22);
  --seek-track-buffered: rgba(255,0,0,0.68);
}

body.dark .seek-bar::-webkit-slider-runnable-track{
  background: linear-gradient(to right, var(--seek-track-played) 0, var(--seek-track-played) var(--seek-played-pct), var(--seek-track-buffered) var(--seek-played-pct), var(--seek-track-buffered) var(--seek-buffered-pct), var(--seek-track-idle) var(--seek-buffered-pct), var(--seek-track-idle) 100%);
}

body.dark .volume-bar::-webkit-slider-runnable-track{
  background: rgba(255,255,255,0.22);
}

.seek-bar::-webkit-slider-thumb, .volume-bar::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ff8c00;
  border: none;
  margin-top: -5px;
  box-shadow: none;
}

.theme-transition-overlay .seek-bar, .theme-transition-overlay .volume-bar{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.theme-transition-overlay .seek-bar::-webkit-slider-runnable-track, .theme-transition-overlay .volume-bar::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: var(--tw-range-track);
  border: none;
}

.theme-transition-overlay .seek-bar::-webkit-slider-thumb, .theme-transition-overlay .volume-bar::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ff8c00;
  border: none;
  margin-top: -5px;
  box-shadow: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.theme-transition-overlay .seek-bar::-moz-range-track, .theme-transition-overlay .volume-bar::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: var(--tw-range-track);
  border: none;
}

.theme-transition-overlay .seek-bar::-moz-range-progress, .theme-transition-overlay .volume-bar::-moz-range-progress{
  height: 6px;
  border-radius: 999px;
  background: #ff8c00;
  border: none;
}

.theme-transition-overlay .seek-bar::-moz-range-thumb, .theme-transition-overlay .volume-bar::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ff8c00;
  border: 0;
  box-shadow: none;
}

.theme-transition-overlay .light-scope .seek-bar, .theme-transition-overlay .light-scope .volume-bar{
  color-scheme: light;
}

.theme-transition-overlay .dark-scope .seek-bar, .theme-transition-overlay .dark-scope .volume-bar{
  color-scheme: dark;
}

.theme-transition-overlay.to-light .seek-bar, .theme-transition-overlay.to-light .volume-bar{
  color-scheme: light !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
}

.theme-transition-overlay.to-light .seek-bar::-webkit-slider-runnable-track, .theme-transition-overlay.to-light .volume-bar::-webkit-slider-runnable-track{
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.18) !important;
  border: none !important;
}

.theme-transition-overlay.to-light .seek-bar::-webkit-slider-thumb, .theme-transition-overlay.to-light .volume-bar::-webkit-slider-thumb{
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #ff8c00 !important;
  border: none !important;
  margin-top: -5px !important;
  box-shadow: none !important;
}

.theme-transition-overlay.to-light .seek-bar::-moz-range-track, .theme-transition-overlay.to-light .volume-bar::-moz-range-track{
  height: 6px !important;
  border: none !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.18) !important;
}

.theme-transition-overlay.to-light .seek-bar::-moz-range-progress, .theme-transition-overlay.to-light .volume-bar::-moz-range-progress{
  height: 6px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #ff8c00 !important;
}

.theme-transition-overlay.to-light .seek-bar::-moz-range-thumb, .theme-transition-overlay.to-light .volume-bar::-moz-range-thumb{
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #ff8c00 !important;
  box-shadow: none !important;
}

#prevBtn, #nextBtn{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  caret-color: currentColor;
}

#prevBtn:active .btn-icon, #nextBtn:active .btn-icon{
  color: #000 !important;
}

body.dark #prevBtn:active .btn-icon, body.dark #nextBtn:active .btn-icon{
  color: #f1f1f1 !important;
}

body.wallet-modal-open .now-playing, body.wallet-modal-open .controls, body.wallet-modal-open .player-bar{
  transform: none !important;
  -webkit-transform: none !important;
}

@media (hover: hover) and (pointer: fine){html[data-theme="light"] .controls button:hover, body:not(.dark) .controls button:hover {
    background-color: #ffffff !important;
    border-color: #ccc !important;
    color: #000 !important;
  }.theme-transition-overlay .light-scope .controls button:hover {
    background-color: #ffffff !important;
    border-color: #ccc !important;
    color: #000 !important;
  }}

@media (hover: hover) and (pointer: fine){html[data-theme="light"] #prevBtn:active, html[data-theme="light"] #nextBtn:active, body:not(.dark) #prevBtn:active, body:not(.dark) #nextBtn:active, .theme-transition-overlay .light-scope #prevBtn:active, .theme-transition-overlay .light-scope #nextBtn:active {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
  }html[data-theme="light"] #prevBtn:active .btn-icon, html[data-theme="light"] #nextBtn:active .btn-icon, body:not(.dark) #prevBtn:active .btn-icon, body:not(.dark) #nextBtn:active .btn-icon, .theme-transition-overlay .light-scope #prevBtn:active .btn-icon, .theme-transition-overlay .light-scope #nextBtn:active .btn-icon {
    color: #ffffff !important;
  }}

body.theme-animating .controls, body.theme-freeze .controls, body.theme-animating .player-bar, body.theme-freeze .player-bar{
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, filter !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

.player-bar, .controls{
  box-sizing: border-box;
}

.player-bar, .controls, .now-playing{
  width: var(--site-width) !important;
  max-width: var(--site-max-width) !important;
  box-sizing: border-box !important;
}

.now-playing, .controls, .player-bar{
  width: var(--site-visual-width) !important;
  max-width: var(--site-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.theme-animating .now-playing, body.theme-freeze .now-playing, body.theme-animating .controls, body.theme-freeze .controls, body.theme-animating .player-bar, body.theme-freeze .player-bar{
  transform: none !important;
  -webkit-transform: none !important;
}

body.theme-animating .now-playing, body.theme-freeze .now-playing, body.theme-animating .controls, body.theme-freeze .controls, body.theme-animating .player-bar, body.theme-freeze .player-bar{
  width: var(--site-visual-width, min(500px, calc(100vw - 24px))) !important;
  max-width: var(--site-max-width, 500px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.theme-transition-clone .now-playing, .theme-transition-clone .controls, .theme-transition-clone .player-bar{
  width: var(--site-visual-width, min(500px, calc(100vw - 24px))) !important;
  max-width: var(--site-max-width, 500px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  transform: none !important;
  -webkit-transform: none !important;
}

.now-playing, .controls, .player-bar{
  box-sizing: border-box;
}

body.theme-animating .now-playing, body.theme-freeze .now-playing, body.theme-animating .controls, body.theme-freeze .controls, body.theme-animating .player-bar, body.theme-freeze .player-bar{
  transform: none !important;
  -webkit-transform: none !important;
}

.now-playing.wallet-ui-disabled, .player-bar.wallet-ui-disabled, .controls.wallet-ui-disabled{
  filter: grayscale(0.08);
}

.player-bar input:disabled, .controls button:disabled, .player-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.now-playing{
  margin-bottom: 10px !important;
}

.player-bar{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.controls{
  margin-top: 0 !important;
}

.video-player-shell{
  position: relative;
  margin: -26px 0 18px;
  border: 1px solid #d8dde6;
  border-radius: 14px;
  background: rgba(255,255,255,.98);
  overflow: hidden;
  z-index: 35;
  box-shadow: none;
}

.video-player-shell.hidden{
  display: none !important;
}

.video-player-body{
  position: relative;
  background: rgba(248,249,251,.98);
}

.video-player{
  display: block;
  width: 100%;
  max-height: 220px;
  min-height: 180px;
  background: rgba(248,249,251,.98);
}

html[data-theme="dark"] .video-player-shell, body.dark .video-player-shell{
  border-color: #3a3c42;
  background: rgba(26,26,28,.98);
  box-shadow: none;
}

html[data-theme="dark"] .video-player-body, html[data-theme="dark"] .video-player, body.dark .video-player-body, body.dark .video-player{
  background: rgba(32,34,39,.98);
}

.video-inline-select-wrap[hidden], .video-inline-btn[hidden]{
  display: none !important;
}

.video-inline-select-wrap{
  flex: 0 0 auto;
  min-width: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.video-inline-select{
  height: 54px;
  min-width: 54px;
  max-width: 54px;
  width: 54px;
  border-radius: 50%;
  border: 1px solid #d8dde6;
  background: rgba(255,255,255,.96);
  color: #111;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-align-last: center;
}

.video-inline-select:focus, .video-inline-select:active, .video-inline-select:focus-visible{
  outline: none;
  box-shadow: none;
}

.video-inline-btn{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #d8dde6;
  background: rgba(255,255,255,.96);
  color: #111;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  padding: 0;
  font-size: 24px;
  font-weight: 700;
}

.video-inline-close-btn{
  font-size: 28px;
}

html[data-theme="dark"] .video-inline-select, body.dark .video-inline-select, html[data-theme="dark"] .video-inline-btn, body.dark .video-inline-btn{
  border-color: #3a3c42;
  background: rgba(42,44,49,.96);
  color: #f1f1f1;
}

@media (max-width: 480px){.video-player-shell {
    margin-top: -18px;
  }.video-player {
    max-height: 200px;
    min-height: 160px;
  }.video-inline-select {
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    padding: 0;
  }}

.video-inline-select-wrap{
  width: 54px;
  min-width: 54px;
}

.video-inline-select{
  appearance: none;
  -webkit-appearance: none;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  height: 54px;
  border-radius: 50%;
  padding: 0;
  text-align: center;
  text-align-last: center;
  font-size: 13px;
}

.video-inline-select option{
  color: #111;
}

.video-inline-btn{
  width: 54px;
  height: 54px;
}

#videoInlineFullscreenBtn{
  font-size: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

#videoInlineFullscreenBtn .video-fullscreen-icon{
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  flex: 0 0 auto;
  pointer-events: none;
}

#videoInlineFullscreenBtn, #videoCloseBtn{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#videoInlineFullscreenBtn:active, #videoCloseBtn:active, #videoInlineFullscreenBtn.press-armed, #videoCloseBtn.press-armed{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: scale(0.93);
}

#videoInlineFullscreenBtn:active .video-fullscreen-icon, #videoCloseBtn:active, #videoInlineFullscreenBtn.press-armed .video-fullscreen-icon, #videoCloseBtn.press-armed{
  color: #ffffff !important;
}

#videoInlineFullscreenBtn:active .video-fullscreen-icon *, #videoInlineFullscreenBtn.press-armed .video-fullscreen-icon *{
  stroke: #ffffff !important;
}

#repeatBtn[hidden]{
  display: none !important;
}

.video-inline-select-wrap[hidden]{
  display: none !important;
}

.video-inline-select, .video-inline-btn{
  vertical-align: middle;
}

.video-inline-btn, .video-inline-select{
  width: 54px;
  height: 54px;
}

.video-inline-select-wrap + .video-inline-select-wrap{
  margin-left: 0;
}

.theme-transition-overlay .dark-scope .video-player-shell, .theme-transition-overlay .dark-scope .video-player-body, .theme-transition-overlay .dark-scope .video-player, .theme-transition-overlay .light-scope .video-player-shell, .theme-transition-overlay .light-scope .video-player-body, .theme-transition-overlay .light-scope .video-player{
  transition: none !important;
}

.video-player-shell, .video-player-body, .video-player{
  transition: none !important;
}

button, input, select{
  font-family: Arial, sans-serif !important;
}

.video-inline-select-wrap{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
}

#videoInlineAudioTrackWrap, #videoInlineQualityWrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#videoInlineAudioTrackSelect, #videoInlineQualitySelect{
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

#videoInlineAudioTrackSelect{
  font-size: 12px !important;
  font-weight: 700 !important;
}

#videoInlineAudioTrackWrap[hidden], #videoInlineQualityWrap[hidden]{
  display: none !important;
}

button, input, select{
  font-family: Arial, sans-serif !important;
}

.video-inline-select-wrap, .video-inline-btn, .video-inline-select{
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
}

.video-inline-select-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#videoInlineAudioTrackWrap:not([hidden]){
  display: inline-flex !important;
}

.video-inline-select{
  border-radius: 50% !important;
  text-align: center !important;
  text-align-last: center !important;
  padding: 0 !important;
}

.video-inline-btn, .video-inline-select{
  font-family: Arial, sans-serif !important;
}

body.video-player-active #repeatBtn,
html.video-app-fullscreen #repeatBtn,
body.video-app-fullscreen #repeatBtn,
#videoInlineQualityWrap, #videoInlineAudioTrackWrap{
  order: 4;
}

#videoInlineAudioTrackWrap{
  margin-left: 0 !important;
}

#videoInlineQualityWrap .video-inline-select, #videoInlineAudioTrackWrap .video-inline-select, #videoInlineFullscreenBtn, #videoCloseBtn{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
}

#videoInlineAudioTrackWrap .video-inline-select{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

#videoInlineQualityWrap{
  order: 4 !important;
}

#videoInlineAudioTrackWrap{
  order: 5 !important;
}

#videoInlineFullscreenBtn{
  order: 6 !important;
}

#videoCloseBtn{
  order: 7 !important;
}

#videoInlineQualityWrap, #videoInlineAudioTrackWrap, #videoInlineFullscreenBtn, #videoCloseBtn{
  flex: 0 0 auto !important;
}

#videoInlineQualityWrap .video-inline-select, #videoInlineAudioTrackWrap .video-inline-select{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  font-family: Arial, sans-serif !important;
}

#videoInlineAudioTrackWrap:not([hidden]), #videoInlineQualityWrap:not([hidden]){
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#videoInlineAudioTrackSelect option, #videoInlineQualitySelect option{
  font-family: Arial, sans-serif !important;
}

html.video-app-fullscreen .container, body.video-app-fullscreen .container{
  max-width: none !important;
  width: 100vw !important;
  min-height: 100vh !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

html.video-app-fullscreen .video-player-shell, body.video-app-fullscreen .video-player-shell{
  margin-top: 0 !important;
}

html.video-app-fullscreen .video-player, body.video-app-fullscreen .video-player{
  max-height: min(62vh, 720px) !important;
  min-height: min(42vh, 360px) !important;
}

#videoInlineAudioTrackWrap{
  order: 5 !important;
}

#videoInlineAudioTrackBtn{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#videoInlineAudioTrackWrap[hidden]{
  display: none !important;
}

.video-player-shell, .video-player{
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

#videoInlineQualityWrap{
  order: 4 !important;
}

#videoInlineAudioTrackWrap{
  order: 5 !important;
}

#videoInlineFullscreenBtn{
  order: 6 !important;
}

#videoCloseBtn{
  order: 7 !important;
}

#videoInlineAudioTrackWrap:not([hidden]), body.video-player-active #videoInlineAudioTrackWrap{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#videoInlineAudioTrackBtn{
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html.video-app-fullscreen, body.video-app-fullscreen{
  background: #000 !important;
}

html.video-app-fullscreen #appContainer, body.video-app-fullscreen #appContainer{
  width: 100vw !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 8px !important;
  background: #000 !important;
}

html.video-app-fullscreen #appContainer > :not(#videoPlayerShell):not(.player-bar):not(.controls), body.video-app-fullscreen #appContainer > :not(#videoPlayerShell):not(.player-bar):not(.controls){
  display: none !important;
}

html.video-app-fullscreen #videoPlayerShell, body.video-app-fullscreen #videoPlayerShell{
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  align-items: center !important;
  justify-content: center !important;
}

html.video-app-fullscreen #videoPlayerShell.hidden, body.video-app-fullscreen #videoPlayerShell.hidden{
  display: none !important;
}

html.video-app-fullscreen .video-player-body, html.video-app-fullscreen .video-player, body.video-app-fullscreen .video-player-body, body.video-app-fullscreen .video-player{
  background: #000 !important;
}

html.video-app-fullscreen .video-player, body.video-app-fullscreen .video-player{
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100vh - 120px) !important;
  min-height: 0 !important;
  object-fit: contain !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  width: min(92vw, 980px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: rgba(0,0,0,0.82) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  transition: opacity .35s ease, transform .35s ease !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar{
  padding: 5px 8px !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  border-radius: 10px !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  gap: 6px !important;
  margin-bottom: 10px !important;
}

html.video-app-fullscreen .player-btn, body.video-app-fullscreen .player-btn{
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  font-size: 10px !important;
}

html.video-app-fullscreen .player-btn .icon-svg, body.video-app-fullscreen .player-btn .icon-svg{
  width: 12px !important;
  height: 12px !important;
}

html.video-app-fullscreen .player-time, body.video-app-fullscreen .player-time{
  font-size: 10px !important;
}

html.video-app-fullscreen .seek-bar, body.video-app-fullscreen .seek-bar, html.video-app-fullscreen .volume-bar, body.video-app-fullscreen .volume-bar{
  height: 4px !important;
}

html.video-app-fullscreen .volume-bar, body.video-app-fullscreen .volume-bar{
  width: min(72px, 18vw) !important;
  max-width: 72px !important;
}

html.video-app-fullscreen .controls button, body.video-app-fullscreen .controls button, html.video-app-fullscreen .video-inline-btn, body.video-app-fullscreen .video-inline-btn, html.video-app-fullscreen .video-inline-select, body.video-app-fullscreen .video-inline-select{
  width: 27px !important;
  min-width: 27px !important;
  max-width: 27px !important;
  height: 27px !important;
  border-radius: 50% !important;
  font-size: 10px !important;
}

html.video-app-fullscreen .btn-icon, body.video-app-fullscreen .btn-icon{
  font-size: 13px !important;
}

html.video-app-fullscreen #repeatBtn .icon-svg, body.video-app-fullscreen #repeatBtn .icon-svg{
  width: 12px !important;
  height: 12px !important;
}

html.video-app-fullscreen #videoCloseBtn, body.video-app-fullscreen #videoCloseBtn{
  font-size: 16px !important;
}

html.video-app-fullscreen .player-bar, html.video-app-fullscreen .controls, body.video-app-fullscreen .player-bar, body.video-app-fullscreen .controls{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
}

html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

html.video-app-fullscreen #appContainer, body.video-app-fullscreen #appContainer{
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}

html.video-app-fullscreen #videoPlayerShell, body.video-app-fullscreen #videoPlayerShell{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
  z-index: 9990 !important;
}

html.video-app-fullscreen .video-player-body, body.video-app-fullscreen .video-player-body{
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
}

html.video-app-fullscreen .video-player, body.video-app-fullscreen .video-player{
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  background: #000 !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar{
  position: fixed !important;
  left: 50% !important;
  bottom: 58px !important;
  transform: translateX(-50%) translateY(8px) !important;
  width: min(88vw, 760px) !important;
  z-index: 10020 !important;
  margin: 0 !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  position: fixed !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) translateY(8px) !important;
  width: min(88vw, 760px) !important;
  z-index: 10021 !important;
  margin: 0 !important;
  justify-content: center !important;
}

html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar{
  transform: translateX(-50%) translateY(0) !important;
}

html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  transform: translateX(-50%) translateY(0) !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar{
  bottom: 86px !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  bottom: 16px !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar{
  width: 100% !important;
  max-width: 100% !important;
  background: inherit !important;
  border: 1px solid currentColor !important;
  border-color: inherit !important;
  color: inherit !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border-radius: 8px !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  width: auto !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  gap: 12px !important;
  margin: 0 !important;
}

html.video-app-fullscreen .player-btn, body.video-app-fullscreen .player-btn{
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  font-size: 18px !important;
}

html.video-app-fullscreen .player-btn .icon-svg, body.video-app-fullscreen .player-btn .icon-svg{
  width: 22px !important;
  height: 22px !important;
}

html.video-app-fullscreen .player-time, body.video-app-fullscreen .player-time{
  font-size: 13px !important;
}

html.video-app-fullscreen .seek-bar, body.video-app-fullscreen .seek-bar, html.video-app-fullscreen .volume-bar, body.video-app-fullscreen .volume-bar{
  height: 6px !important;
}

html.video-app-fullscreen .volume-bar, body.video-app-fullscreen .volume-bar{
  width: min(120px, 34vw) !important;
  max-width: 140px !important;
}

html.video-app-fullscreen .controls button, body.video-app-fullscreen .controls button, html.video-app-fullscreen .video-inline-btn, body.video-app-fullscreen .video-inline-btn, html.video-app-fullscreen .video-inline-select, body.video-app-fullscreen .video-inline-select{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  font-size: inherit !important;
}

html.video-app-fullscreen .btn-icon, body.video-app-fullscreen .btn-icon{
  font-size: 26px !important;
}

html.video-app-fullscreen #repeatBtn .icon-svg, body.video-app-fullscreen #repeatBtn .icon-svg{
  width: 24px !important;
  height: 24px !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar{
  left: 50% !important;
  bottom: 86px !important;
  transform: translateX(-50%) !important;
  width: min(92vw, 980px) !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
}

.now-playing-title, .video-filename{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border-color, #d4d4d4) !important;
  border-radius: 12px !important;
  background: var(--panel-bg, #ffffff) !important;
  color: var(--text-color, #222222) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: none !important;
}

body.dark .now-playing-title, body.dark .video-filename{
  background: #1f1f1f !important;
  color: #f2f2f2 !important;
  border-color: #3a3a3a !important;
}

:fullscreen .video-controls, :-webkit-full-screen .video-controls, .video-player-container:fullscreen .video-controls, .video-container:fullscreen .video-controls, .player:fullscreen .video-controls{
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100vw - 28px)) !important;
  max-width: min(560px, calc(100vw - 28px)) !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  z-index: 2147483647 !important;
}

:fullscreen .video-controls-top, :-webkit-full-screen .video-controls-top, :fullscreen .video-controls .controls-top, :-webkit-full-screen .video-controls .controls-top{
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  box-sizing: border-box !important;
}

:fullscreen .video-controls-bottom, :-webkit-full-screen .video-controls-bottom, :fullscreen .video-controls .controls-bottom, :-webkit-full-screen .video-controls .controls-bottom{
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

:fullscreen .video-controls button, :-webkit-full-screen .video-controls button, :fullscreen .video-controls .btn, :-webkit-full-screen .video-controls .btn{
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 50% !important;
  font-size: inherit !important;
}

:fullscreen .video-controls input[type="range"], :-webkit-full-screen .video-controls input[type="range"]{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.dark :fullscreen .video-controls, body.dark :-webkit-full-screen .video-controls{
  background: #1f1f1f !important;
  color: #f2f2f2 !important;
  border: 1px solid #3a3a3a !important;
}

body:not(.dark) :fullscreen .video-controls, body:not(.dark) :-webkit-full-screen .video-controls{
  background: #ffffff !important;
  color: #222222 !important;
  border: 1px solid #d4d4d4 !important;
}

:fullscreen .video-controls, :-webkit-full-screen .video-controls, .video-player-container:fullscreen .video-controls, .video-container:fullscreen .video-controls, .player:fullscreen .video-controls{
  width: 560px !important;
  max-width: calc(100vw - 28px) !important;
  min-width: 0 !important;
}

:fullscreen .video-controls, :-webkit-full-screen .video-controls, .video-player-shell:fullscreen .video-controls, .video-player-body:fullscreen .video-controls, .video-player-container:fullscreen .video-controls, .video-container:fullscreen .video-controls, .player:fullscreen .video-controls{
  width: 524px !important;
  max-width: calc(100vw - 24px) !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

:fullscreen .video-controls-top, :-webkit-full-screen .video-controls-top, :fullscreen .video-controls .controls-top, :-webkit-full-screen .video-controls .controls-top{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

:fullscreen .video-controls-bottom, :-webkit-full-screen .video-controls-bottom, :fullscreen .video-controls .controls-bottom, :-webkit-full-screen .video-controls .controls-bottom{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

:fullscreen .video-controls input[type="range"], :-webkit-full-screen .video-controls input[type="range"]{
  width: auto !important;
  max-width: none !important;
}

html[data-theme="dark"] :fullscreen .video-controls, html[data-theme="dark"] :-webkit-full-screen .video-controls, body.dark :fullscreen .video-controls, body.dark :-webkit-full-screen .video-controls{
  background: #2a2c31 !important;
  border: 1px solid #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="light"] :fullscreen .video-controls, html[data-theme="light"] :-webkit-full-screen .video-controls, body:not(.dark) :fullscreen .video-controls, body:not(.dark) :-webkit-full-screen .video-controls{
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  color: #222 !important;
}

html[data-theme="dark"] :fullscreen .video-controls button, html[data-theme="dark"] :-webkit-full-screen .video-controls button, html[data-theme="dark"] :fullscreen .video-controls .btn, html[data-theme="dark"] :-webkit-full-screen .video-controls .btn, html[data-theme="dark"] :fullscreen .video-controls .video-inline-btn, html[data-theme="dark"] :-webkit-full-screen .video-controls .video-inline-btn, body.dark :fullscreen .video-controls button, body.dark :-webkit-full-screen .video-controls button, body.dark :fullscreen .video-controls .btn, body.dark :-webkit-full-screen .video-controls .btn, body.dark :fullscreen .video-controls .video-inline-btn, body.dark :-webkit-full-screen .video-controls .video-inline-btn{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="light"] :fullscreen .video-controls button, html[data-theme="light"] :-webkit-full-screen .video-controls button, html[data-theme="light"] :fullscreen .video-controls .btn, html[data-theme="light"] :-webkit-full-screen .video-controls .btn, html[data-theme="light"] :fullscreen .video-controls .video-inline-btn, html[data-theme="light"] :-webkit-full-screen .video-controls .video-inline-btn, body:not(.dark) :fullscreen .video-controls button, body:not(.dark) :-webkit-full-screen .video-controls button, body:not(.dark) :fullscreen .video-controls .btn, body:not(.dark) :-webkit-full-screen .video-controls .btn, body:not(.dark) :fullscreen .video-controls .video-inline-btn, body:not(.dark) :-webkit-full-screen .video-controls .video-inline-btn{
  background: #ffffff !important;
  border-color: #ccc !important;
  color: #000 !important;
}

:fullscreen .video-controls, :-webkit-full-screen .video-controls, .video-player-shell:fullscreen .video-controls, .video-player-body:fullscreen .video-controls, .video-player-container:fullscreen .video-controls, .video-container:fullscreen .video-controls, .player:fullscreen .video-controls{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

:fullscreen .video-controls-top, :-webkit-full-screen .video-controls-top, :fullscreen .video-controls .controls-top, :-webkit-full-screen .video-controls .controls-top, :fullscreen .video-controls-bottom, :-webkit-full-screen .video-controls-bottom, :fullscreen .video-controls .controls-bottom, :-webkit-full-screen .video-controls .controls-bottom{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

:fullscreen .video-controls button, :-webkit-full-screen .video-controls button, :fullscreen .video-controls .btn, :-webkit-full-screen .video-controls .btn, :fullscreen .video-controls .video-inline-btn, :-webkit-full-screen .video-controls .video-inline-btn, :fullscreen .video-controls .video-inline-select, :-webkit-full-screen .video-controls .video-inline-select{
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  border-radius: 50% !important;
}

:fullscreen .video-controls .player-time, :-webkit-full-screen .video-controls .player-time{
  font-size: 13px !important;
  font-weight: 800 !important;
}

:fullscreen .video-controls input[type="range"], :-webkit-full-screen .video-controls input[type="range"]{
  height: 6px !important;
}

html[data-theme="light"] :fullscreen .video-controls, html[data-theme="light"] :-webkit-full-screen .video-controls, body:not(.dark) :fullscreen .video-controls, body:not(.dark) :-webkit-full-screen .video-controls{
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  color: #222 !important;
}

html[data-theme="light"] :fullscreen .video-controls button, html[data-theme="light"] :-webkit-full-screen .video-controls button, html[data-theme="light"] :fullscreen .video-controls .btn, html[data-theme="light"] :-webkit-full-screen .video-controls .btn, html[data-theme="light"] :fullscreen .video-controls .video-inline-btn, html[data-theme="light"] :-webkit-full-screen .video-controls .video-inline-btn, html[data-theme="light"] :fullscreen .video-controls .video-inline-select, html[data-theme="light"] :-webkit-full-screen .video-controls .video-inline-select, body:not(.dark) :fullscreen .video-controls button, body:not(.dark) :-webkit-full-screen .video-controls button, body:not(.dark) :fullscreen .video-controls .btn, body:not(.dark) :-webkit-full-screen .video-controls .btn, body:not(.dark) :fullscreen .video-controls .video-inline-btn, body:not(.dark) :-webkit-full-screen .video-controls .video-inline-btn, body:not(.dark) :fullscreen .video-controls .video-inline-select, body:not(.dark) :-webkit-full-screen .video-controls .video-inline-select{
  background: #ffffff !important;
  border-color: #ccc !important;
  color: #000 !important;
}

html[data-theme="dark"] :fullscreen .video-controls, html[data-theme="dark"] :-webkit-full-screen .video-controls, body.dark :fullscreen .video-controls, body.dark :-webkit-full-screen .video-controls{
  background: #2a2c31 !important;
  border: 1px solid #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"] :fullscreen .video-controls button, html[data-theme="dark"] :-webkit-full-screen .video-controls button, html[data-theme="dark"] :fullscreen .video-controls .btn, html[data-theme="dark"] :-webkit-full-screen .video-controls .btn, html[data-theme="dark"] :fullscreen .video-controls .video-inline-btn, html[data-theme="dark"] :-webkit-full-screen .video-controls .video-inline-btn, html[data-theme="dark"] :fullscreen .video-controls .video-inline-select, html[data-theme="dark"] :-webkit-full-screen .video-controls .video-inline-select, body.dark :fullscreen .video-controls button, body.dark :-webkit-full-screen .video-controls button, body.dark :fullscreen .video-controls .btn, body.dark :-webkit-full-screen .video-controls .btn, body.dark :fullscreen .video-controls .video-inline-btn, body.dark :-webkit-full-screen .video-controls .video-inline-btn, body.dark :fullscreen .video-controls .video-inline-select, body.dark :-webkit-full-screen .video-controls .video-inline-select{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar{
  width: min(92vw, 500px) !important;
  max-width: min(92vw, 500px) !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  margin: 0 !important;
  border-radius: 8px !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  width: min(92vw, 500px) !important;
  max-width: min(92vw, 500px) !important;
  min-width: 0 !important;
  gap: 12px !important;
  margin: 0 !important;
}

html.video-app-fullscreen .player-btn, body.video-app-fullscreen .player-btn{
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  font-size: 18px !important;
}

html.video-app-fullscreen .player-btn .icon-svg, body.video-app-fullscreen .player-btn .icon-svg{
  width: 18px !important;
  height: 18px !important;
}

html.video-app-fullscreen .player-time, body.video-app-fullscreen .player-time{
  font-size: 13px !important;
}

html.video-app-fullscreen .seek-bar, body.video-app-fullscreen .seek-bar, html.video-app-fullscreen .volume-bar, body.video-app-fullscreen .volume-bar{
  height: 6px !important;
}

html.video-app-fullscreen .volume-bar, body.video-app-fullscreen .volume-bar{
  width: min(120px, 34vw) !important;
  max-width: 140px !important;
}

html.video-app-fullscreen .controls button, body.video-app-fullscreen .controls button, html.video-app-fullscreen .video-inline-btn, body.video-app-fullscreen .video-inline-btn, html.video-app-fullscreen .video-inline-select, body.video-app-fullscreen .video-inline-select, html.video-app-fullscreen #videoInlineAudioTrackBtn, body.video-app-fullscreen #videoInlineAudioTrackBtn{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  border-radius: 50% !important;
  font-size: 24px !important;
}

html.video-app-fullscreen .btn-icon, body.video-app-fullscreen .btn-icon{
  font-size: 26px !important;
}

html.video-app-fullscreen #repeatBtn .icon-svg, body.video-app-fullscreen #repeatBtn .icon-svg{
  width: 24px !important;
  height: 24px !important;
}

html.video-app-fullscreen #videoCloseBtn, body.video-app-fullscreen #videoCloseBtn{
  font-size: 28px !important;
}

html[data-theme="light"].video-app-fullscreen .player-bar, html[data-theme="light"].video-app-fullscreen .controls, body.video-app-fullscreen:not(.dark) .player-bar, body.video-app-fullscreen:not(.dark) .controls{
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  color: #222 !important;
}

html[data-theme="light"].video-app-fullscreen .player-btn, html[data-theme="light"].video-app-fullscreen .controls button, html[data-theme="light"].video-app-fullscreen .video-inline-btn, html[data-theme="light"].video-app-fullscreen .video-inline-select, html[data-theme="light"].video-app-fullscreen #videoInlineAudioTrackBtn, body.video-app-fullscreen:not(.dark) .player-btn, body.video-app-fullscreen:not(.dark) .controls button, body.video-app-fullscreen:not(.dark) .video-inline-btn, body.video-app-fullscreen:not(.dark) .video-inline-select, body.video-app-fullscreen:not(.dark) #videoInlineAudioTrackBtn{
  background: #ffffff !important;
  border: 1px solid #ccc !important;
  color: #000 !important;
}

html[data-theme="light"].video-app-fullscreen .btn-icon, html[data-theme="light"].video-app-fullscreen .player-time, body.video-app-fullscreen:not(.dark) .btn-icon, body.video-app-fullscreen:not(.dark) .player-time{
  color: #222 !important;
}

html[data-theme="dark"].video-app-fullscreen .player-bar, html[data-theme="dark"].video-app-fullscreen .controls, body.dark.video-app-fullscreen .player-bar, body.dark.video-app-fullscreen .controls{
  background: #2a2c31 !important;
  border: 1px solid #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .player-btn, html[data-theme="dark"].video-app-fullscreen .controls button, html[data-theme="dark"].video-app-fullscreen .video-inline-btn, html[data-theme="dark"].video-app-fullscreen .video-inline-select, html[data-theme="dark"].video-app-fullscreen #videoInlineAudioTrackBtn, body.dark.video-app-fullscreen .player-btn, body.dark.video-app-fullscreen .controls button, body.dark.video-app-fullscreen .video-inline-btn, body.dark.video-app-fullscreen .video-inline-select, body.dark.video-app-fullscreen #videoInlineAudioTrackBtn{
  background: #2a2c31 !important;
  border: 1px solid #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .btn-icon, html[data-theme="dark"].video-app-fullscreen .player-time, body.dark.video-app-fullscreen .btn-icon, body.dark.video-app-fullscreen .player-time{
  color: #f1f1f1 !important;
}

html.video-app-fullscreen .controls button, body.video-app-fullscreen .controls button, html.video-app-fullscreen .video-inline-btn, body.video-app-fullscreen .video-inline-btn, html.video-app-fullscreen .video-inline-select, body.video-app-fullscreen .video-inline-select, html.video-app-fullscreen #videoInlineAudioTrackBtn, body.video-app-fullscreen #videoInlineAudioTrackBtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}

html.video-app-fullscreen .btn-icon, body.video-app-fullscreen .btn-icon{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  position: static !important;
  transform: none !important;
}

html.video-app-fullscreen #prevBtn .btn-icon, body.video-app-fullscreen #prevBtn .btn-icon, html.video-app-fullscreen #nextBtn .btn-icon, body.video-app-fullscreen #nextBtn .btn-icon{
  transform: none !important;
}

html.video-app-fullscreen .controls button svg, body.video-app-fullscreen .controls button svg, html.video-app-fullscreen .video-inline-btn svg, body.video-app-fullscreen .video-inline-btn svg{
  display: block !important;
  margin: auto !important;
}

html.video-app-fullscreen .video-inline-select, body.video-app-fullscreen .video-inline-select, html.video-app-fullscreen #videoInlineAudioTrackBtn, body.video-app-fullscreen #videoInlineAudioTrackBtn{
  text-align: center !important;
  text-align-last: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
  overflow: hidden !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html.video-app-fullscreen #videoCloseBtn, body.video-app-fullscreen #videoCloseBtn{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.video-app-fullscreen #videoCloseBtn .btn-icon, body.video-app-fullscreen #videoCloseBtn .btn-icon{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0 !important;
}

html.video-app-fullscreen #videoCloseBtn svg, body.video-app-fullscreen #videoCloseBtn svg{
  display: block !important;
  margin: auto !important;
}

player bar width aligned to bottom buttons */ html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar{
  width: min(450px, calc(100vw - 24px)) !important;
  max-width: min(450px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  width: fit-content !important;
  max-width: calc(100vw - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

html.video-app-fullscreen .btn-icon, body.video-app-fullscreen .btn-icon{
  font-size: 26px !important;
  font-weight: 900 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

html.video-app-fullscreen .controls button svg, body.video-app-fullscreen .controls button svg{
  width: 40px !important;
  height: 40px !important;
}

html.video-app-fullscreen #repeatBtn .icon-svg, body.video-app-fullscreen #repeatBtn .icon-svg{
  width: 24px !important;
  height: 24px !important;
}

html.video-app-fullscreen #videoCloseBtn, body.video-app-fullscreen #videoCloseBtn{
  font-size: 28px !important;
}

html.video-app-fullscreen .video-inline-select, body.video-app-fullscreen .video-inline-select, html.video-app-fullscreen #videoInlineAudioTrackBtn, body.video-app-fullscreen #videoInlineAudioTrackBtn{
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-align-last: center !important;
}

.video-player, #videoPlayer{
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px){html.video-app-fullscreen .controls, body.video-app-fullscreen .controls {
    width: calc((54px * 4) + (12px * 3)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar {
    width: calc((54px * 4) + (12px * 3)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html.video-app-fullscreen .controls::before, html.video-app-fullscreen .controls::after, body.video-app-fullscreen .controls::before, body.video-app-fullscreen .controls::after{
  display: none !important;
  content: none !important;
}

@media (max-width: 768px){html.video-app-fullscreen .controls, body.video-app-fullscreen .controls {
    width: 252px !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 12px !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar {
    width: 252px !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
}

html.video-app-fullscreen .controls::before, html.video-app-fullscreen .controls::after, body.video-app-fullscreen .controls::before, body.video-app-fullscreen .controls::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls, html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar{
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px){html.video-app-fullscreen .controls, body.video-app-fullscreen .controls {
    width: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    gap: 12px !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar {
    width: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    box-sizing: border-box !important;
  }}

@media (max-width: 276px){html.video-app-fullscreen .controls, body.video-app-fullscreen .controls, html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.video-app-fullscreen .controls::before, html.video-app-fullscreen .controls::after, body.video-app-fullscreen .controls::before, body.video-app-fullscreen .controls::after{
  content: none !important;
  display: none !important;
}

@media (max-width: 768px){html.video-app-fullscreen .controls, body.video-app-fullscreen .controls {
    width: fit-content !important;
    max-width: fit-content !important;
    min-width: fit-content !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar {
    width: calc((54px * 4) + (12px * 3)) !important;
    max-width: calc((54px * 4) + (12px * 3)) !important;
    min-width: calc((54px * 4) + (12px * 3)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }}

@media (max-width: 276px){html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

html.video-app-fullscreen .controls::before, html.video-app-fullscreen .controls::after, body.video-app-fullscreen .controls::before, body.video-app-fullscreen .controls::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px){html.video-app-fullscreen .controls, body.video-app-fullscreen .controls {
    width: fit-content !important;
    max-width: fit-content !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar {
    width: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }}

@media (max-width: 276px){html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }}

html.video-app-fullscreen .controls, html.video-app-fullscreen .player-bar, html.video-app-fullscreen .video-controls, html.video-app-fullscreen .video-controls-bottom, html.video-app-fullscreen .video-controls-top, body.video-app-fullscreen .controls, body.video-app-fullscreen .player-bar, body.video-app-fullscreen .video-controls, body.video-app-fullscreen .video-controls-bottom, body.video-app-fullscreen .video-controls-top{
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.video-app-fullscreen div, body.video-app-fullscreen div{
  background-image: none !important;
}

@media (max-width:768px){html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar {
    width: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    margin: 0 auto !important;
  }}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls, html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.video-app-fullscreen .controls::before, body.video-app-fullscreen .controls::before, html.video-app-fullscreen .controls::after, body.video-app-fullscreen .controls::after, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::after, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px){html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar {
    width: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }}

@media (max-width: 276px){html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }}

@media (max-width: 768px){html.video-app-fullscreen .controls, body.video-app-fullscreen .controls, html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .controls {
    width: fit-content !important;
    max-width: fit-content !important;
    min-width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar {
    width: 384px !important;
    max-width: 384px !important;
    min-width: 384px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }}

@media (max-width: 408px){html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen .controls, body.video-app-fullscreen .controls, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.video-app-fullscreen .player-bar::before, body.video-app-fullscreen .player-bar::before, html.video-app-fullscreen .player-bar::after, body.video-app-fullscreen .player-bar::after, html.video-app-fullscreen .controls::before, body.video-app-fullscreen .controls::before, html.video-app-fullscreen .controls::after, body.video-app-fullscreen .controls::after, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar::before, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar::before, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar::after, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar::after, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::after, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px){html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar {
    width: var(--fs-controls-row-width, calc(100vw - 24px)) !important;
    max-width: var(--fs-controls-row-width, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar{
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #ddd !important;
  border-color: #ddd !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"].video-app-fullscreen .player-bar, body.dark.video-app-fullscreen .player-bar, html[data-theme="dark"].video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.dark.video-app-fullscreen.fullscreen-video-ui-visible .player-bar{
  background: #2a2c31 !important;
  background-color: #2a2c31 !important;
  border: 1px solid #3a3c42 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls, html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.video-app-fullscreen .controls::before, body.video-app-fullscreen .controls::before, html.video-app-fullscreen .controls::after, body.video-app-fullscreen .controls::after, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::after, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls, html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  isolation: auto !important;
}

html.video-app-fullscreen .controls::before, body.video-app-fullscreen .controls::before, html.video-app-fullscreen .controls::after, body.video-app-fullscreen .controls::after, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::after, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar{
  background-image: none !important;
}

html.video-app-fullscreen #videoInlineQualityWrap, html.video-app-fullscreen #videoInlineAudioTrackWrap, body.video-app-fullscreen #videoInlineQualityWrap, body.video-app-fullscreen #videoInlineAudioTrackWrap, html.video-app-fullscreen.fullscreen-video-ui-visible #videoInlineQualityWrap, html.video-app-fullscreen.fullscreen-video-ui-visible #videoInlineAudioTrackWrap, body.video-app-fullscreen.fullscreen-video-ui-visible #videoInlineQualityWrap, body.video-app-fullscreen.fullscreen-video-ui-visible #videoInlineAudioTrackWrap{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.video-app-fullscreen .controls, body.video-app-fullscreen .controls, html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html.video-app-fullscreen .controls::before, body.video-app-fullscreen .controls::before, html.video-app-fullscreen .controls::after, body.video-app-fullscreen .controls::after, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::before, html.video-app-fullscreen.fullscreen-video-ui-visible .controls::after, body.video-app-fullscreen.fullscreen-video-ui-visible .controls::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.video-app-fullscreen .player-bar, html.video-app-fullscreen .controls, body.video-app-fullscreen .player-bar, body.video-app-fullscreen .controls{
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}

html.video-app-fullscreen:not(.fullscreen-video-ui-visible) .player-bar, html.video-app-fullscreen:not(.fullscreen-video-ui-visible) .controls, body.video-app-fullscreen:not(.fullscreen-video-ui-visible) .player-bar, body.video-app-fullscreen:not(.fullscreen-video-ui-visible) .controls{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

#repeatBtn, #videoInlineQualityBtn, #videoInlineQualitySelect, .video-inline-select, .video-inline-btn{
  transition: none !important;
  animation: none !important;
}

html.video-app-fullscreen .player-bar, html.video-app-fullscreen .controls, body.video-app-fullscreen .player-bar, body.video-app-fullscreen .controls{
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
}

select, .video-inline-select{
  transition: none !important;
  animation: none !important;
}

html.video-app-fullscreen .player-bar, body.video-app-fullscreen .player-bar, html.video-app-fullscreen .controls, body.video-app-fullscreen .controls{
  left: 50% !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html.video-app-fullscreen:not(.fullscreen-video-ui-visible) .player-bar, body.video-app-fullscreen:not(.fullscreen-video-ui-visible) .player-bar, html.video-app-fullscreen:not(.fullscreen-video-ui-visible) .controls, body.video-app-fullscreen:not(.fullscreen-video-ui-visible) .controls{
  transform: translateX(-50%) translateY(10px) !important;
}

html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar, html.video-app-fullscreen.fullscreen-video-ui-visible .controls, body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  transform: translateX(-50%) translateY(0) !important;
}

.theme-transition-overlay #videoInlineQualityWrap, .theme-transition-overlay .video-inline-select, .theme-transition-overlay #videoInlineAudioTrackWrap, .theme-transition-overlay #videoInlineAudioTrackBtn{
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
  animation: none !important;
}

.video-inline-select, #videoInlineQualitySelect, #videoInlineAudioTrackBtn, #videoInlineQualityWrap, #videoInlineAudioTrackWrap{
  transition: none !important;
  animation: none !important;
}

.video-player-shell{
  margin: -18px 0 10px !important;
}

.video-player{
  max-height: 170px !important;
  min-height: 136px !important;
}

@media (max-width: 480px){.video-player-shell {
    margin: -14px 0 8px !important;
  }.video-player {
    max-height: 154px !important;
    min-height: 128px !important;
  }}

.video-player-shell{
  margin: -10px 0 18px !important;
}

html.video-app-fullscreen:not(.fullscreen-video-ui-visible) .controls, body.video-app-fullscreen:not(.fullscreen-video-ui-visible) .controls{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

.now-playing, .now-playing-wrap, .now-playing-block{
  margin-bottom: 12px !important;
}

.now-playing{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.now-playing, .player-bar{
  margin-top: 0 !important;
}

.now-playing{
  margin-bottom: 10px !important;
}

#nowPlaying + .player-bar, .now-playing + .player-bar{
  margin-top: 0 !important;
}

.now-playing{
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

.player-bar{
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

.player-bar{
  margin-top: 0 !important;
}

.now-playing{
  margin-bottom: 10px !important;
}

.controls{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.now-playing{
  margin-bottom: 0 !important;
}

.player-bar{
  margin-top: 10px !important;
}

.controls{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.now-playing{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.player-bar{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.controls{
  margin-top: 0 !important;
}

.now-playing{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.player-bar{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.controls{
  margin-top: 0 !important;
}

.now-playing{
  margin-top: 0 !important;
  margin-bottom: var(--jukebox-main-row-gap) !important;
}

.player-bar{
  margin-top: 0 !important;
}

.controls{
  margin-top: 0 !important;
}

.now-playing{
  margin-top: 0 !important;
  margin-bottom: var(--jukebox-equal-gap) !important;
}

.player-bar{
  margin-top: 0 !important;
  margin-bottom: var(--jukebox-equal-gap) !important;
}

.controls{
  margin-top: 0 !important;
}

.now-playing{
  margin-top: 0 !important;
  margin-bottom: var(--jukebox-ref-gap) !important;
}

.player-bar{
  margin-top: 0 !important;
  margin-bottom: var(--jukebox-ref-gap) !important;
}

.controls{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.player-bar{
  margin-bottom: 6px !important;
}

.player-bar{
  margin-bottom: 6px !important;
}

.now-playing, .player-bar, .controls{
  min-height: unset !important;
  max-height: unset !important;
}

.player-bar{
  margin-bottom: 6px !important;
}

.now-playing{
  margin-bottom: 10px !important;
}

.player-bar{
  margin-bottom: 4px !important;
}

.player-bar{
  margin-bottom: 2px !important;
}

.player-bar{
  margin-bottom: 10px !important;
}

.now-playing{
  margin-top: 2px !important;
}

.now-playing{
  margin-top: 10px !important;
}

.now-playing{
  margin-top: 2px !important;
}

.now-playing{
  margin-top: 0px !important;
}

.now-playing{
  margin-top: -2px !important;
}

.now-playing{
  margin-top: -1px !important;
}

body.video-player-active .video-player-shell:not(.hidden){
  margin-top: var(--video-shell-gap-desktop) !important;
  margin-bottom: var(--video-shell-gap-desktop) !important;
}

@media (max-width: 768px){body.video-player-active .video-player-shell:not(.hidden) {
    margin-top: var(--video-shell-gap-mobile) !important;
    margin-bottom: var(--video-shell-gap-mobile) !important;
  }}

body.video-player-active .video-player-shell:not(.hidden) + .tracks-toggle, body.video-player-active .video-player-shell:not(.hidden) ~ #tracksToggle{
  margin-top: 0 !important;
}

body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden), body.video-player-active .video-player-shell:not(.hidden){
  margin-top: var(--video-normal-gap-desktop) !important;
  margin-bottom: var(--video-normal-gap-desktop) !important;
}

body.video-player-active #tracksToggle, body.video-player-active .tracks-toggle{
  margin-top: 0 !important;
}

@media (max-width: 768px){body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden), body.video-player-active .video-player-shell:not(.hidden) {
    margin-top: var(--video-normal-gap-mobile) !important;
    margin-bottom: var(--video-normal-gap-mobile) !important;
  }}

body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden), body.video-player-active .video-player-shell:not(.hidden){
  margin-top: var(--video-between-gap-desktop) !important;
  margin-bottom: var(--video-between-gap-desktop) !important;
}

body.video-player-active .controls{
  margin-bottom: 0 !important;
}

body.video-player-active #tracksToggle, body.video-player-active .tracks-toggle{
  margin-top: 0 !important;
}

@media (max-width: 768px){body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden), body.video-player-active .video-player-shell:not(.hidden) {
    margin-top: var(--video-between-gap-mobile) !important;
    margin-bottom: var(--video-between-gap-mobile) !important;
  }}

body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden), body.video-player-active .video-player-shell:not(.hidden){
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

@media (min-width: 769px){body.video-player-active #tracksToggle, body.video-player-active .tracks-toggle {
    margin-top: 0 !important;
  }}

body.video-player-active .video-player-shell:not(.hidden){
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.controls, .player-controls{
  margin-bottom: 6px !important;
}

#nowPlaying, #nowPlaying *{
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

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

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

#nowPlaying{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

#nowPlaying{
  margin-top: 0 !important;
}

#nowPlaying{
  margin-bottom: 10px !important;
}

#nowPlaying{
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

#nowPlaying{
  margin-bottom: 0 !important;
}

#nowPlaying{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

#nowPlaying{
  margin-top: 0 !important;
  margin-bottom: var(--jukebox-main-row-gap) !important;
}

#nowPlaying{
  margin-top: 0 !important;
  margin-bottom: var(--jukebox-equal-gap) !important;
}

#nowPlaying{
  margin-top: 0 !important;
  margin-bottom: var(--jukebox-ref-gap) !important;
}

#nowPlaying{
  min-height: unset !important;
  max-height: unset !important;
}

#nowPlaying{
  margin-top: 2px !important;
}

#nowPlaying{
  margin-top: 10px !important;
}

#nowPlaying{
  margin-top: 0px !important;
}

#nowPlaying{
  margin-top: -2px !important;
}

#nowPlaying{
  margin-top: -1px !important;
}

.bag-search-wrap + .now-playing{
  margin-top: 0 !important;
}

.bag-search-wrap + #nowPlaying{
  margin-top: 0 !important;
}


/* FIX v5: unify vertical spacing with wallet gap */
#nowPlayingWrap, .now-playing, .player-wrap, #playerWrap{
  margin-top: calc(var(--jukebox-wallet-gap) - 2px) !important;
}


/* FIX v6: exact match with wallet spacing (stack gap) */
#nowPlayingWrap, .now-playing, .player-wrap, #playerWrap{
  margin-top: var(--jukebox-wallet-stack-gap) !important;
}


/* FIX v7: force exact spacing (override all layouts) */
#nowPlayingText, .now-playing-text, #trackNotSelected{
  margin-bottom: 0 !important;
}

.player, #player, .player-container{
  margin-top: 0 !important;
}


/* FIX v8: override real layout gap */
.now-playing-container, .content-block, .player-section, .main-player-wrap{
  gap: var(--jukebox-wallet-stack-gap) !important;
}

.player, #player, .player-container{
  margin-top: calc(var(--jukebox-wallet-stack-gap)) !important;
}


/* FIX v9: correct gap between now-playing and player (real source) */
.now-playing{
  margin-bottom: 0 !important;
}


/* FIX v15: increase gap (bigger than wallet spacing) */
.player-bar{
  margin-top: calc(var(--jukebox-wallet-gap) + 4px) !important;
}


/* FIX v44: video shell higher, centered between controls and Content List, above notices */
body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden),
body.video-player-active .video-player-shell:not(.hidden){
  position: relative !important;
  z-index: 40 !important;
  margin-top: -18px !important;
  margin-bottom: 18px !important;
}

body.video-player-active #videoPlayerShell,
body.video-player-active .video-player-shell,
body.video-player-active #videoPlayer{
  z-index: 40 !important;
}

@media (max-width: 768px){
  body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden),
  body.video-player-active .video-player-shell:not(.hidden){
    margin-top: -14px !important;
    margin-bottom: 14px !important;
  }
}


/* FIX v45: lower video window on desktop and mobile */
body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden),
body.video-player-active .video-player-shell:not(.hidden){
  margin-top: -8px !important;
  margin-bottom: 28px !important;
}

@media (max-width: 768px){
  body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden),
  body.video-player-active .video-player-shell:not(.hidden){
    margin-top: -6px !important;
    margin-bottom: 20px !important;
  }
}


/* FIX v46: lower video window MUCH more */
body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden),
body.video-player-active .video-player-shell:not(.hidden){
  margin-top: 10px !important;
  margin-bottom: 40px !important;
}

@media (max-width: 768px){
  body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden),
  body.video-player-active .video-player-shell:not(.hidden){
    margin-top: 8px !important;
    margin-bottom: 28px !important;
  }
}


/* FIX v134.3: custom video quality menu */
.video-inline-quality-native{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.video-inline-quality-btn{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

#videoInlineQualityWrap{
  position: relative !important;
  overflow: visible !important;
}

.video-inline-quality-menu{
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 8px) !important;
  transform: translateX(-50%) !important;
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 40 !important;
}

.video-inline-quality-menu.open{
  display: flex !important;
}

.video-quality-choice{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  border: 1px solid #d8dde6 !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.video-quality-choice.is-active,
.video-quality-choice:active{
  background: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #fff !important;
  transform: scale(0.97) !important;
}

.video-quality-modal-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
  z-index: 1500 !important;
}

.video-quality-modal{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
  z-index: 1501 !important;
}

.video-quality-modal.open,
.video-quality-modal-overlay.open{
  opacity: 1 !important;
  pointer-events: auto !important;
}

.video-quality-modal-card{
  min-width: 188px !important;
  max-width: min(92vw, 320px) !important;
  padding: 14px !important;
  border: 1px solid #d8dde6 !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
}

.video-quality-modal-list{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
}

html[data-theme="dark"] .video-quality-choice,
body.dark .video-quality-choice,
html[data-theme="dark"] .video-inline-quality-btn,
body.dark .video-inline-quality-btn{
  border-color: #3a3c42 !important;
  background: rgba(42,44,49,.96) !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"] .video-quality-modal-card,
body.dark .video-quality-modal-card{
  border-color: #3a3c42 !important;
  background: rgba(26,26,28,.98) !important;
}

@media (max-width: 768px), (pointer: coarse){
  .video-inline-quality-menu{
    display: none !important;
  }
}


/* FIX v134.4: quality selector per user spec */
.video-inline-quality-native{
  display: none !important;
}

#videoInlineQualityWrap{
  position: relative !important;
  overflow: visible !important;
  z-index: 60 !important;
}

.video-inline-quality-btn{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.video-inline-quality-menu{
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 8px) !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 90 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.video-inline-quality-menu[hidden]{
  display: flex !important;
}

.video-inline-quality-menu.open{
  pointer-events: auto !important;
  opacity: 1 !important;
}

.video-inline-quality-menu .video-quality-choice{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  border: 1px solid #d8dde6 !important;
  background: #ffffff !important;
  color: #111827 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: translateY(-6px) scale(0.98) !important;
  opacity: 0 !important;
  transition: transform 200ms ease, opacity 160ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease !important;
}

.video-inline-quality-menu.open .video-quality-choice{
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

.video-inline-quality-menu .video-quality-choice.is-active,
.video-inline-quality-menu .video-quality-choice:active{
  background: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}

.video-quality-modal-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
  z-index: 1500 !important;
}

.video-quality-modal{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
  z-index: 1501 !important;
}

.video-quality-modal.open,
.video-quality-modal-overlay.open{
  opacity: 1 !important;
  pointer-events: auto !important;
}

.video-quality-modal-card{
  width: min(92vw, 280px) !important;
  padding: 14px !important;
  border: 1px solid #d8dde6 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
}

.video-quality-modal-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.video-quality-modal-row{
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid #d8dde6 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111827 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 0 14px !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: none !important;
}

.video-quality-modal-row.is-active,
.video-quality-modal-row:active{
  background: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .video-inline-quality-menu .video-quality-choice,
html[data-theme="dark"] .video-inline-quality-btn,
body.dark .video-inline-quality-menu .video-quality-choice,
body.dark .video-inline-quality-btn{
  border-color: #3a3c42 !important;
  background: #2a2c31 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"] .video-quality-modal-card,
body.dark .video-quality-modal-card{
  border-color: #3a3c42 !important;
  background: rgba(26,26,28,.98) !important;
}

html[data-theme="dark"] .video-quality-modal-row,
body.dark .video-quality-modal-row{
  border-color: #3a3c42 !important;
  background: #2a2c31 !important;
  color: #f1f1f1 !important;
}

@media (max-width: 768px), (pointer: coarse){
  .video-inline-quality-menu{
    display: none !important;
  }
}

@media (min-width: 769px) and (pointer: fine){
  .video-quality-modal,
  .video-quality-modal-overlay{
    display: none !important;
  }
}


/* FIX v134.5: hide native quality select with ID-level override to prevent duplicate main button */
#videoInlineQualitySelect.video-inline-quality-native,
#videoInlineQualitySelect,
#videoQualitySelect{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* FIX v134.5: desktop quality choices open below the main button in one horizontal row */
@media (min-width: 769px) and (pointer: fine){
  #videoInlineQualityWrap{
    position: relative !important;
    overflow: visible !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  #videoInlineQualityMenu.video-inline-quality-menu{
    left: 50% !important;
    top: calc(100% + 10px) !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(92vw, 420px) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  #videoInlineQualityMenu.video-inline-quality-menu[hidden]{
    display: flex !important;
  }

  #videoInlineQualityMenu.video-inline-quality-menu.open{
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  #videoInlineQualityMenu .video-quality-choice{
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    transform: translateY(-6px) scale(0.98) !important;
    opacity: 0 !important;
  }

  #videoInlineQualityMenu.open .video-quality-choice{
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
  }
}


/* FIX v134.7: dark theme orange blink for video quality choices */
html[data-theme="dark"] .video-inline-quality-menu .video-quality-choice:active,
html[data-theme="dark"] .video-inline-quality-menu .video-quality-choice.is-active,
body.dark .video-inline-quality-menu .video-quality-choice:active,
body.dark .video-inline-quality-menu .video-quality-choice.is-active,
html[data-theme="dark"] .video-quality-modal-row:active,
html[data-theme="dark"] .video-quality-modal-row.is-active,
body.dark .video-quality-modal-row:active,
body.dark .video-quality-modal-row.is-active{
  background: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: scale(0.97) !important;
}


/* FIX v134.21: fullscreen video controls should mirror the normal bottom round buttons */
/* Desktop fullscreen */
@media (min-width: 769px) and (pointer: fine){
  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 12px !important;
    margin: 0 auto 12px auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-content: center !important;
    align-items: center !important;
  }

  html.video-app-fullscreen .controls button,
  body.video-app-fullscreen .controls button,
  html.video-app-fullscreen .video-inline-btn,
  body.video-app-fullscreen .video-inline-btn,
  html.video-app-fullscreen .video-inline-select,
  body.video-app-fullscreen .video-inline-select,
  html.video-app-fullscreen #videoInlineAudioTrackBtn,
  body.video-app-fullscreen #videoInlineAudioTrackBtn{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex: 0 0 54px !important;
  }

  html.video-app-fullscreen .controls button,
  body.video-app-fullscreen .controls button{
    border: 1px solid #ddd !important;
    background: #ffffff !important;
    color: #222 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease !important;
  }

  html.video-app-fullscreen .controls button svg,
  body.video-app-fullscreen .controls button svg{
    width: 40px !important;
    height: 40px !important;
  }

  html.video-app-fullscreen .btn-icon,
  body.video-app-fullscreen .btn-icon{
    font-size: 24px !important;
    color: inherit !important;
  }

  html.video-app-fullscreen #repeatBtn .icon-svg,
  body.video-app-fullscreen #repeatBtn .icon-svg{
    width: 24px !important;
    height: 24px !important;
  }

  html.video-app-fullscreen .video-inline-btn,
  body.video-app-fullscreen .video-inline-btn,
  html.video-app-fullscreen .video-inline-select,
  body.video-app-fullscreen .video-inline-select,
  html.video-app-fullscreen #videoInlineAudioTrackBtn,
  body.video-app-fullscreen #videoInlineAudioTrackBtn{
    border: 1px solid #d8dde6 !important;
    background: rgba(255,255,255,.96) !important;
    color: #111 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  html.video-app-fullscreen #videoCloseBtn,
  body.video-app-fullscreen #videoCloseBtn{
    font-size: 28px !important;
  }

  html.video-app-fullscreen #videoInlineQualityWrap,
  body.video-app-fullscreen #videoInlineQualityWrap,
  html.video-app-fullscreen #videoInlineAudioTrackWrap,
  body.video-app-fullscreen #videoInlineAudioTrackWrap{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 54px !important;
  }

  html[data-theme="dark"].video-app-fullscreen .controls button,
  body.dark.video-app-fullscreen .controls button{
    background: #2a2c31 !important;
    border-color: #3a3c42 !important;
    color: #f1f1f1 !important;
  }

  html[data-theme="dark"].video-app-fullscreen .video-inline-btn,
  html[data-theme="dark"].video-app-fullscreen .video-inline-select,
  html[data-theme="dark"].video-app-fullscreen #videoInlineAudioTrackBtn,
  body.dark.video-app-fullscreen .video-inline-btn,
  body.dark.video-app-fullscreen .video-inline-select,
  body.dark.video-app-fullscreen #videoInlineAudioTrackBtn{
    border-color: #3a3c42 !important;
    background: rgba(42,44,49,.96) !important;
    color: #f1f1f1 !important;
  }
}

/* Mobile fullscreen */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    width: fit-content !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    gap: 12px !important;
    margin: 0 auto 12px auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  html.video-app-fullscreen .controls button,
  body.video-app-fullscreen .controls button,
  html.video-app-fullscreen .video-inline-btn,
  body.video-app-fullscreen .video-inline-btn,
  html.video-app-fullscreen .video-inline-select,
  body.video-app-fullscreen .video-inline-select,
  html.video-app-fullscreen #videoInlineAudioTrackBtn,
  body.video-app-fullscreen #videoInlineAudioTrackBtn{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex: 0 0 54px !important;
  }

  html.video-app-fullscreen .controls button,
  body.video-app-fullscreen .controls button{
    border: 1px solid #ddd !important;
    background: #ffffff !important;
    color: #222 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease !important;
  }

  html.video-app-fullscreen .controls button svg,
  body.video-app-fullscreen .controls button svg{
    width: 40px !important;
    height: 40px !important;
  }

  html.video-app-fullscreen .btn-icon,
  body.video-app-fullscreen .btn-icon{
    font-size: 24px !important;
    color: inherit !important;
  }

  html.video-app-fullscreen #repeatBtn .icon-svg,
  body.video-app-fullscreen #repeatBtn .icon-svg{
    width: 24px !important;
    height: 24px !important;
  }

  html.video-app-fullscreen .video-inline-btn,
  body.video-app-fullscreen .video-inline-btn,
  html.video-app-fullscreen .video-inline-select,
  body.video-app-fullscreen .video-inline-select,
  html.video-app-fullscreen #videoInlineAudioTrackBtn,
  body.video-app-fullscreen #videoInlineAudioTrackBtn{
    border: 1px solid #d8dde6 !important;
    background: rgba(255,255,255,.96) !important;
    color: #111 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  html.video-app-fullscreen #videoCloseBtn,
  body.video-app-fullscreen #videoCloseBtn{
    font-size: 28px !important;
  }

  html.video-app-fullscreen #videoInlineQualityWrap,
  body.video-app-fullscreen #videoInlineQualityWrap,
  html.video-app-fullscreen #videoInlineAudioTrackWrap,
  body.video-app-fullscreen #videoInlineAudioTrackWrap{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 54px !important;
  }

  html[data-theme="dark"].video-app-fullscreen .controls button,
  body.dark.video-app-fullscreen .controls button{
    background: #2a2c31 !important;
    border-color: #3a3c42 !important;
    color: #f1f1f1 !important;
  }

  html[data-theme="dark"].video-app-fullscreen .video-inline-btn,
  html[data-theme="dark"].video-app-fullscreen .video-inline-select,
  html[data-theme="dark"].video-app-fullscreen #videoInlineAudioTrackBtn,
  body.dark.video-app-fullscreen .video-inline-btn,
  body.dark.video-app-fullscreen .video-inline-select,
  body.dark.video-app-fullscreen #videoInlineAudioTrackBtn{
    border-color: #3a3c42 !important;
    background: rgba(42,44,49,.96) !important;
    color: #f1f1f1 !important;
  }
}


/* FIX v134.21.1: fullscreen video controls must match normal-mode round buttons 1:1 */
/* Quality modal must stay above fullscreen video and blur it too. */
html.video-app-fullscreen .video-quality-modal-overlay,
body.video-app-fullscreen .video-quality-modal-overlay{
  z-index: 30040 !important;
  background: rgba(0,0,0,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html.video-app-fullscreen .video-quality-modal,
body.video-app-fullscreen .video-quality-modal{
  z-index: 30041 !important;
}

html.video-app-fullscreen .video-quality-modal-card,
body.video-app-fullscreen .video-quality-modal-card{
  box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
}

/* Desktop fullscreen: same button look as normal mode, but controls sit higher */
@media (min-width: 769px) and (pointer: fine){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 112px !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    color: #222 !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 42px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-content: center !important;
    align-items: center !important;
  }

  html.video-app-fullscreen .controls button,
  body.video-app-fullscreen .controls button{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 50% !important;
    border: 1px solid #ccc !important;
    background: #ffffff !important;
    color: #000 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease !important;
  }

  html.video-app-fullscreen .controls button svg,
  body.video-app-fullscreen .controls button svg{
    width: 40px !important;
    height: 40px !important;
  }

  html.video-app-fullscreen .btn-icon,
  body.video-app-fullscreen .btn-icon{
    font-size: 24px !important;
    color: inherit !important;
  }

  html.video-app-fullscreen #repeatBtn .icon-svg,
  body.video-app-fullscreen #repeatBtn .icon-svg{
    width: 24px !important;
    height: 24px !important;
  }

  html.video-app-fullscreen #videoInlineQualityWrap,
  html.video-app-fullscreen #videoInlineAudioTrackWrap,
  body.video-app-fullscreen #videoInlineQualityWrap,
  body.video-app-fullscreen #videoInlineAudioTrackWrap{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    flex: 0 0 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.video-app-fullscreen .video-inline-btn,
  html.video-app-fullscreen .video-inline-select,
  html.video-app-fullscreen #videoInlineAudioTrackBtn,
  body.video-app-fullscreen .video-inline-btn,
  body.video-app-fullscreen .video-inline-select,
  body.video-app-fullscreen #videoInlineAudioTrackBtn{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 50% !important;
    border: 1px solid #d8dde6 !important;
    background: rgba(255,255,255,.96) !important;
    color: #111 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  html.video-app-fullscreen #videoCloseBtn,
  body.video-app-fullscreen #videoCloseBtn{
    font-size: 28px !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu{
    top: calc(100% + 12px) !important;
    bottom: auto !important;
  }

  html[data-theme="dark"].video-app-fullscreen .player-bar,
  body.dark.video-app-fullscreen .player-bar{
    background: #2a2c31 !important;
    border-color: #3a3c42 !important;
    color: #f1f1f1 !important;
  }

  html[data-theme="dark"].video-app-fullscreen .player-time,
  html[data-theme="dark"].video-app-fullscreen .btn-icon,
  body.dark.video-app-fullscreen .player-time,
  body.dark.video-app-fullscreen .btn-icon{
    color: #f1f1f1 !important;
  }

  html[data-theme="dark"].video-app-fullscreen .controls button,
  body.dark.video-app-fullscreen .controls button{
    background: #2a2c31 !important;
    border-color: #3a3c42 !important;
    color: #f1f1f1 !important;
  }

  html[data-theme="dark"].video-app-fullscreen .video-inline-btn,
  html[data-theme="dark"].video-app-fullscreen .video-inline-select,
  html[data-theme="dark"].video-app-fullscreen #videoInlineAudioTrackBtn,
  body.dark.video-app-fullscreen .video-inline-btn,
  body.dark.video-app-fullscreen .video-inline-select,
  body.dark.video-app-fullscreen #videoInlineAudioTrackBtn{
    border-color: #3a3c42 !important;
    background: rgba(42,44,49,.96) !important;
    color: #f1f1f1 !important;
  }
}

/* Mobile fullscreen: keep the exact same normal-mode button look and allow quality modal above everything */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    width: 252px !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    color: #222 !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    width: fit-content !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    gap: 12px !important;
    margin: 0 auto 12px auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  html.video-app-fullscreen .controls button,
  body.video-app-fullscreen .controls button{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 50% !important;
    border: 1px solid #ccc !important;
    background: #ffffff !important;
    color: #000 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  html.video-app-fullscreen .controls button svg,
  body.video-app-fullscreen .controls button svg{
    width: 40px !important;
    height: 40px !important;
  }

  html.video-app-fullscreen .btn-icon,
  body.video-app-fullscreen .btn-icon{
    font-size: 24px !important;
    color: inherit !important;
  }

  html.video-app-fullscreen #repeatBtn .icon-svg,
  body.video-app-fullscreen #repeatBtn .icon-svg{
    width: 24px !important;
    height: 24px !important;
  }

  html.video-app-fullscreen #videoInlineQualityWrap,
  html.video-app-fullscreen #videoInlineAudioTrackWrap,
  body.video-app-fullscreen #videoInlineQualityWrap,
  body.video-app-fullscreen #videoInlineAudioTrackWrap{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    flex: 0 0 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.video-app-fullscreen .video-inline-btn,
  html.video-app-fullscreen .video-inline-select,
  html.video-app-fullscreen #videoInlineAudioTrackBtn,
  body.video-app-fullscreen .video-inline-btn,
  body.video-app-fullscreen .video-inline-select,
  body.video-app-fullscreen #videoInlineAudioTrackBtn{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 50% !important;
    border: 1px solid #d8dde6 !important;
    background: rgba(255,255,255,.96) !important;
    color: #111 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  html.video-app-fullscreen #videoCloseBtn,
  body.video-app-fullscreen #videoCloseBtn{
    font-size: 28px !important;
  }

  html.video-app-fullscreen .video-quality-modal-overlay.open,
  body.video-app-fullscreen .video-quality-modal-overlay.open,
  html.video-app-fullscreen .video-quality-modal.open,
  body.video-app-fullscreen .video-quality-modal.open{
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.video-app-fullscreen .video-quality-modal,
  body.video-app-fullscreen .video-quality-modal{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html[data-theme="dark"].video-app-fullscreen .player-bar,
  body.dark.video-app-fullscreen .player-bar{
    background: #2a2c31 !important;
    border-color: #3a3c42 !important;
    color: #f1f1f1 !important;
  }

  html[data-theme="dark"].video-app-fullscreen .player-time,
  html[data-theme="dark"].video-app-fullscreen .btn-icon,
  body.dark.video-app-fullscreen .player-time,
  body.dark.video-app-fullscreen .btn-icon{
    color: #f1f1f1 !important;
  }

  html[data-theme="dark"].video-app-fullscreen .controls button,
  body.dark.video-app-fullscreen .controls button{
    background: #2a2c31 !important;
    border-color: #3a3c42 !important;
    color: #f1f1f1 !important;
  }

  html[data-theme="dark"].video-app-fullscreen .video-inline-btn,
  html[data-theme="dark"].video-app-fullscreen .video-inline-select,
  html[data-theme="dark"].video-app-fullscreen #videoInlineAudioTrackBtn,
  body.dark.video-app-fullscreen .video-inline-btn,
  body.dark.video-app-fullscreen .video-inline-select,
  body.dark.video-app-fullscreen #videoInlineAudioTrackBtn{
    border-color: #3a3c42 !important;
    background: rgba(42,44,49,.96) !important;
    color: #f1f1f1 !important;
  }
}


/* FIX v134.21.2: fullscreen video UI must visually match the normal site controls 1:1 */
html.video-app-fullscreen .video-quality-modal-overlay,
body.video-app-fullscreen .video-quality-modal-overlay{
  z-index: 30040 !important;
  background: rgba(0,0,0,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html.video-app-fullscreen .video-quality-modal,
body.video-app-fullscreen .video-quality-modal{
  z-index: 30041 !important;
}

html.video-app-fullscreen .video-quality-modal-card,
body.video-app-fullscreen .video-quality-modal-card{
  box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
}

html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

html.video-app-fullscreen .controls button,
body.video-app-fullscreen .controls button,
html.video-app-fullscreen .video-inline-btn,
body.video-app-fullscreen .video-inline-btn,
html.video-app-fullscreen .video-inline-select,
body.video-app-fullscreen .video-inline-select,
html.video-app-fullscreen #videoInlineAudioTrackBtn,
body.video-app-fullscreen #videoInlineAudioTrackBtn{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
}

html.video-app-fullscreen .controls button,
body.video-app-fullscreen .controls button{
  border: 1px solid #ccc !important;
  background: #ffffff !important;
  color: #000 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease !important;
}

html.video-app-fullscreen .controls button svg,
body.video-app-fullscreen .controls button svg{
  width: 40px !important;
  height: 40px !important;
}

html.video-app-fullscreen .btn-icon,
body.video-app-fullscreen .btn-icon{
  font-size: 24px !important;
  color: inherit !important;
}

html.video-app-fullscreen #repeatBtn .icon-svg,
body.video-app-fullscreen #repeatBtn .icon-svg{
  width: 24px !important;
  height: 24px !important;
}

html.video-app-fullscreen .video-inline-btn,
body.video-app-fullscreen .video-inline-btn,
html.video-app-fullscreen .video-inline-select,
body.video-app-fullscreen .video-inline-select,
html.video-app-fullscreen #videoInlineAudioTrackBtn,
body.video-app-fullscreen #videoInlineAudioTrackBtn{
  border: 1px solid #d8dde6 !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-align-last: center !important;
}

html.video-app-fullscreen #videoInlineQualityWrap,
html.video-app-fullscreen #videoInlineAudioTrackWrap,
body.video-app-fullscreen #videoInlineQualityWrap,
body.video-app-fullscreen #videoInlineAudioTrackWrap{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  flex: 0 0 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.video-app-fullscreen #videoCloseBtn,
body.video-app-fullscreen #videoCloseBtn{
  font-size: 28px !important;
}

html.video-app-fullscreen .player-bar,
body.video-app-fullscreen .player-bar{
  width: var(--site-visual-width) !important;
  max-width: var(--site-max-width) !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  color: #222 !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"].video-app-fullscreen .player-bar,
body.dark.video-app-fullscreen .player-bar{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .player-time,
html[data-theme="dark"].video-app-fullscreen .btn-icon,
body.dark.video-app-fullscreen .player-time,
body.dark.video-app-fullscreen .btn-icon{
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .controls button,
body.dark.video-app-fullscreen .controls button{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .video-inline-btn,
html[data-theme="dark"].video-app-fullscreen .video-inline-select,
html[data-theme="dark"].video-app-fullscreen #videoInlineAudioTrackBtn,
body.dark.video-app-fullscreen .video-inline-btn,
body.dark.video-app-fullscreen .video-inline-select,
body.dark.video-app-fullscreen #videoInlineAudioTrackBtn{
  border-color: #3a3c42 !important;
  background: rgba(42,44,49,.96) !important;
  color: #f1f1f1 !important;
}

/* Desktop fullscreen: move controls higher so the quality row can open downward with a bottom gap */
@media (min-width: 769px) and (pointer: fine){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 154px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 86px !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu{
    top: calc(100% + 12px) !important;
    bottom: auto !important;
  }
}

/* Mobile fullscreen: quality modal must appear exactly like normal mobile mode, over all fullscreen layers */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }

  html.video-app-fullscreen .video-quality-modal-overlay.open,
  body.video-app-fullscreen .video-quality-modal-overlay.open{
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.video-app-fullscreen .video-quality-modal.open,
  body.video-app-fullscreen .video-quality-modal.open{
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* FIX v134.21.2: mobile main-screen rhythm between search / now-playing / player-bar / controls */
@media (max-width: 768px){
  .now-playing{
    margin-bottom: 10px !important;
  }

  .player-bar{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .controls{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
}


/* FIX v134.21.3: fullscreen video controls must be identical to normal site controls */
html.video-app-fullscreen .player-bar,
body.video-app-fullscreen .player-bar{
  width: var(--site-visual-width, min(500px, calc(100vw - 24px))) !important;
  max-width: var(--site-max-width, 500px) !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  gap: 10px !important;
  color: #222 !important;
}

html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
}

html.video-app-fullscreen .controls button,
body.video-app-fullscreen .controls button{
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  border: 1px solid #ccc !important;
  background-color: #ffffff !important;
  color: #000 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  caret-color: currentColor !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  user-select: none !important;
}

html.video-app-fullscreen .controls button:focus,
html.video-app-fullscreen .controls button:focus-visible,
body.video-app-fullscreen .controls button:focus,
body.video-app-fullscreen .controls button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

html.video-app-fullscreen .controls button:active,
body.video-app-fullscreen .controls button:active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: scale(0.93) !important;
}

html.video-app-fullscreen .controls button:active .btn-icon,
body.video-app-fullscreen .controls button:active .btn-icon{
  color: #ffffff !important;
}

html.video-app-fullscreen .btn-icon,
body.video-app-fullscreen .btn-icon{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #000 !important;
  position: static !important;
}

html.video-app-fullscreen #prevBtn .btn-icon,
body.video-app-fullscreen #prevBtn .btn-icon{
  transform: translateX(-0.5px) !important;
}

html.video-app-fullscreen #nextBtn .btn-icon,
body.video-app-fullscreen #nextBtn .btn-icon{
  transform: translateX(1.5px) !important;
}

html.video-app-fullscreen #repeatBtn .icon-svg,
body.video-app-fullscreen #repeatBtn .icon-svg{
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
}

html.video-app-fullscreen #repeatBtn.active,
body.video-app-fullscreen #repeatBtn.active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}

html.video-app-fullscreen #videoInlineQualityWrap,
html.video-app-fullscreen #videoInlineAudioTrackWrap,
body.video-app-fullscreen #videoInlineQualityWrap,
body.video-app-fullscreen #videoInlineAudioTrackWrap{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  flex: 0 0 54px !important;
}

html.video-app-fullscreen .video-inline-btn,
html.video-app-fullscreen .video-inline-select,
html.video-app-fullscreen #videoInlineAudioTrackBtn,
body.video-app-fullscreen .video-inline-btn,
body.video-app-fullscreen .video-inline-select,
body.video-app-fullscreen #videoInlineAudioTrackBtn{
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  border: 1px solid #d8dde6 !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-align-last: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
  box-shadow: none !important;
  outline: none !important;
}

html.video-app-fullscreen .video-inline-close-btn,
body.video-app-fullscreen .video-inline-close-btn{
  font-size: 28px !important;
}

html.video-app-fullscreen #videoInlineAudioTrackBtn,
body.video-app-fullscreen #videoInlineAudioTrackBtn{
  font-size: 13px !important;
  font-weight: 700 !important;
}

html.video-app-fullscreen .video-inline-select,
body.video-app-fullscreen .video-inline-select{
  font-size: 13px !important;
}

html[data-theme="dark"].video-app-fullscreen .player-bar,
body.dark.video-app-fullscreen .player-bar{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .player-time,
body.dark.video-app-fullscreen .player-time,
html[data-theme="dark"].video-app-fullscreen .btn-icon,
body.dark.video-app-fullscreen .btn-icon{
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .controls button,
body.dark.video-app-fullscreen .controls button{
  background-color: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .video-inline-btn,
html[data-theme="dark"].video-app-fullscreen .video-inline-select,
html[data-theme="dark"].video-app-fullscreen #videoInlineAudioTrackBtn,
body.dark.video-app-fullscreen .video-inline-btn,
body.dark.video-app-fullscreen .video-inline-select,
body.dark.video-app-fullscreen #videoInlineAudioTrackBtn{
  border-color: #3a3c42 !important;
  background: rgba(42,44,49,.96) !important;
  color: #f1f1f1 !important;
}

/* Desktop fullscreen placement: move controls higher so quality row can open downward with bottom gap */
@media (min-width: 769px) and (pointer: fine){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 122px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 44px !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu{
    top: calc(100% + 12px) !important;
    bottom: auto !important;
  }
}

/* Mobile fullscreen quality modal must appear exactly like normal mobile mode and over all fullscreen layers */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen .video-quality-modal-overlay,
  body.video-app-fullscreen .video-quality-modal-overlay{
    position: fixed !important;
    inset: 0 !important;
    z-index: 30040 !important;
    background: rgba(0,0,0,0.16) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html.video-app-fullscreen .video-quality-modal-overlay.open,
  body.video-app-fullscreen .video-quality-modal-overlay.open{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.video-app-fullscreen .video-quality-modal,
  body.video-app-fullscreen .video-quality-modal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 30041 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.video-app-fullscreen .video-quality-modal.open,
  body.video-app-fullscreen .video-quality-modal.open{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.video-app-fullscreen .video-quality-modal-card,
  body.video-app-fullscreen .video-quality-modal-card{
    width: min(92vw, 280px) !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
  }

  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }
}


/* FIX v134.21.3: mobile main-page gaps under now-playing, player-bar and controls */
@media (max-width: 768px){
  .now-playing{
    margin-bottom: 10px !important;
  }

  .player-bar{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .controls{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
}


/* FIX v134.21.4: fullscreen video controls must visually match normal mode 1:1 */
html.video-app-fullscreen .player-bar,
body.video-app-fullscreen .player-bar{
  width: min(100%, var(--site-visual-width, min(500px, calc(100vw - 24px)))) !important;
  max-width: var(--site-max-width, 500px) !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  gap: 10px !important;
  color: #222 !important;
}

html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 auto 12px auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

html.video-app-fullscreen .controls button,
body.video-app-fullscreen .controls button{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  border: 1px solid #ccc !important;
  background: #ffffff !important;
  color: #222 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease !important;
}

html.video-app-fullscreen .controls button:active,
body.video-app-fullscreen .controls button:active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: scale(0.93) !important;
}

html.video-app-fullscreen .controls button svg,
body.video-app-fullscreen .controls button svg{
  width: 40px !important;
  height: 40px !important;
}

html.video-app-fullscreen .btn-icon,
body.video-app-fullscreen .btn-icon{
  font-size: 24px !important;
  color: inherit !important;
}

html.video-app-fullscreen #repeatBtn .icon-svg,
body.video-app-fullscreen #repeatBtn .icon-svg{
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
}

html.video-app-fullscreen #videoInlineQualityWrap,
html.video-app-fullscreen #videoInlineAudioTrackWrap,
body.video-app-fullscreen #videoInlineQualityWrap,
body.video-app-fullscreen #videoInlineAudioTrackWrap{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.video-app-fullscreen .video-inline-btn,
html.video-app-fullscreen .video-inline-select,
html.video-app-fullscreen #videoInlineAudioTrackBtn,
body.video-app-fullscreen .video-inline-btn,
body.video-app-fullscreen .video-inline-select,
body.video-app-fullscreen #videoInlineAudioTrackBtn{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  border: 1px solid #d8dde6 !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}

html.video-app-fullscreen .video-inline-btn:active,
html.video-app-fullscreen .video-inline-select:active,
html.video-app-fullscreen #videoInlineAudioTrackBtn:active,
body.video-app-fullscreen .video-inline-btn:active,
body.video-app-fullscreen .video-inline-select:active,
body.video-app-fullscreen #videoInlineAudioTrackBtn:active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: scale(0.97) !important;
}

html.video-app-fullscreen #videoCloseBtn,
body.video-app-fullscreen #videoCloseBtn{
  font-size: 28px !important;
}

html.video-app-fullscreen .video-quality-modal-overlay,
body.video-app-fullscreen .video-quality-modal-overlay{
  z-index: 30040 !important;
  background: rgba(0,0,0,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html.video-app-fullscreen .video-quality-modal,
body.video-app-fullscreen .video-quality-modal{
  z-index: 30041 !important;
}

html.video-app-fullscreen .video-quality-modal.open,
body.video-app-fullscreen .video-quality-modal.open{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

html.video-app-fullscreen .video-quality-modal-overlay.open,
body.video-app-fullscreen .video-quality-modal-overlay.open{
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* dark theme parity with normal mode */
html[data-theme="dark"].video-app-fullscreen .player-bar,
body.dark.video-app-fullscreen .player-bar{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}
html[data-theme="dark"].video-app-fullscreen .player-time,
html[data-theme="dark"].video-app-fullscreen .btn-icon,
body.dark.video-app-fullscreen .player-time,
body.dark.video-app-fullscreen .btn-icon{
  color: #f1f1f1 !important;
}
html[data-theme="dark"].video-app-fullscreen .controls button,
body.dark.video-app-fullscreen .controls button{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}
html[data-theme="dark"].video-app-fullscreen .controls button svg,
body.dark.video-app-fullscreen .controls button svg{
  fill: currentColor !important;
}
html[data-theme="dark"].video-app-fullscreen .video-inline-btn,
html[data-theme="dark"].video-app-fullscreen .video-inline-select,
html[data-theme="dark"].video-app-fullscreen #videoInlineAudioTrackBtn,
body.dark.video-app-fullscreen .video-inline-btn,
body.dark.video-app-fullscreen .video-inline-select,
body.dark.video-app-fullscreen #videoInlineAudioTrackBtn{
  border-color: #3a3c42 !important;
  background: rgba(42,44,49,.96) !important;
  color: #f1f1f1 !important;
}

/* Desktop fullscreen controls higher to leave a bottom gap for the quality row */
@media (min-width: 769px) and (pointer: fine){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 150px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 84px !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu{
    top: calc(100% + 12px) !important;
    bottom: auto !important;
  }
}

/* Mobile fullscreen quality modal must behave like the normal mobile modal */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }
}


/* FIX v134.21.4: same mobile gap step between BAG search / now playing / player bar / controls */
@media (max-width: 768px){
  .now-playing{
    margin-bottom: 10px !important;
  }

  .player-bar{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .controls{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
}


/* FIX v134.21.5: fullscreen video controls must look exactly like the normal site controls */
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

html.video-app-fullscreen .controls button,
body.video-app-fullscreen .controls button{
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  border: 1px solid #ccc !important;
  background-color: #ffffff !important;
  color: #000 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  caret-color: currentColor !important;
  outline: none !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  user-select: none !important;
  line-height: 1 !important;
}

html.video-app-fullscreen .controls button:focus,
html.video-app-fullscreen .controls button:focus-visible,
body.video-app-fullscreen .controls button:focus,
body.video-app-fullscreen .controls button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

html.video-app-fullscreen .controls button:active,
body.video-app-fullscreen .controls button:active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
  transform: scale(0.93) !important;
}

html.video-app-fullscreen .controls button:active .btn-icon,
body.video-app-fullscreen .controls button:active .btn-icon{
  color: #ffffff !important;
}

html.video-app-fullscreen .btn-icon,
body.video-app-fullscreen .btn-icon{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #000 !important;
  position: static !important;
}

html.video-app-fullscreen #prevBtn .btn-icon,
body.video-app-fullscreen #prevBtn .btn-icon{
  transform: translateX(-0.5px) !important;
}

html.video-app-fullscreen #nextBtn .btn-icon,
body.video-app-fullscreen #nextBtn .btn-icon{
  transform: translateX(1.5px) !important;
}

html.video-app-fullscreen #repeatBtn .icon-svg,
body.video-app-fullscreen #repeatBtn .icon-svg{
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
}

html.video-app-fullscreen #repeatBtn.active,
body.video-app-fullscreen #repeatBtn.active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}

html.video-app-fullscreen .video-inline-btn,
body.video-app-fullscreen .video-inline-btn{
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  border: 1px solid #d8dde6 !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
}

html.video-app-fullscreen .video-inline-close-btn,
body.video-app-fullscreen .video-inline-close-btn{
  font-size: 28px !important;
}

html.video-app-fullscreen .video-inline-select,
body.video-app-fullscreen .video-inline-select,
html.video-app-fullscreen #videoInlineAudioTrackBtn,
body.video-app-fullscreen #videoInlineAudioTrackBtn{
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  border: 1px solid #d8dde6 !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-align-last: center !important;
  font-family: Arial, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

html.video-app-fullscreen #videoInlineQualityWrap,
html.video-app-fullscreen #videoInlineAudioTrackWrap,
body.video-app-fullscreen #videoInlineQualityWrap,
body.video-app-fullscreen #videoInlineAudioTrackWrap{
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  flex: 0 0 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.video-app-fullscreen .player-bar,
body.video-app-fullscreen .player-bar{
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  color: #222 !important;
}

html[data-theme="dark"].video-app-fullscreen .player-bar,
body.dark.video-app-fullscreen .player-bar{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .controls button,
body.dark.video-app-fullscreen .controls button{
  background: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .btn-icon,
body.dark.video-app-fullscreen .btn-icon{
  color: #f1f1f1 !important;
}

html[data-theme="dark"].video-app-fullscreen .video-inline-btn,
html[data-theme="dark"].video-app-fullscreen .video-inline-select,
html[data-theme="dark"].video-app-fullscreen #videoInlineAudioTrackBtn,
body.dark.video-app-fullscreen .video-inline-btn,
body.dark.video-app-fullscreen .video-inline-select,
body.dark.video-app-fullscreen #videoInlineAudioTrackBtn{
  border-color: #3a3c42 !important;
  background: rgba(42,44,49,.96) !important;
  color: #f1f1f1 !important;
}

/* Desktop fullscreen: move the control bars higher so the quality row can open downward with a bottom gap */
@media (min-width: 769px) and (pointer: fine){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 146px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 78px !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu{
    top: calc(100% + 12px) !important;
    bottom: auto !important;
  }
}

/* Mobile fullscreen: force the same quality modal above fullscreen video and controls */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen .video-quality-modal-overlay,
  body.video-app-fullscreen .video-quality-modal-overlay{
    z-index: 30040 !important;
    background: rgba(0,0,0,0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html.video-app-fullscreen .video-quality-modal,
  body.video-app-fullscreen .video-quality-modal{
    z-index: 30041 !important;
  }

  html.video-app-fullscreen .video-quality-modal.open,
  body.video-app-fullscreen .video-quality-modal.open{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.video-app-fullscreen .video-quality-modal-overlay.open,
  body.video-app-fullscreen .video-quality-modal-overlay.open{
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* FIX v134.21.5: mobile main-screen vertical rhythm between search / now-playing / player-bar / controls */
@media (max-width: 768px){
  .now-playing{
    margin-bottom: 10px !important;
  }

  .player-bar{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .controls{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
}


/* FIX v134.21.6: fullscreen quality button font must match normal inline mode exactly */
html.video-app-fullscreen #videoInlineQualityBtn,
body.video-app-fullscreen #videoInlineQualityBtn{
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
}

html[data-theme="dark"].video-app-fullscreen #videoInlineQualityBtn,
body.dark.video-app-fullscreen #videoInlineQualityBtn{
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* FIX v134.21.6: mobile fullscreen quality modal must open above fullscreen video and all site layers */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen #videoQualityModalOverlay,
  body.video-app-fullscreen #videoQualityModalOverlay{
    position: fixed !important;
    inset: 0 !important;
    z-index: 40000 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(0,0,0,0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html.video-app-fullscreen #videoQualityModalOverlay.open,
  body.video-app-fullscreen #videoQualityModalOverlay.open{
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.video-app-fullscreen #videoQualityModal,
  body.video-app-fullscreen #videoQualityModal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 40001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.video-app-fullscreen #videoQualityModal.open,
  body.video-app-fullscreen #videoQualityModal.open{
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.video-app-fullscreen #videoQualityModal .video-quality-modal-card,
  body.video-app-fullscreen #videoQualityModal .video-quality-modal-card{
    position: relative !important;
    z-index: 40002 !important;
  }
}


/* FIX v134.21.7: fullscreen desktop quality choices use the same font as normal mode */
@media (min-width: 769px) and (pointer: fine){
  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu{
    z-index: 30020 !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice,
  body.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice{
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

/* FIX v134.21.7: fullscreen mobile quality modal must render above the fullscreen top layer content */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen #appContainer > #videoQualityModalOverlay.open,
  body.video-app-fullscreen #appContainer > #videoQualityModalOverlay.open{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(0,0,0,0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html.video-app-fullscreen #appContainer > #videoQualityModal.open,
  body.video-app-fullscreen #appContainer > #videoQualityModal.open{
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 50001 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.video-app-fullscreen #appContainer > #videoQualityModal.open .video-quality-modal-card,
  body.video-app-fullscreen #appContainer > #videoQualityModal.open .video-quality-modal-card{
    position: relative !important;
    z-index: 50002 !important;
  }
}


/* FIX v134.21.8: quality modal must be above fullscreen video and all site layers */
#videoQualityModalOverlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 60000 !important;
}

#videoQualityModal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 60001 !important;
}

#videoQualityModal .video-quality-modal-card{
  position: relative !important;
  z-index: 60002 !important;
}

/* FIX v134.21.8: fullscreen controls slightly farther from the video, with the same spacing idea on desktop and mobile */
@media (min-width: 769px) and (pointer: fine){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 158px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 90px !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice,
  body.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice{
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 118px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 50px !important;
  }

  html.video-app-fullscreen #videoQualityModalOverlay.open,
  body.video-app-fullscreen #videoQualityModalOverlay.open{
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.video-app-fullscreen #videoQualityModal.open,
  body.video-app-fullscreen #videoQualityModal.open{
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* FIX v134.21.9: fullscreen controls slightly lower, keeping a bit more equal gap from the player on desktop + mobile */
@media (min-width: 769px) and (pointer: fine){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 158px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 82px !important;
  }

  html.video-app-fullscreen #videoInlineQualityWrap,
  body.video-app-fullscreen #videoInlineQualityWrap{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    flex: 0 0 54px !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice,
  body.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice{
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 118px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 42px !important;
  }
}

/* FIX v134.21.9: fullscreen quality modal must stay visible inside the fullscreen container and above fullscreen video */
html.video-app-fullscreen #appContainer > #videoQualityModalOverlay,
body.video-app-fullscreen #appContainer > #videoQualityModalOverlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 65000 !important;
}

html.video-app-fullscreen #appContainer > #videoQualityModal,
body.video-app-fullscreen #appContainer > #videoQualityModal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 65001 !important;
}

html.video-app-fullscreen #appContainer > #videoQualityModalOverlay.open,
body.video-app-fullscreen #appContainer > #videoQualityModalOverlay.open{
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(0,0,0,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html.video-app-fullscreen #appContainer > #videoQualityModal.open,
body.video-app-fullscreen #appContainer > #videoQualityModal.open{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

html.video-app-fullscreen #appContainer > #videoQualityModal.open .video-quality-modal-card,
body.video-app-fullscreen #appContainer > #videoQualityModal.open .video-quality-modal-card{
  position: relative !important;
  z-index: 65002 !important;
}

/* Do not hide fullscreen quality modal/overlay with the generic appContainer fullscreen rule */
html.video-app-fullscreen #appContainer > #videoQualityModalOverlay,
html.video-app-fullscreen #appContainer > #videoQualityModal,
body.video-app-fullscreen #appContainer > #videoQualityModalOverlay,
body.video-app-fullscreen #appContainer > #videoQualityModal{
  display: none;
}

html.video-app-fullscreen #appContainer > #videoQualityModalOverlay.open,
html.video-app-fullscreen #appContainer > #videoQualityModal.open,
body.video-app-fullscreen #appContainer > #videoQualityModalOverlay.open,
body.video-app-fullscreen #appContainer > #videoQualityModal.open{
  display: flex !important;
}

html.video-app-fullscreen #appContainer > #videoQualityModalOverlay.open,
body.video-app-fullscreen #appContainer > #videoQualityModalOverlay.open{
  display: block !important;
}


/* FIX v134.22.1: mobile fullscreen quality selector should work like desktop fullscreen */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen #videoInlineQualityWrap,
  body.video-app-fullscreen #videoInlineQualityWrap{
    position: relative !important;
    overflow: visible !important;
    z-index: 12050 !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu{
    left: 50% !important;
    top: calc(100% + 10px) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(92vw, 420px) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 12060 !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu[hidden],
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu[hidden]{
    display: flex !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu.open,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu.open{
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice,
  body.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice{
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-radius: 50% !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    transform: translateY(-6px) scale(0.98) !important;
    opacity: 0 !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.open .video-quality-choice,
  body.video-app-fullscreen #videoInlineQualityMenu.open .video-quality-choice{
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
  }

  /* fullscreen mobile should not rely on the centered quality modal anymore */
  html.video-app-fullscreen #videoQualityModalOverlay,
  html.video-app-fullscreen #videoQualityModal,
  body.video-app-fullscreen #videoQualityModalOverlay,
  body.video-app-fullscreen #videoQualityModal{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* FIX v134.22.2: mobile fullscreen quality selector must behave like desktop fullscreen */
@media (max-width: 768px), (pointer: coarse){
  /* shorten the gap between player bar and round control row */
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 118px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 52px !important;
  }

  /* mobile fullscreen quality button should use the horizontal circle row, not the modal */
  html.video-app-fullscreen #videoInlineQualityWrap,
  body.video-app-fullscreen #videoInlineQualityWrap{
    position: relative !important;
    overflow: visible !important;
    z-index: 12050 !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu{
    left: 50% !important;
    top: calc(100% + 10px) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(92vw, 420px) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 12060 !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu[hidden],
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu[hidden]{
    display: flex !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu.open,
  body.video-app-fullscreen #videoInlineQualityMenu.video-inline-quality-menu.open{
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice,
  body.video-app-fullscreen #videoInlineQualityMenu .video-quality-choice{
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-radius: 50% !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    transform: translateY(-6px) scale(0.98) !important;
    opacity: 0 !important;
  }

  html.video-app-fullscreen #videoInlineQualityMenu.open .video-quality-choice,
  body.video-app-fullscreen #videoInlineQualityMenu.open .video-quality-choice{
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
  }

  /* disable the modal path visually in mobile fullscreen */
  html.video-app-fullscreen #videoQualityModalOverlay,
  html.video-app-fullscreen #videoQualityModal,
  body.video-app-fullscreen #videoQualityModalOverlay,
  body.video-app-fullscreen #videoQualityModal{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* FIX v134.22.3: mobile fullscreen increase gap by lifting only the upper player bar */
@media (max-width: 768px), (pointer: coarse){
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    bottom: 126px !important;
  }

  html.video-app-fullscreen .controls,
  body.video-app-fullscreen .controls{
    bottom: 52px !important;
  }
}

/* FIX v134.22: mobile vertical spacing between BAG search, now playing, player bar and controls must match desktop rhythm */
@media (max-width: 768px){
  :root{
    --jukebox-mobile-player-gap: 12px;
  }

  #nowPlaying,
  .now-playing{
    margin-top: 0 !important;
    margin-bottom: var(--jukebox-mobile-player-gap) !important;
  }

  .player-bar{
    margin-top: 0 !important;
    margin-bottom: var(--jukebox-mobile-player-gap) !important;
  }

  .controls,
  .player-controls{
    margin-top: 0 !important;
    margin-bottom: var(--jukebox-mobile-player-gap) !important;
  }
}


/* FIX v2.1.16: exact inactive player controls background palette requested by user */
html[data-theme="light"] .controls button:disabled,
html[data-theme="light"] .player-btn:disabled,
body:not(.dark) .controls button:disabled,
body:not(.dark) .player-btn: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"] .controls button:disabled .btn-icon,
html[data-theme="light"] .controls button:disabled .icon-svg,
html[data-theme="light"] .player-btn:disabled .btn-icon,
html[data-theme="light"] .player-btn:disabled .icon-svg,
body:not(.dark) .controls button:disabled .btn-icon,
body:not(.dark) .controls button:disabled .icon-svg,
body:not(.dark) .player-btn:disabled .btn-icon,
body:not(.dark) .player-btn:disabled .icon-svg{
  color: #a6afbb !important;
  fill: #a6afbb !important;
}

html[data-theme="dark"] .controls button:disabled,
html[data-theme="dark"] .player-btn:disabled,
body.dark .controls button:disabled,
body.dark .player-btn: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"] .controls button:disabled .btn-icon,
html[data-theme="dark"] .controls button:disabled .icon-svg,
html[data-theme="dark"] .player-btn:disabled .btn-icon,
html[data-theme="dark"] .player-btn:disabled .icon-svg,
body.dark .controls button:disabled .btn-icon,
body.dark .controls button:disabled .icon-svg,
body.dark .player-btn:disabled .btn-icon,
body.dark .player-btn:disabled .icon-svg{
  color: #747b86 !important;
  fill: #747b86 !important;
}


/* FIX v2.1.17: keep exact disabled player button palette without generic wallet-ui-disabled opacity washout */
.player-bar.wallet-ui-disabled,
.controls.wallet-ui-disabled{
  opacity: 1 !important;
  filter: none !important;
}

.player-bar .player-btn.wallet-ui-disabled,
.controls button.wallet-ui-disabled{
  opacity: 1 !important;
  filter: none !important;
}


/* FIX v2.1.18: exact inactive player panel palette requested by user */
html[data-theme="light"] .player-bar.wallet-ui-disabled,
body:not(.dark) .player-bar.wallet-ui-disabled{
  background: #f9fafc !important;
  border-color: #eceff4 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

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


/* FIX v2.1.19: exact inactive timer palette on disabled player panel */
html[data-theme="light"] .player-bar.wallet-ui-disabled .player-time,
html[data-theme="light"] .player-bar.wallet-ui-disabled #timeCurrent,
html[data-theme="light"] .player-bar.wallet-ui-disabled #timeTotal,
html[data-theme="light"] .player-bar.wallet-ui-disabled .player-time-sep,
body:not(.dark) .player-bar.wallet-ui-disabled .player-time,
body:not(.dark) .player-bar.wallet-ui-disabled #timeCurrent,
body:not(.dark) .player-bar.wallet-ui-disabled #timeTotal,
body:not(.dark) .player-bar.wallet-ui-disabled .player-time-sep{
  color: #a6afbb !important;
  fill: #a6afbb !important;
}

html[data-theme="dark"] .player-bar.wallet-ui-disabled .player-time,
html[data-theme="dark"] .player-bar.wallet-ui-disabled #timeCurrent,
html[data-theme="dark"] .player-bar.wallet-ui-disabled #timeTotal,
html[data-theme="dark"] .player-bar.wallet-ui-disabled .player-time-sep,
body.dark .player-bar.wallet-ui-disabled .player-time,
body.dark .player-bar.wallet-ui-disabled #timeCurrent,
body.dark .player-bar.wallet-ui-disabled #timeTotal,
body.dark .player-bar.wallet-ui-disabled .player-time-sep{
  color: #747b86 !important;
  fill: #747b86 !important;
}


/* FIX v2.1.20: exact inactive now-playing palette for "track has not been selected yet" */
html[data-theme="light"] .now-playing.wallet-ui-disabled,
body:not(.dark) .now-playing.wallet-ui-disabled{
  background: #f9fafc !important;
  border-color: #eceff4 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] .now-playing.wallet-ui-disabled .now-playing-inner,
html[data-theme="light"] .now-playing.wallet-ui-disabled #nowPlayingText,
html[data-theme="light"] .now-playing.wallet-ui-disabled .now-playing-text,
html[data-theme="light"] .now-playing.wallet-ui-disabled #trackNotSelected,
body:not(.dark) .now-playing.wallet-ui-disabled .now-playing-inner,
body:not(.dark) .now-playing.wallet-ui-disabled #nowPlayingText,
body:not(.dark) .now-playing.wallet-ui-disabled .now-playing-text,
body:not(.dark) .now-playing.wallet-ui-disabled #trackNotSelected{
  color: #a6afbb !important;
  fill: #a6afbb !important;
}

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

html[data-theme="dark"] .now-playing.wallet-ui-disabled .now-playing-inner,
html[data-theme="dark"] .now-playing.wallet-ui-disabled #nowPlayingText,
html[data-theme="dark"] .now-playing.wallet-ui-disabled .now-playing-text,
html[data-theme="dark"] .now-playing.wallet-ui-disabled #trackNotSelected,
body.dark .now-playing.wallet-ui-disabled .now-playing-inner,
body.dark .now-playing.wallet-ui-disabled #nowPlayingText,
body.dark .now-playing.wallet-ui-disabled .now-playing-text,
body.dark .now-playing.wallet-ui-disabled #trackNotSelected{
  color: #747b86 !important;
  fill: #747b86 !important;
}


/* FIX 53.206: локальный fullscreen только для видео-shell и интерфейса плеера без включения старого глобального video-app-fullscreen CSS */
body.video-shell-fullscreen-disabled #videoPlayerShell{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
}

body.video-shell-fullscreen-disabled #videoPlayerShell .video-player-body{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  background: #000 !important;
}

body.video-shell-fullscreen-disabled #videoPlayerShell .video-player,
body.video-shell-fullscreen-disabled #videoPlayerShell #videoPlayer{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: #000 !important;
}

body.video-shell-fullscreen-disabled .player-bar,
body.video-shell-fullscreen-disabled .controls{
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 2147483001 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
}

body.video-shell-fullscreen-disabled .player-bar{
  bottom: 92px !important;
}

body.video-shell-fullscreen-disabled .controls{
  bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
}

body.video-shell-fullscreen-disabled.video-shell-fullscreen-ui-visible .player-bar,
body.video-shell-fullscreen-disabled.video-shell-fullscreen-ui-visible .controls{
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.video-shell-fullscreen-disabled #videoInlineQualityWrap,
body.video-shell-fullscreen-disabled #videoInlineAudioTrackWrap,
body.video-shell-fullscreen-disabled #videoInlineFullscreenBtn,
body.video-shell-fullscreen-disabled #videoCloseBtn{
  z-index: 2147483002 !important;
}

body.video-shell-fullscreen-disabled #videoInlineFullscreenBtn .video-fullscreen-icon{
  display: block !important;
  margin: 0 auto !important;
}


/* 53.219: скрыть переключение качества до нового режима потокового видео */
#videoInlineQualityWrap,
#videoQualityWrap,
#videoInlineQualityBtn,
#videoInlineQualitySelect,
#videoInlineQualityMenu,
#videoQualityModalOverlay,
#videoQualityModal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 53.219: в полноэкранном режиме сохранять панель и нижний ряд кнопок */
html.video-app-fullscreen .player-bar,
body.video-app-fullscreen .player-bar,
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* FIX v53.222: fullscreen video must keep centered video, visible player bar and compact bottom controls; hidden video buttons must collapse without gaps */
#videoInlineQualityWrap,
#videoInlineQualityWrap[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

#videoInlineAudioTrackWrap[hidden],
#videoInlineFullscreenBtn[hidden],
#videoCloseBtn[hidden],
.controls > [hidden],
.controls .video-inline-select-wrap[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

.controls{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
}

body.video-player-active .controls,
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls{
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}

html.video-app-fullscreen,
body.video-app-fullscreen{
  background:#000 !important;
}

html.video-app-fullscreen #appContainer > :not(#videoPlayerShell):not(.player-bar):not(.controls),
body.video-app-fullscreen #appContainer > :not(#videoPlayerShell):not(.player-bar):not(.controls){
  display:none !important;
}

html.video-app-fullscreen #videoPlayerShell,
body.video-app-fullscreen #videoPlayerShell{
  display:flex !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  background:#000 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  align-items:center !important;
  justify-content:center !important;
}

html.video-app-fullscreen .video-player-body,
html.video-app-fullscreen .video-player,
body.video-app-fullscreen .video-player-body,
body.video-app-fullscreen .video-player{
  background:#000 !important;
}

html.video-app-fullscreen .video-player,
body.video-app-fullscreen .video-player{
  width:100% !important;
  max-width:100% !important;
  max-height:calc(100vh - 220px - env(safe-area-inset-bottom, 0px)) !important;
  min-height:0 !important;
  object-fit:contain !important;
}

html.video-app-fullscreen .player-bar,
body.video-app-fullscreen .player-bar{
  position:fixed !important;
  left:50% !important;
  bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  transform:translateX(-50%) !important;
  width:min(92vw, 560px) !important;
  max-width:min(92vw, 560px) !important;
  margin:0 !important;
  z-index:10020 !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls{
  position:fixed !important;
  left:50% !important;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  max-width:calc(100vw - 24px) !important;
  margin:0 !important;
  z-index:10021 !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

html.video-app-fullscreen .player-bar,
body.video-app-fullscreen .player-bar,
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls,
html.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
body.video-app-fullscreen.fullscreen-video-ui-visible .player-bar,
html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) !important;
}


/* FIX v53.223: compact video control row, hide disabled video buttons, and preserve fullscreen toggling on desktop/mobile */
.controls{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
.controls > [hidden],
.controls [hidden],
.controls > .video-inline-select-wrap[hidden],
.controls > .video-inline-btn[hidden],
html.video-app-fullscreen .controls > [hidden],
body.video-app-fullscreen .controls > [hidden],
html.video-app-fullscreen .controls [hidden],
body.video-app-fullscreen .controls [hidden],
html.video-app-fullscreen .controls > .video-inline-select-wrap[hidden],
body.video-app-fullscreen .controls > .video-inline-select-wrap[hidden],
html.video-app-fullscreen .controls > .video-inline-btn[hidden],
body.video-app-fullscreen .controls > .video-inline-btn[hidden]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls,
html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
html.video-app-fullscreen #videoInlineQualityWrap,
body.video-app-fullscreen #videoInlineQualityWrap,
html.video-app-fullscreen #videoInlineAudioTrackWrap,
body.video-app-fullscreen #videoInlineAudioTrackWrap,
html.video-app-fullscreen #videoInlineQualityWrap[hidden],
body.video-app-fullscreen #videoInlineQualityWrap[hidden],
html.video-app-fullscreen #videoInlineAudioTrackWrap[hidden],
body.video-app-fullscreen #videoInlineAudioTrackWrap[hidden]{
  margin: 0 !important;
}


/* FIX v53.224: real fullscreen toggle on desktop/mobile and compact video button row without gaps */
#videoInlineQualityWrap,
#videoInlineAudioTrackWrap,
#videoInlineQualityWrap[hidden],
#videoInlineAudioTrackWrap[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  flex:0 0 0 !important;
}

.controls{
  width:auto !important;
  max-width:none !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
}

.controls > button,
.controls > .video-inline-btn,
.controls > .video-inline-select-wrap{
  flex:0 0 auto !important;
}

html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls,
html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  width:auto !important;
  max-width:none !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
}


/* 53.225: стабильный полноэкранный режим на appContainer и компактный нижний ряд кнопок без пустот */
#videoInlineQualityWrap,
#videoInlineQualityWrap[hidden],
#videoInlineAudioTrackWrap,
#videoInlineAudioTrackWrap[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  flex:0 0 0 !important;
}

#videoInlineFullscreenBtn,
#videoCloseBtn{
  position:relative !important;
  z-index:10032 !important;
  pointer-events:auto !important;
  margin:0 !important;
}

.controls{
  display:flex !important;
  width:max-content !important;
  max-width:calc(100vw - 24px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
}

.controls > button,
.controls > .video-inline-btn,
.controls > .video-inline-select-wrap{
  flex:0 0 auto !important;
  margin:0 !important;
}

.controls > [hidden],
.controls [hidden],
.controls > .video-inline-select-wrap[hidden],
.controls > .video-inline-btn[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  flex:0 0 0 !important;
}

html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls,
html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  width:max-content !important;
  max-width:calc(100vw - 24px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
}


/* 53.229: final active fullscreen row override. This block is kept last on purpose so it wins over older duplicated fullscreen rules. */
#videoInlineQualityWrap,
#videoInlineAudioTrackWrap,
#videoInlineQualityWrap[hidden],
#videoInlineAudioTrackWrap[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  position:absolute !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  flex:0 0 0 !important;
}

.controls,
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls,
html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  display:flex !important;
  width:max-content !important;
  max-width:calc(100vw - 24px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  column-gap:12px !important;
}

.controls::before,
.controls::after,
html.video-app-fullscreen .controls::before,
html.video-app-fullscreen .controls::after,
body.video-app-fullscreen .controls::before,
body.video-app-fullscreen .controls::after{
  content:none !important;
  display:none !important;
}

.controls > button,
.controls > .video-inline-btn,
.controls > .video-inline-select-wrap,
html.video-app-fullscreen .controls > button,
html.video-app-fullscreen .controls > .video-inline-btn,
html.video-app-fullscreen .controls > .video-inline-select-wrap,
body.video-app-fullscreen .controls > button,
body.video-app-fullscreen .controls > .video-inline-btn,
body.video-app-fullscreen .controls > .video-inline-select-wrap{
  flex:0 0 auto !important;
  margin:0 !important;
}

#videoInlineFullscreenBtn,
#videoCloseBtn{
  position:relative !important;
  z-index:10032 !important;
  pointer-events:auto !important;
}


/* 53.230: active fullscreen button fix, compact video controls row, and track-sheet-safe z-order */
.controls button:focus,
.controls button:focus-visible,
.video-inline-btn:focus,
.video-inline-btn:focus-visible{
  pointer-events:auto !important;
  cursor:pointer !important;
  outline:none !important;
  box-shadow:none !important;
}

#videoInlineQualityWrap,
#videoInlineAudioTrackWrap,
#videoInlineQualityWrap[hidden],
#videoInlineAudioTrackWrap[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  position:absolute !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  flex:0 0 0 !important;
}

.controls,
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls,
html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  display:flex !important;
  width:max-content !important;
  max-width:calc(100vw - 24px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  column-gap:12px !important;
  row-gap:12px !important;
}

.controls > button,
.controls > .video-inline-btn,
.controls > .video-inline-select-wrap,
html.video-app-fullscreen .controls > button,
html.video-app-fullscreen .controls > .video-inline-btn,
html.video-app-fullscreen .controls > .video-inline-select-wrap,
body.video-app-fullscreen .controls > button,
body.video-app-fullscreen .controls > .video-inline-btn,
body.video-app-fullscreen .controls > .video-inline-select-wrap{
  flex:0 0 auto !important;
  margin:0 !important;
}

.controls > [hidden],
.controls [hidden],
.controls > .video-inline-select-wrap[hidden],
.controls > .video-inline-btn[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  flex:0 0 0 !important;
}

#videoInlineFullscreenBtn,
#videoCloseBtn{
  position:relative !important;
  z-index:auto !important;
  pointer-events:auto !important;
  margin:0 !important;
}

html.tracks-open #videoInlineFullscreenBtn,
body.tracks-open #videoInlineFullscreenBtn,
html.tracks-open #videoCloseBtn,
body.tracks-open #videoCloseBtn{
  z-index:1 !important;
}

/* 53.231: final fullscreen + compact video row override */
#videoInlineQualityWrap,
#videoInlineAudioTrackWrap,
#videoInlineQualityWrap[hidden],
#videoInlineAudioTrackWrap[hidden],
#repeatBtn[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  flex:0 0 0 !important;
}

.controls,
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls,
html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  width:max-content !important;
  max-width:calc(100vw - 24px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  gap:12px !important;
  column-gap:12px !important;
  row-gap:12px !important;
}

.controls > button,
.controls > .video-inline-btn,
.controls > .video-inline-select-wrap,
html.video-app-fullscreen .controls > button,
html.video-app-fullscreen .controls > .video-inline-btn,
html.video-app-fullscreen .controls > .video-inline-select-wrap,
body.video-app-fullscreen .controls > button,
body.video-app-fullscreen .controls > .video-inline-btn,
body.video-app-fullscreen .controls > .video-inline-select-wrap{
  flex:0 0 auto !important;
  margin:0 !important;
}

#videoInlineFullscreenBtn,
#videoCloseBtn{
  position:relative !important;
  z-index:auto !important;
  pointer-events:auto !important;
  margin:0 !important;
}

/* 53.232: final fullscreen + compact video controls override.
   Держит одинаковый зазор между оставшимися кнопками,
   полностью скрывает repeat/quality/audio в видеорежиме,
   и выравнивает fullscreen layout для ПК и мобильных браузеров. */
#videoInlineQualityWrap,
#videoInlineAudioTrackWrap,
#videoInlineQualityWrap[hidden],
#videoInlineAudioTrackWrap[hidden],
.controls > #repeatBtn[hidden],
.controls > #videoInlineQualityWrap,
.controls > #videoInlineAudioTrackWrap{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  position:absolute !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  flex:0 0 0 !important;
}

.controls,
html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls,
html.video-app-fullscreen.fullscreen-video-ui-visible .controls,
body.video-app-fullscreen.fullscreen-video-ui-visible .controls{
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  width:-moz-fit-content !important;
  width:fit-content !important;
  max-width:calc(100vw - 24px) !important;
  margin:0 auto !important;
  padding:0 !important;
  gap:12px !important;
  column-gap:12px !important;
  row-gap:12px !important;
}

.controls > button,
.controls > .video-inline-btn,
.controls > .video-inline-select-wrap,
html.video-app-fullscreen .controls > button,
html.video-app-fullscreen .controls > .video-inline-btn,
html.video-app-fullscreen .controls > .video-inline-select-wrap,
body.video-app-fullscreen .controls > button,
body.video-app-fullscreen .controls > .video-inline-btn,
body.video-app-fullscreen .controls > .video-inline-select-wrap{
  flex:0 0 auto !important;
  margin:0 !important;
}

#videoInlineFullscreenBtn,
#videoCloseBtn,
html.video-app-fullscreen #videoInlineFullscreenBtn,
html.video-app-fullscreen #videoCloseBtn,
body.video-app-fullscreen #videoInlineFullscreenBtn,
body.video-app-fullscreen #videoCloseBtn{
  position:relative !important;
  inset:auto !important;
  margin:0 !important;
  pointer-events:auto !important;
}

html.video-app-fullscreen,
body.video-app-fullscreen{
  background:#000 !important;
}

html.video-app-fullscreen .player-bar,
body.video-app-fullscreen .player-bar{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(92vw, 560px) !important;
  max-width:min(92vw, 560px) !important;
}

html.video-app-fullscreen .controls,
body.video-app-fullscreen .controls{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
}

@media (orientation: portrait){
  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player{
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100vh - 220px - env(safe-area-inset-bottom, 0px)) !important;
    object-fit:contain !important;
  }
}

@media (orientation: landscape){
  html.video-app-fullscreen .video-player,
  body.video-app-fullscreen .video-player{
    width:min(92vw, 980px) !important;
    max-width:min(92vw, 980px) !important;
    max-height:calc(100vh - 172px - env(safe-area-inset-bottom, 0px)) !important;
    object-fit:contain !important;
  }
  html.video-app-fullscreen .player-bar,
  body.video-app-fullscreen .player-bar{
    width:min(72vw, 560px) !important;
    max-width:min(72vw, 560px) !important;
  }
}

/* v137.53.301 mobile video mode: remove extra dead space under the video shell */
@media (max-width: 768px), (pointer: coarse){
  body.video-player-active #videoPlayerShell.video-player-shell:not(.hidden),
  body.video-player-active .video-player-shell:not(.hidden){
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }
}

/* v22.23 MOBILE VOLUME BOOT STABILITY
   Native mobile Chromium can rasterize a disabled range at zero during the invisible
   View-Transition warm-up. Preserve layout but keep the range hidden until app.js has
   re-applied the canonical 50% value and the mobile VT preparation is complete. */
/* v22.26 MOBILE VOLUME FIRST-PAINT STABILITY
   Keep the real volume range visible continuously; app.js initializes it to 50% synchronously. */
html.jukebox-theme-env-mobile-browser #volumeBar,
html.jukebox-theme-env-telegram-webview:not(.jukebox-theme-desktop-webview-host) #volumeBar{
  visibility: visible !important;
}