.hero{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; margin-bottom: 14px;
}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.chip{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}

.toolbar{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-bottom: 14px;
}
@media (min-width: 920px){
  .toolbar{ grid-template-columns: 1.2fr .5fr .5fr auto; align-items:center; }
}

.listCard{ padding: 0; overflow:hidden; }
.tableHead{
  display:grid;
  grid-template-columns: .55fr .55fr 1.3fr .4fr 1fr;
  gap:10px;
  padding: 12px 14px;
  border-bottom:1px solid var(--stroke);
  background: rgba(0,0,0,.12);
  font-weight:900;
}
.rows{display:flex; flex-direction:column}
.rowItem{
  display:grid;
  grid-template-columns: .55fr .55fr 1.3fr .4fr 1fr;
  gap:10px;
  padding: 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  animation: fadeIn .25s ease both;
}
.rowItem:hover{ background: rgba(255,255,255,.03); }
.price{ font-weight: 900; color: rgba(94,234,212,.95); }
.note{ color: var(--muted); font-size: 13px; }

@media (max-width: 860px){
  .tableHead{ display:none; }
  .rowItem{
    grid-template-columns: 1fr;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .rowItem > div{ display:flex; justify-content:space-between; gap:12px; }
  .rowItem > div::before{
    content: attr(data-k);
    color: var(--muted);
    font-weight: 800;
  }
}

.empty{ padding: 18px; color: var(--muted); text-align:center; }