.sjo-track {
    --sjo-red: #C8331E; --sjo-red-hot:#E63946; --sjo-charcoal:#1A0F08;
    --sjo-cream:#FAF3E5; --sjo-cream-2:#F1E8DB; --sjo-gold:#E8A62E; --sjo-grey:#8A8275;
    background: var(--sjo-cream);
    color: var(--sjo-charcoal);
    font-family: 'DM Sans', sans-serif;
    padding: clamp(2rem,5vw,4rem) 1rem;
    min-height: 70vh;
}
.sjo-track__inner { max-width: 560px; margin: 0 auto; }
.sjo-track__loading, .sjo-track__err { text-align:center; color: var(--sjo-grey); padding:3rem 1rem; }
.sjo-track__head { text-align:center; margin-bottom: 2rem; }
.sjo-track__brand { font-family:'Anton','Arial Narrow',sans-serif; letter-spacing:0.06em; font-size:0.78rem; color: var(--sjo-red); margin-bottom: 0.4rem; }
.sjo-track__big { font-family:'Anton','Arial Narrow',sans-serif; font-size: clamp(2.2rem,7vw,3.6rem); text-transform: uppercase; margin: 0 0 0.4rem; line-height: 1; }
.sjo-track__ref { color: var(--sjo-grey); font-size: 0.92rem; margin: 0; }

.sjo-track__steps {
    list-style: none; padding: 0; margin: 0 0 1.6rem;
    background: #fff; border: 2px solid var(--sjo-cream-2); border-radius: 14px;
    overflow: hidden;
}
.sjo-track__step {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--sjo-cream-2);
    font-family: 'Anton','Arial Narrow',sans-serif;
    font-size: 1.1rem; text-transform: uppercase;
    color: var(--sjo-grey);
    transition: 0.2s;
}
.sjo-track__step:last-child { border-bottom: 0; }
.sjo-track__step.is-done { color: var(--sjo-charcoal); }
.sjo-track__step.is-done .sjo-track__dot { background: var(--sjo-leaf,#5A7A3D); color: #fff; }
.sjo-track__step.is-now {
    color: var(--sjo-charcoal); background: rgba(232,166,46,0.12);
    border-left: 4px solid var(--sjo-gold); padding-left: calc(1.2rem - 4px);
}
.sjo-track__step.is-now .sjo-track__dot { background: var(--sjo-red-hot); color: #fff; animation: sjoPulse 1.4s infinite; }
.sjo-track__step.is-todo .sjo-track__dot { background: var(--sjo-cream-2); color: var(--sjo-grey); }
.sjo-track__dot {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.1rem;
}
@keyframes sjoPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.5);} 50% { box-shadow: 0 0 0 10px rgba(230,57,70,0);} }

.sjo-track__rider {
    display: block; text-align: center;
    background: var(--sjo-charcoal); color: var(--sjo-cream);
    padding: 1rem; border-radius: 12px; text-decoration: none;
    font-family: 'Anton','Arial Narrow',sans-serif; text-transform: uppercase;
    margin-bottom: 1.6rem;
}
.sjo-track__rider:hover { background: var(--sjo-red); }

.sjo-track__items {
    background: #fff; border: 2px solid var(--sjo-cream-2);
    border-radius: 14px; padding: 1.4rem;
}
.sjo-track__items h3 { font-family:'Anton','Arial Narrow',sans-serif; text-transform:uppercase; margin: 0 0 0.8rem; }
.sjo-track__items ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.sjo-track__items li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-top: 1px dashed var(--sjo-cream-2); }
.sjo-track__items li:first-child { border-top: 0; }
.sjo-track__items small { color: var(--sjo-grey); display:block; }
.sjo-track__total { padding-top: 0.8rem; border-top: 1px solid var(--sjo-cream-2); display:flex; justify-content: space-between; font-family:'Anton','Arial Narrow',sans-serif; text-transform:uppercase; }
.sjo-track__again {
    display: block; text-align: center; margin-top: 1.4rem;
    color: var(--sjo-red); font-weight: 700; text-decoration: none;
}