лавка плашек и фонов «твилфитт и таттинг»

[html]
<style>.balance-block {
background: var(--profilebg);
border-radius: 8px;
padding: 12px;
margin-top: 15px;
}

.balance-block label {
display: block;
font-size: 11px;
color: var(--profiletext);
margin-bottom: 5px;
}

.balance-input {
width: 100%;
padding: 8px;
background: var(--post-bg);
border: 1px solid var(--profilelink);
border-radius: 5px;
color: var(--textcolor);
font-size: 14px;
font-weight: bold;
box-sizing: border-box;
}

.remaining-block {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--profilelink);
text-align: center;
}

.remaining-label {
font-size: 11px;
color: var(--profiletext);
}

.remaining-value {
font-size: 18px;
font-weight: bold;
color: var(--profilebg);
background: var(--profilelink);
padding: 2px 8px;
border-radius: 5px;
margin: 0 5px;
}

.remaining-currency {
font-size: 10px;
color: var(--profiletext);
}</style>
<div id="dressingRoomApp" class="dressing-room">
<div class="hint" style="margin: 15px; text-align: center; text-transform: lowercase; font-size: 13px">
в этой теме вы можете приобрести обновочки для профиля. теперь можно выбрать из уже готовых вариантов (целуем золотые ручки наших мастеров), а можно, как обычно, заказать что-то лично для себя, но чуть дороже. <b>коллекция будет периодически обновляться</b>, так что рекомендуем оформить подписку на наш каталог!<br>
Настройки сохраняются автоматически | При генерации копируется весь код вместе с итоговой суммой за ваши покупки
</div>
<div class="two-columns">
<div class="left-column">
<div class="preview-label">↓ ваш профиль будет выглядеть так ↓</div>
<div id="previewContainer" class="demo-profile"></div>

<button id="resetBtn" class="reset-btn">Сбросить всё</button>

<div class="result-block">
<div class="total-cost-block" id="totalCostBlock">
<div class="total-cost-label">ИТОГО К ОПЛАТЕ:</div>
<span id="totalCost">0</span>
<div class="total-cost-label">(галеонов)</div>
</div>

<div class="balance-block">
<label>Галеонов в профиле:</label>
<input type="number" id="userBalance" class="balance-input" placeholder="Введите количество" value="0" min="0">
<div class="remaining-block">
<span class="remaining-label">Остаток после покупки:</span>
<span id="remainingCost" class="remaining-value">0</span>
<span class="remaining-currency">галеонов</span>
</div>
</div>

<div class="code-container">
<code id="generatedCode">нажмите кнопку "сгенерировать код"</code>
</div>
<button id="generateBtn" class="generate-btn">Сгенерировать код</button>
</div>
</div>

<div class="right-column">

<h3> Фоны профиля
<div class="category-controls">
<label class="gift-checkbox"><input type="checkbox" id="giftBg"> Подарок</label>
<button class="clear-category-btn" data-clear="bg">Очистить</button>
</div>
</h3>

<div class="shop-container">
<div class="shop-content">
<div class="collection-title">летняя коллекция <span class="collection-badge">NEW</span></div>
<div id="shop-bg-new" class="shop-grid"></div>

<div class="collection-title">весенняя коллекция</div>
<div id="shop-bg-old" class="shop-grid"></div>
</div>
</div>

<div class="url-row">
<label>🔗 Своя ссылка на фон (200 галеонов):</label>
<div class="url-input-group">
<input type="text" id="customBgUrl" placeholder="https://example.com/background.png">
</div>
</div>


<h3>Плашки
<div class="category-controls">
<label class="gift-checkbox"><input type="checkbox" id="giftPlashka"> Подарок</label>
<button class="clear-category-btn" data-clear="plashka">Очистить</button>
</div>
</h3>

<div class="shop-container">
<div class="shop-content shop-content-plashka">
<div class="collection-title">летняя коллекция <span class="collection-badge">NEW</span></div>
<div id="shop-plashka-new" class="shop-grid"></div>

<div class="collection-title">весенняя коллекция</div>
<div id="shop-plashka-old" class="shop-grid"></div>
</div>
</div>

<div class="url-row">
<label>🔗 Своя ссылка на плашку (200 галеонов):</label>
<div class="url-input-group">
<input type="text" id="customPlashkaUrl" placeholder="https://example.com/plashka.png">
</div>
</div>


<div class="text-controls">
<label>Текст на плашке (бесплатно!):</label>
<div class="text-input-group">
<input type="text" id="plashkaTextInput" placeholder="Введите текст для плашки" value="maleficas et earum haeresim">
</div>

<details class="phrases-spoiler">
<summary>показать готовые фразы</summary>

<div class="collection-title">Новые фразы</div>
<div id="phrases-new" class="phrases-grid"></div>

<div class="collection-title">Старые фразы</div>
<div id="phrases-old" class="phrases-grid"></div>
</details>

<div class="color-controls">
<label> Цвет текста:</label>
<input type="color" id="textColorPicker" class="color-picker" value="#FF818A">
</div>

<div class="grayscale-controls">
<span>Ч/Б фильтр для плашки:</span>
<button id="grayscaleFullBtn" class="grayscale-btn">100% ч/б</button>
<button id="grayscaleHalfBtn" class="grayscale-btn">50% ч/б</button>
<button id="grayscaleOffBtn" class="grayscale-btn">Отменить</button>
</div>
</div>


<h3>Иконки
<div class="category-controls">
<label class="gift-checkbox"><input type="checkbox" id="giftEmoji">Подарок</label>
<button class="clear-category-btn" data-clear="emoji">Очистить</button>
</div>
</h3>

<div class="shop-container">
<div class="shop-content">
<div class="collection-title">летняя коллекция <span class="collection-badge">NEW</span></div>
<div id="shop-emoji-new" class="shop-grid"></div>

<div class="collection-title">весенняя коллекция</div>
<div id="shop-emoji-old" class="shop-grid"></div>
</div>
</div>

<div class="url-row">
<label>🔗 Своя ссылка на иконку (50 галеонов):</label>
<div class="url-input-group">
<input type="text" id="customEmojiUrl" placeholder="https://example.com/emoji.png">
</div>
</div>

</div>
</div>
</div>