feat(v3): 配色体系对齐 deepseek-harness Web（D7 视觉）

- 提取 dsh design-platform 官方色板为设计令牌：品牌蓝 #4176e6、bluish 灰阶、
  语义状态色、透明描边（rgba 0.04-0.1）
- 侧栏改近白（sidebar-fill），扁平化阴影，悬停/滚动条/缓动全部对齐 dsh
- 六视图旧硬编码蓝批量令牌化，视觉单一来源

webapp/src/views/AgentView.vue

@@ -394,7 +394,7 @@ onMounted(async () => {
   cursor: pointer;
   color: #374151;
 }
-.ws-list li:hover { background: #eff6ff; }
+.ws-list li:hover { background: var(--c-primary-soft); }
 .ws-list li.dir { color: #92400e; font-weight: 500; cursor: default; }
 .ws-empty { color: #9ca3af; cursor: default; font-size: 12px; }
 .ws-empty:hover { background: transparent; }
@@ -481,10 +481,10 @@ onMounted(async () => {
   resize: vertical;
   outline: none;
 }
-.task-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px #2563eb26; }
+.task-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-ring); }
 .btn-run {
   color: #fff;
-  background: #2563eb;
+  background: var(--c-primary);
   border: none;
   border-radius: 8px;
   padding: 0 22px;
@@ -493,11 +493,11 @@ onMounted(async () => {
   cursor: pointer;
   align-self: stretch;
 }
-.btn-run:hover:not(:disabled) { background: #1d4ed8; }
-.btn-run:disabled { background: #93c5fd; cursor: not-allowed; }
+.btn-run:hover:not(:disabled) { background: var(--c-primary-strong); }
+.btn-run:disabled { background: var(--c-primary-tint); cursor: not-allowed; }
 
 .status-line { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
-.st-running { color: #2563eb; }
+.st-running { color: var(--c-primary); }
 .st-ok { color: #16a34a; }
 .st-err { color: #dc2626; }
 
@@ -528,7 +528,7 @@ onMounted(async () => {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.ph-plan { color: #1e40af; background: #dbeafe; }
+.ph-plan { color: #1e40af; background: var(--c-primary-tint); }
 .ph-execute { color: #166534; background: #dcfce7; }
 .ph-review { color: #7c2d12; background: #ffedd5; }
 .ev-msg { margin-bottom: 8px; }
@@ -543,7 +543,7 @@ onMounted(async () => {
   max-height: 260px;
   overflow-y: auto;
 }
-.msg-planner { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
+.msg-planner { background: var(--c-primary-soft); color: #1e3a8a; border: 1px solid var(--c-primary-tint); }
 .msg-executor { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0; }
 .executor-select { flex: 1; max-width: 340px; }
 .ev-card {
@@ -581,8 +581,8 @@ onMounted(async () => {
 .diff-new { background: #f0fdf4; color: #15803d; }
 .ev-usage { text-align: right; color: #9ca3af; font-size: 11px; margin: 4px 0; }
 .ev-final {
-  border: 1px solid #bfdbfe;
-  background: #eff6ff;
+  border: 1px solid var(--c-primary-tint);
+  background: var(--c-primary-soft);
   border-radius: 8px;
   padding: 12px 14px;
   margin-top: 10px;
@@ -649,8 +649,8 @@ onMounted(async () => {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.dir-item:hover { background: #eff6ff; }
-.dir-item.up { color: #2563eb; font-weight: 500; }
+.dir-item:hover { background: var(--c-primary-soft); }
+.dir-item.up { color: var(--c-primary); font-weight: 500; }
 .dir-item.empty { color: #9ca3af; cursor: default; }
 .dir-item.empty:hover { background: transparent; }
 .path-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
@@ -677,7 +677,7 @@ onMounted(async () => {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.recent-chip:hover { background: #eff6ff; border-color: #bfdbfe; }
+.recent-chip:hover { background: var(--c-primary-soft); border-color: var(--c-primary-tint); }
 .picker-msg { color: #d97706; font-size: 12px; margin-top: 8px; }
 .modal-actions { display: flex; gap: 10px; margin-top: 14px; }
 </style>

webapp/src/views/ChatView.vue

@@ -208,12 +208,12 @@ async function handleSend() {
   font-size: 13px;
 }
 .session-item:hover { background: #e5e7eb; }
-.session-item.active { background: #dbeafe; }
+.session-item.active { background: var(--c-primary-tint); }
 .s-query { color: #111; }
 .s-status { font-size: 11px; color: #9ca3af; }
 .s-status.done { color: #16a34a; }
 .s-status.failed { color: #dc2626; }
-.s-status.running { color: #2563eb; }
+.s-status.running { color: var(--c-primary); }
 
 .main {
   flex: 1;
@@ -244,7 +244,7 @@ async function handleSend() {
   font-size: 14px;
   line-height: 1.6;
 }
-.assistant-msg { background: #eff6ff; }
+.assistant-msg { background: var(--c-primary-soft); }
 .role-label {
   font-weight: 700;
   font-size: 12px;
@@ -270,7 +270,7 @@ async function handleSend() {
   font-weight: 600;
 }
 .badge.pending { background: #f3f4f6; color: #6b7280; }
-.badge.running { background: #dbeafe; color: #2563eb; }
+.badge.running { background: var(--c-primary-tint); color: var(--c-primary); }
 .badge.done { background: #dcfce7; color: #16a34a; }
 .badge.failed { background: #fee2e2; color: #dc2626; }
 .route-path { font-size: 12px; color: #9ca3af; }
@@ -305,7 +305,7 @@ async function handleSend() {
 .deps { color: #9ca3af; font-size: 12px; }
 .done { color: #16a34a; }
 .pending { color: #9ca3af; }
-.running { color: #2563eb; }
+.running { color: var(--c-primary); }
 
 .error-msg { color: #dc2626; font-size: 13px; background: #fee2e2; padding: 8px 12px; border-radius: 6px; }
 
@@ -324,10 +324,10 @@ async function handleSend() {
   font-size: 14px;
   outline: none;
 }
-.input-bar input:focus { border-color: #2563eb; }
+.input-bar input:focus { border-color: var(--c-primary); }
 .input-bar button {
   padding: 10px 20px;
-  background: #2563eb;
+  background: var(--c-primary);
   color: #fff;
   border: none;
   border-radius: 8px;

webapp/src/views/CollaborationView.vue

@@ -276,7 +276,7 @@ function getDecision(issueId: string) {
   font-size: 13px;
 }
 .session-item:hover { background: #e5e7eb; }
-.session-item.active { background: #dbeafe; }
+.session-item.active { background: var(--c-primary-tint); }
 .meta { font-size: 11px; color: #9ca3af; }
 
 .stats {
@@ -331,18 +331,18 @@ function getDecision(issueId: string) {
   color: #111;
   margin: 0 0 12px;
   padding-bottom: 6px;
-  border-bottom: 2px solid #2563eb;
+  border-bottom: 2px solid var(--c-primary);
 }
 
 .brief-card {
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
+  background: var(--c-primary-soft);
+  border: 1px solid var(--c-primary-tint);
   border-radius: 8px;
   padding: 14px 16px;
 }
 .goal { font-size: 14px; margin-bottom: 8px; color: #1e40af; font-weight: 600; }
 .tags { display: flex; gap: 6px; flex-wrap: wrap; }
-.tag { background: #dbeafe; color: #1d4ed8; padding: 2px 8px; border-radius: 99px; font-size: 12px; }
+.tag { background: var(--c-primary-tint); color: var(--c-primary-strong); padding: 2px 8px; border-radius: 99px; font-size: 12px; }
 .domain { background: #fce7f3; color: #9d174d; padding: 2px 8px; border-radius: 99px; font-size: 12px; }
 .constraints { list-style: disc inside; font-size: 13px; color: #374151; margin-top: 8px; }
 
@@ -375,14 +375,14 @@ function getDecision(issueId: string) {
   z-index: 1;
 }
 .plan-step.done .step-dot { background: #16a34a; border-color: #16a34a; }
-.plan-step.running .step-dot { background: #2563eb; border-color: #2563eb; }
+.plan-step.running .step-dot { background: var(--c-primary); border-color: var(--c-primary); }
 .plan-step.pending .step-dot { background: #fff; }
 .step-content { flex: 1; }
 .step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
 .step-id { font-family: monospace; font-size: 12px; color: #6b7280; font-weight: 700; }
 .step-status { font-size: 11px; padding: 1px 6px; border-radius: 99px; }
 .plan-step.done .step-status { background: #dcfce7; color: #16a34a; }
-.plan-step.running .step-status { background: #dbeafe; color: #2563eb; }
+.plan-step.running .step-status { background: var(--c-primary-tint); color: var(--c-primary); }
 .plan-step.pending .step-status { background: #f3f4f6; color: #9ca3af; }
 .step-task { margin: 0; font-size: 13px; color: #374151; }
 .step-deps { font-size: 11px; color: #9ca3af; margin-top: 2px; }
@@ -396,7 +396,7 @@ function getDecision(issueId: string) {
 .progress-bar-wrap { margin-bottom: 10px; }
 .progress-label { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
 .progress-bar { height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
-.progress-fill { height: 100%; background: #2563eb; border-radius: 99px; transition: width 0.4s ease; }
+.progress-fill { height: 100%; background: var(--c-primary); border-radius: 99px; transition: width 0.4s ease; }
 .progress-steps { display: flex; flex-wrap: wrap; gap: 8px; }
 .pg-step {
   display: flex;
@@ -408,7 +408,7 @@ function getDecision(issueId: string) {
   border: 1px solid #e5e7eb;
 }
 .pg-step.done { background: #dcfce7; border-color: #bbf7d0; }
-.pg-step.running { background: #dbeafe; border-color: #bfdbfe; }
+.pg-step.running { background: var(--c-primary-tint); border-color: var(--c-primary-tint); }
 .pg-note { color: #9ca3af; font-size: 11px; }
 
 /* Issues */
@@ -424,8 +424,8 @@ function getDecision(issueId: string) {
 .issue-step { font-size: 11px; color: #6b7280; }
 .decision {
   margin-top: 8px;
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
+  background: var(--c-primary-soft);
+  border: 1px solid var(--c-primary-tint);
   border-radius: 4px;
   padding: 6px 10px;
   font-size: 13px;

webapp/src/views/MetricsView.vue

@@ -165,7 +165,7 @@ onMounted(load)
   border-radius: 10px;
   padding: 16px;
 }
-.metric-card.highlight { border-color: #2563eb; background: #eff6ff; }
+.metric-card.highlight { border-color: var(--c-primary); background: var(--c-primary-soft); }
 .metric-card h3 { margin: 0 0 12px; font-size: 14px; color: #374151; }
 
 .kv-list {
@@ -180,7 +180,7 @@ onMounted(load)
 .review-card { grid-column: span 2; }
 .review-stats { display: flex; gap: 24px; margin-bottom: 12px; }
 .stat-item { display: flex; flex-direction: column; align-items: center; }
-.stat-num { font-size: 28px; font-weight: 700; color: #2563eb; }
+.stat-num { font-size: 28px; font-weight: 700; color: var(--c-primary); }
 .stat-label { font-size: 12px; color: #6b7280; }
 
 .progress-wrap {

webapp/src/views/ReviewView.vue

@@ -116,7 +116,7 @@ button {
   cursor: pointer;
   font-size: 13px;
 }
-button.active { background: #2563eb; color: #fff; border-color: #2563eb; }
+button.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
 .refresh-btn { margin-left: auto; }
 
 .loading, .error, .empty {

webapp/src/views/SettingsView.vue

@@ -1090,8 +1090,8 @@ onUnmounted(() => { _dlSSE?.close() })
   transition: background 0.1s;
 }
 .model-item:last-child { border-bottom: none; }
-.model-item:hover { background: #eff6ff; }
-.model-item.selected { background: #dbeafe; }
+.model-item:hover { background: var(--c-primary-soft); }
+.model-item.selected { background: var(--c-primary-tint); }
 .model-item-name { font-weight: 500; color: #1f2937; }
 .model-item-size { color: #9ca3af; font-size: 12px; }
 
@@ -1118,10 +1118,10 @@ onUnmounted(() => { _dlSSE?.close() })
   font-size: 13px;
   outline: none;
 }
-.download-input:focus { border-color: #2563eb; }
+.download-input:focus { border-color: var(--c-primary); }
 .btn-download {
   color: #fff;
-  background: #2563eb;
+  background: var(--c-primary);
   border: none;
   border-radius: 6px;
   padding: 7px 16px;
@@ -1129,12 +1129,12 @@ onUnmounted(() => { _dlSSE?.close() })
   cursor: pointer;
   min-width: 70px;
 }
-.btn-download:disabled { background: #93c5fd; cursor: not-allowed; }
+.btn-download:disabled { background: var(--c-primary-tint); cursor: not-allowed; }
 
 .progress-wrap { margin-top: 8px; }
 .progress-bar { background: #e5e7eb; border-radius: 3px; height: 6px; overflow: hidden; }
 .progress-fill {
-  background: linear-gradient(90deg, #2563eb, #3b82f6);
+  background: linear-gradient(90deg, var(--c-primary), #3b82f6);
   border-radius: 3px;
   height: 100%;
   transition: width 0.3s;
@@ -1177,8 +1177,8 @@ onUnmounted(() => { _dlSSE?.close() })
   color: #111827;
 }
 .field input:focus, .field select:focus {
-  border-color: #2563eb;
-  box-shadow: 0 0 0 2px #2563eb26;
+  border-color: var(--c-primary);
+  box-shadow: 0 0 0 2px var(--c-primary-ring);
 }
 
 .model-select {
@@ -1190,7 +1190,7 @@ onUnmounted(() => { _dlSSE?.close() })
   padding: 8px 12px;
   font-size: 14px;
 }
-.model-select:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px #2563eb26; }
+.model-select:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 3px var(--c-primary-ring); }
 
 .input-row {
   display: flex;
@@ -1242,7 +1242,7 @@ onUnmounted(() => { _dlSSE?.close() })
   font-weight: 600;
 }
 .tier-local { color: #166534; background: #dcfce7; }
-.tier-budget { color: #1e40af; background: #dbeafe; }
+.tier-budget { color: #1e40af; background: var(--c-primary-tint); }
 .tier-premium { color: #7c2d12; background: #ffedd5; }
 
 .pool-edit {
@@ -1282,7 +1282,7 @@ onUnmounted(() => { _dlSSE?.close() })
   white-space: nowrap;
   transition: background 0.1s;
 }
-.btn-ping:hover:not(:disabled) { background: #eff6ff; }
+.btn-ping:hover:not(:disabled) { background: var(--c-primary-soft); }
 .btn-ping:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .ping-badge { font-size: 12px; font-weight: 500; white-space: nowrap; }
@@ -1309,7 +1309,7 @@ onUnmounted(() => { _dlSSE?.close() })
 
 .btn-primary {
   color: #fff;
-  background: #2563eb;
+  background: var(--c-primary);
   border: none;
   border-radius: 7px;
   padding: 9px 20px;
@@ -1318,8 +1318,8 @@ onUnmounted(() => { _dlSSE?.close() })
   cursor: pointer;
   transition: background 0.15s;
 }
-.btn-primary:hover:not(:disabled) { background: #1d4ed8; }
-.btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }
+.btn-primary:hover:not(:disabled) { background: var(--c-primary-strong); }
+.btn-primary:disabled { background: var(--c-primary-tint); cursor: not-allowed; }
 
 .btn-secondary {
   color: #374151;