polish(network): visual refinements across node, edge, and panel components

- DeviceNode: flat bg-card (no surface gradient), darker icon plate inset,
  correct text-muted token for category label
- GroupNode: label pill gets bg-card/90 background so it reads against canvas
- ConnectionEdge: label now has border + bg-card so it doesn't float invisible
- BaseHandle: tightened to 12px with accent-toned border
- NodeStatusIndicator: glow reduced to 0.15 opacity (design system compliant)
- ContextMenu: Ungroup now uses Ungroup icon instead of BoxSelect
- DeviceToolbar: group type icons coloured with semantic palette
- PropertiesPanel: empty state gets icon tile + cleaner copy hierarchy
- DiagramEditor: shortcut ? button repositioned above MiniMap, accent hover
- NetworkDiagrams list: card thumbnail placeholder uses dot-grid pattern,
  card menu gets icons and divider before destructive action

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/network/panels/DeviceToolbar.tsx

@@ -151,22 +151,22 @@ export function DeviceToolbar({ deviceTypes, onDeviceTypesChange }: DeviceToolba
         </div>
         <div className="flex flex-col gap-0.5">
           {[
-            { slug: 'subnet', label: 'Subnet' },
-            { slug: 'vlan', label: 'VLAN' },
-            { slug: 'site', label: 'Site' },
-            { slug: 'dmz', label: 'DMZ' },
+            { slug: 'subnet', label: 'Subnet', color: '#60a5fa' },
+            { slug: 'vlan',   label: 'VLAN',   color: '#a78bfa' },
+            { slug: 'site',   label: 'Site',   color: '#34d399' },
+            { slug: 'dmz',    label: 'DMZ',    color: '#f87171' },
           ].map(item => (
             <div
               key={item.slug}
               draggable
               onDragStart={e => {
-                e.dataTransfer.setData('application/reactflow-group', JSON.stringify(item))
+                e.dataTransfer.setData('application/reactflow-group', JSON.stringify({ slug: item.slug, label: item.label }))
                 e.dataTransfer.effectAllowed = 'move'
               }}
               className="flex cursor-grab items-center gap-2 rounded px-2 py-1.5 text-xs text-primary hover:bg-elevated active:cursor-grabbing active:scale-[0.98] transition-transform"
             >
               <GripVertical size={12} className="shrink-0 text-muted-foreground/50" />
-              <LayoutGrid size={14} className="text-muted-foreground" />
+              <LayoutGrid size={14} style={{ color: item.color }} />
               <span>{item.label}</span>
             </div>
           ))}

frontend/src/components/network/panels/PropertiesPanel.tsx

@@ -4,7 +4,7 @@ import {
   AlignStartVertical, AlignCenterHorizontal, AlignEndVertical,
   AlignStartHorizontal, AlignCenterVertical, AlignEndHorizontal,
   AlignHorizontalSpaceAround, AlignVerticalSpaceAround,
-  BoxSelect, Ungroup,
+  BoxSelect, Ungroup, MousePointer,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { DeviceProperties, DiagramEdge } from '@/types'
@@ -235,12 +235,15 @@ export function PropertiesPanel({
 
   if (!selectedNode && !selectedEdge) {
     return (
-      <div className="flex h-full w-[260px] flex-col items-center justify-center border-l border-default bg-sidebar px-4">
-        <p className="text-center text-xs text-muted-foreground">
-          Select a device or connection to edit its properties
+      <div className="flex h-full w-[260px] flex-col items-center justify-center border-l border-default bg-sidebar px-6">
+        <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-lg border border-default bg-elevated text-muted-foreground">
+          <MousePointer size={15} />
+        </div>
+        <p className="text-center text-xs font-medium text-muted-foreground">
+          Select a device or connection
         </p>
-        <p className="mt-1 text-center text-[10px] text-muted-foreground/60">
-          Hover a device to preview its info
+        <p className="mt-1 text-center text-[10px] text-muted-foreground/50 leading-relaxed">
+          Properties appear here. Hover a device to see a quick summary.
         </p>
       </div>
     )