.ajo89-route-shell{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin:14px auto 8px;
    padding:0 18px;
}

.ajo89-route-frame{
    --crumb-x:50%;
    --crumb-y:50%;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:62px;
    padding:14px 18px;
    border-radius:22px;
    background:
        radial-gradient(240px circle at var(--crumb-x) var(--crumb-y), rgba(57,184,255,.14), transparent 52%),
        linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        linear-gradient(145deg, rgba(13,21,34,.95), rgba(8,14,24,.98));
    border:1px solid rgba(80,180,255,.22);
    box-shadow:
        0 18px 34px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.ajo89-route-frame::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:21px;
    pointer-events:none;
    background:
        linear-gradient(120deg, rgba(255,255,255,.05), transparent 28%, transparent 76%, rgba(241,195,91,.06)),
        radial-gradient(circle at top right, rgba(30,94,255,.12), transparent 34%);
}

.ajo89-route-frame::after{
    content:"";
    position:absolute;
    left:18px;
    top:50%;
    width:78px;
    height:1px;
    background:linear-gradient(90deg, rgba(241,195,91,.7), rgba(57,184,255,0));
    opacity:.65;
}

.ajo89-route-frame.is-compact{
    transform:translateY(-2px);
    border-color:rgba(57,184,255,.28);
    box-shadow:
        0 20px 38px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.ajo89-route-nav{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex-wrap:wrap;
}

.ajo89-route-link,
.ajo89-route-chip,
.ajo89-route-current{
    position:relative;
    display:inline-flex;
    align-items:center;
    min-height:36px;
    border-radius:999px;
    text-decoration:none;
    white-space:nowrap;
}

.ajo89-route-link,
.ajo89-route-chip{
    padding:0 14px;
    color:#bfd0e6;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    transition:color .3s ease, border-color .3s ease, transform .3s ease, background .3s ease;
}

.ajo89-route-link:hover,
.ajo89-route-chip:hover{
    color:#f5f9ff;
    border-color:rgba(57,184,255,.26);
    background:rgba(57,184,255,.08);
    transform:translateY(-1px);
}

.ajo89-route-chip{
    cursor:pointer;
}

.ajo89-route-link::after,
.ajo89-route-chip::after{
    content:"";
    width:14px;
    height:1px;
    margin-left:10px;
    background:linear-gradient(90deg, rgba(57,184,255,.55), rgba(57,184,255,0));
}

.ajo89-route-current{
    max-width:min(100%, 520px);
    padding:0 18px;
    color:#f5f9ff;
    font-size:13px;
    font-weight:800;
    letter-spacing:.02em;
    background:
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        linear-gradient(145deg, rgba(24,38,58,.92), rgba(12,21,34,.96));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 20px rgba(0,0,0,.16);
}

.ajo89-route-current span{
    overflow:hidden;
    text-overflow:ellipsis;
}

.ajo89-route-side{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    min-width:210px;
}

.ajo89-route-meta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#bfd0e6;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.ajo89-route-meta::before{
    content:"";
    width:9px;
    height:9px;
    border-radius:50%;
    background:radial-gradient(circle, #f1c35b 0%, #39b8ff 55%, rgba(57,184,255,0) 72%);
    box-shadow:0 0 18px rgba(57,184,255,.3);
    animation:ajo89RoutePulse 2.6s ease-in-out infinite;
}

.ajo89-route-rail{
    position:relative;
    width:210px;
    height:7px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
}

.ajo89-route-progress{
    position:absolute;
    inset:0 auto 0 0;
    width:0%;
    border-radius:inherit;
    background:
        linear-gradient(90deg, rgba(241,195,91,.95), rgba(118,219,255,.92) 34%, rgba(57,184,255,.98) 68%, rgba(30,94,255,.95));
    box-shadow:
        0 0 14px rgba(57,184,255,.28),
        0 0 18px rgba(241,195,91,.12);
    transition:width .24s ease;
}

.ajo89-route-progress::after{
    content:"";
    position:absolute;
    top:-6px;
    right:-2px;
    width:12px;
    height:18px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.08));
    filter:blur(.2px);
    opacity:.8;
}

@keyframes ajo89RoutePulse{
    0%,100%{transform:scale(1);opacity:.9;}
    50%{transform:scale(1.16);opacity:1;}
}

@media (max-width: 991px){
    .ajo89-route-frame{
        align-items:flex-start;
        flex-direction:column;
    }

    .ajo89-route-side{
        width:100%;
        min-width:0;
        align-items:flex-start;
    }

    .ajo89-route-rail{
        width:100%;
    }
}

@media (max-width: 600px){
    .ajo89-route-shell{
        margin:10px auto 2px;
        padding:0 12px;
    }

    .ajo89-route-frame{
        padding:12px 14px;
        border-radius:18px;
    }

    .ajo89-route-frame::before{
        border-radius:17px;
    }

    .ajo89-route-nav{
        gap:8px;
    }

    .ajo89-route-link,
    .ajo89-route-chip{
        min-height:32px;
        padding:0 12px;
        font-size:10px;
    }

    .ajo89-route-current{
        max-width:100%;
        min-height:34px;
        padding:0 14px;
        font-size:12px;
    }

    .ajo89-route-meta{
        font-size:10px;
        letter-spacing:.1em;
    }
}