[html]<fittingroom>

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

<fitprofile>

<div class="fitting-room" style='display: block!important'>

<div class='fitting-block-prof'>

<ul>

<li class="pa-fld1 fitting-bg">
<img src='https://forumstatic.ru/files/001c/85/6d/39868.png' /></li>

<li class="pa-author fitting-author"><a href='#'>username</a></li>

<li class="pa-title">тестовый статус</li>

<li class="pa-avatar fitting-avatar"><img src='https://forumstatic.ru/files/001c/85/6d/39868.png' /></li>

<li class="pa-fld2 fitting-lz" style='margin-bottom: 10px;'> <lz> <a href="#" style="cursor: var(--cursor-pointer);"> Имя Фамилия </a> <span> краткое описание </span> Где-то глубоко внутри киберпространства, среди бесконечных световых границ, он чувствовал себя живым. </lz></li>
           

<li class="pa-fld5 fitting-plaque"><div class="plaque" style="background: linear-gradient(45deg, black, #788b7b, #0d6c5b);"><p>первая строка текста</p><p>вторая строка текста</p></div><proficon><img src="https://forumstatic.ru/files/001c/17/76/35191.png"></proficon></li>

</div>

<div class="plaque-controls" style="padding: 10px; ">
            <div style="font-weight:bold; margin-bottom:10px;">настройки плашки</div>
           
            <input type="text" id="ctrl-text1" class="plaque-input" placeholder="Строка 1" maxlength="30" style="width:100%; margin-bottom:5px; box-sizing:border-box;">
            <input type="text" id="ctrl-text2" class="plaque-input" placeholder="Строка 2" maxlength="40" style="width:100%; margin-bottom:10px; box-sizing:border-box;">
           
            <div style="display:flex; flex-direction:column; gap:8px;">
<input type="checkbox" id="ctrl-gradient-check" style="display:none;">

<label for="ctrl-gradient-check" class="gradient-btn-style">
    Использовать градиент
</label>
               
               <div style="display:flex; gap:10px; align-items:center;">
                  <label style="font-size:11px;">Цвет 1: <input type="color" id="ctrl-color1" value="#0d6c5b"></label>
                 
                  <label id="wrap-color2" style="font-size:11px; display:none; align-items: center;">
                     Цвет 2: <input type="color" id="ctrl-color2" value="#000000">
                  </label>
               </div>
               
               <label style="font-size:11px;">Цвет текста: <input type="color" id="ctrl-text-color" value="#ffffff"></label>
               
               <input type="hidden" id="ctrl-bg-url" value="">
            </div>
         </div>
<button type="button" class="fit-copy">копировать оформление</button>
<button type="button" class="fit-cleardata">очистить</button>
</ul>

</div></fitprofile>

<fitcont>

<fittingicons data-title='иконки: 000 монет'>
    <input type="text" class="icon-input" placeholder="вставьте ссылку на изображение" >
<button type="button" class="fit-icon">применить</button>

<div>

<div><img src='https://i.imgur.com/hHVCqyz.png' /></div>
<div><img src='https://i.imgur.com/3pbkk45.gif' /></div>
<div><img src='https://i.imgur.com/lUDUvn9.gif' /></div>
<div><img src='https://i.imgur.com/yqPmt4d.png' /></div>
<div><img src='https://i.imgur.com/lqtAj4E.png' /></div>
<div><img src='https://i.imgur.com/sjLMfhi.png' /></div>
<div><img src='https://i.imgur.com/tAQbTvd.png' /></div>
<div><img src='https://i.imgur.com/LVzM3TK.png' /></div>
<div><img src='https://i.imgur.com/GxtoXeQ.gif' /></div>
<div><img src='https://i.imgur.com/9k3eG6p.gif' /></div>
<div><img src='https://i.imgur.com/W92ydyN.gif' /></div>
<div><img src='https://i.imgur.com/EWAeK3d.gif' /></div>
<div><img src='https://i.imgur.com/ED1Kvn6.png' /></div>
<div><img src='https://i.imgur.com/ksuT1oe.gif' /></div>
<div><img src='https://i.imgur.com/5Hyfuo9.gif' /></div>
<div><img src='https://i.imgur.com/lvTu72q.png' /></div>
<div><img src='https://i.imgur.com/WtjoFZ2.png' /></div>
<div><img src='https://i.imgur.com/MeyXo91.gif' /></div>
<div><img src='https://i.imgur.com/OsWQKYU.gif' /></div>
<div><img src='https://i.imgur.com/xZMN45x.gif' /></div>
<div><img src='https://i.imgur.com/xVatnWt.gif' /></div>
<div><img src='https://i.imgur.com/L4Mn9p2.gif' /></div>
<div><img src='https://i.imgur.com/ZKymWQb.gif' /></div>
<div><img src='https://i.imgur.com/utzSsGn.gif' /></div>

</div>

</fittingicons>

<fittingbg data-title='фоны: 000 монет'>
    <input type="text" class="bg-input" placeholder="вставьте ссылку на изображение" >
<button type="button" class="fit-bg">применить</button>

<div>

<div><img src='https://i.imgur.com/tO8zOuI.jpeg' /></div>
<div><img src='https://i.imgur.com/NHZAt15.jpeg' /></div>
<div><img src='https://i.imgur.com/8ZfcNDV.jpeg' /></div>
<div><img src='https://i.imgur.com/iOy5Ety.jpeg' /></div>
<div><img src='https://i.imgur.com/UkCQTs8.jpeg' /></div>
<div><img src='https://i.imgur.com/ej5rjSS.jpeg' /></div>
<div><img src='https://i.imgur.com/2tMq3U4.jpeg' /></div>
<div><img src='https://i.imgur.com/gF90XDG.jpeg' /></div>
<div><img src='https://i.imgur.com/ws4cxlV.jpeg' /></div>
<div><img src='https://i.imgur.com/OP9Y6hU.jpeg' /></div>
<div><img src='https://i.imgur.com/CFSX8U5.jpeg' /></div>
<div><img src='https://i.imgur.com/V7PRzIG.png' /></div>
<div><img src='https://i.imgur.com/ADJPsOo.jpeg' /></div>
<div><img src='https://i.imgur.com/VHoKOfT.jpeg' /></div>
<div><img src='https://i.imgur.com/WbES9Hk.jpeg' /></div>
<div><img src='https://i.imgur.com/49gkxaA.jpeg' /></div>
<div><img src='https://i.imgur.com/ZmYMP2o.jpeg' /></div>
<div><img src='https://i.imgur.com/QFNx22r.jpeg' /></div>
<div><img src='https://i.imgur.com/cnwSA1V.jpeg' /></div>
<div><img src='https://i.imgur.com/Ts5nfYG.jpeg' /></div>
<div><img src='https://i.imgur.com/t2doVcm.jpeg' /></div>
<div><img src='https://i.imgur.com/EUNn7ov.jpeg' /></div>
<div><img src='https://i.imgur.com/ZPChQp2.jpeg' /></div>
<div><img src='https://i.imgur.com/vsukS1b.jpeg' /></div>

</div>

</fittingbg>

<fittingplaque data-title='фоны плашек: 000 монет'>
<div>

<div class="gradient" data-colors="#615142,#CBD5D3" data-angle="45deg" style='background: linear-gradient(45deg, #615142,#CBD5D3)'></div>
<div class="gradient" data-colors="#79583e,#3a2a2b" data-angle="45deg" style='background: linear-gradient(45deg, #79583e,#3a2a2b)'></div>
<div class="gradient" data-colors="#5b6759,#8b805a" data-angle="45deg" style='background: linear-gradient(45deg, #5b6759,#8b805a)'></div>
<div class="gradient" data-colors="#b3b7ad,#351b00" data-angle="45deg" style='background: linear-gradient(45deg, #b3b7ad,#351b00)'></div>
<div class="gradient" data-colors="#c9beb4,#d8d1ca" data-angle="45deg" style='background: linear-gradient(45deg, #c9beb4,#d8d1ca)'></div>
<div class="gradient" data-colors="#82623d,#e5cba0" data-angle="45deg" style='background: linear-gradient(45deg, #82623d,#e5cba0)'></div>
<div class="gradient" data-colors="#3f3f3f,#c2c2c2" data-angle="45deg" style='background: linear-gradient(45deg, #3f3f3f,#c2c2c2)'></div>
<div class="gradient" data-colors="#5e0e1f,#3a0710" data-angle="45deg" style='background: linear-gradient(45deg, #5e0e1f,#3a0710)'></div>
<div class="gradient" data-colors="#295135,#b18943" data-angle="45deg" style='background: linear-gradient(45deg, #295135,#b18943)'></div>
<div class="gradient" data-colors="#22354e,#0a0f19" data-angle="45deg" style='background: linear-gradient(45deg, #22354e,#0a0f19)'></div>
<div class="gradient" data-colors="#1f473f,#0a0f19" data-angle="45deg" style='background: linear-gradient(45deg, #1f473f,#0a0f19)'></div>
<div class="gradient" data-colors="#8b7452,#f5e9cf" data-angle="45deg" style='background: linear-gradient(45deg, #8b7452,#f5e9cf)'></div>
<div class="gradient" data-colors="#4e4155,#4d5d5d" data-angle="45deg" style='background: linear-gradient(45deg, #4e4155,#4d5d5d)'></div>
<div class="gradient" data-colors="#c45344,#41272e" data-angle="45deg" style='background: linear-gradient(45deg, #c45344,#41272e)'></div>
<div class="gradient" data-colors="#3b6088,#92332f" data-angle="45deg" style='background: linear-gradient(45deg, #3b6088,#92332f)'></div>
<div class="color" data-color="#688885" style=' background: #688885'></div>
<div class="color" data-color="#4d4550" style=' background: #4d4550'></div>
<div class="color" data-color="#312d2c" style=' background: #312d2c'></div>
<div class="color" data-color="#676451" style=' background: #676451'></div>
<div class="color" data-color="#a98466" style=' background: #a98466'></div>
<div class="color" data-color="#27262b" style=' background: #27262b'></div>
<div class="color" data-color="#684a30" style=' background: #684a30'></div>

</div></fittingplaque>

<fittingplaqueimg data-title='картинки для плашек: 000 монет'>
    <input type="text" class="bg-input" placeholder="вставьте ссылку на изображение" >
<button type="button" class="fit-bg">применить</button>

<div>

<div><img src='https://i.imgur.com/tO8zOuI.jpeg' /></div>
<div><img src='https://i.imgur.com/NHZAt15.jpeg' /></div>
<div><img src='https://i.imgur.com/8ZfcNDV.jpeg' /></div>
<div><img src='https://i.imgur.com/iOy5Ety.jpeg' /></div>
<div><img src='https://i.imgur.com/UkCQTs8.jpeg' /></div>
<div><img src='https://i.imgur.com/ej5rjSS.jpeg' /></div>
<div><img src='https://i.imgur.com/2tMq3U4.jpeg' /></div>
<div><img src='https://i.imgur.com/gF90XDG.jpeg' /></div>
<div><img src='https://i.imgur.com/ws4cxlV.jpeg' /></div>
<div><img src='https://i.imgur.com/OP9Y6hU.jpeg' /></div>
<div><img src='https://i.imgur.com/CFSX8U5.jpeg' /></div>
<div><img src='https://i.imgur.com/V7PRzIG.png' /></div>
<div><img src='https://i.imgur.com/ADJPsOo.jpeg' /></div>
<div><img src='https://i.imgur.com/VHoKOfT.jpeg' /></div>
<div><img src='https://i.imgur.com/WbES9Hk.jpeg' /></div>
<div><img src='https://i.imgur.com/49gkxaA.jpeg' /></div>
<div><img src='https://i.imgur.com/ZmYMP2o.jpeg' /></div>
<div><img src='https://i.imgur.com/QFNx22r.jpeg' /></div>
<div><img src='https://i.imgur.com/cnwSA1V.jpeg' /></div>
<div><img src='https://i.imgur.com/Ts5nfYG.jpeg' /></div>
<div><img src='https://i.imgur.com/t2doVcm.jpeg' /></div>
<div><img src='https://i.imgur.com/EUNn7ov.jpeg' /></div>
<div><img src='https://i.imgur.com/ZPChQp2.jpeg' /></div>
<div><img src='https://i.imgur.com/vsukS1b.jpeg' /></div>

</div>

</fittingplaqueimg >

</fitcont>

<div class='add-wrapper'>

<div class='fit-ppbgs' data-title='фоны лс: 000 фунтов'><div>

<div><img src="https://i.imgur.com/uCCpL43.png"></div>
<div><img src="https://i.imgur.com/uGjaFsJ.png"></div>
<div><img src="https://i.imgur.com/WiYMTYg.png"></div>
<div><img src="https://i.imgur.com/PZbaYc4.jpeg"></div>
<div><img src="https://i.imgur.com/K1PqBp9.png"></div>
<div><img src="https://i.imgur.com/rnAv83L.png"></div>
<div><img src="https://i.imgur.com/IGMWejV.png"></div>
<div><img src="https://i.imgur.com/IQTyRh6.jpeg"></div>

</div></div>

</div>

</fittingroom>

<style>
/* примерочная */

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

.fit-header span {
    background-color: rgba(233, 231, 224, 1);
    padding: 1px 4px 3px;
    font-family: 'Playfair Display';
    font-weight: 600;
    color: rgba(70, 70, 70, 1);
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0%;
    text-align: center;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -10px;

}

.fit-header div {
color: rgb(var(--text-secondary));
font-size: 11px;
}

fittingroom .fit-buff {
    background: rgb(var(--canvas-quarternary));
    border-radius: var(--bradius-minor);
    width: 370px;
    height: 147px;
    position: relative;
    padding: 12px 8px;
    border: 1px solid rgba(174, 174, 174, 0.5);
}

fittingroom .fit-buff > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    box-sizing: content-box;
    overflow: auto;
    padding-left: 8px;
    padding-top: 1px;
    margin-top: 12px;
    height: 108px;
    scrollbar-gutter: stable;
    align-content: flex-start;
}

fittingroom .fit-buff div img {
    background: rgb(var(--canvas-secondary-rgb));
    padding: 3px;
    border-radius: 50%;
    box-sizing: content-box;
    overflow: visible;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

fittingroom .fit-ppbgs {
    margin-top: 10px;
    border-radius: 5px;
    width: 370px;
    height: 188px;
    position: relative;
    padding: 12px 8px;
    background: rgba(233, 233, 233, 1);
    border: 1px solid rgba(174, 174, 174, 0.3);
    width: 100%;
}

fittingroom .fit-ppbgs > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    box-sizing: content-box;
    overflow: auto;
    padding-left: 8px;
    padding-top: 1px;
    margin-top: 12px;
    height: 148px;
    scrollbar-gutter: stable;
    align-content: flex-start;
}

fittingroom .fit-ppbgs div img {
    border-radius: 10px;
    box-sizing: content-box;
    width: 262px;
    height: 145px;
    cursor: pointer;
    object-fit: cover;
    object-position: top;
}

fittingroom .fit-gifts::before,
fittingroom .fit-tokens::before,
fittingroom .fit-ppbgs::before,
fittingroom .fit-buff::before {
content: attr(data-title);
    left: 50%;
    transform: translateX(-50%);
    content: attr(data-title);
    position: absolute;
    top: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    z-index: 10;
    font: 500 10px var(--font-main);
    padding: 3px 18px 2px;
    background-color: rgba(233, 231, 224, 1);
    padding: 1px 4px 3px;
    font-family: 'Playfair Display';
    font-weight: 600;
    font-size: 12px;
    color: black !important;
    line-height: 1;
    letter-spacing: 0%;
    text-align: center;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
}

fittingroom .fit-tokens {
    background: rgb(var(--canvas-quarternary));
    border-radius: var(--bradius-minor);
    width: 370px;
    height: 147px;
    position: relative;
    padding: 12px 8px;
    border: 1px solid rgba(174, 174, 174, 0.5);
    flex-grow: 1;
}

fittingroom .fit-tokens > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    box-sizing: content-box;
    overflow: auto;
    padding-left: 8px;
    padding-top: 1px;
    height: 205px;
    scrollbar-gutter: stable;
    align-content: flex-start;
    margin-top: 12px;
}

fittingroom .fit-tokens > div > div  {
    width: 64px;
    height: 64px;
    background: rgb(var(--canvas-secondary-rgb));
    display: flex;
    justify-content: center;
    align-items: center;
   border-radius: 5px;
}

fittingroom .fit-tokens div img {
    box-sizing: content-box;
    width: 45px;
    height: 45px;
    object-fit: contain;
    cursor: pointer;
    object-fit: cover;
}

.add-wrapper {
    display: flex;
    gap: 25px 10px;
    flex-direction: column;
    width: 100%;
}

fittingicons img,
fittingroom input:not([type="text"]),
fittingroom .fitting-lz {
cursor: pointer;
}

#lz-editor-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 10000;
    display: none; justify-content: center; align-items: center;
}
.lz-editor-box {
    background: #fff; width: 500px; max-width: 90%;
    padding: 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; gap: 10px;
}
.lz-editor-header { font-weight: bold; font-size: 16px; margin-bottom: 5px; }
.lz-toolbar {
    display: flex; gap: 10px; align-items: center;
    background: #f0f0f0; padding: 5px; border-radius: 4px; border: 1px solid #ddd;
}
.lz-btn {
    cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; background: #fff; border-radius: 3px; font-size: 12px;
}
.lz-btn:hover { background: #e9e9e9; }
textarea#lz-textarea {
    width: 100%; height: 150px; resize: vertical;
    font-family: monospace; font-size: 13px; padding: 10px;
    border: 1px solid #ccc; box-sizing: border-box;
}
.lz-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; }
.lz-save { background: #0d6c5b; color: #fff; border: none; }
.lz-cancel { background: #ccc; border: none; }

.fit-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #333;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 9999;
    display: none;
    font-size: 14px;
    opacity: 0.9;
    text-transform: lowercase;
    font-family: var(--font-main);
}

fittingroom {
display: flex;
    background-color: rgb(var(--text-primary), .04);
    background-image: var(--temp-bg);
    background-repeat: no-repeat;
    box-sizing: border-box;
    border-radius: 4px;
    justify-content: flex-start;
    padding: 20px;
    width: 875px;
    gap: 10px;
    margin: 5px auto 0 !important;
    flex-wrap: wrap;
}

fittingroom input[type="checkbox"] {
display: none;
}

fittingroom #ctrl-gradient-check + .gradient-btn-style  {
    text-transform: lowercase;
    background: rgb(var(--light-accent), .4);
    color: white;
    text-align: center;
    padding: 3px;
    border-radius: 4px;
    cursor: pointer;
    transition: .4s ease-in-out;
    font: 700 11px Inter !important;
}

#ctrl-gradient-check:hover + .gradient-btn-style {
    background: #f5f5f5;
    border-color: #bbb;
}

#ctrl-gradient-check:checked + .gradient-btn-style {
    background: rgb(var(--text-primary), .7);
    color: #fff;
    box-shadow: 0 2px 5px rgba(13, 108, 91, 0.3);
}

fittingroom * {
box-sizing: border-box;
}

fitprofile ul {
padding: 0!important;

}

.fitting-block-prof {
margin: 3px 0px 0px 0px;
    float: left;
    width: 224px;
    position: relative;
    display: block;
    height: auto;
    background: rgba(233, 230, 226, 1);
    border: 1px solid rgba(207, 207, 207, 1);
    border-radius: 5px;
    padding-top: 34px;
    padding-bottom: 11px;
    z-index: 0;
}

.fitting-block-prof ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 212px;
    margin: auto;
    background: rgb(var(--bg-profile));
    list-style: none;
    box-shadow: 0px 4px 11px -6px rgb(33 1 9);
    margin-top: 0px;
    border-radius: 10px;
}

.fitting-room {
    float: left;
    width: 260px;
    position: relative;
    display: block;
    height: auto;
    margin: -9px 0px 15px -3px;
    /* overflow: hidden; */
    border-radius: 10px;
    padding-bottom: 16px;
    background: url(https://i.pinimg.com/736x/3f/1c/e2/3f1ce22….jpg) no-repeat center top / cover;
    z-index: 0;
    top: 0px;
    position: sticky;
    border: var(--border-body);
    height: min-content;
    position: relative;
    max-height: 420px;
}

.plaque-controls {
    margin-top: 5px;
    padding: 10px;
    display: block;
    float: left;
}
.plaque-controls > div:first-of-type {
    margin-bottom: 10px;
    margin-left: 45px;
    background-color: rgba(233, 231, 224, 1);
    padding: 1px 4px 3px;
    font-family: 'Playfair Display';
    font-weight: 600;
    font-size: 12px;
    width: fit-content;
    color: rgba(70, 70, 70, 1) !important;
    line-height: 1;
    letter-spacing: 0%;
    text-align: center;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
    transition: .3s ease;
}

.plaque-controls button {
font: 700 12px roboto flex;

}

fitcont {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px 10px ;
}

fittingbg,
fittingicons {
    grid-column: span 2;
    border-radius: var(--bradius-minor);
    width: 577px;
    position: relative;
    padding: 21px 8px 12px;
    background: rgba(233, 233, 233, 1);
    border: 1px solid rgba(174, 174, 174, 0.3);
}

fittingplaqueimg,
fittingplaque {
border-radius: var(--bradius-minor);
width: 284px;
position: relative;
padding: 21px 8px 12px;
    background: rgba(233, 233, 233, 1);
    border: 1px solid rgba(174, 174, 174, 0.3);
}

fittingicons {
height: 147px;
}

fittingicons > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    box-sizing: content-box;
    overflow: auto;
    padding-left: 8px;
    padding-top: 1px;
    height: 80px;
    scrollbar-gutter: stable;
    align-content: flex-start;
}

fittingicons > div img {
    background: rgb(var(--canvas-secondary-rgb));
    padding: 2px;
    border-radius: 50%;
    border: 1px solid rgba(216, 211, 202, 1);
    background: rgba(239, 238, 234, 1);
    box-sizing: content-box;
    overflow: visible;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* fittingroom::before {
    content: 'the store';
    font: var(--fw900) 32px var(--font-cat-title);
    position: absolute;
    color: rgb(var(--text-color-secondary), .2);
    right: 22px;
    top: 16px;

} */

fittingplaqueimg > div,
fittingplaque > div,
fittingbg > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    box-sizing: content-box;
    overflow: auto;
    padding-left: 7px;
    padding-top: 1px;
    height: 165px;
    scrollbar-gutter: stable;
    align-content: flex-start;
}

fittingplaqueimg > div,
fittingplaque > div {
    height: 165px;
    justify-content: center;
}

fittingplaqueimg > div > div {position: relative;}

fittingplaque > div {
    height: 215px;
}

fittingplaqueimg > div img,
fittingplaque > div img,
fittingbg >div img {
    border-radius: 10px;
    box-sizing: content-box;
    width: 79px;
    height: 121px;
    object-fit: cover;
    object-position: top;
    cursor: pointer;
    image-rendering: auto;
}

fittingbg >div img {
    width: 100%;
    height: 100%;
}

fittingplaqueimg  > div img,
fittingplaque > div > div,
fittingplaque > div img {
    width: 214px;
    height: 43px;
    border-radius: 10px;
    cursor: pointer;
}

fittingplaqueimg,
fittingplaque,
fittingbg {
height: 253px;
}

plaquedesc {
    padding: 20px;
    display: flex;
    width: 290px;
    height: 96px;
    color: rgb(var(--text-color-secondary), .6);
    text-align: center;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--bradius-minor);
    background: rgb(var(--canvas-quarternary), .3);
}

fittingplaqueimg::before,
fittingplaque::before,
fittingbg::before,
fittingicons::before,
plaquedesc::before {
    content: attr(data-title);
    position: absolute;
    top: -10px;
    left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    z-index: 10;
    font: 500 10px var(--font-main);
    padding: 3px 18px 2px;
    background-color: rgba(233, 231, 224, 1);
    padding: 1px 4px 3px;
    font-family: 'Playfair Display';
    font-weight: 600;
    font-size: 12px;
    color: black !important;
    line-height: 1;
    letter-spacing: 0%;
    text-align: center;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.fitting-plaque p {
padding: 0!important;
margin: 0!important;
margin-bottom: 0!important;
    line-height: 140%!important
}

.fitting-plaque p:first-of-type {font-size: 14px!important}
.fitting-plaque p:last-of-type {font-size: 11px!important}

.fitting-plaque img {
box-sizing: content-box;
}

img.fit-selected {
opacity: .3;
}

fittingicons > div > div {
    position: relative;
    display: flex;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(216, 211, 202, 1);
    border-radius: 50%;
    background: rgba(239, 238, 234, 1);
    justify-content: center;
    align-items: center;
    z-index: 2;
}

fittingicons > div > div:has(> img.fit-selected) {
  outline: 1px solid rgb(var(--accent));
    filter: hue-rotate(323deg) contrast(1.3);
}

fittingicons > div > div:has(> img.fit-selected)::before {
content: '';
background: url(https://forumstatic.ru/files/001c/74/d2/12074.svg);
background-size: 10px 10px;
position: absolute;
width: 10px;
    height: 10px;
    top: -1px;
    right: -2px;
    z-index: 4;
}

fittingbg > div > div {
    border-radius: 10px;
position: relative;
    width: 176px;
    height: 159px;
}

fittingbg > div img.fit-selected {
  outline: 1px solid rgb(var(--accent));
}

fittingplaque > div img.fit-selected {
  outline: 1px solid rgb(var(--accent));
}

fittingplaque > div > div.fit-active-item {
position: relative
}

fittingicons > div > div.fit-active-item::before,
fittingplaqueimg > div > div.fit-active-item::before,
fittingplaque > div > div.fit-active-item::before,
fittingbg > div > div.fit-active-item::before {
content: '';
background: url(https://forumstatic.ru/files/001c/74/d2/12074.svg);
background-size: 10px 10px;
position: absolute;
width: 10px;
    height: 10px;
    top: 4px;
    right: 4px;
    z-index: 4;
    filter: hue-rotate(323deg) contrast(1.3);
}

.plaque-controls > input:nth-of-type(1),
.plaque-controls > input:nth-of-type(2) {
    width: 224px;
    height: 25px;
    border-radius: 4px;
    margin-bottom: 7px;
}

.plaque-controls {
    width: 220px;
    margin-left: 0px !important;
}

.plaque-controls > div > input[type="color"] {
    padding: 0px !important;
    background: transparent;
    width: 28px;
    border-radius: 47px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

.plaque-controls > div > input[type="text"] {
    width: 70px;
    height: 25px;
    border-radius: 4px;
    cursor: text;
}

.plaque-controls button {
    font: 400 12px roboto flex;
    padding: 2px 10px !important;
    border: none;
    background: rgb(var(--accent), .4);
    border-radius: 30px;
    margin: 0 !important;
    color: rgba(39, 39, 39, 1);
}

fittingroom button {
    padding: 3px 11px 5px !important;
    border: 0px solid #bbbbbb;
    cursor: pointer;
    transition: var(--anim-hover);
    font: 400 11px var(--font-cat-title);
    font-style: italic;
    line-height: 1;
    text-transform: lowercase;
    color: rgb(var(--canvas-primary)) !important;
    border-radius: 50px;
    background: rgb(var(--accent));
}

fitprofile > button {
    padding: 2px 7.6px !important;
}

fittingroom button:hover {
    box-shadow: 0px 2px 7px -2px rgb(var(--accent));
}

fitprofile {
    width: 246px;
    padding: 14px;
    border-radius: 4px;
    background: rgba(233, 233, 233, 1);
    border: 1px solid rgba(174, 174, 174, 0.3);
}

.plaque-controls span {
    text-align: left;
    display: block;
    padding: 1px 4px 4px;
    color: rgb(var(--text-dark-accent), .7);
}

.fitting-plaque {
    margin-bottom: 0em !important;
   /*  left: 17px;
    top: -1px; */
}

.fitting-room li.pa-posts, .fitting-room li.pa-respect, .fitting-room li.pa-fld4 {
    margin-bottom: 10px;
    margin-top: -3px;
}

.fitting-room li.pa-posts span:first-child, .fitting-room li.pa-respect span:first-child, .fitting-room li.pa-fld1 span:first-child, .fitting-room li.pa-fld5 span:first-child {
    font-size: 0px;
}

.fitting-room li.pa-posts:before {
    content: '';
    left: 17px;
}

fittingroom input {
    background: rgb(var(--text-primary), 0.1) !important;
    height: 25px !important;
    border-radius: 4px !important;
    margin-bottom: 7px !important;
    box-shadow: inset 0 0 7px -4px #241013d9;
}

fittingroom .icon-input,
fittingroom .bg-input,
fittingroom .plaq-input {
    width: 467px !important;
    margin-left: 6px;
}

fittingroom .bg-input {
    margin-bottom: 23px !important;
      margin-top: 2px !important;
}

fittingroom fittingplaqueimg .bg-input {
    width: 174px !important;
}

.fitting-author a {
border-bottom: none!important;
}

.fitting-room #tuser {
display: none!important;
}

</style>

[/html][hideprofile]