.supply-receipt-flow-v20 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 390px);
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: receipt-step;
}

.supply-receipt-flow-v20 li {
  position: relative;
  min-width: 0;
  padding: 24px 5px 0;
  color: #708078;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  counter-increment: receipt-step;
}

.supply-receipt-flow-v20 li::before {
  content: counter(receipt-step);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid #cad5cf;
  border-radius: 50%;
  background: #fff;
  color: #708078;
  transform: translateX(-50%);
}

.supply-receipt-flow-v20 li:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: #dce4df;
}

.supply-receipt-flow-v20 li.is-done,
.supply-receipt-flow-v20 li.is-current { color: #17633f; }
.supply-receipt-flow-v20 li.is-done::before { content: "✓"; border-color: #268457; background: #268457; color: #fff; }
.supply-receipt-flow-v20 li.is-current::before { border-color: #268457; background: #eaf7ef; color: #17633f; }
.supply-receipt-flow-v20 li.is-done + li::after,
.supply-receipt-flow-v20 li.is-current + li::after { background: #78b995; }
.supply-receipt-flow-v20 li.is-locked::before { content: "🔒"; border-color: #d8dfdb; background: #f4f7f5; font-size: 10px; }

.supply-receipt-open-v20 { margin-top: 5px; }
.supply-receipt-owner-lock-v20 {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #d7dfdb;
  border-radius: 10px;
  background: #f4f7f5;
  color: #486057;
  font-size: 12px;
  font-weight: 800;
}

.supply-receipt-confirmed-v20 {
  max-width: 390px;
  color: #17633f;
  font-weight: 700;
}

.supply-receipt-dialog-v20 {
  width: min(92vw, 570px);
  max-height: min(90dvh, 760px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 24px 75px rgba(18, 47, 34, .25);
}

.supply-receipt-dialog-v20::backdrop { background: rgba(10, 28, 19, .56); backdrop-filter: blur(3px); }
.supply-receipt-dialog-v20 form { display: grid; gap: 16px; padding: 22px; }
.supply-receipt-dialog-head-v20 { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.supply-receipt-dialog-head-v20 small { color: #287a52; font-weight: 900; }
.supply-receipt-dialog-head-v20 h2 { margin: 3px 0 0; color: #153c2a; font-size: clamp(20px, 4vw, 26px); }
.supply-receipt-dialog-head-v20 > button { width: 38px; height: 38px; border: 1px solid #d7dfdb; border-radius: 10px; background: #f4f7f5; font-size: 22px; }
.supply-receipt-summary-v20 { display: grid; gap: 4px; padding: 14px; border: 1px solid #dce7e0; border-radius: 14px; background: #f7faf8; }
.supply-receipt-summary-v20 strong { color: #153c2a; }
.supply-receipt-summary-v20 span { color: #586b62; font-size: 13px; }
.supply-receipt-consent-v20 { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 15px; border: 2px solid #e0a12d; border-radius: 14px; background: #fffaf0; color: #5c3c08; font-weight: 800; line-height: 1.5; }
.supply-receipt-consent-v20 input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: #268457; }
.supply-receipt-upload-v20 { display: grid; gap: 8px; padding: 14px; border: 1px dashed #a9bbb1; border-radius: 14px; color: #274b39; font-weight: 800; }
.supply-receipt-upload-v20 small { color: #718078; font-weight: 600; }
.supply-receipt-upload-v20 input { width: 100%; }
.supply-receipt-upload-v20 span { color: #65756d; font-size: 12px; font-weight: 600; }
.supply-receipt-upload-v20 img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; background: #edf2ef; }
.supply-receipt-help-v20 { margin: 0; color: #65756d; font-size: 12px; }
.supply-receipt-dialog-actions-v20 { display: flex; justify-content: flex-end; gap: 9px; }

@media (max-width: 620px) {
  .supply-receipt-flow-v20 { width: 100%; }
  .supply-receipt-flow-v20 li { padding-inline: 2px; font-size: 10px; }
  .supply-receipt-dialog-v20 { width: 100vw; max-width: none; max-height: 100dvh; min-height: 100dvh; border-radius: 0; }
  .supply-receipt-dialog-v20 form { min-height: 100dvh; align-content: start; padding: 18px 14px max(18px, env(safe-area-inset-bottom)); }
  .supply-receipt-dialog-actions-v20 { margin-top: auto; }
  .supply-receipt-dialog-actions-v20 button { flex: 1; }
}