.trade-bucket-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.trade-bucket {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.trade-bucket b,
.trade-bucket strong {
  display: block;
}

.trade-bucket b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.trade-bucket strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
}

.trade-bucket.realized {
  border-left: 4px solid #2563eb;
}

.trade-bucket.holding {
  border-left: 4px solid #16a34a;
}

.trade-bucket.pending {
  border-left: 4px solid #f59e0b;
}

.trade-bucket.sellHold {
  border-left: 4px solid #dc2626;
}

.trade-card::before {
  background: #94a3b8;
}

.trade-card.trade-realized::before {
  background: #2563eb;
}

.trade-card.trade-holding::before {
  background: #16a34a;
}

.trade-card.trade-pending::before {
  background: #f59e0b;
}

.trade-card.trade-sellHold::before {
  background: #dc2626;
}

.trade-card dl {
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr) minmax(72px, auto) minmax(0, 1fr);
  gap: 10px 14px;
}

.trade-card dd {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.trade-card .trade-basis-label {
  grid-column: 1 / 2;
}

.trade-card .trade-basis-value {
  grid-column: 2 / -1;
}

@media (max-width: 720px) {
  .trade-bucket-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trade-card dl {
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  }
}