/* style.css */
/*
  JUKEBOX styles.
  - TON/GATE mode buttons
  - Tracks overlay + fixed Tracks button + fixed Search
  - Tracks list fills screen and covers UI beneath
  - Track items as separate rounded buttons with gaps
  - Theme wave restored + anti-flicker
  - FIX: tracks panel top sticks to SEARCH (not Tracks button)
  - FIX: no horizontal "jump" when opening/closing (scrollbar compensation in JS)
  - FIX: no blink/jump from :active transform conflicts
  - Smoother/longer open animation
  - iOS SHEET MODE:
      #tracksToggle is ALWAYS position:fixed; only translateY changes.
  - Smooth blur overlay in/out (opacity + backdrop-filter), no display toggles.
  - FIXES:
      * Tracks chevron inverted (closed=UP, open=DOWN)
      * Remove system clear "x" in search input (Safari/iOS/Chrome)
      * Dark theme: controls icons not black
      * Dark theme: now playing text not black
      * Fix theme-wave blink for btn-icon + now-playing-inner
      * Dark theme: pending-track visible (grey) while scanning
      * ✅ Playlists chevron: closed=DOWN, open=UP (отдельный класс)
      * ✅ Theme wave: не прятать клон контейнера (иначе "заливка" экрана)
      * ✅ Playlists menu: без своей подложки, только blur фона (как у Tracks)
      * ✅ FIX: ширина пунктов плейлистов = ширине кнопки Playlists (без внутренних inset)
      * ✅ NEW: “collision / bounce” feel for Tracks items (staggered settle)
*/

/* ========================= */
/* BASE (LIGHT) */
/* ========================= */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f6f9;
    color: #222;

    /* -------------------------
       iOS-sheet переменные.
       JS может переопределять высоты кнопки/поиска через measureTracksHeights()
       ------------------------- */
    --tracks-top: 12px;
    --tracks-side: 12px;
    --tracks-bottom: 12px;
    --safe-b: env(safe-area-inset-bottom, 0px);

    /* скорость анимации открытия/закрытия */
    --tracks-open-ms: 320ms;
    --tracks-close-ms: 190ms;

    /* кривые easing для "пружинки" */
    --tracks-bounce: cubic-bezier(0.20, 1.25, 0.30, 1);
    --tracks-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* высоты: по умолчанию, но JS перезапишет после измерения */
    --tracks-btn-h: 50px;     /* overwritten by JS */
    --tracks-search-h: 56px;  /* overwritten by JS */
    --tracks-gap: 12px;

    /* вход панели/поиска снизу (чтобы выезжало мягко) */
    --tracks-panel-in: 18px;

    /* переменные для drag закрытия */
    --tracks-drag-dy: 0px;
    --tracks-drag-opacity: 1;

    /*
      Closed Y:
      Кнопка фиксирована сверху (top: --tracks-top)
      В закрытом состоянии она должна "уехать" вниз, чтобы оказаться у низа экрана.

      translateY = (viewportHeight - top - bottom - safeArea - btnHeight)

      Используем 100dvh (стабильнее на мобилках).
    */
    --tracks-closed-y: calc((100dvh - var(--tracks-top) - var(--tracks-bottom) - var(--safe-b)) - var(--tracks-btn-h));

    /* Текущее целевое Y (по умолчанию закрыто) */
    --tracks-ty: var(--tracks-closed-y);

    /* ✅ NEW: чуть более “пружинный” въезд пунктов списка */
    --tracks-item-in-y: 16px;      /* стартовое смещение li вниз */
    --tracks-item-in-scale: 0.985; /* лёгкое “сжатие” перед “приземлением” */
    --tracks-item-ms: 420ms;       /* длительность “отскока” li */
    --tracks-item-opacity-ms: 220ms;
}

.container {
    max-width: 500px;
    margin: 0 auto;
    padding: 12px;
    display: flex;
    flex-direction: column;

    /* -------------------------
       Резервируем место снизу, чтобы фиксированная кнопка TRACKS
       никогда не перекрывала контент.
       ------------------------- */
    padding-bottom: calc(12px + var(--tracks-btn-h) + 12px + var(--safe-b));
}

/* когда tracks открыт: запрещаем scroll страницы (JS ещё добавляет padding-right под scrollbar) */
body.tracks-open {
    overflow: hidden;

    /* iOS sheet: в открытом состоянии кнопка всегда у top */
    --tracks-ty: 0px;
}

/* когда закрываем: плавно возвращаем кнопку вниз */
body.tracks-closing{
    --tracks-ty: var(--tracks-closed-y);
}

/* ========================= */
/* HEADER */
/* ========================= */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 22px 0;
}

.site-title {
    flex: 1;
    text-align: center;
    font-weight: 900;
    font-size: 40px;
    margin: 2;
    letter-spacing: 0;
}

/* убираем межбуквенный зазор между JUKE и BOX */




/* мобилка: бейдж чуть компактнее */
@media (max-width: 480px){
  .site-title 
}

/* кнопки языка/темы */
.lang-btn,
.theme-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #ffffff;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 900;
    color: #000;

    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                transform 0.08s ease;

    -webkit-tap-highlight-color: transparent;
    outline: none;

    -webkit-appearance: none;
    appearance: none;
    user-select: none;

    padding: 0;
    line-height: 1;
}

.lang-btn { font-size: 14px; }
.theme-btn { font-size: 16px; }

/* active "оранжевый" */
.lang-btn:active,
.theme-btn:active {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
    transform: scale(0.93);
}

/* убираем дефолтные focus-обводки */
.lang-btn:focus,
.lang-btn:focus-visible,
.theme-btn:focus,
.theme-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ========================= */
/* MODE SWITCH (TON / GATE) */
/* ========================= */

.mode-switch{
    display: flex;
    gap: 10px;
    margin: 0 0 10px 0;
}

.mode-btn{
    flex: 1 1 0;
    height: 44px;

    border-radius: 8px;
    border: 1px solid #ccc;
    background: #ffffff;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.4px;

    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;

    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                transform 0.08s ease;
}

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

/* активный режим — всегда оранжевый */
.mode-btn.active{
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
}

/* ========================= */
/* NOW PLAYING */
/* ========================= */

.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;
}

/* ✅ FIX: визуальный “padding” от краёв (не ломая JS-замеры)
   Мы накрываем края фоном самого блока, чтобы текст не лип к границе. */
.now-playing::before,
.now-playing::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;                 /* ✅ величина “внутреннего отступа” */
    background: inherit;         /* берём фон .now-playing (и в dark тоже) */
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;                  /* поверх текста */
}
.now-playing::before{ left: 0; }
.now-playing::after{ right: 0; }

/* ✅ FIX: чтобы текст был под “масками” и анимация работала */
.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;
}

/* spacer отключён (оставлено на случай старых вариантов) */
.now-playing-spacer { display: none !important; }

/* ✅ Now Playing: centered ping-pong (ездит и влево и вправо) */
@keyframes nowPlayingPingPong {
    0%   { transform: translateX(var(--np-scroll-shift)); }
    50%  { transform: translateX(calc(var(--np-scroll-shift) * -1)); }
    100% { transform: translateX(var(--np-scroll-shift)); }
}

.now-playing-inner.scroll {
    /* JS задаёт --np-scroll-left = overflow.
       Делаем симметрию от центра + добавляем запас, чтобы край точно показался. */
    --np-scroll-shift: calc((var(--np-scroll-left, 0px) / 2) + 20px);

    animation: nowPlayingPingPong 6s ease-in-out infinite;
    will-change: transform;
}

/* ========================= */
/* CUSTOM PLAYER BAR */
/* ========================= */

.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: transparent;
}

/* кнопки play/pause, mute */
.player-btn {
    width: 44px;
    height: 44px;
    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;
}

/* SVG внутри player-btn */
.player-btn .icon-svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: #000;
    flex: 0 0 auto;
}

/* в тёмной теме иконки белые */
body.dark .player-btn .icon-svg { fill: #fff; }

/* не анимируем fill SVG при theme-wave (убирает мерцания) */
.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 */
.seek-bar {
    flex: 1 1 auto;
    min-width: 0;
    height: 6px;
    accent-color: #ff8c00;
}

/* громкость */
.volume-bar {
    flex: 0 0 auto;
    height: 6px;
    accent-color: #ff8c00;
    width: min(120px, 34vw);
    max-width: 140px;
}

/* ========================= */
/* CONTROLS */
/* ========================= */

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

/* круглые кнопки prev/shuffle/next */
.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;

    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                transform 0.08s ease;

    -webkit-tap-highlight-color: transparent;
    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;
}

/* shuffle отдельно (для темной темы есть fix ниже) */
#shuffleBtn { background-color: #ffffff; border-color: #ccc; }

/* иконки внутри controls */
.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;
}

.controls button:hover { background-color: #e6e6e6; }

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

/* shuffle active */
#shuffleBtn.active {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
}
#shuffleBtn.active .btn-icon { color: #ffffff !important; }

/* выравнивание символов */
#prevBtn .btn-icon { transform: translateX(-2.5px); }
#nextBtn .btn-icon { transform: translateX(2.5px); }
#shuffleBtn .btn-icon { transform: translateY(-2px); }

/* ========================= */
/* NOTICE LINE */
/* ========================= */

#noticeLine {
    min-height: 18px;
    margin: 60px 0 4px 0;
    text-align: center;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;

    color: #8c8c8c;

    user-select: none;
    pointer-events: none;
    transition: none !important;
}

/* ========================= */
/* TRACKS BUTTON */
/* ========================= */

.tracks-toggle {
    width: 100%;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 14px;
    box-sizing: border-box;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 16px;
    font-weight: 700;
    color: #222;

    cursor: pointer;
    margin-bottom: 10px;

    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                transform 0.08s ease;

    -webkit-tap-highlight-color: transparent;
    outline: none;

    -webkit-appearance: none;
    appearance: none;
    user-select: none;
}

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

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

/* -----------------------------------------
   СТРЕЛКА НА КНОПКЕ ТРЕКИ
   Требование: закрыто = вверх, открыто = вниз
   (мы не меняем символ, а просто вращаем)
----------------------------------------- */
.tracks-chevron {
    font-size: 14px;
    transition: transform 0.2s ease;

    /* закрыто: внизовый "▼" превращаем во "▲" */
    transform: rotate(180deg);
}

.tracks-toggle.open .tracks-chevron {
    /* открыто: снова "▼" */
    transform: rotate(0deg);
}

/* ========================= */
/* TRACKS OVERLAY (SMOOTH BLUR IN/OUT) */
/* ========================= */

/* -----------------------------------------
   ВАЖНО:
   Мы НЕ используем display:none, иначе блюр "дергается".
   Вместо этого: opacity + pointer-events + backdrop-filter.
----------------------------------------- */
.tracks-overlay{
    position: fixed;
    inset: 0;
    z-index: 1499;

    opacity: 0;
    pointer-events: none;

    background: rgba(0,0,0,0.00);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    transition:
      opacity 170ms linear,
      background-color 170ms linear,
      backdrop-filter 220ms ease-out,
      -webkit-backdrop-filter 220ms ease-out;

    will-change: opacity, backdrop-filter;
}

/* открыто — плавно появляется */
body.tracks-open .tracks-overlay{
    opacity: 1;
    pointer-events: auto;

    background: rgba(0,0,0,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* закрываем — плавно исчезает */
body.tracks-closing .tracks-overlay{
    opacity: 0;
    pointer-events: none;

    background: rgba(0,0,0,0.00);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    transition:
      opacity var(--tracks-close-ms) linear,
      background-color var(--tracks-close-ms) linear,
      backdrop-filter var(--tracks-close-ms) ease-out,
      -webkit-backdrop-filter var(--tracks-close-ms) ease-out;
}

/* тёмная тема — фон сильнее */
body.dark .tracks-overlay{
    background: rgba(0,0,0,0.00);
}
body.dark.tracks-open .tracks-overlay{
    background: rgba(0,0,0,0.38);
}

/* во время drag — следуем за жестом */
body.tracks-open.tracks-dragging .tracks-overlay{
    opacity: var(--tracks-drag-opacity);
    backdrop-filter: blur(calc(10px * var(--tracks-drag-opacity)));
    -webkit-backdrop-filter: blur(calc(10px * var(--tracks-drag-opacity)));
}
body.dark.tracks-open.tracks-dragging .tracks-overlay{
    background: rgba(0,0,0, calc(0.38 * var(--tracks-drag-opacity)));
}
body:not(.dark).tracks-open.tracks-dragging .tracks-overlay{
    background: rgba(0,0,0, calc(0.12 * var(--tracks-drag-opacity)));
}

/* по умолчанию скрыты */
.track-search-top{ display: none; }
.tracks-panel{ display: none; }

/* ========================= */
/* TRACK LIST AS BUTTONS */
/* ========================= */

ul#tracks {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 8px;

    width: 100%;
    box-sizing: border-box;
}

ul#tracks li {
    padding: 14px;
    background-color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 17px;
    text-align: center;
    transition: background-color 0.2s ease;

    -webkit-tap-highlight-color: transparent;

    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    border: 1px solid #eee;

    width: 100%;
    box-sizing: border-box;
}

ul#tracks li:hover { background-color: #e6e6e6; }

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

/* активный трек (уже играет) */
ul#tracks li.active-track {
    background-color: #ff8c00;
    color: #ffffff;
    border-color: #ff8c00;
}

/* pending трек (сканирование/поиск bag) */
ul#tracks li.pending-track {
    background-color: #e6e6e6;
    color: #222;
}

/* ✅ ВАЖНО: pending должен быть виден и в dark */
body.dark ul#tracks li.pending-track {
    background-color: #3a3c42;
    border-color: #3a3c42;
    color: #f1f1f1;
}

ul#tracks li .track-artist,
ul#tracks li .track-title {
    display: block;
    line-height: 1.15;

    /* контейнер линии */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* оставляем центр как было (центр задаёт li) */
    box-sizing: border-box;
}

/* когда линия реально скроллится — убираем "..." */
ul#tracks li .track-artist.scrolling,
ul#tracks li .track-title.scrolling{
    text-overflow: clip;
}

/* внутренний текст — именно его двигаем */
ul#tracks li .track-text{
    display: inline-block;
    padding: 0 2px;          /* чтобы крайние символы не резались визуально */
    will-change: transform;
}

/* Едем только ВЛЕВО до самого конца, потом назад */
@keyframes trackMarquee {
    0%   { transform: translateX(0px); }
    50%  { transform: translateX(calc(var(--scroll-left) * -1)); }
    100% { transform: translateX(0px); }
}

ul#tracks li .track-text.scroll{
    animation: trackMarquee 6s ease-in-out infinite;
}

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

/* ========================= */
/* ✅ NEW: TRACKS LIST “COLLISION / BOUNCE” STAGGER */
/* ========================= */
/* Идея:
   - Search/Panel у тебя уже выезжают.
   - Сами li при открытии: opacity 0 + чуть ниже + микроскейл.
   - Когда JS добавляет body.tracks-items-ready => li “приземляются”.
   - Задержки задаёт JS (transition-delay), создавая эффект “по очереди”. */

body.tracks-open #tracks li{
  opacity: 0;

  /* ✅ было: translateY(12px)
     стало: чуть сильнее и с микроскейлом (ощущение “столкновения/отскока”) */
  transform: translate3d(0, var(--tracks-item-in-y), 0) scale(var(--tracks-item-in-scale));

  transition:
    transform var(--tracks-item-ms) var(--tracks-bounce),
    opacity var(--tracks-item-opacity-ms) linear,
    background-color 0.2s ease;

  will-change: transform, opacity;
}

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

/* на закрытии убираем “лесенку”, чтобы не мигало */
body.tracks-closing #tracks li{
  transition-delay: 0ms !important;
}

/* уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  body.tracks-open #tracks li,
  body.tracks-open.tracks-items-ready #tracks li{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ========================= */
/* PLAYLIST DROPDOWN */
/* ========================= */

.dropdown-wrap {
    position: relative;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* ✅ Основная кнопка плейлистов — 100% ширины контейнера */
#playlistsToggle{
    width: 100%;
    box-sizing: border-box;

    position: relative;   /* создаём stacking context */
    z-index: 1402;        /* выше blur overlay и панели */
}

/* -----------------------------------------
   ✅ PLAYLISTS OVERLAY = как у Tracks
   - без display:none
   - плавный blur in/out
   - клики ловим только когда open
----------------------------------------- */
.dropdown-overlay {
    position: fixed;
    inset: 0;

    /* ниже tracksOverlay и ниже tracksPanel, но выше UI */
    z-index: 1398;

    opacity: 0;
    pointer-events: none;

    background: rgba(0,0,0,0.00);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    transition:
      opacity 170ms linear,
      background-color 170ms linear,
      backdrop-filter 220ms ease-out,
      -webkit-backdrop-filter 220ms ease-out;

    will-change: opacity, backdrop-filter;
}

/* открыто — плавно появляется (точно как у Tracks) */
.dropdown-overlay.open {
    opacity: 1;
    pointer-events: auto;

    background: rgba(0,0,0,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* тёмная тема — фон сильнее (как у Tracks) */
body.dark .dropdown-overlay {
    background: rgba(0,0,0,0.00);
}
body.dark .dropdown-overlay.open {
    background: rgba(0,0,0,0.38);
}

/* -----------------------------------------
   ✅ PLAYLISTS PANEL
   Требование: убрать "подложку" (фон/бордер/тень),
   оставить только сами элементы списка.
   + ширина списка = ширине кнопки Playlists
----------------------------------------- */
.dropdown-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 58px;

    z-index: 1400;

    /* УБИРАЕМ подложку */
    background: transparent;
    border: none;
    box-shadow: none;

    max-height: 320px;
    overflow: auto;

    /* ✅ КЛЮЧ: никаких внутренних отступов, иначе элементы уже */
    padding: 0;
    box-sizing: border-box;

    opacity: 0;
    transform: translate3d(0, 10px, 0);
    pointer-events: none;

    transition:
      transform 220ms ease-out,
      opacity 170ms linear;

    will-change: transform, opacity;
}

.dropdown-panel.open {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
    pointer-events: auto;
}

/* ✅ КЛЮЧ: убираем padding у списка тоже, чтобы li были ровно по ширине кнопки */
.dropdown-list {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;

    width: 100%;
    box-sizing: border-box;

    align-items: stretch;
}

/* ✅ Пункты плейлистов — строго на всю ширину */
.dropdown-list li {
    padding: 14px;
    background-color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 17px;
    text-align: center;
    transition: background-color 0.2s ease;
    border: 1px solid #eee;

    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    display: block;
    width: 100%;
    box-sizing: border-box;
}

.dropdown-list li:hover { background-color: #e6e6e6; }

.dropdown-list li:active {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
}

.dropdown-list li.active-playlist {
    background-color: #ff8c00;
    border-color: #ff8c00;
    color: #ffffff;
}

/* FIX: активный плейлист в тёмной теме тоже должен быть оранжевым */
body.dark .dropdown-list li.active-playlist {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
}

/* -----------------------------------------
   СТРЕЛКА У ПЛЕЙЛИСТОВ (отдельный класс!)
   Требование: закрыто = вниз, открыто = вверх
----------------------------------------- */
.playlists-chevron{
    font-size: 14px;
    transition: transform 0.2s ease;
    transform: rotate(0deg);
}
#playlistsToggle.open .playlists-chevron{
    transform: rotate(180deg);
}

/* ========================= */
/* TRACK SEARCH */
/* ========================= */

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

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

.track-search {
    width: 100%;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 44px 12px 14px;
    box-sizing: border-box;

    font-size: 16px;
    font-weight: 700;
    color: #222;

    -webkit-appearance: none;
    appearance: none;
    outline: none;

    -webkit-tap-highlight-color: transparent;
}

.track-search::-webkit-search-cancel-button,
.track-search::-webkit-search-decoration,
.track-search::-webkit-search-results-button,
.track-search::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.track-search::-ms-clear,
.track-search::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

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

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

.track-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;

    display: none;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    color: #777;

    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;

    padding: 0;
}

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

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

/* ========================= */
/* DARK THEME */
/* ========================= */

body.dark {
    background-color: #1e1f23;
    color: #f1f1f1;
}

body.dark .now-playing,
body.dark .tracks-toggle,
body.dark .controls button,
body.dark ul#tracks li,
body.dark .dropdown-panel,
body.dark .dropdown-list li,
body.dark .lang-btn,
body.dark .theme-btn,
body.dark .track-search,
body.dark .player-bar,
body.dark .player-btn,
body.dark .mode-btn {
    background: #2a2c31;
    border-color: #3a3c42;
    color: #f1f1f1;
}

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

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

body.dark #shuffleBtn{
    background-color: #2a2c31;
    border-color: #3a3c42;
}

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

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 480px) {
    .site-title { font-size: 34px; }
    .now-playing-inner { font-size: 14px; }

    .controls { gap: 10px; }
    .controls button { width: 50px; height: 50px; }
    .btn-icon { font-size: 24px; }

    .tracks-toggle { font-size: 15px; padding: 14px 14px; }

    .track-search {
        font-size: 15px;
        padding: 14px 44px 14px 14px;
    }

    .header { margin: 6px 0 18px 0; }

    .player-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 10px;
    }

    .player-btn {
        width: 42px;
        height: 42px;
        font-size: 18px;
        flex: 0 0 auto;
    }

    .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; }
}

/* ========================= */
/* iOS SHEET TRACKS (ALWAYS FIXED BUTTON) */
/* ========================= */

#tracksToggle{
    position: fixed;
    top: var(--tracks-top);
    left: 50%;
    width: min(500px, calc(100vw - 24px));
    z-index: 1602;

    transform: translate3d(-50%, var(--tracks-ty), 0);
    transition: transform var(--tracks-open-ms) var(--tracks-bounce);
    will-change: transform;

    -webkit-tap-highlight-color: transparent;
}

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

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

body.tracks-open .track-search-top{
    display: block;

    position: fixed;
    left: 50%;
    width: min(500px, calc(100vw - 24px));
    top: calc(var(--tracks-top) + var(--tracks-btn-h) + 10px);
    z-index: 1601;

    transform: translate3d(-50%, var(--tracks-panel-in), 0);
    opacity: 0;

    transition:
      transform var(--tracks-open-ms) var(--tracks-bounce),
      opacity 160ms linear;
    will-change: transform, opacity;
}

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

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

body.tracks-open #tracksPanel{
    display: block;

    position: fixed;
    left: 50%;
    width: min(500px, calc(100vw - 24px));

    top: calc(var(--tracks-top) + var(--tracks-btn-h) + 10px + var(--tracks-search-h) + var(--tracks-gap));
    bottom: 0;
    overflow: auto;

    z-index: 1500;

    background: transparent;
    border: none;
    box-shadow: none;

    padding: 0;
    box-sizing: border-box;

    transform: translate3d(-50%, var(--tracks-panel-in), 0);
    opacity: 0;

    transition:
      transform var(--tracks-open-ms) var(--tracks-bounce),
      opacity 160ms linear;
    will-change: transform, opacity;
}

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

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

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

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

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

/* ========================= */
/* TELEGRAM-STYLE THEME WAVE */
/* ========================= */

.theme-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;

    clip-path: circle(0px at 0 0);
    -webkit-clip-path: circle(0px at 0 0);

    transition: clip-path 0.65s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: clip-path;

    isolation: isolate;
}

.theme-transition-scope { position: fixed; inset: 0; }

.theme-transition-clone {
    max-width: 500px;
    margin: 0 auto;
    padding: 12px;
    pointer-events: none;
}

.theme-transition-overlay .light-scope,
.theme-transition-overlay .dark-scope { min-height: 100vh; }

.theme-transition-overlay .dark-scope {
    background-color: #1e1f23 !important;
    color: #f1f1f1 !important;
}

.theme-transition-overlay .dark-scope .now-playing,
.theme-transition-overlay .dark-scope .tracks-toggle,
.theme-transition-overlay .dark-scope .controls button,
.theme-transition-overlay .dark-scope ul#tracks li,
.theme-transition-overlay .dark-scope .dropdown-panel,
.theme-transition-overlay .dark-scope .dropdown-list li,
.theme-transition-overlay .dark-scope .lang-btn,
.theme-transition-overlay .dark-scope .theme-btn,
.theme-transition-overlay .dark-scope .track-search,
.theme-transition-overlay .dark-scope .track-search-clear,
.theme-transition-overlay .dark-scope .player-bar,
.theme-transition-overlay .dark-scope .player-btn,
.theme-transition-overlay .dark-scope .player-time,
.theme-transition-overlay .dark-scope .mode-btn {
    background: #2a2c31 !important;
    border-color: #3a3c42 !important;
    color: #f1f1f1 !important;
}

.theme-transition-overlay .light-scope {
    background-color: #f4f6f9 !important;
    color: #222 !important;
}

.theme-transition-overlay .light-scope .now-playing,
.theme-transition-overlay .light-scope .tracks-toggle,
.theme-transition-overlay .light-scope .controls button,
.theme-transition-overlay .light-scope ul#tracks li,
.theme-transition-overlay .light-scope .dropdown-panel,
.theme-transition-overlay .light-scope .dropdown-list li,
.theme-transition-overlay .light-scope .lang-btn,
.theme-transition-overlay .light-scope .theme-btn,
.theme-transition-overlay .light-scope .track-search,
.theme-transition-overlay .light-scope .track-search-clear,
.theme-transition-overlay .light-scope .player-bar,
.theme-transition-overlay .light-scope .player-btn,
.theme-transition-overlay .light-scope .player-time,
.theme-transition-overlay .light-scope .mode-btn {
    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 .mode-btn.active,
.theme-transition-overlay .light-scope .mode-btn.active{
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
}
.theme-transition-overlay .dark-scope #shuffleBtn.active,
.theme-transition-overlay .light-scope #shuffleBtn.active{
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
}
.theme-transition-overlay .dark-scope #shuffleBtn.active .btn-icon,
.theme-transition-overlay .light-scope #shuffleBtn.active .btn-icon{
    color: #ffffff !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;
}

body.theme-freeze .container,
body.theme-freeze .container * {
    transition: none !important;
}

/* ========================= */
/* FIX: PLAYLISTS panel transparent in DARK + keep toggle above blur */
/* ========================= */

body.dark .dropdown-panel{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* wrap держим выше overlay, чтобы меню было кликабельным */
.dropdown-wrap{
    position: relative;
    z-index: 1402;
}

/* ========================= */
/* FIX: Playlists open => Tracks button goes under blur overlay */
/* ========================= */

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

/* ========================= */
/* FIX: ACTIVE states (Tracks vs Playlists) */
/* ========================= */

/* --- Tracks: НЕ оранжевый --- */
.tracks-toggle:active{
  transform: scale(0.99);
  background-color: #ffffff !important;
  border-color: #ddd !important;
  color: #222 !important;
}
body.dark .tracks-toggle:active{
  background-color: #2a2c31 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

#tracksToggle{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
}

/* --- Playlists: ОРАНЖЕВЫЙ active --- */
#playlistsToggle{
  width: 100% !important;
  box-sizing: border-box !important;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
}

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

/* ========================= */
/* FIX: PLAYLIST ITEMS WIDTH = playlists button width */
/* ========================= */

.dropdown-wrap{
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

.dropdown-panel{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  padding: 0 !important;
  box-sizing: border-box !important;
}

.dropdown-list{
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  align-items: stretch !important;
}

.dropdown-list li{
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

body.dark .dropdown-panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ========================= */
/* FIX: NOW PLAYING padding + stronger left scroll */
/* (ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css) */
/* ========================= */

/* 1) Больше внутреннего пространства внутри поля "Now Playing" */
.now-playing{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* чтобы текст не упирался в край даже при скролле */
.now-playing-inner{
  max-width: 100%;
  padding: 0 6px;           /* небольшой доп. внутренний отступ у самого текста */
  box-sizing: border-box;
}

/* 2) Скролл сильнее влево: добавляем запас, чтобы конец строки точно показался */
@keyframes nowPlayingPingPongStronger {
  0%   { transform: translate3d(0px, 0, 0); }
  50%  { transform: translate3d(calc((var(--np-scroll-left, 0px) + 34px) * -1), 0, 0); }
  100% { transform: translate3d(0px, 0, 0); }
}

/* перебиваем любые старые анимации now-playing */
.now-playing-inner.scroll{
  animation: nowPlayingPingPongStronger 6s ease-in-out infinite !important;
  will-change: transform;
}

/* ========================= */
/* FIX: ACTIVE TRACK ORANGE IN DARK */
/* ========================= */

/* Тап по треку — оранжевый (как в light), и в dark тоже */
body.dark ul#tracks li:active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}

/* Играющий трек — всегда оранжевый (важнее любых body.dark ul#tracks li {...}) */
body.dark ul#tracks li.active-track{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}

/* Чтобы pending не “перетягивался” в оранжевый случайно */
body.dark ul#tracks li.pending-track{
  background-color: #3a3c42 !important;
  border-color: #3a3c42 !important;
  color: #f1f1f1 !important;
}

/* ========================= */
/* JUKEBOX LOGO */
/* ========================= */

/* светлая тема */
body:not(.dark) 
body:not(.dark) 

/* тёмная тема */
body.dark 
body.dark 

/* ========================= */
/* JUKEBOX LOGO — HARD RESET */
/* (ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css) */
/* ========================= */

.site-title 

/* ========================= */
/* LOGO: JUKE + BOX badge */
/* ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css */
/* ========================= */

/* чтобы не было “пробела” и чтобы box не уезжал */
.site-title{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* 3) Цвета логотипа в обычном DOM */
body:not(.dark) .site-title 
body:not(.dark) .site-title 

body.dark .site-title 
body.dark .site-title 

/* 4) Цвета логотипа ВНУТРИ overlay (важно: тут у тебя было неверно!) */
.theme-transition-overlay .light-scope .site-title 
.theme-transition-overlay .light-scope .site-title 

.theme-transition-overlay .dark-scope  .site-title 
.theme-transition-overlay .dark-scope  .site-title 

/* 5) Анти-мерцание рендера (GPU слой для текста) */
.site-title,
.site-title 

/* ========================= */
/* THEME WAVE: prevent 1-frame flash WITHOUT breaking animation */
/* ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css */
/* ========================= */

/* Важно: БЕЗ !important — чтобы JS мог анимировать clip-path инлайном */
.theme-transition-overlay{
  clip-path: circle(0px at 50% 50%);
  -webkit-clip-path: circle(0px at 50% 50%);
}

/* помогаем композитингу (иногда убирает "вспышку" на iOS) */
.theme-transition-overlay,
.theme-transition-overlay .theme-transition-scope,
.theme-transition-overlay .theme-transition-clone{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Цвета текста */
body:not(.dark) .site-title 
body.dark       .site-title 

/* То же внутри theme-wave overlay */
.theme-transition-overlay .light-scope .site-title 
.theme-transition-overlay .dark-scope  .site-title 

/* ========================= */
/* FIX: Firefox range thumb shadow/appearance */
/* (ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css) */
/* ========================= */

/* Общий reset для range в FF */
.seek-bar,
.volume-bar{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* Firefox: трек */
.seek-bar::-moz-range-track,
.volume-bar::-moz-range-track{
  height: 6px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
}

/* Firefox: прогресс */
.seek-bar::-moz-range-progress,
.volume-bar::-moz-range-progress{
  height: 6px;
  border: none;
  border-radius: 999px;
  background: #ff8c00;
}

/* Firefox: кружок (thumb) — убираем тень/ореол */
.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;
}

/* Иногда FF рисует focus-обводку через -moz-focus-outer */
.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,
body.dark .volume-bar::-moz-range-track{
  background: rgba(255,255,255,0.22);
}

/* ========================= */
/* FIX: WebKit track (Edge / Chrome / Mobile) */
/* ========================= */

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

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

/* WebKit thumb */
.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;
}

/* ========================= */
/* FIX: range blink ONLY inside theme-wave overlay clone */
/* ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css */
/* ========================= */

/* Общие переменные цвета для клона */
.theme-transition-overlay .light-scope{
  --tw-range-track: rgba(0,0,0,0.18);
}
.theme-transition-overlay .dark-scope{
  --tw-range-track: rgba(255,255,255,0.22);
}

/* Сам range в клоне: фиксируем рендер, НЕ трогаем основной UI */
.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;
}

/* WebKit (Safari/Chrome/iOS) — чтобы в клоне не показывался дефолтный range */
.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;
}

/* Firefox — чтобы в клоне тоже не было дефолта */
.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;
}

/* ========================= */
/* FIX: range blink (dark -> light) by forcing color-scheme inside overlay */
/* ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css */
/* ========================= */

/* ВАЖНО: это влияет только на системные контролы внутри wave-клона */
.theme-transition-overlay .light-scope{
  color-scheme: light;
}
.theme-transition-overlay .dark-scope{
  color-scheme: dark;
}

/* Дублируем точечно для range (Safari/iOS иногда капризничает без этого) */
.theme-transition-overlay .light-scope input[type="range"],
.theme-transition-overlay .light-scope .seek-bar,
.theme-transition-overlay .light-scope .volume-bar{
  color-scheme: light;
}

.theme-transition-overlay .dark-scope input[type="range"],
.theme-transition-overlay .dark-scope .seek-bar,
.theme-transition-overlay .dark-scope .volume-bar{
  color-scheme: dark;
}

/* ========================= */
/* FIX: range blink ONLY on dark -> light theme-wave */
/* Причина: body.dark влияет на overlay-клон, пока идёт анимация */
/* ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css */
/* ========================= */

.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;
}

/* WebKit (Chrome/Safari/iOS/Edge) — ПЕРЕБИВАЕМ body.dark */
.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;
}

/* Firefox — ПЕРЕБИВАЕМ body.dark */
.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;
}

/* ========================= */
/* REPEAT (1 TRACK) BUTTON */
/* ========================= */

#repeatBtn .repeat-icon{
  font-weight: 900;      /* жирная R */
  font-size: 26px;       /* как у остальных иконок */
  line-height: 1;
}

/* repeat active = оранжевый фон, буква белая */
#repeatBtn.active{
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
}
#repeatBtn.active .btn-icon{
  color: #ffffff !important; /* белая буква и в light, и в dark */
}

.site-logo{
  height:34px;
  width:auto;
  display:block;
  margin:0 auto;
  color:#000;
}

body.dark .site-logo{
  color:#fff;
}

/* FIX: logo flicker during theme-wave */

.site-logo{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change: color;
}

/* внутри overlay клона тоже фиксируем */
.theme-transition-overlay .site-logo{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* FIX: logo color inside theme wave clone */

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

.theme-transition-overlay .dark-scope .site-logo{
  color:#fff !important;
}

/* === RANGE STABLE STYLE (timeline + volume) === */

/* убираем системный стиль */
.seek-bar,
.volume-bar{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

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

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

/* THUMB */
.seek-bar::-webkit-slider-thumb,
.volume-bar::-webkit-slider-thumb{
  -webkit-appearance:none;

  width:16px;
  height:16px;
  border-radius:50%;

  background:#ff8c00;
  border:none;

  margin-top:-5px;
  box-shadow:none;
}

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

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

/* Firefox progress (оранжевая часть) */
.seek-bar::-moz-range-progress,
.volume-bar::-moz-range-progress{
  height:6px;
  border-radius:999px;
  border:none;
  background:#ff8c00;
}

/* Firefox thumb */
.seek-bar::-moz-range-thumb,
.volume-bar::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  border:0;
  background:#ff8c00;
  box-shadow:none;
}