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/TicketFormView.vue

@@ -272,10 +272,12 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head">
-      <div>
-        <RouterLink class="back" :to="{ name: 'tickets' }"
-          >← بازگشت به لیست</RouterLink
-        >
+      <div class="head-copy">
+        <p class="crumb">
+          <RouterLink :to="{ name: 'tickets' }">تیکت‌ها</RouterLink>
+          <span>›</span>
+          <strong>{{ isNew ? 'تیکت جدید' : number || 'تیکت' }}</strong>
+        </p>
         <h1>{{ isNew ? 'تیکت جدید' : number || 'تیکت' }}</h1>
       </div>
     </header>
@@ -459,8 +461,9 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 760px;
+  min-width: 0;
 }
 
 .page-head {
@@ -469,14 +472,29 @@ onMounted(load);
   gap: 1rem;
 }
 
-.back {
-  color: var(--muted);
+.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;
-  font-size: 0.9rem;
 }
 
 h1 {
-  margin: 0.25rem 0 0;
+  margin: 0;
+  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
+  font-weight: 800;
 }
 
 h2 {
@@ -491,11 +509,20 @@ h2 {
   gap: 0.85rem;
 }
 
+.form,
+.thread,
+.csat {
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+}
+
 .sla-box {
   padding: 0.75rem 1rem;
-  border-radius: var(--radius);
-  border: 1px solid var(--line);
-  background: color-mix(in srgb, var(--accent) 8%, #fff);
+  border-radius: 18px;
+  border: 1px solid #99f6e4;
+  background: #f0fdfa;
   font-size: 0.95rem;
 }