Componentize dashboard middle section and add Mento brand assets.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/layouts/AppLayout.vue

@@ -5,6 +5,7 @@ import { useAuthStore } from '@/stores/auth';
 import { api } from '@/lib/api';
 import { formatJalaliShort, toFaDigits } from '@/lib/jalali';
 import UiIcon from '@/components/UiIcon.vue';
+import MentoLogo from '@/components/brand/MentoLogo.vue';
 import type {
   ActivitySummaryDto,
   NotificationDto,
@@ -209,13 +210,7 @@ onUnmounted(() => {
 
     <aside id="app-sidebar" class="sidebar" :class="{ open: menuOpen }">
       <div class="brand-row">
-        <div class="brand">
-          <span class="mark">M</span>
-          <div>
-            <strong>Mento</strong>
-            <small>by Mentech</small>
-          </div>
-        </div>
+        <MentoLogo :size="40" />
         <button
           class="icon-btn ghost mobile-only"
           type="button"
@@ -380,7 +375,7 @@ onUnmounted(() => {
           <span class="burger" :class="{ open: menuOpen }" />
         </button>
         <div class="top-brand">
-          <span class="mark sm">M</span>
+          <MentoLogo :size="32" :show-text="false" variant="mark" />
           <strong>Mento</strong>
         </div>
         <button class="round-btn" type="button" aria-label="اعلان‌ها" @click="toggleNotif">
@@ -582,9 +577,13 @@ onUnmounted(() => {
 }
 
 .nav-item.router-link-active {
-  background: #14b8a6;
-  color: #fff;
-  box-shadow: 0 10px 22px rgba(20, 184, 166, 0.28);
+  background: #d1faf2;
+  color: #0f766e;
+  box-shadow: none;
+}
+
+.nav-item.router-link-active :deep(.ico) {
+  color: #0f766e;
 }
 
 .nav-badge {
@@ -601,7 +600,8 @@ onUnmounted(() => {
 }
 
 .nav-item.router-link-active .nav-badge {
-  background: rgba(255, 255, 255, 0.25);
+  background: #14b8a6;
+  color: #fff;
 }
 
 .nav-group {