/* ============================================================
   LM Talent Membership / Tier Progress — Phase 11.1
   Ported from designs/pricing/talent-membership.html. ALL rules are scoped
   under .lm-mem-page so the design's generic class names (.hero, .btn, .price,
   .tier, .comm …) never collide with Bootstrap or other LM pages.
   ============================================================ */
.lm-mem-page {
    --lm-brand: #00363f;
    --lm-brand-strong: #002429;
    --lm-brand-soft: #e8eef0;
    --lm-gold-deep: #7a5e2e;
    --lm-elite: #0c0a05;
    --lm-elite-2: #1a1208;
    min-height: calc(100vh - 60px);
    padding: 14px 20px 80px;
    background: var(--lm-bg,#fff);
    font-family: var(--lm-font,"Inter",system-ui,sans-serif);
    color: var(--lm-text,#0f172a);
}

.lm-mem-shell {
    max-width: 1180px;
    margin: 0 auto
}

.lm-mem-page * {
    box-sizing: border-box
}

/* Hero */
.lm-mem-page .hero {
    padding: 8px 0 10px;
    max-width: 760px;
    text-align: center;
    margin: 0 auto
}

.lm-mem-page .hero .kicker {
    font-family: var(--lm-font-mono,monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--lm-muted);
    margin-bottom: 10px;
    display: inline-block
}

.lm-mem-page .hero h1 {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    line-height: 1.15
}

.lm-mem-page .hero h1 .underline {
    background: linear-gradient(180deg,transparent 60%, rgba(15,111,79,.18) 60%, rgba(15,111,79,.18) 90%, transparent 90%);
    padding: 0 4px
}

.lm-mem-page .free-row-title .underline {
    background: linear-gradient(180deg,transparent 56%, rgba(15,111,79,.22) 56%, rgba(15,111,79,.22) 92%, transparent 92%);
    padding: 0 3px
}

.lm-mem-page .hero p {
    font-size: 15px;
    color: var(--lm-text-secondary);
    margin: 0 auto;
    max-width: 60ch;
    line-height: 1.6
}

.lm-mem-page .hero strong {
    color: var(--lm-text);
    font-weight: 600
}

/* Status card */
.lm-mem-page .status-card {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 0;
    background: var(--lm-bg);
    border: 1px solid var(--lm-border);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 30px;
    box-shadow: var(--lm-shadow-md,0 8px 24px rgba(15,23,42,.06))
}

.lm-mem-page .status-id {
    padding: 18px 22px;
    display: flex;
    gap: 14px;
    align-items: center;
    background: linear-gradient(135deg,var(--lm-primary-soft) 0%, #eaf3ed 100%);
    border-right: 1px solid var(--lm-border)
}

.lm-mem-page .status-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg,#7c3aed,#5b21b6);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 16px;
    flex: none;
    border: 3px solid #fff;
    box-shadow: var(--lm-shadow-sm,0 1px 2px rgba(15,23,42,.04));
    overflow: hidden
}

.lm-mem-page .status-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block
}

.lm-mem-page .status-id .name .kyc-check {
    flex: none;
    vertical-align: middle
}

.lm-mem-page .status-id .info {
    min-width: 0;
    flex: 1
}

.lm-mem-page .status-id .lbl {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lm-muted);
    margin-bottom: 3px
}

.lm-mem-page .status-id .name {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.lm-mem-page .tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--lm-font-mono,monospace);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--lm-primary);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .05em
}

.lm-mem-page .status-id .meta {
    font-family: var(--lm-font-mono,monospace);
    font-size: 11px;
    color: var(--lm-muted);
    margin-top: 3px
}

.lm-mem-page .status-progress {
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    border-right: 1px solid var(--lm-border)
}

.lm-mem-page .status-progress .head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px
}

.lm-mem-page .status-progress .points {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--lm-font-mono,monospace);
    font-weight: 700;
    font-size: 22px;
    color: var(--lm-text);
    letter-spacing: -0.02em
}

.lm-mem-page .status-progress .points .of {
    color: var(--lm-muted-2);
    font-weight: 500;
    font-size: 14px
}

.lm-mem-page .status-progress .togo {
    font-family: var(--lm-font-mono,monospace);
    font-size: 11px;
    color: var(--lm-primary-text,var(--lm-primary));
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    background: var(--lm-primary-soft);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap
}

.lm-mem-page .bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--lm-surface-2);
    overflow: visible
}

.lm-mem-page .bar .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg,var(--lm-primary) 0%, #34d399 100%);
    border-radius: 999px
}

.lm-mem-page .bar .marker {
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    font-family: var(--lm-font-mono,monospace);
    font-size: 9.5px;
    color: var(--lm-primary-text,var(--lm-primary));
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    white-space: nowrap;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--lm-primary-soft-2,#dcebe2)
}

.lm-mem-page .status-progress .scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--lm-font-mono,monospace);
    font-size: 9.5px;
    color: var(--lm-muted);
    text-transform: uppercase;
    letter-spacing: .05em
}

.lm-mem-page .status-recent {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center
}

/* Variant 2 accrue-and-catch note (paying PRO/VIP talent) */
.lm-mem-page .status-sub-note {
    margin: 18px 22px 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--lm-primary-soft, rgba(15, 111, 79, 0.10));
    border: 1px solid var(--lm-primary-soft-2, rgba(15, 111, 79, 0.22));
    color: var(--lm-text, #1f2937);
    font-size: 12px;
    line-height: 1.45;
}

.lm-mem-page .status-recent .lbl {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lm-muted);
    margin-bottom: 2px
}

.lm-mem-page .recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--lm-text)
}

.lm-mem-page .recent-item .plus {
    font-family: var(--lm-font-mono,monospace);
    font-size: 11px;
    font-weight: 700;
    color: var(--lm-primary-text,var(--lm-primary));
    background: var(--lm-primary-soft);
    padding: 2px 7px;
    border-radius: 6px;
    flex: none
}

.lm-mem-page .recent-item .text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lm-text-secondary)
}

.lm-mem-page .recent-item .when {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10.5px;
    color: var(--lm-muted-2);
    flex: none
}

/* Section title */
.lm-mem-page .section-title {
    margin-top: 24px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 20px;
    flex-wrap: wrap;
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
    text-align: left
}

/* Heading + billing toggle on one row, toggle pushed to the right. */
.lm-mem-page .section-title--toggle {
    align-items: center;
}
.lm-mem-page .section-title--toggle .bill-toggle-wrap {
    margin: 0;
    flex: none;
}

.lm-mem-page .section-title h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em
}

.lm-mem-page .section-title p {
    margin: 0;
    color: var(--lm-muted);
    font-size: 13.5px;
    max-width: 52ch;
    font-weight: 400
}

.lm-mem-page .section-title .kicker {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--lm-muted-2);
    margin-bottom: 4px
}

/* Tier cards */
.lm-mem-page .tiers {
    display: grid;
    grid-template-columns: 1fr 1.18fr 1fr;
    column-gap: 16px;
    row-gap: 14px;
    /* 7 shared rows: badge, header, tagline, price, action (the CTA + any
       earn-path nested inside it), commission, features. Each card is a subgrid
       spanning all 7 rows, so section N sits on the same baseline across PRO /
       VIP / ELITE and the cards are equal height. Each row is sized to its
       tallest cell; a card with a shorter feature list keeps its features
       top-aligned, so leftover space pools as ONE block at the BOTTOM of the
       features row (no mid-card gaps, no flex space distribution -> identical in
       Chrome/Firefox/Yandex). The earn-path is NOT a row of its own, so it never
       reserves an empty band on ELITE / current / included cards. */
    grid-template-rows: repeat(7, auto);
}

/* /tier-progress (+ public /pricing): more breathing room between the
   "Unlock more with PRO, VIP, or ELITE" title + billing-toggle row and the paid
   tier cards. Uses padding-top (NOT margin-top) because a grid container's top
   margin collapses with the section-title's bottom margin, so margin had no
   visible effect — padding never collapses, so the gap is guaranteed. Scoped to
   the talent grid (.tiers, NOT the brand .tiers--brand) so /packages is unchanged. */
.lm-mem-page .tiers:not(.tiers--brand) { padding-top: 18px; }

.lm-mem-page .tier {
    position: relative;
    background: var(--lm-bg);
    border: 1px solid var(--lm-border);
    border-radius: 14px;
    padding: 24px 22px;
    /* Subgrid: the card spans all 8 rows of .tiers and its 8 sections map onto
       those shared rows, so section N lines up across PRO / VIP / ELITE and all
       three cards are equal height. Row gap is inherited from the parent (14px). */
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
}

.lm-mem-page .tier.pro-c {
    border: 1.5px solid rgba(15,111,79,.4);
    background: linear-gradient(180deg,#fff 0%, var(--lm-brand-soft) 100%);
    box-shadow: 0 12px 32px -12px rgba(15,111,79,.22)
}

.lm-mem-page .tier.vip-c {
    border: 1.5px solid var(--lm-gold);
    background: linear-gradient(180deg,#fffbf0 0%, var(--lm-gold-soft) 100%);
    box-shadow: 0 12px 32px -10px rgba(198,161,91,0.25)
}

.lm-mem-page .tier.elite-c {
    background: linear-gradient(180deg,var(--lm-elite) 0%, var(--lm-elite-2) 100%);
    color: #e8dfc6;
    border: 1px solid rgba(198,161,91,.35);
    box-shadow: 0 12px 32px -10px rgba(12,10,5,0.45)
}

.lm-mem-page .tier.elite-c::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(80% 60% at 20% 0%, rgba(198,161,91,.16), transparent 60%);
    pointer-events: none
}

.lm-mem-page .tier-badge-row {
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: none
}

.lm-mem-page .tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--lm-font-mono,monospace);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .06em;
    box-shadow: var(--lm-shadow-sm,0 1px 2px rgba(15,23,42,.06))
}

.lm-mem-page .tier-badge.current {
    background: var(--lm-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 15px;
    letter-spacing: .07em;
    box-shadow: 0 3px 10px rgba(15,23,42,.22)
}
/* Make the current-level pill read larger / more prominent over the card border */
.lm-mem-page .tier-badge-row:has(.tier-badge.current) { top: -14px; }

.lm-mem-page .tier-badge.rec {
    background: var(--lm-primary);
    color: #fff
}

.lm-mem-page .tier-badge.gold {
    background: linear-gradient(135deg,#d4b46a,#C6A15B);
    color: #1f1408
}

.lm-mem-page .tier-badge.elite {
    background: linear-gradient(135deg,#3a2e15,var(--lm-elite));
    color: #fef7d6;
    border: 1px solid rgba(198,161,91,.6)
}

/* When the "your next" badge lands on the gold VIP card it must be gold, not green. */
.lm-mem-page .tier.vip-c .tier-badge.rec {
    background: linear-gradient(135deg,#d4b46a,#C6A15B);
    color: #1f1408
}

/* "Your current level" pill on the gold VIP card: deep gold with WHITE text so it
   clearly reads as the current level (white on the light gold gradient was too faint). */
.lm-mem-page .tier.vip-c .tier-badge.current {
    background: linear-gradient(135deg,#a87f28,#876619);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.28)
}

/* Current-tier button on the dark ELITE card: black with gold text + gold border. */
.lm-mem-page .tier.elite-c .btn-current {
    background: #0c0a05;
    color: #e9c977;
    border: 1px solid rgba(198,161,91,.6);
    cursor: default;
    font-weight: 700
}

.lm-mem-page .tier-head {
    display: flex;
    align-items: center;
    gap: 8px
}

.lm-mem-page .tier-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none
}

.lm-mem-page .tier.pro-c .tier-icon {
    background: linear-gradient(135deg,#1a8a63,#0f6f4f);
    color: #fff;
    border: 1px solid rgba(15,111,79,.45)
}

.lm-mem-page .tier.vip-c .tier-icon {
    background: linear-gradient(135deg,#d4b46a,#C6A15B);
    color: #1f1408;
    border: 1px solid rgba(122,94,46,.4)
}

.lm-mem-page .tier.elite-c .tier-icon {
    background: rgba(198,161,91,.16);
    color: var(--lm-gold);
    border: 1px solid rgba(198,161,91,.4)
}

.lm-mem-page .tier-name-block {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.lm-mem-page .tier-name {
    font-size: 14px;
    font-family: var(--lm-font-mono,monospace);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase
}

.lm-mem-page .tier.pro-c .tier-name {
    color: var(--lm-primary)
}

.lm-mem-page .tier.vip-c .tier-name {
    color: var(--lm-gold-deep)
}

.lm-mem-page .tier.elite-c .tier-name {
    color: var(--lm-gold)
}

.lm-mem-page .tier-sub {
    font-family: var(--lm-font-mono,monospace);
    font-size: 9.5px;
    color: var(--lm-muted);
    text-transform: uppercase;
    letter-spacing: .04em
}

.lm-mem-page .tier.elite-c .tier-sub {
    color: rgba(232,223,198,.55)
}

.lm-mem-page .tier-tag {
    font-size: 13px;
    color: var(--lm-text-secondary);
    line-height: 1.45;
    min-height: 38px
}

.lm-mem-page .tier.elite-c .tier-tag {
    color: #e8dfc6
}

.lm-mem-page .price-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 14px 0;
    border-top: 1px solid var(--lm-border);
    border-bottom: 1px solid var(--lm-border);
    /* No fixed height: the price row is sized by the tallest cell; the band
       stretches to fill it (subgrid) so its top/bottom rule lines align across
       all 3 cards, and the content is centered within. */
}

.lm-mem-page .tier.elite-c .price-area {
    border-color: rgba(255,255,255,.08);
}

.lm-mem-page .price-row {
    display: flex;
    align-items: baseline;
    gap: 4px
}

.lm-mem-page .price {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--lm-text)
}

.lm-mem-page .price .per {
    font-size: 12.5px;
    color: var(--lm-muted);
    font-weight: 500;
    margin-left: 2px
}

.lm-mem-page .price-or {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10.5px;
    color: var(--lm-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
    font-weight: 500
}

.lm-mem-page .price-or strong {
    font-weight: 700;
    color: var(--lm-primary-text,var(--lm-primary));
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-family: var(--lm-font,"Inter",system-ui,sans-serif)
}

/* Buy CTA: full-width price-only button on its own line under "billed as …", earn-gap link centered beneath. */
/* .btn.price-buy-btn (not just .price-buy-btn) so these beat the base .btn rule,
   which is defined later with equal specificity. */
.lm-mem-page .btn.price-buy-btn {
    width: 100%;
    margin-top: 0px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 14px -3px rgba(15,111,79,.45),inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .12s ease,box-shadow .12s ease,filter .12s ease
}

.lm-mem-page .btn.price-buy-btn svg {
    flex: none
}

.lm-mem-page .btn.price-buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 24px -5px rgba(15,111,79,.55),inset 0 1px 0 rgba(255,255,255,.25)
}

.lm-mem-page .btn.price-buy-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 9px -3px rgba(15,111,79,.45),inset 0 1px 0 rgba(255,255,255,.18)
}

/* VIP buy button: premium gold, subtle static sheen (no border, no animation),
   white text + soft shadow for legibility. */
.lm-mem-page .tier.vip-c .btn.price-buy-btn {
    color: #fff;
    border: none;
    text-shadow: 0 1px 2px rgba(31,20,8,.45);
    background: linear-gradient(135deg,#d4b46a 0%,#e3c886 45%,#c6a15b 100%);
    box-shadow: 0 6px 18px -4px rgba(198,161,91,.55),inset 0 1px 0 rgba(255,255,255,.4)
}

.lm-mem-page .tier.vip-c .btn.price-buy-btn:hover {
    box-shadow: 0 9px 24px -5px rgba(198,161,91,.62),inset 0 1px 0 rgba(255,255,255,.4)
}

.lm-mem-page .tier.vip-c .btn.price-buy-btn:active {
    box-shadow: 0 3px 9px -3px rgba(198,161,91,.5),inset 0 1px 0 rgba(255,255,255,.3)
}

.lm-mem-page .buy-earn {
    display: block;
    text-align: center;
    margin-top: 7px;
    font-family: var(--lm-font-mono,monospace);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lm-text-secondary);
    text-decoration: none
}

.lm-mem-page .buy-earn:hover {
    color: var(--lm-text);
    text-decoration: underline;
    text-underline-offset: 3px
}

.lm-mem-page .tier.vip-c .buy-earn {
    color: var(--lm-gold-deep,#9a7b2e)
}

html[data-lm-theme="dark"] .lm-mem-page .tier.vip-c .buy-earn {
    color: var(--lm-gold,#c6a15b)
}

.lm-mem-page .elite-invite {
    font-family: var(--lm-font-mono,monospace);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--lm-gold);
    font-weight: 700;
    margin-bottom: 4px
}

.lm-mem-page .elite-invite-sub {
    font-size: 12px;
    color: rgba(232,223,198,.7);
    line-height: 1.45;
    max-width: 24ch;
    margin: 0 auto
}

.lm-mem-page .comm {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--lm-bg);
    border: 1px solid var(--lm-border-2,var(--lm-border));
    display: flex;
    align-items: center;
    gap: 8px
}

.lm-mem-page .tier.pro-c .comm {
    background: var(--lm-primary-soft);
    border-color: var(--lm-primary-soft-2,#dcebe2)
}

/* No-number callout (PRO): stack two text lines instead of the big-rate-left +
   meta-right flex split. Same .comm box/padding/height so the band still aligns
   with VIP/ELITE across the 3 cards. */
.lm-mem-page .comm.comm-text {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px
}
.lm-mem-page .comm-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--lm-primary-text,var(--lm-primary))
}
.lm-mem-page .comm-sub {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.3;
    color: var(--lm-muted)
}

.lm-mem-page .tier.vip-c .comm {
    background: rgba(198,161,91,.12);
    border-color: rgba(122,94,46,.3)
}

.lm-mem-page .tier.elite-c .comm {
    background: rgba(198,161,91,.12);
    border-color: rgba(198,161,91,.3)
}

.lm-mem-page .comm-rate {
    font-family: var(--lm-font-mono,monospace);
    font-size: 16px;
    font-weight: 700;
    line-height: 1
}

.lm-mem-page .tier.pro-c .comm-rate {
    color: var(--lm-primary-text,var(--lm-primary))
}

.lm-mem-page .tier.vip-c .comm-rate {
    color: var(--lm-gold-deep)
}

.lm-mem-page .tier.elite-c .comm-rate {
    color: var(--lm-gold)
}

.lm-mem-page .comm-meta {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10px;
    color: var(--lm-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.3
}

.lm-mem-page .comm-meta strong {
    font-family: var(--lm-font,sans-serif);
    color: var(--lm-text);
    font-size: 11px
}

.lm-mem-page .comm-delta {
    color: var(--lm-gold-deep);
    font-weight: 700
}

.lm-mem-page .tier.elite-c .comm-delta {
    color: var(--lm-gold)
}

.lm-mem-page .tier.elite-c .comm-meta {
    color: rgba(232,223,198,.6)
}

.lm-mem-page .tier.elite-c .comm-meta strong {
    color: #fef7d6
}

.lm-mem-page .cta {
    display: flex;
    flex-direction: column;
    gap: 6px
}

/* Cap card-button height — a global button/.btn rule otherwise inflates these
   so the "Included"/"Earn" CTAs tower over the compact commission box. */
.lm-mem-page .cta .btn {
    min-height: 0;
    height: auto;
    line-height: 1.2;
    flex: none
}

.lm-mem-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 11px 14px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    width: 100%
}

.lm-mem-page .btn-primary {
    background: var(--lm-primary);
    color: #fff
}

.lm-mem-page .btn-primary:hover {
    background: var(--lm-primary-strong,var(--lm-primary))
}

.lm-mem-page .btn-current {
    background: transparent;
    color: var(--lm-text-secondary);
    border: 1px solid var(--lm-border);
    cursor: default
}

/* "Your current tier" (btn-mine) — festive, tier-coloured so it's clearly the
   user's plan, distinct from the muted "Included" buttons. ELITE keeps its
   black+gold rule below. */
.lm-mem-page .btn-current.btn-mine {
    font-weight: 700
}

.lm-mem-page .tier.pro-c .btn-current.btn-mine {
    background: var(--lm-primary-soft);
    border: 1.5px solid var(--lm-primary);
    color: var(--lm-primary-text)
}

.lm-mem-page .tier.vip-c .btn-current.btn-mine {
    background: var(--lm-gold-soft);
    border: 1.5px solid var(--lm-gold);
    color: var(--lm-gold-deep)
}

.lm-mem-page .btn-gold {
    background: linear-gradient(135deg,#d4b46a,#C6A15B);
    color: #1f1408;
    border: none
}

.lm-mem-page .btn-gold:hover {
    filter: brightness(1.05)
}

.lm-mem-page .btn-elite {
    background: linear-gradient(135deg,#3a2e15,#1f1408);
    color: #fef7d6;
    border: 1px solid rgba(198,161,91,.5)
}

.lm-mem-page .btn-elite:hover {
    background: linear-gradient(135deg,#4a3a1c,#2a1d0a)
}

.lm-mem-page .pay-link {
    text-align: center;
    font-size: 11.5px;
    color: var(--lm-muted);
    line-height: 1.4
}

.lm-mem-page .pay-link a {
    color: var(--lm-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    cursor: pointer
}

.lm-mem-page .pay-link strong {
    color: var(--lm-text);
    font-weight: 600
}

.lm-mem-page .tier.elite-c .pay-link {
    color: rgba(232,223,198,.55)
}

.lm-mem-page .feats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    margin-top: 0
}

.lm-mem-page .feat {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12.5px;
    color: var(--lm-text);
    line-height: 1.4
}

.lm-mem-page .tier.elite-c .feat {
    color: #e8dfc6
}

.lm-mem-page .feat .check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--lm-primary-soft);
    color: var(--lm-primary);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    flex: none;
    margin-top: 1px
}

.lm-mem-page .tier.vip-c .feat .check {
    background: rgba(198,161,91,.18);
    color: var(--lm-gold-deep)
}

.lm-mem-page .tier.elite-c .feat .check {
    background: rgba(198,161,91,.18);
    color: var(--lm-gold)
}

.lm-mem-page .feat .x {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--lm-surface-2);
    color: var(--lm-muted-2);
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700;
    flex: none;
    margin-top: 1px
}

.lm-mem-page .feat strong {
    font-weight: 600;
    color: var(--lm-text)
}

.lm-mem-page .tier.elite-c .feat strong {
    color: #fef7d6
}

.lm-mem-page .feat .soon,.lm-mem-page .earn-tile .soon {
    font-family: var(--lm-font-mono,monospace);
    font-size: 8.5px;
    background: var(--lm-gold-soft);
    color: var(--lm-gold-deep);
    padding: 1px 5px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: 3px;
    flex: none
}

.lm-mem-page .progress-block {
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--lm-bg);
    border: 1px dashed var(--lm-primary-soft-2,#dcebe2);
    display: flex;
    flex-direction: column;
    gap: 7px
}

.lm-mem-page .progress-block .pb-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px
}

.lm-mem-page .progress-block .lbl {
    font-family: var(--lm-font-mono,monospace);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--lm-primary-text,var(--lm-primary));
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px
}

.lm-mem-page .progress-block .lbl .dot {
    background: var(--lm-primary);
    color: #fff;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: grid;
    place-items: center;
    font-size: 8px
}

.lm-mem-page .progress-block .v {
    font-family: var(--lm-font-mono,monospace);
    font-size: 14px;
    font-weight: 700;
    color: var(--lm-text)
}

.lm-mem-page .progress-block .v small {
    font-family: var(--lm-font,sans-serif);
    font-size: 11px;
    color: var(--lm-muted);
    font-weight: 500;
    margin-left: 4px
}

.lm-mem-page .mini-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--lm-surface-2);
    overflow: hidden
}

.lm-mem-page .mini-bar .mini-fill {
    height: 100%;
    background: var(--lm-primary);
    border-radius: 999px
}

/* Free + Verified row */
.lm-mem-page .free-row-title {
    margin-top: 36px;
    margin-bottom: 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap
}

.lm-mem-page .free-row-title .lbl {
    font-family: var(--lm-font-mono,monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--lm-muted);
    font-weight: 600
}

.lm-mem-page .free-row-title .lbl strong {
    color: var(--lm-text);
    font-weight: 700
}

.lm-mem-page .free-row-title .meta {
    font-size: 13px;
    color: var(--lm-muted)
}

.lm-mem-page .free-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 10px
}

.lm-mem-page .free-tier {
    position: relative;
    background: var(--lm-bg);
    border: 1px solid var(--lm-border);
    border-radius: 12px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start
}

.lm-mem-page .free-tier.free-c {
    background: var(--lm-surface);
    border-color: var(--lm-border-2,var(--lm-border))
}

.lm-mem-page .free-tier.verified-c {
    border-color: var(--lm-primary-soft-2,#dcebe2);
    background: linear-gradient(135deg,#fbfdfc 0%, var(--lm-primary-soft) 100%)
}

.lm-mem-page .ft-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--lm-bg);
    display: grid;
    place-items: center;
    flex: none;
    color: var(--lm-text-secondary);
    border: 1px solid var(--lm-border)
}

.lm-mem-page .free-tier.verified-c .ft-icon {
    color: var(--lm-primary);
    border-color: var(--lm-primary-soft-2,#dcebe2)
}

.lm-mem-page .ft-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1
}

.lm-mem-page .ft-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px
}

.lm-mem-page .ft-name {
    font-family: var(--lm-font-mono,monospace);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--lm-text);
    display: flex;
    align-items: center;
    gap: 6px
}

.lm-mem-page .free-tier.free-c .ft-name {
    color: var(--lm-muted)
}

.lm-mem-page .free-tier.verified-c .ft-name {
    color: var(--lm-primary-text,var(--lm-primary))
}

.lm-mem-page .free-tier.is-current {
    border-color: var(--lm-primary);
    box-shadow: 0 8px 24px -12px rgba(15,111,79,.45)
}

.lm-mem-page .ft-tag {
    font-size: 12.5px;
    color: var(--lm-text-secondary);
    line-height: 1.4
}

.lm-mem-page .ft-feats {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 2px
}

.lm-mem-page .ft-feat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    color: var(--lm-text-secondary);
    padding: 3px 8px;
    background: var(--lm-bg);
    border: 1px solid var(--lm-border);
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap
}

.lm-mem-page .ft-feat .glyph {
    color: var(--lm-primary-text,var(--lm-primary))
}

/* v2 talent cards — "All in X, plus:" inheritance lead on paid cards */
.lm-mem-page .feat.feat-all {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lm-text);
    margin: 0 0 3px
}

.lm-mem-page .feat.feat-all strong {
    font-weight: 700
}

.lm-mem-page .tier.vip-c .feat.feat-all {
    color: var(--lm-gold-deep)
}

.lm-mem-page .tier.elite-c .feat.feat-all {
    color: #c9bd99
}

/* v2 talent cards — Free/Verified full feature lists rendered as two columns of rows (not pills) */
/* Balanced two-column flow (top-to-bottom) so the trailing ✕ "not included" items
   land at the bottom of the second column, while the grid item spans full card width. */
.lm-mem-page .ft-feats.ft-feats-2col {
    display: block;
    column-count: 2;
    column-gap: 18px;
    margin-top: 6px
}

.lm-mem-page .free-tier > .ft-feats-2col {
    grid-column: 1 / -1;
    margin-top: 2px
}

.lm-mem-page .buy-area,
.lm-mem-page .action-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Top-aligned: the CTA (and any "or earn X pts") sits at the top of the band
       in its normal position, not vertically centered/floating. */
    justify-content: flex-start;
    /* Holds the CTA band height even when empty (current tier has no button), so
       the subgrid row never collapses and the rows below stay aligned. */
    min-height: 46px;
}

/* Current-tier / included state: a plain borderless label (no button chrome) that
   still fills the action band so the subgrid row stays aligned with the CTA buttons. */
.lm-mem-page .tier-state-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--lm-primary-text, var(--lm-primary));
}
/* Contrast per card: dark gold on the gold VIP card, light gold on the dark ELITE card. */
.lm-mem-page .tier.vip-c .tier-state-label {
    color: var(--lm-gold-deep, #7a5e2e);
}
.lm-mem-page .tier.elite-c .tier-state-label {
    color: var(--lm-gold);
}
/* The buy button carries a price-context top margin; neutralise it inside the
   action row so buttons and the current-tier label center in the same band. */
.lm-mem-page .action-row .btn.price-buy-btn {
    margin-top: 0;
}

/* Slot-based card alignment: every paid card renders the same ordered slots
   (action -> earn-path -> commission -> features). A card that lacks the earn
   path or the commission box renders an invisible, same-markup spacer
   (.is-spacer), so the buy buttons, the 8%/9% commission boxes, and the
   "ALL IN X +" headers all line up across PRO / VIP / ELITE. */
.lm-mem-page .is-spacer {
    visibility: hidden;
}

.lm-mem-page .tier.elite-c .elite-invite-sub {
    max-width: none;
}

.lm-mem-page .ft-feats-2col .ft-feat {
    break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 0 0 5px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    white-space: normal;
    line-height: 1.35;
    font-size: 11px
}

.lm-mem-page .ft-feats-2col .ft-feat .glyph {
    flex: none;
    margin-top: 1px;
    font-weight: 700
}

.lm-mem-page .ft-feat.ft-feat-off {
    color: var(--lm-muted)
}

.lm-mem-page .ft-feats-2col .ft-feat.ft-feat-off .glyph {
    color: var(--lm-muted-2,var(--lm-muted))
}

@media (max-width: 760px) {
    .lm-mem-page .ft-feats.ft-feats-2col {
        column-count:1
    }
}

.lm-mem-page .ft-price {
    font-family: var(--lm-font-mono,monospace);
    font-size: 17px;
    font-weight: 700;
    color: var(--lm-text);
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    flex: none;
    white-space: nowrap
}

.lm-mem-page .ft-price small {
    font-size: 10px;
    color: var(--lm-muted);
    text-transform: uppercase;
    font-weight: 500
}

/* Earn section */
.lm-mem-page .earn-section {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: stretch
}

.lm-mem-page .earn-card {
    background: var(--lm-bg);
    border: 1px solid var(--lm-border);
    border-radius: 14px;
    padding: 24px 26px
}

.lm-mem-page .earn-card .head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px
}

.lm-mem-page .earn-card .head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700
}

.lm-mem-page .earn-card .head .meta {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10.5px;
    color: var(--lm-muted);
    text-transform: uppercase;
    letter-spacing: .06em
}

.lm-mem-page .earn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.lm-mem-page .earn-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border-2,var(--lm-border));
    border-radius: 10px
}

.lm-mem-page .earn-tile.is-soon {
    opacity: .72
}

.lm-mem-page .earn-tile .ic {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--lm-primary-soft);
    color: var(--lm-primary-text,var(--lm-primary));
    display: grid;
    place-items: center;
    flex: none
}

.lm-mem-page .earn-tile .text {
    flex: 1;
    min-width: 0
}

.lm-mem-page .earn-tile .n {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lm-text);
    line-height: 1.3;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.lm-mem-page .earn-tile .freq {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10px;
    color: var(--lm-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px
}

.lm-mem-page .earn-tile .v {
    font-family: var(--lm-font-mono,monospace);
    font-size: 18px;
    font-weight: 700;
    color: var(--lm-primary-text,var(--lm-primary));
    flex: none
}

.lm-mem-page .earn-hint {
    margin: 0 0 4px;
    font-size: 13.5px;
    color: var(--lm-text-secondary);
    line-height: 1.6
}

.lm-mem-page .earn-hint a {
    color: var(--lm-primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap
}

.lm-mem-page .earn-hint a:hover {
    text-decoration: underline
}

.lm-mem-page .earn-foot {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--lm-primary-soft);
    border: 1px solid var(--lm-primary-soft-2,#dcebe2);
    border-radius: 10px;
    font-size: 13px;
    color: var(--lm-text-secondary);
    line-height: 1.5
}

.lm-mem-page .earn-foot strong {
    color: var(--lm-text);
    font-weight: 600
}

.lm-mem-page .earn-foot .pay-note {
    display: inline-block;
    margin-left: 4px;
    font-family: var(--lm-font-mono,monospace);
    font-size: 11px;
    color: var(--lm-muted);
    text-transform: uppercase;
    letter-spacing: .04em
}

/* Testimonial (right of the earn card) */
.lm-mem-page .testimonial {
    background: linear-gradient(135deg,var(--lm-elite,#0c0a05) 0%, var(--lm-elite-2,#1a1208) 100%);
    color: #fef7d6;
    border-radius: 14px;
    padding: 24px 26px;
    position: relative;
    overflow: hidden;
    min-height: 215px
}

.lm-mem-page .testimonial::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(198,161,91,.22), transparent 70%)
}

.lm-mem-page .testimonial-body {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1.5;
    font-style: italic;
    color: #fff;
    margin-bottom: 18px;
    max-width: 38ch;
    font-weight: 500;
    letter-spacing: -0.01em
}

.lm-mem-page .testimonial-body em {
    color: var(--lm-gold);
    font-style: normal;
    font-weight: 600;
    background: rgba(198,161,91,.14);
    padding: 0 6px;
    border-radius: 4px
}

.lm-mem-page .testimonial-attr {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(198,161,91,.18)
}

.lm-mem-page .testimonial-attr .av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg,#7c3aed,#5b21b6);
    flex: none;
    display: block;
    border: 2px solid rgba(198,161,91,.5)
}

.lm-mem-page .testimonial-attr .who .n {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff
}

.lm-mem-page .testimonial-attr .who .n .pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--lm-font-mono,monospace);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg,#d4b46a,#C6A15B);
    color: #1f1408;
    text-transform: uppercase;
    letter-spacing: .04em
}

.lm-mem-page .testimonial-attr .who .m {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10.5px;
    color: rgba(232,223,198,.55);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px
}

/* ── Responsive (tablet + 375px) ── */
@media (max-width: 1024px) {
    /* Single column: drop the shared-row subgrid and stack each card as a normal
       flex column (subgrid + grid-row:1/-1 would overlap cards in one column). */
    .lm-mem-page .tiers {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 14px;
    }

    .lm-mem-page .tier {
        display: flex;
        flex-direction: column;
        gap: 14px;
        grid-row: auto;
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .lm-mem-page {
        padding:16px 14px 80px
    }

    .lm-mem-page .status-card {
        grid-template-columns: 1fr
    }

    .lm-mem-page .status-id,.lm-mem-page .status-progress {
        border-right: 0;
        border-bottom: 1px solid var(--lm-border)
    }

    .lm-mem-page .hero h1 {
        font-size: 24px
    }

    .lm-mem-page .free-tiers {
        grid-template-columns: 1fr
    }

    .lm-mem-page .earn-section {
        grid-template-columns: 1fr
    }

    /* Mobile: testimonial is no longer stretched by the earn-card column, so give
     it room for the longest quote + attribution (absolute slides can't auto-grow). */
    .lm-mem-page .testimonial {
        min-height: 320px
    }

    .lm-mem-page .earn-grid {
        grid-template-columns: 1fr
    }

    .lm-mem-page .free-tier {
        gap: 14px
    }

    /* Mobile: pills may wrap; price stays inline with the name via .ft-top. */
    .lm-mem-page .ft-feats {
        flex-wrap: wrap
    }

    .lm-mem-page .free-tier .ft-price {
        font-size: 15px
    }

    /* Mobile: stack the earn header so each phrase stays on one line. */
    .lm-mem-page .earn-card .head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }

    .lm-mem-page .earn-card .head h3,.lm-mem-page .earn-card .head .meta {
        white-space: nowrap
    }

    .lm-mem-page .bill-toggle button {
        padding: 8px 12px;
        font-size: 12.5px;
        gap: 5px
    }

    .lm-mem-page .bill-toggle .save-badge {
        display: none
    }
}

/* Payment-coming-soon toast (global overlay, appended to body) */
/* Fixed dark slate (NOT var(--lm-text) — that flips light in dark mode, making
   white text unreadable). A hairline keeps it legible on a dark page too. */
.lm-mem-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    background: #1e293b;
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s,transform .18s;
    z-index: 3000;
    max-width: 90vw
}

.lm-mem-toast.is-on {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}

/* ── Phase 11.1c — testimonial carousel, price-bill, current-state polish ── */
.lm-mem-page .section-title p strong {
    font-weight: 600;
    color: var(--lm-text)
}

.lm-mem-page .tier.vip-c .price-or strong {
    color: var(--lm-gold-deep)
}

.lm-mem-page .price-bill {
    font-size: 11px;
    color: var(--lm-muted);
    font-family: var(--lm-font-mono,monospace);
    letter-spacing: .02em;
    margin-top: 2px
}

.lm-mem-page .tier.elite-c .tier-badge.current {
    background: #0c0a05;
    color: #fff;
    border: 1px solid rgba(198,161,91,.65)
}

.lm-mem-page .testi-slide {
    position: absolute;
    top: 24px;
    left: 26px;
    right: 26px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none
}

.lm-mem-page .testi-slide.is-active {
    opacity: 1;
    pointer-events: auto
}

.lm-mem-page .testimonial-attr .av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.lm-mem-page .testimonial-attr .who .n .pill--pro {
    background: var(--lm-primary);
    color: #fff
}

/* ── Dark theme — the design is light; adapt the hardcoded-light surfaces so the
      page reads correctly under the app's dark theme (var()-based fills flip on their own). ── */
html[data-lm-theme="dark"] .lm-mem-page .tier.pro-c {
    background: linear-gradient(180deg,#16242a 0%, #0f161b 100%);
    border-color: rgba(120,160,170,.28)
}

html[data-lm-theme="dark"] .lm-mem-page .tier.vip-c {
    background: linear-gradient(180deg,#241d0c 0%, #15110a 100%);
    border-color: var(--lm-gold)
}

html[data-lm-theme="dark"] .lm-mem-page .tier.pro-c .comm {
    background: rgba(15,111,79,.18);
    border-color: rgba(15,111,79,.38)
}

html[data-lm-theme="dark"] .lm-mem-page .tier.pro-c .comm-title {
    color: #5fcc94
}

html[data-lm-theme="dark"] .lm-mem-page .tier.pro-c .comm-sub {
    color: rgba(255,255,255,.55)
}

html[data-lm-theme="dark"] .lm-mem-page .tier.vip-c .tier-name, html[data-lm-theme="dark"] .lm-mem-page .tier.vip-c .comm-rate, html[data-lm-theme="dark"] .lm-mem-page .tier.vip-c .price-or strong, html[data-lm-theme="dark"] .lm-mem-page .tier.vip-c .comm-delta {
    color: var(--lm-gold)
}

html[data-lm-theme="dark"] .lm-mem-page .status-id {
    background: linear-gradient(135deg,rgba(15,111,79,.22) 0%, rgba(15,111,79,.08) 100%)
}

html[data-lm-theme="dark"] .lm-mem-page .status-avatar {
    border-color: rgba(255,255,255,.14)
}

html[data-lm-theme="dark"] .lm-mem-page .free-tier.verified-c {
    background: linear-gradient(135deg,rgba(15,111,79,.14) 0%, rgba(15,111,79,.05) 100%);
    border-color: rgba(15,111,79,.4)
}

html[data-lm-theme="dark"] .lm-mem-page .btn-current {
    border-color: rgba(255,255,255,.18)
}

/* "YOU · 305" progress marker: white pill is invisible on dark — use a dark chip. */
html[data-lm-theme="dark"] .lm-mem-page .bar .marker {
    background: var(--lm-surface-2,#1c232c);
    border-color: rgba(255,255,255,.18);
    color: #3fae77
}

html[data-lm-theme="dark"] .lm-mem-page .tier.pro-c .tier-name {
    color: #3fae77
}

html[data-lm-theme="dark"] .lm-mem-page .ft-kyc-logo {
    filter: brightness(0) invert(1)
}

/* ── Billing-period toggle (Yearly / Quarterly / Monthly) — live price swap ── */
.lm-mem-page .price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap
}

.lm-mem-page .price-save {
    margin-left: auto;
    color: var(--lm-primary-text,var(--lm-primary));
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
    background: var(--lm-primary-soft);
    padding: 3px 10px;
    border-radius: 999px
}

.lm-mem-page .tier.vip-c .price-save {
    background: var(--lm-gold-soft);
    color: var(--lm-gold-deep)
}

.lm-mem-page .price-save:empty {
    display: none
}

/* On the dark elite-c card (brand Premium) the default emerald "Save 25%" is
   invisible — use the card's gold accent so it reads on the near-black bg. */
.lm-mem-page .tier.elite-c .price-save {
    color: var(--lm-gold,#c6a15b)
}

/* Promo badge beside the tier price (design: designs/talent-tiers/promo-badge.css).
   Gift-icon coupon sticker: gift icon + bold "{n} months free" + small "-{pct}%" on
   yearly; spark icon + compact "-{pct}%" on quarterly; hidden on monthly. The VALUES stay
   computed from live prices (promo_mo / promo_pct); only the look comes from the mockup.
   Per-tier accent via data-tier (pro/vip/business/premium); light + dark. */
.price-promo {
  --pp-grad-1:#16855f; --pp-grad-2:#0f6f4f;
  --pp-fg:#ffffff; --pp-fg-soft:rgba(255,255,255,.82);
  --pp-ring:rgba(255,255,255,.30);
  --pp-notch:#ffffff;
  --pp-glow:rgba(15,111,79,.28);
  position:relative; display:inline-flex; align-items:center; gap:9px;
  margin-left:auto; align-self:center;
  padding:7px 13px 7px 9px; border-radius:11px;
  background:linear-gradient(135deg, var(--pp-grad-1) 0%, var(--pp-grad-2) 100%);
  color:var(--pp-fg);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 0 0 1px var(--pp-ring) inset, 0 6px 16px -6px var(--pp-glow);
  isolation:isolate; line-height:1; white-space:nowrap;
}
.price-promo::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  background-size:220% 100%; background-position:130% 0; opacity:0; transition:opacity .2s; pointer-events:none;
}
.tier:hover .price-promo::after, .price-promo:hover::after{ opacity:1; animation:pp-sheen 1.1s ease forwards; }
@keyframes pp-sheen{ from{background-position:130% 0} to{background-position:-60% 0} }
@media (prefers-reduced-motion: reduce){ .price-promo::after{ display:none; } }
.price-promo .promo-perf{
  position:relative; z-index:1; align-self:stretch; width:1px; margin:2px 1px;
  background-image:linear-gradient(var(--pp-fg-soft) 0 0); background-size:1px 3px; background-repeat:repeat-y; opacity:.5;
}
/* Decorative ticket-notch dots removed by request — keep the divider as a
   clean vertical line only (applies to all PRO/VIP + Business/Premium badges). */
.price-promo .promo-perf::before, .price-promo .promo-perf::after{ display:none; }
.price-promo .promo-icon{
  position:relative; z-index:1; width:26px; height:26px; flex:none; border-radius:8px;
  display:grid; place-items:center; background:rgba(255,255,255,.18); box-shadow:0 0 0 1px var(--pp-ring) inset;
}
.price-promo .promo-icon svg{ width:15px; height:15px; display:block; }
.price-promo .promo-ic-gift{ display:inline-flex; }
.price-promo .promo-ic-spark{ display:none; }
.price-promo .promo-text{ position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; }
.price-promo .promo-free{ font-size:13px; font-weight:800; letter-spacing:-0.01em; line-height:1; }
.price-promo .promo-free:empty{ display:none; }
.price-promo .promo-pct{
  font-family:var(--lm-font-mono, var(--font-mono, ui-monospace, monospace));
  font-size:10.5px; font-weight:700; letter-spacing:.02em; line-height:1;
  color:var(--pp-fg-soft); display:inline-flex; align-items:center; gap:4px;
}
.price-promo .promo-pct::before{ content:""; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.7; }
/* QUARTERLY: spark icon + single compact percent */
.price-promo[data-mode="quarterly"]{ padding:7px 12px; gap:7px; }
.price-promo[data-mode="quarterly"] .promo-perf{ display:none; }
.price-promo[data-mode="quarterly"] .promo-ic-gift{ display:none; }
.price-promo[data-mode="quarterly"] .promo-ic-spark{ display:inline-flex; }
.price-promo[data-mode="quarterly"] .promo-icon{ width:22px; height:22px; border-radius:7px; }
.price-promo[data-mode="quarterly"] .promo-icon svg{ width:13px; height:13px; }
.price-promo[data-mode="quarterly"] .promo-text{ flex-direction:row; align-items:center; gap:0; }
.price-promo[data-mode="quarterly"] .promo-free{ display:none; }
.price-promo[data-mode="quarterly"] .promo-pct{ font-size:13px; font-weight:800; color:var(--pp-fg); }
.price-promo[data-mode="quarterly"] .promo-pct::before{ display:none; }
/* hidden on monthly */
.price-promo[data-mode="monthly"], .price-promo[hidden]{ display:none; }
/* per-tier accent palettes */
.price-promo[data-tier="pro"]{ --pp-grad-1:#16855f; --pp-grad-2:#0d6044; --pp-glow:rgba(15,111,79,.30); --pp-notch:var(--lm-primary-soft, #f3f8f5); }
.price-promo[data-tier="vip"]{ --pp-grad-1:#caa14a; --pp-grad-2:#9c7321; --pp-fg:#ffffff; --pp-fg-soft:rgba(255,255,255,.88); --pp-ring:rgba(255,255,255,.34); --pp-glow:rgba(124,88,23,.38); --pp-notch:#fbf3dd; }
.price-promo[data-tier="business"]{ --pp-grad-1:#0a5a66; --pp-grad-2:#00363f; --pp-glow:rgba(0,54,63,.34); --pp-notch:var(--lm-brand-soft, #e8eef0); }
.price-promo[data-tier="premium"]{ --pp-grad-1:#f0cf78; --pp-grad-2:#d4a93f; --pp-fg:#241a05; --pp-fg-soft:rgba(36,26,5,.72); --pp-ring:rgba(255,255,255,.45); --pp-glow:rgba(212,169,63,.45); --pp-notch:#120d05; }
.price-promo[data-tier="premium"] .promo-icon{ background:rgba(36,26,5,.16); box-shadow:0 0 0 1px rgba(36,26,5,.18) inset; }
/* dark theme: flip the punch-hole notch to the dark card surface for light-card tiers */
html[data-lm-theme="dark"] .price-promo[data-tier="pro"]{ --pp-notch:#0e1f19; --pp-glow:rgba(22,133,95,.5); }
html[data-lm-theme="dark"] .price-promo[data-tier="vip"]{ --pp-notch:#241d0c; --pp-glow:rgba(202,161,74,.5); }
html[data-lm-theme="dark"] .price-promo[data-tier="business"]{ --pp-notch:#0a1c20; --pp-glow:rgba(10,90,102,.5); }

.lm-mem-page .bill-toggle-wrap {
    display: flex;
    justify-content: center;
    margin: 2px 0 26px
}

.lm-mem-page .bill-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--lm-surface-2,#eef1f4);
    border: 1px solid var(--lm-border);
    border-radius: 999px;
    padding: 5px
}

.lm-mem-page .bill-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--lm-text-secondary);
    font-weight: 700;
    font-size: 14px;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s,color .15s
}

.lm-mem-page .bill-toggle button:hover:not(.is-active) {
    color: var(--lm-text)
}

.lm-mem-page .bill-toggle button.is-active {
    background: var(--lm-primary);
    color: #fff
}

.lm-mem-page .bill-toggle .save-badge {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--lm-primary-soft,rgba(15,111,79,.12));
    color: var(--lm-primary-text,var(--lm-primary));
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap
}

.lm-mem-page .bill-toggle button.is-active .save-badge {
    background: rgba(255,255,255,.22);
    color: #fff
}

/* "KYC by [Sumsub]" badge next to the Verified tier name */
.lm-mem-page .ft-kyc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-family: var(--lm-font-mono,monospace);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--lm-muted);
    vertical-align: middle
}

.lm-mem-page .ft-kyc-logo {
    height: 18px;
    width: auto;
    display: inline-block;
    vertical-align: middle
}

/* ── Canonical tier badge — same markup/look as profile (_lm_tier_badge.tpl).
      Copied here (scoped) so the status badge matches the profile + the ELITE
      card without pulling in lm-profile.css. ── */
.lm-mem-page .lm-tier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--lm-gold);
    color: #fff;
    border-radius: 5px;
    border: 1px solid #b8923f;
    font-family: var(--lm-font-mono);
    line-height: 1
}

.lm-mem-page .lm-tier-pro {
    background: #0f6f4f;
    border-color: #0a5439;
    color: #fff
}

.lm-mem-page .lm-tier-vip {
    background: linear-gradient(135deg,#fef7d6,#f5deb3);
    border: 1px solid #d4a93f;
    color: #6e4a04;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(180,83,9,.15)
}

.lm-mem-page .lm-tier-vip svg {
    color: #6e4a04 !important;
    fill: #6e4a04 !important
}

.lm-mem-page .lm-tier-elite {
    background: linear-gradient(135deg,#1f2937,#0f172a);
    border: 1px solid #d4a93f;
    color: #f5deb3
}

.lm-mem-page .lm-tier-elite svg {
    color: #f5deb3 !important;
    fill: #f5deb3 !important
}

.lm-mem-page .lm-tier-verified {
    background: var(--lm-primary-soft);
    border-color: var(--lm-primary-soft-2);
    color: var(--lm-primary-strong)
}

.lm-mem-page .lm-tier:not(.lm-tier-vip):not(.lm-tier-elite) svg {
    color: inherit !important
}

.lm-mem-page .lm-tier-sm {
    padding: 3px 7px;
    font-size: 9.5px;
    letter-spacing: .05em;
    border-radius: 4px;
    gap: 4px
}

.lm-mem-page .lm-tier-sm svg {
    width: 9px;
    height: 9px
}

html[data-lm-theme="dark"] .lm-mem-page .lm-tier-vip {
    background: linear-gradient(135deg,#fef7d6,#e6c468) !important;
    color: #6e4a04 !important;
    border-color: #d4a93f !important;
    box-shadow: none !important
}

html[data-lm-theme="dark"] .lm-mem-page .lm-tier-vip svg {
    color: #6e4a04 !important;
    fill: #6e4a04 !important
}

html[data-lm-theme="dark"] .lm-mem-page .lm-tier-elite {
    background: linear-gradient(135deg,#1f2937,#0f172a) !important;
    color: #f5deb3 !important;
    border-color: #d4a93f !important
}

html[data-lm-theme="dark"] .lm-mem-page .lm-tier-elite svg {
    color: #f5deb3 !important;
    fill: #f5deb3 !important
}

html[data-lm-theme="dark"] .lm-mem-page .lm-tier-pro {
    background: #0f6f4f !important;
    color: #fff !important;
    border-color: #0a5439 !important
}

/* ── Pricing/membership tier cards: tier name rendered as the standard
   .lm-tier badge (icon + name). Slightly larger than the inline badge so it
   reads as the card title. ELITE "By invitation" refined: smaller star,
   tighter premium type. (Phase 11.3) ── */
.lm-mem-page .tier-name-block .lm-tier {
    font-size: 12.5px;
    padding: 5px 11px;
    gap: 5px;
    border-radius: 6px;
}

.lm-mem-page .tier-name-block .lm-tier svg {
    width: 12px;
    height: 12px;
}

.lm-mem-page .elite-invite {
    font-size: 11px;
    letter-spacing: 0.16em;
}

.lm-mem-page .elite-invite .elite-invite-star {
    font-size: 8px;
    vertical-align: middle;
    opacity: 0.9;
    margin-right: 2px;
}

/* ── ELITE interest — admin leads list (Phase 11.3) ─────────────────────────
   Only rendered for admins/moderators, under the tier cards. Mirrors the LM
   card chrome (avatar + name row + meta + actions). */
.lm-mem-page .lm-mem-admin {
    margin-top: 42px;
    background: var(--lm-bg,#fff);
    border: 1px solid var(--lm-border,#e2e8f0);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: var(--lm-shadow-md,0 8px 24px rgba(15,23,42,.06))
}

.lm-mem-page .lm-mem-admin-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap
}

.lm-mem-page .lm-mem-admin-head .kicker {
    font-family: var(--lm-font-mono,monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--lm-gold-deep,#7a5e2e);
    margin-bottom: 4px;
    display: inline-block
}

.lm-mem-page .lm-mem-admin-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--lm-text,#0f172a)
}

.lm-mem-page .lm-mem-admin-counts {
    display: flex;
    gap: 8px
}

.lm-mem-page .lm-mem-acount {
    font-family: var(--lm-font-mono,monospace);
    font-size: 11px;
    color: var(--lm-primary-text,var(--lm-primary));
    background: var(--lm-primary-soft);
    padding: 4px 10px;
    border-radius: 999px
}

.lm-mem-page .lm-mem-acount.is-muted {
    color: var(--lm-muted);
    background: var(--lm-surface-2,#f1f5f9)
}

.lm-mem-page .lm-mem-acount strong {
    font-weight: 700
}

.lm-mem-page .lm-mem-leads {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.lm-mem-page .lm-mem-leads-empty {
    padding: 22px;
    text-align: center;
    color: var(--lm-muted);
    font-size: 13.5px;
    background: var(--lm-surface,#f8fafc);
    border-radius: 10px
}

.lm-mem-page .lm-mem-lead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--lm-border,#e2e8f0);
    border-radius: 12px;
    background: var(--lm-bg,#fff)
}

.lm-mem-page .lm-mem-lead--dismissed {
    opacity: .55
}

.lm-mem-page .lm-mem-lead--contacted {
    background: var(--lm-primary-soft);
    border-color: var(--lm-primary-soft-2,#dcebe2)
}

.lm-mem-page .lm-mem-lead-av {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: none;
    background-size: cover;
    background-position: center;
    background-color: var(--lm-surface-2,#f1f5f9);
    border: 2px solid #fff;
    box-shadow: var(--lm-shadow-sm,0 1px 2px rgba(15,23,42,.06))
}

.lm-mem-page .lm-mem-lead-main {
    flex: 1;
    min-width: 0
}

.lm-mem-page .lm-mem-lead-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap
}

.lm-mem-page .lm-mem-lead-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lm-text,#0f172a);
    text-decoration: none
}

.lm-mem-page .lm-mem-lead-name:hover {
    text-decoration: underline
}

.lm-mem-page .lm-mem-lead-tick {
    flex: none
}

.lm-mem-page .lm-mem-lead-status {
    font-family: var(--lm-font-mono,monospace);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 8px;
    border-radius: 999px
}

.lm-mem-page .lm-mem-lead-status--new {
    background: var(--lm-gold-soft,#f7efd9);
    color: var(--lm-gold-deep,#7a5e2e)
}

.lm-mem-page .lm-mem-lead-status--contacted {
    background: var(--lm-primary);
    color: #fff
}

.lm-mem-page .lm-mem-lead-status--dismissed {
    background: var(--lm-surface-2,#f1f5f9);
    color: var(--lm-muted)
}

.lm-mem-page .lm-mem-lead-meta {
    margin-top: 3px;
    font-family: var(--lm-font-mono,monospace);
    font-size: 11.5px;
    color: var(--lm-muted)
}

.lm-mem-page .lm-mem-lead-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end
}

.lm-mem-page .lm-mem-lead-btn {
    font-size: 12px;
    font-weight: 600;
    color: var(--lm-text-secondary,#475569);
    background: var(--lm-surface,#f8fafc);
    border: 1px solid var(--lm-border,#e2e8f0);
    border-radius: 8px;
    padding: 6px 11px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    transition: background .12s ease,border-color .12s ease,color .12s ease
}

.lm-mem-page .lm-mem-lead-btn:hover {
    background: var(--lm-surface-2,#eef2f6);
    border-color: var(--lm-muted-2,#cbd5e1);
    color: var(--lm-text,#0f172a)
}

.lm-mem-page .lm-mem-lead-btn.is-ghost {
    background: transparent
}

.lm-mem-page .lm-mem-lead-btn:disabled {
    opacity: .5;
    cursor: default
}

@media (max-width: 680px) {
    .lm-mem-page .lm-mem-lead {
        flex-wrap:wrap
    }

    .lm-mem-page .lm-mem-lead-actions {
        width: 100%;
        justify-content: flex-start
    }
}

html[data-lm-theme="dark"] .lm-mem-page .lm-mem-admin, html[data-lm-theme="dark"] .lm-mem-page .lm-mem-lead {
    background: var(--lm-surface,#161b22);
    border-color: var(--lm-border,#30363d)
}

html[data-lm-theme="dark"] .lm-mem-page .lm-mem-lead-btn {
    background: var(--lm-surface-2,#1c232c);
    border-color: var(--lm-border,#30363d);
    color: var(--lm-text-secondary,#aeb9c4)
}

html[data-lm-theme="dark"] .lm-mem-page .lm-mem-lead-btn:hover {
    background: #232b35;
    border-color: #4a5564;
    color: var(--lm-text,#e6edf3)
}

/* ── tier-progress layout: status card + testimonial stacked in the
   earn-section's right column (.earn-aside). The status card normally renders
   as a wide 3-up bar, so it stacks vertically here. ── */
.lm-mem-page .earn-section {
    align-items: stretch
}

.lm-mem-page .earn-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0
}

.lm-mem-page .earn-aside .testimonial {
    flex: 1
}

.lm-mem-page .status-card--side {
    grid-template-columns: 1fr;
    margin-top: 0
}

.lm-mem-page .status-card--side .status-id, .lm-mem-page .status-card--side .status-progress {
    border-right: 0;
    border-bottom: 1px solid var(--lm-border)
}

/* Bottom tagline (moved out of the removed earn-foot). */
.lm-mem-page .lm-mem-bottom-note {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--lm-muted)
}

/* ===== ELITE application modal (tier_progress) ===== */
.lm-mem-page .lm-elite-modal-scrim{position:fixed;inset:0;z-index:9999;background:rgba(12,10,5,.6);display:flex;align-items:center;justify-content:center;padding:20px}
.lm-mem-page .lm-elite-modal-scrim[hidden]{display:none}
.lm-mem-page .lm-elite-modal{position:relative;width:100%;max-width:540px;max-height:90vh;overflow:auto;background:linear-gradient(180deg,var(--lm-elite,#0c0a05) 0%, var(--lm-elite-2,#1a1208) 100%);border:1px solid rgba(198,161,91,.4);border-radius:16px;padding:28px 28px 24px;color:#e8dfc6;box-shadow:0 28px 80px -18px rgba(0,0,0,.75)}
.lm-mem-page .lm-elite-modal-x{position:absolute;top:12px;right:16px;border:0;background:none;font-size:24px;line-height:1;color:rgba(232,223,198,.55);cursor:pointer;transition:color .15s}
.lm-mem-page .lm-elite-modal-x:hover{color:var(--lm-gold)}
.lm-mem-page .lm-elite-modal h3{margin:0 0 4px;font-size:21px;color:var(--lm-gold);letter-spacing:.01em}
.lm-mem-page .lm-elite-modal-sub{margin:0 0 18px;font-size:13px;color:rgba(232,223,198,.65)}
.lm-mem-page .lm-elite-stats{background:rgba(198,161,91,.08);border:1px solid rgba(198,161,91,.28);border-radius:12px;padding:14px 16px;margin-bottom:20px}
.lm-mem-page .lm-elite-stats-kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(232,223,198,.55);font-weight:700;margin-bottom:10px}
.lm-mem-page .lm-elite-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.lm-mem-page .lm-elite-stat{display:flex;flex-direction:column;gap:3px;text-align:center;padding:0 6px}
.lm-mem-page .lm-elite-stat+.lm-elite-stat{border-left:1px solid rgba(198,161,91,.18)}
.lm-mem-page .lm-elite-stat .v{font-size:17px;font-weight:800;color:#fbf4dc;line-height:1.15}
.lm-mem-page .lm-elite-stat .v .star{color:var(--lm-gold);margin-left:2px;font-weight:400}
.lm-mem-page .lm-elite-stat .l{font-size:10.5px;color:rgba(232,223,198,.55);text-transform:uppercase;letter-spacing:.03em}
.lm-mem-page .lm-elite-field{margin-bottom:16px}
.lm-mem-page .lm-elite-label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:#e8dfc6}
.lm-mem-page .lm-elite-label em{color:#e6a07a;font-style:normal}
.lm-mem-page .lm-elite-hint{display:block;font-size:11.5px;color:rgba(232,223,198,.5);margin-bottom:7px}
.lm-mem-page .lm-elite-field textarea,.lm-mem-page .lm-elite-field input[type=text]{width:100%;border:1px solid rgba(198,161,91,.3);border-radius:9px;padding:10px 12px;font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box;background:rgba(0,0,0,.28);color:#fbf4dc}
.lm-mem-page .lm-elite-field textarea::placeholder,.lm-mem-page .lm-elite-field input[type=text]::placeholder{color:rgba(232,223,198,.35)}
.lm-mem-page .lm-elite-field textarea:focus,.lm-mem-page .lm-elite-field input[type=text]:focus{outline:none;border-color:var(--lm-gold);box-shadow:0 0 0 3px rgba(198,161,91,.18)}
/* Keep ELITE modal fields on the gold/dark palette in dark theme — the global dark
   input rule (lm-profile.css) otherwise forces them to navy --lm-surface-2 with !important */
html[data-lm-theme="dark"] .lm-mem-page .lm-elite-field textarea,
html[data-lm-theme="dark"] .lm-mem-page .lm-elite-field input[type=text]{background:rgba(0,0,0,.28) !important;color:#fbf4dc !important;border-color:rgba(198,161,91,.3) !important}
html[data-lm-theme="dark"] .lm-mem-page .lm-elite-field textarea::placeholder,
html[data-lm-theme="dark"] .lm-mem-page .lm-elite-field input[type=text]::placeholder{color:rgba(232,223,198,.35)}
html[data-lm-theme="dark"] .lm-mem-page .lm-elite-field textarea:focus,
html[data-lm-theme="dark"] .lm-mem-page .lm-elite-field input[type=text]:focus{border-color:var(--lm-gold) !important;box-shadow:0 0 0 3px rgba(198,161,91,.18)}
.lm-mem-page .lm-elite-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.lm-mem-page .lm-elite-modal .btn-light{background:rgba(255,255,255,.07);color:#e8dfc6;border:1px solid rgba(198,161,91,.25)}
.lm-mem-page .lm-elite-modal .btn-light:hover{background:rgba(255,255,255,.12);color:#fbf4dc}
/* Keep the ELITE modal Cancel button on the gold palette in dark theme — the global dark
   .btn-light rule (lm-profile.css) otherwise forces it to navy --lm-surface-2 with !important */
html[data-lm-theme="dark"] .lm-mem-page .lm-elite-modal .btn-light{background:rgba(255,255,255,.07) !important;border-color:rgba(198,161,91,.25) !important;color:#e8dfc6 !important}
html[data-lm-theme="dark"] .lm-mem-page .lm-elite-modal .btn-light:hover{background:rgba(255,255,255,.12) !important;color:#fbf4dc !important}
.lm-mem-page .lm-elite-modal-err{color:#f0a08a;font-size:12.5px;margin:4px 0 10px}
.lm-mem-page .lm-elite-modal-err[hidden]{display:none}
body.lm-elite-modal-open{overflow:hidden}