.profile-mobile-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Membership checkout: reuse the profile membership glass language on every route. */
#membershipPanel.consult-panel {
  --profile-ink: #171f2b;
  --profile-muted: #6e7a8c;
  --profile-green: #15955b;
  --profile-purple: #7b45d9;
  --profile-blue: #246fca;
  --profile-gold: #f2b21f;
}

#membershipPanel.consult-panel.open {
  z-index: 20000;
}

@media (min-width: 981px) {
  html body #membershipPanel.consult-panel.open {
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: clamp(24px, 4vw, 48px);
    background:
      radial-gradient(540px 420px at 50% 0%, rgba(255, 209, 26, 0.18), transparent 72%),
      rgba(23, 31, 43, 0.22);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
  }

  html body #membershipPanel .consult-dialog {
    position: relative;
    box-sizing: border-box;
    width: min(820px, calc(100vw - 64px));
    max-height: calc(100dvh - 64px);
    margin: 0;
    padding: 34px;
    overflow: auto;
    border: 1.2px solid rgba(255, 255, 255, 0.82);
    border-radius: 36px;
    color: var(--profile-ink);
    background:
      radial-gradient(120% 86% at 94% 0%, rgba(255, 236, 140, 0.24), rgba(255, 255, 255, 0) 58%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 48%, rgba(255, 255, 255, 0.44) 100%);
    box-shadow:
      0 28px 60px -32px rgba(29, 38, 52, 0.22),
      inset 1px 0 0 rgba(255, 237, 152, 0.28),
      inset -1px 0 0 rgba(255, 255, 255, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(28px) saturate(1.18) brightness(1.04);
    -webkit-backdrop-filter: blur(28px) saturate(1.18) brightness(1.04);
  }

  html body #membershipPanel .consult-dialog::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 32px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background:
      url("./assets/profile-figma/member-crown.svg") center / 24px 24px no-repeat,
      #ffd75a;
    box-shadow:
      0 16px 28px -18px rgba(111, 80, 10, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  html body #membershipPanel .eyebrow,
  html body #membershipPanel #membershipTitle,
  html body #membershipPanel .membership-subtitle {
    margin-left: 68px;
    letter-spacing: 0;
  }

  html body #membershipPanel .eyebrow {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--profile-gold);
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
  }

  html body #membershipPanel #membershipTitle {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--profile-ink);
    font-size: 30px;
    font-weight: 780;
    line-height: 38px;
  }

  html body #membershipPanel .membership-subtitle {
    margin-top: 0;
    margin-bottom: 22px;
    color: var(--profile-muted);
    font-size: 14px;
    font-weight: 620;
    line-height: 22px;
  }

  html body #membershipPanel .close-btn {
    right: 28px;
    top: 28px;
    width: 44px;
    height: 44px;
    border: 1.1px solid rgba(255, 255, 255, 0.78);
    border-radius: 22px;
    color: #64748b;
    background:
      radial-gradient(96% 96% at 26% 10%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2) 56%, rgba(255, 255, 255, 0.12) 100%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.2));
    box-shadow:
      0 13px 18px -16px rgba(103, 75, 12, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(1.08) brightness(1.02);
    -webkit-backdrop-filter: blur(16px) saturate(1.08) brightness(1.02);
    font-size: 28px;
    line-height: 40px;
  }

  html body #membershipPanel .membership-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
  }

  html body #membershipPanel .membership-plan-card {
    position: relative;
    display: grid;
    min-height: 150px;
    align-content: start;
    gap: 7px;
    padding: 18px;
    overflow: hidden;
    border: 1.1px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px;
    color: var(--profile-ink);
    background: rgba(255, 255, 255, 0.54);
    box-shadow:
      0 18px 21px rgba(123, 69, 217, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px) saturate(1.12);
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }

  html body #membershipPanel .membership-plan-card::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(21, 149, 91, 0.24);
    background: rgba(255, 255, 255, 0.44);
  }

  html body #membershipPanel .membership-plan-card:hover,
  html body #membershipPanel .membership-plan-card.is-selected {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.96);
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
      0 22px 30px rgba(21, 149, 91, 0.12),
      inset -1px -1px 0 rgba(255, 255, 255, 0.9);
  }

  html body #membershipPanel .membership-plan-card.is-selected::after {
    background:
      radial-gradient(circle, #15955b 0 5px, transparent 6px),
      rgba(234, 255, 247, 0.72);
  }

  html body #membershipPanel .membership-plan-card span,
  html body #membershipPanel .membership-plan-card small,
  html body #membershipPanel .membership-plan-card em {
    color: var(--profile-muted);
    font-style: normal;
    letter-spacing: 0;
  }

  html body #membershipPanel .membership-plan-card span {
    color: var(--profile-purple);
    font-size: 14px;
    font-weight: 760;
    line-height: 18px;
  }

  html body #membershipPanel .membership-plan-card.featured span {
    color: var(--profile-green);
  }

  html body #membershipPanel .membership-plan-card:nth-child(3) span {
    color: var(--profile-blue);
  }

  html body #membershipPanel .membership-plan-card.course span {
    color: var(--profile-gold);
  }

  html body #membershipPanel .membership-plan-card span b {
    display: inline-grid;
    min-width: 46px;
    min-height: 22px;
    margin-left: 6px;
    padding: 0 9px;
    place-items: center;
    border: 1px solid rgba(21, 149, 91, 0.22);
    border-radius: 999px;
    color: var(--profile-green);
    background: rgba(255, 255, 255, 0.48);
    font-size: 11px;
    font-weight: 650;
  }

  html body #membershipPanel .membership-plan-card strong {
    margin: 0;
    color: var(--profile-ink);
    font-size: 34px;
    font-weight: 780;
    line-height: 42px;
  }

  html body #membershipPanel .membership-plan-card small {
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
  }

  html body #membershipPanel .membership-plan-card em {
    margin-top: 2px;
    color: #8a94a4;
    font-size: 12px;
    font-weight: 580;
    line-height: 16px;
  }

  html body #membershipPanel .membership-payment-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    margin-top: 16px;
    padding: 0 18px;
    border: 1.1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    background:
      linear-gradient(171.521deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.46) 50%);
    box-shadow:
      0 12px 14px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  html body #membershipPanel .membership-wechat-icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: url("./assets/profile-figma/wechat-pay.svg") center / 24px 24px no-repeat;
  }

  html body #membershipPanel .membership-payment-row strong {
    display: block;
    color: var(--profile-ink);
    font-size: 14px;
    font-weight: 760;
    line-height: 18px;
  }

  html body #membershipPanel .membership-payment-row small {
    display: block;
    color: #8a94a4;
    font-size: 11px;
    font-weight: 560;
    line-height: 14px;
  }

  html body #membershipPanel .membership-qr-icon {
    width: 24px;
    height: 24px;
    background: url("./assets/profile-figma/qr-payment.svg") center / 24px 24px no-repeat;
  }

  html body #membershipPanel .membership-confirm-button {
    width: 100%;
    min-height: 56px;
    margin-top: 12px;
    border: 1.1px solid rgba(255, 255, 255, 0.94);
    border-radius: 28px;
    color: var(--profile-green);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.76), rgba(234, 255, 247, 0.72));
    box-shadow:
      0 18px 21px rgba(21, 149, 91, 0.12),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 16px;
    font-weight: 760;
  }

  html body #membershipPanel #membershipNote.form-note {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 18px;
    color: #7b5600;
    background: rgba(255, 247, 223, 0.72);
    font-size: 13px;
    font-weight: 680;
    line-height: 19px;
  }

  html body #membershipPanel .membership-native-checkout {
    display: grid; width: min(360px, 100%); margin: 18px auto 0; justify-items: center; gap: 10px; text-align: center;
  }
  html body #membershipPanel .membership-native-summary { display: flex; align-items: baseline; gap: 12px; color: var(--profile-ink); }
  html body #membershipPanel .membership-native-summary span { font-size: 15px; font-weight: 700; }
  html body #membershipPanel .membership-native-summary strong { color: var(--profile-green); font-size: 28px; line-height: 1; }
  html body #membershipPanel .membership-native-qr {
    display: block; width: 230px; height: 230px; padding: 10px; border-radius: 24px; background: #fff; box-shadow: 0 18px 42px -24px rgba(29, 38, 52, 0.28);
  }
  html body #membershipPanel .membership-native-qr-error {
    display: grid; width: 230px; height: 230px; place-items: center; padding: 24px; border-radius: 24px; color: #9a5a20; background: rgba(255, 247, 223, 0.9);
  }
  html body #membershipPanel .membership-native-checkout p { margin: 0; color: var(--profile-muted); font-size: 13px; font-weight: 650; }
  html body #membershipPanel .membership-payment-refresh {
    min-width: 230px; min-height: 46px; border: 0; border-radius: 23px; color: #fff; background: #07c160; font-size: 14px; font-weight: 760;
  }
  html body #membershipPanel .membership-payment-fallback { color: var(--profile-green); font-size: 12px; font-weight: 650; text-decoration: none; }
}

/* Home-page glass system pass: outer shell, roomier gutters, and inset text optics. */
@media (max-width: 980px) {
  html body.view-profile #profile.profile-mobile-figma,
  html body.view-profile #profile.profile-mobile-figma.active-view {
    --profile-shell-width: min(358px, calc(100vw - 32px));
    --profile-shell-left: calc((100% - var(--profile-shell-width)) / 2);
    --profile-card-width: min(322px, calc(100vw - 68px));
    --profile-card-left: calc((100% - var(--profile-card-width)) / 2);
    --profile-embed-y: clamp(0.45px, 0.14vw, 0.7px);
    --profile-text-embed:
      0 var(--profile-embed-y) 0 rgba(255, 255, 255, 0.62),
      0 calc(var(--profile-embed-y) * -1) 0 rgba(15, 23, 42, 0.075),
      0 7px 14px rgba(22, 30, 44, 0.045);
    --profile-heading-embed:
      0 1px 0 rgba(255, 255, 255, 0.66),
      0 -0.8px 0 rgba(15, 23, 42, 0.08),
      0 10px 18px rgba(22, 30, 44, 0.055);
    --profile-number-embed:
      0 1px 0 rgba(255, 255, 255, 0.72),
      0 -0.85px 0 rgba(15, 23, 42, 0.09),
      0 8px 15px rgba(21, 191, 169, 0.12);
    --profile-home-card-bg:
      radial-gradient(120% 86% at 94% 0%, rgba(255, 236, 140, 0.22), rgba(255, 255, 255, 0) 58%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.32) 100%);
    --profile-home-card-shadow:
      0 22px 38px -27px rgba(111, 80, 10, 0.22),
      inset 1px 0 0 rgba(255, 237, 152, 0.28),
      inset -1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(104, 73, 8, 0.035);
    isolation: isolate !important;
    text-rendering: geometricPrecision !important;
    font-synthesis-weight: none !important;
    -webkit-font-smoothing: antialiased !important;
    background:
      radial-gradient(390px 300px at 50% -10%, rgba(255, 204, 32, 0.86), rgba(255, 224, 94, 0.38) 47%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(280px 360px at -12% 20%, rgba(255, 221, 78, 0.24), rgba(255, 255, 255, 0) 72%),
      radial-gradient(300px 340px at 112% 36%, rgba(255, 236, 147, 0.28), rgba(255, 255, 255, 0) 74%),
      linear-gradient(180deg, #ffd128 0%, #ffe88e 20%, #fff7df 49%, #fffdf7 100%) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::before,
  html body.view-profile #profile.profile-mobile-figma.active-view::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: var(--profile-shell-left) !important;
    top: 18px !important;
    width: var(--profile-shell-width) !important;
    height: min(812px, calc(100% - 36px)) !important;
    border-radius: 34px !important;
    pointer-events: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::before {
    z-index: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background:
      linear-gradient(112deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025) 46%, rgba(255, 255, 255, 0.012)) !important;
    box-shadow:
      0 30px 64px -28px rgba(21, 32, 51, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -1px 0 rgba(15, 31, 46, 0.02),
      inset 1px 0 0 rgba(255, 255, 255, 0.16),
      inset -1px 0 0 rgba(255, 255, 255, 0.1) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::after {
    z-index: 1 !important;
    padding: 1px !important;
    background:
      linear-gradient(118deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.22) 31%, rgba(255, 255, 255, 0.08) 54%, rgba(255, 255, 255, 0.54) 100%) !important;
    opacity: 0.2 !important;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-page-hero,
  html body.view-profile #profile.profile-mobile-figma .profile-summary,
  html body.view-profile #profile.profile-mobile-figma .content-grid {
    left: var(--profile-card-left) !important;
    width: var(--profile-card-width) !important;
    z-index: 2 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-page-hero {
    top: 36px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-summary {
    top: 128px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .content-grid {
    top: 294px !important;
    height: 432px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .content-grid > .panel.wide-panel,
  html body.view-profile #profile.profile-mobile-figma .skill-progress-grid,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-learning-center {
    width: var(--profile-card-width) !important;
    height: 432px !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-learning-center,
    .profile-mobile-section-head,
    .profile-mobile-stat-grid,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel
  ) {
    width: var(--profile-card-width) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel
  ) {
    border-color: rgba(255, 255, 255, 0.82) !important;
    background: var(--profile-home-card-bg) !important;
    box-shadow: var(--profile-home-card-shadow) !important;
    backdrop-filter: blur(21px) saturate(1.2) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(21px) saturate(1.2) brightness(1.04) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-rail {
    height: 72px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-icon-button {
    left: auto !important;
    right: 13px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card {
    height: 140px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-cta {
    left: auto !important;
    right: 16px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-membership-cta {
    left: auto !important;
    right: 16px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefits {
    width: calc(var(--profile-card-width) - 34px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-benefits {
    width: calc(var(--profile-card-width) - 34px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head button {
    left: auto !important;
    right: 0 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-grid {
    grid-template-columns: repeat(3, 96px) !important;
    gap: 17px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card {
    width: 96px !important;
    border-color: rgba(255, 255, 255, 0.82) !important;
    background:
      radial-gradient(96% 92% at 18% 0%, color-mix(in srgb, var(--profile-stat-accent) 14%, rgba(255, 255, 255, 0)) 0%, rgba(255, 255, 255, 0) 55%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.44) 52%, rgba(255, 255, 255, 0.24) 100%) !important;
    box-shadow:
      0 18px 30px -24px color-mix(in srgb, var(--profile-stat-accent) 28%, rgba(21, 32, 51, 0.08)),
      inset 1px 0 0 color-mix(in srgb, var(--profile-stat-accent) 12%, rgba(255, 255, 255, 0.18)),
      inset -1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(72, 51, 7, 0.025) !important;
    backdrop-filter: blur(20px) saturate(1.22) brightness(1.03) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.22) brightness(1.03) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card small {
    left: 35px !important;
    width: 56px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card strong,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card em {
    width: 70px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel {
    top: 148px !important;
    height: 96px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-panel {
    top: 258px !important;
    height: 174px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-list {
    left: 17px !important;
    width: calc(var(--profile-card-width) - 34px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row {
    width: calc(var(--profile-card-width) - 34px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row .profile-mobile-record-copy {
    width: 150px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row strong {
    width: 150px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row small {
    width: 132px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row em {
    left: auto !important;
    right: 36px !important;
    width: 52px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-action {
    left: auto !important;
    right: 0 !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-icon-button,
    .profile-mobile-membership-cta,
    .profile-mobile-benefit,
    .profile-mobile-section-head button,
    .profile-mobile-record-action
  ),
  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab.active {
    border-color: rgba(255, 255, 255, 0.74) !important;
    background:
      radial-gradient(96% 96% at 26% 10%, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.18) 56%, rgba(255, 255, 255, 0.1) 100%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18)) !important;
    box-shadow:
      0 13px 18px -16px rgba(103, 75, 12, 0.22),
      inset 1px 0 0 rgba(255, 226, 112, 0.18),
      inset -1px 0 0 rgba(255, 255, 255, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 -1px 0 rgba(91, 64, 6, 0.045) !important;
    backdrop-filter: blur(16px) saturate(1.08) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) brightness(1.02) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    h2,
    h3,
    p,
    small,
    strong,
    em,
    b,
    button,
    .profile-mobile-membership-badge,
    .profile-mobile-benefit,
    .profile-mobile-record-copy
  ),
  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab {
    letter-spacing: 0 !important;
    text-shadow: var(--profile-text-embed) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-copy h2,
    .profile-mobile-membership-card h3,
    .profile-mobile-section-head h2,
    .profile-mobile-today-panel h3,
    .profile-mobile-records-head h3
  ) {
    text-shadow: var(--profile-heading-embed) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-stat-card strong,
    .profile-mobile-today-panel strong
  ) {
    text-shadow: var(--profile-number-embed) !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar {
    border-color: rgba(255, 255, 255, 0.78) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 82%),
      linear-gradient(90deg, rgba(116, 128, 140, 0.012), rgba(116, 128, 140, 0.012)) !important;
    box-shadow:
      0 18px 32px -22px rgba(21, 32, 51, 0.1),
      inset 1px 0 0 rgba(255, 255, 255, 0.3),
      inset -1px 0 0 rgba(255, 255, 255, 0.16),
      inset 0 -1px 0 rgba(15, 31, 46, 0.035),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(22px) saturate(1.5) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(1.04) !important;
  }
}

@media (max-width: 760px) {
  html:has(body.view-profile),
  html body.view-profile {
    --profile-ink: #171f2b;
    --profile-muted: #6e7a8c;
    --profile-green: #15955b;
    --profile-purple: #7b45d9;
    --profile-blue: #246fca;
    --profile-gold: #f2b21f;
    background:
      linear-gradient(
        180deg,
        rgba(255, 216, 74, 0.98) 0%,
        rgba(255, 230, 128, 0.9) 18%,
        rgba(255, 249, 230, 0.98) 38%,
        #fff 62%,
        #fff 100%
      ) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
  }

  html body.view-profile .app-shell,
  html body.view-profile .app-shell > .main {
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
  }

  html body.view-profile #profile.profile-mobile-figma,
  html body.view-profile #profile.profile-mobile-figma.active-view {
    box-sizing: border-box;
    display: block !important;
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    min-height: max(848px, 100dvh) !important;
    margin: 0 auto !important;
    padding: 36px 24px 118px !important;
    overflow: hidden !important;
    color: var(--profile-ink) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
    background:
      linear-gradient(
        180deg,
        rgba(255, 216, 74, 0.98) 0%,
        rgba(255, 230, 128, 0.9) 18%,
        rgba(255, 249, 230, 0.98) 38%,
        #fff 62%,
        #fff 100%
      ) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::before,
  html body.view-profile #profile.profile-mobile-figma.active-view::after {
    content: none !important;
    display: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma *,
  html body.view-profile #profile.profile-mobile-figma *::before,
  html body.view-profile #profile.profile-mobile-figma *::after {
    box-sizing: border-box;
    letter-spacing: 0 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-tabs,
  html body.view-profile #profile.profile-mobile-figma .profile-insight-grid,
  html body.view-profile #profile.profile-mobile-figma #historyTable,
  html body.view-profile #profile.profile-mobile-figma .profile-desktop-summary-only,
  html body.view-profile #profile.profile-mobile-figma .content-grid > .panel > .eyebrow,
  html body.view-profile #profile.profile-mobile-figma .content-grid > .panel > h2 {
    display: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-page-hero,
  html body.view-profile #profile.profile-mobile-figma .profile-summary,
  html body.view-profile #profile.profile-mobile-figma .content-grid,
  html body.view-profile #profile.profile-mobile-figma .panel,
  html body.view-profile #profile.profile-mobile-figma .wide-panel,
  html body.view-profile #profile.profile-mobile-figma .skill-progress-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view .content-grid > .panel.wide-panel {
    border: 0 !important;
    outline: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-page-hero,
    .profile-summary,
    .content-grid,
    .panel,
    .wide-panel,
    .skill-progress-grid,
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-section-head,
    .profile-mobile-stat-grid,
    .profile-mobile-stat-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel
  ) {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-page-hero {
    height: 72px !important;
    margin-bottom: 18px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-summary {
    display: block !important;
    height: 140px !important;
    margin-bottom: 20px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-rail {
    position: relative !important;
    width: 100% !important;
    height: 72px !important;
    margin: 0 !important;
    border: 1.2px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 36px !important;
    overflow: visible !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.62) 50%, rgba(255, 255, 255, 0.46) 100%) !important;
    box-shadow:
      0 16px 36px -14px rgba(29, 38, 52, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(30px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.1) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-brand {
    position: absolute;
    left: 12.8px;
    top: 9.8px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #141820;
    background: #ffd84a;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-brand b {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy {
    position: absolute;
    left: 78px;
    top: 13.8px;
    width: 190px;
    min-width: 0;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy h2 {
    width: 150px;
    margin: 0;
    color: var(--profile-ink) !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    white-space: nowrap;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy p {
    width: 185px;
    margin: 0;
    color: var(--profile-muted) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-checkout-copy,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-title-checkout,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-cta-checkout {
    display: none;
  }

  html body.view-profile.profile-membership-checkout-open #profile.profile-mobile-figma .profile-mobile-default-copy,
  html body.view-profile.profile-membership-checkout-open #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-title-default,
  html body.view-profile.profile-membership-checkout-open #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-cta-default {
    display: none;
  }

  html body.view-profile.profile-membership-checkout-open #profile.profile-mobile-figma .profile-mobile-checkout-copy,
  html body.view-profile.profile-membership-checkout-open #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-title-checkout,
  html body.view-profile.profile-membership-checkout-open #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-cta-checkout {
    display: inline;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-icon-button {
    position: absolute;
    right: 17.2px;
    top: 14.8px;
    width: 44px;
    height: 40px;
    border: 0;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: #111827;
    background: transparent;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-icon-button .profile-mobile-icon {
    width: 20px;
    height: 20px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card {
    position: relative !important;
    width: 100% !important;
    height: 140px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    color: var(--profile-ink) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow:
      0 18px 42px -16px rgba(47, 191, 156, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(24px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid {
    box-shadow:
      0 18px 42px -16px rgba(242, 178, 31, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.1px solid transparent;
    border-radius: inherit;
    background:
      linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(47, 191, 156, 0.3), rgba(255, 233, 164, 0.3)) border-box;
    pointer-events: none;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid::before {
    background:
      linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(242, 178, 31, 0.3), rgba(255, 233, 164, 0.3)) border-box;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-head {
    position: static !important;
    display: block !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-symbol {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid !important;
    place-items: center !important;
    color: #111827;
    background: #eafff7;
    z-index: 1;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-membership-symbol {
    background: #ffd75a;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-symbol .profile-mobile-icon {
    width: 24px;
    height: 24px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-badge {
    position: absolute;
    left: 82px;
    top: 16px;
    width: 88px;
    height: 28px;
    border: 1px solid rgba(47, 191, 156, 0.3);
    border-radius: 14px;
    display: grid !important;
    place-items: center !important;
    color: var(--profile-green);
    background: rgba(255, 255, 255, 0.5);
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    z-index: 1;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-membership-badge {
    width: 82px;
    color: #8a5b00;
    border-color: rgba(242, 178, 31, 0.3);
    background: rgba(255, 255, 255, 0.58);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card h3 {
    position: absolute;
    left: 82px;
    top: 47px;
    width: 190px;
    margin: 0 !important;
    color: var(--profile-ink) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card p {
    position: absolute;
    left: 82px;
    top: 73px;
    width: 222px;
    margin: 0 !important;
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-cta {
    position: absolute;
    right: 20px;
    top: 16px;
    width: 92px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: var(--profile-green);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    z-index: 1;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-membership-cta {
    width: 84px;
    color: #8a5b00;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefits {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 100px;
    height: 28px;
    display: flex !important;
    align-items: center;
    gap: 13px;
    z-index: 1;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-benefits {
    gap: 14px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit {
    height: 28px;
    border: 0;
    border-radius: 14px;
    display: inline-grid !important;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.46);
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-benefit:nth-child(1) {
    width: 88px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-benefit:nth-child(2) {
    width: 82px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-benefit:nth-child(3) {
    width: 98px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-benefit {
    width: 92px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit .profile-mobile-icon {
    width: 16px;
    height: 16px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit b {
    min-width: 0;
    color: currentColor;
    white-space: nowrap;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit.tone-purple {
    color: var(--profile-purple);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit.tone-green {
    color: var(--profile-green);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit.tone-blue {
    color: var(--profile-blue);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-plan-note {
    display: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-learning-center {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    overflow: visible;
    opacity: 1 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head {
    position: relative;
    height: 45px;
    margin-bottom: 5px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head span {
    display: block;
    width: 140px;
    color: var(--profile-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head h2 {
    width: 170px;
    margin: 4px 0 0;
    color: var(--profile-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head button {
    position: absolute;
    right: 0;
    top: 8px;
    width: 96px;
    height: 34px;
    border: 1.1px solid rgba(255, 255, 255, 0.72);
    border-radius: 17px;
    color: #141820;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
    box-shadow:
      0 12px 28px -12px rgba(29, 38, 52, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 102px);
    gap: 18px;
    height: 82px;
    margin-bottom: 18px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card {
    position: relative;
    width: 102px;
    height: 82px;
    border: 1.1px solid transparent;
    border-radius: 24px;
    overflow: hidden;
    color: var(--profile-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), var(--profile-stat-accent), rgba(255, 233, 164, 0.3)) border-box;
    box-shadow:
      0 18px 42px -16px color-mix(in srgb, var(--profile-stat-accent) 38%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-icon {
    position: absolute;
    left: 14px;
    top: 11px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: var(--profile-stat-accent);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-icon .profile-mobile-icon {
    width: 16px;
    height: 16px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card small {
    position: absolute;
    left: 40px;
    top: 11px;
    width: 52px;
    color: var(--profile-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card strong {
    position: absolute;
    left: 14px;
    top: 35px;
    width: 74px;
    color: var(--profile-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card em {
    position: absolute;
    left: 14px;
    top: 61px;
    width: 74px;
    color: #8a94a4;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 13px;
    white-space: nowrap;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel {
    position: relative;
    width: 100%;
    height: 96px;
    margin: 0 0 16px;
    border: 1.2px solid rgba(255, 255, 255, 0.72);
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
    box-shadow:
      0 16px 36px -14px rgba(29, 38, 52, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel h3 {
    position: absolute;
    left: 18px;
    top: 15px;
    width: 120px;
    margin: 0;
    color: var(--profile-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel p {
    position: absolute;
    left: 18px;
    top: 41px;
    width: 210px;
    margin: 0;
    color: #667085;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel strong {
    position: absolute;
    right: 18px;
    top: 17px;
    width: 48px;
    color: var(--profile-purple);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: right;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-paid-member .profile-mobile-today-panel strong {
    color: var(--profile-green);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel > i {
    position: absolute;
    left: 17px;
    right: 19px;
    top: 73px;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.46);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel > i > em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgba(123, 69, 217, 0.85);
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-paid-member .profile-mobile-today-panel > i > em {
    background: rgba(49, 163, 68, 0.85);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-panel {
    position: relative;
    width: 100%;
    height: 178px;
    border: 1.2px solid rgba(255, 255, 255, 0.72);
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
    box-shadow:
      0 16px 36px -14px rgba(29, 38, 52, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-head h3 {
    position: absolute;
    left: 18px;
    top: 17px;
    width: 130px;
    margin: 0;
    color: var(--profile-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-head button {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 72px;
    height: 16px;
    padding: 0;
    border: 0;
    color: #64748b;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: right;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-list {
    position: absolute;
    left: 17px;
    right: 16px;
    top: 49px;
    display: grid;
    gap: 12px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row {
    position: relative;
    width: 100%;
    height: 28px;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 58px 24px;
    align-items: center;
    gap: 10px;
    color: var(--profile-ink);
    background: transparent;
    text-align: left;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row > b {
    width: 48px;
    height: 28px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--profile-purple);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.tone-blue > b {
    background: #0f6cb8;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.tone-sky > b {
    background: var(--profile-blue);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.tone-green > b {
    background: var(--profile-green);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.tone-gold > b {
    background: var(--profile-gold);
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row span {
    min-width: 0;
    display: block;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row strong {
    display: block;
    width: 162px;
    max-width: 100%;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row small {
    display: block;
    width: 162px;
    max-width: 100%;
    color: #8a94a4;
    font-size: 10px;
    font-weight: 500;
    line-height: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row em {
    color: #4b5563;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-align: right;
    white-space: nowrap;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row > .profile-mobile-icon {
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 50%;
    color: #64748b;
    background: rgba(255, 255, 255, 0.46);
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(24px, env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
    width: min(342px, calc(100vw - 48px)) !important;
    height: 78px !important;
    padding: 8px !important;
    border: 1.1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 39px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow:
      0 16px 36px -10px rgba(29, 38, 52, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab {
    min-width: 0 !important;
    height: 60px !important;
    padding: 7px 0 0 !important;
    border: 0 !important;
    border-radius: 31px !important;
    display: grid !important;
    grid-template-rows: 24px 16px !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 5px !important;
    color: rgba(23, 31, 43, 0.48) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab::before {
    content: "";
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: var(--profile-tab-icon) center / 24px 24px no-repeat;
    mask: var(--profile-tab-icon) center / 24px 24px no-repeat;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab[data-mobile-view="dashboard"] {
    --profile-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab[data-mobile-view="practice"] {
    --profile-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E");
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab[data-mobile-view="profile"] {
    --profile-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab span {
    display: block !important;
    color: currentColor !important;
    font: inherit !important;
    white-space: nowrap !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab.active {
    color: #141820 !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body #membershipPanel.consult-panel.open {
    z-index: 20000 !important;
    display: grid !important;
    place-items: end center !important;
    padding: 0 14px max(14px, env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.profile-membership-checkout-open #recorderPanel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(18px) !important;
  }

  html body #membershipPanel .consult-dialog {
    position: relative !important;
    width: min(362px, calc(100vw - 28px)) !important;
    height: min(530px, calc(100dvh - 28px)) !important;
    max-height: min(530px, calc(100dvh - 28px)) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1.2px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 36px !important;
    overflow: hidden !important;
    color: var(--profile-ink) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow:
      0 16px 36px -14px rgba(29, 38, 52, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(30px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.1) !important;
  }

  html body #membershipPanel .consult-dialog::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 58px;
    height: 5px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: rgba(203, 213, 225, 0.9);
  }

  html body #membershipPanel .eyebrow {
    position: absolute !important;
    left: 20px !important;
    top: 34px !important;
    width: 130px !important;
    margin: 0 !important;
    color: var(--profile-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body #membershipPanel #membershipTitle {
    position: absolute !important;
    left: 20px !important;
    top: 56px !important;
    width: 180px !important;
    margin: 0 !important;
    color: var(--profile-ink) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 27px !important;
    letter-spacing: 0 !important;
  }

  html body #membershipPanel .membership-subtitle {
    position: absolute !important;
    left: 20px !important;
    top: 88px !important;
    width: 260px !important;
    margin: 0 !important;
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    white-space: nowrap !important;
  }

  html body #membershipPanel .close-btn {
    position: absolute !important;
    left: auto !important;
    right: 20px !important;
    top: 48px !important;
    width: 38px !important;
    height: 38px !important;
    border: 1.1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 19px !important;
    display: grid !important;
    place-items: center !important;
    color: #64748b !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)) !important;
    box-shadow:
      0 12px 28px -12px rgba(29, 38, 52, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 26px !important;
  }

  html body #membershipPanel .membership-grid {
    position: absolute !important;
    left: 20px !important;
    top: 124px !important;
    width: 322px !important;
    height: 226px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 154px) !important;
    grid-auto-rows: 106px !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  html body #membershipPanel .membership-plan-card {
    position: relative;
    width: 154px !important;
    height: 106px !important;
    min-height: 106px !important;
    padding: 0 !important;
    border: 1.1px solid transparent !important;
    border-radius: 26px !important;
    display: block !important;
    overflow: hidden !important;
    color: var(--profile-ink) !important;
    background:
      linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(123, 69, 217, 0.3), rgba(255, 233, 164, 0.3)) border-box !important;
    box-shadow:
      0 18px 42px -16px rgba(123, 69, 217, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    text-align: left !important;
  }

  html body #membershipPanel .membership-plan-card.featured {
    background:
      linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(21, 149, 91, 0.3), rgba(255, 233, 164, 0.3)) border-box !important;
    box-shadow:
      0 18px 42px -16px rgba(21, 149, 91, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  html body #membershipPanel .membership-plan-card:nth-child(3) {
    background:
      linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(36, 111, 202, 0.3), rgba(255, 233, 164, 0.3)) border-box !important;
    box-shadow:
      0 18px 42px -16px rgba(36, 111, 202, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  html body #membershipPanel .membership-plan-card.course {
    background:
      linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(242, 178, 31, 0.3), rgba(255, 233, 164, 0.3)) border-box !important;
    box-shadow:
      0 18px 42px -16px rgba(242, 178, 31, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  html body #membershipPanel .membership-plan-card span {
    position: absolute;
    left: 16px;
    top: 13px;
    width: 122px;
    color: var(--profile-purple) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
    white-space: nowrap !important;
  }

  html body #membershipPanel .membership-plan-card.featured span {
    color: var(--profile-green) !important;
  }

  html body #membershipPanel .membership-plan-card:nth-child(3) span {
    color: var(--profile-blue) !important;
  }

  html body #membershipPanel .membership-plan-card.course span {
    color: var(--profile-gold) !important;
  }

  html body #membershipPanel .membership-plan-card span b {
    position: absolute;
    right: -2px;
    top: 0;
    width: 48px;
    height: 18px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--profile-green);
    background: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
  }

  html body #membershipPanel .membership-plan-card strong {
    position: absolute;
    left: 16px;
    top: 37px;
    width: 122px;
    margin: 0 !important;
    color: var(--profile-ink) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 29px !important;
    letter-spacing: 0 !important;
  }

  html body #membershipPanel .membership-plan-card small {
    position: absolute;
    left: 16px;
    top: 72px;
    width: 122px;
    color: #667085 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 15px !important;
    white-space: nowrap !important;
  }

  html body #membershipPanel .membership-plan-card em {
    display: none !important;
  }

  html body #membershipPanel .membership-plan-card.is-selected::after {
    content: "" !important;
    position: absolute !important;
    right: 14px !important;
    bottom: 13px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.42) !important;
  }

  html body #membershipPanel .membership-payment-row {
    position: absolute;
    left: 20px;
    top: 368px;
    width: 322px;
    height: 48px;
    border: 1.1px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    display: grid;
    grid-template-columns: 32px 1fr 24px;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
    box-shadow:
      0 12px 28px -12px rgba(29, 38, 52, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  html body #membershipPanel .membership-wechat-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 37% 40%, #fff 0 7%, transparent 8%),
      radial-gradient(circle at 62% 44%, #fff 0 6%, transparent 7%),
      #15955b;
  }

  html body #membershipPanel .membership-payment-row strong {
    display: block;
    color: var(--profile-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
  }

  html body #membershipPanel .membership-payment-row small {
    display: block;
    color: #8a94a4;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
  }

  html body #membershipPanel .membership-qr-icon {
    width: 24px;
    height: 24px;
    background:
      linear-gradient(#64748b 0 0) left 3px top 3px / 7px 7px no-repeat,
      linear-gradient(#64748b 0 0) right 3px top 3px / 7px 7px no-repeat,
      linear-gradient(#64748b 0 0) left 3px bottom 3px / 7px 7px no-repeat,
      linear-gradient(#64748b 0 0) right 3px bottom 3px / 4px 4px no-repeat,
      linear-gradient(#64748b 0 0) center / 4px 4px no-repeat;
  }

  html body #membershipPanel .membership-confirm-button {
    position: absolute;
    left: 20px;
    top: 438px;
    width: 322px;
    height: 52px;
    border: 1.1px solid transparent;
    border-radius: 26px;
    color: var(--profile-green);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(234, 255, 247, 0.72)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(21, 149, 91, 0.3), rgba(255, 233, 164, 0.3)) border-box;
    box-shadow:
      0 18px 42px -16px rgba(21, 149, 91, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }

  html body #membershipPanel #membershipNote.form-note {
    position: absolute !important;
    left: 20px !important;
    top: 500px !important;
    width: 322px !important;
    min-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    color: #8a94a4 !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 14px !important;
    text-align: center !important;
  }

  html body #membershipPanel .membership-native-checkout {
    position: absolute; left: 20px; top: 112px; z-index: 2; display: grid; width: 322px; justify-items: center; gap: 8px; text-align: center;
  }
  html body #membershipPanel .membership-native-summary { display: flex; align-items: baseline; gap: 10px; color: var(--profile-ink); }
  html body #membershipPanel .membership-native-summary span { font-size: 13px; font-weight: 700; }
  html body #membershipPanel .membership-native-summary strong { color: var(--profile-green); font-size: 24px; line-height: 1; }
  html body #membershipPanel .membership-native-qr,
  html body #membershipPanel .membership-native-qr-error {
    display: block; box-sizing: border-box; width: 206px; height: 206px; padding: 8px; border-radius: 22px; background: #fff; box-shadow: 0 16px 34px -22px rgba(29, 38, 52, 0.28);
  }
  html body #membershipPanel .membership-native-qr-error {
    display: grid; place-items: center; padding: 20px; color: #9a5a20; background: rgba(255, 247, 223, 0.94); font-size: 12px;
  }
  html body #membershipPanel .membership-native-checkout p { margin: 0; color: var(--profile-muted); font-size: 12px; font-weight: 650; }
  html body #membershipPanel .membership-payment-refresh {
    width: 230px; min-height: 42px; border: 0; border-radius: 21px; color: #fff; background: #07c160; font-size: 13px; font-weight: 760;
  }
  html body #membershipPanel .membership-payment-fallback { color: var(--profile-green); font-size: 11px; font-weight: 650; text-decoration: none; }

  /* Figma node 324:2 exact mobile restoration overrides. */
  html body.view-profile #profile.profile-mobile-figma,
  html body.view-profile #profile.profile-mobile-figma.active-view {
    position: relative !important;
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    height: max(848px, 100dvh) !important;
    min-height: 848px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-image: linear-gradient(
      180deg,
      rgba(255, 216, 74, 0.98) 0%,
      rgba(255, 230, 128, 0.9) 18%,
      rgba(255, 249, 230, 0.98) 38%,
      #fff 62%,
      #fff 100%
    ) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-asset {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: fill !important;
    pointer-events: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-page-hero {
    position: absolute !important;
    left: 24px !important;
    top: 36px !important;
    width: 342px !important;
    height: 72px !important;
    margin: 0 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-summary {
    position: absolute !important;
    left: 24px !important;
    top: 126px !important;
    width: 342px !important;
    height: 140px !important;
    margin: 0 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .content-grid {
    position: absolute !important;
    left: 24px !important;
    top: 286px !important;
    width: 342px !important;
    height: 440px !important;
    overflow: visible !important;
  }

  html body.view-profile #profile.profile-mobile-figma .content-grid > .panel.wide-panel,
  html body.view-profile #profile.profile-mobile-figma .skill-progress-grid {
    position: relative !important;
    width: 342px !important;
    height: 440px !important;
    overflow: visible !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-rail {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 342px !important;
    height: 72px !important;
    border: 1.2px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 36px !important;
    background-image: linear-gradient(
      168.111deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.62) 25%,
      rgba(255, 255, 255, 0.46) 50%
    ) !important;
    box-shadow:
      0 16px 18px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-brand {
    left: 12.8px !important;
    top: 9.8px !important;
    width: 50px !important;
    height: 50px !important;
    background: #ffd84a !important;
    border-radius: 50% !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-brand-bg,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-symbol-bg {
    position: absolute !important;
    inset: 0 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-brand b {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    color: #141820 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy {
    left: 76.8px !important;
    top: 13.8px !important;
    width: 190px !important;
    height: 47px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy h2 {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 150px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 29px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy p {
    position: absolute !important;
    left: 2px !important;
    top: 29px !important;
    width: 185px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 17px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-icon-button {
    left: 280.8px !important;
    right: auto !important;
    top: 14.8px !important;
    width: 44px !important;
    height: 40px !important;
    border: 1.1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 22px !important;
    background-image: linear-gradient(137.726deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 50%) !important;
    box-shadow:
      0 12px 14px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-action-icon {
    width: 20px !important;
    height: 20px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 342px !important;
    height: 140px !important;
    border: 1.1px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 34px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow:
      0 18px 21px rgba(47, 191, 156, 0.1),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card::before {
    content: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid {
    box-shadow:
      0 18px 21px rgba(242, 178, 31, 0.13),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-symbol {
    left: 16.9px !important;
    top: 16.9px !important;
    width: 50px !important;
    height: 50px !important;
    overflow: hidden !important;
    background: transparent !important;
    border-radius: 22px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-membership-symbol {
    background: transparent !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-mark {
    position: absolute !important;
    left: 13px !important;
    top: 13px !important;
    width: 24px !important;
    height: 24px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-badge {
    left: 80.9px !important;
    top: 14.9px !important;
    width: 88px !important;
    height: 28px !important;
    border: 1px solid rgba(47, 191, 156, 0.3) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    color: #15955b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-membership-badge {
    width: 82px !important;
    border-color: rgba(242, 178, 31, 0.3) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    color: #8a5b00 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card h3 {
    left: 80.9px !important;
    top: 47.9px !important;
    width: 190px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid h3 {
    width: 176px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card p {
    left: 80.9px !important;
    top: 73.9px !important;
    width: 210px !important;
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid p {
    width: 224px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-cta {
    left: 228.9px !important;
    right: auto !important;
    top: 16.9px !important;
    width: 92px !important;
    height: 34px !important;
    border: 1.1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 17px !important;
    color: #15955b !important;
    background-image: linear-gradient(159.717deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 50%) !important;
    box-shadow:
      0 12px 14px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-membership-cta {
    left: 236.9px !important;
    width: 84px !important;
    color: #8a5b00 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefits {
    left: 16.9px !important;
    right: auto !important;
    top: 99.9px !important;
    width: 294px !important;
    height: 28px !important;
    gap: 13px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-benefits {
    width: 304px !important;
    gap: 14px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit {
    position: relative !important;
    height: 28px !important;
    padding: 0 4px 0 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 14px !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 5px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
      0 8px 9px rgba(29, 38, 52, 0.05),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-benefit {
    background: rgba(255, 255, 255, 0.42) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit-icon {
    width: 16px !important;
    height: 16px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-learning-center {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 342px !important;
    height: 440px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 342px !important;
    height: 45px !important;
    margin: 0 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head button {
    left: 246px !important;
    right: auto !important;
    top: 8px !important;
    width: 96px !important;
    height: 34px !important;
    border: 1.1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 17px !important;
    background-image: linear-gradient(160.498deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 50%) !important;
    box-shadow:
      0 12px 14px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-grid {
    position: absolute !important;
    left: 0 !important;
    top: 50px !important;
    width: 342px !important;
    height: 82px !important;
    margin: 0 !important;
    gap: 18px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card {
    border: 1.1px solid rgba(255, 255, 255, 0.94) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow:
      0 18px 21px color-mix(in srgb, var(--profile-stat-accent) 8%, transparent),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-icon {
    left: 12.9px !important;
    top: 10.9px !important;
    width: 20px !important;
    height: 20px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-asset {
    width: 20px !important;
    height: 20px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card small {
    left: 38.9px !important;
    top: 10.9px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card strong {
    left: 12.9px !important;
    top: 34.9px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card em {
    left: 12.9px !important;
    top: 60.9px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel {
    position: absolute !important;
    left: 0 !important;
    top: 150px !important;
    width: 342px !important;
    height: 96px !important;
    margin: 0 !important;
    border: 1.2px solid rgba(255, 255, 255, 0.94) !important;
    background-image: linear-gradient(164.32deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.62) 25%, rgba(255, 255, 255, 0.46) 50%) !important;
    box-shadow:
      0 16px 18px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-panel {
    position: absolute !important;
    left: 0 !important;
    top: 262px !important;
    width: 342px !important;
    height: 178px !important;
    border: 1.2px solid rgba(255, 255, 255, 0.94) !important;
    background-image: linear-gradient(152.504deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.62) 25%, rgba(255, 255, 255, 0.46) 50%) !important;
    box-shadow:
      0 16px 18px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-list {
    left: 16.8px !important;
    right: auto !important;
    top: 48.8px !important;
    width: 308px !important;
    gap: 12px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row {
    position: relative !important;
    display: block !important;
    width: 308px !important;
    height: 28px !important;
    overflow: visible !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row > b {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 48px !important;
    height: 28px !important;
    border: 1px solid color-mix(in srgb, var(--profile-row-color) 28%, transparent) !important;
    border-radius: 14px !important;
    color: var(--profile-row-color) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row {
    --profile-row-color: #7b45d9;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.tone-blue {
    --profile-row-color: #0f6cb8;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.tone-sky {
    --profile-row-color: #246fca;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.tone-green {
    --profile-row-color: #15955b;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.tone-gold {
    --profile-row-color: #f2b21f;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row .profile-mobile-record-copy {
    position: absolute !important;
    left: 60px !important;
    top: 2px !important;
    width: 162px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row strong {
    width: 162px !important;
    line-height: 17px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row small {
    width: 140px !important;
    line-height: 12px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row em {
    position: absolute !important;
    left: 208px !important;
    top: 4px !important;
    width: 58px !important;
    line-height: 16px !important;
    text-align: right !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-action {
    position: absolute !important;
    left: 294px !important;
    top: 0 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 5px !important;
    border: 1.1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 50%) !important;
    box-shadow:
      0 12px 14px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
    box-sizing: border-box !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-action-icon {
    display: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-action::after {
    content: "" !important;
    position: absolute !important;
    left: 7px !important;
    top: 7px !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 2.2px solid #8a94a4 !important;
    border-bottom: 2.2px solid #8a94a4 !important;
    border-radius: 1px !important;
    background: transparent !important;
    transform: rotate(-45deg) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.is-locked .profile-mobile-record-action::after {
    left: 6px !important;
    top: 10px !important;
    width: 12px !important;
    height: 8px !important;
    border: 2.2px solid #8a94a4 !important;
    border-radius: 3px !important;
    transform: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row.is-locked .profile-mobile-record-action::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 4px !important;
    width: 8px !important;
    height: 8px !important;
    border: 2.2px solid #8a94a4 !important;
    border-bottom: 0 !important;
    border-radius: 8px 8px 0 0 !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar {
    width: 342px !important;
    height: 78px !important;
    padding: 0 !important;
    border: 1.1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 39px !important;
    display: block !important;
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow:
      0 16px 18px rgba(29, 38, 52, 0.06),
      inset -1px -1px 0 rgba(255, 255, 255, 0.74) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab {
    position: absolute !important;
    top: 8px !important;
    width: 110px !important;
    height: 60px !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 31px !important;
    color: #8a94a4 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 17px !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab[data-mobile-view="dashboard"] {
    left: 6px !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab[data-mobile-view="practice"] {
    left: 115px !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab[data-mobile-view="profile"] {
    left: 215px !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab::before {
    position: absolute !important;
    left: 43px !important;
    top: 7px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: transparent !important;
    background-position: center !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab[data-mobile-view="dashboard"]::before {
    background-image: url("./assets/profile-figma/bottom-home.svg") !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab[data-mobile-view="practice"]::before {
    background-image: url("./assets/profile-figma/bottom-bank.svg") !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab[data-mobile-view="profile"]::before {
    background-image: url("./assets/profile-figma/bottom-profile.svg") !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab span {
    position: absolute !important;
    left: 31px !important;
    top: 37px !important;
    width: 48px !important;
    text-align: center !important;
    font: inherit !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab.active {
    color: #141820 !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow:
      0 12px 14px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
    font-weight: 700 !important;
  }

  html body #membershipPanel .consult-dialog {
    border-color: rgba(255, 255, 255, 0.94) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow:
      0 16px 18px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }

  html body #membershipPanel .membership-plan-card,
  html body #membershipPanel .membership-payment-row,
  html body #membershipPanel .membership-confirm-button {
    border-color: rgba(255, 255, 255, 0.94) !important;
    box-shadow:
      0 18px 21px rgba(29, 38, 52, 0.06),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  html body #membershipPanel .membership-wechat-icon {
    background: url("./assets/profile-figma/wechat-pay.svg") center / 24px 24px no-repeat !important;
  }

  html body #membershipPanel .membership-qr-icon {
    background: url("./assets/profile-figma/qr-payment.svg") center / 24px 24px no-repeat !important;
  }

  /* Bottom-sheet micro-alignment from Figma export 331:350. */
  html body #membershipPanel .consult-dialog::before {
    top: 10.8px !important;
    width: 58px !important;
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(203, 213, 225, 0.9) !important;
  }

  html body #membershipPanel .eyebrow {
    left: 18.8px !important;
    top: 32.8px !important;
  }

  html body #membershipPanel #membershipTitle {
    left: 18.8px !important;
    top: 54.8px !important;
  }

  html body #membershipPanel .membership-subtitle {
    left: 18.8px !important;
    top: 86.8px !important;
  }

  html body #membershipPanel .close-btn {
    left: 302.8px !important;
    right: auto !important;
    top: 46.8px !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 50%) !important;
    box-shadow:
      0 12px 14px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
  }

  html body #membershipPanel .membership-grid {
    left: 18.8px !important;
    top: 122.8px !important;
  }

  html body #membershipPanel .membership-plan-card {
    border: 1.1px solid rgba(255, 255, 255, 0.94) !important;
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow:
      0 18px 21px rgba(123, 69, 217, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html body #membershipPanel .membership-plan-card.featured {
    background: rgba(255, 255, 255, 0.68) !important;
    box-shadow:
      0 18px 21px rgba(21, 149, 91, 0.14),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  html body #membershipPanel .membership-plan-card:nth-child(3) {
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow:
      0 18px 21px rgba(36, 111, 202, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  html body #membershipPanel .membership-plan-card.course {
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow:
      0 18px 21px rgba(242, 178, 31, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  html body #membershipPanel .membership-plan-card span {
    left: 14.9px !important;
    top: 12.9px !important;
  }

  html body #membershipPanel .membership-plan-card span b {
    left: 76px !important;
    right: auto !important;
    top: -2px !important;
    width: 48px !important;
    height: 24px !important;
    border: 1px solid rgba(21, 149, 91, 0.28) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    font-size: 11px !important;
    line-height: 18px !important;
  }

  html body #membershipPanel .membership-plan-card strong {
    left: 14.9px !important;
    top: 36.9px !important;
  }

  html body #membershipPanel .membership-plan-card small {
    left: 14.9px !important;
    top: 70.9px !important;
  }

  html body #membershipPanel .membership-payment-row {
    left: 18.8px !important;
    top: 366.8px !important;
    display: block !important;
    padding: 0 !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    background-image: linear-gradient(171.521deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 50%) !important;
    box-shadow:
      0 12px 14px rgba(29, 38, 52, 0.08),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
  }

  html body #membershipPanel .membership-wechat-icon {
    position: absolute !important;
    left: 14.9px !important;
    top: 10.9px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 0 !important;
  }

  html body #membershipPanel .membership-payment-row > div {
    position: absolute !important;
    left: 50.9px !important;
    top: 8.9px !important;
    width: 140px !important;
    height: 30px !important;
  }

  html body #membershipPanel .membership-qr-icon {
    position: absolute !important;
    left: 276.9px !important;
    top: 10.9px !important;
    width: 24px !important;
    height: 24px !important;
  }

  html body #membershipPanel .membership-confirm-button {
    left: 18.8px !important;
    top: 436.8px !important;
    border-color: rgba(255, 255, 255, 0.94) !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.76), rgba(234, 255, 247, 0.72)) !important;
    box-shadow:
      0 18px 21px rgba(21, 149, 91, 0.12),
      inset -1px -1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html body #membershipPanel #membershipNote.form-note {
    left: 18.8px !important;
    top: 498.8px !important;
  }
}

/* Final cascade lock: keep the profile page on the mobile-home glass geometry. */
@media (max-width: 980px) {
  html body.view-profile #profile.profile-mobile-figma,
  html body.view-profile #profile.profile-mobile-figma.active-view {
    --profile-shell-width: min(358px, calc(100vw - 32px));
    --profile-shell-left: calc((100% - var(--profile-shell-width)) / 2);
    --profile-card-width: min(322px, calc(100vw - 68px));
    --profile-card-left: calc((100% - var(--profile-card-width)) / 2);
    --profile-embed-y: clamp(0.45px, 0.14vw, 0.7px);
    --profile-text-embed: 0 var(--profile-embed-y) 0 rgba(255, 255, 255, 0.62), 0 calc(var(--profile-embed-y) * -1) 0 rgba(15, 23, 42, 0.075), 0 7px 14px rgba(22, 30, 44, 0.045);
    --profile-heading-embed: 0 1px 0 rgba(255, 255, 255, 0.66), 0 -0.8px 0 rgba(15, 23, 42, 0.08), 0 10px 18px rgba(22, 30, 44, 0.055);
    --profile-number-embed: 0 1px 0 rgba(255, 255, 255, 0.72), 0 -0.85px 0 rgba(15, 23, 42, 0.09), 0 8px 15px rgba(21, 191, 169, 0.12);
    --profile-home-card-bg: radial-gradient(120% 86% at 94% 0%, rgba(255, 236, 140, 0.22), rgba(255, 255, 255, 0) 58%), linear-gradient(146deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.32) 100%);
    --profile-home-card-shadow: 0 22px 38px -27px rgba(111, 80, 10, 0.22), inset 1px 0 0 rgba(255, 237, 152, 0.28), inset -1px 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(104, 73, 8, 0.035);
    isolation: isolate !important;
    text-rendering: geometricPrecision !important;
    font-synthesis-weight: none !important;
    -webkit-font-smoothing: antialiased !important;
    background:
      radial-gradient(390px 300px at 50% -10%, rgba(255, 204, 32, 0.86), rgba(255, 224, 94, 0.38) 47%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(280px 360px at -12% 20%, rgba(255, 221, 78, 0.24), rgba(255, 255, 255, 0) 72%),
      radial-gradient(300px 340px at 112% 36%, rgba(255, 236, 147, 0.28), rgba(255, 255, 255, 0) 74%),
      linear-gradient(180deg, #ffd128 0%, #ffe88e 20%, #fff7df 49%, #fffdf7 100%) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::before,
  html body.view-profile #profile.profile-mobile-figma.active-view::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: var(--profile-shell-left) !important;
    top: 18px !important;
    width: var(--profile-shell-width) !important;
    height: min(812px, calc(100% - 36px)) !important;
    border-radius: 34px !important;
    pointer-events: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::before {
    z-index: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: linear-gradient(112deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025) 46%, rgba(255, 255, 255, 0.012)) !important;
    box-shadow: 0 30px 64px -28px rgba(21, 32, 51, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(15, 31, 46, 0.02), inset 1px 0 0 rgba(255, 255, 255, 0.16), inset -1px 0 0 rgba(255, 255, 255, 0.1) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::after {
    z-index: 1 !important;
    padding: 1px !important;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.22) 31%, rgba(255, 255, 255, 0.08) 54%, rgba(255, 255, 255, 0.54) 100%) !important;
    opacity: 0.2 !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-page-hero,
  html body.view-profile #profile.profile-mobile-figma .profile-summary,
  html body.view-profile #profile.profile-mobile-figma .content-grid {
    left: var(--profile-card-left) !important;
    width: var(--profile-card-width) !important;
    z-index: 2 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-page-hero { top: 36px !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-summary { top: 128px !important; }
  html body.view-profile #profile.profile-mobile-figma .content-grid { top: 294px !important; height: 432px !important; }

  html body.view-profile #profile.profile-mobile-figma .content-grid > .panel.wide-panel,
  html body.view-profile #profile.profile-mobile-figma .skill-progress-grid,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-learning-center {
    width: var(--profile-card-width) !important;
    height: 432px !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-top-rail, .profile-mobile-membership-card, .profile-mobile-learning-center, .profile-mobile-section-head, .profile-mobile-stat-grid, .profile-mobile-today-panel, .profile-mobile-records-panel) {
    width: var(--profile-card-width) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-top-rail, .profile-mobile-membership-card, .profile-mobile-today-panel, .profile-mobile-records-panel) {
    border-color: rgba(255, 255, 255, 0.82) !important;
    background: var(--profile-home-card-bg) !important;
    box-shadow: var(--profile-home-card-shadow) !important;
    backdrop-filter: blur(21px) saturate(1.2) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(21px) saturate(1.2) brightness(1.04) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-icon-button {
    left: auto !important;
    right: 13px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-cta,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-membership-cta,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head button {
    left: auto !important;
    right: 16px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head button {
    right: 0 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefits,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-benefits {
    width: calc(var(--profile-card-width) - 34px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-grid {
    grid-template-columns: repeat(3, 96px) !important;
    gap: 17px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card {
    width: 96px !important;
    border-color: rgba(255, 255, 255, 0.82) !important;
    background: radial-gradient(96% 92% at 18% 0%, color-mix(in srgb, var(--profile-stat-accent) 14%, rgba(255, 255, 255, 0)) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(146deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.44) 52%, rgba(255, 255, 255, 0.24) 100%) !important;
    box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--profile-stat-accent) 28%, rgba(21, 32, 51, 0.08)), inset 1px 0 0 color-mix(in srgb, var(--profile-stat-accent) 12%, rgba(255, 255, 255, 0.18)), inset -1px 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(72, 51, 7, 0.025) !important;
    backdrop-filter: blur(20px) saturate(1.22) brightness(1.03) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.22) brightness(1.03) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card small { left: 35px !important; width: 56px !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card strong,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card em { width: 70px !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel { top: 148px !important; height: 96px !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-panel { top: 258px !important; height: 174px !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-list { left: 17px !important; width: calc(var(--profile-card-width) - 34px) !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row { width: calc(var(--profile-card-width) - 34px) !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row .profile-mobile-record-copy,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row strong { width: 150px !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row small { width: 132px !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row em { left: auto !important; right: 36px !important; width: 52px !important; }
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-action { left: auto !important; right: 0 !important; }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-icon-button, .profile-mobile-membership-cta, .profile-mobile-benefit, .profile-mobile-section-head button, .profile-mobile-record-action),
  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab.active {
    border-color: rgba(255, 255, 255, 0.74) !important;
    background: radial-gradient(96% 96% at 26% 10%, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.18) 56%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18)) !important;
    box-shadow: 0 13px 18px -16px rgba(103, 75, 12, 0.22), inset 1px 0 0 rgba(255, 226, 112, 0.18), inset -1px 0 0 rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -1px 0 rgba(91, 64, 6, 0.045) !important;
    backdrop-filter: blur(16px) saturate(1.08) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) brightness(1.02) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(h2, h3, p, small, strong, em, b, button, .profile-mobile-membership-badge, .profile-mobile-benefit, .profile-mobile-record-copy),
  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab {
    letter-spacing: 0 !important;
    text-shadow: var(--profile-text-embed) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-top-copy h2, .profile-mobile-membership-card h3, .profile-mobile-section-head h2, .profile-mobile-today-panel h3, .profile-mobile-records-head h3) {
    text-shadow: var(--profile-heading-embed) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-stat-card strong, .profile-mobile-today-panel strong) {
    text-shadow: var(--profile-number-embed) !important;
  }

  html body.view-profile nav.mobile-tabbar.mobile-tabbar {
    border-color: rgba(255, 255, 255, 0.78) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 82%), linear-gradient(90deg, rgba(116, 128, 140, 0.012), rgba(116, 128, 140, 0.012)) !important;
    box-shadow: 0 18px 32px -22px rgba(21, 32, 51, 0.1), inset 1px 0 0 rgba(255, 255, 255, 0.3), inset -1px 0 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(15, 31, 46, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(22px) saturate(1.5) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(1.04) !important;
  }

  html:has(body.view-profile),
  html body.view-profile,
  html body.view-profile .app-shell,
  html body.view-profile .main,
  html body.view-profile #profile.profile-mobile-figma {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html:has(body.view-profile)::-webkit-scrollbar,
  html body.view-profile::-webkit-scrollbar,
  html body.view-profile .app-shell::-webkit-scrollbar,
  html body.view-profile .main::-webkit-scrollbar,
  html body.view-profile #profile.profile-mobile-figma::-webkit-scrollbar,
  html body.view-profile *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* Profile shell visibility pass: keep home geometry, raise the white glass edge. */
@media (max-width: 980px) {
  html body.view-profile #profile.profile-mobile-figma.active-view::before {
    border: 1.2px solid rgba(255, 255, 255, 0.48) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.052) 58%, rgba(255, 255, 255, 0.014)) !important;
    box-shadow:
      0 30px 64px -28px rgba(21, 32, 51, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(122, 91, 12, 0.028),
      inset 1px 0 0 rgba(255, 237, 152, 0.18),
      inset -1px 0 0 rgba(255, 255, 255, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::after {
    opacity: 0.46 !important;
    background:
      linear-gradient(118deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 246, 188, 0.32) 22%, rgba(255, 255, 255, 0.13) 54%, rgba(255, 255, 255, 0.7) 100%) !important;
  }
}

/* Profile mobile polish v6: stronger home-like glass frame and softer embedded type. */
@media (max-width: 980px) {
  html body.view-profile #profile.profile-mobile-figma,
  html body.view-profile #profile.profile-mobile-figma.active-view {
    --profile-text-embed:
      0 0.8px 0 rgba(255, 255, 255, 0.72),
      0 -0.45px 0 rgba(15, 23, 42, 0.055),
      0 5px 11px rgba(22, 30, 44, 0.032);
    --profile-heading-embed:
      0 0.9px 0 rgba(255, 255, 255, 0.74),
      0 -0.5px 0 rgba(15, 23, 42, 0.06),
      0 7px 13px rgba(22, 30, 44, 0.036);
    --profile-number-embed:
      0 0.9px 0 rgba(255, 255, 255, 0.76),
      0 -0.5px 0 rgba(15, 23, 42, 0.065),
      0 5px 10px rgba(21, 191, 169, 0.08);
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::before {
    border: 1.35px solid rgba(255, 255, 255, 0.84) !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)),
      linear-gradient(104deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.055) 54%, rgba(255, 255, 255, 0.018) 100%) !important;
    box-shadow:
      0 32px 68px -28px rgba(21, 32, 51, 0.11),
      0 0 0 1px rgba(255, 255, 255, 0.16),
      inset 0 0 0 10px rgba(255, 255, 255, 0.105),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(15, 31, 46, 0.025),
      inset 1px 0 0 rgba(255, 255, 255, 0.44),
      inset -1px 0 0 rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(22px) saturate(1.35) brightness(1.03) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35) brightness(1.03) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::after {
    padding: 1.4px !important;
    opacity: 0.76 !important;
    background:
      linear-gradient(118deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 249, 217, 0.54) 24%, rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0.84) 100%) !important;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.38)) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head span {
    display: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head h2 {
    margin: 0 !important;
    width: 178px !important;
    color: rgba(18, 23, 34, 0.94) !important;
    font-size: 21px !important;
    font-weight: 620 !important;
    line-height: 26px !important;
    text-shadow: var(--profile-heading-embed) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-top-copy h2, .profile-mobile-membership-card h3, .profile-mobile-today-panel h3, .profile-mobile-records-head h3) {
    color: rgba(18, 23, 34, 0.94) !important;
    font-weight: 620 !important;
    text-shadow: var(--profile-heading-embed) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy h2 {
    font-size: 23px !important;
    line-height: 29px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card h3 {
    font-size: 17px !important;
    line-height: 22px !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-stat-card small, .profile-mobile-stat-card em, .profile-mobile-top-copy p, .profile-mobile-membership-card p, .profile-mobile-today-panel p, .profile-mobile-record-row small) {
    color: rgba(100, 111, 128, 0.9) !important;
    font-weight: 520 !important;
    text-shadow: var(--profile-text-embed) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-stat-card strong, .profile-mobile-today-panel strong) {
    color: rgba(18, 23, 34, 0.95) !important;
    font-weight: 640 !important;
    text-shadow: var(--profile-number-embed) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-section-head button, .profile-mobile-membership-cta, .profile-mobile-benefit, .profile-mobile-records-head button, .profile-mobile-record-row strong, .profile-mobile-record-row em),
  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab {
    font-weight: 580 !important;
    text-shadow: var(--profile-text-embed) !important;
  }
}

/* Profile mobile polish v8: release native scroll and let cards transmit the warm backdrop. */
@media (max-width: 980px) {
  html:has(body.view-profile),
  html body.view-profile {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.view-profile .app-shell,
  html body.view-profile .app-shell > .main,
  html body.view-profile .main {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.view-profile #profile.profile-mobile-figma,
  html body.view-profile #profile.profile-mobile-figma.active-view {
    min-height: 1040px !important;
    height: 1040px !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    padding-bottom: 154px !important;
    will-change: auto !important;
    background:
      radial-gradient(330px 360px at 50% -6%, rgba(255, 205, 32, 0.78), rgba(255, 226, 105, 0.34) 48%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(260px 320px at 92% 20%, rgba(255, 232, 113, 0.32), rgba(255, 255, 255, 0) 72%),
      radial-gradient(250px 340px at 8% 50%, rgba(255, 223, 100, 0.18), rgba(255, 255, 255, 0) 74%),
      radial-gradient(320px 420px at 102% 68%, rgba(180, 255, 235, 0.22), rgba(255, 255, 255, 0) 76%),
      linear-gradient(180deg, #ffd128 0%, #ffe995 19%, #fff7dc 46%, #fffef9 72%, #ffffff 100%) !important;
    --profile-home-card-bg:
      radial-gradient(118% 92% at 12% 0%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.14) 58%, rgba(255, 255, 255, 0.06) 100%),
      radial-gradient(112% 96% at 92% 14%, rgba(255, 231, 117, 0.26), rgba(255, 255, 255, 0) 58%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.24) 54%, rgba(255, 255, 255, 0.12) 100%);
    --profile-home-card-shadow:
      0 20px 34px -28px rgba(111, 80, 10, 0.18),
      inset 1px 0 0 rgba(255, 237, 152, 0.22),
      inset -1px 0 0 rgba(255, 255, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 -1px 0 rgba(104, 73, 8, 0.028);
  }

  html body.view-profile::after {
    content: "" !important;
    display: block !important;
    width: 1px !important;
    height: 156px !important;
    pointer-events: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::before {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.1)),
      linear-gradient(104deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 54%, rgba(255, 255, 255, 0.012) 100%) !important;
    box-shadow:
      0 30px 64px -30px rgba(21, 32, 51, 0.1),
      0 0 0 1px rgba(255, 255, 255, 0.14),
      inset 0 0 0 9px rgba(255, 255, 255, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 -1px 0 rgba(15, 31, 46, 0.02),
      inset 1px 0 0 rgba(255, 255, 255, 0.38),
      inset -1px 0 0 rgba(255, 255, 255, 0.22) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-top-rail, .profile-mobile-membership-card, .profile-mobile-today-panel, .profile-mobile-records-panel) {
    border-color: rgba(255, 255, 255, 0.78) !important;
    background: var(--profile-home-card-bg) !important;
    background-color: transparent !important;
    box-shadow: var(--profile-home-card-shadow) !important;
    backdrop-filter: blur(28px) saturate(1.38) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.38) brightness(1.05) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card::before,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid::before {
    background:
      linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(47, 191, 156, 0.28), rgba(255, 233, 164, 0.26)) border-box !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card {
    border-color: rgba(255, 255, 255, 0.76) !important;
    background:
      radial-gradient(100% 94% at 16% 0%, color-mix(in srgb, var(--profile-stat-accent) 18%, rgba(255, 255, 255, 0)) 0%, rgba(255, 255, 255, 0) 58%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.24) 54%, rgba(255, 255, 255, 0.1) 100%) !important;
    box-shadow:
      0 16px 28px -25px color-mix(in srgb, var(--profile-stat-accent) 24%, rgba(21, 32, 51, 0.06)),
      inset 1px 0 0 color-mix(in srgb, var(--profile-stat-accent) 10%, rgba(255, 255, 255, 0.15)),
      inset -1px 0 0 rgba(255, 255, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(72, 51, 7, 0.02) !important;
    backdrop-filter: blur(26px) saturate(1.36) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.36) brightness(1.05) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-section-head button, .profile-mobile-membership-cta, .profile-mobile-benefit, .profile-mobile-record-action),
  html body.view-profile nav.mobile-tabbar.mobile-tabbar .mobile-tab.active {
    background:
      radial-gradient(100% 100% at 28% 8%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.14) 58%, rgba(255, 255, 255, 0.08) 100%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12)) !important;
    backdrop-filter: blur(18px) saturate(1.18) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) brightness(1.04) !important;
  }
}

/* Mobile profile editor: align the edit sheet with the home and question-bank glass system. */
@media (max-width: 980px) {
  html body .user-profile-editor {
    z-index: 10020 !important;
    align-items: start !important;
    justify-items: center !important;
    padding: max(18px, env(safe-area-inset-top, 0px)) 12px max(24px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
      linear-gradient(112deg, rgba(255, 224, 74, 0.54) 0%, rgba(255, 238, 151, 0.24) 27%, rgba(255, 255, 255, 0) 50%),
      linear-gradient(252deg, rgba(244, 255, 250, 0.64) 0%, rgba(255, 255, 255, 0) 43%),
      linear-gradient(180deg, #ffd94b 0%, #ffe78c 15%, #fff3cd 34%, #fffaf1 52%, #ffffff 78%, #ffffff 100%) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  }

  html body .user-profile-editor.open {
    display: grid !important;
  }

  html body .user-profile-editor,
  html body .user-profile-editor * {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
    letter-spacing: 0 !important;
  }

  html body .user-profile-editor .consult-dialog {
    position: relative !important;
    width: min(430px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 34px) !important;
    margin: 0 auto !important;
    padding: 30px 18px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 32px !important;
    color: rgba(18, 23, 34, 0.94) !important;
    background:
      radial-gradient(118% 92% at 12% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.28) 58%, rgba(255, 255, 255, 0.12) 100%),
      radial-gradient(112% 96% at 92% 12%, rgba(255, 231, 117, 0.34), rgba(255, 255, 255, 0) 58%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 54%, rgba(255, 255, 255, 0.16) 100%) !important;
    box-shadow:
      0 30px 64px -30px rgba(21, 32, 51, 0.16),
      0 0 0 1px rgba(255, 255, 255, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(104, 73, 8, 0.03),
      inset 1px 0 0 rgba(255, 237, 152, 0.2) !important;
    backdrop-filter: blur(30px) saturate(1.36) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.36) brightness(1.05) !important;
  }

  html body .user-profile-editor .consult-dialog::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    z-index: 0 !important;
    border-radius: 30px !important;
    pointer-events: none !important;
    background: linear-gradient(132deg, rgba(255, 255, 255, 0.34), transparent 34%, transparent 72%, rgba(255, 255, 255, 0.14)) !important;
    opacity: 0.52 !important;
  }

  html body .user-profile-editor .consult-dialog > :not(.close-btn) {
    position: relative !important;
    z-index: 1 !important;
  }

  html body .user-profile-editor .close-btn {
    top: 18px !important;
    right: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 999px !important;
    color: rgba(18, 23, 34, 0.9) !important;
    background:
      radial-gradient(100% 100% at 30% 8%, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.18) 62%),
      rgba(255, 255, 255, 0.36) !important;
    box-shadow:
      0 16px 30px -24px rgba(21, 32, 51, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(78, 92, 108, 0.05) !important;
    font-size: 30px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  }

  html body .user-profile-editor .eyebrow {
    margin: 0 58px 14px 2px !important;
    color: #a87400 !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  }

  html body .user-profile-editor h2 {
    max-width: calc(100% - 58px) !important;
    margin: 0 !important;
    color: rgba(18, 23, 34, 0.96) !important;
    font-size: clamp(31px, 8.6vw, 40px) !important;
    font-weight: 780 !important;
    line-height: 1.06 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.74),
      0 -0.5px 0 rgba(15, 23, 42, 0.06),
      0 8px 16px rgba(22, 30, 44, 0.04) !important;
  }

  html body .user-profile-editor .user-editor-subtitle {
    margin: 10px 0 22px !important;
    color: rgba(90, 101, 118, 0.84) !important;
    font-size: 14px !important;
    font-weight: 540 !important;
    line-height: 1.45 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  }

  html body .user-profile-editor .user-editor-avatar {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 130px !important;
    margin: 0 0 22px !important;
    padding: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(120% 105% at 8% 0%, rgba(255, 215, 52, 0.18), rgba(255, 255, 255, 0) 56%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.22)) !important;
    box-shadow:
      0 18px 34px -28px rgba(111, 80, 10, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(104, 73, 8, 0.03) !important;
    backdrop-filter: blur(24px) saturate(1.26) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.26) !important;
  }

  html body .user-profile-editor .user-editor-avatar img {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    border: 4px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      0 18px 28px -22px rgba(21, 32, 51, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    object-fit: cover !important;
  }

  html body .user-profile-editor .user-editor-avatar-copy {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }

  html body .user-profile-editor .user-editor-avatar-copy strong {
    color: rgba(18, 23, 34, 0.94) !important;
    font-size: 21px !important;
    font-weight: 760 !important;
    line-height: 1.12 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  }

  html body .user-profile-editor .user-editor-avatar-copy p {
    margin: 0 !important;
    color: rgba(91, 107, 128, 0.86) !important;
    font-size: 12px !important;
    font-weight: 530 !important;
    line-height: 1.35 !important;
  }

  html body .user-profile-editor .user-editor-upload-control {
    position: relative !important;
    display: inline-grid !important;
    grid-template-columns: auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    margin: 2px 0 0 !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 999px !important;
    background:
      radial-gradient(100% 100% at 30% 8%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16) 62%),
      rgba(255, 255, 255, 0.32) !important;
    box-shadow:
      0 12px 24px -22px rgba(21, 32, 51, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    color: #2f8575 !important;
    font-weight: 720 !important;
    cursor: pointer !important;
    backdrop-filter: blur(16px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
  }

  html body .user-profile-editor .user-editor-upload-control span {
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .user-profile-editor .user-editor-upload-control small {
    color: rgba(91, 107, 128, 0.78) !important;
    font-size: 11px !important;
    font-weight: 620 !important;
    line-height: 1 !important;
  }

  html body .user-profile-editor .user-editor-upload-control input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
  }

  html body .user-profile-editor .user-editor-fields {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
  }

  html body .user-profile-editor .user-editor-field,
  html body .user-profile-editor .consult-dialog > label {
    display: grid !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    color: rgba(87, 77, 68, 0.88) !important;
    font-size: 14px !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
  }

  html body .user-profile-editor .user-editor-field > span {
    padding-left: 2px !important;
  }

  html body .user-profile-editor .user-editor-field input,
  html body .user-profile-editor .user-editor-field select {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 19px !important;
    outline: 0 !important;
    color: rgba(18, 23, 34, 0.94) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
      rgba(255, 255, 255, 0.38) !important;
    box-shadow:
      0 16px 30px -28px rgba(21, 32, 51, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(104, 73, 8, 0.035) !important;
    font-size: 17px !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  }

  html body .user-profile-editor .user-editor-field select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
  }

  html body .user-profile-editor .user-editor-field input:focus,
  html body .user-profile-editor .user-editor-field select:focus {
    border-color: rgba(255, 255, 255, 0.92) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.46)),
      rgba(255, 255, 255, 0.42) !important;
    box-shadow:
      0 0 0 5px rgba(47, 191, 156, 0.08),
      0 18px 34px -28px rgba(21, 32, 51, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  html body .user-profile-editor .user-editor-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 20px 0 0 !important;
    padding-top: 2px !important;
  }

  html body .user-profile-editor .user-editor-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .user-profile-editor .user-editor-actions .ghost-btn {
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    color: rgba(47, 133, 117, 0.96) !important;
    background:
      radial-gradient(100% 100% at 30% 8%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16) 62%),
      rgba(255, 255, 255, 0.28) !important;
    box-shadow:
      0 14px 26px -23px rgba(21, 32, 51, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  html body .user-profile-editor .user-editor-actions .primary-btn {
    border: 1px solid rgba(199, 140, 0, 0.16) !important;
    color: #ffffff !important;
    background:
      linear-gradient(145deg, #d59a00 0%, #bd7d00 100%) !important;
    box-shadow:
      0 18px 32px -22px rgba(189, 125, 0, 0.58),
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      inset 0 -1px 0 rgba(72, 51, 7, 0.16) !important;
  }
}

@media (max-width: 380px) {
  html body .user-profile-editor .user-editor-avatar {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  html body .user-profile-editor .user-editor-avatar img {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
  }

  html body .user-profile-editor .user-editor-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Profile scroll stability v9: make the page height real before the first touch. */
@media screen and (max-width: 980px) {
  html:has(body.view-profile),
  html body.view-profile {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.view-profile .app-shell,
  html body.view-profile .app-shell > .main,
  html body.view-profile .main {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  html body.view-profile #profile.view.profile-mobile-figma,
  html body.view-profile #profile.view.profile-mobile-figma.active-view {
    display: block !important;
    position: relative !important;
    height: 1160px !important;
    min-height: 1160px !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    contain: none !important;
  }

  html body.view-profile::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
  }
}

/* Profile mobile spacious glass v13: match the home mobile glass rhythm. */
@media screen and (max-width: 760px) {
  html body.view-profile #profile.view.profile-mobile-figma,
  html body.view-profile #profile.view.profile-mobile-figma.active-view {
    --profile-shell-width: min(365px, calc(100vw - 18px)) !important;
    --profile-shell-left: calc((100% - var(--profile-shell-width)) / 2) !important;
    --profile-card-width: min(341px, calc(100vw - 32px)) !important;
    --profile-card-left: calc((100% - var(--profile-card-width)) / 2) !important;
    --profile-scroll-tint: 0;
    --profile-glass-sheen: rgba(255, 255, 255, 0.48);
    --profile-glass-shadow-live:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -18px 42px rgba(255, 255, 255, 0.06),
      0 20px 48px -30px rgba(24, 35, 49, 0.34);
    height: 1240px !important;
    min-height: 1240px !important;
    padding-bottom: 168px !important;
    background:
      radial-gradient(340px 360px at 50% -5%, rgba(255, 207, 35, 0.82), rgba(255, 228, 111, 0.36) 48%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(290px 340px at 95% 18%, rgba(255, 232, 113, 0.34), rgba(255, 255, 255, 0) 72%),
      radial-gradient(310px 380px at 4% 51%, rgba(255, 226, 118, 0.2), rgba(255, 255, 255, 0) 76%),
      radial-gradient(360px 440px at 108% 74%, rgba(177, 255, 235, 0.22), rgba(255, 255, 255, 0) 76%),
      linear-gradient(180deg, #ffd128 0%, #ffe996 20%, #fff7df 45%, #fffdf7 72%, #ffffff 100%) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.active-view::before,
  html body.view-profile #profile.profile-mobile-figma.active-view::after {
    left: var(--profile-shell-left) !important;
    width: var(--profile-shell-width) !important;
    height: calc(100% - 38px) !important;
    border-radius: 36px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-page-hero,
  html body.view-profile #profile.profile-mobile-figma .profile-summary,
  html body.view-profile #profile.profile-mobile-figma .content-grid {
    left: var(--profile-card-left) !important;
    width: var(--profile-card-width) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-page-hero {
    top: 30px !important;
    height: 82px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-summary {
    top: 134px !important;
    height: 164px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .content-grid {
    top: 328px !important;
    height: 560px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .content-grid > .panel.wide-panel,
  html body.view-profile #profile.profile-mobile-figma .skill-progress-grid,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-learning-center {
    width: var(--profile-card-width) !important;
    height: 560px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-rail,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-grid,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-panel {
    width: var(--profile-card-width) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-rail,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-panel,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row,
  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-membership-cta.profile-mobile-membership-cta,
  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-section-head button {
    --glass-x: 50%;
    --glass-y: 18%;
    --glass-rx: 0deg;
    --glass-ry: 0deg;
    --profile-card-scroll-glow: 0;
    position: relative !important;
    overflow: hidden !important;
    border-color: rgba(255, 255, 255, 0.78) !important;
    background:
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.68), transparent 36%),
      radial-gradient(118% 92% at 12% 0%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.13) 58%, rgba(255, 255, 255, 0.06) 100%),
      radial-gradient(112% 96% at 92% 14%, rgba(255, 231, 117, 0.24), rgba(255, 255, 255, 0) 58%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12)) !important;
    box-shadow: var(--profile-glass-shadow-live) !important;
    transform: perspective(900px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(0) !important;
    transform-style: preserve-3d !important;
    will-change: transform, box-shadow, background, filter !important;
    transition:
      transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      filter 180ms ease !important;
    backdrop-filter: blur(28px) saturate(1.36) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.36) brightness(1.05) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card,
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  )::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      linear-gradient(122deg, rgba(255, 255, 255, 0.42), transparent 26%, transparent 72%, rgba(255, 255, 255, 0.16)),
      radial-gradient(circle at var(--glass-x) var(--glass-y), var(--profile-glass-sheen), transparent 28%) !important;
    opacity: calc(0.48 + (var(--profile-card-scroll-glow, 0) * 0.26)) !important;
    mix-blend-mode: screen !important;
    transition: opacity 180ms ease, background 180ms ease !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card,
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  ) > * {
    z-index: 1 !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card,
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  ).is-glass-hover,
  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card,
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  ).is-profile-scroll-lit {
    border-color: rgba(255, 255, 255, 0.88) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -18px 42px rgba(255, 255, 255, 0.09),
      0 24px 54px -27px rgba(24, 35, 49, 0.4) !important;
    filter: saturate(1.07) brightness(1.025) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  ).is-glass-press {
    transform: perspective(900px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(2px) scale(0.982) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.is-profile-glass-ready .profile-page-hero,
  html body.view-profile #profile.profile-mobile-figma.is-profile-glass-ready .profile-summary,
  html body.view-profile #profile.profile-mobile-figma.is-profile-glass-ready .content-grid {
    animation: profileMobileGlassRise 520ms cubic-bezier(0.2, 0.85, 0.24, 1) both !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-rail {
    height: 82px !important;
    border-radius: 36px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-brand {
    left: 14px !important;
    top: 13px !important;
    width: 54px !important;
    height: 54px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy {
    left: 84px !important;
    top: 16px !important;
    width: calc(100% - 154px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy h2 {
    width: 100% !important;
    font-size: 23px !important;
    line-height: 28px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-copy p {
    width: 100% !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-icon-button {
    right: 14px !important;
    top: 18px !important;
    width: 46px !important;
    height: 46px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card {
    height: 164px !important;
    border-radius: 34px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-symbol {
    left: 8px !important;
    top: 6px !important;
    width: 84px !important;
    height: 104px !important;
  }

  .profile-mobile-membership-mascot-stage {
    animation: profileMembershipMascotFloat 6.2s ease-in-out infinite;
    transform-origin: 50% 88%;
  }

  .profile-mobile-membership-mascot {
    position: absolute;
    left: 50%;
    top: -25px;
    width: 152px;
    height: 152px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    transform: translateX(-50%);
    filter: drop-shadow(0 8px 8px rgba(88, 56, 7, 0.08));
    pointer-events: none;
    user-select: none;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-badge {
    left: 100px !important;
    top: 19px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card h3 {
    left: 100px !important;
    top: 54px !important;
    width: calc(100% - 124px) !important;
    font-size: 18px !important;
    line-height: 23px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card p {
    left: 100px !important;
    top: 82px !important;
    width: calc(100% - 122px) !important;
    font-size: 12.5px !important;
    line-height: 17px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-cta {
    position: absolute !important;
    right: 18px !important;
    top: 18px !important;
    width: 92px !important;
    height: 34px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefits,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-benefits {
    left: 16px !important;
    right: 16px !important;
    top: 116px !important;
    width: calc(100% - 32px) !important;
    height: 34px !important;
    gap: 10px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-benefit:nth-child(n),
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-benefit {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 34px !important;
    padding: 0 7px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-learning-center {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: 52px !important;
    margin: 0 0 18px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head h2 {
    width: 190px !important;
    font-size: 21px !important;
    line-height: 26px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head button {
    position: absolute !important;
    right: 0 !important;
    top: 8px !important;
    width: 98px !important;
    height: 36px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-grid {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: var(--profile-card-width) !important;
    height: 92px !important;
    margin: 0 0 20px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card {
    width: auto !important;
    min-width: 0 !important;
    height: 92px !important;
    border-radius: 24px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-icon {
    left: 13px !important;
    top: 13px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card small {
    left: 39px !important;
    top: 13px !important;
    width: calc(100% - 48px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card strong {
    left: 13px !important;
    top: 41px !important;
    width: calc(100% - 20px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card em {
    left: 13px !important;
    top: 68px !important;
    width: calc(100% - 20px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: 112px !important;
    margin: 0 0 20px !important;
    border-radius: 30px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel h3 {
    left: 20px !important;
    top: 18px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel p {
    left: 20px !important;
    top: 46px !important;
    width: calc(100% - 106px) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel strong {
    right: 20px !important;
    top: 20px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-today-panel > i {
    left: 20px !important;
    right: 20px !important;
    top: 84px !important;
    height: 5px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: 218px !important;
    border-radius: 30px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-head h3 {
    left: 20px !important;
    top: 19px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-records-head button {
    right: 20px !important;
    top: 21px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-list {
    left: 18px !important;
    right: 18px !important;
    top: 58px !important;
    width: calc(100% - 36px) !important;
    gap: 12px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row {
    width: 100% !important;
    height: 38px !important;
    padding: 0 7px 0 0 !important;
    border-radius: 18px !important;
    grid-template-columns: 48px minmax(0, 1fr) 58px 24px !important;
    gap: 9px !important;
    background:
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.56), transparent 36%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 10px 22px -20px rgba(24, 35, 49, 0.22) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row > b {
    width: 42px !important;
    height: 26px !important;
    margin-left: 4px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row strong,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-row small {
    width: 100% !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card .profile-mobile-membership-cta.profile-mobile-membership-cta {
    position: absolute !important;
    left: auto !important;
    right: 18px !important;
    top: 18px !important;
    z-index: 2 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-card > .profile-mobile-benefits.profile-mobile-benefits {
    position: absolute !important;
    z-index: 2 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-learning-center .profile-mobile-section-head button {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 8px !important;
  }
}

@keyframes profileMobileGlassRise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Profile mobile glass stability v14: warm substrate, translucent cards, cheaper scroll paint. */
@media screen and (max-width: 760px) {
  html:has(body.view-profile) {
    background:
      radial-gradient(420px 310px at 50% -9%, rgba(255, 204, 32, 0.84), rgba(255, 223, 92, 0.36) 46%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(320px 360px at 108% 12%, rgba(255, 231, 109, 0.3), rgba(255, 255, 255, 0) 70%),
      linear-gradient(180deg, #ffd128 0%, #ffe78a 20%, #fff7df 49%, #fffdf7 76%, #fff7df 100%) !important;
    background-attachment: scroll !important;
    background-size: auto !important;
    background-color: #fff7df !important;
  }

  html body.view-profile {
    background:
      radial-gradient(420px 310px at 50% -9%, rgba(255, 204, 32, 0.84), rgba(255, 223, 92, 0.36) 46%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(320px 360px at 108% 12%, rgba(255, 231, 109, 0.3), rgba(255, 255, 255, 0) 70%),
      linear-gradient(180deg, #ffd128 0%, #ffe78a 20%, #fff7df 49%, #fffdf7 76%, #fff7df 100%) !important;
    background-attachment: scroll !important;
    background-size: auto !important;
    background-color: #fff7df !important;
    overscroll-behavior-y: contain !important;
  }

  html body.view-profile .app-shell,
  html body.view-profile .app-shell > .main,
  html body.view-profile .main {
    background: transparent !important;
  }

  html body.view-profile #profile.view.profile-mobile-figma,
  html body.view-profile #profile.view.profile-mobile-figma.active-view {
    height: 1320px !important;
    min-height: 1320px !important;
    background:
      radial-gradient(340px 360px at 50% -5%, rgba(255, 207, 35, 0.82), rgba(255, 228, 111, 0.36) 48%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(290px 340px at 95% 18%, rgba(255, 232, 113, 0.34), rgba(255, 255, 255, 0) 72%),
      radial-gradient(310px 380px at 4% 51%, rgba(255, 226, 118, 0.2), rgba(255, 255, 255, 0) 76%),
      radial-gradient(360px 440px at 108% 74%, rgba(177, 255, 235, 0.22), rgba(255, 255, 255, 0) 76%),
      linear-gradient(180deg, #ffd128 0%, #ffe78a 20%, #fff7df 45%, #fffdf7 72%, #fff7df 100%) !important;
    background-attachment: scroll !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card,
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  ) {
    border-color: rgba(255, 255, 255, 0.58) !important;
    background:
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgb(255 255 255 / calc(0.34 + (var(--profile-card-scroll-glow, 0) * 0.14))), transparent 38%),
      radial-gradient(118% 92% at 12% 0%, rgb(255 255 255 / calc(0.24 + (var(--profile-card-scroll-glow, 0) * 0.08))), rgb(255 255 255 / 0.07) 58%, rgb(255 255 255 / 0.035) 100%),
      radial-gradient(112% 96% at 92% 14%, rgb(255 216 64 / calc(0.12 + (var(--profile-scroll-tint, 0) * 0.08))), transparent 60%),
      linear-gradient(146deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04)),
      rgb(255 255 255 / 0.045) !important;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.68),
      inset 0 -12px 32px rgb(255 255 255 / 0.035),
      0 18px 42px -30px rgb(24 35 49 / 0.26) !important;
    transform: translateZ(0) !important;
    transform-style: flat !important;
    will-change: auto !important;
    transition:
      box-shadow 170ms ease,
      border-color 170ms ease,
      transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    backdrop-filter: blur(18px) saturate(1.2) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) brightness(1.02) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card,
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  )::after {
    background:
      linear-gradient(122deg, rgb(255 255 255 / 0.24), transparent 28%, transparent 74%, rgb(255 255 255 / 0.1)),
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgb(255 255 255 / calc(0.24 + (var(--profile-card-scroll-glow, 0) * 0.12))), transparent 30%) !important;
    opacity: calc(0.28 + (var(--profile-card-scroll-glow, 0) * 0.16)) !important;
    mix-blend-mode: normal !important;
    transition: opacity 160ms ease !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card
  ).is-profile-scroll-lit {
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.76),
      inset 0 -12px 32px rgb(255 255 255 / 0.045),
      0 20px 44px -31px rgb(24 35 49 / 0.3) !important;
    filter: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-top-rail.profile-mobile-top-rail,
    .profile-mobile-membership-card.profile-mobile-membership-card,
    .profile-mobile-today-panel.profile-mobile-today-panel,
    .profile-mobile-records-panel.profile-mobile-records-panel,
    .profile-mobile-stat-card.profile-mobile-stat-card
  ).is-profile-scroll-lit,
  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-top-rail.profile-mobile-top-rail,
    .profile-mobile-membership-card.profile-mobile-membership-card,
    .profile-mobile-today-panel.profile-mobile-today-panel,
    .profile-mobile-records-panel.profile-mobile-records-panel,
    .profile-mobile-stat-card.profile-mobile-stat-card
  ).is-glass-hover {
    filter: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  ).is-glass-press {
    transform: translateY(1px) scale(0.986) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.is-profile-glass-ready .profile-page-hero,
  html body.view-profile #profile.profile-mobile-figma.is-profile-glass-ready .profile-summary,
  html body.view-profile #profile.profile-mobile-figma.is-profile-glass-ready .content-grid {
    animation: none !important;
  }
}

/* Profile mobile glass depth v16: match home with mixed frosted and light glass layers. */
@media screen and (max-width: 760px) {
  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel
  ) {
    border-color: rgba(255, 255, 255, 0.66) !important;
    background:
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgb(255 255 255 / calc(0.48 + (var(--profile-card-scroll-glow, 0) * 0.08))), transparent 37%),
      radial-gradient(118% 92% at 12% 0%, rgb(255 255 255 / calc(0.38 + (var(--profile-card-scroll-glow, 0) * 0.07))), rgb(255 255 255 / 0.14) 58%, rgb(255 255 255 / 0.08) 100%),
      radial-gradient(112% 96% at 92% 14%, rgb(255 222 82 / calc(0.18 + (var(--profile-scroll-tint, 0) * 0.06))), transparent 62%),
      linear-gradient(145deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.16)),
      rgb(255 255 255 / 0.13) !important;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.86),
      inset 0 -1px 0 rgb(82 109 126 / 0.05),
      0 18px 36px -30px rgb(31 42 55 / 0.34) !important;
    backdrop-filter: blur(24px) saturate(1.14) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.14) brightness(1.02) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-stat-card {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background:
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgb(255 255 255 / calc(0.46 + (var(--profile-card-scroll-glow, 0) * 0.08))), transparent 37%),
      radial-gradient(112% 92% at 12% 0%, rgb(255 255 255 / calc(0.34 + (var(--profile-card-scroll-glow, 0) * 0.07))), rgb(255 255 255 / 0.12) 58%, rgb(255 255 255 / 0.06) 100%),
      linear-gradient(145deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.2)),
      rgb(255 255 255 / 0.16) !important;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.82),
      0 14px 30px -26px rgb(31 42 55 / 0.32) !important;
    backdrop-filter: blur(18px) saturate(1.1) brightness(1.01) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.1) brightness(1.01) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  ) {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background:
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgb(255 255 255 / calc(0.3 + (var(--profile-card-scroll-glow, 0) * 0.08))), transparent 38%),
      linear-gradient(145deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0.07)),
      rgb(255 255 255 / 0.035) !important;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.58),
      0 10px 22px -20px rgb(24 35 49 / 0.2) !important;
    backdrop-filter: blur(14px) saturate(1.12) brightness(1.01) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.12) brightness(1.01) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel
  )::after {
    background:
      linear-gradient(122deg, rgb(255 255 255 / 0.32), transparent 28%, transparent 74%, rgb(255 255 255 / 0.12)),
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgb(255 255 255 / calc(0.28 + (var(--profile-card-scroll-glow, 0) * 0.12))), transparent 30%) !important;
    opacity: calc(0.34 + (var(--profile-card-scroll-glow, 0) * 0.12)) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-stat-card::after {
    background:
      linear-gradient(122deg, rgb(255 255 255 / 0.26), transparent 28%, transparent 74%, rgb(255 255 255 / 0.1)),
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgb(255 255 255 / calc(0.22 + (var(--profile-card-scroll-glow, 0) * 0.1))), transparent 30%) !important;
    opacity: calc(0.28 + (var(--profile-card-scroll-glow, 0) * 0.1)) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  )::after {
    background:
      linear-gradient(122deg, rgb(255 255 255 / 0.18), transparent 28%, transparent 74%, rgb(255 255 255 / 0.08)),
      radial-gradient(circle at var(--glass-x) var(--glass-y), rgb(255 255 255 / 0.18), transparent 30%) !important;
    opacity: 0.22 !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card
  ).is-profile-scroll-lit,
  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card
  ).is-glass-hover {
    filter: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-top-rail.profile-mobile-top-rail,
    .profile-mobile-membership-card.profile-mobile-membership-card,
    .profile-mobile-today-panel.profile-mobile-today-panel,
    .profile-mobile-records-panel.profile-mobile-records-panel
  ).is-profile-scroll-lit,
  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma :is(
    .profile-mobile-top-rail.profile-mobile-top-rail,
    .profile-mobile-membership-card.profile-mobile-membership-card,
    .profile-mobile-today-panel.profile-mobile-today-panel,
    .profile-mobile-records-panel.profile-mobile-records-panel
  ).is-glass-hover {
    border-color: rgba(255, 255, 255, 0.72) !important;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.88),
      inset 0 -1px 0 rgb(82 109 126 / 0.05),
      0 20px 38px -31px rgb(31 42 55 / 0.34) !important;
    filter: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-stat-card.profile-mobile-stat-card.is-profile-scroll-lit,
  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-stat-card.profile-mobile-stat-card.is-glass-hover {
    border-color: rgba(255, 255, 255, 0.66) !important;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.84),
      0 16px 32px -28px rgb(31 42 55 / 0.34) !important;
    filter: none !important;
  }
}

/* Profile mobile substrate cleanup v23: home backdrop, static frosted cards. */
@media screen and (max-width: 980px) {
  html:has(body.view-profile #profile.profile-mobile-figma),
  html:has(body.view-profile #profile.profile-mobile-figma) body.view-profile {
    background-color: #fffdf7 !important;
    background-image:
      radial-gradient(420px 310px at 50% -9%, rgba(255, 204, 32, 0.84), rgba(255, 223, 92, 0.36) 46%, rgba(255, 255, 255, 0) 74%),
      linear-gradient(180deg, #ffd128 0%, #ffe78a 20%, #fff7df 49%, #fffdf7 76%, #fffdf7 100%) !important;
    background-attachment: fixed, fixed !important;
    background-position: 0 0, 0 0 !important;
    background-repeat: repeat, repeat !important;
    background-size: auto, auto !important;
    overscroll-behavior-y: contain !important;
  }

  html:has(body.view-profile #profile.profile-mobile-figma) body.view-profile .app-shell,
  html:has(body.view-profile #profile.profile-mobile-figma) body.view-profile .app-shell > .main,
  html:has(body.view-profile #profile.profile-mobile-figma) body.view-profile .main,
  html body.view-profile #profile.view.profile-mobile-figma,
  html body.view-profile #profile.view.profile-mobile-figma.active-view,
  html body.view-profile #profile.profile-mobile-figma .profile-page-hero,
  html body.view-profile #profile.profile-mobile-figma .profile-summary,
  html body.view-profile #profile.profile-mobile-figma .content-grid,
  html body.view-profile #profile.profile-mobile-figma .panel.wide-panel,
  html body.view-profile #profile.profile-mobile-figma .skill-progress-grid,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-learning-center {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    background-attachment: scroll !important;
  }

  html body.view-profile #profile.view.profile-mobile-figma,
  html body.view-profile #profile.view.profile-mobile-figma.active-view {
    --glass-x: 50% !important;
    --glass-y: 18% !important;
    --profile-card-scroll-glow: 0 !important;
    --profile-scroll-tint: 0 !important;
    isolation: isolate !important;
    overflow: visible !important;
    transform: none !important;
    backface-visibility: visible !important;
  }

  html body.view-profile #profile.view.profile-mobile-figma.profile-mobile-figma::before,
  html body.view-profile #profile.view.profile-mobile-figma.profile-mobile-figma.active-view::before,
  html body.view-profile #profile.view.profile-mobile-figma.profile-mobile-figma::after,
  html body.view-profile #profile.view.profile-mobile-figma.profile-mobile-figma.active-view::after,
  html:has(body.view-profile #profile.profile-mobile-figma) body.view-profile::before,
  html:has(body.view-profile #profile.profile-mobile-figma) body.view-profile::after {
    content: none !important;
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-asset {
    display: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma > * {
    position: relative !important;
    z-index: 1 !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel
  ) {
    border-color: rgba(255, 255, 255, 0.68) !important;
    background:
      radial-gradient(118% 92% at 14% 0%, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.16) 60%, rgba(255, 255, 255, 0.08) 100%),
      radial-gradient(116% 96% at 92% 12%, rgba(255, 226, 92, 0.22), rgba(255, 255, 255, 0) 64%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.1) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(105, 84, 22, 0.035),
      0 18px 38px -30px rgba(31, 42, 55, 0.28) !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
    backdrop-filter: blur(22px) saturate(1.12) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) brightness(1.02) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-card {
    border-color: rgba(255, 255, 255, 0.62) !important;
    background:
      radial-gradient(110% 90% at 16% 0%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.1) 62%, rgba(255, 255, 255, 0.05) 100%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.1) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      0 14px 30px -26px rgba(31, 42, 55, 0.24) !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
    backdrop-filter: blur(18px) saturate(1.08) brightness(1.01) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) brightness(1.01) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button,
    .profile-mobile-benefit,
    .profile-mobile-record-action
  ) {
    border-color: rgba(255, 255, 255, 0.48) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.08)),
      rgba(255, 255, 255, 0.04) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.56),
      0 10px 22px -20px rgba(24, 35, 49, 0.18) !important;
    filter: none !important;
    will-change: auto !important;
    backdrop-filter: blur(13px) saturate(1.08) brightness(1.01) !important;
    -webkit-backdrop-filter: blur(13px) saturate(1.08) brightness(1.01) !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card,
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button,
    .profile-mobile-benefit,
    .profile-mobile-record-action
  )::after {
    opacity: 0.18 !important;
    background:
      linear-gradient(122deg, rgba(255, 255, 255, 0.22), transparent 30%, transparent 74%, rgba(255, 255, 255, 0.08)) !important;
    mix-blend-mode: normal !important;
    transition: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(
    .profile-mobile-top-rail,
    .profile-mobile-membership-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel,
    .profile-mobile-stat-card,
    .profile-mobile-record-row,
    .profile-mobile-membership-cta,
    .profile-mobile-section-head button
  ).is-profile-scroll-lit {
    border-color: inherit !important;
    filter: none !important;
  }
}

/* Profile mobile buttons v26: restore UI icons and lighten embedded glass pills. */
@media screen and (max-width: 980px) {
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-asset {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    pointer-events: none !important;
  }

  html body.view-profile #profile.profile-mobile-figma :is(.profile-mobile-brand-bg, .profile-mobile-membership-symbol-bg) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-mark {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 25px !important;
    height: 25px !important;
    z-index: 2 !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.92 !important;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72)) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit-icon,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-stat-asset,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-top-action-icon,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-record-action-icon,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-button-icon {
    flex: 0 0 auto !important;
    opacity: 0.84 !important;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.66)) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit-icon {
    width: 15px !important;
    height: 15px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-button-icon {
    width: 14px !important;
    height: 14px !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-cta,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    color: rgba(20, 28, 39, 0.9) !important;
    font-size: 12px !important;
    font-weight: 540 !important;
    letter-spacing: 0 !important;
    text-shadow:
      0 0.8px 0 rgba(255, 255, 255, 0.72),
      0 -0.45px 0 rgba(15, 23, 42, 0.045) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    background:
      radial-gradient(88% 120% at 26% 0%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.12) 58%, rgba(255, 255, 255, 0.05) 100%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
      rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(42, 52, 64, 0.045),
      inset 1px 0 0 rgba(255, 255, 255, 0.18),
      0 10px 20px -18px rgba(24, 35, 49, 0.22) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-membership-cta {
    color: rgba(21, 149, 91, 0.92) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-membership-card.is-paid .profile-mobile-membership-cta {
    color: rgba(138, 91, 0, 0.92) !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-section-head button {
    width: 106px !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-benefit.profile-mobile-benefit {
    display: inline-grid !important;
    grid-template-columns: 15px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    color: currentColor !important;
    font-weight: 540 !important;
    text-shadow:
      0 0.8px 0 rgba(255, 255, 255, 0.68),
      0 -0.4px 0 rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.58) !important;
    background:
      radial-gradient(90% 112% at 24% 0%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.1) 62%, rgba(255, 255, 255, 0.04) 100%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)),
      rgba(255, 255, 255, 0.05) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.64),
      inset 0 -1px 0 rgba(42, 52, 64, 0.035),
      0 9px 18px -18px rgba(24, 35, 49, 0.2) !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-benefit b,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-cta span,
  html body.view-profile #profile.profile-mobile-figma .profile-mobile-section-head button span {
    display: inline-block !important;
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    font-weight: inherit !important;
    white-space: nowrap !important;
  }

  html body.view-profile #profile.profile-mobile-figma.profile-mobile-figma .profile-mobile-membership-card .profile-mobile-membership-cta.profile-mobile-membership-cta {
    font-weight: 540 !important;
  }

  html body.view-profile #profile.profile-mobile-figma .profile-mobile-membership-cta .profile-mobile-cta-checkout {
    display: none !important;
  }

  html body.view-profile.profile-membership-checkout-open #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-membership-cta .profile-mobile-cta-default {
    display: none !important;
  }

  html body.view-profile.profile-membership-checkout-open #profile.profile-mobile-figma .profile-mobile-membership-card.is-free .profile-mobile-membership-cta .profile-mobile-cta-checkout {
    display: inline-block !important;
  }
}

/* Consolidated from profile-desktop-glass.css during frontend cleanup 2026-07-08. */
/* Desktop profile: match the homepage glass system and make membership the primary card. */
@keyframes profileMembershipMascotFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.12deg);
  }

  50% {
    transform: translate3d(0, -3px, 0) rotate(0.12deg);
  }
}

@media (min-width: 981px) {
  html body.view-profile {
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 8%, rgba(195, 236, 232, 0.44), transparent 32%),
      radial-gradient(circle at 92% 6%, rgba(251, 239, 205, 0.34), transparent 34%),
      radial-gradient(circle at 50% 110%, rgba(210, 224, 232, 0.28), transparent 42%),
      linear-gradient(180deg, #f6f8f8 0%, #edf3f2 48%, #f7f7f4 100%) !important;
    background-attachment: fixed !important;
  }

  html body.view-profile .app-shell {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
      rgba(255, 255, 255, 0.03) !important;
  }

  html body.view-profile .main,
  html body.view-profile #profile,
  html body.view-profile #profile.active-view {
    background: transparent !important;
    background-image: none !important;
  }

  html body.view-profile #profile.profile-desktop-glass {
    --profile-desktop-ink: #151c29;
    --profile-desktop-muted: rgba(83, 96, 116, 0.9);
    --profile-desktop-soft: rgba(117, 127, 144, 0.82);
    --profile-desktop-green: #15955b;
    --profile-desktop-purple: #7b45d9;
    --profile-desktop-blue: #246fca;
    --profile-desktop-glass:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.56), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17)),
      rgba(255, 255, 255, 0.2);
    --profile-desktop-glass-strong:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.5), transparent 38%),
      radial-gradient(circle at 96% 8%, rgba(227, 246, 239, 0.36), transparent 36%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.15)),
      rgba(255, 255, 255, 0.18);
    --profile-desktop-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(36, 56, 64, 0.055),
      0 1px 0 rgba(255, 255, 255, 0.36),
      0 22px 52px -46px rgba(33, 48, 58, 0.5);
    --profile-desktop-text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.76),
      0 -0.5px 0 rgba(20, 28, 38, 0.08);
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "membership"
      "learning";
    gap: clamp(18px, 1.35vw, 24px);
    align-items: start;
    align-content: start;
    width: min(100%, calc(100vw - 64px));
    max-width: 1400px;
    min-height: calc(100dvh - 96px);
    margin: 0 auto !important;
    padding: clamp(24px, 2.1vw, 34px) 0 56px !important;
    color: var(--profile-desktop-ink);
    isolation: isolate;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
  }

  html body.view-profile #profile.profile-desktop-glass.active-view::before,
  html body.view-profile #profile.profile-desktop-glass.active-view::after {
    content: none !important;
    display: none !important;
  }

  #profile.profile-desktop-glass .profile-tabs,
  #profile.profile-desktop-glass .profile-insight-grid,
  #profile.profile-desktop-glass #historyTable,
  #profile.profile-desktop-glass .content-grid > .panel > h2,
  #profile.profile-desktop-glass .content-grid > .panel > .eyebrow {
    display: none !important;
  }

  #profile.profile-desktop-glass .profile-page-hero,
  #profile.profile-desktop-glass .profile-summary,
  #profile.profile-desktop-glass .content-grid,
  #profile.profile-desktop-glass .content-grid > .panel,
  #profile.profile-desktop-glass .skill-progress-grid {
    position: relative !important;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    animation: none !important;
  }

  #profile.profile-desktop-glass .profile-page-hero {
    display: none !important;
    grid-area: auto;
  }

  #profile.profile-desktop-glass .profile-summary {
    grid-area: membership;
    display: block !important;
    align-self: start;
  }

  #profile.profile-desktop-glass .content-grid {
    grid-area: learning;
    display: block !important;
  }

  #profile.profile-desktop-glass .content-grid > .panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #profile.profile-desktop-glass .skill-progress-grid {
    display: block !important;
  }

  #profile.profile-desktop-glass .profile-mobile-top-rail,
  #profile.profile-desktop-glass .profile-mobile-learning-center,
  #profile.profile-desktop-glass .profile-mobile-membership-card,
  #profile.profile-desktop-glass .profile-mobile-stat-card,
  #profile.profile-desktop-glass .profile-mobile-today-panel,
  #profile.profile-desktop-glass .profile-mobile-records-panel {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    background: var(--profile-desktop-glass) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: var(--profile-desktop-shadow) !important;
    backdrop-filter: blur(34px) saturate(1.26) brightness(1.03) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.26) brightness(1.03) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-top-rail::before,
  #profile.profile-desktop-glass .profile-mobile-learning-center::before,
  #profile.profile-desktop-glass .profile-mobile-membership-card::before,
  #profile.profile-desktop-glass .profile-mobile-stat-card::before,
  #profile.profile-desktop-glass .profile-mobile-today-panel::before,
  #profile.profile-desktop-glass .profile-mobile-records-panel::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 28%),
      radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.26), transparent 40%);
    opacity: 0.76;
  }

  #profile.profile-desktop-glass .profile-mobile-top-rail > *,
  #profile.profile-desktop-glass .profile-mobile-learning-center > *,
  #profile.profile-desktop-glass .profile-mobile-membership-card > *,
  #profile.profile-desktop-glass .profile-mobile-stat-card > *,
  #profile.profile-desktop-glass .profile-mobile-today-panel > *,
  #profile.profile-desktop-glass .profile-mobile-records-panel > * {
    position: relative;
    z-index: 1;
  }

  #profile.profile-desktop-glass .profile-mobile-top-rail {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 52px;
    gap: 18px;
    align-items: center;
    min-height: 104px;
    padding: 18px 22px;
    border-radius: 34px;
    background: var(--profile-desktop-glass-strong) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-brand,
  #profile.profile-desktop-glass .profile-mobile-membership-symbol {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 999px;
    overflow: hidden;
  }

  #profile.profile-desktop-glass .profile-mobile-brand {
    background: linear-gradient(145deg, #ffd439, #ffc21d);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      0 12px 24px -18px rgba(180, 126, 11, 0.46);
  }

  #profile.profile-desktop-glass .profile-mobile-brand b {
    position: relative;
    z-index: 1;
    color: #151c29;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    text-shadow: var(--profile-desktop-text-shadow);
    -webkit-text-fill-color: currentColor;
  }

  #profile.profile-desktop-glass .profile-mobile-brand .profile-mobile-asset,
  #profile.profile-desktop-glass .profile-mobile-membership-symbol .profile-mobile-asset {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #profile.profile-desktop-glass .profile-mobile-top-copy h2,
  #profile.profile-desktop-glass .profile-mobile-section-head h2,
  #profile.profile-desktop-glass .profile-mobile-membership-card h3,
  #profile.profile-desktop-glass .profile-mobile-today-panel h3,
  #profile.profile-desktop-glass .profile-mobile-records-head h3 {
    margin: 0;
    color: var(--profile-desktop-ink);
    font-weight: 700;
    letter-spacing: 0;
    text-shadow: var(--profile-desktop-text-shadow);
    -webkit-text-fill-color: currentColor;
  }

  #profile.profile-desktop-glass .profile-mobile-top-copy h2 {
    font-size: clamp(30px, 2.4vw, 38px);
    line-height: 1.08;
  }

  #profile.profile-desktop-glass .profile-mobile-top-copy p {
    margin: 6px 0 0;
    color: var(--profile-desktop-muted);
    font-size: 16px;
    font-weight: 560;
    line-height: 1.28;
  }

  #profile.profile-desktop-glass .profile-mobile-checkout-copy,
  #profile.profile-desktop-glass .profile-mobile-title-checkout,
  #profile.profile-desktop-glass .profile-mobile-cta-checkout {
    display: none;
  }

  html body.view-profile.profile-membership-checkout-open #profile.profile-desktop-glass .profile-mobile-default-copy,
  html body.view-profile.profile-membership-checkout-open #profile.profile-desktop-glass .profile-mobile-membership-card.is-free .profile-mobile-title-default,
  html body.view-profile.profile-membership-checkout-open #profile.profile-desktop-glass .profile-mobile-membership-card.is-free .profile-mobile-cta-default {
    display: none;
  }

  html body.view-profile.profile-membership-checkout-open #profile.profile-desktop-glass .profile-mobile-checkout-copy,
  html body.view-profile.profile-membership-checkout-open #profile.profile-desktop-glass .profile-mobile-membership-card.is-free .profile-mobile-title-checkout,
  html body.view-profile.profile-membership-checkout-open #profile.profile-desktop-glass .profile-mobile-membership-card.is-free .profile-mobile-cta-checkout {
    display: inline;
  }

  #profile.profile-desktop-glass .profile-mobile-icon-button,
  #profile.profile-desktop-glass .profile-mobile-membership-cta,
  #profile.profile-desktop-glass .profile-mobile-section-head button,
  #profile.profile-desktop-glass .profile-mobile-benefit,
  #profile.profile-desktop-glass .profile-mobile-record-action {
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    background:
      radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.88), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.22)),
      rgba(255, 255, 255, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 -1px 0 rgba(30, 42, 54, 0.055),
      0 12px 26px -24px rgba(28, 39, 54, 0.42) !important;
    backdrop-filter: blur(18px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-icon-button {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 999px;
    color: #667085;
  }

  #profile.profile-desktop-glass .profile-mobile-icon-button img {
    width: 28px;
    height: 28px;
  }

  #profile.profile-desktop-glass .profile-mobile-learning-center {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    min-height: 560px;
    padding: 24px;
    border-radius: 34px;
    background:
      radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.42), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.15)),
      rgba(255, 255, 255, 0.17) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-section-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 54px;
  }

  #profile.profile-desktop-glass .profile-mobile-section-head h2 {
    font-size: clamp(28px, 2vw, 34px);
    line-height: 1.08;
  }

  #profile.profile-desktop-glass .profile-mobile-section-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 124px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    color: var(--profile-desktop-ink);
    font-size: 16px;
    font-weight: 620;
    line-height: 1;
  }

  #profile.profile-desktop-glass .profile-mobile-stat-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  #profile.profile-desktop-glass .profile-mobile-stat-card {
    display: grid;
    grid-template-rows: auto auto auto auto;
    min-height: 132px;
    padding: 20px 22px 18px;
    border-radius: 26px;
    background:
      radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--profile-stat-accent) 13%, transparent), transparent 44%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.18) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-stat-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    color: var(--profile-stat-accent);
  }

  #profile.profile-desktop-glass .profile-mobile-stat-asset {
    width: 30px;
    height: 30px;
  }

  #profile.profile-desktop-glass .profile-mobile-stat-card small,
  #profile.profile-desktop-glass .profile-mobile-stat-card em {
    color: var(--profile-desktop-muted);
    font-size: 15px;
    font-weight: 560;
    line-height: 1.25;
    font-style: normal;
  }

  #profile.profile-desktop-glass .profile-mobile-stat-card strong {
    margin: 8px 0 4px;
    color: var(--profile-desktop-ink);
    font-size: clamp(32px, 2.5vw, 42px);
    font-weight: 760;
    line-height: 1;
    text-shadow: var(--profile-desktop-text-shadow);
    -webkit-text-fill-color: currentColor;
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel,
  #profile.profile-desktop-glass .profile-mobile-records-panel {
    min-height: 278px;
    padding: 26px;
    border-radius: 30px;
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel {
    grid-column: 1 / span 5;
    display: grid;
    align-content: space-between;
  }

  #profile.profile-desktop-glass .profile-mobile-records-panel {
    grid-column: 6 / -1;
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel h3,
  #profile.profile-desktop-glass .profile-mobile-records-head h3 {
    font-size: clamp(24px, 1.7vw, 30px);
    line-height: 1.12;
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel p {
    margin: 10px 0 0;
    color: var(--profile-desktop-muted);
    font-size: 16px;
    font-weight: 560;
    line-height: 1.38;
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel strong {
    justify-self: end;
    color: var(--profile-desktop-purple);
    font-size: clamp(42px, 3.2vw, 58px);
    font-weight: 700;
    line-height: 0.95;
    text-shadow: var(--profile-desktop-text-shadow);
    -webkit-text-fill-color: currentColor;
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel > i {
    display: block;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(126, 138, 150, 0.12);
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel > i > em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8b5ce6, #21bfa9);
  }

  #profile.profile-desktop-glass .profile-mobile-records-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
  }

  #profile.profile-desktop-glass .profile-mobile-records-head button {
    border: 0;
    color: var(--profile-desktop-muted);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
  }

  #profile.profile-desktop-glass .profile-mobile-record-list {
    display: grid;
    gap: 10px;
  }

  #profile.profile-desktop-glass .profile-mobile-record-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 34px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px 10px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 22px;
    color: var(--profile-desktop-ink);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38)),
      rgba(255, 255, 255, 0.42);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(30, 42, 54, 0.045),
      0 16px 38px -34px rgba(30, 45, 58, 0.42);
    text-align: left;
    backdrop-filter: blur(24px) saturate(1.16);
    -webkit-backdrop-filter: blur(24px) saturate(1.16);
  }

  #profile.profile-desktop-glass .profile-mobile-record-row > b {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    color: #ffffff;
    background: #1976c9;
    font-size: 17px;
    font-weight: 660;
  }

  #profile.profile-desktop-glass .profile-mobile-record-row.tone-purple > b { background: #7b45d9; }
  #profile.profile-desktop-glass .profile-mobile-record-row.tone-green > b { background: #15955b; }
  #profile.profile-desktop-glass .profile-mobile-record-row.tone-gold > b { background: #c89416; }

  #profile.profile-desktop-glass .profile-mobile-record-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  #profile.profile-desktop-glass .profile-mobile-record-copy strong {
    overflow: hidden;
    color: var(--profile-desktop-ink);
    font-size: 16px;
    font-weight: 620;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #profile.profile-desktop-glass .profile-mobile-record-copy small,
  #profile.profile-desktop-glass .profile-mobile-record-row em {
    color: var(--profile-desktop-muted);
    font-size: 14px;
    font-weight: 560;
    font-style: normal;
  }

  #profile.profile-desktop-glass .profile-mobile-record-row em {
    color: var(--profile-desktop-ink);
    white-space: nowrap;
  }

  #profile.profile-desktop-glass .profile-mobile-record-action {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
  }

  #profile.profile-desktop-glass .profile-mobile-record-action-icon {
    width: 16px;
    height: 16px;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 410px);
    grid-template-areas:
      "head benefits"
      "cta benefits"
      "note benefits";
    gap: 22px 34px;
    align-items: center;
    min-height: clamp(340px, 28vw, 430px);
    padding: clamp(34px, 3.2vw, 52px);
    border-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 38px;
    background:
      radial-gradient(circle at 86% 18%, rgba(179, 235, 213, 0.22), transparent 38%),
      radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.52), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(20, 80, 70, 0.045),
      0 26px 56px -46px rgba(35, 54, 64, 0.46) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-head {
    grid-area: head;
    display: grid;
    grid-template-columns: clamp(82px, 7vw, 104px) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 28px);
    align-items: center;
    max-width: 780px;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-symbol {
    width: clamp(82px, 7vw, 104px);
    height: clamp(82px, 7vw, 104px);
    min-width: clamp(82px, 7vw, 104px);
    background: rgba(220, 255, 244, 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      0 14px 26px -20px rgba(16, 110, 80, 0.34);
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card.is-paid .profile-mobile-membership-symbol {
    background: linear-gradient(145deg, #ffd439, #ffc21d);
  }

  #profile.profile-desktop-glass .profile-mobile-membership-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 22px;
    border: 1px solid rgba(47, 191, 156, 0.24);
    border-radius: 999px;
    color: var(--profile-desktop-green);
    background: rgba(255, 255, 255, 0.42);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card h3 {
    margin: 16px 0 8px;
    font-size: clamp(34px, 3.1vw, 48px);
    font-weight: 760;
    line-height: 1.08;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card p {
    margin: 0;
    color: var(--profile-desktop-muted);
    font-size: clamp(17px, 1.35vw, 21px);
    font-weight: 620;
    line-height: 1.4;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-cta {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(320px, 100%);
    min-height: 58px;
    padding: 0 30px;
    border-radius: 999px;
    color: var(--profile-desktop-green);
    font-size: 19px;
    font-weight: 760;
    line-height: 1;
  }

  #profile.profile-desktop-glass .profile-mobile-benefits {
    grid-area: benefits;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #profile.profile-desktop-glass .profile-mobile-benefit {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    min-height: 70px;
    padding: 0 22px;
    border-radius: 24px;
    color: var(--profile-desktop-green);
    font-size: 20px;
    font-weight: 760;
  }

  #profile.profile-desktop-glass .profile-mobile-benefit.tone-purple { color: var(--profile-desktop-purple); }
  #profile.profile-desktop-glass .profile-mobile-benefit.tone-blue { color: var(--profile-desktop-blue); }

  #profile.profile-desktop-glass .profile-mobile-benefit-icon {
    width: 28px;
    height: 28px;
  }

  #profile.profile-desktop-glass .profile-mobile-plan-note {
    grid-area: note;
    display: block;
    color: var(--profile-desktop-soft);
    font-size: 15px;
    font-weight: 620;
    line-height: 1.3;
  }

  #profile.profile-desktop-glass .profile-membership-hero {
    grid-template-columns: minmax(230px, 0.86fr) minmax(330px, 1.08fr) minmax(290px, 0.94fr);
    grid-template-areas: "mascot copy benefits";
    gap: clamp(22px, 2.4vw, 38px);
    align-items: center;
    min-height: clamp(330px, 25vw, 390px);
    padding: 14px clamp(26px, 2.8vw, 46px) 0;
  }

  #profile.profile-desktop-glass .profile-membership-mascot-stage {
    grid-area: mascot;
    align-self: stretch;
    display: grid;
    place-items: end center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 30px;
  }

  #profile.profile-desktop-glass .profile-membership-mascot {
    display: block;
    width: min(100%, 280px);
    height: 100%;
    max-height: 330px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 14px 14px rgba(88, 56, 7, 0.09));
    transform-origin: 50% 92%;
    animation: profileMembershipMascotFloat 5.6s ease-in-out infinite;
    will-change: transform;
  }

  #profile.profile-desktop-glass .profile-membership-copy {
    grid-area: copy;
    align-self: center;
    min-width: 0;
  }

  #profile.profile-desktop-glass .profile-membership-badge {
    width: fit-content;
    gap: 8px;
    padding-inline: 16px;
  }

  #profile.profile-desktop-glass .profile-membership-badge-icon {
    width: 22px;
    height: 22px;
  }

  #profile.profile-desktop-glass .profile-membership-badge b {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

  #profile.profile-desktop-glass .profile-membership-hero h3 {
    margin: 22px 0 10px;
    font-size: clamp(38px, 3.2vw, 50px);
    white-space: nowrap;
  }

  #profile.profile-desktop-glass .profile-membership-hero p {
    font-size: clamp(16px, 1.32vw, 20px);
    white-space: nowrap;
  }

  #profile.profile-desktop-glass .profile-membership-primary-action {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    width: min(292px, 100%);
    min-height: 58px;
    margin-top: 28px;
    padding: 0 22px;
    border: 0;
    border-radius: 18px;
    color: #111827;
    background: #ffc52f;
    box-shadow: 0 14px 26px -16px rgba(184, 117, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.48);
    font-size: 18px;
    font-weight: 820;
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }

  #profile.profile-desktop-glass .profile-membership-primary-action:hover {
    transform: translateY(-2px);
    background: #ffd04c;
    box-shadow: 0 18px 30px -16px rgba(184, 117, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  #profile.profile-desktop-glass .profile-membership-primary-action:focus-visible {
    outline: 3px solid rgba(21, 149, 91, 0.3);
    outline-offset: 4px;
  }

  #profile.profile-desktop-glass .profile-membership-primary-action .profile-mobile-asset {
    width: 24px;
    height: 24px;
  }

  #profile.profile-desktop-glass .profile-membership-primary-action .profile-membership-action-arrow {
    width: 18px;
    height: 18px;
    filter: brightness(0.2);
  }

  #profile.profile-desktop-glass .profile-membership-benefit-list {
    grid-area: benefits;
    align-content: center;
    gap: 14px;
  }

  #profile.profile-desktop-glass .profile-membership-benefit-list .profile-mobile-benefit {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 76px;
    padding: 10px 16px;
  }

  #profile.profile-desktop-glass .profile-membership-benefit-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 999px;
    background: rgba(49, 163, 68, 0.12);
    font-style: normal;
  }

  #profile.profile-desktop-glass .tone-blue .profile-membership-benefit-icon {
    background: rgba(36, 111, 202, 0.12);
  }

  #profile.profile-desktop-glass .tone-purple .profile-membership-benefit-icon {
    background: rgba(123, 69, 217, 0.12);
  }

  #profile.profile-desktop-glass .profile-membership-benefit-asset {
    width: 24px;
    height: 24px;
  }

  #profile.profile-desktop-glass .profile-membership-benefit-list b {
    color: var(--profile-desktop-ink);
    font-size: 18px;
    font-weight: 760;
    white-space: nowrap;
  }

  #profile.profile-desktop-glass .profile-membership-benefit-list small {
    padding: 7px 11px;
    border-radius: 999px;
    color: currentColor;
    background: rgba(49, 163, 68, 0.08);
    font-size: 13px;
    font-weight: 720;
    white-space: nowrap;
  }

  #profile.profile-desktop-glass .profile-membership-benefit-list .tone-blue small {
    background: rgba(36, 111, 202, 0.08);
  }

  #profile.profile-desktop-glass .profile-membership-benefit-list .tone-purple small {
    background: rgba(123, 69, 217, 0.08);
  }

  #profile.profile-desktop-glass :is(
    .profile-mobile-top-copy h2,
    .profile-mobile-section-head h2,
    .profile-mobile-membership-card h3,
    .profile-mobile-today-panel h3,
    .profile-mobile-records-head h3,
    .profile-mobile-stat-card strong,
    .profile-mobile-today-panel strong,
    .profile-mobile-record-copy strong,
    .profile-mobile-record-row em
  ) {
    opacity: 1 !important;
    color: var(--profile-desktop-ink) !important;
    font-weight: 700 !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: currentColor !important;
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel strong {
    color: var(--profile-desktop-purple) !important;
  }

  #profile.profile-desktop-glass :is(
    .profile-mobile-top-copy p,
    .profile-mobile-membership-card p,
    .profile-mobile-stat-card small,
    .profile-mobile-stat-card em,
    .profile-mobile-today-panel p,
    .profile-mobile-record-copy small
  ) {
    opacity: 1 !important;
    color: var(--profile-desktop-muted) !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #profile.profile-mobile-figma .profile-mobile-membership-mascot-stage,
  #profile.profile-desktop-glass .profile-membership-mascot {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Final route guard: Profile/Learning Center must never render under Practice pages. */
@media (min-width: 981px) {
  html body:not(.view-profile) #profile.profile-desktop-glass,
  html body:not(.view-profile) #profile.profile-mobile-figma,
  html body.view-practice #profile.profile-desktop-glass,
  html body.view-practice #profile.profile-mobile-figma {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Keep the desktop profile grid scoped to the Profile route only. */
@media (min-width: 981px) {
  html body:not(.view-profile) #profile.profile-desktop-glass,
  html body:not(.view-profile) #profile.profile-mobile-figma,
  html body.view-practice #profile.profile-desktop-glass,
  html body.view-practice #profile.profile-mobile-figma {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  #profile.profile-desktop-glass {
    grid-template-columns: 1fr;
    grid-template-areas:
      "membership"
      "learning";
    width: min(100%, calc(100vw - 48px));
    max-width: 940px;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card:not(.profile-membership-hero) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "cta"
      "benefits"
      "note";
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card:not(.profile-membership-hero) .profile-mobile-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #profile.profile-desktop-glass .profile-membership-hero {
    grid-template-columns: minmax(200px, 0.78fr) minmax(300px, 1.08fr) minmax(250px, 0.92fr);
    gap: 18px;
    padding: 12px 24px 0;
  }

  #profile.profile-desktop-glass .profile-membership-hero h3 {
    margin-top: 18px;
    font-size: 34px;
  }

  #profile.profile-desktop-glass .profile-membership-hero p {
    font-size: 15px;
  }

  #profile.profile-desktop-glass .profile-membership-primary-action {
    min-height: 52px;
    margin-top: 22px;
  }

  #profile.profile-desktop-glass .profile-membership-benefit-list .profile-mobile-benefit {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 66px;
    padding: 8px 12px;
  }

  #profile.profile-desktop-glass .profile-membership-benefit-icon {
    width: 38px;
    height: 38px;
  }

  #profile.profile-desktop-glass .profile-membership-benefit-list b {
    font-size: 16px;
  }

  #profile.profile-desktop-glass .profile-membership-benefit-list small {
    padding: 6px 8px;
    font-size: 11px;
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel,
  #profile.profile-desktop-glass .profile-mobile-records-panel {
    grid-column: 1 / -1;
  }
}

/* Desktop profile final pass: mirror the real desktop homepage Figma glass. */
@media (min-width: 981px) {
  html body.view-profile {
    --figma-page: #fffdf8;
    --figma-ink: #0d131c;
    --figma-muted: rgba(62, 77, 97, 0.96);
    --figma-warm-line: rgba(255, 255, 255, 0.84);
    --figma-shadow: rgba(163, 107, 5, 0.1);
    color: var(--figma-ink) !important;
    background:
      radial-gradient(460px 720px at calc(50% + 520px) 92px, rgba(255, 250, 228, 0.32), transparent 74%),
      radial-gradient(420px 660px at calc(50% - 720px) 260px, rgba(255, 245, 217, 0.16), transparent 74%),
      linear-gradient(180deg, #ffd21d 0px, #ffe783 210px, #fff3bd 480px, #fff9e8 820px, #fffdf8 1120px, #ffffff 1500px) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 1800px !important;
    overflow-x: hidden !important;
  }

  html body.view-profile::before,
  html body.view-profile::after {
    content: "" !important;
    position: fixed !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 999px !important;
    transform: translate3d(0, 0, 0) !important;
  }

  html body.view-profile::before {
    left: calc(50% - 380px) !important;
    top: 100px !important;
    width: 760px !important;
    height: 34px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    filter: blur(28px) !important;
  }

  html body.view-profile::after {
    left: calc(50% - 520px) !important;
    top: 1380px !important;
    width: 470px !important;
    height: 360px !important;
    background: rgba(255, 229, 138, 0.11) !important;
    filter: blur(86px) !important;
  }

  html body.view-profile .app-shell {
    background: transparent !important;
  }

  html body.view-profile .main,
  html body.view-profile #profile,
  html body.view-profile #profile.active-view {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html body.view-profile #profile.profile-desktop-glass {
    --profile-desktop-ink: var(--figma-ink);
    --profile-desktop-muted: var(--figma-muted);
    --profile-desktop-soft: rgba(62, 77, 97, 0.78);
    --profile-home-card-bg:
      rgba(255, 253, 242, 0.8);
    --profile-home-goal-bg:
      rgba(255, 253, 242, 0.82);
    --profile-home-card-shadow:
      0 18px 44px -34px var(--figma-shadow),
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset -2px 0 24px -16px rgba(255, 204, 46, 0.44),
      inset 2px 0 18px -14px rgba(178, 255, 219, 0.44);
    --profile-desktop-text-shadow: none;
    box-sizing: border-box !important;
    width: min(1280px, calc(100vw - 64px)) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 28px 56px !important;
    gap: 24px !important;
  }

  html body.view-profile #profile.profile-desktop-glass.active-view .profile-summary,
  html body.view-profile #profile.profile-desktop-glass.active-view .content-grid {
    margin: 0 !important;
    top: auto !important;
    transform: none !important;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card,
  #profile.profile-desktop-glass .profile-mobile-learning-center,
  #profile.profile-desktop-glass .profile-mobile-stat-card,
  #profile.profile-desktop-glass .profile-mobile-today-panel,
  #profile.profile-desktop-glass .profile-mobile-records-panel {
    overflow: hidden !important;
    border: 1.15px solid var(--figma-warm-line) !important;
    border-radius: 28px !important;
    background: var(--profile-home-card-bg) !important;
    background-color: rgba(255, 253, 242, 0.8) !important;
    box-shadow: var(--profile-home-card-shadow) !important;
    backdrop-filter: blur(23px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(23px) saturate(1.18) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card {
    min-height: clamp(318px, 24vw, 380px) !important;
    border-radius: 32px !important;
    background: var(--profile-home-goal-bg) !important;
    background-color: rgba(255, 253, 242, 0.82) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-learning-center {
    min-height: 520px !important;
    background: rgba(255, 249, 232, 0.8) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-stat-card {
    min-height: clamp(104px, 6vw, 124px) !important;
    padding: clamp(18px, 1.1vw, 22px) !important;
    background: rgba(255, 253, 242, 0.8) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-today-panel,
  #profile.profile-desktop-glass .profile-mobile-records-panel {
    min-height: 268px !important;
    background: rgba(255, 253, 242, 0.82) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card::before,
  #profile.profile-desktop-glass .profile-mobile-learning-center::before,
  #profile.profile-desktop-glass .profile-mobile-stat-card::before,
  #profile.profile-desktop-glass .profile-mobile-today-panel::before,
  #profile.profile-desktop-glass .profile-mobile-records-panel::before {
    left: 24px !important;
    right: auto !important;
    top: 17px !important;
    bottom: auto !important;
    width: min(420px, 42%) !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.46) !important;
    filter: blur(3px) !important;
    opacity: 0.82 !important;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card::after,
  #profile.profile-desktop-glass .profile-mobile-learning-center::after,
  #profile.profile-desktop-glass .profile-mobile-stat-card::after,
  #profile.profile-desktop-glass .profile-mobile-today-panel::after,
  #profile.profile-desktop-glass .profile-mobile-records-panel::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      linear-gradient(104deg, transparent 18%, rgba(255, 255, 255, 0.18) 42%, rgba(221, 252, 243, 0.06) 64%, transparent 84%) !important;
    opacity: 0.68 !important;
  }

  #profile.profile-desktop-glass :is(
    .profile-mobile-membership-card,
    .profile-mobile-learning-center,
    .profile-mobile-stat-card,
    .profile-mobile-today-panel,
    .profile-mobile-records-panel
  ) > * {
    position: relative !important;
    z-index: 1 !important;
  }

  #profile.profile-desktop-glass .profile-mobile-icon-button,
  #profile.profile-desktop-glass .profile-mobile-membership-cta,
  #profile.profile-desktop-glass .profile-mobile-section-head button,
  #profile.profile-desktop-glass .profile-mobile-benefit,
  #profile.profile-desktop-glass .profile-mobile-record-action,
  #profile.profile-desktop-glass .profile-mobile-record-row {
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 22px !important;
    color: var(--figma-ink) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow:
      0 10px 24px -18px rgba(185, 119, 18, 0.13),
      inset 0 1px 10px rgba(255, 255, 255, 0.34) !important;
    backdrop-filter: blur(16px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-record-row {
    border-radius: 22px !important;
  }

  #profile.profile-desktop-glass .profile-mobile-stat-icon,
  #profile.profile-desktop-glass .profile-mobile-record-action {
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-section-head h2,
  #profile.profile-desktop-glass .profile-mobile-membership-card h3,
  #profile.profile-desktop-glass .profile-mobile-today-panel h3,
  #profile.profile-desktop-glass .profile-mobile-records-head h3 {
    color: var(--figma-ink) !important;
    font-weight: 900 !important;
    text-shadow: var(--profile-desktop-text-shadow) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-stat-card strong,
  #profile.profile-desktop-glass .profile-mobile-today-panel strong {
    font-weight: 900 !important;
    text-shadow: var(--profile-desktop-text-shadow) !important;
  }

  #profile.profile-desktop-glass .profile-mobile-membership-card p,
  #profile.profile-desktop-glass .profile-mobile-stat-card small,
  #profile.profile-desktop-glass .profile-mobile-stat-card em,
  #profile.profile-desktop-glass .profile-mobile-today-panel p,
  #profile.profile-desktop-glass .profile-mobile-record-copy small,
  #profile.profile-desktop-glass .profile-mobile-plan-note {
    color: var(--profile-desktop-muted) !important;
    font-weight: 650 !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html body.view-profile #profile.profile-desktop-glass {
    width: min(940px, calc(100vw - 48px)) !important;
    max-width: 940px !important;
    padding: 0 0 48px !important;
  }
}

/* Profile desktop nav parity: use the same locked navbar system as other desktop pages. */
@media (min-width: 981px) {
  html body.view-profile .app-shell > .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: max(24px, calc((100vw - 1376px) / 2)) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 150 !important;
    display: grid !important;
    align-items: center !important;
    column-gap: 18px !important;
    width: min(1376px, calc(100vw - 64px)) !important;
    min-width: min(1376px, calc(100vw - 64px)) !important;
    max-width: min(1376px, calc(100vw - 64px)) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22)),
      rgba(255, 255, 255, 0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 18px 42px -36px rgba(15, 23, 42, 0.44) !important;
    transform: none !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
  }

  html body.view-profile .app-shell > .sidebar > a.brand,
  html body.view-profile .app-shell > .sidebar > a.brand.active,
  html body.view-profile .app-shell > .sidebar > .brand.brand {
    position: absolute !important;
    left: 18px !important;
    top: 10px !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 479px) !important;
    align-items: center !important;
    gap: 14px !important;
    width: 547px !important;
    min-width: 430px !important;
    max-width: 547px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    color: rgba(17, 19, 24, 0.94) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.view-profile .app-shell .sidebar .brand-icon {
    position: static !important;
    display: block !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-profile .app-shell .sidebar .brand-copy {
    position: static !important;
    display: grid !important;
    grid-template-columns: max-content 210px !important;
    align-items: center !important;
    gap: 22px !important;
    width: 479px !important;
    min-width: 0 !important;
    max-width: 479px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    background: transparent !important;
  }

  html body.view-profile .app-shell .sidebar .brand-copy strong {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    color: rgba(17, 19, 24, 0.94) !important;
    font-size: 23px !important;
    font-weight: 880 !important;
    line-height: 23px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-profile .app-shell .sidebar .brand .brand-copy .exam-type-picker,
  html body.view-profile .app-shell .sidebar .brand .exam-type-picker,
  html body.view-profile .app-shell .sidebar .exam-type-picker {
    position: absolute !important;
    display: block !important;
    flex: none !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    left: 182px !important;
    top: 7px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    border-radius: 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.48)),
      rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      0 12px 26px -20px rgba(24, 112, 223, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(24, 112, 223, 0.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.14) !important;
    backdrop-filter: blur(24px) saturate(1.14) !important;
  }

  html body.view-profile .app-shell .sidebar .brand .brand-copy .exam-type-picker select,
  html body.view-profile .app-shell .sidebar .brand .exam-type-picker select,
  html body.view-profile .app-shell .sidebar .exam-type-picker select {
    position: static !important;
    display: block !important;
    width: 210px !important;
    min-width: 0 !important;
    max-width: 210px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding-left: 14px !important;
    padding-right: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    border-radius: 25px !important;
    color: rgba(31, 41, 55, 0.74) !important;
    background: transparent !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
    font-size: 16px !important;
    font-weight: 820 !important;
    line-height: 40px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
  }

  html body.view-profile .app-shell .sidebar .brand .brand-copy .exam-type-picker::after,
  html body.view-profile .app-shell .sidebar .brand .exam-type-picker::after,
  html body.view-profile .app-shell .sidebar .exam-type-picker::after {
    content: "⌄" !important;
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    top: 50% !important;
    display: grid !important;
    width: 32px !important;
    height: 26px !important;
    place-items: center !important;
    color: var(--practice-page-blue, #1870df) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(222, 239, 255, 0.54)),
      rgba(221, 238, 255, 0.46) !important;
    border: 1px solid rgba(24, 112, 223, 0.24) !important;
    border-radius: 13px !important;
    box-shadow:
      0 12px 20px -16px rgba(24, 112, 223, 0.44),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(24, 112, 223, 0.1) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  html body.view-profile .app-shell .sidebar .nav-list {
    position: absolute !important;
    left: 520px !important;
    top: 8.85px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-profile .app-shell .sidebar .nav-list::before,
  html body.view-profile .app-shell .sidebar .nav-list::after {
    content: none !important;
    display: none !important;
  }

  html body.view-profile .app-shell .sidebar .nav-list .nav-link,
  html body.view-profile .app-shell .sidebar .nav-list .nav-link.active {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 25px !important;
    color: rgba(13, 19, 28, 0.62) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.24)),
      rgba(255, 255, 255, 0.24) !important;
    box-shadow:
      inset 0 1px 12px rgba(255, 255, 255, 0.44),
      inset 0 -10px 18px rgba(255, 228, 128, 0.08) !important;
    font-size: 12px !important;
    font-weight: 620 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0) !important;
    transition:
      transform 115ms cubic-bezier(0.2, 0.8, 0.2, 1),
      border-color 120ms ease,
      box-shadow 120ms ease,
      background 120ms ease,
      opacity 100ms ease !important;
    will-change: transform !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
  }

  html body.view-profile .app-shell .sidebar .nav-list .nav-link.is-hidden,
  html body.view-profile .app-shell .sidebar .nav-list .nav-link::before,
  html body.view-profile .app-shell .sidebar .nav-list .nav-link::after,
  html body.view-profile .app-shell .sidebar .nav-list .nav-link.active::after {
    content: none !important;
  }

  html body.view-profile .app-shell .sidebar .nav-list .nav-link.is-hidden {
    display: none !important;
  }

  html body.view-profile .app-shell .sidebar #sidebarUserButton.sidebar-user-card,
  html body.view-profile .app-shell .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in {
    position: absolute !important;
    top: 10px !important;
    right: 36px !important;
    left: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: 38px 124px 32px !important;
    align-items: center !important;
    gap: 9px !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    border-radius: 999px !important;
    color: #15171c !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
    transform: none !important;
  }

  html body.view-profile .app-shell .sidebar #sidebarUserButton.sidebar-user-card img {
    display: block !important;
    justify-self: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    object-fit: contain !important;
    box-shadow: none !important;
  }

  html body.view-profile .app-shell .sidebar #sidebarUserButton.sidebar-user-card span {
    display: block !important;
    width: 76px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  html body.view-profile .app-shell .sidebar #sidebarUserButton.sidebar-user-card strong {
    display: block !important;
    width: 76px !important;
    max-width: 96px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #15171c !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 12.6px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-profile .app-shell .sidebar #sidebarUserButton.sidebar-user-card small {
    display: block !important;
    width: 76px !important;
    max-width: 76px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    color: #8a6100 !important;
    background: rgba(245, 180, 0, 0.14) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-profile .app-shell .sidebar #sidebarUserButton.sidebar-user-card b {
    display: grid !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 999px !important;
    color: #5f6672 !important;
    background: rgba(255, 255, 255, 0.62) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 18px !important;
  }
}