feat: implement timer screens and navigation

client/src/views/TimersList/TimersList.css

@@ -31,6 +31,44 @@
   margin: 0 auto;
 }
 
+.confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  z-index: 1000;
+}
+
+.confirm-card {
+  width: 100%;
+  max-width: 380px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
+  padding: 18px;
+}
+
+.confirm-card h3 {
+  font-size: 18px;
+  color: #212121;
+  margin-bottom: 8px;
+}
+
+.confirm-card p {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 16px;
+}
+
+.confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
 .loading,
 .error-message,
 .empty-state {
@@ -179,6 +217,27 @@
   font-weight: 400;
 }
 
+.add-timer-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 48px;
+  margin-bottom: 12px;
+  border: 2px solid #1976d2;
+  border-radius: 999px;
+  background-color: transparent;
+  color: #1976d2;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.add-timer-button:hover {
+  background-color: rgba(25, 118, 210, 0.10);
+}
+
 .card-actions {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -191,8 +250,8 @@
   justify-content: center;
   gap: 6px;
   padding: 10px 12px;
-  border: none;
-  border-radius: 4px;
+  border: 2px solid transparent;
+  border-radius: 999px;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
@@ -207,43 +266,46 @@
 }
 
 .btn-primary {
-  background-color: #1976d2;
-  color: #ffffff;
+  background-color: transparent;
+  color: #4caf50;
+  border: 2px solid #4caf50;
 }
 
 .btn-primary:hover {
-  background-color: #1565c0;
-  box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
+  background-color: rgba(76, 175, 80, 0.10);
+  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.18);
 }
 
 .btn-primary:active {
-  background-color: #0d47a1;
+  background-color: rgba(76, 175, 80, 0.20);
 }
 
 .btn-secondary {
-  background-color: #e0e0e0;
-  color: #212121;
+  background-color: transparent;
+  color: #f9a825;
+  border: 2px solid #f9a825;
 }
 
 .btn-secondary:hover {
-  background-color: #d0d0d0;
+  background-color: rgba(249, 168, 37, 0.10);
 }
 
 .btn-secondary:active {
-  background-color: #c0c0c0;
+  background-color: rgba(249, 168, 37, 0.20);
 }
 
 .btn-danger {
-  background-color: #fff3e0;
-  color: #e65100;
+  background-color: transparent;
+  color: #f44336;
+  border: 2px solid #f44336;
 }
 
 .btn-danger:hover {
-  background-color: #ffe0b2;
+  background-color: rgba(244, 67, 54, 0.10);
 }
 
 .btn-danger:active {
-  background-color: #ffcc80;
+  background-color: rgba(244, 67, 54, 0.20);
 }
 
 @media (max-width: 600px) {