diff --git a/apps/web/src/components/ContactsFilterPanel.vue b/apps/web/src/components/ContactsFilterPanel.vue
index 8ec2e77..066fe14 100644
--- a/apps/web/src/components/ContactsFilterPanel.vue
+++ b/apps/web/src/components/ContactsFilterPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 import type { CustomerGroupDto, PersonImportSourceStatDto, PersonMood } from '@mento/shared';
 import { PERSON_MOOD_LABELS, PERSON_MOODS } from '@/lib/person-mood';
 import { groupSwatch } from '@/lib/customer-groups';
@@ -21,15 +21,27 @@ const props = defineProps<{
   groups: CustomerGroupDto[];
   sourceStats: PersonImportSourceStatDto[];
   canBehavior: boolean;
+  /** اکشن‌شیت پایین صفحه (موبایل) به‌جای پاپ‌اور */
+  sheet?: boolean;
+  /** اگر داده شود بخش مرتب‌سازی داخل همین پنل نمایش داده می‌شود */
+  sort?: string;
+  sortOptions?: Array<{ value: string; label: string }>;
 }>();
 
-const emit = defineEmits<{ apply: [value: ContactsFilterValue]; close: [] }>();
+const emit = defineEmits<{
+  apply: [value: ContactsFilterValue, sort?: string];
+  close: [];
+}>();
 
 const draft = reactive<ContactsFilterValue>({ groups: [], sources: [], moods: [], disc: '' });
+const draftSort = ref('');
 const groupQuery = ref('');
 const GROUP_SEARCH_MIN = 8;
 const DISC_TYPES = ['D', 'I', 'S', 'C'];
 
+const hasSort = computed(() => Boolean(props.sortOptions?.length));
+const defaultSort = computed(() => props.sortOptions?.[0]?.value ?? '');
+
 watch(
   () => props.open,
   (open) => {
@@ -38,11 +50,18 @@ watch(
     draft.sources = [...props.value.sources];
     draft.moods = [...props.value.moods];
     draft.disc = props.value.disc;
+    draftSort.value = props.sort ?? defaultSort.value;
     groupQuery.value = '';
   },
   { immediate: true },
 );
 
+function onKey(ev: KeyboardEvent) {
+  if (ev.key === 'Escape' && props.open && props.sheet) emit('close');
+}
+onMounted(() => document.addEventListener('keydown', onKey));
+onBeforeUnmount(() => document.removeEventListener('keydown', onKey));
+
 const isPeople = computed(() => props.tab === 'people');
 
 function groupCount(g: CustomerGroupDto) {
@@ -58,7 +77,8 @@ const filteredGroups = computed(() => {
 const draftCount = computed(
   () =>
     draft.groups.length +
-    (isPeople.value ? draft.sources.length + draft.moods.length + (draft.disc ? 1 : 0) : 0),
+    (isPeople.value ? draft.sources.length + draft.moods.length + (draft.disc ? 1 : 0) : 0) +
+    (hasSort.value && draftSort.value !== defaultSort.value ? 1 : 0),
 );
 
 function toggle<T extends string>(list: T[], value: T) {
@@ -72,26 +92,58 @@ function clearAll() {
   draft.sources = [];
   draft.moods = [];
   draft.disc = '';
+  if (hasSort.value) draftSort.value = defaultSort.value;
 }
 
 function apply() {
-  emit('apply', {
-    groups: [...draft.groups],
-    sources: [...draft.sources],
-    moods: [...draft.moods],
-    disc: draft.disc,
-  });
+  emit(
+    'apply',
+    {
+      groups: [...draft.groups],
+      sources: [...draft.sources],
+      moods: [...draft.moods],
+      disc: draft.disc,
+    },
+    hasSort.value ? draftSort.value : undefined,
+  );
 }
 </script>
 
 <template>
-  <div v-if="open" class="panel" role="dialog" aria-label="فیلترها" @click.stop>
+  <Teleport to="body" :disabled="!sheet">
+    <div v-if="open && sheet" class="sheet-dim" @click="emit('close')" />
+    <div
+      v-if="open"
+      class="panel"
+      :class="{ sheet }"
+      role="dialog"
+      :aria-modal="sheet ? 'true' : undefined"
+      aria-label="فیلترها"
+      @click.stop
+    >
+    <span v-if="sheet" class="grip" aria-hidden="true" />
     <header class="panel-head">
-      <strong>فیلترها</strong>
+      <strong>{{ hasSort ? 'فیلتر و مرتب‌سازی' : 'فیلترها' }}</strong>
       <button type="button" class="link" :disabled="!draftCount" @click="clearAll">پاک کردن همه</button>
     </header>
 
     <div class="panel-body">
+      <section v-if="hasSort" class="sec">
+        <h4>مرتب‌سازی</h4>
+        <div class="pills">
+          <button
+            v-for="o in sortOptions"
+            :key="o.value"
+            type="button"
+            class="pill"
+            :class="{ on: draftSort === o.value }"
+            @click="draftSort = o.value"
+          >
+            {{ o.label }}
+          </button>
+        </div>
+      </section>
+
       <section class="sec">
         <h4>
           گروه
@@ -176,10 +228,11 @@ function apply() {
     <footer class="panel-foot">
       <UiButton variant="ghost" size="sm" @click="emit('close')">انصراف</UiButton>
       <UiButton variant="primary" size="sm" @click="apply">
-        اعمال فیلتر<template v-if="draftCount"> ({{ toFaDigits(draftCount) }})</template>
+        اعمال<template v-if="draftCount"> ({{ toFaDigits(draftCount) }})</template>
       </UiButton>
     </footer>
-  </div>
+    </div>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -361,4 +414,75 @@ function apply() {
   color: #0f766e;
   font-weight: 600;
 }
+
+/* ===== اکشن‌شیت موبایل ===== */
+.sheet-dim {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(15, 23, 42, 0.4);
+  animation: dim-in 0.18s ease-out;
+}
+
+.panel.sheet {
+  position: fixed;
+  inset: auto 0 0 0;
+  top: auto;
+  z-index: 1001;
+  width: 100%;
+  max-height: 85vh;
+  border: 0;
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.18);
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  animation: sheet-up 0.22s ease-out;
+}
+
+.grip {
+  display: block;
+  width: 2.5rem;
+  height: 4px;
+  margin: 0.5rem auto 0;
+  border-radius: 999px;
+  background: #cbd5e1;
+}
+
+.panel.sheet .panel-head {
+  padding-top: 0.5rem;
+}
+
+.panel.sheet .checks {
+  max-height: none;
+}
+
+.panel.sheet .check {
+  padding-block: 0.5rem;
+}
+
+.panel.sheet .pill {
+  padding: 0.4rem 0.85rem;
+}
+
+.panel.sheet .panel-foot > * {
+  flex: 1 1 0;
+  justify-content: center;
+}
+
+@keyframes sheet-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes dim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 </style>
diff --git a/apps/web/src/views/ContactsView.vue b/apps/web/src/views/ContactsView.vue
index ca4b3d4..34ca751 100644
--- a/apps/web/src/views/ContactsView.vue
+++ b/apps/web/src/views/ContactsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
@@ -13,11 +13,11 @@ import {
   UiButton,
   UiDropdownMenu,
   UiModal,
-  UiPageHeader,
   UiPagination,
   UiEmptyState,
 } from '@/components/ui';
 import UiIcon from '@/components/UiIcon.vue';
+import { Drawer as ADrawer } from 'ant-design-vue';
 import PersonFormView from '@/views/PersonFormView.vue';
 import CompanyFormView from '@/views/CompanyFormView.vue';
 import SavedFiltersBar from '@/components/SavedFiltersBar.vue';
@@ -121,8 +121,28 @@ const sourceStats = ref<PersonImportSourceStatDto[]>([]);
 const menuId = ref<string | null>(null);
 const sortOpen = ref(false);
 const filterOpen = ref(false);
+const moreOpen = ref(false);
+const savedSheetOpen = ref(false);
 const contactModal = ref<'person' | 'company' | null>(null);
 
+/** هم‌راستا با بریک‌پوینت CSS صفحه (۹۰۰px) */
+const mobileMq =
+  typeof window !== 'undefined' ? window.matchMedia('(max-width: 900px)') : null;
+const isMobile = ref(mobileMq?.matches ?? false);
+function onMobileChange(e: MediaQueryListEvent) {
+  isMobile.value = e.matches;
+  filterOpen.value = false;
+  sortOpen.value = false;
+  savedSheetOpen.value = false;
+}
+onMounted(() => mobileMq?.addEventListener('change', onMobileChange));
+onBeforeUnmount(() => mobileMq?.removeEventListener('change', onMobileChange));
+
+const SORT_OPTIONS = [
+  { value: 'name', label: 'نام' },
+  { value: 'newest', label: 'جدیدترین' },
+];
+
 const total = computed(() =>
   tab.value === 'people' ? people.value?.total ?? 0 : companies.value?.total ?? 0,
 );
@@ -273,6 +293,7 @@ function closePopups() {
   menuId.value = null;
   sortOpen.value = false;
   filterOpen.value = false;
+  moreOpen.value = false;
 }
 
 async function load() {
@@ -349,7 +370,7 @@ function setSort(next: SortKey) {
   patchQuery({ sort: next === 'name' ? undefined : next, page: undefined });
 }
 
-function applyFilters(next: ContactsFilterValue) {
+function applyFilters(next: ContactsFilterValue, nextSort?: string) {
   filterOpen.value = false;
   const people = tab.value === 'people';
   patchQuery({
@@ -357,10 +378,29 @@ function applyFilters(next: ContactsFilterValue) {
     ...(people
       ? { source: csv(next.sources), mood: csv(next.moods), disc: next.disc || undefined }
       : {}),
+    // در موبایل مرتب‌سازی داخل همان شیت فیلتر است؛ یک patch تا query قبلی overwrite نشود
+    ...(nextSort !== undefined
+      ? { sort: nextSort === 'newest' ? 'newest' : undefined }
+      : {}),
     page: undefined,
   });
 }
 
+/** شمارنده روی دکمه فیلتر موبایل (فیلترها + مرتب‌سازی غیرپیش‌فرض) */
+const mobileFilterCount = computed(
+  () => activeTags.value.length + (sort.value !== 'name' ? 1 : 0),
+);
+
+function openSavedSheet() {
+  moreOpen.value = false;
+  savedSheetOpen.value = true;
+}
+
+function applySavedFromSheet(filters: Record<string, unknown>) {
+  savedSheetOpen.value = false;
+  applyPeopleSavedFilters(filters);
+}
+
 function removeTag(tag: FilterTag) {
   const without = (list: string[]) => csv(list.filter((v) => v !== tag.value));
   if (tag.kind === 'group') patchQuery({ group: without(groupFilters.value), page: undefined });
@@ -501,84 +541,182 @@ onMounted(load);
 <template>
   <section class="page" @click="closePopups">
     <UiBusyOverlay :open="pageBusy" :message="busyMessage" />
-    <UiPageHeader
-      title="مخاطبین"
-      lead="مدیریت و مشاهده اشخاص و شرکت‌ها"
-    >
-      <template #actions>
-        <RouterLink v-if="canBehavior" :to="{ name: 'disc-report' }">
-          <UiButton variant="outline" size="sm">گزارش DISC</UiButton>
-        </RouterLink>
-        <UiButton variant="ghost" size="sm" :disabled="busy" :loading="pageBusy && busyMessage.includes('خروجی')" @click.stop="exportExcel">
-          <span class="btn-full">خروجی اکسل</span>
-          <span class="btn-short">خروجی</span>
-        </UiButton>
-        <ExcelImportFlow
-          :preview-path="importPreviewPath"
-          :import-path="importPath"
-          :disabled="busy"
-          @start="onImportStart"
-          @done="onImportDone"
-          @fail="onImportFail"
-          @settled="onImportSettled"
-        >
-          <template #default="{ loading }">
-            <UiButton variant="ghost" size="sm" :disabled="busy" :loading="loading">
-              <span class="btn-full">ورود از اکسل</span>
-              <span class="btn-short">ورود</span>
-            </UiButton>
-          </template>
-        </ExcelImportFlow>
-        <PhoneContactsImport
-          v-if="tab === 'people'"
-          :disabled="busy"
-          @start="onPhoneImportStart"
-          @done="onPhoneImportDone"
-          @fail="onPhoneImportFail"
-          @settled="onPhoneImportSettled"
-        >
-          <UiButton variant="ghost" size="sm" :disabled="busy">
-            <UiIcon name="phone" :size="15" />
-            <span class="btn-full">از مخاطبین گوشی</span>
-            <span class="btn-short">گوشی</span>
+
+    <header class="page-head">
+      <div class="head-start">
+        <h1>مخاطبین</h1>
+        <nav class="tabs" aria-label="نوع مخاطب">
+          <button type="button" :class="{ on: tab === 'people' }" @click.stop="setTab('people')">
+            <UiIcon name="user" :size="15" />
+            اشخاص
+            <em v-if="people">{{ toFaDigits(people.total) }}</em>
+          </button>
+          <button type="button" :class="{ on: tab === 'companies' }" @click.stop="setTab('companies')">
+            <UiIcon name="building" :size="15" />
+            شرکت‌ها
+            <em v-if="companies">{{ toFaDigits(companies.total) }}</em>
+          </button>
+        </nav>
+      </div>
+      <div class="actions">
+        <div class="actions-desktop">
+          <RouterLink v-if="canBehavior" :to="{ name: 'disc-report' }">
+            <UiButton variant="outline" size="sm">گزارش DISC</UiButton>
+          </RouterLink>
+          <UiButton variant="ghost" size="sm" :disabled="busy" :loading="pageBusy && busyMessage.includes('خروجی')" @click.stop="exportExcel">
+            <span class="btn-full">خروجی اکسل</span>
+            <span class="btn-short">خروجی</span>
           </UiButton>
-        </PhoneContactsImport>
+          <ExcelImportFlow
+            :preview-path="importPreviewPath"
+            :import-path="importPath"
+            :disabled="busy"
+            @start="onImportStart"
+            @done="onImportDone"
+            @fail="onImportFail"
+            @settled="onImportSettled"
+          >
+            <template #default="{ loading }">
+              <UiButton variant="ghost" size="sm" :disabled="busy" :loading="loading">
+                <span class="btn-full">ورود از اکسل</span>
+                <span class="btn-short">ورود</span>
+              </UiButton>
+            </template>
+          </ExcelImportFlow>
+          <PhoneContactsImport
+            v-if="tab === 'people'"
+            :disabled="busy"
+            @start="onPhoneImportStart"
+            @done="onPhoneImportDone"
+            @fail="onPhoneImportFail"
+            @settled="onPhoneImportSettled"
+          >
+            <UiButton variant="ghost" size="sm" :disabled="busy">
+              <UiIcon name="phone" :size="15" />
+              <span class="btn-full">از مخاطبین گوشی</span>
+              <span class="btn-short">گوشی</span>
+            </UiButton>
+          </PhoneContactsImport>
+        </div>
+
+        <div class="actions-more">
+          <UiDropdownMenu
+            :open="moreOpen"
+            align="end"
+            @update:open="(v) => (moreOpen = v)"
+          >
+            <template #trigger="{ toggle }">
+              <UiButton variant="ghost" size="sm" @click.stop="toggle">
+                بیشتر
+                <UiIcon name="dots-v" :size="14" />
+              </UiButton>
+            </template>
+            <RouterLink
+              v-if="canBehavior"
+              :to="{ name: 'disc-report' }"
+              @click="moreOpen = false"
+            >
+              گزارش DISC
+            </RouterLink>
+            <button type="button" :disabled="busy" @click.stop="moreOpen = false; void exportExcel()">
+              خروجی اکسل
+            </button>
+            <ExcelImportFlow
+              :preview-path="importPreviewPath"
+              :import-path="importPath"
+              :disabled="busy"
+              @start="moreOpen = false; onImportStart()"
+              @done="onImportDone"
+              @fail="onImportFail"
+              @settled="onImportSettled"
+            >
+              <template #default="{ loading }">
+                <button type="button" :disabled="busy || loading">
+                  {{ loading ? 'در حال ورود…' : 'ورود از اکسل' }}
+                </button>
+              </template>
+            </ExcelImportFlow>
+            <PhoneContactsImport
+              v-if="tab === 'people'"
+              :disabled="busy"
+              @start="moreOpen = false; onPhoneImportStart()"
+              @done="onPhoneImportDone"
+              @fail="onPhoneImportFail"
+              @settled="onPhoneImportSettled"
+            >
+              <button type="button" :disabled="busy">از مخاطبین گوشی</button>
+            </PhoneContactsImport>
+            <button v-if="tab === 'people'" type="button" @click.stop="openSavedSheet">
+              فیلترهای ذخیره‌شده
+            </button>
+          </UiDropdownMenu>
+        </div>
+
         <UiButton
           variant="primary"
+          size="sm"
           @click="contactModal = tab === 'companies' ? 'company' : 'person'"
         >
           <UiIcon name="plus" :size="16" />
           {{ tab === 'companies' ? 'شرکت جدید' : 'شخص جدید' }}
         </UiButton>
-      </template>
-    </UiPageHeader>
+      </div>
+    </header>
 
-    <nav class="tabs">
-      <button type="button" :class="{ on: tab === 'people' }" @click.stop="setTab('people')">
-        <UiIcon name="user" :size="16" />
-        اشخاص
-        <em v-if="people">{{ toFaDigits(people.total) }}</em>
-      </button>
-      <button type="button" :class="{ on: tab === 'companies' }" @click.stop="setTab('companies')">
-        <UiIcon name="building" :size="16" />
-        شرکت‌ها
-        <em v-if="companies">{{ toFaDigits(companies.total) }}</em>
-      </button>
-    </nav>
+    <!-- نوار ابزار تک‌ردیفه: جستجو + ابزار + فیلتر ذخیره‌شده -->
+    <div class="chrome">
+      <div class="search-row">
+        <form class="search" @submit.prevent="onSearch">
+          <UiIcon name="search" :size="15" />
+          <input
+            v-model="q"
+            type="search"
+            :placeholder="tab === 'people' ? 'جستجو در اشخاص…' : 'جستجو در شرکت‌ها…'"
+          />
+          <!-- موبایل: فیلتر + مرتب‌سازی یک دکمه داخل جستجو -->
+          <button
+            v-if="isMobile"
+            class="search-filter"
+            :class="{ active: mobileFilterCount }"
+            type="button"
+            aria-label="فیلتر و مرتب‌سازی"
+            @click.stop="filterOpen = !filterOpen; sortOpen = false"
+          >
+            <UiIcon name="filter" :size="16" />
+            <b v-if="mobileFilterCount" class="tool-count">{{ toFaDigits(mobileFilterCount) }}</b>
+          </button>
+        </form>
+        <button
+          v-if="isMobile && canManageGroups"
+          class="tool groups-tool"
+          type="button"
+          title="مدیریت گروه‌های مشتری"
+          @click.stop="groupsManagerOpen = true"
+        >
+          <UiIcon name="settings" :size="15" />
+          <span class="tool-label">گروه‌ها</span>
+        </button>
+      </div>
 
-    <div class="toolbar">
-      <form class="search" @submit.prevent="onSearch">
-        <UiIcon name="search" :size="16" />
-        <input
-          v-model="q"
-          type="search"
-          :placeholder="tab === 'people' ? 'جستجو در اشخاص…' : 'جستجو در شرکت‌ها…'"
-        />
-      </form>
-      <div class="toolbar-tools">
+      <ContactsFilterPanel
+        v-if="isMobile"
+        sheet
+        :open="filterOpen"
+        :tab="tab"
+        :value="filterValue"
+        :groups="customerGroups"
+        :source-stats="sourceStats"
+        :can-behavior="canBehavior"
+        :sort="sort"
+        :sort-options="SORT_OPTIONS"
+        @apply="applyFilters"
+        @close="filterOpen = false"
+      />
+
+      <div v-if="!isMobile" class="toolbar-tools">
         <div class="pop">
           <button class="tool" type="button" @click.stop="sortOpen = !sortOpen; filterOpen = false">
-            <UiIcon name="trend" :size="16" />
+            <UiIcon name="trend" :size="15" />
             <span class="tool-label">مرتب‌سازی</span>
           </button>
           <ul v-if="sortOpen" class="menu">
@@ -593,7 +731,7 @@ onMounted(load);
             type="button"
             @click.stop="filterOpen = !filterOpen; sortOpen = false"
           >
-            <UiIcon name="filter" :size="16" />
+            <UiIcon name="filter" :size="15" />
             <span class="tool-label">فیلتر</span>
             <b v-if="activeTags.length" class="tool-count">{{ toFaDigits(activeTags.length) }}</b>
           </button>
@@ -615,22 +753,38 @@ onMounted(load);
           title="مدیریت گروه‌های مشتری"
           @click.stop="groupsManagerOpen = true"
         >
-          <UiIcon name="settings" :size="16" />
+          <UiIcon name="settings" :size="15" />
           <span class="tool-label">گروه‌ها</span>
         </button>
         <TableColumnsMenu :table-key="tab === 'people' ? 'contacts.people' : 'contacts.companies'" />
       </div>
+
+      <div v-if="!isMobile && tab === 'people'" class="saved-slot">
+        <SavedFiltersBar
+          compact
+          scope="people"
+          :current-filters="peopleSavedFilters"
+          @apply="applyPeopleSavedFilters"
+        />
+      </div>
     </div>
 
-    <SavedFiltersBar
-      v-if="tab === 'people'"
-      scope="people"
-      :current-filters="peopleSavedFilters"
-      @apply="applyPeopleSavedFilters"
-    />
+    <!-- موبایل: فیلترهای ذخیره‌شده از منوی «بیشتر» در شیت پایین -->
+    <a-drawer
+      v-if="isMobile && tab === 'people'"
+      v-model:open="savedSheetOpen"
+      placement="bottom"
+      title="فیلترهای ذخیره‌شده"
+      height="auto"
+    >
+      <SavedFiltersBar
+        scope="people"
+        :current-filters="peopleSavedFilters"
+        @apply="applySavedFromSheet"
+      />
+    </a-drawer>
 
     <div v-if="activeTags.length" class="filter-tags">
-      <span class="filter-tags-label">فیلترها:</span>
       <span
         v-for="tag in activeTags"
         :key="`${tag.kind}:${tag.value}`"
@@ -642,7 +796,7 @@ onMounted(load);
           <UiIcon name="x" :size="12" />
         </button>
       </span>
-      <button type="button" class="filter-clear" @click="clearFilters">پاک کردن همه</button>
+      <button type="button" class="filter-clear" @click="clearFilters">پاک کردن</button>
     </div>
 
     <p v-if="importMsg" class="ok">{{ importMsg }}</p>
@@ -652,57 +806,72 @@ onMounted(load);
     <template v-else-if="tab === 'people'">
       <div v-if="people?.items.length" class="cards">
         <article v-for="p in people.items" :key="`m-${p.id}`" class="m-card">
-          <CustomerMoodFace :mood="moodOf(p)" :size="48" />
-          <div class="m-body">
-            <div class="m-top">
-              <RouterLink class="name" :to="{ name: 'person-detail', params: { id: p.id } }">
-                {{ p.fullName }}
-              </RouterLink>
-              <DiscBadge v-if="canBehavior" :label="p.discLabel" />
-              <UiDropdownMenu
-                :open="menuId === `m:${p.id}`"
-                align="end"
-                @update:open="(v) => (menuId = v ? `m:${p.id}` : null)"
-              >
-                <template #trigger="{ toggle }">
-                  <button class="more" type="button" @click.stop="toggle">
-                    <UiIcon name="dots-v" :size="16" />
-                  </button>
-                </template>
-                <RouterLink :to="{ name: 'person-detail', params: { id: p.id } }">پرونده</RouterLink>
-                <RouterLink :to="{ name: 'person-edit', params: { id: p.id } }">ویرایش</RouterLink>
-                <button
-                  v-for="mood in PERSON_MOODS"
-                  :key="mood"
-                  type="button"
-                  @click.stop="setMoodFor(p, mood)"
-                >
-                  {{ moodLabel(mood) }}
-                </button>
-              </UiDropdownMenu>
+          <RouterLink class="m-main" :to="{ name: 'person-detail', params: { id: p.id } }">
+            <CustomerMoodFace :mood="moodOf(p)" :size="36" />
+            <div class="m-id">
+              <div class="m-title">
+                <span class="name" :class="{ unnamed: !p.fullName?.trim() }">
+                  {{ p.fullName?.trim() || 'بدون نام' }}
+                </span>
+                <DiscBadge v-if="canBehavior" :label="p.discLabel" />
+              </div>
+              <div class="m-sub">
+                <span class="badge" :class="moodOf(p)">{{ moodLabel(moodOf(p)) }}</span>
+                <span v-if="p.position || p.company?.name" class="m-sub-text">
+                  {{ [p.position, p.company?.name].filter(Boolean).join(' • ') }}
+                </span>
+              </div>
             </div>
-            <p class="role">
-              {{ [p.position, p.company?.name].filter(Boolean).join(' • ') || 'بدون سمت' }}
-            </p>
-            <p class="line">
-              <span>منبع: {{ sourceLabel(p.importSource || 'manual') }}</span>
-              <span v-if="externalCode(p)"> · کد: {{ externalCodeLabel(p) }}</span>
-            </p>
-            <p v-if="p.groups?.length" class="line">
-              <CustomerGroupChips :groups="p.groups" />
-            </p>
-            <p v-if="p.previousFullName" class="line muted">
-              نام قبلی: {{ p.previousFullName }}
-            </p>
-            <p v-if="p.mobile || p.phone" class="line" dir="ltr">
+          </RouterLink>
+
+          <UiDropdownMenu
+            :open="menuId === `m:${p.id}`"
+            align="end"
+            @update:open="(v) => (menuId = v ? `m:${p.id}` : null)"
+          >
+            <template #trigger="{ toggle }">
+              <button class="more" type="button" aria-label="گزینه‌ها" @click.stop="toggle">
+                <UiIcon name="dots-v" :size="16" />
+              </button>
+            </template>
+            <RouterLink :to="{ name: 'person-detail', params: { id: p.id } }">پرونده</RouterLink>
+            <RouterLink :to="{ name: 'person-edit', params: { id: p.id } }">ویرایش</RouterLink>
+            <button
+              v-for="mood in PERSON_MOODS"
+              :key="mood"
+              type="button"
+              @click.stop="setMoodFor(p, mood)"
+            >
+              {{ moodLabel(mood) }}
+            </button>
+          </UiDropdownMenu>
+
+          <div class="m-meta">
+            <a
+              v-if="p.mobile || p.phone"
+              class="m-phone"
+              :href="`tel:${p.mobile || p.phone}`"
+              dir="ltr"
+              @click.stop
+            >
               <UiIcon name="phone" :size="13" />
-              <span>{{ p.mobile || p.phone }}</span>
-            </p>
-            <p v-if="p.email" class="line" dir="ltr">
-              <UiIcon name="mail" :size="13" />
+              {{ p.mobile || p.phone }}
+            </a>
+            <span v-else class="m-muted">بدون شماره</span>
+            <span class="m-src">
+              {{ sourceLabel(p.importSource || 'manual') }}<template v-if="externalCode(p)"> · {{ externalCodeLabel(p) }}</template>
+            </span>
+          </div>
+
+          <div v-if="p.groups?.length || p.email || p.previousFullName" class="m-extra">
+            <CustomerGroupChips v-if="p.groups?.length" :groups="p.groups" />
+            <span v-if="p.email" class="m-line" dir="ltr">
+              <UiIcon name="mail" :size="12" />
               <span>{{ p.email }}</span>
-            </p>
-            <span class="badge" :class="moodOf(p)">{{ moodLabel(moodOf(p)) }}</span>
+            </span>
+            <span v-if="p.previousFullName" class="m-line m-muted">
+              نام قبلی: {{ p.previousFullName }}
+            </span>
           </div>
         </article>
       </div>
@@ -756,7 +925,7 @@ onMounted(load);
               <td class="num-col">{{ toFaDigits(rowOffset + idx + 1) }}</td>
               <td>
                 <div class="status" :title="moodLabel(moodOf(p))">
-                  <CustomerMoodFace :mood="moodOf(p)" :size="34" />
+                  <CustomerMoodFace :mood="moodOf(p)" :size="24" />
                 </div>
               </td>
               <td>
@@ -831,36 +1000,45 @@ onMounted(load);
 
     <template v-else>
       <div v-if="companies?.items.length" class="cards">
-        <article v-for="c in companies.items" :key="`mc-${c.id}`" class="m-card">
-          <span class="co-ico"><UiIcon name="building" :size="22" /></span>
-          <div class="m-body">
-            <div class="m-top">
-              <RouterLink class="name" :to="{ name: 'company-detail', params: { id: c.id } }">
-                {{ c.name }}
-              </RouterLink>
+        <article v-for="c in companies.items" :key="`mc-${c.id}`" class="m-card no-menu">
+          <RouterLink class="m-main" :to="{ name: 'company-detail', params: { id: c.id } }">
+            <span class="co-ico"><UiIcon name="building" :size="18" /></span>
+            <div class="m-id">
+              <div class="m-title">
+                <span class="name">{{ c.name }}</span>
+              </div>
+              <div v-if="c.city || c.owner" class="m-sub">
+                <span class="m-sub-text">
+                  {{ [c.city, c.owner?.fullName].filter(Boolean).join(' • ') }}
+                </span>
+              </div>
             </div>
-            <p v-if="c.phone" class="line" dir="ltr">
+          </RouterLink>
+
+          <div class="m-meta">
+            <a
+              v-if="c.phone"
+              class="m-phone"
+              :href="`tel:${c.phone}`"
+              dir="ltr"
+              @click.stop
+            >
               <UiIcon name="phone" :size="13" />
-              <span>{{ c.phone }}</span>
-            </p>
-            <p v-if="c.email" class="line" dir="ltr">
-              <UiIcon name="mail" :size="13" />
+              {{ c.phone }}
+            </a>
+            <span v-else class="m-muted">بدون شماره</span>
+            <span class="m-src">افراد: {{ toFaDigits(c.peopleCount) }}</span>
+          </div>
+
+          <div v-if="c.groups?.length || c.email || c.sourceRef || c.code" class="m-extra">
+            <CustomerGroupChips v-if="c.groups?.length" :groups="c.groups" />
+            <span v-if="c.sourceRef || c.code" class="m-line m-muted">
+              {{ [c.sourceRef ? `کد دیدار: ${toFaDigits(c.sourceRef)}` : '', c.code ? `کد: ${toFaDigits(c.code)}` : ''].filter(Boolean).join(' · ') }}
+            </span>
+            <span v-if="c.email" class="m-line" dir="ltr">
+              <UiIcon name="mail" :size="12" />
               <span>{{ c.email }}</span>
-            </p>
-            <p v-if="c.sourceRef || c.code" class="line">
-              <span>
-                {{ c.sourceRef ? `کد دیدار: ${toFaDigits(c.sourceRef)}` : '' }}
-                {{ c.sourceRef && c.code ? ' • ' : '' }}
-                {{ c.code ? `کد: ${toFaDigits(c.code)}` : '' }}
-              </span>
-            </p>
-            <p v-if="c.groups?.length" class="line">
-              <CustomerGroupChips :groups="c.groups" />
-            </p>
-            <p class="role">
-              {{ [c.city, c.owner?.fullName].filter(Boolean).join(' • ') }}
-              {{ c.city || c.owner ? ' • ' : '' }}افراد: {{ toFaDigits(c.peopleCount) }}
-            </p>
+            </span>
           </div>
         </article>
       </div>
@@ -962,7 +1140,9 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1rem;
+  /* بدون این، ردیف‌های grid ارتفاع اضافهٔ صفحه را بین خودشان پخش می‌کنند */
+  align-content: start;
+  gap: 0.5rem;
   width: 100%;
   min-width: 0;
   max-width: 100%;
@@ -978,151 +1158,136 @@ onMounted(load);
 .page-head {
   display: flex;
   justify-content: space-between;
-  gap: 0.75rem 1rem;
-  align-items: flex-start;
-  flex-wrap: wrap;
+  gap: 0.45rem 0.75rem;
+  align-items: center;
+  flex-wrap: nowrap;
 }
 
-.head-copy {
+.head-start {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
   min-width: 0;
-  flex: 1 1 12rem;
+  flex: 1 1 auto;
 }
 
 h1 {
   margin: 0;
-  font-size: clamp(1.3rem, 4vw, 1.7rem);
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1.25;
 }
 
-.lead,
-.muted,
-.role,
-.line {
+.muted {
   color: #64748b;
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 
-.lead {
-  margin: 0.25rem 0 0;
-}
-
 .actions {
   display: flex;
-  gap: 0.45rem;
+  gap: 0.3rem;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: flex-end;
-  flex: 0 1 auto;
+  flex: 0 0 auto;
   min-width: 0;
 }
 
+.actions-desktop {
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.actions-more {
+  display: none;
+}
+
 .btn-short {
   display: none;
 }
 
-.add-btn {
-  width: var(--control-h);
-  height: var(--control-h);
-  border-radius: var(--radius);
-  background: #14b8a6;
-  color: #fff;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.28);
+/* از عرض متوسط لیبل کوتاه تا اکشن‌ها به ردیف دوم نروند */
+@media (max-width: 1280px) {
+  .actions .btn-full {
+    display: none;
+  }
+
+  .actions .btn-short {
+    display: inline;
+  }
+}
+
+.chrome {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
 }
 
 .tabs {
-  display: flex;
-  gap: 0.35rem 1.2rem;
-  border-bottom: 1px solid #e2e8f0;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -webkit-overflow-scrolling: touch;
-}
-
-.tabs::-webkit-scrollbar {
-  display: none;
+  display: inline-flex;
+  gap: 0.15rem;
+  padding: 0.15rem;
+  background: #f1f5f9;
+  border-radius: var(--radius);
+  flex-shrink: 0;
 }
 
 .tabs button {
   border: 0;
-  background: none;
-  padding: 0.55rem 0.1rem;
+  background: transparent;
+  padding: 0.35rem 0.65rem;
   font: inherit;
-  color: #94a3b8;
+  font-size: var(--fs-sm);
+  color: #64748b;
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.3rem;
   cursor: pointer;
   white-space: nowrap;
-  flex-shrink: 0;
+  border-radius: calc(var(--radius) - 2px);
+  line-height: 1.2;
 }
 
 .tabs .on {
   color: #0f766e;
   font-weight: 600;
-  box-shadow: inset 0 -2px 0 #14b8a6;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
 }
 
 .tabs em {
   font-style: normal;
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   color: #94a3b8;
 }
 
-.source-stats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  margin-bottom: 0.75rem;
-}
-.source-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  border: 1px solid var(--color-border, #ddd);
-  background: var(--color-surface, #fff);
-  border-radius: 999px;
-  padding: 0.25rem 0.7rem;
-  font-size: 0.82rem;
-  cursor: pointer;
-}
-.source-chip.on {
-  border-color: var(--color-primary, #2563eb);
-  color: var(--color-primary, #2563eb);
-  background: color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent);
-}
-.source-chip em {
-  font-style: normal;
-  font-weight: 700;
-}
 .filter-tags {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.4rem;
-}
-.filter-tags-label {
-  font-size: 0.8rem;
-  color: #64748b;
+  gap: 0.3rem;
 }
 .filter-tag {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.2rem 0.35rem 0.2rem 0.6rem;
+  gap: 0.2rem;
+  padding: 0.1rem 0.25rem 0.1rem 0.5rem;
   border-radius: 999px;
   background: #f0fdfa;
   color: #0f766e;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 600;
 }
 .filter-tag button {
   display: inline-grid;
   place-items: center;
-  width: 1.1rem;
-  height: 1.1rem;
+  width: 1rem;
+  height: 1rem;
   border: 0;
   border-radius: 50%;
   background: rgba(15, 23, 42, 0.08);
@@ -1135,7 +1300,7 @@ h1 {
   background: none;
   color: #64748b;
   font: inherit;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   text-decoration: underline;
   cursor: pointer;
 }
@@ -1145,46 +1310,81 @@ h1 {
   background: #f0fdfa;
 }
 .tool-count {
-  min-width: 1.15rem;
-  height: 1.15rem;
+  min-width: 1.05rem;
+  height: 1.05rem;
   border-radius: 999px;
   background: #14b8a6;
   color: #fff;
-  font-size: 0.7rem;
+  font-size: 0.68rem;
   display: inline-grid;
   place-items: center;
-  padding: 0 0.25rem;
+  padding: 0 0.2rem;
 }
 .tiny {
-  font-size: 0.75rem;
-  margin-top: 0.15rem;
-}
-
-.toolbar {
-  display: flex;
-  gap: 0.55rem;
-  align-items: center;
-  flex-wrap: wrap;
+  font-size: 0.72rem;
+  margin-top: 0.1rem;
 }
 
 .toolbar-tools {
   display: flex;
-  gap: 0.45rem;
+  gap: 0.3rem;
   align-items: center;
   flex-shrink: 0;
 }
 
+/* دسکتاپ: wrapper شفاف تا جستجو مثل قبل آیتم مستقیم flex بماند */
+.search-row {
+  display: contents;
+}
+
+.search-filter {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  height: 28px;
+  padding: 0 0.4rem;
+  margin-inline-end: -0.3rem;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--ink-secondary);
+  cursor: pointer;
+}
+
+.search-filter.active {
+  color: #0f766e;
+  background: #f0fdfa;
+}
+
+.saved-slot {
+  /* فقط عرض؛ در ستون موبایل flex-basis نباید ارتفاع بسازد */
+  flex: 1 1 auto;
+  width: min(20rem, 100%);
+  min-width: 11rem;
+  max-width: 20rem;
+  margin-inline-start: auto;
+  height: auto;
+  min-height: 0;
+  overflow: visible;
+}
+
+.saved-slot :deep(.ant-space-compact) {
+  width: 100%;
+  max-height: var(--control-h, 36px);
+}
+
 .search {
-  flex: 1 1 14rem;
-  min-width: 180px;
-  max-width: 400px;
+  flex: 1 1 12rem;
+  min-width: 10rem;
+  max-width: 22rem;
   display: flex;
   align-items: center;
-  gap: 0.45rem;
+  gap: 0.35rem;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
-  padding: 0 0.75rem;
+  padding: 0 0.6rem;
   min-height: var(--control-h);
   height: var(--control-h);
   color: var(--muted);
@@ -1215,11 +1415,11 @@ h1 {
   border: 1px solid var(--line);
   background: #fff;
   border-radius: var(--radius);
-  padding: 0 0.75rem;
+  padding: 0 0.55rem;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.3rem;
   font: inherit;
   font-size: var(--fs-sm);
   color: var(--ink-secondary);
@@ -1240,10 +1440,10 @@ h1 {
 .menu {
   position: absolute;
   inset-inline-start: 0;
-  top: calc(100% + 6px);
+  top: calc(100% + 4px);
   z-index: 8;
   margin: 0;
-  padding: 0.35rem;
+  padding: 0.25rem;
   list-style: none;
   background: #fff;
   border-radius: var(--radius);
@@ -1258,7 +1458,7 @@ h1 {
   display: block;
   border: 0;
   background: none;
-  padding: 0.5rem 0.65rem;
+  padding: 0.4rem 0.55rem;
   border-radius: var(--radius);
   font: inherit;
   text-align: start;
@@ -1275,18 +1475,20 @@ h1 {
 
 .ok {
   margin: 0;
+  font-size: var(--fs-sm);
   color: #0f766e;
 }
 
 .error {
   margin: 0;
+  font-size: var(--fs-sm);
   color: #b91c1c;
 }
 
 .table-wrap {
   background: #fff;
   border-radius: var(--radius);
-  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -1300,46 +1502,50 @@ h1 {
 th,
 td {
   text-align: start;
-  padding: 0.85rem 1rem;
+  padding: 0.35rem 0.5rem;
   border-bottom: 1px solid #f1f5f9;
   white-space: nowrap;
+  font-size: 0.8125rem;
+  line-height: 1.35;
 }
 
 th {
-  font-size: 0.8rem;
+  font-size: 0.72rem;
+  font-weight: 600;
   color: #94a3b8;
   background: #f8fafc;
+  padding-block: 0.4rem;
 }
 
 .status {
   display: flex;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.4rem;
 }
 
 .status strong {
-  font-size: 0.82rem;
+  font-size: 0.8rem;
 }
 
 .check-col {
-  width: 2.4rem;
-  padding-inline: 0.75rem 0.25rem;
+  width: 2rem;
+  padding-inline: 0.5rem 0.2rem;
 }
 
 .check-col input {
-  width: 1rem;
-  height: 1rem;
+  width: 0.95rem;
+  height: 0.95rem;
   margin: 0;
   accent-color: #0d9488;
   cursor: pointer;
 }
 
 .num-col {
-  width: 2.6rem;
+  width: 2.2rem;
   color: #94a3b8;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-variant-numeric: tabular-nums;
-  padding-inline: 0.25rem;
+  padding-inline: 0.2rem;
 }
 
 tr.picked td {
@@ -1349,10 +1555,9 @@ tr.picked td {
 .bulk-bar {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
-  padding: 0.6rem 0.85rem;
-  margin-bottom: 0.6rem;
+  padding: 0.4rem 0.65rem;
   border: 1px solid #99f6e4;
   background: #f0fdfa;
   border-radius: var(--radius);
@@ -1448,74 +1653,165 @@ strong.newcomer {
 
 .cards {
   display: none;
-  gap: 0.7rem;
+  gap: 0.5rem;
 }
 
+/* کارت موبایل: هدر (آواتار + نام + وضعیت) | منو، سپس ردیف تماس/منبع، سپس جزئیات اختیاری */
 .m-card {
-  position: relative;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 0.7rem;
-  align-items: start;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'main menu'
+    'meta meta'
+    'extra extra';
+  column-gap: 0.25rem;
   background: #fff;
+  border: 1px solid #eef2f6;
   border-radius: var(--radius);
-  padding: 0.85rem;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
+  padding: 0.55rem 0.6rem 0.5rem;
   min-width: 0;
-  overflow: hidden;
 }
 
-.m-top {
+.m-card.no-menu {
+  grid-template-areas:
+    'main main'
+    'meta meta'
+    'extra extra';
+}
+
+.m-main {
+  grid-area: main;
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.55rem;
   min-width: 0;
+  color: inherit;
+  text-decoration: none;
 }
 
-.m-top .name {
+.m-card > :deep(.ui-dd-anchor) {
+  grid-area: menu;
+  align-self: start;
+  margin-inline-end: -0.35rem;
+  margin-top: -0.2rem;
+}
+
+.m-id {
+  min-width: 0;
   flex: 1 1 auto;
-  min-width: 0;
-  line-height: 1.35;
-}
-
-.m-body {
-  min-width: 0;
   display: grid;
-  gap: 0.28rem;
+  gap: 0.2rem;
 }
 
-.role,
-.line {
-  margin: 0;
-  font-size: 0.8rem;
+.m-title {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.m-title .name {
+  min-width: 0;
+  font-size: 0.92rem;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.m-title .name.unnamed {
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+.m-sub {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.m-sub-text {
+  min-width: 0;
+  font-size: 0.75rem;
+  color: #64748b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.m-meta {
+  grid-area: meta;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  padding-top: 0.45rem;
+  border-top: 1px dashed #e2e8f0;
+  font-size: 0.78rem;
+  min-width: 0;
+}
+
+.m-phone {
+  display: inline-flex;
+  align-items: center;
   gap: 0.3rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 999px;
+  background: #f0fdfa;
+  color: #0f766e;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.m-src {
+  min-width: 0;
+  color: #64748b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.m-muted {
+  color: #94a3b8;
+}
+
+.m-extra {
+  grid-area: extra;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem 0.6rem;
+  margin-top: 0.4rem;
+  font-size: 0.75rem;
   min-width: 0;
 }
 
-.line :deep(svg),
-.role :deep(svg) {
-  flex-shrink: 0;
-  margin-top: 0.15rem;
+.m-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  max-width: 100%;
+  color: #64748b;
 }
 
-.line span {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
+.m-line > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .badge {
-  justify-self: start;
+  flex-shrink: 0;
   border-radius: 999px;
-  padding: 0.28rem 0.6rem;
-  font-size: 0.72rem;
+  padding: 0.05rem 0.45rem;
+  font-size: 0.68rem;
   font-weight: 600;
-  margin-top: 0.25rem;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  line-height: 1.5;
   white-space: nowrap;
 }
 
@@ -1540,8 +1836,8 @@ strong.newcomer {
 }
 
 .co-ico {
-  width: 48px;
-  height: 48px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   display: grid;
   place-items: center;
@@ -1550,83 +1846,77 @@ strong.newcomer {
   flex-shrink: 0;
 }
 
-.empty {
-  margin: 0;
-  padding: 1.4rem;
-  color: #64748b;
-  background: #fff;
-  border-radius: var(--radius);
-}
-
-.pager {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.8rem;
-  flex-wrap: wrap;
-  color: #64748b;
-  font-size: 0.8rem;
-}
-
-.pages {
-  display: flex;
-  gap: 0.3rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.pages button {
-  min-width: 32px;
-  height: 32px;
-  border: 0;
-  background: #fff;
-  border-radius: var(--radius);
-  cursor: pointer;
-}
-
-.pages button.on {
-  background: #14b8a6;
-  color: #fff;
-}
-
-.pages button:disabled {
-  opacity: 0.4;
+:deep(.ui-pagination) {
+  padding-top: 0.35rem;
 }
 
 @media (max-width: 900px) {
   .page {
-    gap: 0.85rem;
+    gap: 0.45rem;
   }
 
   .page-head {
-    align-items: center;
-  }
-
-  :deep(.actions) .btn-full {
-    display: none;
-  }
-
-  :deep(.actions) .btn-short {
-    display: inline;
-  }
-
-  .add-btn {
-    width: var(--control-h);
-    height: var(--control-h);
-  }
-
-  .toolbar {
-    flex-direction: column;
+    flex-wrap: wrap;
     align-items: stretch;
   }
 
-  .search {
-    flex: 0 0 auto;
+  .head-start {
     width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .actions {
+    width: 100%;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    gap: 0.35rem;
+  }
+
+  .actions-desktop {
+    display: none;
+  }
+
+  .actions-more {
+    display: inline-flex;
+  }
+
+  .tabs {
+    flex: 1 1 auto;
+  }
+
+  .tabs button {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+
+  .chrome {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.35rem;
+  }
+
+  /* جستجو + گروه‌ها در یک ردیف، فاصله ۸px */
+  .search-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .search {
+    flex: 1 1 auto;
+    width: auto;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .groups-tool {
+    flex-shrink: 0;
   }
 
   .toolbar-tools {
     width: 100%;
+    flex-wrap: nowrap;
   }
 
   .toolbar-tools .pop {
@@ -1638,6 +1928,15 @@ strong.newcomer {
     justify-content: center;
   }
 
+  .saved-slot {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    margin-inline-start: 0;
+    height: auto;
+  }
+
   .table-wrap {
     display: none;
   }
@@ -1645,24 +1944,9 @@ strong.newcomer {
   .cards {
     display: grid;
   }
-
-  .pager {
-    flex-direction: column;
-    align-items: stretch;
-    text-align: center;
-    gap: 0.65rem;
-  }
-
-  .pages {
-    justify-content: center;
-  }
 }
 
 @media (max-width: 520px) {
-  .actions .excel-btn {
-    display: none;
-  }
-
   .tool-label {
     display: none;
   }
@@ -1672,12 +1956,7 @@ strong.newcomer {
     flex: 1 1 auto;
     min-width: 44px;
     justify-content: center;
-    padding-inline: 0.65rem;
-  }
-
-  .m-card {
-    padding: 0.75rem;
-    gap: 0.6rem;
+    padding-inline: 0.5rem;
   }
 }
 </style>