miniapp: compact pin layout for wizard steps without pictograms

- Steps with pict (1-3 fridge: install/chamber/size) keep grid cards
- Steps without pict (4 features) render as flex-wrap pill pins
- Auto-detect via options.some(o => o.pict)

miniapp/assets/podbor.css

@@ -883,14 +883,21 @@
   color: var(--muted);
 }
 
-/* Сетка карточек */
-.wiz-grid {
+/* Сетка карточек (cards-режим — с пиктограммами) */
+.wiz-grid { gap: 10px; }
+.wiz-grid--cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 10px;
 }
 @media (min-width: 540px) {
-  .wiz-grid { grid-template-columns: repeat(3, 1fr); }
+  .wiz-grid--cards { grid-template-columns: repeat(3, 1fr); }
+}
+
+/* Пин-режим (без пиктограмм, компактные таблетки) */
+.wiz-grid--pins {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 .wiz-card {
@@ -970,6 +977,41 @@
 }
 .wiz-tick svg { width: 11px; height: 11px; stroke-width: 2.5; }
 
+/* Пин-карточка (компактная таблетка, без пиктограммы) */
+.wiz-card--pin {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  padding: 9px 14px 9px 14px;
+  border-radius: var(--r-pill);
+  width: auto;
+  text-align: left;
+}
+.wiz-card--pin .wiz-pict,
+.wiz-card--pin .wiz-pict-placeholder { display: none; }
+.wiz-card--pin .wiz-label {
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+}
+.wiz-card--pin .wiz-hint {
+  font-size: 9.5px;
+  letter-spacing: 0.04em;
+  text-transform: none;
+  font-family: var(--font-sans);
+  font-weight: 400;
+  color: var(--muted);
+}
+.wiz-card--pin .wiz-tick {
+  position: static;
+  width: 14px;
+  height: 14px;
+}
+.wiz-card--pin .wiz-tick svg { width: 9px; height: 9px; }
+.wiz-card--pin.star { padding-left: 26px; }
+.wiz-card--pin.star::before { top: 50%; transform: translateY(-50%); }
+
 /* Review-экран */
 .rev-list {
   background: #fff;

miniapp/assets/podbor.js

@@ -352,17 +352,33 @@ const Podbor = (function () {
         return o ? `<span class="wiz-chip" data-jump="${s.key}">${o.label}</span>` : "";
       }).join("");
 
+    // Определяем layout: если ни у одной опции нет pict — компактные пин-кнопки,
+    // иначе — крупные карточки с пиктограммами.
+    const hasPicts = options.some(o => o.pict && PODBOR_PICTS[o.pict]);
+    const gridMode = hasPicts ? "cards" : "pins";
+
     const cardsHtml = options.map(o => {
       const isOn = isMulti ? currentArr.includes(o.key) : currentVal === o.key;
       const pict = o.pict && PODBOR_PICTS[o.pict];
+      const cardCls = "wiz-card" + (hasPicts ? "" : " wiz-card--pin") + (isOn ? " on" : "") + (o.star ? " star" : "");
+      if (hasPicts) {
         return `
-        <button class="wiz-card${isOn ? " on" : ""}${o.star ? " star" : ""}" data-val="${o.key}">
+          <button class="${cardCls}" data-val="${o.key}">
             ${pict ? `<div class="wiz-pict">${pict}</div>` : `<div class="wiz-pict wiz-pict-placeholder"></div>`}
             <div class="wiz-label">${o.label}</div>
             ${o.hint ? `<div class="wiz-hint">${o.hint}</div>` : ""}
             ${isOn ? `<div class="wiz-tick">${ICONS.check}</div>` : ""}
           </button>
         `;
+      }
+      // Пин-режим: компактная inline-кнопка с label, опц. hint мелкий справа
+      return `
+        <button class="${cardCls}" data-val="${o.key}">
+          <span class="wiz-label">${o.label}</span>
+          ${o.hint ? `<span class="wiz-hint">${o.hint}</span>` : ""}
+          ${isOn ? `<span class="wiz-tick">${ICONS.check}</span>` : ""}
+        </button>
+      `;
     }).join("");
 
     const stepNum = stepIdx + 1;
@@ -383,7 +399,7 @@ const Podbor = (function () {
 
         <h3 class="wiz-title">${step.title}${isMulti ? ' <span class="wiz-multi">· можно несколько</span>' : ""}</h3>
 
-        <div class="wiz-grid">${cardsHtml}</div>
+        <div class="wiz-grid wiz-grid--${gridMode}">${cardsHtml}</div>
 
         <div class="podbor-cta-row">
           ${stepIdx > 0

miniapp/index.html

@@ -12,8 +12,8 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&family=Newsreader:ital,wght@0,400..600;1,400..600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap">
   <script src="https://telegram.org/js/telegram-web-app.js"></script>
-  <link rel="stylesheet" href="assets/styles.css?v=20260510b">
-  <link rel="stylesheet" href="assets/podbor.css?v=20260510b">
+  <link rel="stylesheet" href="assets/styles.css?v=20260511a">
+  <link rel="stylesheet" href="assets/podbor.css?v=20260511a">
 </head>
 <body>
   <main id="app">
@@ -21,10 +21,10 @@
       <div class="spinner"></div>
     </div>
   </main>
-  <script src="assets/icons.js?v=20260510b"></script>
-  <script src="assets/podbor.config.js?v=20260510b"></script>
-  <script src="assets/podbor.picts.js?v=20260510b"></script>
-  <script src="assets/podbor.js?v=20260510b"></script>
-  <script src="assets/app.js?v=20260510b"></script>
+  <script src="assets/icons.js?v=20260511a"></script>
+  <script src="assets/podbor.config.js?v=20260511a"></script>
+  <script src="assets/podbor.picts.js?v=20260511a"></script>
+  <script src="assets/podbor.js?v=20260511a"></script>
+  <script src="assets/app.js?v=20260511a"></script>
 </body>
 </html>