feat(ui): standardize design system, modals, sidebar, and form inputs

- Implement unified design system tokens, 10px radius, and IRANSans typography
- Modernize sidebar with Gemini-style collapsed expander, square 1:1 items, and elevated profile flyout
- Standardize all modal dialogs with 16px padding, fixed header/footer, 16px medium title, and sticky bottom actions
- Refactor DealFormView and CustomFieldsSection with standard UiField, UiInput, and UiSelect components
- Add draggable bottom-left QuickCreate floating action button

apps/web/src/views/InvoiceFormView.vue

@@ -845,12 +845,6 @@ onMounted(load);
 
 <template>
   <section class="page" :class="{ embedded }">
-    <div v-if="embedded" class="embed-actions no-print">
-      <button class="btn primary" type="button" :disabled="saving" @click="save">
-        {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
-      </button>
-      <button class="btn cancel" type="button" :disabled="saving" @click="goBack">انصراف</button>
-    </div>
     <header v-if="!embedded" class="page-head no-print">
       <div class="head-copy">
         <div class="title-row">
@@ -1725,6 +1719,14 @@ onMounted(load);
         </button>
       </footer>
     </form>
+
+    <!-- Embedded Modal Actions (Fixed at bottom) -->
+    <div v-if="embedded" class="embed-actions no-print">
+      <button class="btn primary" type="button" :disabled="saving" @click="save">
+        {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
+      </button>
+      <button class="btn cancel" type="button" :disabled="saving" @click="goBack">انصراف</button>
+    </div>
   </section>
 </template>
 
@@ -1741,7 +1743,8 @@ onMounted(load);
   display: grid;
   gap: 1rem;
   min-width: 0;
-  max-width: 1180px;
+  width: 100%;
+  max-width: 100%;
 }
 
 .page.embedded {
@@ -1795,7 +1798,7 @@ onMounted(load);
 .doc-ico {
   width: 44px;
   height: 44px;
-  border-radius: 12px;
+  border-radius: var(--radius);
   display: grid;
   place-items: center;
   background: var(--teal-soft);
@@ -1806,7 +1809,7 @@ onMounted(load);
 h1 {
   margin: 0;
   font-size: clamp(1.2rem, 2.4vw, 1.5rem);
-  font-weight: 800;
+  font-weight: 600;
   color: var(--ink);
 }
 
@@ -1849,13 +1852,13 @@ h1 {
   align-items: center;
   gap: 0.5rem;
   font-size: 1rem;
-  font-weight: 800;
+  font-weight: 600;
 }
 
 .card-ico {
   width: 30px;
   height: 30px;
-  border-radius: 10px;
+  border-radius: var(--radius);
   display: grid;
   place-items: center;
   background: var(--teal-soft);
@@ -1877,7 +1880,7 @@ h1 {
   min-height: var(--control-h);
   height: var(--control-h);
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--radius);
   background: transparent;
   color: #64748b;
   font: inherit;
@@ -2017,7 +2020,7 @@ h1 {
   min-height: var(--control-h);
   padding: 0 0.85rem;
   font: inherit;
-  font-weight: 800;
+  font-weight: 600;
   color: var(--ink);
   cursor: pointer;
 }
@@ -2064,7 +2067,7 @@ h1 {
   border-radius: var(--radius);
   border: 1px solid transparent;
   font: inherit;
-  font-weight: 800;
+  font-weight: 600;
   cursor: pointer;
   text-decoration: none;
   box-sizing: border-box;
@@ -2183,7 +2186,7 @@ h1 {
 .prod-thumb {
   width: 40px;
   height: 40px;
-  border-radius: 12px;
+  border-radius: var(--radius);
   display: grid;
   place-items: center;
   background: var(--teal-soft);
@@ -2230,7 +2233,7 @@ h1 {
   width: 32px;
   height: 32px;
   border: 0;
-  border-radius: 10px;
+  border-radius: var(--radius);
   display: grid;
   place-items: center;
   cursor: pointer;
@@ -2253,7 +2256,7 @@ h1 {
 }
 
 .line-sum {
-  font-weight: 800;
+  font-weight: 600;
   white-space: nowrap;
 }
 
@@ -2261,7 +2264,7 @@ h1 {
   width: 36px;
   height: 36px;
   border: 0;
-  border-radius: 10px;
+  border-radius: var(--radius);
   background: #fff1f2;
   color: #e11d48;
   display: grid;
@@ -2278,7 +2281,7 @@ h1 {
   background: var(--teal-soft);
   color: var(--teal);
   font: inherit;
-  font-weight: 800;
+  font-weight: 600;
   cursor: pointer;
 }
 
@@ -2287,7 +2290,7 @@ h1 {
   gap: 0.55rem;
   margin-top: 0.25rem;
   padding: 0.85rem;
-  border-radius: 14px;
+  border-radius: var(--radius);
   background: #f8fafc;
   max-width: 360px;
   margin-inline-start: auto;
@@ -2311,7 +2314,7 @@ h1 {
 .sum-row.payable {
   margin-top: 0.2rem;
   padding: 0.75rem 0.85rem;
-  border-radius: 12px;
+  border-radius: var(--radius);
   background: var(--teal-soft);
   color: var(--teal);
   border: 1px solid var(--teal-border);
@@ -2382,7 +2385,7 @@ h1 {
   background: var(--teal-soft);
   color: var(--teal);
   font-size: 0.75rem;
-  font-weight: 800;
+  font-weight: 600;
 }
 
 .icon-add {
@@ -2425,7 +2428,7 @@ h1 {
   gap: 0.5rem;
   padding: 0.75rem;
   border: 1px solid #eef2f6;
-  border-radius: 14px;
+  border-radius: var(--radius);
   background: #fff;
 }
 
@@ -2448,7 +2451,7 @@ h1 {
 
 .mob-total {
   margin: 0;
-  font-weight: 800;
+  font-weight: 600;
   color: var(--ink);
 }
 
@@ -2531,7 +2534,7 @@ h1 {
   gap: 0.5rem;
   padding: 0.65rem 0.8rem;
   border: 1px solid var(--line);
-  border-radius: 12px;
+  border-radius: var(--radius);
   background: #f8fafc;
 }
 
@@ -2606,7 +2609,7 @@ h1 {
     width: 36px;
     height: 36px;
     object-fit: contain;
-    border-radius: 8px;
+    border-radius: var(--radius);
   }
 
   .page {