.timeline {
  display:grid;
  gap:10px
}
.timeline-card {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:12px
}
.timeline-time {
  padding-top:15px;
  color:var(--muted);
  font-size:10px;
  text-align:right
}
.timeline-event {
  min-height:84px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(247,217,139,.2);
  background:linear-gradient(135deg,rgba(69,45,87,.7),rgba(31,22,42,.8));
  position:relative
}
.timeline-event::before {
  content:"";
  position:absolute;
  left:-12px;
  top:0;
  bottom:-10px;
  width:1px;
  background:rgba(247,217,139,.18)
}
.timeline-event::after {
  content:"";
  position:absolute;
  left:-15px;
  top:18px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold)
}
.timeline-event strong {
  display:block;
  font-size:13px
}
.timeline-event p {
  margin:3px 0 0;
  color:var(--muted);
  font-size:10px
}
.timeline-event small {
  display:block;
  margin-top:8px;
  color:var(--gold);
  font-size:8px
}
.client-card {
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:12px;
  align-items:center
}
.avatar {
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:radial-gradient(circle at 30% 20%,rgba(247,217,139,.18),rgba(8,8,6,.9));
  color:var(--gold);
  font-size:13px;
  font-weight:800
}
.client-card .client-stats {
  text-align:right
}
.client-card .client-stats strong {
  color:var(--gold);
  font-size:12px
}
.client-card .client-stats small {
  display:block;
  color:var(--muted-2);
  font-size:8px
}