[hideprofile] [html]
    <style> 
        :root {
            --ntln-bg: #313131;
            --ntln-surface: #202020;
            --ntln-text: #c8c8c8;
            --ntln-text-soft: #f0f0f0;
            --ntln-accent: #f8f8f8;
            --ntln-hover: #65656540;
            --ntln-highlight: #f4f4f4;
            --ntln-shadow: 0 2px 8px color-mix(in srgb, currentColor 10%, transparent);
            --ntln-font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            --ntln-font-accent: 'Georgia', 'Times New Roman', serif;
            --ntln-scroll: #a4a4a4;
        }

        body {
            font-family: var(--ntln-font-main);
            background: var(--ntln-bg);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            margin: 0;
            font-size: 14px;
            color: var(--ntln-text);
        }

        .news-container {
            max-width: 900px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 20px;
            color: var(--ntln-text);
            margin: 0 auto !important;
        }

        .news-card {
            padding: 15px;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 15px;
            transition: 0.2s;
            position: relative;
            max-height: 600px;
            overflow: auto;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            background: linear-gradient(rgba(16, 16, 16, 0.7), rgba(16, 16, 16, 0.8)), var(--ntln-surface);
        }
       
        .news-card:hover {
            border-color: var(--ntln-accent);
        }

        .news-card a {
            color: var(--ntln-accent) !important;
            text-decoration: none;
            transition: all 0.2s ease;
            position: relative;
            padding: 2px 0;
            font-weight: 500;
        }

        .news-card a:hover {
            color: var(--ntln-text-soft);
            text-shadow: 0 0 5px color-mix(in srgb, var(--ntln-accent) 50%, transparent);
        }

        .activists-list a:hover, .posts-list a:hover {
            transform: translateX(3px);
        }

        .best-episode-desc a:hover {
            border-bottom-color: var(--ntln-accent);
        }

        .best-post-author a {
            font-family: var(--ntln-font-accent);
            font-size: 16px;
            color: var(--ntln-accent);
        }

        .activity-item a {
            display: block;
            padding: 8px 15px;
            margin: -8px -15px;
        }

        .activity-item a:hover {
            color: var(--ntln-accent);
            text-shadow: none;
        }

        .news-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 120px;
            position: relative;
            z-index: 2;
        }

        .avatar-wrapper {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            padding: 4px;
            position: fixed;
            overflow: hidden;
        }
       
        .avatar-pattern {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
       
        .avatar-img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            box-shadow: var(--ntln-shadow);
            background-color: var(--ntln-accent);
        }

        .news-meta {
            text-align: center;
            font-family: var(--ntln-font-main);
            padding: 6px;
            width: 10%;
            background: var(--ntln-hover);
            backdrop-filter: blur(4px);
            position: fixed;
            margin-top: 110px;
        }
       
        .news-date {
            font-size: 15px;
            color: var(--ntln-accent);
            font-weight: bold;
            font-family: var(--font_accent);
        }
       
        .news-number {
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 4px;
            padding-top: 4px;
        }

        .news-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: relative;
            z-index: 2;
            overflow-y: auto;
            padding-right: 5px;
            max-height: 100%;
        }
       
        .news-content::-webkit-scrollbar {
            width: 5px;
        }
       
        .news-content::-webkit-scrollbar-track {
            background: var(--ntln-hover);
            border-radius: 3px;
        }
       
        .news-content::-webkit-scrollbar-thumb {
            background: var(--ntln-scroll);
            border-radius: 3px;
        }
       
        .news-content::-webkit-scrollbar-thumb:hover {
            background: var(--ntln-accent);
        }

        .greeting-section {
            background: var(--ntln-hover);
            backdrop-filter: blur(4px);
            padding: 10px 12px;
            border-left: 4px solid var(--ntln-accent);
            font-family: var(--ntln-font-main);
            font-size: 13px;
            letter-spacing: 0.5px;
            line-height: 1.4;
        }
       
        .greeting-text {
            font-style: italic;
            white-space: pre-line;
        }
       
        .greeting-author {
            text-align: right;
            color: var(--ntln-accent);
            margin-top: 6px;
            font-family: var(--ntln-font-accent);
            font-size: 16px;
        }

        .activists-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
       
        .subsection {
            padding: 10px;
            background: var(--ntln-hover);
            backdrop-filter: blur(4px);
        }
       
        .subsection-title {
            font-family: var(--ntln-font-main);
            color: var(--ntln-accent);
            font-size: 15px;
            margin-bottom: 8px;
            padding-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
       
        .activists-list, .posts-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
       
        .activists-list li, .posts-list li {
            padding: 4px 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .activists-list li {
            flex-direction: row;
        }
       
        .posts-list li {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }
       
        .mini-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }
       
        .posts-list li .left-content {
            gap: 8px;
            display: flex;
            justify-content: flex-end !important;
            gap: 8px;
        }

        .posts-list li .mini-avatar {
            flex-shrink: 0;
        }
       
        .activists-list li:hover .mini-avatar,
        .posts-list li:hover .mini-avatar {
            transform: scale(1.1);
            border-color: var(--ntln-text-soft);
        }
       
        .badge {
            background: var(--ntln-accent);
            color: var(--ntln-surface);
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 20px;
            font-size: 9px;
            flex-shrink: 0;
        }

        .stats-block {
            background: var(--ntln-hover);
            backdrop-filter: blur(4px);
            padding: 8px 12px;
            font-size: 13px;
        }
       
        .stats-highlight {
            color: var(--ntln-accent);
            font-weight: bold;
            font-size: 16px;
        }

        .best-episode {
            background: var(--ntln-hover);
            backdrop-filter: blur(4px);
            padding: 12px;
            border-left: 4px solid var(--ntln-accent);
        }
       
        .best-episode-title {
            font-family: var(--ntln-font-main);
            color: var(--ntln-accent);
            font-size: 15px;
            margin-bottom: 6px;
        }
       
        .best-episode-desc {
            line-height: 1.4;
            font-style: italic;
            white-space: pre-line;
        }

        .best-post {
            background: var(--ntln-hover);
            backdrop-filter: blur(4px);
            padding: 12px;
            margin-top: 5px;
        }
       
        .best-post-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-family: var(--ntln-font-main);
            color: var(--ntln-accent);
            padding-bottom: 4px;
        }
       
        .best-post-author {
            font-family: var(--ntln-font-accent);
            font-size: 15px;
        }
       
        .best-post-content {
            line-height: 1.5;
            white-space: pre-line;
            font-size: 12px;
            max-height: 120px;
            overflow-y: auto;
            padding-right: 8px;
        }
       
        .best-post-content::-webkit-scrollbar {
            width: 4px;
            background: var(--ntln-hover);
        }
       
        .best-post-content::-webkit-scrollbar-thumb {
            background: var(--ntln-scroll);
        }

        .thanks-block {
            background: var(--ntln-hover);
            backdrop-filter: blur(4px);
            padding: 8px 12px;
            font-style: italic;
            text-align: center;
        }

        .activities-section {
            background: var(--ntln-hover);
            backdrop-filter: blur(4px);
            padding: 12px;
        }
       
        .activities-title {
            font-family: var(--ntln-font-main);
            color: var(--ntln-accent);
            font-size: 16px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
       
        .activities-title::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--ntln-accent);
            opacity: 0.3;
        }
       
        .activity-item {
            display: inline-block;
            background: var(--ntln-hover);
            margin-right: 8px;
            margin-bottom: 8px;
            font-size: 13px;
            transition: 0.2s;
            overflow: hidden;
            padding: 4px;
        }
       
        .activity-item:hover {
            border-color: var(--ntln-accent);
            background: var(--ntln-hover);
        }
       
        .activity-item a {
            display: block;
            padding: 6px 12px;
            color: var(--ntln-text);
            text-decoration: none;
        }
       
        .activity-item a:hover {
            color: var(--ntln-accent);
            text-shadow: none;
        }

        .farewell-section {
            background: var(--ntln-hover);
            backdrop-filter: blur(4px);
            padding: 12px;
            border-right: 4px solid var(--ntln-accent);
            text-align: right;
            font-family: var(--ntln-font-main);
            line-height: 1.4;
            white-space: pre-line;
        }
       
        .farewell-author {
            color: var(--ntln-accent);
            font-family: var(--ntln-font-accent);
            font-size: 16px;
            margin-top: 6px;
        }

        .news-footer {
            margin-top: 8px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
            padding-top: 8px;
            font-size: 10px;
        }
       
        .author-info {
            display: flex;
            align-items: center;
            gap: 4px;
        }
       
        .author-mini-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--ntln-accent);
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
            background-size: 70%;
            background-position: center;
            background-repeat: no-repeat;
        }

        @media (max-width: 700px) {
            .news-card {
                grid-template-columns: 1fr;
                max-height: none;
            }
            .news-left {
                width: 100%;
                flex-direction: row;
                justify-content: space-around;
            }
            .activists-section {
                grid-template-columns: 1fr;
            }
        }
       
        /* Адаптив от 540px */
        @media (max-width: 540px) {
            .news-card {
                grid-template-columns: 1fr;
                max-height: none;
                padding: 12px;
            }
           
            .news-left {
                width: 100%;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;
                gap: 10px;
                margin-bottom: 10px;
            }
           
            /* Аватар слева */
            .avatar-wrapper {
                position: relative !important;
                margin-top: 0;
                width: 80px;
                height: 80px;
                left: 0;
            }
           
            .avatar-img {
                width: 80px;
                height: 80px;
            }
           
            /* Мета-блок справа */
            .news-meta {
                position: relative !important;
                margin-top: 0;
                width: auto;
                min-width: 100px;
                right: 0;
                background: var(--ntln-hover);
                padding: 8px 12px;
            }
           
            .news-content {
                max-height: none;
                overflow-y: visible;
                padding-right: 0;
            }
           
            .activists-section {
                grid-template-columns: 1fr;
                gap: 10px;
            }
           
            .posts-list li {
                justify-content: flex-start;
                flex-direction: row-reverse;
            }
           
            .posts-list li .left-content {
                justify-content: flex-start !important;
            }
           
            .activity-item {
                margin-right: 5px;
                margin-bottom: 5px;
                font-size: 12px;
            }
           
            .best-post-content {
                max-height: 150px;
            }
        }
       
        /* Для совсем маленьких экранов */
        @media (max-width: 380px) {
            .news-left {
                flex-wrap: wrap;
                justify-content: center;
                gap: 15px;
            }
           
            .avatar-wrapper, .news-meta {
                position: relative !important;
                margin: 0;
            }
           
            .activists-list li, .posts-list li {
                font-size: 13px;
            }
           
            .mini-avatar {
                width: 35px;
                height: 35px;
            }
        }
    </style>

    <div class="news-container">
        <div class="news-card" style="background: linear-gradient(rgba(16, 16, 16, 0.7), rgba(16, 16, 16, 0.8)), url('https://upforme.ru/uploads/001c/a6/68/4/272592.jpg') no-repeat center center; background-size: cover;">
            <div class="news-left">
                <div class="avatar-wrapper">
                    <div class="avatar-pattern">
                        <div class="avatar-img" style="background-image: url('https://upforme.ru/uploads/001c/a6/68/4/253147.gif');"></div>
                    </div>
                </div>
                <div class="news-meta">
                    <div class="news-date">16.03.2026</div>
                    <div class="news-number">#2</div>
                    <div class="news-date">by serpent</div>
                </div>
            </div>

            <div class="news-content">
                <div class="greeting-section">
                    <div class="greeting-text">
                      Всех с понедельником, дорогие друзья! Надеемся этот день не был для вас суров. И чтобы он стал лучше, мы не сем для вас наши вторые, но первые официальные новости!)
                    </div>
                </div>
               
              <div class="stats-block">
    Мы безумно рады тому, что у нас уже столь много людей ходит с красивыми профилями! Мы еще немножко помучаем вас кодами,  но в скором времени на форуме появятся приятные дополнения, как и возможно персонализировать свой профиль!
                </div>
                <!-- Статистика постов -->
                <div class="stats-block">
             На прошлой неделе писались и посты и флуд был столь шумным, что что можно было моргнуть и пропустить много чего. Так давайте же присмотримся к этим героям внимательнее!
                </div>

                <!-- Активисты с аватарками -->
                <div class="activists-section">
                    <div class="subsection">
                        <div class="subsection-title">Возглавили парад</div>
                        <ul class="activists-list">
                            <li>
                                <span class="badge">2 поста</span>
                                <img class="mini-avatar" src="https://upforme.ru/uploads/001c/a6/68/4/510669.png">
                                <a href="/profile.php?id=10">Ruby Torrance</a>
                            </li>
                            <li>
                                <span class="badge">2 поста</span>
                                <img class="mini-avatar" src="https://upforme.ru/uploads/001c/a6/68/4/44702.jpg">
                                <a href="/profile.php?id=26">Gideon Ancrum</a>
                            </li>
                            <li>
                                <span class="badge">1 поста</span>
                                <img class="mini-avatar" src="https://upforme.ru/uploads/001c/a6/68/4/760188.png">
                                <a href="/profile.php?id=4">Alasdair Gibson</a>
                            </li>
                        </ul>
                        <div style="margin-top: 8px; font-style: italic;">Разгон был явно взят в это воскресенье, так что эт неделя будет явно... особенной! </div>
                    </div>
                   
                    <!-- Флудеры с аватарками справа -->
                    <div class="subsection">
                        <div class="subsection-title">Во флуде</div>
                        <ul class="posts-list">
<li>
    <span class="left-content">
     
                                 <a href="/profile.php?id=8">Theodora Torrance</a> </span>
                                <img class="mini-avatar" src="https://upforme.ru/uploads/001c/a6/68/4/583244.gif">
</li>
<li>
    <span class="left-content">
       
                                <a href="/profile.php?id=14">Selma Torrance</a> </span>
                                <img class="mini-avatar" src="https://upforme.ru/uploads/001c/a6/68/4/444409.png">
</li>
<li>
    <span class="left-content">
<a href="/profile.php?id=20">Evan Thorn</a></span>
<img class="mini-avatar" src="https://upforme.ru/uploads/001c/a6/68/4/615346.gif">
</li>                                                                       
                        </ul>
                        <div style="margin-top: 8px;  font-style: italic;">Продолжайте, дорогие друзья. С вами интересно беседовать! </div>
                    </div>
                </div>

                <!-- Лучший эпизод -->
                <div class="best-episode">
                    <div class="best-episode-title">Эпизодом недели мы рады назвать</div>
                    <div class="best-episode-desc">
                       <a href="/viewtopic.php?id=19#p15059"> from past</a>. Разговоры из прошлого, что могут быть ключом к настоящему. Какие ваши секреты услышит лишь вода,  <a href="/profile.php?id=65">Caleb Morgan</a> и <a href="/profile.php?id=29">Hope Wendell</a>?
                    </div>
                </div>

                <!-- Лучший пост -->
                <div class="best-post">
                    <div class="best-post-header">
                        <span>Лучший пост недели</span>
                        <span class="best-post-author"><a href="/viewtopic.php?id=34#p20394">Jeremy Stone</a></span>
                    </div>
                    <div class="best-post-content">
          Неловкая ситуация наконец разрешилась, так и не разразившись бурей. Внутренне Джереми выдохнул. Настроить против себя напарницу в первое же своё появление всего одной фразой — это особый антиталант. Иногда ему казалось, что, не контролируй он каждый свой шаг, действие и слово, с ним общались бы только рыбки в офисе. Не мудрено: он никогда не славился покладистым и мягким характером, да и откуда ему было взяться с такими-то моральными принципами и хобби? К тому же с Рид они уже работали, и, в отличие от многих людей, она смогла заслужить искреннее уважение Джереми. Она была живым и приятным человеком, не лезла с лишними расспросами и при всём этом оставалась профессионалом. Будь таких людей в агентстве побольше, возможно, Стоуну пришлось бы меньше изображать «доброго соседа».
                    </div>
                </div>

                <!-- Благодарность -->
                <div class="thanks-block">
                    Спасибо, что творите и делитесь этим с нами!
                </div>

                <!-- Активности -->
                <div class="activities-section">
                    <div class="activities-title">А теперь - активности!</div>
<p>Уже совсем скоро можно будет рассказать свое мнение о книге, что была выбрана для <a href="/viewtopic.php?id=117"> Литературного клуба</a>. А так же, кажется, в этот вторник двери вновь открывает наш <a href="/viewtopic.php?id=118&p=2#p20420">Кинотеатр</a>! И теперь наши любимый постоянные участники!</p>
                    <div>
                        <span class="activity-item"><a href="/viewtopic.php?id=21#p20814">🧩 Обновлены пазлы!</a></span>
                        <span class="activity-item"><a href="/viewtopic.php?id=22&p=2#p20813">📊 Кто Вы из Битвы Экстрасенсов?</a></span>
<span class="activity-item"><a href="/viewtopic.php?id=51#p4761">🔢 Доступны Судоку!</a></span>
<span class="activity-item"><a href="/viewtopic.php?id=144#p20812">⌨ Знакомьтесь, Вордли!</a></span>
<span class="activity-item"><a href="/viewtopic.php?id=51#p4761">🍪 Забегите за печеньем с предсказанием!</a></span>
<span class="activity-item"><a href="/viewtopic.php?id=51#p4761">🀧 Задайте вопрос картам таро!</a></span>
                    </div>
                </div>

                <!-- Прощание -->
                <div class="farewell-section">
               Отличной вам недели!)
                </div>             
            </div>
        </div>
    </div>

</html>[/html]

[hideprofile]