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/src/components/home/CategoryRail.vue

@@ -88,6 +88,14 @@ const emit = defineEmits<{ (e: 'select', cat: HomeCategory): void }>()
   opacity: 0.85;
 }
 
+// Dark mode: product photos are shot on white, so they sit on a light mat
+// instead of showing as white boxes on a dark card (@photoMat — transparent,
+// i.e. no change, in light mode).
+html.theme-dark .rail__mark img {
+  background: @photoMat;
+  border-radius: 12px;
+}
+
 .rail__title {
   white-space: nowrap;
 }

apps/user-app/src/components/home/ShowcaseCard.vue

@@ -8,7 +8,7 @@
   order time, not stored on the product — printing one here would be invented.
 -->
 <template>
-  <article class="card" :class="{ 'card--wide': wide }" @click="emit('open', value)">
+  <article class="card" :class="{ 'card--wide': wide }" data-product-origin @click="emit('open', value)">
     <div class="card__art">
       <img v-lazy="image" :alt="title" />
       <button type="button" class="card__fav" :class="{ 'is-on': favorites.isFavorite(id) }" @click.stop="favorites.toggle(id)">
@@ -84,6 +84,14 @@ const wageLabel = computed(() => {
   display: block;
 }
 
+// Dark mode: product photos are shot on white, so they sit on a light mat
+// instead of showing as white boxes on a dark card (@photoMat — transparent,
+// i.e. no change, in light mode).
+html.theme-dark .card__art img {
+  background: @photoMat;
+  border-radius: 12px;
+}
+
 .card__fav {
   position: absolute;
   top: 9px;
@@ -96,7 +104,7 @@ const wageLabel = computed(() => {
   cursor: pointer;
   border-radius: 50%;
   color: @inkMuted;
-  background: rgba(255, 255, 255, 0.9);
+  background: alpha(@canvas, 90%);
   backdrop-filter: blur(6px);
   transition: color 0.18s ease, transform 0.18s ease;
 }

apps/user-app/src/components/home/ShowcaseSlider.vue

@@ -51,6 +51,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useAppearanceStore } from '../../stores/appearanceStore'
 
 export interface ShowcaseSlide {
   key: string
@@ -70,6 +71,7 @@ const emit = defineEmits<{ (e: 'select', slide: ShowcaseSlide): void }>()
 
 const index = ref(0)
 let timer: ReturnType<typeof setInterval> | undefined
+const appearance = useAppearanceStore()
 
 function go(i: number) {
   index.value = i
@@ -77,7 +79,9 @@ function go(i: number) {
 }
 function restart() {
   if (timer) clearInterval(timer)
-  if (props.slides.length > 1) {
+  // No autoplay in reduced-motion mode: a slide changing on its own every
+  // six seconds is exactly the background motion that mode turns off.
+  if (props.slides.length > 1 && !appearance.isReducedMotion) {
     timer = setInterval(() => {
       index.value = (index.value + 1) % props.slides.length
     }, 6000)