[hideprofile]
  УНИВЕРСАЛЬНАЯ МАГИЧЕСКАЯ ЛАВКА
  — все продается и все покупается... важна лишь цена
  [html]
  <!--CSS-->
  <style>
  #STORE_1 *, #STORE_1 *::before, #STORE_1 *::after {
    box-sizing: border-box;
  }

  /* ── Tabs ─────────────────────────────────────── */
  .store-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--codex-card-border, rgba(86, 77, 40, 0.4));
    margin-bottom: 16px;
  }

  .store-tab-btn {
    display: inline-block;
    padding: 6px 22px 7px;
    cursor: pointer;
    font-family: "Throne", serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 10px;
    color: var(--codex-text-muted, #1a180b);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    opacity: 0.55;
    transition: opacity 0.2s, color 0.2s;
    user-select: none;
  }

  .store-tab-btn:hover {
    color: var(--codex-text-primary, #4a400d);
    opacity: 0.85;
  }

  .store-tab-btn.active {
    color: var(--codex-text-primary, #4a400d);
    border-color: var(--codex-card-border, rgba(86, 77, 40, 0.4));
    background: var(--codex-card-bg, #00000014);
    opacity: 1;
  }

  .store-tab-buy {
    align-self: center;
    padding: calc(0.5 * var(--base-spacing, 8px)) calc(2 * var(--base-spacing, 8px));
    padding-top: 9px;
    font-family: var(--accent-font, "Throne", serif);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background-color: var(--button-bg, #1d1815);
    border: var(--button-border, 1px solid #564d28);
    color: var(--button-text-color, #a9a899);
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 0px 10px #29260961 inset;
    transition: all 0.5s ease-in-out 0s;
    white-space: nowrap;
  }

  .store-tab-buy:disabled {
    opacity: 0.35;
    cursor: default;
    margin-left: auto;
  }

  .store-tab-buy:not(:disabled):hover {
    background-color: var(--button-hover-bg, #29221e);
    color: var(--button-hover-text-color, #c9c8b8);
    border-color: var(--button-hover-border, #6b6237);
  }

  .store-tab-buy.copied {
    color: var(--button-hover-text-color, #c9c8b8);
    background-color: var(--button-hover-bg, #29221e);
    border-color: var(--button-hover-border, #6b6237);
  }

  .store-tab-price {
    margin-left: auto;
    align-self: center;
    padding: 0 4px 0 10px;
    font-family: "Throne", serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--codex-price-color, var(--codex-text-primary, #4a400d));
    display: none;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
  }

  .store-tab-price.visible {
    display: flex;
  }

  .store-tab-price i {
    opacity: 0.8;
  }

  /* ── Main layout ──────────────────────────────── */
  .store-layout {
    display: flex;
    gap: calc(2 * var(--base-spacing));
    align-items: stretch;
    height: 531px;
    overflow: hidden;
  }

  /* ── Left column: panels ──────────────────────── */
  .store-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--quote-input-bg);
    border-radius: 8px;
  }

  .store-panel {
    display: none;
  }

  .store-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
  }

  /* Section header — codex style with gradient dividers */
  .store-section-header {
    font-family: "Throne", serif;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--codex-text-primary, #4a400d);
    text-transform: uppercase;
    font-size: 10px;
    margin-bottom: var(--base-spacing, 8px);
    display: flex;
    align-items: center;
    gap: var(--base-spacing, 8px);
  }

  .store-section-header::before,
  .store-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--codex-text-divider, rgba(46, 40, 8, 0.4)), transparent);
  }

  .store-price-icon {
    width: 18px;
    height: auto;
    opacity: 0.75;
  }

  /* Items grid — codex card image area */

  .store-items-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 10px;
      box-sizing: border-box;
  }

  /* Plashka items */
  .plashka {
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color 0.15s;
    flex-basis: 25%;
  }

  .plashka input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .plashka img {
    width: 100%;
    display: block;
  }

  .plashka:has(input:checked) {
    border-color: var(--codex-card-accent, #4a400d);
  }

  .plashka:has(input:checked) img {
    filter: brightness(1.1);
  }

  /* Background items — portrait 213×369 */
  .store-panel-bg .store-items-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .store-bg-item {
    position: relative;
    cursor: pointer;
    aspect-ratio: 213 / 369;
    overflow: hidden;
    border-radius: 4px;
    line-height: 0;
    border: 1px solid var(--codex-card-border, rgba(86, 77, 40, 0.4));
    transition: border-color 0.15s;
  }

  .store-bg-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .store-bg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: filter 0.15s;
  }

  .store-bg-item:has(input:checked) {
    border-color: var(--codex-card-accent, #4a400d);
    box-shadow: 0 0 0 1px var(--codex-card-accent, #4a400d);
  }

  .store-bg-item:has(input:checked) img {
    filter: brightness(1.1);
  }

  /* ── Background sub-tabs ──────────────────────── */
  .store-bg-subtabs {
    display: flex;
    gap: 0;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--codex-card-border, rgba(86, 77, 40, 0.4));
    flex-shrink: 0;
  }

  .store-bg-subtab {
    display: inline-block;
    padding: 5px 16px 6px;
    cursor: pointer;
    font-family: "Throne", serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 9px;
    color: var(--codex-text-muted, #1a180b);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    opacity: 0.55;
    transition: opacity 0.2s, color 0.2s;
    user-select: none;
  }

  .store-bg-subtab:hover {
    color: var(--codex-text-primary, #4a400d);
    opacity: 0.85;
  }

  .store-bg-subtab.active {
    color: var(--codex-text-primary, #4a400d);
    border-color: var(--codex-card-border, rgba(86, 77, 40, 0.4));
    background: var(--codex-card-bg, #00000014);
    opacity: 1;
  }

  .store-bg-subpanel {
    display: none;
    flex: 1;
    overflow: auto;
  }

  .store-bg-subpanel.active {
    display: block;
  }

  /* ── Right column: sidebar ────────────────────── */
  .store-sidebar {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* Avatar upload — codex card */
  .store-avatar-upload {
    font-size: var(--base-font-size, 11px);
    font-family: var(--base-font, "Verdana", sans-serif);
    color: var(--codex-text-muted, #1a180b);
    text-align: center;
    padding: 10px;
    background: var(--codex-card-bg, #00000014);
    border: 1px solid var(--codex-card-border, rgba(86, 77, 40, 0.4));
    border-radius: 6px;
  }

  .store-avatar-upload input[type="file"] {
    display: block;
    width: 100%;
    margin-top: 5px;
    font-size: 10px;
    color: var(--codex-text-muted, #1a180b);
  }

  /* Override post-author positioning inside store */
  #STORE_1 .post-author {
    margin-left: 0;
    top: 0;
  }
  </style>

  <!--HTML-->
  <div id="STORE_1">

    <div class="store-tabs">
      <span class="store-tab-btn active" data-tab="plashki" data-price="500">плашки</span>
      <span class="store-tab-btn" data-tab="bg" data-price="2000">фон</span>
      <div class="store-tab-price" id="store-tab-price">
        <i class="fa-solid fa-coins"></i>
        <span id="store-tab-price-value"></span>
      </div>
      <button class="store-tab-buy" id="store-tab-buy" disabled>купить</button>
    </div>

    <div class="store-layout">

      <!-- ── Left: item panels ── -->
      <div class="store-left">

        <!-- ПЛАШКИ -->
        <div class="store-panel store-panel-plashki active" id="store-panel-plashki">
          <div class="store-items-grid">
          </div>
        </div>

        <!-- ФОН -->
        <div class="store-panel store-panel-bg" id="store-panel-bg">
          <div class="store-bg-subtabs">
            <span class="store-bg-subtab active" data-subtab="static">статичный · 2000 монет</span>
            <span class="store-bg-subtab" data-subtab="animated">анимированный · 3000 монет</span>
          </div>
          <div class="store-bg-subpanel active" id="store-bg-subpanel-static">
            <div class="store-items-grid"></div>
          </div>
          <div class="store-bg-subpanel" id="store-bg-subpanel-animated">
            <div class="store-items-grid"></div>
          </div>
        </div>

      </div><!-- /.store-left -->

      <!-- ── Right: sidebar (shared across tabs) ── -->
      <div class="store-sidebar">

        <div class="store-avatar-upload">
          загрузи свой аватар
          <input type="file" id="addImage">
        </div>

        <div class="post-author online" id="prof1">
          <ul>
            <li class="pa-author">
              <span class="acchide">Автор:&nbsp;</span>
              <a href="#" onclick="return false;">Name Surname</a>
            </li>
            <li class="pa-title">статус персонажа</li>
            <li class="pa-avatar item2" id="ava1">
              <img src="" id="preview-avatar-img" alt="" style="display:none">
            </li>
            <li class="pa-fld2">
              <div class="lzname"><a href="#" onclick="return false;">Имя, 00</a></div>
              <div class="lzsoc">ВИД</div>
              <div class="lztext">описание персонажа — превью</div>
            </li>
            <div class="repa">
              <li class="pa-posts">
                <span class="fld-name"><a href="#">Сообщений: </a></span> 0
              </li>
              <li class="pa-respect">
                <span class="fld-name"><a href="#">Репутация</a>:</span>
                <span>+0</span>
              </li>
              <li class="pa-fld3">
                <span class="fld-name">баллы:</span> 0
              </li>
              <li class="pa-fld4">
                <span class="fld-name"></span>
                <span class="GamePst">0</span>
              </li>
            </div>
            <li class="pa-online"><strong>Активен сейчас</strong></li>
            <li class="pa-fld1" id="preview-plashka">
              <a href="#" onclick="return false;">
                <img id="preview-plashka-img" src="" alt="" style="display:none">
              </a>
            </li>
          </ul>
        </div>

      </div><!-- /.store-sidebar -->

    </div><!-- /.store-layout -->

  </div><!-- #STORE_1 -->

  <script type="text/javascript">
  // ── Render items from SHOP_DATA (id prefix determines type: 's' = static bg, 'a' = animated bg, 'p' = plashka) ──
  function renderStore() {
    var grid = document.querySelector('#store-panel-plashki .store-items-grid');
    if (grid) {
      grid.innerHTML = SHOP_DATA.filter(function(item) { return item.id[0] === 'p'; }).map(function(item) {
        return '<label class="plashka" data-id="' + item.id + '"><input type="radio" name="plsh" value="' + item.id + '" onchange="storeSelectPlashka(this.value)"><img src="' + item.url + '" loading="lazy" decoding="async"></label>';
      }).join('');
    }

    var staticGrid = document.querySelector('#store-bg-subpanel-static .store-items-grid');
    if (staticGrid) {
      staticGrid.innerHTML = SHOP_DATA.filter(function(item) { return item.id[0] === 's'; }).map(function(item) {
        return '<label class="store-bg-item" data-id="' + item.id + '"><input type="radio" name="pbg" value="' + item.id + '" onchange="storeSelectBg(this.value,\'static\')"><img src="' + item.url + '" loading="lazy" decoding="async"></label>';
      }).join('');
    }
    var animGrid = document.querySelector('#store-bg-subpanel-animated .store-items-grid');
    if (animGrid) {
      animGrid.innerHTML = SHOP_DATA.filter(function(item) { return item.id[0] === 'a'; }).map(function(item) {
        return '<label class="store-bg-item" data-id="' + item.id + '"><input type="radio" name="pbg" value="' + item.id + '" onchange="storeSelectBg(this.value,\'animated\')"><img src="' + item.url + '" loading="lazy" decoding="async"></label>';
      }).join('');
    }
  }

  (function() {
    var s = document.createElement('script');
    s.src = 'https://forumstatic.ru/files/001c/b0/4e/92540.js';
    s.onload = renderStore;
    document.head.appendChild(s);
  })();

  // ── Tab switching ──────────────────────────────
  document.querySelectorAll('#STORE_1 .store-tab-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var tab = this.dataset.tab;
      document.querySelectorAll('#STORE_1 .store-tab-btn').forEach(function(b) { b.classList.remove('active'); });
      document.querySelectorAll('#STORE_1 .store-panel').forEach(function(p) { p.classList.remove('active'); });
      this.classList.add('active');
      var panel = document.getElementById('store-panel-' + tab);
      if (panel) panel.classList.add('active');
    });
  });

  document.querySelectorAll('#STORE_1 .store-bg-subtab').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var sub = this.dataset.subtab;
      document.querySelectorAll('#STORE_1 .store-bg-subtab').forEach(function(b) { b.classList.remove('active'); });
      document.querySelectorAll('#STORE_1 .store-bg-subpanel').forEach(function(p) { p.classList.remove('active'); });
      this.classList.add('active');
      var panel = document.getElementById('store-bg-subpanel-' + sub);
      if (panel) panel.classList.add('active');
    });
  });

  document.getElementById('store-tab-buy').addEventListener('click', async function () {
    const code = this.dataset.code;
    if (!code) return;

    const btn = this;

    try {
      // Modern clipboard API
      await navigator.clipboard.writeText(code);

      showCopiedState(btn);

    } catch (err) {
      console.warn('Clipboard API failed, using fallback...', err);

      // Fallback for restricted embeds/older browsers
      fallbackCopy(code, btn);
    }
  });

  function fallbackCopy(text, btn) {
    const textArea = document.createElement('textarea');

    textArea.value = text;
    textArea.setAttribute('readonly', '');

    textArea.style.position = 'fixed';
    textArea.style.left = '-9999px';
    textArea.style.top = '0';

    document.body.appendChild(textArea);

    textArea.focus();
    textArea.select();
    textArea.setSelectionRange(0, textArea.value.length);

    try {
      const successful = document.execCommand('copy');

      if (successful) {
        showCopiedState(btn);
      }

    } catch (err) {
      console.error('Fallback copy failed:', err);
    }

    document.body.removeChild(textArea);
  }

  function showCopiedState(btn) {
    btn.textContent = 'скопировано!';
    btn.classList.add('copied');

    setTimeout(function () {
      btn.classList.remove('copied');
      btn.textContent = 'купить';
      storeUpdateBuyCode();
    }, 1800);
  }

  // ── Avatar upload ──────────────────────────────
  $('#addImage').on('change', function(evt) {
    var file = evt.currentTarget.files[0];
    if (!file) return;
    var regex = /^([a-zA-Zа-яёА-Я0-9\s_\\.\-])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
    if (regex.test(file.name.toLowerCase())) {
      if (typeof FileReader !== 'undefined') {
        var reader = new FileReader();
        reader.onload = function(e) {
          var img = document.getElementById('preview-avatar-img');
          img.src = e.target.result;
          img.style.display = '';
        };
        reader.readAsDataURL(file);
      }
    } else {
      $(this).prop('value', null);
    }
  });

  // ── Selection state ────────────────────────────
  var _storePlashka = '';
  var _storeBg = '';
  var _storeBgType = 'static';

  function storeUpdateBuyCode() {
    var lines = [];
    var openCode = '[' + 'code' + ']';
    var closeCode = '[/' + 'code' + ']';

    if (_storePlashka) {
      lines.push(`поле 1 (плашка): ${openCode}${_storePlashka}*${closeCode}`);
    }

    if (_storeBg) {
      lines.push(`поле 5 (фон): ${openCode}${_storeBg}*${closeCode}`);
    }

    var bgPrice = _storeBg ? (_storeBgType === 'animated' ? 3000 : 2000) : 0;
    var price = (_storePlashka ? 500 : 0) + bgPrice;
    if (price > 0) lines.push('цена: ' + price);

    var btn = document.getElementById('store-tab-buy');
    var priceEl = document.getElementById('store-tab-price');
    var priceVal = document.getElementById('store-tab-price-value');

    if (lines.length) {
      priceVal.textContent = price + ' монет';
      priceEl.classList.add('visible');
      btn.dataset.code = lines.join('\n');
      btn.disabled = false;
    } else {
      priceEl.classList.remove('visible');
      btn.dataset.code = '';
      btn.disabled = true;
    }
  }

  function escapeHtml(s) {
    return s
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }

  function storeSelectPlashka(id) {
    _storePlashka = id;
    var item = SHOP_BY_ID.get(id);
    var img = document.getElementById('preview-plashka-img');
    img.src = item ? item.url : '';
    img.style.display = '';
    storeUpdateBuyCode();
  }

  function storeSelectBg(id, type) {
    _storeBg = id;
    _storeBgType = type || 'static';
    var item = SHOP_BY_ID.get(id);
    var prof = document.getElementById('prof1');
    prof.style.backgroundImage = 'url(' + (item ? item.url : '') + ')';
    prof.style.backgroundSize = 'cover';
    storeUpdateBuyCode();
  }
  </script>
  [/html]