feat: refine global tokens, nav active state, section title

cmd/web-ui/static/app.js

@@ -107,6 +107,7 @@
     } else {
       app.innerHTML = '<p>Page not found</p>';
     }
+    updateActiveNav();
   }
 
   function navigate(path) {
@@ -114,6 +115,17 @@
     route();
   }
 
+  function updateActiveNav() {
+    const path = window.location.pathname;
+    document.querySelectorAll('header nav a').forEach(a => {
+      const href = a.getAttribute('href');
+      const isActive = href === '/'
+        ? path === '/'
+        : path.startsWith(href);
+      a.classList.toggle('active', isActive);
+    });
+  }
+
   window.addEventListener('popstate', route);
 
   async function api(path) {

cmd/web-ui/static/style.css

@@ -5,18 +5,18 @@
 :root {
   --bg:          #07090f;
   --surface:     #0d1117;
-  --surface-2:   #121922;
+  --surface-2:   #111820;
   --card:        rgba(13, 20, 32, 0.85);
-  --border:      #1c2637;
-  --border-soft: rgba(28, 38, 55, 0.6);
+  --border:      rgba(28, 38, 55, 0.7);
+  --border-soft: rgba(28, 38, 55, 0.4);
 
-  --text:        #c8d3e0;
-  --text-dim:    #4e6070;
-  --text-bright: #e8eef4;
+  --text:        #b8c5d4;
+  --text-dim:    #465a6e;
+  --text-bright: #e4edf5;
 
   --accent:      #22d3ee;
-  --accent-dim:  rgba(34, 211, 238, 0.08);
-  --accent-glow: rgba(34, 211, 238, 0.2);
+  --accent-dim:  rgba(34, 211, 238, 0.07);
+  --accent-glow: rgba(34, 211, 238, 0.18);
 
   --success:     #34d399;
   --error:       #f87171;
@@ -27,9 +27,9 @@
   --font-body:    'Outfit', sans-serif;
   --font-mono:    'Fira Code', monospace;
 
-  --radius:    8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --radius:    6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
 }
 
 /* ── Reset ─────────────────────────────────────────────────── */
@@ -122,8 +122,9 @@ header nav a {
   text-decoration: none;
   padding: 0.375rem 0.875rem;
   border-radius: var(--radius);
-  letter-spacing: 0.04em;
+  letter-spacing: 0.03em;
   transition: color 0.15s, background 0.15s;
+  position: relative;
 }
 
 header nav a:hover {
@@ -131,11 +132,26 @@ header nav a:hover {
   background: var(--surface-2);
 }
 
+header nav a.active {
+  color: var(--text-bright);
+}
+
+header nav a.active::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0.875rem;
+  right: 0.875rem;
+  height: 2px;
+  background: var(--accent);
+  border-radius: 1px;
+}
+
 /* ── Main ──────────────────────────────────────────────────── */
 main {
   max-width: 1240px;
   margin: 0 auto;
-  padding: 2.5rem 2rem;
+  padding: 2rem;
 }
 
 /* Page entry animation */
@@ -207,7 +223,6 @@ main > * {
   font-weight: 700;
   color: var(--text-bright);
   margin-bottom: 1rem;
-  letter-spacing: 0.01em;
   display: flex;
   align-items: center;
   gap: 0.6rem;