/* Added membership facts retain the original membership card's purple palette. */
.jl-membership {
  display: grid;
  gap: .625rem;
  width: 100%;
  margin: 0;
  padding: .625rem .625rem max(.9375rem, env(safe-area-inset-bottom));
  box-sizing: border-box;
  color: #333;
  font-family: inherit;
  font-size: .8125rem;
  line-height: 1.5;
}
.jl-membership *, .jl-membership *::before, .jl-membership *::after { box-sizing: border-box; }
.jl-status-card { padding: 1.25rem .9375rem; border-radius: .75rem; color: #fff; background: linear-gradient(120deg, #5a67c7, #614793); }
.jl-status-card h1 { margin: .625rem 0 0; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.jl-status { display: inline-block; border: 1px solid #d8d7fa; border-radius: 1.25rem; padding: .1875rem .75rem; font-size: .75rem; font-weight: 700; }
.jl-level-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .625rem .875rem; margin: 0; padding: .9375rem; border-radius: .5rem; background: #fff; }
.jl-level-facts dt { min-width: 0; color: #999; }
.jl-level-facts dd { min-width: 0; margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.jl-level-list { margin: 0; padding: 0; list-style: none; border-radius: .5rem; background: #fff; }
.jl-level-list li { display: flex; gap: .625rem; align-items: center; min-height: 3.25rem; padding: .625rem .9375rem; }
.jl-level-list li + li { border-top: 1px solid #f5f5f5; }
.jl-level-list img { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; object-fit: contain; }
.jl-level-list .jl-locked img { filter: grayscale(1); }
.jl-rank-name { display: grid; min-width: 0; gap: .125rem; flex: 1; }
.jl-rank-name strong { font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; }
.jl-rank-name span { color: #999; font-size: .75rem; overflow-wrap: anywhere; }
.jl-rank-status { color: #503980; font-size: .75rem; white-space: nowrap; }
.jl-locked .jl-rank-status { color: #999; }