/*
Theme Name: brusilov Theme
Version: 3.0
Author: brusilov Team
*/
.cm-post-categories, .cm-category, .cat-links { display: none !important; }
        .cm-featured-image img { border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .cm-entry-summary { font-size: 16px; line-height: 1.6; color: #333; }

:root { 
            --main-color: #10b981; 
            --hover-color: var(--main-color);
            --radius: 16px; 
            --shadow: 0 10px 30px rgba(0,0,0,0.1); 
            --font: 'Inter', sans-serif; 
            --bg-color: #f8fafc;
            --bg-image: none;
            --bg-size: auto;
            --card-bg: #fff;
            --text-main: #0f172a;
            --text-muted: #475569;
        }
        
        *, *::before, *::after { box-sizing: border-box; }

        body { font-family: var(--font); background-color: var(--bg-color); background-image: var(--bg-image); background-size: var(--bg-size); color: var(--text-main); margin: 0; line-height: 1.6; overflow-x: hidden; }
      
        .container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }

                    body { padding: 20px 0; } 
            
            .container { 
                max-width: 1000px !important; 
                margin: 40px auto !important; 
                background: var(--card-bg) !important; 
                border-radius: var(--radius); 
                box-shadow: var(--shadow); 
                padding: 40px !important; 
            }
            header, footer > div, .top-bar-inner { 
                max-width: 1000px !important; 
                margin: 0 auto !important; 
            }
            header { border-radius: var(--radius) var(--radius) 0 0; }
                
        a { color: var(--main-color); text-decoration: none; transition: 0.2s; }
        a:hover { opacity: 0.8; }
        img { max-width: 100%; height: auto; }

        .section-title { font-size: 24px; font-weight: 800; margin-bottom: 20px; display:flex; align-items:center; gap: 10px; color: var(--text-main); }
        .section-title::before { content: ''; display: block; width: 6px; height: 24px; background: var(--main-color); border-radius: 4px; }
        
        .page-title { margin-bottom: 30px; font-size: 28px; font-weight:800; border-bottom: 3px solid var(--main-color); padding-bottom: 10px; display: inline-block; color: var(--text-main); }
        .pagination { margin: 50px 0; text-align: center; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
        .pagination .page-numbers { padding: 10px 18px; background: var(--card-bg); border-radius: 8px; color: var(--text-main); text-decoration: none; font-weight: 600; box-shadow: var(--shadow); border: 1px solid rgba(128, 128, 128, 0.1); transition: 0.2s; }
        .pagination .page-numbers:hover { background: var(--main-color); color: #fff; border-color: var(--main-color); }
        .pagination .current { background: var(--main-color); color: #fff; pointer-events: none; border-color: var(--main-color); }

        .single-content { font-size: 18px; line-height: 1.8; color: var(--text-main); }
        .single-content img { border-radius: 12px; margin: 30px 0; box-shadow: var(--shadow); }
        .single-header { text-align: center; margin-bottom: 40px; }
        .single-header h1 { line-height: 1.3; }

        .layout-sidebar-left { grid-template-columns: 1fr 3fr !important; }
        
        /* ФИКС: Запрещаем контенту распирать сетку при включенном сайдбаре */
        .main-posts { min-width: 0; overflow: hidden; }

        .lang-item { display: inline-flex; align-items: center; }
        .lang-item a { display: flex; align-items: center; gap: 5px; color: var(--text-muted); font-weight: 600; }
        .lang-item a:hover { color: var(--text-main); }
        .lang-item img { width: 18px; height: auto; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
      
        .desktop-navigation a { text-decoration: none; color: var(--text-main); font-weight: 600; transition: 0.2s; }
        .single-post-container { background: var(--card-bg); padding: 50px; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 900px; margin: 0 auto; }

        header { background: var(--card-bg); box-shadow: var(--shadow); border-bottom: 3px solid var(--main-color); position: relative; z-index: 1000; width: 100%; }
        
        .top-bar { background: #111; color: #fff; width: 100%; font-size: 12px; }
        .top-bar-inner { display: flex; justify-content: space-between; align-items: center; padding: 5px 20px; max-width: var(--site-width-max); margin: 0 auto; }
        
        .top-bar a, .top-bar div[class*="menu-secondary"] a { color: #cbd5e1 !important; text-decoration: none; font-weight: 600; transition: 0.2s; }
        .top-bar a:hover, .top-bar div[class*="menu-secondary"] a:hover { color: #fff !important; }
        .top-bar div[class*="menu-secondary"] ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
        .logo a { font-size: 26px; font-weight: 800; color: var(--text-main); text-decoration: none; letter-spacing: -0.5px; }

        .main-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px 20px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
        .main-menu a { text-decoration: none; color: var(--text-main); font-weight: 600; transition: 0.2s; }
        .main-menu a:hover { color: var(--hover-color); }
        
        
        .news-image, .archive-img { position: relative; overflow: hidden; aspect-ratio: 1/1; }
        .news-image img, .archive-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; }
                    .news-card:hover, .archive-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
            .news-card:hover .news-image img, .archive-card:hover .archive-img img { transform: scale(1.05); }
        
        .cat-pill { background: var(--main-color); color: #fff; padding: 4px 10px; font-size: 11px; font-weight: 800; border-radius: 4px; text-transform: uppercase; text-decoration: none; display: inline-block; margin-bottom: 10px; z-index: 10; }
                 .news-card .cat-pill, .archive-card .cat-pill { position: absolute; bottom: 10px; left: 10px; margin: 0; } 
        
        .typewriter-slogan { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--main-color); width: 0; animation: typing 3s steps(40, end) forwards, blink-caret .75s step-end infinite; font-size: 14px; font-weight: 600; color: #64748b; }
        @keyframes typing { from { width: 0 } to { width: 100% } }
        @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--main-color) } }

        
        .bento-main { grid-row: span 2; }
        
        
        
        
        
        .bento-content { position: absolute; bottom: 0; left: 0; padding: 30px; z-index: 2; width: 100%; }
        .bento-content h2 { margin: 0 0 10px 0; font-size: 24px; font-weight: 800; line-height: 1.3; }
        .bento-content h2 a { color: #fff; text-decoration: none; transition: color 0.2s; }
        .bento-content h2 a:hover { color: var(--main-color); }
        .bento-main .bento-content h2 { font-size: 32px; }

        .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
        .news-card { background: var(--card-bg, #fff); position: relative; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .news-card-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }

        .ticker { background: var(--main-color); color: #fff; padding: 10px 20px; font-size: 14px; font-weight: bold; text-align: center; }
        
        .news-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
        
        .news-card h3 { margin: 0 0 10px 0; font-size: 18px; font-weight: 800; line-height: 1.4; }
        .news-card h3 a { color: var(--text-main); text-decoration: none; }
        .layout-sidebar { display: grid; grid-template-columns: 3fr 1fr; gap: 30px; }
        .sidebar-widget { background: var(--card-bg); padding: 20px; margin-bottom: 20px; border-radius: var(--radius); box-shadow: var(--shadow); }
        .sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
        .sidebar-widget ul li { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed rgba(128, 128, 128, 0.2); }
        .sidebar-widget ul li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .sidebar-widget a { color: var(--text-main); text-decoration: none; transition: 0.2s; }
        .sidebar-widget a:hover { color: var(--hover-color); }

        .cookie-banner { position: fixed; z-index: 99999; background: var(--card-bg); color: var(--text-main); padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); display: none; transition: 0.3s ease; }
                         .cookie-banner { bottom: 0; left: 0; width: 100%; border-top: 3px solid var(--main-color); align-items: center; justify-content: space-between; }         
        .floating-share { position: fixed; top: 50%; transform: translateY(-50%); z-index: 98; display: flex; flex-direction: column; gap: 10px; }
         .floating-share { left: 0; } .floating-share a { border-radius: 0 8px 8px 0; }                 
        .scroll-top-btn { position: fixed; bottom: 30px; z-index: 99; background: var(--main-color); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 5px 15px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; }
        .scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
        .scroll-top-btn:hover { filter: brightness(1.1); transform: translateY(-3px) scale(1.05); }
        
                        
        .theme-toggle-btn { background: none; border: none; font-size: 22px; cursor: pointer; padding: 5px; color: var(--text-main); transition: 0.3s; display: flex; align-items: center; justify-content: center; }
        .theme-toggle-btn:hover { color: var(--main-color); transform: scale(1.1); }
        
        body.user-dark-mode {
            --bg-color: #0f172a;
            --card-bg: #1e293b;
            --text-main: #ffffff;
            --text-muted: #94a3b8;
            --hover-color: #38bdf8;
        }
        
        body.user-dark-mode .single-content div[style*="background"] {
            background: var(--card-bg) !important;
            color: var(--text-main) !important;
            border-color: var(--main-color) !important;
        }

#offCanvasMenu { position: fixed; top: 0; height: 100vh; background: #0f172a; color: #fff; z-index: 99999; transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1); padding: 40px 20px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
        #offCanvasMenu .close-btn { position: absolute; top: 15px; right: 20px; background: none; border: none; color: #fff; font-size: 40px; cursor: pointer; transition: 0.2s; padding: 0; line-height: 1; }
        #offCanvasMenu h2 { color: var(--main-color); font-weight: 800; font-size: 22px; margin-bottom: 25px; margin-top: 0; }
        
        .offcanvas-nav-wrap ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
        .offcanvas-nav-wrap li { margin: 0 !important; padding: 0 !important; line-height: 1 !important; }
        .offcanvas-nav-wrap a { color: #fff !important; text-decoration: none !important; font-size: 17px !important; font-weight: 700 !important; transition: 0.2s; display: block !important; padding: 8px 0 !important; line-height: 1.2 !important; margin: 0 !important; }
        .offcanvas-nav-wrap a:hover { color: var(--main-color) !important; padding-left: 10px !important; }
        
        .secondary-menu-wrapper { margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; }
        .secondary-menu-wrapper ul { gap: 0 !important; }
        .secondary-menu-wrapper a { font-size: 14px !important; font-weight: 500 !important; color: #cbd5e1 !important; padding: 6px 0 !important; }
        .secondary-menu-wrapper a:hover { color: #fff !important; padding-left: 5px !important; }

        #offCanvasMenu.is-sidebar { 
            left: -350px; 
            width: 300px; 
            max-width: 85%; 
            align-items: flex-start; 
            box-shadow: 15px 0 40px rgba(0,0,0,0.7); 
        }
        #offCanvasMenu.is-sidebar.active { left: 0; }
        #offCanvasMenu.is-sidebar h2 { text-align: left; }
        #offCanvasMenu.is-sidebar .offcanvas-nav-wrap ul { align-items: flex-start; }

        #offCanvasMenu.is-fullscreen { left: 0; width: 100%; align-items: center; justify-content: flex-start; opacity: 0; pointer-events: none; padding: 50px 20px; }
        #offCanvasMenu.is-fullscreen.active { opacity: 1; pointer-events: auto; }
        #offCanvasMenu.is-fullscreen h2 { text-align: center; }
        #offCanvasMenu.is-fullscreen .offcanvas-nav-wrap ul { align-items: center; text-align: center; gap: 12px; }
        #offCanvasMenu.is-fullscreen .offcanvas-nav-wrap a { font-size: 20px; font-weight: 800; padding: 8px 0; }
        #offCanvasMenu.is-fullscreen .offcanvas-nav-wrap div[class*="menu-secondary"] a { font-size: 15px; font-weight: 500; padding: 5px 0; }

        @media (max-width: 1024px) {
            #offCanvasMenu.is-sidebar { left: -100%; width: 100%; }
        }

.highlight-links::-webkit-scrollbar { display: none; }
                    @media (max-width: 1024px) {
                        .highlight-bar { flex-direction: column; align-items: stretch !important; }
                        .highlight-bar > div:first-child { justify-content: center; }
                        .highlight-links { padding: 15px !important; overflow-x: auto; justify-content: flex-start; }
                    }

#lf-hero-slider::-webkit-scrollbar { display: none; } 
                        .slider-btn:hover { background: var(--main-color) !important; color: #fff !important; }
                        @media (max-width: 1024px) {
                            .slider-item-split_box { flex-direction: column !important; min-width: 100% !important; height: auto !important; }
                            .slider-item-split_box .split-img { width: 100% !important; height: 250px !important; }
                            .slider-item-split_box .split-content { width: 100% !important; padding: 25px !important; }
                            .slider-item-multi_card { min-width: calc(85% - 10px) !important; } 
                            .slider-item-full_overlay h2 { font-size: 24px !important; }
                        }

div[id^="cat-slider-"]::-webkit-scrollbar { display: none; }
                        .zigzag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
                        .zigzag-item:nth-child(even) { flex-direction: column-reverse !important; }
                        .zigzag-item:nth-child(even) .news-image { border-radius: 0 0 var(--radius) var(--radius); }
                        .zigzag-item:nth-child(odd) .news-image { border-radius: var(--radius) var(--radius) 0 0; }
                        .mosaic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
                        .mosaic-large { grid-column: span 2; }
                        .mosaic-large .news-image { aspect-ratio: 4/3 !important; }

                        /* ФИКС: Адаптация сеток под узкую колонку (если включен сайдбар) */
                                                    .mosaic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* minmax 0 запрещает распирание */
                            .mosaic-large { grid-column: span 2; }
                            .mosaic-large .news-image { aspect-ratio: 16/9 !important; }
                            
                            .zigzag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                            div[id^="cat-slider-"] .news-card { min-width: calc(50% - 10px) !important; }
                            
                            /* Обычная сетка тоже должна быть гибкой */
                            .news-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
                            
                            /* Журнал перестраиваем в один столбик, иначе он сплющится */
                            .home-category-block .layout-sidebar { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; }
                        
                        @media (max-width: 1024px) {
                            .cat-view-all-desktop { display: none !important; }
                            .cat-view-all-mobile { display: block !important; }
                            .mosaic-grid { grid-template-columns: 1fr !important; }
                            .mosaic-large { grid-column: span 1 !important; }
                            .zigzag-item:nth-child(even) { flex-direction: column !important; }
                            div[id^="cat-slider-"] .news-card { min-width: 280px !important; }
                        }

footer ul li a { color: #94a3b8 !important; text-decoration: none !important; transition: 0.2s; font-size: 15px !important; font-weight: 500 !important; }
    footer ul li a:hover { color: #fff !important; }
    
    .footer-tech-menu ul, .footer-tech-menu div > ul, .footer-cats-menu { 
        list-style: none !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        display: flex !important; 
        align-items: center; 
                    justify-content: center !important; 
            gap: 25px !important;
            margin-top: 25px !important; 
            }
    
    .footer-tech-menu li, .footer-cats-menu li { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; }
    .footer-tech-menu * { color: #94a3b8 !important; text-decoration: none !important; }
    .footer-tech-menu a:hover * { color: #fff !important; }
 
        .mobile-only-btn { display: none; }
        .bottom-app-bar { display: none; }
        
        @media (max-width: 1024px) {
            
            /* ФИКС: Скрываем плавающий боковой share-бар на мобильных устройствах, чтобы он не улетал за экран */
            .floating-share { display: none !important; }
            .article-sticky-share { display: none !important; }

            .header-tech-menu-desktop { display: none !important; }     

            .desktop-navigation { display: none !important; }
            .mobile-only-btn { display: flex !important; align-items: center; background: none; border: none; font-size: 24px; color: var(--text-main); cursor: pointer; }
            header > div { padding: 15px !important; }
            
            .top-bar-inner { flex-direction: column !important; gap: 8px !important; text-align: center !important; padding: 10px !important; }
            
            .top-bar-inner > div:first-child { 
                display: flex !important; 
                flex-direction: row !important; 
                justify-content: center !important; 
                flex-wrap: wrap !important; 
                gap: 15px !important; 
                width: 100%; 
            }
            
            .top-bar .footer-nav-block, .top-bar div[class*="menu-secondary"] { display: none !important; }

                            header .lang-switcher, header button { display: none !important; }
                .bottom-app-bar { display: flex !important; position: fixed; bottom: 0; left: 0; width: 100%; background: var(--card-bg); box-shadow: 0 -5px 15px rgba(0,0,0,0.1); z-index: 9999; justify-content: space-around; padding: 12px 0; border-top: 1px solid #e2e8f0; }
                .bottom-app-bar a, .bottom-app-bar button { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-muted); text-decoration: none; font-size: 11px; font-weight: 700; background: none; border: none; }
                .bottom-app-bar a.active { color: var(--main-color); }
                body { padding-bottom: 70px; } 
                .scroll-top-btn, .cookie-banner { bottom: 80px !important; }
            
            .layout-sidebar, .layout-sidebar-left { display: flex !important; flex-direction: column !important; gap: 30px !important; }
            
            
            .news-card, .archive-card { margin-bottom: 0 !important; margin-right: 0 !important; }
            
            .archive-card { flex-direction: column !important; height: auto !important; }
            .archive-img { width: 100% !important; height: 200px !important; border-radius: var(--radius) var(--radius) 0 0 !important; }
            .archive-body { width: 100% !important; padding: 20px !important; }
            .archive-body h3 { font-size: 20px !important; }

            div[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }
            
            #lf-hero-slider 
            .slider-btn { display: none !important; }

            .single-post-container { padding: 20px !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid #e2e8f0; }
            .single-header h1 { font-size: 26px !important; line-height: 1.3 !important; }
            
            iframe { height: 250px !important; }
            div[style*="grid-template-columns: repeat"], div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
        } /* ФИКС: ВОТ ЗДЕСЬ МЫ ЗАКРЫВАЕМ @MEDIA (MAX-WIDTH: 1024px) */

        /* ========================================= */
        /* СТИЛИ КОНТЕНТА СТАТЬИ (Десктоп + Мобайл)  */
        /* ========================================= */
        .single-header { text-align: center; margin-bottom: 40px; }
        .single-header h1 { line-height: 1.3; }
        
        /* ========================================= */          
        /* СТИЛИ ДЛЯ ОГЛАВЛЕНИЯ (TOC)                */
        /* ========================================= */
        .lf-toc { margin: 30px 0; font-family: var(--font); clear: both; }
        .lf-toc .toc-title { margin: 0 0 15px 0; font-size: 20px; font-weight: 800; color: var(--text-main); }
        .lf-toc .toc-main-list { margin: 0; padding: 0; list-style: none; }
        
        /* ФИКС: Делаем пункты нейтральными по умолчанию */
        .lf-toc .toc-link { color: var(--text-main); text-decoration: none; font-weight: 600; font-size: 16px; transition: 0.2s; display: block; padding: 6px 0; border-bottom: 1px dashed rgba(128, 128, 128, 0.2); border-left: 0px solid transparent; }
        
        /* ФИКС: Яркий, контрастный акцент для активных пунктов (или при наведении) */
        .lf-toc .toc-link:hover, .lf-toc .toc-link.active { 
            color: var(--main-color); 
            padding-left: 10px; 
            background: linear-gradient(to right, rgba(0,0,0,0.02), transparent);
        }
        body.user-dark-mode .lf-toc .toc-link:hover, body.user-dark-mode .lf-toc .toc-link.active {
            background: linear-gradient(to right, rgba(255,255,255,0.05), transparent);
        }
        
        .lf-toc .toc-sublist { list-style: none; padding-left: 20px; margin: 0; border-left: 2px solid #e2e8f0; }
        .lf-toc .toc-h3 .toc-link { font-size: 14px; font-weight: 500; color: var(--text-muted); border-bottom: none; padding: 4px 0; }
        .lf-toc .toc-h3 .toc-link:hover, .lf-toc .toc-h3 .toc-link.active { padding-left: 8px; color: var(--main-color); }
        
        /* 1. Simple List */
        /* ФИКС: Скрываем стандартные цифры (decimal), так как у нас работают крутые CSS-каунтеры */
        .lf-toc-simple .toc-main-list { list-style: none; padding-left: 0; }
        .lf-toc-simple .toc-link { display: inline; border: none; padding: 0; line-height: 1.8; }
        
        /* 2. Styled Box */
        .lf-toc-styled { background: var(--bg-color); padding: 30px; border-radius: var(--radius); border-left: 4px solid var(--main-color); box-shadow: var(--shadow); }
        
        /* 3. Collapsible Box (Аккордеон) */
        .lf-toc-collapsible { background: var(--bg-color); border: 1px solid #e2e8f0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
        .lf-toc-collapsible .toc-header { padding: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: rgba(0,0,0,0.02); transition: 0.2s; }
        .lf-toc-collapsible .toc-header:hover { background: rgba(0,0,0,0.05); }
        .lf-toc-collapsible .toc-title { margin: 0; }
        .lf-toc-collapsible .toc-toggle { font-size: 12px; transition: transform 0.3s; color: var(--text-muted); }
        
        .toc-wrap-hidden { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; padding: 0 20px; }
        
        /* ФИКС: Используем ID вместо класса для раскрытия */
        #lf-toc-wrap.open { max-height: 2000px; padding: 20px; border-top: 1px solid #e2e8f0; }
        
        /* 4. Floating Button (Плавающая модалка) */
        
        
        .lf-toc-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s; }
        .lf-toc-modal.active { opacity: 1; visibility: visible; }
        .lf-toc-modal-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(5px); }
        .lf-toc-modal-content { position: relative; background: var(--card-bg); width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; border-radius: var(--radius); padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); transform: translateY(20px); transition: 0.3s; }
        .lf-toc-modal.active .lf-toc-modal-content { transform: translateY(0); }
        .lf-toc-modal .toc-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; margin-bottom: 20px; }
        .lf-toc-modal .toc-title { margin: 0; font-size: 24px; }
        .lf-toc-modal .toc-close { font-size: 30px; cursor: pointer; color: var(--text-muted); line-height: 1; }
        .lf-toc-modal .toc-close:hover { color: var(--main-color); }
        
        /* Плавная прокрутка для якорей */
        html { scroll-behavior: smooth; }
        .single-content h2, .single-content h3 { scroll-margin-top: 100px; } /* Чтобы липкая шапка не перекрывала заголовок */
        
        /* СТИЛИ ДЛЯ БУКВИЦЫ (Drop Cap) */
            .lf-dropcap {
            float: left;
            font-size: 85px;
            line-height: 60px;
            padding-top: 4px;
            padding-right: 12px;
            padding-bottom: 5px;
            color: var(--main-color);
            font-family: 'Playfair Display', serif;
            font-weight: 900;
            }
            /* ========================================= */
        /* СТИЛИ КОНТЕНТА СТАТЬИ (Списки и Заголовки)*/
        /* ========================================= */
        
        .single-content h2 { margin-top: 50px; margin-bottom: 20px; font-weight: 800; font-size: 28px; line-height: 1.3; color: var(--text-main); }
        .single-content h3 { margin-top: 40px; margin-bottom: 15px; font-weight: 700; font-size: 22px; color: var(--text-main); }
        .single-content ul, .single-content ol { margin: 20px 0 30px 0; padding-left: 20px; }
        .single-content li { margin-bottom: 10px; line-height: 1.8; }

        /* ========================================= */
        /* СТИЛИ ДЛЯ ЦИТАТ (Blockquote)              */
        /* ========================================= */
                    /* 1. Классический стиль (Без левой линии, с отступом и кавычкой) */
            .single-content blockquote {
                padding: 10px 0 10px 40px;
                font-size: 22px;
                font-style: italic;
                color: var(--text-main);
                font-weight: 600;
                line-height: 1.5;
                position: relative;
            }
            .single-content blockquote::before {
                content: '“';
                font-size: 80px;
                line-height: 1;
                color: var(--main-color);
                font-family: serif;
                position: absolute;
                left: -10px;
                top: -15px;
                opacity: 0.3;
            }
            .single-content blockquote::before {
                content: '“';
                font-size: 60px;
                line-height: 1;
                color: var(--main-color);
                font-family: serif;
                position: absolute;
                margin-left: -50px;
                margin-top: -10px;
                opacity: 0.3;
            }
            
                
                    /* 2. Кольорові списки (Сучасний SaaS-стиль) */
            .single-content h2 { 
                border-bottom: 4px solid var(--main-color); 
                display: inline-block; 
                padding-bottom: 5px; 
            }
            .single-content ul { list-style: none; padding-left: 0; }
            .single-content ul li { position: relative; padding-left: 25px; }
            .single-content ul li::before {
                content: '';
                position: absolute;
                left: 0;
                top: 10px;
                width: 8px;
                height: 8px;
                background-color: var(--main-color);
                border-radius: 50%;
                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            }
            /* Красивые цифры для ol */
            .single-content ol { list-style: none; padding-left: 0; counter-reset: lf-counter; }
            .single-content ol li { position: relative; padding-left: 35px; margin-bottom: 15px; }
            .single-content ol li::before {
                counter-increment: lf-counter;
                content: counter(lf-counter);
                position: absolute;
                left: 0;
                top: 2px;
                color: var(--main-color);
                font-weight: 900;
                font-size: 18px;
            }