[html]<!-- адаптация -->
<style>
.jam-first-post {
    max-width: 480px;
    width: 100% !important;
    margin: 15px auto !important;
    background: #121212;
    background: linear-gradient(180deg, #1e2922 0%, #121212 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px;
    color: #ffffff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    text-align: left;
    box-sizing: border-box !important;
    font-family: CircularSp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.jam-fp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 8px; }
.jam-fp-logo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1db954; text-transform: lowercase; }
.jam-fp-logo svg { width: 22px !important; height: 22px !important; fill: #1db954 !important; flex-shrink: 0; }
.jam-fp-status { display: flex; align-items: center; gap: 6px; font-size: 11px; background: rgba(29, 185, 84, 0.15); color: #1db954; padding: 4px 10px; border-radius: 50px; font-weight: 700; text-transform: lowercase; white-space: nowrap; }
.jam-fp-dot { width: 6px; height: 6px; background-color: #1db954; border-radius: 50%; box-shadow: 0 0 8px #1db954; }
.jam-fp-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.jam-fp-cover { width: 70px; height: 70px; background: #282828; border-radius: 12px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.jam-fp-cover svg { width: 34px; height: 34px; fill: #1db954; }
.jam-fp-info { flex-grow: 1; min-width: 0; }
.jam-fp-title { font-size: 18px; font-weight: 800; margin: 0 0 4px 0; color: #ffffff; text-transform: lowercase; word-break: break-word; }
.jam-fp-desc { font-size: 11px; color: #b3b3b3; margin: 0; text-transform: lowercase; line-height: 1.3; }
.jam-fp-form { display: flex; flex-direction: column; gap: 8px; background: rgba(255, 255, 255, 0.03); padding: 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.05); box-sizing: border-box !important; }
.jam-fp-input-group { display: flex; gap: 8px; align-items: center; width: 100%; box-sizing: border-box !important; }
.jam-fp-input { flex-grow: 1; min-width: 0; width: 100% !important; background: #000000; border: 1px solid #333333 !important; border-radius: 500px !important; color: #ffffff !important; font-size: 12px !important; padding: 8px 14px !important; height: 38px !important; text-transform: lowercase !important; outline: none !important; box-sizing: border-box !important; }
.jam-fp-btn { all: unset !important; background: #1db954 !important; color: #000000 !important; border-radius: 500px !important; padding: 0 16px !important; height: 38px !important; font-weight: 700 !important; font-size: 12px !important; cursor: pointer !important; text-transform: lowercase !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; letter-spacing: 0.5px !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; box-sizing: border-box !important; }

@media (max-width: 480px) {
    .jam-first-post { padding: 14px; margin: 5px auto !important; border-radius: 14px; }
    .jam-fp-hero { gap: 10px; margin-bottom: 12px; }
    .jam-fp-cover { width: 56px; height: 56px; }
    .jam-fp-cover svg { width: 28px; height: 28px; }
    .jam-fp-title { font-size: 15px; }
    .jam-fp-desc { font-size: 10px; }
    .jam-fp-input-group { flex-direction: column; gap: 8px; }
    .jam-fp-input { width: 100% !important; }
    .jam-fp-btn { width: 100% !important; }
}
</style>

<!-- подключение внешнего скрипта -->
<script src="https://forumstatic.ru/files/001a/e1/ae/92427.js?v=2"></script>

<!-- разметка шапки-плеера -->
<div class="jam-first-post">
    <div class="jam-fp-header">
        <div class="jam-fp-logo">
            <svg viewBox="0 0 24 24">
                <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.899 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.019zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141 C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.18-.1.2-1.02-.24-.18-.6.24-1.2.84-1.38 4.26-1.26 11.28-1.02 15.72 1.62.54.3.72 1.02.42 1.56-.3.42-1.02.6-1.56.3z"/>
            </svg>
            <span>spotify jam session</span>
        </div>
        <div class="jam-fp-status">
            <span class="jam-fp-dot"></span>
            в эфире
        </div>
    </div>

    <div class="jam-fp-hero">
        <div class="jam-fp-cover">
            <svg viewBox="0 0 24 24">
                <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
            </svg>
        </div>
        <div class="jam-fp-info">
            <h1 class="jam-fp-title">делимся вайбом</h1>
            <p class="jam-fp-desc">введи трек в формате <b>исполнитель - название песни</b> и жми «послушать», чтобы запустить его в джем!</p>
        </div>
    </div>

    <div class="jam-fp-form">
        <div class="jam-fp-input-group">
            <input type="text" id="jam-track-input" class="jam-fp-input" placeholder="например: bad omens - specter" />
            <button type="button" id="jam-send-btn" class="jam-fp-btn">послушать</button>
        </div>
    </div>
</div>[/html]