body {
    background: rgb(245 245 245) !important;
}
        /* Анимации для плавного появления */
        .fade-in {
            opacity: 0;
            animation: fadeIn 0.8s ease-out forwards;
        }
        .fade-in-delay-1 { animation-delay: 0.2s; }
        .fade-in-delay-2 { animation-delay: 0.4s; }
        .fade-in-delay-3 { animation-delay: 0.6s; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* Основные стили, вдохновленные VK: чистый, профессиональный вид с синими акцентами */
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        /* Стили для специалистов: карточки с горизонтальной компоновкой для лучшей читаемости */
        .main-content { flex: 3; margin-right: 20px; }
        .sidebar { flex: 1; }
        .content-wrapper { display: flex; gap: 20px; margin-top: 20px; }
        .card { 
            background: #fff; 
            border-radius: 12px; 
            padding: 20px; 
            margin-bottom: 20px; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
            transition: all 0.3s ease;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            border: 1px solid #e9ecef;
        }
        .card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
        .card img { 
            border-radius: 50%; 
            width: 64px; 
            height: 64px; 
            object-fit: cover; 
            border: 2px solid #e9ecef;
            flex-shrink: 0;
        }
        .card .pro-avatar { 
            border-color: #ffd700; 
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); 
        }
        .card-content { flex: 1; min-width: 0; }
        .card h3 { margin: 0 0 8px 0; font-size: 1.25em; font-weight: 600; color: #1a1a1b; }
        .card p { margin: 0 0 12px 0; color: #666; font-size: 0.95em; }
        .professions { font-size: 0.9em; color: #999; margin-bottom: 16px; font-style: italic; }
        .card-actions { display: flex; gap: 8px; }
        .btn { 
            padding: 8px 16px; 
            border-radius: 6px; 
            text-decoration: none; 
            font-size: 0.875em; 
            font-weight: 500; 
            transition: all 0.2s ease;
            display: inline-block;
        }
        .btn-primary { 
            background-color: rgb(88, 82, 124);
            color: #fff; 
        }
        .btn-primary:hover { background-color: rgb(58 52 92); }
        .btn-secondary { 
            background: #6c757d; 
            color: #fff; 
        }
        .btn-secondary:hover { background: #5a6268; }
        /* Sidebar: фильтры с чистым видом */
        .sidebar form { margin-bottom: 24px; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1px solid #e9ecef; }
        .sidebar input[type="text"], .sidebar select { 
            width: 100%; 
            padding: 10px; 
            border: 1px solid #e9ecef; 
            border-radius: 6px; 
            margin-bottom: 12px; 
            font-size: 0.95em;
        }
        .sidebar button { 
            width: 100%;
            padding: 10px; 
            background-color: rgb(88, 82, 124);
            color: #fff; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            font-weight: 500;
        }
        .sidebar button:hover { background-color: rgb(58 52 92); }
        .sidebar h3 { margin: 0 0 12px 0; font-size: 1.1em; color: #1a1a1b; }
		
        .sidebar ul {
    list-style: none;
    padding: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
    overflow: hidden;
    max-height: 300px; /* Ограничиваем высоту списка */
    overflow-y: auto; /* Включаем вертикальную прокрутку */
    scrollbar-width: thin; /* Для Firefox: тонкая полоса прокрутки */
    scrollbar-color: #58527c #f8f9fa; /* Цвет полосы прокрутки */
}
/* Для WebKit-браузеров (Chrome, Safari) */
.sidebar ul::-webkit-scrollbar {
    width: 8px; /* Ширина полосы прокрутки */
}
.sidebar ul::-webkit-scrollbar-track {
    background: #f8f9fa; /* Цвет фона полосы */
    border-radius: 12px;
}
.sidebar ul::-webkit-scrollbar-thumb {
    background: #5181b8; /* Цвет полосы */
    border-radius: 12px;
}
.sidebar ul::-webkit-scrollbar-thumb:hover {
    background: #456fa3; /* Цвет при наведении */
}
		
        .sidebar ul li { margin: 0; }
        .sidebar ul li a { 
            display: block; 
            padding: 12px 16px; 
            color: #58527c; 
            text-decoration: none; 
            border-bottom: 1px solid #f8f9fa;
        }
        .sidebar ul li a:hover { background: #f0f4ff; font-weight: 500; }
        .sidebar ul li:last-child a { border-bottom: none; }
        .sidebar ul li a[style*="font-weight: bold"] { background: #f0f4ff; font-weight: 600; }
        /* Мобильная адаптация: sidebar сверху на узких экранах */
        @media (max-width: 768px) {
            .content-wrapper { flex-direction: column; gap: 0; }
            .sidebar { order: -1; margin-right: 0; margin-bottom: 20px; }
            .main-content { margin-right: 0; }
            .card { flex-direction: column; text-align: center; }
            .card img { width: 80px; height: 80px; margin: 0 auto; }
            .card-actions { justify-content: center; flex-wrap: wrap; }
            .btn { flex: 1; min-width: 120px; text-align: center; }
        }
        /* Дополнительные улучшения для аккуратности */
        .specialists-section h2 { font-size: 2em; margin-bottom: 24px; margin-top: 24px; color: #1a1a1b; font-weight: 600; }
        .site-header { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .site-footer { background: #1a1a1b; color: #fff; padding: 40px 0 20px; }
		.intro-block {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.intro-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
    .intro-block {
        padding: 16px;
        border-radius: 12px;
    }
    .intro-block h2 {
        font-size: 1.8em;
    }
    .intro-block p {
        font-size: 1em;
    }
    .intro-block .btn {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}
@media (max-width: 480px) {
    .intro-block h2 {
        font-size: 1.5em;
    }
    .intro-block p {
        font-size: 0.9em;
        line-height: 1.5;
    }
}