[hideprofile][html]

<div class="oa-lightstore">

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

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

  <!-- ШАПКА МАГАЗИНА -->
  <div class="oa-light-top">
    <div>
      <span>ON:AIR LIGHT</span>
      <h2>lightstick store</h2>
      <em> лайтстики/плюшки</em>
    </div>

    <div class="oa-light-coins">
      <b>✦</b>
      <span>копим плюшки</span>
    </div>
  </div>

  <!-- ВКЛАДКИ: for не трогать, менять только текст -->
  <div class="oa-light-tabs">
    <label for="oa-light-about">о лайтах</label>
    <label for="oa-light-price">прайс</label>
    <label for="oa-light-boys">мальчики</label>
    <label for="oa-light-girls">девочки</label>
  </div>

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

    <!-- ЛЕВЫЙ ЧЁРНЫЙ БЛОК -->
    <div class="oa-light-machine">
      <div class="oa-light-display">

        <div class="oa-light-live">
          <i></i>
          <b>LIGHT ON AIR</b>
        </div>

        <div class="oa-light-title">
          <span>bonus beam</span>
          <b>лайтстики</b>
          <em>делаем жизнь ярче!</em>
        </div>

        <div class="oa-light-meter">
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="oa-light-mini">
          <b>3 версии</b>
          <span>base / color / holo</span>
        </div>

      </div>
    </div>

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

      <!-- ВКЛАДКА ОБЩЕЕ -->
      <div class="oa-light-page page-about">

        <div class="oa-light-hero">
          <h3>что такое лайтстик?</h3>
          <p>
            Лайтстик — это шанс получить полезный бонус в профиль через покупку и выполнение заданий
            в течение определённого периода времени. У каждого лайтстика есть выбранное свойство:
            иммунитет, фон, плашка, пропуск, х2 в банке и другие бонусы.
          </p>
          <p>
            Свойство выбирается при покупке базового лайтстика <b>один раз и навсегда</b>.
            После выбора поменять бонус нельзя.
          </p>
        </div>

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

          <div class="oa-level-card">
            <b>base</b>
            <h4>базовый лайтстик</h4>
            <p>
              Чёрно-белая версия для личной страницы. Покупается за валюту или через задания:
              сообщения, посты, sns и другую активность.
            </p>
          </div>

          <div class="oa-level-card">
            <b>lv.1</b>
            <h4>цветной лайтстик</h4>
            <p>
              Открывается после выполнения заданий первого уровня. Чёрно-белая иконка заменяется
              цветной, а выбранный бонус становится доступен.
            </p>
          </div>

          <div class="oa-level-card holo">
            <b>lv.2</b>
            <h4>голографический лайтстик</h4>
            <p>
              Получается через усложнённые задания. Цветная версия заменяется на голо,
              а бонус усиливается до улучшенной версии.
            </p>
          </div>

        </div>

        <div class="oa-bonus-section">
          <h3>возможные свойства</h3>

          <div class="oa-bonus-grid">
            <span>на твина</span>
            <span>на иммунитет</span>
            <span>на фон</span>
            <span>на плашку</span>
            <span>пропуск задания в отметках</span>
            <span>пропуск 7 дней в отметках</span>
            <span>награда новичкам</span>
            <span>пропуск конкурса</span>
            <span>пропуск ежедневного задания</span>
            <span>х2 в банке</span>
          </div>
        </div>

      </div>

      <!-- ВКЛАДКА ПРАЙС -->
      <div class="oa-light-page page-price">

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

          <div class="oa-price-card">
            <div class="oa-price-icon">B</div>
            <h3>базовый</h3>
            <b>цена: 1000 голосов</b>
            <p>
              Покупка чёрно-белого лайтстика и выбор одного свойства.
              Бонус фиксируется за лайтстиком навсегда.
            </p>
          </div>

          <div class="oa-price-card color">
            <div class="oa-price-icon">1</div>
            <h3>уровень 1</h3>
            <b>апгрейд заданиями</b>
            <p>
              Цветная версия. После выполнения условий открывает базовый бонус,
              выбранный при покупке лайтстика.
            </p>
          </div>

          <div class="oa-price-card holo">
            <div class="oa-price-icon">2</div>
            <h3>уровень 2</h3>
            <b>сложный апгрейд</b>
            <p>
              Голографическая версия. Усиливает выбранный бонус и заменяет цветную иконку
              на личной странице.
            </p>
          </div>

        </div>

        <div class="oa-task-board">
          <h4>пример заданий для апгрейда</h4>

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

      </div>

      <!-- ВКЛАДКА МАЛЬЧИКИ -->
      <div class="oa-light-page page-boys">

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

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 01</h3>
            <b>1000 голосов</b>
            <span>свойство: иммунитет</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 02</h3>
            <b>1000 голосов</b>
            <span>свойство: фон</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 03</h3>
            <b>1000 голосов</b>
            <span>свойство: плашка</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 04</h3>
            <b>1000 голосов</b>
            <span>свойство: твина</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 05</h3>
            <b>1000 голосов</b>
            <span>свойство: х2 в банке</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 06</h3>
            <b>1000 голосов</b>
            <span>свойство: пропуск отметки</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 07</h3>
            <b>1000 голосов</b>
            <span>свойство: пропуск конкурса</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 08</h3>
            <b>1000 голосов</b>
            <span>свойство: ежедневка</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 09</h3>
            <b>1000 голосов</b>
            <span>свойство: 7 дней отметок</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>boy group 10</h3>
            <b>1000 голосов</b>
            <span>свойство: награда новичкам</span>
          </div>

        </div>

      </div>

      <!-- ВКЛАДКА ДЕВОЧКИ -->
      <div class="oa-light-page page-girls">

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

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 01</h3>
            <b>1000 голосов</b>
            <span>свойство: иммунитет</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 02</h3>
            <b>1000 голосов</b>
            <span>свойство: фон</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 03</h3>
            <b>1000 голосов</b>
            <span>свойство: плашка</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 04</h3>
            <b>1000 голосов</b>
            <span>свойство: твина</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 05</h3>
            <b>1000 голосов</b>
            <span>свойство: х2 в банке</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 06</h3>
            <b>1000 голосов</b>
            <span>свойство: пропуск отметки</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 07</h3>
            <b>1000 голосов</b>
            <span>свойство: пропуск конкурса</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 08</h3>
            <b>1000 голосов</b>
            <span>свойство: ежедневка</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 09</h3>
            <b>1000 голосов</b>
            <span>свойство: 7 дней отметок</span>
          </div>

          <div class="oa-stick-card">
            <div class="oa-stick-img" style="background-image:url('ССЫЛКА_НА_ЛАЙТСТИК');"></div>
            <h3>girl group 10</h3>
            <b>1000 голосов</b>
            <span>свойство: награда новичкам</span>
          </div>

        </div>

      </div>

    </div>
  </div>

</div>
</div>

<style>
/* =========================================================
   АДМИНАМ: LIGHTSTORE БЕРЁТ ЦВЕТА ИЗ ОБЩЕЙ ON:AIR-КАРТЫ
   В style_cs.css менять --oa-global-... — здесь подтянется само.
   ========================================================= */

.oa-lightstore {
  --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-light: var(--oa-global-card);
  --oa-light-strong: var(--oa-global-card-strong);
  --oa-soft: var(--oa-global-soft);
  --oa-pill-bg: var(--oa-global-pill);

  --oa-text: var(--oa-global-text);
  --oa-muted: var(--oa-global-muted);
  --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-lightstore,
.oa-lightstore *,
.oa-lightstore *:before,
.oa-lightstore *:after {
  box-sizing: border-box;
}

.oa-lightstore input {
  display: none;
}

.oa-light-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-light-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

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

.oa-light-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-light-top em {
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-muted);
}

.oa-light-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-light-coins b {
  display: block;
  font-size: 28px;
  line-height: 1;
  color: var(--oa-dot);
}

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

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

.oa-light-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-light-tabs label:hover {
  transform: translateY(-2px);
}

#oa-light-about:checked ~ .oa-light-card .oa-light-tabs label[for="oa-light-about"],
#oa-light-price:checked ~ .oa-light-card .oa-light-tabs label[for="oa-light-price"],
#oa-light-boys:checked ~ .oa-light-card .oa-light-tabs label[for="oa-light-boys"],
#oa-light-girls:checked ~ .oa-light-card .oa-light-tabs label[for="oa-light-girls"] {
  background: linear-gradient(135deg, var(--oa-tab-on-1), var(--oa-tab-on-2));
}

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

.oa-light-machine {
  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-light-display {
  position: relative;
  min-height: 500px;
  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-light-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-light-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: 10px;
  letter-spacing: 2px;
}

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

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

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

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

.oa-light-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-light-meter {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin-top: 38px;
}

.oa-light-meter span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--oa-mint), var(--oa-pink));
  box-shadow: 0 0 14px rgba(143,245,236,.28);
}

.oa-light-meter span:nth-child(1) { width: 62%; }
.oa-light-meter span:nth-child(2) { width: 88%; }
.oa-light-meter span:nth-child(3) { width: 46%; }

.oa-light-mini {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  text-align: center;
}

.oa-light-mini b {
  display: block;
  color: var(--oa-mint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.oa-light-mini span {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

.oa-light-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-light-pages {
  min-width: 0;
  height: 520px;
  overflow: hidden;
}

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

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

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

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

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

.oa-light-hero,
.oa-bonus-section,
.oa-task-board {
  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-light-hero h3,
.oa-bonus-section h3 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1;
  text-transform: lowercase;
  color: var(--oa-text);
}

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

.oa-light-hero p:last-child {
  margin-bottom: 0;
}

.oa-level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-bottom: 14px;
}

.oa-level-card {
  padding: 16px;
  border-radius: 22px;
  background: var(--oa-light);
  box-shadow: 0 10px 20px var(--oa-shadow);
}

.oa-level-card.holo {
  background:
    radial-gradient(circle at 90% 0%, rgba(255,180,220,.35), transparent 36%),
    radial-gradient(circle at 10% 100%, rgba(120,220,255,.25), transparent 36%),
    var(--oa-light-strong);
}

.oa-level-card b {
  display: inline-block;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--oa-dark);
  color: var(--oa-white);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.oa-level-card h4 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1;
  text-transform: lowercase;
  color: var(--oa-text);
}

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

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

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

.oa-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.oa-price-card {
  padding: 18px;
  border-radius: 24px;
  background: var(--oa-light);
  box-shadow: 0 12px 25px var(--oa-shadow);
}

.oa-price-card.color {
  background:
    radial-gradient(circle at 92% 10%, rgba(120,220,255,.24), transparent 34%),
    var(--oa-light-strong);
}

.oa-price-card.holo {
  background:
    radial-gradient(circle at 92% 10%, rgba(255,180,220,.34), transparent 36%),
    radial-gradient(circle at 10% 95%, rgba(120,220,255,.28), transparent 34%),
    var(--oa-light-strong);
}

.oa-price-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--oa-pink), var(--oa-blue));
  border: 3px solid var(--oa-white);
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oa-text);
  font-size: 18px;
  font-weight: bold;
}

.oa-price-card h3 {
  margin: 0 0 9px;
  font-size: 21px;
  line-height: 1;
  text-transform: lowercase;
  color: var(--oa-text);
}

.oa-price-card b {
  display: inline-block;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--oa-soft);
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: normal;
}

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

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

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

.oa-stick-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 126px;
  padding: 14px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(120,220,255,.22), transparent 34%),
    var(--oa-light);
  box-shadow: 0 12px 25px var(--oa-shadow);
}

.oa-stick-img {
  position: relative;
  width: 76px;
  height: 116px;
  border-radius: 18px;
  background-color: var(--oa-pill-bg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 8px 16px rgba(0,0,0,.10);
}

.oa-stick-card h3 {
  margin: 0 0 7px;
  font-size: 18px;
  line-height: 1;
  text-transform: lowercase;
  color: var(--oa-text);
}

.oa-stick-card b {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--oa-dark);
  color: var(--oa-white);
  font-size: 11px;
  font-weight: normal;
}

.oa-stick-card span {
  display: block;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.35;
}

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

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

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

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

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

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

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

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

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

  .oa-light-display {
    min-height: 330px;
  }

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

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

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

  .oa-level-grid,
  .oa-price-grid,
  .oa-stick-grid {
    grid-template-columns: 1fr;
  }
}

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

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

  .oa-light-display {
    min-height: 305px;
    padding: 15px;
  }

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

  .oa-light-hero,
  .oa-bonus-section,
  .oa-task-board,
  .oa-price-card {
    padding: 15px;
  }

  .oa-stick-card {
    grid-template-columns: 72px 1fr;
    padding: 13px;
  }

  .oa-stick-img {
    width: 66px;
    height: 100px;
  }
}
</style>

[/html][/hideprofile]

[b]группа:[/b]
[b]свойство:[/b]

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