@font-face {
    font-family: 'Roboto Slab';
    src: url('../font/robotoslab-regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

:root {
    --text: #eee;
    --muted: #b4b4b4;
    --panel: rgba(0, 0, 0, .42);
    --panel-2: rgba(0, 0, 0, .62);
    --bar: rgba(10, 10, 10, .92);
    --accent: #3d94f6;
    --radius: 8px;
    --shadow: 0 4px 18px rgba(0, 0, 0, .55);
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-alt: 'Roboto Slab', Georgia, serif;
    --player-h: 88px;
    --gutter: 16px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    min-height: 100vh;
    padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom));
    color: var(--text);
    font: 16px/1.45 var(--font);
    background: #0b0b0b url('../img/bg.jpg');
    overscroll-behavior-y: none;
}

img {
    display: block;
    max-width: 100%;
}

h1,
h2 {
    margin: 0;
    font-family: var(--font-alt);
    font-weight: 400;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- фон ---------- */

.backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .65;
    background: var(--art, linear-gradient(135deg, #1b2a4a, #0d0d12));
    background-size: cover;
    filter: blur(0.3px) saturate(1.1);
    transform: scale(1.06);
    transition: opacity .5s ease;
}

/* Фотография лежит отдельными слоями, а не в background самого фона:
   background-image не анимируется, поэтому картинка подменялась рывком.
   Слоёв два, они по очереди проявляются друг поверх друга. */
.backdrop__layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-repeat: no-repeat;
    background-size: cover;
    /* Фото исполнителей обычно шире, чем экран пользователя, и лица на них
       ближе к верху кадра, чем к центру — центрирование по вертикали
       обрезает головы. Сдвигаем точку привязки повыше. */
    background-position: center 22%;
    transition: opacity .7s ease;
}

/* Затемнение поверх фотографии: фон родителя рисуется под детьми,
   поэтому оно вынесено в псевдоэлемент, лежащий выше слоёв. */
.backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .8));
}

/* ---------- каркас ---------- */

.page {
    width: min(100% - 2 * var(--gutter), 1000px);
    margin-inline: auto;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    transition: box-shadow .2s ease;
}

.topbar__inner {
    width: min(100% - 2 * var(--gutter), 1000px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--gutter);
    padding: 10px 0;
}

.topbar .search {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(11, 11, 13, .72);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .2s ease;
}

.topbar.is-stuck::before {
    opacity: 1;
}

.topbar.is-stuck {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.topbar-sentinel {
    height: 1px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    font-family: var(--font-alt);
    font-size: 22px;
}

.logo img {
    width: 30px;
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
}

.search:focus-within {
    border-color: var(--accent);
}

.search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    padding: 6px 0;
}

.search__input::-webkit-search-cancel-button {
    filter: invert(1);
}

.search__submit {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}

.search__submit:hover {
    background-color: rgba(255, 255, 255, .22);
}

.suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: min(60vh, 420px);
    overflow: hidden auto;
    border-radius: var(--radius);
    background: rgba(14, 14, 16, .97);
    box-shadow: var(--shadow);
}

.suggest__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
}

.suggest__row:hover,
.suggest__row:focus-visible {
    background: rgba(255, 255, 255, .08);
    outline: none;
}

.suggest__row img {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
}

.suggest__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggest__kind {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
}

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tabs button {
    flex: 1 1 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--muted);
    font-size: 15px;
    background: rgba(0, 0, 0, .3);
}

.tabs button.is-active {
    border-color: transparent;
    color: #fff;
    background: var(--accent);
}

.main {
    padding-block: 6px 24px;
}

/* ---------- секции ---------- */

/* Заголовки лежат прямо на фотографии исполнителя и на светлых её местах
   теряются. Полупрозрачная подложка отделяет их от фона, тень добавляет
   контраста самим буквам. */
.pagetitle {
    margin: 4px 0 12px;
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 24px;
    background: rgba(0, 0, 0, .42);
    backdrop-filter: blur(6px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.sect {
    margin-bottom: 22px;
}

.sect__title {
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: var(--radius);
    font-size: 20px;
    color: #fff;
    background: rgba(0, 0, 0, .42);
    backdrop-filter: blur(6px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.empty {
    padding: 40px 10px;
    color: var(--muted);
    text-align: center;
}

.loading {
    padding: 36px 0;
    color: var(--muted);
    text-align: center;
}

.loading::after {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 12px auto 0;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

/* ---------- сетка исполнителей ---------- */

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

.artist {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: #1b1b22;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.artist:hover,
.artist:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    outline: none;
}

.artist img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist span {
    position: absolute;
    inset: auto 0 0;
    padding: 6px 8px;
    font-family: var(--font-alt);
    font-size: 15px;
    background: linear-gradient(#0000, #000c 45%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- страница исполнителя ---------- */

.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 14px;
    background: rgba(0, 0, 0, .35);
}

.back::before {
    content: '';
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.back:hover {
    color: #fff;
}

.hero {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    margin-bottom: 24px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.hero__art {
    width: 160px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
}

.hero__name {
    font-size: 30px;
    line-height: 1.15;
}

.hero__tags {
    margin: 4px 0 10px;
    color: var(--muted);
    font-size: 14px;
}

.hero__bio {
    margin: 0;
    font-size: 15px;
    color: #ddd;
}

.hero__bio.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.hero__more {
    margin-top: 6px;
    padding: 0;
    color: var(--accent);
    font-size: 14px;
}

/* Внешний вид основной кнопки отделён от её места в сетке шапки:
   раньше класс переиспользовался в других рядах и тащил за собой
   margin-top и grid-column, из-за чего кнопка съезжала относительно соседей. */
.primarybtn {
    padding: 8px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    background: var(--accent);
}

.primarybtn:hover {
    filter: brightness(1.12);
}

.primarybtn--danger {
    background: #d2445c;
}

.hero__play {
    grid-column: 2;
    justify-self: start;
    margin-top: 12px;
}

/* ---------- треки ---------- */

.tracklist {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.mtrack {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 9px 12px;
    border-radius: var(--radius);
    background: var(--row, rgba(0, 0, 0, .35));
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mtrack:hover {
    background: rgba(255, 255, 255, .08);
}

.mtrack.is-current {
    background: rgba(0, 0, 0, .7);
    box-shadow: inset 2px 0 0 var(--accent);
}

.mtrack.is-current:hover {
    background: rgba(0, 0, 0, .62);
}

.mtrack__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.mtrack__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mtrack__duration {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.loadmore {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 15px;
}

.loadmore:hover {
    border-color: var(--accent);
    color: #fff;
}

/* ---------- альбомы ---------- */

.albums {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.album {
    min-width: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel);
}

.album__head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
}

.album__head:hover {
    background: rgba(255, 255, 255, .06);
}

.album__cover {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    object-fit: cover;
}

.album__text {
    flex: 1 1 auto;
    min-width: 0;
}

.album__name {
    display: block;
    font-family: var(--font-alt);
    font-size: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album__meta {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.album__arrow {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.album.is-open .album__arrow {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.album__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}

.album.is-open .album__body {
    grid-template-rows: 1fr;
}

.album__body > div {
    overflow: hidden;
}

.album__body .tracklist {
    padding: 0 10px 10px;
}

.album__body {
    --row: rgba(0, 0, 0, .25);
}

/* ---------- плеер ---------- */

.player {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    padding: 6px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--bar);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .6);
    transform: translateY(110%);
    transition: transform .3s ease;
    user-select: none;
}

.player.is-open {
    transform: none;
}

.seek {
    position: relative;
    height: 6px;
    margin-bottom: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .18);
    cursor: pointer;
    overflow: hidden;
    touch-action: none;
}

.seek::before {
    content: '';
    position: absolute;
    inset: -10px 0;
}

.seek__buffer,
.seek__play {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 3px;
}

.seek__buffer {
    background: rgba(255, 255, 255, .22);
}

.seek__play {
    background: var(--accent);
}

.player__body {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cover {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 52px;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    transition: transform .15s ease;
}

.cover:enabled:hover {
    transform: scale(1.06);
}

.cover:disabled {
    cursor: default;
}

/* Коробка компакт-диска: узкий тёмный корешок строго слева ДОБАВЛЕН
   к площади обложки, а не вырезан из неё — поэтому вся коробка целиком
   шире, чем высота (прямоугольник, не квадрат), а сама обложка сохраняет
   тот же размер, что и без корешка, и ничем не обрезается. */
.cdcase {
    display: flex;
    width: 100%;
    height: 100%;
}

.cdcase__spine {
    flex: 0 0 10px;
    background: linear-gradient(90deg, #050505 0%, #2c2c2c 55%, #0a0a0a 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .15), inset 1px 0 0 rgba(0, 0, 0, .6);
}

.cdcase__front {
    flex: 1 1 auto;
    overflow: hidden;
}

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

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

.player__title {
    font-family: var(--font-alt);
    font-size: clamp(14px, 2.2vw, 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player__title span {
    display: inline-block;
}

/* Название, не влезающее в отведённую ширину, ездит туда-обратно
   с паузами на краях. Сдвиг и длительность считает JS — они зависят
   от того, насколько текст длиннее места под него. */
.player__title.is-marquee {
    text-overflow: clip;
}

.player__title.is-marquee span {
    animation: marquee var(--marquee-time, 8s) ease-in-out infinite;
}

@keyframes marquee {
    0%, 14% {
        transform: translateX(0);
    }
    50%, 64% {
        transform: translateX(var(--marquee-shift, 0));
    }
    100% {
        transform: translateX(0);
    }
}

.player__side {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
}

.player__sub {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.player__album {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    color: var(--muted);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player__album:hover {
    color: #fff;
}

.player__time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

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

.pbtn {
    width: 40px;
    height: 40px;
    background: no-repeat center / contain;
    transition: transform .12s ease;
}

.pbtn:active {
    transform: scale(.92);
}

.pbtn--prev {
    background-image: url('../img/prev.svg');
}

.pbtn--next {
    background-image: url('../img/next.svg');
}

.pbtn--play {
    width: 52px;
    height: 52px;
    background-image: url('../img/play.svg');
}

.pbtn--play[data-state='play'] {
    background-image: url('../img/pause.svg');
}

.lyricsbtn {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: var(--muted);
    font-size: 14px;
}

.lyricsbtn[aria-expanded='true'] {
    border-color: var(--accent);
    color: #fff;
}

.volume {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
}

.volume input {
    width: 100%;
    height: 6px;
    appearance: none;
    border-radius: 3px;
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
}

.volume input::-webkit-slider-thumb {
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
}

.volume input::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

/* ---------- панель текста ---------- */

[hidden] {
    display: none !important;
}

.sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: flex-end;
}

.sheet__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    background: rgba(12, 12, 14, .97);
    box-shadow: var(--shadow);
    animation: slide-in .25s ease;
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
    }
}

.sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sheet__title {
    font-size: 18px;
}

.sheet__close {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.sheet__close::before,
.sheet__close::after {
    content: '';
    position: absolute;
    inset: 50% 9px auto;
    height: 2px;
    background: currentColor;
}

.sheet__close::before {
    transform: rotate(45deg);
}

.sheet__close::after {
    transform: rotate(-45deg);
}

.sheet__body {
    flex: 1 1 auto;
    padding: 16px;
    padding-bottom: calc(var(--player-h) + 16px);
    overflow: hidden auto;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
    color: #ddd;
}

/* ---------- уведомление ---------- */

.toast {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(360px, calc(100% - 24px));
    padding: 11px 18px 11px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.3;
    background: rgba(24, 24, 28, .92);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translate(-50%, -16px) scale(.96);
    transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
    pointer-events: none;
}

.toast::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22) no-repeat center / 11px;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.toast.is-success::before {
    background-color: #2fa76a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.toast.is-error::before {
    background-color: #d2445c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* ---------- планшет ---------- */

@media (max-width: 760px) {
    .hero {
        grid-template-columns: 110px 1fr;
        gap: 14px;
        padding: 12px;
    }

    .hero__art {
        width: 110px;
    }

    .hero__name {
        font-size: 22px;
    }

    .hero__play {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: center;
    }
}

/* ---------- смартфон ---------- */

@media (max-width: 560px) {
    :root {
        --gutter: 12px;
        --player-h: 128px;
    }

    .topbar__inner {
        gap: 8px 10px;
    }

    .logo span {
        display: none;
    }

    .tabs button {
        padding: 8px 10px;
        font-size: 14px;
    }

    .tabs {
        margin-bottom: 12px;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 10px;
    }

    .pagetitle {
        font-size: 20px;
    }

    .hero__bio {
        font-size: 14px;
    }

    .album__cover {
        width: 52px;
        height: 52px;
    }

    .album__name {
        font-size: 17px;
    }

    .mtrack {
        padding: 10px;
    }

    .player__body {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }

    .player__meta {
        order: 1;
    }

    .cover {
        order: 0;
        width: 52px;
        height: 44px;
    }

    .cdcase__spine {
        flex-basis: 8px;
    }

    .player__side {
        order: 2;
        margin-left: 0;
    }

    .playerbtn {
        width: 32px;
        height: 32px;
    }

    .player__nav {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        gap: 18px;
    }

    .volume {
        display: none;
    }

    .sheet__panel {
        width: 100%;
        margin-top: 15vh;
        border-radius: var(--radius) var(--radius) 0 0;
        animation-name: slide-up;
    }

    @keyframes slide-up {
        from {
            transform: translateY(100%);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media (hover: none) {
    .artist:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ---------- избранное и плейлисты ---------- */

.playerbtn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    opacity: .6;
    background: no-repeat center / 19px;
    transition: opacity .15s ease, transform .12s ease, background-color .15s ease;
}

.playerbtn:enabled:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, .12);
}

.playerbtn:active {
    transform: scale(.9);
}

.playerbtn:disabled {
    opacity: .2;
    cursor: default;
}

.playerbtn--fav {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M12 20s-7-4.6-7-9.3A4 4 0 0 1 12 8a4 4 0 0 1 7 2.7C19 15.4 12 20 12 20z'/%3E%3C/svg%3E");
}

.playerbtn--fav.is-on {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff5a7a'%3E%3Cpath d='M12 20s-7-4.6-7-9.3A4 4 0 0 1 12 8a4 4 0 0 1 7 2.7C19 15.4 12 20 12 20z'/%3E%3C/svg%3E");
}

.playerbtn--add {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
}

.ghostbtn {
    padding: 8px 18px;
    line-height: 20px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: var(--muted);
    font-size: 14px;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.ghostbtn:hover {
    border-color: var(--accent);
    color: #fff;
    background: rgba(61, 148, 246, .16);
}

.ghostbtn--danger:hover {
    border-color: #e2536b;
    background: rgba(226, 83, 107, .16);
}

.rowtools {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
}

/* Сбрасываем всё, что кнопка могла принести из своего исходного места */
.rowtools > button {
    margin: 0;
    align-self: center;
}

.sect__title {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Кнопку вправо двигаем ею самой, а не space-between: в заголовках без
   кнопки распорка растащила бы содержимое по краям подложки. */
.sect__title > button {
    margin-left: auto;
}

.playlists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.playlist {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    background: var(--panel);
    text-align: left;
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

.playlist:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
}

.playlist__art {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.playlist__letter {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-alt);
    font-size: 22px;
    color: rgba(255, 255, 255, .85);
}

.playlist__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.playlist__name {
    font-family: var(--font-alt);
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist__count {
    color: var(--muted);
    font-size: 13px;
}

/* ---------- модальное окно ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

.modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    max-height: 80vh;
    border-radius: var(--radius);
    background: rgba(16, 16, 19, .98);
    box-shadow: var(--shadow);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.modal__title {
    font-size: 18px;
}

.modal__body {
    padding: 12px 16px 16px;
    overflow: hidden auto;
}

.modal__text {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.picker {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
}

.picker__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    text-align: left;
}

.picker__row:hover {
    background: rgba(255, 255, 255, .12);
}

.newlist {
    display: flex;
    gap: 8px;
}

.newlist input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    outline: none;
}

.newlist input:focus {
    border-color: var(--accent);
}