/* Order tracking: 7 clear stages, finished stages get a tick, only the CURRENT stage pulses,
   finished orders never blink. Plus a small "reconnecting" badge for weak networks. */
.steps li.done::before { content: "✓"; display: grid; place-items: center; color: #0d0d0e; font: 800 9px/1 var(--sans); }
.steps li.now::after { content: " · now"; color: var(--muted); font-weight: 500; font-size: .8rem; }
.steps.finished li::before { animation: none !important; box-shadow: none !important; }
.track-done { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 14px; border-radius: 16px; background: rgba(60,207,142,.12); border: 1px solid rgba(60,207,142,.35); }
.track-done b { font: 700 1.2rem var(--serif); color: #8ff0c4; }
.track-done span { font-size: 2rem; }
.net-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #ffd28a; background: rgba(255,176,32,.14); border: 1px solid rgba(255,176,32,.35); border-radius: 999px; padding: .2em .7em; }
.net-badge i { width: 8px; height: 8px; border-radius: 50%; background: #ffb020; animation: livePulse 1.2s infinite; }
.trow.muted-row { color: var(--muted); font-size: .85rem; }
.m-live.done i { background: #8ff0c4; animation: none; }