/* ==========================================================================
   Shadows Crew Music — онлайн-плеер
   Тёмная тема в духе VK Музыки: боковое меню, сетка обложек, нижняя панель
   ========================================================================== */

:root {
    /* Фон и поверхности */
    --bg:               #0f0f12;
    --bg_sidebar:       #141418;
    --bg_bar:           #17171c;
    --surface:          #1c1c22;
    --surface_hover:    #24242c;
    --surface_active:   #2c2c36;

    /* Текст */
    --text:             #ffffff;
    --text_dim:         #9b9ba6;
    --text_faint:       #6b6b78;

    /* Акцент */
    --accent:           #4d7fff;
    --accent_hover:     #6b94ff;
    --accent_soft:      rgba(77, 127, 255, .15);

    /* Служебное */
    --line:             rgba(255, 255, 255, .07);
    --shadow:           0 8px 32px rgba(0, 0, 0, .5);
    --radius:           10px;
    --radius_lg:        14px;
    --danger:           #ff6b6b;

    /* Полосы, ползунки и кнопка воспроизведения */
    --track_bg:         rgba(255, 255, 255, .14);
    --buffer_bg:        rgba(255, 255, 255, .12);
    --scroll_thumb:     rgba(255, 255, 255, .1);
    --scroll_thumb_on:  rgba(255, 255, 255, .2);
    --play_bg:          #ffffff;
    --play_fg:          #0f0f12;

    /* Оттенок текущего трека: его задаёт vinyl.js, остальное — тема */
    --tone_h:           226;
    --tone_s:           24%;
    --tone_l:           11%;
    --tone_bg_opacity:  .5;
    --tone_shade:       rgba(0, 0, 0, .45);

    /* Типографика */
    --font:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs_xs:            12px;
    --fs_sm:            13px;
    --fs_md:            14px;
    --fs_lg:            16px;
    --fs_xl:            22px;
    --fs_xxl:           30px;

    /* Размеры раскладки */
    --sidebar_w:        240px;
    --bar_h:            88px;
    --queue_w:          340px;
}

/* --------------------------------------------------------------------------
   Светлая тема

   Переключается кнопкой в боковом меню, выбор запоминается. Меняются
   только переменные — разметка и правила остаются теми же.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
    --bg:               #f4f4f7;
    --bg_sidebar:       #ffffff;
    --bg_bar:           #ffffff;
    --surface:          #e9e9ee;
    --surface_hover:    #e0e0e7;
    --surface_active:   #d3d3dc;

    --text:             #16161a;
    --text_dim:         #5c5c6a;
    --text_faint:       #8b8b99;

    --accent:           #3b5fe0;
    --accent_hover:     #2b4ac6;
    --accent_soft:      rgba(59, 95, 224, .13);

    --line:             rgba(0, 0, 0, .09);
    --shadow:           0 8px 28px rgba(22, 22, 32, .16);
    --danger:           #d63a3a;

    --track_bg:         rgba(0, 0, 0, .13);
    --buffer_bg:        rgba(0, 0, 0, .1);
    --scroll_thumb:     rgba(0, 0, 0, .16);
    --scroll_thumb_on:  rgba(0, 0, 0, .28);
    /* Кнопка остаётся самым тёмным пятном — на светлом фоне так заметнее */
    --play_bg:          #1d1d26;
    --play_fg:          #ffffff;

    /* Фон развёрнутого плеера светлеет, а притенение снизу становится
       засветкой: иначе тёмный текст на нём теряется */
    --tone_s:           46%;
    --tone_l:           88%;
    --tone_bg_opacity:  .4;
    --tone_shade:       rgba(255, 255, 255, .4);
}

/* Заглушка обложки нарисована для тёмного фона. Вместо второго файла
   выворачиваем её наизнанку: серые тона от этого только светлеют */
:root[data-theme="light"] img[src*="cover_placeholder"] {
    filter: invert(1) hue-rotate(180deg);
}

/* Логотип в меню нарисован белым и на светлом фоне пропал бы */
:root[data-theme="light"] .sidebar__logo_img {
    filter: invert(1);
}

* { box-sizing: border-box; }

/* Браузер подсвечивает нажатое место цветным прямоугольником — и на
   кнопках, и на строках списка. Свойство наследуется, поэтому гасим его
   разом у всей страницы. Обводку возвращаем только тем, кто ходит с
   клавиатуры: им без неё не видно, где находишься */
html { -webkit-tap-highlight-color: transparent; }

button:focus, a:focus, [role="switch"]:focus { outline: none; }

button:focus-visible,
a:focus-visible,
[role="switch"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    /* Без этого жест сверху вниз телефон понимает как «потянуть для
       обновления страницы» и перехватывает его у плеера */
    overscroll-behavior: none;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs_md);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.icon_sprite { display: none; }

/* Полоса прокрутки */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--scroll_thumb);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll_thumb_on); background-clip: padding-box; }

/* ==========================================================================
   Раскладка
   ========================================================================== */

.app {
    display: grid;
    grid-template-columns: var(--sidebar_w) 1fr;
    grid-template-rows: 1fr var(--bar_h);
    grid-template-areas:
        "sidebar main"
        "player  player";
    height: 100vh;
    height: 100dvh;
}

/* ==========================================================================
   Боковое меню
   ========================================================================== */

.sidebar {
    grid-area: sidebar;
    background: var(--bg_sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 30;
}

.sidebar__logo {
    display: block;
    padding: 22px 20px 20px;
}

.sidebar__logo_img {
    display: block;
    width: 100%;
    max-width: 168px;
    height: auto;
    margin: 0 auto;
}

/* Прокручивается весь список разделов вместе с плейлистами:
   на месте остаются только логотип и нижние кнопки */
.sidebar__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar__nav { padding: 0 10px; }

.nav_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius);
    color: var(--text_dim);
    font-weight: 500;
    transition: background .12s, color .12s;
}

.nav_item:hover { background: var(--surface); color: var(--text); }

.nav_item--is_active {
    background: var(--accent_soft);
    color: var(--accent_hover);
}

.nav_item__icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

.sidebar__section_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px 8px;
    font-size: var(--fs_xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text_faint);
}

.sidebar__playlists {
    padding: 0 10px 14px;
}

.playlist_link {
    display: block;
    padding: 7px 12px;
    border-radius: var(--radius);
    color: var(--text_dim);
    font-size: var(--fs_sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .12s, color .12s;
}

.playlist_link:hover { background: var(--surface); color: var(--text); }
.playlist_link--is_active { background: var(--accent_soft); color: var(--accent_hover); }

.sidebar__empty {
    padding: 6px 12px;
    font-size: var(--fs_sm);
    color: var(--text_faint);
}

/* ==========================================================================
   Верхняя панель
   ========================================================================== */

.main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    flex-shrink: 0;
}

.topbar__nav { display: flex; gap: 4px; }

/* На широком экране боковое меню и так открыто, кнопка бесполезна.
   Класс icon_btn идёт ниже и перебивает display, поэтому селектор усилен */
.topbar__menu_btn.icon_btn { display: none; margin-left: auto; width: 40px; height: 40px; }
.topbar__menu_btn.icon_btn svg { width: 24px; height: 24px; }

.search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 420px;
}

.search__icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    fill: var(--text_faint);
    pointer-events: none;
}

.search__input {
    width: 100%;
    padding: 9px 38px 9px 38px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs_md);
    font-family: inherit;
    outline: none;
    transition: background .12s, border-color .12s;
}

.search__input::placeholder { color: var(--text_faint); }
.search__input:focus { background: var(--surface_hover); border-color: var(--accent); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__clear {
    position: absolute;
    right: 8px;
    display: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.search__clear svg { width: 14px; height: 14px; fill: var(--text_faint); }
.search__clear:hover svg { fill: var(--text); }
.search--has_value .search__clear { display: block; }

/* ==========================================================================
   Контент
   ========================================================================== */

.content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px 32px;
    min-width: 0;
}

.page__title {
    margin: 10px 0 20px;
    font-size: var(--fs_xxl);
    font-weight: 700;
    letter-spacing: -.5px;
}

.section { margin-bottom: 36px; }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.section__title {
    margin: 0;
    font-size: var(--fs_xl);
    font-weight: 700;
    letter-spacing: -.3px;
}

.section__more {
    font-size: var(--fs_sm);
    color: var(--text_dim);
}

.section__more:hover { color: var(--text); }

.empty_state {
    padding: 60px 20px;
    text-align: center;
    color: var(--text_faint);
}

.empty_state__title {
    margin-bottom: 6px;
    font-size: var(--fs_lg);
    color: var(--text_dim);
}

/* ==========================================================================
   Сетка карточек (альбомы, исполнители, плейлисты)
   ========================================================================== */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
    gap: 18px 16px;
}

.card {
    padding: 12px;
    border-radius: var(--radius_lg);
    background: transparent;
    cursor: pointer;
    transition: background .15s;
}

.card:hover { background: var(--surface); }

/* Скругление висит на самой картинке, а не на контейнере: иначе круглая
   маска у исполнителей срезала кнопку воспроизведения */
.card__art {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 12px;
}

.card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
    background: var(--surface_hover);
}

.card--is_round .card__img { border-radius: 50%; }

.card__play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .15s, transform .15s, background .12s;
}

/* У круга угол квадрата пустой, поэтому кнопку подвигаем к краю окружности */
.card--is_round .card__play { right: 4%; bottom: 7%; }

.card:hover .card__play { opacity: 1; transform: translateY(0); }
.card__play:hover { background: var(--accent_hover); }
.card__play svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }

.card__title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card__sub {
    margin-top: 3px;
    font-size: var(--fs_sm);
    color: var(--text_dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Список треков
   ========================================================================== */

.track_list { display: flex; flex-direction: column; }

.track_row {
    display: grid;
    grid-template-columns: 28px 40px 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .12s;
}

.track_row:hover { background: var(--surface); }
.track_row--is_current { background: var(--accent_soft); }
.track_row--is_current .track_row__title { color: var(--accent_hover); }

.track_row__num {
    font-size: var(--fs_sm);
    color: var(--text_faint);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.track_row:hover .track_row__num { visibility: hidden; }

.track_row__num_wrap { position: relative; }

.track_row__play {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: flex-end;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
}

.track_row:hover .track_row__play { display: flex; }
.track_row__play svg { width: 14px; height: 14px; fill: var(--text); }

.track_row__cover {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    background: var(--surface_hover);
}

.track_row__meta { min-width: 0; }

.track_row__title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track_row__artist {
    font-size: var(--fs_sm);
    color: var(--text_dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track_row__album {
    font-size: var(--fs_sm);
    color: var(--text_dim);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track_row__time {
    font-size: var(--fs_sm);
    color: var(--text_faint);
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: right;
}

.track_row__actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .12s;
}

.track_row:hover .track_row__actions,
.track_row--is_current .track_row__actions { opacity: 1; }
.track_row__actions .icon_btn--is_on { opacity: 1; color: var(--accent); }

/* Бегущие полоски у играющего трека */
.equalizer {
    display: none;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 2px;
    height: 14px;
}

.track_row--is_current .equalizer { display: flex; }
.track_row--is_current .track_row__num { display: none; }
.track_row--is_current:hover .track_row__play { display: flex; }
.track_row--is_current:hover .equalizer { display: none; }

.equalizer__bar {
    width: 3px;
    background: var(--accent);
    border-radius: 2px;
    animation: eq_bounce .9s ease-in-out infinite;
}

.equalizer__bar:nth-child(2) { animation-delay: .18s; }
.equalizer__bar:nth-child(3) { animation-delay: .36s; }

.equalizer--is_paused .equalizer__bar { animation-play-state: paused; height: 4px !important; }

@keyframes eq_bounce {
    0%, 100% { height: 4px; }
    50%      { height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .equalizer__bar { animation: none; height: 9px; }
}

/* ==========================================================================
   Шапка страницы альбома / плейлиста / исполнителя
   ========================================================================== */

.detail_head {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    margin: 10px 0 28px;
}

.detail_head__art {
    width: 196px;
    height: 196px;
    border-radius: var(--radius_lg);
    object-fit: cover;
    box-shadow: var(--shadow);
    flex-shrink: 0;
    background: var(--surface_hover);
}

.detail_head--is_round .detail_head__art { border-radius: 50%; }

.detail_head__kind {
    font-size: var(--fs_xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text_dim);
}

.detail_head__title {
    margin: 6px 0 10px;
    font-size: 44px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1px;
}

.detail_head__sub {
    font-size: var(--fs_md);
    color: var(--text_dim);
}

.detail_head__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: var(--fs_md);
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, transform .08s;
}

.btn:hover { background: var(--accent_hover); }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

.btn--ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
}

.btn--ghost:hover { background: var(--surface); border-color: transparent; }

/* ==========================================================================
   Кнопки-иконки
   ========================================================================== */

.icon_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text_dim);
    cursor: pointer;
    transition: color .12s, background .12s;
}

.icon_btn svg { width: 18px; height: 18px; fill: currentColor; }
.icon_btn:hover { color: var(--text); background: var(--surface_hover); }
.icon_btn--small { width: 26px; height: 26px; }
.icon_btn--small svg { width: 15px; height: 15px; }
.icon_btn--is_on { color: var(--accent); }
.icon_btn--is_on:hover { color: var(--accent_hover); }

/* Включённый режим должен читаться с первого взгляда, а одного цвета
   мелкой иконки для этого мало: добавляем фон и точку под значком */
.controls__shuffle,
.controls__repeat { position: relative; }

.controls__shuffle.icon_btn--is_on,
.controls__repeat.icon_btn--is_on { background: var(--accent_soft); }

.controls__shuffle.icon_btn--is_on::after,
.controls__repeat.icon_btn--is_on::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: currentColor;
}
.icon_btn:disabled { opacity: .35; cursor: default; }
.icon_btn:disabled:hover { background: none; color: var(--text_dim); }

/* ==========================================================================
   Нижняя панель плеера
   ========================================================================== */

.player_bar {
    touch-action: none;
    grid-area: player;
    position: relative;
    background: var(--bg_bar);
    border-top: 1px solid var(--line);
    z-index: 40;
}

.player_bar__progress_touch {
    flex: 1;
    /* Полоса тонкая, но схватить её нужно легко,
       поэтому отступы делают зону нажатия сильно выше самой линии */
    padding: 10px 0;
    cursor: pointer;
    /* Без этого браузер примет ведение пальцем за прокрутку страницы
       и оборвёт перемотку на полпути */
    touch-action: none;
}

.volume { touch-action: none; }

.progress {
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: var(--track_bg);
    overflow: visible;
}

.progress__buffer {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 3px;
    background: var(--buffer_bg);
    transition: width .2s;
}

.progress__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 3px;
    background: var(--accent);
}

.progress__knob {
    position: absolute;
    right: -7px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    border-radius: 50%;
    background: var(--play_bg);
    opacity: 0;
    transition: opacity .12s;
}

.player_bar__progress_touch:hover .progress__knob,
.volume:hover .progress__knob { opacity: 1; }

/* На сенсорном экране наведения нет, и бегунок должен быть виден сразу */
@media (hover: none) {
    .progress__knob { opacity: 1; }
}

.player_bar__progress_touch:hover .progress__fill { background: var(--accent_hover); }

/* Загрузка куска файла: полоса переливается, время приглушено */
.player_bar--is_loading .progress__fill {
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent_hover) 50%, var(--accent) 100%);
    background-size: 200% 100%;
    animation: seek_loading 1s linear infinite;
}

.player_bar--is_loading #time_current { opacity: .55; }

/* Загрузка на кнопке воспроизведения */
.play_btn--is_loading .play_btn__icon { opacity: 0; }

.play_btn--is_loading::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    /* Колечко в цвет значка на кнопке, а подложка — полупрозрачная */
    border: 2px solid rgba(128, 128, 128, .3);
    border-top-color: var(--play_fg);
    border-radius: 50%;
    animation: play_spin .7s linear infinite;
}

@keyframes play_spin {
    to { transform: rotate(360deg); }
}

@keyframes seek_loading {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

.player_bar__inner {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 560px) 1fr;
    align-items: center;
    gap: 20px;
    height: 100%;
    padding: 0 20px;
}

/* Левая часть: что играет */
.now_playing {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.now_playing__cover {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface_hover);
}

.now_playing__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.now_playing__meta { min-width: 0; flex: 1; }

/* Название слева, сердечко прижато к правому краю той же строки */
.now_playing__line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.now_playing__line .now_playing__title { flex: 1; min-width: 0; }
/* Сердечко крупнее, но кнопка прежней ширины: на узкой панели
   каждый лишний пиксель отъедает название трека */
.now_playing__like { flex-shrink: 0; }
.now_playing__like svg { width: 20px; height: 20px; }

.now_playing__title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.now_playing__artist {
    font-size: var(--fs_sm);
    color: var(--text_dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.now_playing__artist:hover { color: var(--text); text-decoration: underline; }

/* Центр: управление */
.controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 560px;
}

.controls__row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.controls__seek {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Цифры моноширинные: иначе при смене секунд полоса дёргается */
.controls__time {
    min-width: 42px;
    color: var(--text_dim);
    font-size: var(--fs_xs);
    font-variant-numeric: tabular-nums;
    text-align: center;
    user-select: none;
}

.play_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--play_bg);
    cursor: pointer;
    transition: transform .08s, background .12s;
}

.play_btn:hover { transform: scale(1.06); }
.play_btn:active { transform: scale(.96); }
.play_btn svg { width: 20px; height: 20px; fill: var(--play_fg); }
.play_btn__icon--play { margin-left: 2px; }
.play_btn__icon--pause { display: none; }

.player_bar--is_playing .play_btn__icon--play { display: none; }
.player_bar--is_playing .play_btn__icon--pause { display: block; }

.controls__repeat { position: relative; }

.controls__repeat_one {
    position: absolute;
    right: 5px;
    bottom: 4px;
    display: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
}

.controls__repeat--is_one .controls__repeat_one { display: block; }

.controls__time {
    display: flex;
    gap: 5px;
    font-size: var(--fs_xs);
    color: var(--text_faint);
    font-variant-numeric: tabular-nums;
}

/* Правая часть: очередь и громкость */
.extras {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.extras__vol_icon--off { display: none; }
.extras--is_muted .extras__vol_icon--on { display: none; }
.extras--is_muted .extras__vol_icon--off { display: block; }

.volume {
    width: 96px;
    padding: 8px 0;
    cursor: pointer;
}

/* ==========================================================================
   Очередь
   ========================================================================== */

.queue {
    position: fixed;
    top: 0;
    right: 0;
    bottom: var(--bar_h);
    width: var(--queue_w);
    display: flex;
    flex-direction: column;
    background: var(--bg_sidebar);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    z-index: 35;
}

.queue--is_open { transform: translateX(0); }

.queue__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 12px 20px;
    border-bottom: 1px solid var(--line);
}

.queue__title { margin: 0; font-size: var(--fs_lg); font-weight: 700; }

.queue__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.queue__group_title {
    padding: 12px 10px 6px;
    font-size: var(--fs_xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text_faint);
}

.queue_row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.queue_row:hover { background: var(--surface); }
.queue_row--is_current .queue_row__title { color: var(--accent_hover); }
.queue_row--is_dragging { opacity: .4; }
.queue_row--is_drop_target { box-shadow: inset 0 2px 0 var(--accent); }

.queue_row__cover { width: 36px; height: 36px; border-radius: 5px; object-fit: cover; display: block; }
.queue_row__meta { min-width: 0; }

.queue_row__title {
    font-size: var(--fs_sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue_row__artist {
    font-size: var(--fs_xs);
    color: var(--text_dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Контекстное меню
   ========================================================================== */

.ctx_menu {
    position: fixed;
    display: none;
    min-width: 210px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    z-index: 100;
}

.ctx_menu--is_open { display: block; }

.ctx_menu__item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text);
    font-size: var(--fs_sm);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctx_menu__item:hover { background: var(--surface_hover); }
.ctx_menu__item--is_danger { color: var(--danger); }

.ctx_menu__sep { height: 1px; margin: 5px 6px; background: var(--line); }

.ctx_menu__label {
    padding: 8px 12px 4px;
    font-size: var(--fs_xs);
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text_faint);
}

/* ==========================================================================
   Уведомления
   ========================================================================== */

.toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bar_h) + 18px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 120;
    pointer-events: none;
}

.toast {
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--surface_active);
    box-shadow: var(--shadow);
    font-size: var(--fs_sm);
    animation: toast_in .2s ease;
}

@keyframes toast_in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Затемнение под выдвижные панели
   ========================================================================== */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    z-index: 25;
}

.overlay--is_open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Планшет
   ========================================================================== */

@media (max-width: 1100px) {
    .track_row { grid-template-columns: 28px 40px 1fr auto auto; }
    .track_row__album { display: none; }
}

@media (max-width: 900px) {
    :root { --queue_w: 300px; }
    .volume { width: 70px; }
}

/* ==========================================================================
   Телефон
   ========================================================================== */

@media (max-width: 760px) {
    :root { --bar_h: 178px; }

    .app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "player";
    }

    .sidebar {
        position: fixed;
        top: 0;
        /* Низ меню не должен уезжать под панель плеера: там живут
           смена темы и установка на рабочий стол */
        bottom: var(--bar_h);
        left: 0;
        width: 260px;
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    }

    .sidebar--is_open { transform: translateX(0); }

    /* Меню прижимаем к логотипу и ужимаем строки: иначе списку
       плейлистов остаётся одна строка */
    .sidebar__logo { padding: 14px 20px 10px; }
    .sidebar__nav .nav_item { padding: 7px 12px; }
    .sidebar__section_title { padding: 14px 20px 6px; }
    .sidebar__playlists { padding-bottom: 10px; }

    .topbar { padding: 12px 14px; gap: 8px; }
    .topbar__nav { display: none; }
    .topbar__menu_btn.icon_btn { display: inline-flex; }
    .content { padding: 4px 14px 24px; }

    .page__title { font-size: 24px; }
    .section__title { font-size: var(--fs_lg); }

    .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px 10px; }
    .card { padding: 8px; }

    .detail_head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .detail_head__art { width: 150px; height: 150px; }
    .detail_head__title { font-size: 28px; }

    .track_row { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 6px; }
    .track_row__num_wrap,
    .track_row__time,
    .track_row__album { display: none; }
    .track_row__actions { opacity: 1; }
    .track_row__actions .icon_btn--like { display: none; }

    /* На телефоне панель в три строки: трек, кнопки, полоса.
       Так названию хватает всей ширины, а кнопки не жмутся к нему */
    /* Полоска сверху подсказывает, что панель тянется вверх */
    .player_bar::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        width: 38px;
        height: 4px;
        margin-left: -19px;
        border-radius: 2px;
        background: var(--surface_active);
        pointer-events: none;
    }

    .player_bar__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 6px;
        /* Сверху место под полоску-захват, снизу воздух */
        padding: 14px 14px 14px;
    }

    .now_playing {
        grid-row: 1;
        grid-column: 1;
    }

    .now_playing__cover { width: 48px; height: 48px; }

    /* На телефоне названию отведена вся ширина строки, так что
       сердечку можно дать настоящий размер */
    .now_playing__like { display: inline-flex; width: 38px; height: 38px; }
    .now_playing__like svg { width: 22px; height: 22px; }

    /* Ряд кнопок и полоса становятся ячейками самой панели */
    .controls { display: contents; }

    /* Кнопки расходятся на всю ширину строки: по краям место всё равно
       пустовало, а палец попадает по крупной цели увереннее */
    .controls__row {
        grid-row: 3;
        grid-column: 1;
        justify-content: space-between;
        gap: 0;
        width: 100%;
        padding: 0 2px;
    }

    .controls__row .icon_btn { width: 48px; height: 48px; }
    .controls__row .icon_btn svg { width: 24px; height: 24px; }

    /* Полоса сверху, кнопки в середине, трек снизу */

    /* Палец толще курсора: даём полосе больше места под нажатие */
    .player_bar__progress_touch { padding: 12px 0; }
    .progress { height: 6px; border-radius: 3px; }
    .progress__knob { width: 16px; height: 16px; right: -8px; margin-top: -8px; }
    .controls__time { font-size: var(--fs_sm); min-width: 46px; }

    /* Режимы остаются в общем ряду, но компактнее остальных */
    .controls__row .controls__shuffle,
    .controls__row .controls__repeat {
        width: 44px;
        height: 44px;
    }

    .controls__row .controls__shuffle svg,
    .controls__row .controls__repeat svg { width: 20px; height: 20px; }

    .controls__seek {
        grid-row: 2;
        grid-column: 1;
        gap: 8px;
    }

    /* Чем уже время, тем длиннее полоса — на длинном миксе это важно */
    .controls__time { min-width: 38px; font-size: var(--fs_xs); }

    /* Названию хватит и узкой колонки: кнопки важнее */
    .now_playing { min-width: 0; }

    .play_btn { width: 56px; height: 56px; margin: 0; }
    .play_btn svg { width: 24px; height: 24px; }

    .extras { display: none; }

    .queue { width: 100%; bottom: var(--bar_h); }
}

/* ==========================================================================
   Полноэкранный плеер

   Нижняя панель остаётся для быстрого доступа, но основное взаимодействие
   с треком — здесь: крупная обложка, полное название, большие кнопки.
   ========================================================================== */

.now_screen {
    position: fixed;
    inset: 0;
    /* Жесты на этом экране обрабатываем сами */
    touch-action: none;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 14px 20px 28px;
    /* Фон живёт оттенком трека. Светлота и насыщенность при этом
       заданы темой, поэтому текст и кнопки читаются при любом цвете */
    background-color: hsl(var(--tone_h), var(--tone_s), var(--tone_l));
    overflow: hidden;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility .28s,
                background-color .5s;
}

/* Размытая обложка поверх цвета — чтобы экран не был плоским.
   Края увода за пределы: иначе размытие высветляет рамку */
.now_screen__bg {
    position: absolute;
    inset: -8%;
    z-index: 0;
    background-position: center;
    background-size: cover;
    filter: blur(56px) saturate(140%);
    opacity: var(--tone_bg_opacity);
    transform: scale(1.1);
}

/* Низ притемняем: под кнопками фон бывает слишком пёстрым */
.now_screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Свечение в цвет трека вверху — иначе фон читается как просто тёмный,
       а под кнопками внизу, наоборот, притеняем */
    background:
        radial-gradient(85% 50% at 50% 22%,
            hsla(var(--tone_h), 62%, 45%, .3) 0%,
            rgba(0, 0, 0, 0) 72%),
        linear-gradient(to bottom,
            var(--tone_shade) 0%,
            rgba(0, 0, 0, 0) 34%,
            var(--tone_shade) 100%);
    pointer-events: none;
}

.now_screen > *:not(.now_screen__bg) {
    position: relative;
    z-index: 1;
}

.now_screen--is_open {
    transform: translateY(0);
    visibility: visible;
}

.now_screen__top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.now_screen__context {
    flex: 1;
    text-align: center;
    color: var(--text_dim);
    font-size: var(--fs_sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Обложка занимает всё свободное место, но остаётся квадратной */
.now_screen__art {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Пластинка

   Крутится, пока идёт трек, и замирает на паузе. Цвет этикетки и фона
   задаёт оттенок трека (--tone_h), сам винил остаётся тёмным при любой
   теме — чёрная пластинка узнаётся сразу.
   -------------------------------------------------------------------------- */

.vinyl {
    position: relative;
    width: 100%;
    max-width: min(100%, 440px);
    max-height: 100%;
    aspect-ratio: 1;
}

.vinyl__disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Бороздки — частые кольца поверх основы, край чуть темнее середины */
    background:
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, .05) 0 1px,
            rgba(0, 0, 0, 0) 1px 5px),
        radial-gradient(circle at 50% 50%,
            hsl(var(--tone_h), 24%, 14%) 0 56%,
            hsl(var(--tone_h), 28%, 8%) 100%);
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .07);
    animation: vinyl_spin 3.2s linear infinite;
    animation-play-state: paused;
    will-change: transform;
}

/* Крутим только когда звучит музыка */
.now_screen.player_bar--is_playing .vinyl__disc { animation-play-state: running; }

@keyframes vinyl_spin {
    to { transform: rotate(360deg); }
}

.vinyl__label {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: hsl(var(--tone_h), 48%, 40%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

/* Без обложки этикетка меньше: знаку хватает, а винила видно больше */
.vinyl--no_cover .vinyl__label {
    width: 36%;
    height: 36%;
    margin: -18% 0 0 -18%;
}

.vinyl__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vinyl__mark {
    display: none;
    width: 46%;
}

.vinyl--no_cover .vinyl__cover { display: none; }
.vinyl--no_cover .vinyl__mark { display: block; }

.vinyl__hole {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3%;
    height: 3%;
    margin: -1.5% 0 0 -1.5%;
    border-radius: 50%;
    background: hsl(var(--tone_h), 18%, 7%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}

/* Блик лежит отдельным слоем: он от лампы и вместе с диском не крутится */
.vinyl__shine {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(118deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, .075) 46%,
        rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

/* Тонарм опускается на пластинку, когда трек пошёл, и по ходу трека
   ползёт от края к этикетке: угол считает vinyl.js из позиции */
.vinyl__arm {
    position: absolute;
    top: 8%;
    right: 6%;
    width: 40%;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to bottom, #e4e4ec, #83838f);
    transform-origin: 100% 50%;
    transform: rotate(10deg);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

/* Пока играет, движение равномерное: шаг приходит каждые 250 мс,
   и плавный переход склеивает шаги в непрерывный ход */
.now_screen.player_bar--is_playing .vinyl__arm {
    transform: rotate(var(--arm_angle, -5deg));
    transition: transform .4s linear;
}

/* Пятка с осью вращения */
.vinyl__arm::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -8px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
    background: linear-gradient(145deg, #eaeaf2, #76767f);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* Головка с иглой */
.vinyl__arm::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -3px;
    width: 15px;
    height: 12px;
    border-radius: 2px;
    background: #d4d4de;
    transform: rotate(-15deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
    .vinyl__disc { animation: none; }
    .vinyl__arm { transition: none; }
}

.now_screen__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Название отделяем от кнопок, а сами кнопки держим рядом */
.now_screen__text { margin-right: 10px; }

.now_screen__text { flex: 1; min-width: 0; }

/* Название помещается целиком — ради этого экран и сделан */
.now_screen__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.now_screen__artist {
    margin-top: 4px;
    color: var(--text_dim);
    font-size: var(--fs_lg);
}

.now_screen__like svg { width: 24px; height: 24px; }
.now_screen__like.icon_btn--is_on { color: var(--accent); }

/* Меню трека — то же самое, что в списках: плейлисты, очередь, переходы */
.now_screen__more svg { width: 24px; height: 24px; }

/* Кнопки в шапке крупнее: до них тянутся пальцем, не глядя */
.now_screen__top .icon_btn { width: 42px; height: 42px; }
.now_screen__top .icon_btn svg { width: 24px; height: 24px; }

.now_screen__seek { flex-shrink: 0; }

.now_screen__seek .player_bar__progress_touch { padding: 12px 0; }
.now_screen__seek .progress { height: 6px; }

.now_screen__times {
    display: flex;
    justify-content: space-between;
    color: var(--text_dim);
    font-size: var(--fs_sm);
    font-variant-numeric: tabular-nums;
}

.now_screen__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    padding: 6px 0 0;
}

.now_screen__play {
    width: 68px;
    height: 68px;
    margin: 0;
}

.now_screen__play svg { width: 28px; height: 28px; }

.now_screen__step {
    width: 54px;
    height: 54px;
}

.now_screen__step svg { width: 28px; height: 28px; }

.now_screen__mode {
    width: 44px;
    height: 44px;
}

.now_screen__mode svg { width: 20px; height: 20px; }

/* На широком экране содержимое не растягивается на всю ширину */
@media (min-width: 761px) {
    .now_screen {
        padding: 18px calc(50% - 240px) 32px;
    }
}

/* Нижняя панель подсказывает, что по ней можно нажать */
.now_playing--is_tappable { cursor: pointer; }

/* ==========================================================================
   Предложение установить плеер
   ========================================================================== */

/* Атрибут hidden слабее display из класса, поэтому скрываем явно:
   иначе кнопка и подсказка остаются на экране и перехватывают нажатия */
.sidebar__install[hidden],
.install_hint[hidden] { display: none; }

/* Установка и смена темы делят одну строку: вертикаль в меню дорога,
   а списку плейлистов она нужнее */
.sidebar__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 10px;
}

.sidebar__install {
    flex: 1;
    min-width: 0;
    margin: 0;
    border: 0;
    font: inherit;
    text-align: left;
    color: var(--text_dim);
    background: var(--surface);
    cursor: pointer;
}

.sidebar__install:hover { color: var(--text); background: var(--surface_hover); }

/* --- Тумблер темы --- */

.theme_switch {
    position: relative;
    flex-shrink: 0;
    width: 58px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
}

.theme_switch:hover { background: var(--surface_hover); }

.theme_switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}

:root[data-theme="light"] .theme_switch__knob { transform: translateX(26px); }

.theme_switch__icon {
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    margin-top: -7px;
    fill: var(--text_faint);
    transition: fill .18s;
}

.theme_switch__icon--moon { left: 7px; }
.theme_switch__icon--sun { right: 7px; }

/* Значок под кружком перекрашивается в цвет меню — так видно,
   какая тема сейчас включена */
.theme_switch__icon--moon { fill: var(--bg_sidebar); }
:root[data-theme="light"] .theme_switch__icon--moon { fill: var(--text_faint); }
:root[data-theme="light"] .theme_switch__icon--sun { fill: var(--bg_sidebar); }

/* Полоска внизу: не перекрывает плеер и не требует ответа */
.install_hint {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--bar_h) + 16px);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius_lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .22s, transform .22s;
    /* Пока подсказка прозрачна, она не должна ловить касания */
    pointer-events: none;
}

.install_hint--is_open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.install_hint__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.install_hint__text { flex: 1; min-width: 0; }

.install_hint__title { font-weight: 600; }

.install_hint__note {
    margin-top: 2px;
    color: var(--text_dim);
    font-size: var(--fs_sm);
}

.install_hint__ok { flex-shrink: 0; }
.install_hint__close { flex-shrink: 0; }

@media (max-width: 560px) {
    .install_hint { flex-wrap: wrap; }
    .install_hint__text { flex-basis: calc(100% - 120px); }
    .install_hint__ok { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Добавление треков
   ========================================================================== */

.upload {
    max-width: 640px;
}

/* --- Вход по коду --- */

.upload__gate {
    padding: 28px;
    border-radius: var(--radius_lg);
    background: var(--surface);
}

.upload__gate_text {
    margin-bottom: 18px;
    color: var(--text_dim);
    font-size: var(--fs_md);
    line-height: 1.5;
}

.upload__gate_row {
    display: flex;
    gap: 10px;
}

.upload__code {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs_md);
    /* Код набирают латиницей, разрядка помогает не ошибиться */
    letter-spacing: .08em;
}

.upload__code:focus {
    outline: none;
    border-color: var(--accent);
}

.upload__gate_error {
    margin-top: 14px;
    color: var(--danger);
    font-size: var(--fs_sm);
}

/* --- Площадка для файлов --- */

.upload__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px;
    border: 2px dashed var(--line);
    border-radius: var(--radius_lg);
    background: var(--surface);
    text-align: center;
    transition: border-color .12s, background .12s;
}

.upload__drop--is_over {
    border-color: var(--accent);
    background: var(--accent_soft);
}

.upload__drop_icon {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    fill: var(--text_faint);
}

.upload__drop_title {
    font-size: var(--fs_lg);
    font-weight: 600;
}

.upload__drop_note {
    margin-top: 6px;
    color: var(--text_dim);
    font-size: var(--fs_sm);
}

.upload__pick {
    margin-top: 20px;
}

/* Настоящее поле выбора прячем: нажимают по кнопке */
.upload__input {
    display: none;
}

.upload__hint {
    margin-top: 16px;
    color: var(--text_faint);
    font-size: var(--fs_sm);
    line-height: 1.5;
}

.upload__forget {
    margin-top: 28px;
}

/* --- Очередь --- */

.upload__queue:not(:empty) {
    margin-top: 26px;
}

.upload__queue_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.upload__queue_title {
    font-size: var(--fs_md);
    font-weight: 600;
}

.upload__clear {
    border: 0;
    background: none;
    color: var(--text_dim);
    font-size: var(--fs_sm);
    cursor: pointer;
}

.upload__clear:hover { color: var(--text); }

.up_row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface);
}

.up_row + .up_row { margin-top: 8px; }

.up_row__main {
    flex: 1;
    min-width: 0;
}

.up_row__title {
    overflow: hidden;
    font-size: var(--fs_md);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up_row__state {
    margin-top: 3px;
    color: var(--text_dim);
    font-size: var(--fs_xs);
}

.up_row--error .up_row__state { color: var(--danger); }
.up_row--done .up_row__state { color: var(--accent); }

/* Полоса хода загрузки лежит по нижней кромке строки */
.up_row__bar {
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--surface_active);
}

.up_row--wait .up_row__bar,
.up_row--error .up_row__bar { opacity: 0; }

.up_row__fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    transition: width .2s;
}

.up_row--done .up_row__fill { background: var(--text_faint); }

.up_row__drop {
    flex: none;
}

@media (max-width: 760px) {
    .upload__gate,
    .upload__drop { padding: 24px 18px; }

    .upload__gate_row { flex-wrap: wrap; }
    .upload__gate_row .btn { width: 100%; justify-content: center; }
}