client/src/App.css

@@ -27,16 +27,16 @@
   gap: 0.75rem;
   color: var(--text-primary);
   font-weight: 700;
-  font-size: 2.25rem; /* +30% from 1.5rem */
+  font-size: 2.25rem;
   text-decoration: none;
   transition: var(--transition);
 }
 
 .nav-brand:hover {
-  color: var(--primary-light);
+  opacity: 0.9;
 }
 
-/* Square logo: doubled from 2.5rem to 5rem */
+/* Square logo */
 .brand-logo {
   width: 5rem;
   height: 5rem;
@@ -45,7 +45,6 @@
   display: block;
   border-radius: 4px;
   flex-shrink: 0;
-  /* Subtle diffuse black drop shadow for depth */
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45))
           drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30));
 }
@@ -58,7 +57,7 @@
   height: 5rem;
   background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
   border-radius: var(--radius);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 4px 12px rgba(194, 134, 42, 0.3);
 }
 
 /* Title gradient: medium-dark gold → rusty dark red-gold */
@@ -68,7 +67,6 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  /* text-shadow doesn't work with background-clip:text — use filter instead */
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.50))
           drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30));
 }
@@ -76,6 +74,7 @@
 .nav-links {
   display: flex;
   gap: 0.5rem;
+  align-items: center;
 }
 
 .nav-link {
@@ -99,9 +98,22 @@
 }
 
 .nav-link.active {
-  background: var(--primary);
-  color: white;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  background: linear-gradient(135deg, rgba(201,148,10,0.2) 0%, rgba(139,37,0,0.2) 100%);
+  color: var(--primary-light);
+  border-color: rgba(194, 134, 42, 0.4);
+  box-shadow: 0 2px 8px rgba(194, 134, 42, 0.15);
+}
+
+/* Settings link — slightly different treatment, sits at end */
+.nav-link-settings {
+  margin-left: 0.5rem;
+  padding: 0.5rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+}
+
+.nav-link-settings:hover {
+  color: var(--primary-light);
 }
 
 .main-content {
@@ -114,10 +126,9 @@
   }
   
   .nav-brand {
-    font-size: 1.625rem; /* +30% from 1.25rem */
+    font-size: 1.625rem;
   }
   
-  /* Scale square logo down on mobile (doubled from 2rem) */
   .brand-logo {
     width: 4rem;
     height: 4rem;