/* v207: GLASSMORPHISM carousel cards (frosted glass, neon glow border). CSS only, no data. */
.car-c{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 42%),linear-gradient(145deg,color-mix(in srgb,var(--cc) 32%,transparent),color-mix(in srgb,var(--cc) 7%,transparent) 82%),color-mix(in srgb,var(--card) 66%,transparent);
 -webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35);
 border:1.5px solid color-mix(in srgb,var(--cc) 75%,#fff 12%);
 box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 16%,transparent),0 0 20px color-mix(in srgb,var(--cc) 36%,transparent),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.06)}
html[data-mode="light"] .car-c{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 45%),linear-gradient(145deg,color-mix(in srgb,var(--cc) 22%,transparent),color-mix(in srgb,var(--cc) 5%,transparent) 82%),color-mix(in srgb,var(--card) 70%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--cc) 26%,transparent),inset 0 1px 0 rgba(255,255,255,.7)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.car-c{background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 38%,var(--card)),color-mix(in srgb,var(--cc) 8%,var(--card)) 85%)}}

/* v209: PLANS screen in the glass style (feature cards for the perks, glass plan cards with a gold crown). Colours come from --cc on each card. */
.pgl,.plan{--cc:var(--acc);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 40%),linear-gradient(145deg,color-mix(in srgb,var(--cc) 20%,transparent),color-mix(in srgb,var(--cc) 5%,transparent) 80%),color-mix(in srgb,var(--card) 70%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border:1.5px solid color-mix(in srgb,var(--cc) 60%,var(--line));box-shadow:0 0 16px color-mix(in srgb,var(--cc) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.plfree{--cc:#3b9cff}.plp{--cc:#e0a52b}
.plp h4{display:flex;align-items:center;gap:8px;font-size:18px}.plp h4 .ic{width:22px;height:22px;color:var(--cc);flex:0 0 auto}
.plan .price{font-size:22px}.plp .price{color:var(--cc)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--cc) 65%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 26%,transparent),color-mix(in srgb,var(--cc) 5%,transparent) 85%),color-mix(in srgb,var(--card) 60%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--cc) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.2);min-width:0}
.pki{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:color-mix(in srgb,var(--cc) 22%,transparent);color:var(--cc)}.pki .ic{width:20px;height:20px}
.pk b{font-size:15px;line-height:1.2;color:var(--tx)}.pk small{font-size:12.5px;line-height:1.35;color:var(--tx);opacity:.78;overflow-wrap:anywhere}
html[data-mode="light"] .pgl,html[data-mode="light"] .plan{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 45%),linear-gradient(145deg,color-mix(in srgb,var(--cc) 14%,transparent),color-mix(in srgb,var(--cc) 4%,transparent) 80%),color-mix(in srgb,var(--card) 80%,transparent)}
html[data-mode="light"] .pk{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 16%,transparent),color-mix(in srgb,var(--cc) 3%,transparent) 85%),color-mix(in srgb,var(--card) 85%,transparent)}
@media(min-width:760px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* v210: advert cards (Premium and Tracker): big bold headline, kicker, call-to-action chip, faint icon behind */
.car-ad{position:relative;overflow:hidden;align-items:flex-start}
.car-ad .car-k{padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--cc) 22%,transparent);border:1px solid color-mix(in srgb,var(--cc) 55%,transparent);font-size:11px;letter-spacing:.09em}
.car-ad b{font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.01em;max-width:85%}
.car-ad small{font-size:14px;opacity:.88;max-width:82%}
.car-cta{display:inline-flex;align-items:center;margin-top:4px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:800;color:#0b0c0e;background:var(--cc);box-shadow:0 0 14px color-mix(in srgb,var(--cc) 45%,transparent)}
.car-adi{position:absolute;right:-6px;bottom:-6px;width:96px;height:96px;color:var(--cc);opacity:.18;pointer-events:none}.car-adi .ic{width:100%;height:100%}

/* v211: plan name at the end of each plan card, in the plan's own colour */
.plname{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--cc) 40%,var(--line));font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx)}
.plname i{width:12px;height:12px;border-radius:50%;background:var(--cc);box-shadow:0 0 10px var(--cc);flex:0 0 auto}
.plan.plp h4 .ic{color:var(--cc)}
html[data-theme="premium"] .card.plan{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 40%),linear-gradient(145deg,color-mix(in srgb,var(--cc) 26%,transparent),color-mix(in srgb,var(--cc) 6%,transparent) 80%),color-mix(in srgb,var(--card) 70%,transparent);border-color:color-mix(in srgb,var(--cc) 65%,var(--line));box-shadow:0 0 16px color-mix(in srgb,var(--cc) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
html[data-mode="light"][data-theme="premium"] .card.plan{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 18%,transparent),color-mix(in srgb,var(--cc) 4%,transparent) 80%),color-mix(in srgb,var(--card) 85%,transparent)}
html[data-mode="light"] .plp .price{color:color-mix(in srgb,var(--cc) 62%,#000)}
/* v212: match the energy of the plans on the phone: each plan's button, price, glow and name pill in its own colour (Free = blue) */
.plfree .price{color:var(--cc)}
.plan .btn[data-pick]{background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 100%,#fff 12%),color-mix(in srgb,var(--cc) 72%,#000))!important;color:#10131a!important;box-shadow:0 0 16px color-mix(in srgb,var(--cc) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
html[data-theme="premium"] .card.plan.plp{border-width:1.5px;box-shadow:0 0 22px color-mix(in srgb,var(--cc) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.2)}
.plan .plname{justify-content:space-between}
.plan .plname{border-top:0;padding:8px 12px;margin-top:12px;border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 30%,transparent),transparent);border:1px solid color-mix(in srgb,var(--cc) 55%,transparent);justify-content:flex-start}
.plan .plname::after{content:"";margin-left:auto;width:34px;height:3px;border-radius:2px;background:var(--cc);box-shadow:0 0 10px var(--cc)}
html[data-mode="light"] .plan .btn[data-pick]{color:#10131a}

/* v257: admin Plans list uses the same plan cards as members (Edit button instead of Choose, Active or Hidden pill) */
.plan .btn[data-pedit]{background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 100%,#fff 12%),color-mix(in srgb,var(--cc) 72%,#000))!important;color:#10131a!important;box-shadow:0 0 16px color-mix(in srgb,var(--cc) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.plan.plhid{opacity:.7}