diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index fccea9d..6887cbf 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { apiGet, apiPatch, apiDelete, apiPost } from "@/api/client";
 import { useToastStore } from "@/stores/toast";
+import { relativeTime } from "@/composables/useRelativeTime";
 
 interface Milestone {
   id: number;
@@ -279,131 +280,124 @@ async function confirmDelete() {
   }
 }
 
-function priorityClass(priority?: string): string {
-  if (priority === "high") return "priority-high";
-  if (priority === "medium") return "priority-medium";
-  if (priority === "low") return "priority-low";
-  return "";
-}
 
-function formatDate(dateStr?: string | null): string {
-  if (!dateStr) return "";
-  return new Date(dateStr).toLocaleDateString();
-}
 </script>
 
 <template>
   <main class="project-view">
+
+    <!-- Nav bar -->
     <div class="page-header">
-      <router-link to="/projects" class="btn-back">Back to Projects</router-link>
+      <router-link to="/projects" class="btn-back">← Projects</router-link>
       <div class="page-header-actions">
-        <router-link
-          v-if="project"
-          :to="`/workspace/${project.id}`"
-          class="btn-outline"
-        >
-          Open Workspace
+        <router-link v-if="project" :to="`/workspace/${project.id}`" class="btn-workspace">
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
+          Workspace
         </router-link>
-        <button
-          v-if="project"
-          class="btn-danger-outline"
-          @click="showDeleteConfirm = true"
-        >
-          Delete Project
-        </button>
+        <button v-if="project" class="btn-danger-outline" @click="showDeleteConfirm = true">Delete</button>
       </div>
     </div>
 
-    <p v-if="loading" class="loading-msg">Loading...</p>
+    <!-- Skeleton -->
+    <div v-if="loading" class="proj-skeleton" aria-label="Loading project">
+      <div class="skel-title"></div>
+      <div class="skel-goal"></div>
+      <div class="skel-stats"></div>
+      <div class="skel-body"></div>
+    </div>
     <p v-else-if="error" class="error-msg">{{ error }}</p>
 
     <template v-else-if="project">
-      <!-- Project header -->
+
+      <!-- Project identity header -->
       <div class="project-header">
         <div class="title-row">
-          <input
-            v-model="editTitle"
-            type="text"
-            class="title-input"
-            placeholder="Project title"
-          />
+          <input v-model="editTitle" type="text" class="project-title-input" placeholder="Project title" />
           <span :class="['status-badge', `status-${project.status}`]">
             {{ project.status.charAt(0).toUpperCase() + project.status.slice(1) }}
           </span>
         </div>
-        <p v-if="project.goal && !editGoal" class="project-goal-display">{{ project.goal }}</p>
+        <p v-if="project.goal" class="project-goal">{{ project.goal }}</p>
+        <p v-if="project.summary?.last_activity" class="project-activity">
+          <svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
+          Active {{ relativeTime(project.summary.last_activity) }}
+        </p>
       </div>
 
-      <!-- Summary bar -->
-      <div v-if="project.summary" class="summary-bar">
-        <span class="summary-item">
-          <span class="summary-num">{{ project.summary.task_counts.todo }}</span> todo
-        </span>
-        <span class="summary-sep">·</span>
-        <span class="summary-item">
-          <span class="summary-num">{{ project.summary.task_counts.in_progress }}</span> in progress
-        </span>
-        <span class="summary-sep">·</span>
-        <span class="summary-item">
-          <span class="summary-num">{{ project.summary.task_counts.done }}</span> done
-        </span>
-        <span class="summary-sep">·</span>
-        <span class="summary-item">
-          <span class="summary-num">{{ project.summary.note_count }}</span> notes
-        </span>
+      <!-- Summary stat chips -->
+      <div v-if="project.summary" class="summary-stats">
+        <div class="stat-chip stat-todo">
+          <span class="stat-dot dot-todo"></span>
+          <span class="stat-val">{{ project.summary.task_counts.todo }}</span>
+          <span class="stat-label">todo</span>
+        </div>
+        <div class="stat-chip stat-inprogress">
+          <span class="stat-dot dot-inprogress"></span>
+          <span class="stat-val">{{ project.summary.task_counts.in_progress }}</span>
+          <span class="stat-label">in progress</span>
+        </div>
+        <div class="stat-chip stat-done">
+          <span class="stat-dot dot-done"></span>
+          <span class="stat-val">{{ project.summary.task_counts.done }}</span>
+          <span class="stat-label">done</span>
+        </div>
+        <div class="stat-chip stat-notes">
+          <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true" style="opacity:0.6"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
+          <span class="stat-val">{{ project.summary.note_count }}</span>
+          <span class="stat-label">notes</span>
+        </div>
       </div>
 
       <div class="project-body">
+
         <!-- Edit panel -->
         <aside class="edit-panel">
-          <h3>Details</h3>
+          <h3 class="panel-heading">Details</h3>
           <div class="edit-field">
-            <label>Goal</label>
+            <label class="edit-label">Goal</label>
             <input v-model="editGoal" type="text" class="edit-input" placeholder="What are you trying to achieve?" />
           </div>
           <div class="edit-field">
-            <label>Description</label>
+            <label class="edit-label">Description</label>
             <textarea v-model="editDescription" class="edit-textarea" rows="4" placeholder="Optional description..."></textarea>
           </div>
           <div class="edit-field">
-            <label>Status</label>
+            <label class="edit-label">Status</label>
             <select v-model="editStatus" class="edit-select">
               <option value="active">Active</option>
               <option value="completed">Completed</option>
               <option value="archived">Archived</option>
             </select>
           </div>
-          <button
-            class="btn-save"
-            @click="saveProject"
-            :disabled="!editDirty || saving"
-          >
-            {{ saving ? "Saving..." : "Save" }}
+          <button class="btn-save-panel" @click="saveProject" :disabled="!editDirty || saving">
+            {{ saving ? "Saving..." : "Save Changes" }}
           </button>
         </aside>
 
         <!-- Main content area -->
         <div class="content-area">
-          <!-- Tab bar -->
           <div class="tab-bar">
-            <button
-              :class="['tab-btn', { active: activeTab === 'tasks' }]"
-              @click="activeTab = 'tasks'"
-            >Tasks</button>
-            <button
-              :class="['tab-btn', { active: activeTab === 'notes' }]"
-              @click="activeTab = 'notes'"
-            >Notes</button>
+            <button :class="['tab-btn', { active: activeTab === 'tasks' }]" @click="activeTab = 'tasks'">
+              Tasks
+              <span v-if="project.summary" class="tab-count">{{ project.summary.task_counts.todo + project.summary.task_counts.in_progress + project.summary.task_counts.done }}</span>
+            </button>
+            <button :class="['tab-btn', { active: activeTab === 'notes' }]" @click="activeTab = 'notes'">
+              Notes
+              <span v-if="project.summary" class="tab-count">{{ project.summary.note_count }}</span>
+            </button>
           </div>
 
-          <!-- Tasks tab — milestone-grouped -->
+          <!-- Tasks tab — milestone-grouped kanban -->
           <div v-if="activeTab === 'tasks'" class="tasks-view">
-            <p v-if="tasksLoading" class="loading-msg">Loading tasks...</p>
+            <div v-if="tasksLoading" class="proj-skeleton-inline">
+              <div class="skel-row"></div>
+              <div class="skel-row skel-row--short"></div>
+              <div class="skel-row"></div>
+            </div>
             <template v-else>
-              <!-- Add milestone button -->
               <div class="milestone-actions">
                 <button v-if="!showNewMilestone" class="btn-add-milestone" @click="showNewMilestone = true">
-                  + Add Milestone
+                  + Milestone
                 </button>
                 <div v-else class="new-milestone-row">
                   <input
@@ -421,22 +415,15 @@ function formatDate(dateStr?: string | null): string {
                 </div>
               </div>
 
-              <!-- Milestone groups -->
-              <div
-                v-for="group in milestoneGroups"
-                :key="group.milestone?.id ?? 'unassigned'"
-                class="milestone-group"
-              >
-                <!-- Milestone header -->
+              <div v-for="group in milestoneGroups" :key="group.milestone?.id ?? 'unassigned'" class="milestone-group">
                 <div
                   class="milestone-header"
-                  @click="group.milestone && renamingMilestoneId !== group.milestone.id && toggleMilestoneCollapse(group.milestone.id)"
                   :class="{ clickable: !!group.milestone && renamingMilestoneId !== group.milestone?.id }"
+                  @click="group.milestone && renamingMilestoneId !== group.milestone.id && toggleMilestoneCollapse(group.milestone.id)"
                 >
                   <span class="ms-chevron" v-if="group.milestone">
-                    {{ collapsedMilestones.has(group.milestone.id) ? '▶' : '▼' }}
+                    <svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor"><path :d="collapsedMilestones.has(group.milestone.id) ? 'M8 5l8 7-8 7V5z' : 'M5 8l7 8 7-8H5z'"/></svg>
                   </span>
-                  <!-- Inline rename input -->
                   <template v-if="group.milestone && renamingMilestoneId === group.milestone.id">
                     <input
                       class="ms-rename-input"
@@ -452,95 +439,87 @@ function formatDate(dateStr?: string | null): string {
                   <span class="ms-count">{{ group.tasks.length }}</span>
                   <template v-if="group.milestone">
                     <div class="ms-progress-track">
-                      <div
-                        class="ms-progress-fill"
-                        :style="{ width: group.milestone.pct + '%' }"
-                      ></div>
+                      <div class="ms-progress-fill" :style="{ width: group.milestone.pct + '%' }"></div>
                     </div>
                     <span class="ms-pct">{{ group.milestone.pct }}%</span>
-                    <!-- Edit / delete actions -->
                     <div class="ms-actions" @click.stop>
-                      <button
-                        class="ms-action-btn"
-                        title="Rename milestone"
-                        @click="startRenameMilestone(group.milestone)"
-                      >✎</button>
-                      <button
-                        class="ms-action-btn ms-action-delete"
-                        title="Delete milestone"
-                        @click="deletingMilestone = group.milestone"
-                      >✕</button>
+                      <button class="ms-action-btn" title="Rename" @click="startRenameMilestone(group.milestone)">
+                        <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+                      </button>
+                      <button class="ms-action-btn ms-action-delete" title="Delete" @click="deletingMilestone = group.milestone">
+                        <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+                      </button>
                     </div>
                   </template>
                 </div>
 
-                <!-- Task list (collapsible) -->
-                <div
-                  v-if="!group.milestone || !collapsedMilestones.has(group.milestone.id)"
-                  class="kanban"
-                >
-                  <div class="kanban-col">
+                <div v-if="!group.milestone || !collapsedMilestones.has(group.milestone.id)" class="kanban">
+                  <!-- Todo column -->
+                  <div class="kanban-col col-todo">
                     <div class="kanban-col-header">
-                      <span>Todo</span>
+                      <span class="col-status-dot dot-todo"></span>
+                      <span class="col-label">Todo</span>
                       <span class="col-count">{{ group.tasks.filter(t => t.status === 'todo').length }}</span>
                       <router-link
                         :to="`/tasks/new?projectId=${projectId}${group.milestone ? '&milestoneId=' + group.milestone.id : ''}`"
-                        class="col-add-btn"
-                        title="Add task"
+                        class="col-add-btn" title="Add task"
                       >+</router-link>
                     </div>
                     <div class="kanban-cards">
                       <router-link
                         v-for="task in group.tasks.filter(t => t.status === 'todo')"
-                        :key="task.id"
-                        :to="`/tasks/${task.id}`"
-                        class="task-card"
+                        :key="task.id" :to="`/tasks/${task.id}`"
+                        :class="['task-card', `pri-${task.priority || 'none'}`]"
                       >
                         <span class="task-title">{{ task.title || "Untitled" }}</span>
-                        <div class="task-meta">
-                          <span v-if="task.priority && task.priority !== 'none'" :class="['priority-badge', priorityClass(task.priority)]">{{ task.priority }}</span>
-                          <span v-if="task.due_date" class="due-date">{{ formatDate(task.due_date) }}</span>
+                        <div v-if="task.priority !== 'none' || task.due_date" class="task-meta">
+                          <span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', `dot-pri-${task.priority}`]" :title="task.priority"></span>
+                          <span v-if="task.due_date" class="due-date">{{ task.due_date }}</span>
                         </div>
                       </router-link>
                       <p v-if="!group.tasks.filter(t => t.status === 'todo').length" class="col-empty">No tasks</p>
                     </div>
                   </div>
-                  <div class="kanban-col">
+
+                  <!-- In Progress column -->
+                  <div class="kanban-col col-inprogress">
                     <div class="kanban-col-header">
-                      <span>In Progress</span>
+                      <span class="col-status-dot dot-inprogress"></span>
+                      <span class="col-label">In Progress</span>
                       <span class="col-count">{{ group.tasks.filter(t => t.status === 'in_progress').length }}</span>
                     </div>
                     <div class="kanban-cards">
                       <router-link
                         v-for="task in group.tasks.filter(t => t.status === 'in_progress')"
-                        :key="task.id"
-                        :to="`/tasks/${task.id}`"
-                        class="task-card"
+                        :key="task.id" :to="`/tasks/${task.id}`"
+                        :class="['task-card', `pri-${task.priority || 'none'}`]"
                       >
                         <span class="task-title">{{ task.title || "Untitled" }}</span>
-                        <div class="task-meta">
-                          <span v-if="task.priority && task.priority !== 'none'" :class="['priority-badge', priorityClass(task.priority)]">{{ task.priority }}</span>
-                          <span v-if="task.due_date" class="due-date">{{ formatDate(task.due_date) }}</span>
+                        <div v-if="task.priority !== 'none' || task.due_date" class="task-meta">
+                          <span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', `dot-pri-${task.priority}`]" :title="task.priority"></span>
+                          <span v-if="task.due_date" class="due-date">{{ task.due_date }}</span>
                         </div>
                       </router-link>
                       <p v-if="!group.tasks.filter(t => t.status === 'in_progress').length" class="col-empty">No tasks</p>
                     </div>
                   </div>
-                  <div class="kanban-col">
+
+                  <!-- Done column -->
+                  <div class="kanban-col col-done">
                     <div class="kanban-col-header">
-                      <span>Done</span>
+                      <span class="col-status-dot dot-done"></span>
+                      <span class="col-label">Done</span>
                       <span class="col-count">{{ group.tasks.filter(t => t.status === 'done').length }}</span>
                     </div>
                     <div class="kanban-cards">
                       <router-link
                         v-for="task in group.tasks.filter(t => t.status === 'done')"
-                        :key="task.id"
-                        :to="`/tasks/${task.id}`"
+                        :key="task.id" :to="`/tasks/${task.id}`"
                         class="task-card task-card-done"
                       >
                         <span class="task-title">{{ task.title || "Untitled" }}</span>
-                        <div class="task-meta">
-                          <span v-if="task.due_date" class="due-date">{{ formatDate(task.due_date) }}</span>
+                        <div v-if="task.due_date" class="task-meta">
+                          <span class="due-date">{{ task.due_date }}</span>
                         </div>
                       </router-link>
                       <p v-if="!group.tasks.filter(t => t.status === 'done').length" class="col-empty">No tasks</p>
@@ -555,16 +534,16 @@ function formatDate(dateStr?: string | null): string {
 
           <!-- Notes tab -->
           <div v-if="activeTab === 'notes'" class="notes-list">
-            <p v-if="notesLoading" class="loading-msg">Loading notes...</p>
+            <div v-if="notesLoading" class="proj-skeleton-inline">
+              <div class="skel-row"></div>
+              <div class="skel-row skel-row--short"></div>
+              <div class="skel-row"></div>
+            </div>
             <template v-else>
-              <router-link
-                v-for="note in notes"
-                :key="note.id"
-                :to="`/notes/${note.id}`"
-                class="note-row"
-              >
+              <router-link v-for="note in notes" :key="note.id" :to="`/notes/${note.id}`" class="note-row">
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" class="note-icon" aria-hidden="true"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
                 <span class="note-title">{{ note.title || "Untitled" }}</span>
-                <span class="note-date">{{ formatDate(note.updated_at) }}</span>
+                <span class="note-date">{{ relativeTime(note.updated_at) }}</span>
               </router-link>
               <p v-if="!notes.length" class="empty-msg">No notes in this project.</p>
             </template>
@@ -573,7 +552,7 @@ function formatDate(dateStr?: string | null): string {
       </div>
     </template>
 
-    <!-- Milestone delete confirmation modal -->
+    <!-- Milestone delete confirmation -->
     <teleport to="body">
       <div v-if="deletingMilestone" class="modal-overlay" @click.self="deletingMilestone = null">
         <div class="modal-card">
@@ -590,7 +569,7 @@ function formatDate(dateStr?: string | null): string {
       </div>
     </teleport>
 
-    <!-- Project delete confirmation modal -->
+    <!-- Project delete confirmation -->
     <teleport to="body">
       <div v-if="showDeleteConfirm" class="modal-overlay" @click.self="showDeleteConfirm = false">
         <div class="modal-card">
@@ -607,6 +586,7 @@ function formatDate(dateStr?: string | null): string {
 </template>
 
 <style scoped>
+/* ── Layout ─────────────────────────────────────────────────── */
 .project-view {
   max-width: 1200px;
   margin: 2rem auto;
@@ -614,134 +594,159 @@ function formatDate(dateStr?: string | null): string {
   overflow-x: clip;
 }
 
+/* ── Nav bar ─────────────────────────────────────────────────── */
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1.25rem;
-}
-
-.page-header-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
+  margin-bottom: 1.5rem;
 }
+.page-header-actions { display: flex; gap: 0.5rem; align-items: center; }
 
 .btn-back {
-  color: var(--color-primary);
-  text-decoration: none;
-  font-size: 0.875rem;
-}
-.btn-back:hover {
-  text-decoration: underline;
-}
-
-.btn-outline {
-  padding: 0.35rem 0.8rem;
-  background: none;
-  border: 1px solid var(--color-primary);
-  color: var(--color-primary);
-  border-radius: 6px;
-  font-size: 0.875rem;
-  text-decoration: none;
-  cursor: pointer;
   display: inline-flex;
   align-items: center;
-  gap: 0.3rem;
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: border-color 0.15s, color 0.15s;
 }
-.btn-outline:hover {
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+.btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
+
+.btn-workspace {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.45rem 1rem;
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
+  transition: box-shadow 0.15s, opacity 0.15s;
 }
+.btn-workspace:hover { box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42); opacity: 0.95; color: #fff; }
 
 .btn-danger-outline {
-  padding: 0.35rem 0.8rem;
+  padding: 0.4rem 0.8rem;
   background: none;
-  border: 1px solid var(--color-danger, #e74c3c);
-  color: var(--color-danger, #e74c3c);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
   border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.85rem;
   font-family: inherit;
+  transition: border-color 0.15s, color 0.15s;
 }
-.btn-danger-outline:hover {
-  background: color-mix(in srgb, var(--color-danger, #e74c3c) 10%, transparent);
-}
+.btn-danger-outline:hover { border-color: var(--color-danger, #e74c3c); color: var(--color-danger, #e74c3c); }
 
-.loading-msg { color: var(--color-text-muted); font-size: 0.9rem; }
 .error-msg { color: var(--color-danger); font-size: 0.9rem; }
 
-.project-header {
-  margin-bottom: 0.75rem;
-}
+/* ── Project identity header ─────────────────────────────────── */
+.project-header { margin-bottom: 1rem; }
 
 .title-row {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.4rem;
 }
-.title-input {
+.project-title-input {
   flex: 1;
-  font-size: 1.4rem;
+  font-size: 1.75rem;
   font-weight: 700;
+  font-family: "Fraunces", Georgia, serif;
   color: var(--color-text);
   background: transparent;
   border: none;
-  border-bottom: 2px solid transparent;
+  border-bottom: 1.5px solid transparent;
   outline: none;
   padding: 0.1rem 0;
-  font-family: inherit;
   min-width: 0;
+  transition: border-color 0.15s;
 }
-.title-input:focus {
-  border-bottom-color: var(--color-primary);
-}
+.project-title-input:focus { border-bottom-color: var(--color-primary); }
+.project-title-input::placeholder { color: var(--color-text-muted); font-weight: 400; font-style: italic; }
 
 .status-badge {
-  font-size: 0.7rem;
+  font-size: 0.68rem;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: 0.15rem 0.45rem;
+  letter-spacing: 0.05em;
+  padding: 0.18rem 0.55rem;
   border-radius: 999px;
   flex-shrink: 0;
 }
-.status-active   { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
-.status-completed { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
-.status-archived  { background: color-mix(in srgb, var(--color-text-muted) 15%, transparent); color: var(--color-text-muted); }
+.status-active   { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); }
+.status-completed { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); }
+.status-archived  { background: color-mix(in srgb, var(--color-text-muted) 14%, transparent); color: var(--color-text-muted); border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); }
 
-.project-goal-display {
-  font-size: 0.9rem;
+.project-goal {
+  font-size: 1rem;
   color: var(--color-text-secondary);
+  margin: 0 0 0.3rem;
+  line-height: 1.45;
+}
+.project-activity {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
   margin: 0;
-  font-style: italic;
 }
 
-.summary-bar {
+/* ── Summary stat chips ──────────────────────────────────────── */
+.summary-stats {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 1.25rem;
-  font-size: 0.85rem;
-  color: var(--color-text-secondary);
   flex-wrap: wrap;
 }
-.summary-num {
-  font-weight: 700;
-  color: var(--color-text);
-}
-.summary-sep {
-  color: var(--color-text-muted);
+.stat-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.3rem 0.65rem;
+  border-radius: var(--radius-md);
+  font-size: 0.82rem;
+  border: 1px solid;
 }
+.stat-val { font-weight: 700; font-size: 0.9rem; }
+.stat-label { color: inherit; opacity: 0.8; }
 
+.stat-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.dot-todo      { background: transparent; border: 2px solid var(--color-text-muted); }
+.dot-inprogress { background: var(--color-status-in-progress, #3b82f6); }
+.dot-done      { background: var(--color-status-done, #22c55e); }
+
+.stat-todo      { background: color-mix(in srgb, var(--color-text-muted) 8%, transparent); color: var(--color-text-secondary); border-color: var(--color-border); }
+.stat-inprogress { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 28%, transparent); }
+.stat-done      { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 28%, transparent); }
+.stat-notes     { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 22%, transparent); }
+
+/* ── Two-column body ─────────────────────────────────────────── */
 .project-body {
   display: grid;
-  grid-template-columns: 260px 1fr;
+  grid-template-columns: 248px 1fr;
   gap: 1.25rem;
   align-items: start;
 }
 
-/* Edit panel */
+/* ── Edit panel ──────────────────────────────────────────────── */
 .edit-panel {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
@@ -750,28 +755,26 @@ function formatDate(dateStr?: string | null): string {
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
+  position: sticky;
+  top: 1rem;
 }
-.edit-panel h3 {
-  margin: 0 0 0.25rem;
-  font-size: 0.875rem;
+.panel-heading {
+  margin: 0 0 0.1rem;
+  font-size: 0.72rem;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
   color: var(--color-text-muted);
 }
-.edit-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-.edit-field label {
-  font-size: 0.8rem;
+.edit-field { display: flex; flex-direction: column; gap: 0.3rem; }
+.edit-label {
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
-.edit-input,
-.edit-textarea,
-.edit-select {
+.edit-input, .edit-textarea, .edit-select {
   padding: 0.4rem 0.6rem;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
@@ -782,43 +785,39 @@ function formatDate(dateStr?: string | null): string {
   box-sizing: border-box;
   width: 100%;
 }
-.edit-input:focus,
-.edit-textarea:focus,
-.edit-select:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-.edit-textarea {
-  resize: vertical;
-}
-.btn-save {
-  padding: 0.4rem 0.9rem;
-  background: var(--color-primary);
+.edit-input:focus, .edit-textarea:focus, .edit-select:focus { outline: none; border-color: var(--color-primary); }
+.edit-textarea { resize: vertical; }
+
+.btn-save-panel {
+  padding: 0.45rem 0.9rem;
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.875rem;
+  font-weight: 600;
   font-family: inherit;
   width: 100%;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
+  transition: box-shadow 0.15s, opacity 0.15s;
 }
-.btn-save:hover:not(:disabled) { opacity: 0.9; }
-.btn-save:disabled { opacity: 0.5; cursor: default; }
+.btn-save-panel:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); opacity: 0.95; }
+.btn-save-panel:disabled { opacity: 0.45; cursor: default; }
+
+/* ── Content area ────────────────────────────────────────────── */
+.content-area { display: flex; flex-direction: column; gap: 0.75rem; }
 
-/* Main content */
-.content-area {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
 .tab-bar {
   display: flex;
-  gap: 0.25rem;
+  gap: 0;
   border-bottom: 1px solid var(--color-border);
-  padding-bottom: 0;
 }
 .tab-btn {
-  padding: 0.4rem 0.85rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.9rem;
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
@@ -827,49 +826,46 @@ function formatDate(dateStr?: string | null): string {
   color: var(--color-text-secondary);
   font-family: inherit;
   margin-bottom: -1px;
+  transition: color 0.15s;
 }
 .tab-btn:hover { color: var(--color-primary); }
-.tab-btn.active {
-  color: var(--color-primary);
-  border-bottom-color: var(--color-primary);
+.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
+.tab-count {
+  font-size: 0.7rem;
   font-weight: 600;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  padding: 0 0.4rem;
+  line-height: 1.5;
+  color: var(--color-text-muted);
+}
+.tab-btn.active .tab-count {
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+  color: var(--color-primary);
 }
 
-/* Tasks view (wraps milestone groups) */
-.tasks-view {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
+/* ── Tasks view ──────────────────────────────────────────────── */
+.tasks-view { display: flex; flex-direction: column; gap: 1rem; }
 
-/* Milestone management */
-.milestone-actions {
-  display: flex;
-  align-items: center;
-}
+.milestone-actions { display: flex; align-items: center; }
 .btn-add-milestone {
   background: none;
   border: 1px dashed var(--color-border);
   color: var(--color-text-secondary);
-  padding: 0.3rem 0.7rem;
+  padding: 0.28rem 0.65rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   font-family: inherit;
 }
-.btn-add-milestone:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-.new-milestone-row {
-  display: flex;
-  gap: 0.4rem;
-  align-items: center;
-  flex: 1;
-}
+.btn-add-milestone:hover { border-color: var(--color-primary); color: var(--color-primary); }
+
+.new-milestone-row { display: flex; gap: 0.4rem; align-items: center; flex: 1; }
 .milestone-title-input {
   flex: 1;
-  padding: 0.35rem 0.55rem;
+  padding: 0.3rem 0.5rem;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   background: var(--color-bg);
@@ -877,79 +873,64 @@ function formatDate(dateStr?: string | null): string {
   font-size: 0.875rem;
   font-family: inherit;
 }
-.milestone-title-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
+.milestone-title-input:focus { outline: none; border-color: var(--color-primary); }
 .btn-ms-confirm {
-  padding: 0.3rem 0.7rem;
+  padding: 0.3rem 0.65rem;
   background: var(--color-primary);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   font-family: inherit;
 }
 .btn-ms-confirm:disabled { opacity: 0.5; cursor: default; }
 .btn-ms-cancel {
-  padding: 0.3rem 0.7rem;
+  padding: 0.3rem 0.65rem;
   background: none;
   border: 1px solid var(--color-border);
   color: var(--color-text-secondary);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   font-family: inherit;
 }
 
-/* Milestone group */
+/* ── Milestone group ─────────────────────────────────────────── */
 .milestone-group {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
 }
 .milestone-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.8rem;
+  padding: 0.55rem 0.85rem;
   background: var(--color-bg-secondary);
   font-size: 0.85rem;
   user-select: none;
+  border-bottom: 1px solid var(--color-border);
 }
-.milestone-header.clickable {
-  cursor: pointer;
-}
-.milestone-header.clickable:hover {
-  background: var(--color-bg-card);
-}
-.ms-chevron {
-  font-size: 0.65rem;
-  color: var(--color-text-muted);
-  flex-shrink: 0;
-}
-.ms-name {
-  font-weight: 600;
-  color: var(--color-text);
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+.milestone-header.clickable { cursor: pointer; }
+.milestone-header.clickable:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-secondary)); }
+
+.ms-chevron { display: flex; align-items: center; color: var(--color-text-muted); flex-shrink: 0; }
+.ms-name { font-weight: 600; color: var(--color-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ms-count {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   color: var(--color-text-muted);
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: 999px;
   padding: 0.05rem 0.4rem;
   flex-shrink: 0;
+  font-weight: 600;
 }
 .ms-progress-track {
-  width: 80px;
-  height: 5px;
+  width: 72px;
+  height: 6px;
   background: var(--color-border);
   border-radius: 999px;
   overflow: hidden;
@@ -957,225 +938,29 @@ function formatDate(dateStr?: string | null): string {
 }
 .ms-progress-fill {
   height: 100%;
-  background: var(--color-primary);
+  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, var(--color-success)));
   border-radius: 999px;
-  transition: width 0.3s ease;
-}
-.ms-pct {
-  font-size: 0.72rem;
-  color: var(--color-text-muted);
-  flex-shrink: 0;
-  min-width: 2.2rem;
-  text-align: right;
+  transition: width 0.4s ease;
 }
+.ms-pct { font-size: 0.72rem; color: var(--color-text-secondary); flex-shrink: 0; min-width: 2.4rem; text-align: right; font-weight: 600; }
 
-/* Kanban */
-.kanban {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
-  align-items: start;
-  padding: 0.75rem;
-  background: var(--color-bg);
-}
-.kanban-col {
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.kanban-col-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 0.8rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--color-text-secondary);
-  margin-bottom: 0.35rem;
-}
-.col-count {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: 999px;
-  padding: 0.05rem 0.45rem;
-  font-size: 0.7rem;
-  color: var(--color-text-muted);
-  font-weight: 600;
-}
-.col-add-btn {
-  margin-left: auto;
-  color: var(--color-text-muted);
-  text-decoration: none;
-  font-size: 1rem;
-  line-height: 1;
-  padding: 0 0.15rem;
-  border-radius: var(--radius-sm);
-}
-.col-add-btn:hover { color: var(--color-primary); }
-.kanban-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-.task-card {
-  display: block;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 0.5rem 0.6rem;
-  text-decoration: none;
-  color: var(--color-text);
-  font-size: 0.875rem;
-  transition: border-color 0.15s, transform 0.18s ease;
-}
-.task-card:hover {
-  border-color: var(--color-primary);
-  transform: translateY(-2px);
-}
-.task-card-done .task-title {
-  text-decoration: line-through;
-  opacity: 0.6;
-}
-.task-title {
-  display: block;
-  font-weight: 500;
-  margin-bottom: 0.25rem;
-  line-height: 1.3;
-  word-break: break-word;
-}
-.task-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  flex-wrap: wrap;
-}
-.priority-badge {
-  font-size: 0.67rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  padding: 0.1rem 0.3rem;
-  border-radius: 3px;
-}
-.priority-high   { background: color-mix(in srgb, var(--color-danger, #e74c3c) 15%, transparent); color: var(--color-danger, #e74c3c); }
-.priority-medium { background: rgba(201, 138, 0, 0.15); color: #c98a00; }
-.priority-low    { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
-.due-date {
-  font-size: 0.72rem;
-  color: var(--color-text-muted);
-}
-.col-empty {
-  text-align: center;
-  padding: 1.5rem 0.5rem;
-  color: var(--color-text-muted);
-  font-size: 0.82rem;
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-sm);
-  margin-top: 0.5rem;
-}
-
-/* Notes list */
-.notes-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-.note-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.6rem 0.9rem;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  color: var(--color-text);
-  font-size: 0.9rem;
-  transition: border-color 0.15s, transform 0.15s ease;
-}
-.note-row:hover {
-  border-color: var(--color-primary);
-  transform: translateY(-1px);
-}
-.note-title {
-  font-weight: 500;
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.note-date {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  flex-shrink: 0;
-  margin-left: 0.75rem;
-}
-.empty-msg {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-  text-align: center;
-  padding: 1rem;
-}
-
-/* Modal */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--color-overlay, rgba(0,0,0,0.45));
+.ms-actions { display: flex; gap: 0.15rem; margin-left: 0.2rem; opacity: 0; transition: opacity 0.15s; }
+.milestone-header:hover .ms-actions { opacity: 1; }
+.ms-action-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 200;
-}
-.modal-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 1.5rem;
-  width: 100%;
-  max-width: 400px;
-  box-shadow: 0 8px 32px var(--color-shadow);
-}
-.modal-title {
-  margin: 0 0 0.75rem;
-  font-size: 1.05rem;
-}
-.modal-message {
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin: 0 0 1.25rem;
-  line-height: 1.5;
-}
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
-.modal-btn {
-  padding: 0.4rem 0.9rem;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border-radius: var(--radius-sm);
+  background: none;
+  border: none;
   cursor: pointer;
-  font-size: 0.875rem;
-  font-family: inherit;
+  color: var(--color-text-muted);
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
 }
-.modal-btn:hover { background: var(--color-bg); }
-.modal-btn-danger {
-  background: var(--color-danger, #e74c3c);
-  border-color: var(--color-danger, #e74c3c);
-  color: #fff;
-}
-.modal-btn-danger:hover { opacity: 0.9; }
+.ms-action-btn:hover { background: var(--color-bg-card); color: var(--color-text); }
+.ms-action-delete:hover { color: var(--color-danger, #e74c3c); }
 
-/* Milestone rename input */
 .ms-rename-input {
   flex: 1;
   min-width: 0;
@@ -1187,54 +972,210 @@ function formatDate(dateStr?: string | null): string {
   font-size: 0.85rem;
   font-family: inherit;
   font-weight: 600;
-}
-.ms-rename-input:focus {
   outline: none;
 }
 
-/* Milestone action buttons */
-.ms-actions {
+/* ── Kanban ──────────────────────────────────────────────────── */
+.kanban {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+  align-items: start;
+  padding: 0.75rem;
+  background: color-mix(in srgb, var(--color-bg) 60%, var(--color-bg-secondary));
+}
+.kanban-col {
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-md);
+  padding: 0.65rem;
   display: flex;
-  gap: 0.15rem;
-  margin-left: 0.25rem;
-  opacity: 0.35;
-  transition: opacity 0.15s;
+  flex-direction: column;
+  gap: 0.4rem;
+  border-top: 3px solid;
 }
-.milestone-header:hover .ms-actions {
-  opacity: 1;
+.col-todo      { border-top-color: var(--color-border); }
+.col-inprogress { border-top-color: var(--color-status-in-progress, #3b82f6); }
+.col-done      { border-top-color: var(--color-status-done, #22c55e); }
+
+.kanban-col-header {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.3rem;
 }
-.ms-action-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
+.col-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.col-label { flex: 1; }
+.col-count {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  padding: 0.05rem 0.4rem;
+  font-size: 0.68rem;
   color: var(--color-text-muted);
-  font-size: 0.8rem;
-  padding: 0.15rem 0.3rem;
-  border-radius: var(--radius-sm);
+  font-weight: 600;
+}
+.col-add-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  color: var(--color-text-muted);
+  text-decoration: none;
+  font-size: 1rem;
   line-height: 1;
+  border-radius: 3px;
+  margin-left: auto;
+}
+.col-add-btn:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
+
+.kanban-cards { display: flex; flex-direction: column; gap: 0.3rem; }
+
+.task-card {
+  display: block;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-left: 3px solid transparent;
+  border-radius: var(--radius-sm);
+  padding: 0.45rem 0.55rem;
+  text-decoration: none;
+  color: var(--color-text);
+  font-size: 0.85rem;
+  transition: border-color 0.12s, box-shadow 0.18s, transform 0.18s ease;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+.task-card:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
+  border-left-color: var(--color-primary);
+  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
+  transform: translateY(-2px);
+}
+/* Priority left-border colors */
+.task-card.pri-high   { border-left-color: var(--color-danger, #e74c3c); }
+.task-card.pri-medium { border-left-color: #f59e0b; }
+.task-card.pri-low    { border-left-color: var(--color-success); }
+
+.task-card-done { opacity: 0.65; }
+.task-card-done .task-title { text-decoration: line-through; }
+
+.task-title { display: block; font-weight: 500; margin-bottom: 0.2rem; line-height: 1.3; word-break: break-word; }
+.task-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
+
+.priority-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.dot-pri-high   { background: var(--color-danger, #e74c3c); }
+.dot-pri-medium { background: #f59e0b; }
+.dot-pri-low    { background: var(--color-success); }
+
+.due-date { font-size: 0.7rem; color: var(--color-text-muted); }
+.col-empty {
+  text-align: center;
+  padding: 1.25rem 0.5rem;
+  color: var(--color-text-muted);
+  font-size: 0.78rem;
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-sm);
+  opacity: 0.7;
+}
+
+/* ── Notes list ──────────────────────────────────────────────── */
+.notes-list { display: flex; flex-direction: column; gap: 0.35rem; }
+.note-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0.9rem;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  color: var(--color-text);
+  font-size: 0.9rem;
+  transition: border-color 0.12s, box-shadow 0.15s, transform 0.15s;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+.note-row:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
+  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
+  transform: translateY(-1px);
+}
+.note-icon { color: var(--color-text-muted); flex-shrink: 0; }
+.note-title { font-weight: 500; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.note-date { font-size: 0.75rem; color: var(--color-text-muted); flex-shrink: 0; }
+
+.empty-msg { color: var(--color-text-muted); font-size: 0.875rem; text-align: center; padding: 1rem; }
+
+/* ── Modal ───────────────────────────────────────────────────── */
+.modal-overlay {
+  position: fixed; inset: 0;
+  background: var(--color-overlay, rgba(0,0,0,0.45));
+  display: flex; align-items: center; justify-content: center;
+  z-index: 200;
+}
+.modal-card {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 8px 32px var(--color-shadow);
+}
+.modal-title { margin: 0 0 0.75rem; font-size: 1.05rem; }
+.modal-message { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
+.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
+.modal-btn {
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+  color: var(--color-text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.875rem;
   font-family: inherit;
 }
-.ms-action-btn:hover {
-  background: var(--color-bg-card);
-  color: var(--color-text);
-}
-.ms-action-delete:hover {
-  color: var(--color-danger, #e74c3c);
-}
+.modal-btn:hover { background: var(--color-bg); }
+.modal-btn-danger { background: var(--color-danger, #e74c3c); border-color: var(--color-danger, #e74c3c); color: #fff; }
+.modal-btn-danger:hover { opacity: 0.9; }
 
+/* ── Skeleton ────────────────────────────────────────────────── */
+@keyframes skel-shine { to { background-position: 200% center; } }
+.proj-skeleton, .proj-skeleton-inline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+.skel-title, .skel-goal, .skel-stats, .skel-body, .skel-row {
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-secondary) 25%,
+    color-mix(in srgb, var(--color-text-muted) 16%, var(--color-bg-secondary)) 50%,
+    var(--color-bg-secondary) 75%
+  );
+  background-size: 200% 100%;
+  animation: skel-shine 1.5s ease infinite;
+}
+.skel-title  { height: 2.2rem; width: 55%; border-radius: var(--radius-md); }
+.skel-goal   { height: 1rem; width: 75%; }
+.skel-stats  { height: 2rem; width: 50%; border-radius: var(--radius-md); }
+.skel-body   { height: 200px; border-radius: var(--radius-md); }
+.skel-row    { height: 2.5rem; border-radius: var(--radius-sm); }
+.skel-row--short { width: 65%; }
+
+/* ── Responsive ──────────────────────────────────────────────── */
 @media (max-width: 900px) {
-  .project-body {
-    grid-template-columns: 1fr;
-  }
-  .kanban {
-    grid-template-columns: 1fr;
-  }
-}
-
-.empty-msg {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-  text-align: center;
-  padding: 1rem;
+  .project-body { grid-template-columns: 1fr; }
+  .edit-panel { position: static; }
+  .kanban { grid-template-columns: 1fr; }
 }
 </style>