[hideprofile]
[html]<style>
.ftbox{max-width:760px;margin:16px auto;font-family:var(--font-main);color:var(--text);font-size:12px}
.ftbox input.fttab-radio{position:absolute;left:-9999px}
.fttabs{display:flex;gap:8px;margin-bottom:12px}
.fttabs label{flex:1;text-align:center;height:34px;line-height:34px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--muted);font-size:12px;text-transform:lowercase;cursor:pointer;transition:.2s}
.fttabs label:hover{border-color:var(--soft)}
#ft-a:checked~.fttabs label[for=ft-a],#ft-b:checked~.fttabs label[for=ft-b]{background:var(--accent);color:var(--white);border-color:var(--accent)}
.ftpanel{display:none}
#ft-a:checked~.ftpanel-a{display:block}#ft-b:checked~.ftpanel-b{display:block}
.fitwrap{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.fitinfo{flex-basis:100%;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:11px;line-height:1.6;color:var(--muted)}
.fitinfo b{color:var(--accent)}
.fitcol{flex:0 0 236px}
#fitBox .post-author{display:block!important}
.fitshop,.stshop{flex:1;min-width:260px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:14px}
.sthead{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sthead .l{font-size:11px;color:var(--muted);text-transform:lowercase}.sthead .v{font-size:18px;font-weight:700;color:var(--accent)}
.fittitle{font-size:11px;color:var(--muted);text-transform:lowercase;margin-bottom:6px}
#fitHeaders,#stHeaders{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:200px;overflow:auto}
#fitHeaders .h,#stHeaders .h{aspect-ratio:16/7;border-radius:8px;border:2px solid transparent;cursor:pointer;background:var(--bg) center/cover no-repeat}
#fitHeaders .h.sel,#stHeaders .h.sel{border-color:var(--accent)}
#fitIcons,#stIcons{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-height:200px;overflow:auto}
#fitIcons .ic,#stIcons .ic{aspect-ratio:1;border-radius:6px;border:2px solid transparent;cursor:pointer;background:var(--bg) center/cover no-repeat}
#fitIcons .ic.sel,#stIcons .ic.sel{border-color:var(--accent)}
#fitPlates{display:flex;gap:8px;align-items:center}#fitPlates .c{width:26px;height:26px;border-radius:6px;border:2px solid transparent;cursor:pointer}#fitPlates .c.sel{border-color:var(--text)}
.fitfields{display:flex;flex-direction:column;gap:8px}
.fitfields input{height:32px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--white);font-size:12px;color:var(--text);outline:none;font-family:var(--font-main)}
.fittwo{display:flex;gap:8px}.fittwo input{flex:1;min-width:0}
.fitadd{height:32px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--steel);font-family:var(--font-main);font-size:11px;font-weight:600;text-transform:lowercase;cursor:pointer;width:100%;margin-top:8px}
.fitadd:hover{border-color:var(--accent);color:var(--accent)}
.shcart{margin-top:14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
#shCart{display:flex;flex-direction:column;gap:4px;font-size:11px}
.fitline{display:flex;justify-content:space-between;color:var(--text)}
.fittotal{padding-top:6px;border-top:1px dashed var(--border);margin-top:4px;font-weight:700;display:flex;flex-direction:column;gap:2px}
.fitcheck{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);text-transform:lowercase}
.fitrow{display:flex;gap:8px}
.fitbtn{flex:1;height:34px;border:none;border-radius:8px;background:var(--accent);color:var(--white);font-family:var(--font-main);font-size:12px;font-weight:600;text-transform:lowercase;cursor:pointer}.fitbtn:hover{background:var(--soft)}
.fitbtn2{flex:1;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--steel);font-family:var(--font-main);font-size:12px;font-weight:600;text-transform:lowercase;cursor:pointer}.fitbtn2:hover{border-color:var(--accent);color:var(--accent)}
#shOut{width:100%;min-height:80px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--white);font-family:var(--font-main);font-size:11px;color:var(--text);resize:vertical}
.fit-vitrina{margin-top:14px;padding:26px 20px;background:var(--panel);border:1px dashed var(--dusty);border-radius:12px;text-align:center}
.fit-vitrina__icon{font-size:20px;color:var(--dusty);margin-bottom:6px}.fit-vitrina__text{font-size:12px;color:var(--soft);text-transform:lowercase;letter-spacing:.02em}
</style>
<div class="ftbox">
<input type="radio" name="fttop" id="ft-a" class="fttab-radio" checked>
<input type="radio" name="fttop" id="ft-b" class="fttab-radio">
<div class="fttabs">
<label for="ft-a">примерочная</label>
<label for="ft-b">за звёзды · лимитка</label>
</div>
<div class="ftpanel ftpanel-a">
<div class="fitwrap">
<div class="fitinfo"><b>хедер</b> — 600 (с плашкой) · <b>иконка</b> — 200 · в др скидка 50%. выбери товар и нажми «добавить в корзину».</div>
<div class="fitcol"><div id="fitBox" style="font-size:12px;color:var(--muted)">загружаю профиль…</div></div>
<div class="fitshop">
<div><div class="fittitle">хедеры</div><div id="fitHeaders"></div>
<button type="button" id="fitAddHdr" class="fitadd">добавить хедер в корзину</button></div>
<div><div class="fittitle">иконки</div><div id="fitIcons"></div>
<button type="button" id="fitAddIcn" class="fitadd">добавить иконку в корзину</button></div>
<div><div class="fittitle">цвет плашки</div><div id="fitPlates"><span style="color:var(--muted)">— выбери хедер —</span></div></div>
<div class="fitfields">
<input id="inAva" type="text" placeholder="ссылка на аватар">
<input id="inTitle" type="text" placeholder="личное звание (имя, возраст)">
<div class="fittwo"><input id="inU" type="text" placeholder="плашка — верх"><input id="inD" type="text" placeholder="плашка — низ"></div>
</div>
</div>
</div>
</div>
<div class="ftpanel ftpanel-b">
<div class="sthead"><span class="l">✦ лимитированные хедеры и иконки за звёзды</span><span class="v" id="stBalance">…</span></div>
<div class="stshop">
<div><div class="fittitle">лимитированные хедеры</div><div id="stHeaders"></div>
<button type="button" id="stAddHdr" class="fitadd">добавить хедер в корзину</button></div>
<div><div class="fittitle">лимитированные иконки</div><div id="stIcons"></div>
<button type="button" id="stAddIcn" class="fitadd">добавить иконку в корзину</button></div>
</div>
</div>
<div class="shcart">
<div class="fittitle">корзина</div>
<div id="shCart" data-empty="корзина пуста" data-money="деньги" data-stars="звёзды"></div>
<label class="fitcheck"><input type="checkbox" id="fitProfile"> поставить в профиль</label>
<div class="fitrow">
<button type="button" id="shToForm" class="fitbtn" data-label-hdr="хедер" data-label-icn="иконка" data-label-title="личное звание" data-label-pl="плашка" data-label-prof="поставить в профиль" data-yes="да" data-no="нет">в форму ответа</button>
<button type="button" id="shCopy" class="fitbtn2" data-done="скопировано">скопировать код</button>
</div>
<textarea id="shOut" readonly style="display:none"></textarea>
</div>
<div class="fit-vitrina">
<div class="fit-vitrina__icon">✦</div>
<div class="fit-vitrina__text">витрина скоро откроется</div>
</div>
</div>[/html]