add a foreground dev launcher and close the Arco token gaps

The CYBER skin left a class of defects that unit tests could not see: Arco
components kept their own light-theme appearance because the token bridge
never covered the neutral, gray, tooltip, mask and border-radius families,
and four override rules targeted class names that do not exist in Arco, so
they silently matched nothing.

Bridge the missing families and point the dead selectors at the real ones
(.arco-switch-handle, .arco-checkbox-icon, .arco-select-dropdown,
.arco-slider-bar), so switches stop rendering a white knob and checkboxes
finally glow.

Add start.sh so a dev run can be started without a second terminal: it
frees the ports left over from a previous run, refusing to kill processes
that do not belong to this project, then starts the API server and the
Vite client in the foreground.

packages/client/src/styles/global.scss

@@ -131,9 +131,59 @@ body[arco-theme='dark'],
   --color-fill-2-hover: oklch(0.255 0.018 247);
   --color-fill-3-hover: oklch(0.285 0.018 246);
 
+  // Arco 的 neutral / gray 族：边框线、树连接线、空状态图标都走这两族。
+  // 不桥接就会漏出 Arco 自带的中性灰（暗色下 rgb(72,72,73) 之类），与 CYBER 的发丝线体系脱节。
+  --gray-1: 28, 30, 36;
+  --gray-2: 40, 43, 51;
+  --gray-3: 52, 56, 66;
+  --gray-4: 66, 70, 82;
+  --gray-5: 92, 97, 110;
+  --gray-6: 118, 123, 136;
+  --gray-7: 144, 149, 162;
+  --gray-8: 170, 175, 188;
+  --gray-9: 196, 201, 214;
+  --gray-10: 226, 231, 240;
+
+  --color-neutral-1: rgb(var(--gray-1));
+  --color-neutral-2: rgb(var(--gray-2));
+  --color-neutral-3: rgb(var(--gray-3));
+  --color-neutral-4: rgb(var(--gray-4));
+  --color-neutral-5: rgb(var(--gray-5));
+  --color-neutral-6: rgb(var(--gray-6));
+  --color-neutral-7: rgb(var(--gray-7));
+  --color-neutral-8: rgb(var(--gray-8));
+  --color-neutral-9: rgb(var(--gray-9));
+  --color-neutral-10: rgb(var(--gray-10));
+
+  --color-neutral-1-hover: rgb(var(--gray-2));
+  --color-neutral-2-hover: rgb(var(--gray-3));
+  --color-neutral-3-hover: rgb(var(--gray-4));
+  --color-neutral-4-hover: rgb(var(--gray-5));
+
+  // 次级按钮的半透明底：跟灰阶走，保持低对比
+  --color-secondary-1: rgba(var(--gray-9), 0.08);
+  --color-secondary-2: rgba(var(--gray-9), 0.12);
+  --color-secondary-3: rgba(var(--gray-9), 0.16);
+  --color-secondary-4: rgba(var(--gray-9), 0.20);
+
+  // 浮层与遮罩
+  --color-bg-popup: oklch(0.185 0.014 248);
+  --color-tooltip-bg: oklch(0.225 0.016 246);
+  --color-bg-white: oklch(0.945 0.006 200);
+  --color-mask-bg: var(--overlay-scrim);
+  --color-spin-layer-bg: var(--overlay-scrim);
+  --color-menu-dark-bg: oklch(0.185 0.014 248);
+  --color-menu-light-bg: oklch(0.185 0.014 248);
+
+  // Arco 的圆角族名与 CYBER 的 --radius-* 不同，两族都要给，
+  // 否则 Arco 组件会继续用它的 2/4/8px，和我们声明的 4/6/8px 对不上。
   --radius-small: 4px;
   --radius-medium: 6px;
   --radius-large: 8px;
+  --border-radius-none: 0px;
+  --border-radius-small: 4px;
+  --border-radius-medium: 6px;
+  --border-radius-large: 8px;
 
   --font-size-body-1: 14px;
   --font-size-body-2: 13px;
@@ -535,21 +585,43 @@ $neon-hv: var(--accent-hover);
   box-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.3);
 }
 
-.arco-switch-checked .arco-switch-slider {
+// 开关手柄。Arco 的类名是 .arco-switch-handle（不是 .arco-switch-slider，后者不存在），
+// 底色默认走 --color-bg-white，暗色下是一块亮白，必须接管。
+.arco-switch-handle {
+  background-color: var(--text-primary);
+  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.45);
+}
+
+.arco-switch-checked .arco-switch-handle {
   background-color: var(--accent-primary);
   box-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.7);
 }
 
-.arco-checkbox-checked .arco-checkbox-inner {
+// 复选框图标。Arco 的类名是 .arco-checkbox-icon（不是 .arco-checkbox-inner，后者不存在），
+// 不写对类名，选中态的外发光就完全不生效。
+.arco-checkbox-checked .arco-checkbox-icon {
   background-color: var(--accent-primary);
   border-color: var(--accent-primary);
   box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.5);
 }
 
+// 单选按钮组：选中态给霓虹管壁，和按钮同一套语言
+.arco-radio-button.arco-radio-checked {
+  color: var(--accent-primary);
+  background-color: rgba(var(--accent-primary-rgb), 0.12);
+  border-color: rgba(var(--accent-primary-rgb), 0.5);
+  box-shadow: inset 0 0 10px rgba(var(--accent-primary-rgb), 0.14);
+}
+
+.arco-radio-button:not(:first-of-type)::before {
+  border-color: var(--border-light);
+}
+
 // 下拉 / 弹层的浮层背景。浮层要浮在内容之上，用最亮的一层底。
 .arco-trigger-popup,
 .arco-select-popup,
-.arco-picker-dropdown,
+.arco-select-dropdown,
+.arco-picker-container,
 .arco-dropdown,
 .arco-modal,
 .arco-drawer {
@@ -558,6 +630,53 @@ $neon-hv: var(--accent-hover);
   box-shadow: var(--shadow-lg);
 }
 
+// 浮层内部：Arco 把下拉面板挂在 body 下，不在 .arco-trigger-popup 内，
+// 所以 message / notification / popover / popconfirm 都要单独接管。
+// 它们用 --color-bg-popup，桥接后与 modal 同为 --bg-card 一档。
+.arco-message,
+.arco-notification,
+.arco-popover-popup-content,
+.arco-popconfirm-popup-content {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+
+.arco-message .arco-message-content,
+.arco-notification .arco-notification-content,
+.arco-popover-popup-content,
+.arco-popconfirm-popup-content {
+  color: var(--text-primary);
+}
+
+// 气泡确认框的操作区要压暗一档，否则和内容区糊在一起
+.arco-popconfirm-popup-footer {
+  border-top: 1px solid var(--border-light);
+}
+
+// Tooltip：Arco 的提示框用 --color-tooltip-bg，箭头和内容框同色。
+// 这里让它比弹层亮一档，和弹层区分开。
+.arco-tooltip-content {
+  background-color: var(--color-tooltip-bg);
+  color: var(--text-primary);
+  font-family: $font-code;
+}
+
+.arco-tooltip-popup-arrow::before {
+  background-color: var(--color-tooltip-bg);
+}
+
+// 抽屉 / 弹窗头尾的分隔线
+.arco-drawer-header,
+.arco-modal-header {
+  border-color: var(--border-light);
+}
+
+.arco-drawer-footer,
+.arco-modal-footer {
+  border-color: var(--border-light);
+}
+
 // 表格：去掉亮色分隔线的突兀感，表头沉下去
 .arco-table-th {
   background-color: var(--bg-secondary);