[html]<inv-fittingroom>
    <div class='inv-fit-header'>
        <span>DRESSING ROOM</span>
        <div>чтобы примерить элемент оформления, необходимо кликнуть по нему!<br>
        свои фоны и уголки подтягиваются из вашей личной страницы автоматически.</div>
    </div>

    <div class="inv-fit-layout">
        <!-- ЛЕВАЯ КОЛОНКА (ПРОФИЛЬ) -->
        <inv-fitprofile>
            <div class="inv-fitting-room">
                <div class='inv-fitting-block-prof'>
                    <ul>
                        <li class="pa-fld1 inv-fitting-bg">
                            <img src='https://forumstatic.ru/files/001c/85/6d/39868.png' />
                        </li>
                        <li class="pa-author inv-fitting-author"><a href='#'>username</a></li>
                        <li class="pa-title">тестовый статус</li>
                        <li class="pa-fld4"><div>раса персонажа</div></li>
                        <li class="pa-avatar inv-fitting-avatar"><img src='https://forumstatic.ru/files/001c/85/6d/39868.png' /></li>
                        <li class="pa-fld3 inv-fitting-lz" style='margin-bottom: 10px;'>
                            <lz>
                                <a href="/pages/123" class='modal-link'> Name Surname, 00 </a>
                                <span> местоположение </span>
                                some text or some quote
                            </lz>
                        </li>
                        <li class="pa-fld2 inv-fitting-plaque">
                            <div class="plaque">
                                <l1>i hear god's a good imaginary friend</l1>
                                <l2>hey coach he's ready put him in</l2>
                                <img src="https://forumstatic.ru/files/001c/96/9f/76010.png">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </inv-fitprofile>

        <!-- ПРАВАЯ КОЛОНКА -->
        <inv-fitcont>
            <inv-fittingbg data-title='ваши фоны'>
                <div class="inv-fit-items-grid">
                    <!-- Фоны подгрузятся сюда скриптом -->
                </div>
            </inv-fittingbg>

            <inv-fittingplaqueimg data-title='ваши уголки'>
                <div class="inv-fit-items-grid">
                    <!-- Уголки подгрузятся сюда скриптом -->
                </div>
            </inv-fittingplaqueimg>

            <inv-fittingtext data-title='текст плашки'>
                <div class="inv-plaque-inputs-col">
                    <input type="text" id="inv-ctrl-text1" class="inv-plaque-input" placeholder="текст первого порядка" maxlength="50">
                    <input type="text" id="inv-ctrl-text2" class="inv-plaque-input" placeholder="текст второго порядка" maxlength="60">
                </div>
                <div class="inv-plaque-buttons-col">
                    <button type="button" class="inv-fit-copy">скопировать код</button>
                    <button type="button" class="inv-fit-cleardata">очистить</button>
                </div>
            </inv-fittingtext>
        </inv-fitcont>
    </div>
</inv-fittingroom>

<style>
inv-fittingroom * { box-sizing: border-box; }
inv-fittingroom {
    display: flex;
    flex-direction: column;
    background:url(https://forumstatic.ru/files/001c/97/3a/57005.png) repeat top / 200px;
    border-radius: 4px;
    padding: 20px;
    width: 875px;
    margin: 5px auto 0 !important;
}

.inv-fit-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 26px 26px 13px;
    background: rgba(244, 244, 244, 1);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.inv-fit-header {
    width: 100%;
    display: flex;
    background: rgba(233, 233, 233, 1);
    border-radius: var(--bradius-minor, 4px);
    position: relative;
    border: 1px solid rgba(174, 174, 174, 0.5);
    padding: 45px 20px 20px;
    align-items: center;
    margin-bottom: 25px;
}

.inv-fit-header span {
    background-color: rgba(233, 231, 224, 1);
    padding: 5px 15px;
    font-family: Instrument Serif;
    font-weight: 600;
    color: rgba(55, 55, 55, 1);
    font-size: 28px;
    text-transform: uppercase;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -15px;
}

.inv-fit-header div {
    color: rgb(var(--text-secondary));
    font-size: 11px;
    text-align: center;
    width: 100%;
}

inv-fitprofile { width: 260px; flex-shrink: 0; }
inv-fitprofile .plaque { margin-left: -3px; }
inv-fitprofile ul { padding: 0!important; }

.inv-fitting-room { width: 100%; position: sticky; top: 0; height: min-content; }
.inv-fitting-block-prof { width: 100%; border-radius: 5px; padding-bottom: 11px; }
.inv-fitting-block-prof ul {
    width: 212px; margin: auto;
    background: rgb(var(--bg-profile));
    display: flex; flex-wrap: wrap; justify-content: center;
    border: 1px solid rgba(177, 183, 200, 1);
    border-radius: 0 0 5px 5px; align-items: center;
    padding: 8px 0 0 !important; list-style: none;
    background: rgba(233, 233, 233, 1); margin-top: 8px;
}
.inv-fitting-block-prof li.pa-fld1 img { margin-left: -1px; }
.inv-fitting-author a { border-bottom: none!important; }
.inv-fitting-room #tuser { display: none!important; }
.inv-fitting-room li.pa-fld4 > div { left: 6px; height: 19px; }

inv-fitcont {
    display: flex; flex-direction: column; gap: 25px;
    flex-grow: 1; width: calc(100% - 280px);
}

inv-fittingbg, inv-fittingplaqueimg, inv-fittingtext {
    border-radius: var(--bradius-minor, 4px);
    position: relative; padding: 25px 15px 15px;
    background: rgba(233, 233, 233, 1);
    border: 1px solid rgba(174, 174, 174, 0.3); width: 100%;
}

inv-fittingbg::before, inv-fittingplaqueimg::before, inv-fittingtext::before {
    content: attr(data-title); position: absolute; top: -12px; left: 20px;
    display: flex; justify-content: center; align-items: center;
    font-family: 'Playfair Display', serif; font-weight: 600; font-size: 12px;
    color: black !important; padding: 3px 15px 2px;
    background-color: rgba(233, 231, 224, 1);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5); text-transform: lowercase;
}

.inv-fit-items-grid {
    display: flex; gap: 10px; overflow-y: auto; scrollbar-gutter: stable;
    flex-wrap: nowrap; scroll-behavior: smooth;
}
.inv-fit-items-grid:empty::before {
    content: "Инвентарь пуст или загружается...";
    font-size: 11px; font-style: italic; color: #888;
    padding: 20px; width: 100%; text-align: center;
}

inv-fittingbg .inv-fit-items-grid { height: 210px; }
inv-fittingbg .inv-fit-items-grid div { width: 213px; height: 200px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
inv-fittingbg .inv-fit-items-grid img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

inv-fittingplaqueimg .inv-fit-items-grid { height: 55px; }
inv-fittingplaqueimg .inv-fit-items-grid div { width: 90px; height: 45px; flex-shrink: 0; }
inv-fittingplaqueimg .inv-fit-items-grid img {
    width: 100%; height: 100%; border-radius: 50% 0 5px 0;
    border-top-left-radius: 46% 100%; object-fit: cover; cursor: pointer;
}

inv-fittingtext { display: flex; gap: 15px; align-items: stretch; }
.inv-plaque-inputs-col { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.inv-plaque-buttons-col { display: flex; flex-direction: column; gap: 10px; width: 180px; }

.inv-plaque-inputs-col input {
    width: 100%; height: 35px !important; padding: 0 15px;
    border-radius: 4px !important; background: rgb(var(--text-primary), 0.05) !important;
    border: 1px solid rgba(174, 174, 174, 0.4);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); margin: 0 !important;
}

.inv-plaque-buttons-col button {
    width: 100%; height: 35px; padding: 0 15px !important; border: none;
    cursor: pointer; font: 400 12px var(--font-cat-title, 'Roboto'); font-style: italic;
    color: rgb(var(--canvas-primary, 255, 255, 255)) !important;
    border-radius: 50px; background: rgb(var(--accent, 13, 108, 91));
    transition: 0.2s ease; margin: 0 !important;
}

.inv-plaque-buttons-col button.inv-fit-cleardata {
    background: #e6e6e6; color: #333 !important; border: 1px solid #ccc;
}
.inv-plaque-buttons-col button:hover { opacity: 0.9; transform: translateY(-1px); }

.inv-fit-active-item {filter: drop-shadow(2px 2px 1px rgb(var(--accent), .3)); opacity: 0.5; transition: opacity 0.2s; }
</style>[/html][hideprofile]