From 3c8868c899315c855a56423a0db95f39d664af33 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 17 Feb 2026 21:56:48 +0200
Subject: [PATCH] style: bump border-radius globally - rounded to rounded-lg,
 rounded-lg to rounded-xl

---
 src/components/NavRail.vue           |  2 +-
 src/components/ToastNotification.vue |  2 +-
 src/views/Dashboard.vue              |  2 +-
 src/views/Entries.vue                | 32 ++++++++++++++--------------
 src/views/Invoices.vue               | 30 +++++++++++++-------------
 src/views/Projects.vue               | 30 +++++++++++++-------------
 src/views/Reports.vue                | 10 ++++-----
 src/views/Settings.vue               | 22 +++++++++----------
 src/views/Timer.vue                  |  8 +++----
 9 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/src/components/NavRail.vue b/src/components/NavRail.vue
index 5f588b3..8a60f03 100644
--- a/src/components/NavRail.vue
+++ b/src/components/NavRail.vue
@@ -56,7 +56,7 @@ function navigate(path: string) {
         <component :is="item.icon" class="w-[18px] h-[18px]" :stroke-width="1.5" />
 
         <!-- Tooltip -->
-        <div class="absolute left-full ml-2 px-2 py-1 bg-bg-elevated border border-border-subtle rounded text-[0.6875rem] text-text-primary whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-150 z-50">
+        <div class="absolute left-full ml-2 px-2 py-1 bg-bg-elevated border border-border-subtle rounded-lg text-[0.6875rem] text-text-primary whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-150 z-50">
           <div class="absolute -left-1 top-1/2 -translate-y-1/2 w-0 h-0 border-y-4 border-y-transparent border-r-4" style="border-right-color: var(--color-bg-elevated)"></div>
           {{ item.name }}
         </div>
diff --git a/src/components/ToastNotification.vue b/src/components/ToastNotification.vue
index d856fdd..9598051 100644
--- a/src/components/ToastNotification.vue
+++ b/src/components/ToastNotification.vue
@@ -11,7 +11,7 @@ const toastStore = useToastStore()
       v-for="toast in toastStore.toasts"
       :key="toast.id"
       @click="toastStore.removeToast(toast.id)"
-      class="w-80 flex items-center gap-3 px-4 py-3 bg-bg-surface border border-border-subtle rounded shadow-lg cursor-pointer pointer-events-auto border-l-[3px]"
+      class="w-80 flex items-center gap-3 px-4 py-3 bg-bg-surface border border-border-subtle rounded-lg shadow-lg cursor-pointer pointer-events-auto border-l-[3px]"
       :class="[
         toast.exiting ? 'animate-toast-exit' : 'animate-toast-enter',
         toast.type === 'success' ? 'border-l-status-running' : '',
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 9e253ce..48fb250 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -5,7 +5,7 @@
       <Clock class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
       <p class="text-sm text-text-secondary mt-4">Start tracking your time</p>
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Your dashboard will come alive with stats, charts, and recent activity once you start logging hours.</p>
-      <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors">
+      <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors">
         Go to Timer
       </router-link>
     </div>
diff --git a/src/views/Entries.vue b/src/views/Entries.vue
index 8fec8ce..01d3307 100644
--- a/src/views/Entries.vue
+++ b/src/views/Entries.vue
@@ -3,13 +3,13 @@
     <h1 class="text-[1.5rem] font-medium text-text-primary mb-6">Entries</h1>
 
     <!-- Filters -->
-    <div class="bg-bg-surface rounded p-4 mb-6 flex flex-wrap items-end gap-4">
+    <div class="bg-bg-surface rounded-lg p-4 mb-6 flex flex-wrap items-end gap-4">
       <div>
         <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date</label>
         <input
           v-model="startDate"
           type="date"
-          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
         />
       </div>
       <div>
@@ -17,14 +17,14 @@
         <input
           v-model="endDate"
           type="date"
-          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
         />
       </div>
       <div>
         <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project</label>
         <select
           v-model="filterProject"
-          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
         >
           <option :value="null">All Projects</option>
           <option
@@ -38,7 +38,7 @@
       </div>
       <button
         @click="applyFilters"
-        class="px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors duration-150"
+        class="px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
       >
         Apply
       </button>
@@ -121,7 +121,7 @@
       <ListIcon class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
       <p class="text-sm text-text-secondary mt-4">No entries found</p>
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Time entries will appear here as you track your work. Try adjusting the date range if you have existing entries.</p>
-      <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors">
+      <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors">
         Go to Timer
       </router-link>
     </div>
@@ -132,7 +132,7 @@
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
       @click.self="closeEditDialog"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter">
         <h2 class="text-[1rem] font-semibold text-text-primary mb-4">Edit Entry</h2>
 
         <form @submit.prevent="handleEdit" class="space-y-4">
@@ -142,7 +142,7 @@
             <select
               v-model="editForm.project_id"
               required
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             >
               <option
                 v-for="project in projectsStore.projects"
@@ -160,7 +160,7 @@
             <input
               v-model="editForm.description"
               type="text"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
               placeholder="What did you work on?"
             />
           </div>
@@ -172,7 +172,7 @@
               v-model.number="durationMinutes"
               type="number"
               min="1"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
 
@@ -182,7 +182,7 @@
             <input
               v-model="editForm.start_time"
               type="datetime-local"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
 
@@ -191,13 +191,13 @@
             <button
               type="button"
               @click="closeEditDialog"
-              class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
+              class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
             >
               Cancel
             </button>
             <button
               type="submit"
-              class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150"
+              class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
             >
               Save
             </button>
@@ -212,7 +212,7 @@
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
       @click.self="cancelDelete"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
         <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Entry</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete this time entry? This action cannot be undone.
@@ -220,13 +220,13 @@
         <div class="flex justify-end gap-3">
           <button
             @click="cancelDelete"
-            class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
+            class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
           >
             Cancel
           </button>
           <button
             @click="handleDelete"
-            class="px-4 py-2 border border-status-error text-status-error font-medium rounded hover:bg-status-error/10 transition-colors duration-150"
+            class="px-4 py-2 border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
           >
             Delete
           </button>
diff --git a/src/views/Invoices.vue b/src/views/Invoices.vue
index 42b5375..217eb42 100644
--- a/src/views/Invoices.vue
+++ b/src/views/Invoices.vue
@@ -111,7 +111,7 @@
         <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Create invoices from your tracked time to bill clients.</p>
         <button
           @click="view = 'create'"
-          class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors"
+          class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors"
         >
           Create Invoice
         </button>
@@ -129,7 +129,7 @@
           <select
             v-model="createForm.client_id"
             required
-            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
           >
             <option :value="0">Select a client</option>
             <option
@@ -150,7 +150,7 @@
               v-model="createForm.date"
               type="date"
               required
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
           <div>
@@ -158,7 +158,7 @@
             <input
               v-model="createForm.due_date"
               type="date"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
         </div>
@@ -173,7 +173,7 @@
               min="0"
               max="100"
               step="0.01"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
           <div>
@@ -183,7 +183,7 @@
               type="number"
               min="0"
               step="0.01"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
         </div>
@@ -194,13 +194,13 @@
           <textarea
             v-model="createForm.notes"
             rows="3"
-            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             placeholder="Additional notes"
           ></textarea>
         </div>
 
         <!-- Calculated Total -->
-        <div class="bg-bg-inset rounded p-4">
+        <div class="bg-bg-inset rounded-lg p-4">
           <div class="flex justify-between text-[0.75rem] text-text-secondary mb-2">
             <span>Subtotal:</span>
             <span class="font-mono">${{ calculateSubtotal().toFixed(2) }}</span>
@@ -224,13 +224,13 @@
           <button
             type="button"
             @click="view = 'list'"
-            class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
+            class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
           >
             Cancel
           </button>
           <button
             type="submit"
-            class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150"
+            class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
           >
             Create Invoice
           </button>
@@ -244,7 +244,7 @@
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
       @click.self="showDetailDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto animate-modal-enter">
         <div class="flex items-start justify-between mb-6">
           <div>
             <h2 class="text-[1.5rem] font-medium text-text-primary">{{ selectedInvoice?.invoice_number }}</h2>
@@ -300,7 +300,7 @@
         <div class="flex justify-end gap-3 mt-6">
           <button
             @click="exportPDF(selectedInvoice!)"
-            class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150"
+            class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
           >
             Export PDF
           </button>
@@ -314,7 +314,7 @@
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
       @click.self="showDeleteDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
         <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Invoice</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete invoice "{{ invoiceToDelete?.invoice_number }}"? This action cannot be undone.
@@ -322,13 +322,13 @@
         <div class="flex justify-end gap-3">
           <button
             @click="showDeleteDialog = false"
-            class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
+            class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
           >
             Cancel
           </button>
           <button
             @click="handleDelete"
-            class="px-4 py-2 border border-status-error text-status-error font-medium rounded hover:bg-status-error/10 transition-colors duration-150"
+            class="px-4 py-2 border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
           >
             Delete
           </button>
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index db320e2..be601de 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -5,7 +5,7 @@
       <h1 class="text-[1.5rem] font-medium text-text-primary">Projects</h1>
       <button
         @click="openCreateDialog"
-        class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors duration-150"
+        class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
       >
         + Add
       </button>
@@ -16,10 +16,10 @@
       <div
         v-for="project in projectsStore.projects"
         :key="project.id"
-        class="group bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] hover:bg-bg-elevated transition-all duration-150 cursor-pointer"
+        class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] hover:bg-bg-elevated transition-all duration-150 cursor-pointer"
         @click="openEditDialog(project)"
       >
-        <div class="flex border-l-[2px] hover:border-l-[3px] rounded-l transition-all duration-150" :style="{ borderLeftColor: project.color }">
+        <div class="flex border-l-[2px] hover:border-l-[3px] rounded-l-lg transition-all duration-150" :style="{ borderLeftColor: project.color }">
           <div class="flex-1 p-4">
             <div class="flex items-start justify-between">
               <div>
@@ -59,7 +59,7 @@
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Projects organize your time entries and set billing rates for clients.</p>
       <button
         @click="openCreateDialog"
-        class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors"
+        class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors"
       >
         Create Project
       </button>
@@ -71,7 +71,7 @@
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
       @click.self="closeDialog"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter">
         <h2 class="text-[1rem] font-semibold text-text-primary mb-4">
           {{ editingProject ? 'Edit Project' : 'Create Project' }}
         </h2>
@@ -84,7 +84,7 @@
               v-model="formData.name"
               type="text"
               required
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
               placeholder="Project name"
             />
           </div>
@@ -94,7 +94,7 @@
             <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Client</label>
             <select
               v-model="formData.client_id"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             >
               <option :value="undefined">No client</option>
               <option
@@ -115,7 +115,7 @@
               type="number"
               min="0"
               step="0.01"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
               placeholder="0.00"
             />
           </div>
@@ -137,12 +137,12 @@
               <input
                 v-model="formData.color"
                 type="color"
-                class="w-8 h-8 rounded cursor-pointer border border-border-subtle"
+                class="w-8 h-8 rounded-lg cursor-pointer border border-border-subtle"
               />
               <input
                 v-model="formData.color"
                 type="text"
-                class="flex-1 px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+                class="flex-1 px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                 placeholder="#D97706"
               />
             </div>
@@ -153,13 +153,13 @@
             <button
               type="button"
               @click="closeDialog"
-              class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
+              class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
             >
               Cancel
             </button>
             <button
               type="submit"
-              class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150"
+              class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
             >
               {{ editingProject ? 'Update' : 'Create' }}
             </button>
@@ -174,7 +174,7 @@
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
       @click.self="cancelDelete"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
         <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Project</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete "{{ projectToDelete?.name }}"? This action cannot be undone.
@@ -182,13 +182,13 @@
         <div class="flex justify-end gap-3">
           <button
             @click="cancelDelete"
-            class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
+            class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
           >
             Cancel
           </button>
           <button
             @click="handleDelete"
-            class="px-4 py-2 border border-status-error text-status-error font-medium rounded hover:bg-status-error/10 transition-colors duration-150"
+            class="px-4 py-2 border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
           >
             Delete
           </button>
diff --git a/src/views/Reports.vue b/src/views/Reports.vue
index 1587a38..3011cd5 100644
--- a/src/views/Reports.vue
+++ b/src/views/Reports.vue
@@ -3,13 +3,13 @@
     <h1 class="text-[1.5rem] font-medium text-text-primary mb-6">Reports</h1>
 
     <!-- Date Range Selector -->
-    <div class="bg-bg-surface rounded p-4 mb-6 flex flex-wrap items-end gap-4">
+    <div class="bg-bg-surface rounded-lg p-4 mb-6 flex flex-wrap items-end gap-4">
       <div>
         <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date</label>
         <input
           v-model="startDate"
           type="date"
-          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
         />
       </div>
       <div>
@@ -17,18 +17,18 @@
         <input
           v-model="endDate"
           type="date"
-          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+          class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
         />
       </div>
       <button
         @click="fetchReport"
-        class="px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors duration-150"
+        class="px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
       >
         Generate
       </button>
       <button
         @click="exportCSV"
-        class="px-4 py-2 border border-border-visible text-text-primary text-xs rounded hover:bg-bg-elevated transition-colors duration-150"
+        class="px-4 py-2 border border-border-visible text-text-primary text-xs rounded-lg hover:bg-bg-elevated transition-colors duration-150"
       >
         Export CSV
       </button>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 7a92fea..23eff34 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -8,7 +8,7 @@
           v-for="tab in tabs"
           :key="tab.id"
           @click="activeTab = tab.id"
-          class="relative flex items-center gap-2.5 px-2.5 py-2 rounded text-[0.8125rem] transition-colors duration-150"
+          class="relative flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[0.8125rem] transition-colors duration-150"
           :class="activeTab === tab.id
             ? 'bg-bg-elevated text-text-primary'
             : 'text-text-secondary hover:bg-bg-elevated hover:text-text-primary'"
@@ -38,7 +38,7 @@
           <div class="flex items-center gap-2">
             <button
               @click="decreaseZoom"
-              class="w-8 h-8 flex items-center justify-center border border-border-visible rounded text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              class="w-8 h-8 flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
               :disabled="zoomLevel <= 80"
             >
               <Minus class="w-3.5 h-3.5" />
@@ -46,7 +46,7 @@
             <span class="w-12 text-center text-sm font-mono text-text-primary">{{ zoomLevel }}%</span>
             <button
               @click="increaseZoom"
-              class="w-8 h-8 flex items-center justify-center border border-border-visible rounded text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              class="w-8 h-8 flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
               :disabled="zoomLevel >= 150"
             >
               <Plus class="w-3.5 h-3.5" />
@@ -96,7 +96,7 @@
               type="number"
               min="0"
               max="120"
-              class="w-20 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary text-right font-mono focus:outline-none focus:border-border-visible"
+              class="w-20 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-right font-mono focus:outline-none focus:border-border-visible"
               @change="saveSettings"
             />
           </div>
@@ -119,7 +119,7 @@
               type="number"
               min="0"
               step="0.01"
-              class="w-24 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary text-right font-mono focus:outline-none focus:border-border-visible"
+              class="w-24 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-right font-mono focus:outline-none focus:border-border-visible"
               placeholder="0.00"
               @change="saveSettings"
             />
@@ -140,14 +140,14 @@
             </div>
             <button
               @click="exportData"
-              class="px-4 py-1.5 border border-border-visible text-text-primary text-[0.8125rem] rounded hover:bg-bg-elevated transition-colors duration-150"
+              class="px-4 py-1.5 border border-border-visible text-text-primary text-[0.8125rem] rounded-lg hover:bg-bg-elevated transition-colors duration-150"
             >
               Export
             </button>
           </div>
 
           <!-- Danger Zone -->
-          <div class="mt-8 rounded-lg border border-status-error/20 p-5">
+          <div class="mt-8 rounded-xl border border-status-error/20 p-5">
             <h3 class="text-xs text-status-error uppercase tracking-[0.08em] font-medium mb-4">Danger Zone</h3>
             <div class="flex items-center justify-between">
               <div>
@@ -156,7 +156,7 @@
               </div>
               <button
                 @click="showClearDataDialog = true"
-                class="px-4 py-1.5 border border-status-error text-status-error text-[0.8125rem] font-medium rounded hover:bg-status-error/10 transition-colors duration-150"
+                class="px-4 py-1.5 border border-status-error text-status-error text-[0.8125rem] font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
               >
                 Clear Data
               </button>
@@ -172,7 +172,7 @@
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
       @click.self="showClearDataDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
         <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Clear All Data</h2>
         <p class="text-[0.75rem] text-text-secondary mb-4">
           Are you sure? This action cannot be undone.
@@ -183,13 +183,13 @@
         <div class="flex justify-end gap-3">
           <button
             @click="showClearDataDialog = false"
-            class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
+            class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
           >
             Cancel
           </button>
           <button
             @click="clearAllData"
-            class="px-4 py-2 bg-status-error text-white font-medium rounded hover:bg-status-error/80 transition-colors duration-150"
+            class="px-4 py-2 bg-status-error text-white font-medium rounded-lg hover:bg-status-error/80 transition-colors duration-150"
           >
             Delete Everything
           </button>
diff --git a/src/views/Timer.vue b/src/views/Timer.vue
index db2b6aa..b1abbd1 100644
--- a/src/views/Timer.vue
+++ b/src/views/Timer.vue
@@ -12,7 +12,7 @@
 
       <button
         @click="toggleTimer"
-        class="px-10 py-3 text-sm font-medium rounded transition-colors duration-150"
+        class="px-10 py-3 text-sm font-medium rounded-lg transition-colors duration-150"
         :class="timerStore.isRunning
           ? 'bg-status-error text-white hover:bg-status-error/80'
           : 'bg-accent text-bg-base hover:bg-accent-hover'"
@@ -29,7 +29,7 @@
           <select
             v-model="selectedProject"
             :disabled="timerStore.isRunning"
-            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
+            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
           >
             <option :value="null">Select project</option>
             <option
@@ -46,7 +46,7 @@
           <select
             v-model="selectedTask"
             :disabled="timerStore.isRunning || !selectedProject"
-            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
+            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
           >
             <option :value="null">Select task</option>
             <option
@@ -65,7 +65,7 @@
           v-model="description"
           type="text"
           :disabled="timerStore.isRunning"
-          class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary placeholder-text-tertiary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
+          class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary placeholder-text-tertiary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
           placeholder="What are you working on?"
         />
       </div>