Made changes to CSS and merged together.

web/vue-app/src/assets/global.css

@@ -173,4 +173,11 @@
   --toggle-btn-bad-color: #fff;
   --toggle-btn-bad-shadow: #e53e3e33;
   --toggle-btn-bad-border: #e53e3e;
+
+  /*TaskView and RewardView styles*/
+  --create-btn-bg: #fff;
+  --create-btn-color: #2563eb;
+  --create-btn-border: #2563eb;
+  --create-btn-hover-bg: #2563eb;
+  --create-btn-hover-color: #fff;
 }

web/vue-app/src/assets/view-shared.css

@@ -94,6 +94,49 @@
   font-size: 1rem;
 }
 
+.no-message {
+  margin: 2rem 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+  text-align: center;
+  color: #fdfdfd;
+  line-height: 1.5;
+}
+.sub-message {
+  margin-top: 0.3rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #b5ccff;
+}
+
+/* Floating Action Button (FAB) */
+.fab {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  background: var(--fab-bg);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  font-size: 24px;
+  z-index: 1300;
+}
+
+.fab:hover {
+  background: var(--fab-hover-bg);
+}
+
+.fab:active {
+  background: var(--fab-active-bg);
+}
+
 /* Responsive Adjustments */
 @media (max-width: 900px) {
   .layout {