[html]<style>
    /* ===== Базовый сброс — только для этого контейнера ===== */
    .sheep-test-wrap * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .sheep-test-wrap {
        display: block;
        background: #e0e0e0;
        font-family: Arial, sans-serif;
        padding: 10px;
        width: 520px;
        margin: 0 auto;
    }

    .sheep-test-wrap .st-container {
        width: 100%;
        background: #c9d0af;
        padding: 8px;
    }

    .sheep-test-wrap .st-header-img {
        width: 100%;
        display: block;
        position: relative;
    }

    .sheep-test-wrap .st-header-img img {
        width: 100%;
        display: block;
    }

    .sheep-test-wrap .st-header-img .st-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #f4f3f2;
        padding: 4px 24px;
        font-size: 10px;
        font-weight: bold;
        color: #464646;
        text-transform: lowercase;
    }

    .sheep-test-wrap .st-content {
        background: #f4f3f2;
        padding: 10px 12px;
        font-size: 10px;
        line-height: 1.6;
        color: #464646;
        text-align: justify;
        margin-top: 8px;
        text-transform: lowercase;
    }

    .sheep-test-wrap .st-content b {
        color: #2d3d2d;
    }

    .sheep-test-wrap .st-divider {
        border: none;
        border-top: 2px dashed #d4dcc4;
        margin: 8px 0;
    }

    .sheep-test-wrap .st-footer {
        text-align: center;
        font-size: 10px;
        color: #7a8f7a;
        border-top: 1px solid #dce4d0;
        padding-top: 6px;
        margin-top: 6px;
    }

    /* ===== ТЕСТЫ ===== */
    .sheep-test-wrap .st-test {
        border: 1px solid #d4dcc4;
        border-radius: 4px;
        margin-top: 6px;
        background: #f4f3f2;
    }

    .sheep-test-wrap .st-test-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 10px;
        background: #e8ede0;
        cursor: pointer;
        user-select: none;
        font-weight: 800;
        font-size: 11px;
        color: #2e3b2e;
    }

    .sheep-test-wrap .st-test-header:hover {
        background: #dce4d0;
    }

    .sheep-test-wrap .st-test-header .st-arrow {
        font-size: 14px;
        color: #7cb342;
        transition: transform 0.3s;
    }

    .sheep-test-wrap .st-test-header .st-arrow.st-open {
        transform: rotate(180deg);
    }

    .sheep-test-wrap .st-test-body {
        display: none;
        padding: 6px 10px 10px;
    }

    .sheep-test-wrap .st-test-body.st-open {
        display: block;
    }

    .sheep-test-wrap .st-test-desc {
        font-size: 10px;
        color: #5a6e5a;
        margin-bottom: 6px;
    }

    .sheep-test-wrap .st-question {
        background: #f8fbf8;
        border: 1px solid #e4ece4;
        border-radius: 4px;
        padding: 4px 8px;
        margin-bottom: 4px;
    }

    .sheep-test-wrap .st-question .st-q {
        font-weight: 700;
        font-size: 11px;
        color: #1f2e1f;
        margin-bottom: 2px;
    }

    .sheep-test-wrap .st-question label {
        display: block;
        font-size: 11px;
        color: #2d3d2d;
        padding: 2px 0 2px 18px;
        position: relative;
        cursor: pointer;
    }

    .sheep-test-wrap .st-question label:hover {
        background: #eaf1ea;
    }

    .sheep-test-wrap .st-question label input {
        position: absolute;
        left: 0;
        top: 3px;
        accent-color: #7cb342;
        transform: scale(0.75);
    }

    .sheep-test-wrap .st-btn {
        background: #7cb342;
        color: white;
        border: none;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 12px;
        border-radius: 12px;
        cursor: pointer;
        margin-top: 4px;
    }

    .sheep-test-wrap .st-btn:hover {
        background: #689f38;
    }

    .sheep-test-wrap .st-result {
        margin-top: 6px;
        padding: 6px 8px;
        border: 2px dashed #7cb342;
        border-radius: 4px;
        background: #e8f0e8;
        display: none;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .sheep-test-wrap .st-result.st-show {
        display: flex;
    }

    .sheep-test-wrap .st-result img {
        max-width: 350px;
        max-height: 350px;
        border: 2px solid #7cb342;
        border-radius: 4px;
        background: #dce8dc;
        margin-bottom: 2px;
    }

    .sheep-test-wrap .st-result .st-emoji {
        font-size: 16px;
    }

    .sheep-test-wrap .st-result .st-title {
        font-size: 12px;
        font-weight: 800;
        color: #1f3a1f;
    }

    .sheep-test-wrap .st-result .st-desc {
        font-size: 11px;
        color: #2d472d;
    }
</style>

<div class="sheep-test-wrap">
    <div class="st-container">

        <!-- ШАПКА -->
        <div class="st-header-img">
            <img src="https://upforme.ru/uploads/001c/b1/c6/8/283430.png" alt="Овечьи тесты">
            <div class="st-label">овечьи тесты</div>
        </div>

        <!-- КОНТЕНТ -->
        <div class="st-content">

            <p>Привет, стадо! 🐏<br>
            Хватит притворяться сложными и загадочными! Мы знаем, что в глубине души каждый из нас — немного овца. Вопрос только в том, какая именно? Специально для тебя — <b>«Овечьи тесты»</b>! Это четыре увлекательных испытания, которые помогут тебе заглянуть в свою душу и узнать о себе то, о чем ты даже не догадывался.<br>
            <b>скринь результаты и выкладывай в теме!</b> за выполнение каждого теста начисляется 10 шерсти. участвовать можно только с 1 профиля.</p>

            <hr class="st-divider">

            <!-- ===== ТЕСТ 1 ===== -->
            <div class="st-test">
                <div class="st-test-header" onclick="stToggle(this)">
                    <span>🐏 Кто ты в овечьем мире?</span>
                    <span class="st-arrow">▼</span>
                </div>
                <div class="st-test-body">
                    <div class="st-test-desc">Хватит быть просто человеком! Узнай свою истинную овечью сущность. Спойлер: все мы немного овцы.</div>

                    <div class="st-question">
                        <div class="st-q">1. Ты видишь зелёный луг. Твои действия?</div>
                        <label><input type="radio" name="w1" value="A"> А. Бегу есть, пока не лопну.</label>
                        <label><input type="radio" name="w1" value="B"> Б. Проверяю, нет ли волков.</label>
                        <label><input type="radio" name="w1" value="C"> В. Фоткаю для Инстаграма.</label>
                        <label><input type="radio" name="w1" value="D"> Г. Думаю: "А это точно трава?"</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">2. Твой идеальный вечер?</div>
                        <label><input type="radio" name="w2" value="A"> А. Сериал и чипсы под пледом.</label>
                        <label><input type="radio" name="w2" value="B"> Б. Клуб и "Бара-бара-бере".</label>
                        <label><input type="radio" name="w2" value="C"> В. Умная книга (ну, типа).</label>
                        <label><input type="radio" name="w2" value="D"> Г. Спать с 18:00.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">3. Что скажешь, увидев волка?</div>
                        <label><input type="radio" name="w3" value="A"> А. "Какой милый пёсик!"</label>
                        <label><input type="radio" name="w3" value="B"> Б. "БЕ-Е-ЕГИТЕ!"</label>
                        <label><input type="radio" name="w3" value="C"> В. Начинаю снимать ТикТок.</label>
                        <label><input type="radio" name="w3" value="D"> Г. Предлагаю дружбу и бизнес-план.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">4. Твоя главная слабость?</div>
                        <label><input type="radio" name="w4" value="A"> А. Вкусняшки.</label>
                        <label><input type="radio" name="w4" value="B"> Б. Люблю поспать.</label>
                        <label><input type="radio" name="w4" value="C"> В. Слишком много думаю.</label>
                        <label><input type="radio" name="w4" value="D"> Г. Никакой, я идеальна (ложь).</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">5. Твоя суперспособность как овцы?</div>
                        <label><input type="radio" name="w5" value="A"> А. Усыплять всех спокойствием.</label>
                        <label><input type="radio" name="w5" value="B"> Б. Прыгать выше облаков.</label>
                        <label><input type="radio" name="w5" value="C"> В. Растить на шерсти конфеты.</label>
                        <label><input type="radio" name="w5" value="D"> Г. Становиться невидимой.</label>
                    </div>

                    <button type="button" class="st-btn" onclick="stResultWorld()">🐑 Узнать!</button>

                    <div class="st-result" id="stR1">
                        <img id="stR1img" src="" alt="">
                        <span class="st-emoji" id="stR1emoji"></span>
                        <div class="st-title" id="stR1title"></div>
                        <div class="st-desc" id="stR1desc"></div>
                    </div>
                </div>
            </div>

            <!-- ===== ТЕСТ 2 ===== -->
            <div class="st-test">
                <div class="st-test-header" onclick="stToggle(this)">
                    <span>🧠 Овечий IQ: Насколько ты баран?</span>
                    <span class="st-arrow">▼</span>
                </div>
                <div class="st-test-body">
                    <div class="st-test-desc">Проверь свой коэффициент «баранистости»! Отвечай на вопросы и узнай, гений ты или абсолютный баран.</div>

                    <div class="st-question">
                        <div class="st-q">1. Сколько ног у овцы?</div>
                        <label><input type="radio" name="i1" value="A"> А. Четыре.</label>
                        <label><input type="radio" name="i1" value="B"> Б. Три (инвалид).</label>
                        <label><input type="radio" name="i1" value="C"> В. Восемь (две овцы).</label>
                        <label><input type="radio" name="i1" value="D"> Г. Одна (на костыле).</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">2. Что делают овцы, когда пастух свистит?</div>
                        <label><input type="radio" name="i2" value="A"> А. Бегут к нему.</label>
                        <label><input type="radio" name="i2" value="B"> Б. Игнорируют.</label>
                        <label><input type="radio" name="i2" value="C"> В. Танцуют.</label>
                        <label><input type="radio" name="i2" value="D"> Г. "А чё надо?"</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">3. Какой цвет травы любят овцы?</div>
                        <label><input type="radio" name="i3" value="A"> А. Зелёный.</label>
                        <label><input type="radio" name="i3" value="B"> Б. Синий.</label>
                        <label><input type="radio" name="i3" value="C"> В. Фиолетовый.</label>
                        <label><input type="radio" name="i3" value="D"> Г. Всё равно, лишь бы была.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">4. Что после стрижки?</div>
                        <label><input type="radio" name="i4" value="A"> А. Голая и злая.</label>
                        <label><input type="radio" name="i4" value="B"> Б. Рада, что полегчало.</label>
                        <label><input type="radio" name="i4" value="C"> В. Простужается.</label>
                        <label><input type="radio" name="i4" value="D"> Г. Идёт за новой шубой.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">5. Как овцы общаются?</div>
                        <label><input type="radio" name="i5" value="A"> А. Блеют.</label>
                        <label><input type="radio" name="i5" value="B"> Б. В мессенджерах.</label>
                        <label><input type="radio" name="i5" value="C"> В. Танцуют.</label>
                        <label><input type="radio" name="i5" value="D"> Г. Сигналами дыма.</label>
                    </div>

                    <button type="button" class="st-btn" onclick="stResultIQ()">🧠 Узнать!</button>

                    <div class="st-result" id="stR2">
                        <img id="stR2img" src="" alt="">
                        <span class="st-emoji" id="stR2emoji"></span>
                        <div class="st-title" id="stR2title"></div>
                        <div class="st-desc" id="stR2desc"></div>
                    </div>
                </div>
            </div>

            <!-- ===== ТЕСТ 3 ===== -->
            <div class="st-test">
                <div class="st-test-header" onclick="stToggle(this)">
                    <span>🐑💰 Сколько овец тебе нужно для счастья?</span>
                    <span class="st-arrow">▼</span>
                </div>
                <div class="st-test-body">
                    <div class="st-test-desc">Овцы — это единицы измерения счастья. Узнай, сколько их нужно именно тебе!</div>

                    <div class="st-question">
                        <div class="st-q">1. Как часто ты улыбаешься?</div>
                        <label><input type="radio" name="h1" value="A"> А. Постоянно.</label>
                        <label><input type="radio" name="h1" value="B"> Б. Иногда.</label>
                        <label><input type="radio" name="h1" value="C"> В. Редко.</label>
                        <label><input type="radio" name="h1" value="D"> Г. Когда никто не видит.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">2. Что тебя развеселит?</div>
                        <label><input type="radio" name="h2" value="A"> А. Друзья.</label>
                        <label><input type="radio" name="h2" value="B"> Б. Еда.</label>
                        <label><input type="radio" name="h2" value="C"> В. Смешное видео.</label>
                        <label><input type="radio" name="h2" value="D"> Г. Ничто, я серьёзен.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">3. Как к деньгам?</div>
                        <label><input type="radio" name="h3" value="A"> А. Не нужны, я счастлив.</label>
                        <label><input type="radio" name="h3" value="B"> Б. Хорошо бы побольше.</label>
                        <label><input type="radio" name="h3" value="C"> В. Деньги = счастье.</label>
                        <label><input type="radio" name="h3" value="D"> Г. Что такое деньги?</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">4. Что для расслабления?</div>
                        <label><input type="radio" name="h4" value="A"> А. Чай и книга.</label>
                        <label><input type="radio" name="h4" value="B"> Б. Ванна и музыка.</label>
                        <label><input type="radio" name="h4" value="C"> В. Сериал.</label>
                        <label><input type="radio" name="h4" value="D"> Г. Просто лежать.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">5. Сколько друзей?</div>
                        <label><input type="radio" name="h5" value="A"> А. Много.</label>
                        <label><input type="radio" name="h5" value="B"> Б. Несколько близких.</label>
                        <label><input type="radio" name="h5" value="C"> В. Один-два.</label>
                        <label><input type="radio" name="h5" value="D"> Г. Ни одного, мне хорошо.</label>
                    </div>

                    <button type="button" class="st-btn" onclick="stResultHappiness()">🐑 Сосчитать!</button>

                    <div class="st-result" id="stR3">
                        <img id="stR3img" src="" alt="">
                        <span class="st-emoji" id="stR3emoji"></span>
                        <div class="st-title" id="stR3title"></div>
                        <div class="st-desc" id="stR3desc"></div>
                    </div>
                </div>
            </div>

            <!-- ===== ТЕСТ 4 ===== -->
            <div class="st-test">
                <div class="st-test-header" onclick="stToggle(this)">
                    <span>🦸🐑 Кто ты, овца-супергерой?</span>
                    <span class="st-arrow">▼</span>
                </div>
                <div class="st-test-body">
                    <div class="st-test-desc">Овцы тоже спасают мир! Каким супергероем стал(а) бы ты с овечьими силами?</div>

                    <div class="st-question">
                        <div class="st-q">1. Твоя суперсила?</div>
                        <label><input type="radio" name="s1" value="A"> А. Сверхскорость.</label>
                        <label><input type="radio" name="s1" value="B"> Б. Невидимость.</label>
                        <label><input type="radio" name="s1" value="C"> В. Отращивать шерсть за секунду.</label>
                        <label><input type="radio" name="s1" value="D"> Г. Заговаривать волков.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">2. Твой главный враг?</div>
                        <label><input type="radio" name="s2" value="A"> А. Пастух-злодей.</label>
                        <label><input type="radio" name="s2" value="B"> Б. Волк-оборотень.</label>
                        <label><input type="radio" name="s2" value="C"> В. Другая супер-овца.</label>
                        <label><input type="radio" name="s2" value="D"> Г. Время.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">3. Твой костюм?</div>
                        <label><input type="radio" name="s3" value="A"> А. Плащ из пуха.</label>
                        <label><input type="radio" name="s3" value="B"> Б. Сверкающая шерсть.</label>
                        <label><input type="radio" name="s3" value="C"> В. Шуба с логотипом "О".</label>
                        <label><input type="radio" name="s3" value="D"> Г. Вообще без костюма.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">4. Что делаешь с силой?</div>
                        <label><input type="radio" name="s4" value="A"> А. Спасаю от голода.</label>
                        <label><input type="radio" name="s4" value="B"> Б. Ловлю овцеедов.</label>
                        <label><input type="radio" name="s4" value="C"> В. Устраиваю шоу.</label>
                        <label><input type="radio" name="s4" value="D"> Г. Лежу и отдыхаю.</label>
                    </div>

                    <div class="st-question">
                        <div class="st-q">5. Твой девиз?</div>
                        <label><input type="radio" name="s5" value="A"> А. "Бе-е-е-гите, я лечу!"</label>
                        <label><input type="radio" name="s5" value="B"> Б. "Я защищаю стадо!"</label>
                        <label><input type="radio" name="s5" value="C"> В. "Овцы рулят!"</label>
                        <label><input type="radio" name="s5" value="D"> Г. "Мне лень, но позовите".</label>
                    </div>

                    <button type="button" class="st-btn" onclick="stResultSuper()">🦸 Стать героем!</button>

                    <div class="st-result" id="stR4">
                        <img id="stR4img" src="" alt="">
                        <span class="st-emoji" id="stR4emoji"></span>
                        <div class="st-title" id="stR4title"></div>
                        <div class="st-desc" id="stR4desc"></div>
                    </div>
                </div>
            </div>

            <div class="st-footer">🐑 Сделано с любовью к овцам и тестам. БЕ-Е-Е!</div>

        </div><!-- /st-content -->
    </div><!-- /st-container -->
</div><!-- /sheep-test-wrap -->
<script src="https://forumstatic.ru/files/001c/c5/d9/35942.js"></script>
[/html]