.track-layout { display:grid; grid-template-columns:360px 1fr; gap:25px; align-items:start; }
.track-error { margin-top:12px; color:#ffb078; font-size:11px; }
.result-head { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.result-head h2 { margin:10px 0 4px; }
.result-head p { margin:0; }
.result-head img { width:150px; height:120px; object-fit:contain; }
.timeline { margin:32px 0; display:grid; grid-template-columns:repeat(7,1fr); }
.timeline-step { position:relative; display:grid; justify-items:center; gap:8px; text-align:center; color:#60768c; font-size:9px; }
.timeline-step::before { content:""; position:absolute; top:14px; left:-50%; width:100%; height:2px; background:#24394d; }
.timeline-step:first-child::before { display:none; }
.timeline-step b { position:relative; z-index:1; display:grid; place-items:center; width:30px; height:30px; border:2px solid #30475d; border-radius:50%; background:#0b1a29; }
.timeline-step.done { color:#c7d8e6; }
.timeline-step.done::before,.timeline-step.done b { border-color:var(--lime); background:var(--lime); color:#07111f; }
.timeline-step.done::before { background:var(--lime); }
.result-summary { margin:20px 0; padding:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; border:1px solid var(--line); border-radius:15px; background:#071522; }
.result-summary div { display:grid; gap:5px; }
.result-summary span { color:#71879c; font-size:9px; text-transform:uppercase; }
.result-summary strong { font-size:13px; }
@media(max-width:850px){.track-layout{grid-template-columns:1fr}.timeline{grid-template-columns:1fr;gap:8px}.timeline-step{grid-template-columns:32px 1fr;justify-items:start;align-items:center;text-align:left}.timeline-step::before{top:-50%;left:14px;width:2px;height:100%}.result-summary{grid-template-columns:1fr}.result-head img{width:100px}}