helixevo 0.2.18 → 0.2.20

package/dashboard/app/globals.css

@@ -1,48 +1,60 @@
+/* ════════════════════════════════════════════════════════════════
+   HelixEvo Dashboard — Premium Warm Theme
+   Inspired by modern fintech/data platforms
+   ════════════════════════════════════════════════════════════════ */
+
 :root {
-  --bg: #f8f9fb;
+  /* ─── Backgrounds (warm palette) ─── */
+  --bg: #f4f2ee;
   --bg-card: #ffffff;
-  --bg-section: #f1f3f8;
-  --bg-hover: #eef0f6;
-  --bg-input: #f8f9fb;
-  --bg-sidebar: #fafbfd;
+  --bg-section: #eceae5;
+  --bg-hover: #e6e3dd;
+  --bg-input: #f4f2ee;
+  --bg-sidebar: #f9f8f5;
 
-  --border: #e4e6ee;
-  --border-focus: #c4c8d8;
-  --border-subtle: #eef0f4;
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02);
-  --shadow-md: 0 2px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
-  --shadow-lg: 0 4px 20px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.03);
-  --shadow-xl: 0 8px 32px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
+  /* ─── Borders & Elevation ─── */
+  --border: #ddd9d1;
+  --border-focus: #c5c0b6;
+  --border-subtle: #e8e5de;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.03);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.03);
+  --shadow-xl: 0 16px 48px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.04);
 
-  --text: #1a1d2e;
-  --text-secondary: #4a4f6a;
-  --text-dim: #8b90a8;
-  --text-muted: #b0b5c8;
+  /* ─── Typography ─── */
+  --text: #1a1a17;
+  --text-secondary: #3d3d36;
+  --text-dim: #6b6b60;
+  --text-muted: #9c9c90;
 
-  --purple: #7c3aed;
+  /* ─── Accent Colors ─── */
+  --purple: #6d28d9;
   --purple-light: #f3eefe;
-  --purple-border: #d4bffd;
-  --green: #059669;
-  --green-light: #ecfdf5;
-  --green-border: #a7f3d0;
-  --red: #dc2626;
-  --red-light: #fef2f2;
-  --red-border: #fca5a5;
-  --yellow: #d97706;
-  --yellow-light: #fffbeb;
-  --yellow-border: #fde68a;
+  --purple-border: #c4b5fd;
+  --green: #0d7c5f;
+  --green-light: #ecf7f3;
+  --green-border: #a7d8c8;
+  --red: #c0392b;
+  --red-light: #fdf0ee;
+  --red-border: #e8a89e;
+  --yellow: #b8860b;
+  --yellow-light: #fdf6e3;
+  --yellow-border: #e0cc8a;
   --blue: #2563eb;
   --blue-light: #eff6ff;
   --blue-border: #bfdbfe;
+  --teal: #0d7c5f;
+  --teal-light: #e8f5f0;
 
+  /* ─── Radius & Type ─── */
   --radius: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
-
-  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
-  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
 }
 
+/* ─── Reset ─── */
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
@@ -50,24 +62,29 @@ body {
   color: var(--text);
   font-family: var(--font);
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-size: 14px;
   line-height: 1.6;
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
 }
 
-::selection { background: var(--purple-light); color: var(--purple); }
-a { color: var(--purple); text-decoration: none; }
-a:hover { text-decoration: underline; }
+::selection { background: var(--teal-light); color: var(--teal); }
+a { color: var(--teal); text-decoration: none; transition: color 0.15s; }
+a:hover { color: #0a6149; text-decoration: none; }
 
 code {
   font-family: var(--font-mono);
   font-size: 12px;
-  padding: 2px 6px;
+  padding: 2px 7px;
   background: var(--bg-section);
-  border-radius: 4px;
+  border-radius: 5px;
   color: var(--text-secondary);
+  font-feature-settings: normal;
 }
 
-/* ─── Sidebar ─── */
+/* ════════════════════════════════════════════════════════════════
+   SIDEBAR — Warm, light, refined
+   ════════════════════════════════════════════════════════════════ */
 .sidebar {
   width: 220px;
   background: var(--bg-sidebar);
@@ -85,33 +102,34 @@ code {
 .sidebar-logo {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 20px 18px 16px;
+  gap: 11px;
+  padding: 22px 18px 18px;
   border-bottom: 1px solid var(--border);
 }
 
 .logo-icon {
-  width: 32px;
-  height: 32px;
+  width: 34px;
+  height: 34px;
   border-radius: 10px;
-  background: linear-gradient(135deg, #7c3aed, #4f46e5);
+  background: linear-gradient(135deg, #0d7c5f, #2563eb);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   flex-shrink: 0;
+  box-shadow: 0 2px 10px rgba(13,124,95,0.25);
 }
 
 .nav-item {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 9px 12px;
+  padding: 9px 14px;
   border-radius: 8px;
   color: var(--text-dim);
   font-size: 13px;
   font-weight: 500;
-  margin-bottom: 2px;
+  margin: 1px 6px;
   text-decoration: none;
   transition: all 0.15s ease;
 }
@@ -133,40 +151,45 @@ code {
 
 .main-content {
   flex: 1;
-  padding: 32px 40px;
-  max-width: 1280px;
+  padding: 36px 44px;
+  max-width: 1320px;
   min-height: 100vh;
 }
 
-/* ─── Page Header ─── */
+/* ════════════════════════════════════════════════════════════════
+   PAGE HEADERS
+   ════════════════════════════════════════════════════════════════ */
 .page-header { margin-bottom: 28px; }
 .page-title {
-  font-size: 24px;
-  font-weight: 700;
-  letter-spacing: -0.4px;
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.6px;
   color: var(--text);
-  line-height: 1.2;
+  line-height: 1.15;
 }
 .page-desc {
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-dim);
   margin-top: 6px;
   line-height: 1.5;
+  font-weight: 400;
 }
 
-/* ─── Cards ─── */
+/* ════════════════════════════════════════════════════════════════
+   CARDS
+   ════════════════════════════════════════════════════════════════ */
 .card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
-  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+  transition: box-shadow 0.25s ease, border-color 0.25s ease;
 }
 .card:hover {
   box-shadow: var(--shadow-md);
   border-color: var(--border-focus);
 }
-.card-body { padding: 20px; }
+.card-body { padding: 22px; }
 
 .card-header-label {
   font-size: 10px;
@@ -174,10 +197,12 @@ code {
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 1.5px;
-  margin-bottom: 14px;
+  margin-bottom: 16px;
 }
 
-/* ─── Badges ─── */
+/* ════════════════════════════════════════════════════════════════
+   BADGES
+   ════════════════════════════════════════════════════════════════ */
 .badge {
   display: inline-flex;
   align-items: center;
@@ -185,7 +210,7 @@ code {
   font-size: 10px;
   font-weight: 600;
   padding: 2px 8px;
-  border-radius: 6px;
+  border-radius: 5px;
   white-space: nowrap;
   letter-spacing: 0.2px;
 }
@@ -196,32 +221,38 @@ code {
 .badge-blue { background: var(--blue-light); color: var(--blue); }
 .badge-gray { background: var(--bg-section); color: var(--text-dim); }
 
-/* ─── Score Bars ─── */
+/* ════════════════════════════════════════════════════════════════
+   SCORE BARS
+   ════════════════════════════════════════════════════════════════ */
 .score-track {
-  height: 4px;
+  height: 5px;
   background: var(--bg-section);
-  border-radius: 2px;
+  border-radius: 3px;
   overflow: hidden;
   flex: 1;
 }
 .score-fill {
   height: 100%;
-  border-radius: 2px;
-  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+  border-radius: 3px;
+  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-/* ─── Stats ─── */
+/* ════════════════════════════════════════════════════════════════
+   STATS
+   ════════════════════════════════════════════════════════════════ */
 .stat-value {
-  font-size: 28px;
+  font-size: 32px;
   font-weight: 800;
   line-height: 1;
-  letter-spacing: -0.5px;
+  letter-spacing: -1px;
+  font-variant-numeric: tabular-nums;
 }
 .stat-label {
   font-size: 11px;
   color: var(--text-dim);
-  margin-top: 4px;
+  margin-top: 6px;
   font-weight: 500;
+  letter-spacing: 0.1px;
 }
 
 .section-label {
@@ -236,7 +267,9 @@ code {
   gap: 8px;
 }
 
-/* ─── Sub-View Tab Bar ─── */
+/* ════════════════════════════════════════════════════════════════
+   TAB BAR
+   ════════════════════════════════════════════════════════════════ */
 .tab-bar {
   display: inline-flex;
   background: var(--bg-section);
@@ -246,7 +279,7 @@ code {
   margin-bottom: 24px;
 }
 .tab-item {
-  padding: 7px 16px;
+  padding: 7px 18px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 500;
@@ -260,7 +293,7 @@ code {
 }
 .tab-item:hover {
   color: var(--text-secondary);
-  background: rgba(255,255,255,0.5);
+  background: rgba(255,255,255,0.6);
 }
 .tab-item.active {
   background: var(--bg-card);
@@ -269,18 +302,20 @@ code {
   box-shadow: var(--shadow-sm);
 }
 
-/* ─── Layer Sections ─── */
+/* ════════════════════════════════════════════════════════════════
+   LAYER SECTIONS (Network page)
+   ════════════════════════════════════════════════════════════════ */
 .layer-section {
   border-radius: var(--radius-xl);
-  padding: 20px;
+  padding: 22px;
   margin-bottom: 16px;
 }
 .layer-generalized {
-  background: linear-gradient(135deg, #faf5ff, #f3e8ff);
+  background: linear-gradient(135deg, #faf5ff, #ede9fe);
   border: 1px solid var(--purple-border);
 }
 .layer-evolved {
-  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
+  background: linear-gradient(135deg, #ecf7f3, #d1f0e5);
   border: 1px solid var(--green-border);
 }
 .layer-original {
@@ -288,11 +323,13 @@ code {
   border: 1px solid var(--border);
 }
 .layer-project {
-  background: linear-gradient(135deg, #fffbeb, #fef3c7);
+  background: linear-gradient(135deg, #fdf6e3, #faefc7);
   border: 1px solid var(--yellow-border);
 }
 
-/* ─── Skill Card ─── */
+/* ════════════════════════════════════════════════════════════════
+   SKILL CARDS
+   ════════════════════════════════════════════════════════════════ */
 .skill-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
@@ -308,11 +345,11 @@ code {
   transform: translateY(-1px);
 }
 .skill-card.selected {
-  border-color: var(--purple);
-  box-shadow: 0 0 0 2px var(--purple-light), var(--shadow-md);
+  border-color: var(--teal);
+  box-shadow: 0 0 0 2px var(--teal-light), var(--shadow-md);
 }
 
-/* ─── Flow Arrow Labels ─── */
+/* ─── Flow Labels ─── */
 .flow-label {
   font-size: 10px;
   font-weight: 500;
@@ -331,39 +368,41 @@ code {
   letter-spacing: 0.5px;
 }
 
-/* ─── Timeline ─── */
+/* ════════════════════════════════════════════════════════════════
+   TIMELINE
+   ════════════════════════════════════════════════════════════════ */
 .timeline-item {
   position: relative;
-  padding-left: 22px;
-  padding-bottom: 16px;
+  padding-left: 24px;
+  padding-bottom: 18px;
   border-left: 2px solid var(--border);
-  margin-left: 5px;
+  margin-left: 6px;
 }
 .timeline-item:last-child { border-left-color: transparent; }
 .timeline-dot {
   position: absolute;
-  left: -6px;
+  left: -7px;
   top: 3px;
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   border: 2px solid var(--bg);
+  box-shadow: 0 0 0 2px var(--border);
 }
 
-/* ─── Detail Panel ─── */
 .detail-panel {
   background: var(--bg-card);
   border-left: 1px solid var(--border);
-  box-shadow: -4px 0 20px rgba(0,0,0,0.04);
-  width: 400px;
+  box-shadow: -4px 0 24px rgba(0,0,0,0.06);
+  width: 420px;
   height: 100%;
   overflow-y: auto;
-  padding: 24px;
-  animation: slideIn 0.2s ease;
+  padding: 28px;
+  animation: slideIn 0.25s ease;
 }
 
 @keyframes slideIn {
-  from { transform: translateX(20px); opacity: 0; }
+  from { transform: translateX(24px); opacity: 0; }
   to { transform: translateX(0); opacity: 1; }
 }
 
@@ -373,46 +412,46 @@ code {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 48px 24px;
+  padding: 56px 24px;
   text-align: center;
 }
 .empty-state-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
   background: var(--bg-section);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 14px;
+  margin-bottom: 16px;
   color: var(--text-muted);
 }
 .empty-state-title {
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: 700;
   color: var(--text);
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 }
 .empty-state-desc {
   font-size: 13px;
   color: var(--text-dim);
   max-width: 360px;
-  line-height: 1.5;
+  line-height: 1.55;
 }
 
-/* ─── Stat Grid ─── */
+/* ═══ Stat Cards ═══ */
 .stat-grid {
   display: grid;
-  gap: 12px;
+  gap: 14px;
   margin-bottom: 28px;
 }
 .stat-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  padding: 18px 20px;
+  padding: 20px 22px;
   box-shadow: var(--shadow-sm);
-  transition: all 0.2s ease;
+  transition: all 0.25s ease;
 }
 .stat-card:hover {
   box-shadow: var(--shadow-md);
@@ -420,7 +459,7 @@ code {
 }
 
 /* ─── React Flow Overrides ─── */
-.react-flow__background { opacity: 0.4; }
+.react-flow__background { opacity: 0.3; }
 .react-flow__controls {
   box-shadow: var(--shadow-md) !important;
   border: 1px solid var(--border) !important;
@@ -435,7 +474,6 @@ code {
   background: var(--bg-hover) !important;
 }
 
-/* ─── View Toggle (for Graph sub-view) ─── */
 .view-header {
   display: flex;
   justify-content: space-between;
@@ -454,26 +492,26 @@ code {
   gap: 6px;
   font-size: 12px;
   color: var(--text-dim);
-  padding: 4px 10px;
+  padding: 5px 12px;
   background: var(--bg-section);
   border-radius: 6px;
+  font-weight: 500;
 }
 
-/* ─── Proposal Card ─── */
+/* ═══ Proposal Card ═══ */
 .proposal-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
-  margin-bottom: 8px;
-  transition: all 0.15s ease;
+  margin-bottom: 10px;
+  transition: all 0.2s ease;
 }
 .proposal-card:hover {
   box-shadow: var(--shadow-sm);
   border-color: var(--border-focus);
 }
 
-/* ─── Score Pill ─── */
 .score-pill {
   display: inline-flex;
   align-items: center;
@@ -481,29 +519,29 @@ code {
   font-size: 11px;
   font-weight: 600;
   padding: 3px 8px;
-  border-radius: 6px;
+  border-radius: 5px;
   background: var(--bg-section);
 }
 
-/* ─── Grid utilities ─── */
+/* ════════════════════════════════════════════════════════════════
+   GRID UTILITIES
+   ════════════════════════════════════════════════════════════════ */
 .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
-.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
-.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
-.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
-.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
+.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
+.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
 
 /* ════════════════════════════════════════════════════════════════
    GUIDE PAGE
    ════════════════════════════════════════════════════════════════ */
-
 .guide-layout {
   display: flex;
   gap: 0;
-  margin: -32px -40px;
+  margin: -36px -44px;
   min-height: 100vh;
 }
 
-/* ─── Sidebar TOC ─── */
 .guide-toc {
   width: 220px;
   flex-shrink: 0;
@@ -540,7 +578,7 @@ code {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 7px 20px;
+  padding: 8px 20px;
   font-size: 12.5px;
   font-weight: 500;
   color: var(--text-dim);
@@ -554,9 +592,9 @@ code {
   text-decoration: none;
 }
 .guide-toc-item.active {
-  color: var(--purple);
-  border-left-color: var(--purple);
-  background: var(--purple-light);
+  color: var(--teal);
+  border-left-color: var(--teal);
+  background: var(--teal-light);
   font-weight: 600;
 }
 .guide-toc-icon {
@@ -568,17 +606,15 @@ code {
 }
 .guide-toc-item.active .guide-toc-icon { opacity: 1; }
 
-/* ─── Content area ─── */
 .guide-content {
   flex: 1;
   max-width: 860px;
-  padding: 0 48px 80px;
+  padding: 0 56px 80px;
   margin: 0 auto;
 }
 
-/* ─── Hero ─── */
 .guide-hero {
-  padding: 48px 0 40px;
+  padding: 56px 0 44px;
   border-bottom: 1px solid var(--border);
   margin-bottom: 48px;
 }
@@ -588,22 +624,22 @@ code {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
-  color: var(--purple);
-  background: var(--purple-light);
-  padding: 4px 12px;
+  color: var(--teal);
+  background: var(--teal-light);
+  padding: 4px 14px;
   border-radius: 20px;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
 }
 .guide-hero-title {
-  font-size: 36px;
+  font-size: 40px;
   font-weight: 800;
-  letter-spacing: -1px;
+  letter-spacing: -1.2px;
   color: var(--text);
-  line-height: 1.15;
-  margin-bottom: 12px;
+  line-height: 1.1;
+  margin-bottom: 14px;
 }
 .guide-hero-desc {
-  font-size: 15px;
+  font-size: 16px;
   color: var(--text-dim);
   line-height: 1.7;
   max-width: 640px;
@@ -611,17 +647,16 @@ code {
 .guide-hero-features {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-  margin-top: 32px;
+  gap: 14px;
+  margin-top: 36px;
 }
 
-/* ─── Feature Cards ─── */
 .guide-feature-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  padding: 20px;
-  transition: all 0.2s ease;
+  padding: 22px;
+  transition: all 0.25s ease;
 }
 .guide-feature-card:hover {
   box-shadow: var(--shadow-md);
@@ -630,14 +665,14 @@ code {
 }
 .guide-feature-icon {
   font-size: 20px;
-  margin-bottom: 10px;
-  width: 40px;
-  height: 40px;
+  margin-bottom: 12px;
+  width: 42px;
+  height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-section);
-  border-radius: 10px;
+  border-radius: 11px;
 }
 .guide-feature-title {
   font-size: 13px;
@@ -648,19 +683,18 @@ code {
 .guide-feature-desc {
   font-size: 12px;
   color: var(--text-dim);
-  line-height: 1.5;
+  line-height: 1.55;
 }
 
-/* ─── Sections ─── */
 .guide-section {
-  padding-top: 40px;
+  padding-top: 44px;
   margin-bottom: 16px;
   scroll-margin-top: 20px;
 }
 .guide-section-title {
-  font-size: 22px;
+  font-size: 24px;
   font-weight: 800;
-  letter-spacing: -0.5px;
+  letter-spacing: -0.6px;
   color: var(--text);
   margin-bottom: 4px;
   line-height: 1.2;
@@ -669,21 +703,20 @@ code {
   font-size: 14px;
   color: var(--text-dim);
   margin-bottom: 24px;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 .guide-h3 {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 700;
   color: var(--text);
   margin: 28px 0 12px;
-  letter-spacing: -0.2px;
+  letter-spacing: -0.3px;
 }
 
-/* ─── Text ─── */
 .guide-text {
   font-size: 14px;
   color: var(--text-secondary);
-  line-height: 1.75;
+  line-height: 1.8;
   margin-bottom: 16px;
 }
 .guide-text-sm {
@@ -702,13 +735,10 @@ code {
   line-height: 1.7;
   margin-bottom: 6px;
 }
-.guide-list li strong {
-  color: var(--text);
-}
+.guide-list li strong { color: var(--text); }
 
-/* ─── Code Blocks ─── */
 .guide-code-block {
-  background: #1e1e2e;
+  background: #1a1b26;
   border-radius: var(--radius-lg);
   overflow: hidden;
   margin: 12px 0 16px;
@@ -717,7 +747,7 @@ code {
 .guide-code-title {
   font-size: 11px;
   font-weight: 600;
-  color: #a6adc8;
+  color: #7a7f8d;
   padding: 10px 16px 0;
   letter-spacing: 0.3px;
   font-family: var(--font-mono);
@@ -730,7 +760,7 @@ code {
   font-family: var(--font-mono);
   font-size: 12.5px;
   line-height: 1.65;
-  color: #cdd6f4;
+  color: #c0caf5;
   background: none;
   padding: 0;
   border-radius: 0;
@@ -738,7 +768,6 @@ code {
   tab-size: 2;
 }
 
-/* ─── Callout ─── */
 .guide-callout {
   display: flex;
   gap: 12px;
@@ -750,26 +779,23 @@ code {
   line-height: 1.6;
   color: var(--text-secondary);
 }
-.guide-callout code {
-  font-size: 11.5px;
-}
+.guide-callout code { font-size: 11.5px; }
 .guide-callout-icon {
   font-size: 14px;
   flex-shrink: 0;
   margin-top: 1px;
 }
 
-/* ─── Steps ─── */
 .guide-step {
   display: flex;
   gap: 16px;
   margin: 20px 0;
 }
 .guide-step-number {
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
-  background: linear-gradient(135deg, var(--purple), #4f46e5);
+  background: linear-gradient(135deg, #0d7c5f, #2563eb);
   color: #fff;
   font-size: 13px;
   font-weight: 700;
@@ -778,11 +804,9 @@ code {
   justify-content: center;
   flex-shrink: 0;
   margin-top: 2px;
+  box-shadow: 0 2px 8px rgba(13,124,95,0.2);
 }
-.guide-step-content {
-  flex: 1;
-  min-width: 0;
-}
+.guide-step-content { flex: 1; min-width: 0; }
 .guide-step-title {
   font-size: 14px;
   font-weight: 700;
@@ -790,7 +814,6 @@ code {
   margin-bottom: 4px;
 }
 
-/* ─── Directions ─── */
 .guide-directions {
   display: flex;
   flex-direction: column;
@@ -801,11 +824,13 @@ code {
   display: flex;
   align-items: flex-start;
   gap: 14px;
-  padding: 14px 18px;
+  padding: 16px 20px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
+  transition: border-color 0.15s;
 }
+.guide-direction:hover { border-color: var(--border-focus); }
 .guide-direction-arrow {
   font-size: 22px;
   font-weight: 800;
@@ -825,10 +850,9 @@ code {
   line-height: 1.5;
 }
 
-/* ─── Architecture Diagram ─── */
 .guide-diagram {
   margin: 20px 0 28px;
-  padding: 24px;
+  padding: 28px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
@@ -840,7 +864,7 @@ code {
 }
 .guide-diagram-box {
   flex: 1;
-  padding: 16px;
+  padding: 18px;
   border-radius: var(--radius);
   border: 1px solid;
   text-align: center;
@@ -863,18 +887,10 @@ code {
   opacity: 0.7;
   line-height: 1.4;
 }
-.guide-diagram-input {
-  background: var(--blue-light); border-color: var(--blue-border); color: var(--blue);
-}
-.guide-diagram-process {
-  background: var(--purple-light); border-color: var(--purple-border); color: var(--purple);
-}
-.guide-diagram-judge {
-  background: var(--green-light); border-color: var(--green-border); color: var(--green);
-}
-.guide-diagram-check {
-  background: var(--yellow-light); border-color: var(--yellow-border); color: var(--yellow);
-}
+.guide-diagram-input { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue); }
+.guide-diagram-process { background: var(--purple-light); border-color: var(--purple-border); color: var(--purple); }
+.guide-diagram-judge { background: var(--green-light); border-color: var(--green-border); color: var(--green); }
+.guide-diagram-check { background: var(--yellow-light); border-color: var(--yellow-border); color: var(--yellow); }
 .guide-diagram-output {
   background: linear-gradient(135deg, var(--blue-light), var(--purple-light));
   border-color: var(--blue-border); color: var(--blue);
@@ -894,10 +910,7 @@ code {
   padding: 8px 0;
 }
 
-/* ─── Hierarchy Diagram ─── */
-.guide-hierarchy {
-  margin: 20px 0 28px;
-}
+.guide-hierarchy { margin: 20px 0 28px; }
 .guide-hierarchy-level {
   padding: 18px 24px;
   border-radius: var(--radius-lg);
@@ -910,29 +923,23 @@ code {
   letter-spacing: 1px;
   margin-bottom: 4px;
 }
-.guide-hierarchy-desc {
-  font-size: 13px;
-  margin-bottom: 6px;
-}
+.guide-hierarchy-desc { font-size: 13px; margin-bottom: 6px; }
 .guide-hierarchy-examples {
   font-size: 11px;
   font-family: var(--font-mono);
   opacity: 0.7;
 }
 .guide-hierarchy-system {
-  background: linear-gradient(135deg, #faf5ff, #f3e8ff);
-  border-color: var(--purple-border);
-  color: var(--purple);
+  background: linear-gradient(135deg, #faf5ff, #ede9fe);
+  border-color: var(--purple-border); color: var(--purple);
 }
 .guide-hierarchy-domain {
   background: linear-gradient(135deg, #eff6ff, #dbeafe);
-  border-color: var(--blue-border);
-  color: var(--blue);
+  border-color: var(--blue-border); color: var(--blue);
 }
 .guide-hierarchy-project {
-  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
-  border-color: var(--green-border);
-  color: var(--green);
+  background: linear-gradient(135deg, #ecf7f3, #d1f0e5);
+  border-color: var(--green-border); color: var(--green);
 }
 .guide-hierarchy-connector {
   display: flex;
@@ -944,10 +951,7 @@ code {
   font-weight: 500;
 }
 
-/* ─── Evolution Pipeline ─── */
-.guide-pipeline {
-  margin: 16px 0;
-}
+.guide-pipeline { margin: 16px 0; }
 .guide-pipeline-step {
   display: flex;
   align-items: flex-start;
@@ -955,8 +959,8 @@ code {
   padding: 14px 0;
 }
 .guide-pipeline-icon {
-  width: 32px;
-  height: 32px;
+  width: 34px;
+  height: 34px;
   border-radius: 10px;
   display: flex;
   align-items: center;
@@ -969,14 +973,13 @@ code {
   width: 2px;
   height: 16px;
   background: var(--border);
-  margin-left: 15px;
+  margin-left: 16px;
 }
 
-/* ─── Judge Cards ─── */
 .guide-judges-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+  gap: 14px;
   margin: 16px 0;
 }
 .guide-judge-card {
@@ -984,7 +987,7 @@ code {
   border: 1px solid var(--border);
   border-top: 3px solid;
   border-radius: var(--radius-lg);
-  padding: 20px;
+  padding: 22px;
 }
 .guide-judge-header {
   display: flex;
@@ -993,8 +996,8 @@ code {
   margin-bottom: 12px;
 }
 .guide-judge-icon {
-  width: 36px;
-  height: 36px;
+  width: 38px;
+  height: 38px;
   border-radius: 10px;
   display: flex;
   align-items: center;
@@ -1003,18 +1006,9 @@ code {
   font-weight: 800;
   flex-shrink: 0;
 }
-.guide-judge-name {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--text);
-}
-.guide-judge-role {
-  font-size: 11px;
-  color: var(--text-dim);
-  margin-top: 1px;
-}
+.guide-judge-name { font-size: 14px; font-weight: 700; color: var(--text); }
+.guide-judge-role { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
 
-/* ─── Dimension Cards ─── */
 .guide-dimension-card {
   padding: 14px 18px;
   background: var(--bg-card);
@@ -1023,7 +1017,6 @@ code {
   border-radius: var(--radius);
 }
 
-/* ─── Edge Grid ─── */
 .guide-edge-grid {
   display: flex;
   flex-direction: column;
@@ -1046,12 +1039,8 @@ code {
   width: 100px;
   flex-shrink: 0;
 }
-.guide-edge-desc {
-  font-size: 13px;
-  color: var(--text-dim);
-}
+.guide-edge-desc { font-size: 13px; color: var(--text-dim); }
 
-/* ─── Command Grid ─── */
 .guide-command-grid {
   display: flex;
   flex-direction: column;
@@ -1073,10 +1062,10 @@ code {
   font-family: var(--font-mono);
   font-size: 13px;
   font-weight: 600;
-  color: var(--purple);
-  background: var(--purple-light);
+  color: var(--teal);
+  background: var(--teal-light);
   padding: 3px 10px;
-  border-radius: 6px;
+  border-radius: 5px;
 }
 .guide-command-desc {
   font-size: 13px;
@@ -1100,7 +1089,6 @@ code {
   border: 1px solid var(--border-subtle);
 }
 
-/* ─── Config Params ─── */
 .guide-params {
   margin: 8px 0 20px;
   border: 1px solid var(--border);
@@ -1117,8 +1105,8 @@ code {
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 600;
-  color: var(--purple);
-  background: var(--purple-light);
+  color: var(--teal);
+  background: var(--teal-light);
   padding: 1px 6px;
   border-radius: 4px;
 }
@@ -1138,7 +1126,6 @@ code {
   line-height: 1.5;
 }
 
-/* ─── Data Cards ─── */
 .guide-data-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
@@ -1154,21 +1141,18 @@ code {
   padding: 12px 16px 0;
 }
 
-/* ─── FAQ ─── */
 .guide-faq-item {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   margin-bottom: 6px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.2s ease;
   overflow: hidden;
 }
-.guide-faq-item:hover {
-  border-color: var(--border-focus);
-}
+.guide-faq-item:hover { border-color: var(--border-focus); }
 .guide-faq-item.open {
-  border-color: var(--purple-border);
-  box-shadow: 0 0 0 1px var(--purple-light);
+  border-color: var(--green-border);
+  box-shadow: 0 0 0 1px var(--green-light);
 }
 .guide-faq-question {
   display: flex;
@@ -1199,7 +1183,6 @@ code {
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* ─── Footer ─── */
 .guide-footer {
   margin-top: 48px;
   padding-top: 24px;
@@ -1207,5 +1190,5 @@ code {
 }
 .guide-footer-content {
   text-align: center;
-  padding: 20px 0;
+  padding: 24px 0;
 }

package/dashboard/app/layout.tsx

@@ -43,14 +43,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 </svg>
               </div>
               <div>
-                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)', letterSpacing: -0.3 }}>HelixEvo</div>
-                <div style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: 0.2 }}>Co-evolving AI Skills</div>
+                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text)', letterSpacing: -0.3 }}>HelixEvo</div>
+                <div style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: 0.3 }}>Co-evolving AI Skills</div>
               </div>
             </div>
 
             {/* Nav items */}
-            <div style={{ padding: '12px 10px', flex: 1 }}>
-              <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 1.5, padding: '0 10px 8px' }}>
+            <div style={{ padding: '16px 6px', flex: 1 }}>
+              <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 1.5, padding: '0 14px 10px' }}>
                 Navigation
               </div>
               {NAV.map(n => (
@@ -67,7 +67,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)' }} />
                 <span>System Active</span>
               </div>
-              <code style={{ fontSize: 10, background: 'var(--bg-section)', padding: '2px 6px', borderRadius: 4 }}>v{VERSION}</code>
+              <code style={{ fontSize: 10, background: 'var(--bg-section)', padding: '2px 7px', borderRadius: 4 }}>v{VERSION}</code>
             </div>
           </nav>
 

package/dashboard/app/network/client.tsx

@@ -585,30 +585,7 @@ export default function NetworkClient({
 
 function GraphView({ flowNodes, flowEdges, stats }: { flowNodes: Node[]; flowEdges: Edge[]; stats: Props['stats'] }) {
   return (
-    <div style={{ height: 'calc(100vh - 200px)', width: '100%', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border)', background: '#fafafa' }}>
-      {/* Column Headers */}
-      <div style={{
-        position: 'absolute', top: 8, left: 0, right: 0, zIndex: 10,
-        display: 'flex', justifyContent: 'space-around', padding: '0 60px',
-        pointerEvents: 'none',
-      }}>
-        {[
-          { label: 'GENERALIZED', color: '#7c3aed', count: stats.generalized },
-          { label: 'EVOLVED', color: '#16a34a', count: stats.evolved },
-          { label: 'ORIGINAL', color: '#6b7280', count: stats.original },
-          { label: 'PROJECTS', color: '#b45309', count: 0 },
-        ].map(col => (
-          <div key={col.label} style={{
-            background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8,
-            padding: '5px 14px', textAlign: 'center',
-            boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
-          }}>
-            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1.5, color: col.color }}>{col.label}</div>
-            {col.count > 0 && <div style={{ fontSize: 9, color: '#9ca3af', marginTop: 1 }}>{col.count} skills</div>}
-          </div>
-        ))}
-      </div>
-
+    <div style={{ position: 'relative', height: 'calc(100vh - 200px)', width: '100%', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border)', background: 'var(--bg)' }}>
       <ReactFlow
         nodes={flowNodes}
         edges={flowEdges}
@@ -617,20 +594,20 @@ function GraphView({ flowNodes, flowEdges, stats }: { flowNodes: Node[]; flowEdg
         fitView
         fitViewOptions={{ padding: 0.2 }}
         proOptions={{ hideAttribution: true }}
-        style={{ background: '#fafafa' }}
+        style={{ background: 'var(--bg)' }}
         minZoom={0.3}
         maxZoom={1.5}
       >
-        <Background color="#e5e7eb" gap={20} size={1} />
+        <Background color="#d5d2ca" gap={20} size={1} />
         <Controls position="bottom-left" />
       </ReactFlow>
 
       {/* Legend */}
       <div style={{
         position: 'absolute', bottom: 12, right: 12, zIndex: 10,
-        background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8,
-        padding: '8px 14px', display: 'flex', gap: 14, fontSize: 10, color: '#6b7280',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
+        background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 8,
+        padding: '8px 14px', display: 'flex', gap: 14, fontSize: 10, color: 'var(--text-dim)',
+        boxShadow: 'var(--shadow-sm)',
       }}>
         <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#818cf8', marginRight: 4, verticalAlign: 'middle' }} /> inherits</span>
         <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#22c55e', marginRight: 4, verticalAlign: 'middle' }} /> enhances</span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "helixevo",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "description": "Self-evolving skill ecosystem for AI agents. Skills and projects co-evolve through multi-judge evaluation and a Pareto frontier.",
   "type": "module",
   "bin": {