/* Referral rewards as a horizontally swiped membership deck. */
.sheet:has(.referral-levels) { padding-top: 8px; padding-bottom: max(18px,env(safe-area-inset-bottom),var(--tg-safe-bottom,0px)); }
.sheet:has(.referral-levels) .sheet-head { margin: 4px 0 12px; }
.referral-levels { min-width: 0; }
.membership-deck {
  display: flex; align-items: stretch; gap: 12px;
  width: 100%; min-width: 0; padding: 0 0 8px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab; user-select: none;
}
.membership-deck.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.membership-deck::-webkit-scrollbar { display: none; }
.membership-deck::after { content: ''; flex: 0 0 calc(10% - 12px); }
.membership-deck:focus-visible { outline: 2px solid #368ee9; outline-offset: 3px; border-radius: 18px; }
.membership-card {
  position: relative; isolation: isolate; display: grid;
  grid-template-rows: auto 1fr auto; flex: 0 0 90%;
  min-height: 224px;
  min-width: 0; padding: 18px 20px; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
  border: 1px solid #bed6f41c; border-radius: 19px;
  background: #24272e;
  box-shadow: inset 0 1px 0 #ffffff09; color: #f2f4f8;
}
.membership-card.is-current { border: 2px solid #087cff; }
.membership-watermark { position: absolute; z-index: -1; top: -5px; right: 13px; color: #f0f2f6; opacity: .06; font-size: 100px; font-weight: 750; line-height: 1; letter-spacing: -5px; user-select: none; }
.membership-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.membership-head h3 { margin: 0; font-size: 14px; font-weight: 550; line-height: 1.3; letter-spacing: .1px; }
.membership-badge { flex-shrink: 0; padding: 3px 7px; border: 0; border-radius: 6px; background: #087cff; color: #fff; font-size: 14px; line-height: 1.25; }
.membership-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; align-self: center; margin: 9px 0 10px; }
.membership-rates > div { min-width: 0; }
.membership-rates > div + div { padding-left: 17px; border-left: 1px solid #ffffff13; }
.membership-rates strong { display: block; color: #f6f9ff; font-size: 36px; font-weight: 650; line-height: 1; letter-spacing: -1px; white-space: nowrap; }
.membership-rates strong > span { font-size: 25px; font-weight: 500; letter-spacing: -.4px; }
.membership-rates > div > span { display: block; margin-top: 5px; color: #a2a9b6; font-size: 12px; line-height: 1.35; }
.membership-footer { min-height: 67px; padding-top: 10px; border-top: 1px solid #ffffff15; }
.membership-footer > span { display: block; margin-bottom: 3px; color: #929aa8; font-size: 10px; line-height: 1.2; }
.sheet .membership-footer > p { margin: 0; color: #d0d5df; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.membership-progress + .membership-progress { margin-top: 10px; }
.membership-progress-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; color: #a2adbd; font-size: 10px; line-height: 1.2; }
.membership-progress-label strong { color: #d0d5df; font-size: 11px; font-weight: 500; white-space: nowrap; }
.membership-progress progress { appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: 4px; overflow: hidden; background: #ffffff0e; }
.membership-progress progress::-webkit-progress-bar { border-radius: 4px; background: #ffffff0e; }
.membership-progress progress::-webkit-progress-value { border-radius: 4px; background: #3c8eed; }
.membership-progress progress::-moz-progress-bar { border-radius: 4px; background: #3c8eed; }
.referral-levels .membership-invite { min-height: 44px; height: 44px; margin: 14px 0 0; justify-content: center; border-radius: 12px; font-size: 13px; }
@media(max-width:359px) { .membership-card { padding: 16px 17px; } .membership-rates { gap: 12px; } .membership-rates > div + div { padding-left: 12px; } .membership-rates strong { font-size: 32px; } .membership-watermark { font-size: 91px; } }