优化详情与移动关键页视觉 Wave3（05-27-pc-detail-mobile-visual-wave3）

client/src/index.css

@@ -429,6 +429,104 @@
     @apply grid gap-6 xl:grid-cols-[minmax(0,1.4fr),minmax(320px,0.8fr)];
   }
 
+  .detail-workspace-grid {
+    @apply grid gap-5 xl:grid-cols-[minmax(0,1.45fr),minmax(300px,0.72fr)];
+  }
+
+  .detail-command-panel {
+    border-color: rgba(203, 213, 225, 0.92);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xs);
+    @apply border p-3.5 md:p-4;
+  }
+
+  .detail-fact-grid {
+    @apply grid gap-2.5 md:grid-cols-2;
+  }
+
+  .detail-fact-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.92);
+    border-radius: var(--radius-sm);
+    @apply border px-3 py-2.5 text-sm;
+  }
+
+  .detail-fact-card__label {
+    color: var(--color-text-tertiary);
+    @apply text-xs font-semibold;
+  }
+
+  .detail-fact-card__value {
+    color: var(--color-text-primary);
+    @apply mt-1 break-words font-medium;
+  }
+
+  .detail-evidence-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(248, 250, 252, 0.72);
+    border-radius: var(--radius-sm);
+    @apply border px-3.5 py-3 text-sm;
+  }
+
+  .detail-evidence-card--accent {
+    border-color: rgba(0, 57, 138, 0.2);
+    background: rgba(0, 57, 138, 0.045);
+  }
+
+  .detail-timeline {
+    @apply space-y-2.5;
+  }
+
+  .detail-timeline-item {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.94);
+    border-radius: var(--radius-sm);
+    @apply border px-3 py-2.5 text-sm;
+  }
+
+  .detail-timeline-item--current {
+    border-color: rgba(0, 57, 138, 0.28);
+    background: rgba(0, 57, 138, 0.055);
+  }
+
+  .detail-timeline-item--done {
+    border-color: rgba(16, 185, 129, 0.28);
+    background: rgba(236, 253, 245, 0.88);
+  }
+
+  .detail-action-stack {
+    @apply grid gap-3;
+  }
+
+  .detail-action-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.96);
+    border-radius: var(--radius-sm);
+    @apply border p-3.5;
+  }
+
+  .notification-inbox {
+    @apply space-y-3;
+  }
+
+  .notification-row-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.96);
+    border-radius: var(--radius-sm);
+    @apply border px-4 py-3 transition-colors hover:border-slate-300 hover:bg-slate-50/50;
+  }
+
+  .notification-row-card--unread {
+    border-color: rgba(0, 57, 138, 0.22);
+    background: rgba(0, 57, 138, 0.035);
+  }
+
+  .notification-row-card__meta {
+    color: var(--color-text-tertiary);
+    @apply text-xs font-medium;
+  }
+
   .badge-success {
     @apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-600/15;
   }