.payout-capacity-shell {
  margin-top: -16px;
  margin-bottom: 54px;
}

.payout-capacity-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 17px 19px;
  border-color: rgba(110, 231, 167, 0.17);
  background:
    linear-gradient(110deg, rgba(110, 231, 167, 0.055), rgba(102, 217, 255, 0.025)),
    var(--panel);
}

.capacity-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(110, 231, 167, 0.25);
  border-radius: 13px;
  background: rgba(110, 231, 167, 0.08);
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
}

.capacity-copy,
.capacity-value {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.capacity-copy > span,
.capacity-copy > small,
.capacity-value > small {
  color: var(--faint);
  font-size: 9px;
}

.capacity-copy > strong {
  margin: 2px 0;
  font-size: 14px;
}

.capacity-value {
  align-items: flex-end;
  min-width: 180px;
}

.capacity-value > strong {
  margin: 2px 0;
  color: var(--green);
  font-size: 22px;
  line-height: 1.1;
}

.capacity-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
}

.capacity-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(110, 231, 167, 0.45);
}

.capacity-waiting {
  border-color: rgba(255, 199, 107, 0.18);
  background:
    linear-gradient(110deg, rgba(255, 199, 107, 0.05), transparent),
    var(--panel);
}

.capacity-waiting .capacity-icon,
.capacity-waiting .capacity-value > strong {
  color: var(--amber);
}

.capacity-waiting .capacity-icon {
  border-color: rgba(255, 199, 107, 0.22);
  background: rgba(255, 199, 107, 0.07);
}

.capacity-waiting .capacity-status i {
  background: var(--amber);
  box-shadow: 0 0 10px rgba(255, 199, 107, 0.4);
}

.capacity-danger {
  border-color: rgba(255, 122, 138, 0.18);
  background:
    linear-gradient(110deg, rgba(255, 122, 138, 0.05), transparent),
    var(--panel);
}

.capacity-danger .capacity-icon,
.capacity-danger .capacity-value > strong {
  color: var(--red);
}

.capacity-danger .capacity-icon {
  border-color: rgba(255, 122, 138, 0.22);
  background: rgba(255, 122, 138, 0.07);
}

.capacity-danger .capacity-status i {
  background: var(--red);
  box-shadow: 0 0 10px rgba(255, 122, 138, 0.4);
}

.capacity-muted .capacity-status i {
  background: var(--faint);
  box-shadow: none;
}

@media (max-width: 720px) {
  .payout-capacity-shell {
    margin-top: -26px;
    margin-bottom: 38px;
  }

  .payout-capacity-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .capacity-value {
    grid-column: 2;
    align-items: flex-start;
    min-width: 0;
    padding-top: 4px;
  }
}

@media (max-width: 440px) {
  .payout-capacity-card {
    grid-template-columns: 1fr;
  }

  .capacity-icon {
    width: 38px;
    height: 38px;
  }

  .capacity-value {
    grid-column: auto;
  }
}

/* Catalog price provenance and image-backed estimate rows. */
.catalog-row-payout,
.estimate-line-payout {
  color: var(--green);
  font-size: 11px;
  font-weight: 760;
}

.catalog-pricing-source {
  overflow: hidden;
  color: var(--faint) !important;
  font-size: 9px !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.estimate-item-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.estimate-item-row .item-thumb {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

@media (max-width: 440px) {
  .catalog-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .catalog-row .add-item-button {
    grid-column: 2;
    justify-self: start;
  }

  .estimate-item-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .estimate-item-row .item-thumb {
    width: 34px;
    height: 34px;
  }

  .estimate-item-row .quantity-control {
    grid-column: 2;
    justify-self: start;
  }
}