.member-rewards.levels-explorer { max-width:800px; color:var(--ink,#142b3b); }
.levels-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.levels-heading h1 { margin:0; font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:-.04em; }
.levels-mode { background:#e0f5ee; color:#008675; border-radius:30px; padding:7px 17px; font-size:.85rem; font-weight:650; }
.levels-membership { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; background:#fff; border:1px solid #dce6e9; border-radius:20px; box-shadow:0 3px 12px #163e3204; }
.levels-member-identity { display:flex; align-items:center; min-width:0; gap:18px; }
.levels-member-identity > .level-badge { --badge-size:100px; }
.levels-member-identity h2 { margin:0 0 5px; font-size:1.8rem; letter-spacing:-.035em; }
.levels-member-identity p { margin:0; color:#637784; font-size:1rem; }
.levels-member-fee { text-align:right; min-width:0; }
.levels-member-fee > span { display:block; color:#637784; font-size:.93rem; }
.levels-member-fee > strong { display:block; color:#008675; font-size:2.9rem; line-height:1.15; letter-spacing:-.045em; }
.levels-progress { margin-top:18px; padding:20px 24px; border:1px solid #bee6dd; border-radius:20px; background:#edf9f5; }
.levels-progress h2 { margin:0 0 3px; font-size:1.3rem; letter-spacing:-.025em; }
.levels-progress > p { margin:0 0 16px; color:#637784; font-size:.96rem; }
.levels-progress > label { display:block; color:#637784; font-size:.9rem; }
.levels-progress progress { display:block; appearance:none; width:100%; height:10px; border:0; border-radius:12px; overflow:hidden; margin:7px 0 14px; background:#dce9e7; accent-color:#008675; }
.levels-progress progress::-webkit-progress-bar { background:#dce9e7; }
.levels-progress progress::-webkit-progress-value { background:#008675; border-radius:12px; }
.levels-progress progress::-moz-progress-bar { background:#008675; border-radius:12px; }
.levels-next-reward { display:flex; width:fit-content; max-width:100%; align-items:center; gap:10px; padding:9px 12px; background:#fff5df; color:#825300; border-radius:12px; font-size:.98rem; line-height:1.4; }
.levels-next-reward svg { flex:none; width:25px; height:25px; }
.levels-next-reward strong { font-weight:700; }
.levels-discovery { margin-top:24px; }
.levels-discovery > h2 { margin:0 0 4px; font-size:1.6rem; letter-spacing:-.035em; }
.levels-discovery > p { margin:0 0 18px; color:#637784; font-size:1rem; line-height:1.5; }
.levels-tier-list { display:grid; gap:14px; }
.levels-tier-card { display:grid; grid-template-columns:90px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:8px 18px; align-items:center; min-width:0; padding:18px 24px 18px 20px; background:#fff; border:1px solid #e0eaed; border-radius:19px; box-shadow:0 3px 12px #163e3204; }
.levels-tier-card > .level-badge { --badge-size:90px; grid-column:1; grid-row:1 / 3; }
.levels-tier-copy { min-width:0; grid-column:2; grid-row:1; }
.levels-tier-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.levels-tier-heading h3 { margin:0; font-size:1.35rem; letter-spacing:-.035em; }
.levels-tier-heading > span { display:inline-block; background:#dff5ee; color:#008675; border-radius:8px; padding:3px 10px; font-size:.8rem; font-weight:650; }
.levels-tier-copy > p { margin:4px 0 0; color:#637784; font-size:.94rem; line-height:1.4; }
.levels-tier-price { grid-column:3; grid-row:1; align-self:start; text-align:right; }
.levels-tier-price > span { display:block; color:#637784; font-size:.87rem; }
.levels-tier-price strong { display:block; color:#008675; font-size:2.3rem; letter-spacing:-.04em; line-height:1.2; margin-top:2px; }
.levels-bonus { grid-column:2 / 4; grid-row:2; justify-self:start; display:flex; align-items:center; gap:9px; flex-wrap:wrap; background:#fff5df; color:#825300; border-radius:10px; padding:7px 10px; font-size:.88rem; line-height:1.4; }
.levels-bonus > svg { width:22px; height:22px; flex:none; }
.levels-bonus > strong { font-weight:650; }
.levels-bonus > span { border-left:1px solid #d8c699; padding-left:10px; }
.levels-explorer .levels-invite-button { display:flex; width:100%; margin-top:18px; min-height:56px; border-radius:14px; justify-content:center; font-size:1.2rem; font-weight:700; }
.levels-minimum-note { display:flex; justify-content:center; align-items:flex-start; gap:8px; margin:17px 0 24px; text-align:center; font-size:.82rem; color:#637784; line-height:1.6; }
.levels-minimum-note > svg { flex:none; width:20px; height:20px; margin-top:1px; }
.levels-paused { margin-top:18px; padding:20px; background:#fff; border:1px solid #dce6e9; border-radius:18px; }
.levels-paused h2 { font-size:1.15rem; margin:0 0 6px; }
.levels-paused p { color:#637784; margin:0 0 10px; }
@media(max-width:540px) {
 .levels-heading { margin-bottom:14px; }
 .levels-membership { padding:16px 12px; gap:10px; border-radius:17px; }
 .levels-member-identity { gap:9px; }
 .levels-member-identity > .level-badge { --badge-size:64px; }
 .levels-member-identity h2 { font-size:1.25rem; }
 .levels-member-identity p { font-size:.76rem; }
 .levels-member-fee { max-width:105px; }
 .levels-member-fee > span { font-size:.73rem; line-height:1.35; }
 .levels-member-fee > strong { font-size:2.25rem; }
 .levels-progress { padding:17px 15px; margin-top:14px; border-radius:17px; }
 .levels-progress h2 { font-size:1.1rem; line-height:1.35; }
 .levels-progress > p { font-size:.83rem; margin-bottom:14px; }
 .levels-progress > label { font-size:.8rem; }
 .levels-next-reward { font-size:.83rem; padding:9px 10px; gap:8px; }
 .levels-next-reward svg { width:22px; height:22px; }
 .levels-discovery { margin-top:21px; }
 .levels-discovery > h2 { font-size:1.4rem; }
 .levels-discovery > p { font-size:.85rem; margin-bottom:14px; }
 .levels-tier-list { gap:12px; }
 .levels-tier-card { grid-template-columns:58px minmax(0,1fr) 77px; gap:10px 9px; padding:16px 12px; border-radius:17px; }
 .levels-tier-card > .level-badge { --badge-size:58px; grid-row:1; }
 .levels-tier-heading { gap:6px; }
 .levels-tier-heading h3 { font-size:1.12rem; }
 .levels-tier-heading > span { font-size:.65rem; padding:2px 7px; }
 .levels-tier-copy > p { font-size:.76rem; }
 .levels-tier-price > span { font-size:.68rem; line-height:1.3; }
 .levels-tier-price strong { font-size:1.85rem; margin-top:4px; }
 .levels-bonus { grid-column:1 / -1; margin-left:67px; font-size:.75rem; gap:7px; padding:7px 8px; }
 .levels-bonus > svg { width:19px; height:19px; }
 .levels-bonus > span { padding-left:7px; }
 .levels-explorer .levels-invite-button { min-height:52px; font-size:1.1rem; }
 .levels-minimum-note { font-size:.73rem; gap:5px; }
}
@media(max-width:380px) {
 .levels-member-identity > .level-badge { --badge-size:52px; }
 .levels-member-identity { gap:7px; }
 .levels-member-identity p { font-size:.7rem; }
 .levels-member-fee { max-width:90px; }
 .levels-member-fee > span { font-size:.69rem; }
 .levels-tier-card { grid-template-columns:48px minmax(0,1fr) 65px; gap:10px 8px; }
 .levels-tier-card > .level-badge { --badge-size:48px; }
 .levels-bonus { margin-left:0; }
 .levels-tier-heading h3 { font-size:1rem; }
 .levels-tier-copy > p { font-size:.72rem; }
}
[data-appearance="dark"] .levels-explorer :is(.levels-membership,.levels-tier-card,.levels-paused) { background:var(--surface); border-color:var(--line); }
[data-appearance="dark"] .levels-progress { background:#203e36; border-color:#34594d; }
[data-appearance="dark"] .levels-explorer :is(.levels-member-identity p,.levels-member-fee > span,.levels-progress > p,.levels-progress > label,.levels-discovery > p,.levels-tier-copy > p,.levels-tier-price > span,.levels-minimum-note,.levels-paused p) { color:var(--muted); }
[data-appearance="dark"] .levels-explorer :is(.levels-bonus,.levels-next-reward) { background:#463820; color:#ffe0a0; }
[data-appearance="dark"] .levels-explorer :is(.levels-member-fee > strong,.levels-tier-price strong) { color:var(--green); }