feat(shop): animated backgrounds — system-wide cosmetic + picker

A new cosmetic family: a fixed-position overlay painted behind every
page of the app, switchable from the profile shop. 4 free presets + 6
paid (250-1200 coins) so the new economy has another sink. Every
animation respects prefers-reduced-motion and falls back to its static
gradient.

Catalogue (migration 035):
  free:   none, gradient-soft, dots, dark
  paid:   gradient-flow, grid, bubbles, stars (mid)
          aurora, nebula                       (premium)

Backend:
  • migration 035 adds users.active_background + rebuilds shop_items
    CHECK to include 'background' (standard SQLite 'new + copy + swap')
    and seeds 10 items
  • shopController.getMyActive returns { background: { slug } } and
    activateItem handles type='background' (stores bare slug in
    active_background) + skips the user_purchases check for price=0
    so free presets work for everyone without per-user rows
  • routes/shop validate schema lets 'background' through

Frontend:
  • api.js applyCosmetics injects <div id='ls-bg-fx'> at body start
    and toggles class to bg-<slug>. Cleared backgrounds remove the
    element so dark→light transitions don't leave artifacts.
  • ls.css gains a self-contained 'ANIMATED BACKGROUNDS' block:
    keyframes per animated slug (ls-bg-flow, ls-bg-grid-scan,
    ls-bg-bubble-rise, ls-bg-stars-twinkle, ls-bg-aurora-spin,
    ls-bg-nebula-pan) wrapped in a prefers-reduced-motion kill-switch.
    Same .bg-<slug> classes are reused for the .bg-preview swatches.
  • profile.html shop:
    - new 'Фоны' filter button between Рамки and Титулы
    - _renderItemPreview type='background' draws a real 56-aspect swatch
      (same CSS as the page bg — what you see is what you apply)
    - _isItemActive matches by slug for background type
    - free items (price===0) treated as auto-owned in render so users
      can apply them without a fake 'purchase' step

Verified: getMyActive returns { background: { slug: 'nebula' } } after
flipping users.active_background; activate path updates the row.

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

frontend/profile.html

@@ -537,6 +537,17 @@
       padding: 8px 14px; margin-bottom: 6px;
       border: 1.5px dashed currentColor; border-radius: 99px;
     }
+    /* Background preview swatch in shop items — uses the same .bg-<slug>
+       classes as the full-page background so what you see is what you
+       get. Compact size to match other previews. */
+    .shop-bg-preview {
+      width: 100%;
+      aspect-ratio: 16 / 10;
+      max-height: 90px;
+      border-radius: 10px;
+      margin-bottom: 8px;
+      border: 1.5px solid var(--border);
+    }
     .shop-item-name {
       font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
       color: var(--text); line-height: 1.3;
@@ -1008,6 +1019,7 @@
           <div class="shop-filters">
             <button class="shop-filter active" data-type="all" onclick="shopFilter('all',this)">Все</button>
             <button class="shop-filter" data-type="frame" onclick="shopFilter('frame',this)">Рамки</button>
+            <button class="shop-filter" data-type="background" onclick="shopFilter('background',this)">Фоны</button>
             <button class="shop-filter" data-type="title" onclick="shopFilter('title',this)">Титулы</button>
             <button class="shop-filter" data-type="effect" onclick="shopFilter('effect',this)">Эффекты</button>
           </div>
@@ -1530,6 +1542,12 @@
   }
 
   function _isItemActive(item) {
+    if (item.type === 'background' && _activeCosmetics.background) {
+      try {
+        const data = JSON.parse(item.data || '{}');
+        return data.slug === _activeCosmetics.background.slug;
+      } catch { return false; }
+    }
     if (item.type === 'title'  && _activeCosmetics.title)  return true;
     if (item.type === 'effect' && _activeCosmetics.effect) return true;
     if (item.type === 'frame'  && _activeCosmetics.frame)  return true;
@@ -1549,7 +1567,9 @@
       return;
     }
     grid.innerHTML = items.map(item => {
-      const owned = !!item.owned;
+      // Free items (price === 0) are auto-owned for everyone: backgrounds
+      // and any future freebies don't need a user_purchases row.
+      const owned = !!item.owned || item.price === 0;
       const canBuy = _shopCoins >= item.price && !owned;
       const active = owned && _isItemActive(item);
       let btn = '';
@@ -1591,6 +1611,13 @@
       const text  = titleData.text  || item.name;
       return `<div class="shop-title-preview" style="color:${esc(color)}">${esc(text)}</div>`;
     }
+    if (item.type === 'background') {
+      let bg = {};
+      try { bg = JSON.parse(item.data || '{}'); } catch {}
+      const slug = (bg.slug || 'none').replace(/[^a-z0-9_-]/gi, '');
+      // 56px swatch with the same CSS rules as the full-screen bg.
+      return `<div class="shop-bg-preview bg-preview bg-${slug}"></div>`;
+    }
     // effects / other — fall back to the lucide icon
     return `<div class="shop-item-icon">${LS.icon(item.icon || 'star', 28)}</div>`;
   }