feat(user-apps): appearance settings (dark mode + reduced motion), product morph, filter sheet

Applies to both user-app and user-app-v2. Logic and structure are shared;
each app keeps its own look.

Appearance settings
- New "تنظیمات ظاهری" page (/settings/appearance), opened from the
  dashboard and available without login. It offers a light/dark/system
  theme and a "fast & light" motion switch.
- appearanceStore saves the choice to localStorage. A small inline boot
  script in index.html applies it before first paint so there is no
  white flash. The "system" option follows OS changes live.
- New ToggleSwitch component.

Dark mode
- Theme LESS tokens now compile to CSS custom properties. Light/dark
  values come from a generated virtual:palette.css (themeConfig/
  appearance.ts, with colors.json + new colors.dark.json).
- New LESS alpha() plugin replaces fade() on theme tokens.
- New semantic tokens: page, onInk, heroSurface, hairlineStrong,
  photoMat, photoStage.
- The dark palette is layered (page < card < panel < border) so
  surfaces separate without shadows.
- Hard-coded colors were replaced by tokens according to their role.
- antd inputs/text get dark overrides; vant uses its own
  .van-theme-dark.
- Light mode looks the same as before.

Reduced motion
- With html.motion-reduced, transitions are capped at 120ms, keyframe
  loops stop, and backdrop blurs and permanent will-change are dropped.
- Spinners and the toast progress bar (which closes the toast) are
  exempt via .keep-motion.
- Carousel autoplay, the v1 Lottie and the product morph honor the
  setting.

Product detail
- Opening a product is now a container-transform morph from the tapped
  card (ProductMorph). It replaces the bottom Drawer and uses composited
  transform/opacity only.
- The detail view is seeded with the card's data, so it no longer
  opens blank and jumps.

Filters and sheets
- Filters are now a full-width bottom sheet. Selections stay a draft
  until applied, so the result list no longer re-renders while
  dragging the slider.
- DropDown collapse animates grid-template-rows instead of a capped
  max-height.
- v2 IslandSheet is restyled to the v2 design language (API unchanged).

Fixes
- filtersStore.reset() shallow-copied shared arrays, so clearing the
  filters never cleared the selected brands.

apps/user-app-v2/src/views/HomeView.vue

@@ -76,27 +76,15 @@
         </section>
       </container>
     </PullRefresh>
-
-    <Drawer
-      v-model:visible="productDrawer"
-      placement="bottom"
-      :closable="false"
-      class="rtl"
-      height="100vh"
-      :bodyStyle="{ padding: 0, position: 'relative' }"
-    >
-      <SingleProduct v-if="activeProductId" :id="activeProductId" @closeDrawer="productDrawer = false" />
-    </Drawer>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { Drawer } from 'ant-design-vue'
 import { Loading, PullRefresh } from 'vant'
 import Icon from '../components/icon/Icon.vue'
-import SingleProduct from '../components/product/SingleProduct.vue'
+import { openProduct as openProductMorph } from '../composables/useProductMorph'
 import RateStrip from '../components/home/RateStrip.vue'
 import HeroCarousel from '../components/home/HeroCarousel.vue'
 import type { HeroSlide } from '../components/home/HeroCarousel.vue'
@@ -128,8 +116,6 @@ const goldPrice = ref<GoldPriceQuote | null>(null)
 // wired up; without it, slides configured in the admin panel never showed here.
 const adminSlides = ref<AdminSlide[] | null>(null)
 
-const productDrawer = ref(false)
-const activeProductId = ref<string | null>(null)
 
 // First-paint entrance. Flipped once, after the first data load, so the
 // sections settle into place instead of appearing all at once; pull-to-refresh
@@ -189,9 +175,10 @@ function productImageForCategory(categoryId: string): string | undefined {
   return match?.images?.[0]?.url
 }
 
+// Opens as a morph out of the tapped card (ProductMorph.vue, mounted in
+// App.vue) — the card is found from the tap, so the emit chain stays as is.
 function openProduct(product: ProductSummary) {
-  activeProductId.value = product.id
-  productDrawer.value = true
+  openProductMorph(product)
 }
 
 function onCategory(cat: HomeCategory) {
@@ -266,7 +253,7 @@ onMounted(async () => {
 
 <style scoped lang="less">
 .home {
-  background: @canvas;
+  background: @page;
   min-height: 100vh;
 }
 
@@ -276,13 +263,13 @@ onMounted(async () => {
   left: 0;
   right: 0;
   z-index: 20;
-  background: rgba(255, 255, 255, 0.82);
+  background: alpha(@canvas, 82%);
   backdrop-filter: blur(18px) saturate(140%);
   // A hairline rule cut a hard line across the page. A very soft fade under
   // the bar separates it from the content that scrolls beneath without
   // drawing an edge.
-  border-bottom: 1px solid fade(@primary, 5%);
-  box-shadow: 0 8px 20px -18px fade(@primary, 55%);
+  border-bottom: 1px solid alpha(@primary, 5%);
+  box-shadow: 0 8px 20px -18px alpha(@primary, 55%);
 }
 
 .home__barInner {