/* BUNDLE: profile-full-bundle | Generated: 2026-03-07 20:14:40 | Sources: 16 */

/* --- File: profile.css --- */
/* ...existing code... */

/* Обновленная структура профиля с более современным дизайном */

.profile-header {

    position: relative;

    padding-bottom: 0;

    background-color: #f8f9fa;

    border-radius: 8px 8px 0 0;

    overflow: hidden;

}



.profile-content {

    display: flex;

    flex-wrap: wrap;

}



.profile-left-column {

    width: 240px;

    padding: 20px;

    box-sizing: border-box;

    background-color: #f8f9fa;

}



.profile-right-column {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    box-sizing: border-box;
    overflow: visible;
    width: 100%;
}



/* Уменьшаем размер обложки */

.profile-cover {

    width: 100%;

    height: 150px;
    /* Уменьшенная высота */

    overflow: hidden;

    position: relative;

    border: none;

    box-shadow: none;

    margin-bottom: 0;

}



.profile-cover img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.profile-name {

    font-size: 1.6rem;

    color: #333;

    font-weight: 600;

    margin: 0 0 8px 0;

    line-height: 1.2;

}

/* Стили для кастомной подсказки (Tooltip) */
.group-badge-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.group-badge-icon[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: #2c3e50;
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
    line-height: 1.2;
}

.group-badge-icon[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border: 5px solid transparent;
    border-top-color: #2c3e50;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.group-badge-icon[data-tooltip].active::after,
.group-badge-icon[data-tooltip].active::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (min-width: 768px) {
    .group-badge-icon[data-tooltip]:hover::after,
    .group-badge-icon[data-tooltip]:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

.profile-main-info-block,
.social-links-container,
.user-stats-container,
.subscription-stats-container,
.profile-actions-edit {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 10px;
    margin-bottom: 10px; /* Отступ между блоками */
}

.profile-main-info-block:last-child,
.social-links-container:last-child,
.user-stats-container:last-child,
.subscription-stats-container:last-child,
.profile-actions-edit:last-child {
    margin-bottom: 15px; /* Отменить отступ для последнего элемента */
}

/* Стили для адаптивности на мобильных */
@media (max-width: 768px) {
    .profile-main-info-block,
    .social-links-container,
    .user-stats-container,
    .subscription-stats-container,
    .profile-actions-edit {
        margin-bottom: 2px; /* Немного уменьшаем отступ на мобильных */
    }
}

.user-custom-status {

    font-style: italic;

    color: #6c757d;

    font-size: 0.95rem;

    display: block;

    position: relative;

    line-height: 1.4;

}

.user-status-area {
	display: block;
	align-items: center;
	justify-content: center;

}



.user-custom-status-edit {

    margin-left: 5px;

    opacity: 0.6;

    transition: opacity 0.2s;

    font-size: 14px;

    vertical-align: middle;

    cursor: pointer;

    text-decoration: none;

    background: none;

    border: none;

    padding: 4px;

}



.user-custom-status-edit:hover {
    opacity: 1;
}

.status-edit-icon {
    font-size: 14px;
    vertical-align: middle;
    margin-left: 5px;
    opacity: 1;
    transition: all 0.2s;
    color: #3498db;
}

.user-custom-status-edit:hover .status-edit-icon {
    opacity: 1;
}



.profile-avatar {

    margin: 12px 0; /* Сохраняем отступ сверху/снизу */

}



.profile-avatar img.avatar-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 0 solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}



.profile-avatar img.avatar-large:hover {
    transform: scale(1.05);
}

.user-status {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    font-size: 14px;
    color: #6c757d;
    gap: 5px;
    flex-direction: column;
    max-width: 200px;
    margin: 0 auto;
		padding: 5px 12px;
		font-weight: 500;
		background-color: #f9f9f9;
		align-self: flex-start;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}



.user-status.active {

    background-color: #d4edda;

    color: #155724;

}



.user-status.inactive {

    background-color: #f8d7da;

    color: #721c24;

}



.user-status.new {

    background-color: #cce5ff;

    color: #004085;

}



.user-stats-item {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #6c757d;

    font-size: 14px;

    background-color: #f9f9f9;

    padding: 3px 8px;

    border-radius: 4px;

    transition: background-color 0.2s;

    text-decoration: none;
    /* Добавляем для ссылок */

    flex-direction: column;

}



.profile-actions {

    margin-top: 15px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}

/* Более специфичные стили для кнопок действий внутри .profile-main-info-block */
.profile-main-info-block .profile-actions-dm,
.profile-main-info-block .profile-actions-subscribe {
    margin: 8px 0; /* Возвращаем отступ для этих кнопок внутри нового блока */
}

/* Стили для кнопок редактирования/администрирования в отдельном блоке */
.profile-actions-edit {
    margin-top: 0; /* Отменить общий margin-top для этого блока, так как родительский контейнер имеет margin-bottom */
    /* Дополнительные стили, если нужны */
}

/* Восстановленные стили для кнопок */
.button-primary {

    display: inline-block;

    padding: 8px 12px;

    background-color: #28a745;

    color: #ffffff;

    border-radius: 4px;

    text-decoration: none;

    font-weight: 500;

    transition: all 0.2s ease;

    border: none;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    text-align: center;

    font-size: 0.9rem;

}



/* Стили для адаптивности на мобильных */

@media (max-width: 768px) {

    .profile-content {

        flex-direction: column;

    }



    .profile-left-column {

        width: 100%;

        text-align: center;

    }



    .profile-right-column {

        padding: 12px;

        width: 100%;

        overflow: hidden;

        margin: 0;

    }



    .profile-avatar {

        display: flex;

        justify-content: center;

    }



    .user-status {

        margin: 5px auto 12px;

    }



    .profile-actions {

        align-items: center;

    }



    .tags-section {

        margin: 0;

        padding: 0;

        width: 100%;

    }



    .tags-wrapper {

        padding: 8px;

        margin: 0;

        width: 100%;

    }



    .tag-card {

        margin: 0;

        width: 100%;

        max-width: 100%;

        box-sizing: border-box;

    }

}



/* Стили для очень маленьких экранов */

@media (max-width: 360px) {

    .profile-right-column {

        padding: 8px;

    }

	}



/* Стили для формы редактирования статуса */

.status-display {

    display: flex;

    align-items: center;

    gap: 5px;

}



.status-edit-form {

    display: none;

    margin-top: 5px;

}



.status-edit-input {

    padding: 4px 8px;

    border: 1px solid #ddd;

    border-radius: 4px;

}



.status-save-btn,

.status-cancel-btn {

    background: none;

    border: none;

    cursor: pointer;

    padding: 4px;

    font-size: 16px;

}



.user-custom-status-container {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.user-custom-status-wrapper {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.edit-status-btn {

    background: none;

    border: none;

    cursor: pointer;

    padding: 0;

    font-size: 16px;

}



.status-block {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 5px;

}



.status-edit-btn {

    background: none;

    border: none;

    cursor: pointer;

    padding: 4px;

    opacity: 0.6;

    transition: opacity 0.2s;

}



.status-edit-btn:hover {

    opacity: 1;

}



.status-input {

    padding: 4px 8px;

    border: 1px solid #ddd;

    border-radius: 4px;

    min-width: 200px;

}



.status-save,

.status-cancel {

    background: none;

    border: none;

    cursor: pointer;

    padding: 4px;

    font-size: 16px;

}



.profile-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 10px 0;

}



.profile-status button {

    background: none;

    border: none;

    cursor: pointer;

    padding: 4px;

    font-size: 16px;

}



.profile-status input {

    padding: 4px 8px;

    border: 1px solid #ddd;

    border-radius: 4px;

    min-width: 200px;

}



/* Стили для фильтрации статей */

.tab-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;

}



.articles-filters {

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 4px;

    padding: 16px;

    margin-bottom: 20px;

}



.filters-group {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 12px;

    align-items: center;

}



.filter-search {

    width: 100%;

    padding: 10px 16px;

    border: 1px solid #e5e7eb;

    border-radius: 4px;

    font-size: 0.95rem;

    color: #374151;

    transition: border-color 0.2s;

}



.filter-search:focus {

    outline: none;

    border-color: #6366f1;

    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

}



.filter-select {

    padding: 10px 32px 10px 16px;

    border: 1px solid #e5e7eb;

    border-radius: 4px;

    font-size: 0.95rem;

    color: #374151;

    background: #fff url("data:image/svg+xml,...") no-repeat right 12px center;

    background-size: 16px;

    cursor: pointer;

    appearance: none;

    min-width: 180px;

}



.filter-select:focus {

    outline: none;

    border-color: #6366f1;

}



/* Стили для списка статей */

.user-articles {

    margin-top: 10px;

}



.user-article:hover {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    transform: translateY(-2px);

}



.article-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 0;

}



.article-header h4 {

    margin: 0;

    font-size: 1.1rem;

}



.article-header h4 a {

    color: #1f2937;

    text-decoration: none;

}



.article-meta {

    display: flex;

    gap: 16px;

    color: #6b7280;

    font-size: 0.9rem;

}



/* Стили пагинации */





.pagination a:hover {

    background-color: #f5f5f5;

}



/* Стили для поля ввода номера страницы */

.pagination-goto-form {

    margin: 0 5px;

}



.pagination-goto {

    display: flex;

    align-items: center;

}



/* Исправление позиционирования элементов относительно футера */

.container {

    position: relative;

    z-index: 1;

    margin-bottom: 5px;
    /* Добавляем отступ снизу для контейнера */

}



footer,
.site-footer {

    position: relative;

    z-index: 2;

    margin-top: 30px;
    /* Добавляем отступ сверху для футера */

}

select#status-filter {
    padding: 5px;
}

/* Адаптивность */

@media (max-width: 768px) {
	.profile-right-column{
		min-width: 250px;
	}

    .filters-group {
        grid-template-columns: 1fr;
    }

    .profile-left-column {
        padding: 0px;
    }

    .filter-select {

        width: 100%;

        min-width: 100%;

    }

    .article-meta {

        flex-direction: row;

        gap: 8px;

    }

    .tab-content {
        padding: 5px 0;
    }

    .tab-content>.tab-pane.active>.tab-header>a.button-primary {
        width: auto;
    }

}

@media (max-width: 480px) {
    .profile-main-info-block,
    .social-links-container,
    .user-stats-container,
    .subscription-stats-container,
    .profile-actions-edit {
        margin-bottom: 2px; /* Немного уменьшаем отступ на мобильных */
    }
}

@media (max-width: 360px) {
    .tab-content>.tab-pane.active>.tab-header>a.button-primary {
        width: auto;
    }
}


/* Стили для данных пользователя с пунктирными линиями */
.data-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
    padding-bottom: 8px;
    position: relative;
}

.data-row::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px dashed #d0d0d0;
}

.data-row:last-child {
    margin-bottom: 0;
}

.data-row:last-child::after {
    display: none;
}

.data-label {
    /* width: 180px; */
    font-weight: 600;
    color: #555;
    padding-right: 10px;
}

.data-value {
    flex: 1;
    text-align: right;
    color: #333;
    font-weight: normal;
    word-break: break-word;
}

/* Стили для значка передачи прав статей */
.transfer-pending-badge {
    margin-left: 8px;
    font-size: 1.1em;
    opacity: 0.8;
    vertical-align: middle;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

/* Стили для кнопки показа соц сетей */
.social-links-toggle {
    display: none;
    background: #fff;
    border-bottom: 0px solid #e5e7eb;
    border-radius: 0 0 6px 6px;
    padding: 0 6px;
    cursor: pointer;
    font-size: 14px;
    color: #484848;
    margin-bottom: 0;
    transition: all 0.2s;
    width: 10%;
    font-weight: 800;
    margin: 0 auto;
}

.social-links-toggle:hover {
    background: #3498db;
    color: #ffffff;
}

/* Мобильные стили для соц сетей */
@media (max-width: 768px) {
    .social-links-container-profile {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden; /* Дополнительная защита */
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .social-links-container-profile.open {
        visibility: visible;
        max-height: 200px;
        opacity: 1;
        padding: 15px 10px !important;
        background-color: #f8fafc;
        border-top: 1px solid #edf2f7 !important;
    }

    .social-links-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px; /* Фиксированная ширина для формы вкладки */
        height: 24px;
        background: #fff;
        border: 1px solid #edf2f7;
        border-top: none;
        border-radius: 0 0 10px 10px;
        margin: 0 auto;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        color: #64748b;
        font-size: 16px;
        z-index: 5;
				margin-bottom: 10px;
    }

    .social-links-container-profile.open + .social-links-toggle {
        background-color: #f8fafc;
        border-color: #edf2f7;
        color: #ef4444; /* Сделаем крестик красным для акцента */
    }
}


/* --- File: profile_tabs.css --- */
/* Стили для системы вкладок на странице профиля */

.profile-tabs {
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: visible;
}



.tabs-navigation {

    display: flex;

    background-color: #f8f9fa;

    border-bottom: 1px solid #dee2e6;

    overflow-x: auto;

}



.tab-link {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 15px 20px;

    color: #495057;

    text-decoration: none;

    border-bottom: 3px solid transparent;

    transition: all 0.2s ease;

    white-space: nowrap;

    font-weight: 500;

}



.tab-link:hover {

    background-color: #e9ecef;

    color: #212529;

}



.tab-link.active {

    background-color: #fff;

    color: #3498db;

    border-bottom-color: #3498db;
		border-radius: 4px;

}



.tab-count {

    background-color: #6c757d;

    color: white;

    padding: 2px 6px;

    border-radius: 10px;

    font-size: 12px;

    font-weight: normal;

}



.tab-link.active .tab-count {

    background-color: #3498db;

}



.tab-content {

    padding: 15px;

}



.tab-pane.active {

    display: block;

}



.tab-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 1px solid #dee2e6;
border-radius: 4px;
}



.tab-header h3 {

    margin: 0;

    color: #2c3e50;

}



/* Стили для статей в профиле */

.user-article {

    background-color: #f8f9fa;

    border-radius: 4px;

    padding: 20px;

    margin-bottom: 15px;

    border-left: 4px solid #3498db;

    transition: transform 0.2s, box-shadow 0.2s;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



.user-article:hover {

    transform: translateY(-2px);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);

}



.user-article-title {

    margin-top: 0;

    margin-bottom: 10px;

    font-size: 18px;

}



.user-article-title a {

    color: #2c3e50;

    text-decoration: none;

}



.user-article-title a:hover {

    color: #3498db;

    text-decoration: underline;

}



.user-article-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0 15px;

    margin-bottom: 15px;

    font-size: 14px;

    color: #6c757d;

    align-items: center;

}



.article-date {

    display: inline-flex;
border-radius: 4px;
    align-items: center;

    gap: 5px;

}



.article-categories {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 5px;

}



.category-tag {

    display: inline-block;
border-radius: 4px;
    background-color: #e9ecef;

    color: #495057;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 12px;

    text-decoration: none;

    transition: background-color 0.2s;

}



.category-tag:hover {

    background-color: #dee2e6;

    text-decoration: none;

}



.article-stats {

    display: flex;

    gap: 15px;

    margin: 10px 0;
		border-radius: 4px;

}



.stats-item {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #6c757d;

    font-size: 14px;

}



.stats-icon {

    color: #6c757d;

}



.views-count .stats-icon {

    color: #17a2b8;

}



.likes-count .stats-icon {

    color: #28a745;

}



.comments-count .stats-icon {

    color: #6f42c1;

}



.user-article-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}



.icon-actions {

    display: flex;

    gap: 5px;

    margin-left: 5px;

}



.action-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border-radius: 50%;
border-radius: 4px;
    padding: 0;

    border: none;

    background: transparent;

    transition: all 0.2s ease;

    color: #6c757d;

    margin-right: 5px;

    text-decoration: none;

}



.action-icon svg {

    width: 18px;

    height: 18px;

    stroke: currentColor;

}



.action-icon:hover {

    background-color: rgba(0, 0, 0, 0.05);

}



.edit-icon {
border-radius: 4px;
    color: #3498db;

}



.edit-icon:hover {

    color: #0056b3;

    background-color: rgba(0, 123, 255, 0.1);

}



.delete-icon {

    color: #dc3545;
border-radius: 4px;
}



.delete-icon:hover {

    color: #bd2130;

    background-color: rgba(220, 53, 69, 0.1);

}



.articles-filter {

    margin-bottom: 20px;

    padding: 15px;

    background-color: #f8f9fa;

    border-radius: 4px;

    border: 1px solid #e9ecef;

}



.filter-form .form-inline {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    border-radius: 4px;

}



.filter-form label {

    margin-right: 5px;

    font-weight: 500;
		border-radius: 4px;

}



.filter-form select {

    padding: 8px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    background-color: white;

}



/* Стили для избранных статей */

.bookmark-article {

    background-color: #fff3cd;

    border-radius: 4px;

    padding: 20px;

    margin-bottom: 15px;

    border-left: 4px solid #ffc107;

}



.bookmark-article-title {

    margin-top: 0;

    margin-bottom: 10px;

}



.bookmark-article-title a {

    color: #2c3e50;
border-radius: 4px;
    text-decoration: none;

}



.bookmark-article-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 10px;

    font-size: 14px;

    color: #6c757d;

}



.bookmark-article-excerpt {

    margin-bottom: 15px;

    line-height: 1.5;

}



.bookmark-article-actions {

    display: flex;

    gap: 10px;

}



/* Стили для комментариев пользователя */

.user-comment {

    background-color: #e3f2fd;

    border-radius: 4px;

    padding: 15px;

    margin-bottom: 15px;

    border-left: 4px solid #2196f3;

}



.comment-header {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 10px;

    font-size: 14px;

    color: #6c757d;

}



.comment-article a {

    color: #3498db;

    text-decoration: none;

}



.comment-content {

    margin-bottom: 15px;

    line-height: 1.5;

}



.comment-actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



/* Стили для статей на модерации */

.moderation-article {

    background-color: #ffebee;

    border-radius: 4px;

    padding: 20px;

    margin-bottom: 15px;

    border-left: 4px solid #f44336;

}



.moderation-article-title {

    margin-top: 0;

    margin-bottom: 10px;

}



.moderation-article-title a {

    color: #2c3e50;

    text-decoration: none;

}



.moderation-article-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 10px;

    font-size: 14px;

    color: #6c757d;

}



.moderation-status {

    background-color: #ff9800;

    color: white;

    padding: 2px 8px;

    border-radius: 4px;

    font-size: 12px;

}



.moderation-article-excerpt {

    margin-bottom: 15px;

    line-height: 1.5;

}



.moderation-article-actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



/* Стили для отображения информации профиля */

.profile-info-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

    margin-top: 20px;

}



.info-section {

    background-color: #f8f9fa;

    border-radius: 4px;

    padding: 20px;

    border-left: 4px solid #3498db;

}



.info-section h4 {

    margin-top: 0;

    margin-bottom: 15px;

    color: #2c3e50;

    font-size: 18px;

    border-bottom: 1px solid #dee2e6;

    padding-bottom: 8px;

}



.info-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 0;

    border-bottom: 1px dotted #dee2e6;

}



.info-item:last-child {

    border-bottom: none;

}



.info-label {

    font-weight: 500;

    color: #495057;

    flex: 0 0 40%;

}



.info-value {

    color: #212529;

    flex: 1;

    text-align: right;

}



/* Стили для публичного профиля */

.profile-public-info {

    margin-top: 30px;

    background-color: #fff;

    border-radius: 4px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    padding: 20px;

}



.profile-public-info .info-section {

    background-color: #fff;

    border-left: 4px solid #28a745;

}



/* Стили для вкладки "Мои теги" */

.tags-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 20px;

    margin-bottom: 30px;

}



.user-tag-card {

    background-color: #f8f5ff;

    border-radius: 4px;

    padding: 20px;

    border-left: 4px solid #6f42c1;

    transition: transform 0.2s, box-shadow 0.2s;

}



.user-tag-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



.tag-info {

    margin-bottom: 15px;

}



.tag-name {

    margin: 0 0 8px 0;

    font-size: 18px;

}



.tag-link {

    color: #6f42c1;

    text-decoration: none;

    font-weight: 600;

}



.tag-link:hover {

    color: #5a2d91;

    text-decoration: underline;

}



.tag-stats {

    color: #6c757d;

    font-size: 14px;

}



.usage-count {

    background-color: #e9ecef;

    padding: 2px 8px;

    border-radius: 4px;

    font-size: 12px;

}



.tag-actions {

    display: flex;

    gap: 10px;

}



/* Стили для популярных тегов */

.popular-tags-section {

    margin-top: 30px;

    padding: 20px;

    background-color: #fff;

    border-radius: 4px;

    border: 1px solid #dee2e6;

}



.popular-tags-section h4 {

    margin-bottom: 15px;

    color: #2c3e50;

}



.popular-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;

}



.popular-tag {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    background-color: #6f42c1;

    color: white;

    padding: 8px 12px;

    border-radius: 20px;

    text-decoration: none;

    font-weight: 500;

    transition: all 0.2s;

    min-font-size: 12px;

    max-font-size: 18px;

}



.popular-tag:hover {

    background-color: #5a2d91;

    color: white;

    transform: scale(1.05);

}



.popular-tag .tag-count {

    background-color: rgba(255, 255, 255, 0.3);

    border-radius: 10px;

    padding: 2px 6px;

    font-size: 11px;

}



/* Стили для вкладки черновиков */

.draft-item {

    background-color: #fff3cd;

    border-radius: 4px;

    padding: 20px;

    margin-bottom: 15px;

    border-left: 4px solid #ffc107;

    transition: transform 0.2s, box-shadow 0.2s;

}



.draft-item:hover {

    transform: translateY(0);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

}



.draft-title {

    margin-top: 0;

    margin-bottom: 10px;

    color: #495057;

    font-size: 18px;

}



.draft-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    font-size: 14px;

    color: #6c757d;

}



.draft-excerpt {

    color: #495057;

    margin-bottom: 15px;

    line-height: 1.5;

}



.draft-actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



/* Кнопка опасного действия (удаления) */

.button-danger {

    display: inline-block;

    padding: 4px 8px;

    background-color: #dc3545;

    color: #fff;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-size: 14px;

    text-decoration: none;

    transition: background-color 0.2s;

}



.button-danger:hover {

    background-color: #c82333;

    color: #fff;

    text-decoration: none;

}



/* Адаптивность */

@media (max-width: 768px) {

    .tabs-navigation {

        flex-wrap: wrap;

    }

    

    .tab-link {

        flex: 1;

        min-width: 120px;

        justify-content: center;

        padding: 12px 15px;

    }

    

    .tab-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

    

    .user-article-meta,

    .bookmark-article-meta,

    .comment-header,

    .moderation-article-meta {

        flex-direction: column;

        gap: 5px;

    }

    

    .user-article-actions,

    .bookmark-article-actions,

    .comment-actions,

    .moderation-article-actions {

        flex-direction: column;

    }

    

    .tags-grid {

        grid-template-columns: 1fr;

    }

    

    .popular-tags {

        justify-content: center;

    }

    

    .tag-actions {

        flex-direction: column;

    }
		.tab-content {
    padding: 0;
		}
	}

@media (max-width: 480px){
	
}



/* --- File: user-profile.css --- */
/* Стили для страниц профиля пользователя */

/* Вкладки профиля */

.tabs-navigation {
    display: flex;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    overflow: visible; /* Changed from hidden to visible to allow dropdown */
    min-height: 56px; /* Ensure minimum height for dropdown positioning */
}

.tab-button {
    flex-shrink: 0;
    padding: 14px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s ease;
    position: relative;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.tab-button:hover {
    color: #495057;
    background: rgba(0, 123, 255, 0.05);
}

.tab-button.active {
    color: #3498db;
    border-bottom-color: #3498db;
    background: #fff;
}

.tab-button i {
    font-size: 1rem;
}

.tab-button .badge {
    background: #f68f00;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.60rem;
    font-weight: 600;
    min-width: auto;
    text-align: center;
}

.tab-button.hidden {
    display: none !important;
}

.tab-button.visible {
    display: flex !important;
}

/* Альтернативный подход для скрытия вкладок */
.tab-button.hidden-alt {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: -9999px;
}

.tab-button.visible-alt {
    opacity: 1;
    pointer-events: auto;
    position: static;
}

/* Кнопка "Еще" */
.more-tabs-container {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

.more-tabs-btn {
    flex-shrink: 0;
    padding: 14px 12px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s ease;
    position: relative;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-tabs-btn:hover {
    color: #495057;
    background: rgba(0, 123, 255, 0.05);
}

.more-tabs-btn i {
    font-size: 1rem;
}

/* Выпадающее меню для скрытых вкладок */
.more-tabs-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    left: auto;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    max-width: 350px;
    z-index: 1000;
    display: none;
    padding: 8px 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.more-tabs-dropdown.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.more-tabs-dropdown .tab-button {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid #f8f9fa;
    border-radius: 0;
}

.more-tabs-dropdown .tab-button:last-child {
    border-bottom: none;
}

.more-tabs-dropdown .tab-button:hover {
    background: #f8f9fa;
}

/* Адаптивность для вкладок */
@media (max-width: 768px) {
    /* Скрываем обычные вкладки на мобильных устройствах */
    .profile-tabs {
        display: none !important;
    }

    .more-tabs-btn,
    .more-tabs-dropdown {
        display: none;
    }
}



.profile-container {

    background-color: #fff;

    border-radius: 4px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    overflow: visible;

    margin-bottom: 30px;

}



.profile-header {

    padding: 20px;

    background-color: #f5f7fa;

    border-bottom: 1px solid #e0e0e0;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.profile-header h2 {

    margin: 0;

    color: #2c3e50;

    font-size: 24px;

}



.profile-actions {

    display: flex;

    gap: 10px;

    align-items: baseline;

    flex-direction: column;

}



.profile-section {

    padding: 20px;

    border-bottom: 1px solid #e0e0e0;

}



.profile-section:last-child {

    border-bottom: none;

}



.profile-section h3 {

    margin-top: 0;

    margin-bottom: 15px;

    color: #3498db;

    font-size: 18px;

}



.profile-data {

    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

}



.data-row {

    display: flex;

    flex-wrap: wrap;

}



.data-label {

    /* width: 150px; */

    font-weight: 600;

    color: #555;

}



.data-value {

    flex: 1;
    min-width: 100px;
    display: flex;
    /* justify-content: flex-end; */

}



.profile-about {

    line-height: 1.6;

    color: #333;

}



/* Стили для аватарок */

.avatar-preview {

    margin-top: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.avatar-placeholder {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    overflow: hidden;

    /* background-color: #f5f5f5; */

    display: flex;

    align-items: center;

    justify-content: center;

    /* margin-bottom: 10px; */

}



.avatar-placeholder img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.file-input {

    padding: 10px;

    background-color: #f9f9f9;

    border: 1px solid #ddd;

    border-radius: 4px;

    width: 100%;

    box-sizing: border-box;

}



.user-avatar {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    object-fit: cover;

    margin-right: 20px;

}



.user-info {

    flex: 1;

}



/* Адаптивная верстка */

@media (max-width: 768px) {

    .profile-header {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    

    .user-avatar {

        margin-right: 0;

        margin-bottom: 15px;

    }

    

    .profile-actions {

        margin-top: 20px;

    }

}

/* Мобильный сайдбар для вкладок профиля */
.profile-tabs-sidebar {
    position: fixed;
    top: 0;
    right: -320px; /* Скрыт за пределами экрана */
    width: 250px;
    height: inherit;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 2100;
    transition: right 0.3s ease;
    overflow-y: auto;
		bottom: 50px;
		top: 60px;
}

.profile-tabs-sidebar.open {
    right: 0;
}

.profile-tabs-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.profile-tabs-sidebar-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #2c3e50;
}

.profile-tabs-sidebar-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #6c757d;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.profile-tabs-sidebar-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #495057;
}

.profile-tabs-sidebar-content {
    padding: 20px 0;
}

.profile-tabs-sidebar-list {
    display: flex;
    flex-direction: column;
}

.profile-tabs-sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    text-decoration: none;
    color: #6c757d;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.2s ease;
    position: relative;
    justify-content: space-between; /* название слева, счетчик справа */
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

.profile-tabs-sidebar-item:hover {
    background: #f8f9fa;
    color: #495057;
}

.profile-tabs-sidebar-item.active {
    background: #e3f2fd;
    color: #3498db;
    border-left: 1px solid #3498db;
}

.profile-tabs-sidebar-item i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.profile-tabs-sidebar-item span {
    flex: 1;
    font-weight: 500;
    text-align: left;
}

.profile-tabs-sidebar-item .badge {
    flex: 0 0 auto;
    margin-left: auto;
    background: #f68f00;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.60rem;
    font-weight: 600;
    min-width: auto;
    text-align: center;
}

/* Оверлей для мобильного сайдбара */
.profile-tabs-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}


/* Скрываем сайдбар на десктопе */
@media (min-width: 768px) {
    .profile-tabs-sidebar,
    .profile-tabs-sidebar-overlay {
        display: none !important;
    }
}

/* Кнопка для открытия мобильного меню вкладок профиля */
.open-profile-tabs-btn {
    display: none;
    align-items: center;
    padding: 8px 12px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

.open-profile-tabs-btn:hover {
    background: #2980b9;
}


/* Показываем кнопку только на мобильных устройствах */
@media (max-width: 768px) {
    .open-profile-tabs-btn {
        display: flex;
    }
}

/* Стили для кнопок черновиков */
.button-edit-draft, .button-delete-draft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 34px;
    margin-right: 8px;
    border: none;
    border-radius: 6px;
    background: #f4f6fa;
    color: #2c3e50;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    box-shadow: none;
}
.button-edit-draft {
    background: #1976d2;
    color: #fff;
}
.button-edit-draft:hover {
    background: #1565c0;
    color: #fff;
}
.button-delete-draft {
    background: #dc3545;
    color: #fff;
}
.button-delete-draft:hover {
    background: #b91c1c;
    color: #fff;
}
.draft-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 0;
}

.status-edit-form {
    display: none;
    margin-top: 8px;
}

#status-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.status-edit-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}



/* Стили для кнопок редактирования статуса */
.status-btn-save, .status-btn-cancel {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s;
    border: none;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-btn-save {
    background-color: #3498db;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.15);
}

.status-btn-save:hover {
    background-color: #2980b9;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.25);
}

.status-btn-cancel {
    background-color: #f1f5f9!important;
    color: #475569 !important;
    border: 1px solid #e2e8f0!important;
}

.status-btn-cancel:hover {
    background-color: #e2e8f0!important;
    color: #1e293b !important;
}

@media (max-width: 768px) {
    .status-edit-actions {
        display: flex;
        gap: 8px;
    }
    
    .status-btn-save, .status-btn-cancel {
        flex: 1;
        padding: 10px;
        font-size: 14px;
        max-height: 32px;
    }
}


/* --- File: profile-styles.css --- */
/* Современный стиль для страницы профиля пользователя */

/* Основной контейнер профиля */
.profile-container {
    background-color: #f5f7fa;
    border-radius: 10px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.08);
    overflow: visible; /* Allow dropdowns to be visible outside container */
    margin-bottom: 30px;
    width: 100%;
    position: relative;
}

.profile-container>.profile-content {
    margin-bottom: 0px;
}

/* Обложка профиля - важно убедиться, что у нее прописана высота и фон */
.profile-cover-link {
    display: block;
    width: 100%;
    text-decoration: none;
    cursor: zoom-in;
}

.profile-cover {
    position: relative;
    height: 200px;
    background-color: #3498db;
    background-image: linear-gradient(135deg, #3498db 0%, #8e44ad 100%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
}

/* Если есть конкретное изображение, подставляем его поверх градиента */
.profile-cover.with-image {
    background-image: var(--cover-image);
}

/* Аватар пользователя */
.profile-avatar {
    position: relative;
    margin: -50px auto 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #fff;
    /* padding: 4px; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
    text-align: center;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Имя пользователя */
.profile-name {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin: 5px 0;
    color: #333;
}

/* Статус онлайн/оффлайн - важно для отображения индикатора */

.user-status-main {
    display: flex;
    align-items: center;
    gap: 5px;
}

.user-status-main::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.user-status.online .user-status-main::before {
    background-color: #2ecc71;
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2);
}

.user-status.offline .user-status-main::before {
    background-color: #e74c3c;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

.last-seen {
    font-size: 12px;
    color: #95a5a6;
    margin-top: 3px;
    text-align: center;
}

/* Статус пользователя */
.user-custom-status {
    text-align: center;
    font-style: italic;
    color: #6c757d;
    margin: 10px 0;
    padding: 0;
}

.user-custom-status-edit {
    margin-left: 5px;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s;
}

.user-custom-status-edit:hover {
    opacity: 1;
}



.status-input {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 200px;
    font-size: 13px;
}

.status-input:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 3px rgba(52, 152, 219, 0.3);
}

/* Двухколоночный макет профиля - важно установить правильные пропорции */
.profile-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

}

.profile-left-column {
    width: 250px;
    padding: 0;
    background-color: #f5f7fa;
    border-right: 0 solid #e9ecef;
}

.profile-right-column {
    flex: 1;
    min-width: 300px;
    padding: 0 5px;
}

/* Стили для кнопок действий */
.profile-actions {
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin: 15px 0;
	justify-content: center;
    /* Центрируем кнопки */
}

.button-primary,
.button-admin {
    display: inline-block;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    /* width: 100%; */
    box-sizing: border-box;
    /* Учитываем padding в ширине */
}

.button-primary {
    background-color: #3498db;
    color: white;
}

.button-admin {
color: #eaeaea;
}

.button-edit {
color: #eaeaea;
}

.button-admin:hover {
color: #ffffff;
}

.button-edit:hover {
color: #ffffff;
}

.button-primary:hover {

    background-color: #218838;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

}

/* Кнопки редактирования профиля */
.profile-edit-buttons {
		position: absolute;
    right: 0;
    display: flex;
    gap: 8px;
    align-items: baseline;
    width: 50%;
    justify-content: flex-end;
    background-color: #cccccc44;
    padding: 5px;
    margin-right: -10px;
}

/* Стили для социальных ссылок */
.social-links {
    display: flex;
    justify-content: center;
    margin: 0;
    gap: 10px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    transition: transform 0.2s, background-color 0.2s;
}

.social-link:hover {
    position: relative; top: -3px;
}

.social-link.facebook {
    background-color: #3b5998;
}

.social-link.instagram {
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}

.social-link.linkedin {
    background-color: #0077b5;
}

/* Стили для вкладок */
.profile-tabs {
    margin-bottom: 0;
    overflow: visible; /* Fix for dropdown menu - changed from overflow-x: auto */
    white-space: nowrap;
    position: relative;
    z-index: 999 /* Ensure tabs are above content below */
}

.tabs-navigation {
		display: flex;
		gap: 2px;
		border-radius: 8px 0;
		position: relative;
		overflow: visible;
		justify-content: center;
}

.tab-link {
    padding: 15px 20px;
    display: inline-block;
    color: #495057;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.3s;
}

.tab-link:hover {
    color: #3498db;
}

.tab-link.active {
    color: #3498db;
    font-weight: 600;
}

.tab-link.active:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #3498db;
    border-radius: 3px 3px 0 0;
}

.tab-link .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3498db;
    color: white;
    height: 20px;
    min-width: 20px;
    border-radius: 10px;
    font-size: 12px;
    margin-left: 5px;
    padding: 0 6px;
}

.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.tab-header h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
}

.tab-description {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
}

/* Стили для вкладки модерации */
.moderation-articles-grid {
    display: grid;
    gap: 15px;
    margin-bottom: 20px;
}

.moderation-article-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
    padding: 15px;
    border-left: 4px solid #f39c12;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.moderation-article-card:hover {
    position: relative; top: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		transform: translateY(0);
}

.article-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.article-title {
    flex: auto;
    margin: 0 15px 0 0;
		line-height: 1.3rem;
}

.article-title a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.article-title a:hover {
    color: #3498db;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-badge.pending {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
    border: 1px solid #ffeaa7;
}

.status-badge.changes-requested {
    background: linear-gradient(135deg, #ede9fe, #c4b5fd);
    color: #5b21b6;
    border: 1px solid #c4b5fd;
}

.status-badge.rejected {
    background: linear-gradient(135deg, #f8d7da, #ff6b6b);
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.article-meta-info {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 12px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.meta-row:last-child {
    margin-bottom: 0;
}

.meta-label {
    font-weight: 500;
    color: #495057;
    font-size: 14px;
}

.meta-value {
    font-size: 14px;
}

.type-published {
    background: #d4edda;
    color: #155724;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.type-draft {
    background: #e2e3e5;
    color: #383d41;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.type-pending {
    background: #fff3cd;
    color: #856404;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.type-changes-requested {
    background: #ede9fe;
    color: #5b21b6;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.type-rejected {
    background: #f8d7da;
    color: #721c24;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.rejection-feedback {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border: 1px solid #ffeaa7;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
}

.rejection-feedback::before {
    content: "\f071";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -8px;
    left: 20px;
    padding: 0 8px;
    font-size: 16px;
}

.feedback-header {
    color: #856404;
    margin-bottom: 10px;
    font-weight: 600;
}

.feedback-content {
    color: #6c757d;
    line-height: 1.6;
    font-size: 14px;
}

.article-preview {
    margin-bottom: 12px;
}

.preview-text {
    color: #6c757d;
    line-height: 1.6;
    font-size: 14px;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    border-left: 3px solid #dee2e6;
}

.article-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-edit {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}

.btn-edit:hover {
    background: linear-gradient(135deg, #2980b9, #1f4e79);
    position: relative;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    color: white;
}

.btn-resubmit {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

.btn-resubmit:hover {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    position: relative; top: -2px;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
    color: white;
}

.waiting-indicator {
    color: #f39c12;
    font-style: italic;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.empty-state h4 {
    margin-bottom: 15px;
    color: #495057;
    font-size: 20px;
}

.empty-state p {
    margin-bottom: 25px;
    font-size: 16px;
}

.btn-primary {
    background-color: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 12px 24px;
}

.btn-primary:hover {
    background-color: linear-gradient(135deg, #764ba2, #667eea);
    position: relative; top: -2px;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    color: white;
}

/* Стили для статистики пользователя */
.user-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    border-radius: 4px;
    padding: 2px;
    padding: 8px 0;
    max-width: 100%;
    box-sizing: border-box;
}

.stats-item {
    text-align: center;
    padding: 10px 8px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    min-width: 0;
    overflow: hidden;
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 65px;
    max-height: 65px;
}

.stats-item:hover {
    position: relative; top: -2px;
}

.stats-number {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    color: #3498db;
    line-height: 1.2;
    margin-bottom: 2px;
}

.stats-label {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Разделительная линия для статистики */
.stats-separator {
    grid-column: 1 / -1;
    height: 1px;
    background-color: #e9ecef;
    margin: 5px 0;
}

.button-primary i, .button-outline i {
		margin-right: 0;
}

.social-links-container-profile{
    background-color: #5d5d5d0a;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 10px;
    margin-bottom: 10px;
}



/* Стили для вкладки черновиков */
.drafts-articles-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
}

.draft-article-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 25px;
    border-left: 4px solid #6c757d;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.draft-article-card:hover {
    position: relative; top: -3px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-left-color: #495057;
}

.draft-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.draft-title {
    flex: 1;
    margin: 0 15px 0 0;
}

.draft-title a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.draft-title a:hover {
    color: #6c757d;
}

.draft-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: linear-gradient(135deg, #e2e3e5, #d6d8db);
    color: #383d41;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border: 1px solid #d6d8db;
}

.draft-status-badge::before {
    content: "\f303";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
}

.draft-meta-info {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.draft-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.draft-meta-row:last-child {
    margin-bottom: 0;
}

.draft-meta-label {
    font-weight: 500;
    color: #495057;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.draft-meta-value {
    font-size: 14px;
    color: #6c757d;
}

.draft-preview {
    margin-bottom: 25px;
}

.draft-preview-text {
    color: #6c757d;
    line-height: 1.6;
    font-size: 14px;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    border-left: 3px solid #6c757d;
    font-style: italic;
}

.draft-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-continue {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

.btn-continue:hover {
    background: linear-gradient(135deg, #495057, #343a40);
    position: relative; top: -2px;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    color: white;
}

.btn-publish {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.btn-publish:hover {
    background: linear-gradient(135deg, #20c997, #17a2b8);
    position: relative; top: -2px;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    color: white;
}

.btn-delete {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    padding: 10px 12px;
    min-width: 40px;
}

.btn-delete:hover {
    background: linear-gradient(135deg, #c82333, #bd2130);
    position: relative; top: -2px;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    color: white;
}

.draft-helper-text {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 25px;
    color: #1565c0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.draft-helper-text::before {
    content: "\f0eb";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
}

.empty-drafts-state {
    text-align: center;
    padding: 80px 20px;
    color: #6c757d;
}

.empty-drafts-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.empty-drafts-state h4 {
    margin-bottom: 15px;
    color: #495057;
    font-size: 20px;
}

.empty-drafts-state p {
    margin-bottom: 25px;
    font-size: 16px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Стили для пагинации черновиков */
.drafts-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.drafts-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #495057;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.drafts-page-link:hover {
    background: #f8f9fa;
    border-color: #6c757d;
    color: #6c757d;
}

.drafts-page-link.active {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
}



.status-badge-tab-user-articles-list {
    padding: 0;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    background-color: unset;
}

.article-status-tab-user-articles-list {
    background-color: unset;
    color: #856404;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* Модалка ЛС: валидация и элементы управления */
input.is-invalid,
textarea.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.dm-counter {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.dm-hint {
    font-size: 12px;
    color: #6b7280;
}

.button-primary:disabled,
.btn-primary:disabled,
.btn:disabled {
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #f9fafb !important;
    cursor: not-allowed;
    opacity: 1;
}

.button-primary:disabled:hover,
.btn-primary:disabled:hover,
.btn:disabled:hover {
    background-color: #9ca3af !important;
}

.messages-btn {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 5px 10px;
    color: #374151;
}

.messages-btn:hover {
    background: #eee;
    color: #666666;
}

i.fas.fa-ellipsis-h {
    font-size: 1rem;
}

@media (max-width: 768px) {
    .moderation-article-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        padding: 8px;
        border-left: 2px solid #f39c12;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .profile-content {
        flex-direction: column;
    }

    .profile-left-column {
        padding: 0px;
    }

    .profile-left-column {
        width: 100%;
        border-right: none;
        border-bottom: 0 solid #e9ecef;
    }

    .user-articles {
        grid-template-columns: 1fr;
    }

    .info-item {
        flex-direction: column;
        text-align: left;
    }

    .info-value {
        text-align: left;
        margin-top: 5px;
    }

    .tab-header {
        flex-direction: row;
        gap: 10px;
        align-items: center;
        margin-bottom: 0;
        display: flex;
    }
		.user-stats {
			gap: 2px;
			padding: 0;
			overflow-x: auto;
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: 1fr;
    }

		.stats-separator{
			display: none;
		}

    .stats-item {
        padding: 8px 5px;
        height: 60px;
        min-height: 60px;
        max-height: 60px;
    }

    .stats-number {
        font-size: 1rem;
    }

    .stats-label {
        font-size: 0.8rem;
    }

    .article-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .meta-row {
        align-items: flex-start;
        gap: 5px;
    }

    .article-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .moderation-article-card>.article-actions {
        flex-direction: row;
    }

    .article-actions>.btn {
        justify-content: center;
        width: auto;
    }

    .tab-pane.active>.articles-list>.user-article>.article-actions {
        flex-direction: row;
    }
}


@media (max-width: 768px) {
    .user-article {
        padding: 10px;
    }

    .user-article {
        margin-bottom: 5px;
    }

    .button-secondary {
        /* display: flex;
        justify-content: center;
        width: 100%; */
        width: fit-content;
    }

    .article-status-tab-user-articles-list {
        padding: 0 !important;
    }

    .draft-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .draft-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .draft-actions {
        flex-direction: row;
        flex-wrap: wrap;
        /* align-items: stretch; */
    }

    .btn {
        justify-content: center;
    }

    .drafts-pagination {
        flex-wrap: wrap;
        gap: 5px;
    }

    .drafts-page-link {
        min-width: 35px;
        height: 35px;
        font-size: 14px;
    }
			.profile-right-column{
				min-width: 250px;
		}
	.profile-right-column {
    padding: 0;
}
}

@media (max-width: 480px) {

	.user-status {
    max-width: inherit;
}

    .tab-pane.active>.articles-list>.user-article>.article-actions {
        flex-direction: column;
    }
    .status-input {
        min-width: 100%;
        margin-bottom: 8px;
    }

    .stats-item {
        padding: 6px 4px;
        height: 55px;
        min-height: 55px;
        max-height: 55px;
    }

    .stats-number {
        font-size: 1rem;
    }

    .stats-label {
        font-size: 0.85rem;
    }

    .profile-actions {
			display: flex;
			flex-direction: row;
			gap: 10px;
			margin: 10px 0;
			justify-content: center;
    }

    .article-actions>.btn {
        justify-content: center;
        width: 100%;

    }

    .moderation-article-card>.article-actions {
        gap: 2px;
				display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }
}


/* --- File: profile-tabs.css --- */
/* Современные адаптивные вкладки для профиля */

.profile-tabs {

    border-radius: 4px;

    border-radius: 4px;

    background: #fff;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

}



.profile-tabs-wrapper {

    position: relative;

    width: 100%;

}



.tabs-navigation-container {

    position: relative;

    width: 100%;

    border-bottom: 1px solid #e1e4e8;

    overflow: visible;

}



.tabs-navigation {

    display: flex;

    background-color: #fff;

    position: relative;

    flex-wrap: nowrap;


}



.tab-link {

    display: flex;

    align-items: center;

    padding: 10px 16px;

    color: #586069;

    font-weight: 500;

    text-decoration: none;

    border-bottom: 2px solid transparent;

    transition: all 0.2s ease;

    white-space: nowrap;

    font-size: 14px;

}



.tab-link:hover {

    color: #0366d6;

    background-color: rgba(3, 102, 214, 0.05);

}



.tab-link.active {

    color: #0366d6;

    border-bottom-color: #0366d6;

    font-weight: 600;

}



.tab-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 18px;

    height: 18px;

    padding: 0 5px;

    margin-left: 6px;

    font-size: 11px;

    font-weight: 500;

    line-height: 1;

    color: #24292e;

    background-color: rgba(27, 31, 35, 0.08);

    border-radius: 9px;

}



.tab-link.active .tab-count {

    background-color: rgba(3, 102, 214, 0.1);

}



/* Кнопка "Ещё" и выпадающее меню */

.more-tabs-button {

    display: inline-flex;

    align-items: center;

    padding: 10px 14px;

    color: #586069;

    font-weight: 500;

    text-decoration: none;

    border-bottom: 2px solid transparent;

    font-size: 13px;

    transition: all 0.2s ease;

    white-space: nowrap;

    background: transparent;

    border-left: 1px solid #e1e4e8;

    cursor: pointer;

    position: absolute;

    right: 0;

    top: 0;

    height: 100%;

}



.more-tabs-button.active, 

.more-tabs-button:hover {

    color: #0366d6;

    background-color: rgba(3, 102, 214, 0.05);

}



.dropdown-icon {

    margin-left: 4px;

    transition: transform 0.2s;

    font-size: 8px;

}



.more-tabs-button.active .dropdown-icon {

    transform: rotate(180deg);

}



.more-tabs-menu {

    position: absolute;

    top: 100%;

    right: 0;

    background-color: #fff;

    border: 1px solid #e1e4e8;

    border-radius: 6px;

    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);

    z-index: 1000;

    padding: 5px 0;

    margin-top: 2px;

    width: 250px; /* Фиксированная ширина */

    max-height: none; /* Убираем ограничение по высоте */

    display: none;

    overflow: visible; /* Убираем полосу прокрутки */

}



.more-tabs-menu.active {

    display: block;

    animation: fadeInMenu 0.2s ease;

}



@keyframes fadeInMenu {

    from { opacity: 0; transform: translateY(-5px); }

    to { opacity: 1; transform: translateY(0); }

}



.more-tabs-menu .tab-link,

.more-tabs-menu .menu-tab-link {

    display: flex;

    border: none;

    border-radius: 0;

    margin: 0;

    width: 100%;

    padding: 10px 14px;

    border-bottom: 1px solid #f1f2f4;

    justify-content: space-between;

    font-size: 13px;

    white-space: normal; /* Разрешаем перенос текста */

    word-break: break-word; /* Перенос длинных слов */

    align-items: flex-start; /* Выравнивание по верхнему краю для многострочного текста */

}



.more-tabs-menu .tab-count {

    margin-top: 2px; /* Небольшой отступ сверху для счетчика при многострочном тексте */

    flex-shrink: 0; /* Не сжимать счетчик */

}



.more-tabs-menu .tab-link:last-child,

.more-tabs-menu .menu-tab-link:last-child {

    border-bottom: none;

}



.more-tabs-menu .tab-link:hover,

.more-tabs-menu .menu-tab-link:hover {

    background-color: #f6f8fa;

}



.more-tabs-menu .tab-link.active,

.more-tabs-menu .menu-tab-link.active {

    color: #0366d6;

    background-color: rgba(3, 102, 214, 0.08);

    font-weight: 600;

    border-left: 2px solid #0366d6;

    padding-left: 12px;

}



.hidden-tab {

    display: none !important;

}



/* Адаптивные стили для разных устройств */

@media (max-width: 992px) {

    .tab-link {

        padding: 10px 14px;

    }

}



@media (max-width: 768px) {

    .profile-tabs {

        margin-top: 15px;

        margin-bottom: 20px;

    }

    

    .tabs-navigation-container {

        overflow-x: visible;

    }

    

    .tabs-navigation {

        flex-wrap: nowrap;

        padding-right: 55px; /* Уменьшаем отступ для кнопки на мобильных */

    }

    

    .tab-link {

        padding: 8px 12px;

        font-size: 13px;

    }

    

    .more-tabs-button {

        padding: 8px 12px;

        font-size: 13px;

    }

    

    .tab-count {

        min-width: 16px;

        height: 16px;

        font-size: 10px;

        margin-left: 4px;

    }

    

    /* Улучшаем позиционирование выпадающего меню на мобильных */

    .more-tabs-menu {

        right: 0;

        width: 220px;

    }

}



@media (max-width: 480px) {

    .tab-link {

        padding: 8px 10px;

        font-size: 12px;

    }

    

    .tab-count {

        margin-left: 3px;

        min-width: 14px;

        height: 14px;

        font-size: 9px;

    }

    

    .more-tabs-button {

        padding: 8px 10px;

        font-size: 12px;

    }

    

    /* На самых маленьких экранах делаем меню более широким */

    .more-tabs-menu {

        left: auto;

        right: 0;

        width: calc(100vw - 20px);

        max-width: 250px;

    }

}



/* --- File: modal-viewer.css --- */
/* Стили для модального окна просмотра изображений */
.modal-image-viewer {
    display: none;
    position: fixed;
    z-index: 2100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    overflow: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Важно для анимации: display меняется JS, opacity - CSS */
}

.modal-image-viewer.active {
    opacity: 1;
}

/* Когда display: flex установлен JS, класс active добавляется асинхронно для запуска перехода */
.modal-image-viewer.show-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
		position: relative;
		max-height: 90vh;
		max-width: 500px;
		/* margin: auto убран, так как центрирование делает родитель через flexbox */
}



.modal-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    /* Ограничиваем высоту изображения */
    object-fit: contain;
    /* Сохраняем пропорции изображения */
    border: none;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #f1f1f1;
    font-size: 38px;
    font-weight: bold;
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    z-index: 1001;
    /* Убедимся, что кнопка закрытия всегда видна */
}

.modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Добавление курсора "увеличительное стекло" к кликабельным изображениям */
.zoomable {
    cursor: zoom-in;
    transition: transform 0.2s;
}


/* Стили для модального окна */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: black;
}

.moderation-stats {
    background-color: #f8f9fa;
    border-left: 3px solid #17a2b8;
    padding: 10px 15px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .modal-content {
        /* top: 65px;
        bottom: 60px; */
				padding: 8px;
    }
		.form-actions {
        flex-direction: row;
        gap: 8px;
    }

}

/* --- File: modal-buttons.css --- */
/* Modal Dialog - DM Modal Button Styles */

/* Cancel Button Styling */
#dmCancelBtn {
  padding: 4px 10px;
  min-width: 70px;
  height: 32px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

#dmCancelBtn:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

#dmCancelBtn:active {
  background-color: #d1d5db;
}

#dmCancelBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Submit/Send Button Styling */
#dmSubmitBtn {
  padding: 4px 10px;
  min-width: 70px;
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: #3b82f6;
  border: 1px solid #2563eb;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

#dmSubmitBtn:hover:not(:disabled) {
  background: #2563eb;
  border-color: #1d4ed8;
}

#dmSubmitBtn:active:not(:disabled) {
  background: #1d4ed8;
}

#dmSubmitBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading state */
#dmSubmitBtn.loading {
  position: relative;
}

#dmSubmitBtn.loading .lbl {
  visibility: hidden;
}

#dmSubmitBtn.loading::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Focus/Accessibility */
#dmCancelBtn:focus,
#dmSubmitBtn:focus {
  outline: 1px solid #3b82f6;
  outline-offset: 1px;
}

#dmCancelBtn:focus:not(:focus-visible),
#dmSubmitBtn:focus:not(:focus-visible) {
  outline: none;
}

/* Profile Action Buttons Styling */
.open-dm-modal-btn,
.author-subscribe-btn {
  padding: 4px 10px;
  min-width: 70px;
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: #3b82f6;
  border: 1px solid #2563eb;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.open-dm-modal-btn:hover,
.author-subscribe-btn:hover {
  background: #2563eb;
  border-color: #1d4ed8;
	color: #ffffff;
}

.open-dm-modal-btn:active,
.author-subscribe-btn:active {
  background: #1d4ed8;
	color: #ffffff;
}

.open-dm-modal-btn:disabled,
.author-subscribe-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Subscribe Button - Alternative Style */
.author-subscribe-btn.subscribed {
  background: #8b5cf6;
  border-color: #7c3aed;
	color: #ffffff;
}

.author-subscribe-btn.subscribed:hover {
  background: #7c3aed;
  border-color: #6d28d9;
	color: #ffffff;
}

.author-subscribe-btn.subscribed:active {
  background: #6d28d9;
	color: #ffffff;
}

/* Focus/Accessibility */
.open-dm-modal-btn:focus,
.author-subscribe-btn:focus {
  outline: 1px solid #3b82f6;
  outline-offset: 1px;
}

.open-dm-modal-btn:focus:not(:focus-visible),
.author-subscribe-btn:focus:not(:focus-visible) {
  outline: none;
}

/* Validation styles */
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.dm-error {
    display: none;
    color: #b91c1c;
    font-size: 12px;
    margin-top: 4px;
}

.dm-hint {
    font-size: 11px;
    color: #6b7280;
    text-align: right;
    margin-top: 4px;
}

/* Modal styles */
.dm-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 2100 !important;
}

.modal-inner {
    max-width: 520px;
    margin: 10vh auto;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Close button styling */
.close-dm-modal {
    font-size: 20px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s;
    background: none;
    border: none;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.close-dm-modal:hover {
    color: #333;
    background-color: #f3f4f6;
}

.close-dm-modal i {
    font-size: 18px;
}

/* User status area styles */
.user-status-area {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.user-status-area.hidden {
    display: none !important;
}


/* --- File: profile-info-tab.css --- */
/* Стили для вкладки Информации в профиле */

.profile-section {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}



.profile-section h3 {

    color: #3490dc;

    margin-top: 0;

    padding-bottom: 10px;

    border-bottom: 1px solid #e9ecef;

    margin-bottom: 15px;

    font-size: 1.2rem;

}



.info-group {

    display: flex;
    align-items: baseline;
    margin-bottom: 12px;

}



.info-label {

    width: auto;

    font-weight: bold;

    color: #495057;

    display: flex;

    align-items: center;

    margin-right: 10px;

}



.info-value {

    flex: 1;
    min-width: initial;
    display: flex;
    /* justify-content: flex-end; */

}



.bio-group {

    display: block;

}



.bio-group .info-label {

    margin-bottom: 5px;

}



.bio-text {

    background-color: #fff;

    padding: 15px;

    border-radius: 5px;

    border: 1px solid #e9ecef;

    line-height: 1.5;

}



.guest-hidden {

    color: #b0b0b0;

    font-style: italic;

    font-size: 1em;

    /* letter-spacing: 0.5px; */

    background: linear-gradient(90deg, #f8f9fa 60%, #e9ecef 100%);

    border-radius: 4px;

    padding: 2px 8px;

    /* display: table-row; */

    /* margin-left: 4px; */

    vertical-align: middle;

    /* transition: background 0.3s; */

    border: 1px solid #ccc;

}

@media (max-width: 480px) {

.profile-section {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

		}


/* --- File: profile-articles.css --- */
/* Стили для вкладки статей в профиле пользователя */

:root {
    --pa-filter-bg: rgba(255, 255, 255, 0.98);
    --pa-card-border: #eef1f5;
    --pa-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    --pa-card-hover-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --pa-text-muted: #8898aa;
    --pa-accent-color: #3498db;
}

/* Кнопка "Создать статью" во вкладке профиля */
.add-articles-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: normal;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform-style: preserve-3d;
}

.add-articles-tabs:hover {
    background-color: #f1f5f9;
    box-shadow: 0 0 12px rgba(52, 152, 219, 0.25);
    text-decoration: none;
}

.add-articles-tabs i {
    font-size: 14px;
}

/* Tooltip styles for add-articles-tabs */
.add-articles-tabs[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: #2c3e50;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    pointer-events: none;
    line-height: 1.2;
}

.add-articles-tabs[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border: 6px solid transparent;
    border-top-color: #2c3e50;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.add-articles-tabs[data-tooltip].active::after,
.add-articles-tabs[data-tooltip].active::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) translateZ(50px);
}

@media (max-width: 768px) {
    .add-articles-tabs {
        padding: 0;
        width: 28px;
        height: 28px;
        justify-content: center;
        border-radius: 50%;
        gap: 0;
    }
    
    .add-articles-tabs span {
        display: none;
    }
    
    .add-articles-tabs i {
        font-size: 16px;
        margin: 0;
    }

    .add-articles-tabs[data-tooltip]:hover::after,
    .add-articles-tabs[data-tooltip]:hover::before {
        opacity: 0;
        visibility: hidden;
    }
    
    .add-articles-tabs[data-tooltip].active::after,
    .add-articles-tabs[data-tooltip].active::before {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* На мобильных позиционируем тултип СНИЗУ, чтобы не перекрывался шапкой или навигацией */
    .add-articles-tabs[data-tooltip]::after {
        bottom: auto;
        top: 135%;
        transform: translateX(-50%) translateY(-5px) translateZ(100px);
    }
    
    .add-articles-tabs[data-tooltip]::before {
        bottom: auto;
        top: 120%;
        transform: translateX(-50%) translateY(-5px) translateZ(100px);
        border-top-color: transparent;
        border-bottom-color: #2c3e50;
    }

    .add-articles-tabs[data-tooltip].active::after,
    .add-articles-tabs[data-tooltip].active::before {
        transform: translateX(-50%) translateY(0) translateZ(100px);
    }
}


/* Блок фильтров */
.pa-filters {
    position: relative;
    top: 0;
		border-radius: 6px;
    z-index: 100;
    margin: 0 0 15px 0;
    padding: 8px;
    border-bottom: 1px solid #edf2f7;
    background: var(--pa-filter-bg);
}

/* .pa-filters.is-sticky removed */

.pa-filters-group {
    display: grid;
    grid-template-columns: minmax(200px, 2.5fr) minmax(140px, 1fr) minmax(140px, 1fr);
    gap: 12px;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

.pa-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 0 14px;
    border: 1.5px solid transparent;
    transition: all 0.25s ease;
}

.pa-search-wrapper:focus-within {
    background: #fff;
    border-color: var(--pa-accent-color);
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.12);
}

.pa-search-icon {
    color: #94a3b8;
    margin-right: 10px;
    font-size: 15px;
    transition: color 0.2s;
}

.pa-search-wrapper:focus-within .pa-search-icon {
    color: var(--pa-accent-color);
}

.pa-filter-search {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    outline: none;
    color: #1e293b;
    font-weight: 500;
}

.pa-filter-search::placeholder {
    color: #94a3b8;
}

.pa-reset-btn {
    background: #e2e8f0;
    border: none;
    color: #64748b;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 8px;
    font-size: 10px;
}

.pa-reset-btn:hover {
    background: #cbd5e1;
    color: #0f172a;
    transform: rotate(90deg);
}

.pa-sort-wrapper, .pa-status-filter-wrapper {
    display: flex;
}

.pa-filter-select {
    width: 100%;
    padding: 0 35px 0 14px;
    height: 42px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    font-size: 14px;
    color: #475569;
    font-weight: 500;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pa-filter-select:hover {
    border-color: #cbd5e1;
}

.pa-filter-select:focus {
    outline: none;
    border-color: var(--pa-accent-color);
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
}

/* Компактные классические карточки */
.pa-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa-card {
    background: #fff;
    border: 1px solid var(--pa-card-border);
    border-radius: 10px;
    padding: 15px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pa-card:hover {
    border-color: #d1d9e6;
    box-shadow: var(--pa-card-shadow);
}

.pa-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pa-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.pa-card-title a {
    color: #1a202c;
    text-decoration: none;
    transition: color 0.2s;
}

.pa-card-title a:hover {
    color: var(--pa-accent-color);
}

.pa-card-excerpt {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
    margin: 0;
}

.pa-card-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--pa-text-muted);
    border-top: 1px solid #f7fafc;
    padding-top: 8px;
    margin-top: 0;
}

.pa-card-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pa-card-stat i {
    font-size: 14px;
}

.pa-status-box {
    flex-shrink: 0;
}

.pa-status-badge {
    padding: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.pa-status-badge:hover {
    transform: scale(1.1);
}

.pa-card-controls {
    display: flex;
    gap: 8px;
    margin-left: 10px;
}

/* If no status box, the controls should still be on the right */
.pa-card-stats:not(:has(.pa-status-box)) .pa-card-controls {
    margin-left: auto;
}

.pa-control-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.pa-control-btn:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pa-edit-article:hover {
    color: var(--pa-accent-color);
    border-color: var(--pa-accent-color);
}

.pa-delete-article:hover {
    color: #ef4444;
    border-color: #fecaca;
    background: #fef2f2;
}

.pa-control-btn i {
    font-size: 14px;
}

.pa-status-badge {
    padding: 4px 8px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pa-status-badge.status-pending { color: #856404; }
.pa-status-badge.status-rejected { color: #721c24; }
.pa-status-badge.status-published { color: #00a526; }
.pa-status-badge.status-draft { color: #383d41; }

/* Адаптивность */
@media (max-width: 1024px) {
    .pa-filters-group {
        grid-template-columns: 1fr 1fr;
    }
    .pa-search-wrapper {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {

    .pa-filters.is-sticky {
        margin: 0 -10px 8px -10px;
    }

    .pa-filters-group {
        grid-template-columns: 1fr 1fr; /* Two columns for mobile */
        gap: 6px;
    }

    .pa-search-wrapper {
        grid-column: span 2; /* Search remains full width */
        padding: 0 10px;
    }

    .pa-filter-search {
        padding: 8px 0;
        font-size: 13px;
    }

    .pa-filter-select {
        height: 36px; /* Narrower selects */
        font-size: 13px;
        padding: 0 28px 0 10px;
        background-position: right 8px center;
        background-size: 11px;
    }

    .pa-search-icon {
        font-size: 13px;
        margin-right: 8px;
    }

    .pa-card {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .pa-card-title {
        font-size: 15px;
    }

    .pa-card-stats {
        gap: 10px;
    }
		.user-stats-container, .profile-main-info-block, .socialLinksToggle {
			border-radius: 0;
		}
}

/* Skeleton Loader Styles */
.pa-skeleton-card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pa-skeleton-item {
    background: #f0f2f5;
    background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: pa-skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes pa-skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pa-skeleton-title {
    height: 22px;
    width: 60%;
    margin-bottom: 5px;
}

.pa-skeleton-text {
    height: 14px;
    width: 100%;
}

.pa-skeleton-text.mid {
    width: 85%;
}

.pa-skeleton-text.short {
    width: 50%;
}

.pa-skeleton-footer {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 5px;
    border-top: 1px solid #f7fafc;
    padding-top: 8px;
}

.pa-skeleton-stat {
    height: 14px;
    width: 50px;
}


/* --- File: profile-bookmarks.css --- */
/* Стили для вкладки Избранное в профиле */

:root {
    --bookmark-bg: #fff;
    --bookmark-border: #eef1f5;
    --bookmark-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    --bookmark-hover-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --bookmark-accent: #3498db;
    --bookmark-remove: #e74c3c;
    --bookmark-text-muted: #8898aa;
    --bookmark-label: #f1f5f9;
}

.bookmarks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bookmark-card {
    background: var(--bookmark-bg);
    border: 1px solid var(--bookmark-border);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.bookmark-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e3c900;
}

.bookmark-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.bookmark-article-info {
    flex: 1;
}

.bookmark-label {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.bookmark-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.bookmark-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s;
}

.bookmark-title a:hover {
    color: var(--bookmark-accent);
}

.bookmark-actions {
    margin-left: 10px;
}

.remove-bookmark-btn {
    background: rgba(245, 158, 11, 0.1);;
    border: 1px solid #edf2f7;
    color: #f59e0b;;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-bookmark-btn:hover {
    background: #fef2f2;
    color: var(--bookmark-remove);
    border-color: #fee2e2;
    transform: scale(1.1);
}

.bookmark-excerpt {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bookmark-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.bookmark-stats {
    display: flex;
    gap: 15px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 13px;
}

.meta-item i {
    font-size: 14px;
}

.bookmark-date {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 12px;
}

/* Пустое состояние */
.no-bookmarks-placeholder {
    text-align: center;
    padding: 60px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
}

.no-bookmarks-placeholder i {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 20px;
}

.no-bookmarks-placeholder h4 {
    margin: 0 0 10px 0;
    color: #1e293b;
    font-size: 20px;
}

.no-bookmarks-placeholder p {
    color: #64748b;
    margin-bottom: 25px;
}

.browse-articles-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bookmark-accent);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.browse-articles-btn:hover {
    background: #2980b9;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

@media (max-width: 768px) {
    .bookmark-card {
        padding: 10px;
    }
    
    .bookmark-title {
        font-size: 16px;
    }
    
    .bookmark-meta {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
				flex-wrap: wrap;
    }
    
    .bookmark-date {
        align-self: flex-end;
    }
}


/* --- File: profile-comments.css --- */
/* Стили для вкладки Комментарии в профиле */

:root {
    --comment-bg: #fff;
    --comment-border: #eef1f5;
    --comment-hover-border: #d1d9e6;
    --comment-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    --comment-accent: #3498db;
    --comment-text-main: #1e293b;
    --comment-text-muted: #64748b;
    --comment-status-published: #22c55e;
    --comment-status-rejected: #ef4444;
}

/* Блок фильтров */
.pc-filters {
    position: relative;
    margin: 0 0 15px 0;
    padding: 12px;
    border-bottom: 1px solid #edf2f7;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--comment-border);
}

.pc-filters-group {
    display: flex;
    gap: 12px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.pc-filter-wrapper {
    max-width: 200px;
    position: relative;
}

.pc-filter-select {
    width: 100%;
    height: 32px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    transition: all 0.25s ease;
    
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    padding: 0 35px 0 14px;
    font-size: 14px;
    color: #475569;
    font-weight: 500;
    cursor: pointer;
}

/* Иконка стрелки через Font Awesome */
.pc-filter-wrapper::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #94a3b8;
    font-size: 12px;
}

.pc-filter-select:hover {
    border-color: #cbd5e1;
}

.pc-filter-select:focus {
    outline: none;
    border-color: var(--comment-accent);
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
}

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

.comment-card {
    background: var(--comment-bg);
    border: 1px solid var(--comment-border);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-card:hover {
    border-color: var(--comment-hover-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.comment-article-info {
    flex: 1;
}

.article-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--comment-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.article-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3rem;
		line-height: 1.3rem;
}

.article-title a {
    color: var(--comment-text-main);
    text-decoration: none;
    transition: color 0.2s;
}

.article-title a:hover {
    color: var(--comment-accent);
}

.comment-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 12px;
    color: var(--comment-text-muted);
    white-space: nowrap;
}

.comment-date {
    font-weight: 500;
}

.comment-status {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
}

.status-published {
    color: var(--comment-status-published);
    background: rgba(34, 197, 94, 0.1);
}

.status-rejected {
    color: var(--comment-status-rejected);
    background: rgba(239, 68, 68, 0.1);
}

.comment-content {
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px;
    border-left: 3px solid #e2e8f0;
}

.comment-text {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    word-break: break-word;
}

.comment-footer {
    display: flex;
    justify-content: flex-start;
}

.view-comment-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--comment-accent);
    text-decoration: none;
    padding: 6px 12px;
    background: rgba(52, 152, 219, 0.08);
    border-radius: 6px;
    transition: all 0.2s;
}

.view-comment-btn:hover {
    background: var(--comment-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* Пустое состояние */
.no-comments-placeholder {
    text-align: center;
    padding: 50px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
}

.no-comments-placeholder i {
    font-size: 40px;
    color: #cbd5e1;
    margin-bottom: 15px;
}

.no-comments-placeholder h4 {
    margin: 0 0 8px 0;
    color: var(--comment-text-main);
}

.no-comments-placeholder p {
    color: var(--comment-text-muted);
    font-size: 14px;
    margin: 0;
}

@media (max-width: 768px) {
    .comment-header {
        flex-direction: row;
        gap: 10px;
    }
    
    .comment-meta {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
    
    .article-title {
        font-size: 15px;
    }
		.comment-card {
    background: var(--comment-bg);
    border: 1px solid var(--comment-border);
    border-radius: 8px;
    padding: 10px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
}


/* --- File: profile-drafts-tab.css --- */
/* Уникальные стили для карточек черновиков (префикс .dr-) */

.draft-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    /* position: relative; */
    overflow: visible; /* Для тултипов */
}

.draft-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #d1d9e6;
}

.dr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* margin-bottom: 10px; */
    gap: 16px;
}

.dr-title {
    margin: 0;
    flex: 1;
}

.dr-title a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
}

.dr-title a:hover {
    color: #3498db;
    text-decoration: underline;
}

.dr-status {
    background: #ffc107;
    color: #856404;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.dr-excerpt {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}

.dr-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.dr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* Компактные кнопки управления */
.dr-card-controls {
    display: flex;
    gap: 8px;
    margin-left: 10px;
}

.dr-control-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.dr-control-btn:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.dr-edit-article:hover {
    color: #3498db;
    border-color: #3498db;
}

.dr-delete-article:hover {
    color: #ef4444;
    border-color: #fecaca;
    background: #fef2f2;
}

.dr-control-btn i {
    font-size: 14px;
}

.no-drafts {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 4px;
}

.empty-icon {
    font-size: 3rem;
    color: #dee2e6;
    margin-bottom: 20px;
}

.no-drafts p {
    color: #6c757d;
    font-size: 1.1rem;
    margin-bottom: 24px;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .draft-card {
        padding: 10px;
    }

    .dr-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .dr-status {
        align-self: flex-start;
    }

    .dr-meta {
        gap: 10px;
    }

    .dr-footer {
        align-items: center;
    }
}

/* Шапка страницы черновиков */
.dr-page-header {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.dr-header-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #475569;
}

.dr-header-icon {
    color: #3498db;
    font-size: 1.1rem;
}

.dr-header-count {
    color: #3498db;
    font-weight: 700;
}

.dr-header-actions {
    display: flex;
    gap: 10px;
}

/* Кнопки в шапке */
.dr-nav-btn, .dr-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dr-nav-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.dr-nav-btn:hover {
    background: #fff;
    color: #3498db;
    border-color: #3498db;
}

.dr-primary-btn {
    background: #27ae60;
    border: 1px solid #27ae60;
    color: #fff;
}

.dr-primary-btn:hover {
    background: #219150;
    border-color: #219150;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
		color: #fff;
}

/* Адаптивность для шапки */
@media (max-width: 600px) {
    .dr-page-header {
        padding: 10px;
    }

    .dr-header-label {
        display: none;
    }

    .dr-nav-btn, .dr-primary-btn {
        padding: 8px 12px;
    }

    .dr-nav-btn .btn-text, .dr-primary-btn .btn-text {
        display: none;
    }

    .dr-nav-btn i, .dr-primary-btn i {
        font-size: 16px;
        margin: 0;
    }
}

/* --- File: moderation.css --- */
/* Стили для страницы модерации в профиле */
.moderation-article-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.moderation-article-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.article-card-header {
    margin-bottom: 15px;
}

.article-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.article-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s;
}

.article-title a:hover {
    color: #3b82f6;
}

.article-meta-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.meta-row {
    font-size: 0.9rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-label {
    font-weight: 500;
}

.type-pending {
    background: #fffbeb;
    color: #b45309;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.type-rejected {
    background: #fef2f2;
    color: #b91c1c;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.rejection-feedback {
    background: #fff1f2;
    border: 1px solid #ffe4e6;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

.feedback-header {
    color: #be123c;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.feedback-content {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.5;
}

.article-preview {
    margin-bottom: 20px;
}

.preview-text {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Кнопки действий */
.article-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.article-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.btn-edit {
    background-color: #3b82f6;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-edit:hover {
    background-color: #2563eb;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transform: translateY(0);
		top: 0;
}

.btn-history {
    background-color: #f1f5f9;
    color: #1e293b !important;
    border: 1px solid #e2e8f0;
}

.btn-history:hover {
    background-color: #e2e8f0;
    color: #0f172a !important;
    transform: translateY(0);
}

.btn-resubmit {
    background-color: #f0fdf4;
    color: #16a34a;
}

.btn-resubmit:hover {
    background-color: #dcfce7;
    transform: translateY(-1px);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 480px) {
    .article-actions {
        display: flex;
        gap: 8px;
    }
.moderation-article-card>.article-actions{
					gap: 4px;
}
    .moderation-article-card > .article-actions .btn {
        padding: 10px;
        min-width: 42px;
        height: 42px;
        justify-content: center;
        border-radius: 6px;

    }

    .moderation-article-card > .article-actions .btn span {
        display: none !important;
    }

    .moderation-article-card > .article-actions .btn i {
        font-size: 1.1rem;
        margin: 0;
    }

    /* Делаем Отправить повторно акцентным на всю ширину, если нужно, 
       но по запросу пользователя "без текста" и компактно */
    .btn-resubmit {
        flex-grow: 1;
    }
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #f8fafc;
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.empty-state h4 {
    margin-bottom: 10px;
    color: #1e293b;
}

.empty-state p {
    color: #64748b;
    margin-bottom: 25px;
}

/* Стили для формы в модальном окне модерации */
.moderation-form-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.moderation-form-group label {
    font-weight: 500;
    color: #374151;
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

.moderation-form-group textarea {
    width: 100%;
}

@media (max-width: 768px) {
    .moderation-form-group {
        margin-bottom: 15px;
    }
}


/* --- File: tags.css --- */
/* Общий контейнер тегов */

.tags-wrapper {

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

    margin: 0;

}



/* Шапка с заголовком и кнопками сортировки */



.tags-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 20px;

    border-bottom: 1px solid #eee;

    flex-wrap: wrap;

}



.tags-title h3 {
    border-radius: 4px;
    color: #1e293b;
    margin: 0 0 8px 0;

}



.tags-subtitle {

    color: #64748b;

    font-size: 14px;

}



.sort-controls {

    display: flex;

    gap: 10px;

}



.sort-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;
    border-radius: 4px;
    padding: 10px 16px;

    border: 1px solid #e2e8f0;

    border-radius: 4px;

    background: #fff;

    color: #64748b;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.sort-btn:hover {

    border-color: #6366f1;

    color: #6366f1;

    background: #f8fafc;

}



.sort-btn.active {

    background: #6366f1;

    border-color: #6366f1;

    color: #fff;

}



/* Сетка тегов */

.tags-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 16px;

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



/* Карточка тега */

.tag-card {

    position: relative;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 4px;

    padding: 16px;

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    overflow: hidden;

}



.tag-card::before {

    position: absolute;

    inset: 0;

    border-radius: 4px;

    padding: 2px;

    background: linear-gradient(135deg, #6366f1, #8b5cf6);

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    border-radius: 4px;
    ite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition: opacity 0.3s;

}



.tag-card:hover {

    transform: translateY(0);

    box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 0.15);

}



.tag-card:hover::before {

    opacity: 1;

}



/* Заголовок карточки */

.tag-card-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin: 5px 0;

    flex-wrap: wrap;

}



.tag-name {

    font-size: 18px;

    font-weight: 600;

    color: #1e293b;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 6px;

}



.tag-hash {

    color: #6366f1;

}



.usage-count {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    background: #f8fafc;

    border-radius: 20px;

    font-size: 14px;

    color: #64748b;

}



/* Контент карточки */

.tag-content {

    /* width: 100%; */

    max-width: 100%;

    overflow: hidden;

}



.recent-articles h4 {

    font-size: 14px;

    color: #64748b;

    margin: 0 0 12px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.articles-list {

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    list-style: none;

    padding: 0;

    margin: 0;

}



.articles-list li {

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    padding: 10px;

    border-bottom: 1px dashed #e2e8f0;

    color: #475569;

    font-size: 14px;

    transition: all 0.2s;

}



.articles-list li:last-child {

    border-bottom: none;

}



.articles-list li:hover {

    background: #f1f5f9;

    border-radius: 4px;

    padding-left: 16px;

}



/* Подвал карточки */

.tag-card-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;

    padding-top: 10px;

    border-top: 1px solid #f1f5f9;

}



.last-used {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #94a3b8;

    font-size: 13px;

}



.view-all {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #6366f1;

    font-size: 14px;

    text-decoration: none;

    transition: transform 0.2s;

}



.view-all:hover {

    transform: translateX(4px);

}



/* Адаптивность */

@media (max-width: 768px) {

    .tags-wrapper {

        padding: 0;

        margin: 0;

        border-radius: 0;

        width: 100%;

    }



    .tags-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        margin-bottom: 16px;

    }

    .sort-controls {

        width: 100%;

    }



    .sort-btn {

        padding: 8px;

        font-size: 13px;

    }



    .tags-grid {

        grid-template-columns: 1fr;
        gap: 10px !important;

    }



    .tag-card {

        width: 100%;

        margin: 0;

        padding: 8px !important;


    }



    .tag-card-header {

        flex-direction: column;

        gap: 8px;

    }



    .usage-count {

        width: 100%;

        justify-content: center;

        margin-top: 4px;

    }



    .tag-content {

        margin: 8px 0;

        padding: 0; 

    }



    .articles-list li {

        padding: 6px 8px;

    }

}



/* Добавляем стили для очень маленьких экранов */

@media (max-width: 360px) {

    .sort-btn {

        font-size: 12px;

        padding: 6px;

    }



    .tag-name {

        font-size: 16px;

    }



    .articles-list {

        font-size: 13px;

    }

}

/* ===== СТИЛИ ДЛЯ СТРАНИЦ ТЕГОВ ===== */
.tags-filters>.filters-form>.filters-group>.button-primary {
    padding: 8px 8px;
}

.tag-actions>a.button-secondary.button-small {
    width: auto;
}

/* Основные стили страницы тегов */
.tags-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    margin-bottom: 30px;
    text-align: center;
}

.page-header h1 {
    font-size: 1.8rem;
    color: #1f2937;
    margin-bottom: 10px;
}

.page-description {
    color: #6b7280;
    font-size: 1.1rem;
}

/* Фильтры и поиск */
.tags-filters {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.filters-form {
    display: flex;
    justify-content: center;
}

.filters-group {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    padding: 12px 45px 12px 15px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    width: 300px;
    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-button {
    position: absolute;
    right: 5px;
    padding: 8px;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.2s;
}

.search-button:hover {
    color: #374151;
}

.sort-wrapper {
    display: flex;
    gap: 10px;
}

.sort-select {
    padding: 12px 15px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    cursor: pointer;
}

.sort-select:focus {
    outline: none;
    border-color: #6366f1;
}

/* Сетка тегов (Index Page) */
.tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

/* Карточка тега - Компактный дизайн */
.tag-card {
    background: #ffffff;
    border: 1px solid #eef1f5;
    border-radius: 8px;
    padding: 6px 10px;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.tag-card-body {
    display: flex;
    flex-direction: column;
}

.tag-card:hover {
    border-color: #3498db;
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.06);
    transform: translateY(-1px);
}

.tag-name-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
}


.tag-name-wrapper .tag-hash {
    color: #3498db;
    font-weight: 700;
    font-size: 1rem;
    opacity: 0.6;
}

.tag-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-stats {
    display: flex;
    align-items: baseline;
    flex-direction: row;
    gap: 30px;
    margin-top: -3px;
}

.articles-count-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
}

.tag-actions {
    display: flex;
    align-items: center;
}


.tag-view-btn {
    font-size: 0.75rem;
    color: #94a3b8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.2s;
}

.tag-view-btn:hover {
    color: #3498db;
}

/* Фильтры */
.tags-filters {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.filters-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.search-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.search-input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    outline: none;
}

.search-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
}

.sort-wrapper {
    display: flex;
    gap: 8px;
}

.sort-select {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #fff;
    cursor: pointer;
    color: #475569;
}

/* Пустое состояние */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px dashed #e2e8f0;
    border-radius: 16px;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Страница отдельного тега */
.tag-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.tag-page .page-header {
    text-align: left;
    margin-bottom: 30px;
}

/* Хлебные крошки */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb a {
    color: #6366f1;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.separator {
    color: #cbd5e1;
    margin: 0 4px;
}

.current {
    color: #94a3b8;
    font-weight: 400;
}

/* Информация о теге - Classic Style */
.tag-info-block {
    background: #ffffff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 24px 30px;
    margin-bottom: 35px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.tag-header-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tag-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}

.tag-main-icon {
    font-size: 24px;
    color: #6366f1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.tag-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tag-stats {
    display: flex;
    gap: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.95rem;
}

.stat-item i {
    color: #94a3b8;
}

.stat-item strong {
    color: #1e293b;
}

.button-primary-classic {
    background: #6366f1;
    color: #fafafa;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.button-primary-classic:hover {
    background: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
		color: #ffffff;
}

.button-primary-classic i {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .tag-info-block {
        padding: 20px;
        margin-bottom: 25px;
    }

    .tag-title {
        font-size: 1.5rem;
    }

    .tag-main-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .tag-meta-row {
        /* flex-direction: column;
        align-items: flex-start;
        gap: 15px; */
    }

    .tag-stats {
        flex-direction: column;
        gap: 8px;
    }
    
    .button-primary-classic {
        width: 100%;
        justify-content: center;
    }
}

/* Предварительный просмотр статей */
.tag-articles-preview {
    margin-bottom: 40px;
}

.tag-articles-preview h2 {
    font-size: 1.8rem;
    color: #1f2937;
    margin-bottom: 25px;
}

/* Связанные теги */
.related-tags {
    background: #f9fafb;
    border-radius: 8px;
    padding: 25px;
    margin-top: 40px;
}

.related-tags h2 {
    font-size: 1.5rem;
    color: #1f2937;
    margin-bottom: 20px;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    padding: 8px 16px;
    text-decoration: none;
    color: #374151;
    font-size: 14px;
    transition: all 0.2s;
}

.tag-item:hover {
    border-color: #6366f1;
    background: #f0f9ff;
    color: #1e40af;
}

.tag-count {
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
}

.tag-item:hover .tag-count {
    background: #dbeafe;
    color: #1e40af;
}

/* Предварительный просмотр статей (Tag View Page) */
.tv-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.tv-article-card {
    background: #ffffff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tv-article-card:hover {
    border-color: #3498db;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.tv-article-header {
    margin-bottom: 12px;
}

.tv-article-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.tv-article-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.tv-article-title a:hover {
    color: #3498db;
}

.tv-article-meta {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    color: #64748b;
}

.tv-article-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

.tv-article-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.tv-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.85rem;
}

.tv-stat svg, .tv-stat i {
    opacity: 0.7;
}

/* Показать больше */
.show-more {
    text-align: center;
    margin-top: 30px;
}

/* Пустое состояние */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 1.5rem;
    color: #374151;
    margin-bottom: 10px;
}

.empty-state p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}



@media (max-width: 768px) {


    .show-more {
        text-align: center;
        margin-top: 10px;
    }

    .tag-articles-preview {
        margin-bottom: 10px;
    }

    .related-tags>.tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .show-more>a.button-primary {
        width: auto;
    }

    .related-tags {
        background: #f9fafb;
        padding: 10px;
        margin-top: 10px;
    }

    .tag-articles-preview h2 {
        font-size: 1rem;
        color: #1f2937;
        margin-bottom: 15px;
    }

    .tag-articles-preview>.tv-articles-grid>article.tv-article-card>.tv-article-header>.tv-article-meta {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tag-articles-preview>.tv-articles-grid>article.tv-article-card>.tv-article-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 5px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .tag-page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0px;
    }

    .tag-articles-preview>.tv-articles-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        gap: 10px;
        margin-bottom: 20px;
    }

    .tag-articles-preview>.tv-articles-grid>.tv-article-card {
        padding: 10px;
    }


    .tag-link {
        margin-bottom: 0px;
    }

    .tags-page {
        padding: 0;
    }

    .tags-grid {
        gap: 5px;
    }

    .page-header h1 {
        font-size: 1.4rem !important;
        margin-bottom: 10px;
    }

    /* Мобильные стили для фильтров */
    .tags-filters {
        padding: 15px;
        margin-bottom: 20px;
    }

    .filters-form {
        display: block;
    }

    .filters-group {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .search-wrapper {
        width: auto;
    }

    .search-input {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        /* Предотвращает zoom на iOS */
    }

    .sort-wrapper {
        flex-direction: row;
        gap: 10px;
        width: 100%;
				flex-wrap: nowrap;
    }

		    .sort-wrapper, .status-filter-wrapper {
        min-width: 0;
    }

    .sort-select {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        /* Предотвращает zoom на iOS */
    }

    .button-primary,
    .button-secondary {
        width: auto;
        text-align: center;
        justify-content: center;
        /* font-size: 16px; */
    }
}

@media (max-width: 480px) {
    .tags-filters {
        padding: 10px;
        margin-bottom: 15px;
    }

    .filters-group {
        gap: 12px;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .search-input,
    .sort-select {
        padding: 10px 12px;
        font-size: 16px;
    }

    .search-input {
        padding-right: 40px;
    }

    .search-button {
        right: 8px;
        padding: 6px;
    }
}

/* --- File: notifications.css --- */
:root {
    --notif-primary: #3b82f6;
    --notif-bg: #ffffff;
    --notif-bg-unread: #f8faff;
    --notif-border: #eef2f6;
    --notif-text-primary: #1e293b;
    --notif-text-secondary: #64748b;
    --notif-text-muted: #94a3b8;
    --notif-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --notif-radius: 10px;
}

.notifications-container {
    max-width: 100%;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 5px 15px 5px;
    border-bottom: 1px solid var(--notif-border);
}

.notifications-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--notif-text-primary);
    letter-spacing: -0.01em;
}

.notifications-actions {
    display: flex;
    gap: 8px;
}

.notifications-actions .btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.notifications-actions .btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid transparent;
}

.notifications-actions .btn-secondary:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.notifications-actions .btn-danger {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid transparent;
}

.notifications-actions .btn-danger:hover {
    background: #ffe4e6;
}

.notifications-actions .btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

.notifications-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 0 5px;
}

.stat-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stat-number {
    font-size: 14px;
    font-weight: 700;
    color: var(--notif-primary);
}

.stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--notif-text-muted);
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--notif-border);
    border-radius: var(--notif-radius);
    background: var(--notif-bg);
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.notification-item.unread {
    background: var(--notif-bg-unread);
    border-color: #dbeafe;
}

.notification-item.unread::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: var(--notif-primary);
    border-radius: 4px;
}

.notification-item.read {
    opacity: 0.85;
}

.notification-item.clickable {
    cursor: pointer;
}

.notification-item.clickable:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.notification-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.notification-item.unread .notification-icon {
    background: #eff6ff;
}

.notification-icon i {
    color: #64748b;
    font-size: 15px;
}

.notification-item.unread .notification-icon i {
    color: var(--notif-primary);
}

.notification-content {
    flex: 1;
    min-width: 0;
    padding-right: 10px;
}

.notification-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--notif-text-primary);
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-message {
    color: var(--notif-text-secondary);
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time {
    font-size: 11px;
    color: var(--notif-text-muted);
    font-weight: 500;
}

.notification-actions {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.notification-item:hover .notification-actions {
    opacity: 1;
}

.notification-actions .hide-notification {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    color: var(--notif-text-muted);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notification-actions .hide-notification:hover {
    background: #fee2e2;
    color: #ef4444;
}

.no-notifications {
    text-align: center;
    padding: 50px 20px;
    color: var(--notif-text-muted);
    background: #f8fafc;
    border-radius: var(--notif-radius);
    border: 2px dashed #e2e8f0;
}

.no-notifications i {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.5;
}

.no-notifications p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

/* Pagination overrides */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    padding: 10px;
}

.pagination-btn {
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.pagination-btn:hover {
    background: #e2e8f0;
}

.pagination-current {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* Mobile Tweaks */
@media (max-width: 640px) {
    .notifications-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-bottom: 12px;
    }

    .notifications-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .notifications-actions .btn {
        justify-content: center;
    }

    .notification-item {
        padding: 10px 12px;
    }

    .notification-icon {
        width: 34px;
        height: 34px;
        margin-right: 12px;
    }

    .notification-icon i {
        font-size: 13px;
    }

    .notification-title {
        font-size: 13px;
    }

    .notification-message {
        font-size: 12px;
        -webkit-line-clamp: 2; /* Slightly more space for message on mobile */
        line-clamp: 2;
    }

    .notification-actions {
        opacity: 1; /* Always show hide button on mobile */
    }
}

/* --- File: feeds.css --- */
/* Стили для стены профиля (Feeds) */

/* Обеспечиваем одинаковую структуру для всех пользователей */
.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.feed-meta {
    flex: 1;
    min-width: 0;
}

.feed-actions {
    display: flex;
    gap: 5px;
    align-items: center;
}

.feed-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: white;
}

/* Обеспечиваем одинаковую структуру для всех пользователей */
.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.feed-meta {
    flex: 1;
    min-width: 0;
}

.feed-actions {
    display: flex;
    gap: 5px;
    align-items: center;
}

.feed-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: white;
}

/* Кнопка "Поделиться" */
.share-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.share-btn:hover {
    background-color: #5a6268;
}

.share-btn i {
    margin-right: 4px;
}

/* Уведомление о копировании */
.share-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #28a745;
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(20px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}

/* Стиль для модального окна в single_feed.php */
.modal {
    display: none;
    position: fixed;
    z-index: 1000001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow: auto;
    padding-top: 60px; /* Space for site header if needed */
}

.modal-content-feeds {
    background-color: #fefefe;
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
		padding: 20px 0;
}

.modal-header h3 {
    margin: 0;
    color: #333;
}

.modal .close {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #999;
}

.modal .close:hover {
    color: #333;
}

.modal-body {
    padding: 10px 0;
}

.share-url-container {
    display: flex;
    margin-top: 15px;
    gap: 10px;
}

.share-url-container input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.btn-copy {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-copy:hover {
    background-color: #0056b3;
}

.feeds-container {
    margin: 0 auto;
    padding: 0;
}

.feeds-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #6c757d;
    display: flex;
    justify-content: center;
}

/* Форма добавления публикации */
.feed-form-container {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 20px;
}

.feed-form .form-group {
    margin-bottom: 0;
}

.feed-form label {
    display: flex;
    margin-bottom: 0;
    font-weight: 500;
    color: #495057;
}

.feed-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}

.feed-textarea:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Панель инструментов редактора - для старой версии */
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    background: #f1f3f4;
    border: 1px solid #ced4da;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.toolbar-btn {
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.toolbar-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.character-count {
    text-align: right;
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

.form-actions {
    text-align: right;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}

.btn-primary {
    color: #fff;
    background-color: #3498db;
    border-color: #1877f2;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
		border-radius: 6px;
}

.btn-primary:hover {
    color: #fff;
    background-color: #2980b9;
    border-color: #166fe5;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-sm {
	  padding: 0;
    font-size: 0.875rem;
    border-radius: 0;
    border: 0;
}
.btn-sm:hover {
		background-color: hwb(0 100% 0%)!important;
		color: #007bff!important;
}


/* Список публикаций */
.feeds-list {
    margin-top: 20px;
}

.feed-item {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
		flex-wrap: wrap;
}

.feed-meta {
    font-size: 0.875rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 5px;
}

.feed-pinned-indicator {
    color: #007bff;
    font-size: 0.8rem;
}

.feed-actions {
    position: relative;
    display: flex;
    gap: 8px;
}

.feed-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
    min-width: 120px;
		width: max-content;
}

.feed-menu.active {
    display: block;
}

.feed-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: #333;
    font-size: 0.9rem;
    border-radius: 0;
}

.feed-menu-item:hover {
    background: #f8f9fa;
}

.feed-menu-item i {
    margin-right: 8px;
    width: 16px;
}

.feed-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #212529;
    position: relative;
}

.feed-content.collapsed {
    max-height: 200px;
    overflow: hidden;
}

.feed-content.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
    pointer-events: none;
}

.feed-expand-btn {
    display: inline-block;
    margin-top: 10px;
    color: #007bff;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.feed-expand-btn:hover {
    text-decoration: underline;
}

.feed-content p {
    margin: 0;
}

.feed-content p:last-child {
    margin-bottom: 0;
}

.feed-content ul, .feed-content ol {
    margin: 0 0 10px 20px;
    padding-left: 20px;
}

.feed-content strong, .feed-content b {
    font-weight: 600;
}

.feed-content em, .feed-content i {
    font-style: italic;
}

.feed-content u {
    text-decoration: underline;
}

.feed-content s, .feed-content strike {
    text-decoration: line-through;
}

/* Сообщение об отсутствии публикаций */
.no-feeds {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.no-feeds p {
    margin: 0;
    font-size: 1.1rem;
}

/* Пагинация */
.feeds-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination-link {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px;
    text-decoration: none;
    border: 1px solid #dee2e6;
    color: #007bff;
    border-radius: 4px;
}

.pagination-link:hover {
    background-color: #e9ecef;
}

.pagination-link.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* Сообщения об ошибках доступа */
.access-denied {
    text-align: center;
    padding: 40px 20px;
    color: #dc3545;
    font-size: 1.1rem;
}

button:hover {
background-color: lab(100% 0.01 -0.01);
color: #0069d9;
}

.btn-primary:hover {
		top: 0;
}

.visibility-option {
		font-size: 0.8rem;
}


.modal-content-feeds {
    padding: 10px;
}



/* Адаптивность */
@media (max-width: 768px) {
	
    /* .feeds-container removed */

		.btn-sm {
		padding: 0;
		border-radius: 0;
		border: 0;
		}
.feed-form-container {
    background: #f8f9fa;
    border: 0 solid #e9ecef;
    border-radius: 8px;
    padding: 5px;
    margin-bottom: 10px;
}
.feed-form .form-group {
    margin-bottom: -20px;
}
    
    .feed-item {
        padding: 10px;
    }
}

/* Модальное окно редактирования */
.modal {
    display: none !important;
    position: fixed;
    z-index: 10000;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px); /* Высота без учета шапки */
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.modal.show {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
    align-items: center;
}

/* Контент модалки - десктоп */
.modal-content-feeds {
    background-color: #fefefe;
    padding: 20px;
    border: none;
    width: 90%;
    max-width: 600px;
    max-height: calc(100% - 60px); /* Чтобы не выходило за границы видимости */
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Стилизация скроллбара для сохранения скругленных углов */
.modal-content-feeds::-webkit-scrollbar {
    width: 8px;
}

.modal-content-feeds::-webkit-scrollbar-track {
    background: transparent;
    margin: 12px 0; /* Отступы сверху и снизу чтобы не перекрывать скругление */
}

.modal-content-feeds::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.modal-content-feeds::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}



.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

.close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#edit-quill-editor {
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    min-height: 100px;
}

#edit-quill-editor .ql-toolbar {
    border: 1px solid #ced4da;
    border-bottom: none;
    background: #f8f9fa;
    border-radius: 4px 4px 0 0;
}

#edit-quill-editor .ql-container {
    border: 1px solid #ced4da;
    font-size: 14px;
    border-radius: 0 0 4px 4px;
}

#edit-quill-editor .ql-editor {
    min-height: 80px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
		flex-direction: row;
		padding-top: 10px;
}

.visibility-selector {
    position: relative;
}

.btn-visibility {
    background: none;
    border: none;
    color: #65676b;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-visibility:hover {
    background-color: #f0f2f5;
    color: #1c1e21;
}

.visibility-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
		left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
    min-width: max-content;
    margin-bottom: 5px;
}

.visibility-menu.active {
    display: block;
}

.visibility-option {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin: 0;
    font-weight: normal;
    color: #1c1e21;
		font-size: 0.8rem;
}

.visibility-option:hover {
    background-color: #f2f2f2;
}

.visibility-option.selected {
    background-color: #e3f2fd;
    color: #1976d2;
}

.visibility-option input {
    display: none;
}

.visibility-option i {
    width: 20px;
    margin-right: 5px;
    color: #65676b;
}

.btn-secondary {
    color: #6c757d;
    background-color: #fff;
    border-color: #6c757d;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.feed-tags-categories {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.85rem;
}

.category-tag, .tag-tag {
    background: #f0f2f5;
    color: #65676b;
    padding: 2px 4px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #e4e6ea;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.category-tag:hover, .tag-tag:hover {
    background: #e4e6ea;
    color: #1c1e21;
    text-decoration: underline;
}

.tag-tag {
    background: #e7f3ff;
    color: #1877f2;
    border-color: #d8e4f0;
}

.tag-tag:hover {
    background: #d8e4f0;
    text-decoration: underline;
}

.feed-footer {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.feed-footer-left {
    flex: 1;
}

.feed-footer-right {
    display: flex;
    justify-content: flex-end;
}

.feed-tags-categories {
    flex: 1;
}

.pin-selector {
    margin-left: 10px;
}

.btn-pin {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-pin:hover {
    background-color: #f8f9fa;
    color: #495057;
}

.btn-pin.active {
    color: #007bff;
    background-color: #e3f2fd;
}

.btn-pin:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #adb5bd;
}

.btn-pin:disabled:hover {
    background-color: transparent;
    color: #adb5bd;
}

.feed-visibility-info {
    font-size: 0.8rem;
    color: #65676b;
}

.form-group {
    margin-bottom: 0px;
}

.categories-tags-section {
    margin-top: 15px;
    display: flex;
    gap: 20px;
}

.categories-section, .tags-section {
    flex: 1;
}

.categories-section label, .tags-section label {
    display: flex;
		align-items: center;
    font-weight: 500;
    margin-bottom: 5px;
    color: #495057;
}

.custom-select {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.select-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.select-button:hover {
    border-color: #1877f2;
}

.select-button i {
    transition: transform 0.2s ease;
}

.custom-select.open .select-button i {
    transform: rotate(180deg);
}

.select-text {
    color: #6c757d;
		white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.custom-select.open .select-dropdown {
    display: block;
}

.select-options {
    padding: 8px 0;
}

.select-option {
    display: flex;
    align-items: center;
    padding: 2px 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.select-option:hover {
    background: #f8f9fa;
}

.select-option input[type="checkbox"] {
    margin-right: 8px;
}

.select-option span {
    font-size: 0.9rem;
}

.option-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.option-actions button {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.option-actions button:hover {
    background: #f8f9fa;
    color: #495057;
}

.option-actions .btn-delete-category:hover,
.option-actions .btn-delete-tag:hover {
    color: #dc3545;
}

.option-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-right: 8px;
}

#new-category, #new-tag, #edit-new-category, #edit-new-tag {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e1e5e9;
    border-radius: 20px;
    font-size: 0.85rem;
    background: #f8f9fa;
    transition: border-color 0.2s ease;
}

#new-category:focus, #new-tag:focus, #edit-new-category:focus, #edit-new-tag:focus {
    outline: none;
    border-color: #1877f2;
    background: #fff;
}

.feeds-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.filter-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: auto;
}

.filter-section label {
    font-weight: 600;
    color: #1c1e21;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-section select {
    padding: 8px 6px;
    border: 1px solid #dddfe2;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #f8f9fa;
    transition: border-color 0.2s ease;
}

.filter-section select:focus {
    outline: none;
    border-color: #1877f2;
    background: #fff;
}

#apply-filters, #clear-filters {
    padding: 8px 6px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

#apply-filters {
    background: #e9ecef;
    color: #374151;
}

#apply-filters:hover {
    background: #3498db;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
		color: #ffffff;
}

#clear-filters {
    background: #e4e6ea;
    color: #1c1e21;
}

#clear-filters:hover {
    background: #d8dade;
}

@media (max-width: 480px){
.categories-section label, .tags-section label {
width: 100%;
}	

}


/* Стили для развернутой публикации */

/* Стили для развернутой публикации */

/* Стили для развернутой публикации */
.feed-item.expanded-view {
    border: 1px solid #28a745 !important;
    position: relative;
    padding-left: 20px !important; /* Больший отступ для индикатора */
    transition: border-color 0.3s ease, padding-left 0.3s ease;
}

.feed-progress-indicator {
    position: absolute;
    left: 1px; /* Внутри отступа */
    background-color: rgb(40 166 69);
    color: white;
    padding: 6px 0; /* Убираем боковые отступы */
    border-radius: 10px; /* Более скругленный для вертикального вида */
    font-size: 10px;
    cursor: pointer;
    transition: top 0.1s linear; /* Плавное движение */
    transform: translateY(-50%); /* Центрирование по вертикали относительно top */
    display: none; /* Скрыт по умолчанию */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 20;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    width: 16px; /* Узкий вертикальный блок */
}

.feed-collapse-icon {
    font-size: 10px;
    line-height: 1;
}

.feed-percent-text {
    font-weight: 600;
    font-size: 9px;
    writing-mode: vertical-rl; /* Вертикальный текст */
    text-orientation: mixed;
    transform: rotate(180deg); /* Чтобы читалось снизу вверх */
}

/* Триггер создания публикации (Fake Input) */
.feed-input-trigger {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 16px;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.feed-input-trigger:hover {
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.trigger-avatar {
    flex-shrink: 0;
}

.trigger-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.trigger-avatar {
    width: auto;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

.trigger-input {
    flex-grow: 1;
    background: #f0f2f5;
    border-radius: 20px;
    padding: 10px 16px;
    color: #65676b;
    font-size: 15px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
    user-select: none;
}

.feed-input-trigger:hover .trigger-input {
    background-color: #e4e6eb;
}

.trigger-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.trigger-btn {
    background: none;
    border: none;
    color: #65676b;
    font-size: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
}

.trigger-btn:hover {
    background-color: #f0f2f5;
    color: #1877f2;
}

/* Specific icon colors if needed */
.trigger-btn .fa-image {
    color: #45bd62;
}

.trigger-btn .fa-paper-plane {
    color: #f7b928; /* Or blue #1877f2 */
}

/* Management Modal Styles */
.mgmt-modal {
    padding: 0;
    overflow: hidden;
}

.mgmt-modal .modal-header {
    padding: 15px 20px;
    margin-bottom: 0;
}

.mgmt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
    background: #f8f9fa;
}

.mgmt-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.mgmt-section h4 {
    margin: 0 0 15px 0;
    font-size: 0.95rem;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mgmt-section h4 i {
    color: #1877f2;
}

/* Stats Section */
.stats-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.stats-card {
    flex: 1;
    background: #f0f7ff;
    padding: 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0056b3;
}

.stats-label {
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
}

.visibility-stats h5 {
    font-size: 0.8rem;
    margin: 0 0 8px 0;
    color: #6c757d;
}

.progress-stack {
    height: 10px;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    background: #e9ecef;
}

.progress-bar-item.all { background: #45bd62; }
.progress-bar-item.users { background: #1877f2; }
.progress-bar-item.subscribers { background: #f7b928; }

/* Scroll Lists */
.mgmt-scroll-list {
    max-height: 200px;
    overflow-y: auto;
    flex-grow: 1;
    margin-bottom: 10px;
}

.mgmt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #f1f3f4;
    font-size: 0.85rem;
}

.mgmt-item-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.btn-unpin-mgmt {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.btn-unpin-mgmt:hover {
    background: #fff0f0;
}

/* Add Form */
.mgmt-add-form {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f1f3f4;
}

.mgmt-add-form input {
    flex-grow: 1;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.85rem;
}

.btn-icon-add {
    background: #1877f2;
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-add:hover {
    background: #166fe5;
}

/* Footer */
.mgmt-footer {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e9ecef;
}

.mgmt-actions-custom {
    display: flex;
    gap: 8px;
}

.btn-mgmt-custom {
    background: #f0f2f5;
    border: 1px solid #dddfe2;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b4f56;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-mgmt-custom:hover {
    background: #e4e6eb;
}

/* ===== MOBILE: учёт шапки (60px) и нижней навигации (60px) ===== */
@media (max-width: 768px) {
    .modal {
        /* Перезаписываем десктопный top: 60px — на мобиле шапка не sticky */
        top: 0;
        height: 100dvh;
        /* Безопасные зоны через padding */
        padding-top: 0;   /* высота .site-header на мобиле */
        padding-bottom: 0; /* высота .mobile-bottom-nav */
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal.show {
        padding-top: 0;
        padding-bottom: 0;
    }

    .modal-content-feeds {
        width: 95%;
        max-height: calc(100dvh - 60px - 60px - 16px); /* dvh - header - bottom-nav - gaps */
        overflow-y: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    /* Для management modal с grid-layout — разрешаем скроллировать grid */
    .mgmt-grid {
        max-height: calc(100dvh - 60px - 60px - 120px); /* minus header, nav, modal header+footer */
        overflow-y: auto;
    }

    .mgmt-footer {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .mgmt-actions-custom {
        justify-content: stretch;
    }

    .mgmt-actions-custom .btn-mgmt-custom {
        flex: 1;
        justify-content: center;
    }
}

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

.gear-btn i {
    transition: transform 0.3s ease;
}

.gear-btn:hover i {
    transform: rotate(90deg);
}

/* Feed Gallery & Mosaic Layouts */
.feed-gallery {
    display: grid;
    gap: 4px;
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.feed-gallery a {
    display: block;
    position: relative;
    overflow: hidden;
}

.feed-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.feed-gallery a:hover img {
    transform: scale(1.04);
}

.feed-gallery .hidden-img {
    display: none;
}

/* 1 Image */
.feed-gallery.gallery-1 {
    grid-template-columns: 1fr;
}
.feed-gallery.gallery-1 a {
    max-height: 500px;
}

/* 2 Images */
.feed-gallery.gallery-2 {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 16 / 9;
}

/* 3 Images */
.feed-gallery.gallery-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 16 / 9;
}
.feed-gallery.gallery-3 a:first-child {
    grid-row: span 2;
}

/* 4 Images & More */
.feed-gallery.gallery-4,
.feed-gallery.gallery-more {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    aspect-ratio: 1 / 1;
}

/* Overlay for 'More' */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    backdrop-filter: blur(2px);
    transition: background 0.3s ease;
}

.feed-gallery a:hover .gallery-overlay {
    background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
    .feed-gallery.gallery-2,
    .feed-gallery.gallery-3,
    .feed-gallery.gallery-4,
    .feed-gallery.gallery-more {
        aspect-ratio: auto;
    }
    
    .feed-gallery.gallery-3 {
        grid-template-columns: 1fr 1fr;
    }
    
    .feed-gallery.gallery-3 a:first-child {
        grid-column: span 2;
        aspect-ratio: 16 / 9;
    }
}

.images-upload-section {
    margin: 10px 0 15px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.images-upload-section label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.image-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
    padding: 0;
    border: none;
}

.btn-upload-trigger {
    width: max-content !important;
    padding: 6px 16px !important;
    font-size: 0.85rem !important;
    border-radius: 30px !important;
    margin: 0 !important;
    background: #495057 !important;
    border: 1px solid #343a40 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-upload-trigger:hover {
    background: #343a40 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.images-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
}

.preview-item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.preview-item:hover img {
    transform: scale(1.1);
}

.btn-remove-preview, .btn-delete-existing {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.95);
    color: white;
    border: none;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    z-index: 2;
    transition: all 0.2s ease;
}

.btn-remove-preview:hover, .btn-delete-existing:hover {
    background: #dc3545;
    transform: scale(1.1);
}

.loading-images {
    color: #666;
    font-size: 0.85rem;
    padding: 10px;
    text-align: center;
    width: 100%;
}

.preview-item.existing {
    border-color: rgba(13, 110, 253, 0.4);
}

.sortable-ghost {
    opacity: 0.4;
    background: #c8ebfb;
}

.existing-images {
    margin-bottom: 5px;
}

.existing-images {
    margin-bottom: 5px;
}

@media (max-width: 480px) {
    .feed-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
		.mgmt-grid {
    gap: 8px;
    padding: 5px;
}
.mgmt-section {
    padding: 6px;
}
}




/* Skeleton Loader Styles */
.feed-skeleton-item {
    background: #f0f2f5;
    background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: feed-skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes feed-skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.feed-skeleton-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feed-skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feed-skeleton-meta {
    height: 14px;
    width: 120px;
}

.feed-skeleton-actions {
    height: 24px;
    width: 60px;
}

.feed-skeleton-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feed-skeleton-line {
    height: 14px;
    width: 100%;
}

.feed-skeleton-line.mid { width: 85%; }
.feed-skeleton-line.short { width: 60%; }

.feed-skeleton-footer {
    height: 20px;
    width: 150px;
    margin-top: 5px;
}