<style>
    /* CSS Styles */
    :root {
        --bg-color: #111111;
        --accent-color: #58CFD4;
        --text-color: #e0e0e0;
        --active-text-color: #111111;
    }

    .hormone-tabs-wrapper {
        width: 90%;
        max-width: 1000px;
        margin: 40px auto;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        background-color: var(--bg-color);
        border: 1px solid #333;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }

    /* Tabs Navigation */
    .hormone-tabs-nav {
        display: flex;
        flex-wrap: wrap;
        background-color: #1a1a1a;
        border-bottom: 2px solid #333;
    }

    .hormone-tab-btn {
        flex: 1 1 auto; /* Grow to fill space, but allow wrapping */
        min-width: 150px; /* Minimum width before wrapping */
        padding: 18px 15px;
        border: none;
        background: none;
        color: var(--text-color);
        font-size: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        border-right: 1px solid #333;
    }

    .hormone-tab-btn:last-child {
        border-right: none;
    }

    .hormone-tab-btn:hover {
        background-color: #252525;
        color: #fff;
    }

    .hormone-tab-btn.active {
        background-color: var(--accent-color);
        color: var(--active-text-color);
        font-weight: 700;
        border-bottom: 3px solid var(--bg-color); /* Visual separation */
        margin-bottom: -2px; /* Overlap the border */
        z-index: 2;
    }

    /* Tabs Content */
    .hormone-tab-content {
        display: none;
        padding: 30px;
        color: var(--text-color);
        line-height: 1.6;
        animation: fadeIn 0.4s ease-in-out;
    }

    .hormone-tab-content.active {
        display: block;
    }

    .hormone-tab-content h3 {
        color: var(--accent-color);
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 22px;
    }

    .hormone-tab-content p {
        margin-bottom: 0;
        font-size: 16px;
    }

    /* Animation */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Mobile Optimization */
    @media (max-width: 600px) {
        .hormone-tabs-nav {
            flex-direction: column;
        }
        
        .hormone-tab-btn {
            border-right: none;
            border-bottom: 1px solid #333;
            text-align: left;
            padding: 15px 20px;
        }

        .hormone-tab-btn.active {
            border-bottom: 1px solid #333;
            margin-bottom: 0;
            border-left: 5px solid var(--accent-color); /* Indicator on mobile */
        }
        
        .hormone-tab-content {
            padding: 20px;
        }
    }
</style>

<!-- HTML Structure -->
<div class="hormone-tabs-wrapper">
    <!-- Navigation Buttons -->
    <div class="hormone-tabs-nav">
        <button class="hormone-tab-btn active" onclick="openHormoneTab(event, 'tab1')">Жировая ткань</button>
        <button class="hormone-tab-btn" onclick="openHormoneTab(event, 'tab2')">Стресс и сон</button>
        <button class="hormone-tab-btn" onclick="openHormoneTab(event, 'tab3')">Дефициты</button>
        <button class="hormone-tab-btn" onclick="openHormoneTab(event, 'tab4')">Токсины</button>
        <button class="hormone-tab-btn" onclick="openHormoneTab(event, 'tab5')">Болезни</button>
        <button class="hormone-tab-btn" onclick="openHormoneTab(event, 'tab6')">Лекарства</button>
    </div>

    <!-- Content Panels -->
    <div id="tab1" class="hormone-tab-content active">
        <h3>Влияние висцерального жира</h3>
        <p>Абдоминальное ожирение — это не просто эстетическая проблема, а активный эндокринный сбой. Жировые клетки в области талии вырабатывают фермент ароматазу, который буквально перерабатывает мужской тестостерон в женские эстрогены. Это создает замкнутый круг: накопление жира подавляет выработку гормона, а низкий уровень гормона способствует дальнейшему набору веса. Статистика подтверждает: у мужчин с лишним весом показатели тестостерона могут быть ниже нормы на треть.</p>
    </div>

    <div id="tab2" class="hormone-tab-content">
        <h3>Кортизол и недосып</h3>
        <p>Гормон стресса кортизол является биологическим антагонистом тестостерона. При хроническом напряжении или регулярном недосыпе (менее 6 часов) организм переходит в режим выживания, блокируя репродуктивную функцию. Исследования фиксируют падение уровня гормона на 10–15% всего за одну неделю дефицита сна, так как основная часть тестостерона синтезируется именно в фазе глубокого сна.</p>
    </div>

    <div id="tab3" class="hormone-tab-content">
        <h3>Нехватка нутриентов</h3>
        <p>Синтез стероидных гормонов невозможен без «строительных материалов». Критический дефицит витамина D, цинка, магния и селена напрямую тормозит работу эндокринной системы. Для поддержания здорового фона необходимо не просто есть, а следить за балансом белков и качественных жиров в рационе, которые служат основой для производства гормонов.</p>
    </div>

    <div id="tab4" class="hormone-tab-content">
        <h3>Вредные привычки</h3>
        <p>Токсическая нагрузка разрушает гормональную систему с разных сторон. Алкоголь бьет по печени, которая перестает утилизировать лишний эстроген. Никотин вызывает спазм сосудов, ухудшая кровоснабжение яичек. Каннабиноиды же воздействуют на центральный уровень, подавляя сигналы от гипоталамуса к половым железам, что ведет к искусственному снижению выработки.</p>
    </div>

    <div id="tab5" class="hormone-tab-content">
        <h3>Системные патологии</h3>
        <p>Снижение либидо и энергии часто является симптомом скрытых заболеваний. Сахарный диабет 2-го типа, метаболический синдром и нарушения работы щитовидной железы тесно переплетены с гипогонадизмом. У пациентов с диабетом риск столкнуться с критически низким уровнем тестостерона возрастает в два раза из-за инсулинорезистентности и воспаления.</p>
    </div>

    <div id="tab6" class="hormone-tab-content">
        <h3>Медикаментозное влияние</h3>
        <p>Некоторые препараты, назначаемые для лечения других состояний, имеют побочный эффект в виде подавления андрогенов. К ним относятся глюкокортикоиды (гормональные противовоспалительные), сильные обезболивающие (опиоиды), ряд антидепрессантов и препараты от давления (бета-блокаторы). Они могут угнетать синтез гормона или снижать его биологическую доступность для тканей.</p>
    </div>
</div>

<script>
    function openHormoneTab(evt, tabName) {
        // Скрыть все элементы с классом "hormone-tab-content"
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("hormone-tab-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
            tabcontent[i].classList.remove("active");
        }

        // Удалить класс "active" со всех кнопок
        tablinks = document.getElementsByClassName("hormone-tab-btn");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // Показать текущий таб и добавить класс "active" кнопке
        document.getElementById(tabName).style.display = "block";
        // Небольшая задержка для срабатывания CSS анимации
        setTimeout(() => {
            document.getElementById(tabName).classList.add("active");
        }, 10);
        
        evt.currentTarget.className += " active";
    }
</script>