Align older CRM pages with the Mento visual language.

Restyle list, form, settings, and secondary modules to match contacts/activities patterns with teal chrome, soft panels, and mobile layouts — without changing already-redesigned screens.

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

apps/web/src/views/QuoteFormView.vue

@@ -229,15 +229,19 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head no-print">
-      <div>
-        <RouterLink class="back" :to="{ name: 'quotes' }">← بازگشت به لیست</RouterLink>
+      <div class="head-copy">
+        <p class="crumb">
+          <RouterLink :to="{ name: 'quotes' }">پیش‌فاکتورها</RouterLink>
+          <span>›</span>
+          <strong>{{ isNew ? 'پیش‌فاکتور جدید' : number || 'پیش‌فاکتور' }}</strong>
+        </p>
         <h1>{{ isNew ? 'پیش‌فاکتور جدید' : number || 'پیش‌فاکتور' }}</h1>
       </div>
       <div class="head-actions">
-        <button v-if="!isNew" class="btn btn-ghost" type="button" @click="printQuote">چاپ</button>
+        <button v-if="!isNew" class="btn ghost" type="button" @click="printQuote">چاپ</button>
         <RouterLink
           v-if="!isNew && id"
-          class="btn btn-ghost"
+          class="btn ghost"
           :to="{ name: 'invoice-new', query: { fromQuoteId: id } }"
         >
           صدور فاکتور
@@ -336,8 +340,9 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 860px;
+  min-width: 0;
 }
 
 .page-head {
@@ -347,26 +352,60 @@ onMounted(load);
   align-items: flex-start;
 }
 
+.head-copy {
+  min-width: 0;
+}
+
+.crumb {
+  margin: 0 0 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #94a3b8;
+  font-size: 0.82rem;
+}
+
+.crumb a {
+  color: #0f766e;
+  font-weight: 700;
+  text-decoration: none;
+}
+
 .head-actions {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
 }
 
-.back {
-  color: var(--muted);
-  text-decoration: none;
-  font-size: 0.9rem;
+h1 {
+  margin: 0;
+  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
+  font-weight: 800;
 }
 
-h1 {
-  margin: 0.25rem 0 0;
+.btn.ghost {
+  display: inline-flex;
+  align-items: center;
+  background: #fff;
+  color: #0f766e;
+  border: 1px solid #99f6e4;
+  border-radius: 12px;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  text-decoration: none;
 }
 
 .form,
 .lines-block {
   display: grid;
   gap: 0.85rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
 }
 
 .grid {