.route-timeline { display: flex; align-items: center; overflow-x: auto; padding: 1rem 0; scrollbar-width: thin; }
        .route-timeline::-webkit-scrollbar { height: 6px; }
        .route-timeline::-webkit-scrollbar-track { background: transparent; }
        .route-timeline::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

        .route-stop { display: flex; flex-direction: column; align-items: center; position: relative; flex-shrink: 0; padding: 0 1.5rem; }
        .route-stop:not(:last-child)::after { content: ''; position: absolute; top: 1.25rem; left: 50%; height: 2px; width: 100%; background: linear-gradient(to right, #60a5fa, #3b82f6); z-index: 1; }
        .route-stop-node { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .route-stop-node:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
        .route-stop-node-inner { width: 2rem; height: 2rem; border-radius: 9999px; background-color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; }
        .route-stop-label { margin-top: 0.75rem; font-size: 0.8rem; font-weight: 500; text-align: center; width: 100px; }
        .route-stop.highlight-card .route-stop-node { animation: pulse 1s infinite; }
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }
        .card-highlight { box-shadow: 0 0 15px 3px rgba(37, 99, 235, 0.4); border-color: #2563eb; }
        
        .card-swiper .swiper-pagination-bullet { width: 6px; height: 6px; background-color: rgba(255, 255, 255, 0.8); opacity: 1; }
        .card-swiper .swiper-pagination-bullet-active { background-color: #ffffff; }