[hideprofile][html]

<div class="oa-shop">

<input type="radio" name="oa-shop-tabs" id="oa-shop-about" checked>
<input type="radio" name="oa-shop-tabs" id="oa-shop-price">
<input type="radio" name="oa-shop-tabs" id="oa-shop-boys">
<input type="radio" name="oa-shop-tabs" id="oa-shop-girls">
<input type="radio" name="oa-shop-tabs" id="oa-shop-actors">

<div class="oa-shop-card">

  <!--
  ШАПКА МАГАЗИНА.
  Здесь можно менять:
  1. маленькую подпись ON:AIR;
  2. большой заголовок магазина;
  3. подзаголовок под ним.
  -->
  <div class="oa-shop-top">
    <div>
      <span>ON:AIR</span>
      <h2>магазин ебучих фишек</h2>
      <em>открываем капсулу, собираем своих биасов</em>
    </div>

    <!--
    ПРАВЫЙ БЛОК В ШАПКЕ.
    Здесь можно менять значок ♪ и подпись "всех их соберём!".
    -->
    <div class="oa-shop-coins">
      <b>♪</b>
      <span>всех их соберём!</span>
    </div>
  </div>

  <!--
  ВКЛАДКИ.
  Можно менять только текст внутри label.
  for="..." лучше не трогать, они отвечают за переключение вкладок.
  Первая вкладка oa-shop-about сейчас стоит активной по умолчанию.
  -->
  <div class="oa-shop-tabs">
    <label for="oa-shop-about">о фишках</label>
    <label for="oa-shop-price">прайс</label>
    <label for="oa-shop-boys">мальчики</label>
    <label for="oa-shop-girls">девочки</label>
    <label for="oa-shop-actors">и все вместе</label>
  </div>

  <div class="oa-shop-body">

    <!--
    ЛЕВЫЙ ЧЁРНЫЙ ON AIR-БЛОК.
    Здесь можно менять декоративные тексты:
    SHOP ON AIR, random chip, капсулятор, кинул голоса — выбил фишку.
    Теги basic / rare / drop / bias тоже можно заменить на короткие свои.
    -->
    <div class="oa-vending">

      <div class="oa-shop-display">

        <div class="oa-shop-live">
          <i></i>
          <b>SHOP ON AIR</b>
        </div>

        <div class="oa-shop-title">
          <span>random chip</span>
          <b>капсулятор</b>
          <em>кинул голоса — выбил фишку</em>
        </div>

        <div class="oa-shop-equalizer">
          <i></i><i></i><i></i><i></i><i></i>
        </div>

        <!--
        МИНИ-ТЕГИ В ЧЁРНОМ БЛОКЕ.
        Лучше писать коротко: basic, rare, drop, event, idol, actor.
        -->
        <div class="oa-shop-tags">
          <span>basic</span>
          <span>rare</span>
          <span>drop</span>
          <span>bias</span>
        </div>

        <div class="oa-shop-caption">
          idol chip randomizer
        </div>

      </div>

      <!--
      НИЖНЯЯ ПАНЕЛЬ ЧЁРНОГО БЛОКА.
      Здесь можно менять надпись на экране и текст слота.
      -->
      <div class="oa-vending-panel">
        <div class="oa-vending-screen">CHIP DROP READY</div>
        <div class="oa-vending-buttons">
          <i></i><i></i><i></i>
        </div>
        <div class="oa-vending-slot">
          выбей своего покемона<br>
          определяется рандомайзером
        </div>
      </div>

    </div>

    <div class="oa-shop-pages">

      <!--
      ВКЛАДКА "О ФИШКАХ".
      Здесь можно менять описание концепции, количество уровней, правила прокачки,
      ограничения ALPHA и пояснения по валютам.
      Текст специально сделан компактнее, чтобы влезать в правое окно.
      -->
      <div class="oa-shop-page page-about">

        <div class="oa-concept-hero">
          <h3>что такое фишки?</h3>
          <p>
            Фишки — это коллекционные карточки персонажей, айдолов и актёров, которые выпадают через капсулятор.
            Их можно собирать по группам, хранить в личной коллекции, прокачивать и оформлять редкими эффектами.
          </p>
        </div>

        <!--
        Главные тезисы.
        Можно менять заголовки b и пояснения span.
        Если нужно добавить тезис — скопировать один блок .oa-concept-point.
        -->
        <div class="oa-concept-points">
          <div class="oa-concept-point">
            <b>голоса</b>
            <span>используются для покупки рандомной фишки в магазине</span>
          </div>

          <div class="oa-concept-point">
            <b>эфиры</b>
            <span>используются для прокачки, купонов, лимиток и особых дропов</span>
          </div>

          <div class="oa-concept-point">
            <b>рандом</b>
            <span>фишка выпадает случайно из выбранной категории или группы</span>
          </div>

          <div class="oa-concept-point">
            <b>коллекция</b>
            <span>полученные фишки можно собирать в биндеры по группам</span>
          </div>
        </div>

        <!--
        Уровни фишек.
        Можно менять названия уровней, описания и количество пунктов.
        LV.1 — базовый выпавший уровень.
        ALPHA — отдельный овер-уровень.
        -->
        <div class="oa-level-board">
          <h4>уровни фишек</h4>

          <div class="oa-level-list">
            <div><b>LV.1</b><span>базовая фишка, выпадает из капсулятора</span></div>
            <div><b>LV.2–LV.4</b><span>обычная прокачка за эфиры</span></div>
            <div><b>LV.5–LV.7</b><span>старшие уровни с более редкими рамками и эффектами</span></div>
            <div><b>ALPHA</b><span>овер-уровень для любимчика, доступен ограниченно</span></div>
          </div>
        </div>

        <!--
        Правила прокачки.
        Можно менять условия, требования и формулировки.
        -->
        <div class="oa-concept-grid">

          <div class="oa-concept-card">
            <h4>как качать?</h4>
            <p>
              Фишка прокачивается за <b>эфиры</b>. Участник подаёт заявку на ап уровня, администрация проверяет баланс
              и условия, после чего уровень фишки обновляется в коллекции.
            </p>
          </div>

          <div class="oa-concept-card">
            <h4>что даёт уровень?</h4>
            <p>
              Уровни могут открывать рамки, подписи, текстуры, редкие версии, особые эффекты и дополнительные элементы
              оформления для коллекции.
            </p>
          </div>

          <div class="oa-concept-card">
            <h4>что с alpha?</h4>
            <p>
              <b>ALPHA</b> — единственный овер-уровень. В рамках одной группы у пользователя может быть только одна
              ALPHA-фишка, остальные фишки этой группы качаются до обычного лимита.
            </p>
          </div>

          <div class="oa-concept-card">
            <h4>важно</h4>
            <p>
              Фишки покупаются за <b>голоса</b>, а прокачиваются за <b>эфиры</b>. Это две разные валюты, которые не заменяют
              друг друга.
            </p>
          </div>

        </div>

      </div>

      <!-- ПРАЙС -->
      <div class="oa-shop-page page-price">

        <div class="oa-price-simple">

          <!--
          КАРТОЧКА ЦЕНЫ.
          Здесь можно менять:
          .oa-price-icon — значок;
          h3 — название позиции;
          span — цену;
          p — описание.
          -->
          <div class="oa-price-bigcard">
            <div class="oa-price-icon">●</div>
            <div>
              <h3>random chip</h3>
              <span>250 голосов</span>
              <p>
                Случайная фишка из капсулятора выбранной группы. Без легендарок.
              </p>
            </div>
          </div>

          <!--
          РЕДКАЯ ПОЗИЦИЯ.
          Класс rare даёт карточке розовый акцент.
          Если нужен обычный вид — убрать rare из class.
          -->
          <div class="oa-price-bigcard rare">
            <div class="oa-price-icon">✦</div>
            <div>
              <h3>rare chance</h3>
              <span>500 голосов + пак заданий</span>
              <p>
                Увеличить свои шансы выбить легендарку.
              </p>
            </div>
          </div>

        </div>

        <!--
        БЛОК ЗАДАНИЙ ДЛЯ ЛЕГЕНДАРКИ.
        Можно менять заголовок h4 и сами задания внутри span.
        Новое задание добавляется так:
        <span>текст задания</span>
        -->
        <div class="oa-task-board">
          <h4>задания для возможности получения легендарки (сделать 2 из 5)</h4>

          <div class="oa-task-list">
            <span>написать игровой пост</span>
            <span>оставить 15 реклам</span>
            <span>оставить 30 сообщений за сутки</span>
            <span>открыть пост / sns эпизод</span>
            <span>что-нибудь ещё, я не придумала</span>
          </div>
        </div>

        <!--
        ЛИНИЯ РЕДКОСТЕЙ.
        Можно менять названия редкостей или добавить новые span.
        -->
        <div class="oa-rarity-line">
          <span>basic</span>
          <span>rare</span>
          <span>event</span>
          <span>limited</span>
          <span>legendary</span>
        </div>

      </div>

      <!-- МУЖСКИЕ ГРУППЫ -->
      <div class="oa-shop-page page-boys">

        <div class="oa-product-grid">

          <!--
          КАРТОЧКА ГРУППЫ.
          Здесь можно менять:
          h3 — название группы;
          b — цену / тип рандома;
          внутри .oa-product-chips — ссылки на фишки и имена.
         
          Чтобы заменить картинку фишки:
          background-image:url('ССЫЛКА_НА_ФИШКУ')
         
          Чтобы заменить имя:
          <span>Bang Chan</span>
          -->
          <div class="oa-product">
            <div class="oa-product-head">
              <h3>Stray Kids</h3>
              <b>group random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Bang Chan</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Lee Know</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Changbin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Hyunjin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Han</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Felix</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Seungmin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>I.N</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>Ateez</h3>
              <b>group random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Hongjoong</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Seonghwa</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yunho</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yeosang</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>San</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Mingi</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Wooyoung</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jongho</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>Enhypen</h3>
              <b>group random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jungwon</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Heeseung</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jay</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jake</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Sunghoon</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Sunoo</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Ni-ki</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>TXT</h3>
              <b>group random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Soobin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yeonjun</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Beomgyu</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Taehyun</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Huening Kai</span></i>
            </div>
          </div>

        </div>

      </div>

      <!-- ЖЕНСКИЕ ГРУППЫ -->
      <div class="oa-shop-page page-girls">

        <div class="oa-product-grid">

          <!--
          Карточки женских групп редактируются так же:
          h3 — название группы;
          b — цена;
          background-image:url('...') — ссылка на фишку;
          span — имя участницы.
          -->
          <div class="oa-product">
            <div class="oa-product-head">
              <h3>aespa</h3>
              <b>group random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Karina</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Giselle</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Winter</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Ningning</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>IVE</h3>
              <b>group random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yujin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Gaeul</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Rei</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Wonyoung</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Liz</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Leeseo</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>NewJeans</h3>
              <b>group random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Minji</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Hanni</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Danielle</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Haerin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Hyein</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>LE SSERAFIM</h3>
              <b>group random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Sakura</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Chaewon</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yunjin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Kazuha</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Eunchae</span></i>
            </div>
          </div>

        </div>

      </div>

      <!-- АКТЁРСТВО -->
      <div class="oa-shop-page page-actors">

        <div class="oa-product-grid">

          <!--
          Карточки актёров / актрис / тайских кастов.
          Можно менять название подборки, цену, количество фишек и имена.
          Если нужно добавить новую подборку — скопировать весь блок .oa-product.
          -->
          <div class="oa-product">
            <div class="oa-product-head">
              <h3>k-drama actors</h3>
              <b>random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 01</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 02</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 03</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 04</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 05</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 06</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>k-drama actress</h3>
              <b>random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 01</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 02</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 03</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 04</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 05</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 06</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>thai</h3>
              <b>random — 250 голосов</b>
            </div>

            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 01</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 02</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 03</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 04</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 05</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 06</span></i>
            </div>
          </div>

        </div>

      </div>

    </div>
  </div>

</div>
</div>

<style>
/*
ЦВЕТА МАГАЗИНА.
Здесь можно менять общее оформление магазина.
Эти же цвета можно синхронизировать с эфирными сменами.
*/

.oa-shop {
  --oa-pink: #ffb4dc;
  --oa-hot-pink: #ff3cac;
  --oa-red: #ff6b6b;
  --oa-blue: #78dcff;
  --oa-mint: #8ff5ec;
  --oa-dark: #2f2f31;
  --oa-darker: #19191b;
  --oa-soft: rgba(244,241,234,.95);
  --oa-light: rgba(255,255,255,.86);
  --oa-muted: #777;
  --oa-text: #222;
  --oa-border: rgba(30,30,30,.9);

  width: min(880px, 100%);
  max-width: calc(100vw - 20px);
  margin: 30px auto;
  font-family: Trebuchet MS, Arial, sans-serif;
  color: var(--oa-text);
}

.oa-shop,
.oa-shop *,
.oa-shop *:before,
.oa-shop *:after {
  box-sizing: border-box;
}

.oa-shop input {
  display: none;
}

.oa-shop-card {
  padding: 26px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 0%, rgba(120,220,255,.22), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(255,180,220,.28), transparent 34%),
    linear-gradient(135deg, #fff, #fbfaf7);
  box-shadow: 0 18px 45px rgba(0,0,0,.15);
  border: 2px solid var(--oa-border);
}

.oa-shop-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.oa-shop-top span {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #999;
}

.oa-shop-top h2 {
  margin: 4px 0 4px;
  font-size: 38px;
  line-height: 1;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
}

.oa-shop-top em {
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-muted);
}

.oa-shop-coins {
  min-width: 150px;
  padding: 13px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  text-align: right;
}

.oa-shop-coins b {
  display: block;
  font-size: 28px;
  line-height: 1;
  color: #ff5a89;
}

.oa-shop-coins span {
  letter-spacing: 1px;
}

.oa-shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

.oa-shop-tabs label {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--oa-dark);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .25s;
}

.oa-shop-tabs label:hover {
  transform: translateY(-2px);
}

#oa-shop-about:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-about"],
#oa-shop-price:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-price"],
#oa-shop-boys:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-boys"],
#oa-shop-girls:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-girls"],
#oa-shop-actors:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-actors"] {
  background: linear-gradient(135deg, var(--oa-red), var(--oa-hot-pink));
}

.oa-shop-body {
  display: grid;
  grid-template-columns: 245px 1fr;
  gap: 22px;
  min-height: 520px;
  align-items: stretch;
}

/* ЛЕВЫЙ ЧЁРНЫЙ БЛОК */

.oa-vending {
  height: 100%;
  border-radius: 30px;
  padding: 16px;
  background:
    linear-gradient(180deg, var(--oa-dark), var(--oa-darker));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    0 16px 30px rgba(0,0,0,.18);
}

.oa-shop-display {
  position: relative;
  min-height: 260px;
  border-radius: 24px;
  overflow: hidden;
  padding: 18px;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,180,220,.17), transparent 35%),
    radial-gradient(circle at 15% 85%, rgba(120,220,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,220,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.oa-shop-display:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.16) 45%, transparent 58%);
  pointer-events: none;
}

.oa-shop-live {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 11px;
  letter-spacing: 2px;
}

.oa-shop-live i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5a89;
  box-shadow: 0 0 12px rgba(255,90,137,.9);
}

.oa-shop-title {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  color: #fff;
}

.oa-shop-title span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255,255,255,.62);
}

.oa-shop-title b {
  display: block;
  margin-top: 8px;
  font-size: 29px;
  line-height: 1.05;
  font-family: Trebuchet MS, Arial, sans-serif;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: -.5px;
}

.oa-shop-title em {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.82);
}

.oa-shop-equalizer {
  position: relative;
  z-index: 2;
  height: 64px;
  margin-top: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

.oa-shop-equalizer i {
  display: block;
  width: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oa-mint), var(--oa-pink));
  box-shadow: 0 0 12px rgba(143,245,236,.35);
}

.oa-shop-equalizer i:nth-child(1) { height: 27px; }
.oa-shop-equalizer i:nth-child(2) { height: 52px; }
.oa-shop-equalizer i:nth-child(3) { height: 38px; }
.oa-shop-equalizer i:nth-child(4) { height: 61px; }
.oa-shop-equalizer i:nth-child(5) { height: 33px; }

.oa-shop-tags {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.oa-shop-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.oa-shop-caption {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding: 11px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 9px;
}

.oa-vending-panel {
  margin-top: 16px;
}

.oa-vending-screen {
  padding: 11px 12px;
  border-radius: 15px;
  background: #111;
  color: var(--oa-mint);
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  box-shadow: inset 0 0 12px rgba(143,245,236,.22);
}

.oa-vending-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0;
}

.oa-vending-buttons i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--oa-pink), var(--oa-blue));
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}

.oa-vending-slot {
  padding: 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 10px;
  line-height: 1.5;
}

/* СТРАНИЦЫ */

.oa-shop-pages {
  min-width: 0;
  height: 520px;
  overflow: hidden;
}

.oa-shop-page {
  display: none;
  height: 520px;
  overflow-y: auto;
  padding-right: 8px;
}

#oa-shop-about:checked ~ .oa-shop-card .page-about,
#oa-shop-price:checked ~ .oa-shop-card .page-price,
#oa-shop-boys:checked ~ .oa-shop-card .page-boys,
#oa-shop-girls:checked ~ .oa-shop-card .page-girls,
#oa-shop-actors:checked ~ .oa-shop-card .page-actors {
  display: block;
}

.oa-shop-page::-webkit-scrollbar {
  width: 6px;
}

.oa-shop-page::-webkit-scrollbar-thumb {
  background: #d2c7bb;
  border-radius: 20px;
}

.oa-shop-page::-webkit-scrollbar-track {
  background: transparent;
}

/* О ФИШКАХ */

.oa-concept-hero {
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(120,220,255,.22), transparent 34%),
    var(--oa-light);
  box-shadow: 0 12px 25px rgba(0,0,0,.08);
  margin-bottom: 12px;
}

.oa-concept-hero h3 {
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1;
  text-transform: lowercase;
}

.oa-concept-hero p {
  margin: 0;
  color: #666;
  line-height: 1.5;
  font-size: 12px;
}

.oa-concept-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.oa-concept-point {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.oa-concept-point b {
  display: inline-block;
  margin-bottom: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--oa-dark);
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.oa-concept-point span {
  display: block;
  color: var(--oa-muted);
  font-size: 11px;
  line-height: 1.35;
}

.oa-level-board {
  padding: 15px;
  border-radius: 22px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  margin-bottom: 12px;
}

.oa-level-board h4 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-muted);
}

.oa-level-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.oa-level-list div {
  padding: 10px;
  border-radius: 16px;
  background: var(--oa-soft);
}

.oa-level-list b {
  display: block;
  margin-bottom: 4px;
  color: #333;
  font-size: 12px;
}

.oa-level-list span {
  display: block;
  color: var(--oa-muted);
  font-size: 11px;
  line-height: 1.35;
}

.oa-concept-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.oa-concept-card {
  padding: 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,180,220,.18), transparent 34%),
    rgba(255,255,255,.86);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

.oa-concept-card h4 {
  margin: 0 0 7px;
  font-size: 16px;
  line-height: 1;
  text-transform: lowercase;
}

.oa-concept-card p {
  margin: 0;
  color: var(--oa-muted);
  font-size: 11px;
  line-height: 1.45;
}

/* ПРАЙС */

.oa-price-simple {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.oa-price-bigcard {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 16px;
  padding: 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 10%, rgba(120,220,255,.22), transparent 34%),
    var(--oa-light);
  box-shadow: 0 12px 25px rgba(0,0,0,.08);
}

.oa-price-bigcard.rare {
  background:
    radial-gradient(circle at 92% 10%, rgba(255,180,220,.28), transparent 34%),
    rgba(255,255,255,.9);
}

.oa-price-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, var(--oa-pink), var(--oa-blue));
  border: 3px solid #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 27px;
}

.oa-price-bigcard h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  text-transform: lowercase;
}

.oa-price-bigcard span {
  display: inline-block;
  margin: 10px 0;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--oa-soft);
  font-size: 12px;
  color: #555;
}

.oa-price-bigcard p {
  margin: 0;
  color: var(--oa-muted);
  line-height: 1.55;
  font-size: 13px;
}

.oa-task-board {
  margin-top: 17px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

.oa-task-board h4 {
  margin: 0 0 13px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-muted);
}

.oa-task-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oa-task-list span {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--oa-soft);
  color: #555;
  font-size: 12px;
}

.oa-rarity-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.oa-rarity-line span {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--oa-dark);
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ГРУППЫ / ПАКИ */

.oa-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.oa-product {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 10%, rgba(120,220,255,.22), transparent 34%),
    rgba(255,255,255,.88);
  box-shadow: 0 12px 25px rgba(0,0,0,.08);
  overflow: hidden;
}

.oa-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.oa-product h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  text-transform: lowercase;
}

.oa-product b {
  display: inline-block;
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--oa-soft);
  font-size: 12px;
  color: #555;
}

/* БЕГУНОК С ФИШКАМИ */

.oa-product-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 13px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 13px;
  scroll-behavior: smooth;
}

.oa-product-chips::-webkit-scrollbar {
  height: 7px;
}

.oa-product-chips::-webkit-scrollbar-track {
  background: rgba(230,225,218,.65);
  border-radius: 20px;
}

.oa-product-chips::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #d2c7bb, var(--oa-pink));
  border-radius: 20px;
}

/* ФИШКА */

.oa-product-chips i {
  position: relative;
  width: 86px;
  min-width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, var(--oa-pink), var(--oa-blue));
  background-size: cover;
  background-position: center;
  border: 3px solid #fff;
  box-shadow:
    0 8px 16px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 6px 8px;
  font-style: normal;
  font-size: 0;
  line-height: 1.05;
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
}

.oa-product-chips i:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(to top, rgba(255,255,255,.9), transparent 50%);
  z-index: 1;
}

.oa-product-chips i:after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  pointer-events: none;
  z-index: 3;
}

.oa-product-chips i span {
  position: relative;
  z-index: 4;
  max-width: 72px;
  font-size: 9px;
  font-weight: bold;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
  white-space: normal;
  word-break: normal;
}

/* АДАПТИВ */

@media (max-width: 760px) {
  .oa-shop {
    max-width: calc(100vw - 12px);
    margin: 16px auto;
  }

  .oa-shop-card {
    padding: 18px;
    border-radius: 26px;
  }

  .oa-shop-body {
    display: block;
    min-height: 0;
  }

  .oa-vending {
    margin-bottom: 20px;
  }

  .oa-shop-pages,
  .oa-shop-page {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .oa-shop-top {
    display: block;
  }

  .oa-shop-top h2 {
    font-size: 31px;
  }

  .oa-shop-top em {
    font-size: 10px;
    line-height: 1.45;
  }

  .oa-shop-coins {
    width: 100%;
    min-width: 0;
    margin-top: 15px;
    text-align: left;
  }

  .oa-shop-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .oa-shop-tabs label {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .oa-product-head {
    display: block;
  }

  .oa-product h3 {
    margin-bottom: 10px;
  }

  .oa-price-bigcard,
  .oa-level-list,
  .oa-concept-points,
  .oa-concept-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .oa-shop-card {
    padding: 14px;
    border-radius: 22px;
  }

  .oa-shop-top h2 {
    font-size: 28px;
  }

  .oa-shop-display {
    min-height: 220px;
    padding: 15px;
  }

  .oa-shop-title b {
    font-size: 24px;
  }

  .oa-shop-title em {
    font-size: 11px;
  }

  .oa-price-bigcard,
  .oa-task-board,
  .oa-product,
  .oa-concept-hero,
  .oa-level-board,
  .oa-concept-card {
    padding: 15px;
  }

  .oa-product-chips i {
    width: 78px;
    min-width: 78px;
    height: 78px;
  }
}
</style>

[/html]
[/hideprofile]

нихуя ещё не обдумано, хочется что-то не сложное, доступное, но чтобы всё было взаимосвязано с прокачами

[hideprofile][html]

<div class="oa-shop">

<input type="radio" name="oa-shop-tabs" id="oa-shop-about" checked>
<input type="radio" name="oa-shop-tabs" id="oa-shop-price">
<input type="radio" name="oa-shop-tabs" id="oa-shop-boys">
<input type="radio" name="oa-shop-tabs" id="oa-shop-girls">
<input type="radio" name="oa-shop-tabs" id="oa-shop-actors">

<div class="oa-shop-card">

  <div class="oa-shop-top">
    <div>
      <span>ON:AIR</span>
      <h2>магазин ебучих фишек</h2>
      <em>открываем капсулу, собираем своих биасов</em>
    </div>

    <div class="oa-shop-coins">
      <b>♪</b>
      <span>всех их соберём!</span>
    </div>
  </div>

  <div class="oa-shop-tabs">
    <label for="oa-shop-about">фишки / прокач</label>
    <label for="oa-shop-price">прайс</label>
    <label for="oa-shop-boys">мальчики</label>
    <label for="oa-shop-girls">девочки</label>
    <label for="oa-shop-actors">и все вместе</label>
  </div>

  <div class="oa-shop-body">

    <div class="oa-vending">
      <div class="oa-shop-display">

        <div class="oa-shop-live">
          <i></i>
          <b>SHOP ON AIR</b>
        </div>

        <div class="oa-shop-title">
          <span>random chip</span>
          <b>капсулятор</b>
          <em>кинул голоса — выбил фишку</em>
        </div>

        <div class="oa-shop-equalizer">
          <i></i><i></i><i></i><i></i><i></i>
        </div>

        <div class="oa-shop-tags">
          <span>basic</span>
          <span>rare</span>
          <span>drop</span>
        </div>

      </div>
    </div>

    <div class="oa-shop-pages">

      <div class="oa-shop-page page-about">

        <div class="oa-concept-hero">
          <h3>что такое фишки?</h3>
          <p>
            Фишки — это коллекционные карточки персонажей, айдолов и актёров, которые выпадают через капсулятор.
            Их можно собирать по группам, хранить в личной коллекции, прокачивать по уровням и забирать награды за <b>каждое повышение уровня полного состава мемберов</b>.
          </p>
        </div>

        <div class="oa-concept-grid">

          <div class="oa-concept-card">
            <h4>сколько уровней?</h4>
            <p>
              Всего у фишки есть <b>7 обычных уровней</b>. Каждый уровень можно прокачать, выбрав одно задание из списка соответственно. Можно прокачивать несколько уровней сразу!
            </p>
          </div>

          <div class="oa-concept-card">
            <h4>всё за голоса?</h4>
            <p>
              Первую фишку за сутки можно купить за деньги, все последующие - за выполненные задания: (какие, я ещё не придумала, но там ваще лайт лайт лайт)
            </p>
          </div>

          <div class="oa-concept-card">
            <h4>где менять?</h4>
            <p>
              Если вдруг у вас есть повторки или вы просто хотите обменяться фишками - для этого есть специальная тема.
            </p>
          </div>

          <div class="oa-concept-card">
            <h4>alpha-фишка</h4>
            <p>
              <b>ALPHA</b> — восьмой особый уровень, доступный только для одной фишки во всей группе. Можно получить только после прокачки всех фишек группы до максимального уровня. Наделяется любым свойством по выбору игрока.
            </p>
          </div>

        </div>

      </div>

      <div class="oa-shop-page page-price">

        <div class="oa-price-simple">

          <div class="oa-price-bigcard">
            <div class="oa-price-icon">●</div>
            <div>
              <h3>рандомная</h3>
              <span>250 голосов</span>
              <p>
                Случайная фишка из капсулятора выбранной группы. Без легендарок.
              </p>
            </div>
          </div>

          <div class="oa-price-bigcard rare">
            <div class="oa-price-icon">✦</div>
            <div>
              <h3>шанс редкой</h3>
              <span>500 голосов + пак заданий</span>
              <p>
                Увеличить свои шансы выбить легендарку.
              </p>
            </div>
          </div>

        </div>

        <div class="oa-task-board">
          <h4>задания для возможного шанса получения легендарки</h4>
          <p>сделать 3 из 5</p>
          <div class="oa-task-list">
            <span>написать игровой пост</span>
            <span>оставить 15 реклам</span>
            <span>оставить 30 сообщений за сутки</span>
            <span>открыть пост / sns эпизод</span>
            <span>чот ещё, я не придумала</span>
          </div>
        </div>

      </div>

      <div class="oa-shop-page page-boys">

        <div class="oa-product-grid">

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>Stray Kids</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Bang Chan</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Lee Know</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Changbin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Hyunjin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Han</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Felix</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Seungmin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>I.N</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>Ateez</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Hongjoong</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Seonghwa</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yunho</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yeosang</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>San</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Mingi</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Wooyoung</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jongho</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>Enhypen</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jungwon</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Heeseung</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jay</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jake</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Sunghoon</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Sunoo</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Ni-ki</span></i>
            </div>
          </div>

<div class="oa-product">
            <div class="oa-product-head">
              <h3>BTS</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jungkook</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>V</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>RM</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jimin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Suga</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>J-Hope</span></i>
            </div>
          </div>
          <div class="oa-product">
            <div class="oa-product-head">
              <h3>TXT</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Soobin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yeonjun</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Beomgyu</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Taehyun</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Huening Kai</span></i>
            </div>
          </div>

        </div>

      </div>

      <div class="oa-shop-page page-girls">

        <div class="oa-product-grid">

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>aespa</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('https://upforme.ru/uploads/001c/b5/80/2/t343333.jpg');"><span>Karina</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Giselle</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Winter</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Ningning</span></i>
            </div>
          </div>

<div class="oa-product">
            <div class="oa-product-head">
              <h3>BLACKPINK</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jennie</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Lisa</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Jisoo</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Rose</span></i>
           
            </div>
          </div>
          <div class="oa-product">
            <div class="oa-product-head">
              <h3>IVE</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yujin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Gaeul</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Rei</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Wonyoung</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Liz</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Leeseo</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>NewJeans</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Minji</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Hanni</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Danielle</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Haerin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Hyein</span></i>
            </div>
          </div>

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>LE SSERAFIM</h3>
              <b>group random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Sakura</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Chaewon</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Yunjin</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Kazuha</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>Eunchae</span></i>
            </div>
          </div>

        </div>

      </div>

      <div class="oa-shop-page page-actors">

        <div class="oa-product-grid">

          <div class="oa-product">
            <div class="oa-product-head">
              <h3>k-drama actors</h3>
              <b>random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 01</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 02</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 03</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 04</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 05</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actor 06</span></i>
            </div>
          </div>
<div class="oa-product">
  <div class="oa-product-head">
    <h3>k-drama actress</h3>
    <b>random — 250 голосов</b>
  </div>
  <div class="oa-product-chips">
    <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 01</span></i>
    <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 02</span></i>
    <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 03</span></i>
    <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 04</span></i>
    <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 05</span></i>
    <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>actress 06</span></i>
  </div>
</div>
          <div class="oa-product">
            <div class="oa-product-head">
              <h3>thai</h3>
              <b>random — 250 голосов</b>
            </div>
            <div class="oa-product-chips">
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 01</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 02</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 03</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 04</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 05</span></i>
              <i style="background-image:url('ССЫЛКА_НА_ФИШКУ');"><span>thai 06</span></i>
            </div>
          </div>

        </div>

      </div>

    </div>
  </div>

  <div class="oa-wide-upgrade">

    <div class="oa-upgrade-board">
      <h4>прокачка уровней</h4>

      <div class="oa-upgrade-list">

        <div class="oa-upgrade-level">
          <b>LV.1 — predebut</b>
          <em>награда: нет</em>
          <span>получить фишку через капсулятор</span>
        </div>

        <div class="oa-upgrade-level">
          <b>LV.2 — debut</b>
          <em>награда: 1500 голосов и какая-нибудь хуйня</em>
          <span>оставить 10 сообщений за сутки</span>
          <span>оставить 5 песен в плейлисте</span>
          <span>поставить 30 лайков другим игрокам</span>
          <span>поставить 15 "это интересно"</span>
        </div>

        <div class="oa-upgrade-level">
          <b>LV.3 — spotlight</b>
          <em>награда: 3000 голосов и какая-нибудь хуйня</em>
          <span>оставить 20 сообщений за сутки</span>
          <span>поставить 50 лайков другим игрокам</span>
          <span>поучаствовать в конкурсе</span>
          <span>поставить 30 "это интересно"</span>
        </div>

        <div class="oa-upgrade-level">
          <b>LV.4 — encore</b>
          <em>награда: купон на какую-нибудь хуйню</em>
          <span>открыть игровой эпизод</span>
          <span>написать 5 снс</span>
          <span>три публикации в инстаграм</span>
          <span>получить 50 лайков от других игроков</span>
        </div>

        <div class="oa-upgrade-level">
          <b>LV.5 — idol</b>
          <em>награда: купон на какую-нибудь хуйню</em>
          <span>написать пост</span>
          <span>купить в магазине подарок другому игроку</span>
          <span>бля плохо думается пиздец</span>
          <span>и что-то ещё</span>
        </div>

        <div class="oa-upgrade-level">
          <b>LV.6 — rare</b>
          <em>награда: купон на какую-нибудь хуйню</em>
          <span>посчитать банк</span>
          <span>оставить 15 реклам</span>
          <span>поставить 30 "это интересно"</span>
          <span>оставить 30 сообщений за сутки</span>
          <span>обменять бонусы на ап</span>
        </div>

        <div class="oa-upgrade-level">
          <b>LV.7 — legend</b>
          <em>награда: оформление группы + иммунка?</em>
          <span>оставить 50 сообщений за сутки</span>
          <span>поставить 50 "это интересно"</span>
          <span>3 публикации в инстаграм</span>
          <span>достижение?</span>
        </div>

        <div class="oa-upgrade-level alpha">
          <b>ALPHA — ♔</b>
          <em>награда: любое свойство</em>
          <span>прокачать все фишки группы до максимального уровня</span>
          <span>выбрать фишку для статуса альфы и любое свойство</span>
          <span>ну и больше я нихуя не придумала</span>
        </div>

      </div>
    </div>

  </div>

</div>
</div>

<style>
/* АДМИНАМ: ГЛАВНЫЕ ЦВЕТА, ШИРИНА МАГАЗИНА И ОСНОВНОЙ ШРИФТ */
/* =========================================================
   АДМИНАМ: ГЛАВНАЯ ПАНЕЛЬ ЦВЕТОВ ДИЗАЙНА
   =========================================================
   Ниже цвета разложены по смыслу:
   акценты, тёмный блок, светлые карточки, текст, рамки.
   ========================================================= */

.oa-shop {
  /* ГЛАВНЫЙ ЦВЕТОВОЙ АКЦЕНТ.
     Используется в градиентах, фишках, скроллбарах, эквалайзере
     Если баннер, например, сиреневый — сюда можно поставить сиреневый. */
  --oa-pink: #ffb4dc;

  /* ЯРКИЙ АКЦЕНТ ДЛЯ АКТИВНЫХ ЭЛЕМЕНТОВ.
     Используется в активных кнопках переключения вкладок (ПРАВАЯ ПОЛОВИНА)
     Это самый заметный цвет интерфейса. */
  --oa-hot-pink: #ff3cac;

  /* ВТОРОЙ ЦВЕТ АКТИВНОЙ ВКЛАДКИ.
     Вместе с --oa-hot-pink делает градиент активной кнопки (ЛЕВАЯ ПОЛОВИНА)
     Можно заменить на цвет баннера: красный, фиолетовый, синий и т.д. */
  --oa-red: #ff6b6b;

  /* ЦВЕТОВОЙ АКЦЕНТ (например, в прайсе в кружочках это вторая половина)
     Используется в фоновых бликах, круглых иконках, фишках и мягких свечениях. */
  --oa-blue: #78dcff;

  /* НЕОНОВЫЙ АКЦЕНТ.
     Используется в эквалайзере и может быть цветом "on air" элементов. */
  --oa-mint: #8ff5ec;

  /* ОСНОВНОЙ ТЁМНЫЙ ЦВЕТ.
     Это цвет неактивных вкладок и верхняя часть чёрного капсулятора.
     Если нужен не чёрный, а, например, тёмно-синий — менять здесь. */
  --oa-dark: #2f2f31;

  /* ВТОРОЙ ТЁМНЫЙ ЦВЕТ.
     Нижняя часть градиента чёрного капсулятора.
     Лучше делать чуть темнее, чем --oa-dark. */
  --oa-darker: #19191b;

  /* МЯГКИЙ БЕЖЕВЫЙ ФОН (можно и через #)
     Используется в плашках цен, заданиях, маленьких светлых элементах. */
  --oa-soft: rgba(244,241,234,.95);

  /* ОСНОВНОЙ ФОН СВЕТЛЫХ КАРТОЧЕК.
     Используется в карточках "что такое фишки", прайсе, группах и прокачке. */
  --oa-light: rgba(255,255,255,.86);

  /* ПРИГЛУШЁННЫЙ ТЕКСТ.
     Описания, подзаголовки, пояснения. */
  --oa-muted: #777;

  /* ОСНОВНОЙ ТЕКСТ. (названия магазина, альбомов, заголовков и пр.)
     Почти весь обычный тёмный текст внутри блока. */
  --oa-text: #222;

  /* ВНЕШНЯЯ РАМКА ВСЕГО БЛОКА.
     Если дизайн светлый — можно сделать мягче:
     rgba(30,30,30,.45) или rgba(255,255,255,.8). */
  --oa-border: rgba(30,30,30,.9);

  /* БЕЛЫЙ ЦВЕТ.
     Вынесен отдельно, чтобы быстро менять светлые элементы,
     если нужен не чисто белый, а молочный/серый. */
  --oa-white: #fff;

  /* ЦВЕТ СВЕТЛОГО ФОНА ОСНОВНОЙ КАРТОЧКИ.
     Это нижний слой большого блока магазина. */
  --oa-card-bg: #fbfaf7;

  /* ЦВЕТ МЕЛКИХ СЕРЫХ НАДПИСЕЙ В ШАПКЕ. */
  --oa-top-muted: #999;

  /* ЦВЕТ ОСНОВНОЙ РОЗОВОЙ ИКОНКИ / ТОЧКИ ON AIR. */
  --oa-dot: #ff5a89;

  /* ЦВЕТ ТЁМНОГО ЭКРАНА / ЧЁРНЫХ ПЛАШЕК.
     Используется точечно там, где нужен почти чёрный. */
  --oa-black: #111;

  /* ЦВЕТ СКРОЛЛБАРА.
     Можно подогнать под общий дизайн. */
  --oa-scroll: #d2c7bb;

  width: min(880px, 100%);
  max-width: calc(100vw - 20px);
  margin: 30px auto;
  font-family: Trebuchet MS, Arial, sans-serif;
  color: var(--oa-text);
}
/* АДМИНАМ: СЛУЖЕБНЫЙ СБРОС РАЗМЕРОВ, ЛУЧШЕ НЕ ТРОГАТЬ */
.oa-shop,
.oa-shop *,
.oa-shop *:before,
.oa-shop *:after {
  box-sizing: border-box;
}

/* АДМИНАМ: СКРЫВАЕТ РАДИО-КНОПКИ, КОТОРЫЕ УПРАВЛЯЮТ ВКЛАДКАМИ */
.oa-shop input {
  display: none;
}

/* АДМИНАМ: ОСНОВНАЯ КАРТОЧКА МАГАЗИНА, ТУТ ФОН, СКРУГЛЕНИЯ И РАМКА */
.oa-shop-card {
  padding: 26px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 0%, rgba(120,220,255,.22), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(255,180,220,.28), transparent 34%),
    linear-gradient(135deg, #fff, #fbfaf7);
  box-shadow: 0 18px 45px rgba(0,0,0,.15);
  border: 2px solid var(--oa-border);
}

/* АДМИНАМ: ШАПКА, НАЗВАНИЕ И БЕЙДЖ СПРАВА */
.oa-shop-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

/* АДМИНАМ: МАЛЕНЬКАЯ НАДПИСЬ ON:AIR НАД ЗАГОЛОВКОМ */
.oa-shop-top span {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #999;
}

/* АДМИНАМ: ГЛАВНЫЙ ЗАГОЛОВОК МАГАЗИНА */
.oa-shop-top h2 {
  margin: 4px 0 4px;
  font-size: 38px;
  line-height: 1;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
}

/* АДМИНАМ: ПОДЗАГОЛОВОК ПОД ГЛАВНЫМ ЗАГОЛОВКОМ */
.oa-shop-top em {
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-muted);
}

/* АДМИНАМ: ПРАВЫЙ СВЕТЛЫЙ БЕЙДЖ В ШАПКЕ */
.oa-shop-coins {
  min-width: 150px;
  padding: 13px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  text-align: right;
}

/* АДМИНАМ: ИКОНКА В ПРАВОМ БЕЙДЖЕ */
.oa-shop-coins b {
  display: block;
  font-size: 28px;
  line-height: 1;
  color: #ff5a89;
}

/* АДМИНАМ: ТЕКСТ В ПРАВОМ БЕЙДЖЕ */
.oa-shop-coins span {
  letter-spacing: 1px;
}

/* АДМИНАМ: КНОПКИ ВКЛАДОК */
.oa-shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

/* АДМИНАМ: ВНЕШНИЙ ВИД ОДНОЙ КНОПКИ ВКЛАДКИ */
.oa-shop-tabs label {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--oa-dark);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .25s;
}

/* АДМИНАМ: ЛЁГКИЙ ХОВЕР НА КНОПКАХ */
.oa-shop-tabs label:hover {
  transform: translateY(-2px);
}

/* АДМИНАМ: ЦВЕТ АКТИВНОЙ ВКЛАДКИ */
#oa-shop-about:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-about"],
#oa-shop-price:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-price"],
#oa-shop-boys:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-boys"],
#oa-shop-girls:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-girls"],
#oa-shop-actors:checked ~ .oa-shop-card .oa-shop-tabs label[for="oa-shop-actors"] {
  background: linear-gradient(135deg, var(--oa-red), var(--oa-hot-pink));
}

/* МЕНЯЕМ ШИРИНУ ЕБУЧЕГО ЧЁРНОГО БЛОКА КАПСУЛЯТОРА */
.oa-shop-body {
  display: grid;
  grid-template-columns: 222px 1fr;
  gap: 22px;
  min-height: 0;
  align-items: stretch;
}

/* АДМИНАМ: ЛЕВЫЙ ЧЁРНЫЙ АВТОМАТ; HEIGHT 100% НУЖЕН, ЧТОБЫ НИЗ СОВПАЛ С БЛОКАМИ "ГДЕ МЕНЯТЬ?" И "ALPHA-ФИШКА" */
.oa-vending {
  height: 100%;
  align-self: stretch;
  border-radius: 30px;
  padding: 16px;
  background: linear-gradient(180deg, var(--oa-dark), var(--oa-darker));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    0 16px 30px rgba(0,0,0,.18);
}

/* АДМИНАМ: ВНУТРЕННИЙ ЭКРАН КАПСУЛЯТОРА */
.oa-shop-display {
  position: relative;
  min-height: 350px;
  border-radius: 24px;
  overflow: hidden;
  padding: 18px;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,180,220,.17), transparent 35%),
    radial-gradient(circle at 15% 85%, rgba(120,220,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,220,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

/* АДМИНАМ: БЛИК НА ЭКРАНЕ КАПСУЛЯТОРА */
.oa-shop-display:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.16) 45%, transparent 58%);
  pointer-events: none;
}

/* АДМИНАМ: ПЛАШКА SHOP ON AIR */
.oa-shop-live {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 11px;
  letter-spacing: 2px;
}

/* АДМИНАМ: РОЗОВАЯ ТОЧКА В ПЛАШКЕ SHOP ON AIR */
.oa-shop-live i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5a89;
  box-shadow: 0 0 12px rgba(255,90,137,.9);
}

/* АДМИНАМ: ТЕКСТ ВНУТРИ КАПСУЛЯТОРА */
.oa-shop-title {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  color: #fff;
}

/* АДМИНАМ: МАЛЕНЬКАЯ НАДПИСЬ RANDOM CHIP */
.oa-shop-title span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255,255,255,.62);
}

/* АДМИНАМ: СЛОВО "КАПСУЛЯТОР" */
.oa-shop-title b {
  display: block;
  margin-top: 8px;
  font-size: 29px;
  line-height: 1.05;
  font-weight: bold;
  text-transform: lowercase;
}

/* АДМИНАМ: ПОДПИСЬ "КИНУЛ ГОЛОСА..." */
.oa-shop-title em {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.82);
}

/* АДМИНАМ: ПОЛОСКИ-ЭКВАЛАЙЗЕР */
.oa-shop-equalizer {
  position: relative;
  z-index: 2;
  height: 64px;
  margin-top: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

/* АДМИНАМ: ОДНА ПОЛОСКА ЭКВАЛАЙЗЕРА */
.oa-shop-equalizer i {
  display: block;
  width: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oa-mint), var(--oa-pink));
  box-shadow: 0 0 12px rgba(143,245,236,.35);
}

/* АДМИНАМ: ВЫСОТА КАЖДОЙ ПОЛОСКИ ЭКВАЛАЙЗЕРА */
.oa-shop-equalizer i:nth-child(1) { height: 27px; }
.oa-shop-equalizer i:nth-child(2) { height: 52px; }
.oa-shop-equalizer i:nth-child(3) { height: 38px; }
.oa-shop-equalizer i:nth-child(4) { height: 61px; }
.oa-shop-equalizer i:nth-child(5) { height: 33px; }

/* АДМИНАМ: МАЛЕНЬКИЕ ТЕГИ BASIC / RARE / DROP */
.oa-shop-tags {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 24px;
}

/* АДМИНАМ: ОДИН МАЛЕНЬКИЙ ТЕГ */
.oa-shop-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* АДМИНАМ: ОБЛАСТЬ СТРАНИЦ-ВКЛАДОК */
.oa-shop-pages {
  min-width: 0;
  height: 520px;
  overflow: hidden;
}

/* АДМИНАМ: ОДНА СТРАНИЦА-ВКЛАДКА */
.oa-shop-page {
  display: none;
  height: 520px;
  overflow-y: auto;
  padding-right: 8px;
}

/* АДМИНАМ: ПОКАЗ НУЖНОЙ ВКЛАДКИ ПРИ НАЖАТИИ */
#oa-shop-about:checked ~ .oa-shop-card .page-about,
#oa-shop-price:checked ~ .oa-shop-card .page-price,
#oa-shop-boys:checked ~ .oa-shop-card .page-boys,
#oa-shop-girls:checked ~ .oa-shop-card .page-girls,
#oa-shop-actors:checked ~ .oa-shop-card .page-actors {
  display: block;
}

/* АДМИНАМ: НА ПЕРВОЙ ВКЛАДКЕ ВЫСОТА ПРАВОГО БЛОКА СТАНОВИТСЯ ПО КОНТЕНТУ */
#oa-shop-about:checked ~ .oa-shop-card .oa-shop-pages,
#oa-shop-about:checked ~ .oa-shop-card .page-about {
  height: auto;
  overflow: visible;
}

/* АДМИНАМ: ШИРИНА СКРОЛЛБАРА ВНУТРИ ВКЛАДОК */
.oa-shop-page::-webkit-scrollbar {
  width: 6px;
}

/* АДМИНАМ: ЦВЕТ СКРОЛЛБАРА ВНУТРИ ВКЛАДОК */
.oa-shop-page::-webkit-scrollbar-thumb {
  background: #d2c7bb;
  border-radius: 20px;
}

/* АДМИНАМ: БОЛЬШОЙ БЛОК "ЧТО ТАКОЕ ФИШКИ" */
.oa-concept-hero {
  padding: 16px 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(120,220,255,.22), transparent 34%),
    var(--oa-light);
  box-shadow: 0 12px 25px rgba(0,0,0,.08);
  margin-bottom: 12px;
}

/* АДМИНАМ: ЗАГОЛОВОК БЛОКА "ЧТО ТАКОЕ ФИШКИ" */
.oa-concept-hero h3 {
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1;
  text-transform: lowercase;
}

/* АДМИНАМ: ТЕКСТ БЛОКА "ЧТО ТАКОЕ ФИШКИ" */
.oa-concept-hero p {
  margin: 0;
  color: #666;
  line-height: 1.45;
  font-size: 12px;
}

/* АДМИНАМ: СЕТКА ЧЕТЫРЁХ МАЛЕНЬКИХ ИНФО-КАРТОЧЕК */
.oa-concept-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* АДМИНАМ: ОДНА МАЛЕНЬКАЯ ИНФО-КАРТОЧКА */
.oa-concept-card {
  min-height: 98px;
  padding: 12px 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,180,220,.18), transparent 34%),
    rgba(255,255,255,.86);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

/* АДМИНАМ: ЗАГОЛОВОК МАЛЕНЬКОЙ ИНФО-КАРТОЧКИ */
.oa-concept-card h4 {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1;
  text-transform: lowercase;
}

/* АДМИНАМ: ТЕКСТ МАЛЕНЬКОЙ ИНФО-КАРТОЧКИ */
.oa-concept-card p {
  margin: 0;
  color: var(--oa-muted);
  font-size: 11px;
  line-height: 1.35;
}

/* АДМИНАМ: НИЖНИЙ ШИРОКИЙ БЛОК ПРОКАЧКИ ПОКАЗЫВАЕТСЯ ТОЛЬКО НА ПЕРВОЙ ВКЛАДКЕ */
.oa-wide-upgrade {
  display: none;
  margin-top: 18px;
}

/* АДМИНАМ: ВКЛЮЧЕНИЕ БЛОКА ПРОКАЧКИ НА ВКЛАДКЕ "ФИШКИ / ПРОКАЧ" */
#oa-shop-about:checked ~ .oa-shop-card .oa-wide-upgrade {
  display: block;
}

/* АДМИНАМ: ОБЩИЙ ФОН БЛОКА ПРОКАЧКИ */
.oa-upgrade-board {
  padding: 20px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(120,220,255,.20), transparent 30%),
    radial-gradient(circle at 95% 8%, rgba(255,180,220,.28), transparent 32%),
    rgba(255,255,255,.78);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 12px 24px rgba(0,0,0,.08);
}

/* АДМИНАМ: ЗАГОЛОВОК "ПРОКАЧКА УРОВНЕЙ" */
.oa-upgrade-board h4 {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #333;
}

/* АДМИНАМ: СЕТКА УРОВНЕЙ, 4 КОЛОНКИ НА ШИРОКОМ ЭКРАНЕ */
.oa-upgrade-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

/* АДМИНАМ: ОТДЕЛЬНАЯ КАРТОЧКА УРОВНЯ */
.oa-upgrade-level {
  min-height: 190px;
  padding: 14px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,241,234,.92));
  border: 1px solid rgba(90,80,78,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 8px 15px rgba(0,0,0,.06);
}

/* АДМИНАМ: НАЗВАНИЕ УРОВНЯ В ТЁМНОЙ ПЛАШКЕ, ВЫРОВНЕНО ПО ЦЕНТРУ */
.oa-upgrade-level b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(47,47,49,.92), rgba(90,78,86,.86));
  color: #fff;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
  text-transform: lowercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* АДМИНАМ: СТРОКА НАГРАДЫ, ТЕКСТ МЕЛЬЧЕ, ЧЕРТЫ ПОДТЯНУТЫ К ТЕКСТУ */
.oa-upgrade-level em {
  display: block;
  margin: 0 0 7px;
  padding: 4px 7px 5px;
  border-top: 1px solid rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(0,0,0,.10);
  font-style: normal;
  color: #666;
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .7px;
  background: rgba(255,255,255,.38);
}

/* АДМИНАМ: ПУНКТЫ ЗАДАНИЙ ВНУТРИ УРОВНЕЙ */
.oa-upgrade-level span {
  display: block;
  margin: 6px 0;
  color: #666;
  font-size: 11px;
  line-height: 1.25;
}

/* АДМИНАМ: РОЗОВАЯ ТОЧКА ПЕРЕД КАЖДЫМ ЗАДАНИЕМ */
.oa-upgrade-level span:before {
  content: "• ";
  color: #ff5a89;
}

/* АДМИНАМ: МЕЛКАЯ ПРИПИСКА В УРОВНЕ, ЕСЛИ ПОТРЕБУЕТСЯ */
.oa-upgrade-level small {
  display: block;
  margin: -2px 0 9px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.58);
  color: #777;
  font-size: 9px;
  line-height: 1.3;
}

/* АДМИНАМ: ОСОБОЕ ОФОРМЛЕНИЕ АЛЬФЫ */
.oa-upgrade-level.alpha {
  background:
    radial-gradient(circle at 90% 0%, rgba(255,180,220,.45), transparent 36%),
    linear-gradient(135deg, #fff, #fff0f8);
  border-color: rgba(255,60,172,.35);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    0 8px 16px rgba(255,60,172,.10);
}

/* АДМИНАМ: ТЁМНАЯ ПЛАШКА У АЛЬФЫ ДЕЛАЕТСЯ РОЗОВОЙ */
.oa-upgrade-level.alpha b {
  background:
    linear-gradient(135deg, #ff6b9a, #ff3cac);
  color: #fff;
}

/* АДМИНАМ: ПРАЙС И СЕТКА ТОВАРОВ */
.oa-price-simple,
.oa-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* АДМИНАМ: БОЛЬШИЕ КАРТОЧКИ ПРАЙСА */
.oa-price-bigcard {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 16px;
  padding: 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 10%, rgba(120,220,255,.22), transparent 34%),
    var(--oa-light);
  box-shadow: 0 12px 25px rgba(0,0,0,.08);
}

/* АДМИНАМ: ВТОРАЯ КАРТОЧКА ПРАЙСА С БОЛЕЕ РОЗОВЫМ ФОНОМ */
.oa-price-bigcard.rare {
  background:
    radial-gradient(circle at 92% 10%, rgba(255,180,220,.28), transparent 34%),
    rgba(255,255,255,.9);
}

/* АДМИНАМ: КРУГЛАЯ ИКОНКА В КАРТОЧКЕ ПРАЙСА */
.oa-price-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--oa-pink), var(--oa-blue));
  border: 3px solid #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 27px;
}

/* АДМИНАМ: ЗАГОЛОВКИ В ПРАЙСЕ И В КАРТОЧКАХ ГРУПП */
.oa-price-bigcard h3,
.oa-product h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  text-transform: lowercase;
}

/* АДМИНАМ: ПЛАШКИ С ЦЕНОЙ В ПРАЙСЕ И В ГРУППАХ */
.oa-price-bigcard span,
.oa-product b {
  display: inline-block;
  margin: 10px 0;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--oa-soft);
  font-size: 12px;
  color: #555;
}

/* АДМИНАМ: ОПИСАНИЕ В КАРТОЧКАХ ПРАЙСА */
.oa-price-bigcard p {
  margin: 0;
  color: var(--oa-muted);
  line-height: 1.55;
  font-size: 13px;
}

/* АДМИНАМ: ДОСКА ЗАДАНИЙ ДЛЯ ЛЕГЕНДАРКИ */
.oa-task-board {
  margin-top: 17px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

/* АДМИНАМ: ЗАГОЛОВОК ДОСКИ ЗАДАНИЙ */
.oa-task-board h4 {
  margin: 0 0 7px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-muted);
}

/* АДМИНАМ: ПОДПИСЬ "СДЕЛАТЬ 2 ИЗ 5" */
.oa-task-board p {
  margin: 0 0 13px;
  color: #555;
  font-size: 12px;
  line-height: 1.4;
  text-transform: lowercase;
}

/* АДМИНАМ: СПИСОК ЗАДАНИЙ ДЛЯ ЛЕГЕНДАРКИ */
.oa-task-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* АДМИНАМ: ОДНО ЗАДАНИЕ В ДОСКЕ ЛЕГЕНДАРКИ */
.oa-task-list span {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--oa-soft);
  color: #555;
  font-size: 12px;
}

/* АДМИНАМ: КАРТОЧКИ ГРУПП */
.oa-product {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 10%, rgba(120,220,255,.22), transparent 34%),
    rgba(255,255,255,.88);
  box-shadow: 0 12px 25px rgba(0,0,0,.08);
  overflow: hidden;
}

/* АДМИНАМ: ВЕРХ КАРТОЧКИ ГРУППЫ, НАЗВАНИЕ И ЦЕНА */
.oa-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

/* АДМИНАМ: ЦЕНА В КАРТОЧКЕ ГРУППЫ */
.oa-product b {
  flex-shrink: 0;
  margin: 0;
}

/* АДМИНАМ: ГОРИЗОНТАЛЬНАЯ ЛЕНТА ФИШЕК */
.oa-product-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 13px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 13px;
  scroll-behavior: smooth;
}

/* АДМИНАМ: ВЫСОТА СКРОЛЛБАРА У ЛЕНТЫ ФИШЕК */
.oa-product-chips::-webkit-scrollbar {
  height: 7px;
}

/* АДМИНАМ: ФОН СКРОЛЛБАРА У ЛЕНТЫ ФИШЕК */
.oa-product-chips::-webkit-scrollbar-track {
  background: rgba(230,225,218,.65);
  border-radius: 20px;
}

/* АДМИНАМ: БЕГУНОК СКРОЛЛБАРА У ЛЕНТЫ ФИШЕК */
.oa-product-chips::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #d2c7bb, var(--oa-pink));
  border-radius: 20px;
}

/* АДМИНАМ: КРУГЛАЯ ФИШКА, ФОТО МЕНЯЕТСЯ В HTML В BACKGROUND-IMAGE */
.oa-product-chips i {
  position: relative;
  width: 120px;
  min-width: 86px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--oa-pink), var(--oa-blue));
  background-size: cover;
  background-position: center;
  border: 3px solid #fff;
  box-shadow:
    0 8px 16px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 6px 8px;
  font-style: normal;
  font-size: 0;
  line-height: 1.05;
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
}

/* АДМИНАМ: СВЕТЛАЯ ПОДЛОЖКА СНИЗУ ВНУТРИ КРУГЛОЙ ФИШКИ */
.oa-product-chips i:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to top, rgba(255,255,255,.9), transparent 50%);
  z-index: 1;
}

/* АДМИНАМ: ТОНКАЯ ВНУТРЕННЯЯ РАМКА ФИШКИ */
.oa-product-chips i:after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  pointer-events: none;
  z-index: 3;
}

/* АДМИНАМ: ИМЯ НА ФИШКЕ */
.oa-product-chips i span {
  position: relative;
  z-index: 4;
  max-width: 72px;
  font-size: 9px;
  font-weight: bold;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
  white-space: normal;
}

/* АДМИНАМ: АДАПТИВ ДЛЯ ПЛАНШЕТОВ И УЗКИХ ЭКРАНОВ */
@media (max-width: 760px) {
  .oa-shop {
    max-width: calc(100vw - 12px);
    margin: 16px auto;
  }

  .oa-shop-card {
    padding: 18px;
    border-radius: 26px;
  }

  .oa-shop-body {
    display: block;
  }

  /* АДМИНАМ: НА МОБИЛКАХ ЧЁРНЫЙ БЛОК НЕ ТЯНЕТСЯ, А СТАНОВИТСЯ ОБЫЧНОЙ ВЫСОТЫ */
  .oa-vending {
    height: auto;
    align-self: auto;
    margin-bottom: 20px;
  }

  .oa-shop-pages,
  .oa-shop-page {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .oa-shop-top {
    display: block;
  }

  .oa-shop-top h2 {
    font-size: 31px;
  }

  .oa-shop-coins {
    width: 100%;
    min-width: 0;
    margin-top: 15px;
    text-align: left;
  }

  .oa-shop-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }

  .oa-shop-tabs label {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .oa-product-head {
    display: block;
  }

  .oa-product h3 {
    margin-bottom: 10px;
  }

  .oa-price-bigcard,
  .oa-concept-grid,
  .oa-upgrade-list {
    grid-template-columns: 1fr;
  }
}

/* АДМИНАМ: АДАПТИВ ДЛЯ МОБИЛОК */
@media (max-width: 520px) {
  .oa-shop-card {
    padding: 14px;
    border-radius: 22px;
  }

  .oa-shop-top h2 {
    font-size: 28px;
  }

  .oa-shop-display {
    min-height: 320px;
    padding: 15px;
  }

  .oa-shop-title b {
    font-size: 24px;
  }

  .oa-price-bigcard,
  .oa-task-board,
  .oa-product,
  .oa-concept-hero,
  .oa-concept-card,
  .oa-upgrade-board {
    padding: 15px;
  }

  .oa-product-chips i {
    width: 78px;
    min-width: 78px;
    height: 78px;
  }
}
</style>

[/html][/hideprofile]

[b]группа:[/b]
[b]количество:[/b]
[b]доказательства:[/b]

[b]альбом:[/b]
[b]фишка:[/b]
[b]уровень:[/b]
[b]доказательства:[/b]

[hideprofile][html]

<div class="oa-bank">

<input type="radio" name="oa-bank-tabs" id="oa-bank-main" checked>
<input type="radio" name="oa-bank-tabs" id="oa-bank-game">
<input type="radio" name="oa-bank-tabs" id="oa-bank-active">
<input type="radio" name="oa-bank-tabs" id="oa-bank-spend">

<div class="oa-bank-card">

  <div class="oa-bank-top">
    <div>
      <span>ON:AIR BANK</span>
      <h2>банк</h2>
      <em>баланс / начисления / списания / активность</em>
    </div>

    <div class="oa-bank-coins">
      <b>Ⓥ</b>
      <span>считаем голоса</span>
    </div>
  </div>

  <div class="oa-bank-tabs">
    <label for="oa-bank-main">основное</label>
    <label for="oa-bank-game">игровое</label>
    <label for="oa-bank-active">активное</label>
    <label for="oa-bank-spend">траты</label>
  </div>

  <div class="oa-bank-body">

    <div class="oa-bank-machine">
      <div class="oa-bank-display">

        <div class="oa-bank-live">
          <i></i>
          <b>BANK ON AIR</b>
        </div>

        <div class="oa-bank-title">
          <span>daily balance</span>
          <b>банк</b>
          <em>зарабатываем / тратим</em>
        </div>

        <div class="oa-bank-equalizer">
          <i></i><i></i><i></i><i></i><i></i>
        </div>

        <div class="oa-bank-tags"></div>

      </div>

      <div class="oa-bank-reader">
        <h4>счётчик</h4>

        <div class="oa-reader-tabs">
          <button type="button" class="active" id="oaReaderIncomeTab">начислить</button>
          <button type="button" id="oaReaderSpendTab">тратить</button>
        </div>

        <div class="oa-reader-panel active" id="oaReaderIncome">
          <div class="oa-bank-picked" id="oaBankPicked">
            <span>нажми на позиции справа</span>
          </div>

          <div class="oa-bank-total">
            <span>итого</span>
            <b id="oaBankTotal">0 голосов</b>
          </div>

          <textarea id="oaBankResult" readonly></textarea>

          <button type="button" id="oaBankCopy">скопировать</button>
          <button type="button" id="oaBankClear">очистить</button>
        </div>

        <div class="oa-reader-panel" id="oaReaderSpend">
          <div class="oa-bank-picked" id="oaSpendPicked">
            <span>нажми на траты справа</span>
          </div>

          <div class="oa-bank-total">
            <span>тратим</span>
            <b id="oaSpendTotal">0 голосов</b>
          </div>

          <textarea id="oaSpendResult" readonly></textarea>

          <button type="button" id="oaSpendCopy">скопировать</button>
          <button type="button" id="oaSpendClear">очистить</button>
        </div>
      </div>
    </div>

    <div class="oa-bank-pages">

      <div class="oa-bank-page page-main">

        <div class="oa-bank-hero">
          <h3>как работает банк?</h3>
          <p>
            Банк — это тема, где игроки забирают голоса за основные действия на форуме:
            регистрацию, анкету, приход по заявке, оформление профиля и другие стартовые активности.
            Всё приносится по шаблону с доказательствами.
          </p>
        </div>

        <div class="oa-bank-section">
          <h3>основные начисления</h3>

          <div class="oa-bank-row" data-calc data-name="регистрация персонажа" data-price="50"><span>регистрация персонажа</span><b>50 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="пришёл по заявке" data-price="100"><span>пришёл по заявке</span><b>100 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="анкета текстом" data-price="70"><span>анкета текстом</span><b>70 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="анкета мемами" data-price="100"><span>анкета мемами</span><b>100 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="оставить заявку на нужного" data-price="150"><span>оставить заявку на нужного</span><b>150 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="привести друга" data-price="200"><span>привести друга</span><b>200 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="первая покупка в магазине" data-price="100"><span>первая покупка в магазине</span><b>100 голосов</b></div>
        </div>

      </div>

      <div class="oa-bank-page page-game">

        <div class="oa-bank-section">
          <h3>игровые начисления</h3>

          <div class="oa-bank-row" data-calc data-name="открыть игровой эпизод" data-price="100"><span>открыть игровой эпизод</span><b>100 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="закрыть игровой эпизод" data-price="150"><span>закрыть игровой эпизод</span><b>150 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="написать игровой пост" data-price="200"><span>написать игровой пост</span><b>200 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="написать sns-пост" data-price="50"><span>написать sns-пост</span><b>50 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="пост до 3500 символов" data-price="100"><span>пост до 3500 символов</span><b>100 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="пост до 7000 символов" data-price="200"><span>пост до 7000 символов</span><b>200 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="пост от 10000 символов" data-price="500"><span>пост от 10000 символов</span><b>500 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="за каждую 1000 символов сверх нормы" data-price="20"><span>за каждую 1000 символов сверх нормы</span><b>20 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="ответ в течение суток" data-price="200"><span>ответ в течение суток</span><b>200 голосов</b></div>
        </div>

      </div>

      <div class="oa-bank-page page-active">

        <div class="oa-bank-section">
          <h3>активность</h3>

          <div class="oa-bank-row" data-calc data-name="первые 100 сообщений" data-price="100"><span>первые 100 сообщений</span><b>100 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="каждые 100 сообщений" data-price="50"><span>каждые 100 сообщений</span><b>50 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="1000 сообщений" data-price="500"><span>1000 сообщений</span><b>500 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="каждая 1000 сообщений" data-price="300"><span>каждая 1000 сообщений</span><b>300 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="каждые 100 позитива" data-price="50"><span>каждые 100 позитива</span><b>50 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="каждые 100 уважения" data-price="50"><span>каждые 100 уважения</span><b>50 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="быть на форуме 1 час" data-price="200"><span>быть на форуме 1 час</span><b>200 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="быть на форуме 3 часа" data-price="400"><span>быть на форуме 3 часа</span><b>400 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="жмать на топ" data-price="100"><span>жмать на топ</span><b>100 голосов</b></div>
          <div class="oa-bank-row" data-calc data-name="каждые 10 реклам" data-price="100"><span>каждые 10 реклам</span><b>100 голосов</b></div>
        </div>

      </div>

      <div class="oa-bank-page page-spend">

        <div class="oa-bank-hero">
          <h3>траты</h3>
          <p>
            Здесь можно выбрать позиции, на которые игрок тратит голоса. Нажимай на строку,
            и она попадёт в левый счётчик во вкладку «тратить».
          </p>
        </div>

        <div class="oa-bank-section">
          <h3>магазин трат</h3>

          <div class="oa-bank-row" data-spend data-name="смена внешности" data-price="1500"><span>смена внешности</span><b>1500 голосов</b></div>
          <div class="oa-bank-row" data-spend data-name="выкупить внешность на неделю" data-price="1500"><span>выкупить внешность на неделю</span><b>1500 голосов</b></div>
          <div class="oa-bank-row" data-spend data-name="твин" data-price="1000"><span>твин</span><b>1000 голосов</b></div>
          <div class="oa-bank-row" data-spend data-name="выписаться из списков" data-price="10000"><span>выписаться из списков</span><b>10000 голосов</b></div>
          <div class="oa-bank-row" data-spend data-name="индивидуальный фон" data-price="2000"><span>индивидуальный фон</span><b>2000 голосов</b></div>
          <div class="oa-bank-row" data-spend data-name="индивидуальная плашка" data-price="1500"><span>индивидуальная плашка</span><b>1500 голосов</b></div>
          <div class="oa-bank-row" data-spend data-name="индивидуальная иконка" data-price="1000"><span>индивидуальная иконка</span><b>1000 голосов</b></div>
        </div>

      </div>

    </div>
  </div>

</div>
</div>

<style>
/* АДМИНАМ: ГЛАВНЫЙ КОНТЕЙНЕР.
   Цвета банк берёт из общей карты ON:AIR в style_cs.css:
   --oa-global-bg-1, --oa-global-bg-2, --oa-global-card и т.д. */
.oa-bank {
  --oa-page-bg-1: var(--oa-global-bg-1);
  --oa-page-bg-2: var(--oa-global-bg-2);

  --oa-pink: var(--oa-global-pink);
  --oa-hot-pink: var(--oa-global-hot-pink);
  --oa-red: var(--oa-global-red);
  --oa-blue: var(--oa-global-blue);
  --oa-mint: var(--oa-global-mint);
  --oa-dot: var(--oa-global-dot);

  --oa-dark: var(--oa-global-dark);
  --oa-darker: var(--oa-global-darker);
  --oa-black: var(--oa-global-black);

  --oa-soft: var(--oa-global-soft);
  --oa-light: var(--oa-global-card);
  --oa-light-strong: var(--oa-global-card-strong);
  --oa-pill-bg: var(--oa-global-pill);

  --oa-muted: var(--oa-global-muted);
  --oa-text: var(--oa-global-text);
  --oa-white: var(--oa-global-white);
  --oa-top-muted: var(--oa-global-top-muted);

  --oa-border: var(--oa-global-border);
  --oa-scroll: var(--oa-global-scroll);
  --oa-shadow: var(--oa-global-shadow);
  --oa-big-shadow: var(--oa-global-big-shadow);

  --oa-tab-off-bg: var(--oa-global-tab-off-bg);
  --oa-tab-off-text: var(--oa-global-tab-off-text);
  --oa-tab-on-1: var(--oa-global-tab-on-1);
  --oa-tab-on-2: var(--oa-global-tab-on-2);

  width: min(880px, 100%);
  max-width: calc(100vw - 20px);
  margin: 30px auto;
  font-family: Trebuchet MS, Arial, sans-serif;
  color: var(--oa-text);
}

.oa-bank,
.oa-bank *,
.oa-bank *:before,
.oa-bank *:after {
  box-sizing: border-box;
}

.oa-bank input[type="radio"] {
  display: none;
}

/* ОСНОВНАЯ КАРТОЧКА БАНКА.
   Главный фон меняется через --oa-global-bg-1 и --oa-global-bg-2 в style_cs.css. */
.oa-bank-card {
  padding: 26px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 0%, rgba(120,220,255,.22), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(255,180,220,.28), transparent 34%),
    linear-gradient(135deg, var(--oa-page-bg-1), var(--oa-page-bg-2));
  box-shadow: 0 18px 45px var(--oa-big-shadow);
  border: 2px solid var(--oa-border);
}

.oa-bank-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.oa-bank-top span {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--oa-top-muted);
}

.oa-bank-top h2 {
  margin: 4px 0 4px;
  font-size: 38px;
  line-height: 1;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
  color: var(--oa-text);
}

.oa-bank-top em {
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-muted);
}

.oa-bank-coins {
  min-width: 150px;
  padding: 13px 16px;
  border-radius: 22px;
  background: var(--oa-pill-bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  text-align: right;
}

.oa-bank-coins b {
  display: block;
  font-size: 28px;
  line-height: 1;
  color: var(--oa-dot);
}

.oa-bank-coins span {
  letter-spacing: 1px;
}

.oa-bank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

.oa-bank-tabs label {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--oa-tab-off-bg);
  color: var(--oa-tab-off-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .25s;
}

.oa-bank-tabs label:hover {
  transform: translateY(-2px);
}

#oa-bank-main:checked ~ .oa-bank-card .oa-bank-tabs label[for="oa-bank-main"],
#oa-bank-game:checked ~ .oa-bank-card .oa-bank-tabs label[for="oa-bank-game"],
#oa-bank-active:checked ~ .oa-bank-card .oa-bank-tabs label[for="oa-bank-active"],
#oa-bank-spend:checked ~ .oa-bank-card .oa-bank-tabs label[for="oa-bank-spend"] {
  background: linear-gradient(135deg, var(--oa-tab-on-1), var(--oa-tab-on-2));
}

.oa-bank-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  min-height: 0;
  align-items: stretch;
}

.oa-bank-machine {
  height: 100%;
  align-self: stretch;
  border-radius: 30px;
  padding: 10px;
  background: linear-gradient(180deg, var(--oa-dark), var(--oa-darker));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    0 16px 30px rgba(0,0,0,.18);
}

.oa-bank-display {
  position: relative;
  min-height: 235px;
  border-radius: 24px;
  overflow: hidden;
  padding: 16px;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,180,220,.17), transparent 35%),
    radial-gradient(circle at 15% 85%, rgba(120,220,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,220,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.oa-bank-display:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.16) 45%, transparent 58%);
  pointer-events: none;
}

.oa-bank-live {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: var(--oa-white);
  font-size: 11px;
  letter-spacing: 2px;
}

.oa-bank-live i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--oa-dot);
  box-shadow: 0 0 12px rgba(255,90,137,.9);
}

.oa-bank-title {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  color: var(--oa-white);
}

.oa-bank-title span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255,255,255,.62);
}

.oa-bank-title b {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  line-height: 1.05;
  font-weight: bold;
  text-transform: lowercase;
}

.oa-bank-title em {
  display: block;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.82);
}

.oa-bank-equalizer {
  position: relative;
  z-index: 2;
  height: 38px;
  margin-top: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

.oa-bank-equalizer i {
  display: block;
  width: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oa-mint), var(--oa-pink));
  box-shadow: 0 0 10px rgba(143,245,236,.35);
}

.oa-bank-equalizer i:nth-child(1) { height: 17px; }
.oa-bank-equalizer i:nth-child(2) { height: 33px; }
.oa-bank-equalizer i:nth-child(3) { height: 24px; }
.oa-bank-equalizer i:nth-child(4) { height: 38px; }
.oa-bank-equalizer i:nth-child(5) { height: 21px; }

.oa-bank-tags {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.oa-bank-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.oa-bank-reader {
  margin-top: 12px;
  padding: 13px;
  border-radius: 22px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}

.oa-bank-reader h4 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-mint);
}

.oa-reader-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 10px;
}

.oa-reader-tabs button {
  padding: 7px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.78);
  font-family: Trebuchet MS, Arial, sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .8px;
  cursor: pointer;
}

.oa-reader-tabs button.active {
  background: linear-gradient(135deg, var(--oa-tab-on-1), var(--oa-tab-on-2));
  color: var(--oa-white);
}

.oa-reader-panel {
  display: none;
}

.oa-reader-panel.active {
  display: block;
}

.oa-bank-picked {
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}

.oa-bank-picked span {
  display: block;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255,255,255,.65);
}

.oa-picked-item {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}

.oa-picked-item strong {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  line-height: 1.25;
  color: var(--oa-white);
}

.oa-picked-item em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--oa-mint);
}

.oa-picked-controls {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  gap: 5px;
  align-items: center;
  margin-top: 6px;
}

.oa-picked-minus,
.oa-picked-plus {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: var(--oa-white);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.oa-bank .oa-picked-item input {
  display: block;
  width: 100%;
  padding: 6px 7px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.88);
  color: var(--oa-text);
  font-family: Trebuchet MS, Arial, sans-serif;
  font-size: 11px;
  text-align: center;
}

.oa-picked-remove {
  margin-top: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.8);
  font-size: 9px;
  cursor: pointer;
}

.oa-bank-total {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--oa-black);
  color: var(--oa-mint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#oaBankResult,
#oaSpendResult {
  width: 100%;
  min-height: 120px;
  margin-top: 10px;
  padding: 10px;
  border: 0;
  border-radius: 15px;
  background: var(--oa-soft);
  color: var(--oa-muted);
  font-family: Trebuchet MS, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  resize: vertical;
}

#oaBankCopy,
#oaBankClear,
#oaSpendCopy,
#oaSpendClear {
  width: 100%;
  margin-top: 7px;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--oa-tab-on-1), var(--oa-tab-on-2));
  color: var(--oa-white);
  font-family: Trebuchet MS, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

#oaBankClear,
#oaSpendClear {
  background: rgba(255,255,255,.16);
}

.oa-bank-pages {
  min-width: 0;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  align-self: stretch;
}

.oa-bank-page {
  display: none;
  height: 100%;
  min-height: 520px;
  overflow-y: auto;
  padding-right: 8px;
}

#oa-bank-main:checked ~ .oa-bank-card .page-main,
#oa-bank-game:checked ~ .oa-bank-card .page-game,
#oa-bank-active:checked ~ .oa-bank-card .page-active,
#oa-bank-spend:checked ~ .oa-bank-card .page-spend {
  display: block;
}

.oa-bank-page::-webkit-scrollbar {
  width: 6px;
}

.oa-bank-page::-webkit-scrollbar-thumb {
  background: var(--oa-scroll);
  border-radius: 20px;
}

.oa-bank-page::-webkit-scrollbar-track {
  background: transparent;
}

.oa-bank-hero {
  padding: 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 10%, rgba(120,220,255,.22), transparent 34%),
    var(--oa-light);
  box-shadow: 0 12px 25px var(--oa-shadow);
  margin-bottom: 14px;
}

.oa-bank-hero h3 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1;
  text-transform: lowercase;
  color: var(--oa-text);
}

.oa-bank-hero p {
  margin: 0;
  color: var(--oa-muted);
  line-height: 1.55;
  font-size: 13px;
}

.oa-bank-section {
  height: 100%;
  margin-bottom: 15px;
  padding: 18px;
  border-radius: 26px;
  background: var(--oa-light);
  box-shadow: 0 12px 25px var(--oa-shadow);
}

.oa-bank-section h3 {
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1;
  text-transform: lowercase;
  color: var(--oa-text);
}

.oa-bank-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 15px;
  background: var(--oa-soft);
}

.oa-bank-row:last-child {
  margin-bottom: 0;
}

.oa-bank-row span {
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.3;
}

.oa-bank-row b {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--oa-dark);
  color: var(--oa-white);
  font-size: 11px;
  font-weight: normal;
}

.oa-bank-row[data-calc],
.oa-bank-row[data-spend] {
  cursor: pointer;
  transition: .2s;
}

.oa-bank-row[data-calc]:hover,
.oa-bank-row[data-spend]:hover {
  transform: translateX(3px);
  background: var(--oa-light-strong);
}

@media (max-width: 760px) {
  .oa-bank {
    max-width: calc(100vw - 12px);
    margin: 16px auto;
    padding-bottom: 180px;
  }

  .oa-bank-card {
    padding: 18px;
    border-radius: 26px;
  }

  .oa-bank-top {
    display: block;
  }

  .oa-bank-top h2 {
    font-size: 31px;
  }

  .oa-bank-coins {
    width: 100%;
    min-width: 0;
    margin-top: 15px;
    text-align: left;
  }

  .oa-bank-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }

  .oa-bank-tabs label {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .oa-bank-body {
    display: block;
  }

  .oa-bank-machine {
    height: auto;
    margin-bottom: 18px;
  }

  .oa-bank-display {
    min-height: 230px;
  }

  .oa-bank-pages,
  .oa-bank-page {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .oa-bank-page {
    display: none;
  }

  .oa-bank-section {
    height: auto;
  }

  .oa-bank .oa-picked-item input {
    font-size: 16px;
  }

  #oaBankResult,
  #oaSpendResult {
    min-height: 150px;
    font-size: 12px;
  }

  #oa-bank-main:checked ~ .oa-bank-card .page-main,
  #oa-bank-game:checked ~ .oa-bank-card .page-game,
  #oa-bank-active:checked ~ .oa-bank-card .page-active,
  #oa-bank-spend:checked ~ .oa-bank-card .page-spend {
    display: block;
  }
}

@media (max-width: 520px) {
  .oa-bank-card {
    padding: 14px;
    border-radius: 22px;
  }

  .oa-bank-top h2 {
    font-size: 28px;
  }

  .oa-bank-display {
    min-height: 220px;
    padding: 15px;
  }

  .oa-bank-title b {
    font-size: 25px;
  }

  .oa-bank-equalizer {
    margin-top: 18px;
  }

  .oa-bank-hero,
  .oa-bank-section {
    padding: 15px;
  }

  .oa-bank-row {
    display: block;
  }

  .oa-bank-row span {
    display: block;
    margin-bottom: 8px;
  }

  .oa-bank-row b {
    display: inline-block;
  }
}
</style>

<script>
(function () {
  var bank = document.querySelector('.oa-bank');
  if (!bank) return;

  var incomeRows = bank.querySelectorAll('.oa-bank-row[data-calc]');
  var spendRows = bank.querySelectorAll('.oa-bank-row[data-spend]');

  var incomeTab = bank.querySelector('#oaReaderIncomeTab');
  var spendTab = bank.querySelector('#oaReaderSpendTab');
  var incomePanel = bank.querySelector('#oaReaderIncome');
  var spendPanel = bank.querySelector('#oaReaderSpend');

  var incomeBox = bank.querySelector('#oaBankPicked');
  var incomeTotal = bank.querySelector('#oaBankTotal');
  var incomeResult = bank.querySelector('#oaBankResult');
  var incomeCopy = bank.querySelector('#oaBankCopy');
  var incomeClear = bank.querySelector('#oaBankClear');

  var spendBox = bank.querySelector('#oaSpendPicked');
  var spendTotal = bank.querySelector('#oaSpendTotal');
  var spendResult = bank.querySelector('#oaSpendResult');
  var spendCopy = bank.querySelector('#oaSpendCopy');
  var spendClear = bank.querySelector('#oaSpendClear');

  var incomeItems = [];
  var spendItems = [];

  function bbOpen() {
    return '[' + 'b' + ']';
  }

  function bbClose() {
    return '[' + '/' + 'b' + ']';
  }

  function word(num) {
    var n = Math.abs(num) % 100;
    var n1 = n % 10;
    if (n > 10 && n < 20) return 'голосов';
    if (n1 > 1 && n1 < 5) return 'голоса';
    if (n1 === 1) return 'голос';
    return 'голосов';
  }

  function switchReader(mode) {
    if (mode === 'spend') {
      incomeTab.classList.remove('active');
      spendTab.classList.add('active');
      incomePanel.classList.remove('active');
      spendPanel.classList.add('active');
    } else {
      spendTab.classList.remove('active');
      incomeTab.classList.add('active');
      spendPanel.classList.remove('active');
      incomePanel.classList.add('active');
    }
  }

  function getTotal(items) {
    var total = 0;
    items.forEach(function (item) {
      total += item.price * (parseInt(item.count, 10) || 0);
    });
    return total;
  }

  /* ЗДЕСЬ МЕНЯЕТСЯ ГОТОВЫЙ КОД ДЛЯ НАЧИСЛЕНИЙ */
  function buildIncomeText() {
    var total = getTotal(incomeItems);
    var lines = [];

    incomeItems.forEach(function (item) {
      var count = parseInt(item.count, 10) || 0;
      var sum = item.price * count;
      var detail = count > 1 ? ' x ' + count : '';

      if (sum > 0) {
        lines.push('— ' + item.name + detail + ': ' + sum + ' ' + word(sum));
      }
    });

    incomeTotal.textContent = total + ' ' + word(total);

    incomeResult.value =
      bbOpen() + 'за что:' + bbClose() + '\n' +
      (lines.length ? lines.join('\n') : '— ') +
      '\n' + bbOpen() + 'доказательства:' + bbClose() + '\n' +
      '\n' + bbOpen() + 'сумма:' + bbClose() + ' ' + total + ' ' + word(total) +
      '\n' + bbOpen() + 'итого на балансе:' + bbClose();
  }

  /* ЗДЕСЬ МЕНЯЕТСЯ ГОТОВЫЙ КОД ДЛЯ ТРАТ */
  function buildSpendText() {
    var total = getTotal(spendItems);
    var lines = [];

    spendItems.forEach(function (item) {
      var count = parseInt(item.count, 10) || 0;
      var sum = item.price * count;
      var detail = count > 1 ? ' x ' + count : '';

      if (sum > 0) {
        lines.push('— ' + item.name + detail + ': ' + sum + ' ' + word(sum));
      }
    });

    spendTotal.textContent = total + ' ' + word(total);

    spendResult.value =
      bbOpen() + 'что берём:' + bbClose() + '\n' +
      (lines.length ? lines.join('\n') : '— ') +
      '\n' + bbOpen() + 'исхи и пожелания:' + bbClose() + '\n' +
      '\n' + bbOpen() + 'скока тратим:' + bbClose() + ' ' + total + ' ' + word(total) +
      '\n' + bbOpen() + 'скока осталось:' + bbClose();
  }

  function renderList(box, items, emptyText, mode) {
    box.innerHTML = '';

    if (!items.length) {
      box.innerHTML = '<span>' + emptyText + '</span>';
      if (mode === 'income') buildIncomeText();
      if (mode === 'spend') buildSpendText();
      return;
    }

    items.forEach(function (item, index) {
      var count = parseInt(item.count, 10) || 0;
      var sum = item.price * count;

      var el = document.createElement('div');
      el.className = 'oa-picked-item';

      el.innerHTML =
        '<strong>' + item.name + '</strong>' +
        '<em>' + sum + ' ' + word(sum) + '</em>' +
        '<div class="oa-picked-controls">' +
          '<button type="button" class="oa-picked-minus" data-mode="' + mode + '" data-index="' + index + '">-</button>' +
          '<input type="number" min="0" value="' + count + '" data-mode="' + mode + '" data-index="' + index + '" placeholder="сколько раз?">' +
          '<button type="button" class="oa-picked-plus" data-mode="' + mode + '" data-index="' + index + '">+</button>' +
        '</div>' +
        '<button type="button" class="oa-picked-remove" data-mode="' + mode + '" data-index="' + index + '">убрать</button>';

      box.appendChild(el);
    });

    if (mode === 'income') buildIncomeText();
    if (mode === 'spend') buildSpendText();
  }

  function renderIncome() {
    renderList(incomeBox, incomeItems, 'нажми на позиции справа', 'income');
  }

  function renderSpend() {
    renderList(spendBox, spendItems, 'нажми на траты справа', 'spend');
  }

  function addItem(items, name, price) {
    var exists = items.find(function (item) {
      return item.name === name;
    });

    if (exists) {
      exists.count += 1;
    } else {
      items.push({
        name: name,
        price: price,
        count: 1
      });
    }
  }

  function updateInput(target) {
    var mode = target.dataset.mode;
    var index = parseInt(target.dataset.index, 10);
    var items = mode === 'spend' ? spendItems : incomeItems;

    if (!items[index]) return;

    items[index].count = parseInt(target.value, 10) || 0;

    var item = items[index];
    var sum = item.price * item.count;
    var pickedItem = target.closest('.oa-picked-item');

    if (pickedItem) {
      pickedItem.querySelector('em').textContent = sum + ' ' + word(sum);
    }

    if (mode === 'spend') {
      buildSpendText();
    } else {
      buildIncomeText();
    }
  }

  function handlePickedClick(e) {
    var mode = e.target.dataset.mode;
    if (!mode) return;

    var items = mode === 'spend' ? spendItems : incomeItems;
    var index = parseInt(e.target.dataset.index, 10);

    if (!items[index]) return;

    if (e.target.classList.contains('oa-picked-remove')) {
      items.splice(index, 1);
    }

    if (e.target.classList.contains('oa-picked-minus')) {
      items[index].count = Math.max(0, (parseInt(items[index].count, 10) || 0) - 1);
    }

    if (e.target.classList.contains('oa-picked-plus')) {
      items[index].count = (parseInt(items[index].count, 10) || 0) + 1;
    }

    if (mode === 'spend') {
      renderSpend();
    } else {
      renderIncome();
    }
  }

  incomeRows.forEach(function (row) {
    row.addEventListener('click', function () {
      addItem(incomeItems, row.dataset.name, parseInt(row.dataset.price, 10) || 0);
      switchReader('income');
      renderIncome();
    });
  });

  spendRows.forEach(function (row) {
    row.addEventListener('click', function () {
      addItem(spendItems, row.dataset.name, parseInt(row.dataset.price, 10) || 0);
      switchReader('spend');
      renderSpend();
    });
  });

  incomeTab.addEventListener('click', function () {
    switchReader('income');
  });

  spendTab.addEventListener('click', function () {
    switchReader('spend');
  });

  incomeBox.addEventListener('focusin', function (e) {
    if (e.target.matches('input') && e.target.value === '0') e.target.value = '';
  });

  spendBox.addEventListener('focusin', function (e) {
    if (e.target.matches('input') && e.target.value === '0') e.target.value = '';
  });

  incomeBox.addEventListener('input', function (e) {
    if (e.target.matches('input')) updateInput(e.target);
  });

  spendBox.addEventListener('input', function (e) {
    if (e.target.matches('input')) updateInput(e.target);
  });

  incomeBox.addEventListener('focusout', function (e) {
    if (e.target.matches('input') && e.target.value === '') {
      e.target.value = '0';
      updateInput(e.target);
    }
  });

  spendBox.addEventListener('focusout', function (e) {
    if (e.target.matches('input') && e.target.value === '') {
      e.target.value = '0';
      updateInput(e.target);
    }
  });

  incomeBox.addEventListener('click', handlePickedClick);
  spendBox.addEventListener('click', handlePickedClick);

  incomeCopy.addEventListener('click', function () {
    incomeResult.select();
    document.execCommand('copy');
    incomeCopy.textContent = 'скопировано';
    setTimeout(function () {
      incomeCopy.textContent = 'скопировать';
    }, 1200);
  });

  spendCopy.addEventListener('click', function () {
    spendResult.select();
    document.execCommand('copy');
    spendCopy.textContent = 'скопировано';
    setTimeout(function () {
      spendCopy.textContent = 'скопировать';
    }, 1200);
  });

  incomeClear.addEventListener('click', function () {
    incomeItems = [];
    renderIncome();
  });

  spendClear.addEventListener('click', function () {
    spendItems = [];
    renderSpend();
  });

  renderIncome();
  renderSpend();
})();
</script>

[/html][/hideprofile]

[b]за что:[/b]
[b]доказательства:[/b]
[b]сумма:[/b]
[b]итого на балансе:[/b]

[b]что берём:[/b]
[b]скока тратим:[/b]
[b]скока осталось:[/b]