/* Тест: палитра и шрифты как на comusic.ru. Подключается последним. */
:root {
    --font-sans: "Onest", system-ui, sans-serif;
    --font-headline: "Manrope", "Onest", system-ui, sans-serif;
    --color-background: #14181C;
    --color-background-light: #232a25;
    --color-background-lighter: #2a322c;
    --color-background-card: #232a25;
    --color-foreground: #ffffff;
    --color-foreground-muted: #b8bec8;
    --color-foreground-dim: #8b939e;
    --color-accent: #43c751;
    --color-accent-dark: #38b046;
    --color-accent-light: #cfff9a;
    --color-sidebar: #14181C;
    --bs-primary: #43C751;
    --bs-primary-rgb: 67, 199, 81;
    --bs-body-bg: #14181C;
    --bs-body-color: #ffffff;
    --bs-sidebar-color: #b8bec8;
    --bs-secondary-color: #b8bec8;
}

html, body {
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6,
.spotlight-card__content h5,
.playlist-card-title,
.collection-card-title,
.desktop-notifs__title {
    font-family: var(--font-headline) !important;
    font-weight: 600;
}

h3.page-title,
.page-title {
    font-family: var(--font-sans) !important;
    font-weight: 200 !important;
}

.page-title.mb-0.fw-bold {
    font-weight: 700 !important;
    font-size: 2rem !important;
}

.page-header h1,
.mobile-hero-header h1 {
    font-family: var(--font-headline) !important;
    font-weight: 800 !important;
}

.main-container .main-content {
    background: #14181C !important;
}

.main-container .sidebar {
    background: #14181C !important;
}

.player-container {
    background-color: rgba(16, 20, 17, 0.58) !important;
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28);
}

@media (max-width: 940px) {
    .player-container {
        background-color: rgba(16, 20, 17, 0.88) !important;
        border-radius: 0;
    }
}

.dropdown-menu {
    --bs-dropdown-bg: #1c1c1cf2;
    --bs-dropdown-link-hover-color: #ffffff;
}

.text-muted,
.page-header .text-muted {
    color: #8b939e !important;
}
.page-header.playlist-hero .text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Баннеры: рамка фиксированной высоты — title/оверлей не уезжают при rubber-band */
.spotlight-card__frame {
    position: relative;
    height: 180px;
    max-height: 180px;
    border-radius: 12px;
    overflow: hidden;
    transform: translateZ(0);
}
.spotlight-card__frame .spotlight-card__media {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
}
.spotlight-card__frame .spotlight-card__overlay,
.spotlight-card__frame .spotlight-card__badge,
.spotlight-card__frame .spotlight-card__content {
    z-index: 2;
}
.spotlight-card__frame .spotlight-card__overlay {
    z-index: 1;
}

@media (min-width: 992px) {
    .spotlight-card__frame,
    .spotlight-row__item .spotlight-card__frame {
        height: 180px;
        max-height: 180px;
    }
    .spotlight-scrolls--three .spotlight-card__frame,
    .spotlight-scrolls--three .spotlight-row__item .spotlight-card__frame {
        height: 200px;
        max-height: 200px;
    }
}

@media (max-width: 991.98px) {
    .spotlight-card,
    .spotlight-card__frame,
    .spotlight-row__item .spotlight-card__frame {
        height: 148px;
        max-height: 148px;
        flex-shrink: 0;
    }

    .spotlight-row {
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
    }
}

@media (max-width: 575.98px) {
    .spotlight-card,
    .spotlight-card__frame,
    .spotlight-row__item .spotlight-card__frame {
        height: 180px;
        max-height: 180px;
    }

    /* Подсказка «Для вас» — не режем текст, ближе к заголовку */
    #modal-window .modal-content.modal-for-you .modal-header {
        padding-top: 12px !important;
        padding-bottom: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    #modal-window .modal-for-you-body {
        padding-top: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    #modal-window .modal-for-you-hint {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        max-height: none !important;
        white-space: normal;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
}