/* CSS Variables для темной/светлой темы и базовые настройки */
:root {
    /* Базовые цвета приложений */
    --excel-primary: #217346;
    --excel-secondary: #1d6f42;
    --excel-accent: #28a745;
    --excel-light: #e8f5e8;
    --excel-dark: #165c32;
    
    --word-primary: #2b579a;
    --word-secondary: #24508a;
    --word-accent: #4d7bc8;
    --word-light: #e8f0fe;
    --word-dark: #1e3d6f;
    
    --powerpoint-primary: #d24726;
    --powerpoint-secondary: #b13d1e;
    --powerpoint-accent: #e74c3c;
    --powerpoint-light: #fde8e6;
    --powerpoint-dark: #8b2c1a;
    
    /* Общие цвета */
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #17a2b8;
    
    /* Нейтральные цвета */
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f4;
    --gray-200: #e8eaed;
    --gray-300: #dadce0;
    --gray-400: #bdc1c6;
    --gray-500: #9aa0a6;
    --gray-600: #80868b;
    --gray-700: #5f6368;
    --gray-800: #3c4043;
    --gray-900: #202124;

    /* Типография */
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    
    --line-height: 1.6;
    --line-height-tight: 1.3;
    
    /* Отступы */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    
    /* Скругления */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Анимации */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
    
    /* Таблички */
    --gray-500-rgb: 154, 160, 166;
}

/* Светлая тема - Excel стиль */
.theme--light {
    --bg-primary: #ffffff;
    --bg-secondary: var(--gray-50);
    --bg-accent: var(--gray-100);
    --bg-card: #ffffff;
    
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-muted: var(--gray-600);
    
    --border-color: var(--gray-200);
    --border-light: var(--gray-100);
    
    --accent-color: var(--excel-primary);
    --accent-hover: var(--excel-secondary);
    --accent-light: var(--excel-light);
    
    --shadow: 0 2px 8px rgba(33, 115, 70, 0.08);
    --shadow-lg: 0 8px 24px rgba(33, 115, 70, 0.12);
    
    --gradient-primary: linear-gradient(135deg, var(--excel-primary), var(--excel-accent));
    --gradient-card: linear-gradient(135deg, #ffffff, var(--excel-light));
}

/* Тёмная тема - PowerPoint стиль */
.theme--dark {
    --bg-primary: var(--gray-900);
    --bg-secondary: var(--gray-800);
    --bg-accent: var(--gray-700);
    --bg-card: var(--gray-800);
    
    --text-primary: #ffffff;
    --text-secondary: var(--gray-300);
    --text-muted: var(--gray-400);
    
    --border-color: var(--gray-700);
    --border-light: var(--gray-600);
    
    --accent-color: var(--powerpoint-accent);
    --accent-hover: var(--powerpoint-primary);
    --accent-light: rgba(210, 71, 38, 0.15);
    
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    
    --gradient-primary: linear-gradient(135deg, var(--powerpoint-primary), var(--powerpoint-accent));
    --gradient-card: linear-gradient(135deg, var(--gray-800), var(--gray-700));
    
    /* Таблички */    
    --gray-500-rgb: 128, 134, 139;
}

/* Word тема */
.theme--word {
    --bg-primary: #ffffff;
    --bg-secondary: var(--word-light);
    --bg-accent: #e3ecff;
    --bg-card: #ffffff;
    
    --text-primary: var(--gray-900);
    --text-secondary: var(--word-primary);
    --text-muted: var(--gray-600);
    
    --border-color: var(--word-accent);
    --border-light: #d4e1ff;
    
    --accent-color: var(--word-primary);
    --accent-hover: var(--word-secondary);
    --accent-light: var(--word-light);
    
    --shadow: 0 2px 8px rgba(43, 87, 154, 0.1);
    --shadow-lg: 0 8px 24px rgba(43, 87, 154, 0.15);
    
    --gradient-primary: linear-gradient(135deg, var(--word-primary), var(--word-accent));
    --gradient-card: linear-gradient(135deg, #ffffff, var(--word-light));
}

/* Excel тема (явная) */
.theme--excel {
    --bg-primary: #ffffff;
    --bg-secondary: var(--excel-light);
    --bg-accent: #e8f5e8;
    --bg-card: #ffffff;
    
    --text-primary: var(--gray-900);
    --text-secondary: var(--excel-primary);
    --text-muted: var(--gray-600);
    
    --border-color: var(--excel-accent);
    --border-light: #e0f2e0;
    
    --accent-color: var(--excel-primary);
    --accent-hover: var(--excel-secondary);
    --accent-light: var(--excel-light);
    
    --shadow: 0 2px 8px rgba(33, 115, 70, 0.1);
    --shadow-lg: 0 8px 24px rgba(33, 115, 70, 0.15);
    
    --gradient-primary: linear-gradient(135deg, var(--excel-primary), var(--excel-accent));
    --gradient-card: linear-gradient(135deg, #ffffff, var(--excel-light));
}

/* Авто-темы */
.theme--auto-light {
    --accent-color: var(--excel-primary);
    --accent-hover: var(--excel-secondary);
}

.theme--auto-dark {
    --accent-color: var(--powerpoint-accent);
    --accent-hover: var(--powerpoint-primary);
}

/* Базовые стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
    min-height: 100vh;
}

/* Контейнер */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Логотип */
.logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo__text {
    font-size: var(--font-size-xl);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.logo__slogan {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 400;
}

/* Шапка */
.header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1000;
}

.header__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

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

/* Элементы управления */
.header__controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--bg-secondary);
    padding: 6px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:66px;
    cursor:pointer;
}

.theme-toggle i {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle i {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

[data-theme="dark"] .theme-toggle:hover {
    background: yellow;
}

.icon--moon {
    display: none;
}

.theme--dark .icon--sun,
.theme--auto-dark .icon--sun {
    display: none;
}

.theme--dark .icon--moon,
.theme--auto-dark .icon--moon {
    display: block;
}

.auto-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #4CAF50;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.theme-toggle {
    position: relative;
}

/* Стили для иконок */
.theme--light .icon--sun {
    display: none !important;
}

.theme--light .icon--moon {
    display: block !important;
}

.theme--dark .icon--sun {
    display: block !important;
}

.theme--dark .icon--moon {
    display: none !important;
}

/* Светлая тема - показываем луну */
[data-theme="light"] .icon--light {
    display: block !important;
    opacity: 1;
}

[data-theme="light"] .icon--dark {
    display: none !important;
    opacity: 0;
}

/* Тёмная тема - показываем солнце */
[data-theme="dark"] .icon--dark {
    display: block !important;
    opacity: 1;
}

[data-theme="dark"] .icon--light {
    display: none !important;
    opacity: 0;
}

/* Анимация при переключении */
.theme-toggle.changing i {
    transform: scale(0.8) rotate(180deg);
}

/* Управление шрифтом */
.font-controls {
    display: flex;
    background: var(--bg-accent);
    border-radius: var(--radius);
}

.font-btn {
    background: transparent;
    border: none;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--text-primary);
    transition: var(--transition);
    min-width: 36px;
}

.font-btn:hover {
    background: var(--bg-primary);
}

/* Обновленная навигация */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    gap: var(--spacing-md);
}

.nav__list {
    display: flex;
    list-style: none;
    gap: 2px;
    flex: 1;
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: var(--radius);
    transition: var(--transition);
    font-weight: 500;
    position: relative;
    border: 1px solid transparent;
}

.nav__link:hover {
    background: var(--bg-accent);
    transform: translateY(-1px);
}

/* Цвета для разных разделов */
.nav__link--home {
    color: var(--text-primary);
}

.nav__link--home:hover {
    color: var(--gray-700);
    border-color: var(--gray-300);
}

.theme--dark .nav__link--home:hover {
    color: var(--gray-300);
    border-color: var(--gray-500);
}

.nav__link--excel:hover {
    color: var(--excel-primary);
    border-color: var(--excel-primary);
    background: var(--excel-light);
}

.theme--dark .nav__link--excel:hover {
    color: var(--excel-accent);
    border-color: var(--excel-accent);
    background: rgba(33, 115, 70, 0.2);
}

.nav__link--word:hover {
    color: var(--word-primary);
    border-color: var(--word-primary);
    background: var(--word-light);
}

.theme--dark .nav__link--word:hover {
    color: var(--word-accent);
    border-color: var(--word-accent);
    background: rgba(43, 87, 154, 0.2);
}

.nav__link--powerpoint:hover {
    color: var(--powerpoint-primary);
    border-color: var(--powerpoint-primary);
    background: var(--powerpoint-light);
}

.theme--dark .nav__link--powerpoint:hover {
    color: var(--powerpoint-accent);
    border-color: var(--powerpoint-accent);
    background: rgba(210, 71, 38, 0.2);
}

.nav__link--archives:hover {
    color: var(--gray-700);
    border-color: var(--gray-400);
    background: var(--gray-100);
}

.theme--dark .nav__link--archives:hover {
    color: var(--gray-300);
    border-color: var(--gray-500);
    background: var(--gray-700);
}

.nav__actions {
    flex-shrink: 0;
}

.btn--add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.btn--add:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.nav__icon {
    width: 14px;
    height: 14px;
    opacity: 0.8;
    transition: var(--transition);
}

.nav__link:hover .nav__icon {
    opacity: 1;
}

/* Основной контент */
.main {
    min-height: 70vh;
    padding: var(--spacing-xl) 0;
    background: var(--bg-secondary);
}

/* Карточки уроков */
.lesson-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.lesson-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.lesson-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

.lesson-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--bg-accent);
}

.lesson-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lesson-card:hover .lesson-card__image img {
    transform: scale(1.05);
}

.lesson-card__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
    background: var(--bg-accent);
}

.lesson-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: var(--shadow);
}

/* Категорийные бейджи */
.lesson-card__category--1 {
    background: var(--excel-primary);
    color: white;
}

.lesson-card__category--7 {
    background: var(--word-primary);
    color: white;
}

.lesson-card__category--8 {
    background: var(--powerpoint-primary);
    color: white;
}

.lesson-card__category--9 {
    background: var(--gray-700);
    color: white;
}

.lesson-card__file-badge,
.lesson-card__video-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: var(--bg-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

.lesson-card__file-badge {
    color: var(--success);
}

.lesson-card__video-badge {
    color: var(--danger);
}

.lesson-card__content {
    padding: var(--spacing-md);
}

.lesson-card__title {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
}

.lesson-card__title a {
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.lesson-card__title a:hover {
    color: var(--accent-color);
}

.lesson-card__excerpt {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lesson-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    margin-top: 12px;
}

/* Для списка (list) */
.lessons-grid--list .lesson-card__meta {
    flex-wrap: wrap;
    gap: 8px;
}

.lessons-grid--list .lesson-card__info {
    flex: 1;
    min-width: 200px;
}

.lessons-grid--list .lesson-card__rating {
    flex-shrink: 0;
}

/* Для сетки (grid) */
.lessons-grid--grid .lesson-card__meta {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.lessons-grid--grid .lesson-card__info,
.lessons-grid--grid .lesson-card__rating {
    width: 100%;
    justify-content: space-between;
}

/* Для мини (mini) */
.lessons-grid--mini .lesson-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.lessons-grid--mini .lesson-card__info {
    width: 100%;
    justify-content: space-between;
}

.lessons-grid--mini .lesson-card__rating {
    align-self: flex-end;
}

.lesson-card__info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.lesson-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.lesson-card__difficulty {
    margin-top: var(--spacing-xs);
}

.difficulty-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.difficulty-badge--beginner {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.difficulty-badge--intermediate {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.difficulty-badge--advanced {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.difficulty-badge--expert {
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    border: 1px solid rgba(111, 66, 193, 0.3);
}

/* Система рейтинга лайк/дизлайк */
.like-dislike-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
}

.likes-count,
.dislikes-count {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
}

.likes-count {
    color: var(--success);
}

.dislikes-count {
    color: var(--danger);
}

.rating-score {
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-accent);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    min-width: 24px;
    text-align: center;
}

/* Режимы отображения */
.lessons-grid {
    display: grid;
    gap: var(--spacing-lg);
}

/* Список (по умолчанию) */
.lessons-grid--list .lesson-card__content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Кубики (2 колонки) */
.lessons-grid--grid {
    grid-template-columns: repeat(2, 1fr);
}

.lessons-grid--grid .lesson-card__image {
    height: 160px;
}

/* Мини-кубики (3 колонки) */
.lessons-grid--mini {
    grid-template-columns: repeat(3, 1fr);
}

.lessons-grid--mini .lesson-card__image {
    height: 120px;
}

.lessons-grid--mini .lesson-card__title {
    font-size: var(--font-size-sm);
}

.lessons-grid--mini .lesson-card__excerpt {
    display: none;
}

.lessons-grid--mini .lesson-card__meta {
    flex-direction: column;
    gap: 4px;
}

/* Карточка с монолитной картинкой */
.lesson-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    transition: var(--transition);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lesson-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Картинка как монолит (без отступов и скруглений снизу) */
.lesson-card__image-monolith {
    flex: 0 0 150px; /* Фиксированная высота картинки */
    position: relative;
    overflow: hidden;
}

.lesson-card__image {
    width: 100%;
    height: 100%;
    position: relative;
}

.lesson-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lesson-card:hover .lesson-card__image img {
    transform: scale(1.05);
}

.lesson-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-accent);
    color: var(--text-muted);
}

.lesson-card__image-placeholder i {
    font-size: 2rem;
}

/* Бейджи на картинке */
.lesson-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.lesson-card__file-badge,
.lesson-card__video-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

/* Текстовая часть с отступами */
.lesson-card__content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    padding-top: 12px; /* Меньше отступ сверху */
}

.lesson-card__text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lesson-card__title {
    margin: 0 0 8px 0;
    font-size: var(--font-size-base);
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-primary);
}

.lesson-card__excerpt {
    flex: 1;
    margin: 0 0 12px 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Мета информация - компактно */
.lesson-card__meta {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lesson-card__info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    flex-wrap: wrap;
}

.lesson-card__rating {
    font-size: var(--font-size-xs);
}

/* Для режима list (горизонтальная раскладка) */
.lessons-grid--list .lesson-card {
    flex-direction: row;
    min-height: 150px;
}

.lessons-grid--list .lesson-card__image-monolith {
    flex: 0 0 200px; /* Шире для горизонтального вида */
    height: auto;
}

.lessons-grid--list .lesson-card__content-wrapper {
    padding: 14px 16px;
}

.lessons-grid--list .lesson-card__title {
    font-size: var(--font-size-lg);
    margin-bottom: 8px;
}

.lessons-grid--list .lesson-card__excerpt {
    font-size: var(--font-size-base);
    -webkit-line-clamp: 2;
}

/* Для режима grid (2 колонки) */
.lessons-grid--grid .lesson-card__image-monolith {
    flex: 0 0 140px;
}

.lessons-grid--grid .lesson-card__content-wrapper {
    padding: 12px;
}

/* Для режима mini (3 колонки) - очень компактно */
.lessons-grid--mini .lesson-card {
    min-height: auto;
}

.lessons-grid--mini .lesson-card__image-monolith {
    flex: 0 0 100px;
}

.lessons-grid--mini .lesson-card__content-wrapper {
    padding: 10px;
}

.lessons-grid--mini .lesson-card__title {
    font-size: var(--font-size-sm);
    margin-bottom: 6px;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.lessons-grid--mini .lesson-card__excerpt {
    display: none;
}

.lessons-grid--mini .lesson-card__meta {
    padding-top: 8px;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.lessons-grid--mini .lesson-card__info {
    gap: 4px;
}

.lessons-grid--mini .lesson-card__rating {
    align-self: flex-start;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .lessons-grid--list .lesson-card {
        flex-direction: column;
    }
    
    .lessons-grid--list .lesson-card__image-monolith {
        flex: 0 0 180px;
        width: 100%;
    }
    
    .lesson-card__image-monolith {
        flex: 0 0 140px;
    }
    
    .lesson-card__content-wrapper {
        padding: 12px;
    }
    
    .lesson-card__meta {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .lesson-card__image-monolith {
        flex: 0 0 120px;
    }
    
    .lesson-card__content-wrapper {
        padding: 10px;
    }
    
    .lesson-card__title {
        font-size: var(--font-size-sm);
    }
    
    .lesson-card__excerpt {
        font-size: var(--font-size-xs);
        -webkit-line-clamp: 2;
    }
    
    .lesson-card__info {
        font-size: var(--font-size-xs);
    }
}

/* Эффекты ховера */
.lesson-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

/* Для режима list (горизонтальная раскладка) */
.lessons-grid--list .lesson-card {
    flex-direction: row;
    min-height: 180px;
    align-items: stretch; /* Важно: растягиваем дочерние элементы */
}

.lessons-grid--list .lesson-card__link {
    flex-direction: row;
    height: 100%;
    align-items: stretch; /* Растягиваем элементы внутри ссылки */
}

.lessons-grid--list .lesson-card__image-monolith {
    flex: 0 0 220px;
    height: auto; /* Автоматическая высота, растягивается по родителю */
    align-self: stretch; /* Растягиваем на всю высоту */
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    display: flex; /* Делаем флекс-контейнером */
}

.lessons-grid--list .lesson-card__image {
    width: 100%;
    height: 100%; /* Занимает всю высоту контейнера */
    display: flex;
    flex-direction: column;
}

.lessons-grid--list .lesson-card__image img {
    height: 100%;
    object-fit: cover; /* Важно: чтобы изображение заполняло контейнер */
}

.lessons-grid--list .lesson-card__content-wrapper {
    flex: 1;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 180px; /* Минимальная высота текстового блока */
}

/* Исправляем отображение placeholder */
.lessons-grid--list .lesson-card__image-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--bg-accent);
}

/* Бейджи позиционируем абсолютно относительно картинки */
.lessons-grid--list .lesson-card__image {
    position: relative;
}

.lessons-grid--list .lesson-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.lessons-grid--list .lesson-card__file-badge,
.lessons-grid--list .lesson-card__video-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .lessons-grid--list .lesson-card {
        flex-direction: column;
        min-height: auto;
        align-items: stretch;
    }
    
    .lessons-grid--list .lesson-card__link {
        flex-direction: column;
        align-items: stretch;
    }
    
    .lessons-grid--list .lesson-card__image-monolith {
        flex: 0 0 180px;
        width: 100%;
        height: 180px; /* Фиксированная высота на мобильных */
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        align-self: auto;
    }
    
    .lessons-grid--list .lesson-card__image {
        height: 100%;
    }
    
    .lessons-grid--list .lesson-card__content-wrapper {
        min-height: auto;
        padding: 14px;
    }
}

/* Альтернативный вариант - если нужна точная высота изображения = высоте текста */
.lessons-grid--list .lesson-card__link {
    display: flex;
    height: 100%;
}

/* Если все еще есть проблема с высотой, добавьте это: */
.lessons-grid--list .lesson-card__image-monolith {
    display: flex;
    flex-direction: column;
}

/* Убедитесь, что картинка занимает всю доступную высоту */
.lessons-grid--list .lesson-card__image img,
.lessons-grid--list .lesson-card__image-placeholder {
    flex-grow: 1;
    min-height: 0; /* Важно для flexbox */
}

/* Универсальные настройки для всех режимов */
.lessons-grid--list .lesson-card__image-monolith {
    flex: 0 0 220px; /* Список: 220px */
}

.lessons-grid--grid .lesson-card__image-monolith {
    flex: 0 0 160px; /* Сетка 2 колонки: 160px */
}

.lessons-grid--mini .lesson-card__image-monolith {
    flex: 0 0 130px; /* Мини 3 колонки: 130px */
}

/* Оптимизация отображения картинок во всех режимах */
.lesson-card__image {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.lesson-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lesson-card:hover .lesson-card__image img {
    transform: scale(1.05);
}

/* Адаптивность для мобильных */
@media (max-width: 1024px) {
    .lessons-grid--grid .lesson-card__image-monolith {
        flex: 0 0 140px;
    }
    
    .lessons-grid--mini .lesson-card__image-monolith {
        flex: 0 0 120px;
    }
}

@media (max-width: 768px) {
    .lessons-grid--list .lesson-card__image-monolith {
        flex: 0 0 180px;
    }
    
    .lessons-grid--grid .lesson-card__image-monolith {
        flex: 0 0 140px;
    }
    
    .lessons-grid--mini .lesson-card {
        min-height: 160px;
    }
    
    .lessons-grid--mini .lesson-card__image-monolith {
        flex: 0 0 100px;
    }
}

@media (max-width: 480px) {
    .lessons-grid--mini .lesson-card {
        min-height: 150px;
    }
    
    .lessons-grid--mini .lesson-card__image-monolith {
        flex: 0 0 90px;
    }
}

/* Элементы управления отображением */
.view-controls {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.view-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: var(--transition);
}

.view-btn:hover {
    background: var(--bg-accent);
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--accent-color);
    color: white;
}

/* Сетка статей */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.article-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: var(--spacing-md);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.article-card__category {
    display: inline-block;
    background: var(--accent-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
}

.article-card__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
}

.article-card__excerpt {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Подвал */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-xl) 0;
    margin-top: var(--spacing-2xl);
}

.footer__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-xl);
}

.footer__links {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.footer__links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

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

.footer__stat {
    margin-bottom: 4px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.footer__stat strong {
    color: var(--text-primary);
}

/* Кнопка "Наверх" */
.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

/* Печать иконка */
/* ====== ПЛАВАЮЩАЯ КНОПКА ПЕЧАТИ ====== */

.scroll-print {
    position: fixed;
    bottom: 80px; /* Располагаем выше кнопки "Наверх" */
    right: 20px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(var(--accent-color-rgb), 0.3);
    z-index: 999; /* Ниже кнопки "Наверх" (у нее обычно 1000) */
    overflow: hidden;
}

.scroll-print.show {
    opacity: 1;
    visibility: visible;
}

/* Эффект свечения */
.scroll-print::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scroll-print:hover::before {
    opacity: 1;
}

/* Анимация волны при клике */
.scroll-print::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0);
    transition: transform 0.3s ease;
}

.scroll-print:active::after {
    transform: scale(2);
    opacity: 0;
}

/* Иконка */
.scroll-print i {
    font-size: 22px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.scroll-print:hover i {
    transform: scale(1.1);
}

/* Эффект подъема при наведении */
.scroll-print:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 30px rgba(var(--accent-color-rgb), 0.4);
}

/* Анимация появления */
@keyframes printBtnAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.scroll-print.show {
    animation: printBtnAppear 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Пульсация для привлечения внимания (опционально) */
.scroll-print.pulse {
    animation: pulsePrint 2s infinite;
}

@keyframes pulsePrint {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(var(--accent-color-rgb), 0.3);
    }
    50% {
        box-shadow: 0 6px 30px rgba(var(--accent-color-rgb), 0.5),
                    0 0 0 10px rgba(var(--accent-color-rgb), 0.1);
    }
}

/* Вариант 2: Стеклянный морфизм */
.scroll-print.glass {
    background: rgba(var(--accent-color-rgb), 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Вариант 3: С тенью документа */
.scroll-print.doc-shadow {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    position: relative;
}

.scroll-print.doc-shadow::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
    filter: blur(10px);
}

/* Бейдж с количеством страниц (опционально) */
.scroll-print__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Адаптивность */
@media (max-width: 768px) {
    .scroll-print {
        width: 50px;
        height: 50px;
        bottom: 70px;
        right: 15px;
    }
    
    .scroll-print i {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .scroll-print {
        width: 44px;
        height: 44px;
        bottom: 60px;
        right: 10px;
    }
    
    .scroll-print i {
        font-size: 18px;
    }
}

/* Для печатной версии - скрываем кнопку */
@media print {
    .scroll-print {
        display: none !important;
    }
}

/* JavaScript для показа/скрытия кнопки */
.scroll-print.hide {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
}

/* Стили для панели пользователя и авторизации */
.user-panel,
.auth-panel {
    position: relative;
    z-index: 1000;
}

/* Панель пользователя (залогинен) */
.user-panel__trigger {
    position: relative;
}

.user-panel__btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
}

.user-panel__btn:hover {
    background: var(--bg-accent);
    border-color: var(--accent-color);
}

.user-panel__avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}

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

.user-panel__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4757;
    color: white;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px solid var(--bg-secondary);
}

.user-panel__name {
    font-weight: 500;
    color: var(--text-primary);
}

.user-panel__chevron {
    transition: transform 0.3s ease;
    width: 14px;
    height: 14px;
}

.user-panel__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 320px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.user-panel__dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-panel__info {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.user-panel__main {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.user-panel__avatar--large {
    width: 48px;
    height: 48px;
}

.user-panel__details {
    flex: 1;
}

.user-panel__username {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.user-panel__group {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.user-panel__level {
    margin-top: var(--spacing-xs);
}

.level-bar {
    height: 4px;
    background: var(--bg-accent);
    border-radius: 2px;
    margin-bottom: 4px;
}

.level-bar__progress {
    height: 100%;
    background: var(--accent-color);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.level-bar__text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.user-panel__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.user-panel__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.user-panel__stat:hover {
    background: var(--bg-accent);
}

.user-panel__stat-icon {
    margin-bottom: 4px;
    opacity: 0.7;
    width: 14px;
    height: 14px;
}

.user-panel__stat-value {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--accent-color);
}

.user-panel__stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.user-panel__nav {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.user-panel__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.user-panel__link:hover {
    background: var(--bg-accent);
    color: var(--accent-color);
}

.user-panel__link--admin {
    color: #e74c3c;
}

.user-panel__link--admin:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.user-panel__nav-badge {
    position: absolute;
    right: 12px;
    background: #ff4757;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
}

.user-panel__actions {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Панель авторизации (не залогинен) */
.auth-panel__btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.auth-panel__btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.auth-panel__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 300px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.auth-panel__dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.auth-panel__header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.auth-panel__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.auth-panel__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.auth-panel__social {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.auth-panel__social-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.auth-panel__social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
}

.auth-panel__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: all 0.3s ease;
    text-decoration: none;
}

.auth-panel__social-btn:hover {
    background: var(--bg-accent);
    transform: translateY(-1px);
}

.auth-panel__social-btn--vk:hover {
    background: #4c75a3;
    color: white;
}

.auth-panel__social-btn--yandex:hover {
    background: #ffcc00;
    color: black;
}

.auth-panel__social-btn--google:hover {
    background: #4285f4;
    color: white;
}

.auth-panel__divider {
    padding: var(--spacing-md);
    text-align: center;
    position: relative;
}

.auth-panel__divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--spacing-md);
    right: var(--spacing-md);
    height: 1px;
    background: var(--border-color);
}

.auth-panel__divider span {
    background: var(--bg-primary);
    padding: 0 var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    position: relative;
    z-index: 1;
}

.auth-panel__form {
    padding: 0 var(--spacing-md) var(--spacing-md);
}

.auth-panel__input-group {
    margin-bottom: var(--spacing-sm);
}

.auth-panel__input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: border-color 0.3s ease;
}

.auth-panel__input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--bg-primary);
}

.auth-panel__submit {
    margin-top: var(--spacing-sm);
}

.auth-panel__footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.auth-panel__link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.auth-panel__link:hover {
    color: var(--accent-color);
}

/* Стили для полной статьи */
.full-article {
    background: var(--bg-primary);
}

.breadcrumbs {
    padding: var(--spacing-md) 0;
}

.breadcrumbs__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
}

.breadcrumbs__link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs__link:hover {
    color: var(--accent-color);
}

.breadcrumbs__separator {
    color: var(--text-secondary);
}

.breadcrumbs__current {
    color: var(--text-primary);
    font-weight: 500;
}

.article-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-lg) 0;
}

.article-header__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.article-category {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-primary);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.article-category:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-1px);
}

.article-date,
.article-updated {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.article-header__title {
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
    color: var(--text-primary);
}

.article-header__stats {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.article-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

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

.difficulty-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-xl);
    align-items: start;
}

.article-main {
    min-width: 0;
}

/* Стили для таблиц */
.article-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.article-body table caption {
    caption-side: top;
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-accent);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-base);
    font-family: inherit;
}

/* Заголовок таблицы (первая строка) */
.article-body table thead {
    background: linear-gradient(135deg, var(--excel-primary), var(--excel-secondary));
}

.article-body table thead th {
    color: white;
    font-weight: 700;
    text-align: center;
    padding: 12px 8px;
    border-bottom: 2px solid var(--excel-dark);
    position: relative;
    font-family: inherit;
    font-size: var(--font-size-sm);
}

/* Стили для Excel-подобных заголовков столбцов (A, B, C...) */
.article-body table thead th:first-child {
    background: var(--gray-700);
    color: white;
    font-weight: 700;
    min-width: 40px;
}

.article-body table thead th:not(:first-child) {
    background: linear-gradient(135deg, var(--excel-primary), var(--excel-secondary));
    position: relative;
}

.article-body table thead th:not(:first-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: rgba(255, 255, 255, 0.3);
}

/* Строки таблицы */
.article-body table tbody tr {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-light);
}

.article-body table tbody tr:hover {
    background-color: rgba(var(--accent-color-rgb), 0.05);
}

.article-body table tbody tr:nth-child(even) {
    background-color: var(--bg-accent);
}

.article-body table tbody tr:nth-child(even):hover {
    background-color: rgba(var(--accent-color-rgb), 0.08);
}

/* Ячейки */
.article-body table td {
    padding: 10px 8px;
    text-align: center;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    position: relative;
    min-width: 60px;
}

/* Первый столбец (номера строк) */
.article-body table td:first-child,
.article-body table th:first-child {
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: 600;
    text-align: center;
    border-right: 2px solid var(--border-color);
    width: 40px;
    min-width: 40px;
    font-family: 'Consolas', monospace;
}

.theme--dark .article-body table td:first-child,
.theme--dark .article-body table th:first-child {
    background: var(--gray-800);
    color: var(--gray-300);
}

/* Формулы Excel */
.article-body table td[style*="text-align:center;"]:contains("=") {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: rgba(40, 167, 69, 0.1);
    color: var(--success);
    font-weight: 600;
    border-left: 3px solid var(--success);
}

/* Числовые значения */
.article-body table td[style*="text-align:center;"]:not(:contains("=")):not(:empty) {
    font-family: 'Consolas', monospace;
    color: var(--text-primary);
}

/* Пустые ячейки */
.article-body table td:empty {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 5px,
        rgba(var(--gray-500-rgb), 0.05) 5px,
        rgba(var(--gray-500-rgb), 0.05) 10px
    );
}

/* Заголовки строк (первый столбец) */
.article-body table tbody td:first-child {
    font-weight: 600;
    color: var(--gray-700);
    background: var(--gray-50);
    border-right: 2px solid var(--border-color);
}

.theme--dark .article-body table tbody td:first-child {
    background: var(--gray-800);
    color: var(--gray-300);
}

/* Выделение ячеек с ошибками или предупреждениями */
.article-body table td.error {
    background-color: rgba(220, 53, 69, 0.1);
    border-left: 3px solid var(--danger);
    color: var(--danger);
    font-weight: 600;
}

.article-body table td.warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-left: 3px solid var(--warning);
    color: var(--warning);
    font-weight: 600;
}

.article-body table td.success {
    background-color: rgba(40, 167, 69, 0.1);
    border-left: 3px solid var(--success);
    color: var(--success);
    font-weight: 600;
}

/* Сетка Excel-стиль */
.article-body table.excel-style {
    border: 2px solid var(--excel-primary);
}

.article-body table.excel-style td,
.article-body table.excel-style th {
    border: 1px solid var(--gray-300);
}

.theme--dark .article-body table.excel-style td,
.theme--dark .article-body table.excel-style th {
    border: 1px solid var(--gray-600);
}

.article-body table.excel-style thead th {
    background: linear-gradient(to bottom, var(--excel-light), var(--excel-primary));
    color: var(--text-primary);
    border-bottom: 2px solid var(--excel-dark);
}

/* Компактные таблицы */
.article-body table.compact {
    font-size: var(--font-size-sm);
}

.article-body table.compact td,
.article-body table.compact th {
    padding: 6px 8px;
}

/* Таблицы с зеброй */
.article-body table.zebra tbody tr:nth-child(odd) {
    background: var(--bg-card);
}

.article-body table.zebra tbody tr:nth-child(even) {
    background: var(--bg-accent);
}

/* Адаптивность таблиц */
@media (max-width: 768px) {
    .article-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-sm);
        margin: var(--spacing-md) 0;
    }
    
    .article-body table thead {
        display: none;
    }
    
    .article-body table tbody tr {
        display: block;
        margin-bottom: var(--spacing-sm);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--bg-card);
    }
    
    .article-body table tbody td {
        display: block;
        text-align: right;
        border: none;
        border-bottom: 1px solid var(--border-light);
        padding: 10px 15px;
        position: relative;
        min-width: auto;
    }
    
    .article-body table tbody td:last-child {
        border-bottom: none;
    }
    
    .article-body table tbody td:first-child {
        background: var(--bg-accent);
        text-align: left;
        font-weight: 600;
        border-bottom: 2px solid var(--border-color);
        width: auto;
    }
    
    .article-body table tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        color: var(--text-secondary);
    }
    
    /* Для мобильных скрываем первый столбец с номерами строк */
    .article-body table tbody td:first-child::before {
        content: 'Строка:';
        position: static;
        transform: none;
        display: inline-block;
        margin-right: 8px;
    }
}

/* Специальные стили для Excel-таблиц с формулами */
.article-body table.excel-formula {
    counter-reset: excel-row;
}

.article-body table.excel-formula tbody tr {
    counter-increment: excel-row;
}

.article-body table.excel-formula tbody td:first-child::before {
    content: counter(excel-row);
    font-weight: 600;
    color: var(--gray-600);
}

.article-body table.excel-formula td.formula-cell {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: linear-gradient(135deg, rgba(33, 115, 70, 0.05), rgba(33, 115, 70, 0.1));
    border-left: 3px solid var(--excel-primary);
    color: var(--excel-primary);
    font-weight: 600;
    text-align: left !important;
    padding-left: 12px;
}

/* Анимация при наведении на строку с формулой */
.article-body table.excel-formula tbody tr:hover td.formula-cell {
    background: linear-gradient(135deg, rgba(33, 115, 70, 0.1), rgba(33, 115, 70, 0.15));
    box-shadow: inset 0 0 0 1px rgba(33, 115, 70, 0.2);
}

/* Стили для ячеек с числами как текст (с апострофом) */
.article-body table td.text-number {
    font-style: italic;
    color: var(--gray-600);
    background: rgba(108, 117, 125, 0.05);
    border-left: 2px dashed var(--gray-400);
}

.article-body table td.text-number::before {
    content: "'";
    opacity: 0.5;
    margin-right: 1px;
}

/* Индикаторы типов данных */
.article-body table td[data-type="number"]::after,
.article-body table td[data-type="text"]::after,
.article-body table td[data-type="formula"]::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.6;
}

.article-body table td[data-type="number"]::after {
    background: var(--success);
}

.article-body table td[data-type="text"]::after {
    background: var(--info);
}

.article-body table td[data-type="formula"]::after {
    background: var(--warning);
}

.article-gallery {
    margin-bottom: var(--spacing-lg);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.gallery-image {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-caption {
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
}

.article-video {
    margin-bottom: var(--spacing-lg);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-accent);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.article-body {
    line-height: 1.7;
    font-size: var(--font-size-base);
    text-align: justify;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    margin: var(--spacing-lg) 0 var(--spacing-md);
    color: var(--text-primary);
}

.article-body a {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--accent-color-rgb), 0.4);
    padding-bottom: 2px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.article-body a:hover {
    color: var(--accent-hover);
    border-bottom-style: solid;
    border-bottom-color: var(--accent-color);
    background-color: rgba(var(--accent-color-rgb), 0.04);
}

.article-body p {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.article-body ul,
.article-body ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.article-body li {
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.article-body code {
    background: var(--bg-accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--text-primary);
}

.article-body pre {
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
}

.article-body blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    font-style: italic;
    color: var(--text-secondary);
}

.article-download {
    margin: var(--spacing-xl) 0;
}

.download-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.download-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: white;
    border-radius: 50%;
}

.download-card__content {
    flex: 1;
}

.download-card__title {
    margin-bottom: 4px;
    color: var(--text-primary);
}

.download-card__description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.download-card__files {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Стили для тегов, рейтинга и шаринга */
.article-tags {
    margin: var(--spacing-xl) 0;
}

.tags-cloud {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.tags-cloud__label {
    font-weight: 500;
    color: var(--text-primary);
}

.tags-cloud__items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tags-cloud__items a {
    display: inline-block;
    background: var(--bg-accent);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.tags-cloud__items a:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.article-actions {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.article-actions__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* Унифицированный рейтинг */
.unified-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.rating-label {
    font-weight: 500;
    color: var(--text-primary);
}

.rating-buttons {
    display: flex;
    gap: 8px;
}

.rating-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.rating-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.rating-btn--like:hover {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.rating-btn--dislike:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.rating-score {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.rating-score strong {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

/* Кнопки шаринга */
.article-actions__share {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.share-label {
    font-weight: 500;
    color: var(--text-primary);
}

.share-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.share-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.share-btn--copy:hover {
    background: var(--gray-700);
    color: white;
}

.share-btn--vk:hover {
    background: #4c75a3;
    color: white;
}

.share-btn--ok:hover {
    background: #ee8208;
    color: white;
}

.share-btn--tg:hover {
    background: #0088cc;
    color: white;
}

.share-btn--wa:hover {
    background: #25d366;
    color: white;
}

/* Главное изображение статьи */
.article-hero {
    margin-bottom: var(--spacing-lg);
    margin-left: -15px;
}

.article-hero__image {
    overflow: hidden;
    background: var(--bg-accent);
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.article-hero__caption {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
    font-style: italic;
}

/* Боковая панель */
.article-sidebar {
    position: sticky;
    top: 100px;
}

.author-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
    margin-right: -18px;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.author-card__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

.author-card__info {
    flex: 1;
}

.author-card__name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.author-card__stats {
    display: flex;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.sidebar-widget {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.sidebar-widget__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--accent-color);
}

/* Стили для похожих материалов */

.related-news__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
/*    display: flex;*/
    text-align:center;
    align-items: center;
    gap: var(--spacing-sm);
}

.related-news__grid {
    display: grid;
    gap: var(--spacing-md);
}

/* Базовая карточка */
.related-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.related-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.related-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.related-card__image {
    position: relative;
    height: 120px;
    background: var(--bg-accent);
    overflow: hidden;
}

.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-card:hover .related-card__image img {
    transform: scale(1.05);
}

.related-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2rem;
}

.related-card__category {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: var(--shadow);
}

.related-card__category--1 {
    background: var(--excel-primary);
    color: white;
}

.related-card__category--7 {
    background: var(--word-primary);
    color: white;
}

.related-card__category--8 {
    background: var(--powerpoint-primary);
    color: white;
}

.related-card__category--9 {
    background: var(--gray-700);
    color: white;
}

.related-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow);
}

.related-card__badge--file {
    color: var(--success);
}

.related-card__badge--video {
    color: var(--danger);
}

.related-card__content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    height: calc(100% - 120px);
}

.related-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

.related-card__excerpt {
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.related-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

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

.related-card__date,
.related-card__views {
    display: flex;
    align-items: center;
    gap: 4px;
}

.related-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--warning);
}

/* Вариант в виде списка */
.related-news--list .related-news__grid {
    grid-template-columns: 1fr;
}

.related-news--list .related-card {
    display: flex;
    height: auto;
}

.related-news--list .related-card__image {
    width: 100px;
    height: 80px;
    flex-shrink: 0;
}

.related-news--list .related-card__content {
    flex: 1;
    height: auto;
    padding: var(--spacing-sm) var(--spacing-md);
}

.related-news--list .related-card__title {
    font-size: var(--font-size-sm);
    -webkit-line-clamp: 2;
}

.related-news--list .related-card__excerpt {
    -webkit-line-clamp: 1;
    margin-bottom: var(--spacing-sm);
}

/* Вариант в виде сетки */
.related-news--grid .related-news__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.related-news--grid .related-card__image {
    height: 140px;
}

/* Компактный вариант */
.related-news--compact .related-news__grid {
    gap: var(--spacing-sm);
}

.related-news--compact .related-card {
    display: flex;
    flex-direction: row;
    padding: var(--spacing-sm);
    height: auto;
}

.related-news--compact .related-card__image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.related-news--compact .related-card__content {
    flex: 1;
    height: auto;
    padding: 0 0 0 var(--spacing-sm);
}

.related-news--compact .related-card__title {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
    -webkit-line-clamp: 2;
}

.related-news--compact .related-card__excerpt {
    display: none;
}

.related-news--compact .related-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.related-news--compact .related-card__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.related-news--compact .related-card__category {
    top: 4px;
    left: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
}

.related-news--compact .related-card__badge {
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
}

/* Мини-карточки для сайдбара */
.related-news--mini .related-card {
    padding: var(--spacing-sm);
    height: auto;
}

.related-news--mini .related-card__image {
    display: none;
}

.related-news--mini .related-card__content {
    padding: 0;
    height: auto;
}

.related-news--mini .related-card__title {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
    -webkit-line-clamp: 2;
}

.related-news--mini .related-card__excerpt {
    display: none;
}

.related-news--mini .related-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.related-news--mini .related-card__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

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

.sidebar-nav__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sidebar-nav__link:hover {
    background: var(--bg-accent);
    color: var(--accent-color);
    transform: translateX(4px);
}

.quick-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.quick-action:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-1px);
    border-color: var(--accent-color);
}

.quick-actions a{
  text-decoration:none;
}

/* Комментарии */
.comments-section {
    margin-top: var(--spacing-2xl);
}

.comment {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: var(--transition);
}

.comment:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow);
}

.comment__header {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.comment__avatar {
    position: relative;
    flex-shrink: 0;
}

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

.avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: var(--success);
    border: 2px solid var(--bg-primary);
    border-radius: 50%;
}

.comment__info {
    flex: 1;
}

.comment__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: 4px;
}

.author-name {
    font-weight: 600;
    color: var(--text-primary);
}

.author-badge {
    font-size: var(--font-size-sm);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.author-badge--admin {
    background: var(--danger);
    color: white;
}

.author-badge--moder {
    background: var(--warning);
    color: black;
}

.author-badge--vip {
    background: var(--info);
    color: white;
}

.comment__meta {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.comment__actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
}

/* Рейтинг комментариев */
.comment-rating {
    display: flex;
    gap: var(--spacing-xs);
}

.vote-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.vote-btn:hover {
    transform: translateY(-1px);
}

.vote-btn--like:hover {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.vote-btn--dislike:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.action-buttons {
    display: flex;
    gap: 4px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.action-btn:hover {
    background: var(--bg-accent);
    color: var(--text-primary);
}

.action-btn--report:hover {
    background: var(--danger);
    color: white;
}

.action-btn--edit:hover {
    background: var(--warning);
    color: black;
}

.action-btn--delete:hover {
    background: var(--danger);
    color: white;
}

/* Контент комментария */
.comment__content {
    margin-left: 60px;
}

.comment-text {
    line-height: 1.6;
    color: var(--text-primary);
}

.comment-images {
    margin-top: var(--spacing-sm);
}

.comment-signature {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    font-style: italic;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Форма добавления комментария */
.add-comment-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.add-comment__header {
    margin-bottom: var(--spacing-md);
}

.add-comment__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-weight: 500;
    color: var(--text-primary);
}

.form-input {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--bg-primary);
}

.editor-container {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.upload-section {
    margin-top: var(--spacing-sm);
}

.upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.upload-btn:hover {
    background: var(--bg-accent);
    border-color: var(--accent-color);
}

.uploader-dropdown {
    display: none;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.captcha-section {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
}

.captcha-image {
    flex-shrink: 0;
}

.form-actions {
    margin-top: var(--spacing-md);
}

/* Фокус для клавиатуры */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Состояния для скриптов */
.js-enabled .no-js-hidden {
    display: none !important;
}

/* Состояния копирования */
.share-btn--copy.copied {
    background: #28a745 !important;
    color: white !important;
}

.share-btn--copy.error {
    background: #dc3545 !important;
    color: white !important;
}

/* Ленивая загрузка */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img.loaded {
    opacity: 1;
}

img.error {
    opacity: 1;
    background: #f8f9fa;
}

/* Анимации */
.fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Анимации перехода темы */
.theme-transition * {
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease !important;
}

/* Фирменные акценты для категорий */
.category-excel {
    --category-color: var(--excel-primary);
    --category-light: var(--excel-light);
}

.category-word {
    --category-color: var(--word-primary);
    --category-light: var(--word-light);
}

.category-powerpoint {
    --category-color: var(--powerpoint-primary);
    --category-light: var(--powerpoint-light);
}

/* Адаптивность */
@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .article-sidebar {
        position: static;
        order: -1;
    }
    
    .author-card {
        flex-direction: column;
        text-align: center;
    }
    
    .lessons-grid--mini {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .related-news--grid .related-news__grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .header__top {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .header__right {
        width: 100%;
        justify-content: space-between;
    }
    
    .nav {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .nav__list {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    
    .nav__link {
        padding: 8px 12px;
        font-size: var(--font-size-sm);
    }
    
    .nav__actions {
        width: 100%;
    }
    
    .btn--add {
        width: 100%;
        justify-content: center;
    }
    
    .article-grid {
        grid-template-columns: 1fr;
    }
    
    .article-header__stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .article-actions__main {
        flex-direction: column;
        align-items: stretch;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .download-card {
        flex-direction: column;
        text-align: center;
    }
    
    .tags-cloud {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .footer__content {
        flex-direction: column;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .footer__links {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .user-panel__dropdown,
    .auth-panel__dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        margin: 0;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    
    .user-panel__dropdown.show,
    .auth-panel__dropdown.show {
        transform: translateY(0);
    }
    
    .user-panel__name {
        display: none;
    }
    
    .auth-panel__footer {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-xs);
    }
    
    .lessons-grid--list .lesson-card {
        grid-template-columns: 1fr;
        grid-template-rows: 200px 1fr;
    }
    
    .lessons-grid--list .lesson-card__image {
        height: 200px;
        min-height: auto;
    }
    
    .lessons-grid--grid,
    .lessons-grid--mini {
        grid-template-columns: 1fr;
    }
    
    .related-news__title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-md);
    }
    
    .related-news--list .related-card {
        flex-direction: column;
    }
    
    .related-news--list .related-card__image {
        width: 100%;
        height: 120px;
    }
    
    .related-news--grid .related-news__grid {
        grid-template-columns: 1fr;
    }
    
    .related-news--compact .related-card {
        flex-direction: row;
    }
    
    .related-news--compact .related-card__image {
        width: 60px;
        height: 60px;
    }
    
    .comment__header {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .comment__content {
        margin-left: 0;
    }
    
    .comment__actions {
        justify-content: space-between;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .captcha-section {
        flex-direction: column;
    }
    
    .user-profile__main {
        flex-direction: column;
        text-align: center;
    }
    
    .user-profile__meta {
        justify-content: center;
    }
    
    .user-profile__actions {
        width: 100%;
        justify-content: center;
    }
    
    .user-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .user-info-grid {
        grid-template-columns: 1fr;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .form-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .profile-edit .captcha {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 14px;
    }
    
    .container {
        padding: 0 var(--spacing-xs);
    }
    
    .header__controls {
        gap: var(--spacing-xs);
    }
    
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
    
    .font-btn {
        padding: 6px 8px;
        min-width: 32px;
    }
    
    .article-header__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .article-difficulty {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .nav__link {
        padding: 8px 12px;
        font-size: var(--font-size-sm);
    }
    
    .nav__icon {
        width: 14px;
        height: 14px;
    }
    
    .related-news {
        margin: var(--spacing-lg) 0;
    }
    
    .related-news__title {
        font-size: var(--font-size-base);
    }
    
    .related-card__content {
        padding: var(--spacing-sm);
    }
    
    .related-card__title {
        font-size: var(--font-size-sm);
    }
    
    .related-card__excerpt {
        font-size: var(--font-size-sm);
    }
    
    .related-news--compact .related-card {
        padding: var(--spacing-xs);
    }
    
    .related-news--compact .related-card__image {
        width: 50px;
        height: 50px;
    }
    
    .user-stats {
        grid-template-columns: 1fr;
    }
    
    .user-profile__group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .profile-edit {
        margin-top: var(--spacing-lg);
    }
    
    .profile-edit__header {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .profile-edit .form-label {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .profile-edit input[type="text"],
    .profile-edit input[type="email"],
    .profile-edit textarea {
        padding: 10px 12px;
    }
    
    .profile-edit .btn--large {
        padding: 12px 20px;
    }
}

/* Обновленные стили для view-controls */
.view-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--bg-secondary);
    padding: 6px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.view-controls-container {
    margin-bottom: var(--spacing-lg);
}

.view-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.view-buttons {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.view-controls__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto; /* Теперь работает, так как .view-controls - flex */
}

.view-buttons {
    display: flex;
    gap: 2px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.view-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn:hover {
    background: var(--bg-accent);
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--accent-color);
    color: white;
}

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

/* Стили для user-profile__actions */
.user-profile__actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: var(--spacing-md);
}

.user-profile__actions .btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 500;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.user-profile__actions .btn--primary {
    background: var(--accent-color);
    color: white;
}

.user-profile__actions .btn--primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.user-profile__actions .btn--outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.user-profile__actions .btn--outline:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.user-profile__actions .btn--small {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
}

/* Стили для stat-card ссылок */
.stat-card a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.stat-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent-color);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition);
    margin-top: var(--spacing-xs);
}

.stat-card__link:hover {
    color: var(--accent-hover);
    transform: translateX(2px);
}

/* Стили для rss-card ссылок */
.rss-card__content a {
    color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-accent);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.rss-card__content a:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

/* Стили для form-grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    margin-bottom: 0;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
    font-family: inherit;
    font-size: var(--font-size-base);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* Обновленные стили для карточек статей */
.lesson-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.lesson-card__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.lesson-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

.lesson-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--bg-accent);
    flex-shrink: 0;
}

.lesson-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lesson-card:hover .lesson-card__image img {
    transform: scale(1.05);
}

.lesson-card__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
    background: var(--bg-accent);
    flex-direction: column;
    gap: var(--spacing-xs);
}

.lesson-card__image-placeholder i {
    font-size: 2rem;
    opacity: 0.5;
}

/* Обновленные бейджи категорий */
.lesson-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 2;
}

.lesson-card__category i {
    width: 14px;
    text-align: center;
    font-size: 12px;
}

/* Цвета категорий */
.lesson-card__category--1 {
    background: linear-gradient(135deg, var(--excel-primary), var(--excel-secondary));
    color: white;
}

.lesson-card__category--7 {
    background: linear-gradient(135deg, var(--word-primary), var(--word-secondary));
    color: white;
}

.lesson-card__category--8 {
    background: linear-gradient(135deg, var(--powerpoint-primary), var(--powerpoint-secondary));
    color: white;
}

.lesson-card__category--9 {
    background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
    color: white;
}

/* Обновленные бейджи файлов и видео */
.lesson-card__file-badge,
.lesson-card__video-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: var(--bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 2;
    transition: var(--transition);
}

.lesson-card__file-badge:hover,
.lesson-card__video-badge:hover {
    transform: scale(1.1);
}

.lesson-card__file-badge {
    color: var(--success);
    background: rgba(40, 167, 69, 0.1);
}

.lesson-card__video-badge {
    color: var(--danger);
    background: rgba(220, 53, 69, 0.1);
}

.lesson-card__file-badge i,
.lesson-card__video-badge i {
    font-size: 14px;
}

/* Контент карточки */
.lesson-card__content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--spacing-sm);
}

.lesson-card__title {
    margin: 0;
    line-height: 1.4;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.lesson-card__title a {
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lesson-card__title a:hover {
    color: var(--accent-color);
}

.lesson-card__excerpt {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

/* Мета-информация */
.lesson-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--border-light);
}

.lesson-card__info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    flex-wrap: wrap;
}

.lesson-card__info time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lesson-card__info [aria-hidden="true"] {
    color: var(--border-color);
}

/* Обновленная система рейтинга */
.like-dislike-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.likes-count,
.dislikes-count {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius);
    transition: var(--transition);
    font-weight: 500;
}

.likes-count {
    color: var(--success);
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.dislikes-count {
    color: var(--danger);
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.rating-score {
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-accent);
    padding: 4px 8px;
    border-radius: var(--radius);
    min-width: 32px;
    text-align: center;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-light);
}

/* Бейджи сложности */
.lesson-card__difficulty {
    margin: 0;
}

.difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 1px solid transparent;
}

.difficulty-badge--beginner {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border-color: rgba(40, 167, 69, 0.3);
}

.difficulty-badge--intermediate {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
}

.difficulty-badge--advanced {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.3);
}

.difficulty-badge--expert {
    background: rgba(111, 66, 193, 0.15);
    color: #6f42c1;
    border-color: rgba(111, 66, 193, 0.3);
}

/* Стили для разных режимов отображения */

.lessons-grid--grid .lesson-card__image {
    height: 160px;
}

.lessons-grid--mini .lesson-card__image {
    height: 120px;
}

.lessons-grid--mini .lesson-card__title {
    font-size: var(--font-size-base);
    -webkit-line-clamp: 2;
}

.lessons-grid--mini .lesson-card__excerpt {
    display: none;
}

.lessons-grid--mini .lesson-card__meta {
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: flex-start;
}

.lessons-grid--mini .lesson-card__info {
    gap: var(--spacing-xs);
}

.lessons-grid--mini .like-dislike-rating {
    gap: var(--spacing-xs);
}

/* Индикатор новых статей */
.lesson-card--new {
    position: relative;
}

.lesson-card--new::before {
    content: 'NEW';
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--danger);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 700;
    z-index: 3;
    animation: pulse 2s infinite;
}

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

/* Адаптивность */
@media (max-width: 768px) {
    .lessons-grid--list .lesson-card {
        flex-direction: column;
    }
    
    .lessons-grid--list .lesson-card__image {
        width: 100%;
        height: 160px;
    }
    
    .lesson-card__meta {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .lesson-card__info {
        gap: var(--spacing-xs);
    }
    
    .like-dislike-rating {
        gap: var(--spacing-xs);
    }
    
    .lesson-card__category {
        top: 8px;
        left: 8px;
        font-size: var(--font-size-sm);
        padding: 4px 8px;
    }
    
    .lesson-card__file-badge,
    .lesson-card__video-badge {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .lesson-card__content {
        padding: var(--spacing-sm);
    }
    
    .lesson-card__title {
        font-size: var(--font-size-base);
    }
    
    .lesson-card__excerpt {
        font-size: var(--font-size-sm);
    }
    
    .lesson-card__info {
        font-size: var(--font-size-sm);
    }
    
    .like-dislike-rating {
        font-size: var(--font-size-sm);
    }
}

/* Стили для страницы добавления статей */
.add-news-page {
    padding: var(--spacing-xl) 0;
    background: var(--bg-secondary);
    min-height: 100vh;
}

.add-news-header {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    text-align: center;
}

.add-news-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.add-news-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: 0;
}

.addform {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* Форма добавления */
.ui-form {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    position: relative;
}

.form-group label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.form-group label.imp::after {
    content: '*';
    color: var(--danger);
    font-weight: 700;
    margin-left: 2px;
}

/* Поля ввода */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
    transition: var(--transition);
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Выбор категории */
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 48px;
}

/* Кнопка добавления опроса */
.addvote-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px 16px;
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}

.addvote-toggle:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.plus_icon.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--accent-color);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: 1;
    transition: var(--transition);
}

.addvote-toggle:hover .plus_icon.circle {
    background: white;
    color: var(--accent-color);
    transform: rotate(90deg);
}

/* Блок опроса */
.addvote {
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    animation: slideDown 0.3s ease;
}

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

.addvote .form-group {
    margin-bottom: var(--spacing-md);
}

.addvote .form-group:last-child {
    margin-bottom: 0;
}

/* Чекбоксы */
.form-check-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    margin-top: var(--spacing-xs);
    transition: var(--transition);
}

.form-check-label:hover {
    color: var(--text-primary);
}

.form-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.form-check-input:checked {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.form-check-input:checked::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-check-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

/* WYSIWYG редакторы */
.editor-wrapper {
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.editor-wrapper:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

.editor-header {
    background: var(--bg-accent);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.editor-toolbar {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.editor-toolbar button {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    cursor: pointer;
    color: var(--text-primary);
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.editor-toolbar button:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.editor-body {
    background: var(--bg-primary);
    min-height: 200px;
    padding: var(--spacing-md);
}

.editor-body textarea {
    width: 100%;
    min-height: 180px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: 1.6;
    resize: vertical;
    outline: none;
}

/* Дополнительные поля */
.xfields-section {
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.xfields-section .form-group {
    margin-bottom: var(--spacing-md);
}

.xfields-section .form-group:last-child {
    margin-bottom: 0;
}

/* Капча */
.c-captcha {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-accent);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.c-captcha img {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.c-captcha input {
    flex: 1;
    min-width: 200px;
}

/* reCAPTCHA */
.recaptcha-wrapper {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--bg-accent);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    text-align: center;
}

/* Кнопки отправки */
.form_submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn-big {
    padding: 16px 32px;
    font-size: var(--font-size-lg);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-primary {
    background: var(--accent-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

.btn-border {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-border:hover:not(:disabled) {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Сообщения и подсказки */
.form-hint {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: 4px;
}

.form-required {
    color: var(--danger);
    font-weight: 700;
}

.grey {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: var(--spacing-lg) 0 0 0;
    padding: var(--spacing-md);
    background: var(--bg-accent);
    border-radius: var(--radius);
    border-left: 4px solid var(--accent-color);
}

/* Администраторские опции */
.admin_checkboxs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
}

.admin_checkboxs .form-check-label {
    margin-top: 0;
}

/* Анимации загрузки */
.form-loading {
    position: relative;
    pointer-events: none;
}

.form-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Валидация */
.form-group input:invalid:not(:focus):not(:placeholder-shown) {
    border-color: var(--danger);
}

.form-group input:valid:not(:focus):not(:placeholder-shown) {
    border-color: var(--success);
}

.error-message {
    color: var(--danger);
    font-size: var(--font-size-sm);
    margin-top: 4px;
    display: none;
}

.form-group input:invalid:not(:focus):not(:placeholder-shown) + .error-message {
    display: block;
}

/* Предпросмотр */
.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: var(--spacing-xl);
}

.preview-modal.show {
    display: flex;
}

.preview-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.preview-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.preview-close:hover {
    background: var(--danger);
    transform: scale(1.1);
}

/* Адаптивность */
@media (max-width: 768px) {
    .add-news-page {
        padding: var(--spacing-lg) 0;
    }
    
    .add-news-header {
        padding: var(--spacing-lg);
    }
    
    .addform {
        padding: var(--spacing-lg);
    }
    
    .add-news-title {
        font-size: var(--font-size-xl);
    }
    
    .form_submit {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form_submit .btn {
        width: 100%;
        justify-content: center;
    }
    
    .c-captcha {
        flex-direction: column;
        align-items: stretch;
    }
    
    .c-captcha input {
        min-width: auto;
    }
    
    .preview-content {
        padding: var(--spacing-lg);
        margin: var(--spacing-md);
    }
    
    .editor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .editor-toolbar {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .add-news-header {
        padding: var(--spacing-md);
    }
    
    .addform {
        padding: var(--spacing-md);
    }
    
    .add-news-title {
        font-size: var(--font-size-lg);
    }
    
    .add-news-subtitle {
        font-size: var(--font-size-base);
    }
    
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group textarea,
    .form-group select {
        padding: 12px 14px;
    }
    
    .btn-big {
        padding: 14px 24px;
        font-size: var(--font-size-base);
    }
    
    .addvote {
        padding: var(--spacing-md);
    }
    
    .xfields-section {
        padding: var(--spacing-md);
    }
}

/* Темная тема специфичные стили */
.theme--dark .editor-wrapper {
    background: var(--bg-primary);
}

.theme--dark .editor-toolbar button {
    background: var(--bg-secondary);
}

.theme--dark .form-check-input {
    background: var(--bg-primary);
}

.theme--dark .form-check-input:checked {
    background: var(--accent-color);
}

/* Состояния успеха */
.form-success {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    display: none;
}

.form-success.show {
    display: block;
    animation: slideInUp 0.3s ease;
}

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

/* Прогресс бар */
.form-progress {
    width: 100%;
    height: 4px;
    background: var(--bg-accent);
    border-radius: 2px;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.form-progress__bar {
    height: 100%;
    background: var(--accent-color);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

/* Компактный стиль для кнопки добавления опроса */
.form-group--vote-toggle {
    margin: var(--spacing-md) 0;
    padding: 0;
}

.vote-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-base);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.vote-toggle-btn:hover {
    background: var(--accent-color);
    color: white !important;
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--accent-color-rgb), 0.25);
}

/* Иконка плюса */
.plus_icon.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
}

.vote-toggle-btn:hover .plus_icon.circle {
    background: white;
    color: var(--accent-color);
    transform: rotate(90deg) scale(1.1);
}

/* Статус опроса */
.vote-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 8px;
    background: var(--bg-accent);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
}

.vote-status--active {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success);
}

.vote-status--inactive {
    background: rgba(108, 117, 125, 0.1);
    color: var(--gray-600);
}

/* Блок опроса */
.addvote {
    background: linear-gradient(135deg, var(--bg-accent), var(--bg-primary));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin: var(--spacing-md) 0;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.addvote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-color);
}

/* Стили для улучшенного редактора полного описания */
.form-group--full-editor {
    margin: var(--spacing-xl) 0;
}

.editor-section {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow);
}

.editor-section:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1),
                var(--shadow-lg);
    transform: translateY(-2px);
}

/* Заголовок редактора */
.editor-header {
    background: linear-gradient(135deg, var(--bg-accent), var(--bg-secondary));
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.editor-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
}

.editor-title__icon {
    width: 24px;
    height: 24px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.editor-title__text {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.editor-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Статус редактора */
.editor-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.status-badge--success {
    background: rgba(40, 167, 69, 0.1);
    border-color: var(--success);
    color: var(--success);
}

.status-badge--warning {
    background: rgba(255, 193, 7, 0.1);
    border-color: var(--warning);
    color: var(--warning);
}

/* Контейнер редактора */
.editor-container {
    position: relative;
    background: var(--bg-primary);
}

/* Кастомные стили для TinyMCE */
.tox-tinymce {
    border: none !important;
    border-radius: 0 !important;
    background: var(--bg-primary) !important;
}

.tox-editor-container {
    background: var(--bg-primary) !important;
}

.tox-toolbar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--spacing-sm) !important;
}

.tox-tbtn {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease !important;
}

.tox-tbtn:hover {
    color: white !important;
    border-color: var(--accent-color) !important;
    transform: translateY(-1px);
    cursor:pointer;
}

.tox-tbtn--enabled {
    background: var(--accent-color) !important;
    color: white !important;
    border-color: var(--accent-color) !important;
}

.tox-edit-area {
    border: none !important;
}

.tox-edit-area__iframe {
    background: var(--bg-primary) !important;
}

/* Контент редактора */
.mce-content-body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.7 !important;
    padding: var(--spacing-lg) !important;
    min-height: 400px !important;
}

.mce-content-body p {
    margin-bottom: var(--spacing-md) !important;
}

.mce-content-body h2,
.mce-content-body h3,
.mce-content-body h4 {
    color: var(--text-primary) !important;
    margin: var(--spacing-lg) 0 var(--spacing-md) !important;
}

.mce-content-body blockquote {
    border-left: 4px solid var(--accent-color) !important;
    padding-left: var(--spacing-md) !important;
    margin: var(--spacing-lg) 0 !important;
    font-style: italic !important;
    color: var(--text-secondary) !important;
}

/* Статус бар */
.tox-statusbar {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
}

.tox-statusbar__path-item {
    color: var(--text-secondary) !important;
    font-size: var(--font-size-sm) !important;
}

.tox-statusbar__wordcount {
    color: var(--text-muted) !important;
    font-size: var(--font-size-sm) !important;
}

/* Панель инструментов редактора */
.editor-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-accent);
    border-top: 1px solid var(--border-color);
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.toolbar-btn:hover {
    background: var(--accent-color);
    color: white !important;
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.toolbar-btn--primary {
    background: var(--accent-color);
    color: white !important;
    border-color: var(--accent-color);
}

.toolbar-btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: white !important;
}

/* Счетчик символов */
.character-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-accent);
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}

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

.counter-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
}

.counter-stat--warning {
    color: var(--warning);
}

.counter-stat--danger {
    color: var(--danger);
}

.counter-progress {
    width: 100px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.counter-progress__bar {
    height: 100%;
    background: var(--success);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.counter-progress__bar--warning {
    background: var(--warning);
}

.counter-progress__bar--danger {
    background: var(--danger);
}

/* Подсказки для редактора */
.editor-hints {
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(var(--info-rgb), 0.1);
    border-top: 1px solid var(--info);
}

.editor-hints__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--info);
    margin-bottom: var(--spacing-xs);
}

.editor-hints__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.editor-hints__item {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.editor-hints__item::before {
    content: '•';
    color: var(--info);
    font-weight: bold;
}

/* Быстрые действия */
.quick-actions-panel {
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.quick-actions__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-sm);
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.quick-action-btn:hover {
    background: var(--accent-color);
    color: white !important;
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.quick-action-btn__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.quick-action-btn__text {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Исправление для темной темы */
.theme--dark .toolbar-btn,
.theme--dark .quick-action-btn {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-100);
}

.theme--dark .toolbar-btn:hover,
.theme--dark .quick-action-btn:hover {
    background: var(--accent-color);
    color: white !important;
    border-color: var(--accent-color);
}

/* Анимации */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--accent-color-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0);
    }
}

.editor-section--focus {
    animation: pulse-glow 2s infinite;
}

/* Темная тема для редактора */
.theme--dark .tox-tinymce {
    background: var(--gray-800) !important;
}

.theme--dark .tox-toolbar {
    background: var(--gray-700) !important;
}

.theme--dark .tox-tbtn {
    background: var(--gray-600) !important;
    border-color: var(--gray-500) !important;
}

.theme--dark .mce-content-body {
    background: var(--gray-800) !important;
    color: var(--gray-100) !important;
}

/* Адаптивность */
@media (max-width: 768px) {
    .editor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    .editor-status {
        width: 100%;
        justify-content: space-between;
    }
    
    .editor-toolbar-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .character-counter {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .counter-stats {
        justify-content: center;
    }
    
    .quick-actions__grid {
        grid-template-columns: 1fr;
    }
    
    .tox-toolbar {
        padding: var(--spacing-xs) !important;
    }
    
    .tox-tbtn {
        margin: 2px !important;
    }
}

@media (max-width: 480px) {
    .editor-section {
        margin: var(--spacing-md) 0;
    }
    
    .editor-title {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .status-badge {
        font-size: var(--font-size-xs);
        padding: 4px 8px;
    }
    
    .toolbar-btn {
        padding: 6px 10px;
        font-size: var(--font-size-xs);
    }
    
    .mce-content-body {
        padding: var(--spacing-md) !important;
        min-height: 300px !important;
    }
}

/* Дополнительные улучшения */
.editor-section--collapsed .editor-container {
    display: none;
}

.editor-section--collapsed .editor-header {
    border-bottom: none;
}

.toggle-editor {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: var(--transition);
}

.toggle-editor:hover {
    color: var(--accent-hover);
}

/* Индикатор загрузки */
.editor-loading {
    position: relative;
}

.editor-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--bg-primary-rgb), 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.editor-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 11;
}

/* Исправления для счетчиков */
.counter-stat--success {
    color: var(--success) !important;
}

.counter-stat--warning {
    color: var(--warning) !important;
}

.counter-stat--danger {
    color: var(--danger) !important;
}

.counter-progress__bar--success {
    background: var(--success) !important;
}

.counter-progress__bar--warning {
    background: var(--warning) !important;
}

.counter-progress__bar--danger {
    background: var(--danger) !important;
}

/* Убедитесь, что кнопки имеют правильный тип */
button[type="button"] {
    border: none;
    font-family: inherit;
    font-size: inherit;
}

/* Исправление для предотвращения перехода по # */
a[href="#"] {
    cursor: pointer;
    text-decoration: none;
}

/* Исправление кнопок TinyMCE */
.tox-tbtn {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

.tox-tbtn:hover {
    color: white !important;
    fill: white !important;
}

.tox-tbtn--enabled {
    color: white !important;
    fill: white !important;
}

/* Убедимся, что SVG иконки наследуют цвет */
.tox-tbtn svg {
    fill: currentColor !important;
}

.tox-tbtn:hover svg {
    fill: currentColor !important;
}

/* Компактный стиль для кнопки добавления опроса */
.form-group--vote-toggle {
    margin: var(--spacing-md) 0;
    padding: 0;
}

.vote-toggle-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.vote-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-base);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.vote-toggle-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.1), transparent);
    transition: left 0.6s ease;
}

.vote-toggle-btn:hover::before {
    left: 100%;
}

.vote-toggle-btn:hover {
    background: var(--accent-color);
    color: white !important;
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--accent-color-rgb), 0.25);
}

.vote-toggle-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.3);
}

/* Иконка плюса */
.plus_icon.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
}

.plus_icon.circle span {
    display: block;
    transition: transform 0.3s ease;
    line-height: 1;
}

.vote-toggle-btn:hover .plus_icon.circle {
    background: white;
    color: var(--accent-color);
    transform: rotate(90deg) scale(1.1);
}

.vote-toggle-btn:hover .plus_icon.circle span {
    transform: rotate(-90deg);
}

/* Статус опроса */
.vote-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 8px;
    background: var(--bg-accent);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
}

.vote-status--active {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success);
}

.vote-status--inactive {
    background: rgba(108, 117, 125, 0.1);
    color: var(--gray-600);
}

/* Подсказка на одной строке */
.vote-hint {
    flex: 1;
    min-width: 200px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 8px 12px;
    background: var(--bg-accent);
    border-radius: var(--radius);
    border-left: 3px solid var(--info);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.vote-hint strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Состояние когда опрос открыт */
.addvote:not([style*="display: none"]) ~ .form-group--vote-toggle .vote-toggle-btn,
.addvote[style*="display: block"] ~ .form-group--vote-toggle .vote-toggle-btn {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.addvote:not([style*="display: none"]) ~ .form-group--vote-toggle .plus_icon.circle,
.addvote[style*="display: block"] ~ .form-group--vote-toggle .plus_icon.circle {
    background: white;
    color: var(--success);
    transform: rotate(45deg);
}

.addvote:not([style*="display: none"]) ~ .form-group--vote-toggle .plus_icon.circle span,
.addvote[style*="display: block"] ~ .form-group--vote-toggle .plus_icon.circle span {
    transform: rotate(-45deg);
}

/* Анимация пульсации при наведении */
.plus_icon.circle::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

.vote-toggle-btn:hover .plus_icon.circle::after {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .vote-toggle-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .vote-hint {
        min-width: auto;
        text-align: center;
    }
    
    .vote-toggle-btn {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .vote-toggle-btn {
        padding: 8px 12px;
        font-size: var(--font-size-sm);
    }
    
    .plus_icon.circle {
        width: 18px;
        height: 18px;
        font-size: 12px;
    }
    
    .vote-hint {
        font-size: var(--font-size-xs);
        padding: 6px 10px;
    }
}

/* Темная тема */
.theme--dark .vote-toggle-btn {
    background: var(--bg-secondary);
    border-color: var(--gray-600);
}

.theme--dark .vote-toggle-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.theme--dark .vote-hint {
    background: var(--gray-700);
    border-left-color: var(--info);
}

/* Компактные стили для фиксированной панели */
.sticky-nav .theme-toggle {
    width: 36px;
    height: 36px;
}

.sticky-nav .font-controls {
    padding: 1px;
}

.sticky-nav .font-btn {
    padding: 6px 8px;
    min-width: 32px;
    font-size: var(--font-size-sm);
}

.sticky-nav .user-panel__btn,
.sticky-nav .auth-panel__btn {
    padding: 8px 12px;
    font-size: var(--font-size-sm);
}

.sticky-nav .user-panel__name {
    display: none;
}

.sticky-nav .user-panel__avatar {
    width: 28px;
    height: 28px;
}

.sticky-nav .auth-panel__btn {
    padding: 8px 14px;
}

/* Анимация появления */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sticky-nav.active {
    animation: slideDown 0.3s ease-out;
}

/* Логотип в фиксированной навигации (опционально) */
.sticky-nav .sticky-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    margin-right: auto;
}

.sticky-nav .sticky-logo__text {
    font-size: var(--font-size-lg);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

/* Адаптивность */
@media (max-width: 768px) {
    .sticky-nav .header__controls {
        gap: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .sticky-nav .theme-toggle {
        width: 32px;
        height: 32px;
    }
    
    .sticky-nav .font-btn {
        padding: 4px 6px;
        min-width: 28px;
        font-size: var(--font-size-xs);
    }
    
    .sticky-nav .user-panel__btn,
    .sticky-nav .auth-panel__btn {
        padding: 6px 10px;
    }
    
    .sticky-nav .sticky-logo {
        display: none;
    }
}

@media (max-width: 480px) {
    .sticky-nav .header__controls {
        justify-content: space-between;
    }
    
    .sticky-nav .font-controls {
        display: none;
    }
}

/* Плавный скролл для всего документа */
html {
    scroll-padding-top: 80px;
}

/* Дополнительные улучшения */
.sticky-nav .header__controls > * {
    flex-shrink: 0;
}

/* Индикатор прокрутки */
.scroll-indicator {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--border-color);
    overflow: hidden;
}

.scroll-indicator__progress {
    height: 100%;
    background: var(--accent-color);
    width: 0%;
    transition: width 0.1s ease;
}
/* Оригинальные классы DLE для совместимости */
.box.berrors.fix_grid {
    background: none;
    border: none;
    padding: 0;
    margin: var(--spacing-lg) 0;
}

/* Новые стили для инфо-блока */
.info-block {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    animation: slideIn 0.4s ease;
}

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

/* Автоматическое определение типа сообщения */
.info-block--auto {
    border-left: 4px solid var(--info);
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.05), rgba(23, 162, 184, 0.02));
}

.info-block--auto .info-block__icon {
    color: var(--info);
}

/* Определение типа по тексту через CSS - если можно добавить классы на сервере */
.info-block--success {
    border-left-color: var(--success);
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.05), rgba(40, 167, 69, 0.02));
}

.info-block--success .info-block__icon {
    color: var(--success);
}

.info-block--error {
    border-left-color: var(--danger);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05), rgba(220, 53, 69, 0.02));
}

.info-block--error .info-block__icon {
    color: var(--danger);
}

.info-block--warning {
    border-left-color: var(--warning);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.05), rgba(255, 193, 7, 0.02));
}

.info-block--warning .info-block__icon {
    color: var(--warning);
}

/* Стили для элементов внутри */
.info-block__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.info-block__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-block__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.info-block__body {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Стили для ссылок в {error} */
.info-block__body a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    position: relative;
    padding: 0 2px;
    margin: 0 -2px;
    transition: color 0.3s ease;
}

.info-block__body a:hover {
    color: var(--accent-hover);
}

.info-block__body a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.info-block__body a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Кнопки-ссылки (если есть в {error}) */
.info-block__body a.btn-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent-color);
    color: white;
    border-radius: var(--radius);
    margin: 4px 8px 4px 0;
    font-weight: 500;
    border: none;
}

.info-block__body a.btn-like:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    color: white;
}

.info-block__body a.btn-like::after {
    display: none;
}

.info-block__body a.btn-like i {
    font-size: 0.875em;
}

/* Excel тема */
.info-block--excel {
    border-left-color: var(--excel-primary);
    background: linear-gradient(135deg, rgba(33, 115, 70, 0.05), rgba(33, 115, 70, 0.02));
}

.info-block--excel .info-block__icon {
    color: var(--excel-primary);
}

.info-block--excel .info-block__title {
    background: linear-gradient(135deg, var(--excel-primary), var(--excel-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Адаптивность */
@media (max-width: 768px) {
    .info-block {
        padding: var(--spacing-md);
        margin: var(--spacing-md) 0;
    }
    
    .info-block__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .info-block__icon {
        font-size: 1.25rem;
    }
    
    .info-block__title {
        font-size: var(--font-size-base);
    }
}

/* Темная тема */
.theme--dark .info-block {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.theme--dark .info-block--auto {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.1), rgba(23, 162, 184, 0.05));
}

.theme--dark .info-block--success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
}

.theme--dark .info-block--error {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
}

.theme--dark .info-block--warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
}

.theme--dark .info-block--excel {
    background: linear-gradient(135deg, rgba(33, 115, 70, 0.1), rgba(33, 115, 70, 0.05));
}
/* ====== СОВРЕМЕННОЕ МЕНЮ АВТОРИЗАЦИИ ====== */

/* Общие стили для обеих панелей */
.user-panel,
.auth-panel {
    position: relative;
}

/* ====== ПАНЕЛЬ ПОЛЬЗОВАТЕЛЯ (залогинен) ====== */

/* Кнопка пользователя */
.user-panel__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary);
    font-weight: 500;
}

.user-panel__btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Аватар */
.user-panel__avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
}

.user-panel__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.user-panel__btn:hover .user-panel__avatar-img {
    transform: scale(1.1);
}

/* Бейдж новых сообщений */
.user-panel__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: linear-gradient(135deg, #FF4757, #FF3838);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Выпадающее меню пользователя */
.user-panel__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    width: 360px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}

.user-panel__dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Информация пользователя */
.user-panel__info {
    padding: 24px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-panel__main {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.user-panel__avatar--large {
    width: 64px;
    height: 64px;
    border-width: 3px;
    border-color: var(--accent-color);
}

.user-panel__details {
    flex: 1;
}

.user-panel__username {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    background: linear-gradient(135deg, var(--text-primary), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.user-panel__group {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Прогресс бар уровня */
.level-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-bottom: 8px;
    overflow: hidden;
}

.level-bar__progress {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
    border-radius: 3px;
    transition: width 1s ease;
}

.level-bar__text {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

.level-bar__text strong {
    color: var(--accent-color);
}

/* Статистика */
.user-panel__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.user-panel__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.user-panel__stat:hover {
    background: rgba(var(--accent-color-rgb), 0.1);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.user-panel__stat-icon {
    margin-bottom: 6px;
    font-size: 16px;
    color: var(--accent-color);
}

.user-panel__stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.user-panel__stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Навигация пользователя */
.user-panel__nav {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-panel__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
}

.user-panel__link:hover {
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
    transform: translateX(4px);
}

.user-panel__link--admin {
    color: #FF4757;
}

.user-panel__link--admin:hover {
    background: rgba(255, 71, 87, 0.1);
}

.user-panel__link-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.user-panel__link-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.user-panel__nav-badge {
    background: linear-gradient(135deg, #FF4757, #FF3838);
    color: white;
    border-radius: 10px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

/* Действия пользователя */
.user-panel__actions {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.user-panel__actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.user-panel__actions .btn--primary {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    border: none;
}

.user-panel__actions .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--accent-color-rgb), 0.3);
}

.user-panel__actions .btn--outline {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-panel__actions .btn--outline:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-2px);
}

/* ====== ПАНЕЛЬ АВТОРИЗАЦИИ (не залогинен) ====== */

/* Кнопка входа */
.auth-panel__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(var(--accent-color-rgb), 0.2);
}

.auth-panel__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(var(--accent-color-rgb), 0.3);
}

/* Выпадающее окно авторизации */
.auth-panel__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    width: 380px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}

.auth-panel__dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Заголовок */
.auth-panel__header {
    padding: 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-panel__title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--text-primary), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-panel__subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Социальные кнопки */
.auth-panel__social {
    padding: 20px;
}

.auth-panel__social-title {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.auth-panel__social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.auth-panel__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.auth-panel__social-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

/* Цвета для социальных сетей */
.auth-panel__social-btn--vk:hover { background: #4C75A3; color: white; }
.auth-panel__social-btn--yandex:hover { background: #FFCC00; color: black; }
.auth-panel__social-btn--google:hover { background: #4285F4; color: white; }
.auth-panel__social-btn--ok:hover { background: #EE8208; color: white; }
.auth-panel__social-btn--fb:hover { background: #1877F2; color: white; }
.auth-panel__social-btn--mail:hover { background: #168DE2; color: white; }

/* Разделитель */
.auth-panel__divider {
    padding: 0 20px;
    text-align: center;
    position: relative;
}

.auth-panel__divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.auth-panel__divider span {
    background: rgba(255, 255, 255, 0.1);
    padding: 0 16px;
    color: var(--text-muted);
    font-size: 12px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
    border-radius: 8px;
}

/* Форма входа (улучшенная) */
.auth-panel__form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-panel__input-group {
    position: relative;
}

.auth-panel__input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.auth-panel__input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.auth-panel__input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.05);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

/* Кнопка входа */
.auth-panel__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.auth-panel__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--accent-color-rgb), 0.3);
}

.auth-panel__submit:active {
    transform: translateY(0);
}

/* Футер формы */
.auth-panel__footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.auth-panel__link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 8px;
}

.auth-panel__link:hover {
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
}

/* ====== АНИМАЦИИ И ЭФФЕКТЫ ====== */

/* Анимация появления */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-panel__dropdown,
.auth-panel__dropdown {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Эффект свечения для активных элементов */
.user-panel__btn:focus,
.auth-panel__btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.3);
}

/* Плавная анимация для иконки шеврона */
.user-panel__chevron {
    transition: transform 0.3s ease;
}

.user-panel__btn[aria-expanded="true"] .user-panel__chevron {
    transform: rotate(180deg);
}

/* ====== АДАПТИВНОСТЬ ====== */

@media (max-width: 768px) {
    /* Выпадающие окна на мобильных */
    .user-panel__dropdown,
    .auth-panel__dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        margin: 0;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .user-panel__dropdown.show,
    .auth-panel__dropdown.show {
        transform: translateY(0);
    }
    
    /* Скрываем имя пользователя на мобильных */
    .user-panel__name {
        display: none;
    }
    
    /* Уменьшаем ширину выпадающих окон */
    .user-panel__dropdown {
        width: 100%;
        max-width: 100%;
    }
    
    .auth-panel__dropdown {
        width: 100%;
        max-width: 100%;
    }
    
    /* Адаптивная статистика */
    .user-panel__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .user-panel__stat {
        padding: 10px;
    }
    
    .user-panel__stat-value {
        font-size: 18px;
    }
    
    /* Футер формы на мобильных */
    .auth-panel__footer {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .auth-panel__link {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* Еще более компактные стили для маленьких экранов */
    .user-panel__btn,
    .auth-panel__btn {
        padding: 8px 12px;
    }
    
    .user-panel__avatar {
        width: 32px;
        height: 32px;
    }
    
    .auth-panel__btn span {
        display: none;
    }
    
    .auth-panel__btn i {
        margin: 0;
    }
    
    .user-panel__info {
        padding: 20px;
    }
    
    .user-panel__main {
        flex-direction: column;
        text-align: center;
    }
    
    .user-panel__avatar--large {
        width: 80px;
        height: 80px;
    }
    
    .user-panel__details {
        text-align: center;
    }
    
    /* Социальные кнопки в 2 колонки */
    .auth-panel__social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.theme--light .auth-panel__input {
    border-radius:13px;
}
    
/* ====== ТЕМНЫЙ РЕЖИМ КОРРЕКЦИИ ====== */

.theme--dark .user-panel__btn {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme--dark .auth-panel__dropdown,
.theme--dark .user-panel__dropdown {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme--dark .user-panel__stat,
.theme--dark .auth-panel__social-btn,
.theme--dark .auth-panel__input {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
    border-radius:13px;
}

/* ====== ДОПОЛНИТЕЛЬНЫЕ УЛУЧШЕНИЯ ====== */

/* Индикатор онлайн статуса */
.online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #28a745;
    border: 2px solid var(--bg-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.3);
}

/* Загрузочное состояние для кнопок */
.user-panel__btn.loading,
.auth-panel__btn.loading {
    position: relative;
    color: transparent;
}

.user-panel__btn.loading::after,
.auth-panel__btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Эффект для новых уведомлений */
.user-panel__nav-badge {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
/* ===== FIX FOR STICKY ASIDE ===== */

/* Основной контейнер правой колонки */
.article-right-column {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

/* Обертка для aside (решает проблему с sticky) */
.article-sidebar-wrapper {
    flex: 1;
    position: relative;
    min-height: 0; /* Важно для flexbox */
}

/* Стили для aside */
.article-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* Скрываем полосу прокрутки если не нужно */
.article-sidebar::-webkit-scrollbar {
    width: 4px;
}

.article-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.article-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 2px;
}

/* Авторская карточка */
.author-card--outside {
    margin-bottom: var(--spacing-lg);
    flex-shrink: 0; /* Не сжимается */
}

/* Убираем inline-стили из aside */
.article-sidebar[style] {
    position: sticky !important;
    top: 20px !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 40px) !important;
}

/* Для мобильных устройств */
@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .article-right-column {
        order: -1;
    }

    .author-card {
        max-height: 150px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; /* Перенос на мобильных */
    }
    
    .author-card__top-row {
        display: flex;
        align-items: center;
        flex: 1; /* Занимает доступное пространство */
        min-width: 0; /* Для корректного обрезания текста */
    }
    
    .author-card__stats {
        display: flex;
        gap: 20px;
        white-space: nowrap;
        margin-left: 20px; /* Отступ от левой части */
    }
    
    .article-sidebar {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    .article-sidebar-wrapper {
        height: auto;
    }
}

/* Для планшетов */
@media (max-width: 1200px) {
    .article-sidebar {
        top: 15px;
        max-height: calc(100vh - 30px) !important;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    .article-sidebar {
        top: 10px;
        max-height: calc(100vh - 20px) !important;
    }
}

/* Фикс для Firefox */
@-moz-document url-prefix() {
    .article-sidebar {
        position: -moz-sticky;
    }
}
/* ====== СТИЛИ ДЛЯ СТРАНИЦЫ ТЕГОВ ====== */

/* Основной контейнер */
.box.story {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: var(--spacing-xl);
    overflow: hidden;
    transition: var(--transition);
}

.box.story:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.box_in {
    padding: var(--spacing-xl);
}

/* Заголовок страницы тегов */
.box.story .title.h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-xl);
    color: var(--text-primary);
    position: relative;
    padding-bottom: var(--spacing-sm);
    text-align: center;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.box.story .title.h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
}

/* Облако тегов */
.tag_list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px;
}

/* Базовые стили для всех тегов */
.tag_list span {
    display: inline-block;
    margin: 0;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tag_list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50px;
    border: 1px solid transparent;
    background: var(--bg-accent);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.tag_list a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.1), rgba(var(--accent-color-rgb), 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tag_list a:hover::before {
    opacity: 1;
}

.tag_list a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.15);
}

/* Размеры тегов в стиле Excel */
.clouds_xsmall a {
    font-size: 12px;
    padding: 4px 10px;
    margin: 2px;
    opacity: 0.8;
    background: linear-gradient(135deg, rgba(var(--gray-500-rgb), 0.1), rgba(var(--gray-500-rgb), 0.05));
}

.clouds_small a {
    font-size: 13px;
    padding: 5px 12px;
    margin: 3px;
    opacity: 0.85;
    background: linear-gradient(135deg, rgba(var(--gray-500-rgb), 0.12), rgba(var(--gray-500-rgb), 0.07));
}

.clouds_medium a {
    font-size: 14px;
    padding: 6px 14px;
    margin: 4px;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.15), rgba(var(--accent-color-rgb), 0.08));
}

.clouds_large a {
    font-size: 15px;
    padding: 7px 16px;
    margin: 5px;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.2), rgba(var(--accent-color-rgb), 0.12));
}

.clouds_xlarge a {
    font-size: 16px;
    padding: 8px 18px;
    margin: 6px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.25), rgba(var(--accent-color-rgb), 0.15));
}

/* Цветовые категории тегов (Excel-стиль) */
.tag_list a[href*="excel"],
.tag_list a[href*="Excel"] {
    background: linear-gradient(135deg, rgba(33, 115, 70, 0.15), rgba(33, 115, 70, 0.08));
    border-left: 3px solid var(--excel-primary);
    color: var(--excel-primary);
}

.tag_list a[href*="excel"]:hover,
.tag_list a[href*="Excel"]:hover {
    background: linear-gradient(135deg, rgba(33, 115, 70, 0.25), rgba(33, 115, 70, 0.15));
    border-color: var(--excel-primary);
    color: var(--excel-primary);
    box-shadow: 0 4px 12px rgba(33, 115, 70, 0.2);
}

.tag_list a[href*="word"],
.tag_list a[href*="Word"] {
    background: linear-gradient(135deg, rgba(43, 87, 154, 0.15), rgba(43, 87, 154, 0.08));
    border-left: 3px solid var(--word-primary);
    color: var(--word-primary);
}

.tag_list a[href*="word"]:hover,
.tag_list a[href*="Word"]:hover {
    background: linear-gradient(135deg, rgba(43, 87, 154, 0.25), rgba(43, 87, 154, 0.15));
    border-color: var(--word-primary);
    color: var(--word-primary);
    box-shadow: 0 4px 12px rgba(43, 87, 154, 0.2);
}

.tag_list a[href*="powerpoint"],
.tag_list a[href*="PowerPoint"] {
    background: linear-gradient(135deg, rgba(210, 71, 38, 0.15), rgba(210, 71, 38, 0.08));
    border-left: 3px solid var(--powerpoint-primary);
    color: var(--powerpoint-primary);
}

.tag_list a[href*="powerpoint"]:hover,
.tag_list a[href*="PowerPoint"]:hover {
    background: linear-gradient(135deg, rgba(210, 71, 38, 0.25), rgba(210, 71, 38, 0.15));
    border-color: var(--powerpoint-primary);
    color: var(--powerpoint-primary);
    box-shadow: 0 4px 12px rgba(210, 71, 38, 0.2);
}

.tag_list a[href*="microsoft"],
.tag_list a[href*="Microsoft"] {
    background: linear-gradient(135deg, rgba(0, 120, 215, 0.15), rgba(0, 120, 215, 0.08));
    border-left: 3px solid #0078d7;
    color: #0078d7;
}

.tag_list a[href*="microsoft"]:hover,
.tag_list a[href*="Microsoft"]:hover {
    background: linear-gradient(135deg, rgba(0, 120, 215, 0.25), rgba(0, 120, 215, 0.15));
    border-color: #0078d7;
    color: #0078d7;
    box-shadow: 0 4px 12px rgba(0, 120, 215, 0.2);
}

/* Эффект при наведении на теги Excel */
.tag_list a[href*="excel"]:hover::before,
.tag_list a[href*="Excel"]:hover::before {
    background: linear-gradient(135deg, rgba(33, 115, 70, 0.2), rgba(33, 115, 70, 0.1));
}

/* Эффект подсветки популярных тегов */
.clouds_xlarge a {
    animation: pulse-excel 3s infinite;
}

.clouds_large a {
    animation: pulse-glow 4s infinite;
}

@keyframes pulse-excel {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(33, 115, 70, 0.1);
    }
    50% {
        box-shadow: 0 4px 16px rgba(33, 115, 70, 0.2);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.9;
    }
}

/* Счетчик статей в теге (если будет добавлен) */
.tag-count {
    display: inline-block;
    background: var(--accent-color);
    color: white;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    transform: translateY(-1px);
}

/* Иконки для тегов (опционально) */
.tag_list a[href*="excel"]::before,
.tag_list a[href*="Excel"]::before {
    font-family: 'Font Awesome 5 Free';
    content: '📊';
    margin-right: 5px;
    font-size: 0.9em;
}

.tag_list a[href*="word"]::before,
.tag_list a[href*="Word"]::before {
    font-family: 'Font Awesome 5 Free';
    content: '📝';
    margin-right: 5px;
    font-size: 0.9em;
}

.tag_list a[href*="formul"]::before {
    font-family: 'Font Awesome 5 Free';
    content: '∑';
    margin-right: 5px;
    font-weight: bold;
}

.tag_list a[href*="таблиц"]::before {
    font-family: 'Font Awesome 5 Free';
    content: '📋';
    margin-right: 5px;
    font-size: 0.9em;
}

/* Статистика тегов */
.tag-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--bg-accent);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.tag-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.tag-stat__value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--accent-color);
}

.tag-stat__label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Поиск по тегам */
.tag-search {
    margin-bottom: var(--spacing-xl);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.tag-search__input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.tag-search__input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

.tag-search__input::placeholder {
    color: var(--text-muted);
}

/* Сортировка тегов */
.tag-sort {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.tag-sort__btn {
    padding: 8px 16px;
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.tag-sort__btn:hover,
.tag-sort__btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* Адаптивность */
@media (max-width: 768px) {
    .author-card {
        flex-direction: column;
        align-items: flex-start;
        max-height: none;
        gap: 15px;
    }
    
    .author-card__stats {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
    .box_in {
        padding: var(--spacing-lg);
    }
    
    .tag_list {
        gap: 8px;
    }
    
    .clouds_xsmall a {
        font-size: 11px;
        padding: 3px 8px;
    }
    
    .clouds_medium a {
        font-size: 12px;
        padding: 4px 10px;
    }
    
    .clouds_xlarge a {
        font-size: 14px;
        padding: 6px 14px;
    }
    
    .tag-stats {
        flex-direction: column;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .box_in {
        padding: var(--spacing-md);
    }
    
    .box.story .title.h1 {
        font-size: var(--font-size-xl);
    }
    
    .tag_list {
        gap: 6px;
    }
    
    .tag-sort {
        flex-direction: column;
        align-items: center;
    }
    
    .tag-sort__btn {
        width: 100%;
        max-width: 200px;
    }
}

/* Темная тема */
.theme--dark .tag_list a {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.theme--dark .tag_list a:hover {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.2), rgba(var(--accent-color-rgb), 0.1));
}

.theme--dark .tag-search__input {
    background: var(--bg-secondary);
}

/* Анимация появления тегов */
@keyframes tagAppear {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tag_list span {
    animation: tagAppear 0.3s ease backwards;
}

/* Эффект для нового тега */
.tag-new {
    position: relative;
}

.tag-new::after {
    content: 'NEW';
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--danger);
    color: white;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 700;
    z-index: 2;
}

/* Группировка тегов по категориям */
.tag-category {
    margin-bottom: var(--spacing-xl);
}

.tag-category__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.tag-category__title i {
    color: var(--accent-color);
}

/* Excel-стиль для самого популярного тега */
.tag-list__highlight {
    position: relative;
    z-index: 1;
}

.tag-list__highlight a {
    background: linear-gradient(135deg, var(--excel-primary), var(--excel-secondary));
    color: white !important;
    border: none;
    box-shadow: 0 4px 20px rgba(33, 115, 70, 0.3);
    position: relative;
    overflow: visible;
}

.tag-list__highlight a::after {
    content: '🔥';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 12px;
    animation: flame 1s infinite alternate;
}

@keyframes flame {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}
/* ====== КАРТОЧКА АВТОРА (ОБНОВЛЕННЫЙ ДИЗАЙН) ====== */

.author-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.author-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

/* Верхняя строка: аватар + имя + роль */
.author-card__top-row {
    display: flex;
    align-items: flex-start; /* Выравнивание по верху */
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* Аватар автора */
.author-card__avatar {
    position: relative;
    flex-shrink: 0;
    width: 60px; /* Уменьшили для компактности */
    height: 60px;
    margin-top: 4px; /* Чтобы выровнять с текстом */
}

.author-card__avatar a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--bg-primary);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
}

.author-card__avatar a:hover {
    transform: scale(1.05);
    border-color: var(--accent-color);
    box-shadow: 0 8px 25px rgba(var(--accent-color-rgb), 0.3);
}

.author-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.author-card__avatar a:hover img {
    transform: scale(1.1);
}

/* Блок информации справа от аватара */
.author-card__info {
    flex: 1;
    min-width: 0; /* Для правильного обрезания текста */
}

/* Имя и статус онлайн на одной строке */
.author-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: 6px;
}

.author-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.author-card__name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
    background: linear-gradient(135deg, var(--text-primary), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.author-card__name a:hover {
    color: var(--accent-color);
    -webkit-text-fill-color: var(--accent-color);
}

/* Роль автора - сразу после имени */
.author-card__role {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 2px;
    padding: 3px 8px;
    background: rgba(var(--accent-color-rgb), 0.1);
    border-radius: var(--radius);
    display: inline-block;
    border-left: 3px solid var(--accent-color);
    font-weight: 500;
}

/* Особые стили для ролей */
.author-card__role [author-group="1"] {
    color: var(--danger);
    font-weight: 600;
    background: rgba(220, 53, 69, 0.1);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    margin-left: 2px;
}

.author-card__role [author-group="2"] {
    color: var(--warning);
    font-weight: 600;
}

.author-card__role [author-group="3"] {
    color: var(--info);
    font-weight: 600;
}

/* Индикатор онлайн статуса */
.author-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    margin-left: auto; /* Прижимаем к правому краю */
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.author-card__status.online {
    color: var(--success);
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    cursor:help;
}

.author-card__status.online::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse-online 2s infinite;
}

.author-card__status.offline {
    color: var(--gray-600);
    background: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.author-card__status.offline::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--gray-600);
    border-radius: 50%;
}

@keyframes pulse-online {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Статистика автора - под всем этим */
.author-card__stats {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.author-card__stats a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    padding: 8px 12px;
    border-radius: var(--radius);
    min-width: 100px;
    background: var(--bg-accent);
    border: 1px solid var(--border-light);
}

.author-card__stats a:hover {
    background: var(--bg-primary);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.author-card__stats span {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    font-size: var(--font-size-base);
}

.author-card__stats a:hover span {
    color: var(--accent-color);
}

/* Дополнительные эффекты для карточки */
.author-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, transparent 50%, rgba(var(--accent-color-rgb), 0.05) 50%);
    border-radius: 0 0 0 100%;
    z-index: 0;
}

.author-card__top-row,
.author-card__stats {
    position: relative;
    z-index: 1;
}

/* Альтернативный вариант: роль как бейдж рядом с именем */
.author-card--compact .author-card__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: nowrap;
}

.author-card--compact .author-card__role {
    margin-top: 0;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    order: 2; /* После имени */
}

.author-card--compact .author-card__status {
    order: 3; /* В самый конец */
}

/* Медиазапросы для адаптивности */
@media (max-width: 768px) {
    .author-card {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    .author-card__top-row {
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-xs);
    }
    
    .author-card__avatar {
        width: 50px;
        height: 50px;
    }
    
    .author-card__name {
        font-size: var(--font-size-base);
    }
    
    .author-card__role {
        font-size: var(--font-size-xs);
        padding: 2px 6px;
    }
    
    .author-card__status {
        font-size: var(--font-size-xs);
        padding: 2px 8px;
    }
    
    .author-card__stats {
        gap: var(--spacing-md);
        padding-top: var(--spacing-sm);
    }
    
    .author-card__stats a {
        min-width: 80px;
        padding: 6px 10px;
    }
    
    .author-card__stats span {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 600px) {
    /* На очень узких экранах меняем раскладку */
    .author-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .author-card__status {
        margin-left: 0;
        align-self: flex-start;
    }
    
    .author-card__stats {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .author-card__stats a {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .author-card {
        margin: var(--spacing-md) 0;
    }
    
    .author-card__stats {
        gap: var(--spacing-xs);
        width: 100%;
    }
    
    .author-card__stats a {
        width: 100%;
        max-width: 180px;
    }
    
    /* Компактная версия для мобильных */
    .author-card--mobile-compact .author-card__top-row {
        align-items: center;
    }
    
    .author-card--mobile-compact .author-card__avatar {
        width: 45px;
        height: 45px;
    }
}

/* Темная тема */
.theme--dark .author-card {
    border-color: var(--gray-700);
}

.theme--dark .author-card__avatar a {
    border-color: var(--gray-700);
}

.theme--dark .author-card__stats {
    border-top-color: var(--gray-700);
}

.theme--dark .author-card__stats a {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.theme--dark .author-card__stats a:hover {
    background: var(--gray-700);
    border-color: var(--accent-color);
}

.theme--dark .author-card__role {
    background: rgba(var(--accent-color-rgb), 0.15);
}

/* Анимация появления */
@keyframes slideInAuthor {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.author-card {
    animation: slideInAuthor 0.4s ease;
}

/* Дополнительные варианты оформления */
.author-card--with-bio .author-card__bio {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--border-light);
}

.author-card--bordered {
    border-left-width: 4px;
}

.author-card--shadow-light {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Эффект выделения при наведении на всю карточку */
.author-card:hover .author-card__avatar a {
    border-color: var(--accent-color);
    box-shadow: 0 4px 20px rgba(var(--accent-color-rgb), 0.25);
}

.author-card:hover .author-card__stats a {
    background: var(--bg-primary);
}

/* Excel-стиль для карточки */
.author-card--excel {
    border-left-color: var(--excel-primary);
    background: linear-gradient(135deg, var(--bg-card), rgba(33, 115, 70, 0.05));
}

.author-card--excel .author-card__name a {
    background: linear-gradient(135deg, var(--excel-primary), var(--excel-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Дополнительная информация в тултипе */
.author-card__avatar {
    position: relative;
}

.author-card__avatar:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-900);
    color: white;
    padding: 6px 10px;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 0.2s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Стили для инпутов и селектов */
.theme--dark .mediaupload-row input.classic,
.theme--dark .mediaupload-row input[type="text"],
.theme--dark .upload-options input.classic,
.theme--dark .upload-options select {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.theme--dark .upload-options input.classic:focus,
.theme--dark .mediaupload-row input.classic:focus {
    border-color: var(--accent-color) !important;
    background: var(--bg-primary) !important;
}

/* Стили для чекбоксов и радиокнопок */
.theme--dark .form-check-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .form-check-input:checked {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Стили для файловых превью */
.theme--dark .file-preview-box,
.theme--dark .mediaupload-box {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.theme--dark .file-preview-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.theme--dark .file-preview-card:hover {
    border-color: var(--accent-color) !important;
    background: var(--bg-accent) !important;
}

.theme--dark .file-preview-card.active {
    border-color: var(--accent-color) !important;
    background: rgba(var(--accent-color-rgb), 0.1) !important;
}

.theme--dark .file-footer-bottom {
    background: var(--bg-accent) !important;
    border-top: 1px solid var(--border-color) !important;
}

.theme--dark .file-footer-bottom a {
    color: var(--text-secondary) !important;
}

.theme--dark .file-footer-bottom a:hover {
    color: var(--accent-color) !important;
}

/* Стили для кнопок */
.theme--dark .mediaupload-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

.theme--dark .mediaupload-footer .ui-button {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.theme--dark .mediaupload-footer .ui-button:hover {
    background: var(--bg-accent) !important;
}

.theme--dark #mediaupload-insert {
    background: var(--accent-color) !important;
    color: white !important;
}

.theme--dark #mediaupload-insert:hover {
    background: var(--accent-hover) !important;
}

/* Стили для TinyMCE редактора в темной теме */
.theme--dark .tox-edit-area__iframe {
    background: var(--bg-primary) !important;
}

.theme--dark .mce-content-body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.theme--dark .tox-sidebar-wrap {
    background: var(--bg-primary) !important;
}

.theme--dark .tox-edit-area {
    border: 1px solid var(--border-color) !important;
}

/* Исправление для loading-layer */
.theme--dark #loading-layer {
    background: rgba(0, 0, 0, 0.8) !important;
    color: var(--text-primary) !important;
}

.theme--dark #loading-layer.withouttext,
.theme--dark #loading-layer.withtext {
    background: rgba(0, 0, 0, 0.8) !important;
    color: var(--text-primary) !important;
}

/* Стили для цитат и спойлеров в темной теме */
.theme--dark .quote,
.theme--dark blockquote {
    background: var(--bg-secondary) !important;
    border-left-color: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

.theme--dark .title_quote {
    background: var(--bg-accent) !important;
    color: var(--text-primary) !important;
    border-left-color: var(--accent-color) !important;
}

.theme--dark .title_spoiler {
    background: var(--bg-accent) !important;
    color: var(--text-primary) !important;
}

.theme--dark .text_spoiler {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.theme--dark .scriptcode {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Стили для календаря в темной теме */
.theme--dark .calendar th {
    background: var(--bg-accent) !important;
    color: var(--text-primary) !important;
}

.theme--dark .calendar td {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.theme--dark .calendar td.weekday {
    background: var(--bg-primary) !important;
    color: var(--accent-color) !important;
}

/* Стили для прогресс-баров */
.theme--dark .voteprogress,
.theme--dark .pollprogress {
    background: var(--bg-secondary) !important;
}

/* Стили для PM (личных сообщений) */
.theme--dark .pm tbody > tr:hover {
    background: var(--bg-accent) !important;
}

.theme--dark .pm_list .pm_last_message,
.theme--dark .pm_list .pm_last_date,
.theme--dark .pm_list .pm_with_user {
    color: var(--text-secondary) !important;
}

/* Стили для выпадающих меню */
.theme--dark #dropmenudiv {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.theme--dark #dropmenudiv a:hover {
    background: var(--bg-accent) !important;
}

/* Стили для поиска */
.theme--dark #searchsuggestions {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.theme--dark #searchsuggestions a:hover {
    background: var(--bg-accent) !important;
}

/* Стили для кнопок редактора */
.theme--dark .bbcodes {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.theme--dark .bbcodes:hover {
    background: var(--bg-accent) !important;
}

/* Стили для полей ввода */
.theme--dark select,
.theme--dark textarea,
.theme--dark input[type="text"],
.theme--dark input[type="password"],
.theme--dark input[type="email"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark select:focus,
.theme--dark textarea:focus,
.theme--dark input[type="text"]:focus,
.theme--dark input[type="password"]:focus,
.theme--dark input[type="email"]:focus {
    border-color: var(--accent-color) !important;
    background: var(--bg-primary) !important;
}

/* Стили для капчи */
.theme--dark .c-captcha input {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Стили для кнопок в формах */
.theme--dark .btn {
    background: var(--accent-color) !important;
    color: white !important;
}

.theme--dark .btn:hover {
    background: var(--accent-hover) !important;
}

.theme--dark .btn-border {
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    background: transparent !important;
}

.theme--dark .btn-border:hover {
    background: var(--accent-color) !important;
    color: white !important;
}

/* Стили для полей XFields */
.theme--dark .xfields_table {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.theme--dark .file-box {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Стили для загрузки файлов */
.theme--dark .qq-upload-drop-area {
    background: rgba(255, 71, 71, 0.3) !important;
    border-color: var(--danger) !important;
}

.theme--dark .qq-upload-drop-area-active {
    background: rgba(255, 71, 71, 0.5) !important;
}

/* Стили для прогресс-бара загрузки */
.theme--dark .progress {
    background: var(--bg-secondary) !important;
}

.theme--dark .progress .progress-bar {
    background: var(--accent-color) !important;
}

/* Стили для уведомлений */
.theme--dark .DLEPush-notification.wrapper {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Стили для редактора комментариев */
.theme--dark .comments_author_field {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Исправление для двойного крестика в заголовке */
.theme--dark .ui-dialog-titlebar-close span.ui-button-text {
    display: none !important;
}

.theme--dark .ui-dialog-titlebar-close .ui-icon {
    background: none !important;
}

/* Создаем единый крестик */
.theme--dark .ui-dialog-titlebar-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.theme--dark .ui-dialog-titlebar-close::before,
.theme--dark .ui-dialog-titlebar-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: white;
    border-radius: 1px;
}

.theme--dark .ui-dialog-titlebar-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.theme--dark .ui-dialog-titlebar-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.theme--dark .ui-dialog-titlebar-close:hover::before,
.theme--dark .ui-dialog-titlebar-close:hover::after {
    background: #ffd700;
}

/* Стили для диалогового окна в темной теме */
.theme--dark .ui-dialog {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

.theme--dark .ui-dialog-content {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .ui-dialog-buttonpane {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

.theme--dark .ui-dialog-buttonset button:last-child {
    background: var(--accent-color) !important;
    color: white !important;
}

.theme--dark .ui-dialog-buttonset button:last-child:hover {
    background: var(--accent-hover) !important;
}

/* Стили для пользовательского диалога */
.theme--dark .dle-popup-userprofileadmin {
    background: var(--bg-card) !important;
}

.theme--dark .userinfo.clrfix {
    color: var(--text-primary) !important;
}

.theme--dark .userinfo li {
    border-bottom-color: var(--border-color) !important;
}

.theme--dark .userinfo li b {
    color: var(--accent-color) !important;
}

/* Стили для спойлеров */
.theme--dark .spoiler-body {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .spoiler-header {
    background: var(--bg-accent) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Стили для таблиц в статьях */
.theme--dark .article-body table {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .article-body table thead th {
    background: var(--bg-accent) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .article-body table tbody tr {
    border-color: var(--border-light) !important;
}

.theme--dark .article-body table tbody tr:hover {
    background: var(--bg-accent) !important;
}

/* Стили для рейтинга */
.theme--dark .ratingplus {
    color: var(--success) !important;
}

.theme--dark .ratingminus {
    color: var(--danger) !important;
}

.theme--dark .ratingzero {
    color: var(--gray-500) !important;
}

/* Стили для кнопок социальных сетей */
.theme--dark .social-share a {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .social-share a:hover {
    background: var(--bg-accent) !important;
}

/* Стили для пагинации */
.theme--dark .pagination a {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .pagination a:hover {
    background: var(--bg-accent) !important;
}

.theme--dark .pagination .active a {
    background: var(--accent-color) !important;
    color: white !important;
    border-color: var(--accent-color) !important;
}

/* Стили для меток времени */
.theme--dark time {
    color: var(--text-secondary) !important;
}

/* Стили для аватаров */
.theme--dark .avatar img {
    border-color: var(--border-color) !important;
    background: var(--bg-secondary) !important;
}

/* Стили для цитат в комментариях */
.theme--dark .comment-quote {
    background: var(--bg-secondary) !important;
    border-left-color: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

/* Стили для уведомлений об ошибках */
.theme--dark .error-notice {
    background: rgba(220, 53, 69, 0.1) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

/* Стили для успешных уведомлений */
.theme--dark .success-notice {
    background: rgba(40, 167, 69, 0.1) !important;
    border-color: var(--success) !important;
    color: var(--success) !important;
}

/* Стили для предупреждений */
.theme--dark .warning-notice {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}

/* Стили для информационных уведомлений */
.theme--dark .info-notice {
    background: rgba(23, 162, 184, 0.1) !important;
    border-color: var(--info) !important;
    color: var(--info) !important;
}

/* Стили для темной темы в формах добавления новостей */
.theme--dark .addform {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .ui-form input,
.theme--dark .ui-form textarea,
.theme--dark .ui-form select {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .ui-form input:focus,
.theme--dark .ui-form textarea:focus,
.theme--dark .ui-form select:focus {
    border-color: var(--accent-color) !important;
    background: var(--bg-primary) !important;
}

.theme--dark .addvote {
    background: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .editor-wrapper {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .editor-header {
    background: var(--bg-accent) !important;
    border-bottom-color: var(--border-color) !important;
}

.theme--dark .editor-toolbar button {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .editor-toolbar button:hover {
    background: var(--accent-color) !important;
    color: white !important;
    border-color: var(--accent-color) !important;
}

.theme--dark .xfields-section {
    background: var(--bg-accent) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .form_submit {
    border-top-color: var(--border-color) !important;
}

/* Стили для TinyMCE в темной теме */
.theme--dark .tox-tinymce {
    border-color: var(--border-color) !important;
    background: var(--bg-primary) !important;
}

.theme--dark .tox-toolbar__primary {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

.theme--dark .tox-tbtn {
    color: var(--text-primary) !important;
}

.theme--dark .tox-tbtn:hover {
    background: var(--bg-accent) !important;
}

.theme--dark .tox-tbtn--enabled {
    background: var(--accent-color) !important;
    color: white !important;
}

.theme--dark .tox-edit-area__iframe {
    background: var(--bg-primary) !important;
}

.theme--dark .tox-sidebar-wrap {
    background: var(--bg-primary) !important;
}

/* Стили для панели инструментов TinyMCE */
.theme--dark .tox .tox-toolbar,
.theme--dark .tox .tox-toolbar__overflow {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .tox .tox-toolbar__group {
    background: transparent !important;
}

.theme--dark .tox .tox-tbtn {
    background: transparent !important;
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

.theme--dark .tox .tox-tbtn:hover {
    background: var(--bg-accent) !important;
    color: var(--text-primary) !important;
}

.theme--dark .tox .tox-tbtn--enabled {
    background: var(--accent-color) !important;
    color: white !important;
    fill: white !important;
}

.theme--dark .tox .tox-tbtn svg {
    fill: currentColor !important;
}

/* Стили для статус-бара TinyMCE */
.theme--dark .tox .tox-statusbar {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.theme--dark .tox .tox-statusbar__path-item,
.theme--dark .tox .tox-statusbar__wordcount {
    color: var(--text-secondary) !important;
}

/* Стили для модальных окон TinyMCE */
.theme--dark .tox .tox-dialog {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .tox .tox-dialog__header {
    background: var(--accent-color) !important;
    color: white !important;
    border-bottom-color: var(--border-color) !important;
}

.theme--dark .tox .tox-dialog__title {
    color: white !important;
}

.theme--dark .tox .tox-dialog__body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.theme--dark .tox .tox-dialog__body-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.theme--dark .tox .tox-dialog__footer {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

.theme--dark .tox .tox-button {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .tox .tox-button:hover {
    background: var(--bg-accent) !important;
}

.theme--dark .tox .tox-button--secondary {
    background: var(--bg-secondary) !important;
}

.theme--dark .tox .tox-button--secondary:hover {
    background: var(--bg-accent) !important;
}

/* Стили для вкладок TinyMCE */
.theme--dark .tox .tox-tab {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .tox .tox-tab--active {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--bg-primary) !important;
}

/* Стили для полей ввода TinyMCE */
.theme--dark .tox .tox-textfield,
.theme--dark .tox .tox-textarea,
.theme--dark .tox .tox-selectfield select {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .tox .tox-textfield:focus,
.theme--dark .tox .tox-textarea:focus,
.theme--dark .tox .tox-selectfield select:focus {
    border-color: var(--accent-color) !important;
    background: var(--bg-primary) !important;
}

/* Стили для чекбоксов и радиокнопок TinyMCE */
.theme--dark .tox .tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked,
.theme--dark .tox .tox-radio__input:checked + .tox-radio__icons .tox-radio-icon__checked {
    color: var(--accent-color) !important;
}

/* Стили для палитры цветов */
.theme--dark .tox .tox-swatches__picker-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.theme--dark .tox .tox-swatches__picker-btn:hover {
    background: var(--bg-accent) !important;
}

/* Стили для меню TinyMCE */
.theme--dark .tox .tox-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.theme--dark .tox .tox-collection__item {
    color: var(--text-primary) !important;
}

.theme--dark .tox .tox-collection__item:hover {
    background: var(--bg-accent) !important;
}

.theme--dark .tox .tox-collection__item--enabled {
    background: var(--accent-color) !important;
    color: white !important;
}

/* Стили для разделителей */
.theme--dark .tox .tox-collection__item--separator {
    border-top-color: var(--border-color) !important;
}

/* Адаптивные стили для темной темы */
@media (max-width: 768px) {
    .theme--dark .dle-popup-mediaupload {
        max-width: 95vw !important;
        max-height: 90vh !important;
    }
    
    .theme--dark .ui-dialog {
        max-width: 95vw !important;
    }
    
    .theme--dark .tox-tinymce {
        border-radius: 0 !important;
        border: 1px solid var(--border-color) !important;
    }
}