fix(pet): аккуратная раскладка гардероба (зоны — строки, не слипаются)

Контейнер #pet-accessories наследовал старый .pet-accessories
(display:flex center) → панель действий и зоны сваливались в один поток.
Снял класс + #pet-accessories{display:block}: тулбар с разделителем сверху,
каждая зона — отдельная строка (подпись справа фикс-ширины + плитки),
тонкие разделители, иконки на кнопках «Случайный образ»/«Снять всё».

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

frontend/pet.html

@@ -341,17 +341,20 @@
                       cursor:help; max-width:230px; }
 
     /* Гардероб по зонам */
-    .wr-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
-    .wr-count { font-size:.74rem; color:var(--text-2); font-weight:700; }
+    #pet-accessories { display:block; }
+    .wr-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
+              padding-bottom:11px; border-bottom:1px solid rgba(255,255,255,.08); }
+    .wr-count { font-size:.76rem; color:var(--text-2); font-weight:700; }
     .wr-count b { color:#c9a6ff; }
     .wr-actions { display:flex; gap:7px; flex-wrap:wrap; }
     .wr-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:99px; border:1.5px solid var(--border-h);
               background:rgba(255,255,255,.03); color:var(--text-2); font:700 .72rem 'Manrope',sans-serif; cursor:pointer; transition:all .15s; }
+    .wr-btn svg { width:12px; height:12px; }
     .wr-btn:hover { border-color:var(--violet); color:var(--text); }
-    .wr-zone { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
-    .wr-zone:last-child { border-bottom:none; }
-    .wr-zone-lbl { width:60px; flex-shrink:0; padding-top:8px; font-size:.62rem; font-weight:800; color:var(--text-3);
-                   text-transform:uppercase; letter-spacing:.05em; }
+    .wr-zone { display:flex; align-items:center; gap:14px; padding:11px 2px; border-bottom:1px solid rgba(255,255,255,.06); }
+    .wr-zone:last-child { border-bottom:none; padding-bottom:2px; }
+    .wr-zone-lbl { width:62px; flex-shrink:0; text-align:right; font-size:.6rem; font-weight:800; color:var(--text-3);
+                   text-transform:uppercase; letter-spacing:.06em; }
     .wr-chips { display:flex; flex-wrap:wrap; gap:7px; flex:1; }
     .wr-tile { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:12px; border:1.5px solid var(--border-h);
                background:rgba(255,255,255,.03); color:var(--text-2); font:600 .76rem 'Manrope',sans-serif; cursor:pointer; transition:all .15s; }
@@ -553,8 +556,8 @@
         <button class="pc-tab"        data-tab="bg"      type="button"><i data-lucide="image"></i> Фон</button>
       </div>
       <div class="pc-panel" id="pc-acc">
-        <div class="pc-hint">Нажми, чтобы надеть или снять. Заблокированные открываются за достижения. По одному предмету на зону (голова / лицо / шея / уши / акцент).</div>
-        <div class="pet-accessories" id="pet-accessories"></div>
+        <div class="pc-hint">Нажми, чтобы надеть или снять. Заблокированные открываются за достижения. По одному предмету на зону.</div>
+        <div id="pet-accessories"></div>
       </div>
       <div class="pc-panel" id="pc-color" style="display:none">
         <div class="pc-hint">Основной цвет питомца.</div>
@@ -1295,6 +1298,8 @@ async function selectColor(colorKey) {
 /* ── Гардероб (выбор аксессуаров, по зонам) ── */
 const LOCK_ICO  = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>';
 const CHECK_ICO = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+const ICO_SHUFFLE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3h5v5"/><path d="M4 20 21 3"/><path d="M21 16v5h-5"/><path d="m15 15 6 6"/><path d="M4 4l5 5"/></svg>';
+const ICO_ERASE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3a1 1 0 0 1 0-1.4L13 5l6 6-9 9"/><path d="M22 21H7"/></svg>';
 const ZONE_LABELS = { head:'Голова', face:'Лицо', neck:'Шея', ears:'Уши', accent:'Акцент' };
 function wearChip(it) {
   if (it.locked)
@@ -1309,8 +1314,8 @@ function renderWardrobe(items) {
   const onCount = items.filter(i => i.equipped).length;
   let html = `<div class="wr-bar"><span class="wr-count">Надето: <b>${onCount}</b></span>
     <span class="wr-actions">
-      <button type="button" class="wr-btn" id="wr-random">Случайный образ</button>
-      <button type="button" class="wr-btn" id="wr-clear">Снять всё</button>
+      <button type="button" class="wr-btn" id="wr-random">${ICO_SHUFFLE}Случайный образ</button>
+      <button type="button" class="wr-btn" id="wr-clear">${ICO_ERASE}Снять всё</button>
     </span></div>`;
   ['head','face','neck','ears','accent'].forEach(z => {
     const zi = items.filter(i => i.slot === z);