🎨 Redesign development workflow to card-based clickable design

- Replace problematic hover animations with clean card-style buttons
- Fix line-through-icon issue by removing absolute positioned arrow
- Use CSS ::after pseudo-elements for clean directional arrows
- Add clear hover states with subtle animations and yellow borders
- Improve visual hierarchy with better typography and spacing
- Make clickable nature more obvious with button-like appearance
- Enhance mobile responsiveness with adjusted sizing

Author: raold

static/dashboard.html

@@ -434,6 +434,7 @@
             min-width: 800px;
             position: relative;
             margin-bottom: 20px;
+            gap: 20px;
         }
 
         .branch-node {
@@ -443,35 +444,44 @@
             position: relative;
             flex: 1;
             cursor: pointer;
-            transition: all 0.3s ease;
-            padding: 10px;
-            border-radius: 10px;
+            transition: all 0.2s ease;
+            padding: 20px 15px;
+            border-radius: 12px;
+            background: var(--bg2);
+            border: 2px solid transparent;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         }
 
         .branch-node:hover {
+            border-color: var(--yellow);
             background: var(--bg1);
-            transform: translateY(-5px);
+            box-shadow: 0 6px 20px rgba(250, 189, 47, 0.2);
+            transform: translateY(-2px);
         }
 
-        .branch-node:hover .branch-circle {
-            transform: scale(1.1);
-            box-shadow: 0 0 20px rgba(251, 73, 52, 0.3);
+        .branch-node:active {
+            transform: translateY(0px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
         }
 
         .branch-circle {
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            border-radius: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.2rem;
+            font-size: 1.1rem;
             font-weight: bold;
-            margin-bottom: 15px;
-            border: 3px solid;
+            margin-bottom: 12px;
+            border: 2px solid;
             background: var(--bg0);
-            position: relative;
-            z-index: 2;
+            transition: all 0.2s ease;
+        }
+
+        .branch-node:hover .branch-circle {
+            background: var(--bg2);
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
         }
 
         .branch-circle.development {
@@ -496,71 +506,83 @@
 
         .branch-label {
             font-size: 1.1rem;
-            font-weight: 600;
-            margin-bottom: 8px;
+            font-weight: 700;
+            margin-bottom: 6px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
 
         .branch-version {
-            font-size: 0.9rem;
+            font-size: 0.85rem;
             color: var(--fg3);
-            margin-bottom: 5px;
+            margin-bottom: 8px;
+            font-family: 'Fira Code', monospace;
+            background: var(--bg0);
+            padding: 2px 6px;
+            border-radius: 4px;
         }
 
         .branch-features {
             font-size: 0.8rem;
             color: var(--fg2);
             text-align: center;
-            margin-bottom: 5px;
+            margin-bottom: 8px;
+            line-height: 1.3;
         }
 
         .branch-timeline {
-            font-size: 0.8rem;
+            font-size: 0.75rem;
             color: var(--fg3);
             font-style: italic;
+            text-transform: uppercase;
+            letter-spacing: 0.3px;
+            padding: 3px 8px;
+            background: var(--bg0);
+            border-radius: 8px;
         }
 
-        .branch-arrow {
-            position: absolute;
-            top: 30px;
-            left: 50px;
-            width: calc(100% - 100px);
-            height: 2px;
-            background: linear-gradient(90deg, transparent 0%, var(--fg3) 10%, var(--fg3) 90%, transparent 100%);
-            z-index: 1;
-        }
-
-        .branch-arrow::after {
-            content: '';
+        /* Flow arrows between nodes */
+        .branch-node:not(:last-child)::after {
+            content: '→';
             position: absolute;
-            right: 0px;
-            top: -4px;
-            width: 0;
-            height: 0;
-            border-left: 8px solid var(--fg3);
-            border-top: 5px solid transparent;
-            border-bottom: 5px solid transparent;
+            right: -15px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 1.5rem;
+            color: var(--fg3);
+            z-index: 3;
         }
 
         @media (max-width: 768px) {
             .branch-flow {
                 min-width: 600px;
+                gap: 15px;
+            }
+            
+            .branch-node {
+                padding: 15px 10px;
             }
 
             .branch-circle {
-                width: 50px;
-                height: 50px;
+                width: 45px;
+                height: 45px;
                 font-size: 1rem;
             }
 
             .branch-label {
-                font-size: 1rem;
+                font-size: 0.95rem;
             }
 
             .branch-features,
             .branch-version,
             .branch-timeline {
                 font-size: 0.7rem;
             }
+
+            .branch-node:not(:last-child)::after {
+                font-size: 1.2rem;
+                right: -12px;
+            }
         }
 
         .real-time-indicator {
@@ -1466,8 +1488,6 @@ <h3>Publication Pipeline</h3>
             <h2><i class="fas fa-code-branch"></i> Development Workflow</h2>
 
             <div class="branch-flow">
-                <div class="branch-arrow"></div>
-                
                 <div class="branch-node" onclick="openBranchModal('develop')">
                     <div class="branch-circle development">
                         <i class="fas fa-hammer"></i>