/* ==========================================================================
   Сообщество AniBaza: закладки, лента, новости, профили, коллекции, группы,
   уведомления, личные сообщения. Токены — из static/styles/main.css.
   ========================================================================== */

:root {
    --status-watching: #01ae4c;
    --status-completed: #3d8bff;
    --status-dropped: #ff4d5e;
    --status-on_hold: #f5c518;
    --status-planned: #a66bff;
    --danger-color: #ff4d5e;
}

/* ---------- Общие элементы ---------- */

.cm-page {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--page-gutter) 4rem;
}

.cm-page_narrow {
    max-width: 980px;
}

.cm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.cm-head .section__title {
    margin: 0;
}

.cm-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cm-muted {
    color: var(--text-color-muted);
}

.cm-faint {
    color: var(--text-color-faint);
    font-size: 14px;
}

.cm-panel {
    padding: clamp(18px, 2vw, 32px);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

.cm-panel + .cm-panel {
    margin-top: 20px;
}

.cm-panel__title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.cm-empty {
    padding: 48px 20px;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-color);
    text-align: center;
    color: var(--text-color-muted);
}

.cm-empty p {
    margin: 0 0 16px;
    color: inherit;
}

/* Небольшая кнопка-пилюля: вторичная (стекло) и основная */
.cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, filter .2s ease;
}

.cm-btn:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.cm-btn_primary {
    border-color: transparent;
    background: var(--accent-gradient);
}

.cm-btn_primary:hover {
    background: var(--accent-gradient);
    filter: brightness(1.1);
}

.cm-btn_danger {
    color: var(--danger-color);
}

.cm-btn_danger:hover {
    color: var(--danger-color);
}

.cm-btn_sm {
    min-height: 32px;
    padding: 0 14px;
    font-size: 14px;
}

.cm-btn[disabled] {
    opacity: .5;
    cursor: default;
}

.cm-btn svg {
    width: 18px;
    height: 18px;
}

/* Вкладки-пилюли */
.cm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.cm-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .03);
    color: var(--text-color-muted);
    font-size: 15px;
    transition: background-color .2s ease, color .2s ease;
}

.cm-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.cm-tab.is-active {
    color: #fff;
    border-color: transparent;
    background: var(--accent-gradient);
}

.cm-tab__count {
    font-size: 13px;
    color: inherit;
    opacity: .75;
}

/* Поля ввода */
.field,
.cm-field {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: border-color .2s ease;
}

.field:focus,
.cm-field:focus {
    border-color: var(--text-color-emphasis);
}

.field::placeholder,
.cm-field::placeholder {
    color: var(--text-color-faint);
}

textarea.field,
textarea.cm-field {
    resize: vertical;
    min-height: 90px;
}

.cm-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cm-form__row label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color-muted);
    font-size: 14px;
}

.cm-form__row .errorlist {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    color: var(--danger-color);
    font-size: 14px;
}

.cm-form__check {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cm-form__check input {
    width: 18px;
    height: 18px;
    accent-color: var(--text-color-emphasis);
}

.cm-form__check label {
    margin: 0;
    color: #fff;
}

/* Аватар: картинка или первая буква */
.cm-avatar {
    --size: 44px;
    flex: none;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #1f3b2b, #2a1a3a);
    color: #fff;
    font-size: calc(var(--size) * .42);
    font-weight: 700;
}

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

.cm-avatar_sm {
    --size: 32px;
}

.cm-avatar_lg {
    --size: 120px;
}

.cm-avatar_square {
    border-radius: var(--radius-md);
}

/* Сетка карточек релизов (на страницах-списках) */
.cm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 45%), 1fr));
    gap: clamp(14px, 1.6vw, 28px);
}

.cm-grid .release__card {
    flex: none;
    width: auto;
}

.cm-grid_wide {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* Пагинация */
.cm-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.cm-pagination__info {
    color: var(--text-color-muted);
    font-size: 15px;
    padding: 0 8px;
}

/* Статусы закладок: цветная точка на плашке */
.pill_status_watching .pill__dot { background: var(--status-watching); box-shadow: 0 0 6px var(--status-watching); }
.pill_status_completed .pill__dot { background: var(--status-completed); box-shadow: 0 0 6px var(--status-completed); }
.pill_status_dropped .pill__dot { background: var(--status-dropped); box-shadow: 0 0 6px var(--status-dropped); }
.pill_status_on_hold .pill__dot { background: var(--status-on_hold); box-shadow: 0 0 6px var(--status-on_hold); }
.pill_status_planned .pill__dot { background: var(--status-planned); box-shadow: 0 0 6px var(--status-planned); }

/* Значки ролей */
.cm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border-color);
    color: #fff;
    font-size: 13px;
}

.cm-badge svg {
    width: 20px;
    height: 20px;
}

.cm-badge_media svg { color: #3d8bff; }
.cm-badge_moderator svg { color: #f5c518; }
.cm-badge_studio_head svg { color: #ff7a45; }
.cm-badge_management svg { color: #ff4d5e; }
.cm-badge_dubber svg { color: #a66bff; }
.cm-badge_dev_team svg { color: #01ae4c; }

/* Тост с результатом действия */
.cm-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 3000;
    transform: translate(-50%, 20px);
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--surface-color-raised);
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

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

/* Django messages */
.cm-flash {
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    background: rgba(1, 174, 76, .12);
    border: 1px solid rgba(1, 174, 76, .35);
    color: #fff;
}

/* ---------- Шапка: сообщения и уведомления ---------- */

.hdrop {
    position: relative;
}

.hdrop > summary {
    list-style: none;
    color: #fff;
}

.hdrop > summary::-webkit-details-marker {
    display: none;
}

.hdrop > summary svg {
    width: 24px;
    height: 24px;
}

.hdrop__dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--danger-color);
    box-shadow: 0 0 0 2px var(--bg-color);
}

.hdrop__dot[hidden] {
    display: none;
}

.hdrop__panel {
    position: absolute;
    top: calc(100% + 14px);
    right: -60px;
    z-index: 50;
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}

.hdrop__head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px 10px;
}

.hdrop__title {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.hdrop__tool {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color-muted);
    cursor: pointer;
}

.hdrop__tool:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

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

.hdrop__list {
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hdrop__empty {
    margin: 0;
    padding: 24px 8px;
    text-align: center;
    color: var(--text-color-muted);
    font-size: 15px;
}

.hdrop__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border-radius: var(--radius-md);
    transition: background-color .15s ease;
}

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

.hdrop__item.is-unread {
    background: rgba(1, 174, 76, .08);
}

.hdrop__item-body {
    flex: 1;
    min-width: 0;
}

.hdrop__item-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.hdrop__item-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdrop__item-text {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--text-color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hdrop__item-time {
    flex: none;
    font-size: 12px;
    color: var(--text-color-faint);
}

.hdrop__count {
    flex: none;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--danger-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.hdrop__all {
    display: block;
    margin-top: 10px;
    padding: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    text-align: center;
    color: #fff;
    font-size: 15px;
}

.hdrop__all:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.user-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-menu__badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--danger-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* Категория поиска (как чип «Аниме» в макете) */
.search__cat {
    flex: none;
    height: 32px;
    margin-left: 4px;
    padding: 0 26px 0 12px;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
    color: #fff;
    font-size: 14px;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.search__cat option {
    background: var(--surface-color);
    color: #fff;
}

.result-item_round img,
.result-item_round .result-item__placeholder {
    border-radius: 50%;
}

.result-item__placeholder {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #1f3b2b, #2a1a3a);
    color: #fff;
    font-weight: 700;
}

.search-results__more {
    display: block;
    margin-top: 6px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 15px;
}

.search-results__more:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

@media screen and (max-width: 1200px) {
    .search__cat {
        display: none;
    }
}

/* ---------- Главная: новости и популярные группы ---------- */

.home-row {
    display: grid;
    gap: clamp(14px, 1.6vw, 28px);
}

.home-row_news {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-row_groups {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-row_wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-row_wide .simple-card {
    flex: none;
    width: auto;
}

.home-row_updates {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.home-row_updates .release__card {
    flex: none;
    width: auto;
}

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.section__more {
    color: var(--text-color-muted);
    font-size: 16px;
    white-space: nowrap;
}

.section__more:hover {
    color: #fff;
}

@media screen and (max-width: 1200px) {
    .home-row_news,
    .home-row_groups {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-row_news > :nth-child(n + 4),
    .home-row_groups > :nth-child(n + 4) {
        display: none;
    }

    .home-row_updates {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-row_updates > :nth-child(n + 9) {
        display: none;
    }

    .home-row_wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-row_wide > :nth-child(n + 3) {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .home-row_news,
    .home-row_groups,
    .home-row_wide {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-row_updates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Карточка новости */
.news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    transition: border-color .2s ease, transform .2s ease;
}

.news-card:hover {
    border-color: rgba(1, 174, 76, .5);
    transform: translateY(-2px);
}

.news-card__cover {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #10301f, #23122f);
    overflow: hidden;
}

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

.news-card__cover-tag {
    position: absolute;
    left: 14px;
    top: 14px;
}

.news-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
}

.news-card__date {
    color: var(--text-color-faint);
    font-size: 13px;
}

.news-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.news-card__text {
    margin: 0;
    color: var(--text-color-muted);
    font-size: 15px;
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.news-card__more {
    margin-top: auto;
    padding-top: 6px;
    color: var(--text-color-emphasis);
    font-size: 15px;
    font-weight: 600;
}

/* Карточка группы */
.group-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 18px 22px;
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: border-color .2s ease, transform .2s ease;
}

.group-card:hover {
    border-color: rgba(1, 174, 76, .5);
    transform: translateY(-2px);
}

.group-card .cm-avatar {
    --size: 96px;
}

.group-card__name {
    margin: 6px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.group-card__meta {
    color: var(--text-color-muted);
    font-size: 14px;
}

/* Карточка коллекции */
.collection-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    transition: border-color .2s ease;
}

.collection-card:hover {
    border-color: rgba(1, 174, 76, .5);
}

.collection-card__covers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    aspect-ratio: 16 / 7;
    background: linear-gradient(135deg, #10301f, #23122f);
}

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

.collection-card__body {
    padding: 16px 18px;
}

.collection-card__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.collection-card__meta {
    color: var(--text-color-muted);
    font-size: 14px;
}

/* ---------- Страница релиза: закладка, оценка, коллекции ---------- */

.bm-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.bm-select {
    position: relative;
}

.bm-select > summary {
    list-style: none;
}

.bm-select > summary::-webkit-details-marker {
    display: none;
}

.bm-select__menu {
    position: absolute;
    left: 0;
    /* открывается вверх: баннер релиза обрезает всё, что ниже */
    bottom: calc(100% + 8px);
    z-index: 30;
    min-width: 220px;
    padding: 6px;
    border-radius: var(--radius-md);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bm-select__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.bm-select__option:hover,
.bm-select__option.is-active {
    background: rgba(255, 255, 255, .08);
}

.bm-select__option_remove {
    color: var(--danger-color);
}

.bm-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-color-faint);
}

.bm-dot_watching { background: var(--status-watching); }
.bm-dot_completed { background: var(--status-completed); }
.bm-dot_dropped { background: var(--status-dropped); }
.bm-dot_on_hold { background: var(--status-on_hold); }
.bm-dot_planned { background: var(--status-planned); }

.bm-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 6px 0 16px;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 15px;
}

.bm-score select {
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 15px;
    outline: none;
    cursor: pointer;
}

.bm-score select option {
    background: var(--surface-color);
}

/* Модальное окно */
.cm-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
}

.cm-modal.is-open {
    display: grid;
}

.cm-modal__box {
    width: min(460px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

.cm-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cm-modal__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.cm-modal__close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.cm-check-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.cm-check-list label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
}

.cm-check-list label:hover {
    background: rgba(255, 255, 255, .06);
}

.cm-check-list input {
    width: 18px;
    height: 18px;
    accent-color: var(--text-color-emphasis);
}

.cm-inline-form {
    display: flex;
    gap: 8px;
}

.cm-inline-form .cm-field {
    flex: 1;
    min-width: 0;
}

/* ---------- Профиль пользователя ---------- */

/* Список пользователей / участников */
.user-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 12px;
}

.user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

.user-row__name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-row__name small {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: var(--text-color-muted);
}

/* ---------- Лента ---------- */

.feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feed-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

.feed-item__media {
    flex: none;
    width: 92px;
    aspect-ratio: 2 / 3; /* постеры обрабатываются в 800×1200 */
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, #10301f, #23122f);
}

.feed-item__media_wide {
    width: 160px;
    aspect-ratio: 16 / 10;
}

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

.feed-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feed-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text-color-faint);
    font-size: 14px;
}

.feed-item__meta a {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.feed-item__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
}

.feed-item__title a {
    color: #fff;
    font-size: inherit;
}

.feed-item__text {
    margin: 0;
    color: var(--text-color-muted);
    line-height: 1.45;
    white-space: pre-line;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.feed-tag {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(1, 174, 76, .15);
    color: var(--text-color-emphasis);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Новость ---------- */

.article__cover {
    overflow: hidden;
    border-radius: var(--radius-xl);
    aspect-ratio: 16 / 7;
    margin-bottom: 28px;
}

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

.article__title {
    margin: 0 0 10px;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 800;
    color: #fff;
}

.article__body {
    margin-top: 24px;
    color: var(--text-color-primary);
    font-size: 18px;
    line-height: 1.65;
    white-space: pre-line;
}


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

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

.notice.is-unread {
    border-color: rgba(1, 174, 76, .45);
    background: rgba(1, 174, 76, .07);
}

.notice__text {
    flex: 1;
    min-width: 0;
    color: #fff;
}

.notice__text a {
    color: #fff;
}

.notice__time {
    flex: none;
    color: var(--text-color-faint);
    font-size: 13px;
}


/* ---------- Поиск ---------- */

.search-page__form {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.search-page__form .cm-field {
    flex: 1;
    min-width: 0;
}

/* Фильтры-чипсы (группы, поиск) */
.cm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
}

.cm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease;
}

.cm-chip:hover {
    border-color: rgba(1, 174, 76, .6);
    color: #fff;
}

.cm-chip.is-active {
    border-color: transparent;
    background: var(--accent-gradient);
    color: #fff;
}

.cm-chip b {
    color: inherit;
    font-size: 13px;
    opacity: .75;
}

.group-card__kind {
    color: var(--text-color-faint);
    font-size: 12px;
}

/* Выбор цвета папки */
.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.color-swatch {
    cursor: pointer;
}

.color-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-swatch i {
    display: block;
    width: 34px;
    height: 34px;
    border: 3px solid transparent;
    border-radius: 50%;
    background: var(--folder-color);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}

.color-swatch input:checked + i {
    border-color: #fff;
}

.color-swatch input:focus-visible + i {
    outline: 2px solid var(--text-color-emphasis);
    outline-offset: 2px;
}

.cm-form__label {
    font-weight: 600;
}

.article__actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.article__actions .is-liked {
    color: var(--status-dropped);
}

.article__comments {
    margin-top: 32px;
}

/* ---------- Выпадающий список вместо системного select (core/scripts/fancy_select.js) ---------- */

.fsel {
    flex: none;
    position: relative;
}

.fsel__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.fsel__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-left: 4px;
    padding: 0 10px 0 14px;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.fsel__btn:hover,
.fsel.is-open .fsel__btn {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(1, 174, 76, .6);
}

.fsel__label {
    color: inherit;
    font-size: inherit;
}

.fsel__chev {
    width: 14px;
    height: 14px;
    transition: rotate .2s ease;
}

.fsel.is-open .fsel__chev {
    rotate: 180deg;
}

.fsel__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: rgba(18, 10, 26, .97);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(1, 174, 76, .08);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    translate: 0 -6px;
    scale: .97;
    transform-origin: top right;
    transition: opacity .18s ease, translate .18s ease, scale .18s ease, visibility 0s linear .18s;
}

.fsel.is-open .fsel__list {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
    transition-delay: 0s;
}

.fsel__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text-color-muted);
    font-size: 14px;
    cursor: pointer;
    outline: none;
    transition: background-color .15s ease, color .15s ease;
}

.fsel__opt:hover,
.fsel__opt:focus-visible,
.fsel__opt:focus {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.fsel__opt.is-selected {
    color: #fff;
    background: rgba(1, 174, 76, .16);
}

.fsel__opt.is-selected::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-color-emphasis);
    box-shadow: 0 0 8px var(--text-color-emphasis);
}

@media screen and (max-width: 1200px) {
    .fsel {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fsel__list,
    .fsel__chev {
        transition: none;
    }
}