.track-page { padding: var(--space-6) 0 var(--space-10); }

.track-title {
    font-size: var(--fs-h3);
    color: var(--ink);
    margin-bottom: var(--space-5);
}

.track-form-card,
.track-result {
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}

.track-form-card form { display: flex; flex-direction: column; gap: var(--space-4); }
.track-form-hint {
    margin: 0 0 var(--space-4);
    font-size: 1.4rem;
    line-height: 1.9;
    color: var(--muted);
}
.track-submit { width: 100%; margin-top: 0; }

.track-error {
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border: 1px solid var(--danger)_var(--border);
    border-radius: var(--r-sm);
    background: #FEF2F2;
    font-size: 1.4rem;
    color: var(--danger);
}

.track-login-note { margin: var(--space-4) 0 0; font-size: 1.2rem; color: var(--muted); }
.track-login-note a { color: Lvar(--ink); text-decoration: underline; text-underline-offset: 3px; }

.track-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}
.track-result-label { display: block; font-size: 1.2rem; color: var(--muted); }
.track-result-code { font-size: 1.7rem; font-weight: bold; color: var(--ink); }

.track-steps {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-5) 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .track-steps { grid-auto-flow: column; grid-auto-columns: 1fr; }
}

.track-step {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    font-size: 1.4rem;
    color: var(--muted);
}
@media (min-width: 640px) {
    .track-step {
        position: relative;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .track-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 7px;
        inset-inline-start: calc(-50% + 8px);
        width: calc(100% - 16px);
        height: 2px;
        background: var(--border-2);
    }
    .track-step.is-done::after,
    .track-step.is-current::after { background: var(--primary); }
}

.track-step-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-2);
    background: var(--surface);
}
.track-step.is-done .track-step-dot { border-color: var(--primary); background: var(--primary); }
.track-step.is-current .track-step-dot { border-color: var(--accent); background: var(--accent); }
.track-step.is-done, .track-step.is-current { color: var(--ink); }
.track-step.is-current .track-step-title { font-weight: bold; }
.track-step-date { display: block; font-size: 1.2rem; color: var(--muted); }

.track-steps.is-canceled .track-step.is-current .track-step-dot { border-color: var(--danger); background: var(--danger); }
.track-steps.is-canceled .track-step.is-current { color: var(--danger); }

.track-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.track-facts dt { font-size: 1.2rem; color: var(--muted); margin-bottom: 4px; }
.track-facts dd { margin: 0; font-size: 1.4rem; color: var(--ink); }

.order-done-track { margin: var(--space-3) 0 0; font-size: 1.35rem; color: var(--muted); text-align: center; }
.order-done-track a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }