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/user/DashboardView.vue

@@ -116,7 +116,7 @@
             <b>سفارشات</b>
             <small>پیگیری سفارش‌های شما</small>
           </span>
-          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="#8A909C" />
+          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="var(--c-inkFaint)" />
         </button>
 
         <button type="button" class="dash__row" @click="goToDetails(1)">
@@ -127,7 +127,7 @@
             <b>اسناد</b>
             <small>تراکنش‌ها و رسیدهای حساب</small>
           </span>
-          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="#8A909C" />
+          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="var(--c-inkFaint)" />
         </button>
 
         <button type="button" class="dash__row" @click="goToDetails(2)">
@@ -138,7 +138,7 @@
             <b>پروفایل</b>
             <small>اطلاعات و تنظیمات حساب</small>
           </span>
-          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="#8A909C" />
+          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="var(--c-inkFaint)" />
         </button>
 
         <button type="button" class="dash__row" @click="goToDetails(3)">
@@ -149,7 +149,7 @@
             <b>علاقمندی</b>
             <small>محصولات ذخیره‌شده شما</small>
           </span>
-          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="#8A909C" />
+          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="var(--c-inkFaint)" />
         </button>
         <!--
           D24 — the account statement. The reference put it on the dashboard
@@ -165,7 +165,20 @@
             <b>گزارش</b>
             <small>گردش حساب طلایی و ریالی شما</small>
           </span>
-          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="#8A909C" />
+          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="var(--c-inkFaint)" />
+        </button>
+
+        <!-- Appearance (theme + reduced motion). Device-level preferences, not
+             account data, so — unlike every row above — it needs no login. -->
+        <button type="button" class="dash__row" @click="router.push({ name: 'appearanceSettings' })">
+          <span class="dash__rowIcon" aria-hidden="true">
+            <Icon icon="vuesax-linear:brush" size="18" />
+          </span>
+          <span class="dash__rowText">
+            <b>تنظیمات ظاهری</b>
+            <small>پوسته روشن و تیره، انیمیشن‌ها</small>
+          </span>
+          <Icon icon="vuesax-linear:arrow-left-2" size="16" color="var(--c-inkFaint)" />
         </button>
 
         <!--
@@ -184,7 +197,7 @@
               <b>سفارش مشتریان</b>
               <small>سفارش‌های مشتریان معرفی‌شده شما</small>
             </span>
-            <Icon icon="vuesax-linear:arrow-left-2" size="16" color="#8A909C" />
+            <Icon icon="vuesax-linear:arrow-left-2" size="16" color="var(--c-inkFaint)" />
           </button>
 
           <button type="button" class="dash__row" @click="goToDetails(5)">
@@ -195,7 +208,7 @@
               <b>مشتریان من</b>
               <small>فهرست مشتریان معرفی‌شده شما</small>
             </span>
-            <Icon icon="vuesax-linear:arrow-left-2" size="16" color="#8A909C" />
+            <Icon icon="vuesax-linear:arrow-left-2" size="16" color="var(--c-inkFaint)" />
           </button>
         </template>
       </section>
@@ -315,7 +328,7 @@ onMounted(async () => {
 
 <style scoped lang="less">
 .dash {
-  background: @canvas;
+  background: @page;
   min-height: 100vh;
 }
 
@@ -327,10 +340,10 @@ 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%);
-  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%);
 }
 
 .dash__barInner {
@@ -404,7 +417,7 @@ onMounted(async () => {
   margin-bottom: 28px;
   padding: 20px 18px 16px;
   border-radius: 26px;
-  background: linear-gradient(155deg, @ink 0%, @ink 55%, @wineDeep 130%);
+  background: linear-gradient(155deg, @heroSurface 0%, @heroSurface 55%, #5E1427 130%);
   color: #fff;
   box-shadow: 0 22px 40px -26px rgba(20, 22, 26, 0.32);
 }
@@ -447,7 +460,7 @@ onMounted(async () => {
   background: @wineSoft;
 }
 .dash__heroSeal.is-creditor {
-  color: @ink;
+  color: #14161A;
   background: rgba(255, 255, 255, 0.9);
 }
 
@@ -500,7 +513,7 @@ onMounted(async () => {
   margin-top: 16px;
   padding: 26px 20px;
   border-radius: 26px;
-  background: @ink;
+  background: @heroSurface;
   color: #fff;
   display: flex;
   flex-direction: column;
@@ -540,7 +553,7 @@ onMounted(async () => {
   font-family: inherit;
   font-size: 12px;
   font-weight: 700;
-  color: @ink;
+  color: #14161A;
   background: #fff;
   transition: transform 0.18s ease;
 }
@@ -571,7 +584,7 @@ onMounted(async () => {
 }
 .dash__row:active {
   transform: scale(0.985);
-  border-color: fade(@wine, 20%);
+  border-color: alpha(@wine, 20%);
 }
 
 .dash__rowIcon {