/* Membership card: live data stays still; only the decorative background moves. */
.myspio-design .myspio-digital-card.myspio-member-card {
    display: grid; position: relative; isolation: isolate;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas: "number number" "barcode points";
    gap: 18px 20px; width: min(100%, 660px); min-height: 0;
    margin: 0 auto 28px; padding: clamp(16px, 3vw, 28px);
    aspect-ratio: 1.586 / 1; align-self: start; overflow: hidden; border: 1px solid #d7dfc0;
    border-radius: 22px; background: var(--spio-soft-lime); color: #183c66;
    box-shadow: 0 22px 54px -30px #183c6670, inset 0 1px 0 rgba(255,255,255,.78);
    transform: none; transform-style: flat; font-family: var(--spio-body);
}
/* Static colour field: motion comes from liquid shapes and a glass reflection. */
.myspio-design .myspio-member-card::before {
    content: ""; display: block; position: absolute; inset: 0; z-index: -1;
    width: auto; height: auto; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.94), transparent 36%),
        radial-gradient(circle at 88% 84%, rgba(134,157,250,.2), transparent 42%);
}
.myspio-design .myspio-member-card::after {
    content: ""; display: block; position: absolute; z-index: 1; pointer-events: none;
    top: -80%; bottom: -80%; left: -42%; width: 31%;
    border: 1px solid rgba(255,255,255,.58); border-radius: 48%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.44), rgba(134,157,250,.12), transparent);
    filter: blur(1px); transform: rotate(18deg) translateX(-140%);
    animation: myspio-glass-sheen 9s cubic-bezier(.45,0,.25,1) infinite;
}
.myspio-design .myspio-member-card .myspio-card-liquid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    overflow: hidden; background: transparent;
    filter: none; opacity: .48;
}
.myspio-card-liquid i {
    position: absolute; display: block; width: 44%; aspect-ratio: 1;
    top: -25%; right: -8%; background: #9fd63a;
    border-radius: 42% 58% 65% 35% / 55% 32% 68% 45%;
    animation: myspio-liquid-fusion 17s ease-in-out infinite;
}
.myspio-card-liquid i:nth-child(2) { width: 32%; top: 5%; right: 14%; animation-delay: -5s; animation-duration: 21s; }
.myspio-card-liquid i:nth-child(3) { width: 24%; top: 50%; right: -5%; background: #86c52d; animation-delay: -10s; animation-duration: 23s; }
.myspio-card-liquid i:nth-child(4) { width: 18%; top: 32%; right: 28%; background: #b4e65c; animation-delay: -3s; animation-duration: 19s; }
@keyframes myspio-glass-sheen {
    0%, 58% { opacity: 0; transform: rotate(18deg) translateX(-160%); }
    66% { opacity: .85; }
    84% { opacity: .48; }
    100% { opacity: 0; transform: rotate(18deg) translateX(650%); }
}
@keyframes myspio-liquid-fusion {
    0%, 100% { transform: translate(0, 0) rotate(0); border-radius: 42% 58% 65% 35% / 55% 32% 68% 45%; }
    25% { transform: translate(-34%, 34%) rotate(55deg) scale(.78, 1.14); border-radius: 65% 35% 36% 64% / 35% 65% 35% 65%; }
    50% { transform: translate(16%, 60%) rotate(125deg) scale(1.13, .87); border-radius: 35% 65% 56% 44% / 62% 42% 58% 38%; }
    75% { transform: translate(-42%, -8%) rotate(220deg) scale(.85); border-radius: 58% 42% 32% 68% / 42% 65% 35% 58%; }
}
.myspio-design .myspio-member-card .myspio-card-points {
    position: relative; z-index: 2; inset: auto; grid-area: points; display: grid;
    grid-template-columns: minmax(0, max-content) 36px; gap: 2px 6px;
    align-self: center; justify-self: end; justify-items: start; align-items: center;
    width: auto; min-width: 0; margin: 0; padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.62); border-radius: 16px;
    background: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter: blur(15px) saturate(125%); color: #183c66;
}
.myspio-design .myspio-member-card .myspio-card-points > span {
    grid-column: 1 / -1; grid-row: 1; justify-self: start;
    font: 600 .65rem/1.4 var(--spio-body); letter-spacing: .08em; text-transform: uppercase;
}
.myspio-design .myspio-member-card .myspio-card-points > strong {
    grid-column: 1; grid-row: 2; min-width: 0; max-width: 100%; overflow-wrap: anywhere;
    font: 500 clamp(1.25rem, 3vw, 1.75rem)/1.15 var(--spio-display); letter-spacing: -.04em;
}
.myspio-design .myspio-member-card .myspio-card-points > small {
    display: none;
}
.myspio-design .myspio-member-card .myspio-card-refresh {
    position: static; grid-column: 2; grid-row: 2; margin: 0; padding: 0; transform: none; align-self: center; line-height: 0;
}
.myspio-design .myspio-member-card .myspio-card-refresh button {
    display: grid; place-items: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; margin: 0; line-height: 1;
    padding: 8px; border: 1px solid #183c6633; border-radius: 50%;
    background: #ffffffaa; color: #183c66; box-shadow: none;
}
.myspio-design .myspio-member-card .myspio-card-number {
    position: relative; z-index: 2; inset: auto; grid-area: number; align-self: center;
    min-width: 0; width: fit-content; padding: 12px 15px; margin: 0;
    border: 1px solid rgba(255,255,255,.62); border-radius: 17px;
    background: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.62); backdrop-filter: blur(15px) saturate(125%); color: #183c66;
}
.myspio-design .myspio-member-card .myspio-card-number span {
    display: block; margin-bottom: 6px; color: #183c66;
    font: 600 .7rem/1.4 var(--spio-body); letter-spacing: .08em;
}
.myspio-design .myspio-member-card .myspio-card-number strong {
    display: block; font: 500 clamp(1.8rem, 6vw, 3rem)/1.1 var(--spio-display);
    font-variant-numeric: tabular-nums; letter-spacing: .04em; overflow-wrap: anywhere;
}
.myspio-design .myspio-member-card .myspio-barcode-wrap {
    position: relative; z-index: 2; inset: auto; grid-area: barcode; align-self: center;
    width: 100%; max-width: 100%; min-height: 58px; margin: 0;
    padding: 8px 12px; border: 1px solid rgba(255,255,255,.75); border-radius: 12px; background: rgba(255,255,255,.82); box-shadow: inset 0 1px 0 #fff; backdrop-filter: blur(12px);
}
.myspio-design .myspio-member-card .myspio-barcode { width: 100%; height: 42px; max-width: 100%; }
@media (max-width: 540px) {
    .myspio-design .myspio-digital-card.myspio-member-card { gap: 12px 10px; border-radius: 18px; }
    .myspio-design .myspio-member-card .myspio-barcode-wrap { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .myspio-design .myspio-member-card::before,
    .myspio-design .myspio-member-card::after,
    .myspio-design .myspio-card-liquid i { animation: none; }
}
.myspio-design .myspio-member-card,
.myspio-design .myspio-member-card * { box-sizing: border-box; }

/* Share the desktop row height; compact action panels no longer stretch the card. */
@media (min-width: 900px) {
 .myspio-design .myspio-dashboard .myspio-member-card {
    align-self: stretch; aspect-ratio: auto; min-height: 280px; width: 100%; max-width: none; margin: 0;
 }
 .myspio-design .myspio-dashboard .myspio-action-grid {
    align-self: stretch; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px;
 }
 .myspio-design .myspio-dashboard .myspio-action-card {
    min-height: 0; padding: 16px 20px; border-radius: 22px;
    display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px;
    align-content: center; justify-content: stretch;
 }
 .myspio-design .myspio-dashboard .myspio-action-icon { grid-column: 1; grid-row: 1 / 3; margin: 0; align-self: center; width: 36px; height: 36px; }
 .myspio-design .myspio-dashboard .myspio-action-card strong { grid-column: 2; font-size: 1.5rem; line-height: 1.15; padding-right: 20px; }
 .myspio-design .myspio-dashboard .myspio-action-card small { grid-column: 2; min-height: 0; margin-top: 6px; font-size: .875rem; }
 .myspio-design .myspio-dashboard .myspio-action-card::after { right: 16px; top: 14px; font-size: 1.3rem; }
}

.myspio-design .myspio-member-card .myspio-liquid-filter { position: absolute; width: 0; height: 0; pointer-events: none; }

/* Filter each solid-colour layer separately: no blurred colour boundaries. */
.myspio-design .myspio-member-card .myspio-card-liquid > span {
    position: absolute; inset: 0; display: block;
    filter: url(#myspio-liquid-merge);
}