/* ===========================================
   MODNIX — COMMUNITY PAGE
   Requires base.css to be loaded first.
   =========================================== */

/* ===========================================
   12. PAGE HEADER (with background art)
   =========================================== */

.page-header--community {
    position: relative;
    overflow: hidden;
    background-color: #0f1420;
    background-size: cover;
    /* "top" keeps the crop anchored to the same part of the image no
       matter how tall this box gets — without it, adding the extra
       bottom space below would re-center the image and shift/crop it
       differently, which looked like a chunk of the image "jumping"
       back into view. */
    background-position: center top;
    /* base.css's generic .page-header rule (shared class on the same
       element) adds padding/margin/border. All three overridden here:
       the extra bottom padding is pure image (no text in it) that the
       mask below fades to nothing, and the matching negative margin
       pulls .page-content up so cards sit on top of that faded tail —
       this is ONE continuous background-image the whole way down, so
       there's no seam and no duplicated/mismatched crop. */
    padding: var(--spacing-2xl) 0 calc(var(--spacing-2xl) + 260px);
    margin-bottom: -260px;
    border-bottom: none;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 260px, #000 100%);
            mask-image: linear-gradient(to top, transparent 0, #000 260px, #000 100%);
}

.page-header--community__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 12, 20, 0.9) 0%, rgba(10, 12, 20, 0.55) 50%, rgba(10, 12, 20, 0.75) 100%);
}

/* Makes sure the actual content (cards etc.) paints above the faded tail
   of the header instead of it accidentally covering them. Scoped so it
   only kicks in on pages that actually have this header. */
.page-header--community ~ .page-content {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .page-header--community {
        padding-bottom: calc(var(--spacing-2xl) + 120px);
        margin-bottom: -120px;
        -webkit-mask-image: linear-gradient(to top, transparent 0, #000 120px, #000 100%);
                mask-image: linear-gradient(to top, transparent 0, #000 120px, #000 100%);
    }
}

.page-header--community .container {
    position: relative;
    z-index: 1;
}

.community-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    max-width: 800px;
    margin-top: var(--spacing-lg);
}

.community-stats__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.community-stats__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.community-stats__item > div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.community-stats__number {
    font-size: 20px;
    font-weight: 800;
}

.community-stats__label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ===========================================
   13. LEFT SIDEBAR — MINI PROFILE
   =========================================== */

.mini-profile {
    text-align: center;
}

.mini-profile__avatar {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    margin: 0 auto var(--spacing-sm);
}

.mini-profile__bubble {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 11px;
    padding: 1px 8px;
}

.mini-profile__welcome {
    font-size: 12px;
    color: var(--text-muted);
}

.mini-profile__name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.mini-profile__premium {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

/* ===========================================
   14. NAVIGATION / CATEGORIES / COMMUNITIES
   =========================================== */

.community-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.community-nav__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: all var(--transition-fast);
}

.community-nav__item:hover,
.community-nav__item.active {
    background: var(--primary-light);
    color: var(--primary);
}

.sidebar__subtitle {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.sidebar__subtitle--muted {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sidebar__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar__list a {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.sidebar__list a:hover {
    background: var(--bg-dark);
    color: var(--text-primary);
}

.sidebar__list-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.sidebar__count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

.sidebar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-sm);
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
}

/* Telegram CTA (image card) */
.telegram-cta {
    position: relative;
    display: block;
    min-height: 180px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #0e1621; /* Telegram's dark navy, used while the image loads */
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: inherit;
}

.telegram-cta__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 22, 33, 0.95) 0%, rgba(14, 22, 33, 0.5) 60%, rgba(14, 22, 33, 0.15) 100%);
}

.telegram-cta__content {
    position: relative;
    z-index: 1;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.telegram-cta__content h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.telegram-cta__content p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.btn-telegram {
    background: #229ED9; /* official Telegram blue */
    color: #fff;
    border: none;
}

.btn-telegram:hover {
    background: #1b8bc1;
}

/* ===========================================
   15. TABS
   =========================================== */

.community-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.community-tab {
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

.community-tab:hover,
.community-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ===========================================
   16. POSTS FEED
   =========================================== */

.posts-feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-fast);
}

.post-card:hover {
    border-color: var(--border-hover);
}

.post-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.post-card__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.post-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.post-card__author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-card__username-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.post-card__username {
    font-weight: 700;
    font-size: 14px;
}

.post-card__badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--radius-full);
}

.post-card__time {
    font-size: 12px;
    color: var(--text-muted);
}

.post-card__more {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
}

.post-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.post-card__title a {
    color: inherit;
    text-decoration: none;
}

.post-card__title a:hover {
    color: var(--primary);
}

.post-card__content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.post-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.tag {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.tag--accent {
    background: var(--primary-light);
    border-color: transparent;
    color: var(--primary);
}

/* Media: collage (3+ items) */
.post-card__collage {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-height: 280px;
}

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

.post-card__collage-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--spacing-xs);
}

.post-card__collage-tile {
    position: relative;
    overflow: hidden;
}

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

.post-card__collage-more {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 20, 0.65);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media: single item (image or video), shown as a side thumbnail */
.post-card__side-media {
    position: relative;
    float: right;
    width: 160px;
    height: 120px;
    margin: 0 0 var(--spacing-md) var(--spacing-md);
    border-radius: var(--radius-md);
    overflow: hidden;
}

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

.post-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(10, 12, 20, 0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-card__duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(10, 12, 20, 0.8);
    color: #fff;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.post-card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    clear: both;
}

.post-card__action {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: color var(--transition-fast);
    text-decoration: none;
}

.post-card__action:hover {
    color: var(--primary);
}

.post-card__action--bookmark {
    margin-left: auto;
}

/* ===========================================
   17. CREATE POST (right sidebar)
   =========================================== */

.create-post {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.create-post--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast);
}

.create-post--link:hover {
    border-color: var(--primary);
}

.create-post__prompt {
    display: block;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: var(--spacing-md);
}

.create-post__input {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-size: 14px;
    resize: none;
    margin-bottom: var(--spacing-md);
    font-family: inherit;
}

.create-post__options {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.create-post__option {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all var(--transition-fast);
}

.create-post__option:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* ===========================================
   18. TRENDING POSTS
   =========================================== */

.trending-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.trending-list__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.trending-list__rank {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    width: 16px;
    flex-shrink: 0;
}

.trending-list__thumb {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.trending-list__content {
    min-width: 0;
}

.trending-list__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending-list__views {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===========================================
   19. POPULAR TAGS (list, not chips)
   =========================================== */

.tags-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tags-list a {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.tags-list a:hover {
    background: var(--bg-dark);
    color: var(--primary);
}

/* ===========================================
   20. ACTIVE MEMBERS
   =========================================== */

.members-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.member-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.member-item__avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.member-item__online {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg-card);
}

.member-item__info {
    display: flex;
    flex-direction: column;
}

.member-item__username {
    font-weight: 600;
    font-size: 14px;
}

.member-item__role {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===========================================
   21. RULES LIST
   =========================================== */

.rules-list {
    list-style: none;
    counter-reset: rules;
    padding: 0;
}

.rules-list li {
    counter-increment: rules;
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    position: relative;
    font-size: 14px;
    color: var(--text-secondary);
}

.rules-list li::before {
    content: counter(rules);
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.section-header--sm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.section-header--sm .sidebar__subtitle {
    margin-bottom: 0;
}

.section-link {
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
}

.section-link--sm {
    font-size: 13px;
}

/* ===========================================
   22. NEW POST FORM + EDITOR
   =========================================== */

.form-alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-size: 14px;
}

.form-alert--error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.new-post-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 760px;
}

.new-post-form__row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.new-post-form__row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.new-post-form label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.new-post-form input[type="text"],
.new-post-form select {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.new-post-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.post-editor {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.post-editor__toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    flex-wrap: wrap;
}

.post-editor__btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.post-editor__btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.post-editor__sep {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 4px;
}

.post-editor__body {
    min-height: 220px;
    padding: var(--spacing-md);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    outline: none;
}

.post-editor__body:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
}

.post-editor__body img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 8px 0;
}

.post-editor__body iframe {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 8px 0;
}

.post-editor__body .btn {
    display: inline-flex;
    margin: 8px 0;
}

.post-editor__hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Sanitized post HTML rendered in the feed / detail view */
.post-card__content img,
.post-content-html img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 8px 0;
    display: block;
}

.post-card__content iframe,
.post-content-html iframe {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 8px 0;
}

.form-alert--success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.report-widget {
    position: relative;
}

.report-widget__trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.report-widget__trigger::-webkit-details-marker {
    display: none;
}

.report-form {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    width: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.report-form label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.report-form select,
.report-form textarea {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}

.report-form .btn {
    align-self: flex-end;
}

/* ===========================================
   23. POST DETAIL — LIKE + COMMENTS
   =========================================== */

.post-detail__actions {
    display: flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
}

.like-form {
    display: inline-block;
}

.like-form__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.comments-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.comments-section__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.comments-section__count {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 14px;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.comment-form textarea,
.comment-form input[type="text"] {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

.comment-form .btn {
    align-self: flex-end;
}

.comment-form--locked {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-size: 14px;
    color: var(--text-secondary);
}

.comment-form--locked a {
    color: var(--primary);
    font-weight: 600;
}

.comment-form--reply {
    flex-direction: row;
    margin: var(--spacing-sm) 0 0;
}

.comment-form--reply input {
    flex: 1;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

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

.comment {
    display: flex;
    gap: var(--spacing-md);
}

.comment__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
}

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

.comment__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 2px;
}

.comment__username {
    font-weight: 700;
    font-size: 13px;
}

.comment__time {
    font-size: 12px;
    color: var(--text-muted);
}

.comment__content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.comment__replies {
    margin-top: var(--spacing-sm);
    padding-left: var(--spacing-md);
    border-left: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

@media (max-width: 768px) {
    .post-card__side-media {
        float: none;
        width: 100%;
        height: 200px;
        margin: 0 0 var(--spacing-md);
    }
    .community-stats {
        gap: var(--spacing-md);
    }
}

/* ===========================================
   24. POST CARD MENU ("...") + REPORT MODAL
   =========================================== */

.post-card__menu {
    position: relative;
}

.post-card__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 170px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transform-origin: top right;
    animation: postCardDropdownIn 0.14s ease-out;
}

.post-card__dropdown[hidden] {
    display: none;
}

@keyframes postCardDropdownIn {
    from { opacity: 0; transform: scale(0.94) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.post-card__more {
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.post-card__more:hover,
.post-card__more[aria-expanded="true"] {
    background: var(--bg-dark);
    color: var(--text-primary);
}

.post-card__dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.post-card__dropdown-item:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Non-destructive admin actions (edit, restrict) use the normal accent
   color on hover instead of the red reserved for report/delete. */
.post-card__dropdown-item--neutral:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.post-card__dropdown-item.is-active {
    color: var(--primary);
}

.post-card__dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 2px;
}

/* Like / save active (filled) state */
.post-card__action--like.is-active {
    color: #ef4444;
}

.post-card__action--bookmark.is-active {
    color: var(--primary);
}

.post-card__action:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Report modal shell — centered overlay.
   Classes are prefixed community-report-* (not the generic .modal / .modal-overlay
   used before) because this site already has another modal system using those
   names; the collision was why the dialog rendered unstyled/empty and the close
   button did nothing. A few structural rules carry !important as a defensive
   measure against that other system's specificity. */
.community-report-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important;
    background: rgba(10, 12, 20, 0.65);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.community-report-overlay[hidden] {
    display: none !important;
}

.community-report-modal {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.community-report-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.community-report-modal__header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.community-report-modal__close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.community-report-modal__close:hover {
    color: var(--text-primary);
}

.community-report-form {
    display: flex !important;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
}

.community-report-form label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.community-report-form select,
.community-report-form textarea {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    width: 100%;
}

.community-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.community-report-feedback {
    font-size: 13px;
    margin: 0;
}

.community-report-feedback--success {
    color: #22c55e;
}

.community-report-feedback--error {
    color: #ef4444;
}

/* ===========================================
   25. POST DETAIL — STATS (read-only, no actions)
   =========================================== */

.post-detail__stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-muted);
}

/* .page-layout--community grid collapse is handled in base.css
   alongside the generic .page-layout rule */

/* ===========================================
   26. SEARCH BOX
   =========================================== */

.community-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.community-search__icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.community-search__input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 40px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.community-search__input:focus {
    outline: none;
    border-color: var(--primary);
}

.community-search__submit {
    position: absolute;
    right: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.community-search__clear {
    position: absolute;
    right: 42px;
    color: var(--text-muted);
    font-size: 13px;
}

.community-search__clear:hover {
    color: var(--text-primary);
}

/* ===========================================
   27. FOLLOW BUTTON (post card header)
   =========================================== */

.post-card__follow-btn {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    cursor: pointer;
    align-self: flex-start;
    margin-left: var(--spacing-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.post-card__follow-btn:hover {
    background: var(--primary);
    color: #fff;
}

.post-card__follow-btn.is-following {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.post-card__follow-btn.is-following:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.post-card__follow-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ===========================================
   28. CAPPED / EXPANDABLE POST CONTENT
   Keeps card height predictable: content is pre-truncated on the server
   (text length + max 2 images + max 1 video), "Show more" swaps in the
   untouched original without a page reload.
   =========================================== */

.post-card__content-wrap {
    margin-bottom: var(--spacing-md);
}

.post-card__content--full[hidden] {
    display: none;
}

.post-card__expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

.post-card__expand-btn i {
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.post-card__expand-btn.is-open i {
    transform: rotate(180deg);
}

/* ===========================================
   29. MESSENGER-STYLE REPLY QUOTE (post detail comments)
   Replaces the old indented ".comment__replies" sub-section: every comment
   is shown at the same level, and a reply carries a small quote strip at
   the top pointing back at the comment it answers.
   =========================================== */

.comment__reply-quote {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    background: var(--bg-dark);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    overflow: hidden;
}

.comment__reply-quote:hover {
    background: var(--primary-light);
}

.comment__reply-quote i {
    color: var(--primary);
    flex-shrink: 0;
}

.comment__reply-quote-name {
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.comment__reply-quote-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment__reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    padding: 0;
}

.comment__reply-btn:hover {
    color: var(--primary);
}

.comment--highlight {
    animation: commentHighlight 1.6s ease-out;
}

@keyframes commentHighlight {
    0% { background: var(--primary-light); border-radius: var(--radius-md); }
    100% { background: transparent; }
}

.comment-form__quote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    background: var(--bg-dark);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.comment-form__quote[hidden] {
    display: none;
}

.comment-form__quote button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.comment-form__quote button:hover {
    color: var(--text-primary);
}