/* ============================================================ */
/* COMMUNITIES — стили для раздела «Сообщества»                  */
/* ============================================================ */

/* ═══════════════════════════════════════════════════════════ */
/* СПИСОК СООБЩЕСТВ                                            */
/* ═══════════════════════════════════════════════════════════ */

@keyframes commSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.comm-list-modern {
    max-width: 100%;
    width: 100%;
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: commFadeIn 0.3s ease;
}

@keyframes commFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.comm-header-capsule {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
}
.comm-header-capsule .title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.comm-header-capsule .title i { color: #7C3AED; font-size: 22px; }
.comm-header-capsule .title .badge {
    font-size: 12px;
    font-weight: 700;
    color: #7C3AED;
    background: rgba(124,58,237,0.12);
    padding: 2px 14px;
    border-radius: 50px;
}
.comm-header-capsule .actions { display: flex; gap: 8px; }
.comm-header-capsule .btn-icon {
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-light);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    height: 44px;
    white-space: nowrap;
}
.comm-header-capsule .btn-icon:hover {
    border-color: #7C3AED;
    color: var(--text);
    background: var(--glass-bg);
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow);
}
.comm-header-capsule .btn-icon.primary {
    background: linear-gradient(135deg,#7C3AED,#6C2BD9);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}

.comm-tabs-capsule {
    padding: 6px;
    display: flex;
    gap: 6px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}
.comm-tabs-capsule::-webkit-scrollbar { display: none; }
.comm-tabs-capsule .tab-btn {
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
    font-family: inherit;
    white-space: nowrap;
    flex: 0 0 auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.comm-tabs-capsule .tab-btn:hover { background: var(--glass-bg-light); color: var(--text); }
.comm-tabs-capsule .tab-btn.active {
    background: linear-gradient(135deg, #7C3AED, #6C2BD9);
    color: white;
    box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}

.comm-search-capsule {
    padding: 10px 14px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    display: flex;
    align-items: center;
    gap: 10px;
}
.comm-search-capsule i { color: var(--text-muted); font-size: 14px; }
.comm-search-capsule input {
    flex: 1;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-light);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 14px;
    padding: 10px 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
    height: 42px;
    box-sizing: border-box;
}
.comm-search-capsule input:focus {
    border-color: #7C3AED;
    background: var(--glass-bg);
    box-shadow: 0 0 0 4px rgba(124,58,237,0.15);
}
.comm-search-capsule input::placeholder { color: var(--text-muted); }

.comm-list-items { display: flex; flex-direction: column; gap: 12px; }

.comm-card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--glass-shadow);
    position: relative;
}
.comm-card:hover {
    background: var(--glass-bg);
    border-color: #7C3AED;
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-strong), 0 0 32px rgba(124,58,237,0.15);
}
.comm-card .comm-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--glass-border);
    flex-shrink: 0;
    transition: border-color 0.3s;
}
.comm-card:hover .comm-avatar { border-color: #7C3AED; }
.comm-card .comm-info { flex: 1; min-width: 0; }
.comm-card .comm-name {
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.comm-card .comm-badge-official {
    background: linear-gradient(135deg,#FFD700,#F5A623);
    color: #1A1A2E;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
}
.comm-card .comm-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.comm-card .comm-actions { display: flex; gap: 8px; flex-shrink: 0; }
.comm-card .btn-fav {
    padding: 8px 12px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-light);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.comm-card .btn-fav.active {
    border-color: #FF6B00;
    background: rgba(255,107,0,0.12);
    color: #FF6B00;
}
.comm-card .btn-fav:hover { transform: translateY(-2px); }
.comm-card .btn-join {
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(135deg,#7C3AED,#6C2BD9);
    color: white;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 4px 16px rgba(124,58,237,0.3);
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
}
.comm-card .btn-join:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,0.5); }
.comm-card .btn-leave {
    padding: 10px 18px;
    border-radius: 50px;
    border: 1px solid rgba(229,57,53,0.4);
    background: rgba(229,57,53,0.08);
    color: #E53935;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
    height: 42px;
}
.comm-card .btn-leave:hover {
    background: linear-gradient(135deg,#E53935,#C62828);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(229,57,53,0.4);
}

.comm-empty-filter {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
}

/* ═══════════════════════════════════════════════════════════ */
/* ДЕТАЛЬНАЯ СТРАНИЦА СООБЩЕСТВА                                */
/* ═══════════════════════════════════════════════════════════ */

.comm-detail-modern {
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: cdFadeIn 0.3s ease;
}
@keyframes cdFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cd-cover-capsule {
    position: relative;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-bottom: none;
    box-shadow: var(--glass-shadow);
    background: linear-gradient(135deg,#7C3AED,#1A73E8);
}
.cd-cover-capsule.with-cover { height: 180px; background-size: cover; background-position: center; }
.cd-cover-capsule.no-cover { height: 80px; }
.cd-cover-capsule .cd-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, transparent 60%);
}
.cd-cover-btn {
    position: absolute;
    top: 12px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    z-index: 10;
}
.cd-cover-btn.left { left: 12px; }
.cd-cover-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 10; }
.cd-cover-badge-official {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: linear-gradient(135deg,#FFD700,#F5A623);
    color: #1A1A2E;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    z-index: 10;
}
.cd-cover-badge-private {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(245,166,35,0.95);
    color: #1A1A2E;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    z-index: 10;
}

.cd-info-capsule {
    padding: 0 20px 20px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-top: none;
    border-radius: 0 0 20px 20px;
    box-shadow: var(--glass-shadow);
}

.cd-avatar-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    position: relative;
    z-index: 5;
    flex-wrap: wrap;
}
.cd-avatar-row.with-cover { margin-top: -52px; }
.cd-avatar-row.no-cover { margin-top: -24px; }
.cd-avatar-wrap { position: relative; }
.cd-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-card);
    background: var(--glass-bg-light);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cd-avatar-edit {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: linear-gradient(135deg,#7C3AED,#6C2BD9);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 3px solid var(--bg-card);
    cursor: pointer;
}
.cd-title-block { flex: 1; min-width: 0; }
.cd-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cd-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}
.cd-actions-row { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.cd-btn-join {
    padding: 10px 24px;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg,#7C3AED,#6C2BD9);
    color: white;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(124,58,237,0.35);
    height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cd-btn-leave {
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(229,57,53,0.4);
    background: rgba(229,57,53,0.08);
    color: #E53935;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    height: 42px;
}
.cd-btn-fav {
    padding: 10px 14px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-light);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cd-btn-fav.active {
    border-color: #FF6B00;
    background: rgba(255,107,0,0.15);
    color: #FF6B00;
}

.cd-description {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--glass-bg-light);
    border-radius: 12px;
    border-left: 4px solid #7C3AED;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.cd-tabs-capsule {
    margin-top: 16px;
    padding: 6px;
    display: flex;
    gap: 4px;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cd-tabs-capsule::-webkit-scrollbar { display: none; }
.cd-tab-btn {
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cd-tab-btn:hover { background: var(--glass-bg); color: var(--text); }
.cd-tab-btn.active {
    background: linear-gradient(135deg, #7C3AED, #6C2BD9);
    color: white;
    box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}
.cd-tab-btn .tab-count {
    background: rgba(255,255,255,0.2);
    padding: 0 8px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}
.cd-tab-btn:not(.active) .tab-count {
    background: var(--glass-bg-light);
    color: var(--text-muted);
}

.cd-content-capsule {
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
}

.community-post-card {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
}
.community-post-card:hover { border-color: #7C3AED !important; }

/* ═══════════════════════════════════════════════════════════ */
/* АДАПТИВ                                                      */
/* ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .comm-list-modern { padding: 10px; gap: 10px; }
    .comm-header-capsule { padding: 12px 16px; border-radius: 16px; }
    .comm-header-capsule .title { font-size: 17px; }
    .comm-tabs-capsule { border-radius: 16px; }
    .comm-tabs-capsule .tab-btn { font-size: 12px; padding: 8px 12px; border-radius: 12px; }
    .comm-search-capsule { padding: 8px 12px; border-radius: 16px; }
    .comm-search-capsule input { font-size: 13px; height: 38px; }
    .comm-card { padding: 12px 14px; border-radius: 16px; gap: 14px; }
    .comm-card .comm-avatar { width: 72px; height: 72px; }
    .comm-card .comm-name { font-size: 15px; }
    .comm-card .comm-meta { font-size: 11px; gap: 10px; }
    .comm-card .btn-join, .comm-card .btn-leave { font-size: 12px; padding: 8px 14px; height: 36px; }

    .cd-cover-capsule { border-radius: 16px 16px 0 0; }
    .cd-info-capsule { padding: 0 16px 16px; border-radius: 0 0 16px 16px; }
    .cd-title { font-size: 19px; }
    .cd-avatar { width: 80px; height: 80px; }
    .cd-avatar-row.with-cover { margin-top: -44px; }
    .cd-avatar-row.no-cover { margin-top: -20px; }
    .cd-meta { font-size: 12px; gap: 12px; }
    .cd-content-capsule { padding: 14px; border-radius: 16px; }
    .cd-tab-btn { font-size: 12px; padding: 8px 14px; border-radius: 10px; }
}

@media (max-width: 480px) {
    .comm-list-modern { padding: 8px; gap: 8px; }
    .comm-header-capsule { padding: 10px 14px; border-radius: 14px; }
    .comm-header-capsule .title { font-size: 15px; }
    .comm-tabs-capsule { border-radius: 14px; }
    .comm-tabs-capsule .tab-btn { font-size: 11px; padding: 6px 10px; border-radius: 10px; }
    .comm-search-capsule { border-radius: 14px; }
    .comm-card { padding: 10px 12px; border-radius: 14px; gap: 12px; }
    .comm-card .comm-avatar { width: 64px; height: 64px; }
    .comm-card .comm-name { font-size: 14px; }
    .comm-card .comm-actions { gap: 6px; }
    .comm-card .btn-fav { font-size: 11px; padding: 6px 10px; }
    .comm-card .btn-join, .comm-card .btn-leave { font-size: 11px; padding: 6px 12px; height: 32px; }

    .cd-cover-capsule { border-radius: 14px 14px 0 0; }
    .cd-info-capsule { padding: 0 14px 14px; border-radius: 0 0 14px 14px; }
    .cd-title { font-size: 17px; }
    .cd-avatar { width: 72px; height: 72px; }
    .cd-avatar-row.with-cover { margin-top: -36px; }
    .cd-avatar-row.no-cover { margin-top: -18px; }
    .cd-btn-join, .cd-btn-leave { font-size: 12px; padding: 8px 16px; height: 36px; }
    .cd-btn-fav { height: 36px; padding: 8px 12px; font-size: 12px; }
    .cd-tab-btn { font-size: 11px; padding: 6px 10px; border-radius: 8px; }
    .cd-content-capsule { padding: 12px; border-radius: 14px; }
}

<style>
            .comm-list-modern { max-width: 100%; width: 100%; padding: 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; animation: commFadeIn 0.3s ease; }
            @keyframes commFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

            .comm-header-capsule {
                padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
                flex-wrap: wrap; gap: 12px; background: var(--glass-bg-strong);
                backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--glass-shadow);
            }
            .comm-header-capsule .title { font-size: 20px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 10px; }
            .comm-header-capsule .title i { color: #7C3AED; font-size: 22px; }
            .comm-header-capsule .title .badge { font-size: 12px; font-weight: 700; color: #7C3AED; background: rgba(124,58,237,0.12); padding: 2px 14px; border-radius: 50px; }
            .comm-header-capsule .actions { display: flex; gap: 8px; }
            .comm-header-capsule .btn-icon {
                padding: 10px 18px; border-radius: 14px; border: 1px solid var(--glass-border);
                background: var(--glass-bg-light); backdrop-filter: blur(var(--glass-blur-light));
                -webkit-backdrop-filter: blur(var(--glass-blur-light));
                color: var(--text-secondary); font-size: 13px; cursor: pointer;
                transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
                font-family: inherit; display: flex; align-items: center; gap: 6px; font-weight: 700; height: 44px; white-space: nowrap;
            }
            .comm-header-capsule .btn-icon:hover {
                border-color: #7C3AED; color: var(--text); background: var(--glass-bg);
                transform: translateY(-2px); box-shadow: var(--glass-shadow);
            }
            .comm-header-capsule .btn-icon.primary {
                background: linear-gradient(135deg,#7C3AED,#6C2BD9); color: white; border-color: transparent;
                box-shadow: 0 4px 16px rgba(124,58,237,0.3);
            }

            .comm-tabs-capsule {
                padding: 6px; display: flex; gap: 6px; background: var(--glass-bg-strong);
                backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                border: 1px solid var(--glass-border); border-radius: 20px;
                box-shadow: var(--glass-shadow); overflow-x: auto; scrollbar-width: none;
            }
            .comm-tabs-capsule::-webkit-scrollbar { display: none; }
            .comm-tabs-capsule .tab-btn {
                padding: 10px 16px; border-radius: 14px; border: 1px solid transparent;
                background: transparent; color: var(--text-muted); font-weight: 600; font-size: 13px;
                cursor: pointer; transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
                font-family: inherit; white-space: nowrap; flex: 0 0 auto; text-align: center;
                display: flex; align-items: center; justify-content: center; gap: 6px;
            }
            .comm-tabs-capsule .tab-btn:hover { background: var(--glass-bg-light); color: var(--text); }
            .comm-tabs-capsule .tab-btn.active {
                background: linear-gradient(135deg, #7C3AED, #6C2BD9); color: white;
                box-shadow: 0 4px 16px rgba(124,58,237,0.3);
            }

            .comm-search-capsule {
                padding: 10px 14px; background: var(--glass-bg-strong);
                backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                border: 1px solid var(--glass-border); border-radius: 20px;
                box-shadow: var(--glass-shadow); display: flex; align-items: center; gap: 10px;
            }
            .comm-search-capsule i { color: var(--text-muted); font-size: 14px; }
            .comm-search-capsule input {
                flex: 1; border: 1px solid var(--glass-border); background: var(--glass-bg-light);
                backdrop-filter: blur(var(--glass-blur-light));
                -webkit-backdrop-filter: blur(var(--glass-blur-light));
                border-radius: 14px; padding: 10px 14px; color: var(--text);
                font-family: inherit; font-size: 14px; outline: none;
                transition: all 0.3s; height: 42px; box-sizing: border-box;
            }
            .comm-search-capsule input:focus {
                border-color: #7C3AED; background: var(--glass-bg);
                box-shadow: 0 0 0 4px rgba(124,58,237,0.15);
            }
            .comm-search-capsule input::placeholder { color: var(--text-muted); }

            .comm-list-items { display: flex; flex-direction: column; gap: 12px; }
            .comm-card {
                background: var(--glass-bg-strong);
                backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                border: 1px solid var(--glass-border); border-radius: 20px; padding: 16px 20px;
                cursor: pointer; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
                display: flex; align-items: center; gap: 16px;
                box-shadow: var(--glass-shadow); position: relative;
            }
            .comm-card:hover {
                background: var(--glass-bg); border-color: #7C3AED; transform: translateY(-3px);
                box-shadow: var(--glass-shadow-strong), 0 0 32px rgba(124,58,237,0.15);
            }
            .comm-card .comm-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--glass-border); flex-shrink: 0; transition: border-color 0.3s; }
            .comm-card:hover .comm-avatar { border-color: #7C3AED; }
            .comm-card .comm-info { flex: 1; min-width: 0; }
            .comm-card .comm-name { font-weight: 700; font-size: 17px; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
            .comm-card .comm-badge-official { background: linear-gradient(135deg,#FFD700,#F5A623); color: #1A1A2E; padding: 2px 10px; border-radius: 50px; font-size: 10px; font-weight: 700; }
            .comm-card .comm-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
            .comm-card .comm-actions { display: flex; gap: 8px; flex-shrink: 0; }
            .comm-card .btn-fav {
                padding: 8px 12px; border-radius: 50px; border: 1px solid var(--glass-border);
                background: var(--glass-bg-light); color: var(--text-muted); cursor: pointer;
                font-family: inherit; font-size: 13px;
                transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
            }
            .comm-card .btn-fav.active { border-color: #FF6B00; background: rgba(255,107,0,0.12); color: #FF6B00; }
            .comm-card .btn-fav:hover { transform: translateY(-2px); }
            .comm-card .btn-join {
                padding: 10px 20px; border-radius: 50px; border: 1px solid var(--glass-border);
                background: linear-gradient(135deg,#7C3AED,#6C2BD9); color: white; font-weight: 700;
                font-size: 13px; cursor: pointer; font-family: inherit;
                transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
                box-shadow: 0 4px 16px rgba(124,58,237,0.3);
                display: flex; align-items: center; gap: 6px; height: 42px;
            }
            .comm-card .btn-join:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,0.5); }
            .comm-card .btn-leave {
                padding: 10px 18px; border-radius: 50px; border: 1px solid rgba(229,57,53,0.4);
                background: rgba(229,57,53,0.08); color: #E53935; font-weight: 700; font-size: 13px;
                cursor: pointer; font-family: inherit;
                transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); height: 42px;
            }
            .comm-card .btn-leave:hover {
                background: linear-gradient(135deg,#E53935,#C62828); color: white;
                border-color: transparent; transform: translateY(-2px);
                box-shadow: 0 6px 24px rgba(229,57,53,0.4);
            }

            .comm-empty-filter {
                text-align: center; padding: 60px 24px; color: var(--text-muted);
                background: var(--glass-bg-strong);
                backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
                border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--glass-shadow);
            }

            @media (max-width: 768px) {
                .comm-list-modern { padding: 10px; gap: 10px; }
                .comm-header-capsule { padding: 12px 16px; border-radius: 16px; }
                .comm-header-capsule .title { font-size: 17px; }
                .comm-tabs-capsule { border-radius: 16px; }
                .comm-tabs-capsule .tab-btn { font-size: 12px; padding: 8px 12px; border-radius: 12px; }
                .comm-search-capsule { padding: 8px 12px; border-radius: 16px; }
                .comm-search-capsule input { font-size: 13px; height: 38px; }
                .comm-card { padding: 12px 14px; border-radius: 16px; gap: 14px; }
                .comm-card .comm-avatar { width: 72px; height: 72px; }
                .comm-card .comm-name { font-size: 15px; }
                .comm-card .comm-meta { font-size: 11px; gap: 10px; }
                .comm-card .btn-join, .comm-card .btn-leave { font-size: 12px; padding: 8px 14px; height: 36px; }
            }
            @media (max-width: 480px) {
                .comm-list-modern { padding: 8px; gap: 8px; }
                .comm-header-capsule { padding: 10px 14px; border-radius: 14px; }
                .comm-header-capsule .title { font-size: 15px; }
                .comm-tabs-capsule { border-radius: 14px; }
                .comm-tabs-capsule .tab-btn { font-size: 11px; padding: 6px 10px; border-radius: 10px; }
                .comm-search-capsule { border-radius: 14px; }
                .comm-card { padding: 10px 12px; border-radius: 14px; gap: 12px; }
                .comm-card .comm-avatar { width: 64px; height: 64px; }
                .comm-card .comm-name { font-size: 14px; }
                .comm-card .comm-actions { gap: 6px; }
                .comm-card .btn-fav { font-size: 11px; padding: 6px 10px; }
                .comm-card .btn-join, .comm-card .btn-leave { font-size: 11px; padding: 6px 12px; height: 32px; }
            }
        </style>

        <div class="comm-list-modern">
            <div class="comm-header-capsule">
                <div class="title">
                    <i class="fas fa-users"></i>
                    Сообщества
                    <span class="badge">${filteredData.length}</span>
                </div>
                <div class="actions">
                    <button class="btn-icon primary" onclick="window.openCreateCommunityModal()">
                        <i class="fas fa-plus"></i> <span>Создать</span>
                    </button>
                    <button class="btn-icon" onclick="window.refreshCommunitiesList()">
                        <i class="fas fa-sync"></i>
                    </button>
                </div>
            </div>

            <div class="comm-tabs-capsule">
                <button class="tab-btn ${currentListFilter === 'all' ? 'active' : ''}" onclick="window.setCommunitiesFilter('all')">
                    <i class="fas fa-globe"></i> Все <span style="background:rgba(255,255,255,0.2);padding:0 6px;border-radius:50px;font-size:10px;">${countAll}</span>
                </button>
                <button class="tab-btn ${currentListFilter === 'my' ? 'active' : ''}" onclick="window.setCommunitiesFilter('my')">
                    <i class="fas fa-user"></i> Мои <span style="background:rgba(255,255,255,0.2);padding:0 6px;border-radius:50px;font-size:10px;">${countMy}</span>
                </button>
                <button class="tab-btn ${currentListFilter === 'manage' ? 'active' : ''}" onclick="window.setCommunitiesFilter('manage')">
                    <i class="fas fa-shield-alt"></i> Управление <span style="background:rgba(255,255,255,0.2);padding:0 6px;border-radius:50px;font-size:10px;">${countManage}</span>
                </button>
                <button class="tab-btn ${currentListFilter === 'subscribed' ? 'active' : ''}" onclick="window.setCommunitiesFilter('subscribed')">
                    <i class="fas fa-check-circle"></i> Подписка <span style="background:rgba(255,255,255,0.2);padding:0 6px;border-radius:50px;font-size:10px;">${countSub}</span>
                </button>
                <button class="tab-btn ${currentListFilter === 'favorites' ? 'active' : ''}" onclick="window.setCommunitiesFilter('favorites')">
                    <i class="fas fa-star"></i> Избранное <span style="background:rgba(255,255,255,0.2);padding:0 6px;border-radius:50px;font-size:10px;">${countFav}</span>
                </button>
            </div>

            <div class="comm-search-capsule">
                <i class="fas fa-search"></i>
                <input type="text" id="communitiesSearch" placeholder="Поиск сообществ..." oninput="window.filterCommunities()">
            </div>

            <div class="comm-list-items" id="communitiesList">
    `;

    if (filteredData.length === 0) {
        var emptyText = 'Нет сообществ';
        var emptySub = '';
        if (currentListFilter === 'my') { emptyText = 'Вы пока не создавали сообществ'; emptySub = 'Создайте своё первое сообщество 👑'; }
        else if (currentListFilter === 'manage') { emptyText = 'Вы не модератор'; emptySub = 'Здесь появятся сообщества, где вы модератор 🛡️'; }
        else if (currentListFilter === 'subscribed') { emptyText = 'Вы никуда не подписаны'; emptySub = 'Вступите в интересные сообщества 👥'; }
        else if (currentListFilter === 'favorites') { emptyText = 'Нет избранных'; emptySub = 'Добавьте сообщества в избранное ⭐'; }

        html += '<div class="comm-empty-filter">' +
            '<div style="font-size:48px;margin-bottom:12px;opacity:0.25;">📭</div>' +
            '<div style="font-size:18px;font-weight:700;">' + emptyText + '</div>' +
            (emptySub ? '<div style="font-size:14px;margin-top:6px;opacity:0.6;">' + emptySub + '</div>' : '') +
        '</div>';
    } else {
        for (var i = 0; i < filteredData.length; i++) {
            html += renderCommunityCard(filteredData[i]);
        }
    }

    html += '</div></div>';
    container.innerHTML = html;
}

function renderCommunityCard(c) {
    var isMember = _isTrue(c.is_member);
    var isOwner = _isTrue(c.is_owner);
    var isModerator = _isTrue(c.is_moderator);
    var isFavorite = _isTrue(c.is_favorite);
    var isOfficial = _isTrue(c.is_official);
    var isPrivate = _isTrue(c.is_private);
    var isPending = _isTrue(c._joinPending);
    var members = c.members_count || 0;
    var posts = c.posts_count || 0;
    var avatarUrl = getAvatarUrl(c.avatar_url);
    var titleColor = getColorHex(c.title_color || 'black');
    var titleEmojiHtml = renderCommunityEmoji(c.title_emoji);
    var categoryEmoji = getCategoryEmoji(c.category);
    var categoryLabel = getCategoryLabel(c.category);
    var timeAgo = getTimeAgo(c.created_at);

    var joinBtnHtml;
    if (isMember) {
        joinBtnHtml = '<button class="btn-leave" onclick="event.stopPropagation(); window.leaveCommunity(' + c.id + ')">Выйти</button>';
    } else if (isPrivate) {
        if (isPending) {
            joinBtnHtml = '<button class="btn-join" disabled style="opacity:0.6;cursor:default;">📩 Заявка отправлена</button>';
        } else {
            joinBtnHtml = '<button class="btn-join" onclick="event.stopPropagation(); window.joinCommunity(' + c.id + ')"><i class="fas fa-paper-plane"></i> Заявка</button>';
        }
    } else {
        joinBtnHtml = '<button class="btn-join" onclick="event.stopPropagation(); window.joinCommunity(' + c.id + ')"><i class="fas fa-user-plus"></i> Вступить</button>';
    }

    return '<div class="comm-card" onclick="window.openCommunity(' + c.id + ')">' +
        '<img src="' + avatarUrl + '" onerror="this.src=\'/avatar-default.svg\'" class="comm-avatar">' +
        '<div class="comm-info">' +
            '<div class="comm-name" style="color:' + titleColor + ';">' +
                titleEmojiHtml +
                '<span>' + escapeHTML(c.name) + '</span>' +
                (isPrivate ? '<span style="font-size:14px;color:#F5A623;" title="Закрытое">🔒</span>' : '') +
                (isOfficial ? '<span class="comm-badge-official">✓ OFFICIAL</span>' : '') +
                (isOwner ? '<span style="font-size:16px;">👑</span>' : '') +
                (isModerator && !isOwner ? '<span style="font-size:14px;">🛡️</span>' : '') +
                (isFavorite ? '<span style="color:#FF6B00;font-size:13px;">⭐</span>' : '') +
            '</div>' +
            '<div class="comm-meta">' +
                '<span><i class="fas fa-users"></i> ' + formatNumber(members) + '</span>' +
                '<span><i class="fas fa-file-alt"></i> ' + formatNumber(posts) + '</span>' +
                '<span>' + categoryEmoji + ' ' + categoryLabel + '</span>' +
                '<span>' + timeAgo + '</span>' +
            '</div>' +
        '</div>' +
        '<div class="comm-actions">' +
            '<button class="btn-fav ' + (isFavorite ? 'active' : '') + '" onclick="event.stopPropagation(); window.toggleFavorite(' + c.id + ')" title="В избранное">' +
                '<i class="fas fa-star"></i>' +
            '</button>' +
            joinBtnHtml +
        '</div>' +
    '</div>';
}

function filterCommunities() {
    var input = document.getElementById('communitiesSearch');
    var query = input ? input.value.toLowerCase().trim() : '';
    var list = document.getElementById('communitiesList');
    if (!list) return;
    list.querySelectorAll('.comm-card').forEach(function(card) {
        card.style.display = (query === '' || card.textContent.toLowerCase().indexOf(query) !== -1) ? '' : 'none';
    });
}

function setCommunitiesFilter(filter) {
    currentListFilter = filter;
    var container = document.getElementById('pageContent');
    if (!container) return;
    if (communitiesListCache.data) {
        renderCommunitiesList(container, communitiesListCache.data);
    } else {
        renderCommunities(container);
    }
}

function refreshCommunitiesList() {
    communitiesListCache.data = null;
    communitiesListCache.timestamp = 0;
    loadCommunities(true).then(function(data) {
        var container = document.getElementById('pageContent');
        if (container) renderCommunitiesList(container, data);
    });
}

// ============================================================
// ДЕЙСТВИЯ
// ============================================================
function toggleFavorite(communityId) {
    var token = localStorage.getItem('token');
    if (!token) { showToast('❌ Требуется авторизация', 'error'); return; }

    fetch('/api/communities/' + communityId + '/favorite', {
        method: 'POST',
        headers: { 'Authorization': 'Bearer ' + token.replace(/^"|"$/g, '').trim() }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            showToast(data.message, 'success', 1500);

            for (var i = 0; i < communitiesData.length; i++) {
                if (communitiesData[i].id === communityId) {
                    communitiesData[i].is_favorite = data.is_favorite;
                    break;
                }
            }
            if (communitiesListCache.data) {
                for (var j = 0; j < communitiesListCache.data.length; j++) {
                    if (communitiesListCache.data[j].id === communityId) {
                        communitiesListCache.data[j].is_favorite = data.is_favorite;
                        break;
                    }
                }
            }

            var container = document.getElementById('pageContent');
            if (container) {
                renderCommunitiesList(container, communitiesListCache.data || communitiesData);
            }
        }
    })
    .catch(function(error) { showToast('❌ ' + error.message, 'error'); });
}

function joinCommunity(communityId) {
    var token = localStorage.getItem('token');
    if (!token) { showToast('❌ Требуется авторизация', 'error'); return; }
    showToast('⏳ Отправка...', 'info');

    fetch('/api/communities/' + communityId + '/join', {
        method: 'POST',
        headers: { 'Authorization': 'Bearer ' + token.replace(/^"|"$/g, '').trim() }
    })
    .then(function(r) { if (!r.ok) return r.json().then(function(e) { throw new Error(e.error || 'Ошибка'); }); return r.json(); })
    .then(function(data) {
        if (data.pending) {
            showToast('📩 Заявка отправлена. Ожидайте подтверждения', 'info', 3000);
            for (var i = 0; i < communitiesData.length; i++) {
                if (communitiesData[i].id === communityId) {
                    communitiesData[i]._joinPending = true;
                    break;
                }
            }
            if (communitiesListCache.data) {
                for (var j = 0; j < communitiesListCache.data.length; j++) {
                    if (communitiesListCache.data[j].id === communityId) {
                        communitiesListCache.data[j]._joinPending = true;
                        break;
                    }
                }
            }
            var container = document.getElementById('pageContent');
            if (container) renderCommunitiesList(container, communitiesListCache.data || communitiesData);
            return;
        }

        showToast(data.message || '🎉 Вы вступили!', 'success');

        for (var i2 = 0; i2 < communitiesData.length; i2++) {
            if (communitiesData[i2].id === communityId) {
                communitiesData[i2].is_member = true;
                communitiesData[i2].members_count = (communitiesData[i2].members_count || 0) + 1;
                break;
            }
        }
        if (communitiesListCache.data) {
            for (var j2 = 0; j2 < communitiesListCache.data.length; j2++) {
                if (communitiesListCache.data[j2].id === communityId) {
                    communitiesListCache.data[j2].is_member = true;
                    communitiesListCache.data[j2].members_count = (communitiesListCache.data[j2].members_count || 0) + 1;
                    break;
                }
            }
        }

        if (currentCommunityId === communityId) {
            openCommunity(communityId);
        } else {
            var container2 = document.getElementById('pageContent');
            if (container2) {
                renderCommunitiesList(container2, communitiesListCache.data || communitiesData);
            }
        }
    })
    .catch(function(error) { showToast('❌ ' + error.message, 'error'); });
}

function leaveCommunity(communityId) {
    if (!confirm('🚪 Выйти из сообщества?')) return;
    var token = localStorage.getItem('token');
    if (!token) { showToast('❌ Требуется авторизация', 'error'); return; }

    fetch('/api/communities/' + communityId + '/leave', {
        method: 'POST',
        headers: { 'Authorization': 'Bearer ' + token.replace(/^"|"$/g, '').trim() }
    })
    .then(function(r) { if (!r.ok) return r.json().then(function(e) { throw new Error(e.error || 'Ошибка'); }); return r.json(); })
    .then(function(data) {
        showToast(data.message || '👋 Вы вышли', 'info');

        for (var i = 0; i < communitiesData.length; i++) {
            if (communitiesData[i].id === communityId) {
                communitiesData[i].is_member = false;
                communitiesData[i].members_count = Math.max(0, (communitiesData[i].members_count || 0) - 1);
                break;
            }
        }
        if (communitiesListCache.data) {
            for (var j = 0; j < communitiesListCache.data.length; j++) {
                if (communitiesListCache.data[j].id === communityId) {
                    communitiesListCache.data[j].is_member = false;
                    communitiesListCache.data[j].members_count = Math.max(0, (communitiesListCache.data[j].members_count || 0) - 1);
                    break;
                }
            }
        }

        var container = document.getElementById('pageContent');
        if (container) {
            renderCommunitiesList(container, communitiesListCache.data || communitiesData);
        }
    })
    .catch(function(error) { showToast('❌ ' + error.message, 'error'); });
}


// ============================================================
// ОТКРЫТИЕ СООБЩЕСТВА
// ============================================================
function openCommunity(communityId) {
    currentCommunityId = communityId;
    window.currentCommunityId = communityId;
    window.selectedCommunityTab = 'posts';
    postsPage = 1;
    hasMorePosts = true;
    communityPosts = [];
    communityMembers = [];
    communityAdmins = [];
    communityPolls = [];

    var socket = window.socket || window.APP?.socket;
    if (socket && socket.connected) {
        socket.emit('join_community', { community_id: communityId });
    }

    var container = document.getElementById('pageContent');
    if (!container) return;

    container.innerHTML = '<div style="max-width:100%;padding:14px;box-sizing:border-box;">' +
        '<div style="background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur-strong)) saturate(180%);-webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(180%);border:1px solid var(--glass-border);border-radius:20px;box-shadow:var(--glass-shadow);padding:20px;">' +
            '<div style="display:flex;gap:16px;align-items:center;">' +
                '<div style="width:72px;height:72px;border-radius:50%;background:var(--glass-bg-light);border:3px solid var(--glass-border);"></div>' +
                '<div style="flex:1;">' +
                    '<div style="height:24px;width:60%;background:var(--glass-bg-light);border-radius:8px;margin-bottom:8px;animation:pulse 1.5s ease-in-out infinite;"></div>' +
                    '<div style="height:14px;width:40%;background:var(--glass-bg-light);border-radius:6px;animation:pulse 1.5s ease-in-out infinite;"></div>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>' +
    '<style>