/* ====================================================================
 * [feature/timeline-modernize-preline] Современный preline.co-стиль
 * содержимого панели воспроизведения маршрута (.timeline-content).
 *
 * Цель — переработать «рабочую зону» панели (time slider, toolbar
 * с кнопками play/pause/forward/stop, и три stat-карточки —
 * время/скорость/дистанция) в единый preline-style soft layout,
 * вдохновлённый карточками Linear, Notion, shadcn/ui и
 * шаблонами preline.co «Player with controls / Stats».
 *
 * Что НЕ меняется (по требованию задачи):
 *   • .playback-toggle-handle (отдельный pill-handle сверху панели).
 *   • .timeline-header (свёрнутая шапка с time-chip / dot /
 *     mini-progress / collapse-button) — её стили остаются
 *     в preline-timeline-header.css.
 *
 * Что меняется:
 *   • .timeline-content           — контейнер с приличным
 *     внутренним ритмом и тонким top-divider.
 *   • #timeSlider / .time-slider  — современный range-инпут в
 *     духе preline «discrete brand slider» с большим пальцем,
 *     заполненной частью и soft-shadow.
 *   • #playerControls / .player-controls — мягкая «плита»-toolbar
 *     с pill-фоном и расставленными иконками; центральная кнопка
 *     Play выделена как primary action (заливка бренда).
 *   • #playButton / .player-button — переход от прозрачных кружков
 *     к мягким pill-icon-button в духе preline icon-btn.
 *   • .playback-stats             — три stat-card в духе preline
 *     «Card with stats / KPI cards»: тонкая граница, мягкая тень,
 *     иерархичная типографика (label uppercase tracking, value
 *     numerics), цветные иконки.
 *
 * Совместимость:
 *   • Все id и селекторы, к которым обращается app.js / trip.html,
 *     сохранены (#timeSlider, #playerControls, #playButton,
 *     #fastForwardButton, #stopButton, #followButton,
 *     #heatMapButton, #currentTimeDisplay, #averageSpeedDisplay,
 *     #distanceDisplay).
 *   • Классы .player-button и .player-button.active оставлены для
 *     JS, но внешний вид полностью переопределяется ниже.
 *   • В index.html / trip.html добавлены опциональные классы
 *     обёртки .tl-content-toolbar / .tl-content-slider / .tl-stats,
 *     которые используются ТОЛЬКО в этом файле. Если их нет,
 *     базовые стили всё равно работают (через прямые селекторы).
 * ==================================================================== */

/* ---------- Семантические токены ----------
   ЕДИНЫЙ dark-стиль для светлой и тёмной темы приложения.
   Панель воспроизведения — self-contained dark UI, который
   выглядит идентично при любой теме оформления (как в
   Spotify/Apple Music/YouTube Music). Значения полностью
   совпадают с .dark-theme ниже. */
:root {
    /* Контейнер содержимого панели */
    --tlc-surface-bg: rgba(15, 23, 42, 0.55);
    --tlc-surface-border: rgba(148, 163, 184, 0.16);
    --tlc-surface-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 18px 40px -22px rgba(0, 0, 0, 0.65);

    /* Slider */
    --tlc-slider-track: rgba(148, 163, 184, 0.22);
    --tlc-slider-fill: linear-gradient(90deg,
        #38bdf8 0%,
        #4ade80 100%);
    --tlc-slider-thumb-bg: #ffffff;
    --tlc-slider-thumb-ring: #38bdf8;
    --tlc-slider-thumb-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 0 5px rgba(56, 189, 248, 0.22);
    --tlc-slider-thumb-shadow-hover:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 0 8px rgba(56, 189, 248, 0.32);

    /* Toolbar / player-controls */
    --tlc-toolbar-bg: linear-gradient(135deg,
        rgba(15, 23, 42, 0.55) 0%,
        rgba(15, 23, 42, 0.35) 100%);
    --tlc-toolbar-border: rgba(148, 163, 184, 0.18);
    --tlc-toolbar-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 6px 18px -10px rgba(0, 0, 0, 0.55);

    /* Кнопки плеера (icon-btn) — единый slate-фон */
    --tlc-btn-bg: rgba(30, 41, 59, 0.7);
    --tlc-btn-border: rgba(148, 163, 184, 0.22);
    --tlc-btn-fg: #cbd5e1;
    --tlc-btn-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 1px 2px rgba(0, 0, 0, 0.35);
    --tlc-btn-shadow-hover:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 4px 14px -6px rgba(0, 0, 0, 0.5);

    /* Primary (Play) — выделенная кнопка */
    --tlc-btn-primary-bg: linear-gradient(135deg, #38bdf8 0%, #4ade80 100%);
    --tlc-btn-primary-fg: #0b1220;
    --tlc-btn-primary-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 6px 18px -6px rgba(56, 189, 248, 0.55);

    /* Active (включённый режим, например heat-map / follow) */
    --tlc-btn-active-bg: rgba(56, 189, 248, 0.18);
    --tlc-btn-active-border: rgba(56, 189, 248, 0.45);
    --tlc-btn-active-fg: #bae6fd;

    /* Stat-card (route-info-block) */
    --tlc-stat-bg: linear-gradient(135deg,
        rgba(15, 23, 42, 0.6) 0%,
        rgba(15, 23, 42, 0.4) 100%);
    --tlc-stat-border: rgba(148, 163, 184, 0.18);
    --tlc-stat-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 8px 20px -14px rgba(0, 0, 0, 0.5);
    --tlc-stat-shadow-hover:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 14px 30px -16px rgba(0, 0, 0, 0.6);
    --tlc-stat-label: #94a3b8;            /* slate-400 */
    --tlc-stat-value: #f1f5f9;            /* slate-100 */

    /* Иконка внутри stat-card */
    --tlc-stat-icon-time-bg: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
    --tlc-stat-icon-time-fg: #0b1220;
    --tlc-stat-icon-speed-bg: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    --tlc-stat-icon-speed-fg: #ffffff;
    --tlc-stat-icon-distance-bg: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
    --tlc-stat-icon-distance-fg: #0b1220;

    /* Tooltip для кнопок плеера */
    --tlc-tooltip-bg: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
    --tlc-tooltip-fg: #f8fafc;
}

/* ---------- Тёмная тема ---------- */
.dark-theme {
    --tlc-surface-bg: rgba(15, 23, 42, 0.55);
    --tlc-surface-border: rgba(148, 163, 184, 0.16);
    --tlc-surface-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 18px 40px -22px rgba(0, 0, 0, 0.65);

    --tlc-slider-track: rgba(148, 163, 184, 0.22);
    --tlc-slider-fill: linear-gradient(90deg,
        #38bdf8 0%,
        #4ade80 100%);
    --tlc-slider-thumb-bg: #ffffff;
    --tlc-slider-thumb-ring: #38bdf8;
    --tlc-slider-thumb-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 0 5px rgba(56, 189, 248, 0.22);
    --tlc-slider-thumb-shadow-hover:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 0 8px rgba(56, 189, 248, 0.32);

    --tlc-toolbar-bg: linear-gradient(135deg,
        rgba(15, 23, 42, 0.55) 0%,
        rgba(15, 23, 42, 0.35) 100%);
    --tlc-toolbar-border: rgba(148, 163, 184, 0.18);
    --tlc-toolbar-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 6px 18px -10px rgba(0, 0, 0, 0.55);

    --tlc-btn-bg: rgba(30, 41, 59, 0.7);
    --tlc-btn-border: rgba(148, 163, 184, 0.22);
    --tlc-btn-fg: #cbd5e1;
    --tlc-btn-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 1px 2px rgba(0, 0, 0, 0.35);
    --tlc-btn-shadow-hover:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 4px 14px -6px rgba(0, 0, 0, 0.5);

    --tlc-btn-primary-bg: linear-gradient(135deg, #38bdf8 0%, #4ade80 100%);
    --tlc-btn-primary-fg: #0b1220;
    --tlc-btn-primary-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 6px 18px -6px rgba(56, 189, 248, 0.55);

    --tlc-btn-active-bg: rgba(56, 189, 248, 0.18);
    --tlc-btn-active-border: rgba(56, 189, 248, 0.45);
    --tlc-btn-active-fg: #bae6fd;

    --tlc-stat-bg: linear-gradient(135deg,
        rgba(15, 23, 42, 0.6) 0%,
        rgba(15, 23, 42, 0.4) 100%);
    --tlc-stat-border: rgba(148, 163, 184, 0.18);
    --tlc-stat-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 8px 20px -14px rgba(0, 0, 0, 0.5);
    --tlc-stat-shadow-hover:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 14px 30px -16px rgba(0, 0, 0, 0.6);
    --tlc-stat-label: #94a3b8;
    --tlc-stat-value: #f1f5f9;

    --tlc-stat-icon-time-bg: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
    --tlc-stat-icon-time-fg: #0b1220;
    --tlc-stat-icon-speed-bg: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    --tlc-stat-icon-speed-fg: #ffffff;
    --tlc-stat-icon-distance-bg: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
    --tlc-stat-icon-distance-fg: #0b1220;
}

/* ====================================================================
 *  Единый dark-фон для контейнера .timeline-container
 *  Переопределяет светлый фон из style.css (rgba(255,255,255,0.95))
 *  чтобы панель выглядела одинаково в любой теме.
 * ==================================================================== */
.timeline-container {
    background-color: rgba(15, 23, 42, 0.92) !important;
    box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.timeline-container.collapsed {
    background-color: rgba(15, 23, 42, 0.95) !important;
}

/* ====================================================================
 *  Контейнер содержимого панели
 * ==================================================================== */
.timeline-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px 14px;
    box-sizing: border-box;
    background: var(--tlc-surface-bg);
    border-radius: 0 0 14px 14px;
    border-top: 1px solid var(--tlc-surface-border);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: var(--tlc-surface-shadow);
}

/* Скрытое состояние сохраняется существующим правилом в style.css
   (.timeline-container.collapsed .timeline-content { max-height: 0; ... }),
   но иначе анимируем сам opacity для плавности. */
.timeline-content {
    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease,
        max-height 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 280ms ease,
        padding 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ====================================================================
 *  Time slider — modernized
 *  (базовые правила для .time-slider уже есть в style.css —
 *   здесь переопределяем их под preline-стиль)
 * ==================================================================== */
.timeline-content .time-slider,
.tl-content-slider .time-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;                 /* место для большого пальца */
    line-height: 0;
    font-size: 0;
    padding: 0;
    margin: 4px 0 2px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

/* WebKit / Blink */
.timeline-content .time-slider::-webkit-slider-runnable-track,
.tl-content-slider .time-slider::-webkit-slider-runnable-track {
    height: 6px;
    border: none;
    border-radius: 999px;
    background:
        var(--tlc-slider-fill) 0 0 / var(--tlc-progress, 0%) 100% no-repeat,
        var(--tlc-slider-track);
    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.timeline-content .time-slider::-moz-range-track,
.tl-content-slider .time-slider::-moz-range-track {
    height: 6px;
    border: none;
    border-radius: 999px;
    background: var(--tlc-slider-track);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.timeline-content .time-slider::-moz-range-progress,
.tl-content-slider .time-slider::-moz-range-progress {
    height: 6px;
    border: none;
    border-radius: 999px;
    background: var(--tlc-slider-fill);
}

.timeline-content .time-slider::-webkit-slider-thumb,
.tl-content-slider .time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 2px solid var(--tlc-slider-thumb-ring);
    border-radius: 50%;
    background: var(--tlc-slider-thumb-bg);
    cursor: pointer;
    box-shadow: var(--tlc-slider-thumb-shadow);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.timeline-content .time-slider:active::-webkit-slider-thumb,
.timeline-content .time-slider:focus-visible::-webkit-slider-thumb,
.timeline-content .time-slider:hover::-webkit-slider-thumb,
.tl-content-slider .time-slider:active::-webkit-slider-thumb,
.tl-content-slider .time-slider:focus-visible::-webkit-slider-thumb,
.tl-content-slider .time-slider:hover::-webkit-slider-thumb {
    box-shadow: var(--tlc-slider-thumb-shadow-hover);
    transform: scale(1.05);
}

.timeline-content .time-slider::-moz-range-thumb,
.tl-content-slider .time-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--tlc-slider-thumb-ring);
    border-radius: 50%;
    background: var(--tlc-slider-thumb-bg);
    cursor: pointer;
    box-shadow: var(--tlc-slider-thumb-shadow);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.timeline-content .time-slider:active::-moz-range-thumb,
.timeline-content .time-slider:focus-visible::-moz-range-thumb,
.timeline-content .time-slider:hover::-moz-range-thumb,
.tl-content-slider .time-slider:active::-moz-range-thumb,
.tl-content-slider .time-slider:focus-visible::-moz-range-thumb,
.tl-content-slider .time-slider:hover::-moz-range-thumb {
    box-shadow: var(--tlc-slider-thumb-shadow-hover);
    transform: scale(1.05);
}

/* Тёмная тема — направляющая чуть контрастнее */
.dark-theme .timeline-content .time-slider::-webkit-slider-runnable-track,
.dark-theme .tl-content-slider .time-slider::-webkit-slider-runnable-track {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.dark-theme .timeline-content .time-slider::-moz-range-track,
.dark-theme .tl-content-slider .time-slider::-moz-range-track {
    background: var(--tlc-slider-track);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ====================================================================
 *  Toolbar с кнопками плеера — modernized
 * ==================================================================== */
.player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px;
    border-radius: 14px;
    background: var(--tlc-toolbar-bg);
    border: 1px solid var(--tlc-toolbar-border);
    box-shadow: var(--tlc-toolbar-shadow);
}

/* ====================================================================
 *  Кнопки плеера — круглые icon-btn с градиентным фоном.
 *
 *  Все пять кнопок (Play / FastForward / Stop / Follow / HeatMap)
 *  имеют ОДИНАКОВЫЙ размер и форму (round, 40×40) — это даёт
 *  визуальный ритм панели и упрощает тач-таргеты на мобильных.
 *  Фон у всех кнопок — единый slate-градиент (как у Stop),
 *  в духе neutral business-controls (Notion / Linear / shadcn):
 *      linear-gradient(135deg, #475569 0%, #1e293b 100%)
 *  Этот градиент придаёт кнопкам «металлический» объёмный вид и
 *  читается на любом фоне — светлом и тёмном.
 *  При активном состоянии (.active) накладывается inset-glow
 *  с белым ореолом — кнопка как будто «горит».
 *  Модификаторы .player-button--play / --forward / --stop /
 *  --follow / --heat оставлены в HTML как семантические хуки
 *  и для будущей кастомизации, но визуально все кнопки идентичны.
 * ==================================================================== */

/* ---------- Базовый круглый контейнер ----------
   Единый slate-градиент для всех кнопок плеера (стиль Stop). */
.player-controls .player-button {
    --tlc-btn-grad: none;
    --tlc-btn-ring: #475569;
    --tlc-btn-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 14px -6px rgba(30, 41, 59, 0.55),
        0 2px 4px rgba(15, 23, 42, 0.08);
    --tlc-btn-shadow-hover:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 10px 22px -8px rgba(30, 41, 59, 0.7),
        0 4px 8px rgba(15, 23, 42, 0.1);

    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: var(--tlc-btn-grad, var(--tlc-btn-bg));
    color: #ffffff;
    font: inherit;
    cursor: pointer;
    box-shadow: var(--tlc-btn-shadow);
    transition:
        transform 180ms ease,
        box-shadow 220ms ease,
        filter 180ms ease;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
}

/* Иконка внутри — белая, центрированная, без наследования цвета
   от родителя (на случай если родительская кнопка меняет color). */
.player-controls .player-button i,
.player-controls .player-button svg {
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
    pointer-events: none;
    transition: transform 180ms ease;
}

/* Нейтральная иконка внутри не должна иметь `vertical-align`
   по умолчанию — выравниваем по центру через flex родителя. */
.player-controls .player-button i {
    display: inline-block;
}

/* Если вдруг останется <img> (для обратной совместимости) */
.player-controls .player-button img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1); /* белая на любом градиенте */
    pointer-events: none;
    transition: transform 180ms ease;
}

/* ---------- Hover / focus / active ---------- */
.player-controls .player-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06) saturate(1.05);
    box-shadow: var(--tlc-btn-shadow-hover);
}

.player-controls .player-button:active {
    transform: translateY(0) scale(0.94);
    filter: brightness(0.96);
}

.player-controls .player-button:focus-visible {
    outline: none;
    box-shadow:
        var(--tlc-btn-shadow),
        0 0 0 3px color-mix(in srgb, var(--tlc-btn-ring, #475569) 45%, transparent);
}

/* Active state — кнопка «включена» (например heat-map, follow).
   Чуть более насыщенный фильтр + усиленные inset-блики, чтобы
   кнопка визуально «горела» без внешнего halo-кольца. */
.player-controls .player-button.active {
    filter: saturate(1.2) brightness(1.08);
    box-shadow:
        var(--tlc-btn-shadow-hover),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ====================================================================
 *  Семантические модификаторы кнопок
 *
 *  Все пять модификаторов (.player-button--play / --forward /
 *  --stop / --follow / --heat) визуально идентичны и наследуют
 *  единый slate-градиент от базового .player-button.
 *  Классы сохранены в HTML как семантические хуки (для
 *  будущей кастомизации, accessibility и аналитики), но не
 *  переопределяют внешний вид.
 * ==================================================================== */
.player-controls .player-button--play,
.player-controls .player-button--forward,
.player-controls .player-button--stop,
.player-controls .player-button--follow,
.player-controls .player-button--heat {
    /* Намеренно пустой блок: единый slate-градиент наследуется
       от базового .player-button. Явно не переопределяем
       --tlc-btn-grad / --tlc-btn-ring / --tlc-btn-shadow,
       чтобы все кнопки выглядели одинаково. */
}

/* Подсказки на кнопках плеера убраны намеренно:
   иконки Font Awesome (`fa-play`, `fa-forward`, `fa-stop`,
   `fa-location-crosshairs`, `fa-fire`) однозначно читаемы,
   а для скринридеров у кнопок есть aria-label. Появление
   всплывающей подсказки над круглой кнопкой в момент hover
   визуально конфликтовало с активным состоянием (`.active`),
   поэтому CSS-тултипы через ::before/::after отключены. */

/* ====================================================================
 *  Stat-blocks (playback-stats) — modernized KPI cards
 *  Базовые .route-info-block* стили есть в style.css — здесь
 *  добавляем preline-soft card c улучшенной типографикой.
 * ==================================================================== */
.playback-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 2px 0 0;
}

.playback-stats .route-info-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--tlc-stat-border);
    background: var(--tlc-stat-bg);
    box-shadow: var(--tlc-stat-shadow);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease;
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
}

.playback-stats .route-info-block:hover {
    transform: translateY(-1px);
    box-shadow: var(--tlc-stat-shadow-hover);
    border-color: color-mix(in srgb, var(--tlc-slider-thumb-ring) 22%, var(--tlc-stat-border));
}

.playback-stats .route-info-block__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tlc-stat-icon-time-fg);
    background: var(--tlc-stat-icon-time-bg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 4px 10px -4px rgba(15, 23, 42, 0.3);
    flex: 0 0 auto;
}

.playback-stats .route-info-block__icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.playback-stats .route-info-block--time .route-info-block__icon {
    background: var(--tlc-stat-icon-time-bg);
    color: var(--tlc-stat-icon-time-fg);
}

.playback-stats .route-info-block--speed .route-info-block__icon {
    background: var(--tlc-stat-icon-speed-bg);
    color: var(--tlc-stat-icon-speed-fg);
}

.playback-stats .route-info-block--distance .route-info-block__icon {
    background: var(--tlc-stat-icon-distance-bg);
    color: var(--tlc-stat-icon-distance-fg);
}

.playback-stats .route-info-block__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.playback-stats .route-info-block__label {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tlc-stat-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playback-stats .route-info-block__value {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tlc-stat-value);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playback-stats .route-info-block__value span {
    font-weight: 500;
    color: var(--tlc-stat-label);
    margin-left: 1px;
}

/* ====================================================================
 *  Адаптив для узких экранов
 * ==================================================================== */
@media (max-width: 720px) {
    .timeline-content {
        gap: 8px;
        padding: 10px 12px 12px;
    }

    .playback-stats {
        grid-template-columns: 1fr 1fr;
    }

    .playback-stats #distanceDisplay {
        grid-column: 1 / -1;
    }

    .player-controls {
        padding: 5px;
        gap: 6px;
    }

    .player-controls .player-button {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .player-controls .player-button i {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .playback-stats {
        grid-template-columns: 1fr;
    }

    .playback-stats #distanceDisplay {
        grid-column: auto;
    }
}

/* Уважаем prefers-reduced-motion: отключаем hover/active-анимации. */
@media (prefers-reduced-motion: reduce) {
    .playback-stats .route-info-block,
    .player-controls .player-button,
    .timeline-content .time-slider {
        transition: none !important;
    }
}