html[data-theme-preset] body.membership-page-active {
    --plan-purple: var(--xl-theme-accent, #d4a843);
    --plan-blue: var(--xl-theme-accent, #d4a843);
    --plan-cyan: var(--xl-theme-accent-2, #d4a843);
    --plan-violet: var(--xl-theme-accent, #d4a843);
    --plan-line: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
    --plan-panel: color-mix(in srgb, var(--xl-theme-panel, #11100d) 74%, transparent);
    --plan-bg: var(--xl-theme-bg, #0a0a0a);
    --plan-ink: var(--xl-theme-fg, #e0d9c8);
    --plan-text: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 76%, transparent);
    --plan-muted: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 54%, transparent);
}

html[data-theme-preset] .membership-page {
    background:
        radial-gradient(ellipse at 50% 4%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent) 0%, transparent 66%),
        radial-gradient(ellipse at 7% 50%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 14%, transparent) 0%, transparent 66%),
        radial-gradient(ellipse at 78% 35%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, transparent) 0%, transparent 62%),
        linear-gradient(180deg, var(--xl-theme-bg, #0a0a0a) 0%, color-mix(in srgb, var(--xl-theme-panel, #11100d) 82%, var(--xl-theme-bg, #0a0a0a)) 100%);
}

html[data-theme-preset] .membership-page::before {
    background-image:
        radial-gradient(circle at 7% 11%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent) 0 2px, transparent 3px),
        radial-gradient(circle at 96% 70%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 28%, transparent) 0 2px, transparent 4px),
        radial-gradient(circle at 2% 94%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent) 0 2px, transparent 4px),
        linear-gradient(color-mix(in srgb, var(--xl-theme-accent, #d4a843) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 3%, transparent) 1px, transparent 1px);
}

html[data-theme-preset] .membership-page::after {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 24%, transparent);
    box-shadow:
        inset 0 0 170px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 10%, transparent),
        0 0 130px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, transparent);
}

html[data-theme-preset] .membership-panel {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 46%, transparent);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 84%, transparent) 0%, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 76%, transparent) 100%),
        radial-gradient(circle at 0% 12%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent), transparent 34%);
    box-shadow:
        0 22px 86px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 58%, transparent),
        0 0 36px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 8%, transparent),
        inset 0 0 56px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 7%, transparent);
}

html[data-theme-preset] .membership-panel::before {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 8%, transparent), transparent 20%, transparent 78%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 8%, transparent)),
        radial-gradient(circle at 50% -30%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, transparent), transparent 42%);
}

html[data-theme-preset] .membership-panel::after {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent);
}

html[data-theme-preset] .membership-card {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 32%, transparent);
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent), transparent 32%),
        linear-gradient(152deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 82%, transparent) 0%, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 88%, transparent) 100%);
    box-shadow: 0 16px 46px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 8%, transparent);
}

html[data-theme-preset] .membership-card::before {
    background: linear-gradient(115deg, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 5%, transparent), transparent 26%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 5%, transparent));
}

html[data-theme-preset] .membership-card:hover {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 58%, transparent);
    box-shadow: 0 26px 64px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 50%, transparent), 0 0 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent);
}

html[data-theme-preset] .membership-card--featured {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 72%, transparent);
    box-shadow: 0 22px 64px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 58%, transparent), 0 0 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 36%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 12%, transparent);
}

html[data-theme-preset] .membership-card--featured::after {
    background: linear-gradient(135deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent), transparent 50%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 18%, transparent));
}

html[data-theme-preset] .membership-ribbon,
html[data-theme-preset] .membership-btn--primary,
html[data-theme-preset] .membership-btn--ghost em {
    border-color: rgba(212, 168, 67, .48);
    background: linear-gradient(90deg, var(--xl-theme-accent, #d4a843) 0%, var(--xl-theme-accent-2, #d4a843) 100%);
    box-shadow: 0 10px 24px rgba(212, 168, 67, .34);
    color: var(--xl-theme-on-accent, #0a0a0a);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, transparent);
    background: linear-gradient(90deg, var(--xl-theme-accent, #d4a843) 0%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 72%, var(--xl-theme-fg, #e0d9c8)) 100%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
    color: var(--xl-theme-on-accent, #0a0a0a);
}

html[data-theme-preset] .membership-btn--ghost {
    border-color: rgba(212, 168, 67, .34);
    background: rgba(17, 16, 13, .9);
    box-shadow: inset 0 1px 0 rgba(224, 217, 200, .1);
    color: #f1e7c7;
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent);
    background: color-mix(in srgb, var(--xl-theme-panel, #11100d) 70%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 8%, transparent);
    color: color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 82%, transparent);
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    html[data-theme-preset] .membership-ribbon,
    html[data-theme-preset] .membership-btn--primary,
    html[data-theme-preset] .membership-btn--ghost em {
        border-color: rgba(212, 168, 67, .48);
        background: linear-gradient(90deg, var(--xl-theme-accent, #d4a843) 0%, var(--xl-theme-accent-2, #d4a843) 100%);
        box-shadow: 0 10px 24px rgba(212, 168, 67, .34);
        color: var(--xl-theme-on-accent, #0a0a0a);
    }

    html[data-theme-preset] .membership-btn--ghost {
        border-color: rgba(212, 168, 67, .34);
        background: rgba(17, 16, 13, .9);
        box-shadow: inset 0 1px 0 rgba(224, 217, 200, .1);
        color: #f1e7c7;
    }
}

html[data-theme-preset] .membership-group-mark,
html[data-theme-preset] .membership-group-title::after {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 72%, transparent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 40%, transparent);
}

html[data-theme-preset] .membership-crystal {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 55%, transparent);
    background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 62%, transparent));
    box-shadow: 0 0 16px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 62%, transparent);
}

html[data-theme-preset] .membership-crown {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
    background: radial-gradient(circle at 45% 35%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 24%, var(--xl-theme-popup, #15130f)), color-mix(in srgb, var(--xl-theme-panel, #11100d) 84%, transparent) 70%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 16%, transparent);
}

html[data-theme-preset] .membership-price {
    color: var(--xl-theme-accent, #d4a843);
    text-shadow: 0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
}

html[data-theme-preset] .membership-title,
html[data-theme-preset] .membership-card-title,
html[data-theme-preset] .membership-group-title {
    color: color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 90%, transparent);
    text-shadow: 0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, transparent);
}

html[data-theme-preset] .membership-feature-row,
html[data-theme-preset] .membership-price-unit,
html[data-theme-preset] .membership-benefit-list li {
    color: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 70%, transparent);
}

html[data-theme-preset] .membership-feature-row span:not(:last-child)::after {
    background: color-mix(in srgb, var(--xl-theme-border, #3b3120) 82%, transparent);
}

html[data-theme-preset] .membership-price-row {
    border-bottom-color: color-mix(in srgb, var(--xl-theme-border, #3b3120) 72%, transparent);
}

html[data-theme-preset] .membership-card-caption,
html[data-theme-preset] .membership-old-price {
    color: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 58%, transparent);
}

html[data-theme-preset] .membership-benefit-list li:hover .membership-check,
html[data-theme-preset] .membership-check,
html[data-theme-preset] .membership-crown svg,
html[data-theme-preset] .membership-trust-icon {
    color: var(--xl-theme-accent, #d4a843);
    stroke: currentColor;
}

html[data-theme-preset] body.membership-page-active .navul li > a.act_nav,
html[data-theme-preset] body.membership-page-active .navul li > a:hover {
    color: var(--xl-theme-accent, #d4a843) !important;
}

html[data-theme-preset] body.membership-page-active .navul li > a.act_nav::after {
    background: linear-gradient(90deg, transparent 0%, var(--xl-theme-accent, #d4a843) 50%, transparent 100%);
    box-shadow: 0 -6px 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 62%, transparent);
}