From 7b806da14c2b0639a41be9310ebcce0c117fbf81 Mon Sep 17 00:00:00 2001
From: maaz519 <maaz@insigniaconsultancy.com>
Date: Wed, 29 Jul 2026 13:41:16 +0530
Subject: [PATCH] perf(dashboard): stop refetching on every tab switch; own the
 QueryClient
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two changes, together removing nearly all the redundant conversation/history
calls visible in the network panel.

Keep-alive modules: Messenger and Inbox were rendered from the tab ternary, so
every tab change UNMOUNTED them — all their state died and returning re-hit the
API. They now mount on first visit and stay mounted, hidden with CSS. Deliberately
mount-on-first-visit rather than eager-mount-both, so opening the dashboard does
not fire two modules' initial loads for a user who never opens either.

QueryClient ownership: the SDK (0.2.0) takes React Query as a peer and falls back
to its own client if it can't find one — but then its cache would be invisible to
the CRM. Providing it here keeps SDK and CRM data in one store, so a write can
invalidate a conversation list. Client is created in useState, not at module
scope, so an SSR render can't leak one user's cache into another's.
refetchOnWindowFocus is off: the socket already pushes live changes, so focus
refetching was pure noise.

Also declares onnxruntime-web@1.21.0, a PINNED peerDependency of
@imgly/background-removal that npm prunes on any re-resolve. The committed lock
had it, so `npm ci` worked and `npm install` silently broke the gallery build —
declaring it directly makes it unprunable.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 package-lock.json                      |    48 +-
 package.json                           |     4 +-
 src/app/dashboard/dashboard.css        | 11320 +++++++++++++++++++----
 src/components/dashboard/dashboard.tsx |    28 +-
 src/lib/crm-messaging-adapter.ts       |     4 +-
 src/lib/query-client.tsx               |    33 +
 6 files changed, 9726 insertions(+), 1711 deletions(-)
 create mode 100644 src/lib/query-client.tsx

diff --git a/package-lock.json b/package-lock.json
index ae81a7a..45532ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,9 @@
         "@huggingface/transformers": "^4.2.0",
         "@imgly/background-removal": "^1.7.0",
         "@insignia/iios-kernel-client": "^0.1.6",
-        "@insignia/iios-messaging-ui": "^0.1.17",
+        "@insignia/iios-messaging-ui": "^0.2.0",
         "@photo-gallery/sdk": "file:./vendor/photo-gallery-sdk",
+        "@tanstack/react-query": "^5.101.4",
         "@tensorflow-models/coco-ssd": "^2.2.3",
         "@tensorflow/tfjs": "^4.22.0",
         "@vladmandic/face-api": "^1.7.15",
@@ -21,6 +22,7 @@
         "leaflet": "^1.9.4",
         "lucide-react": "^1.21.0",
         "next": "16.2.9",
+        "onnxruntime-web": "^1.21.0",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "tailwind-merge": "^3.6.0",
@@ -1110,11 +1112,12 @@
       }
     },
     "node_modules/@insignia/iios-messaging-ui": {
-      "version": "0.1.17",
-      "resolved": "https://git.lynkedup.cloud/api/packages/insignia/npm/%40insignia%2Fiios-messaging-ui/-/0.1.17/iios-messaging-ui-0.1.17.tgz",
-      "integrity": "sha512-pob/ldsvloFZ15BUyDyVdZb34MYQrH6aFAV27tleTgaJhnOeDf4HlJe19ftpW8S/h2TNhFMRhv6eOnYRLzEtxQ==",
+      "version": "0.2.0",
+      "resolved": "https://git.lynkedup.cloud/api/packages/insignia/npm/%40insignia%2Fiios-messaging-ui/-/0.2.0/iios-messaging-ui-0.2.0.tgz",
+      "integrity": "sha512-eM3K9CMtPumTvpoL7FrX+RcdKylhIDgMDZ4/7GCGoe6P1lj+HcAMmUX38cyLx7qq21DaDMnUcq3RNMW69gsDNw==",
       "peerDependencies": {
         "@insignia/iios-kernel-client": "*",
+        "@tanstack/react-query": ">=5",
         "react": ">=18",
         "react-dom": ">=18"
       },
@@ -1823,6 +1826,32 @@
         "tailwindcss": "4.3.1"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.101.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.4.tgz",
+      "integrity": "sha512-gNwcvOJcRbLWPOLG/2OBm+zM+Yv+MKsXKEOWC57USuZDEsI71hEErQsiEGx5wX9rzWWkfwM0fVSPoiIFSsxfiw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.101.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.4.tgz",
+      "integrity": "sha512-yRg2pfOCxIs4ZJW3XYYHU/WgtD04FHSnfHlpRT7h7pR77hwkdRG4wxbKe4aq6P0RvXUTBSQpQeadS1SUYUe+KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.101.4"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tanstack/react-virtual": {
       "version": "3.14.8",
       "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.14.8.tgz",
@@ -2072,7 +2101,7 @@
       "version": "19.2.17",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -3454,7 +3483,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -6639,7 +6668,7 @@
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/onnxruntime-web/-/onnxruntime-web-1.21.0.tgz",
       "integrity": "sha512-adzOe+7uI7lKz6pQNbAsLMQd2Fq5Jhmoxd8LZjJr8m3KvbFyiYyRxRiC57/XXD+jb18voppjeGAjoZmskXG+7A==",
-      "peer": true,
+      "license": "MIT",
       "dependencies": {
         "flatbuffers": "^25.1.24",
         "guid-typescript": "^1.0.9",
@@ -6653,14 +6682,13 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
       "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/onnxruntime-web/node_modules/onnxruntime-common": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.21.0.tgz",
       "integrity": "sha512-Q632iLLrtCAVOTO65dh2+mNbQir/QNTVBG3h/QdZBpns7mZ0RYbLRBgGABPbpU9351AgYy7SJf1WaeVwMrBFPQ==",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/opencollective-postinstall": {
       "version": "2.0.3",
diff --git a/package.json b/package.json
index b207ead..972de88 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,9 @@
     "@huggingface/transformers": "^4.2.0",
     "@imgly/background-removal": "^1.7.0",
     "@insignia/iios-kernel-client": "^0.1.6",
-    "@insignia/iios-messaging-ui": "^0.1.17",
+    "@insignia/iios-messaging-ui": "^0.2.0",
     "@photo-gallery/sdk": "file:./vendor/photo-gallery-sdk",
+    "@tanstack/react-query": "^5.101.4",
     "@tensorflow-models/coco-ssd": "^2.2.3",
     "@tensorflow/tfjs": "^4.22.0",
     "@vladmandic/face-api": "^1.7.15",
@@ -23,6 +24,7 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^1.21.0",
     "next": "16.2.9",
+    "onnxruntime-web": "^1.21.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwind-merge": "^3.6.0",
diff --git a/src/app/dashboard/dashboard.css b/src/app/dashboard/dashboard.css
index 56820d2..94dfe32 100644
--- a/src/app/dashboard/dashboard.css
+++ b/src/app/dashboard/dashboard.css
@@ -3,1466 +3,7915 @@
    Dark + light themes via [data-theme] on .dash-root.
    ========================================================================= */
 
-   .dash-root {
-    /* accents (shared) */
-    --orange: #fda913;
-    --orange-2: #fd6d13;
-    --yellow: #ffd60a;
-    --cyan: #09b9c6;
-    --green: #14bc83;
-    --blue: #285ef0;
-    --purple: #9036e9;
-    --red: #f0563f;
-  
-    --radius: 16px;
-    --radius-sm: 12px;
-    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
-  
-    min-height: 100vh;
-    display: flex;
-    background: var(--bg);
-    color: var(--text);
-    font-family: var(--font);
-    -webkit-font-smoothing: antialiased;
-  }
-  
-  /* ---- dark (default) ---- */
-  .dash-root,
-  .dash-root[data-theme="dark"] {
-    color-scheme: dark;
-    --bg: #060608;
-    --panel: #0e0e13;
-    --panel-2: #060608;
-    --panel-3: #1b1b22;
-    --border: rgba(255, 255, 255, 0.07);
-    --border-2: rgba(255, 255, 255, 0.12);
-    --text: #ffffff;
-    --text-2: #eaeaea;
-    --muted: #8c8c8c;
-    --faint: #686868;
-    --track: rgba(255, 255, 255, 0.08);
-    --sidebar: #08080b;
-    --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
-  }
-  
-  /* ---- light ---- */
-  .dash-root[data-theme="light"] {
-    color-scheme: light;
-    --bg: #eef1f7;
-    --panel: #ffffff;
-    --panel-2: #f5f7fb;
-    --panel-3: #eef1f7;
-    --border: rgba(15, 23, 42, 0.08);
-    --border-2: rgba(15, 23, 42, 0.14);
-    --text: #0c0e14;
-    --text-2: #1f2430;
-    --muted: #5b6472;
-    --faint: #97a0b0;
-    --track: rgba(15, 23, 42, 0.07);
-    --sidebar: #ffffff;
-    --shadow: 0 18px 40px -26px rgba(15, 23, 42, 0.25);
-    --card-grad: var(--panel);
-  }
-  
-  .dash-root * { box-sizing: border-box; }
-  .dash-root h1, .dash-root h2, .dash-root h3, .dash-root h4 { margin: 0; }
-  
-  /* ---- sidebar ---- */
-  .dash-sidebar {
-    width: 214px;
-    flex: 0 0 214px;
-    background: var(--sidebar);
-    border-right: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    position: sticky;
-    top: 0;
-  }
-  .dash-brand { display: flex; align-items: center; gap: 9px; padding: 18px 18px 14px; }
-  .dash-brand img { height: 44px; width: auto; }
-  .dash-brand .bk { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
-  .dash-nav { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
-  .dash-nav::-webkit-scrollbar { width: 6px; }
-  .dash-nav::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
-  .nav-group { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 14px 10px 6px; }
-  .nav-item {
-    display: flex; align-items: center; gap: 11px;
-    width: 100%; padding: 8.5px 10px; border-radius: 9px;
-    border: 0; background: none; cursor: pointer;
-    color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 500;
-    text-align: left; transition: background 0.14s, color 0.14s;
-  }
-  .nav-item:hover { background: var(--panel-2); color: var(--text-2); }
-  .nav-item.active { background: var(--orange); color: #fff; font-weight: 600; }
-  .nav-item.active svg { color: #fff; }
-  .nav-item svg { color: var(--faint); flex: 0 0 auto; }
-  .nav-item:hover svg { color: var(--text-2); }
-  .fig-ic { display: inline-flex; flex: 0 0 auto; color: inherit; }
-  .fig-ic svg { width: 100%; height: 100%; display: block; }
-  .dash-sidebar .sb-foot { border-top: 1px solid var(--border); padding: 10px 12px; }
-  .sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
-  .sb-user:hover { background: var(--panel-2); }
-  .sb-user .av { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: 0 0 30px; }
-  .sb-user .nm { font-size: 12.5px; font-weight: 600; }
-  .sb-user .rl { font-size: 11px; color: var(--faint); }
-  .sb-user .nm, .sb-user .rl { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .sb-user-menu { position: absolute; bottom: 56px; left: 12px; right: 12px; z-index: 30; padding: 6px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--panel); box-shadow: var(--shadow), 0 8px 30px -12px rgba(0,0,0,0.55); animation: ds-rise 0.14s ease; }
-  .sb-user-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
-  .sb-user-menu button:hover { background: var(--panel-2); }
-  .sb-user-menu button.danger { color: var(--red, #ef4444); }
-  
-  /* ---- main ---- */
-  .dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-  .dash-topbar {
-    height: 84px; display: flex; align-items: center; justify-content: space-between;
-    padding: 0 24px; border-bottom: 1px solid var(--border);
-    position: sticky; top: 0; z-index: 20;
-    background: color-mix(in srgb, var(--bg) 80%, transparent);
-    backdrop-filter: blur(10px);
-  }
-  .dash-title h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
-  .dash-title p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
-  .top-actions { display: flex; align-items: center; gap: 8px; }
-  .ic-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: 0.14s; }
-  .ic-btn:hover { color: var(--text); border-color: var(--border-2); }
-  .top-user { display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px 5px; border: 1px solid var(--border); border-radius: 99px; background: var(--panel); cursor: pointer; }
-  .top-user .av { width: 30px; height: 30px; border-radius: 99px; object-fit: cover; }
-  .top-user .nm { font-size: 12.5px; font-weight: 600; }
-  .top-user .rl { font-size: 10.5px; color: var(--faint); }
-  
-  .dash-content { padding: 22px 28px 40px; width: 100%; }
-  .sec-title { font-size: 15px; font-weight: 700; margin: 6px 0 14px; }
+.dash-root {
+  /* accents (shared) */
+  --orange: #fda913;
+  --orange-2: #fd6d13;
+  --yellow: #ffd60a;
+  --cyan: #09b9c6;
+  --green: #14bc83;
+  --blue: #285ef0;
+  --purple: #9036e9;
+  --red: #f0563f;
 
-  /* Host for @insignia/iios-messaging-ui: a fixed-height card that maps the SDK's --miu-* tokens
+  --radius: 16px;
+  --radius-sm: 12px;
+  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+
+  min-height: 100vh;
+  display: flex;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ---- dark (default) ---- */
+.dash-root,
+.dash-root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #060608;
+  --panel: #0e0e13;
+  --panel-2: #060608;
+  --panel-3: #1b1b22;
+  --border: rgba(255, 255, 255, 0.07);
+  --border-2: rgba(255, 255, 255, 0.12);
+  --text: #ffffff;
+  --text-2: #eaeaea;
+  --muted: #8c8c8c;
+  --faint: #686868;
+  --track: rgba(255, 255, 255, 0.08);
+  --sidebar: #08080b;
+  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
+}
+
+/* ---- light ---- */
+.dash-root[data-theme="light"] {
+  color-scheme: light;
+  --bg: #eef1f7;
+  --panel: #ffffff;
+  --panel-2: #f5f7fb;
+  --panel-3: #eef1f7;
+  --border: rgba(15, 23, 42, 0.08);
+  --border-2: rgba(15, 23, 42, 0.14);
+  --text: #0c0e14;
+  --text-2: #1f2430;
+  --muted: #5b6472;
+  --faint: #97a0b0;
+  --track: rgba(15, 23, 42, 0.07);
+  --sidebar: #ffffff;
+  --shadow: 0 18px 40px -26px rgba(15, 23, 42, 0.25);
+  --card-grad: var(--panel);
+}
+
+.dash-root * {
+  box-sizing: border-box;
+}
+
+.dash-root h1,
+.dash-root h2,
+.dash-root h3,
+.dash-root h4 {
+  margin: 0;
+}
+
+/* ---- sidebar ---- */
+.dash-sidebar {
+  width: 214px;
+  flex: 0 0 214px;
+  background: var(--sidebar);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: sticky;
+  top: 0;
+}
+
+.dash-brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 18px 18px 14px;
+}
+
+.dash-brand img {
+  height: 44px;
+  width: auto;
+}
+
+.dash-brand .bk {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.dash-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 12px 12px;
+}
+
+.dash-nav::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dash-nav::-webkit-scrollbar-thumb {
+  background: var(--border-2);
+  border-radius: 99px;
+}
+
+.nav-group {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--faint);
+  padding: 14px 10px 6px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  width: 100%;
+  padding: 8.5px 10px;
+  border-radius: 9px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  transition: background 0.14s, color 0.14s;
+}
+
+.nav-item:hover {
+  background: var(--panel-2);
+  color: var(--text-2);
+}
+
+.nav-item.active {
+  background: var(--orange);
+  color: #fff;
+  font-weight: 600;
+}
+
+.nav-item.active svg {
+  color: #fff;
+}
+
+.nav-item svg {
+  color: var(--faint);
+  flex: 0 0 auto;
+}
+
+.nav-item:hover svg {
+  color: var(--text-2);
+}
+
+.fig-ic {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: inherit;
+}
+
+.fig-ic svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.dash-sidebar .sb-foot {
+  border-top: 1px solid var(--border);
+  padding: 10px 12px;
+}
+
+.sb-user {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 10px;
+}
+
+.sb-user:hover {
+  background: var(--panel-2);
+}
+
+.sb-user .av {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex: 0 0 30px;
+}
+
+.sb-user .nm {
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.sb-user .rl {
+  font-size: 11px;
+  color: var(--faint);
+}
+
+.sb-user .nm,
+.sb-user .rl {
+  max-width: 130px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sb-user-menu {
+  position: absolute;
+  bottom: 56px;
+  left: 12px;
+  right: 12px;
+  z-index: 30;
+  padding: 6px;
+  border-radius: 12px;
+  border: 1px solid var(--border-2);
+  background: var(--panel);
+  box-shadow: var(--shadow), 0 8px 30px -12px rgba(0, 0, 0, 0.55);
+  animation: ds-rise 0.14s ease;
+}
+
+.sb-user-menu button {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 9px 10px;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  color: var(--text-2);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.sb-user-menu button:hover {
+  background: var(--panel-2);
+}
+
+.sb-user-menu button.danger {
+  color: var(--red, #ef4444);
+}
+
+/* ---- main ---- */
+.dash-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-topbar {
+  height: 84px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: color-mix(in srgb, var(--bg) 80%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.dash-title h1 {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.dash-title p {
+  font-size: 12.5px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.top-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ic-btn {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--muted);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.ic-btn:hover {
+  color: var(--text);
+  border-color: var(--border-2);
+}
+
+.top-user {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 5px 8px 5px 5px;
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  background: var(--panel);
+  cursor: pointer;
+}
+
+.top-user .av {
+  width: 30px;
+  height: 30px;
+  border-radius: 99px;
+  object-fit: cover;
+}
+
+.top-user .nm {
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.top-user .rl {
+  font-size: 10.5px;
+  color: var(--faint);
+}
+
+.dash-content {
+  padding: 22px 28px 40px;
+  width: 100%;
+}
+
+.sec-title {
+  font-size: 15px;
+  font-weight: 700;
+  margin: 6px 0 14px;
+}
+
+/* Host for @insignia/iios-messaging-ui: a fixed-height card that maps the SDK's --miu-* tokens
      onto the CRM design system, so the drop-in SDK matches the rest of the app. */
-  .dash-root .miu-host { height: 620px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
-  .dash-root .miu-host .miu-messenger,
-  .dash-root .miu-host .miu-inbox {
-    --miu-bg: var(--bg);
-    --miu-panel: var(--panel);
-    --miu-panel-2: var(--panel-2);
-    --miu-border: var(--border);
-    --miu-text: var(--text);
-    --miu-muted: var(--muted);
-    --miu-accent: var(--orange);
-    --miu-accent-text: #1a1206;
+.dash-root .miu-host {
+  height: 620px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.dash-root .miu-host .miu-messenger,
+.dash-root .miu-host .miu-inbox {
+  --miu-bg: var(--bg);
+  --miu-panel: var(--panel);
+  --miu-panel-2: var(--panel-2);
+  --miu-border: var(--border);
+  --miu-text: var(--text);
+  --miu-muted: var(--muted);
+  --miu-accent: var(--orange);
+  --miu-accent-text: #1a1206;
+}
+
+/* ---- grid helpers ---- */
+.grid {
+  display: grid;
+  gap: 16px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+}
+
+.between {
+  justify-content: space-between;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.gap-3 {
+  gap: 12px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.faint {
+  color: var(--faint);
+}
+
+/* ---- card ---- */
+.dcard {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+}
+
+.dcard-pad-0 {
+  padding: 0;
+}
+
+.card-h {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.card-h h3 {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.card-sub {
+  font-size: 11.5px;
+  color: var(--faint);
+}
+
+/* ---- stat bits ---- */
+.stat-ic {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+}
+
+.big-val {
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.mid-val {
+  font-size: 21px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.lbl {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 22px;
+  padding: 0 9px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.pill-orange {
+  background: color-mix(in srgb, var(--orange) 18%, transparent);
+  color: var(--orange);
+}
+
+.pill-green {
+  background: color-mix(in srgb, var(--green) 18%, transparent);
+  color: var(--green);
+}
+
+.pill-blue {
+  background: color-mix(in srgb, var(--blue) 20%, transparent);
+  color: #6f9bff;
+}
+
+.pill-cyan {
+  background: color-mix(in srgb, var(--cyan) 18%, transparent);
+  color: var(--cyan);
+}
+
+.pill-red {
+  background: color-mix(in srgb, var(--red) 18%, transparent);
+  color: var(--red);
+}
+
+/* small stat card (right 2x2) */
+.mini-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 14px 15px;
+}
+
+.mini-card .top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+/* progress */
+.bar {
+  height: 8px;
+  border-radius: 99px;
+  background: var(--track);
+  overflow: hidden;
+}
+
+.bar>span {
+  display: block;
+  height: 100%;
+  border-radius: 99px;
+}
+
+/* legend dot */
+.ldot {
+  width: 8px;
+  height: 8px;
+  border-radius: 99px;
+  display: inline-block;
+}
+
+/* pipeline rows */
+.pl-row {
+  display: grid;
+  grid-template-columns: 92px 1fr 22px;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.pl-row .lab {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.pl-row .n {
+  font-size: 12px;
+  font-weight: 700;
+  text-align: right;
+}
+
+/* weather */
+.wx-hours {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  margin-top: 14px;
+}
+
+.wx-hr {
+  text-align: center;
+  flex: 1;
+}
+
+.wx-hr .t {
+  font-size: 11px;
+  color: var(--faint);
+}
+
+.wx-hr .te {
+  font-size: 13px;
+  font-weight: 700;
+  margin-top: 6px;
+}
+
+/* reps */
+.rep-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.rep-row:last-child {
+  border-bottom: 0;
+}
+
+.rep-row .rk {
+  width: 22px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--faint);
+}
+
+.rep-row .av {
+  width: 34px;
+  height: 34px;
+  border-radius: 99px;
+  object-fit: cover;
+}
+
+.rep-row .nm {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.rep-row .em {
+  font-size: 11px;
+  color: var(--faint);
+}
+
+.rep-row .amt {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--green);
+}
+
+.link-btn {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--orange);
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+/* ---- charts ---- */
+.chart {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+
+.chart-y {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-size: 9px;
+  color: var(--faint);
+  padding-bottom: 16px;
+  text-align: right;
+  min-width: 18px;
+}
+
+.chart-plot {
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.bar-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+.bar-group .bars {
+  height: calc(100% - 20px);
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 3px;
+}
+
+.vbar {
+  border-radius: 3px;
+  align-self: flex-end;
+  transition: height 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.bar-x {
+  font-size: 10px;
+  color: var(--faint);
+  margin-top: 7px;
+}
+
+.spark {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.spark>span {
+  border-radius: 3px;
+  transition: height 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.donut {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+
+.donut-c {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+
+.donut-c .dv {
+  font-size: 30px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.donut-c .dl {
+  font-size: 11px;
+  color: var(--faint);
+}
+
+.gauge {
+  position: relative;
+}
+
+.gauge-c {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+
+.gauge-c .gv {
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.gauge-c .gl {
+  font-size: 10px;
+  color: var(--faint);
+}
+
+/* responsive */
+@media (max-width: 1100px) {
+  .dash-sidebar {
+    display: none;
   }
-  
-  /* ---- grid helpers ---- */
-  .grid { display: grid; gap: 16px; }
-  .row { display: flex; align-items: center; }
-  .between { justify-content: space-between; }
-  .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
-  .muted { color: var(--muted); } .faint { color: var(--faint); }
-  
-  /* ---- card ---- */
-  .dcard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
-  .dcard-pad-0 { padding: 0; }
-  .card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
-  .card-h h3 { font-size: 14px; font-weight: 600; }
-  .card-sub { font-size: 11.5px; color: var(--faint); }
-  
-  /* ---- stat bits ---- */
-  .stat-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
-  .big-val { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
-  .mid-val { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
-  .lbl { font-size: 12px; color: var(--muted); }
-  .pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 600; }
-  .pill-orange { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
-  .pill-green { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
-  .pill-blue { background: color-mix(in srgb, var(--blue) 20%, transparent); color: #6f9bff; }
-  .pill-cyan { background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
-  .pill-red { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
-  
-  /* small stat card (right 2x2) */
-  .mini-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 15px; }
-  .mini-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
-  
-  /* progress */
-  .bar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
-  .bar > span { display: block; height: 100%; border-radius: 99px; }
-  
-  /* legend dot */
-  .ldot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
-  
-  /* pipeline rows */
-  .pl-row { display: grid; grid-template-columns: 92px 1fr 22px; align-items: center; gap: 10px; margin-bottom: 10px; }
-  .pl-row .lab { font-size: 12px; color: var(--muted); }
-  .pl-row .n { font-size: 12px; font-weight: 700; text-align: right; }
-  
-  /* weather */
-  .wx-hours { display: flex; justify-content: space-between; gap: 6px; margin-top: 14px; }
-  .wx-hr { text-align: center; flex: 1; }
-  .wx-hr .t { font-size: 11px; color: var(--faint); }
-  .wx-hr .te { font-size: 13px; font-weight: 700; margin-top: 6px; }
-  
-  /* reps */
-  .rep-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
-  .rep-row:last-child { border-bottom: 0; }
-  .rep-row .rk { width: 22px; font-size: 12px; font-weight: 700; color: var(--faint); }
-  .rep-row .av { width: 34px; height: 34px; border-radius: 99px; object-fit: cover; }
-  .rep-row .nm { font-size: 13px; font-weight: 600; }
-  .rep-row .em { font-size: 11px; color: var(--faint); }
-  .rep-row .amt { font-size: 13px; font-weight: 700; color: var(--green); }
-  
-  .link-btn { font-size: 12px; font-weight: 600; color: var(--orange); background: none; border: 0; cursor: pointer; }
-  
-  /* ---- charts ---- */
-  .chart { display: flex; gap: 8px; width: 100%; }
-  .chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; color: var(--faint); padding-bottom: 16px; text-align: right; min-width: 18px; }
-  .chart-plot { flex: 1; display: flex; align-items: flex-end; gap: 2px; }
-  .bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
-  .bar-group .bars { height: calc(100% - 20px); width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
-  .vbar { border-radius: 3px; align-self: flex-end; transition: height 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
-  .bar-x { font-size: 10px; color: var(--faint); margin-top: 7px; }
-  
-  .spark { display: flex; align-items: flex-end; gap: 4px; }
-  .spark > span { border-radius: 3px; transition: height 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
-  
-  .donut { position: relative; display: grid; place-items: center; }
-  .donut-c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
-  .donut-c .dv { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
-  .donut-c .dl { font-size: 11px; color: var(--faint); }
-  
-  .gauge { position: relative; }
-  .gauge-c { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
-  .gauge-c .gv { font-size: 18px; font-weight: 800; }
-  .gauge-c .gl { font-size: 10px; color: var(--faint); }
-  
-  /* responsive */
-  @media (max-width: 1100px) { .dash-sidebar { display: none; } }
-  @media (max-width: 760px) { .dash-content { padding: 16px; } }
-  
-  /* =========================================================================
+}
+
+@media (max-width: 760px) {
+  .dash-content {
+    padding: 16px;
+  }
+}
+
+/* =========================================================================
      ACCOUNT MODULE — Profile · Support · Rules design system
      All components consume the .dash-root tokens above, so they theme with
      [data-theme] automatically. Prefix-free utility names are scoped under
      .dash-root to avoid collisions with the rest of the app.
      ========================================================================= */
-  
-  .dash-root {
-    --ring: color-mix(in srgb, var(--orange) 35%, transparent);
-    --grad-brand: rgba(253, 169, 19, 0.92);
-    --card-grad: #060608;
-    --card-hi: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
-    --glow-orange: 0 10px 28px -12px color-mix(in srgb, var(--orange) 60%, transparent);
-  }
-  /* ambient depth behind the content */
-  .dash-root .dash-content { position: relative; }
-  .dash-root .dash-content::before {
-    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
-    background:
-      radial-gradient(55% 45% at 100% 0%, color-mix(in srgb, var(--orange) 7%, transparent), transparent 70%),
-      radial-gradient(45% 40% at 0% 100%, color-mix(in srgb, var(--blue) 6%, transparent), transparent 70%);
-  }
-  .dash-root .view { position: relative; z-index: 1; }
-  
-  /* ---- sidebar (premium nav) ---- */
-  .dash-root .dash-sidebar { width: 236px; flex: 0 0 236px; background: var(--sidebar); }
-  .dash-root .dash-brand { padding: 20px 18px 16px; }
-  .dash-root .dash-brand .bk { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; }
-  .dash-root .dash-nav { padding: 4px 12px 14px; }
-  .dash-root .nav-section { margin-bottom: 4px; }
-  .dash-root .nav-section + .nav-section { border-top: 1px solid var(--border); padding-top: 4px; }
-  .dash-root .nav-group { 
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    color: var(--faint);
-    padding: 13px 10px 11px;
-    font-size: 14px;
-    font-weight: 700;
-   }
-  .dash-root .nav-item { cursor: pointer;
-    width: 100%;
-    color: var(--text);
-    text-align: left;
-    background: none;
-    border: 0;
-    border-radius: 10px;
-    align-items: center;
-    gap: 11px;
-    padding: 15px 12px;
-    font-family: inherit;
-    font-size: 15px;
-    font-weight: 500;
-    transition: background .14s, color .14s, transform .12s;
-    display: flex; }
-  .dash-root .nav-item svg { color: var(--text); flex: 0 0 auto; transition: color 0.14s; }
-  .dash-root .nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .nav-item:hover { background: var(--panel-2); color: var(--text); }
-  .dash-root .nav-item:hover svg { color: var(--text-2); }
-  .dash-root .nav-item.active { 
-    background: var(--grad-brand);
-    color: #fff;
-    font-weight: 700;
-    background: linear-gradient(90deg, rgba(17, 9, 9, 0) 0%, rgba(253, 169, 19, 0.21) 100%);
-   }
-  .dash-root .nav-item.active svg { color: #fff; }
 
-  /* Light theme: the faint orange gradient + white text is invisible on a
+.dash-root {
+  --ring: color-mix(in srgb, var(--orange) 35%, transparent);
+  --grad-brand: rgba(253, 169, 19, 0.92);
+  --card-grad: #060608;
+  --card-hi: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
+  --glow-orange: 0 10px 28px -12px color-mix(in srgb, var(--orange) 60%, transparent);
+}
+
+/* ambient depth behind the content */
+.dash-root .dash-content {
+  position: relative;
+}
+
+.dash-root .dash-content::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(55% 45% at 100% 0%, color-mix(in srgb, var(--orange) 7%, transparent), transparent 70%),
+    radial-gradient(45% 40% at 0% 100%, color-mix(in srgb, var(--blue) 6%, transparent), transparent 70%);
+}
+
+.dash-root .view {
+  position: relative;
+  z-index: 1;
+}
+
+/* ---- sidebar (premium nav) ---- */
+.dash-root .dash-sidebar {
+  width: 236px;
+  flex: 0 0 236px;
+  background: var(--sidebar);
+}
+
+.dash-root .dash-brand {
+  padding: 20px 18px 16px;
+}
+
+.dash-root .dash-brand .bk {
+  font-size: 15.5px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.dash-root .dash-nav {
+  padding: 4px 12px 14px;
+}
+
+.dash-root .nav-section {
+  margin-bottom: 4px;
+}
+
+.dash-root .nav-section+.nav-section {
+  border-top: 1px solid var(--border);
+  padding-top: 4px;
+}
+
+.dash-root .nav-group {
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--faint);
+  padding: 13px 10px 11px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.dash-root .nav-item {
+  cursor: pointer;
+  width: 100%;
+  color: var(--text);
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: 10px;
+  align-items: center;
+  gap: 11px;
+  padding: 15px 12px;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  transition: background .14s, color .14s, transform .12s;
+  display: flex;
+}
+
+.dash-root .nav-item svg {
+  color: var(--text);
+  flex: 0 0 auto;
+  transition: color 0.14s;
+}
+
+.dash-root .nav-item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .nav-item:hover {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+.dash-root .nav-item:hover svg {
+  color: var(--text-2);
+}
+
+.dash-root .nav-item.active {
+  background: var(--grad-brand);
+  color: #fff;
+  font-weight: 700;
+  background: linear-gradient(90deg, rgba(17, 9, 9, 0) 0%, rgba(253, 169, 19, 0.21) 100%);
+}
+
+.dash-root .nav-item.active svg {
+  color: #fff;
+}
+
+/* Light theme: the faint orange gradient + white text is invisible on a
      white sidebar, so use readable orange text/icon instead. */
-  .dash-root[data-theme="light"] .nav-item.active {
-    background: linear-gradient(90deg, rgba(253, 169, 19, 0) 0%, rgba(253, 169, 19, 0.16) 100%);
-    color: var(--orange);
+.dash-root[data-theme="light"] .nav-item.active {
+  background: linear-gradient(90deg, rgba(253, 169, 19, 0) 0%, rgba(253, 169, 19, 0.16) 100%);
+  color: var(--orange);
+}
+
+.dash-root[data-theme="light"] .nav-item.active svg {
+  color: var(--orange);
+}
+
+/* ---- coming-soon placeholder ---- */
+.dash-root .coming-soon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 56px 24px;
+  gap: 8px;
+}
+
+.dash-root .coming-soon-ic {
+  width: 76px;
+  height: 76px;
+  border-radius: 22px;
+  display: grid;
+  place-items: center;
+  color: var(--orange);
+  background: color-mix(in srgb, var(--orange) 12%, transparent);
+  margin-bottom: 8px;
+}
+
+.dash-root .coming-soon h3 {
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.dash-root .coming-soon p {
+  font-size: 13px;
+  color: var(--muted);
+  max-width: 440px;
+  line-height: 1.55;
+}
+
+.dash-root .coming-soon-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 14px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* ---- animations ---- */
+@keyframes ds-fade {
+  from {
+    opacity: 0;
   }
-  .dash-root[data-theme="light"] .nav-item.active svg { color: var(--orange); }
 
-  /* ---- coming-soon placeholder ---- */
-  .dash-root .coming-soon { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; gap: 8px; }
-  .dash-root .coming-soon-ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); margin-bottom: 8px; }
-  .dash-root .coming-soon h3 { font-size: 18px; font-weight: 800; }
-  .dash-root .coming-soon p { font-size: 13px; color: var(--muted); max-width: 440px; line-height: 1.55; }
-  .dash-root .coming-soon-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
-  
-  /* ---- animations ---- */
-  @keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
-  @keyframes ds-pop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
-  @keyframes ds-slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
-  @keyframes ds-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
-  @keyframes ds-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
-  @keyframes ds-radar { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }
-  @keyframes ds-bar { from { width: 0; } }
-  
-  .dash-root .view { animation: ds-fade 0.3s ease; }
-  .dash-root .view-body { animation: ds-rise 0.32s ease; }
-  
-  /* ---- generic card / layout ---- */
-  .dash-root .card { background: var(--card-grad); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--card-hi), 0 1px 2px rgba(0,0,0,0.18); }
-  .dash-root .card-muted { background: var(--panel-2); }
-  .dash-root .card-pad-0 { padding: 0; overflow: hidden; }
-  .dash-root .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
-  .dash-root .card-head.pad { padding: 18px 20px 0; margin-bottom: 14px; }
-  .dash-root .card-head h3 { font-size: 15px; font-weight: 700; }
-  .dash-root .card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
-  .dash-root .card-stack { display: flex; flex-direction: column; gap: 16px; }
-  .dash-root .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
-  .dash-root .grid-side { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
-  .dash-root .consent-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
-  .dash-root .muted-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); margin-top: 12px; }
-  .dash-root .muted-note svg { flex: 0 0 auto; }
-  
-  /* ---- PageHead ---- */
-  .dash-root .ds-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
-  .dash-root .ds-pagehead-l { display: flex; gap: 14px; align-items: center; }
-  .dash-root .ds-pagehead-ic { width: 52px; height: 52px; border-radius: 16px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--grad-brand); box-shadow: var(--glow-orange); }
-  .dash-root .ds-pagehead h1 { font-size: 24px; }
-  .dash-root .ds-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }
-  .dash-root .ds-pagehead h1 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
-  .dash-root .ds-pagehead p { font-size: 13px; color: var(--muted); margin-top: 3px; }
-  .dash-root .ds-pagehead-actions { display: flex; gap: 10px; align-items: center; }
-  
-  /* ---- Avatar ---- */
-  .dash-root .ds-avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; }
-  .dash-root .ds-avatar-bg { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 700; letter-spacing: -0.01em; }
-  .dash-root .ds-avatar-dot { position: absolute; right: -1px; bottom: -1px; border-radius: 50%; border: 2px solid var(--panel); }
-  .dash-root .status-online { background: var(--green); }
-  .dash-root .status-away { background: var(--orange); }
-  .dash-root .status-busy { background: var(--red); }
-  .dash-root .status-offline { background: var(--faint); }
-  
-  /* ---- Pill ---- */
-  .dash-root .ds-pill { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 10px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }
-  .dash-root .ds-pill.tone-muted { background: var(--panel-3); color: var(--muted); }
-  .dash-root .ds-pill.tone-green { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
-  .dash-root .ds-pill.tone-orange { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
-  .dash-root .ds-pill.tone-blue { background: color-mix(in srgb, var(--blue) 18%, transparent); color: #6f9bff; }
-  .dash-root .ds-pill.tone-purple { background: color-mix(in srgb, var(--purple) 18%, transparent); color: #b07bf2; }
-  .dash-root .ds-pill.tone-cyan { background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan); }
-  .dash-root .ds-pill.tone-red { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
-  .dash-root .ds-pill svg { flex: 0 0 auto; }
-  
-  .dash-root .ds-statusdot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
-  
-  /* ---- Toggle ---- */
-  .dash-root .ds-toggle { width: 40px; height: 23px; border-radius: 99px; border: 0; background: var(--track); position: relative; cursor: pointer; transition: background 0.18s; flex: 0 0 auto; padding: 0; }
-  .dash-root .ds-toggle .knob { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
-  .dash-root .ds-toggle.on { background: var(--orange); }
-  .dash-root .ds-toggle.on .knob { transform: translateX(17px); }
-  .dash-root .ds-toggle.disabled { opacity: 0.45; cursor: not-allowed; }
-  
-  /* ---- Field / inputs ---- */
-  .dash-root .ds-field { display: block; margin-bottom: 14px; }
-  .dash-root .ds-field-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
-  .dash-root .req { color: var(--red); font-style: normal; margin-left: 3px; }
-  .dash-root .ds-field-hint { display: block; font-size: 11.5px; color: var(--faint); margin-top: 6px; line-height: 1.4; }
-  .dash-root .ds-field-err { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--red); margin-top: 6px; }
-  .dash-root .ds-input, .dash-root .ds-select, .dash-root .ds-textarea {
-    width: 100%; height: 42px; padding: 0 13px; border-radius: 11px; border: 1px solid var(--border-2);
-    background: var(--panel-2); color: var(--text); font-family: inherit; font-size: 13.5px; outline: none; transition: border-color 0.14s, box-shadow 0.14s;
+  to {
+    opacity: 1;
   }
-  .dash-root .ds-textarea { height: auto; padding: 11px 13px; resize: vertical; line-height: 1.5; }
-  .dash-root .ds-select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
-  .dash-root .ds-select option { background: var(--panel); color: var(--text); }
-  .dash-root .ds-input:focus, .dash-root .ds-select:focus, .dash-root .ds-textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--ring); }
-  .dash-root .ds-input.flush { border: 0; background: none; box-shadow: none; padding: 0 4px; height: 38px; }
-  .dash-root .ds-input.flush:focus { box-shadow: none; }
-  .dash-root .ds-input::placeholder, .dash-root .ds-textarea::placeholder { color: var(--faint); }
-  
-  /* ---- Buttons ---- */
-  .dash-root .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid transparent; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.14s; white-space: nowrap; }
-  .dash-root .ds-btn.s-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 9px; }
-  .dash-root .ds-btn.full { width: 100%; }
-  .dash-root .ds-btn:disabled { opacity: 0.45; cursor: not-allowed; }
-  .dash-root .ds-btn.v-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--orange) 75%, transparent); }
-  .dash-root .ds-btn.v-primary:not(:disabled):hover { filter: brightness(1.05); transform: translateY(-1px); }
-  .dash-root .ds-btn.v-ghost { background: transparent; color: var(--muted); }
-  .dash-root .ds-btn.v-ghost:hover { background: var(--panel-2); color: var(--text); }
-  .dash-root .ds-btn.v-soft { background: var(--panel-3); color: var(--text); }
-  .dash-root .ds-btn.v-soft:hover { background: var(--border-2); }
-  .dash-root .ds-btn.v-outline { background: transparent; border-color: var(--border-2); color: var(--text-2); }
-  .dash-root .ds-btn.v-outline:hover { border-color: var(--orange); color: var(--orange); }
-  .dash-root .ds-btn.v-danger { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
-  .dash-root .ds-btn.v-danger:hover { background: var(--red); color: #fff; }
-  
-  .dash-root .ds-iconbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: 0.14s; flex: 0 0 auto; }
-  .dash-root .ds-iconbtn:hover { color: var(--text); border-color: var(--border-2); }
-  .dash-root .ds-iconbtn.sm { width: 28px; height: 28px; border-radius: 8px; }
-  .dash-root .link-inline { background: none; border: 0; color: var(--orange); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
-  
-  /* ---- Segmented / Tabs ---- */
-  .dash-root .ds-segmented { display: inline-flex; gap: 4px; padding: 5px; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 14px; flex-wrap: wrap; margin-bottom: 20px; }
-  .dash-root .ds-segmented .seg { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: 0.14s; }
-  .dash-root .ds-segmented .seg:hover { color: var(--text); background: color-mix(in srgb, var(--orange) 9%, transparent); }
-  .dash-root .ds-segmented .seg.active { background: rgba(253, 169, 19, 0.92); color: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--orange) 75%, transparent); }
-  .dash-root .ds-segmented .seg.active:hover { background: rgba(253, 169, 19, 1); color: #fff; }
-  .dash-root .ds-segmented .seg.active svg { color: #fff; }
-  
-  .dash-root .ds-tabs { display: flex; gap: 4px; padding: 5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; margin: 18px 0 22px; overflow-x: auto; }
-  .dash-root .ds-tabs::-webkit-scrollbar { height: 0; }
-  .dash-root .ds-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: 0.16s; }
-  .dash-root .ds-tab:hover { color: var(--text-2); background: color-mix(in srgb, var(--panel) 55%, transparent); }
-  .dash-root .ds-tab.active { color: var(--orange); background: var(--panel); box-shadow: var(--card-hi), 0 4px 14px -8px rgba(0,0,0,0.5); }
-  .dash-root .ds-tab-badge { background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 99px; display: inline-grid; place-items: center; padding: 0 4px; }
-  
-  /* ---- OTP ---- */
-  .dash-root .ds-otp { display: flex; gap: 9px; }
-  .dash-root .ds-otp-box { width: 46px; height: 54px; text-align: center; font-size: 22px; font-weight: 700; border-radius: 12px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text); outline: none; transition: 0.14s; }
-  .dash-root .ds-otp-box:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--ring); }
-  .dash-root .otp-wrap { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
-  
-  /* ---- Modal ---- */
-  .dash-root .ds-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(2,2,6,0.6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: ds-fade 0.18s ease; }
-  .dash-root .ds-modal { width: 100%; background: var(--panel); border: 1px solid var(--border-2); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7); animation: ds-pop 0.22s cubic-bezier(0.2,0.7,0.2,1); max-height: 90vh; display: flex; flex-direction: column; }
-  .dash-root .ds-modal.size-sm { max-width: 400px; }
-  .dash-root .ds-modal.size-md { max-width: 540px; }
-  .dash-root .ds-modal.size-lg { max-width: 760px; }
-  .dash-root .ds-modal.size-xl { max-width: 980px; }
-  .dash-root .ds-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--border); }
-  .dash-root .ds-modal-head-l { display: flex; gap: 12px; align-items: center; }
-  .dash-root .ds-modal-head-r { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
-  .dash-root .ds-modal-ic { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); }
-  .dash-root .ds-modal-head h3 { font-size: 16px; font-weight: 700; }
-  .dash-root .ds-modal-head p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
-  .dash-root .ds-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
-  .dash-root .ds-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); }
-  
-  /* ---- Toasts ---- */
-  .dash-root .ds-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 40px); }
-  .dash-root .ds-toast { display: flex; gap: 11px; padding: 13px 14px; border-radius: 13px; background: var(--panel); border: 1px solid var(--border-2); box-shadow: var(--shadow); animation: ds-slide-in 0.26s ease; }
-  .dash-root .ds-toast.tone-success { border-left: 3px solid var(--green); } .dash-root .ds-toast.tone-success > svg { color: var(--green); }
-  .dash-root .ds-toast.tone-info { border-left: 3px solid var(--blue); } .dash-root .ds-toast.tone-info > svg { color: #6f9bff; }
-  .dash-root .ds-toast.tone-error { border-left: 3px solid var(--red); } .dash-root .ds-toast.tone-error > svg { color: var(--red); }
-  .dash-root .ds-toast > svg { flex: 0 0 auto; margin-top: 1px; }
-  .dash-root .ds-toast-body { flex: 1; min-width: 0; }
-  .dash-root .ds-toast-title { font-size: 13px; font-weight: 600; }
-  .dash-root .ds-toast-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
-  .dash-root .ds-toast-x { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 0; height: 18px; }
-  
-  /* ---- key/value list, callouts ---- */
-  .dash-root .kv-list { display: flex; flex-direction: column; }
-  .dash-root .kv { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
-  .dash-root .kv:last-child { border-bottom: 0; }
-  .dash-root .kv dt { font-size: 12.5px; color: var(--muted); }
-  .dash-root .kv dd { font-size: 13.5px; font-weight: 600; text-align: right; }
-  .dash-root .kv dd.masked { letter-spacing: 0.06em; color: var(--faint); font-weight: 500; }
-  .dash-root .kv dd.kv-edit { display: inline-flex; align-items: center; gap: 8px; }
-  .dash-root .kv-edit-btn { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: 0.14s; }
-  .dash-root .kv-edit-btn:hover { color: var(--orange); border-color: var(--orange); }
-  .dash-root .kv-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--faint); font-weight: 500; }
-  .dash-root .edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-  @media (max-width: 720px) { .dash-root .edit-grid { grid-template-columns: 1fr; } }
-  .dash-root .callout { display: flex; gap: 11px; padding: 13px 14px; border-radius: 13px; margin-bottom: 16px; }
-  .dash-root .callout svg { flex: 0 0 auto; margin-top: 1px; }
-  .dash-root .callout strong { display: block; font-size: 13px; } .dash-root .callout span { font-size: 12px; color: var(--muted); }
-  .dash-root .callout.tone-green { background: color-mix(in srgb, var(--green) 10%, transparent); } .dash-root .callout.tone-green svg { color: var(--green); }
-  .dash-root .callout.tone-orange { background: color-mix(in srgb, var(--orange) 10%, transparent); } .dash-root .callout.tone-orange svg { color: var(--orange); }
-  .dash-root .callout.tone-red { background: color-mix(in srgb, var(--red) 10%, transparent); } .dash-root .callout.tone-red svg { color: var(--red); }
-  
-  /* ---- Profile hero ---- */
-  .dash-root .profile-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 4px; background: linear-gradient(120deg, color-mix(in srgb, var(--orange) 10%, var(--panel)) 0%, var(--panel) 55%); }
-  .dash-root .profile-hero-bg { position: absolute; inset: 0; background: radial-gradient(90% 140% at 100% -10%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 50%), radial-gradient(70% 120% at -5% 110%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 55%); pointer-events: none; }
-  .dash-root .profile-hero-main { display: flex; gap: 20px; align-items: center; position: relative; }
-  .dash-root .profile-hero-avatar { position: relative; border-radius: 24px; box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--orange) 60%, transparent); }
-  .dash-root .profile-hero-cam { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--panel); background: var(--orange); color: #fff; display: grid; place-items: center; cursor: pointer; }
-  .dash-root .profile-hero-name { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
-  .dash-root .verified-badge { color: var(--green); }
-  .dash-root .profile-hero-role { font-size: 13px; color: var(--muted); margin-top: 2px; }
-  .dash-root .profile-hero-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
-  .dash-root .hero-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-2); padding: 5px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
-  .dash-root .hero-chip svg { color: var(--faint); }
-  .dash-root .hero-chip.accent { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 30%, transparent); } .dash-root .hero-chip.accent svg { color: var(--orange); }
-  .dash-root .profile-hero-stats { display: flex; gap: 0; position: relative; }
-  .dash-root .hero-stat { padding: 0 22px; border-left: 1px solid var(--border); }
-  .dash-root .hero-stat:first-child { padding-left: 0; border-left: 0; }
-  .dash-root .hero-stat:last-child { padding-right: 0; }
-  .dash-root .hero-stat-v { font-size: 20px; font-weight: 800; }
-  .dash-root .hero-stat-l { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
-  
-  /* ---- reveal gate ---- */
-  .dash-root .reveal-gate { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px; border-radius: 13px; border: 1px dashed var(--border-2); background: var(--panel-2); margin-bottom: 16px; }
-  .dash-root .reveal-gate-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); flex: 0 0 auto; }
-  .dash-root .reveal-gate-txt { flex: 1; min-width: 140px; } .dash-root .reveal-gate-txt strong { display: block; font-size: 13px; } .dash-root .reveal-gate-txt span { font-size: 12px; color: var(--muted); }
-  .dash-root .reveal-gate-form { display: flex; gap: 8px; } .dash-root .reveal-gate-form .ds-input { width: 140px; }
-  
-  /* ---- KYC ---- */
-  .dash-root .kyc-progress { margin-bottom: 18px; }
-  .dash-root .kyc-progress-bar { height: 9px; border-radius: 99px; background: var(--track); overflow: hidden; }
-  .dash-root .kyc-progress-bar > span { display: block; height: 100%; border-radius: 99px; background: rgba(253, 169, 19, 0.92); transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1); animation: ds-bar 0.6s ease; }
-  .dash-root .kyc-progress-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
-  .dash-root .kyc-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--faint); }
-  .dash-root .kyc-leg.verified { color: var(--green); } .dash-root .kyc-leg.uploaded { color: #6f9bff; } .dash-root .kyc-leg.missing { color: var(--muted); }
-  .dash-root .kyc-slots { display: flex; flex-direction: column; gap: 12px; }
-  .dash-root .kyc-slot { display: flex; gap: 12px; padding: 14px; border-radius: 13px; border: 1px solid var(--border); background: var(--panel-2); }
-  .dash-root .kyc-slot.status-verified { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
-  .dash-root .kyc-slot.status-rejected { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
-  .dash-root .kyc-slot-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--panel-3); color: var(--muted); flex: 0 0 auto; }
-  .dash-root .kyc-slot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
-  .dash-root .kyc-slot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-  .dash-root .kyc-slot-title { font-size: 13.5px; font-weight: 600; }
-  .dash-root .kyc-slot-hint { font-size: 11.5px; color: var(--faint); }
-  .dash-root .kyc-drop { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 11px; border: 1px dashed var(--border-2); background: var(--panel); color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: 0.14s; }
-  .dash-root .kyc-drop:hover { border-color: var(--orange); color: var(--orange); }
-  .dash-root .kyc-file { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
-  .dash-root .kyc-file-name { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .kyc-file-note { font-size: 11px; color: var(--faint); }
-  .dash-root .rule-mini { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 9px; }
-  .dash-root .rule-mini li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-2); }
-  .dash-root .rule-mini svg { color: var(--green); flex: 0 0 auto; margin-top: 2px; }
-  .dash-root .kyc-doc-pairs { border-top: 1px solid var(--border); padding-top: 14px; }
-  .dash-root .pair-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
-  
-  /* ---- password meter ---- */
-  .dash-root .pw-meter { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
-  .dash-root .pw-bars { display: flex; gap: 5px; flex: 1; }
-  .dash-root .pw-bars .lvl { flex: 1; height: 6px; border-radius: 99px; background: var(--track); transition: background 0.2s; }
-  .dash-root .pw-bars .lvl-weak { background: var(--red); } .dash-root .pw-bars .lvl-fair { background: var(--orange); }
-  .dash-root .pw-bars .lvl-good { background: var(--yellow); } .dash-root .pw-bars .lvl-strong { background: var(--green); }
-  .dash-root .pw-label { font-size: 12px; font-weight: 700; min-width: 48px; text-align: right; }
-  .dash-root .pw-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-  .dash-root .pw-checks li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--faint); }
-  .dash-root .pw-checks li svg { color: var(--faint); }
-  .dash-root .pw-checks li.ok { color: var(--text-2); } .dash-root .pw-checks li.ok svg { color: var(--green); }
-  
-  /* ---- setting rows ---- */
-  .dash-root .setting-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
-  .dash-root .setting-row:last-of-type { border-bottom: 0; }
-  .dash-root .setting-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); flex: 0 0 auto; }
-  .dash-root .setting-txt { flex: 1; min-width: 0; } .dash-root .setting-title { font-size: 13.5px; font-weight: 600; } .dash-root .setting-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
-  
-  /* ---- notifications matrix ---- */
-  .dash-root .notif-table { display: flex; flex-direction: column; }
-  .dash-root .notif-row { display: grid; grid-template-columns: 1.6fr repeat(4, 70px); align-items: center; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--border); }
-  .dash-root .notif-row.notif-head { border-top: 0; }
-  .dash-root .notif-head span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
-  .dash-root .notif-ch { display: inline-flex; align-items: center; gap: 5px; justify-content: center; }
-  .dash-root .notif-cat-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
-  .dash-root .notif-cat-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
-  .dash-root .lock-ic { color: var(--faint); }
-  
-  /* ---- contact-time windows ---- */
-  .dash-root .time-windows { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 4px; }
-  .dash-root .time-win { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); cursor: pointer; font-family: inherit; text-align: left; transition: 0.14s; position: relative; }
-  .dash-root .time-win svg { position: absolute; right: 11px; top: 11px; }
-  .dash-root .time-win.on { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 9%, transparent); color: var(--text); } .dash-root .time-win.on svg { color: var(--orange); }
-  .dash-root .tw-label { font-size: 13px; font-weight: 600; } .dash-root .tw-range { font-size: 11.5px; color: var(--faint); }
-  
-  /* ---- destinations ---- */
-  .dash-root .dest-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
-  .dash-root .dest-row { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--border); }
-  .dash-root .dest-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-3); color: var(--muted); flex: 0 0 auto; }
-  .dash-root .dest-txt { flex: 1; min-width: 0; } .dash-root .dest-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .dash-root .dest-val { font-size: 12px; color: var(--muted); margin-top: 1px; }
-  
-  /* ---- consent ---- */
-  .dash-root .consent-list { display: flex; flex-direction: column; gap: 4px; }
-  .dash-root .consent-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
-  .dash-root .consent-item:last-child { border-bottom: 0; }
-  .dash-root .consent-item.locked { opacity: 0.85; }
-  .dash-root .consent-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; } .dash-root .consent-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
-  .dash-root .consent-sub { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); animation: ds-rise 0.2s ease; }
-  .dash-root .consent-sub-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 12.5px; }
-  
-  /* ---- devices + timeline ---- */
-  .dash-root .device-list { display: flex; flex-direction: column; gap: 11px; }
-  .dash-root .device-row { display: flex; align-items: center; gap: 13px; padding: 13px; border-radius: 13px; background: var(--panel-2); border: 1px solid var(--border); }
-  .dash-root .device-row.current { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
-  .dash-root .device-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--panel-3); color: var(--muted); flex: 0 0 auto; }
-  .dash-root .device-txt { flex: 1; min-width: 0; }
-  .dash-root .device-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; flex-wrap: wrap; }
-  .dash-root .device-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
-  .dash-root .timeline { display: flex; flex-direction: column; }
-  .dash-root .tl-item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
-  .dash-root .tl-item:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border); }
-  .dash-root .tl-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--panel-3); color: var(--muted); z-index: 1; }
-  .dash-root .tl-dot.ev-password-change { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
-  .dash-root .tl-dot.ev-new-device, .dash-root .tl-dot.ev-awaiting-customer { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
-  .dash-root .tl-dot.ev-resolved, .dash-root .tl-dot.ev-closed { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
-  .dash-root .tl-body { padding-top: 2px; } .dash-root .tl-title { font-size: 13px; font-weight: 600; } .dash-root .tl-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .dash-root .tl-time { font-size: 11px; color: var(--faint); margin-top: 2px; }
-  
-  /* ---- Support: command-center Overview ---- */
-  .dash-root .support-ov { display: flex; flex-direction: column; gap: 16px; }
+}
 
-  .dash-root .sup-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--green) 28%, var(--border)); background: color-mix(in srgb, var(--green) 9%, var(--panel)); flex-wrap: wrap; }
-  .dash-root .sup-status-l { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--green); }
-  .dash-root .sup-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); animation: sup-pulse 1.8s infinite; }
-  .dash-root .sup-status-r { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
-  @keyframes sup-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
+@keyframes ds-pop {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.985);
+  }
 
-  .dash-root .sup-pulse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
-  .dash-root .sup-stat { position: relative; overflow: hidden; display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--card-grad); box-shadow: var(--card-hi); transition: transform 0.16s, border-color 0.16s; }
-  .dash-root .sup-stat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--orange) 40%, var(--border)); }
-  .dash-root .sup-stat-ic { width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: rgba(253, 169, 19, 0.92); box-shadow: var(--glow-orange); }
-  .dash-root .sup-stat-txt b { display: flex; align-items: center; gap: 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
-  .dash-root .sup-stat-txt b svg { color: var(--orange); }
-  .dash-root .sup-stat-txt span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; }
-  .dash-root .sup-stat-live { position: absolute; top: 13px; right: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); animation: sup-pulse 1.8s infinite; }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
 
-  /* hero live-signal rings */
-  .dash-root .bento-chat-sig { position: absolute; right: 34px; top: 26px; width: 10px; height: 10px; pointer-events: none; z-index: 1; }
-  .dash-root .bento-chat-sig span { position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.55); animation: sup-ring 2.6s ease-out infinite; }
-  .dash-root .bento-chat-sig span:nth-child(2) { animation-delay: 0.85s; }
-  .dash-root .bento-chat-sig span:nth-child(3) { animation-delay: 1.7s; }
-  @keyframes sup-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(6.5); opacity: 0; } }
+@keyframes ds-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
 
-  @media (max-width: 1180px) { .dash-root .sup-pulse { grid-template-columns: 1fr 1fr; } }
-  @media (max-width: 560px) { .dash-root .sup-pulse { grid-template-columns: 1fr 1fr; } }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
 
-  /* ---- Support: Bento hub ---- */
+@keyframes ds-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes ds-bounce {
+
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+
+  30% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
+}
+
+@keyframes ds-radar {
+  0% {
+    transform: scale(0.7);
+    opacity: 0.7;
+  }
+
+  100% {
+    transform: scale(2.1);
+    opacity: 0;
+  }
+}
+
+@keyframes ds-bar {
+  from {
+    width: 0;
+  }
+}
+
+.dash-root .view {
+  animation: ds-fade 0.3s ease;
+}
+
+.dash-root .view-body {
+  animation: ds-rise 0.32s ease;
+}
+
+/* ---- generic card / layout ---- */
+.dash-root .card {
+  background: var(--card-grad);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 22px;
+  box-shadow: var(--card-hi), 0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.dash-root .card-muted {
+  background: var(--panel-2);
+}
+
+.dash-root .card-pad-0 {
+  padding: 0;
+  overflow: hidden;
+}
+
+.dash-root .card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.dash-root .card-head.pad {
+  padding: 18px 20px 0;
+  margin-bottom: 14px;
+}
+
+.dash-root .card-head h3 {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.dash-root .card-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 16px;
+}
+
+.dash-root .card-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dash-root .grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  align-items: start;
+}
+
+.dash-root .grid-side {
+  display: grid;
+  grid-template-columns: 1.55fr 1fr;
+  gap: 16px;
+  align-items: start;
+}
+
+.dash-root .consent-cols {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px;
+  align-items: start;
+}
+
+.dash-root .muted-note {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--faint);
+  margin-top: 12px;
+}
+
+.dash-root .muted-note svg {
+  flex: 0 0 auto;
+}
+
+/* ---- PageHead ---- */
+.dash-root .ds-pagehead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+
+.dash-root .ds-pagehead-l {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+
+.dash-root .ds-pagehead-ic {
+  width: 52px;
+  height: 52px;
+  border-radius: 16px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: var(--grad-brand);
+  box-shadow: var(--glow-orange);
+}
+
+.dash-root .ds-pagehead h1 {
+  font-size: 24px;
+}
+
+.dash-root .ds-eyebrow {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--orange);
+  margin-bottom: 3px;
+}
+
+.dash-root .ds-pagehead h1 {
+  font-size: 23px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.dash-root .ds-pagehead p {
+  font-size: 13px;
+  color: var(--muted);
+  margin-top: 3px;
+}
+
+.dash-root .ds-pagehead-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+/* ---- Avatar ---- */
+.dash-root .ds-avatar {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+}
+
+.dash-root .ds-avatar-bg {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.dash-root .ds-avatar-dot {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  border-radius: 50%;
+  border: 2px solid var(--panel);
+}
+
+.dash-root .status-online {
+  background: var(--green);
+}
+
+.dash-root .status-away {
+  background: var(--orange);
+}
+
+.dash-root .status-busy {
+  background: var(--red);
+}
+
+.dash-root .status-offline {
+  background: var(--faint);
+}
+
+/* ---- Pill ---- */
+.dash-root .ds-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 23px;
+  padding: 0 10px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.dash-root .ds-pill.tone-muted {
+  background: var(--panel-3);
+  color: var(--muted);
+}
+
+.dash-root .ds-pill.tone-green {
+  background: color-mix(in srgb, var(--green) 16%, transparent);
+  color: var(--green);
+}
+
+.dash-root .ds-pill.tone-orange {
+  background: color-mix(in srgb, var(--orange) 16%, transparent);
+  color: var(--orange);
+}
+
+.dash-root .ds-pill.tone-blue {
+  background: color-mix(in srgb, var(--blue) 18%, transparent);
+  color: #6f9bff;
+}
+
+.dash-root .ds-pill.tone-purple {
+  background: color-mix(in srgb, var(--purple) 18%, transparent);
+  color: #b07bf2;
+}
+
+.dash-root .ds-pill.tone-cyan {
+  background: color-mix(in srgb, var(--cyan) 16%, transparent);
+  color: var(--cyan);
+}
+
+.dash-root .ds-pill.tone-red {
+  background: color-mix(in srgb, var(--red) 16%, transparent);
+  color: var(--red);
+}
+
+.dash-root .ds-pill svg {
+  flex: 0 0 auto;
+}
+
+.dash-root .ds-statusdot {
+  width: 8px;
+  height: 8px;
+  border-radius: 99px;
+  display: inline-block;
+}
+
+/* ---- Toggle ---- */
+.dash-root .ds-toggle {
+  width: 40px;
+  height: 23px;
+  border-radius: 99px;
+  border: 0;
+  background: var(--track);
+  position: relative;
+  cursor: pointer;
+  transition: background 0.18s;
+  flex: 0 0 auto;
+  padding: 0;
+}
+
+.dash-root .ds-toggle .knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.18s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.dash-root .ds-toggle.on {
+  background: var(--orange);
+}
+
+.dash-root .ds-toggle.on .knob {
+  transform: translateX(17px);
+}
+
+.dash-root .ds-toggle.disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* ---- Field / inputs ---- */
+.dash-root .ds-field {
+  display: block;
+  margin-bottom: 14px;
+}
+
+.dash-root .ds-field-lbl {
+  display: block;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text-2);
+  margin-bottom: 7px;
+}
+
+.dash-root .req {
+  color: var(--red);
+  font-style: normal;
+  margin-left: 3px;
+}
+
+.dash-root .ds-field-hint {
+  display: block;
+  font-size: 11.5px;
+  color: var(--faint);
+  margin-top: 6px;
+  line-height: 1.4;
+}
+
+.dash-root .ds-field-err {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11.5px;
+  color: var(--red);
+  margin-top: 6px;
+}
+
+.dash-root .ds-input,
+.dash-root .ds-select,
+.dash-root .ds-textarea {
+  width: 100%;
+  height: 42px;
+  padding: 0 13px;
+  border-radius: 11px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13.5px;
+  outline: none;
+  transition: border-color 0.14s, box-shadow 0.14s;
+}
+
+.dash-root .ds-textarea {
+  height: auto;
+  padding: 11px 13px;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+.dash-root .ds-select {
+  appearance: none;
+  cursor: pointer;
+  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 34px;
+}
+
+.dash-root .ds-select option {
+  background: var(--panel);
+  color: var(--text);
+}
+
+.dash-root .ds-input:focus,
+.dash-root .ds-select:focus,
+.dash-root .ds-textarea:focus {
+  border-color: var(--orange);
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+.dash-root .ds-input.flush {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  padding: 0 4px;
+  height: 38px;
+}
+
+.dash-root .ds-input.flush:focus {
+  box-shadow: none;
+}
+
+.dash-root .ds-input::placeholder,
+.dash-root .ds-textarea::placeholder {
+  color: var(--faint);
+}
+
+/* ---- Buttons ---- */
+.dash-root .ds-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  height: 40px;
+  padding: 0 16px;
+  border-radius: 11px;
+  border: 1px solid transparent;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.14s;
+  white-space: nowrap;
+}
+
+.dash-root .ds-btn.s-sm {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 12px;
+  border-radius: 9px;
+}
+
+.dash-root .ds-btn.full {
+  width: 100%;
+}
+
+.dash-root .ds-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.dash-root .ds-btn.v-primary {
+  background: var(--grad-brand);
+  color: #fff;
+  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--orange) 75%, transparent);
+}
+
+.dash-root .ds-btn.v-primary:not(:disabled):hover {
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+
+.dash-root .ds-btn.v-ghost {
+  background: transparent;
+  color: var(--muted);
+}
+
+.dash-root .ds-btn.v-ghost:hover {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+.dash-root .ds-btn.v-soft {
+  background: var(--panel-3);
+  color: var(--text);
+}
+
+.dash-root .ds-btn.v-soft:hover {
+  background: var(--border-2);
+}
+
+.dash-root .ds-btn.v-outline {
+  background: transparent;
+  border-color: var(--border-2);
+  color: var(--text-2);
+}
+
+.dash-root .ds-btn.v-outline:hover {
+  border-color: var(--orange);
+  color: var(--orange);
+}
+
+.dash-root .ds-btn.v-danger {
+  background: color-mix(in srgb, var(--red) 16%, transparent);
+  color: var(--red);
+}
+
+.dash-root .ds-btn.v-danger:hover {
+  background: var(--red);
+  color: #fff;
+}
+
+.dash-root .ds-iconbtn {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--muted);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: 0.14s;
+  flex: 0 0 auto;
+}
+
+.dash-root .ds-iconbtn:hover {
+  color: var(--text);
+  border-color: var(--border-2);
+}
+
+.dash-root .ds-iconbtn.sm {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+}
+
+.dash-root .link-inline {
+  background: none;
+  border: 0;
+  color: var(--orange);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+/* ---- Segmented / Tabs ---- */
+.dash-root .ds-segmented {
+  display: inline-flex;
+  gap: 4px;
+  padding: 5px;
+  background: var(--panel-2);
+  border: 1px solid var(--border-2);
+  border-radius: 14px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.dash-root .ds-segmented .seg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: 10px;
+  background: none;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .ds-segmented .seg:hover {
+  color: var(--text);
+  background: color-mix(in srgb, var(--orange) 9%, transparent);
+}
+
+.dash-root .ds-segmented .seg.active {
+  background: rgba(253, 169, 19, 0.92);
+  color: #fff;
+  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--orange) 75%, transparent);
+}
+
+.dash-root .ds-segmented .seg.active:hover {
+  background: rgba(253, 169, 19, 1);
+  color: #fff;
+}
+
+.dash-root .ds-segmented .seg.active svg {
+  color: #fff;
+}
+
+.dash-root .ds-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 5px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  margin: 18px 0 22px;
+  overflow-x: auto;
+}
+
+.dash-root .ds-tabs::-webkit-scrollbar {
+  height: 0;
+}
+
+.dash-root .ds-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  border: 0;
+  border-radius: 10px;
+  background: none;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: 0.16s;
+}
+
+.dash-root .ds-tab:hover {
+  color: var(--text-2);
+  background: color-mix(in srgb, var(--panel) 55%, transparent);
+}
+
+.dash-root .ds-tab.active {
+  color: var(--orange);
+  background: var(--panel);
+  box-shadow: var(--card-hi), 0 4px 14px -8px rgba(0, 0, 0, 0.5);
+}
+
+.dash-root .ds-tab-badge {
+  background: var(--orange);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 17px;
+  height: 17px;
+  border-radius: 99px;
+  display: inline-grid;
+  place-items: center;
+  padding: 0 4px;
+}
+
+/* ---- OTP ---- */
+.dash-root .ds-otp {
+  display: flex;
+  gap: 9px;
+}
+
+.dash-root .ds-otp-box {
+  width: 46px;
+  height: 54px;
+  text-align: center;
+  font-size: 22px;
+  font-weight: 700;
+  border-radius: 12px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--text);
+  outline: none;
+  transition: 0.14s;
+}
+
+.dash-root .ds-otp-box:focus {
+  border-color: var(--orange);
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+.dash-root .otp-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+/* ---- Modal ---- */
+.dash-root .ds-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(2, 2, 6, 0.6);
+  backdrop-filter: blur(4px);
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  animation: ds-fade 0.18s ease;
+}
+
+.dash-root .ds-modal {
+  width: 100%;
+  background: var(--panel);
+  border: 1px solid var(--border-2);
+  border-radius: 18px;
+  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
+  animation: ds-pop 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .ds-modal.size-sm {
+  max-width: 400px;
+}
+
+.dash-root .ds-modal.size-md {
+  max-width: 540px;
+}
+
+.dash-root .ds-modal.size-lg {
+  max-width: 760px;
+}
+
+.dash-root .ds-modal.size-xl {
+  max-width: 980px;
+}
+
+.dash-root .ds-modal-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 20px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .ds-modal-head-l {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.dash-root .ds-modal-head-r {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.dash-root .ds-modal-ic {
+  width: 38px;
+  height: 38px;
+  border-radius: 11px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  color: var(--orange);
+  background: color-mix(in srgb, var(--orange) 14%, transparent);
+}
+
+.dash-root .ds-modal-head h3 {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.dash-root .ds-modal-head p {
+  font-size: 12.5px;
+  color: var(--muted);
+  margin-top: 3px;
+}
+
+.dash-root .ds-modal-body {
+  padding: 18px 20px;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.dash-root .ds-modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--border);
+}
+
+/* ---- Toasts ---- */
+.dash-root .ds-toasts {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 340px;
+  max-width: calc(100vw - 40px);
+}
+
+.dash-root .ds-toast {
+  display: flex;
+  gap: 11px;
+  padding: 13px 14px;
+  border-radius: 13px;
+  background: var(--panel);
+  border: 1px solid var(--border-2);
+  box-shadow: var(--shadow);
+  animation: ds-slide-in 0.26s ease;
+}
+
+.dash-root .ds-toast.tone-success {
+  border-left: 3px solid var(--green);
+}
+
+.dash-root .ds-toast.tone-success>svg {
+  color: var(--green);
+}
+
+.dash-root .ds-toast.tone-info {
+  border-left: 3px solid var(--blue);
+}
+
+.dash-root .ds-toast.tone-info>svg {
+  color: #6f9bff;
+}
+
+.dash-root .ds-toast.tone-error {
+  border-left: 3px solid var(--red);
+}
+
+.dash-root .ds-toast.tone-error>svg {
+  color: var(--red);
+}
+
+.dash-root .ds-toast>svg {
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+
+.dash-root .ds-toast-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .ds-toast-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .ds-toast-desc {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .ds-toast-x {
+  background: none;
+  border: 0;
+  color: var(--faint);
+  cursor: pointer;
+  padding: 0;
+  height: 18px;
+}
+
+/* ---- key/value list, callouts ---- */
+.dash-root .kv-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .kv {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 11px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .kv:last-child {
+  border-bottom: 0;
+}
+
+.dash-root .kv dt {
+  font-size: 12.5px;
+  color: var(--muted);
+}
+
+.dash-root .kv dd {
+  font-size: 13.5px;
+  font-weight: 600;
+  text-align: right;
+}
+
+.dash-root .kv dd.masked {
+  letter-spacing: 0.06em;
+  color: var(--faint);
+  font-weight: 500;
+}
+
+.dash-root .kv dd.kv-edit {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dash-root .kv-edit-btn {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--muted);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .kv-edit-btn:hover {
+  color: var(--orange);
+  border-color: var(--orange);
+}
+
+.dash-root .kv-lock {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10.5px;
+  color: var(--faint);
+  font-weight: 500;
+}
+
+.dash-root .edit-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+@media (max-width: 720px) {
+  .dash-root .edit-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dash-root .callout {
+  display: flex;
+  gap: 11px;
+  padding: 13px 14px;
+  border-radius: 13px;
+  margin-bottom: 16px;
+}
+
+.dash-root .callout svg {
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+
+.dash-root .callout strong {
+  display: block;
+  font-size: 13px;
+}
+
+.dash-root .callout span {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.dash-root .callout.tone-green {
+  background: color-mix(in srgb, var(--green) 10%, transparent);
+}
+
+.dash-root .callout.tone-green svg {
+  color: var(--green);
+}
+
+.dash-root .callout.tone-orange {
+  background: color-mix(in srgb, var(--orange) 10%, transparent);
+}
+
+.dash-root .callout.tone-orange svg {
+  color: var(--orange);
+}
+
+.dash-root .callout.tone-red {
+  background: color-mix(in srgb, var(--red) 10%, transparent);
+}
+
+.dash-root .callout.tone-red svg {
+  color: var(--red);
+}
+
+/* ---- Profile hero ---- */
+.dash-root .profile-hero {
+  position: relative;
+  overflow: hidden;
+  border-radius: 22px;
+  padding: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+  margin-bottom: 4px;
+  background: linear-gradient(120deg, color-mix(in srgb, var(--orange) 10%, var(--panel)) 0%, var(--panel) 55%);
+}
+
+.dash-root .profile-hero-bg {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(90% 140% at 100% -10%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 50%), radial-gradient(70% 120% at -5% 110%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 55%);
+  pointer-events: none;
+}
+
+.dash-root .profile-hero-main {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  position: relative;
+}
+
+.dash-root .profile-hero-avatar {
+  position: relative;
+  border-radius: 24px;
+  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--orange) 60%, transparent);
+}
+
+.dash-root .profile-hero-cam {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+  border: 2px solid var(--panel);
+  background: var(--orange);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.dash-root .profile-hero-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 21px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.dash-root .verified-badge {
+  color: var(--green);
+}
+
+.dash-root .profile-hero-role {
+  font-size: 13px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .profile-hero-chips {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.dash-root .hero-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--text-2);
+  padding: 5px 10px;
+  border-radius: 8px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+}
+
+.dash-root .hero-chip svg {
+  color: var(--faint);
+}
+
+.dash-root .hero-chip.accent {
+  color: var(--orange);
+  border-color: color-mix(in srgb, var(--orange) 30%, transparent);
+}
+
+.dash-root .hero-chip.accent svg {
+  color: var(--orange);
+}
+
+.dash-root .profile-hero-stats {
+  display: flex;
+  gap: 0;
+  position: relative;
+}
+
+.dash-root .hero-stat {
+  padding: 0 22px;
+  border-left: 1px solid var(--border);
+}
+
+.dash-root .hero-stat:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+
+.dash-root .hero-stat:last-child {
+  padding-right: 0;
+}
+
+.dash-root .hero-stat-v {
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.dash-root .hero-stat-l {
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+/* ---- reveal gate ---- */
+.dash-root .reveal-gate {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 14px;
+  border-radius: 13px;
+  border: 1px dashed var(--border-2);
+  background: var(--panel-2);
+  margin-bottom: 16px;
+}
+
+.dash-root .reveal-gate-ic {
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  color: var(--orange);
+  background: color-mix(in srgb, var(--orange) 14%, transparent);
+  flex: 0 0 auto;
+}
+
+.dash-root .reveal-gate-txt {
+  flex: 1;
+  min-width: 140px;
+}
+
+.dash-root .reveal-gate-txt strong {
+  display: block;
+  font-size: 13px;
+}
+
+.dash-root .reveal-gate-txt span {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.dash-root .reveal-gate-form {
+  display: flex;
+  gap: 8px;
+}
+
+.dash-root .reveal-gate-form .ds-input {
+  width: 140px;
+}
+
+/* ---- KYC ---- */
+.dash-root .kyc-progress {
+  margin-bottom: 18px;
+}
+
+.dash-root .kyc-progress-bar {
+  height: 9px;
+  border-radius: 99px;
+  background: var(--track);
+  overflow: hidden;
+}
+
+.dash-root .kyc-progress-bar>span {
+  display: block;
+  height: 100%;
+  border-radius: 99px;
+  background: rgba(253, 169, 19, 0.92);
+  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
+  animation: ds-bar 0.6s ease;
+}
+
+.dash-root .kyc-progress-legend {
+  display: flex;
+  gap: 16px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+
+.dash-root .kyc-leg {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11.5px;
+  color: var(--faint);
+}
+
+.dash-root .kyc-leg.verified {
+  color: var(--green);
+}
+
+.dash-root .kyc-leg.uploaded {
+  color: #6f9bff;
+}
+
+.dash-root .kyc-leg.missing {
+  color: var(--muted);
+}
+
+.dash-root .kyc-slots {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dash-root .kyc-slot {
+  display: flex;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 13px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+}
+
+.dash-root .kyc-slot.status-verified {
+  border-color: color-mix(in srgb, var(--green) 40%, transparent);
+}
+
+.dash-root .kyc-slot.status-rejected {
+  border-color: color-mix(in srgb, var(--red) 40%, transparent);
+}
+
+.dash-root .kyc-slot-ic {
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  background: var(--panel-3);
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .kyc-slot-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.dash-root .kyc-slot-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.dash-root .kyc-slot-title {
+  font-size: 13.5px;
+  font-weight: 600;
+}
+
+.dash-root .kyc-slot-hint {
+  font-size: 11.5px;
+  color: var(--faint);
+}
+
+.dash-root .kyc-drop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 42px;
+  border-radius: 11px;
+  border: 1px dashed var(--border-2);
+  background: var(--panel);
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .kyc-drop:hover {
+  border-color: var(--orange);
+  color: var(--orange);
+}
+
+.dash-root .kyc-file {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 9px 11px;
+  border-radius: 10px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+}
+
+.dash-root .kyc-file-name {
+  font-size: 12.5px;
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .kyc-file-note {
+  font-size: 11px;
+  color: var(--faint);
+}
+
+.dash-root .rule-mini {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.dash-root .rule-mini li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12.5px;
+  color: var(--text-2);
+}
+
+.dash-root .rule-mini svg {
+  color: var(--green);
+  flex: 0 0 auto;
+  margin-top: 2px;
+}
+
+.dash-root .kyc-doc-pairs {
+  border-top: 1px solid var(--border);
+  padding-top: 14px;
+}
+
+.dash-root .pair-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+  font-size: 12.5px;
+  color: var(--muted);
+}
+
+/* ---- password meter ---- */
+.dash-root .pw-meter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.dash-root .pw-bars {
+  display: flex;
+  gap: 5px;
+  flex: 1;
+}
+
+.dash-root .pw-bars .lvl {
+  flex: 1;
+  height: 6px;
+  border-radius: 99px;
+  background: var(--track);
+  transition: background 0.2s;
+}
+
+.dash-root .pw-bars .lvl-weak {
+  background: var(--red);
+}
+
+.dash-root .pw-bars .lvl-fair {
+  background: var(--orange);
+}
+
+.dash-root .pw-bars .lvl-good {
+  background: var(--yellow);
+}
+
+.dash-root .pw-bars .lvl-strong {
+  background: var(--green);
+}
+
+.dash-root .pw-label {
+  font-size: 12px;
+  font-weight: 700;
+  min-width: 48px;
+  text-align: right;
+}
+
+.dash-root .pw-checks {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.dash-root .pw-checks li {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  color: var(--faint);
+}
+
+.dash-root .pw-checks li svg {
+  color: var(--faint);
+}
+
+.dash-root .pw-checks li.ok {
+  color: var(--text-2);
+}
+
+.dash-root .pw-checks li.ok svg {
+  color: var(--green);
+}
+
+/* ---- setting rows ---- */
+.dash-root .setting-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .setting-row:last-of-type {
+  border-bottom: 0;
+}
+
+.dash-root .setting-ic {
+  width: 38px;
+  height: 38px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  background: var(--panel-2);
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .setting-txt {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .setting-title {
+  font-size: 13.5px;
+  font-weight: 600;
+}
+
+.dash-root .setting-desc {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+/* ---- notifications matrix ---- */
+.dash-root .notif-table {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .notif-row {
+  display: grid;
+  grid-template-columns: 1.6fr repeat(4, 70px);
+  align-items: center;
+  gap: 8px;
+  padding: 13px 20px;
+  border-top: 1px solid var(--border);
+}
+
+.dash-root .notif-row.notif-head {
+  border-top: 0;
+}
+
+.dash-root .notif-head span {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+.dash-root .notif-ch {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  justify-content: center;
+}
+
+.dash-root .notif-cat-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .notif-cat-desc {
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .lock-ic {
+  color: var(--faint);
+}
+
+/* ---- contact-time windows ---- */
+.dash-root .time-windows {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 9px;
+  margin-top: 4px;
+}
+
+.dash-root .time-win {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 11px 13px;
+  border-radius: 11px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--muted);
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  transition: 0.14s;
+  position: relative;
+}
+
+.dash-root .time-win svg {
+  position: absolute;
+  right: 11px;
+  top: 11px;
+}
+
+.dash-root .time-win.on {
+  border-color: var(--orange);
+  background: color-mix(in srgb, var(--orange) 9%, transparent);
+  color: var(--text);
+}
+
+.dash-root .time-win.on svg {
+  color: var(--orange);
+}
+
+.dash-root .tw-label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .tw-range {
+  font-size: 11.5px;
+  color: var(--faint);
+}
+
+/* ---- destinations ---- */
+.dash-root .dest-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.dash-root .dest-row {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 11px;
+  border-radius: 11px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+}
+
+.dash-root .dest-ic {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  background: var(--panel-3);
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .dest-txt {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .dest-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .dest-val {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 1px;
+}
+
+/* ---- consent ---- */
+.dash-root .consent-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dash-root .consent-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .consent-item:last-child {
+  border-bottom: 0;
+}
+
+.dash-root .consent-item.locked {
+  opacity: 0.85;
+}
+
+.dash-root .consent-label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .consent-desc {
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .consent-sub {
+  margin-top: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  animation: ds-rise 0.2s ease;
+}
+
+.dash-root .consent-sub-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 0;
+  font-size: 12.5px;
+}
+
+/* ---- devices + timeline ---- */
+.dash-root .device-list {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+
+.dash-root .device-row {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 13px;
+  border-radius: 13px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+}
+
+.dash-root .device-row.current {
+  border-color: color-mix(in srgb, var(--green) 35%, transparent);
+}
+
+.dash-root .device-ic {
+  width: 42px;
+  height: 42px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  background: var(--panel-3);
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .device-txt {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .device-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13.5px;
+  font-weight: 600;
+  flex-wrap: wrap;
+}
+
+.dash-root .device-meta {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 3px;
+}
+
+.dash-root .timeline {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .tl-item {
+  display: flex;
+  gap: 12px;
+  padding-bottom: 16px;
+  position: relative;
+}
+
+.dash-root .tl-item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  left: 11px;
+  top: 24px;
+  bottom: 0;
+  width: 2px;
+  background: var(--border);
+}
+
+.dash-root .tl-dot {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  background: var(--panel-3);
+  color: var(--muted);
+  z-index: 1;
+}
+
+.dash-root .tl-dot.ev-password-change {
+  background: color-mix(in srgb, var(--orange) 18%, transparent);
+  color: var(--orange);
+}
+
+.dash-root .tl-dot.ev-new-device,
+.dash-root .tl-dot.ev-awaiting-customer {
+  background: color-mix(in srgb, var(--red) 18%, transparent);
+  color: var(--red);
+}
+
+.dash-root .tl-dot.ev-resolved,
+.dash-root .tl-dot.ev-closed {
+  background: color-mix(in srgb, var(--green) 18%, transparent);
+  color: var(--green);
+}
+
+.dash-root .tl-body {
+  padding-top: 2px;
+}
+
+.dash-root .tl-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .tl-meta {
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 1px;
+}
+
+.dash-root .tl-time {
+  font-size: 11px;
+  color: var(--faint);
+  margin-top: 2px;
+}
+
+/* ---- Support: command-center Overview ---- */
+.dash-root .support-ov {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dash-root .sup-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 11px 16px;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--border));
+  background: color-mix(in srgb, var(--green) 9%, var(--panel));
+  flex-wrap: wrap;
+}
+
+.dash-root .sup-status-l {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--green);
+}
+
+.dash-root .sup-status-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent);
+  animation: sup-pulse 1.8s infinite;
+}
+
+.dash-root .sup-status-r {
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+@keyframes sup-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent);
+  }
+
+  70% {
+    box-shadow: 0 0 0 7px transparent;
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+.dash-root .sup-pulse {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+}
+
+.dash-root .sup-stat {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 16px 18px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: var(--card-grad);
+  box-shadow: var(--card-hi);
+  transition: transform 0.16s, border-color 0.16s;
+}
+
+.dash-root .sup-stat:hover {
+  transform: translateY(-3px);
+  border-color: color-mix(in srgb, var(--orange) 40%, var(--border));
+}
+
+.dash-root .sup-stat-ic {
+  width: 42px;
+  height: 42px;
+  border-radius: 13px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: rgba(253, 169, 19, 0.92);
+  box-shadow: var(--glow-orange);
+}
+
+.dash-root .sup-stat-txt b {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+
+.dash-root .sup-stat-txt b svg {
+  color: var(--orange);
+}
+
+.dash-root .sup-stat-txt span {
+  display: block;
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 5px;
+}
+
+.dash-root .sup-stat-live {
+  position: absolute;
+  top: 13px;
+  right: 13px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent);
+  animation: sup-pulse 1.8s infinite;
+}
+
+/* hero live-signal rings */
+.dash-root .bento-chat-sig {
+  position: absolute;
+  right: 34px;
+  top: 26px;
+  width: 10px;
+  height: 10px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.dash-root .bento-chat-sig span {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1.5px solid rgba(255, 255, 255, 0.55);
+  animation: sup-ring 2.6s ease-out infinite;
+}
+
+.dash-root .bento-chat-sig span:nth-child(2) {
+  animation-delay: 0.85s;
+}
+
+.dash-root .bento-chat-sig span:nth-child(3) {
+  animation-delay: 1.7s;
+}
+
+@keyframes sup-ring {
+  0% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+
+  100% {
+    transform: scale(6.5);
+    opacity: 0;
+  }
+}
+
+@media (max-width: 1180px) {
+  .dash-root .sup-pulse {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .dash-root .sup-pulse {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* ---- Support: Bento hub ---- */
+.dash-root .support-bento {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-areas:
+    "chat chat team team"
+    "chat chat team team"
+    "ticket call email help"
+    "recent recent recent recent";
+}
+
+.dash-root .bento-tile {
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--card-grad);
+  box-shadow: var(--card-hi);
+  padding: 20px;
+}
+
+.dash-root .bento-tile-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.dash-root .bento-tile-head h3 {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+/* hero live-chat tile */
+.dash-root .bento-chat {
+  grid-area: chat;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 20px;
+  min-height: 268px;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  border: 0;
+  color: #fff;
+  background: rgba(253, 169, 19, 0.92);
+  box-shadow: var(--glow-orange);
+  transition: transform 0.18s, box-shadow 0.18s;
+}
+
+.dash-root .bento-chat:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 26px 54px -20px color-mix(in srgb, var(--orange) 85%, #000);
+}
+
+.dash-root .bento-chat::after {
+  content: "";
+  position: absolute;
+  right: -70px;
+  top: -70px;
+  width: 260px;
+  height: 260px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 68%);
+  pointer-events: none;
+}
+
+.dash-root .bento-chat::before {
+  content: "";
+  position: absolute;
+  left: -40px;
+  bottom: -80px;
+  width: 220px;
+  height: 220px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(26, 18, 6, 0.12), transparent 70%);
+  pointer-events: none;
+}
+
+.dash-root .bento-chat-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  position: relative;
+  z-index: 1;
+  font-size: 12px;
+  font-weight: 600;
+  flex-wrap: wrap;
+}
+
+.dash-root .bento-chat-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 6px 11px;
+  border-radius: 99px;
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+
+.dash-root .bento-chat-badge .ds-statusdot {
+  background: #0c3517;
+  box-shadow: 0 0 0 3px rgba(12, 53, 23, 0.3);
+}
+
+.dash-root .bento-chat-wait {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.dash-root .bento-chat-mid {
+  position: relative;
+  z-index: 1;
+}
+
+.dash-root .bento-chat-mid h2 {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.12;
+}
+
+.dash-root .bento-chat-mid p {
+  font-size: 13px;
+  margin-top: 9px;
+  color: rgba(255, 255, 255, 0.88);
+  max-width: 360px;
+  line-height: 1.5;
+}
+
+.dash-root .bento-chat-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  position: relative;
+  z-index: 1;
+  flex-wrap: wrap;
+}
+
+.dash-root .bento-avstack {
+  display: flex;
+  align-items: center;
+}
+
+.dash-root .bento-avstack .ds-avatar {
+  margin-left: -9px;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
+  border-radius: 50%;
+}
+
+.dash-root .bento-avstack .ds-avatar:first-child {
+  margin-left: 0;
+}
+
+.dash-root .bento-av-more {
+  margin-left: 11px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.dash-root .bento-chat-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #1a1206;
+  color: #fff;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-size: 13.5px;
+  font-weight: 700;
+  transition: transform 0.14s;
+}
+
+.dash-root .bento-chat:hover .bento-chat-cta {
+  transform: translateX(3px);
+}
+
+/* team tile */
+.dash-root .bento-team {
+  grid-area: team;
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .bento-team .team-list {
+  overflow-y: auto;
+}
+
+/* mini tiles */
+.dash-root .bento-mini {
+  position: relative;
+  overflow: hidden;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 150px;
+  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
+}
+
+.dash-root .bento-mini::before {
+  content: "";
+  position: absolute;
+  top: -45%;
+  right: -25%;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
+  opacity: 0;
+  transition: opacity 0.25s;
+  pointer-events: none;
+}
+
+.dash-root .bento-mini:hover {
+  transform: translateY(-3px);
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  box-shadow: var(--card-hi), 0 16px 36px -22px color-mix(in srgb, var(--accent) 75%, #000);
+}
+
+.dash-root .bento-mini:hover::before {
+  opacity: 1;
+}
+
+.dash-root .bento-mini-ic {
+  width: 44px;
+  height: 44px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
+  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent);
+  margin-bottom: 8px;
+}
+
+.dash-root .bento-mini-title {
+  font-size: 14.5px;
+  font-weight: 700;
+}
+
+.dash-root .bento-mini-desc {
+  font-size: 12px;
+  color: var(--muted);
+  flex: 1;
+  line-height: 1.45;
+}
+
+.dash-root .bento-mini-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  font-size: 11.5px;
+  color: var(--accent);
+  font-weight: 600;
+  margin-top: 8px;
+}
+
+/* recent tickets */
+.dash-root .bento-recent {
+  grid-area: recent;
+}
+
+.dash-root .bento-ticket-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.dash-root .bento-ticket {
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 14px;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  transition: 0.14s;
+}
+
+.dash-root .bento-ticket:hover {
+  border-color: var(--border-2);
+  background: var(--panel-3);
+  transform: translateY(-2px);
+}
+
+.dash-root .bento-ticket-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.dash-root .bento-ticket-subj {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.dash-root .bento-ticket-meta {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--faint);
+}
+
+@media (max-width: 1180px) {
   .dash-root .support-bento {
-    display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr);
-    grid-template-areas:
-      "chat chat team team"
-      "chat chat team team"
-      "ticket call email help"
-      "recent recent recent recent";
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-areas: "chat chat" "team team" "ticket call" "email help" "recent recent";
   }
-  .dash-root .bento-tile { border: 1px solid var(--border); border-radius: 18px; background: var(--card-grad); box-shadow: var(--card-hi); padding: 20px; }
-  .dash-root .bento-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
-  .dash-root .bento-tile-head h3 { font-size: 15px; font-weight: 700; }
-  
-  /* hero live-chat tile */
-  .dash-root .bento-chat { grid-area: chat; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 268px; text-align: left; cursor: pointer; font-family: inherit; border: 0; color: #fff; background: rgba(253, 169, 19, 0.92); box-shadow: var(--glow-orange); transition: transform 0.18s, box-shadow 0.18s; }
-  .dash-root .bento-chat:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -20px color-mix(in srgb, var(--orange) 85%, #000); }
-  .dash-root .bento-chat::after { content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 68%); pointer-events: none; }
-  .dash-root .bento-chat::before { content: ""; position: absolute; left: -40px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(26,18,6,0.12), transparent 70%); pointer-events: none; }
-  .dash-root .bento-chat-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: relative; z-index: 1; font-size: 12px; font-weight: 600; flex-wrap: wrap; }
-  .dash-root .bento-chat-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.2); padding: 6px 11px; border-radius: 99px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
-  .dash-root .bento-chat-badge .ds-statusdot { background: #0c3517; box-shadow: 0 0 0 3px rgba(12,53,23,0.3); }
-  .dash-root .bento-chat-wait { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,0.85); }
-  .dash-root .bento-chat-mid { position: relative; z-index: 1; }
-  .dash-root .bento-chat-mid h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
-  .dash-root .bento-chat-mid p { font-size: 13px; margin-top: 9px; color: rgba(255,255,255,0.88); max-width: 360px; line-height: 1.5; }
-  .dash-root .bento-chat-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; z-index: 1; flex-wrap: wrap; }
-  .dash-root .bento-avstack { display: flex; align-items: center; }
-  .dash-root .bento-avstack .ds-avatar { margin-left: -9px; box-shadow: 0 0 0 2px rgba(255,255,255,0.92); border-radius: 50%; }
-  .dash-root .bento-avstack .ds-avatar:first-child { margin-left: 0; }
-  .dash-root .bento-av-more { margin-left: 11px; font-size: 12px; font-weight: 700; }
-  .dash-root .bento-chat-cta { display: inline-flex; align-items: center; gap: 8px; background: #1a1206; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 13.5px; font-weight: 700; transition: transform 0.14s; }
-  .dash-root .bento-chat:hover .bento-chat-cta { transform: translateX(3px); }
-  
-  /* team tile */
-  .dash-root .bento-team { grid-area: team; display: flex; flex-direction: column; }
-  .dash-root .bento-team .team-list { overflow-y: auto; }
-  
-  /* mini tiles */
-  .dash-root .bento-mini { position: relative; overflow: hidden; text-align: left; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 5px; min-height: 150px; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
-  .dash-root .bento-mini::before { content: ""; position: absolute; top: -45%; right: -25%; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
-  .dash-root .bento-mini:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: var(--card-hi), 0 16px 36px -22px color-mix(in srgb, var(--accent) 75%, #000); }
-  .dash-root .bento-mini:hover::before { opacity: 1; }
-  .dash-root .bento-mini-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); margin-bottom: 8px; }
-  .dash-root .bento-mini-title { font-size: 14.5px; font-weight: 700; }
-  .dash-root .bento-mini-desc { font-size: 12px; color: var(--muted); flex: 1; line-height: 1.45; }
-  .dash-root .bento-mini-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--accent); font-weight: 600; margin-top: 8px; }
-  
-  /* recent tickets */
-  .dash-root .bento-recent { grid-area: recent; }
-  .dash-root .bento-ticket-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
-  .dash-root .bento-ticket { text-align: left; cursor: pointer; font-family: inherit; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2); display: flex; flex-direction: column; gap: 7px; transition: 0.14s; }
-  .dash-root .bento-ticket:hover { border-color: var(--border-2); background: var(--panel-3); transform: translateY(-2px); }
-  .dash-root .bento-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
-  .dash-root .bento-ticket-subj { font-size: 13px; font-weight: 600; line-height: 1.35; }
-  .dash-root .bento-ticket-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--faint); }
-  
-  @media (max-width: 1180px) {
-    .dash-root .support-bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "chat chat" "team team" "ticket call" "email help" "recent recent"; }
-    .dash-root .bento-ticket-row { grid-template-columns: repeat(2, 1fr); }
-    .dash-root .bento-team .team-list { max-height: none; }
-  }
-  @media (max-width: 680px) {
-    .dash-root .support-bento { grid-template-columns: 1fr; grid-template-areas: "chat" "team" "ticket" "call" "email" "help" "recent"; }
-    .dash-root .bento-ticket-row { grid-template-columns: 1fr; }
-  }
-  
-  /* ---- Support: channel cards (legacy) ---- */
-  .dash-root .channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
-  .dash-root .channel-card { text-align: left; position: relative; overflow: hidden; padding: 20px; border-radius: 18px; border: 1px solid var(--border); background: var(--card-grad); box-shadow: var(--card-hi); cursor: pointer; font-family: inherit; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; display: flex; flex-direction: column; gap: 6px; }
-  .dash-root .channel-card::before { content: ""; position: absolute; top: -45%; right: -20%; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
-  .dash-root .channel-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: var(--card-hi), 0 18px 42px -22px color-mix(in srgb, var(--accent) 75%, #000); }
-  .dash-root .channel-card:hover::before { opacity: 1; }
-  .dash-root .channel-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); box-shadow: 0 8px 18px -9px color-mix(in srgb, var(--accent) 80%, transparent); margin-bottom: 4px; }
-  .dash-root .channel-status { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); text-transform: capitalize; }
-  .dash-root .channel-title { font-size: 15px; font-weight: 700; }
-  .dash-root .channel-desc { font-size: 12.5px; color: var(--muted); }
-  .dash-root .channel-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
-  .dash-root .channel-meta { font-size: 11.5px; color: var(--faint); }
-  .dash-root .channel-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
-  
-  /* ---- Support team ---- */
-  .dash-root .team-list { display: flex; flex-direction: column; gap: 4px; }
-  .dash-root .team-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
-  .dash-root .team-row:last-child { border-bottom: 0; }
-  .dash-root .team-txt { flex: 1; min-width: 0; } .dash-root .team-name { font-size: 13.5px; font-weight: 600; } .dash-root .team-role { font-size: 12px; color: var(--muted); } .dash-root .team-team { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--faint); margin-top: 2px; }
-  .dash-root .team-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--orange); }
-  
-  /* ---- Message Center ---- */
-  .dash-root .msgctr { display: grid; grid-template-columns: 300px 1fr; height: 600px; }
-  .dash-root .msg-inbox { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
-  .dash-root .msg-inbox-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px; font-size: 14px; font-weight: 700; }
-  .dash-root .msg-inbox-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
-  .dash-root .msg-thread { width: 100%; display: flex; gap: 10px; padding: 11px; border-radius: 12px; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; position: relative; transition: 0.12s; }
-  .dash-root .msg-thread:hover { background: var(--panel-2); }
-  .dash-root .msg-thread.active { background: var(--panel-2); }
-  .dash-root .msg-thread-txt { flex: 1; min-width: 0; }
-  .dash-root .msg-thread-top { display: flex; justify-content: space-between; gap: 6px; } .dash-root .msg-thread-name { font-size: 13px; font-weight: 600; } .dash-root .msg-thread-time { font-size: 10.5px; color: var(--faint); }
-  .dash-root .msg-thread-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
-  .dash-root .msg-thread-prev { font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .typing-now { color: var(--orange); font-style: italic; }
-  .dash-root .msg-unread { position: absolute; right: 11px; bottom: 11px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 99px; display: grid; place-items: center; padding: 0 4px; }
-  .dash-root .msg-pin { position: absolute; right: 12px; top: 12px; color: var(--faint); }
-  .dash-root .msg-thread-pane { display: flex; flex-direction: column; min-height: 0; }
-  .dash-root .msg-pane-head { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
-  .dash-root .msg-pane-id { flex: 1; min-width: 0; } .dash-root .msg-pane-name { font-size: 14px; font-weight: 700; } .dash-root .msg-pane-sub { font-size: 12px; color: var(--muted); }
-  .dash-root .msg-stream { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
-  .dash-root .msg-stream.sm { max-height: 320px; }
-  .dash-root .bubble-row { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; animation: ds-rise 0.2s ease; }
-  .dash-root .bubble-row.me { align-self: flex-end; flex-direction: row-reverse; }
-  .dash-root .bubble { padding: 9px 13px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border); }
-  .dash-root .bubble p { margin: 0; font-size: 13px; line-height: 1.45; }
-  .dash-root .bubble-time { display: block; font-size: 10px; color: var(--faint); margin-top: 4px; }
-  .dash-root .bubble-row.me .bubble { background: var(--orange); border-color: transparent; color: #fff; } .dash-root .bubble-row.me .bubble-time { color: rgba(255, 255, 255, 0.72); }
-  .dash-root .bubble.typing { display: flex; gap: 4px; padding: 13px; }
-  .dash-root .bubble.typing .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ds-bounce 1.2s infinite; }
-  .dash-root .bubble.typing .dot:nth-child(2) { animation-delay: 0.18s; } .dash-root .bubble.typing .dot:nth-child(3) { animation-delay: 0.36s; }
-  .dash-root .msg-compose { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-top: 1px solid var(--border); }
-  .dash-root .msg-compose .ds-input { flex: 1; }
-  
-  /* ---- New Ticket routing ---- */
-  .dash-root .route-banner { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 11px; background: color-mix(in srgb, var(--blue) 9%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); font-size: 12.5px; margin-bottom: 14px; animation: ds-rise 0.2s ease; }
-  .dash-root .route-banner svg { color: #6f9bff; } .dash-root .route-banner > span { flex: 1; }
-  .dash-root .route-list { display: flex; flex-direction: column; gap: 9px; }
-  .dash-root .route-item { display: flex; align-items: center; gap: 9px; font-size: 12px; }
-  .dash-root .route-cat { flex: 1; color: var(--text-2); } .dash-root .route-item svg { color: var(--faint); } .dash-root .route-dept { color: var(--muted); font-weight: 600; }
-  
-  /* ---- My Tickets table ---- */
-  .dash-root .ticket-table { display: flex; flex-direction: column; }
-  .dash-root .ticket-row { display: grid; grid-template-columns: 2.2fr 1.3fr 0.9fr 1fr 1.1fr; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; font-family: inherit; text-align: left; color: var(--text); cursor: pointer; transition: 0.12s; }
-  .dash-root button.ticket-row:hover { background: var(--panel-2); }
-  .dash-root .ticket-row.ticket-head { cursor: default; }
-  .dash-root .ticket-head span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
-  .dash-root .t-subject { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; }
-  .dash-root .t-id { font-size: 11px; color: var(--orange); font-weight: 700; }
-  .dash-root .t-dept { font-size: 12.5px; color: var(--muted); }
-  .dash-root .t-updated { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); justify-content: space-between; }
-  .dash-root .ticket-modal-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
-  .dash-root .lifecycle { display: flex; align-items: center; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; }
-  .dash-root .lc-step { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--faint); white-space: nowrap; }
-  .dash-root .lc-line { width: 26px; height: 2px; background: var(--border); }
-  .dash-root .lc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--track); border: 2px solid var(--border-2); }
-  .dash-root .lc-step.done { color: var(--text-2); } .dash-root .lc-step.done .lc-dot { background: var(--green); border-color: var(--green); }
-  .dash-root .lc-step.current .lc-dot { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent); }
-  
-  /* ---- Help Center ---- */
-  .dash-root .help-search { display: flex; align-items: center; gap: 10px; padding: 4px 16px; height: 52px; border-radius: 14px; border: 1px solid var(--border-2); background: var(--panel); margin-bottom: 18px; }
-  .dash-root .help-search > svg { color: var(--faint); }
-  .dash-root .help-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
-  .dash-root .help-topic-card { padding: 0; overflow: hidden; --accent: var(--orange); }
-  .dash-root .help-topic-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
-  .dash-root .help-topic-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); flex: 0 0 auto; }
-  .dash-root .help-topic-txt { flex: 1; } .dash-root .help-topic-title { font-size: 14px; font-weight: 700; } .dash-root .help-topic-count { font-size: 11.5px; color: var(--muted); }
-  .dash-root .acc-chev { color: var(--faint); transition: transform 0.2s; } .dash-root .acc-chev.open { transform: rotate(180deg); }
-  .dash-root .help-acc-list { padding: 0 18px 10px; }
-  .dash-root .help-results { display: flex; flex-direction: column; }
-  .dash-root .help-acc { border-top: 1px solid var(--border); }
-  .dash-root .help-acc summary { display: flex; align-items: center; gap: 10px; padding: 13px 0; cursor: pointer; list-style: none; }
-  .dash-root .help-acc summary::-webkit-details-marker { display: none; }
-  .dash-root .help-q { flex: 1; font-size: 13px; font-weight: 600; }
-  .dash-root .help-acc summary .acc-chev { transition: transform 0.2s; }
-  .dash-root .help-acc[open] summary .acc-chev { transform: rotate(180deg); }
-  .dash-root .help-acc p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.55; animation: ds-rise 0.2s ease; }
-  
-  /* ---- Live chat handshake ---- */
-  .dash-root .chat-connecting { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 0; }
-  .dash-root .chat-radar { position: relative; display: grid; place-items: center; }
-  .dash-root .radar-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--orange); animation: ds-radar 1.8s ease-out infinite; }
-  .dash-root .radar-ring.d2 { animation-delay: 0.9s; }
-  .dash-root .chat-connecting-txt { font-size: 14px; font-weight: 600; } .dash-root .chat-connecting-txt .dots span { animation: ds-bounce 1.2s infinite; display: inline-block; } .dash-root .chat-connecting-txt .dots span:nth-child(2){ animation-delay: 0.18s; } .dash-root .chat-connecting-txt .dots span:nth-child(3){ animation-delay: 0.36s; }
-  .dash-root .livechat-joined { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: 12px; color: var(--muted); padding: 6px 0 10px; }
-  
-  /* ---- phone input / callback ---- */
-  .dash-root .phone-input { display: flex; gap: 8px; }
-  .dash-root .phone-input .cc { width: 110px; flex: 0 0 auto; }
-  .dash-root .phone-input .ds-input { flex: 1; border: 1px solid var(--border-2); background: var(--panel-2); padding: 0 13px; }
-  .dash-root .cb-slots { display: flex; flex-direction: column; gap: 8px; }
-  .dash-root .cb-slot { display: flex; justify-content: space-between; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--panel-2); cursor: pointer; font-family: inherit; color: var(--text); transition: 0.14s; }
-  .dash-root .cb-slot.active { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 9%, transparent); }
-  .dash-root .cb-slot-l { font-size: 13px; font-weight: 600; } .dash-root .cb-slot-r { font-size: 12px; color: var(--muted); }
-  
-  /* ---- Rules grid (uniform brand-orange cards) ---- */
-  .dash-root .rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
-  .dash-root .rule-card { position: relative; overflow: hidden; display: flex; flex-direction: column; --accent: var(--orange); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
-  .dash-root .rule-watermark { position: absolute; right: 8px; bottom: -22px; font-size: 120px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; user-select: none; }
-  .dash-root .rule-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; position: relative; z-index: 1; }
-  .dash-root .rule-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
-  .dash-root .rule-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 18px 42px -24px color-mix(in srgb, var(--accent) 70%, #000); }
-  .dash-root .rule-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; position: relative; z-index: 1; letter-spacing: -0.01em; }
-  .dash-root .rule-detail { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; position: relative; z-index: 1; }
-  .dash-root .rule-foot { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--accent); position: relative; z-index: 1; }
-  
-  /* ---- responsive ---- */
-  @media (max-width: 1180px) {
-    .dash-root .grid-side, .dash-root .consent-cols, .dash-root .channel-grid, .dash-root .help-topics, .dash-root .grid-2 { grid-template-columns: 1fr; }
-    .dash-root .rules-grid { grid-template-columns: repeat(2, 1fr); }
-    .dash-root .msgctr { grid-template-columns: 1fr; height: auto; }
-    .dash-root .msg-inbox { border-right: 0; border-bottom: 1px solid var(--border); max-height: 280px; }
-  }
-  @media (max-width: 680px) {
-    .dash-root .rules-grid { grid-template-columns: 1fr; }
-  }
-  @media (max-width: 720px) {
-    .dash-root .notif-row { grid-template-columns: 1fr; gap: 10px; }
-    .dash-root .notif-head { display: none; }
-    .dash-root .ticket-row { grid-template-columns: 1fr; gap: 6px; }
-    .dash-root .ticket-head { display: none; }
-    .dash-root .pw-checks, .dash-root .time-windows { grid-template-columns: 1fr; }
-    .dash-root .profile-hero-stats { padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; width: 100%; }
-  }
-  
-  /* =========================================================== */
-  /* Glass box treatment — every card wrapped in a brand-brown    */
-  /* border over a translucent black, blurred (dark theme).       */
-  /* =========================================================== */
-  .dash-root[data-theme="dark"] .card {
-    background: rgba(0, 0, 0, 0.54);
-    border: 0.5px solid #452B1A;
-    -webkit-backdrop-filter: blur(2px);
-    backdrop-filter: blur(2px);
-    border-radius: 20px;
-  }
-  .dash-root[data-theme="dark"] .ds-modal,
-  .dash-root[data-theme="dark"] .tm-menu-pop {
-    border: 0.5px solid #452B1A;
-    border-radius: 20px;
-  }
-  
-  /* =========================================================== */
-  /* Team Management                                             */
-  /* =========================================================== */
-  .dash-root .tm { display: flex; flex-direction: column; gap: 18px; }
 
-  /* ---- Crew hero ---- */
-  .dash-root .tm-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border: 0.5px solid #452B1A; background: var(--panel); }
-  .dash-root[data-theme="light"] .tm-hero { border: 1px solid var(--border); }
-  .dash-root .tm-hero-orbs { position: absolute; inset: 0; pointer-events: none; background:
+  .dash-root .bento-ticket-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .dash-root .bento-team .team-list {
+    max-height: none;
+  }
+}
+
+@media (max-width: 680px) {
+  .dash-root .support-bento {
+    grid-template-columns: 1fr;
+    grid-template-areas: "chat" "team" "ticket" "call" "email" "help" "recent";
+  }
+
+  .dash-root .bento-ticket-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ---- Support: channel cards (legacy) ---- */
+.dash-root .channel-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.dash-root .channel-card {
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  padding: 20px;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  background: var(--card-grad);
+  box-shadow: var(--card-hi);
+  cursor: pointer;
+  font-family: inherit;
+  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.dash-root .channel-card::before {
+  content: "";
+  position: absolute;
+  top: -45%;
+  right: -20%;
+  width: 190px;
+  height: 190px;
+  border-radius: 50%;
+  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
+  opacity: 0;
+  transition: opacity 0.25s;
+  pointer-events: none;
+}
+
+.dash-root .channel-card:hover {
+  transform: translateY(-3px);
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  box-shadow: var(--card-hi), 0 18px 42px -22px color-mix(in srgb, var(--accent) 75%, #000);
+}
+
+.dash-root .channel-card:hover::before {
+  opacity: 1;
+}
+
+.dash-root .channel-ic {
+  width: 46px;
+  height: 46px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
+  box-shadow: 0 8px 18px -9px color-mix(in srgb, var(--accent) 80%, transparent);
+  margin-bottom: 4px;
+}
+
+.dash-root .channel-status {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--muted);
+  text-transform: capitalize;
+}
+
+.dash-root .channel-title {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.dash-root .channel-desc {
+  font-size: 12.5px;
+  color: var(--muted);
+}
+
+.dash-root .channel-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.dash-root .channel-meta {
+  font-size: 11.5px;
+  color: var(--faint);
+}
+
+.dash-root .channel-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--accent);
+}
+
+/* ---- Support team ---- */
+.dash-root .team-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dash-root .team-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .team-row:last-child {
+  border-bottom: 0;
+}
+
+.dash-root .team-txt {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .team-name {
+  font-size: 13.5px;
+  font-weight: 600;
+}
+
+.dash-root .team-role {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.dash-root .team-team {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--faint);
+  margin-top: 2px;
+}
+
+.dash-root .team-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--orange);
+}
+
+/* ---- Message Center ---- */
+.dash-root .msgctr {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  height: 600px;
+}
+
+.dash-root .msg-inbox {
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.dash-root .msg-inbox-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 12px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.dash-root .msg-inbox-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 8px 8px;
+}
+
+.dash-root .msg-thread {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  padding: 11px;
+  border-radius: 12px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  position: relative;
+  transition: 0.12s;
+}
+
+.dash-root .msg-thread:hover {
+  background: var(--panel-2);
+}
+
+.dash-root .msg-thread.active {
+  background: var(--panel-2);
+}
+
+.dash-root .msg-thread-txt {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .msg-thread-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.dash-root .msg-thread-name {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .msg-thread-time {
+  font-size: 10.5px;
+  color: var(--faint);
+}
+
+.dash-root .msg-thread-sub {
+  font-size: 12px;
+  color: var(--text-2);
+  margin-top: 1px;
+}
+
+.dash-root .msg-thread-prev {
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .typing-now {
+  color: var(--orange);
+  font-style: italic;
+}
+
+.dash-root .msg-unread {
+  position: absolute;
+  right: 11px;
+  bottom: 11px;
+  background: var(--orange);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 17px;
+  height: 17px;
+  border-radius: 99px;
+  display: grid;
+  place-items: center;
+  padding: 0 4px;
+}
+
+.dash-root .msg-pin {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  color: var(--faint);
+}
+
+.dash-root .msg-thread-pane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.dash-root .msg-pane-head {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .msg-pane-id {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .msg-pane-name {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.dash-root .msg-pane-sub {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.dash-root .msg-stream {
+  flex: 1;
+  overflow-y: auto;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dash-root .msg-stream.sm {
+  max-height: 320px;
+}
+
+.dash-root .bubble-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  max-width: 78%;
+  animation: ds-rise 0.2s ease;
+}
+
+.dash-root .bubble-row.me {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.dash-root .bubble {
+  padding: 9px 13px;
+  border-radius: 14px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+}
+
+.dash-root .bubble p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.dash-root .bubble-time {
+  display: block;
+  font-size: 10px;
+  color: var(--faint);
+  margin-top: 4px;
+}
+
+.dash-root .bubble-row.me .bubble {
+  background: var(--orange);
+  border-color: transparent;
+  color: #fff;
+}
+
+.dash-root .bubble-row.me .bubble-time {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.dash-root .bubble.typing {
+  display: flex;
+  gap: 4px;
+  padding: 13px;
+}
+
+.dash-root .bubble.typing .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--muted);
+  animation: ds-bounce 1.2s infinite;
+}
+
+.dash-root .bubble.typing .dot:nth-child(2) {
+  animation-delay: 0.18s;
+}
+
+.dash-root .bubble.typing .dot:nth-child(3) {
+  animation-delay: 0.36s;
+}
+
+.dash-root .msg-compose {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+}
+
+.dash-root .msg-compose .ds-input {
+  flex: 1;
+}
+
+/* ---- New Ticket routing ---- */
+.dash-root .route-banner {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 11px 13px;
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--blue) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
+  font-size: 12.5px;
+  margin-bottom: 14px;
+  animation: ds-rise 0.2s ease;
+}
+
+.dash-root .route-banner svg {
+  color: #6f9bff;
+}
+
+.dash-root .route-banner>span {
+  flex: 1;
+}
+
+.dash-root .route-list {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.dash-root .route-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 12px;
+}
+
+.dash-root .route-cat {
+  flex: 1;
+  color: var(--text-2);
+}
+
+.dash-root .route-item svg {
+  color: var(--faint);
+}
+
+.dash-root .route-dept {
+  color: var(--muted);
+  font-weight: 600;
+}
+
+/* ---- My Tickets table ---- */
+.dash-root .ticket-table {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .ticket-row {
+  display: grid;
+  grid-template-columns: 2.2fr 1.3fr 0.9fr 1fr 1.1fr;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--border);
+  background: none;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+  width: 100%;
+  font-family: inherit;
+  text-align: left;
+  color: var(--text);
+  cursor: pointer;
+  transition: 0.12s;
+}
+
+.dash-root button.ticket-row:hover {
+  background: var(--panel-2);
+}
+
+.dash-root .ticket-row.ticket-head {
+  cursor: default;
+}
+
+.dash-root .ticket-head span {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+.dash-root .t-subject {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .t-id {
+  font-size: 11px;
+  color: var(--orange);
+  font-weight: 700;
+}
+
+.dash-root .t-dept {
+  font-size: 12.5px;
+  color: var(--muted);
+}
+
+.dash-root .t-updated {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted);
+  justify-content: space-between;
+}
+
+.dash-root .ticket-modal-meta {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+}
+
+.dash-root .lifecycle {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.dash-root .lc-step {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 11px;
+  color: var(--faint);
+  white-space: nowrap;
+}
+
+.dash-root .lc-line {
+  width: 26px;
+  height: 2px;
+  background: var(--border);
+}
+
+.dash-root .lc-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--track);
+  border: 2px solid var(--border-2);
+}
+
+.dash-root .lc-step.done {
+  color: var(--text-2);
+}
+
+.dash-root .lc-step.done .lc-dot {
+  background: var(--green);
+  border-color: var(--green);
+}
+
+.dash-root .lc-step.current .lc-dot {
+  background: var(--orange);
+  border-color: var(--orange);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent);
+}
+
+/* ---- Help Center ---- */
+.dash-root .help-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 16px;
+  height: 52px;
+  border-radius: 14px;
+  border: 1px solid var(--border-2);
+  background: var(--panel);
+  margin-bottom: 18px;
+}
+
+.dash-root .help-search>svg {
+  color: var(--faint);
+}
+
+.dash-root .help-topics {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  align-items: start;
+}
+
+.dash-root .help-topic-card {
+  padding: 0;
+  overflow: hidden;
+  --accent: var(--orange);
+}
+
+.dash-root .help-topic-head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 18px;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+}
+
+.dash-root .help-topic-ic {
+  width: 44px;
+  height: 44px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
+  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent);
+  flex: 0 0 auto;
+}
+
+.dash-root .help-topic-txt {
+  flex: 1;
+}
+
+.dash-root .help-topic-title {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.dash-root .help-topic-count {
+  font-size: 11.5px;
+  color: var(--muted);
+}
+
+.dash-root .acc-chev {
+  color: var(--faint);
+  transition: transform 0.2s;
+}
+
+.dash-root .acc-chev.open {
+  transform: rotate(180deg);
+}
+
+.dash-root .help-acc-list {
+  padding: 0 18px 10px;
+}
+
+.dash-root .help-results {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .help-acc {
+  border-top: 1px solid var(--border);
+}
+
+.dash-root .help-acc summary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 13px 0;
+  cursor: pointer;
+  list-style: none;
+}
+
+.dash-root .help-acc summary::-webkit-details-marker {
+  display: none;
+}
+
+.dash-root .help-q {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .help-acc summary .acc-chev {
+  transition: transform 0.2s;
+}
+
+.dash-root .help-acc[open] summary .acc-chev {
+  transform: rotate(180deg);
+}
+
+.dash-root .help-acc p {
+  margin: 0 0 14px;
+  font-size: 12.5px;
+  color: var(--muted);
+  line-height: 1.55;
+  animation: ds-rise 0.2s ease;
+}
+
+/* ---- Live chat handshake ---- */
+.dash-root .chat-connecting {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 30px 0;
+}
+
+.dash-root .chat-radar {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+
+.dash-root .radar-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid var(--orange);
+  animation: ds-radar 1.8s ease-out infinite;
+}
+
+.dash-root .radar-ring.d2 {
+  animation-delay: 0.9s;
+}
+
+.dash-root .chat-connecting-txt {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.dash-root .chat-connecting-txt .dots span {
+  animation: ds-bounce 1.2s infinite;
+  display: inline-block;
+}
+
+.dash-root .chat-connecting-txt .dots span:nth-child(2) {
+  animation-delay: 0.18s;
+}
+
+.dash-root .chat-connecting-txt .dots span:nth-child(3) {
+  animation-delay: 0.36s;
+}
+
+.dash-root .livechat-joined {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--muted);
+  padding: 6px 0 10px;
+}
+
+/* ---- phone input / callback ---- */
+.dash-root .phone-input {
+  display: flex;
+  gap: 8px;
+}
+
+.dash-root .phone-input .cc {
+  width: 110px;
+  flex: 0 0 auto;
+}
+
+.dash-root .phone-input .ds-input {
+  flex: 1;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  padding: 0 13px;
+}
+
+.dash-root .cb-slots {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dash-root .cb-slot {
+  display: flex;
+  justify-content: space-between;
+  padding: 11px 13px;
+  border-radius: 11px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  cursor: pointer;
+  font-family: inherit;
+  color: var(--text);
+  transition: 0.14s;
+}
+
+.dash-root .cb-slot.active {
+  border-color: var(--orange);
+  background: color-mix(in srgb, var(--orange) 9%, transparent);
+}
+
+.dash-root .cb-slot-l {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-root .cb-slot-r {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* ---- Rules grid (uniform brand-orange cards) ---- */
+.dash-root .rules-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.dash-root .rule-card {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  --accent: var(--orange);
+  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
+}
+
+.dash-root .rule-watermark {
+  position: absolute;
+  right: 8px;
+  bottom: -22px;
+  font-size: 120px;
+  font-weight: 800;
+  letter-spacing: -0.05em;
+  line-height: 1;
+  color: color-mix(in srgb, var(--accent) 12%, transparent);
+  pointer-events: none;
+  user-select: none;
+}
+
+.dash-root .rule-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 14px;
+  position: relative;
+  z-index: 1;
+}
+
+.dash-root .rule-ic {
+  width: 44px;
+  height: 44px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
+}
+
+.dash-root .rule-card:hover {
+  transform: translateY(-3px);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  box-shadow: 0 18px 42px -24px color-mix(in srgb, var(--accent) 70%, #000);
+}
+
+.dash-root .rule-title {
+  font-size: 15px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  position: relative;
+  z-index: 1;
+  letter-spacing: -0.01em;
+}
+
+.dash-root .rule-detail {
+  font-size: 12.5px;
+  color: var(--muted);
+  line-height: 1.55;
+  margin: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.dash-root .rule-foot {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 16px;
+  padding-top: 13px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  position: relative;
+  z-index: 1;
+}
+
+/* ---- responsive ---- */
+@media (max-width: 1180px) {
+
+  .dash-root .grid-side,
+  .dash-root .consent-cols,
+  .dash-root .channel-grid,
+  .dash-root .help-topics,
+  .dash-root .grid-2 {
+    grid-template-columns: 1fr;
+  }
+
+  .dash-root .rules-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .dash-root .msgctr {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .dash-root .msg-inbox {
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+    max-height: 280px;
+  }
+}
+
+@media (max-width: 680px) {
+  .dash-root .rules-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .dash-root .notif-row {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .dash-root .notif-head {
+    display: none;
+  }
+
+  .dash-root .ticket-row {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+
+  .dash-root .ticket-head {
+    display: none;
+  }
+
+  .dash-root .pw-checks,
+  .dash-root .time-windows {
+    grid-template-columns: 1fr;
+  }
+
+  .dash-root .profile-hero-stats {
+    padding-left: 0;
+    border-top: 1px solid var(--border);
+    padding-top: 14px;
+    width: 100%;
+  }
+}
+
+/* =========================================================== */
+/* Glass box treatment — every card wrapped in a brand-brown    */
+/* border over a translucent black, blurred (dark theme).       */
+/* =========================================================== */
+.dash-root[data-theme="dark"] .card {
+  background: rgba(0, 0, 0, 0.54);
+  border: 0.5px solid #452B1A;
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  border-radius: 20px;
+}
+
+.dash-root[data-theme="dark"] .ds-modal,
+.dash-root[data-theme="dark"] .tm-menu-pop {
+  border: 0.5px solid #452B1A;
+  border-radius: 20px;
+}
+
+/* =========================================================== */
+/* Team Management                                             */
+/* =========================================================== */
+.dash-root .tm {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* ---- Crew hero ---- */
+.dash-root .tm-hero {
+  position: relative;
+  overflow: hidden;
+  border-radius: 24px;
+  padding: 28px 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+  border: 0.5px solid #452B1A;
+  background: var(--panel);
+}
+
+.dash-root[data-theme="light"] .tm-hero {
+  border: 1px solid var(--border);
+}
+
+.dash-root .tm-hero-orbs {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
     radial-gradient(42% 120% at 92% -20%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 60%),
-    radial-gradient(40% 120% at 8% 130%, rgba(255,255,255,0.05), transparent 62%); }
-  .dash-root .tm-hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
-    background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
-    background-size: 30px 30px; -webkit-mask-image: radial-gradient(70% 120% at 80% 0%, #000, transparent 70%); mask-image: radial-gradient(70% 120% at 80% 0%, #000, transparent 70%); }
-  .dash-root .tm-hero-main { position: relative; display: flex; align-items: center; gap: 22px; min-width: 0; }
-  .dash-root .tm-stack { display: flex; align-items: center; flex: 0 0 auto; }
-  .dash-root .tm-stack-av { margin-left: -14px; border-radius: 50%; box-shadow: 0 0 0 3px var(--panel); transition: 0.18s; }
-  .dash-root .tm-stack-av:first-child { margin-left: 0; }
-  .dash-root .tm-stack-av:hover { transform: translateY(-5px); z-index: 20 !important; }
-  .dash-root .tm-stack-more { margin-left: -14px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--grad-brand); box-shadow: 0 0 0 3px var(--panel); }
-  .dash-root .tm-hero-copy { min-width: 0; }
-  .dash-root .tm-hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); }
-  .dash-root .tm-hero-copy h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 4px; }
-  .dash-root .tm-hero-copy p { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 460px; }
-  .dash-root .tm-hero-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
-  .dash-root .tm-hero-live b { color: var(--green); }
-  .dash-root .tm-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: tm-pulse 1.8s infinite; }
-  .dash-root .tm-hero-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); margin: 0 4px; }
-  .dash-root .tm-hero-actions { position: relative; flex: 0 0 auto; }
-  @keyframes tm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
+    radial-gradient(40% 120% at 8% 130%, rgba(255, 255, 255, 0.05), transparent 62%);
+}
 
-  /* ---- Metric strip ---- */
-  .dash-root .tm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
-  .dash-root .card.tm-stat { display: flex; flex-direction: column; gap: 16px; padding: 20px; position: relative; overflow: hidden; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; }
-  .dash-root .card.tm-stat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--rc) 42%, var(--border)) !important; box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--rc) 80%, #000); }
-  .dash-root .card.tm-stat::after { content: ""; position: absolute; top: -40%; right: -20%; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 20%, transparent), transparent 70%); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
-  .dash-root .card.tm-stat:hover::after { opacity: 1; }
-  .dash-root .tm-stat-head { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
-  .dash-root .tm-stat-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 30%, transparent); }
-  .dash-root .tm-stat-body { min-width: 0; }
-  .dash-root .tm-stat-val { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
-  .dash-root .tm-stat-lbl { font-size: 12.5px; color: var(--text-2); font-weight: 600; margin-top: 6px; }
-  .dash-root .tm-stat-bar { display: block; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--rc) 16%, transparent); overflow: hidden; position: relative; z-index: 1; }
-  .dash-root .tm-stat-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--rc); }
-  .dash-root .tm-stat-foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); padding-top: 14px; border-top: 1px solid var(--border); margin-top: auto; position: relative; z-index: 1; }
-  .dash-root .tm-stat-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--rc); }
+.dash-root .tm-hero-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.5;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+  background-size: 30px 30px;
+  -webkit-mask-image: radial-gradient(70% 120% at 80% 0%, #000, transparent 70%);
+  mask-image: radial-gradient(70% 120% at 80% 0%, #000, transparent 70%);
+}
 
-  /* ---- Tabs ---- */
-  .dash-root .tm-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
-  .dash-root .tm-tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.14s; }
-  .dash-root .tm-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--orange) 40%, var(--border-2)); }
-  .dash-root .tm-tab.active { color: #fff; background: rgba(253, 169, 19, 0.92); border-color: transparent; box-shadow: var(--glow-orange); }
-  .dash-root .tm-tab.active svg { color: #fff; }
-  .dash-root .tm-tab-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text-2); }
-  .dash-root .tm-tab.active .tm-tab-badge { background: rgba(255,255,255,0.26); color: #fff; }
+.dash-root .tm-hero-main {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  min-width: 0;
+}
 
-  /* Brand action — solid orange (no gradient) + white text/icon */
-  .dash-root .tm .ds-btn.v-primary { background: rgba(253, 169, 19, 0.92); color: #fff; border-radius: 9.132px; box-shadow: 0 8px 20px -10px rgba(253, 169, 19, 0.75); }
-  .dash-root .tm .ds-btn.v-primary svg { color: #fff; }
-  .dash-root .tm .ds-btn.v-primary:not(:disabled):hover { background: rgba(253, 169, 19, 1); }
-  .dash-root .tm-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
-  .dash-root .tm-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; height: 44px; padding: 0 13px; border-radius: 13px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); transition: 0.14s; }
-  .dash-root .tm-search:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--ring); color: var(--orange); }
-  .dash-root .tm-search .ds-input { flex: 1; }
-  .dash-root .tm-search-x { border: 0; background: none; color: var(--faint); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 6px; }
-  .dash-root .tm-search-x:hover { color: var(--text); background: var(--panel-3); }
-  .dash-root .tm-viewtoggle { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--panel-2); }
-  .dash-root .tm-viewtoggle button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: 0.14s; }
-  .dash-root .tm-viewtoggle button:hover { color: var(--text); }
-  .dash-root .tm-viewtoggle button.on { background: var(--grad-brand); color: #fff; }
+.dash-root .tm-stack {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
 
-  /* ---- Role filter chips ---- */
-  .dash-root .tm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
-  .dash-root .tm-chip { --rc: var(--text-2); display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.14s; }
-  .dash-root .tm-chip:hover { border-color: color-mix(in srgb, var(--rc) 55%, var(--border-2)); }
-  .dash-root .tm-chip.on { color: var(--rc); border-color: color-mix(in srgb, var(--rc) 55%, transparent); background: color-mix(in srgb, var(--rc) 13%, transparent); }
-  .dash-root .tm-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
-  .dash-root .tm-chip i { font-style: normal; font-weight: 800; opacity: 0.7; }
+.dash-root .tm-stack-av {
+  margin-left: -14px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px var(--panel);
+  transition: 0.18s;
+}
 
-  /* ---- People gallery ---- */
-  .dash-root .tm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 14px; }
-  .dash-root .card.tm-pcard { position: relative; overflow: hidden; padding: 18px; display: flex; flex-direction: column; transition: 0.18s; --rc: var(--orange); }
-  .dash-root .card.tm-pcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--rc) 50%, var(--border)) !important; box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--rc) 85%, #000); }
-  .dash-root .tm-pcard-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--rc) 16%, transparent), transparent 60%); opacity: 0; transition: 0.18s; }
-  .dash-root .card.tm-pcard:hover .tm-pcard-bg { opacity: 1; }
-  .dash-root .tm-pcard-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
-  .dash-root .tm-pcard-av { position: relative; border-radius: 50%; padding: 3px; background: color-mix(in srgb, var(--rc) 65%, transparent); }
-  .dash-root .tm-pcard-name { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin-top: 13px; }
-  .dash-root .tm-crown { color: var(--orange); display: inline-grid; place-items: center; }
-  .dash-root .tm-pcard-title { font-size: 12.5px; color: var(--text-2); font-weight: 600; margin-top: 3px; }
-  .dash-root .tm-pcard-email { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .dash-root .tm-pcard-email svg { color: var(--faint); flex: 0 0 auto; }
-  .dash-root .tm-pcard-role { margin-top: 14px; }
-  .dash-root .tm-meter { margin-top: 14px; }
-  .dash-root .tm-meter-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--faint); margin-bottom: 6px; }
-  .dash-root .tm-meter-h b { color: var(--text); font-size: 12px; font-weight: 800; }
-  .dash-root .tm-meter-track { display: block; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--rc) 14%, transparent); overflow: hidden; }
-  .dash-root .tm-meter-fill { display: block; height: 100%; border-radius: 99px; background: var(--rc); transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1); }
-  .dash-root .tm-pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border); }
+.dash-root .tm-stack-av:first-child {
+  margin-left: 0;
+}
 
-  .dash-root .tm-table { display: flex; flex-direction: column; }
-  .dash-root .tm-row { display: grid; grid-template-columns: minmax(220px, 2.4fr) 210px 190px 110px 52px; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--border); }
-  .dash-root .tm-row:last-child { border-bottom: 0; }
-  .dash-root .tm-head { padding-top: 12px; padding-bottom: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); background: var(--panel-2); }
-  .dash-root .tm-row:not(.tm-head):hover { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
-  .dash-root .tm-member { display: flex; align-items: center; gap: 12px; min-width: 0; }
-  .dash-root .tm-member-meta { min-width: 0; }
-  .dash-root .tm-name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; }
-  .dash-root .tm-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .dash-root .tm-c-num { text-align: right; font-size: 14px; }
-  .dash-root .tm-c-num b { font-weight: 800; }
-  .dash-root .tm-dash { color: var(--faint); }
-  .dash-root .tm-c-act { display: flex; justify-content: center; position: relative; }
-  
-  .dash-root .tm-rolebadge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 32%, transparent); white-space: nowrap; }
-  .dash-root .tm-roleselect { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 11px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--panel-2); transition: 0.14s; }
-  .dash-root .tm-roleselect:hover { border-color: color-mix(in srgb, var(--rc) 55%, transparent); }
-  .dash-root .tm-roledot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--rc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 22%, transparent); }
-  .dash-root .tm-roleselect .ds-select { border: 0; background-color: transparent; height: 34px; padding: 0 26px 0 0; font-weight: 600; font-size: 12.5px; box-shadow: none; background-position: calc(100% - 6px) 15px, calc(100% - 1px) 15px; }
-  .dash-root .tm-roleselect .ds-select:focus { box-shadow: none; }
+.dash-root .tm-stack-av:hover {
+  transform: translateY(-5px);
+  z-index: 20 !important;
+}
 
-  /* Multi-role: chips (read-only) + picker (toggle) */
-  .dash-root .tm-rolechips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
-  .dash-root .tm-rolepicker { display: flex; flex-wrap: wrap; gap: 8px; }
-  .dash-root .tm-rolepick { --rc: var(--text-2); display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 9px; border-radius: 99px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text-1); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: 0.14s; }
-  .dash-root .tm-rolepick:hover { border-color: color-mix(in srgb, var(--rc) 55%, transparent); }
-  .dash-root .tm-rolepick.on { color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); border-color: color-mix(in srgb, var(--rc) 40%, transparent); }
-  .dash-root .tm-rolepick-check { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-2); color: #fff; flex: 0 0 auto; }
-  .dash-root .tm-rolepick.on .tm-rolepick-check { background: var(--rc); border-color: var(--rc); }
+.dash-root .tm-stack-more {
+  margin-left: -14px;
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 13px;
+  font-weight: 800;
+  color: #fff;
+  background: var(--grad-brand);
+  box-shadow: 0 0 0 3px var(--panel);
+}
 
-  .dash-root .tm-statuscell { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
-  .dash-root .tm-lastactive { color: var(--faint); font-weight: 500; font-size: 11.5px; margin-left: 2px; }
-  
-  .dash-root .tm-menu-lock { color: var(--faint); display: grid; place-items: center; }
-  .dash-root .tm-menu-pop { position: absolute; top: 38px; right: 0; z-index: 30; min-width: 178px; padding: 6px; border-radius: 13px; border: 1px solid var(--border-2); background: var(--panel); box-shadow: var(--shadow), 0 8px 30px -12px rgba(0,0,0,0.6); animation: ds-rise 0.14s ease; }
-  .dash-root .tm-menu-scrim { position: fixed; inset: 0; z-index: 20; }
-  .dash-root .tm-menu-pop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
-  .dash-root .tm-menu-pop button:hover { background: var(--panel-2); color: var(--text); }
-  .dash-root .tm-menu-pop button.danger { color: var(--red); }
-  .dash-root .tm-menu-pop button.danger:hover { background: color-mix(in srgb, var(--red) 14%, transparent); }
-  .dash-root .tm-menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
-  
-  .dash-root .tm-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 54px 20px; color: var(--muted); text-align: center; }
-  .dash-root .tm-empty-ic { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; color: var(--orange); background: color-mix(in srgb, var(--orange) 13%, transparent); }
-  .dash-root .tm-empty p { font-size: 13px; }
-  
-  .dash-root .tm-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
-  .dash-root .tm-rolecard { position: relative; overflow: hidden; --rc: var(--orange); }
-  .dash-root .tm-rolecard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rc); }
-  .dash-root .tm-rolecard-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
-  .dash-root .tm-ring { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: conic-gradient(var(--rc) calc(var(--pct) * 1%), color-mix(in srgb, var(--rc) 16%, transparent) 0); }
-  .dash-root .tm-ring-in { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--rc); background: var(--panel); }
-  .dash-root[data-theme="dark"] .tm-ring-in { background: #14110d; }
-  .dash-root .tm-rolecard-name { font-size: 15px; font-weight: 800; display: flex; align-items: center; }
-  .dash-root .tm-rolecard-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
-  .dash-root .tm-rolecard-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
+.dash-root .tm-hero-copy {
+  min-width: 0;
+}
 
-  /* Attire & appearance — persona-guide cues */
-  .dash-root .tm-attire { border-top: 1px solid var(--border); padding-top: 13px; margin-bottom: 13px; }
-  .dash-root .tm-attire-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc); margin-bottom: 9px; }
-  .dash-root .tm-attire-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
-  .dash-root .tm-attire-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
-  .dash-root .tm-attire-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rc); flex: 0 0 auto; margin-top: 7px; }
+.dash-root .tm-hero-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--orange);
+}
 
-  /* Common overlap — how the role blends with others */
-  .dash-root .tm-overlap { display: flex; gap: 10px; padding: 11px 12px; margin-bottom: 16px; border-radius: 12px; background: color-mix(in srgb, var(--rc) 7%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 18%, transparent); }
-  .dash-root .tm-overlap-ic { color: var(--rc); flex: 0 0 auto; margin-top: 1px; }
-  .dash-root .tm-overlap b { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); margin-bottom: 3px; }
-  .dash-root .tm-overlap p { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
+.dash-root .tm-hero-copy h1 {
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  margin: 6px 0 4px;
+}
 
-  .dash-root .tm-permgroup { margin-bottom: 14px; }
-  .dash-root .tm-permgroup:last-child { margin-bottom: 0; }
-  .dash-root .tm-permgroup-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin-bottom: 8px; }
-  .dash-root .tm-perm { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 11px; border: 1px solid transparent; transition: 0.14s; }
-  .dash-root .tm-perm:hover { background: var(--panel-2); }
-  .dash-root .tm-perm.on { background: color-mix(in srgb, var(--rc) 8%, transparent); border-color: color-mix(in srgb, var(--rc) 22%, transparent); }
-  .dash-root .tm-perm-meta { min-width: 0; }
-  .dash-root .tm-perm-label { display: block; font-size: 12.5px; font-weight: 600; }
-  .dash-root .tm-perm-desc { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }
-  
-  .dash-root .tm-invite-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
-  .dash-root .tm-invite-head h3 { font-size: 14.5px; font-weight: 700; }
-  .dash-root .tm-invite-head p { font-size: 12px; color: var(--muted); margin-top: 2px; }
-  .dash-root .tm-invites { display: flex; flex-direction: column; }
-  .dash-root .tm-inviterow { display: flex; align-items: center; gap: 13px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
-  .dash-root .tm-inviterow:last-child { border-bottom: 0; }
-  .dash-root .tm-invite-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
-  .dash-root .tm-invite-meta { flex: 1; min-width: 0; }
-  .dash-root .tm-invite-actions { display: flex; gap: 8px; }
-  
-  .dash-root .tm-form { display: flex; flex-direction: column; }
-  .dash-root .tm-roleprev { border-radius: 13px; border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent); background: color-mix(in srgb, var(--rc) 8%, transparent); padding: 13px 15px; --rc: var(--blue); }
-  .dash-root .tm-roleprev-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
-  .dash-root .tm-roleprev-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); }
-  .dash-root .tm-roleprev p { font-size: 12px; color: var(--muted); margin: 7px 0 0; line-height: 1.5; }
-  .dash-root .tm-edit-hero { display: flex; align-items: center; gap: 14px; padding: 4px 0 16px; }
-  .dash-root .tm-confirm-text { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
-  
-  /* =========================================================== */
-  /* AI Assistant — Lynk AI                                      */
-  /* =========================================================== */
-  .dash-root .ai-view { display: flex; flex-direction: column; gap: 16px; height: calc(100vh - 168px); min-height: 520px; }
-  .dash-root .ai-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
-  .dash-root .ai-head-l { display: flex; align-items: center; gap: 13px; }
-  .dash-root .ai-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--grad-brand); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--orange) 80%, transparent); }
-  .dash-root .ai-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
-  .dash-root .ai-head h1 { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
-  .dash-root .ai-head-actions { display: flex; align-items: center; gap: 10px; }
-  .dash-root .ai-model { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border-2); background: var(--panel-2); font-size: 12px; font-weight: 600; color: var(--muted); }
-  .dash-root .ai-model-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
-  
-  .dash-root .ai-stage { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
-  .dash-root .ai-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
-    background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 22px 22px;
-    -webkit-mask-image: radial-gradient(60% 55% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(60% 55% at 50% 0%, #000, transparent 75%); }
-  .dash-root .ai-scroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; padding: 26px; }
-  .dash-root .ai-scroll::-webkit-scrollbar { width: 9px; }
-  .dash-root .ai-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
-  
-  .dash-root .ai-hero { max-width: 720px; margin: 0 auto; padding: 18px 0 6px; text-align: center; display: flex; flex-direction: column; align-items: center; }
-  .dash-root .ai-orb-wrap { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
-  .dash-root .ai-orb-ring { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 28px; border: 1.5px solid color-mix(in srgb, var(--orange) 50%, transparent); animation: ai-orbring 3s ease-out infinite; }
-  .dash-root .ai-orb-ring.d2 { animation-delay: 1s; }
-  .dash-root .ai-orb-ring.d3 { animation-delay: 2s; }
-  @keyframes ai-orbring { 0% { transform: scale(1); opacity: 0.65; } 100% { transform: scale(2.1); opacity: 0; } }
-  .dash-root .ai-hero-orb { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; color: #fff; background: rgba(253, 169, 19, 0.92); box-shadow: 0 18px 50px -14px color-mix(in srgb, var(--orange) 78%, transparent), 0 0 0 1px color-mix(in srgb, var(--orange) 40%, transparent); animation: ai-float 4s ease-in-out infinite; }
-  .dash-root .ai-hero h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; margin-top: 20px; }
-  .dash-root .ai-hero > p { font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 480px; margin: 10px auto 0; }
-  .dash-root .ai-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 28px; }
-  .dash-root .ai-cap { --rc: var(--orange); text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; transition: 0.16s; }
-  .dash-root .ai-cap:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--rc) 50%, transparent); box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--rc) 80%, #000); }
-  .dash-root .ai-cap-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--rc); background: color-mix(in srgb, var(--rc) 15%, transparent); margin-bottom: 4px; }
-  .dash-root .ai-cap-title { font-size: 13.5px; font-weight: 700; }
-  .dash-root .ai-cap-desc { font-size: 12px; color: var(--muted); line-height: 1.45; }
-  .dash-root .ai-suggest { width: 100%; margin-top: 26px; }
-  .dash-root .ai-suggest-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 11px; }
-  .dash-root .ai-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
-  .dash-root .ai-chip, .dash-root .ai-quick { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.14s; }
-  .dash-root .ai-chip:hover, .dash-root .ai-quick:hover { border-color: var(--orange); color: var(--text); background: color-mix(in srgb, var(--orange) 10%, var(--panel-2)); }
-  .dash-root .ai-chip svg, .dash-root .ai-quick svg { color: var(--orange); flex: 0 0 auto; }
-  
-  .dash-root .ai-thread { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
-  .dash-root .ai-msg { display: flex; gap: 11px; align-items: flex-start; }
-  .dash-root .ai-msg.me { flex-direction: row-reverse; }
-  .dash-root .ai-msg-av { width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto; }
-  .dash-root .ai-bubble { max-width: 78%; padding: 12px 15px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel-2); font-size: 13.5px; line-height: 1.6; }
-  .dash-root .ai-bubble p { margin: 0; }
-  .dash-root .ai-bubble p + p { margin-top: 5px; }
-  .dash-root .ai-msg.me .ai-bubble { background: var(--grad-brand); color: #fff; border-color: transparent; border-bottom-right-radius: 5px; font-weight: 500; }
-  .dash-root .ai-msg.ai .ai-bubble { border-bottom-left-radius: 5px; }
-  .dash-root .ai-msg-actions { display: flex; gap: 4px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
-  .dash-root .ai-msg-actions button { width: 26px; height: 26px; border-radius: 8px; border: 0; background: none; color: var(--faint); display: grid; place-items: center; cursor: pointer; transition: 0.14s; }
-  .dash-root .ai-msg-actions button:hover { background: var(--panel-3); color: var(--text); }
-  .dash-root .ai-typing { display: inline-flex; gap: 5px; align-items: center; }
-  .dash-root .ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: ai-blink 1.2s infinite ease-in-out; }
-  .dash-root .ai-typing span:nth-child(2) { animation-delay: 0.18s; }
-  .dash-root .ai-typing span:nth-child(3) { animation-delay: 0.36s; }
-  
-  .dash-root .ai-composer { border-top: 1px solid var(--border); padding: 14px 18px 12px; background: color-mix(in srgb, var(--panel-2) 40%, transparent); }
-  .dash-root .ai-quickrow { display: flex; gap: 8px; margin-bottom: 11px; overflow-x: auto; padding-bottom: 2px; }
-  .dash-root .ai-quickrow::-webkit-scrollbar { height: 0; }
-  .dash-root .ai-quick { white-space: nowrap; }
-  .dash-root .ai-inputbar { display: flex; align-items: flex-end; gap: 9px; padding: 7px 7px 7px 11px; border-radius: 16px; border: 1px solid var(--border-2); background: var(--panel); transition: 0.14s; }
-  .dash-root .ai-inputbar:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--ring); }
-  .dash-root .ai-attach { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: 0.14s; }
-  .dash-root .ai-attach:hover { background: var(--panel-3); color: var(--text); }
-  .dash-root .ai-textarea { flex: 1; resize: none; border: 0; background: none; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; line-height: 1.5; max-height: 132px; padding: 8px 0; }
-  .dash-root .ai-textarea::placeholder { color: var(--faint); }
-  .dash-root .ai-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--grad-brand); box-shadow: 0 8px 20px -9px color-mix(in srgb, var(--orange) 80%, transparent); transition: 0.14s; }
-  .dash-root .ai-send:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); }
-  .dash-root .ai-send:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
-  .dash-root .ai-foot { text-align: center; font-size: 11px; color: var(--faint); margin-top: 9px; }
-  
-  @keyframes ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
-  @keyframes ai-blink { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
-  
-  @media (max-width: 920px) {
-    .dash-root .tm-stats { grid-template-columns: 1fr 1fr; }
-    .dash-root .tm-hero { padding: 22px; }
-    .dash-root .tm-hero-actions { width: 100%; }
-    .dash-root .tm-hero-actions .ds-btn { width: 100%; }
-    .dash-root .tm-head { display: none; }
-    .dash-root .tm-row { grid-template-columns: 1fr auto; row-gap: 10px; padding: 14px 16px; }
-    .dash-root .tm-member { grid-column: 1 / -1; }
-    .dash-root .tm-rolecell { grid-column: 1; }
-    .dash-root .tm-c-act { grid-column: 2; grid-row: 2; }
-    .dash-root .tm-statuscell { grid-column: 1 / -1; }
-    .dash-root .tm-c-num { grid-column: 1 / -1; text-align: left; }
-    .dash-root .tm-c-num::before { content: "Open deals: "; color: var(--faint); font-size: 12px; }
-    .dash-root .ai-caps { grid-template-columns: 1fr; }
-    .dash-root .ai-bubble { max-width: 86%; }
-    .dash-root .ai-view { height: calc(100vh - 150px); }
-    .dash-root .proj-row { grid-template-columns: 1fr !important; row-gap: 8px; padding: 14px 16px; }
-    .dash-root .proj-head { display: none; }
-    .dash-root .proj-c-act { justify-self: end; }
+.dash-root .tm-hero-copy p {
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 1.5;
+  max-width: 460px;
+}
+
+.dash-root .tm-hero-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 14px;
+  font-size: 12.5px;
+  color: var(--text-2);
+  font-weight: 600;
+}
+
+.dash-root .tm-hero-live b {
+  color: var(--green);
+}
+
+.dash-root .tm-pulse {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--green);
+  animation: tm-pulse 1.8s infinite;
+}
+
+.dash-root .tm-hero-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--faint);
+  margin: 0 4px;
+}
+
+.dash-root .tm-hero-actions {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+@keyframes tm-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent);
   }
 
-  /* ---- Projects (Construction + Pipeline Leads) ---- */
-  .dash-root .proj-toolbar .tm-tabs { flex: 0 0 auto; }
-  .dash-root .proj-toolbar .tm-chips { flex: 0 0 auto; margin-left: auto; }
-  .dash-root .proj-table { display: flex; flex-direction: column; }
-  .dash-root .proj-row { display: grid; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--border); }
-  .dash-root .proj-row:last-child { border-bottom: 0; }
-  .dash-root .proj-head { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
-  .dash-root .proj-row:not(.proj-head):hover { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
-  .dash-root .proj-lead { min-width: 0; }
-  .dash-root .proj-lead-name { font-size: 13.5px; font-weight: 700; }
-  .dash-root .proj-lead-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .dash-root .proj-text { font-size: 13px; color: var(--text-2); text-align: center; }
-  .dash-root .proj-c-num { text-align: center; }
-  .dash-root .proj-row .ds-pill { justify-self: center; justify-content: center; }
-  .dash-root .proj-c-act { display: flex; justify-content: center; align-items: center; gap: 6px; position: relative; }
-  .dash-root .proj-cd-search { margin-bottom: 14px; }
-  .dash-root .proj-cd-table { margin-bottom: 14px; }
-  .dash-root .proj-progress { display: flex; align-items: center; gap: 8px; }
-  .dash-root .proj-progress-track { flex: 1; display: block; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
-  .dash-root .proj-progress-fill { display: block; height: 100%; border-radius: 99px; background: var(--orange); transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1); }
-  .dash-root .proj-progress b { font-size: 12px; font-weight: 700; color: var(--text-2); flex: 0 0 auto; }
-  .dash-root .proj-health { font-weight: 800; text-align: center; }
-  .dash-root .proj-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 54px 20px; color: var(--muted); text-align: center; }
-  .dash-root .proj-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px 0; font-size: 12.5px; color: var(--muted); }
-  .dash-root .proj-foot b { color: var(--text); font-size: 15px; font-weight: 800; }
-  .dash-root .proj-detail-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
-  .dash-root .proj-detail-row span { color: var(--muted); }
-  .dash-root .proj-detail-row b { color: var(--text); font-weight: 700; }
-
-  /* ========================================================== */
-  /* Leads — pipeline board + rich detail popup                 */
-  /* ========================================================== */
-
-  /* ---- stat strip ---- */
-  .dash-root .leads-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
-  .dash-root .leads-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--card-grad); box-shadow: var(--card-hi); position: relative; overflow: hidden; }
-  .dash-root .leads-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); }
-  .dash-root .leads-stat.tone-blue::before { background: var(--blue); }
-  .dash-root .leads-stat.tone-purple::before { background: var(--purple); }
-  .dash-root .leads-stat.tone-green::before { background: var(--green); }
-  .dash-root .leads-stat.tone-orange::before { background: var(--orange); }
-  .dash-root .leads-stat-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); flex: 0 0 auto; }
-  .dash-root .leads-stat.tone-blue .leads-stat-ic { background: color-mix(in srgb, var(--blue) 16%, transparent); color: #6f9bff; }
-  .dash-root .leads-stat.tone-purple .leads-stat-ic { background: color-mix(in srgb, var(--purple) 16%, transparent); color: #b07bf2; }
-  .dash-root .leads-stat.tone-green .leads-stat-ic { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
-  .dash-root .leads-stat-val { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
-  .dash-root .leads-stat-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }
-
-  /* ---- toolbar ---- */
-  .dash-root .leads-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
-  .dash-root .leads-search { display: flex; align-items: center; gap: 9px; flex: 1 1 260px; min-width: 220px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); }
-  .dash-root .leads-search:focus-within { border-color: color-mix(in srgb, var(--orange) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 14%, transparent); }
-  .dash-root .leads-search input { flex: 1; border: 0; background: none; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; }
-  .dash-root .leads-search input::placeholder { color: var(--muted); }
-  .dash-root .leads-search-x { border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 6px; }
-  .dash-root .leads-search-x:hover { color: var(--text); background: var(--panel-3); }
-  .dash-root .leads-tabs { display: inline-flex; gap: 3px; padding: 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
-  .dash-root .leads-tab { border: 0; background: none; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; cursor: pointer; transition: 0.14s; }
-  .dash-root .leads-tab:hover { color: var(--text-2); }
-  .dash-root .leads-tab.active { background: var(--orange); color: #1a1205; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--orange) 60%, transparent); }
-
-  /* ---- board ---- */
-  .dash-root .leads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
-  .dash-root .lead-card { text-align: left; width: 100%; cursor: pointer; display: flex; flex-direction: column; gap: 11px; padding: 16px 17px; border-radius: 18px; border: 1px solid var(--border); background: var(--card-grad); box-shadow: var(--card-hi), 0 1px 2px rgba(0,0,0,0.18); font-family: inherit; color: var(--text); transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; }
-  .dash-root .lead-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--orange) 40%, var(--border)); box-shadow: var(--shadow), 0 14px 34px -20px color-mix(in srgb, var(--orange) 50%, transparent); }
-  .dash-root .lead-card-top { display: flex; align-items: center; gap: 12px; }
-  .dash-root .lead-ava { position: relative; border-radius: 50%; padding: 3px; display: inline-flex; }
-  .dash-root .lead-ava.prio-high { box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 70%, transparent); }
-  .dash-root .lead-ava.prio-medium { box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 70%, transparent); }
-  .dash-root .lead-ava.prio-low { box-shadow: 0 0 0 2px var(--border-2); }
-  .dash-root .lead-card-id { flex: 1; min-width: 0; }
-  .dash-root .lead-card-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
-  .dash-root .lead-card-sub { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
-  .dash-root .lead-card-sub svg { color: var(--orange); }
-  .dash-root .lead-code { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-2); }
-  .dash-root .lead-card-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
-  .dash-root .lead-card-row svg { color: var(--muted); flex: 0 0 auto; }
-  .dash-root .lead-card-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .lead-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 3px; padding-top: 11px; border-top: 1px solid var(--border); }
-  .dash-root .lead-source { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
-  .dash-root .lead-card-spacer { flex: 1; }
-  .dash-root .lead-rep { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
-  .dash-root .lead-updated { font-size: 10.5px; color: var(--faint, var(--muted)); }
-
-  .dash-root .leads-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 20px; color: var(--muted); }
-  .dash-root .leads-empty svg { color: var(--muted); margin-bottom: 6px; }
-  .dash-root .leads-empty h3 { font-size: 16px; color: var(--text); }
-
-  /* ---- detail popup ---- */
-  .dash-root .lead-detail { display: flex; flex-direction: column; gap: 16px; }
-  .dash-root .ld-identity { display: flex; align-items: center; gap: 14px; }
-  .dash-root .ld-identity-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
-  .dash-root .ld-identity-pills { display: flex; gap: 6px; margin-top: 6px; }
-  .dash-root .ld-storm { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--border)); background: color-mix(in srgb, var(--orange) 9%, transparent); }
-  .dash-root .ld-storm-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); flex: 0 0 auto; }
-  .dash-root .ld-storm-zone { font-size: 13.5px; font-weight: 700; }
-  .dash-root .ld-storm-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
-
-  .dash-root .ld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-  .dash-root .ld-section { border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); padding: 14px 15px; }
-  .dash-root .ld-section.wide { grid-column: 1 / -1; }
-  .dash-root .ld-section-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--orange); margin-bottom: 12px; }
-  .dash-root .ld-section-body { display: flex; flex-direction: column; gap: 3px; }
-  .dash-root .ld-dl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
-  .dash-root .ld-dl:last-child { border-bottom: 0; }
-  .dash-root .ld-dl-k { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
-  .dash-root .ld-dl-v { font-size: 12.5px; color: var(--text); font-weight: 600; text-align: right; }
-  .dash-root .ld-assign { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
-  .dash-root .ld-sublabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint, var(--muted)); font-weight: 700; margin: 8px 0 6px; }
-  .dash-root .ld-sublabel:first-child { margin-top: 0; }
-  .dash-root .ld-contact-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; color: var(--text); }
-  .dash-root .ld-contact-row svg { color: var(--muted); flex: 0 0 auto; }
-  .dash-root .ld-contact-val { font-weight: 600; }
-  .dash-root .ld-contact-tag { font-size: 10.5px; color: var(--muted); padding: 2px 7px; border-radius: 99px; background: var(--panel-3); }
-  .dash-root .ld-notes p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-top: 2px; }
-
-  /* ---- New Lead form ---- */
-  .dash-root .nl-form { display: flex; flex-direction: column; gap: 16px; }
-  .dash-root .nl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
-  .dash-root .nl-grid .ds-field { margin-bottom: 0; }
-  .dash-root .nl-grid > .ds-field, .dash-root .nl-grid > .nl-full { margin-bottom: 14px; }
-  .dash-root .nl-full { grid-column: 1 / -1; }
-  .dash-root .nl-full .ds-field { margin-bottom: 0; }
-  .dash-root .nl-prio { display: flex; gap: 8px; }
-  .dash-root .nl-prio-btn { flex: 1; height: 42px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.14s; }
-  .dash-root .nl-prio-btn:hover { color: var(--text-2); border-color: var(--muted); }
-  .dash-root .nl-prio-btn.active.low { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--text); border-color: var(--muted); }
-  .dash-root .nl-prio-btn.active.medium { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
-  .dash-root .nl-prio-btn.active.high { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
-  .dash-root .nl-prio-btn.urg.active.standard { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--text); border-color: var(--muted); }
-  .dash-root .nl-prio-btn.urg.active.high { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
-  .dash-root .nl-prio-btn.urg.active.emergency { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 60%, transparent); }
-
-  /* multi-value rows (phones / emails) */
-  .dash-root .nl-multirow { display: flex; gap: 8px; margin-bottom: 8px; }
-  .dash-root .nl-multirow .ds-input { flex: 1; }
-  .dash-root .nl-typesel { flex: 0 0 108px; width: 108px; }
-  .dash-root .nl-rowx { flex: 0 0 auto; width: 42px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: 0.14s; }
-  .dash-root .nl-rowx:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
-  .dash-root .nl-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 8px 13px; border-radius: 10px; border: 1px dashed var(--border-2); background: none; color: var(--orange); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: 0.14s; }
-  .dash-root .nl-add:hover { background: color-mix(in srgb, var(--orange) 10%, transparent); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
-  .dash-root .nl-empty { font-size: 12.5px; color: var(--faint, var(--muted)); padding: 8px 0 10px; }
-
-  /* site photos dropzone */
-  .dash-root .nl-photos { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px; border-radius: 14px; border: 1.5px dashed var(--border-2); background: var(--panel-2); color: var(--muted); cursor: pointer; transition: 0.14s; }
-  .dash-root .nl-photos:hover { border-color: color-mix(in srgb, var(--orange) 50%, transparent); color: var(--orange); background: color-mix(in srgb, var(--orange) 7%, transparent); }
-  .dash-root .nl-photos-t { font-size: 13px; font-weight: 700; color: var(--text-2); }
-  .dash-root .nl-photos:hover .nl-photos-t { color: var(--orange); }
-  .dash-root .nl-photos-s { font-size: 11px; }
-  .dash-root .nl-photo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
-  .dash-root .nl-photo-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
-  .dash-root .nl-photo-chip-x { display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; padding: 0; border: none; background: none; color: inherit; opacity: 0.65; cursor: pointer; }
-  .dash-root .nl-photo-chip-x:hover { opacity: 1; }
-  .dash-root .ds-select.is-placeholder { color: var(--faint, var(--muted)); }
-
-  /* Detail popup — property photo gallery */
-  .dash-root .ld-photo-block { margin-bottom: 14px; }
-  .dash-root .ld-photo-block .ld-section-head { margin-bottom: 8px; }
-  .dash-root .ld-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
-  .dash-root .ld-photo { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-2); background: var(--panel-2); cursor: pointer; }
-  .dash-root .ld-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
-  .dash-root .ld-photo-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
-  /* Edit mode — photo tile with a remove badge */
-  .dash-root .nl-edit-photos { margin-bottom: 8px; }
-  .dash-root .ld-photo-edit { position: relative; }
-  .dash-root .ld-photo-x { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: 99px; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; }
-  .dash-root .ld-photo-x:hover { background: var(--red, #e5484d); }
-
-  /* Canvasser search (Door Knock source) */
-  .dash-root .nl-canvasser { position: relative; }
-  .dash-root .nl-canvasser-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 220px; overflow-y: auto; border: 1px solid var(--border-2); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 32px rgba(0,0,0,0.28); padding: 5px; }
-  .dash-root .nl-canvasser-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: none; border-radius: 9px; background: transparent; color: var(--text); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: 0.12s; }
-  .dash-root .nl-canvasser-opt:hover { background: var(--panel-2); }
-  .dash-root .nl-canvasser-name { font-weight: 700; }
-  .dash-root .nl-canvasser-email { color: var(--muted); font-size: 12px; }
-  .dash-root .nl-canvasser-opt .nl-canvasser-email { margin-left: auto; }
-  .dash-root .nl-canvasser-empty { padding: 10px; color: var(--muted); font-size: 12.5px; text-align: center; }
-  .dash-root .nl-canvasser-chip { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--panel-2); }
-  .dash-root .nl-canvasser-chip .nl-canvasser-email { margin-left: 2px; }
-  .dash-root .nl-canvasser-clear { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: 0.12s; }
-  .dash-root .nl-canvasser-clear:hover { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
-
-  /* ========================================================== */
-  /* Lead Verification — stat tiles + filters + table           */
-  /* ========================================================== */
-  .dash-root .lv-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
-  .dash-root .lv-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--card-grad); box-shadow: var(--card-hi); cursor: pointer; text-align: left; font-family: inherit; transition: 0.15s; position: relative; }
-  .dash-root .lv-stat:hover { border-color: var(--border-2); transform: translateY(-2px); }
-  .dash-root .lv-stat.active { border-color: color-mix(in srgb, var(--accent, var(--orange)) 60%, transparent); box-shadow: var(--card-hi), 0 0 0 1px color-mix(in srgb, var(--accent, var(--orange)) 40%, transparent); }
-  .dash-root .lv-stat-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 6px; }
-  .dash-root .lv-stat-val { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
-  .dash-root .lv-stat-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; }
-  .dash-root .lv-stat.tone-green { --accent: var(--green); } .dash-root .lv-stat.tone-green .lv-stat-ic { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
-  .dash-root .lv-stat.tone-orange { --accent: var(--orange); } .dash-root .lv-stat.tone-orange .lv-stat-ic { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
-  .dash-root .lv-stat.tone-blue { --accent: var(--blue); } .dash-root .lv-stat.tone-blue .lv-stat-ic { background: color-mix(in srgb, var(--blue) 18%, transparent); color: #6f9bff; }
-  .dash-root .lv-stat.tone-purple { --accent: var(--purple); } .dash-root .lv-stat.tone-purple .lv-stat-ic { background: color-mix(in srgb, var(--purple) 18%, transparent); color: #b07bf2; }
-  .dash-root .lv-stat.tone-red { --accent: var(--red); } .dash-root .lv-stat.tone-red .lv-stat-ic { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
-
-  .dash-root .lv-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
-  .dash-root .lv-search { display: flex; align-items: center; gap: 9px; flex: 1 1 240px; min-width: 200px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); }
-  .dash-root .lv-search:focus-within { border-color: color-mix(in srgb, var(--orange) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 14%, transparent); }
-  .dash-root .lv-search input { flex: 1; border: 0; background: none; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; }
-  .dash-root .lv-search input::placeholder { color: var(--muted); }
-  .dash-root .lv-search-x { border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 6px; }
-  .dash-root .lv-search-x:hover { color: var(--text); background: var(--panel-3); }
-  .dash-root .lv-filter { height: 42px; flex: 0 0 auto; width: auto; min-width: 150px; }
-
-  .dash-root .lv-tablewrap { border: 1px solid var(--border); border-radius: 18px; background: var(--card-grad); box-shadow: var(--card-hi); overflow-x: auto; }
-  .dash-root .lv-table { width: 100%; border-collapse: collapse; min-width: 940px; }
-  .dash-root .lv-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
-  .dash-root .lv-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 12.5px; vertical-align: middle; }
-  .dash-root .lv-table tbody tr:last-child td { border-bottom: 0; }
-  .dash-root .lv-table tbody tr { transition: background 0.12s; }
-  .dash-root .lv-table tbody tr:hover { background: color-mix(in srgb, var(--orange) 5%, transparent); }
-  .dash-root .lv-id { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
-  .dash-root .lv-id-date { font-size: 10.5px; color: var(--faint, var(--muted)); margin-top: 2px; }
-  .dash-root .lv-cust { display: flex; align-items: center; gap: 10px; min-width: 210px; }
-  .dash-root .lv-cust-name { font-weight: 700; font-size: 13px; color: var(--text); }
-  .dash-root .lv-cust-addr { font-size: 11px; color: var(--muted); margin-top: 1px; }
-  .dash-root .lv-phone { color: var(--text-2); white-space: nowrap; }
-  .dash-root .lv-source { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--text-2); padding: 4px 10px; border-radius: 99px; background: var(--panel-3); white-space: nowrap; }
-  .dash-root .lv-assignee { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
-  .dash-root .lv-assignee span { font-weight: 600; color: var(--text-2); font-size: 12px; }
-  .dash-root .lv-unassigned { font-size: 11.5px; color: var(--faint, var(--muted)); }
-  .dash-root .lv-verif { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--muted); }
-  .dash-root .lv-verif.v-verified { color: var(--green); }
-  .dash-root .lv-verif.v-in_progress { color: var(--orange); }
-  .dash-root .lv-verif.v-assigned { color: #6f9bff; }
-  .dash-root .lv-verif.v-pending { color: #b07bf2; }
-  .dash-root .lv-verif.v-unverified { color: var(--red); }
-  .dash-root .lv-created { color: var(--muted); white-space: nowrap; }
-  .dash-root .lv-rowacts { display: flex; gap: 6px; }
-  .dash-root .lv-act { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: 0.14s; }
-  .dash-root .lv-act:hover { color: var(--text); border-color: var(--muted); }
-  .dash-root .lv-act.primary:hover { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
-  .dash-root .lv-empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 13px; }
-  .dash-root .lv-count { font-size: 11.5px; color: var(--muted); margin-top: 12px; text-align: right; }
-
-  /* ---- row actions dropdown (portalled to body) ---- */
-  .lv-menu-scrim { position: fixed; inset: 0; z-index: 90; }
-  .lv-menu { position: fixed; z-index: 91; width: 188px; padding: 6px; border-radius: 12px; border: 1px solid var(--border-2, rgba(255,255,255,0.12)); background: var(--panel, #0e0e13); box-shadow: 0 18px 44px -18px rgba(0,0,0,0.7); animation: ds-rise 0.13s ease; }
-  .lv-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--text-2, #eaeaea); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
-  .lv-menu-item:hover { background: var(--panel-3, #1b1b22); color: var(--text, #fff); }
-  .lv-menu-item svg { color: var(--muted, #8c8c8c); flex: 0 0 auto; }
-  .lv-menu-item:hover svg { color: var(--orange, #fda913); }
-
-  /* ---- change-assignee popup ---- */
-  .dash-root .lv-assign { display: flex; flex-direction: column; gap: 12px; }
-  .dash-root .lv-assign-search { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--border); background: var(--panel-2); }
-  .dash-root .lv-assign-search svg { color: var(--muted); flex: 0 0 auto; }
-  .dash-root .lv-assign-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font-family: inherit; font-size: 13px; outline: none; }
-  .dash-root .lv-assign-x { display: inline-flex; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; }
-  .dash-root .lv-assign-x:hover { color: var(--text); }
-  .dash-root .lv-assign-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; margin: -4px; padding: 4px; }
-  .dash-root .lv-assign-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
-  .dash-root .lv-assign-opt:hover { background: var(--panel-3, #1b1b22); color: var(--text); }
-  .dash-root .lv-assign-opt.current { background: color-mix(in srgb, var(--orange) 12%, transparent); }
-  .dash-root .lv-assign-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .lv-assign-opt.current > svg { color: var(--orange); flex: 0 0 auto; }
-  .dash-root .lv-assign-empty { padding: 20px 10px; text-align: center; color: var(--muted); font-size: 12.5px; }
-
-  /* ---- verification detail popup ---- */
-  .dash-root .lv-detail { display: flex; flex-direction: column; gap: 16px; }
-  .dash-root .lv-d-identity { display: flex; align-items: center; gap: 14px; }
-  .dash-root .lv-d-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
-  .dash-root .lv-d-pills { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
-  .dash-root .lv-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-  .dash-root .lv-d-section, .dash-root .lv-d-notes, .dash-root .lv-d-activity { border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); padding: 14px 15px; }
-  .dash-root .lv-d-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--orange); margin-bottom: 12px; }
-  .dash-root .lv-d-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
-  .dash-root .lv-d-row:last-child { border-bottom: 0; }
-  .dash-root .lv-d-k { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
-  .dash-root .lv-d-v { font-size: 12.5px; color: var(--text); font-weight: 600; text-align: right; }
-  .dash-root .lv-d-notes p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-top: 2px; }
-
-  .dash-root .lv-timeline { list-style: none; margin: 0; padding: 0; }
-  .dash-root .lv-tl-item { position: relative; display: flex; gap: 12px; padding: 0 0 16px 4px; }
-  .dash-root .lv-tl-item::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: -2px; width: 1.5px; background: var(--border-2); }
-  .dash-root .lv-tl-item:last-child { padding-bottom: 0; }
-  .dash-root .lv-tl-item:last-child::before { display: none; }
-  .dash-root .lv-tl-dot { position: relative; z-index: 1; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 20%, transparent); }
-  .dash-root .lv-tl-text { font-size: 12.5px; color: var(--text); font-weight: 600; }
-  .dash-root .lv-tl-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
-
-  @media (max-width: 900px) {
-    .dash-root .lv-d-grid { grid-template-columns: 1fr; }
+  70% {
+    box-shadow: 0 0 0 8px transparent;
   }
 
-  @media (max-width: 900px) {
-    .dash-root .leads-stats { grid-template-columns: repeat(2, 1fr); }
-    .dash-root .ld-grid { grid-template-columns: 1fr; }
-    .dash-root .ld-assign { grid-template-columns: 1fr; }
-    .dash-root .lv-stats { grid-template-columns: repeat(3, 1fr); }
-    .dash-root .lv-filter { flex: 1 1 45%; }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
   }
-  @media (max-width: 560px) {
-    .dash-root .leads-stats { grid-template-columns: 1fr; }
-    .dash-root .leads-grid { grid-template-columns: 1fr; }
-    .dash-root .nl-grid { grid-template-columns: 1fr; }
-    .dash-root .lv-stats { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* ---- Metric strip ---- */
+.dash-root .tm-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+}
+
+.dash-root .card.tm-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
+}
+
+.dash-root .card.tm-stat:hover {
+  transform: translateY(-4px);
+  border-color: color-mix(in srgb, var(--rc) 42%, var(--border)) !important;
+  box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--rc) 80%, #000);
+}
+
+.dash-root .card.tm-stat::after {
+  content: "";
+  position: absolute;
+  top: -40%;
+  right: -20%;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 20%, transparent), transparent 70%);
+  opacity: 0;
+  transition: opacity 0.25s;
+  pointer-events: none;
+}
+
+.dash-root .card.tm-stat:hover::after {
+  opacity: 1;
+}
+
+.dash-root .tm-stat-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  position: relative;
+  z-index: 1;
+}
+
+.dash-root .tm-stat-ic {
+  width: 46px;
+  height: 46px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: var(--rc);
+  background: color-mix(in srgb, var(--rc) 16%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 30%, transparent);
+}
+
+.dash-root .tm-stat-body {
+  min-width: 0;
+}
+
+.dash-root .tm-stat-val {
+  font-size: 30px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1;
+}
+
+.dash-root .tm-stat-lbl {
+  font-size: 12.5px;
+  color: var(--text-2);
+  font-weight: 600;
+  margin-top: 6px;
+}
+
+.dash-root .tm-stat-bar {
+  display: block;
+  height: 6px;
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--rc) 16%, transparent);
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+.dash-root .tm-stat-bar>span {
+  display: block;
+  height: 100%;
+  border-radius: 99px;
+  background: var(--rc);
+}
+
+.dash-root .tm-stat-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11.5px;
+  color: var(--faint);
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+  margin-top: auto;
+  position: relative;
+  z-index: 1;
+}
+
+.dash-root .tm-stat-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  background: var(--rc);
+}
+
+/* ---- Tabs ---- */
+.dash-root .tm-tabs {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.dash-root .tm-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 15px;
+  border-radius: 12px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .tm-tab:hover {
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--orange) 40%, var(--border-2));
+}
+
+.dash-root .tm-tab.active {
+  color: #fff;
+  background: rgba(253, 169, 19, 0.92);
+  border-color: transparent;
+  box-shadow: var(--glow-orange);
+}
+
+.dash-root .tm-tab.active svg {
+  color: #fff;
+}
+
+.dash-root .tm-tab-badge {
+  min-width: 19px;
+  height: 19px;
+  padding: 0 5px;
+  border-radius: 99px;
+  display: inline-grid;
+  place-items: center;
+  font-size: 10.5px;
+  font-weight: 800;
+  background: color-mix(in srgb, var(--text) 12%, transparent);
+  color: var(--text-2);
+}
+
+.dash-root .tm-tab.active .tm-tab-badge {
+  background: rgba(255, 255, 255, 0.26);
+  color: #fff;
+}
+
+/* Brand action — solid orange (no gradient) + white text/icon */
+.dash-root .tm .ds-btn.v-primary {
+  background: rgba(253, 169, 19, 0.92);
+  color: #fff;
+  border-radius: 9.132px;
+  box-shadow: 0 8px 20px -10px rgba(253, 169, 19, 0.75);
+}
+
+.dash-root .tm .ds-btn.v-primary svg {
+  color: #fff;
+}
+
+.dash-root .tm .ds-btn.v-primary:not(:disabled):hover {
+  background: rgba(253, 169, 19, 1);
+}
+
+.dash-root .tm-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.dash-root .tm-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 220px;
+  height: 44px;
+  padding: 0 13px;
+  border-radius: 13px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--muted);
+  transition: 0.14s;
+}
+
+.dash-root .tm-search:focus-within {
+  border-color: var(--orange);
+  box-shadow: 0 0 0 3px var(--ring);
+  color: var(--orange);
+}
+
+.dash-root .tm-search .ds-input {
+  flex: 1;
+}
+
+.dash-root .tm-search-x {
+  border: 0;
+  background: none;
+  color: var(--faint);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  padding: 2px;
+  border-radius: 6px;
+}
+
+.dash-root .tm-search-x:hover {
+  color: var(--text);
+  background: var(--panel-3);
+}
+
+.dash-root .tm-viewtoggle {
+  display: inline-flex;
+  padding: 4px;
+  gap: 4px;
+  border-radius: 12px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+}
+
+.dash-root .tm-viewtoggle button {
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  color: var(--muted);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .tm-viewtoggle button:hover {
+  color: var(--text);
+}
+
+.dash-root .tm-viewtoggle button.on {
+  background: var(--grad-brand);
+  color: #fff;
+}
+
+/* ---- Role filter chips ---- */
+.dash-root .tm-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.dash-root .tm-chip {
+  --rc: var(--text-2);
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 99px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--text-2);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .tm-chip:hover {
+  border-color: color-mix(in srgb, var(--rc) 55%, var(--border-2));
+}
+
+.dash-root .tm-chip.on {
+  color: var(--rc);
+  border-color: color-mix(in srgb, var(--rc) 55%, transparent);
+  background: color-mix(in srgb, var(--rc) 13%, transparent);
+}
+
+.dash-root .tm-chip-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+}
+
+.dash-root .tm-chip i {
+  font-style: normal;
+  font-weight: 800;
+  opacity: 0.7;
+}
+
+/* ---- People gallery ---- */
+.dash-root .tm-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
+  gap: 14px;
+}
+
+.dash-root .card.tm-pcard {
+  position: relative;
+  overflow: hidden;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  transition: 0.18s;
+  --rc: var(--orange);
+}
+
+.dash-root .card.tm-pcard:hover {
+  transform: translateY(-4px);
+  border-color: color-mix(in srgb, var(--rc) 50%, var(--border)) !important;
+  box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--rc) 85%, #000);
+}
+
+.dash-root .tm-pcard-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--rc) 16%, transparent), transparent 60%);
+  opacity: 0;
+  transition: 0.18s;
+}
+
+.dash-root .card.tm-pcard:hover .tm-pcard-bg {
+  opacity: 1;
+}
+
+.dash-root .tm-pcard-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  position: relative;
+}
+
+.dash-root .tm-pcard-av {
+  position: relative;
+  border-radius: 50%;
+  padding: 3px;
+  background: color-mix(in srgb, var(--rc) 65%, transparent);
+}
+
+.dash-root .tm-pcard-name {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 15px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  margin-top: 13px;
+}
+
+.dash-root .tm-crown {
+  color: var(--orange);
+  display: inline-grid;
+  place-items: center;
+}
+
+.dash-root .tm-pcard-title {
+  font-size: 12.5px;
+  color: var(--text-2);
+  font-weight: 600;
+  margin-top: 3px;
+}
+
+.dash-root .tm-pcard-email {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dash-root .tm-pcard-email svg {
+  color: var(--faint);
+  flex: 0 0 auto;
+}
+
+.dash-root .tm-pcard-role {
+  margin-top: 14px;
+}
+
+.dash-root .tm-meter {
+  margin-top: 14px;
+}
+
+.dash-root .tm-meter-h {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--faint);
+  margin-bottom: 6px;
+}
+
+.dash-root .tm-meter-h b {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.dash-root .tm-meter-track {
+  display: block;
+  height: 6px;
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--rc) 14%, transparent);
+  overflow: hidden;
+}
+
+.dash-root .tm-meter-fill {
+  display: block;
+  height: 100%;
+  border-radius: 99px;
+  background: var(--rc);
+  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.dash-root .tm-pcard-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 15px;
+  padding-top: 13px;
+  border-top: 1px solid var(--border);
+}
+
+.dash-root .tm-table {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .tm-row {
+  display: grid;
+  grid-template-columns: minmax(220px, 2.4fr) 210px 190px 110px 52px;
+  align-items: center;
+  gap: 14px;
+  padding: 13px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .tm-row:last-child {
+  border-bottom: 0;
+}
+
+.dash-root .tm-head {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--faint);
+  background: var(--panel-2);
+}
+
+.dash-root .tm-row:not(.tm-head):hover {
+  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
+}
+
+.dash-root .tm-member {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.dash-root .tm-member-meta {
+  min-width: 0;
+}
+
+.dash-root .tm-name {
+  font-size: 13.5px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.dash-root .tm-sub {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dash-root .tm-c-num {
+  text-align: right;
+  font-size: 14px;
+}
+
+.dash-root .tm-c-num b {
+  font-weight: 800;
+}
+
+.dash-root .tm-dash {
+  color: var(--faint);
+}
+
+.dash-root .tm-c-act {
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.dash-root .tm-rolebadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 11px;
+  border-radius: 99px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--rc);
+  background: color-mix(in srgb, var(--rc) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--rc) 32%, transparent);
+  white-space: nowrap;
+}
+
+.dash-root .tm-roleselect {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 10px 0 11px;
+  border-radius: 10px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  transition: 0.14s;
+}
+
+.dash-root .tm-roleselect:hover {
+  border-color: color-mix(in srgb, var(--rc) 55%, transparent);
+}
+
+.dash-root .tm-roledot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  background: var(--rc);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 22%, transparent);
+}
+
+.dash-root .tm-roleselect .ds-select {
+  border: 0;
+  background-color: transparent;
+  height: 34px;
+  padding: 0 26px 0 0;
+  font-weight: 600;
+  font-size: 12.5px;
+  box-shadow: none;
+  background-position: calc(100% - 6px) 15px, calc(100% - 1px) 15px;
+}
+
+.dash-root .tm-roleselect .ds-select:focus {
+  box-shadow: none;
+}
+
+/* Multi-role: chips (read-only) + picker (toggle) */
+.dash-root .tm-rolechips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.dash-root .tm-rolepicker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.dash-root .tm-rolepick {
+  --rc: var(--text-2);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 12px 0 9px;
+  border-radius: 99px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--text-1);
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .tm-rolepick:hover {
+  border-color: color-mix(in srgb, var(--rc) 55%, transparent);
+}
+
+.dash-root .tm-rolepick.on {
+  color: var(--rc);
+  background: color-mix(in srgb, var(--rc) 12%, transparent);
+  border-color: color-mix(in srgb, var(--rc) 40%, transparent);
+}
+
+.dash-root .tm-rolepick-check {
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 5px;
+  border: 1.5px solid var(--border-2);
+  color: #fff;
+  flex: 0 0 auto;
+}
+
+.dash-root .tm-rolepick.on .tm-rolepick-check {
+  background: var(--rc);
+  border-color: var(--rc);
+}
+
+.dash-root .tm-statuscell {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.dash-root .tm-lastactive {
+  color: var(--faint);
+  font-weight: 500;
+  font-size: 11.5px;
+  margin-left: 2px;
+}
+
+.dash-root .tm-menu-lock {
+  color: var(--faint);
+  display: grid;
+  place-items: center;
+}
+
+.dash-root .tm-menu-pop {
+  position: absolute;
+  top: 38px;
+  right: 0;
+  z-index: 30;
+  min-width: 178px;
+  padding: 6px;
+  border-radius: 13px;
+  border: 1px solid var(--border-2);
+  background: var(--panel);
+  box-shadow: var(--shadow), 0 8px 30px -12px rgba(0, 0, 0, 0.6);
+  animation: ds-rise 0.14s ease;
+}
+
+.dash-root .tm-menu-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+}
+
+.dash-root .tm-menu-pop button {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 9px 10px;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  color: var(--text-2);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.dash-root .tm-menu-pop button:hover {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+.dash-root .tm-menu-pop button.danger {
+  color: var(--red);
+}
+
+.dash-root .tm-menu-pop button.danger:hover {
+  background: color-mix(in srgb, var(--red) 14%, transparent);
+}
+
+.dash-root .tm-menu-sep {
+  height: 1px;
+  background: var(--border);
+  margin: 5px 4px;
+}
+
+.dash-root .tm-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 54px 20px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.dash-root .tm-empty-ic {
+  width: 56px;
+  height: 56px;
+  border-radius: 17px;
+  display: grid;
+  place-items: center;
+  color: var(--orange);
+  background: color-mix(in srgb, var(--orange) 13%, transparent);
+}
+
+.dash-root .tm-empty p {
+  font-size: 13px;
+}
+
+.dash-root .tm-roles {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
+  gap: 16px;
+}
+
+.dash-root .tm-rolecard {
+  position: relative;
+  overflow: hidden;
+  --rc: var(--orange);
+}
+
+.dash-root .tm-rolecard::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--rc);
+}
+
+.dash-root .tm-rolecard-head {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  margin-bottom: 12px;
+}
+
+.dash-root .tm-ring {
+  position: relative;
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  background: conic-gradient(var(--rc) calc(var(--pct) * 1%), color-mix(in srgb, var(--rc) 16%, transparent) 0);
+}
+
+.dash-root .tm-ring-in {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: var(--rc);
+  background: var(--panel);
+}
+
+.dash-root[data-theme="dark"] .tm-ring-in {
+  background: #14110d;
+}
+
+.dash-root .tm-rolecard-name {
+  font-size: 15px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+}
+
+.dash-root .tm-rolecard-sub {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .tm-rolecard-desc {
+  font-size: 12.5px;
+  color: var(--muted);
+  line-height: 1.5;
+  margin: 0 0 14px;
+}
+
+/* Attire & appearance — persona-guide cues */
+.dash-root .tm-attire {
+  border-top: 1px solid var(--border);
+  padding-top: 13px;
+  margin-bottom: 13px;
+}
+
+.dash-root .tm-attire-h {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--rc);
+  margin-bottom: 9px;
+}
+
+.dash-root .tm-attire-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.dash-root .tm-attire-list li {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  font-size: 12.5px;
+  color: var(--text-2);
+  line-height: 1.45;
+}
+
+.dash-root .tm-attire-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--rc);
+  flex: 0 0 auto;
+  margin-top: 7px;
+}
+
+/* Common overlap — how the role blends with others */
+.dash-root .tm-overlap {
+  display: flex;
+  gap: 10px;
+  padding: 11px 12px;
+  margin-bottom: 16px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--rc) 7%, transparent);
+  border: 1px solid color-mix(in srgb, var(--rc) 18%, transparent);
+}
+
+.dash-root .tm-overlap-ic {
+  color: var(--rc);
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+
+.dash-root .tm-overlap b {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-2);
+  margin-bottom: 3px;
+}
+
+.dash-root .tm-overlap p {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.dash-root .tm-permgroup {
+  margin-bottom: 14px;
+}
+
+.dash-root .tm-permgroup:last-child {
+  margin-bottom: 0;
+}
+
+.dash-root .tm-permgroup-h {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--faint);
+  margin-bottom: 8px;
+}
+
+.dash-root .tm-perm {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 9px 11px;
+  border-radius: 11px;
+  border: 1px solid transparent;
+  transition: 0.14s;
+}
+
+.dash-root .tm-perm:hover {
+  background: var(--panel-2);
+}
+
+.dash-root .tm-perm.on {
+  background: color-mix(in srgb, var(--rc) 8%, transparent);
+  border-color: color-mix(in srgb, var(--rc) 22%, transparent);
+}
+
+.dash-root .tm-perm-meta {
+  min-width: 0;
+}
+
+.dash-root .tm-perm-label {
+  display: block;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.dash-root .tm-perm-desc {
+  display: block;
+  font-size: 11px;
+  color: var(--faint);
+  margin-top: 2px;
+}
+
+.dash-root .tm-invite-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .tm-invite-head h3 {
+  font-size: 14.5px;
+  font-weight: 700;
+}
+
+.dash-root .tm-invite-head p {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .tm-invites {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .tm-inviterow {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .tm-inviterow:last-child {
+  border-bottom: 0;
+}
+
+.dash-root .tm-invite-ic {
+  width: 38px;
+  height: 38px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: var(--blue);
+  background: color-mix(in srgb, var(--blue) 14%, transparent);
+}
+
+.dash-root .tm-invite-meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .tm-invite-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.dash-root .tm-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .tm-roleprev {
+  border-radius: 13px;
+  border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
+  background: color-mix(in srgb, var(--rc) 8%, transparent);
+  padding: 13px 15px;
+  --rc: var(--blue);
+}
+
+.dash-root .tm-roleprev-h {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.dash-root .tm-roleprev-count {
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.dash-root .tm-roleprev p {
+  font-size: 12px;
+  color: var(--muted);
+  margin: 7px 0 0;
+  line-height: 1.5;
+}
+
+.dash-root .tm-edit-hero {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 4px 0 16px;
+}
+
+.dash-root .tm-confirm-text {
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* =========================================================== */
+/* AI Assistant — Lynk AI                                      */
+/* =========================================================== */
+.dash-root .ai-view {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: calc(100vh - 168px);
+  min-height: 520px;
+}
+
+.dash-root .ai-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.dash-root .ai-head-l {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+}
+
+.dash-root .ai-mark {
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: #fff;
+  background: var(--grad-brand);
+  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--orange) 80%, transparent);
+}
+
+.dash-root .ai-eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--faint);
+}
+
+.dash-root .ai-head h1 {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 21px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.dash-root .ai-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dash-root .ai-model {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 99px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.dash-root .ai-model-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent);
+}
+
+.dash-root .ai-stage {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.dash-root .ai-stage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
+  background-size: 22px 22px;
+  -webkit-mask-image: radial-gradient(60% 55% at 50% 0%, #000, transparent 75%);
+  mask-image: radial-gradient(60% 55% at 50% 0%, #000, transparent 75%);
+}
+
+.dash-root .ai-scroll {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 26px;
+}
+
+.dash-root .ai-scroll::-webkit-scrollbar {
+  width: 9px;
+}
+
+.dash-root .ai-scroll::-webkit-scrollbar-thumb {
+  background: var(--border-2);
+  border-radius: 99px;
+}
+
+.dash-root .ai-hero {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 18px 0 6px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dash-root .ai-orb-wrap {
+  position: relative;
+  width: 84px;
+  height: 84px;
+  display: grid;
+  place-items: center;
+}
+
+.dash-root .ai-orb-ring {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 84px;
+  height: 84px;
+  border-radius: 28px;
+  border: 1.5px solid color-mix(in srgb, var(--orange) 50%, transparent);
+  animation: ai-orbring 3s ease-out infinite;
+}
+
+.dash-root .ai-orb-ring.d2 {
+  animation-delay: 1s;
+}
+
+.dash-root .ai-orb-ring.d3 {
+  animation-delay: 2s;
+}
+
+@keyframes ai-orbring {
+  0% {
+    transform: scale(1);
+    opacity: 0.65;
   }
 
+  100% {
+    transform: scale(2.1);
+    opacity: 0;
+  }
+}
+
+.dash-root .ai-hero-orb {
+  position: relative;
+  z-index: 1;
+  width: 84px;
+  height: 84px;
+  border-radius: 26px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: rgba(253, 169, 19, 0.92);
+  box-shadow: 0 18px 50px -14px color-mix(in srgb, var(--orange) 78%, transparent), 0 0 0 1px color-mix(in srgb, var(--orange) 40%, transparent);
+  animation: ai-float 4s ease-in-out infinite;
+}
+
+.dash-root .ai-hero h2 {
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  margin-top: 20px;
+}
+
+.dash-root .ai-hero>p {
+  font-size: 13.5px;
+  color: var(--muted);
+  line-height: 1.6;
+  max-width: 480px;
+  margin: 10px auto 0;
+}
+
+.dash-root .ai-caps {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  width: 100%;
+  margin-top: 28px;
+}
+
+.dash-root .ai-cap {
+  --rc: var(--orange);
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  cursor: pointer;
+  transition: 0.16s;
+}
+
+.dash-root .ai-cap:hover {
+  transform: translateY(-3px);
+  border-color: color-mix(in srgb, var(--rc) 50%, transparent);
+  box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--rc) 80%, #000);
+}
+
+.dash-root .ai-cap-ic {
+  width: 38px;
+  height: 38px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  color: var(--rc);
+  background: color-mix(in srgb, var(--rc) 15%, transparent);
+  margin-bottom: 4px;
+}
+
+.dash-root .ai-cap-title {
+  font-size: 13.5px;
+  font-weight: 700;
+}
+
+.dash-root .ai-cap-desc {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.45;
+}
+
+.dash-root .ai-suggest {
+  width: 100%;
+  margin-top: 26px;
+}
+
+.dash-root .ai-suggest-lbl {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--faint);
+  margin-bottom: 11px;
+}
+
+.dash-root .ai-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 9px;
+  justify-content: center;
+}
+
+.dash-root .ai-chip,
+.dash-root .ai-quick {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 13px;
+  border-radius: 99px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--text-2);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .ai-chip:hover,
+.dash-root .ai-quick:hover {
+  border-color: var(--orange);
+  color: var(--text);
+  background: color-mix(in srgb, var(--orange) 10%, var(--panel-2));
+}
+
+.dash-root .ai-chip svg,
+.dash-root .ai-quick svg {
+  color: var(--orange);
+  flex: 0 0 auto;
+}
+
+.dash-root .ai-thread {
+  max-width: 780px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.dash-root .ai-msg {
+  display: flex;
+  gap: 11px;
+  align-items: flex-start;
+}
+
+.dash-root .ai-msg.me {
+  flex-direction: row-reverse;
+}
+
+.dash-root .ai-msg-av {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  flex: 0 0 auto;
+}
+
+.dash-root .ai-bubble {
+  max-width: 78%;
+  padding: 12px 15px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  font-size: 13.5px;
+  line-height: 1.6;
+}
+
+.dash-root .ai-bubble p {
+  margin: 0;
+}
+
+.dash-root .ai-bubble p+p {
+  margin-top: 5px;
+}
+
+.dash-root .ai-msg.me .ai-bubble {
+  background: var(--grad-brand);
+  color: #fff;
+  border-color: transparent;
+  border-bottom-right-radius: 5px;
+  font-weight: 500;
+}
+
+.dash-root .ai-msg.ai .ai-bubble {
+  border-bottom-left-radius: 5px;
+}
+
+.dash-root .ai-msg-actions {
+  display: flex;
+  gap: 4px;
+  margin-top: 9px;
+  padding-top: 9px;
+  border-top: 1px solid var(--border);
+}
+
+.dash-root .ai-msg-actions button {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  border: 0;
+  background: none;
+  color: var(--faint);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .ai-msg-actions button:hover {
+  background: var(--panel-3);
+  color: var(--text);
+}
+
+.dash-root .ai-typing {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.dash-root .ai-typing span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--muted);
+  animation: ai-blink 1.2s infinite ease-in-out;
+}
+
+.dash-root .ai-typing span:nth-child(2) {
+  animation-delay: 0.18s;
+}
+
+.dash-root .ai-typing span:nth-child(3) {
+  animation-delay: 0.36s;
+}
+
+.dash-root .ai-composer {
+  border-top: 1px solid var(--border);
+  padding: 14px 18px 12px;
+  background: color-mix(in srgb, var(--panel-2) 40%, transparent);
+}
+
+.dash-root .ai-quickrow {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 11px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+.dash-root .ai-quickrow::-webkit-scrollbar {
+  height: 0;
+}
+
+.dash-root .ai-quick {
+  white-space: nowrap;
+}
+
+.dash-root .ai-inputbar {
+  display: flex;
+  align-items: flex-end;
+  gap: 9px;
+  padding: 7px 7px 7px 11px;
+  border-radius: 16px;
+  border: 1px solid var(--border-2);
+  background: var(--panel);
+  transition: 0.14s;
+}
+
+.dash-root .ai-inputbar:focus-within {
+  border-color: var(--orange);
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+.dash-root .ai-attach {
+  flex: 0 0 auto;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  border: 0;
+  background: none;
+  color: var(--muted);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .ai-attach:hover {
+  background: var(--panel-3);
+  color: var(--text);
+}
+
+.dash-root .ai-textarea {
+  flex: 1;
+  resize: none;
+  border: 0;
+  background: none;
+  outline: none;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13.5px;
+  line-height: 1.5;
+  max-height: 132px;
+  padding: 8px 0;
+}
+
+.dash-root .ai-textarea::placeholder {
+  color: var(--faint);
+}
+
+.dash-root .ai-send {
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  border: 0;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: var(--grad-brand);
+  box-shadow: 0 8px 20px -9px color-mix(in srgb, var(--orange) 80%, transparent);
+  transition: 0.14s;
+}
+
+.dash-root .ai-send:not(:disabled):hover {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+
+.dash-root .ai-send:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.dash-root .ai-foot {
+  text-align: center;
+  font-size: 11px;
+  color: var(--faint);
+  margin-top: 9px;
+}
+
+@keyframes ai-float {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes ai-blink {
+
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+    transform: scale(0.8);
+  }
+
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (max-width: 920px) {
+  .dash-root .tm-stats {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .dash-root .tm-hero {
+    padding: 22px;
+  }
+
+  .dash-root .tm-hero-actions {
+    width: 100%;
+  }
+
+  .dash-root .tm-hero-actions .ds-btn {
+    width: 100%;
+  }
+
+  .dash-root .tm-head {
+    display: none;
+  }
+
+  .dash-root .tm-row {
+    grid-template-columns: 1fr auto;
+    row-gap: 10px;
+    padding: 14px 16px;
+  }
+
+  .dash-root .tm-member {
+    grid-column: 1 / -1;
+  }
+
+  .dash-root .tm-rolecell {
+    grid-column: 1;
+  }
+
+  .dash-root .tm-c-act {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .dash-root .tm-statuscell {
+    grid-column: 1 / -1;
+  }
+
+  .dash-root .tm-c-num {
+    grid-column: 1 / -1;
+    text-align: left;
+  }
+
+  .dash-root .tm-c-num::before {
+    content: "Open deals: ";
+    color: var(--faint);
+    font-size: 12px;
+  }
+
+  .dash-root .ai-caps {
+    grid-template-columns: 1fr;
+  }
+
+  .dash-root .ai-bubble {
+    max-width: 86%;
+  }
+
+  .dash-root .ai-view {
+    height: calc(100vh - 150px);
+  }
+
+  .dash-root .proj-row {
+    grid-template-columns: 1fr !important;
+    row-gap: 8px;
+    padding: 14px 16px;
+  }
+
+  .dash-root .proj-head {
+    display: none;
+  }
+
+  .dash-root .proj-c-act {
+    justify-self: end;
+  }
+}
+
+/* ---- Projects (Construction + Pipeline Leads) ---- */
+.dash-root .proj-toolbar .tm-tabs {
+  flex: 0 0 auto;
+}
+
+.dash-root .proj-toolbar .tm-chips {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.dash-root .proj-table {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .proj-row {
+  display: grid;
+  align-items: center;
+  gap: 14px;
+  padding: 13px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .proj-row:last-child {
+  border-bottom: 0;
+}
+
+.dash-root .proj-head {
+  color: var(--faint);
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.dash-root .proj-row:not(.proj-head):hover {
+  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
+}
+
+.dash-root .proj-lead {
+  min-width: 0;
+}
+
+.dash-root .proj-lead-name {
+  font-size: 13.5px;
+  font-weight: 700;
+}
+
+.dash-root .proj-lead-sub {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dash-root .proj-text {
+  font-size: 13px;
+  color: var(--text-2);
+  text-align: center;
+}
+
+.dash-root .proj-c-num {
+  text-align: center;
+}
+
+.dash-root .proj-row .ds-pill {
+  justify-self: center;
+  justify-content: center;
+}
+
+.dash-root .proj-c-act {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+}
+
+.dash-root .proj-cd-search {
+  margin-bottom: 14px;
+}
+
+.dash-root .proj-cd-table {
+  margin-bottom: 14px;
+}
+
+.dash-root .proj-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dash-root .proj-progress-track {
+  flex: 1;
+  display: block;
+  height: 6px;
+  border-radius: 99px;
+  background: var(--track);
+  overflow: hidden;
+}
+
+.dash-root .proj-progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: 99px;
+  background: var(--orange);
+  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.dash-root .proj-progress b {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-2);
+  flex: 0 0 auto;
+}
+
+.dash-root .proj-health {
+  font-weight: 800;
+  text-align: center;
+}
+
+.dash-root .proj-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 54px 20px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.dash-root .proj-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 4px 0;
+  font-size: 12.5px;
+  color: var(--muted);
+}
+
+.dash-root .proj-foot b {
+  color: var(--text);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.dash-root .proj-detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.dash-root .proj-detail-row span {
+  color: var(--muted);
+}
+
+.dash-root .proj-detail-row b {
+  color: var(--text);
+  font-weight: 700;
+}
+
+/* ========================================================== */
+/* Leads — pipeline board + rich detail popup                 */
+/* ========================================================== */
+
+/* ---- stat strip ---- */
+.dash-root .leads-stats {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.dash-root .leads-stat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: var(--card-grad);
+  box-shadow: var(--card-hi);
+  position: relative;
+  overflow: hidden;
+}
+
+.dash-root .leads-stat::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--orange);
+}
+
+.dash-root .leads-stat.tone-blue::before {
+  background: var(--blue);
+}
+
+.dash-root .leads-stat.tone-purple::before {
+  background: var(--purple);
+}
+
+.dash-root .leads-stat.tone-green::before {
+  background: var(--green);
+}
+
+.dash-root .leads-stat.tone-orange::before {
+  background: var(--orange);
+}
+
+.dash-root .leads-stat-ic {
+  width: 38px;
+  height: 38px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--orange) 14%, transparent);
+  color: var(--orange);
+  flex: 0 0 auto;
+}
+
+.dash-root .leads-stat.tone-blue .leads-stat-ic {
+  background: color-mix(in srgb, var(--blue) 16%, transparent);
+  color: #6f9bff;
+}
+
+.dash-root .leads-stat.tone-purple .leads-stat-ic {
+  background: color-mix(in srgb, var(--purple) 16%, transparent);
+  color: #b07bf2;
+}
+
+.dash-root .leads-stat.tone-green .leads-stat-ic {
+  background: color-mix(in srgb, var(--green) 16%, transparent);
+  color: var(--green);
+}
+
+.dash-root .leads-stat-val {
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.dash-root .leads-stat-lbl {
+  font-size: 11.5px;
+  color: var(--muted);
+  font-weight: 600;
+  margin-top: 4px;
+}
+
+/* ---- toolbar ---- */
+.dash-root .leads-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.dash-root .leads-search {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  flex: 1 1 260px;
+  min-width: 220px;
+  height: 42px;
+  padding: 0 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--muted);
+}
+
+.dash-root .leads-search:focus-within {
+  border-color: color-mix(in srgb, var(--orange) 55%, var(--border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 14%, transparent);
+}
+
+.dash-root .leads-search input {
+  flex: 1;
+  border: 0;
+  background: none;
+  outline: none;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13.5px;
+}
+
+.dash-root .leads-search input::placeholder {
+  color: var(--muted);
+}
+
+.dash-root .leads-search-x {
+  border: 0;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  padding: 2px;
+  border-radius: 6px;
+}
+
+.dash-root .leads-search-x:hover {
+  color: var(--text);
+  background: var(--panel-3);
+}
+
+.dash-root .leads-tabs {
+  display: inline-flex;
+  gap: 3px;
+  padding: 4px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.dash-root .leads-tab {
+  border: 0;
+  background: none;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 7px 13px;
+  border-radius: 9px;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .leads-tab:hover {
+  color: var(--text-2);
+}
+
+.dash-root .leads-tab.active {
+  background: var(--orange);
+  color: #1a1205;
+  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--orange) 60%, transparent);
+}
+
+/* ---- board ---- */
+.dash-root .leads-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 14px;
+}
+
+.dash-root .lead-card {
+  text-align: left;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+  padding: 16px 17px;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  background: var(--card-grad);
+  box-shadow: var(--card-hi), 0 1px 2px rgba(0, 0, 0, 0.18);
+  font-family: inherit;
+  color: var(--text);
+  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.dash-root .lead-card:hover {
+  transform: translateY(-3px);
+  border-color: color-mix(in srgb, var(--orange) 40%, var(--border));
+  box-shadow: var(--shadow), 0 14px 34px -20px color-mix(in srgb, var(--orange) 50%, transparent);
+}
+
+.dash-root .lead-card-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.dash-root .lead-ava {
+  position: relative;
+  border-radius: 50%;
+  padding: 3px;
+  display: inline-flex;
+}
+
+.dash-root .lead-ava.prio-high {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 70%, transparent);
+}
+
+.dash-root .lead-ava.prio-medium {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 70%, transparent);
+}
+
+.dash-root .lead-ava.prio-low {
+  box-shadow: 0 0 0 2px var(--border-2);
+}
+
+.dash-root .lead-card-id {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .lead-card-name {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.dash-root .lead-card-sub {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .lead-card-sub svg {
+  color: var(--orange);
+}
+
+.dash-root .lead-code {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--text-2);
+}
+
+.dash-root .lead-card-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  color: var(--text-2);
+}
+
+.dash-root .lead-card-row svg {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .lead-card-row span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .lead-card-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 3px;
+  padding-top: 11px;
+  border-top: 1px solid var(--border);
+}
+
+.dash-root .lead-source {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.dash-root .lead-card-spacer {
+  flex: 1;
+}
+
+.dash-root .lead-rep {
+  font-size: 11.5px;
+  color: var(--text-2);
+  font-weight: 600;
+}
+
+.dash-root .lead-updated {
+  font-size: 10.5px;
+  color: var(--faint, var(--muted));
+}
+
+.dash-root .leads-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 6px;
+  padding: 48px 20px;
+  color: var(--muted);
+}
+
+.dash-root .leads-empty svg {
+  color: var(--muted);
+  margin-bottom: 6px;
+}
+
+.dash-root .leads-empty h3 {
+  font-size: 16px;
+  color: var(--text);
+}
+
+/* ---- detail popup ---- */
+.dash-root .lead-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dash-root .ld-identity {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.dash-root .ld-identity-name {
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.dash-root .ld-identity-pills {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.dash-root .ld-storm {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--border));
+  background: color-mix(in srgb, var(--orange) 9%, transparent);
+}
+
+.dash-root .ld-storm-ic {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--orange) 18%, transparent);
+  color: var(--orange);
+  flex: 0 0 auto;
+}
+
+.dash-root .ld-storm-zone {
+  font-size: 13.5px;
+  font-weight: 700;
+}
+
+.dash-root .ld-storm-meta {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .ld-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.dash-root .ld-section {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--panel-2);
+  padding: 14px 15px;
+}
+
+.dash-root .ld-section.wide {
+  grid-column: 1 / -1;
+}
+
+.dash-root .ld-section-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--orange);
+  margin-bottom: 12px;
+}
+
+.dash-root .ld-section-body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.dash-root .ld-dl {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0;
+  border-bottom: 1px dashed var(--border);
+}
+
+.dash-root .ld-dl:last-child {
+  border-bottom: 0;
+}
+
+.dash-root .ld-dl-k {
+  font-size: 12px;
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .ld-dl-v {
+  font-size: 12.5px;
+  color: var(--text);
+  font-weight: 600;
+  text-align: right;
+}
+
+.dash-root .ld-assign {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 18px;
+}
+
+.dash-root .ld-sublabel {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--faint, var(--muted));
+  font-weight: 700;
+  margin: 8px 0 6px;
+}
+
+.dash-root .ld-sublabel:first-child {
+  margin-top: 0;
+}
+
+.dash-root .ld-contact-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 0;
+  font-size: 12.5px;
+  color: var(--text);
+}
+
+.dash-root .ld-contact-row svg {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .ld-contact-val {
+  font-weight: 600;
+}
+
+.dash-root .ld-contact-tag {
+  font-size: 10.5px;
+  color: var(--muted);
+  padding: 2px 7px;
+  border-radius: 99px;
+  background: var(--panel-3);
+}
+
+.dash-root .ld-notes p {
+  font-size: 12.5px;
+  color: var(--text-2);
+  line-height: 1.5;
+  margin-top: 2px;
+}
+
+/* ---- New Lead form ---- */
+.dash-root .nl-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dash-root .nl-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 14px;
+}
+
+.dash-root .nl-grid .ds-field {
+  margin-bottom: 0;
+}
+
+.dash-root .nl-grid>.ds-field,
+.dash-root .nl-grid>.nl-full {
+  margin-bottom: 14px;
+}
+
+.dash-root .nl-full {
+  grid-column: 1 / -1;
+}
+
+.dash-root .nl-full .ds-field {
+  margin-bottom: 0;
+}
+
+.dash-root .nl-prio {
+  display: flex;
+  gap: 8px;
+}
+
+.dash-root .nl-prio-btn {
+  flex: 1;
+  height: 42px;
+  border-radius: 11px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .nl-prio-btn:hover {
+  color: var(--text-2);
+  border-color: var(--muted);
+}
+
+.dash-root .nl-prio-btn.active.low {
+  background: color-mix(in srgb, var(--muted) 22%, transparent);
+  color: var(--text);
+  border-color: var(--muted);
+}
+
+.dash-root .nl-prio-btn.active.medium {
+  background: color-mix(in srgb, var(--orange) 18%, transparent);
+  color: var(--orange);
+  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
+}
+
+.dash-root .nl-prio-btn.active.high {
+  background: color-mix(in srgb, var(--red) 18%, transparent);
+  color: var(--red);
+  border-color: color-mix(in srgb, var(--red) 55%, transparent);
+}
+
+.dash-root .nl-prio-btn.urg.active.standard {
+  background: color-mix(in srgb, var(--muted) 20%, transparent);
+  color: var(--text);
+  border-color: var(--muted);
+}
+
+.dash-root .nl-prio-btn.urg.active.high {
+  background: color-mix(in srgb, var(--orange) 18%, transparent);
+  color: var(--orange);
+  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
+}
+
+.dash-root .nl-prio-btn.urg.active.emergency {
+  background: color-mix(in srgb, var(--red) 20%, transparent);
+  color: var(--red);
+  border-color: color-mix(in srgb, var(--red) 60%, transparent);
+}
+
+/* multi-value rows (phones / emails) */
+.dash-root .nl-multirow {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.dash-root .nl-multirow .ds-input {
+  flex: 1;
+}
+
+.dash-root .nl-typesel {
+  flex: 0 0 108px;
+  width: 108px;
+}
+
+.dash-root .nl-rowx {
+  flex: 0 0 auto;
+  width: 42px;
+  border-radius: 11px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--muted);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: 0.14s;
+}
+
+.dash-root .nl-rowx:hover {
+  color: var(--red);
+  border-color: color-mix(in srgb, var(--red) 50%, transparent);
+}
+
+.dash-root .nl-add {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 2px;
+  padding: 8px 13px;
+  border-radius: 10px;
+  border: 1px dashed var(--border-2);
+  background: none;
+  color: var(--orange);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .nl-add:hover {
+  background: color-mix(in srgb, var(--orange) 10%, transparent);
+  border-color: color-mix(in srgb, var(--orange) 45%, transparent);
+}
+
+.dash-root .nl-empty {
+  font-size: 12.5px;
+  color: var(--faint, var(--muted));
+  padding: 8px 0 10px;
+}
+
+/* site photos dropzone */
+.dash-root .nl-photos {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding: 22px;
+  border-radius: 14px;
+  border: 1.5px dashed var(--border-2);
+  background: var(--panel-2);
+  color: var(--muted);
+  cursor: pointer;
+  transition: 0.14s;
+}
+
+.dash-root .nl-photos:hover {
+  border-color: color-mix(in srgb, var(--orange) 50%, transparent);
+  color: var(--orange);
+  background: color-mix(in srgb, var(--orange) 7%, transparent);
+}
+
+.dash-root .nl-photos-t {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-2);
+}
+
+.dash-root .nl-photos:hover .nl-photos-t {
+  color: var(--orange);
+}
+
+.dash-root .nl-photos-s {
+  font-size: 11px;
+}
+
+.dash-root .nl-photo-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.dash-root .nl-photo-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11.5px;
+  font-weight: 600;
+  padding: 5px 10px;
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--green) 15%, transparent);
+  color: var(--green);
+}
+
+.dash-root .nl-photo-chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 2px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  opacity: 0.65;
+  cursor: pointer;
+}
+
+.dash-root .nl-photo-chip-x:hover {
+  opacity: 1;
+}
+
+.dash-root .ds-select.is-placeholder {
+  color: var(--faint, var(--muted));
+}
+
+/* Detail popup — property photo gallery */
+.dash-root .ld-photo-block {
+  margin-bottom: 14px;
+}
+
+.dash-root .ld-photo-block .ld-section-head {
+  margin-bottom: 8px;
+}
+
+.dash-root .ld-photos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
+  gap: 8px;
+}
+
+.dash-root .ld-photo {
+  position: relative;
+  display: block;
+  aspect-ratio: 1;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  cursor: pointer;
+}
+
+.dash-root .ld-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.dash-root .ld-photo-ph {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+}
+
+/* Edit mode — photo tile with a remove badge */
+.dash-root .nl-edit-photos {
+  margin-bottom: 8px;
+}
+
+.dash-root .ld-photo-edit {
+  position: relative;
+}
+
+.dash-root .ld-photo-x {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 99px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  cursor: pointer;
+}
+
+.dash-root .ld-photo-x:hover {
+  background: var(--red, #e5484d);
+}
+
+/* Canvasser search (Door Knock source) */
+.dash-root .nl-canvasser {
+  position: relative;
+}
+
+.dash-root .nl-canvasser-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 30;
+  max-height: 220px;
+  overflow-y: auto;
+  border: 1px solid var(--border-2);
+  border-radius: 12px;
+  background: var(--panel);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+  padding: 5px;
+}
+
+.dash-root .nl-canvasser-opt {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 7px 9px;
+  border: none;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: 0.12s;
+}
+
+.dash-root .nl-canvasser-opt:hover {
+  background: var(--panel-2);
+}
+
+.dash-root .nl-canvasser-name {
+  font-weight: 700;
+}
+
+.dash-root .nl-canvasser-email {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.dash-root .nl-canvasser-opt .nl-canvasser-email {
+  margin-left: auto;
+}
+
+.dash-root .nl-canvasser-empty {
+  padding: 10px;
+  color: var(--muted);
+  font-size: 12.5px;
+  text-align: center;
+}
+
+.dash-root .nl-canvasser-chip {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 10px;
+  border: 1px solid var(--border-2);
+  border-radius: 12px;
+  background: var(--panel-2);
+}
+
+.dash-root .nl-canvasser-chip .nl-canvasser-email {
+  margin-left: 2px;
+}
+
+.dash-root .nl-canvasser-clear {
+  margin-left: auto;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: 0.12s;
+}
+
+.dash-root .nl-canvasser-clear:hover {
+  background: color-mix(in srgb, var(--red) 15%, transparent);
+  color: var(--red);
+}
+
+/* ========================================================== */
+/* Lead Verification — stat tiles + filters + table           */
+/* ========================================================== */
+.dash-root .lv-stats {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.dash-root .lv-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: var(--card-grad);
+  box-shadow: var(--card-hi);
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  transition: 0.15s;
+  position: relative;
+}
+
+.dash-root .lv-stat:hover {
+  border-color: var(--border-2);
+  transform: translateY(-2px);
+}
+
+.dash-root .lv-stat.active {
+  border-color: color-mix(in srgb, var(--accent, var(--orange)) 60%, transparent);
+  box-shadow: var(--card-hi), 0 0 0 1px color-mix(in srgb, var(--accent, var(--orange)) 40%, transparent);
+}
+
+.dash-root .lv-stat-ic {
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 6px;
+}
+
+.dash-root .lv-stat-val {
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.dash-root .lv-stat-lbl {
+  font-size: 11.5px;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.dash-root .lv-stat.tone-green {
+  --accent: var(--green);
+}
+
+.dash-root .lv-stat.tone-green .lv-stat-ic {
+  background: color-mix(in srgb, var(--green) 16%, transparent);
+  color: var(--green);
+}
+
+.dash-root .lv-stat.tone-orange {
+  --accent: var(--orange);
+}
+
+.dash-root .lv-stat.tone-orange .lv-stat-ic {
+  background: color-mix(in srgb, var(--orange) 16%, transparent);
+  color: var(--orange);
+}
+
+.dash-root .lv-stat.tone-blue {
+  --accent: var(--blue);
+}
+
+.dash-root .lv-stat.tone-blue .lv-stat-ic {
+  background: color-mix(in srgb, var(--blue) 18%, transparent);
+  color: #6f9bff;
+}
+
+.dash-root .lv-stat.tone-purple {
+  --accent: var(--purple);
+}
+
+.dash-root .lv-stat.tone-purple .lv-stat-ic {
+  background: color-mix(in srgb, var(--purple) 18%, transparent);
+  color: #b07bf2;
+}
+
+.dash-root .lv-stat.tone-red {
+  --accent: var(--red);
+}
+
+.dash-root .lv-stat.tone-red .lv-stat-ic {
+  background: color-mix(in srgb, var(--red) 16%, transparent);
+  color: var(--red);
+}
+
+.dash-root .lv-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+
+.dash-root .lv-search {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  flex: 1 1 240px;
+  min-width: 200px;
+  height: 42px;
+  padding: 0 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--muted);
+}
+
+.dash-root .lv-search:focus-within {
+  border-color: color-mix(in srgb, var(--orange) 55%, var(--border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 14%, transparent);
+}
+
+.dash-root .lv-search input {
+  flex: 1;
+  border: 0;
+  background: none;
+  outline: none;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13.5px;
+}
+
+.dash-root .lv-search input::placeholder {
+  color: var(--muted);
+}
+
+.dash-root .lv-search-x {
+  border: 0;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  padding: 2px;
+  border-radius: 6px;
+}
+
+.dash-root .lv-search-x:hover {
+  color: var(--text);
+  background: var(--panel-3);
+}
+
+.dash-root .lv-filter {
+  height: 42px;
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 150px;
+}
+
+.dash-root .lv-tablewrap {
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--card-grad);
+  box-shadow: var(--card-hi);
+  overflow-x: auto;
+}
+
+.dash-root .lv-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 940px;
+}
+
+.dash-root .lv-table thead th {
+  text-align: left;
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted);
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.dash-root .lv-table tbody td {
+  padding: 13px 16px;
+  border-bottom: 1px solid var(--border);
+  font-size: 12.5px;
+  vertical-align: middle;
+}
+
+.dash-root .lv-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.dash-root .lv-table tbody tr {
+  transition: background 0.12s;
+}
+
+.dash-root .lv-table tbody tr:hover {
+  background: color-mix(in srgb, var(--orange) 5%, transparent);
+}
+
+.dash-root .lv-id {
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.dash-root .lv-id-date {
+  font-size: 10.5px;
+  color: var(--faint, var(--muted));
+  margin-top: 2px;
+}
+
+.dash-root .lv-cust {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 210px;
+}
+
+.dash-root .lv-cust-name {
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--text);
+}
+
+.dash-root .lv-cust-addr {
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 1px;
+}
+
+.dash-root .lv-phone {
+  color: var(--text-2);
+  white-space: nowrap;
+}
+
+.dash-root .lv-source {
+  display: inline-block;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--text-2);
+  padding: 4px 10px;
+  border-radius: 99px;
+  background: var(--panel-3);
+  white-space: nowrap;
+}
+
+.dash-root .lv-assignee {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.dash-root .lv-assignee span {
+  font-weight: 600;
+  color: var(--text-2);
+  font-size: 12px;
+}
+
+.dash-root .lv-unassigned {
+  font-size: 11.5px;
+  color: var(--faint, var(--muted));
+}
+
+.dash-root .lv-verif {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--muted);
+}
+
+.dash-root .lv-verif.v-verified {
+  color: var(--green);
+}
+
+.dash-root .lv-verif.v-in_progress {
+  color: var(--orange);
+}
+
+.dash-root .lv-verif.v-assigned {
+  color: #6f9bff;
+}
+
+.dash-root .lv-verif.v-pending {
+  color: #b07bf2;
+}
+
+.dash-root .lv-verif.v-unverified {
+  color: var(--red);
+}
+
+.dash-root .lv-created {
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.dash-root .lv-rowacts {
+  display: flex;
+  gap: 6px;
+}
+
+.dash-root .lv-act {
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  border: 1px solid var(--border-2);
+  background: var(--panel-2);
+  color: var(--muted);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: 0.14s;
+}
+
+.dash-root .lv-act:hover {
+  color: var(--text);
+  border-color: var(--muted);
+}
+
+.dash-root .lv-act.primary:hover {
+  color: var(--green);
+  border-color: color-mix(in srgb, var(--green) 50%, transparent);
+  background: color-mix(in srgb, var(--green) 10%, transparent);
+}
+
+.dash-root .lv-empty {
+  text-align: center;
+  color: var(--muted);
+  padding: 40px 16px;
+  font-size: 13px;
+}
+
+.dash-root .lv-count {
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 12px;
+  text-align: right;
+}
+
+/* ---- row actions dropdown (portalled to body) ---- */
+.lv-menu-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+}
+
+.lv-menu {
+  position: fixed;
+  z-index: 91;
+  width: 188px;
+  padding: 6px;
+  border-radius: 12px;
+  border: 1px solid var(--border-2, rgba(255, 255, 255, 0.12));
+  background: var(--panel, #0e0e13);
+  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.7);
+  animation: ds-rise 0.13s ease;
+}
+
+.lv-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 9px 10px;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  color: var(--text-2, #eaeaea);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.lv-menu-item:hover {
+  background: var(--panel-3, #1b1b22);
+  color: var(--text, #fff);
+}
+
+.lv-menu-item svg {
+  color: var(--muted, #8c8c8c);
+  flex: 0 0 auto;
+}
+
+.lv-menu-item:hover svg {
+  color: var(--orange, #fda913);
+}
+
+/* ---- change-assignee popup ---- */
+.dash-root .lv-assign {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dash-root .lv-assign-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 11px;
+  border-radius: 11px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+}
+
+.dash-root .lv-assign-search svg {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .lv-assign-search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+
+.dash-root .lv-assign-x {
+  display: inline-flex;
+  border: 0;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 0;
+}
+
+.dash-root .lv-assign-x:hover {
+  color: var(--text);
+}
+
+.dash-root .lv-assign-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 320px;
+  overflow-y: auto;
+  margin: -4px;
+  padding: 4px;
+}
+
+.dash-root .lv-assign-opt {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 10px;
+  background: none;
+  color: var(--text-2);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.dash-root .lv-assign-opt:hover {
+  background: var(--panel-3, #1b1b22);
+  color: var(--text);
+}
+
+.dash-root .lv-assign-opt.current {
+  background: color-mix(in srgb, var(--orange) 12%, transparent);
+}
+
+.dash-root .lv-assign-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .lv-assign-opt.current>svg {
+  color: var(--orange);
+  flex: 0 0 auto;
+}
+
+.dash-root .lv-assign-empty {
+  padding: 20px 10px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 12.5px;
+}
+
+/* ---- verification detail popup ---- */
+.dash-root .lv-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dash-root .lv-d-identity {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.dash-root .lv-d-name {
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.dash-root .lv-d-pills {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.dash-root .lv-d-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.dash-root .lv-d-section,
+.dash-root .lv-d-notes,
+.dash-root .lv-d-activity {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--panel-2);
+  padding: 14px 15px;
+}
+
+.dash-root .lv-d-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--orange);
+  margin-bottom: 12px;
+}
+
+.dash-root .lv-d-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0;
+  border-bottom: 1px dashed var(--border);
+}
+
+.dash-root .lv-d-row:last-child {
+  border-bottom: 0;
+}
+
+.dash-root .lv-d-k {
+  font-size: 12px;
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .lv-d-v {
+  font-size: 12.5px;
+  color: var(--text);
+  font-weight: 600;
+  text-align: right;
+}
+
+.dash-root .lv-d-notes p {
+  font-size: 12.5px;
+  color: var(--text-2);
+  line-height: 1.55;
+  margin-top: 2px;
+}
+
+.dash-root .lv-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.dash-root .lv-tl-item {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  padding: 0 0 16px 4px;
+}
+
+.dash-root .lv-tl-item::before {
+  content: "";
+  position: absolute;
+  left: 8px;
+  top: 14px;
+  bottom: -2px;
+  width: 1.5px;
+  background: var(--border-2);
+}
+
+.dash-root .lv-tl-item:last-child {
+  padding-bottom: 0;
+}
+
+.dash-root .lv-tl-item:last-child::before {
+  display: none;
+}
+
+.dash-root .lv-tl-dot {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  width: 10px;
+  height: 10px;
+  margin-top: 4px;
+  border-radius: 50%;
+  background: var(--orange);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 20%, transparent);
+}
+
+.dash-root .lv-tl-text {
+  font-size: 12.5px;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.dash-root .lv-tl-meta {
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+@media (max-width: 900px) {
+  .dash-root .lv-d-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .dash-root .leads-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .dash-root .ld-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dash-root .ld-assign {
+    grid-template-columns: 1fr;
+  }
+
+  .dash-root .lv-stats {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .dash-root .lv-filter {
+    flex: 1 1 45%;
+  }
+}
+
+@media (max-width: 560px) {
+  .dash-root .leads-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .dash-root .leads-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dash-root .nl-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dash-root .lv-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 /* =========================================================================
    Smart Gallery — the embedded @photo-gallery/sdk surface.
    The SDK is themed entirely through the token map in lib/gallery-api.ts
@@ -1475,38 +7924,121 @@
    a slim header (~40px) + compact banner + tight gaps hand almost all of that back to the shell.
    96px = the dashboard's top padding + the slim header row; `.gal-shell` (flex:1; min-height:0)
    consumes whatever is left after the header and the optional demo banner. */
-.dash-root .gal { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 96px); min-height: 700px; }
+.dash-root .gal {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: calc(100vh - 96px);
+  min-height: 700px;
+}
 
 /* Slim inline header — replaces the tall PageHead. One row, ~40px, so the shell keeps the height. */
-.dash-root .gal-head { display: flex; align-items: center; gap: 10px; min-height: 36px; flex: 0 0 auto; }
-.dash-root .gal-head-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--grad-brand); box-shadow: var(--glow-orange); flex: 0 0 auto; }
-.dash-root .gal-head-title { font-size: 16px; font-weight: 700; line-height: 1.1; margin: 0; }
-.dash-root .gal-head-sub { color: var(--muted); font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-@media (max-width: 720px) { .dash-root .gal-head-sub { display: none; } }
+.dash-root .gal-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  flex: 0 0 auto;
+}
+
+.dash-root .gal-head-ic {
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: var(--grad-brand);
+  box-shadow: var(--glow-orange);
+  flex: 0 0 auto;
+}
+
+.dash-root .gal-head-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.1;
+  margin: 0;
+}
+
+.dash-root .gal-head-sub {
+  color: var(--muted);
+  font-size: 12.5px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+@media (max-width: 720px) {
+  .dash-root .gal-head-sub {
+    display: none;
+  }
+}
 
 /* `.view` sets `z-index: 1`, which makes it a stacking context and traps the SDK's
    full-screen overlays (lightbox z1000, editors z1050, camera z1080, modals z1100)
    underneath the topbar's `z-index: 20`. Opting this one view out of the stacking
    context lets those overlays cover the whole dashboard, as they must. The view still
    paints above the ambient `.dash-content::before` glow because it follows it in the DOM. */
-.dash-root .view.gal { z-index: auto; }
+.dash-root .view.gal {
+  z-index: auto;
+}
 
 /* Compact single-line demo banner (~34px). Truncates rather than wrapping so it never steals a
    second row of height from the shell. */
-.dash-root .gal-banner { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: 11px; border: 1px solid var(--border); background: color-mix(in srgb, var(--orange) 9%, var(--panel-2)); color: var(--text-2); font-size: 12px; font-weight: 500; flex: 0 0 auto; white-space: nowrap; overflow: hidden; }
-.dash-root .gal-banner span { overflow: hidden; text-overflow: ellipsis; }
-.dash-root .gal-banner svg { color: var(--orange); flex: 0 0 auto; }
+.dash-root .gal-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+  padding: 6px 12px;
+  border-radius: 11px;
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--orange) 9%, var(--panel-2));
+  color: var(--text-2);
+  font-size: 12px;
+  font-weight: 500;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.dash-root .gal-banner span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dash-root .gal-banner svg {
+  color: var(--orange);
+  flex: 0 0 auto;
+}
 
 /* The gallery's own viewport. `overflow: hidden` keeps the SDK's internal scrollers
    in charge; its full-screen overlays (lightbox/editor/camera) are position:fixed
    and deliberately escape this box to cover the whole dashboard. */
-.dash-root .gal-shell { flex: 1; min-height: 0; position: relative; border-radius: 18px; border: 1px solid var(--border); background: var(--panel-2); overflow: hidden; box-shadow: var(--card-hi), 0 1px 2px rgba(0, 0, 0, 0.18); }
-.dash-root[data-theme="dark"] .gal-shell { border: 0.5px solid #452b1a; border-radius: 20px; }
+.dash-root .gal-shell {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  overflow: hidden;
+  box-shadow: var(--card-hi), 0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.dash-root[data-theme="dark"] .gal-shell {
+  border: 0.5px solid #452b1a;
+  border-radius: 20px;
+}
 
 /* The SDK's embedded root fills this box. (--apg-overlay-top is set from the
    component's `style` prop — the SDK writes an inline default that a stylesheet
    rule could not override.) */
-.dash-root .gal-shell .apg { height: 100%; }
+.dash-root .gal-shell .apg {
+  height: 100%;
+}
 
 /* ---- Fullscreen (the SDK puts `.apg--fullscreen` on its root: position:fixed; inset:0) ----
    A position:fixed box is only clipped by an ancestor that is its CONTAINING BLOCK, which
@@ -1527,306 +8059,1702 @@
 /* Belt and braces: if a future rule ever DOES make `.gal-shell` a containing block, an
    `overflow: hidden` on it would crop the fullscreen root to the embedded box. Drop the clip
    (and the rounded corner it exists to enforce) for exactly as long as fullscreen is on. */
-.dash-root .gal-shell:has(.apg--fullscreen) { overflow: visible; }
-
-.dash-root .gal-placeholder { height: 100%; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 28px; }
-.dash-root .gal-placeholder-ic { width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: var(--grad-brand); box-shadow: var(--glow-orange); }
-.dash-root .gal-placeholder p { color: var(--muted); font-size: 13px; max-width: 420px; }
-.dash-root .gal-placeholder h3 { font-size: 16px; font-weight: 700; }
-.dash-root .gal-placeholder-error .gal-placeholder-ic { background: color-mix(in srgb, var(--red) 88%, #000); box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--red) 60%, transparent); }
-
-@media (max-width: 920px) {
-  /* Narrower chrome: a little less top offset, and a smaller floor so short viewports still work. */
-  .dash-root .gal { height: calc(100vh - 84px); min-height: 560px; }
+.dash-root .gal-shell:has(.apg--fullscreen) {
+  overflow: visible;
 }
 
-  /* ---- Org Settings → Integrations ---- */
-  .dash-root .settings-section { margin-top: 8px; }
-  .dash-root .settings-section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
-  .dash-root .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
-  .dash-root .settings-card { border: 1px solid var(--border); background: var(--panel); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
-  .dash-root .settings-card.is-soon { opacity: 0.6; }
-  .dash-root .settings-card-head { display: flex; align-items: flex-start; gap: 12px; }
-  .dash-root .settings-card-ic { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
-  .dash-root .settings-card-titles { flex: 1 1 auto; min-width: 0; }
-  .dash-root .settings-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
-  .dash-root .settings-card-sub { font-weight: 500; color: var(--muted); }
-  .dash-root .settings-card-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
-  .dash-root .settings-card-body { display: flex; flex-direction: column; gap: 12px; }
-  .dash-root .settings-kv { display: grid; gap: 10px; margin: 0; }
-  .dash-root .settings-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
-  .dash-root .settings-kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
-  .dash-root .settings-kv dt { font-size: 12.5px; color: var(--muted); }
-  .dash-root .settings-kv dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
-  .dash-root .settings-card-actions { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
-  .dash-root .settings-card-note { font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
-  .dash-root .settings-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
+.dash-root .gal-placeholder {
+  height: 100%;
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  padding: 28px;
+}
 
-  /* ---- Global conversation search (topbar) ---- */
-  .dash-root .gs-wrap { position: relative; }
-  .dash-root .gs-field { display: flex; align-items: center; gap: 8px; height: 40px; width: 300px; max-width: 42vw; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); }
-  .dash-root .gs-field:focus-within { border-color: var(--orange); }
-  .dash-root .gs-input { flex: 1 1 auto; border: 0; background: none; outline: none; color: var(--text); font-size: 13.5px; }
-  .dash-root .gs-input::placeholder { color: var(--muted); }
-  .dash-root .gs-pop { position: absolute; top: calc(100% + 6px); right: 0; width: 420px; max-width: 90vw; max-height: 420px; overflow-y: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55); z-index: 60; }
-  .dash-root .gs-empty { padding: 14px; font-size: 13px; color: var(--muted); text-align: center; }
-  .dash-root .gs-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left; color: var(--text); }
-  .dash-root .gs-row:hover { background: var(--panel-2); }
-  .dash-root .gs-ic { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
-  .dash-root .gs-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
-  .dash-root .gs-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .gs-snippet { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .gs-snippet em { color: var(--orange); font-style: normal; font-weight: 600; }
-  .dash-root .gs-surface { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
-  @media (max-width: 720px) { .dash-root .gs-field { width: 160px; } }
+.dash-root .gal-placeholder-ic {
+  width: 66px;
+  height: 66px;
+  border-radius: 20px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: var(--grad-brand);
+  box-shadow: var(--glow-orange);
+}
 
-  .dash-root .ds-toast.is-clickable .ds-toast-body { cursor: pointer; }
-  .dash-root .ds-toast.is-clickable .ds-toast-body:hover .ds-toast-title { color: var(--orange); }
+.dash-root .gal-placeholder p {
+  color: var(--muted);
+  font-size: 13px;
+  max-width: 420px;
+}
 
-  /* =======================================================================
+.dash-root .gal-placeholder h3 {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.dash-root .gal-placeholder-error .gal-placeholder-ic {
+  background: color-mix(in srgb, var(--red) 88%, #000);
+  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--red) 60%, transparent);
+}
+
+@media (max-width: 920px) {
+
+  /* Narrower chrome: a little less top offset, and a smaller floor so short viewports still work. */
+  .dash-root .gal {
+    height: calc(100vh - 84px);
+    min-height: 560px;
+  }
+}
+
+/* ---- Org Settings → Integrations ---- */
+.dash-root .settings-section {
+  margin-top: 8px;
+}
+
+.dash-root .settings-section-title {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 0 0 14px;
+}
+
+.dash-root .settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 16px;
+}
+
+.dash-root .settings-card {
+  border: 1px solid var(--border);
+  background: var(--panel);
+  border-radius: 16px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dash-root .settings-card.is-soon {
+  opacity: 0.6;
+}
+
+.dash-root .settings-card-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.dash-root .settings-card-ic {
+  flex: 0 0 auto;
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--orange) 14%, transparent);
+  color: var(--orange);
+}
+
+.dash-root .settings-card-titles {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.dash-root .settings-card-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.dash-root .settings-card-sub {
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.dash-root .settings-card-desc {
+  font-size: 12.5px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .settings-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dash-root .settings-kv {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+
+.dash-root .settings-kv>div {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 8px;
+}
+
+.dash-root .settings-kv>div:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.dash-root .settings-kv dt {
+  font-size: 12.5px;
+  color: var(--muted);
+}
+
+.dash-root .settings-kv dd {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.dash-root .settings-card-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.dash-root .settings-card-note {
+  font-size: 12px;
+  color: var(--muted);
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px 12px;
+}
+
+.dash-root .settings-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+/* ---- Global conversation search (topbar) ---- */
+.dash-root .gs-wrap {
+  position: relative;
+}
+
+.dash-root .gs-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  width: 300px;
+  max-width: 42vw;
+  padding: 0 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--muted);
+}
+
+.dash-root .gs-field:focus-within {
+  border-color: var(--orange);
+}
+
+.dash-root .gs-input {
+  flex: 1 1 auto;
+  border: 0;
+  background: none;
+  outline: none;
+  color: var(--text);
+  font-size: 13.5px;
+}
+
+.dash-root .gs-input::placeholder {
+  color: var(--muted);
+}
+
+.dash-root .gs-pop {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  width: 420px;
+  max-width: 90vw;
+  max-height: 420px;
+  overflow-y: auto;
+  padding: 6px;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
+  z-index: 60;
+}
+
+.dash-root .gs-empty {
+  padding: 14px;
+  font-size: 13px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.dash-root .gs-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 11px;
+  border: 0;
+  background: none;
+  border-radius: 10px;
+  cursor: pointer;
+  text-align: left;
+  color: var(--text);
+}
+
+.dash-root .gs-row:hover {
+  background: var(--panel-2);
+}
+
+.dash-root .gs-ic {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--orange) 14%, transparent);
+  color: var(--orange);
+}
+
+.dash-root .gs-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.dash-root .gs-title {
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .gs-snippet {
+  font-size: 12px;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .gs-snippet em {
+  color: var(--orange);
+  font-style: normal;
+  font-weight: 600;
+}
+
+.dash-root .gs-surface {
+  flex: 0 0 auto;
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+@media (max-width: 720px) {
+  .dash-root .gs-field {
+    width: 160px;
+  }
+}
+
+.dash-root .ds-toast.is-clickable .ds-toast-body {
+  cursor: pointer;
+}
+
+.dash-root .ds-toast.is-clickable .ds-toast-body:hover .ds-toast-title {
+  color: var(--orange);
+}
+
+/* =======================================================================
      Pipeline — kanban board
      ======================================================================= */
-  .dash-root .pl { display: flex; flex-direction: column; height: 100%; min-height: 0; }
+.dash-root .pl {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
 
-  /* tone accents (per column / drawer via data-tone) */
-  .dash-root [data-tone="blue"]    { --pl-accent: #4f8cff; }
-  .dash-root [data-tone="purple"]  { --pl-accent: #b07bf2; }
-  .dash-root [data-tone="magenta"] { --pl-accent: #db5fd0; }
-  .dash-root [data-tone="orange"]  { --pl-accent: var(--orange); }
-  .dash-root [data-tone="green"]   { --pl-accent: var(--green); }
-  .dash-root [data-tone="cyan"]    { --pl-accent: #34c9d6; }
-  .dash-root [data-tone="red"]     { --pl-accent: var(--red); }
+/* tone accents (per column / drawer via data-tone) */
+.dash-root [data-tone="blue"] {
+  --pl-accent: #4f8cff;
+}
 
-  /* ---- head ---- */
-  .dash-root .pl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
-  .dash-root .pl-head-l { display: flex; align-items: center; gap: 12px; }
-  .dash-root .pl-head-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); flex: 0 0 auto; }
-  .dash-root .pl-head-l h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
-  .dash-root .pl-head-l p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
-  .dash-root .pl-search { display: flex; align-items: center; gap: 8px; height: 40px; width: 300px; max-width: 46vw; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); }
-  .dash-root .pl-search:focus-within { border-color: var(--orange); }
-  .dash-root .pl-search input { flex: 1 1 auto; border: 0; background: none; outline: none; color: var(--text); font-size: 13.5px; font-family: inherit; }
-  .dash-root .pl-search input::placeholder { color: var(--muted); }
-  .dash-root .pl-search-x { display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; }
-  .dash-root .pl-search-x:hover { color: var(--text); }
+.dash-root [data-tone="purple"] {
+  --pl-accent: #b07bf2;
+}
 
-  /* ---- board ---- */
-  .dash-root .pl-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-height: 0; padding-bottom: 12px; scrollbar-width: thin; }
-  .dash-root .pl-board::-webkit-scrollbar { height: 9px; }
-  .dash-root .pl-board::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
+.dash-root [data-tone="magenta"] {
+  --pl-accent: #db5fd0;
+}
 
-  .dash-root .pl-col { flex: 0 0 288px; width: 288px; display: flex; flex-direction: column; min-height: 0; max-height: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 10px 4px; transition: border-color .14s, background .14s; }
-  .dash-root .pl-col.is-over { border-color: var(--pl-accent); background: color-mix(in srgb, var(--pl-accent) 7%, var(--panel-2)); }
-  .dash-root .pl-col.is-flag { background: color-mix(in srgb, var(--pl-accent) 5%, var(--panel-2)); }
+.dash-root [data-tone="orange"] {
+  --pl-accent: var(--orange);
+}
 
-  .dash-root .pl-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; }
-  .dash-root .pl-col-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pl-accent); flex: 0 0 auto; box-shadow: 0 0 8px color-mix(in srgb, var(--pl-accent) 60%, transparent); }
-  .dash-root .pl-col-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
-  .dash-root .pl-col-count { display: grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--pl-accent) 20%, transparent); color: var(--pl-accent); font-size: 11px; font-weight: 700; }
-  .dash-root .pl-col-step { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
-  .dash-root .pl-col-bar { height: 3px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 0 4px 10px; }
-  .dash-root .pl-col-bar > span { display: block; height: 100%; background: var(--pl-accent); border-radius: inherit; }
+.dash-root [data-tone="green"] {
+  --pl-accent: var(--green);
+}
 
-  .dash-root .pl-col-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 2px 4px 10px; min-height: 60px; scrollbar-width: thin; }
-  .dash-root .pl-col-body::-webkit-scrollbar { width: 6px; }
-  .dash-root .pl-col-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
-  .dash-root .pl-col-empty { border: 1px dashed var(--border-2); border-radius: 10px; padding: 18px 10px; text-align: center; font-size: 12px; color: var(--faint); }
+.dash-root [data-tone="cyan"] {
+  --pl-accent: #34c9d6;
+}
 
-  /* ---- card ---- */
-  .dash-root .pl-card { text-align: left; width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: border-color .14s, transform .1s, box-shadow .14s; }
-  .dash-root .pl-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); transform: translateY(-1px); }
-  .dash-root .pl-card.is-dragging { opacity: 0.5; }
-  .dash-root .pl-col.is-flag .pl-card { border-left: 3px solid var(--pl-accent); }
-  .dash-root .pl-card-top { display: flex; align-items: center; gap: 10px; }
-  .dash-root .pl-card-id { min-width: 0; flex: 1; }
-  .dash-root .pl-card-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .pl-card-addr { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
-  .dash-root .pl-card-addr svg { flex: 0 0 auto; color: var(--faint); }
-  .dash-root .pl-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
-  .dash-root .pl-tag { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px; }
-  .dash-root .pl-tag.work { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
-  .dash-root .pl-tag.type { background: color-mix(in srgb, var(--blue) 18%, transparent); color: #6f9bff; }
-  .dash-root .pl-card-foot { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
-  .dash-root .pl-card-foot svg { flex: 0 0 auto; }
-  .dash-root .pl-rep { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .pl-card-spacer { flex: 1; }
-  .dash-root .pl-storm { display: inline-flex; align-items: center; gap: 3px; color: var(--orange); font-weight: 600; flex: 0 0 auto; }
-  .dash-root .pl-age { display: inline-flex; align-items: center; gap: 3px; color: var(--faint); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
+.dash-root [data-tone="red"] {
+  --pl-accent: var(--red);
+}
 
-  /* ---- drawer ---- */
-  .dash-root .pl-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 79; animation: ds-fade .2s ease; }
-  .dash-root .pl-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 400px; max-width: 92vw; z-index: 80; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--border-2); box-shadow: -24px 0 60px -20px rgba(0,0,0,0.6); animation: pl-slide .22s cubic-bezier(.2,.7,.3,1); }
-  @keyframes pl-slide { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-  .dash-root .pl-drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
-  .dash-root .pl-drawer-id { min-width: 0; flex: 1; }
-  .dash-root .pl-drawer-name { font-size: 16px; font-weight: 700; color: var(--text); }
-  .dash-root .pl-drawer-addr { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dash-root .pl-drawer-x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 0; background: none; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
-  .dash-root .pl-drawer-x:hover { background: var(--panel-2); color: var(--text); }
+/* ---- head ---- */
+.dash-root .pl-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
 
-  .dash-root .pl-drawer-status { padding: 14px 18px; border-bottom: 1px solid var(--border); }
-  .dash-root .pl-status-row { display: flex; align-items: baseline; justify-content: space-between; }
-  .dash-root .pl-status-label { font-size: 13px; font-weight: 600; color: var(--text); }
-  .dash-root .pl-status-pct { font-size: 13px; font-weight: 700; color: var(--pl-accent); font-variant-numeric: tabular-nums; }
-  .dash-root .pl-status-bar { height: 5px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 8px 0 12px; }
-  .dash-root .pl-status-bar > span { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--pl-accent) 55%, transparent), var(--pl-accent)); border-radius: inherit; transition: width .3s ease; }
-  .dash-root .pl-steps { display: flex; flex-wrap: wrap; gap: 4px 12px; }
-  .dash-root .pl-step { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--faint); }
-  .dash-root .pl-step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); }
-  .dash-root .pl-step.done { color: var(--text-2); }
-  .dash-root .pl-step.done .pl-step-dot { background: var(--pl-accent); }
+.dash-root .pl-head-l {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 
-  .dash-root .pl-drawer-tabs { display: flex; gap: 22px; padding: 0 18px; border-bottom: 1px solid var(--border); }
-  .dash-root .pl-drawer-tabs button { position: relative; border: 0; background: none; padding: 12px 0; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
-  .dash-root .pl-drawer-tabs button.active { color: var(--text); }
-  .dash-root .pl-drawer-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--orange); }
+.dash-root .pl-head-ic {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--orange) 14%, transparent);
+  color: var(--orange);
+  flex: 0 0 auto;
+}
 
-  .dash-root .pl-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; }
-  .dash-root .pl-dsec { margin-bottom: 18px; }
-  .dash-root .pl-dsec-head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
-  .dash-root .pl-contact { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); padding: 5px 0; }
-  .dash-root .pl-contact svg { color: var(--muted); flex: 0 0 auto; }
-  .dash-root .pl-jobgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-  .dash-root .pl-jobbox { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
-  .dash-root .pl-jobk { font-size: 11px; color: var(--muted); }
-  .dash-root .pl-jobv { font-size: 13px; font-weight: 600; color: var(--text); }
-  .dash-root .pl-assign { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text); padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
-  .dash-root .pl-assign svg { color: var(--muted); }
-  .dash-root .pl-notes { font-size: 13px; line-height: 1.5; color: var(--text-2); padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
+.dash-root .pl-head-l h1 {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
 
-  .dash-root .pl-activity { display: flex; flex-direction: column; }
-  .dash-root .pl-act { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
-  .dash-root .pl-act::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: -4px; width: 2px; background: var(--border); }
-  .dash-root .pl-act:last-child { padding-bottom: 0; }
-  .dash-root .pl-act:last-child::before { display: none; }
-  .dash-root .pl-act-node { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); margin-top: 4px; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--panel); }
-  .dash-root .pl-act-body { flex: 1; min-width: 0; }
-  .dash-root .pl-act-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
-  .dash-root .pl-act-head svg { color: var(--muted); }
-  .dash-root .pl-act-from { color: var(--muted); font-weight: 500; }
-  .dash-root .pl-act-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
-  .dash-root .pl-act-note { font-size: 12.5px; color: var(--text-2); margin-top: 7px; padding: 8px 11px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--border); }
+.dash-root .pl-head-l p {
+  margin: 2px 0 0;
+  font-size: 12.5px;
+  color: var(--muted);
+}
 
-  .dash-root .pl-drawer-foot { padding: 14px 18px; border-top: 1px solid var(--border); }
-  .dash-root .pl-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: filter .14s; }
-  .dash-root .pl-more:hover { filter: brightness(1.08); }
+.dash-root .pl-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  width: 300px;
+  max-width: 46vw;
+  padding: 0 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--muted);
+}
 
-  /* =======================================================================
+.dash-root .pl-search:focus-within {
+  border-color: var(--orange);
+}
+
+.dash-root .pl-search input {
+  flex: 1 1 auto;
+  border: 0;
+  background: none;
+  outline: none;
+  color: var(--text);
+  font-size: 13.5px;
+  font-family: inherit;
+}
+
+.dash-root .pl-search input::placeholder {
+  color: var(--muted);
+}
+
+.dash-root .pl-search-x {
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 2px;
+}
+
+.dash-root .pl-search-x:hover {
+  color: var(--text);
+}
+
+/* ---- board ---- */
+.dash-root .pl-board {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding-bottom: 12px;
+  scrollbar-width: thin;
+}
+
+.dash-root .pl-board::-webkit-scrollbar {
+  height: 9px;
+}
+
+.dash-root .pl-board::-webkit-scrollbar-thumb {
+  background: var(--border-2);
+  border-radius: 99px;
+}
+
+.dash-root .pl-col {
+  flex: 0 0 288px;
+  width: 288px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: 100%;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 12px 10px 4px;
+  transition: border-color .14s, background .14s;
+}
+
+.dash-root .pl-col.is-over {
+  border-color: var(--pl-accent);
+  background: color-mix(in srgb, var(--pl-accent) 7%, var(--panel-2));
+}
+
+.dash-root .pl-col.is-flag {
+  background: color-mix(in srgb, var(--pl-accent) 5%, var(--panel-2));
+}
+
+.dash-root .pl-col-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px 8px;
+}
+
+.dash-root .pl-col-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--pl-accent);
+  flex: 0 0 auto;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--pl-accent) 60%, transparent);
+}
+
+.dash-root .pl-col-label {
+  font-size: 11.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-2);
+}
+
+.dash-root .pl-col-count {
+  display: grid;
+  place-items: center;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--pl-accent) 20%, transparent);
+  color: var(--pl-accent);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.dash-root .pl-col-step {
+  margin-left: auto;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--faint);
+  font-variant-numeric: tabular-nums;
+}
+
+.dash-root .pl-col-bar {
+  height: 3px;
+  border-radius: 99px;
+  background: var(--track);
+  overflow: hidden;
+  margin: 0 4px 10px;
+}
+
+.dash-root .pl-col-bar>span {
+  display: block;
+  height: 100%;
+  background: var(--pl-accent);
+  border-radius: inherit;
+}
+
+.dash-root .pl-col-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: auto;
+  padding: 2px 4px 10px;
+  min-height: 60px;
+  scrollbar-width: thin;
+}
+
+.dash-root .pl-col-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dash-root .pl-col-body::-webkit-scrollbar-thumb {
+  background: var(--border-2);
+  border-radius: 99px;
+}
+
+.dash-root .pl-col-empty {
+  border: 1px dashed var(--border-2);
+  border-radius: 10px;
+  padding: 18px 10px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--faint);
+}
+
+/* ---- card ---- */
+.dash-root .pl-card {
+  text-align: left;
+  width: 100%;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 11px 12px;
+  cursor: pointer;
+  transition: border-color .14s, transform .1s, box-shadow .14s;
+}
+
+.dash-root .pl-card:hover {
+  border-color: var(--border-2);
+  box-shadow: var(--shadow);
+  transform: translateY(-1px);
+}
+
+.dash-root .pl-card.is-dragging {
+  opacity: 0.5;
+}
+
+.dash-root .pl-col.is-flag .pl-card {
+  border-left: 3px solid var(--pl-accent);
+}
+
+.dash-root .pl-card-top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dash-root .pl-card-id {
+  min-width: 0;
+  flex: 1;
+}
+
+.dash-root .pl-card-name {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .pl-card-addr {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .pl-card-addr svg {
+  flex: 0 0 auto;
+  color: var(--faint);
+}
+
+.dash-root .pl-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 10px 0;
+}
+
+.dash-root .pl-tag {
+  font-size: 10.5px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 7px;
+}
+
+.dash-root .pl-tag.work {
+  background: color-mix(in srgb, var(--orange) 15%, transparent);
+  color: var(--orange);
+}
+
+.dash-root .pl-tag.type {
+  background: color-mix(in srgb, var(--blue) 18%, transparent);
+  color: #6f9bff;
+}
+
+.dash-root .pl-card-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 9px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.dash-root .pl-card-foot svg {
+  flex: 0 0 auto;
+}
+
+.dash-root .pl-rep {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .pl-card-spacer {
+  flex: 1;
+}
+
+.dash-root .pl-storm {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--orange);
+  font-weight: 600;
+  flex: 0 0 auto;
+}
+
+.dash-root .pl-age {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--faint);
+  flex: 0 0 auto;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- drawer ---- */
+.dash-root .pl-scrim {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 79;
+  animation: ds-fade .2s ease;
+}
+
+.dash-root .pl-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: 400px;
+  max-width: 92vw;
+  z-index: 80;
+  display: flex;
+  flex-direction: column;
+  background: var(--panel);
+  border-left: 1px solid var(--border-2);
+  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.6);
+  animation: pl-slide .22s cubic-bezier(.2, .7, .3, 1);
+}
+
+@keyframes pl-slide {
+  from {
+    transform: translateX(24px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.dash-root .pl-drawer-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 18px 18px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .pl-drawer-id {
+  min-width: 0;
+  flex: 1;
+}
+
+.dash-root .pl-drawer-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.dash-root .pl-drawer-addr {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash-root .pl-drawer-x {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  border: 0;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
+.dash-root .pl-drawer-x:hover {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+.dash-root .pl-drawer-status {
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .pl-status-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.dash-root .pl-status-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.dash-root .pl-status-pct {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--pl-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.dash-root .pl-status-bar {
+  height: 5px;
+  border-radius: 99px;
+  background: var(--track);
+  overflow: hidden;
+  margin: 8px 0 12px;
+}
+
+.dash-root .pl-status-bar>span {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--pl-accent) 55%, transparent), var(--pl-accent));
+  border-radius: inherit;
+  transition: width .3s ease;
+}
+
+.dash-root .pl-steps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+}
+
+.dash-root .pl-step {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10.5px;
+  color: var(--faint);
+}
+
+.dash-root .pl-step-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--border-2);
+}
+
+.dash-root .pl-step.done {
+  color: var(--text-2);
+}
+
+.dash-root .pl-step.done .pl-step-dot {
+  background: var(--pl-accent);
+}
+
+.dash-root .pl-drawer-tabs {
+  display: flex;
+  gap: 22px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dash-root .pl-drawer-tabs button {
+  position: relative;
+  border: 0;
+  background: none;
+  padding: 12px 0;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.dash-root .pl-drawer-tabs button.active {
+  color: var(--text);
+}
+
+.dash-root .pl-drawer-tabs button.active::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--orange);
+}
+
+.dash-root .pl-drawer-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 16px 18px;
+}
+
+.dash-root .pl-dsec {
+  margin-bottom: 18px;
+}
+
+.dash-root .pl-dsec-head {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--faint);
+  margin-bottom: 9px;
+}
+
+.dash-root .pl-contact {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 13px;
+  color: var(--text-2);
+  padding: 5px 0;
+}
+
+.dash-root .pl-contact svg {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .pl-jobgrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.dash-root .pl-jobbox {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel-2);
+}
+
+.dash-root .pl-jobk {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.dash-root .pl-jobv {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.dash-root .pl-assign {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel-2);
+}
+
+.dash-root .pl-assign svg {
+  color: var(--muted);
+}
+
+.dash-root .pl-notes {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-2);
+  padding: 11px 13px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel-2);
+}
+
+.dash-root .pl-activity {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-root .pl-act {
+  display: flex;
+  gap: 12px;
+  position: relative;
+  padding-bottom: 18px;
+}
+
+.dash-root .pl-act::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 14px;
+  bottom: -4px;
+  width: 2px;
+  background: var(--border);
+}
+
+.dash-root .pl-act:last-child {
+  padding-bottom: 0;
+}
+
+.dash-root .pl-act:last-child::before {
+  display: none;
+}
+
+.dash-root .pl-act-node {
+  position: relative;
+  z-index: 1;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--orange);
+  margin-top: 4px;
+  flex: 0 0 auto;
+  box-shadow: 0 0 0 3px var(--panel);
+}
+
+.dash-root .pl-act-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-root .pl-act-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.dash-root .pl-act-head svg {
+  color: var(--muted);
+}
+
+.dash-root .pl-act-from {
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.dash-root .pl-act-meta {
+  font-size: 11.5px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.dash-root .pl-act-note {
+  font-size: 12.5px;
+  color: var(--text-2);
+  margin-top: 7px;
+  padding: 8px 11px;
+  border-radius: 9px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+}
+
+.dash-root .pl-drawer-foot {
+  padding: 14px 18px;
+  border-top: 1px solid var(--border);
+}
+
+.dash-root .pl-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 44px;
+  border: 0;
+  border-radius: 12px;
+  background: var(--blue);
+  color: #fff;
+  font-family: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: filter .14s;
+}
+
+.dash-root .pl-more:hover {
+  filter: brightness(1.08);
+}
+
+/* =======================================================================
      Pipeline — full-page lead detail (from the drawer's "More Details")
      ======================================================================= */
-  .dash-root .pld { display: flex; flex-direction: column; gap: 16px; }
+.dash-root .pld {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
 
-  /* ---- breadcrumb ---- */
-  .dash-root .pld-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); }
-  .dash-root .pld-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .14s; }
-  .dash-root .pld-back:hover { color: var(--orange); }
-  .dash-root .pld-back-ic { transform: rotate(180deg); }
-  .dash-root .pld-crumb-now { color: var(--text); font-weight: 600; }
-  .dash-root .pld-crumb-id { margin-left: 2px; padding: 2px 7px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
+/* ---- breadcrumb ---- */
+.dash-root .pld-crumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  color: var(--faint);
+}
 
-  /* ---- hero ---- */
-  /* No `overflow: hidden` here — it would clip the Move Stage dropdown. The
+.dash-root .pld-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  background: none;
+  padding: 0;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+  cursor: pointer;
+  transition: color .14s;
+}
+
+.dash-root .pld-back:hover {
+  color: var(--orange);
+}
+
+.dash-root .pld-back-ic {
+  transform: rotate(180deg);
+}
+
+.dash-root .pld-crumb-now {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.dash-root .pld-crumb-id {
+  margin-left: 2px;
+  padding: 2px 7px;
+  border-radius: 6px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- hero ---- */
+/* No `overflow: hidden` here — it would clip the Move Stage dropdown. The
      accent bar rounds its own top corners instead. */
-  .dash-root .pld-hero { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); position: relative; }
-  .dash-root .pld-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--pl-accent), transparent); }
-  .dash-root .pld-hero-id { flex: 1; min-width: 0; }
-  .dash-root .pld-hero-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
-  .dash-root .pld-hero-addr { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--muted); }
-  .dash-root .pld-hero-addr svg { flex: 0 0 auto; color: var(--faint); }
-  .dash-root .pld-hero-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
-  .dash-root .pld-hero-actions { display: flex; gap: 8px; flex: 0 0 auto; }
+.dash-root .pld-hero {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 18px 20px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  position: relative;
+}
 
-  /* ---- move stage dropdown ---- */
-  .dash-root .pld-move { position: relative; }
-  .dash-root .pld-move-scrim { position: fixed; inset: 0; z-index: 40; }
-  .dash-root .pld-move-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 41; width: 232px; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px; border-radius: 14px; border: 1px solid var(--border-2); background: var(--panel); box-shadow: var(--shadow-lg, 0 18px 44px -12px rgba(0,0,0,0.55)); animation: ds-fade .14s ease; }
-  .dash-root .pld-move-menu::-webkit-scrollbar { width: 6px; }
-  .dash-root .pld-move-menu::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
-  .dash-root .pld-move-group + .pld-move-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
-  .dash-root .pld-move-grouphead { padding: 7px 10px 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
-  .dash-root .pld-move-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); text-align: left; cursor: pointer; transition: background .12s, color .12s; }
-  .dash-root .pld-move-item:hover:not(:disabled) { background: color-mix(in srgb, var(--pl-accent) 12%, transparent); color: var(--text); }
-  .dash-root .pld-move-item:disabled { cursor: default; color: var(--text); }
-  .dash-root .pld-move-item.is-current { background: var(--panel-2); }
-  .dash-root .pld-move-item svg { margin-left: auto; color: var(--pl-accent); flex: 0 0 auto; }
-  .dash-root .pld-move-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pl-accent); flex: 0 0 auto; box-shadow: 0 0 8px color-mix(in srgb, var(--pl-accent) 55%, transparent); }
-  .dash-root .pld-move-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dash-root .pld-hero::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 3px;
+  border-radius: 16px 16px 0 0;
+  background: linear-gradient(90deg, var(--pl-accent), transparent);
+}
 
-  /* ---- stage progress ---- */
-  .dash-root .pld-progress { padding: 16px 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); }
-  .dash-root .pld-progress-row { display: flex; align-items: baseline; justify-content: space-between; }
-  .dash-root .pld-progress-label { font-size: 14px; font-weight: 700; color: var(--text); }
-  .dash-root .pld-progress-pct { font-size: 13px; font-weight: 700; color: var(--pl-accent); font-variant-numeric: tabular-nums; }
-  .dash-root .pld-progress-bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 10px 0 16px; }
-  .dash-root .pld-progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--pl-accent) 55%, transparent), var(--pl-accent)); border-radius: inherit; transition: width .3s ease; }
+.dash-root .pld-hero-id {
+  flex: 1;
+  min-width: 0;
+}
 
-  .dash-root .pld-steps { display: flex; flex-wrap: wrap; gap: 10px 6px; list-style: none; margin: 0; padding: 0; }
-  .dash-root .pld-step { display: flex; align-items: center; gap: 7px; flex: 1 1 120px; min-width: 0; position: relative; }
-  .dash-root .pld-step::after { content: ""; position: absolute; left: 22px; right: 4px; top: 11px; height: 2px; background: var(--border); z-index: 0; }
-  .dash-root .pld-step:last-child::after { display: none; }
-  .dash-root .pld-step.done::after { background: var(--pl-accent); }
-  .dash-root .pld-step.now::after, .dash-root .pld-step.now ~ .pld-step::after { background: var(--border); }
-  .dash-root .pld-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: var(--panel-2); border: 1px solid var(--border-2); color: var(--faint); font-size: 10.5px; font-weight: 700; }
-  .dash-root .pld-step.done .pld-step-dot { background: var(--pl-accent); border-color: var(--pl-accent); color: #fff; }
-  .dash-root .pld-step.now .pld-step-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pl-accent) 20%, transparent); }
-  .dash-root .pld-step-label { font-size: 11.5px; font-weight: 600; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--panel); padding-right: 6px; position: relative; z-index: 1; }
-  .dash-root .pld-step.done .pld-step-label { color: var(--text-2); }
-  .dash-root .pld-step.now .pld-step-label { color: var(--text); }
+.dash-root .pld-hero-name {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--text);
+}
 
-  /* ---- overview grid ---- */
-  .dash-root .pld-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
-  .dash-root .pld-sec { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); overflow: hidden; }
-  .dash-root .pld-sec.wide { grid-column: 1 / -1; }
-  .dash-root .pld-sec-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel-2); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); }
-  .dash-root .pld-sec-head svg { color: var(--pl-accent); }
-  .dash-root .pld-sec-body { padding: 8px 16px 14px; }
+.dash-root .pld-hero-addr {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--muted);
+}
 
-  .dash-root .pld-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
-  .dash-root .pld-kv:last-child { border-bottom: 0; }
-  .dash-root .pld-kv-k { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
-  .dash-root .pld-kv-v { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
+.dash-root .pld-hero-addr svg {
+  flex: 0 0 auto;
+  color: var(--faint);
+}
 
-  .dash-root .pld-sublabel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin: 12px 0 6px; }
-  .dash-root .pld-sec-body > .pld-sublabel:first-child { margin-top: 4px; }
-  .dash-root .pld-contact { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; }
-  .dash-root .pld-contact svg { color: var(--muted); flex: 0 0 auto; }
-  .dash-root .pld-contact-val { font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
-  .dash-root .pld-contact-tag { font-size: 11px; color: var(--muted); padding: 2px 7px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); }
-  .dash-root .pld-notes { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
+.dash-root .pld-hero-pills {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
+  margin-top: 12px;
+}
 
-  .dash-root .pld-assign { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; }
-  .dash-root .pld-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 12px; color: var(--faint); text-align: center; }
-  .dash-root .pld-empty p { margin: 0; font-size: 12.5px; }
+.dash-root .pld-hero-actions {
+  display: flex;
+  gap: 8px;
+  flex: 0 0 auto;
+}
 
-  @media (max-width: 980px) {
-    .dash-root .pld-grid { grid-template-columns: 1fr; }
+/* ---- move stage dropdown ---- */
+.dash-root .pld-move {
+  position: relative;
+}
+
+.dash-root .pld-move-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+}
+
+.dash-root .pld-move-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 41;
+  width: 232px;
+  max-height: min(60vh, 420px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  padding: 6px;
+  border-radius: 14px;
+  border: 1px solid var(--border-2);
+  background: var(--panel);
+  box-shadow: var(--shadow-lg, 0 18px 44px -12px rgba(0, 0, 0, 0.55));
+  animation: ds-fade .14s ease;
+}
+
+.dash-root .pld-move-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dash-root .pld-move-menu::-webkit-scrollbar-thumb {
+  background: var(--border-2);
+  border-radius: 99px;
+}
+
+.dash-root .pld-move-group+.pld-move-group {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--border);
+}
+
+.dash-root .pld-move-grouphead {
+  padding: 7px 10px 5px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+.dash-root .pld-move-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-2);
+  text-align: left;
+  cursor: pointer;
+  transition: background .12s, color .12s;
+}
+
+.dash-root .pld-move-item:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--pl-accent) 12%, transparent);
+  color: var(--text);
+}
+
+.dash-root .pld-move-item:disabled {
+  cursor: default;
+  color: var(--text);
+}
+
+.dash-root .pld-move-item.is-current {
+  background: var(--panel-2);
+}
+
+.dash-root .pld-move-item svg {
+  margin-left: auto;
+  color: var(--pl-accent);
+  flex: 0 0 auto;
+}
+
+.dash-root .pld-move-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--pl-accent);
+  flex: 0 0 auto;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--pl-accent) 55%, transparent);
+}
+
+.dash-root .pld-move-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---- stage progress ---- */
+.dash-root .pld-progress {
+  padding: 16px 20px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.dash-root .pld-progress-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.dash-root .pld-progress-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.dash-root .pld-progress-pct {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--pl-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.dash-root .pld-progress-bar {
+  height: 6px;
+  border-radius: 99px;
+  background: var(--track);
+  overflow: hidden;
+  margin: 10px 0 16px;
+}
+
+.dash-root .pld-progress-bar>span {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--pl-accent) 55%, transparent), var(--pl-accent));
+  border-radius: inherit;
+  transition: width .3s ease;
+}
+
+.dash-root .pld-steps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 6px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.dash-root .pld-step {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex: 1 1 120px;
+  min-width: 0;
+  position: relative;
+}
+
+.dash-root .pld-step::after {
+  content: "";
+  position: absolute;
+  left: 22px;
+  right: 4px;
+  top: 11px;
+  height: 2px;
+  background: var(--border);
+  z-index: 0;
+}
+
+.dash-root .pld-step:last-child::after {
+  display: none;
+}
+
+.dash-root .pld-step.done::after {
+  background: var(--pl-accent);
+}
+
+.dash-root .pld-step.now::after,
+.dash-root .pld-step.now~.pld-step::after {
+  background: var(--border);
+}
+
+.dash-root .pld-step-dot {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  background: var(--panel-2);
+  border: 1px solid var(--border-2);
+  color: var(--faint);
+  font-size: 10.5px;
+  font-weight: 700;
+}
+
+.dash-root .pld-step.done .pld-step-dot {
+  background: var(--pl-accent);
+  border-color: var(--pl-accent);
+  color: #fff;
+}
+
+.dash-root .pld-step.now .pld-step-dot {
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pl-accent) 20%, transparent);
+}
+
+.dash-root .pld-step-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: var(--panel);
+  padding-right: 6px;
+  position: relative;
+  z-index: 1;
+}
+
+.dash-root .pld-step.done .pld-step-label {
+  color: var(--text-2);
+}
+
+.dash-root .pld-step.now .pld-step-label {
+  color: var(--text);
+}
+
+/* ---- overview grid ---- */
+.dash-root .pld-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.dash-root .pld-sec {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--panel);
+  overflow: hidden;
+}
+
+.dash-root .pld-sec.wide {
+  grid-column: 1 / -1;
+}
+
+.dash-root .pld-sec-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel-2);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--text-2);
+}
+
+.dash-root .pld-sec-head svg {
+  color: var(--pl-accent);
+}
+
+.dash-root .pld-sec-body {
+  padding: 8px 16px 14px;
+}
+
+.dash-root .pld-kv {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 9px 0;
+  border-bottom: 1px dashed var(--border);
+}
+
+.dash-root .pld-kv:last-child {
+  border-bottom: 0;
+}
+
+.dash-root .pld-kv-k {
+  font-size: 12px;
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .pld-kv-v {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  text-align: right;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.dash-root .pld-sublabel {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--faint);
+  margin: 12px 0 6px;
+}
+
+.dash-root .pld-sec-body>.pld-sublabel:first-child {
+  margin-top: 4px;
+}
+
+.dash-root .pld-contact {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 0;
+  font-size: 13px;
+}
+
+.dash-root .pld-contact svg {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.dash-root .pld-contact-val {
+  font-weight: 600;
+  color: var(--text);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.dash-root .pld-contact-tag {
+  font-size: 11px;
+  color: var(--muted);
+  padding: 2px 7px;
+  border-radius: 6px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+}
+
+.dash-root .pld-notes {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-2);
+  margin: 0;
+  padding: 11px 13px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel-2);
+}
+
+.dash-root .pld-assign {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0 24px;
+}
+
+.dash-root .pld-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 26px 12px;
+  color: var(--faint);
+  text-align: center;
+}
+
+.dash-root .pld-empty p {
+  margin: 0;
+  font-size: 12.5px;
+}
+
+@media (max-width: 980px) {
+  .dash-root .pld-grid {
+    grid-template-columns: 1fr;
   }
-  @media (max-width: 720px) {
-    .dash-root .pl-search { width: 100%; max-width: none; }
-    .dash-root .pl-col { flex-basis: 82vw; width: 82vw; }
-    .dash-root .pld-hero { flex-wrap: wrap; }
-    .dash-root .pld-hero-actions { width: 100%; }
-    .dash-root .pld-hero-actions > * { flex: 1; }
-    .dash-root .pld-move > .ds-btn { width: 100%; }
-    .dash-root .pld-step { flex: 1 1 100%; }
-    .dash-root .pld-step::after { display: none; }
+}
 
-    /* Phones: a bottom sheet can't be clipped or pushed off-screen the way an
+@media (max-width: 720px) {
+  .dash-root .pl-search {
+    width: 100%;
+    max-width: none;
+  }
+
+  .dash-root .pl-col {
+    flex-basis: 82vw;
+    width: 82vw;
+  }
+
+  .dash-root .pld-hero {
+    flex-wrap: wrap;
+  }
+
+  .dash-root .pld-hero-actions {
+    width: 100%;
+  }
+
+  .dash-root .pld-hero-actions>* {
+    flex: 1;
+  }
+
+  .dash-root .pld-move>.ds-btn {
+    width: 100%;
+  }
+
+  .dash-root .pld-step {
+    flex: 1 1 100%;
+  }
+
+  .dash-root .pld-step::after {
+    display: none;
+  }
+
+  /* Phones: a bottom sheet can't be clipped or pushed off-screen the way an
        anchored dropdown can, and every stage stays thumb-reachable. */
-    .dash-root .pld-move-scrim { background: rgba(0,0,0,0.5); z-index: 90; animation: ds-fade .16s ease; }
-    .dash-root .pld-move-menu {
-      position: fixed; z-index: 91;
-      top: auto; right: 12px; left: 12px; bottom: max(12px, env(safe-area-inset-bottom));
-      width: auto; max-height: 72vh; padding: 8px;
-      border-radius: 18px; box-shadow: 0 -10px 44px -12px rgba(0,0,0,0.6);
-      animation: pld-sheet .2s cubic-bezier(.2,.7,.3,1);
-    }
-    .dash-root .pld-move-item { padding: 11px 12px; font-size: 14px; }
+  .dash-root .pld-move-scrim {
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 90;
+    animation: ds-fade .16s ease;
   }
-  @keyframes pld-sheet { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
 
-  /* Short viewports (landscape phones, small laptops): keep the anchored menu
-     inside the screen rather than letting it run past the fold. */
-  @media (min-width: 721px) and (max-height: 620px) {
-    .dash-root .pld-move-menu { max-height: 48vh; }
+  .dash-root .pld-move-menu {
+    position: fixed;
+    z-index: 91;
+    top: auto;
+    right: 12px;
+    left: 12px;
+    bottom: max(12px, env(safe-area-inset-bottom));
+    width: auto;
+    max-height: 72vh;
+    padding: 8px;
+    border-radius: 18px;
+    box-shadow: 0 -10px 44px -12px rgba(0, 0, 0, 0.6);
+    animation: pld-sheet .2s cubic-bezier(.2, .7, .3, 1);
   }
+
+  .dash-root .pld-move-item {
+    padding: 11px 12px;
+    font-size: 14px;
+  }
+}
+
+@keyframes pld-sheet {
+  from {
+    transform: translateY(14px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Short viewports (landscape phones, small laptops): keep the anchored menu
+     inside the screen rather than letting it run past the fold. */
+@media (min-width: 721px) and (max-height: 620px) {
+  .dash-root .pld-move-menu {
+    max-height: 48vh;
+  }
+}
+
+/* Kept-mounted modules (Messenger / Inbox). `hidden` alone is display:none by UA default, but a
+     stray `display` rule would beat it — be explicit so a hidden module can never occupy layout. */
+.dash-root .dash-keepalive[hidden] {
+  display: none !important;
+}
+
+.dash-root .dash-keepalive {
+  display: block;
+}
\ No newline at end of file
diff --git a/src/components/dashboard/dashboard.tsx b/src/components/dashboard/dashboard.tsx
index 60ae51e..65156db 100644
--- a/src/components/dashboard/dashboard.tsx
+++ b/src/components/dashboard/dashboard.tsx
@@ -21,6 +21,7 @@ import { Settings } from "./settings";
 import { Projects } from "./projects";
 import { NotificationCenter } from "./notification-center";
 import { RealtimeProvider } from "@/lib/realtime";
+import { CrmQueryProvider } from "@/lib/query-client";
 import { SmartGallery } from "./smart-gallery";
 import { Leads } from "./leads";
 import { Verify } from "./verify";
@@ -32,6 +33,16 @@ export function Dashboard() {
   const [active, setActive] = useState("dashboard");
   // Deep link from global search: which conversation to focus once we switch tabs.
   const [deepLink, setDeepLink] = useState<{ surface: "messenger" | "inbox"; threadId: string } | null>(null);
+  // Messenger and Inbox are KEPT MOUNTED once opened, and hidden with CSS when you switch tabs.
+  // Rendering them from the ternary below unmounted them on every tab change, which threw away
+  // their sockets' worth of state and re-hit the API on return. Mount-on-first-visit rather than
+  // eager-mount-both, so the dashboard doesn't fire two modules' initial loads at boot.
+  const [everOpened, setEverOpened] = useState<Set<string>>(new Set());
+  useEffect(() => {
+    if (active === "messenger" || active === "inbox") {
+      setEverOpened((prev) => (prev.has(active) ? prev : new Set(prev).add(active)));
+    }
+  }, [active]);
 
   function navigateToConversation(surface: "messenger" | "inbox", threadId: string) {
     setActive(surface);
@@ -72,6 +83,7 @@ export function Dashboard() {
 
   return (
     <div className="dash-root" data-theme={theme}>
+      <CrmQueryProvider>
       <RealtimeProvider>
       <Sidebar active={active} onSelect={setActive} />
       <div className="dash-main">
@@ -79,12 +91,21 @@ export function Dashboard() {
         <div className="dash-content">
           <ToastProvider>
             <NotificationCenter active={active} onNavigate={navigateToConversation} />
-            {active === "profile" ? <Profile />
+            {everOpened.has("messenger") ? (
+              <div hidden={active !== "messenger"} className="dash-keepalive">
+                <MessengerSdk focusThreadId={deepLink?.surface === "messenger" ? deepLink.threadId : null} />
+              </div>
+            ) : null}
+            {everOpened.has("inbox") ? (
+              <div hidden={active !== "inbox"} className="dash-keepalive">
+                <InboxSdk focusThreadId={deepLink?.surface === "inbox" ? deepLink.threadId : null} />
+              </div>
+            ) : null}
+            {active === "messenger" || active === "inbox" ? null
+              : active === "profile" ? <Profile />
               : active === "support" ? <Support />
               : active === "rules" ? <Rules />
               : active === "ai" ? <AiAssistant />
-              : active === "messenger" ? <MessengerSdk focusThreadId={deepLink?.surface === "messenger" ? deepLink.threadId : null} />
-              : active === "inbox" ? <InboxSdk focusThreadId={deepLink?.surface === "inbox" ? deepLink.threadId : null} />
               : active === "settings" ? <Settings />
               : active === "gallery" ? <SmartGallery theme={theme} />
               : active === "leads" ? <Leads />
@@ -97,6 +118,7 @@ export function Dashboard() {
         </div>
       </div>
       </RealtimeProvider>
+      </CrmQueryProvider>
     </div>
   );
 }
diff --git a/src/lib/crm-messaging-adapter.ts b/src/lib/crm-messaging-adapter.ts
index 532f87e..21ffd69 100644
--- a/src/lib/crm-messaging-adapter.ts
+++ b/src/lib/crm-messaging-adapter.ts
@@ -138,7 +138,9 @@ export class CrmMessagingAdapter implements MessagingAdapter {
 
   async history(threadId: string): Promise<Message[]> {
     if (this.socket) {
-      const res = await this.socket.openThread(threadId); // joins so live events flow
+      // openThread both JOINS the room and returns history, so it is the only call needed on a
+      // cache miss. The SDK caches per thread, so this no longer fires on every selection.
+      const res = await this.socket.openThread(threadId);
       this.joined.add(threadId);
       return Promise.all(
         res.history.map((m) => {
diff --git a/src/lib/query-client.tsx b/src/lib/query-client.tsx
new file mode 100644
index 0000000..cd6c919
--- /dev/null
+++ b/src/lib/query-client.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+// The CRM owns the single QueryClient for the whole dashboard.
+//
+// The messaging SDK takes React Query as a peerDependency and will fall back to its own client if
+// it can't find one — but then its cache would be invisible to us: we couldn't invalidate a
+// conversation list after a write, share GC policy, or persist it. Providing the client here keeps
+// SDK and CRM data in one store.
+
+import { useState, type ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export function CrmQueryProvider({ children }: { children: ReactNode }) {
+  // useState, not a module constant: a module-level client would be shared across SSR requests and
+  // leak one user's cache into another's render.
+  const [client] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // The socket already pushes live changes for anything the user has open, so refetching
+            // on every window focus is noise — it was one of the redundant-call sources.
+            refetchOnWindowFocus: false,
+            retry: 1,
+            // Keep a cache entry ~10 min after its last observer unmounts, so leaving a module and
+            // coming back is served from memory rather than the network.
+            gcTime: 10 * 60_000,
+          },
+        },
+      }),
+  );
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}