/* ============================================================
   COMMUNITY THEME — MAIN STYLES (dark)
   ============================================================ */

/* --- 1. Переменные и базовое --- */
:root {
    --bg-color: #1c1c1c;
    --text-color: #e4e6eb;
    --card-bg: #222222;
    --border-color: #3e4042;
    --primary-color: #4a90e2;
    --primary-hover: #3d7dd8;
    --muted-color: #b0b3b8;
    --hover-bg: #3a3b3c;
    --shadow: 0 1px 3px rgba(0,0,0,.3);
    --shadow-lg: 0 6px 20px rgba(0,0,0,.35);
    --radius: 12px;
    --danger-color: #e53935;
    --danger-rgb: 176, 48, 48;
    --success-color: #4caf50;
    --success-rgb: 0, 173, 100;
    --warning-color: #f0c552;
    --navbar-height: 62px;
}
* { box-sizing: border-box; }
html, body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    line-height: 1.5;
    min-height: 100vh;
}
a { color: var(--primary-color); text-decoration: none; }
a:hover { opacity: .9; color: var(--primary-color); }
img { max-width: 100%; height: auto; }

/* --- 2. Утилиты --- */
.c-flex { display: flex; }
.c-flex-inline { display: inline-flex; }
.c-block { display: block; }
.c-hide { display: none !important; }
.c-wrap { flex-wrap: wrap; }
.c-middle { align-items: center; }
.c-bottom { align-items: flex-end; }
.c-between { justify-content: space-between; }
.c-end { justify-content: flex-end; }
.c-center-x { justify-content: center; }
.c-grow { flex-grow: 1; min-width: 0; }
.c-shrink { flex-shrink: 0; }
.c-full { width: 100%; }
.c-round { border-radius: 8px; }
.c-round-lg { border-radius: 12px; }
.c-circle { border-radius: 50%; }
.c-center { text-align: center; }
.c-muted { color: var(--muted-color); }
.c-small { font-size: 13px; }
.c-nowrap { white-space: nowrap; }
.c-gap-1 { gap: 4px; }
.c-gap-2 { gap: 8px; }
.c-gap-3 { gap: 12px; }
.c-gap-4 { gap: 16px; }
.c-mt-0 { margin-top: 0; }
.c-mt-1 { margin-top: 6px; }
.c-mt-2 { margin-top: 12px; }
.c-mt-3 { margin-top: 20px; }
.c-mt-4 { margin-top: 28px; }
.c-mb-0 { margin-bottom: 0; }
.c-mb-1 { margin-bottom: 6px; }
.c-mb-2 { margin-bottom: 12px; }
.c-mb-3 { margin-bottom: 20px; }
.c-mb-4 { margin-bottom: 28px; }
.c-me-1 { margin-right: 6px; }
.c-me-2 { margin-right: 12px; }
.c-me-3 { margin-right: 20px; }
.c-me-4 { margin-right: 28px; }
.c-my-2 { margin-top: 12px; margin-bottom: 12px; }
.c-my-3 { margin-top: 20px; margin-bottom: 20px; }
.c-my-4 { margin-top: 28px; margin-bottom: 28px; }
.c-p-1 { padding: 6px; }
.c-p-2 { padding: 12px; }
.c-p-3 { padding: 20px; }
.c-p-4 { padding: 28px; }
.c-p-5 { padding: 40px; }
.c-px-3 { padding-left: 20px; padding-right: 20px; }
.c-px-4 { padding-left: 28px; padding-right: 28px; }
.c-py-3 { padding-top: 20px; padding-bottom: 20px; }

/* --- 3. Контейнеры, сетка --- */
.c-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.c-sticky { position: sticky; top: 0; z-index: 1020; }
.c-row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
.c-col-6 { flex: 0 0 auto; width: 100%; padding: 0 8px; }
@media (min-width: 768px) { .c-col-6 { width: 50%; } }

/* --- 4. Кнопки --- */
.c-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border: 1px solid transparent; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit; line-height: 1.4;
}
.c-btn-primary { background: var(--primary-color); color: #fff !important; border-color: var(--primary-color); }
.c-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); opacity: 1; color: #fff !important; }
.c-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.c-btn-outline:hover { background: #fff; color: #1c1e21 !important; opacity: 1; }
.c-btn-sm { padding: 5px 12px; font-size: 13px; }
.c-btn-full { width: 100%; }

/* --- 5. Формы --- */
.c-input, .form-control {
    display: block; width: 100%; padding: 10px 14px; font-size: 15px; line-height: 1.5;
    background: var(--card-bg); color: var(--text-color);
    border: 1px solid var(--border-color); border-radius: 8px; outline: none;
    transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.c-input:focus, .form-control:focus {
    background: var(--card-bg); color: var(--text-color);
    border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74,144,226,.15);
}
.c-input::placeholder, .form-control::placeholder { color: var(--muted-color); }
.c-label, .form-label { display: inline-block; margin-bottom: 4px; font-size: 14px; color: var(--text-color); font-family: inherit; }
.c-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.c-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-color); margin: 0; cursor: pointer; flex-shrink: 0; }

/* --- 6. Бейджи / алерты --- */
.c-badge {
    display: inline-block; padding: 7px 9px; font-size: 12px; font-weight: 700; line-height: 1;
    text-align: center; white-space: nowrap; border-radius: 6px;
    color: var(--text-color); background: var(--hover-bg);
}
.c-badge-warning { background: var(--warning-color); color: #1c1e21; }
.c-badge-info    { background: var(--primary-color); color: #fff; }
.c-badge-primary { background: var(--primary-color); color: #fff; }
.c-badge-success { background: var(--success-color); color: #fff; }
.c-alert {
    padding: 12px 16px; border-radius: 8px; border: 1px solid transparent;
    margin-bottom: 16px; font-size: 14px; line-height: 1.5;
}
.c-alert-danger { background: rgba(229,57,53,.12); border-color: rgba(229,57,53,.4); color: #ff8a80; }

/* --- 7. Навбар --- */
.community-navbar { background: var(--bg-color); padding: 10px 0; border-bottom: 1px solid var(--border-color); z-index: 1110; }
.community-navbar-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: 1440px; margin: 0 auto; padding: 0 24px; flex-wrap: nowrap;
}
.community-navbar .navbar-brand {
    padding: 0 0 0 12px; color: #fff !important; font-size: 1.4rem; font-weight: 700;
    white-space: nowrap; text-decoration: none; margin: 0; display: inline-flex; align-items: center;
}
.community-logo { max-height: 40px; width: auto; display: block; }
.community-search { position: relative; max-width: 480px; width: 100%; margin: 0 auto; }
.community-search input {
    width: 100%; background: var(--card-bg); border: 1px solid var(--border-color);
    color: var(--text-color); padding: 8px 16px; border-radius: 20px; outline: none;
}
.community-search input:focus { border-color: var(--primary-color); }
.community-search input::placeholder { color: var(--muted-color); }
.community-search-results {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px;
    background: var(--card-bg); border-radius: 10px; list-style: none; padding: 6px 0;
    max-height: 320px; overflow-y: auto; box-shadow: var(--shadow-lg); z-index: 1000;
    border: 1px solid var(--border-color);
}
.community-search-results li a { display: block; padding: 8px 16px; color: var(--text-color); text-decoration: none; }
.community-search-results li a:hover { background: var(--hover-bg); }
.community-profile { color: #fff; gap: 1rem; }
.community-add-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; background: var(--primary-color);
    color: #fff !important; text-decoration: none;
    transition: background .15s, transform .15s; flex-shrink: 0;
}
.community-add-btn:hover { background: var(--primary-hover); transform: scale(1.05); color: #fff !important; opacity: 1; }
.community-add-btn svg { display: block; }
.navbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex: 1; min-width: 0; }

/* --- 7.1. Дропдаун пользователя --- */
.community-user-dropdown { flex-shrink: 0; }
.community-user-dropdown > a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0; line-height: 0; border-radius: 50%;
}
.community-user-dropdown > a img {
    width: 32px; height: 32px; min-width: 32px; max-width: none;
    object-fit: cover; border-radius: 50%; display: block; flex-shrink: 0;
}

/* --- 8. Dropdown --- */
.c-dropdown { position: relative; display: flex; }
.c-dropdown-menu {
    position: absolute; top: 100%; right: 0; margin-top: 6px; min-width: 240px;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 6px 0;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s, visibility .15s, transform .15s;
    z-index: 1100; list-style: none;
}
.c-dropdown.open .c-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.c-dropdown-end { right: 0; left: auto; }
.c-dropdown-start { left: 0; right: auto; }
.c-dropdown-item {
    display: block; padding: 8px 16px; color: var(--text-color);
    text-decoration: none; font-size: 14px; transition: background .15s; white-space: nowrap;
}
.c-dropdown-item:hover { background: var(--hover-bg); color: var(--text-color); opacity: 1; }
.c-dropdown-header { display: block; padding: 10px 16px; font-size: 13px; color: var(--text-color); }
.c-dropdown-divider { height: 0; margin: 6px 0; border-top: 1px solid var(--border-color); list-style: none; }

.edit-dropdown { display: inline-block; }
.edit-dropdown-toggle { cursor: pointer; font-family: inherit; }
.edit-dropdown-menu { min-width: 200px; }

/* --- 9. Grid --- */
.community-wrapper {
    display: grid; grid-template-columns: 220px minmax(0,1fr) 300px;
    gap: 20px; max-width: 1440px; margin: 20px auto; padding: 0 24px; align-items: start;
}
.community-wrapper.no-right { grid-template-columns: 220px minmax(0, 1fr); }

/* --- 10. Сайдбары --- */
.community-sidebar {
    position: sticky; top: calc(var(--navbar-height) + 16px); align-self: start;
    max-height: calc(100vh - var(--navbar-height) - 32px);
    overflow-y: auto; overscroll-behavior: contain;
}
.community-sidebar-right { position: sticky; top: calc(var(--navbar-height) + 16px); }
.community-sidebar::-webkit-scrollbar { width: 4px; }
.community-sidebar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.community-sidebar-left {
    display: flex; flex-direction: column; min-height: calc(100vh - 120px);
    row-gap: 26px; padding: 0 15px 30px 0;
}
.community-sidebar-left .community-mobile-header { display: none; }
.community-sidebar-left .mobile-block-auth { display: none; }

.sidebar-block { margin-bottom: 12px; }
.sidebar-block:last-child { margin-bottom: 0; }
.sidebar-block.sidebar-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-color); }

/* --- 11. Левое меню --- */
.left-menu ul { list-style: none; padding: 0; margin: 0; }
.left-menu li { margin: 0.125rem 0 0; border-radius: 8px; }
.left-menu li a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
    color: var(--text-color); font-size: 15px; text-decoration: none;
    transition: background .15s; line-height: 1.3; position: relative;
}
.left-menu li a:hover { background: var(--card-bg); color: var(--text-color); opacity: 1; }
.left-menu li.active > a, .left-menu li.current-menu-item > a,
.left-menu li.current_page_item > a, .left-menu li.current-menu-ancestor > a {
    background: var(--card-bg); font-weight: 600;
}
.menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; }
.menu-icon svg, .left-menu li a svg { width: 22px; height: 22px; fill: var(--text-color); transition: fill .15s; flex-shrink: 0; }
.menu-emoji { font-size: 20px; line-height: 1; }
.menu-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.left-menu li a img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; border-radius: 4px; }
.left-menu-top a[href*="/new/"]:after {
    content: ""; background-color: #00ad64; border-radius: 50%; width: 8px; height: 8px;
    box-shadow: 0 0 0 0 rgba(var(--success-rgb), 1);
    transform: scale(1); animation: pulse 2s infinite; position: absolute; right: 1.75rem;
    --pulse-color: var(--success-rgb);
}

/* --- 12. Аватары и мета --- */
.c-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.c-name { color: var(--text-color); font-weight: 500; }
.c-name:hover { color: var(--primary-color); opacity: 1; }
.c-pro { background: var(--primary-color); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .5px; }
.c-category { color: var(--muted-color); font-size: 13px; margin-left: 4px; }
.c-category:hover { color: var(--primary-color); }
.c-icon-btn {
    background: transparent; border: 0; color: var(--muted-color);
    display: inline-flex; align-items: center; gap: 7px; padding: 6px; border-radius: 6px;
    font-size: 13px; cursor: pointer; text-decoration: none;
    transition: color .15s, background .15s; font-family: inherit;
}
.c-icon-btn:hover { background: var(--hover-bg); color: var(--text-color); opacity: 1; }
.c-icon-btn.active { color: var(--primary-color); }
.c-icon-btn.community-like.active { color: var(--success-color); }
.c-icon-btn.community-dislike.active { color: var(--danger-color); }
.c-vote-group { display: inline-flex; align-items: center; gap: 4px; padding: 0; border-radius: 8px; }
.c-vote-group .vote-score { min-width: 1.6em; text-align: center; font-weight: 600; font-size: 14px; }

/* --- 13. Шапка карточки / поста --- */
.card-head, .single-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.card-head-left, .single-head-left { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.card-head-avatar, .single-head-avatar { display: inline-flex; flex-shrink: 0; line-height: 0; }
.card-head-avatar .c-avatar, .single-head-avatar .c-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.card-head-meta, .single-head-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.card-head-top, .single-head-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.2; }
.card-head-top .c-name, .single-head-top .c-name { font-size: 15px; font-weight: 500; color: var(--text-color); text-decoration: none; }
.card-head-top .c-name:hover, .single-head-top .c-name:hover { color: var(--primary-color); opacity: 1; }
.card-head-bottom, .single-head-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted-color); line-height: 1.3; }
.card-head-bottom .c-category, .single-head-bottom .c-category { font-size: 13px; color: var(--muted-color); text-decoration: none; margin: 0; }
.card-head-bottom .c-category:hover, .single-head-bottom .c-category:hover { color: var(--primary-color); }
.card-head-bottom .c-badge, .single-head-bottom .c-badge { font-size: 9px; padding: 2px 6px; letter-spacing: .2px; }
.card-head-right, .single-head-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.c-meta-sep { color: var(--muted-color); opacity: .6; }
.c-meta-date { color: var(--muted-color); font-size: 13px; white-space: nowrap; }
.card-head-avatar-wrap, .single-head-avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
.card-head-avatar-wrap .card-head-avatar, .single-head-avatar-wrap .single-head-avatar { display: block; line-height: 0; }
.cat-badge {
    position: absolute; width: 22px; height: 22px; border-radius: 50%; bottom: 2px; left: 25px;
    overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; z-index: 2; transition: transform .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.35); background: var(--card-bg); border: 2px solid var(--border-color);
}
.cat-badge:hover { transform: scale(1.08); opacity: 1; }
.cat-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cat-badge .svg-category { width: 15px; height: 15px; display: block; }

/* --- 14. Карточка поста --- */
.community-card {
    background: var(--card-bg); border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow); margin-bottom: 16px; transition: box-shadow .15s;
}
.community-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.card-title { font-size: 22px; font-weight: 500; max-width: 100%; padding: 0; margin: 0 0 12px; line-height: 30px; }
.card-title a { color: var(--text-color); }
.card-title a:hover { color: var(--primary-color); opacity: 1; }
.card-thumb { display: block; margin-bottom: 12px; }
.card-thumb img { width: 100%; border-radius: 10px; max-height: 400px; object-fit: cover; }
.card-excerpt { color: var(--text-color); font-size: 15px; line-height: 1.6; margin-bottom: 16px; overflow-wrap: anywhere; }
.card-foot, .single-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.card-foot .c-views { cursor: default; }
.card-foot .c-views:hover { background: transparent; }
.single-foot { padding-top: 20px; margin-top: 24px; }
.c-foot-left, .c-foot-right { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* --- 15. Single post --- */
.community-single { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.community-single h1 { font-size: 2rem; font-weight: 700; line-height: 1.25; margin-bottom: 16px; }
.community-single .post-content { font-size: 1.05rem; line-height: 1.7; margin: 24px 0; }
.community-single .post-content img { border-radius: 8px; margin: 12px 0; max-width: 100%; }
.community-single .post-content blockquote { border-left: 4px solid var(--primary-color); padding-left: 16px; margin: 16px 0; color: var(--muted-color); font-style: italic; }
.post-content blockquote cite, .community-single blockquote cite, .card-full-content blockquote cite { display: block; margin-top: 8px; font-size: 0.9em; color: var(--muted-color); font-style: normal; }
.post-content blockquote cite::before, .community-single blockquote cite::before, .card-full-content blockquote cite::before { content: "— "; }
.community-single .post-content code { background: var(--hover-bg); padding: 2px 6px; border-radius: 4px; }
.single-date { color: var(--muted-color); font-size: 13px; }
.single-title { font-size: 2.1rem; font-weight: 800; line-height: 1.2; margin: 0 0 16px; }
.single-excerpt { font-size: 1.1rem; color: var(--text-color); line-height: 1.6; margin-bottom: 24px; }
.single-thumb { margin-bottom: 24px; }
.single-thumb img { width: 100%; border-radius: 12px; }
.c-lock-icon, .c-globe-icon { display: inline-flex; align-items: center; padding: 0 6px; }
.c-globe-icon { color: var(--muted-color); }
.c-lock-icon svg { width: 20px; height: 20px; }
/* --- Разделитель (EditorJS Delimiter) — как в редакторе --- */
.post-content hr, .community-single hr, .card-full-content hr { border: 0; display: flex; align-items: center; justify-content: center; height: 65px; margin: 20px 0; opacity: 1; background: none; }
.post-content hr::before, .community-single hr::before, .card-full-content hr::before { content: "***"; display: inline-block; font-size: 30px; line-height: 65px; letter-spacing: .2em; color: var(--text-color); }

/* --- 16. Paywall --- */
.community-paywall { background: var(--card-bg); border: 1px dashed var(--border-color); border-radius: 12px; padding: 40px 24px; text-align: center; margin: 24px 0; }
.paywall-emoji { font-size: 48px; line-height: 1; margin-bottom: 16px; }
.paywall-text { font-size: 17px; color: var(--text-color); }
.paywall-link { color: var(--primary-color); font-weight: 600; text-decoration: none; }
.paywall-link:hover { text-decoration: underline; }

/* --- 17. Виджеты --- */
.community-sidebar-right .widget { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.community-sidebar .widget:last-child { margin-bottom: 0; }
.widget-title { margin: 0 0 1rem; padding: 0; border: 0; font-size: 15px; line-height: 22px; font-weight: 500; text-transform: inherit; }
.sidebar-block .widget-title { text-transform: none; font-size: 15px; line-height: 1.4 !important; margin-bottom: 7px; padding-left: 12px; font-weight: 400; color: #cdcdcd; }
.community-comments-list { display: flex; flex-direction: column; }
.c-comment { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.c-comment:last-child { border-bottom: 0; padding-bottom: 0; }
.c-comment:first-child { padding-top: 0; }
.c-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.c-comment .c-avatar { width: 28px; height: 28px; }
.c-comment .c-name { font-size: 14px; font-weight: 500; color: var(--text-color); }
.c-text { font-size: 14px; line-height: 1.5; color: var(--text-color); margin-bottom: 8px; }
.c-post-title { display: block; font-size: 13px; font-weight: 700; color: var(--text-color); line-height: 1.4; }
.c-post-title:hover { color: var(--primary-color); opacity: 1; }
.c-top-list { list-style: none; padding: 0; margin: 0; }
.c-top-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.c-top-list li:last-child { border-bottom: 0; }
.c-top-list .c-name { flex: 1; font-size: 14px; font-weight: 500; }
.c-karma-pill { background: rgba(240,197,82,.15); color: var(--warning-color); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }

/* --- 18. Комментарии --- */
.comments-section { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-color); }
.comments-section h4 { font-size: 1.2rem; font-weight: 700; }
.comment-item { background: var(--hover-bg); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.comment-meta { flex: 1; min-width: 0; }
.comment-author-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--text-color); }
.comment-date { font-size: 12px; color: var(--muted-color); margin-top: 2px; }
.comment-body { font-size: 14px; line-height: 1.5; color: var(--text-color); margin-bottom: 8px; padding-left: 42px; word-wrap: break-word; }
.comment-reply-btn {
    background: transparent; border: 0; color: var(--primary-color); font-size: 13px; font-weight: 500;
    cursor: pointer; padding: 4px 8px; border-radius: 6px; margin-left: 42px;
    transition: background .15s; font-family: inherit;
}
.comment-reply-btn:hover { background: var(--card-bg); }
.comment-reply-hint {
    background: rgba(74, 144, 226, .12); border: 1px solid rgba(74, 144, 226, .3);
    border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-color);
    margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.cancel-reply { background: transparent; border: 0; color: var(--danger-color); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; font-family: inherit; }
.cancel-reply:hover { background: rgba(229, 57, 53, .1); }
#community-comment-form textarea { background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 8px; resize: vertical; }
#community-comment-form textarea:focus { background: var(--card-bg); color: var(--text-color); border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74,144,226,.15); }

.comment-depth-0 { margin-left: 0; }
.comment-depth-1 { margin-left: 32px; }
.comment-depth-2 { margin-left: 64px; }
.comment-depth-3 { margin-left: 96px; }
.comment-depth-4 { margin-left: 128px; }
.comment-depth-5 { margin-left: 160px; }
@media (max-width: 600px) {
    .comment-depth-1 { margin-left: 16px; }
    .comment-depth-2 { margin-left: 32px; }
    .comment-depth-3 { margin-left: 48px; }
    .comment-depth-4 { margin-left: 64px; }
    .comment-depth-5 { margin-left: 80px; }
}

/* --- 19. Колокольчик --- */
.community-bell-wrap { position: relative; display: inline-block; }
.community-bell { background: transparent; border: 0; color: #fff; padding: 6px 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; transition: color .15s; }
.community-bell:hover, .community-bell-wrap.open .community-bell { color: var(--primary-color); }
.community-bell-badge {
    position: absolute; top: 0; right: -2px; background: var(--danger-color); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px;
    text-align: center; padding: 0 4px; border-radius: 8px;
}
.community-bell-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 8px; width: 340px;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s, visibility .2s, transform .2s; z-index: 1100; overflow: hidden;
}
.community-bell-wrap.open .community-bell-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.cbd-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-color); font-size: 14px; }
.cbd-header strong { font-weight: 700; }
.cbd-mark-read { background: transparent; border: 0; color: var(--primary-color); font-size: 12px; cursor: pointer; padding: 0; font-family: inherit; }
.cbd-mark-read:hover { text-decoration: underline; }
.cbd-body { max-height: 380px; overflow-y: auto; }
.cbd-body::-webkit-scrollbar { width: 6px; }
.cbd-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.cbd-empty { padding: 32px 16px; text-align: center; color: var(--muted-color); font-size: 14px; }
.cbd-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--border-color); text-decoration: none; color: var(--text-color); transition: background .15s; }
.cbd-item:last-child { border-bottom: 0; }
.cbd-item:hover { background: var(--hover-bg); color: var(--text-color); opacity: 1; }
.cbd-item.unread { background: rgba(74, 144, 226, .08); }
.cbd-item.unread .cbd-item-text { font-weight: 600; }
.cbd-item-text { font-size: 14px; line-height: 1.4; margin-bottom: 4px; }
.cbd-item-time { font-size: 12px; color: var(--muted-color); }
.cbd-footer { border-top: 1px solid var(--border-color); text-align: center; padding: 10px; font-size: 13px; }
.cbd-footer a { color: var(--primary-color); text-decoration: none; }
.cbd-footer a:hover { text-decoration: underline; }

/* --- 20. Футер --- */
.community-footer { background: var(--card-bg); border-top: 1px solid var(--border-color); color: var(--muted-color); text-align: center; padding: 24px 0; margin-top: 40px; font-size: 14px; }
.community-footer a { color: var(--muted-color); text-decoration: none; }
.community-footer a:hover { color: var(--primary-color); }

/* --- 21. Пагинация --- */
.page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color);
    border-radius: 8px; text-decoration: none; font-size: 14px; margin: 0 3px;
}
.page-numbers:hover { background: var(--hover-bg); color: var(--primary-color); opacity: 1; }
.page-numbers.current { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* --- 22. Темы --- */
.topics-list { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.topic-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.topic-row:last-child { border-bottom: 0; }
.topic-row:hover { background: var(--hover-bg); }
.topic-avatar {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--hover-bg); text-decoration: none;
}
.topic-avatar img { width: 100%; height: 100%; object-fit: cover; }
.topic-avatar .svg-category { width: 26px; height: 26px; display: block; }
.topic-info { flex: 1; min-width: 0; }
.topic-name { display: block; font-size: 16px; font-weight: 600; color: var(--text-color); text-decoration: none; margin-bottom: 4px; }
.topic-name:hover { color: var(--primary-color); opacity: 1; }
.topic-stats { font-size: 13px; color: var(--muted-color); }
.topic-subscribe {
    padding: 8px 18px; border-radius: 20px; background: var(--hover-bg);
    color: var(--text-color); border: 0; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s, color .15s; text-decoration: none;
    white-space: nowrap; font-family: inherit;
}
.topic-subscribe:hover { background: var(--border-color); color: var(--text-color); opacity: 1; }
.topic-subscribe.active { background: var(--primary-color); color: #fff; }
.topic-subscribe.active:hover { background: var(--primary-hover); color: #fff; }

/* --- 23. Топы --- */
.tops-list { list-style: none; padding: 0; margin: 0; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tops-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-color); transition: background .15s; }
.tops-item:last-child { border-bottom: 0; }
.tops-item:hover { background: var(--hover-bg); }
.tops-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    background: var(--hover-bg); color: var(--muted-color);
    border-radius: 50%; font-size: 14px; font-weight: 700;
}
.tops-item:nth-child(1) .tops-rank { background: var(--warning-color); color: #1c1e21; }
.tops-item:nth-child(2) .tops-rank { background: #b8bcc0; color: #1c1e21; }
.tops-item:nth-child(3) .tops-rank { background: #cd7f32; color: #fff; }
.tops-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.tops-avatar-wrap { display: inline-flex; flex-shrink: 0; text-decoration: none; }
.tops-avatar-emoji { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--hover-bg); border-radius: 50%; font-size: 20px; }
.tops-avatar-emoji .svg-category { width: 24px; height: 24px; display: block; }
.tops-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tops-name { font-size: 15px; font-weight: 600; color: var(--text-color); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tops-name:hover { color: var(--primary-color); opacity: 1; }
.tops-login { font-size: 12px; color: var(--muted-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tops-karma { flex-shrink: 0; background: rgba(240, 197, 82, .15); color: var(--warning-color); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 10px; white-space: nowrap; }
.tops-karma-cat { background: rgba(74, 144, 226, .15); color: var(--primary-color); }
.rating-grid { display: grid; gap: 20px; }
.rating-block { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.rating-block-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--border-color); }
.rating-block-title { font-size: 1.15rem; font-weight: 700; color: var(--text-color); margin: 0; }
.rating-block-more { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted-color); transition: background .15s, color .15s; }
.rating-block-more:hover { background: var(--hover-bg); color: var(--text-color); opacity: 1; }
.rating-page-header { margin-bottom: 20px; }
.rating-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-color); font-size: 14px; font-weight: 500; margin-bottom: 8px; text-decoration: none; transition: color .15s; }
.rating-back:hover { color: var(--primary-color); opacity: 1; }
.rating-title-page { font-size: 1.8rem; font-weight: 700; color: var(--text-color); margin: 0; }
.tops-list-full { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); }

/* --- 24. Подписки --- */
.following-tabs { display: flex; gap: 4px; background: var(--card-bg); padding: 6px; border-radius: 12px; margin-bottom: 20px; width: fit-content; }
.following-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px;
    background: transparent; border: 0; color: var(--muted-color); font-size: 14px;
    font-weight: 500; cursor: pointer; transition: background .15s, color .15s; font-family: inherit;
}
.following-tab:hover { background: var(--hover-bg); color: var(--text-color); }
.following-tab.active { background: var(--hover-bg); color: var(--text-color); font-weight: 600; }
.following-tab-count { background: var(--hover-bg); color: var(--text-color); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.following-tab.active .following-tab-count { background: var(--primary-color); color: #fff; }
.following-list { background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.following-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.following-row:last-child { border-bottom: 0; }
.following-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--hover-bg); text-decoration: none; }
.following-avatar img { width: 100%; height: 100%; object-fit: cover; }
.following-emoji { font-size: 22px; }
.following-info { flex: 1; min-width: 0; }
.following-name { display: block; font-size: 15px; font-weight: 600; color: var(--text-color); text-decoration: none; margin-bottom: 4px; }
.following-name:hover { color: var(--primary-color); opacity: 1; }
.following-stats { font-size: 13px; color: var(--muted-color); }
.following-btn {
    padding: 8px 18px; border-radius: 20px; background: var(--hover-bg);
    color: var(--text-color); border: 0; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s, color .15s;
    white-space: nowrap; flex-shrink: 0; font-family: inherit;
}
.following-btn:hover { background: var(--border-color); }
.following-btn.active { background: var(--primary-color); color: #fff; }
.following-btn.active:hover { background: var(--primary-hover); }

/* --- 25. Вкладки профиля --- */
.profile-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--card-bg); padding: 6px; border-radius: 12px; overflow-x: auto; flex-wrap: wrap; }
.profile-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px;
    color: var(--text-color); font-size: 14px; font-weight: 500; text-decoration: none;
    white-space: nowrap; transition: background .15s; background: transparent; border: 0;
    cursor: pointer; font-family: inherit;
}
.profile-tab:hover { background: var(--hover-bg); color: var(--text-color); opacity: 1; }
.profile-tab.active { background: var(--primary-color); color: #fff; }
.profile-tab-badge {
    background: var(--danger-color); color: #fff; font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; line-height: 18px; text-align: center;
    padding: 0 5px; border-radius: 9px;
}
.profile-tab.active .profile-tab-badge { background: rgba(255,255,255,.3); }

/* --- 26. Сообщения --- */
.messages-list { display: flex; flex-direction: column; gap: 8px; }
.message-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 16px;
    background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color);
    text-decoration: none; color: var(--text-color); transition: border-color .15s;
}
.message-item:hover { border-color: var(--primary-color); color: var(--text-color); opacity: 1; }
.message-item.unread { background: rgba(74, 144, 226, .08); border-color: rgba(74, 144, 226, .3); }
.message-item.unread .message-name { font-weight: 700; }
.message-body { flex: 1; min-width: 0; }
.message-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.message-name { font-size: 14px; font-weight: 500; color: var(--text-color); }
.message-name:hover { color: var(--primary-color); opacity: 1; }
.message-time { font-size: 12px; color: var(--muted-color); white-space: nowrap; }
.message-text { font-size: 14px; line-height: 1.5; color: var(--text-color); word-wrap: break-word; }

/* --- 27. Чаты --- */
.chats-list { display: flex; flex-direction: column; gap: 10px; }
.chat-block { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: border-color .15s; }
.chat-block:hover { border-color: rgba(74, 144, 226, .4); }
.chat-block.unread { border-color: rgba(74, 144, 226, .6); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; transition: background .15s; }
.chat-head:hover { background: var(--hover-bg); }
.chat-avatar { position: relative; flex-shrink: 0; }
.chat-avatar img { width: 48px; height: 48px; border-radius: 50%; display: block; }
.chat-unread-badge { position: absolute; top: -4px; right: -4px; background: var(--danger-color); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; line-height: 20px; text-align: center; padding: 0 6px; border-radius: 10px; border: 2px solid var(--card-bg); }
.chat-info { flex: 1; min-width: 0; }
.chat-name { font-size: 15px; font-weight: 600; color: var(--text-color); margin-bottom: 3px; }
.chat-preview { font-size: 13px; color: var(--muted-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-block.unread .chat-name { color: var(--primary-color); }
.chat-block.unread .chat-preview { color: var(--text-color); font-weight: 500; }
.chat-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.chat-time { font-size: 12px; color: var(--muted-color); white-space: nowrap; }
.chat-delete-btn { background: transparent; border: 0; color: var(--muted-color); cursor: pointer; padding: 6px; border-radius: 6px; display: inline-flex; transition: color .15s, background .15s; }
.chat-delete-btn:hover { color: var(--danger-color); background: rgba(229, 57, 53, .1); }
.chat-body { border-top: 1px solid var(--border-color); background: rgba(0,0,0,.15); }
.chat-messages { max-height: 400px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.chat-loading, .chat-empty { text-align: center; color: var(--muted-color); padding: 20px; font-size: 14px; }
.chat-msg { max-width: 78%; align-self: flex-start; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.5; color: var(--text-color); word-wrap: break-word; position: relative; }
.chat-msg-own { align-self: flex-end; background: rgba(74, 144, 226, .18); border-color: rgba(74, 144, 226, .4); }
.chat-msg-text { white-space: pre-wrap; }
.chat-msg-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--muted-color); }
.chat-msg-time { opacity: .8; }
.chat-msg-del { background: transparent; border: 0; color: var(--muted-color); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 4px; transition: color .15s, background .15s; }
.chat-msg-del:hover { color: var(--danger-color); background: rgba(229, 57, 53, .1); }
.chat-reply-form { padding: 12px 16px; border-top: 1px solid var(--border-color); background: var(--card-bg); }
.chat-reply-text { width: 100%; margin-bottom: 8px; font-size: 14px; }
.chat-reply-actions { display: flex; align-items: center; gap: 12px; }
.chat-reply-status { font-size: 13px; }

/* --- 28. Бургер / мобильное меню --- */
.community-burger { display: none; background: transparent; border: 0; color: #fff; padding: 0; cursor: pointer; align-items: center; justify-content: center; }
.community-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000; }
body.mobile-menu-open { overflow: hidden; }
body.mobile-menu-open .community-mobile-overlay { display: block; }
.community-mobile-close { background: transparent; border: 0; color: var(--text-color); font-size: 22px; cursor: pointer; padding: 4px 10px; }
.mobile-block { background: var(--hover-bg); border-radius: 10px; padding: 12px; margin-bottom: 16px; }

/* --- 29. Форма добавления / редактирования поста --- */
.add-post-wrap { background: var(--card-bg); color: var(--text-color); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.add-post-header { padding: 20px 24px; border-bottom: 1px solid var(--border-color); }
.add-post-header h3 { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--text-color); }
.add-post-tabs { display: flex; justify-content: center; gap: 4px; padding: 16px; border-bottom: 1px solid var(--border-color); }
.add-post-tab { background: transparent; border: 0; padding: 8px 24px; border-radius: 20px; color: var(--muted-color); font-size: 14px; cursor: pointer; transition: background .15s, color .15s; font-family: inherit; }
.add-post-tab:hover { background: var(--hover-bg); }
.add-post-tab.active { background: var(--hover-bg); color: var(--text-color); font-weight: 600; }
.add-post-pane { padding: 24px; display: block; }
.add-post-title-input { width: 100%; border: 0; outline: 0; font-size: 1.7rem; font-weight: 700; color: var(--text-color); background: transparent; padding: 8px 0; margin-bottom: 12px; font-family: inherit; }
.add-post-title-input::placeholder { color: var(--muted-color); }
.add-post-thumb-wrap { display: block; margin-bottom: 28px; width: 100%; }
.add-post-thumb {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    border: 2px dashed var(--border-color); border-radius: 12px; padding: 40px 20px;
    text-align: center; color: var(--muted-color); cursor: pointer;
    transition: border-color .15s, background .15s; width: 100%; min-height: 180px;
}
.add-post-thumb:hover { border-color: var(--primary-color); background: var(--hover-bg); }
.add-post-thumb svg { color: var(--muted-color); display: block; flex-shrink: 0; }
.add-post-thumb span { display: block; font-size: 15px; color: var(--muted-color); }
.add-post-thumb img { max-width: 100%; max-height: 280px; border-radius: 8px; object-fit: contain; }
.add-post-hint { display: block; font-size: 12px; color: var(--muted-color); margin-top: 8px; text-align: center; }
.add-post-field { display: block; margin-bottom: 24px; width: 100%; }
.add-post-field label { display: block; font-size: 14px; color: var(--muted-color); margin-bottom: 8px; font-weight: 500; }
.add-post-field select {
    display: block; width: 100%; padding: 12px 14px; border: 1px solid var(--border-color);
    border-radius: 10px; font-size: 15px; background: var(--bg-color); color: var(--text-color);
    outline: none; cursor: pointer; font-family: inherit;
}
.add-post-field select:focus { border-color: var(--primary-color); }
.add-post-checkboxes { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.add-post-check { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-color); cursor: pointer; padding: 8px 0; user-select: none; }
.add-post-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary-color); flex-shrink: 0; cursor: pointer; margin: 0; }
.add-post-check span { line-height: 1.4; }
.add-post-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--border-color); background: var(--card-bg); flex-wrap: wrap; }
.add-post-status { font-size: 14px; color: var(--muted-color); flex: 1; min-width: 0; }
.cap-submit { background: #1a9b56; border: 0; color: #fff; padding: 12px 32px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, transform .1s; white-space: nowrap; flex-shrink: 0; font-family: inherit; }
.cap-submit:hover { background: #158045; }
.cap-submit:active { transform: scale(.98); }
.cap-submit:disabled { opacity: .6; cursor: not-allowed; }

/* --- 30. Форма регистрации --- */
.register-wrap { max-width: 480px; margin: 0 auto; background: var(--card-bg); border-radius: 16px; padding: 40px 36px; box-shadow: var(--shadow); }
.register-header { text-align: center; margin-bottom: 28px; }
.register-header h3 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; color: var(--text-color); }
.register-subtitle { font-size: 14px; color: var(--muted-color); margin: 0; line-height: 1.5; }
.register-errors { background: rgba(229, 57, 53, .12); border: 1px solid rgba(229, 57, 53, .4); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; }
.register-error { color: #ff6b6b; font-size: 14px; line-height: 1.5; }
.register-error + .register-error { margin-top: 6px; }
.register-field { margin-bottom: 18px; }
.register-field .form-label { display: block; font-size: 14px; color: var(--text-color); margin-bottom: 6px; font-weight: 500; }
.register-field .c-input { width: 100%; background: var(--bg-color); padding: 12px 14px; border-radius: 10px; }
.form-hint { display: block; font-size: 12px; color: var(--muted-color); margin-top: 4px; }
.register-submit { width: 100%; background: var(--primary-color); border: 0; color: #fff; padding: 14px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .15s; margin-top: 8px; font-family: inherit; }
.register-submit:hover { background: var(--primary-hover); }
.register-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--muted-color); }
.register-footer a { color: var(--primary-color); font-weight: 500; }
.register-footer a:hover { text-decoration: underline; }

/* --- 31. Страница оплаты --- */
.subscribe-wrap { max-width: 900px; margin: 30px auto; }
.subscribe-header { text-align: center; margin-bottom: 40px; }
.subscribe-emoji { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.subscribe-header h2 { margin: 0 0 12px; font-size: 2rem; font-weight: 700; color: var(--text-color); }
.subscribe-header p { color: var(--muted-color); font-size: 15px; max-width: 600px; margin: 0 auto; line-height: 1.6; }
.subscribe-warning { background: rgba(255, 152, 0, .15); border: 1px solid rgba(255, 152, 0, .5); color: #ffb74d; border-radius: 12px; padding: 16px 20px; margin-bottom: 30px; font-size: 14px; line-height: 1.5; }
.subscribe-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.subscribe-plan { position: relative; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 10px; text-align: center; transition: border-color .2s, transform .2s; }
.subscribe-plan:hover { transform: translateY(-4px); border-color: rgba(74, 144, 226, .5); }
.subscribe-plan.featured { border-color: var(--primary-color); background: linear-gradient(180deg, rgba(74, 144, 226, .08), var(--card-bg)); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary-color); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 10px; letter-spacing: .5px; text-transform: uppercase; }
.plan-name { font-size: 16px; font-weight: 600; color: var(--text-color); margin-bottom: 16px; }
.plan-price { margin-bottom: 12px; display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.plan-num { font-size: 2.6rem; font-weight: 800; color: var(--text-color); line-height: 1; }
.plan-cur { font-size: 1.4rem; font-weight: 600; color: var(--muted-color); }
.plan-desc { font-size: 13px; color: var(--muted-color); margin-bottom: 24px; }
.plan-btn { width: 100%; background: var(--primary-color); border: 0; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; font-family: inherit; }
.plan-btn:hover:not(:disabled) { background: var(--primary-hover); }
.plan-btn:disabled { opacity: .5; cursor: not-allowed; }
.subscribe-features { background: var(--card-bg); border-radius: 12px; padding: 24px 28px; margin-bottom: 20px; }
.subscribe-features h4 { margin: 0 0 16px; font-size: 1.1rem; font-weight: 700; color: var(--text-color); }
.subscribe-feature { font-size: 14px; color: var(--text-color); padding: 8px 0; }
.subscribe-footer { text-align: center; color: var(--muted-color); font-size: 13px; line-height: 1.5; }
.subscribe-footer a { color: var(--primary-color); text-decoration: none; }
.subscribe-footer a:hover { text-decoration: underline; }

/* --- 32. Страница рубрики --- */
.category-header { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px 0; margin-bottom: 20px; }
.cat-header-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; flex-wrap: wrap; }
.cat-header-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.cat-icon { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--hover-bg); text-decoration: none; }
.cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.cat-emoji { font-size: 30px; }
.cat-meta { flex: 1; min-width: 0; }
.cat-title { font-size: 1.5rem; font-weight: 700; color: var(--text-color); margin: 0 0 6px; line-height: 1.2; }
.cat-stats { font-size: 14px; color: var(--muted-color); display: flex; align-items: center; gap: 6px; }
.cat-dot { color: var(--muted-color); }
.cat-follow-btn { background: #1a9b56; border: 0; color: #fff !important; padding: 10px 22px; border-radius: 22px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s; white-space: nowrap; flex-shrink: 0; font-family: inherit; }
.cat-follow-btn:hover { background: #158045; color: #fff !important; opacity: 1; }
.cat-follow-btn.active { background: var(--hover-bg); color: var(--text-color) !important; }
.cat-follow-btn.active:hover { background: var(--border-color); }
.cat-tabs { display: flex; gap: 4px; border-top: 1px solid var(--border-color); padding-top: 6px; }
.cat-tab { background: transparent; border: 0; padding: 12px 20px; border-radius: 0; color: var(--muted-color); font-size: 15px; font-weight: 500; cursor: pointer; position: relative; transition: color .15s; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.cat-tab:hover { color: var(--text-color); }
.cat-tab.active { color: var(--text-color); font-weight: 600; border-bottom-color: #1a9b56; }
.cat-sort { position: relative; margin-bottom: 16px; display: flex; justify-content: flex-start; }
.cat-sort-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--text-color); font-size: 15px; font-weight: 500; cursor: pointer; padding: 8px 4px; transition: color .15s; font-family: inherit; }
.cat-sort-toggle:hover { color: var(--primary-color); }
.cat-sort-toggle svg { color: var(--muted-color); transition: transform .2s; }
.cat-sort-toggle.active svg { transform: rotate(180deg); }
.cat-sort-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow-lg); min-width: 200px; padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, visibility .15s, transform .15s; z-index: 100; }
.cat-sort-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.cat-sort-item { display: block; padding: 10px 16px; color: var(--text-color); text-decoration: none; font-size: 14px; transition: background .1s; white-space: nowrap; }
.cat-sort-item:hover { background: var(--hover-bg); color: var(--text-color); opacity: 1; }
.cat-sort-item.active { color: var(--primary-color); font-weight: 600; }
.cat-description { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; font-size: 15px; line-height: 1.7; color: var(--text-color); }
.cat-description p { margin: 0 0 14px; }
.cat-description p:last-child { margin-bottom: 0; }
.cat-icon .svg-category { width: 32px; height: 32px; display: block; }

/* --- 33. Настройки профиля --- */
.settings-tabs { display: flex; gap: 4px; background: var(--card-bg); padding: 6px; border-radius: 12px; margin-bottom: 20px; overflow-x: auto; flex-wrap: wrap; }
.settings-tab { padding: 10px 18px; border-radius: 8px; color: var(--muted-color); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.settings-tab:hover { background: var(--hover-bg); color: var(--text-color); opacity: 1; }
.settings-tab.active { background: var(--hover-bg); color: var(--text-color); font-weight: 600; }
.settings-pane { background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); padding: 28px 32px; }
.settings-title { font-size: 1.5rem; font-weight: 700; color: var(--text-color); margin: 0 0 6px; }
.settings-subtitle { font-size: 14px; color: var(--muted-color); margin: 0 0 24px; }
.settings-field { margin-bottom: 12px; }
.settings-input { width: 100%; background: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-color); padding: 12px 16px; border-radius: 10px; font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit; }
.settings-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 144, 226, .15); }
.settings-input::placeholder { color: var(--muted-color); }
textarea.settings-input { resize: vertical; min-height: 100px; }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.settings-save { background: #1a9b56; border: 0; color: #fff; padding: 12px 32px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; font-family: inherit; }
.settings-save:hover { background: #158045; }
.settings-remove { background: transparent; border: 0; color: var(--muted-color); font-size: 14px; cursor: pointer; padding: 8px 0; text-align: center; display: block; width: 100%; margin-top: 12px; font-family: inherit; }
.settings-remove:hover { color: var(--danger-color); }
.settings-file-label { display: block; text-align: center; background: var(--bg-color); border: 2px dashed var(--border-color); border-radius: 12px; padding: 16px; color: var(--text-color); font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 16px; transition: border-color .15s, background .15s; }
.settings-file-label:hover { border-color: var(--primary-color); background: var(--hover-bg); }
.avatar-settings-preview { display: flex; justify-content: center; margin-bottom: 20px; }
.avatar-settings-preview img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.profile-cover-preview { height: 180px; border-radius: 12px 12px 0 0; margin: -16px -16px 16px; background-size: cover; background-position: center; }
.profile-notice { background: rgba(26, 155, 86, .15); border: 1px solid rgba(26, 155, 86, .5); color: #6be59a; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.profile-notice-error { background: rgba(229, 57, 53, .15); border-color: rgba(229, 57, 53, .5); color: #ff8a80; }

/* --- 34. Публичный профиль автора --- */
.author-header { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 20px; }
.author-cover, .profile-cover-preview, .cover-settings-preview {
    height: 180px; position: relative; background-color: #1a2a22;
    background-image:
        radial-gradient(at 20% 30%, rgba(0, 173, 100, 0.45) 0px, transparent 50%),
        radial-gradient(at 80% 20%, rgba(74, 144, 226, 0.35) 0px, transparent 50%),
        radial-gradient(at 60% 80%, rgba(240, 197, 82, 0.25) 0px, transparent 50%),
        radial-gradient(at 10% 90%, rgba(115, 96, 242, 0.30) 0px, transparent 50%);
    background-size: cover; background-position: center;
}
.profile-cover-preview { height: 180px; border-radius: 12px 12px 0 0; margin: -16px -16px 16px; }
.cover-settings-preview { height: 200px; border-radius: 12px; margin-bottom: 20px; }
.author-cover-badges { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.author-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 8px 4px 6px; cursor: pointer; border-radius: 16px; height: 27px; }
.author-badge svg { color: #1c1e21; }
.author-badge-top { background: #e0f2fe; color: #0369a1; }
.author-badge-top svg { color: #0369a1; }
.author-badge-pro { background: var(--primary-color); color: #fff; }
.author-badge-karma { background: #222222; color: #00ad64; }
.icon-karma-profile { width: 19px; height: 19px; padding: 4px; border-radius: 50%; background: #f7e35a; fill: var(--danger-color); }
.author-body { padding: 0 24px 20px; }
.author-avatar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: -60px; margin-bottom: 12px; flex-wrap: wrap; }
.author-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid var(--card-bg); background: var(--hover-bg); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.author-avatar img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.author-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.author-follow-btn { background: #1a9b56; color: #fff !important; border: 0; padding: 10px 24px; border-radius: 22px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; white-space: nowrap; text-decoration: none; font-family: inherit; }
.author-follow-btn:hover { background: #158045; opacity: 1; color: #fff !important; }
.author-follow-btn.active { background: var(--hover-bg); color: var(--text-color) !important; }
.author-follow-btn.active:hover { background: var(--border-color); }
.author-message-btn { background: var(--hover-bg); border: 1px solid var(--border-color); color: var(--text-color); width: 44px; height: 44px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.author-message-btn:hover { background: var(--border-color); }
.author-edit-btn { background: var(--hover-bg); border: 1px solid var(--border-color); color: var(--text-color); padding: 10px 20px; border-radius: 22px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s; }
.author-edit-btn:hover { background: var(--border-color); color: var(--text-color); opacity: 1; }
.author-name { font-size: 1.75rem; font-weight: 700; color: var(--text-color); margin: 0 0 10px; line-height: 1.2; }
.author-stats { display: flex; gap: 20px; font-size: 14px; color: var(--text-color); margin-bottom: 16px; flex-wrap: wrap; }
.author-stats span { display: inline-flex; align-items: center; gap: 6px; }
.author-tabs { display: flex; gap: 4px; border-top: 1px solid var(--border-color); margin: 0 -24px; padding: 0 24px; }
.author-tab { padding: 14px 4px; color: var(--muted-color); font-size: 15px; font-weight: 500; text-decoration: none; position: relative; transition: color .15s; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.author-tab:hover { color: var(--text-color); opacity: 1; }
.author-tab.active { color: var(--text-color); font-weight: 600; border-bottom-color: #1a9b56; }
.author-message-form { padding: 16px 24px; border-top: 1px solid var(--border-color); background: var(--bg-color); }
.author-comments { display: flex; flex-direction: column; gap: 10px; }
.author-comment-item { background: var(--card-bg); border-radius: 12px; padding: 16px 20px; box-shadow: var(--shadow); }
.author-comment-post { font-size: 14px; font-weight: 600; color: var(--text-color); text-decoration: none; display: block; margin-bottom: 8px; }
.author-comment-post:hover { color: var(--primary-color); opacity: 1; }
.author-comment-text { font-size: 14px; color: var(--text-color); line-height: 1.5; margin-bottom: 8px; }
.author-comment-date { font-size: 12px; color: var(--muted-color); }
.author-about { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; }
.author-about-block { margin-bottom: 24px; }
.author-about-block:last-child { margin-bottom: 0; }
.author-about-block h4 { font-size: 1rem; font-weight: 700; color: var(--text-color); margin: 0 0 12px; }
.author-about-block p { color: var(--text-color); font-size: 15px; line-height: 1.6; margin: 0; }
.author-about-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.author-about-list li { font-size: 14px; color: var(--text-color); }
.author-about-list li strong { color: var(--muted-color); font-weight: 500; }
.author-socials { display: flex; gap: 8px; flex-wrap: wrap; }
.author-social-link { background: var(--hover-bg); color: var(--text-color); padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.author-social-link:hover { background: var(--primary-color); color: #fff; opacity: 1; }

/* --- 35. Бейджи NSFW / теги --- */
.c-badge-nsfw { background: var(--danger-color); color: #fff; }
.c-badge-nocomment { background: var(--hover-bg); color: var(--muted-color); }
.nsfw-warning { background: rgba(229, 57, 53, .1); border: 1px solid rgba(229, 57, 53, .3); color: #ff8a80; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.nsfw-warning a { color: #ff5252; font-weight: 600; text-decoration: underline; }
.nsfw-overlay { background: rgba(229, 57, 53, .08); border: 2px dashed rgba(229, 57, 53, .4); border-radius: 12px; padding: 40px 24px; text-align: center; margin: 24px 0; }
.nsfw-overlay-inner h4 { font-size: 1.3rem; margin: 12px 0; color: var(--text-color); }
.nsfw-overlay-inner p { color: var(--muted-color); max-width: 500px; margin: 0 auto 20px; font-size: 15px; line-height: 1.6; }
.nsfw-overlay-icon { font-size: 56px; line-height: 1; margin-bottom: 4px; }
.single-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.single-tag { display: inline-flex; align-items: center; background: var(--hover-bg); color: var(--text-color); padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.single-tag:hover { background: var(--primary-color); color: #fff; opacity: 1; }
.comments-closed { text-align: center; color: var(--muted-color); font-size: 15px; padding: 30px 0; }
.comments-closed p { margin: 0; }
.c-nocomments { cursor: default; opacity: .6; }
.c-nocomments:hover { background: transparent; color: var(--muted-color); }
.c-karma-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: rgba(240, 197, 82, .15); color: var(--warning-color); white-space: nowrap; }

/* --- 35.1. Скрытый от гостей контент --- */
.community-hidden-guest { background: rgba(74, 144, 226, .08); border: 1px dashed var(--border-color); border-radius: 10px; padding: 16px; margin: 16px 0; }
.post-hidden { background: rgba(74, 144, 226, .08); border: 1px dashed var(--border-color); border-radius: 10px; padding: 16px; margin: 16px 0; }
.post-hidden-locked { text-align: center; color: var(--muted-color); font-size: 14px; }

/* --- 36. Анимации --- */
@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(var(--pulse-color), 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0); }
}
@keyframes card-expand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* --- 37. Похожие записи --- */
.related-posts { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-color); }
.related-title { font-size: 1.2rem; font-weight: 700; color: var(--text-color); margin: 0 0 16px; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-card { display: flex; flex-direction: column; background: var(--hover-bg); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--text-color); transition: background .15s, transform .15s; }
.related-card:hover { background: var(--border-color); color: var(--text-color); opacity: 1; transform: translateY(-2px); }
.related-thumb { width: 100%; height: 140px; background-size: cover; background-position: center; background-color: var(--border-color); }
.related-body { padding: 12px 14px; }
.related-name { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0 0 6px; }
.related-excerpt { font-size: 13px; color: var(--muted-color); line-height: 1.4; }

/* --- 38. Навигация пред/след --- */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.post-nav.post-nav-single { grid-template-columns: 1fr; }
.post-nav.post-nav-single .post-nav-item { text-align: center; }
.post-nav.post-nav-single .post-nav-label { justify-content: center; }
.post-nav-item { display: block; padding: 18px 22px; background: var(--hover-bg); border-radius: 12px; text-decoration: none; color: var(--text-color); transition: background .15s, transform .15s; min-height: 80px; }
.post-nav-item:hover { background: var(--border-color); color: var(--text-color); opacity: 1; transform: translateY(-2px); }
.post-nav-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-color); margin-bottom: 8px; font-weight: 500; }
.post-nav-next .post-nav-label, .post-nav-prev .post-nav-label { justify-content: center; }
.post-nav-next, .post-nav-prev { text-align: center; }
.post-nav-arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: transparent; color: var(--muted-color); font-size: 18px; font-weight: 300; line-height: 1; transition: color .15s; }
.post-nav-item:hover .post-nav-arrow { color: var(--primary-color); }
.post-nav-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- 39. Editor.js --- */
.cap-editor-js { min-height: 300px; background: transparent; }
.cap-editor-js .ce-block__content, .cap-editor-js .ce-toolbar__content { max-width: 100%; }
.cap-editor-js .ce-toolbar__plus, .cap-editor-js .ce-toolbar__settings-btn { color: var(--text-color); background: var(--hover-bg); border-radius: 6px; }
.cap-editor-js .ce-toolbar__plus:hover, .cap-editor-js .ce-toolbar__settings-btn:hover { background: var(--border-color); }
.cap-editor-js .cdx-search-field { background: var(--card-bg); color: var(--text-color); border-color: var(--border-color); }
.cap-editor-js .ce-popover, .cap-editor-js .ce-inline-toolbar, .cap-editor-js .ce-settings { background: var(--card-bg); border-color: var(--border-color); color: var(--text-color); }
.cap-editor-js .ce-popover-item__title { color: var(--text-color); }
.cap-editor-js .ce-popover-item:hover { background: var(--hover-bg); }
.cap-editor-js .ce-block--selected .ce-block__content { background: rgba(74, 144, 226, .1); }
.cap-editor-js .cdx-block { color: var(--text-color); }
.cap-editor-js [contenteditable] { outline: none; }
.cap-editor-js .cdx-input, .cap-editor-js .ce-block input, .cap-editor-js .ce-block textarea { background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 14px; }
.cap-editor-js .cdx-input:focus, .cap-editor-js .ce-block input:focus, .cap-editor-js .ce-block textarea:focus { border-color: var(--primary-color); outline: none; }
.cap-editor-js [data-placeholder]:empty::before { color: var(--muted-color); pointer-events: none; }
.cdx-notification { background: #e8f4fd; border: 1px solid #4a90e2; border-radius: 10px; padding: 16px 20px; }
.cdx-notification-title { font-size: 1.05rem; font-weight: 700; color: #1c62b8; margin-bottom: 6px; outline: none; }
.cdx-notification-text { color: #2a5f9e; font-size: 14px; line-height: 1.5; outline: none; }
.cdx-notification-title:empty::before, .cdx-notification-text:empty::before { content: attr(data-placeholder); color: #7ba8d0; }
.cdx-button { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-left: 3px solid var(--primary-color); background: var(--bg-color); border-radius: 8px; }
.cdx-button input { width: 100%; }
.cdx-link { display: flex; align-items: center; gap: 10px; background: #e8f4fd; border: 1px solid #4a90e2; border-radius: 10px; padding: 12px 16px; }
.cdx-link-icon { display: inline-flex; color: #4a90e2; flex-shrink: 0; }
.cdx-link-input { flex: 1; background: transparent !important; border: 0 !important; color: #1c62b8 !important; padding: 0 !important; }
.cdx-link-input::placeholder { color: #7ba8d0; }
.cdx-hidden { background: rgba(74, 144, 226, .1); border: 1px dashed #4a90e2; border-radius: 8px; padding: 12px 16px; }
.cdx-hidden [contenteditable] { color: var(--text-color); font-size: 15px; line-height: 1.5; outline: none; }
.cdx-hidden [contenteditable]:empty::before { content: attr(data-placeholder); color: var(--muted-color); }
.post-notification { background: #e8f4fd; border: 1px solid #4a90e2; border-radius: 10px; padding: 16px 20px; margin: 16px 0; color: #1c62b8; }
.post-notification-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.post-notification-text { font-size: 15px; line-height: 1.6; }
.post-button { display: inline-block; background: #1a9b56; color: #fff !important; padding: 12px 28px; border-radius: 24px; font-weight: 600; text-decoration: none; transition: background .15s; margin: 8px 0; }
.post-button:hover { background: #158045; color: #fff !important; opacity: 1; }

/* --- 40. Share popup --- */
.share-wrap { position: relative; display: inline-block; }
.share-popup { position: absolute; left: 50%; bottom: calc(100% + 8px); top: auto; transform: translateX(-50%) translateY(4px); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 6px; min-width: 220px; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s, transform .15s; z-index: 1100; }
.share-wrap.open .share-popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.share-popup::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 6px solid transparent; top: 100%; bottom: auto; border-top-color: var(--card-bg); border-bottom-color: transparent; }
.share-wrap.share-popup-down .share-popup { bottom: auto; top: calc(100% + 8px); }
.share-wrap.share-popup-down .share-popup::after { top: auto; bottom: 100%; border-bottom-color: var(--card-bg); border-top-color: transparent; }
.share-popup-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: transparent; border: 0; border-radius: 8px; color: var(--text-color); font-size: 14px; text-decoration: none; text-align: left; cursor: pointer; transition: background .15s; font-family: inherit; }
.share-popup-item:hover { background: var(--hover-bg); color: var(--text-color); opacity: 1; }
.share-popup-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: #fff; flex-shrink: 0; }
.share-popup-label { font-size: 14px; font-weight: 500; }
.post-share { margin: 24px 0 0; padding: 20px 0 4px; border-top: 1px solid var(--border-color); }
.post-share-title { font-size: 13px; color: var(--muted-color); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.post-share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.post-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: opacity .15s, transform .15s; font-family: inherit; }
.post-share-btn:hover { opacity: .9; color: #fff; transform: translateY(-1px); }
.post-share-btn svg { flex-shrink: 0; }

/* --- 41. TOC --- */
.post-toc { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; margin: 24px 0; overflow: hidden; }
.post-toc-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 20px; background: transparent; border: 0; color: var(--text-color); font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; transition: background .15s; font-family: inherit; }
.post-toc-header:hover { background: var(--hover-bg); }
.post-toc-arrow { transition: transform .2s; color: var(--muted-color); }
.post-toc.collapsed .post-toc-arrow, .post-toc-header[aria-expanded="false"] .post-toc-arrow { transform: rotate(-90deg); }
.post-toc-list { list-style: none; margin: 0; padding: 0 20px 16px; }
.post-toc-list li { position: relative; margin: 6px 0; font-size: 14px; line-height: 1.5; }
.post-toc-list li.toc-sub { padding-left: 22px; }
.post-toc-list .toc-num { color: var(--muted-color); font-weight: 600; margin-right: 2px; }
.toc-link { color: var(--primary-color); text-decoration: none; transition: color .15s; }
.toc-link:hover { color: var(--primary-color); text-decoration: underline; opacity: 1; }

/* --- 42. Focus --- */
.c-icon-btn:focus, .community-share-btn:focus, .community-copy-link:focus, .post-share-btn:focus { outline: none; }
.c-icon-btn:focus-visible, .community-share-btn:focus-visible, .post-share-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* --- 43. Страница "Пользователи" --- */
.users-page { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; }
.users-page-count { color: var(--success-color); }
.users-search { display: flex; gap: 10px; margin-bottom: 20px; }
.users-search-input-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.users-search-icon { position: absolute; left: 14px; color: var(--muted-color); pointer-events: none; }
.users-search-input { width: 100%; background: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-color); padding: 12px 16px 12px 42px; border-radius: 10px; font-size: 15px; outline: none; transition: border-color .15s; font-family: inherit; }
.users-search-input:focus { border-color: var(--primary-color); }
.users-search-input::placeholder { color: var(--muted-color); }
.users-search-btn { background: #f5f5f5; color: #1c1e21; border: 0; padding: 12px 28px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; white-space: nowrap; font-family: inherit; }
.users-search-btn:hover { background: #e0e0e0; }
.users-list { display: flex; flex-direction: column; gap: 2px; }
.user-row { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-bottom: 1px solid var(--border-color); transition: background .15s; }
.user-row:last-child { border-bottom: 0; }
.user-row:hover { background: var(--hover-bg); }
.user-row-avatar { flex-shrink: 0; display: inline-flex; }
.user-row-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.user-row-info { flex: 1; min-width: 0; }
.user-row-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-color); text-decoration: none; margin-bottom: 4px; }
.user-row-name:hover { color: var(--primary-color); opacity: 1; }
.user-row-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted-color); }
.user-row-stats span { white-space: nowrap; }
.user-row-action { flex-shrink: 0; }
.user-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 8px; background: var(--hover-bg); color: var(--text-color); border: 0; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; font-family: inherit; }
.user-btn:hover { background: var(--border-color); color: var(--text-color); opacity: 1; }
.user-btn.active { background: var(--primary-color); color: #fff; }
.user-btn.active:hover { background: var(--primary-hover); color: #fff; }
.user-btn-self { background: var(--hover-bg); }
.users-empty { text-align: center; padding: 60px 20px; color: var(--muted-color); }

/* --- 44. Адаптив --- */
@media (max-width: 1200px) {
    .community-wrapper { grid-template-columns: 220px minmax(0,1fr) 280px; gap: 16px; }
}

@media (max-width: 1024px) {
    .community-wrapper, .community-wrapper.no-right { grid-template-columns: 220px minmax(0, 1fr); }
    .community-sidebar-right { display: none; }
}

@media (max-width: 900px) {
    .rating-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .community-navbar-inner { padding: 0 16px; }
    .community-navbar .navbar-brand { padding-left: 0; }
    .community-wrapper, .community-wrapper.no-right { grid-template-columns: minmax(0, 1fr); margin: 12px auto; padding: 0 12px; }
    .card-title { font-size: 1.15rem; }
    .community-add-btn svg { width: 18px; height: 18px; }
    .subscribe-plans { grid-template-columns: 1fr; }
    .subscribe-header h2 { font-size: 1.5rem; }
    .community-burger { display: inline-flex; }
    .community-sidebar-left {
        position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw;
        height: 100vh; height: 100dvh; min-height: 0; max-height: none;
        background: var(--bg-color); z-index: 2100; padding: 0; margin: 0;
        row-gap: 0; transform: translateX(-100%); transition: transform .25s ease;
        overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box;
    }
    body.mobile-menu-open .community-sidebar-left { transform: translateX(0); }
    .community-sidebar-left .community-mobile-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
        background: var(--card-bg);
    }
    .community-sidebar-left .community-mobile-header .navbar-brand {
        color: var(--text-color); font-size: 1.2rem; font-weight: 700; text-decoration: none;
        display: inline-flex; align-items: center;
    }
    .community-sidebar-left .community-mobile-body { padding: 16px; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
    .community-sidebar-left .community-mobile-body::-webkit-scrollbar { width: 4px; }
    .community-sidebar-left .community-mobile-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
    .community-sidebar-left .community-mobile-body .widget { margin-bottom: 20px; }
    .community-sidebar-left .mobile-block-auth { display: block; margin: 16px; padding: 12px; background: var(--hover-bg); border-radius: 10px; }
}

@media (max-width: 600px) {
    .cat-header-top { flex-direction: column; align-items: flex-start; }
    .cat-title { font-size: 1.25rem; }
    .cat-icon { width: 52px; height: 52px; }
    .cat-follow-btn { width: 100%; text-align: center; }
    .related-grid { grid-template-columns: 1fr; }
    .related-thumb { height: 120px; }
    .post-nav { grid-template-columns: 1fr; }
    .post-nav-item { padding: 14px 18px; }
    .post-nav-title { font-size: 14px; }
    .settings-pane { padding: 20px 18px; }
    .settings-title { font-size: 1.2rem; }
    .author-cover { height: 140px; }
    .author-body { padding: 0 18px 18px; }
    .author-avatar { width: 90px; height: 90px; }
    .author-avatar-row { margin-top: -45px; }
    .author-name { font-size: 1.35rem; }
    .author-tabs { margin: 0 -18px; padding: 0 18px; }
    .author-tab { padding: 12px 4px; font-size: 14px; }
    .author-about { padding: 20px 18px; }
    .users-page { padding: 18px 16px; }
    .users-search { flex-direction: column; }
    .users-search-btn { width: 100%; }
    .user-row { padding: 12px 8px; gap: 10px; }
    .user-row-avatar img { width: 40px; height: 40px; }
    .user-row-name { font-size: 14px; }
    .user-btn { padding: 6px 14px; font-size: 13px; }
}

@media (max-width: 500px) {
    .community-bell-dropdown { width: 290px; right: -10px; }
    .add-post-title-input { font-size: 1.35rem; }
    .register-wrap { padding: 28px 20px; margin: 20px auto; }
    .register-header h3 { font-size: 1.35rem; }
    .add-post-footer { flex-direction: column-reverse; align-items: stretch; }
    .cap-submit { width: 100%; text-align: center; }
    .card-head-avatar .c-avatar, .single-head-avatar .c-avatar { width: 40px; height: 40px; }
    .card-head-top .c-name, .single-head-top .c-name { font-size: 15px; }
    .card-head-bottom, .single-head-bottom { font-size: 12px; }
    .c-meta-date { font-size: 12px; }
    .cat-badge .svg-category { width: 13px; height: 13px; }
    .community-card, .community-single { border-radius: 0; padding: 15px; }
    .card-head-meta, .single-head-meta { flex-direction: column; gap: 0; }
    .card-head-bottom, .single-head-bottom { gap: 3px; font-size: 13px; }
    .card-head-left, .single-head-left { gap: 10px; }
    .c-vote-group { gap: 0; padding: 0; }
    .c-icon-btn { gap: 4px; padding: 4px; }
    .navbar-right, .community-profile { gap: .7rem; }
    .community-user-dropdown > a, .community-user-dropdown > a img { width: 28px; height: 28px; min-width: 28px; }
    /* Поиск не скрыт — доступен в мобильном меню */
    .community-search { display: none; max-width: 100%; margin: 8px 0; }
    .community-search input { font-size: 14px; padding: 6px 12px; }
}

@media (max-width: 480px) {
    .tops-item { padding: 10px 14px; gap: 8px; }
    .tops-rank { width: 26px; height: 26px; font-size: 12px; }
    .tops-avatar { width: 32px; height: 32px; }
    .tops-name { font-size: 14px; }
    .tops-karma { font-size: 12px; padding: 3px 8px; }
}

/* --- 45. Страница 404 --- */
.error-404 { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 60px 40px; text-align: center; max-width: 600px; margin: 0 auto; }
.error-404-code { font-size: 120px; font-weight: 900; line-height: 1; letter-spacing: -4px; color: var(--primary-color); margin-bottom: 16px; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .error-404-code { background: linear-gradient(135deg, var(--primary-color), #7ab8f5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.error-404-title { font-size: 1.8rem; font-weight: 700; color: var(--text-color); margin: 0 0 12px; line-height: 1.2; }
.error-404-text { font-size: 15px; color: var(--muted-color); line-height: 1.6; margin: 0 0 28px; max-width: 460px; margin-left: auto; margin-right: auto; }
.error-404-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 40px; }
.error-404-back { color: var(--muted-color); font-size: 14px; font-weight: 500; text-decoration: none; padding: 10px 16px; border-radius: 8px; transition: background .15s, color .15s; background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.error-404-back:hover { background: var(--hover-bg); color: var(--text-color); opacity: 1; }
.error-404-search { padding-top: 28px; border-top: 1px solid var(--border-color); }
.error-404-search-label { font-size: 14px; color: var(--muted-color); margin: 0 0 12px; }
.error-404-search-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.error-404-search-input { flex: 1; background: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-color); padding: 12px 16px; border-radius: 10px; font-size: 15px; outline: none; transition: border-color .15s; font-family: inherit; }
.error-404-search-input:focus { border-color: var(--primary-color); }
.error-404-search-input::placeholder { color: var(--muted-color); }
.error-404-search-btn { background: var(--primary-color); color: #fff; border: 0; padding: 12px 24px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; white-space: nowrap; font-family: inherit; }
.error-404-search-btn:hover { background: var(--primary-hover); }
@media (max-width: 600px) {
    .error-404 { padding: 40px 24px; }
    .error-404-code { font-size: 80px; }
    .error-404-title { font-size: 1.4rem; }
    .error-404-search-form { flex-direction: column; }
    .error-404-search-btn { width: 100%; }
}

/* --- 46. Хлебные крошки --- */
.breadcrumbs { font-size: 13px; color: var(--muted-color); margin-bottom: 12px; line-height: 1.4; }
.breadcrumbs a { color: var(--muted-color); text-decoration: none; transition: color .15s; }
.breadcrumbs a:hover { color: var(--primary-color); opacity: 1; }
.breadcrumbs-sep { color: var(--muted-color); opacity: .5; margin: 0 6px; }
.breadcrumbs-current, .breadcrumbs .breadcrumb_last { color: var(--text-color); opacity: .85; }
.breadcrumbs p { margin: 0; }

/* --- 47. Кнопка "Показать полностью" --- */
.card-read-more { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--primary-color); font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 10px; margin: 0 0 12px; border-radius: 8px; transition: background .15s, color .15s; font-family: inherit; }
.card-read-more:hover { background: var(--hover-bg); color: var(--primary-color); opacity: 1; }
.card-read-more:disabled { opacity: .6; cursor: wait; }
.card-read-more svg { transition: transform .25s; display: block; }
.card-full-content { margin: 0 0 16px; color: var(--text-color); font-size: 15px; line-height: 1.7; animation: card-expand .2s ease-out; }
.card-full-content p { margin: 0 0 12px; }
.card-full-content h2 { font-size: 1.3rem; font-weight: 700; margin: 20px 0 10px; color: var(--text-color); }
.card-full-content h3 { font-size: 1.1rem; font-weight: 700; margin: 16px 0 8px; color: var(--text-color); }
.card-full-content ul, .card-full-content ol { padding-left: 24px; margin: 12px 0; }
.card-full-content li { margin-bottom: 6px; }
.card-full-content blockquote { border-left: 4px solid var(--primary-color); padding-left: 16px; margin: 16px 0; color: var(--muted-color); font-style: italic; }
.card-full-content code { background: var(--hover-bg); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; font-family: monospace; }
.card-full-content pre { background: var(--bg-color); padding: 12px 16px; border-radius: 8px; overflow-x: auto; border: 1px solid var(--border-color); }
.card-full-content pre code { background: transparent; padding: 0; }
.card-full-content img { max-width: 100%; border-radius: 8px; margin: 12px 0; height: auto; }
.card-full-content figure { margin: 16px 0; }
.card-full-content figcaption { font-size: 13px; color: var(--muted-color); text-align: center; margin-top: 6px; }
.card-full-content hr { border: 0; border-top: 1px solid var(--border-color); margin: 20px 0; }
.card-full-content a { color: var(--primary-color); }
.card-full-content .post-notification { background: #e8f4fd; border: 1px solid #4a90e2; border-radius: 10px; padding: 16px 20px; margin: 16px 0; color: #1c62b8; }
.card-full-content .post-button { display: inline-block; background: #1a9b56; color: #fff !important; padding: 12px 28px; border-radius: 24px; font-weight: 600; text-decoration: none; margin: 8px 0; }

/* --- 48. Кнопка "Пожаловаться" --- */
.community-report-btn .share-popup-icon { color: #fff; }
.community-report-btn:hover { background: rgba(192, 57, 43, .1); }
.community-report-btn:disabled { opacity: .6; cursor: wait; }
.community-report-btn-single { color: var(--muted-color); transition: color .15s, background .15s; }
.community-report-btn-single:hover { color: var(--danger-color); background: rgba(229, 57, 53, .1); }
.community-report-btn-single:disabled { opacity: .6; cursor: wait; }

/* --- 49. Заголовок страницы --- */
.page-title { font-size: 1.6rem; font-weight: 700; color: var(--text-color); margin: 0 0 20px; line-height: 1.2; }
@media (max-width: 600px) { .page-title { font-size: 1.3rem; } }
.page-title small { font-size: 1rem; font-weight: 500; color: var(--muted-color); }
h1.navbar-brand { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; display: inline-flex; align-items: center; }

/* --- 50. Skeleton --- */
.feed-loader { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.feed-skeleton { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.feed-skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--hover-bg); margin-bottom: 14px; animation: skeleton-pulse 1.5s ease-in-out infinite; }
.feed-skeleton-line { height: 12px; background: var(--hover-bg); border-radius: 6px; margin-bottom: 10px; animation: skeleton-pulse 1.5s ease-in-out infinite; }
.feed-skeleton-line:last-child { margin-bottom: 0; }

/* --- 51. Collapse --- */
.c-collapse { display: none; }
.c-collapse.open { display: block; }