body {
    /* светлый общий фон в розовой гамме */
    background: var(--bs-body-bg); /* #fff6fb из темы */
}

a:hover {
    /* hover-ссылок в тон палитре */
    color: var(--bs-link-hover-color); /* #ff7fbe */
}

.m-hov:hover {
    /* лёгкий розовый подсвет при ховере */
    background-color: var(--bs-primary-bg-subtle) !important; /* #ffe1f1 */
}

.l-m-hov:hover {
    /* обычно это текст на тёмном фоне (меню/футер) — оставим белый */
    color: #fff !important;
}

.m-active {
    background: var(--bs-primary-bg-subtle) !important;
}

.navbar {
    /* мягкий розовый верхний бар */
    background: #d7f0e7;
}

.nav-btn-color {
    background: #bbd5cb;
}

.cat-card,
.video-card,
.stat-card,
.desc-card {
    /* карточки в мягком розовом фоне */
    background: var(--bs-secondary-bg);          /* #f5e0ee */
    border: 1px solid var(--bs-secondary-border-subtle); /* #d7bfd0 */
}

.tag-card {
    background: var(--bs-light-bg);          /* #f5e0ee */
    border: 1px solid var(--bs-secondary-border-subtle); /* #d7bfd0 */
}

.thumb {
    position: relative;
    overflow: hidden;
    border-radius: .35rem;
}

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

.badge-count {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

.badge-dur {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
}

.badge-rat {
    position: absolute;
    top: .5rem;
    left: .5rem;
}

.cat-title {
    padding: .5rem .6rem;
    font-weight: 600;
    font-size: .98rem;
	color: #6b2947;
}

.section-title {
    font-weight: 700;
    letter-spacing: .2px;
}

.footer {
    /* тёмный сливовый футер под розовую тему */
    background: #20574f;
    border-top: 1px solid #3f2233;
}

.nav-tabs .nav-link {
    border: 0;
    color: var(--bs-gray-500); /* #b792aa, спокойный розово-серый */
}

.nav-tabs .nav-link.active {
    color: #fff;
    border-bottom: 2px solid var(--bs-primary); /* #ff8fc7 */
}

.tag-card a {
    color: var(--bs-gray-500); /* #b792aa */
    font-size: 12px;
}

.dots {
    height: 16px;
    margin: 0 5px;
    background: -webkit-linear-gradient(left, #b792aa 25%, transparent 0) 0 100% repeat-x;
    background: linear-gradient(to right, #b792aa 25%, transparent 0) 0 100% repeat-x;
    background-size: 4px 1px;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}


/* Горизонтальный скролл для букв на мобилках */
.tag-letters-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
}

.tag-letters-wrapper .btn-group {
    white-space: nowrap;
}

/* Компактные pill-кнопки для тегов */
.tag-pill {
    padding-inline: .75rem;
    padding-block: .25rem;
    font-size: .85rem;
}

/* Чуть сжать вертикальные отступы в списке, чтобы 1000 тегов влезали комфортно */
.categories-list section + section {
    border-top: 1px solid rgba(38, 24, 34, .08); /* вместо чистого чёрного */
    padding-top: .75rem;
}

/* Плитки моделей под розовую тему */

.model-tile {
    background-color: var(--bs-secondary-bg); /* #f5e0ee */
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.2s ease;
    border: 1px solid var(--bs-secondary-border-subtle);
}

.model-tile:hover {
    background-color: var(--bs-primary-bg-subtle); /* #ffe1f1 */
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(18, 9, 16, 0.18);
}

.model-avatar-tile {
    min-width: 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #6fd3b0, #143226);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fdf5f9;
    font-weight: bold;
    text-transform: uppercase;
}

.model-info {
    flex-grow: 1;
    min-width: 0;
}

.model-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-body-color); /* тёмный текст */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.model-count {
    font-size: 13px;
    color: var(--bs-secondary-color); /* приглушённый текст */
}

@media (min-width: 992px) {
    .model-avatar {
        width: 56px;
        height: 56px;
    }
}