.data-path-container { position: relative; }
              .data-path-track {
                position: absolute; top: 0; bottom: 0; left: 11px; width: 4px;
                background: rgba(30, 41, 59, 0.8); border-radius: 4px; transform: translateX(-50%);
              }
              .data-liquid-flow {
                position: absolute; top: 0; left: 11px; width: 4px;
                background: linear-gradient(180deg, transparent 0%, #10b981 30%, #3b82f6 80%, #8b5cf6 100%);
                border-radius: 4px; transform: translateX(-50%);
                box-shadow: 0 0 15px #3b82f6, 0 0 30px #8b5cf6;
                transition: height 0.4s ease;
              }
              
              .accordion-content {
                max-height: 0; overflow: hidden; opacity: 0;
                transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
              }
              
              .process-step { transition: opacity 0.3s ease; }
              
              /* STATE: PENDING */
              .process-step.state-pending { opacity: 0.5; }
              .process-step.state-pending .icon-container { background: rgba(30,41,59,0.5); border: 2px solid #334155; }
              .process-step.state-pending .icon-inner { display: none; }
              
              /* STATE: COMPLETED */
              .process-step.state-completed { opacity: 1; }
              .process-step.state-completed .icon-container { background: #1e293b; border: 1px solid rgba(16,185,129,0.3); color: #34d399; }
              .process-step.state-completed .icon-inner { display: block; }
              .process-step.state-completed .icon-inner svg { width: 14px; height: 14px; }
              .process-step.state-completed .step-title { color: #cbd5e1; }
              
              /* STATE: ACTIVE */
              .process-step.state-active { opacity: 1; }
              .process-step.state-active .icon-container { 
                background: linear-gradient(to right, #2563eb, #4f46e5); 
                color: white; 
                box-shadow: 0 0 20px rgba(37,99,235,0.8);
                border: none;
              }
              .process-step.state-active .icon-inner { display: block; }
              .process-step.state-active .step-title { color: white; font-weight: 700; font-size: 16px; }
              .process-step.state-active .accordion-content { max-height: 150px; opacity: 1; margin-top: 12px; }
              
              .pulse-ring-active {
                position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #3b82f6;
                animation: ping-fast 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.5;
              }
              @keyframes ping-fast { 75%, 100% { transform: scale(1.8); opacity: 0; } }
              
              .progress-fill { animation: fill-bar 1.7s ease-out forwards; }
              @keyframes fill-bar { 0% { width: 0%; } 100% { width: 100%; } }