.table-wrap { overflow-x:auto; padding:8px; }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th {
  text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--label); padding:10px 12px; box-shadow:inset 0 -2px 0 var(--border); white-space:nowrap;
}
.tbl td { padding:12px; box-shadow:inset 0 -1px 0 var(--border); white-space:nowrap; }
.tbl .r { text-align:right; }
.tbl tbody tr:hover td { background:var(--hover); }
@container (max-width: 719px) {
  .table-wrap { padding:4px 12px 12px; overflow:visible; }
  .tbl { display:block; }
  .tbl thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .tbl tbody { display:block; }
  .tbl tr { display:block; padding:10px 0; box-shadow:inset 0 -1px 0 var(--border); }
  .tbl td {
    display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 4px; box-shadow:none;
    white-space:normal; text-align:right;
  }
  .tbl td[data-l]::before { content:attr(data-l); font-size:12px; color:var(--text-2); text-align:left; }
  .tbl tbody tr:hover td { background:transparent; }
}