/* /Components/Global/AudioPlayer.razor.rz.scp.css */
/* Высота бара - это ровно ряд с контентом (46px, его задают кнопки) плюс padding: полоса
   перемотки лежит поверх и в высоту не идёт. Нижний padding больше верхнего - под полосу.
   Итого 60px против прежних 115px. */
/* overflow НЕ hidden: FlarePopover рисует панель внутри своего анкора, то есть внутри бара, а
   раскрывается она вверх - за его границу. Клипающий бар срезал панель громкости целиком: она
   открывалась, но попасть по ней было нельзя (elementFromPoint отдавал элемент под ней). Скругление
   заливки держит .deka-player-fill-clip, ему клипать безопасно. */
.deka-player-bar[b-hwetsldnxb] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--deka-glass);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--flare-color-outline-variant);
    border-radius: var(--flare-shape-extra-large);
    box-shadow: 0 6px 20px -14px rgba(0, 0, 0, 0.5);
    padding: 0.25rem 0.5rem 0.5rem;
}

/* Клипует ТОЛЬКО заливку - по скруглению бара, которое повторяет через inherit. Раньше эту роль
   играл overflow:hidden самого бара, но он заодно срезал панель громкости. z-index: -1 держит
   заливку позади flex-контента без правок дочерних компонентов. */
.deka-player-fill-clip[b-hwetsldnxb] {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

/* Фоновая заливка прогресса: тонкая подсветка проигранной части за контентом бара. */
.deka-player-fill[b-hwetsldnxb] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--flare-color-primary);
    opacity: 0.16;
    pointer-events: none;
    /* Без transition - иначе заливка "плывёт" и рассинхронизируется с мгновенной
       тонкой полосой прогресса (они должны идти вровень). */
}

.deka-player-cover[b-hwetsldnxb] {
    position: relative;
    width: 2.875rem;
    height: 2.875rem;
    flex: none;
    border-radius: var(--flare-shape-small);
    overflow: hidden;
}

.deka-player-cover-overlay[b-hwetsldnxb] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
}

/* Полоса перемотки лежит ПОВЕРХ бара у нижнего края и высоту не занимает: в потоке её зона
   захвата (44px по умолчанию) раздувала бар до 115px, а он должен быть 50-60px.
   Отступы по бокам обязательны: у бара overflow:hidden и скругление 26px, и полоса у самого
   низа обрезалась бы этим скруглением по концам (при ~7px от низа радиус съедает ~8px с краю).
   Зона захвата здесь уже стандартной - полоса лежит поверх контента, и высокая зона
   перехватывала бы клики по кнопкам; в полном плеере она остаётся комфортной. */
/* Клипует полосу перемотки по скруглению бара. Раньше это делал overflow:hidden самого бара, но он
   срезал панель громкости, которая раскрывается выше бара. Без клипа прямые углы полосы торчали из
   круглых углов. Сам клип событий не ловит - их забирает полоса внутри. */
.deka-player-progress-clip[b-hwetsldnxb] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

/* Ширина и левый край обязаны совпадать с .deka-player-fill (left:0, ширина в % от всего бара):
   иначе на одном и том же проценте заливка кончается в одной точке, а слайдер стоит в другой -
   расходились везде, кроме 0% и 100%. Поэтому от края до края и прижат к самому низу. */
.deka-player-progress[b-hwetsldnxb] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Клип-обёртка событий не ловит - забираем их обратно, иначе перемотка перестанет работать. */
    pointer-events: auto;
    --deka-slider-hit-area: 12px;
    /* Ползунок в мини-плеере не нужен - позицию показывает заливка. Гасим ширину, а не высоту:
       высота (--_hnd-height) участвует в центрировании thumb и в зоне захвата. Ореол состояния
       тоже убираем, иначе вокруг невидимого ползунка вздувался бы пузырь при наведении. */
    --flare-slider-handle-width: 0px;
    --flare-slider-handle-pressed-width: 0px;
    --flare-slider-state-layer-size: 0px;
    margin: 0;
}

/* Контент бара - над полосой: её прозрачная зона захвата шире дорожки и иначе перехватывала бы
   клики по нижней кромке кнопок. */
.deka-player-controls[b-hwetsldnxb],
[b-hwetsldnxb] .deka-player-title-block {
    position: relative;
    z-index: 1;
}

/* Фон бара как поверхность перемотки (только ПК). Нативный range - чтобы координату в значение
   пересчитывал браузер, без замеров ширины. Невидим, но кликабелен: opacity 0 не отключает
   события, в отличие от visibility/display. */
.deka-player-seek-surface[b-hwetsldnxb] {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

/* Ползунок гасим: поверхность обязана быть невидимой целиком. */
.deka-player-seek-surface[b-hwetsldnxb]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
}

.deka-player-seek-surface[b-hwetsldnxb]::-moz-range-thumb {
    width: 0;
    height: 0;
    border: none;
}

/* Мобильная версия: поверхности нет, клик по бару доходит до него и открывает полный плеер. */
@media (max-width: 899px) {
    .deka-player-seek-surface[b-hwetsldnxb] {
        display: none;
    }
}

/* Ряд с контентом лежит НАД поверхностью перемотки, иначе она перехватывала бы кнопки и название.
   Но ряд растянут на весь бар - "пустой фон" это и есть он, и подняв его, мы закрыли бы поверхность
   целиком (z-index не умеет "выше контейнера, но ниже его детей"). Поэтому ряд не ловит события
   вовсе и пропускает клик насквозь, а интерактивные элементы ниже возвращают их себе точечно.
   Тот же приём применён у .deka-mini-player в MainLayout.
   ::deep: корень FlareStack - чужой компонент и scope этого файла не несёт. */
[b-hwetsldnxb] .deka-player-row {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* Кликабельное в ряду. FlareSpacer и текст времени сознательно НЕ включены: они занимают
   пустое место, и клик по ним обязан доходить до поверхности перемотки. */
.deka-player-controls[b-hwetsldnxb],
.deka-player-volume[b-hwetsldnxb],
[b-hwetsldnxb] .deka-player-title-block {
    pointer-events: auto;
}

/* Группа кнопок (prev / play-pause / next). Отдельный контейнер нужен, чтобы гасить всплытие
   клика до бара (иначе play/pause открывал бы полноэкранный плеер). */
.deka-player-controls[b-hwetsldnxb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
}

/* ВНИМАНИЕ: title-block - это FlareStack, а title/artist - FlareText (дочерние компоненты),
   их корни НЕ несут scope этого компонента. Поэтому selector'ы обязаны идти через ::deep
   (иначе `.deka-player-...[scope]` не совпадает - ровно почему мини-плеер раньше не обрезал
   и курсор был auto). Якорь ::deep - scoped-предок .deka-player-bar. */
/* flex: 0 1 auto, а не 1 1 auto: блок обязан облегать текст. Растянутый, он занимал полбара, и
   клик по видимо пустому месту попадал в название и открывал плеер вместо перемотки. Расти теперь
   некуда - свободное место забирает FlareSpacer, который событий не ловит. Сжиматься по-прежнему
   может, поэтому многоточие на узких экранах работает. */
[b-hwetsldnxb] .deka-player-title-block {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
}

[b-hwetsldnxb] .deka-player-title,
[b-hwetsldnxb] .deka-player-artist {
    /* align-self: stretch - блок колонка с Align=Start иначе сжимает spans до контента,
       и ellipsis не срабатывает; растягиваем на ширину блока, чтобы обрезалось по краю. */
    align-self: stretch;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

[b-hwetsldnxb] .deka-player-title {
    font-weight: 700;
    transition: color 0.15s ease;
}

[b-hwetsldnxb] .deka-player-artist {
    color: var(--flare-color-on-surface-variant);
}

/* Подсказка кликабельности: при наведении подсвечиваем название - так понятно,
   что по нему можно открыть полноэкранный плеер. */
[b-hwetsldnxb] .deka-player-title-block:hover .deka-player-title,
[b-hwetsldnxb] .deka-player-title-block:focus-visible .deka-player-title {
    color: var(--flare-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* /Components/Global/FullPlayer.razor.rz.scp.css */
.deka-full-player[b-6f81n2j53k] {
    position: fixed;
    inset: 0;
    z-index: 70;
    overflow: hidden;
}

.deka-full-player-bg[b-6f81n2j53k] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(2px);
    transform: scale(1.1);
}

.deka-full-player-scrim[b-6f81n2j53k] {
    position: absolute;
    inset: 0;
    /* Низ уходит в лёгкую тонировку цветом обложки (dynamic-color контейнер), с откатом
       на фон темы, если акцент не извлечён (--fc-container не задан). */
    background: linear-gradient(180deg, rgba(0, 0, 0, .25),
        color-mix(in srgb, var(--fc-container, var(--flare-color-background)) 45%, var(--flare-color-background)) 62%);
    backdrop-filter: blur(60px) saturate(1.3);
}

.deka-full-player-content[b-6f81n2j53k] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1.5rem 2rem;
    max-width: 32rem;
    margin: 0 auto;
    gap: 1rem;
}

.deka-full-player-header[b-6f81n2j53k] {
    width: 100%;
}

.deka-full-player-cover[b-6f81n2j53k] {
    width: min(74vw, 21rem);
    aspect-ratio: 1;
    border-radius: var(--flare-shape-extra-large);
    overflow: hidden;
    box-shadow: var(--flare-elevation-4);
    margin: auto 0;
}

.deka-full-player-info[b-6f81n2j53k] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: auto;
}

/* FlareText - дочерний компонент, класс на его корне без scope этого компонента,
   поэтому ::deep (иначе правило обрезки не совпадает). */
[b-6f81n2j53k] .deka-full-player-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.deka-full-player-transport[b-6f81n2j53k]  .flare-icon-button {
    flex: none;
}
/* /Layout/EmptyLayout.razor.rz.scp.css */
.deka-fullscreen[b-n5y86a05rs] {
    min-height: 100dvh;
    background: var(--flare-color-background);
    color: var(--flare-color-on-surface);
}
/* /Layout/MainLayout.razor.rz.scp.css */
.deka-shell[b-s0prg13r4d] {
    display: flex;
    flex-direction: column;
    /* Фиксируем оболочку в высоту вьюпорта и распределяем её через flex: мобильные header/bottom-nav
       занимают свою высоту, а FlareLayout - оставшееся место. Иначе .flare-layout со своими жёсткими
       height: 100dvh + header + nav давал суммарно > 100dvh: страница скроллилась, а меню уходило вниз
       за пределы экрана. overflow: hidden убирает внешний скролл - контент скроллится внутри FlareLayout. */
    height: 100dvh;
    overflow: hidden;
}

/* Переопределяем жёсткие .flare-layout { height: 100dvh } - пусть занимает остаток flex-колонки,
   чтобы bottom-nav (и mobile header) помещались во вьюпорт, а не выталкивались за него. */
.deka-shell[b-s0prg13r4d]  .flare-layout {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* На мобильном гасим горизонтальный паддинг контент-области FlareLayout (~18px по умолчанию),
   оставляя только узкий отступ от .deka-content (0.5rem) - списки/треки идут почти во всю ширину.
   padding-inline не трогает верхний отступ, который держит зазор над hero. */
@media (max-width: 959.98px) {
    .deka-shell[b-s0prg13r4d]  .flare-layout-content {
        padding-inline: 0;
    }
}

.deka-mobile-header[b-s0prg13r4d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    min-height: 3.5rem;
    background: var(--flare-color-background);
    border-bottom: 1px solid var(--flare-color-outline-variant);
    position: sticky;
    top: 0;
    z-index: 20;
}

.deka-mobile-lead[b-s0prg13r4d] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* Контекстный заголовок app bar (MD3): усечение длинных названий плейлистов
   вместо переноса - иначе хедер растёт по высоте и снова съедает место сверху. */
.deka-mobile-appbar-title[b-s0prg13r4d] {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Стрелка "назад" прижата к левому краю (компенсируем внутренний паддинг IconButton). */
.deka-mobile-back[b-s0prg13r4d] {
    margin-left: -0.5rem;
    flex: none;
}

.deka-mobile-brand[b-s0prg13r4d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--flare-color-on-surface);
}

.deka-mobile-brand-mark[b-s0prg13r4d] {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--flare-shape-small);
    background: var(--deka-gradient-accent);
    color: var(--flare-color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.deka-mobile-brand-name[b-s0prg13r4d] {
    font-size: 1.125rem;
    font-weight: 800;
}

.deka-mobile-avatar[b-s0prg13r4d] {
    display: inline-flex;
}

.deka-action-bar[b-s0prg13r4d] {
    padding: 0.5rem 1rem 0;
}

.deka-content[b-s0prg13r4d] {
    /* Верхний отступ на мобильном даёт сам FlareLayout (flare-layout-content ~1.25rem),
       поэтому здесь 0 - иначе паддинги складывались и над контентом висела лишняя пустота.
       Боковой отступ на мобильном узкий (0.5rem) - чтобы списки/треки шли почти во всю ширину. */
    padding: 0 0.5rem 9rem;
    max-width: 70rem;
    margin: 0 auto;
    width: 100%;
}

/* 960px = брейкпоинт Md, на котором FlareLayout переключается на десктоп (постоянный drawer 15.5rem)
   и скрываются мобильные header/bottom-nav. Держим CSS плеера/контента в тех же границах, иначе в
   диапазоне 769-959 плеер уезжал вправо на 248px при full-width контенте и off-canvas меню. */
@media (min-width: 960px) {
    .deka-content[b-s0prg13r4d] {
        padding: 2rem 2.5rem 6rem;
    }
}

/* Плеер накладывается поверх контента (position: fixed), а не занимает место в потоке.
   .flare-layout имеет height: 100dvh; overflow: hidden - поэтому sticky-плеер добавлял
   свою высоту к .deka-shell, вызывая внешний скролл body и уезжающее вместе с ним меню.
   Место под плеер зарезервировано через padding-bottom у .deka-content. */
.deka-mini-player[b-s0prg13r4d] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(3.75rem + env(safe-area-inset-bottom));
    z-index: 25;
    padding: 0 0.625rem;
    max-width: 70rem;
    margin: 0 auto;
    width: 100%;
    pointer-events: none;
}

/* Плеер-бар рендерится компонентом AudioPlayer и несёт ЕГО scope-атрибут, поэтому
   без ::deep правило компилируется в `> *[scope-MainLayout]` и не совпадает - бар
   наследует pointer-events: none от контейнера и кнопки становятся некликабельными. */
.deka-mini-player[b-s0prg13r4d]  > * {
    pointer-events: auto;
}

/* 960px = брейкпоинт Md, на котором FlareLayout переключается на десктоп (постоянный drawer 15.5rem)
   и скрываются мобильные header/bottom-nav. Держим CSS плеера/контента в тех же границах, иначе в
   диапазоне 769-959 плеер уезжал вправо на 248px при full-width контенте и off-canvas меню. */
@media (min-width: 960px) {
    .deka-mini-player[b-s0prg13r4d] {
        /* Плеер прижат к колонке контента (левый край на ширину drawer 15.5rem, правый - к краю окна)
           и капается на те же 70rem по центру, что и .deka-content, - чтобы на широких экранах бар
           был выровнен со списком треков, а не тянулся шире него. */
        left: 15.5rem;
        right: 0;
        width: auto;
        max-width: 70rem;
        margin-inline: auto;
        bottom: 0.625rem;
        padding: 0 2.5rem;
    }
}

.deka-bottom-nav[b-s0prg13r4d] {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
    /* "Обтекаемая" панель: фон в цвет страницы и без верхней границы - раньше панель
       на surface-container-low с чёткой линией "отрезалась" от контента и выделялась.
       Лёгкое размытие сглаживает край, когда под ней проскроллен список. */
    background: color-mix(in srgb, var(--flare-color-background) 80%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    bottom: 0;
    z-index: 20;
}

    .deka-bottom-nav[b-s0prg13r4d]  .flare-nav-link {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
        padding: 0.375rem 0.25rem;
        font-size: 0.6875rem;
        font-weight: 600;
        border-radius: var(--flare-shape-medium);
        color: var(--flare-color-on-surface-variant);
    }

    .deka-bottom-nav[b-s0prg13r4d]  .flare-nav-link--active {
        color: var(--flare-color-primary);
    }

    .deka-bottom-nav[b-s0prg13r4d]  .flare-nav-link__icon {
        margin: 0;
    }
/* /Layout/NavMenu.razor.rz.scp.css */
.deka-nav-brand[b-73mmf5rqou] {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    text-decoration: none;
    color: var(--flare-color-on-surface);
    padding: 0.375rem 0.5rem 1.25rem;
}

.deka-nav-brand-mark[b-73mmf5rqou] {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: var(--flare-shape-medium);
    background: var(--deka-gradient-accent);
    color: var(--flare-color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.deka-nav-brand-name[b-73mmf5rqou] {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.deka-nav-account[b-73mmf5rqou] {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    padding: 0.75rem 0.625rem;
    text-decoration: none;
    color: var(--flare-color-on-surface);
    border-top: 1px solid var(--flare-color-outline-variant);
    border-radius: 0 0 var(--flare-shape-medium) var(--flare-shape-medium);
}

.deka-nav-account:hover[b-73mmf5rqou] {
    background: var(--flare-color-surface-container-high);
}

.deka-nav-account-name[b-73mmf5rqou] {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Pages/MyPlaylists.razor.rz.scp.css */
.deka-card-grid[b-dmracs9rl6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 16px;
}

.deka-tile[b-dmracs9rl6] {
    position: relative;
    display: block;
}

.deka-tile-cover[b-dmracs9rl6] {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--flare-shape-small);
    overflow: hidden;
    margin-bottom: 12px;
}

.deka-tile-cover-img[b-dmracs9rl6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.deka-tile-cover-placeholder[b-dmracs9rl6] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--deka-gradient-accent);
    color: var(--flare-color-on-primary);
}

.deka-tile-cover-shade[b-dmracs9rl6] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35));
}

.deka-tile-count[b-dmracs9rl6] {
    position: absolute;
    left: 10px;
    bottom: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.deka-tile-title[b-dmracs9rl6] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deka-tile-sub[b-dmracs9rl6] {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--flare-color-on-surface-variant);
}

.deka-tile-action[b-dmracs9rl6] {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: var(--flare-shape-small);
    background: var(--deka-glass);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.deka-tile-owner[b-dmracs9rl6] {
    margin-top: 6px;
}

.deka-tile-owner-name[b-dmracs9rl6] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--flare-color-on-surface-variant);
}

.deka-section[b-dmracs9rl6] {
    margin-bottom: 34px;
}

.deka-section-heading[b-dmracs9rl6] {
    margin-bottom: 16px;
}

.deka-my-playlists-heading[b-dmracs9rl6] {
    margin-bottom: 26px;
}

.deka-eyebrow[b-dmracs9rl6] {
    letter-spacing: 0.08em;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}

.deka-sync-indicator[b-dmracs9rl6] {
    color: var(--flare-color-on-surface-variant);
    flex: none;
}
/* /Pages/Profile.razor.rz.scp.css */
.account-badge[b-nyr5u41t29] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: var(--flare-shape-medium);
}

.account-badge--connected[b-nyr5u41t29] {
    background: var(--deka-gradient-accent);
    color: var(--flare-color-on-primary);
}

.account-badge--disconnected[b-nyr5u41t29] {
    background: var(--flare-color-surface-container-high);
    border: 1px solid var(--flare-color-outline-variant);
    color: var(--flare-color-on-surface-variant);
}

.account-info[b-nyr5u41t29] {
    flex: 1;
    min-width: 0;
}

.theme-mode-chip[b-nyr5u41t29] {
    flex: 1;
    justify-content: center;
}
/* /Pages/SharedPlaylistView.razor.rz.scp.css */
[b-9ogzkqllec] .deka-back-btn {
    margin-bottom: 1rem;
}

/* Десктоп: обложка слева, справа колонка "описание, под ним действия". Обложка занимает обе
   строки, поэтому её область указана в обеих. На мобильном раскладка меняется ниже. */
.deka-playlist-hero[b-9ogzkqllec] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "cover info"
        "cover actions";
    align-content: end;
    gap: 0.75rem 1.375rem;
    margin-bottom: 1.5rem;
}

/* FlareImage/FlareStack рендерят корень своим компонентом (чужой scope), поэтому ::deep
   обязателен: без него scoped-CSS компилирует правило в `.deka-playlist-hero .deka-playlist-cover[scope]`
   (атрибут вешается на ПОСЛЕДНИЙ селектор), у чужого корня его нет - и область молча не
   применяется. С ::deep атрибут уходит на предка: `.deka-playlist-hero[scope] .deka-playlist-cover`,
   что совпадает и с корнем FlareImage, и с литеральным div-фолбэком обложки. */
.deka-playlist-hero[b-9ogzkqllec]  .deka-playlist-cover {
    grid-area: cover;
    align-self: end;
}

.deka-playlist-hero[b-9ogzkqllec]  .deka-playlist-info {
    grid-area: info;
    align-self: end;
}

.deka-playlist-cover[b-9ogzkqllec] {
    border-radius: var(--flare-shape-large);
    flex: none;
    box-shadow: var(--flare-elevation-1);
    object-fit: cover;
}

.deka-playlist-cover--fallback[b-9ogzkqllec] {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--flare-color-primary-container);
    color: var(--flare-color-on-primary-container);
    font-size: 2rem;
}

.deka-playlist-cover--lg[b-9ogzkqllec] {
    width: 172px;
    height: 172px;
    font-size: 3rem;
}

.deka-playlist-eyebrow[b-9ogzkqllec] {
    letter-spacing: 0.08em;
    font-weight: 700;
}

.deka-playlist-title[b-9ogzkqllec] {
    letter-spacing: -0.01em;
    margin-bottom: 0.375rem;
}

.deka-playlist-actions[b-9ogzkqllec] {
    grid-area: actions;
    /* Прижимаемся к верху своей строки, а описание - к низу своей: обложка выше их суммы и
       растягивает обе строки, поэтому без выравнивания кнопки повисали бы в середине пустой
       строки, оторванные от описания. Так они читаются одним блоком с ним. */
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    /* Блок лежит внутри hero, отступ до списка треков даёт margin-bottom самого hero. */
    margin: 0;
}

/* Группа icon-кнопок (share / yandex / settings) - держится единым блоком. */
.deka-playlist-icon-actions[b-9ogzkqllec] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

/* Центрирование глифа icon-кнопок вынесено в глобальный deka.css
   (.flare-btn--icon-only .flare-btn__icon--leading) - работает для всех кнопок приложения. */

/* Компактный hero на телефонах (MD3-стиль): обложка ужимается и встаёт рядом с
   названием одной строкой, а не занимает почти пол-экрана. Действия - ниже, во всю ширину. */
@media (max-width: 600px) {
    /* Мобильный: обложка ужимается и встаёт рядом с названием, а действия уходят отдельной
       строкой во всю ширину (в узкой инфо-колонке они бы не поместились). */
    .deka-playlist-hero[b-9ogzkqllec] {
        grid-template-areas:
            "cover info"
            "actions actions";
        align-items: center;
        gap: 0.75rem 1rem;
        margin-bottom: 0.75rem;
    }

    /* Обложка: у FlareImage <img> рендерится дочерним компонентом (свой scope), а fallback -
       литеральный div этого компонента. ::deep .deka-playlist-cover покрывает оба (совпадает
       по потомку независимо от scope), поэтому !important гарантированно перебьёт inline-размер. */
    .deka-playlist-hero[b-9ogzkqllec]  .deka-playlist-cover {
        width: 80px !important;
        height: 80px !important;
    }

    .deka-playlist-cover--lg[b-9ogzkqllec] {
        font-size: 1.75rem;
    }

    .deka-playlist-title[b-9ogzkqllec] {
        font-size: 1.375rem;
        line-height: 1.2;
    }

    .deka-playlist-actions[b-9ogzkqllec] {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
}

/* Плитка строки трека - literal-элемент этого компонента, поэтому scoped-класс
   без ::deep (с ::deep правило компилируется в [scope] .deka-track-row-item и не
   совпадает, из-за чего строка не растягивалась и обрезалась по контенту). */
.deka-track-row-item[b-9ogzkqllec] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Кнопка удаления не должна сжиматься флексом: иначе на узких экранах место делится между
   инфо-блоком и кнопкой неравномерно (кнопка "плавает" 25-40px) и ширина строк рвётся. */
.deka-track-remove[b-9ogzkqllec] {
    flex: none;
}