.patience { height: 12px; background: #ddd; border-radius: 6px; overflow: hidden; width: min(94vw, 360px); margin: 8px auto; }
.patience-bar { height: 100%; width: 100%; background: linear-gradient(90deg, #2faf5a, #e6b800, #e23b3b); transition: width .1s linear; }
.pz-order { display: flex; gap: 8px; justify-content: center; margin: 10px 0; min-height: 44px; flex-wrap: wrap; }
.pz-step { font-size: 26px; padding: 4px 8px; border-radius: 10px; background: #fff; filter: grayscale(1) opacity(.5); }
.pz-step.done { filter: none; outline: 3px solid var(--mint, #3ddc97); }
.pz-tops { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.pz-top { font-size: 14px; padding: 10px 12px; border: none; border-radius: 12px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pz-top:active { transform: scale(0.94); background: var(--mint, #3ddc97); }