[html]
<style>
/* =========================================================
   ГАЛЕРЕЯ ДЛЯ ФОРУМА
   Основной размер меняется здесь: --seysi-rg-width и --seysi-rg-height
   ========================================================= */
.seysi-resource-gallery {
  --seysi-rg-width: 780px;
  --seysi-rg-height: 620px;
  --seysi-rg-bg: #f7f3f1;
  --seysi-rg-card: #fffdfc;
  --seysi-rg-line: #e7d9d4;
  --seysi-rg-accent: #d97768;
  --seysi-rg-accent-soft: #efd0c8;
  --seysi-rg-brown: #8f7068;
  --seysi-rg-text: #4e4543;
  --seysi-rg-muted: #9a8e8a;

  width: var(--seysi-rg-width);
  height: var(--seysi-rg-height);
  margin: 20px auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  color: var(--seysi-rg-text);
  background: var(--seysi-rg-bg);
  border: 1px solid var(--seysi-rg-line);
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(93, 67, 61, .12);
  font: 13px/1.4 Arial, sans-serif;
}

.seysi-resource-gallery *,
.seysi-resource-gallery *::before,
.seysi-resource-gallery *::after {
  box-sizing: border-box;
}

.seysi-resource-gallery > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Вкладки */
.seysi-resource-gallery .seysi-rg-tabs {
  height: 58px;
  padding: 9px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  flex: 0 0 auto;
  background: #eee2de;
  border-bottom: 1px solid var(--seysi-rg-line);
}

.seysi-resource-gallery .seysi-rg-tabs label {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  color: var(--seysi-rg-brown);
  background: rgba(255,255,255,.55);
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: .2s ease;
}

.seysi-resource-gallery .seysi-rg-tabs label:hover {
  color: var(--seysi-rg-accent);
  background: #fffaf8;
}

.seysi-resource-gallery > #seysi-rg-tab-1:checked ~ .seysi-rg-tabs label[for="seysi-rg-tab-1"],
.seysi-resource-gallery > #seysi-rg-tab-2:checked ~ .seysi-rg-tabs label[for="seysi-rg-tab-2"],
.seysi-resource-gallery > #seysi-rg-tab-3:checked ~ .seysi-rg-tabs label[for="seysi-rg-tab-3"],
.seysi-resource-gallery > #seysi-rg-tab-4:checked ~ .seysi-rg-tabs label[for="seysi-rg-tab-4"] {
  color: #fff;
  background: var(--seysi-rg-accent);
  border-color: var(--seysi-rg-accent);
  box-shadow: 0 4px 12px rgba(183, 100, 87, .25);
}

/* Страницы: высота фиксирована, прокрутка только здесь */
.seysi-resource-gallery .seysi-rg-pages {
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
}

.seysi-resource-gallery .seysi-rg-page {
  display: none;
  width: 100%;
  height: 100%;
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--seysi-rg-accent-soft) transparent;
}

.seysi-resource-gallery .seysi-rg-page::-webkit-scrollbar { width: 8px; }
.seysi-resource-gallery .seysi-rg-page::-webkit-scrollbar-track { background: transparent; }
.seysi-resource-gallery .seysi-rg-page::-webkit-scrollbar-thumb {
  background: var(--seysi-rg-accent-soft);
  border: 2px solid var(--seysi-rg-bg);
  border-radius: 10px;
}

.seysi-resource-gallery > #seysi-rg-tab-1:checked ~ .seysi-rg-pages .seysi-rg-page-1,
.seysi-resource-gallery > #seysi-rg-tab-2:checked ~ .seysi-rg-pages .seysi-rg-page-2,
.seysi-resource-gallery > #seysi-rg-tab-3:checked ~ .seysi-rg-pages .seysi-rg-page-3,
.seysi-resource-gallery > #seysi-rg-tab-4:checked ~ .seysi-rg-pages .seysi-rg-page-4 {
  display: block;
}

.seysi-resource-gallery .seysi-rg-heading {
  margin: 0 0 14px;
  color: var(--seysi-rg-accent);
  font: italic 700 22px/1.1 Georgia, serif;
  text-align: center;
}

.seysi-resource-gallery .seysi-rg-note {
  display: block;
  margin: -5px 0 16px;
  color: var(--seysi-rg-muted);
  font-size: 11px;
  text-align: center;
}

/* Поле с кодом или ссылкой */
.seysi-resource-gallery .seysi-rg-copy {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  color: #6e5c57;
  background: #f5eeee;
  border: 1px solid #eadbd6;
  border-radius: 7px;
  outline: none;
  font: 11px/30px Consolas, "Courier New", monospace;
  text-align: center;
}

.seysi-resource-gallery .seysi-rg-copy:focus {
  color: var(--seysi-rg-accent);
  background: #fff;
  border-color: var(--seysi-rg-accent-soft);
  box-shadow: 0 0 0 3px rgba(217, 119, 104, .1);
}

.seysi-resource-gallery .seysi-rg-field-name {
  display: block;
  margin: 8px 0 5px;
  color: var(--seysi-rg-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- 1. Картинки и палитры ---------- */
.seysi-resource-gallery .seysi-rg-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 220px);
  justify-content: center;
  gap: 10px;
}

.seysi-resource-gallery .seysi-rg-image-card,
.seysi-resource-gallery .seysi-rg-icon-card,
.seysi-resource-gallery .seysi-rg-kit-card {
  background: var(--seysi-rg-card);
  border: 1px solid var(--seysi-rg-line);
  border-radius: 13px;
  box-shadow: 0 5px 15px rgba(107, 80, 73, .07);
}

.seysi-resource-gallery .seysi-rg-image-card { padding: 5px; }

.seysi-resource-gallery .seysi-rg-main-image {
  width: 200px;
  height: 100px;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #eadbd6;
  border-radius: 9px;
}

.seysi-resource-gallery .seysi-rg-swatches {
  margin-top: 5px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.seysi-resource-gallery .seysi-rg-swatch-item { min-width: 0; text-align: center; }

.seysi-resource-gallery .seysi-rg-swatch {
  width: 24px;
  height: 24px;
  margin: 0 auto 5px;
  display: block;
  background: var(--swatch-color);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #ded1cd, 0 3px 7px rgba(70, 50, 45, .12);
}

.seysi-resource-gallery .seysi-rg-swatch-item .seysi-rg-copy {
  height: 25px;
  padding: 0 3px;
  font-size: 10px;
  line-height: 25px;
}

/* ---------- 2. Иконки 20x20 ---------- */
.seysi-resource-gallery .seysi-rg-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.seysi-resource-gallery .seysi-rg-icon-card {
  min-width: 0;
  padding: 12px 9px 9px;
  text-align: center;
}

.seysi-resource-gallery .seysi-rg-icon-preview {
  width: 48px;
  height: 48px;
  margin: 0 auto 9px;
  display: grid;
  place-items: center;
  background: #f5eeee;
  border: 1px dashed #dfcbc5;
  border-radius: 12px;
}

.seysi-resource-gallery .seysi-rg-icon-preview img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

/* ---------- 3. Готовые комплекты ---------- */
.seysi-resource-gallery .seysi-rg-kit-list {
  display: grid;
  grid-template-columns: repeat(3, 230px);
  justify-content: center;
  gap: 10px;
}

.seysi-resource-gallery .seysi-rg-kit-card {
  width: 230px;
  padding: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.seysi-resource-gallery .seysi-rg-kit-part {
  min-width: 0;
  margin-bottom: 0;
  padding: 8px;
  background: #faf6f4;
  border: 1px solid #efe3df;
  border-radius: 10px;
}

.seysi-resource-gallery .seysi-rg-kit-iconbox {
  height: 68px;
  display: grid;
  place-items: center;
}

.seysi-resource-gallery .seysi-rg-kit-iconbox img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.seysi-resource-gallery .seysi-rg-kit-picture {
  width: 200px;
  height: 100px;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  background: #eadbd6;
  border-radius: 8px;
}

/* Плашка собрана кодом, это НЕ картинка */
.seysi-resource-gallery .seysi-rg-badge-wrap {
  height: 94px;
  display: grid;
  place-items: center;
  padding: 8px;
}

.seysi-resource-gallery .seysi-rg-profile-badge {
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--seysi-rg-badge-color);
  border-radius: 0 0 11px 11px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(56, 70, 91, .22);
}

.seysi-resource-gallery .seysi-rg-profile-badge b {
  font-size: 11px;
  line-height: 1.05;
}

.seysi-resource-gallery .seysi-rg-profile-badge small {
  margin-top: 1px;
  font-size: 8px;
  line-height: 1.05;
}

.seysi-resource-gallery .seysi-rg-kit-text-fields {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 6px;
}

/* ---------- 4. Отдельные плашки ---------- */
.seysi-resource-gallery .seysi-rg-badge-list {
  display: grid;
  grid-template-columns: repeat(4, 170px);
  justify-content: center;
  gap: 10px;
}

.seysi-resource-gallery .seysi-rg-badge-card {
  width: 170px;
  padding: 8px;
  background: var(--seysi-rg-card);
  border: 1px solid var(--seysi-rg-line);
  border-radius: 13px;
  box-shadow: 0 5px 15px rgba(107, 80, 73, .07);
}

.seysi-resource-gallery .seysi-rg-badge-card .seysi-rg-badge-wrap {
  height: 74px;
  padding: 5px;
  background: #faf6f4;
  border: 1px solid #efe3df;
  border-radius: 9px;
}

.seysi-resource-gallery .seysi-rg-badge-fields {
  display: grid;
  gap: 5px;
}

/* Если форум уже, меняй только --seysi-rg-width сверху. */
</style>

<div class="seysi-resource-gallery">
  <!-- Переключатели вкладок. ID должны оставаться уникальными. -->
  <input type="radio" name="seysi-rg-tabs" id="seysi-rg-tab-1" checked>
  <input type="radio" name="seysi-rg-tabs" id="seysi-rg-tab-2">
  <input type="radio" name="seysi-rg-tabs" id="seysi-rg-tab-3">
  <input type="radio" name="seysi-rg-tabs" id="seysi-rg-tab-4">

  <div class="seysi-rg-tabs">
    <label for="seysi-rg-tab-1">фоны + цвета</label>
    <label for="seysi-rg-tab-2">иконки 20×20</label>
    <label for="seysi-rg-tab-3">комплекты</label>
    <label for="seysi-rg-tab-4">плашки</label>
  </div>

  <div class="seysi-rg-pages">
    <!-- =====================================================
         ПЕРВАЯ СТРАНИЦА: картинка, ссылка и три цвета
         Чтобы добавить карточку, скопируй весь .seysi-rg-image-card
         ===================================================== -->
    <section class="seysi-rg-page seysi-rg-page-1">
      <h2 class="seysi-rg-heading">Фоны и палитры</h2>
      <p class="seysi-rg-note">Нажми на поле — текст выделится для копирования.</p>
 
      <div class="seysi-rg-image-grid">
        <!-- -->
        <article class="seysi-rg-image-card">
          <img class="seysi-rg-main-image"
               src="https://forumstatic.ru/files/001c/85/52/75814.png"
               alt="Превью картинки">
          <span class="seysi-rg-field-name">Ссылка на картинку</span>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                 value="https://forumstatic.ru/files/001c/85/52/75814.png">

          <div class="seysi-rg-swatches">
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#C8B978"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#C8B978">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#FE8279"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#FE8279">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#FBC5DC"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#FBC5DC">
            </div>
          </div>
        </article>
        <article class="seysi-rg-image-card">
          <img class="seysi-rg-main-image"
               src="https://forumstatic.ru/files/001c/85/52/59984.png"
               alt="Превью картинки">
          <span class="seysi-rg-field-name">Ссылка на картинку</span>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                 value="https://site.ru/image-02.png">

          <div class="seysi-rg-swatches">
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#F9D989"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#F9D989">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#945C00"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#945C00">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#AC9B3B"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#AC9B3B">
            </div>
          </div>
        </article>
        <article class="seysi-rg-image-card">
          <img class="seysi-rg-main-image"
               src="https://forumstatic.ru/files/001c/85/52/58429.png"
               alt="Превью картинки">
          <span class="seysi-rg-field-name">Ссылка на картинку</span>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                 value="https://forumstatic.ru/files/001c/85/52/58429.png">
          <div class="seysi-rg-swatches">
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#FF84CC"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#FF84CC">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#B7367E"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#B7367E">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#ACE2B4"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#ACE2B4">
            </div>
          </div>
        </article>
        <article class="seysi-rg-image-card">
          <img class="seysi-rg-main-image"
               src="https://forumstatic.ru/files/001c/85/52/43603.png"
               alt="Превью картинки">
          <span class="seysi-rg-field-name">Ссылка на картинку</span>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                 value="https://site.ru/image-02.png">

          <div class="seysi-rg-swatches">
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#A379C3"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#A379C3">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#EF9AB3"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#EF9AB3">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#DD3D63"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#DD3D63">
            </div>
          </div>
        </article>
        <article class="seysi-rg-image-card">
          <img class="seysi-rg-main-image"
               src="https://forumstatic.ru/files/001c/85/52/32664.jpg"
               alt="Превью картинки">
          <span class="seysi-rg-field-name">Ссылка на картинку</span>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                 value="https://site.ru/image-02.png">

          <div class="seysi-rg-swatches">
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#8AC2C5"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#8AC2C5">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#F9DC76"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#F9DC76">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#D9CDBF"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#D9CDBF">
            </div>
          </div>
        </article>
        <article class="seysi-rg-image-card">
          <img class="seysi-rg-main-image"
               src="https://forumstatic.ru/files/001c/85/52/90703.png"
               alt="Превью картинки">
          <span class="seysi-rg-field-name">Ссылка на картинку</span>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                 value="https://site.ru/image-02.png">

          <div class="seysi-rg-swatches">
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#86A29F"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#86A29F">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#CAB0C9"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#CAB0C9">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#B44D6B"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#B44D6B">
            </div>
          </div>
        </article>
        <article class="seysi-rg-image-card">
          <img class="seysi-rg-main-image"
               src="https://forumstatic.ru/files/001c/85/52/10415.jpg"
               alt="Превью картинки">
          <span class="seysi-rg-field-name">Ссылка на картинку</span>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                 value="https://site.ru/image-02.png">

          <div class="seysi-rg-swatches">
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#1DAEB3"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#1DAEB3">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#F29105"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#F29105">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#9BDFA4"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#9BDFA4">
            </div>
          </div>
        </article>
        <article class="seysi-rg-image-card">
          <img class="seysi-rg-main-image"
               src="https://forumstatic.ru/files/001c/85/52/61106.jpg"
               alt="Превью картинки">
          <span class="seysi-rg-field-name">Ссылка на картинку</span>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                 value="https://site.ru/image-02.png">

          <div class="seysi-rg-swatches">
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#712D2C"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#712D2C">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#2E5B80"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#2E5B80">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#D69FB6"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#D69FB6">
            </div>
          </div>
        </article>
       
        <article class="seysi-rg-image-card">
          <img class="seysi-rg-main-image"
               src="https://placehold.co/600x380/d9dfe8/6d7582?text=YOUR+IMAGE"
               alt="Превью картинки">
          <span class="seysi-rg-field-name">Ссылка на картинку</span>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                 value="https://site.ru/image-02.png">

          <div class="seysi-rg-swatches">
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#91AFD9"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#91AFD9">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#D9DFE8"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#D9DFE8">
            </div>
            <div class="seysi-rg-swatch-item">
              <i class="seysi-rg-swatch" style="--swatch-color:#6D7582"></i>
              <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#6D7582">
            </div>
          </div>
        </article>
      <!-- --> 
      </div>
     
    </section>

    <!-- =====================================================
         ВТОРАЯ СТРАНИЦА: иконки ровно 20x20 и ссылка
         ===================================================== -->
    <section class="seysi-rg-page seysi-rg-page-2">
      <h2 class="seysi-rg-heading">Маленькие иконки</h2>
      <p class="seysi-rg-note">Все превью показаны в настоящем размере 20×20 px.</p>

      <div class="seysi-rg-icon-grid">
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/13684.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/13684.gif">
        </article>

        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/52202.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/52202.gif">
        </article>

        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/37468.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/37468.gif">
        </article>

        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/19420.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/19420.gif">
        </article>

        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/33930.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/33930.gif">
        </article>
       
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/97347.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/97347.gif">
        </article>
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/25568.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/25568.gif">
        </article>
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/13684.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/13684.gif">
        </article>
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/45400.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="hhttps://forumstatic.ru/files/001c/85/52/45400.png">
        </article>
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/61917.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/61917.png">
        </article>
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/91843.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/91843.png">
        </article>
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/80960.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/80960.png">
        </article>
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/36588.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/36588.gif">
        </article>
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/43437.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/43437.png">
        </article>
       
        <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/13759.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/13759.png">
        </article>
       
         <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/12155.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/12155.gif">
        </article>
       
         <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/30396.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/30396.png">
        </article>
       
         <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/56284.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/56284.gif">
        </article>
       
         <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/11994.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/11994.gif">
        </article>
       
         <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/76173.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/76173.gif">
        </article>
       
         <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/62865.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/62865.gif">
        </article>
       
         <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/39794.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/39794.gif">
        </article>
       
         <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/34326.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/34326.gif">
        </article>
       
         <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://forumstatic.ru/files/001c/85/52/95900.gif" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://forumstatic.ru/files/001c/85/52/95900.gif">
        </article>
       
              <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://placehold.co/20x20/719f88/ffffff.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://site.ru/icon-05.gif">
        </article>
       
              <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://placehold.co/20x20/719f88/ffffff.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://site.ru/icon-05.gif">
        </article>
       
              <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://placehold.co/20x20/719f88/ffffff.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://site.ru/icon-05.gif">
        </article>
       
              <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://placehold.co/20x20/719f88/ffffff.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://site.ru/icon-05.gif">
        </article>
       
              <article class="seysi-rg-icon-card">
          <div class="seysi-rg-icon-preview">
            <img src="https://placehold.co/20x20/719f88/ffffff.png" alt="Иконка">
          </div>
          <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="https://site.ru/icon-05.gif">
        </article>
      </div>
    </section>

    <!-- =====================================================
         ТРЕТЬЯ СТРАНИЦА: иконка + картинка + живая плашка
         Плашка правится текстом и цветом прямо в HTML.
         ===================================================== -->
    <section class="seysi-rg-page seysi-rg-page-3">
      <h2 class="seysi-rg-heading">Готовые комплекты</h2>
      <p class="seysi-rg-note">Плашка справа — обычный HTML-текст на цветном фоне, а не картинка.</p>

      <div class="seysi-rg-kit-list">
        <article class="seysi-rg-kit-card">
          <div class="seysi-rg-kit-part">
            <div class="seysi-rg-kit-iconbox">
              <img src="https://placehold.co/20x20/91afd9/ffffff.png" alt="Иконка комплекта">
            </div>
            <span class="seysi-rg-field-name">Ссылка иконки</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                   value="https://site.ru/set-01-icon.gif">
          </div>

          <div class="seysi-rg-kit-part">
            <img class="seysi-rg-kit-picture"
                 src="https://placehold.co/420x210/e7c8c0/8d6f68?text=PROFILE+IMAGE"
                 alt="Картинка комплекта">
            <span class="seysi-rg-field-name">Ссылка картинки</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                   value="https://site.ru/set-01-image.png">
          </div>

          <div class="seysi-rg-kit-part">
            <div class="seysi-rg-badge-wrap">
              <!-- Цвет плашки меняется в --seysi-rg-badge-color -->
              <div class="seysi-rg-profile-badge" style="--seysi-rg-badge-color:#91AFD9">
                <!-- Этот текст пишется руками -->
                <b>дада</b>
                <small>надо проверить</small>
              </div>
            </div>
            <div class="seysi-rg-kit-text-fields">
              <div>
                <span class="seysi-rg-field-name">Цвет</span>
                <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#91AFD9">
              </div>
              <div>
                <span class="seysi-rg-field-name">Текст</span>
                <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="дада — надо проверить">
              </div>
            </div>
          </div>
        </article>

        <article class="seysi-rg-kit-card">
          <div class="seysi-rg-kit-part">
            <div class="seysi-rg-kit-iconbox">
              <img src="https://placehold.co/20x20/d97768/ffffff.png" alt="Иконка комплекта">
            </div>
            <span class="seysi-rg-field-name">Ссылка иконки</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                   value="https://site.ru/set-02-icon.gif">
          </div>

          <div class="seysi-rg-kit-part">
            <img class="seysi-rg-kit-picture"
                 src="https://placehold.co/420x210/d9dfe8/6d7582?text=PROFILE+IMAGE"
                 alt="Картинка комплекта">
            <span class="seysi-rg-field-name">Ссылка картинки</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()"
                   value="https://site.ru/set-02-image.png">
          </div>

          <div class="seysi-rg-kit-part">
            <div class="seysi-rg-badge-wrap">
              <div class="seysi-rg-profile-badge" style="--seysi-rg-badge-color:#D97768">
                <b>сладкая жизнь</b>
                <small>с характером</small>
              </div>
            </div>
            <div class="seysi-rg-kit-text-fields">
              <div>
                <span class="seysi-rg-field-name">Цвет</span>
                <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#D97768">
              </div>
              <div>
                <span class="seysi-rg-field-name">Текст</span>
                <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="сладкая жизнь — с характером">
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- =====================================================
         ЧЕТВЁРТАЯ СТРАНИЦА: отдельные живые HTML-плашки
         Четыре карточки в ряд. Цвет и обе строки меняются руками.
         ===================================================== -->
    <section class="seysi-rg-page seysi-rg-page-4">
      <h2 class="seysi-rg-heading">Плашки</h2>
      <p class="seysi-rg-note">Плашки собраны HTML-кодом: меняй цвет, верхнюю и нижнюю строку.</p>

      <div class="seysi-rg-badge-list">
        <article class="seysi-rg-badge-card">
          <div class="seysi-rg-badge-wrap">
            <div class="seysi-rg-profile-badge" style="--seysi-rg-badge-color:#91AFD9">
              <b>дада</b>
              <small>надо проверить</small>
            </div>
          </div>
          <div class="seysi-rg-badge-fields">
            <span class="seysi-rg-field-name">Цвет</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#91AFD9">
            <span class="seysi-rg-field-name">Верхняя строка</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="дада">
            <span class="seysi-rg-field-name">Нижняя строка</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="надо проверить">
          </div>
        </article>

        <article class="seysi-rg-badge-card">
          <div class="seysi-rg-badge-wrap">
            <div class="seysi-rg-profile-badge" style="--seysi-rg-badge-color:#D97768">
              <b>сладкая жизнь</b>
              <small>с характером</small>
            </div>
          </div>
          <div class="seysi-rg-badge-fields">
            <span class="seysi-rg-field-name">Цвет</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#D97768">
            <span class="seysi-rg-field-name">Верхняя строка</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="сладкая жизнь">
            <span class="seysi-rg-field-name">Нижняя строка</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="с характером">
          </div>
        </article>

        <article class="seysi-rg-badge-card">
          <div class="seysi-rg-badge-wrap">
            <div class="seysi-rg-profile-badge" style="--seysi-rg-badge-color:#A78FB9">
              <b>ночной режим</b>
              <small>не беспокоить</small>
            </div>
          </div>
          <div class="seysi-rg-badge-fields">
            <span class="seysi-rg-field-name">Цвет</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#A78FB9">
            <span class="seysi-rg-field-name">Верхняя строка</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="ночной режим">
            <span class="seysi-rg-field-name">Нижняя строка</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="не беспокоить">
          </div>
        </article>

        <article class="seysi-rg-badge-card">
          <div class="seysi-rg-badge-wrap">
            <div class="seysi-rg-profile-badge" style="--seysi-rg-badge-color:#719F88">
              <b>тихий омут</b>
              <small>черти на месте</small>
            </div>
          </div>
          <div class="seysi-rg-badge-fields">
            <span class="seysi-rg-field-name">Цвет</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="#719F88">
            <span class="seysi-rg-field-name">Верхняя строка</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="тихий омут">
            <span class="seysi-rg-field-name">Нижняя строка</span>
            <input class="seysi-rg-copy" type="text" readonly onfocus="this.select()" value="черти на месте">
          </div>
        </article>
      </div>
    </section>
  </div>
</div>
[/html][hideprofile]