UI polish: hover lift, skeleton loaders, empty states, badge contrast, transitions

Card & row interactions:
- NoteCard, TaskCard, ProjectCard: translateY(-2px) lift on hover + extended transitions
- Kanban task cards (ProjectView), note rows: same lift treatment
- Task rows in flat/grouped list: soft indigo bg tint on hover
- Chat conversation items: left-border accent + bg tint on hover (was border-only)
- HomeView project mini-cards: translateY(-2px) lift on hover

Global feedback:
- Buttons: scale(0.97) on :active press (theme.css, :not(:disabled) scoped)
- TagPill: color → primary + indigo bg tint on hover
- StatusBadge: increased opacity 15% → 22% + stronger text color for readability

Loading & empty states:
- TasksListView: shimmer skeleton loader (6 rows) + rich empty state with CTA
- ProjectListView: shimmer skeleton cards (4) + rich empty state with CTA
- HomeView: section-empty messages for overdue/high-priority/notes sections
- ProjectView kanban columns: dashed-border styled empty state

Transitions & graph:
- WorkspaceView panels: panel-fade opacity transition on show/hide (v-if inner wrap)
- GraphView D3 nodes: grow to r*1.3 + bold label on mouseover (150ms transition)
- Milestone action buttons: base opacity 0 → 0.35 for discoverability

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

frontend/src/components/NoteCard.vue

@@ -65,10 +65,11 @@ function goEdit() {
   color: inherit;
   background: var(--color-bg-card);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
-  transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .note-card:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
+  transform: translateY(-2px);
 }
 
 /* Compact single-row layout */

frontend/src/components/StatusBadge.vue

@@ -37,16 +37,16 @@ const labels: Record<TaskStatus, string> = {
   letter-spacing: 0.025em;
 }
 .status-todo {
-  background: var(--color-status-todo-bg);
-  color: var(--color-status-todo);
+  background: color-mix(in srgb, var(--color-status-todo-bg) 78%, var(--color-status-todo) 22%);
+  color: color-mix(in srgb, var(--color-status-todo) 85%, #000 15%);
 }
 .status-in_progress {
-  background: var(--color-status-in-progress-bg);
-  color: var(--color-status-in-progress);
+  background: color-mix(in srgb, var(--color-status-in-progress-bg) 78%, var(--color-status-in-progress) 22%);
+  color: color-mix(in srgb, var(--color-status-in-progress) 85%, #000 15%);
 }
 .status-done {
-  background: var(--color-status-done-bg);
-  color: var(--color-status-done);
+  background: color-mix(in srgb, var(--color-status-done-bg) 78%, var(--color-status-done) 22%);
+  color: color-mix(in srgb, var(--color-status-done) 85%, #000 15%);
 }
 .clickable {
   cursor: pointer;

frontend/src/components/TagPill.vue

@@ -36,9 +36,11 @@ defineEmits<{
   font-size: 0.8rem;
   cursor: pointer;
   white-space: nowrap;
+  transition: color 0.15s, background 0.15s;
 }
 .tag-pill:hover {
-  filter: brightness(0.95);
+  color: var(--color-primary);
+  background: rgba(99, 102, 241, 0.08);
 }
 .dismiss {
   background: none;

frontend/src/components/TaskCard.vue

@@ -102,10 +102,11 @@ function isOverdue(): boolean {
   color: inherit;
   background: var(--color-bg-card);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
-  transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .task-card:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
+  transform: translateY(-2px);
 }
 
 /* Compact single-row layout */