feat: Phase C 完成 — ModelRouter 风格 UI 重设计 + 模拟 frps 测试 + lastSync 修复 + 集群作坊搭建

- 主题: sakura×frost 玻璃拟态 (theme.css) + SCSS 变量重映射
- 侧栏: 玻璃侧栏 246px + 渐变品牌区 + 面包屑导航
- 状态页: 玻璃 KPI 卡 + 远程节点/本地服务卡片网格
- 集群页: 英雄玻璃卡 + 横向环拓扑链 + 待办命令/活跃拓扑/日志区
- 令牌环: 新增 lastSync 上次同步时间替代周期计数
- 模拟 frps: frps2/frps3 容器 + test-forward.sh 全链路验证脚本
- 修复: BinaryPath 空导致 worker 不启动, 撤销仅撤第一个 link, 任务复活风暴 (published 追踪)

web/src/views/StatusView.vue

@@ -1,94 +1,123 @@
 <template>
   <div class="status-page">
-    <div class="status-top">
-      <h2 class="page-title">状态</h2>
-      <span class="refresh-hint">每 5 秒自动刷新</span>
-      <button class="refresh-btn" @click="loadStatus">刷新</button>
-      <button class="add-btn" @click="openAdd">＋ 添加远程节点</button>
+    <!-- top bar -->
+    <div class="topbar w4f-card">
+      <div class="tb-left">
+        <h2 class="page-title">状态总览</h2>
+        <span class="page-sub">每 5 秒自动刷新 · frpc worker 进程态 + frps 连接态</span>
+      </div>
+      <div class="tb-right">
+        <button class="w4f-btn ghost small" @click="loadStatus">⟳ 刷新</button>
+        <button class="w4f-btn small" @click="openAdd">＋ 添加远程节点</button>
+      </div>
+    </div>
+
+    <!-- KPI grid -->
+    <div class="kpis" v-if="status">
+      <div class="w4f-kpi">
+        <div class="k-hdr"><span class="k-lab"><span class="w4f-dot" :class="{ err: !allConnected }" />远程节点</span><span class="k-ic">⊕</span></div>
+        <div class="k-val">{{ status.profiles.length }}</div>
+        <div class="k-sub">在线 {{ onlineCount }} · 离线 {{ status.profiles.length - onlineCount }}</div>
+      </div>
+      <div class="w4f-kpi">
+        <div class="k-hdr"><span class="k-lab"><span class="w4f-dot" :class="{ err: runningCount === 0 && status.profiles.length > 0 }" />worker 进程</span><span class="k-ic">⚙</span></div>
+        <div class="k-val">{{ runningCount }}</div>
+        <div class="k-sub">运行中 frpc 进程数</div>
+      </div>
+      <div class="w4f-kpi">
+        <div class="k-hdr"><span class="k-lab"><span class="w4f-dot" />本地服务</span><span class="k-ic">◳</span></div>
+        <div class="k-val">{{ status.localStatus.length }}</div>
+        <div class="k-sub">已配置本地服务</div>
+      </div>
+      <div class="w4f-kpi">
+        <div class="k-hdr"><span class="k-lab"><span class="w4f-dot" :class="{ pending: activeForwards > 0 }" />活跃转发</span><span class="k-ic">→</span></div>
+        <div class="k-val">{{ activeForwards }}</div>
+        <div class="k-sub">已编排转发链路</div>
+      </div>
     </div>
 
     <div class="status-body" v-if="status">
       <!-- 远程节点状态 -->
-      <section class="status-section">
-        <h3 class="status-title">远程节点状态</h3>
-        <div class="status-cards">
+      <section class="section">
+        <h3 class="section-title"><span class="k-ic">⊕</span>远程节点状态<span class="hint">管理本地 frpc worker 进程（不管理远程 frps）</span></h3>
+        <div class="card-grid">
           <div
             v-for="p in status.profiles"
             :key="p.name"
-            class="node-status-card"
+            class="node-card w4f-card"
             :class="{ healthy: workerHealthy(p.process.state) }"
           >
-            <div class="ns-head">
-              <span class="ns-name">{{ p.name }}</span>
-              <span class="ns-badge" :class="connBadgeClass(p.connState)">
-                ● {{ connStateLabel(p.connState) }}
+            <div class="nc-head">
+              <span class="nc-name">{{ p.name }}</span>
+              <span class="w4f-tag" :class="connTagClass(p.connState)">
+                <span class="w4f-dot" :class="connDotClass(p.connState)" />{{ connStateLabel(p.connState) }}
               </span>
-              <span class="ns-actions" title="控制本地 frpc worker 进程（不管理远程 frps）">
-                <button v-if="p.process.state === 'running'" class="mini-btn" @click="stopRemote(p.name)">停本地worker</button>
-                <button v-else class="mini-btn" @click="startRemote(p.name)">启本地worker</button>
-                <button class="mini-btn" @click="openEdit(p)">编辑</button>
-                <button class="mini-btn danger" @click="removeRemote(p.name)">删除</button>
+              <span class="nc-actions">
+                <button v-if="p.process.state === 'running'" class="w4f-btn ghost small" @click="stopRemote(p.name)">停 worker</button>
+                <button v-else class="w4f-btn small" @click="startRemote(p.name)">启 worker</button>
+                <button class="w4f-btn ghost small" @click="openEdit(p)">编辑</button>
+                <button class="w4f-btn danger small" @click="removeRemote(p.name)">删除</button>
               </span>
             </div>
-            <div class="ns-meta">
-              <span v-if="p.process.pid">pid {{ p.process.pid }}</span>
-              <span class="ns-err" v-else-if="p.process.err">{{ p.process.err }}</span>
-              <span v-if="remoteVhostPort(p.name)" class="ns-vhost">
-                HTTP 访问端口 :{{ remoteVhostPort(p.name) }}
-              </span>
+            <div class="nc-meta">
+              <span v-if="p.process.pid" class="meta-pill">pid {{ p.process.pid }}</span>
+              <span v-if="p.process.restartCount" class="meta-pill warn">重启 {{ p.process.restartCount }}</span>
+              <span v-if="p.process.err" class="meta-pill err" :title="p.process.err">{{ p.process.err }}</span>
+              <span v-if="remoteVhostPort(p.name)" class="meta-pill info">HTTP :{{ remoteVhostPort(p.name) }}</span>
             </div>
-            <div class="ns-forwards" v-if="p.forwards.length">
-              <span v-for="f in p.forwards" :key="f.service" class="ns-fwd">
+            <div class="nc-forwards" v-if="p.forwards.length">
+              <span v-for="f in p.forwards" :key="f.service" class="w4f-tag w4f-tag-primary">
                 {{ f.service }} → :{{ f.remotePort }}
               </span>
             </div>
-            <div v-if="p.groupCount" class="ns-groups">
-              <span class="ns-group-badge">LB ×{{ p.groupCount }}</span>
+            <div v-if="p.groupCount" class="nc-groups">
+              <span class="w4f-tag w4f-tag-info">LB ×{{ p.groupCount }}</span>
             </div>
-            <div v-if="p.proxyStates?.length" class="ns-proxies">
+            <div v-if="p.proxyStates?.length" class="nc-proxies">
               <div
                 v-for="ps in p.proxyStates"
                 :key="ps.name"
-                class="ns-proxy"
+                class="nc-proxy"
                 :class="proxyStateClass(ps.status)"
               >
                 <span class="np-name">{{ ps.name }}</span>
                 <span class="np-status">{{ proxyStateLabel(ps.status) }}</span>
+                <div class="w4f-bar" :class="proxyBarClass(ps.status)"><i :style="{ width: proxyBarWidth(ps.status) }" /></div>
                 <span v-if="ps.remote_addr" class="np-addr">{{ ps.remote_addr }}</span>
                 <span v-if="ps.err" class="np-err" :title="ps.err">{{ ps.err }}</span>
               </div>
             </div>
-            <div v-else-if="p.adminEnabled" class="ns-proxies-empty">
+            <div v-else-if="p.adminEnabled" class="nc-proxies-empty">
               管理 API 未返回状态（frpc 未连上远程 frps 或无代理）
             </div>
           </div>
-          <div v-if="!status.profiles.length" class="ns-empty">尚未配置远程节点</div>
+          <div v-if="!status.profiles.length" class="empty">尚未配置远程节点 — 点击右上「＋ 添加远程节点」</div>
         </div>
       </section>
 
       <!-- 本地服务转发状态 -->
-      <section class="status-section">
-        <h3 class="status-title">本地服务转发</h3>
-        <div class="local-status-list">
-          <div v-for="ls in status.localStatus" :key="ls.local.name" class="local-status-card">
-            <div class="ls-head">
-              <span class="ls-name">{{ ls.local.name }}</span>
-              <span class="ls-addr">{{ ls.local.ip }}:{{ ls.local.port }}</span>
-              <span class="ls-proto">{{ ls.local.protocol }}</span>
+      <section class="section">
+        <h3 class="section-title"><span class="k-ic">◳</span>本地服务转发<span class="hint">本地服务经 frpc worker 转发至远程 frps</span></h3>
+        <div class="card-grid">
+          <div v-for="ls in status.localStatus" :key="ls.local.name" class="local-card w4f-card">
+            <div class="lc-head">
+              <span class="lc-name">{{ ls.local.name }}</span>
+              <span class="lc-addr">{{ ls.local.ip }}:{{ ls.local.port }}</span>
+              <span class="w4f-tag w4f-tag-primary">{{ ls.local.protocol }}</span>
             </div>
-            <div class="ls-targets">
-              <div v-for="t in ls.targets" :key="t.remote + ':' + t.remotePort" class="ls-target">
-                <span class="ls-arrow">→</span>
-                <span class="ls-remote">{{ t.remote }}</span>
-                <span class="ls-port">:{{ t.remotePort }}</span>
-                <span class="ls-state" :class="{ ok: workerHealthy(t.workerState) }">
+            <div class="lc-targets">
+              <div v-for="t in ls.targets" :key="t.remote + ':' + t.remotePort" class="lc-target">
+                <span class="lc-arrow">→</span>
+                <span class="lc-remote">{{ t.remote }}</span>
+                <span class="lc-port">:{{ t.remotePort }}</span>
+                <span class="w4f-tag" :class="workerHealthy(t.workerState) ? 'w4f-tag-ok' : 'w4f-tag-danger'">
                   {{ localWorkerLabel(t.workerState) }}
                 </span>
               </div>
-              <div v-if="!ls.targets.length" class="ls-none">未转发</div>
+              <div v-if="!ls.targets.length" class="lc-none">未转发</div>
             </div>
           </div>
-          <div v-if="!status.localStatus.length" class="ls-empty">尚未配置本地服务</div>
+          <div v-if="!status.localStatus.length" class="empty">尚未配置本地服务 — 前往「连接配置」画布编排</div>
         </div>
       </section>
     </div>
@@ -119,15 +148,15 @@
         <el-switch v-model="dialog.remote.enabled" />
       </div>
       <template #footer>
-        <button class="refresh-btn" @click="dialog.visible = false">取消</button>
-        <button class="add-btn" @click="saveRemote">保存</button>
+        <button class="w4f-btn ghost small" @click="dialog.visible = false">取消</button>
+        <button class="w4f-btn small" @click="saveRemote">保存</button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
 import { ElMessage } from 'element-plus'
 import { api } from '../api'
 import type { Remote, StatusResp } from '../types'
@@ -223,87 +252,77 @@ const loadStatus = async () => {
   }
 }
 
+// ---- KPI derivations ----
+const workerHealthy = (s?: string) => s === 'running'
+const runningCount = computed(() => status.value?.profiles.filter((p) => p.process.state === 'running').length ?? 0)
+const onlineCount = computed(() => status.value?.profiles.filter((p) => p.connState === 'connected').length ?? 0)
+const allConnected = computed(() => (status.value?.profiles.length ?? 0) > 0 && onlineCount.value === status.value?.profiles.length)
+const activeForwards = computed(() => status.value?.profiles.reduce((s, p) => s + p.forwards.length, 0) ?? 0)
+
 // connState refers to the frps connection from the local frpc worker.
 // We never control the remote frps itself.
 const connStateLabel = (s?: string) => {
   switch (s) {
-    case 'connected':
-      return '已连接'
-    case 'connecting':
-      return '连接中'
-    case 'failed':
-      return '连接失败'
-    case 'disabled':
-      return '已停用'
+    case 'connected': return '已连接'
+    case 'connecting': return '连接中'
+    case 'failed': return '连接失败'
+    case 'disabled': return '已停用'
     case 'not_started':
-    default:
-      return '未启动'
+    default: return '未启动'
   }
 }
-
-const connBadgeClass = (s?: string) => {
+const connTagClass = (s?: string) => {
   switch (s) {
-    case 'connected':
-      return 'ok'
-    case 'connecting':
-      return 'pending'
-    case 'failed':
-      return 'err'
+    case 'connected': return 'w4f-tag-ok'
+    case 'connecting': return 'w4f-tag-info'
+    case 'failed': return 'w4f-tag-danger'
     case 'disabled':
     case 'not_started':
-    default:
-      return ''
+    default: return 'w4f-tag-warn'
+  }
+}
+const connDotClass = (s?: string) => {
+  switch (s) {
+    case 'connected': return ''
+    case 'connecting': return 'pending'
+    case 'failed': return 'err'
+    default: return ''
   }
 }
-
-const workerHealthy = (s?: string) => s === 'running'
 
 // M3: per-proxy state from frpc admin API.
 const proxyStateLabel = (s?: string) => {
   switch (s) {
-    case 'running':
-      return '运行中'
-    case 'wait start':
-      return '等待启动'
-    case 'start error':
-      return '启动错误'
-    case 'check failed':
-      return '健康检查失败'
-    case 'closed':
-      return '已关闭'
+    case 'running': return '运行中'
+    case 'wait start': return '等待启动'
+    case 'start error': return '启动错误'
+    case 'check failed': return '健康检查失败'
+    case 'closed': return '已关闭'
     case 'new':
-    default:
-      return '新建'
+    default: return '新建'
   }
 }
 const proxyStateClass = (s?: string) => {
   switch (s) {
-    case 'running':
-      return 'ok'
+    case 'running': return 'ok'
     case 'check failed':
-    case 'start error':
-      return 'err'
-    case 'wait start':
-      return 'pending'
-    default:
-      return ''
+    case 'start error': return 'err'
+    case 'wait start': return 'pending'
+    default: return ''
   }
 }
+const proxyBarClass = (s?: string) => (s === 'running' ? 'ok' : s === 'check failed' || s === 'start error' ? 'err' : '')
+const proxyBarWidth = (s?: string) => (s === 'running' ? '100%' : s === 'wait start' ? '45%' : s === 'new' ? '15%' : '30%')
 
 // localWorkerLabel: state of the LOCAL frpc worker driving this target
 // (we do not control the remote frps).
 const localWorkerLabel = (s?: string) => {
   switch (s) {
-    case 'running':
-      return '运行中'
-    case 'starting':
-      return '启动中'
-    case 'restarting':
-      return '重启中'
-    case 'crashed':
-      return '异常'
-    default:
-      return '未启动'
+    case 'running': return '运行中'
+    case 'starting': return '启动中'
+    case 'restarting': return '重启中'
+    case 'crashed': return '异常'
+    default: return '未启动'
   }
 }
 
@@ -325,352 +344,114 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-.add-btn {
-  margin-left: auto;
-  border: none;
-  border-radius: 6px;
-  padding: 5px 14px;
-  background: $color-btn-primary;
-  color: #fff;
-  cursor: pointer;
-  font-size: 13px;
-
-  &:hover {
-    background: $color-btn-primary-hover;
-  }
-}
-
-.form-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 12px;
-
-  label {
-    width: 72px;
-    font-size: 13px;
-    color: $color-text-secondary;
-    flex-shrink: 0;
-  }
-}
-
-.mini-btn {
-  border: 1px solid $color-border;
-  border-radius: 5px;
-  padding: 1px 8px;
-  background: #fff;
-  font-size: 12px;
-  cursor: pointer;
-  color: $color-text-secondary;
-
-  &:hover {
-    background: $color-bg-hover;
-  }
-
-  &.danger:hover {
-    color: $color-danger;
-  }
-}
-
-.ns-actions {
-  display: flex;
-  gap: 4px;
-}
-
 .status-page {
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  gap: 14px;
 }
 
-.status-top {
+/* top bar */
+.topbar {
   flex-shrink: 0;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 12px;
-  padding: 14px 20px;
-  border-bottom: 1px solid $color-border-light;
-  background: #fff;
+  padding: 14px 18px;
 }
+.tb-left { display: flex; flex-direction: column; gap: 3px; }
+.page-title { margin: 0; font-size: 17px; font-weight: 800; }
+.page-sub { font-size: 12px; color: $color-text-muted; }
+.tb-right { display: flex; gap: 8px; }
 
-.page-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.refresh-hint {
-  font-size: 12px;
-  color: $color-text-muted;
-}
-
-.refresh-btn {
-  border: 1px solid $color-border;
-  border-radius: 6px;
-  padding: 3px 12px;
-  background: #fff;
-  cursor: pointer;
-  font-size: 13px;
-
-  &:hover {
-    background: $color-bg-hover;
-  }
+/* KPI grid */
+.kpis {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
+  gap: 14px;
 }
 
 .status-body {
   flex: 1;
   display: flex;
-  gap: 20px;
-  padding: 20px;
-  overflow: hidden;
-}
-
-.status-section {
-  flex: 1;
-  min-width: 0;
-  display: flex;
   flex-direction: column;
-}
-
-.status-title {
-  margin: 0 0 12px;
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.status-cards,
-.local-status-list {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  gap: 18px;
   overflow-y: auto;
-  padding-right: 6px;
+  padding-right: 4px;
 }
 
-.node-status-card {
-  border: 1px solid $color-border-light;
-  border-radius: 10px;
-  padding: 10px 14px;
-  background: #fafafa;
-  border-left: 4px solid $color-danger;
-
-  &.healthy {
-    border-left-color: $color-success;
-  }
-}
-
-.ns-head {
+.section { display: flex; flex-direction: column; }
+.section-title {
+  margin: 0 0 10px;
+  font-size: 13.5px;
+  font-weight: 700;
+  color: $color-text-muted;
+  letter-spacing: 0.02em;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 10px;
+  .k-ic { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 13px;
+    background: linear-gradient(135deg, var(--w4f-primary-50), var(--w4f-secondary-50)); color: var(--w4f-primary-h); }
+  .hint { font-size: 11px; font-weight: 400; color: $color-text-muted; margin-left: auto; }
 }
 
-.ns-name {
-  font-weight: 600;
-  margin-right: 8px;
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 14px;
 }
 
-.ns-badge {
-  font-size: 12px;
-  padding: 1px 8px;
-  border-radius: 8px;
-  background: #fef0f0;
-  color: $color-danger;
-
-  &.ok {
-    background: #f0f9eb;
-    color: $color-success;
-  }
-
-  &.pending {
-    background: #ecf5ff;
-    color: #409eff;
-  }
-
-  &.err {
-    background: #fef0f0;
-    color: $color-danger;
-  }
+/* remote node card */
+.node-card {
+  padding: 16px 18px;
+  border-left: 4px solid var(--w4f-danger);
+  &.healthy { border-left-color: var(--w4f-ok); }
 }
-
-.ns-meta {
-  font-size: 12px;
-  color: $color-text-muted;
-  margin-top: 2px;
+.nc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.nc-name { font-weight: 800; font-size: 15px; margin-right: auto; }
+.nc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+.nc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.meta-pill { font-size: 11.5px; padding: 2px 9px; border-radius: $radius-pill; background: var(--w4f-card-2); color: $color-text-muted;
+  font-family: var(--w4f-mono); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  &.warn { background: $color-warning-50; color: $color-warning; }
+  &.err { background: $color-danger-50; color: $color-danger; }
+  &.info { background: $color-secondary-50; color: $color-secondary-h; }
 }
-
-.ns-err {
-  color: $color-danger;
+.nc-forwards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.nc-groups { margin-top: 6px; }
+.nc-proxies { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
+.nc-proxy { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 10px; border-radius: $radius-xs;
+  background: var(--w4f-card-2); border: 1px solid var(--w4f-line);
+  &.ok { border-left: 3px solid $color-success; }
+  &.pending { border-left: 3px solid $color-secondary; }
+  &.err { border-left: 3px solid $color-danger; }
+  .w4f-bar { width: 60px; }
 }
+.np-name { font-weight: 700; }
+.np-status { font-size: 11px; color: $color-text-secondary; }
+.np-addr { margin-left: auto; font-size: 11px; color: $color-text-muted; font-family: var(--w4f-mono); }
+.np-err { margin-left: auto; font-size: 11px; color: $color-danger; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nc-proxies-empty { margin-top: 8px; font-size: 12px; color: $color-text-muted; }
 
-.ns-vhost {
-  margin-left: 8px;
-  background: #ecf5ff;
-  color: #409eff;
-  border-radius: 6px;
-  padding: 1px 8px;
-  font-size: 12px;
-}
+/* local service card */
+.local-card { padding: 14px 16px; }
+.lc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.lc-name { font-weight: 800; font-size: 14px; }
+.lc-addr { font-size: 12px; color: $color-text-secondary; font-family: var(--w4f-mono); }
+.lc-targets { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
+.lc-target { display: flex; align-items: center; gap: 6px; font-size: 13px; }
+.lc-arrow { color: var(--w4f-primary); font-weight: 700; }
+.lc-remote { font-weight: 600; }
+.lc-port { color: $color-text-secondary; font-family: var(--w4f-mono); margin-right: auto; }
+.lc-none { font-size: 12px; color: $color-text-light; }
 
-.ns-forwards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 6px;
-}
+.empty { grid-column: 1 / -1; color: $color-text-muted; font-size: 13px; padding: 18px; text-align: center; }
 
-.ns-groups {
-  display: flex;
-  gap: 4px;
-  margin-top: 6px;
-}
-
-.ns-group-badge {
-  font-size: 11px;
-  background: rgba(64, 158, 255, 0.12);
-  color: #409eff;
-  border-radius: 10px;
-  padding: 1px 8px;
-}
-
-.ns-proxies {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 6px;
-}
-
-.ns-proxy {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  border: 1px solid $color-border-lighter;
-  border-radius: 8px;
-  padding: 3px 8px;
-  background: #fff;
-
-  &.ok {
-    border-left: 3px solid $color-success;
-  }
-
-  &.pending {
-    border-left: 3px solid #409eff;
-  }
-
-  &.err {
-    border-left: 3px solid $color-danger;
-  }
-}
-
-.np-name {
-  font-weight: 600;
-}
-
-.np-status {
-  font-size: 11px;
-  color: $color-text-secondary;
-}
-
-.np-addr {
-  margin-left: auto;
-  font-size: 11px;
-  color: $color-text-muted;
-}
-
-.np-err {
-  margin-left: auto;
-  font-size: 11px;
-  color: $color-danger;
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ns-proxies-empty {
-  margin-top: 6px;
-  font-size: 12px;
-  color: $color-text-muted;
-}
-
-.ns-empty,
-.ls-empty {
-  color: $color-text-muted;
-  font-size: 13px;
-  padding: 8px;
-}
-
-.local-status-card {
-  border: 1px solid $color-border-light;
-  border-radius: 10px;
-  padding: 10px 14px;
-  background: #fafafa;
-}
-
-.ls-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.ls-name {
-  font-weight: 600;
-}
-
-.ls-addr {
-  font-size: 12px;
-  color: $color-text-secondary;
-}
-
-.ls-proto {
-  font-size: 11px;
-  background: #ecf5ff;
-  color: #409eff;
-  border-radius: 6px;
-  padding: 1px 6px;
-}
-
-.ls-targets {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.ls-target {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-}
-
-.ls-arrow {
-  color: $color-text-muted;
-}
-
-.ls-remote {
-  font-weight: 500;
-}
-
-.ls-port {
-  color: $color-text-secondary;
-}
-
-.ls-state {
-  margin-left: auto;
-  font-size: 12px;
-  color: $color-danger;
-
-  &.ok {
-    color: $color-success;
-  }
-}
-
-.ls-none {
-  color: $color-text-light;
-  font-size: 12px;
+/* dialog form */
+.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
+  label { width: 72px; font-size: 13px; color: $color-text-secondary; flex-shrink: 0; }
 }
 </style>