.inventory-heading {
  display: grid;
  grid-template-columns: 180px minmax(220px, 1fr) minmax(280px, 1.3fr);
  gap: 24px;
  align-items: start;
  margin: 36px 0 18px;
  padding-top: 28px;
  border-top: 1px dashed #263943;
}

.inventory-heading > span {
  color: var(--accent);
  font: 700 .68rem monospace;
  letter-spacing: .09em;
}

.inventory-heading h3 {
  margin: 0;
  color: #e1ebef;
  font-size: 1.15rem;
}

.inventory-heading p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}

.inventory-table table { min-width: 820px; }

.inventory-table .node-thumb {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #2d404b;
  border-radius: 9px;
  background: #111b22;
  color: #657a86;
  font: 700 .55rem monospace;
}

.inventory-table .node-thumb.abstract {
  border-style: dashed;
  background: #0a1116;
}

.inventory-table .node-thumb img {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  object-fit: contain;
}

.inventory-table .kind-chip,
.inventory-table .layer-chip {
  display: inline-flex;
  padding: 3px 8px;
  border: 1px solid #405662;
  border-radius: 20px;
  color: #a8bbc4;
  font: 700 .65rem monospace;
  text-transform: uppercase;
}

.edge-line {
  display: block;
  width: 54px;
  height: 14px;
  position: relative;
}

.edge-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 7px;
  top: 6px;
  border-top: 3px solid var(--edge);
}

.edge-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: 2px;
  border-left: 8px solid var(--edge);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.edge-line.inherited { --edge: #526b78; }

.inventory-empty {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px dashed #304550;
  border-radius: 13px;
  background: #0a1218;
}

.inventory-empty strong { color: #c7d5db; }

.inventory-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .inventory-heading { grid-template-columns: 1fr 1fr; }
  .inventory-heading p { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  .inventory-heading { grid-template-columns: 1fr; }
  .inventory-heading p { grid-column: auto; }
}