style: update button styles and add bevel-box class for improved UI

frontend/vue-app/src/assets/colors.css

@@ -4,6 +4,7 @@
   --accent: #cbd5e1;
   --header-bg: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
   --button-bg: #fff;
+  --button-bg-inactive: #f3f3f3f3;
   --button-active-bg: var(--secondary);
   --button-hover-bg: #e6eaff;
   --button-text: var(--primary);

frontend/vue-app/src/layout/ParentLayout.vue

@@ -260,11 +260,11 @@ onUnmounted(() => {
   height: 100%;
   display: flex;
   align-items: center;
-  background: var(--button-bg);
+  background: var(--button-bg-inactive, #f3f3f3);
   color: var(--button-text);
   border: 0;
   border-radius: 8px 8px 0 0;
-  padding: 0.6rem 1.2rem;
+  padding: 5px 10px;
   font-weight: 600;
   cursor: pointer;
   transition:
@@ -276,13 +276,16 @@ onUnmounted(() => {
 }
 
 .view-selector button.active {
-  background: var(--button-active-bg);
   color: var(--button-active-text);
+  background: rgba(255, 255, 255, 1);
+  box-shadow:
+    inset 3px 3px 0 rgba(255, 255, 255, 0.8),
+    inset -3px -3px 0 rgba(0, 0, 0, 0.2);
 }
 
 .nav-icon {
-  width: 24px;
+  width: 40px;
-  height: 24px;
+  height: 40px;
   object-fit: contain;
   opacity: 0.55;
   transition: opacity 0.18s;
@@ -349,4 +352,11 @@ onUnmounted(() => {
   user-select: none;
   font-family: monospace;
 }
+
+.bevel-box {
+  background: #ccc;
+  box-shadow:
+    inset 2px 2px 0 rgba(255, 255, 255, 0.8),
+    inset -2px -2px 0 rgba(0, 0, 0, 0.2);
+}
 </style>