feat(shop): каталог товаров карточками по типам с реальным превью

Таблица заменена на сетку карточек, сгруппированных по типам
(Рамки/Титулы/Фоны/Эффекты) с заголовками и счётчиками. Каждая
карточка показывает настоящий вид товара:
- frame  → кольцо аватара по data.css
- background → .bg-preview.bg-<slug> (тот же CSS, что у клиента)
- title  → текст титула в его цвете (data.text/color)
- effect → анимация pulse / иконка-фоллбэк
Фильтр по типу, поиск и счётчик сохранены; неактивные товары
притушены; удаление компактной иконкой.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/admin.html

@@ -1339,18 +1339,28 @@
         .shop-stat-v { font-family:'Unbounded',sans-serif; font-size:1.2rem; font-weight:800; }
         .shop-stat-v.sm { font-size:0.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
         .shop-stat-l { font-size:0.73rem; color:var(--text-3); font-weight:600; }
-        .shop-cell { display:flex; align-items:center; gap:11px; }
-        .shop-ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
-        .shop-ic svg { width:17px; height:17px; }
-        .shop-cell-txt { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
-        .shop-cell-sub { font-size:0.76rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }
-        .shop-type-badge { display:inline-block; padding:3px 11px; border-radius:var(--r-pill); font-size:0.76rem; font-weight:700; white-space:nowrap; }
-        .shop-price { white-space:nowrap; font-weight:600; }
-        .shop-ic.t-frame, .shop-type-badge.t-frame { background:rgba(155,93,229,.12); color:var(--violet); }
-        .shop-ic.t-title, .shop-type-badge.t-title { background:rgba(255,179,71,.16); color:#d98a17; }
-        .shop-ic.t-background, .shop-type-badge.t-background { background:rgba(6,214,224,.12); color:#0891a3; }
-        .shop-ic.t-effect, .shop-type-badge.t-effect { background:rgba(6,214,160,.13); color:#089f7a; }
-        .shop-ic.t-other, .shop-type-badge.t-other { background:rgba(120,130,150,.14); color:var(--text-3); }
+
+        .sh-group { margin-bottom:26px; }
+        .sh-group-h { display:flex; align-items:center; gap:9px; margin:0 0 13px; font-family:'Unbounded',sans-serif; font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-2); }
+        .sh-group-c { font-family:'Manrope',sans-serif; font-size:0.72rem; font-weight:700; color:var(--text-3); background:var(--border-h); padding:1px 9px; border-radius:var(--r-pill); letter-spacing:0; }
+        .sh-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(185px, 1fr)); gap:14px; }
+        .sh-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:9px; transition:border-color var(--tr), box-shadow var(--tr); }
+        .sh-card:hover { border-color:var(--violet); box-shadow:var(--shadow); }
+        .sh-card.off { opacity:0.5; }
+        .sh-prev { width:100%; aspect-ratio:16/10; border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; background:#f5f7fb; }
+        .sh-av { width:46px; height:46px; border-radius:50%; box-sizing:border-box; background:linear-gradient(135deg, rgba(155,93,229,0.55), rgba(6,214,224,0.42)); }
+        .sh-prev-title { font-family:'Unbounded',sans-serif; font-weight:800; font-size:0.92rem; letter-spacing:0.5px; text-transform:uppercase; padding:0 8px; text-align:center; line-height:1.15; }
+        .sh-fx-ic { color:var(--text-3); }
+        .sh-fx-ic svg { width:20px; height:20px; }
+        @keyframes sh-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(155,93,229,0.5)} 50%{box-shadow:0 0 0 8px rgba(155,93,229,0)} }
+        .sh-av.fx-pulse { animation:sh-pulse 2s infinite; }
+        .sh-card-name { font-weight:700; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+        .sh-card-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
+        .sh-price { white-space:nowrap; font-weight:700; font-size:0.9rem; }
+        .sh-sold { font-size:0.74rem; color:var(--text-3); white-space:nowrap; }
+        .sh-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--border); padding-top:9px; }
+        .sh-acts { display:flex; gap:4px; }
+        .sh-empty { color:var(--text-3); padding:30px; text-align:center; }
       </style>
       <div class="section-title">Магазин</div>
       <div class="shop-stats" id="shop-stats-grid"><div class="spinner"></div></div>
@@ -1367,14 +1377,7 @@
         <span class="t-count" id="shop-count"></span>
         <button class="btn-add" onclick="shopAdminCreateItem()">+ Добавить товар</button>
       </div>
-      <div class="table-wrap">
-        <table>
-          <thead><tr>
-            <th>Товар</th><th>Тип</th><th>Цена</th><th>Продано</th><th>Активен</th><th>Действия</th>
-          </tr></thead>
-          <tbody id="shop-items-body"><tr><td colspan="6"><div class="spinner"></div></td></tr></tbody>
-        </table>
-      </div>
+      <div class="sh-list" id="shop-items-body"><div class="spinner"></div></div>
     </div>
 
     <!-- ── Геймификация ── -->