/* Prompt (SIL OFL 1.1) self-hosted from @fontsource/prompt; files copied by npm run setup */
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/vendor/fonts/prompt-thai-400-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/vendor/fonts/prompt-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/vendor/fonts/prompt-thai-500-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/vendor/fonts/prompt-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/vendor/fonts/prompt-thai-700-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/vendor/fonts/prompt-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/vendor/fonts/prompt-thai-800-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/vendor/fonts/prompt-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand palette: fallback values = palette(DEFAULT_COLOR) from theme.js; the Worker injects the shop's own below this file. */
  --ivory: #fffdfd;
  --blush-50: #fdf6f8;
  --blush-100: #fbe9ef;
  --blush-200: #f7d4de;
  --rose: #eea6bb;
  --berry: #e36f92;
  --berry-dark: #c86280;
  --plum: #5d2d3b;
  --ink-soft: #794957;
  --muted: #9c7c86;
  --line: #f4e3e8;
  --brand-rgb: 227, 111, 146;
  --berry-ink: #e36f92;
  --berry-dark-ink: #c86280;
  --on-brand: #fff;
  --petal: #f2bece;
  --petal-line: #a8576f;
  --gold: #d4a08c;
  --success: #4f8f6d;
  --danger: #d4506f;
  --danger-rgb: 212, 80, 111;
  --white: #fff;
  --shadow: 0 18px 45px rgba(var(--brand-rgb), .10);
  --soft-shadow: 0 8px 24px rgba(var(--brand-rgb), .08);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --focus: 0 0 0 3px rgba(var(--brand-rgb), .25);
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--blush-50); color: var(--plum); font-family: "Prompt", "Thonburi", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:not(:disabled), a { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus); }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.8rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.8rem); letter-spacing: -.025em; }
h3 { font-size: 1.08rem; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.optional { color: var(--muted); font-size: .8rem; font-weight: 400; }
.eyebrow { margin-bottom: .45rem; color: var(--berry-ink); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow.light { color: var(--berry-ink); }

.brand { display: inline-flex; min-width: 0; align-items: center; gap: .75rem; color: var(--plum); text-decoration: none; }
.brand > span:last-child { display: flex; min-width: 0; flex-direction: column; line-height: 1.1; }
.brand strong { overflow: hidden; font-size: .9rem; letter-spacing: .2em; text-overflow: ellipsis; white-space: nowrap; }
.brand small { margin-top: .2rem; color: var(--muted); font-size: .56rem; letter-spacing: .17em; }
.brand-mark { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid currentColor; border-radius: 50% 50% 46% 54%; font-size: 1.45rem; font-weight: 700; line-height: 1; }
/* contain, not cover: wide wordmark logos must not lose their edges (matches the admin logo preview). */
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-mark:has(> img:not([hidden])) { border-color: transparent; background: var(--white); }
.brand-light { color: var(--plum); }
.brand-light small { color: var(--muted); }

.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .45rem; padding: .7rem 1.25rem; border: 1px solid transparent; border-radius: 999px; font-weight: 700; transition: transform .18s, background .18s, opacity .18s; }
.button:not(:disabled):active { transform: translateY(1px); }
.button.primary { background: var(--berry); color: var(--on-brand); box-shadow: 0 10px 22px rgba(var(--brand-rgb), .28); }
.button.primary:hover:not(:disabled) { background: var(--berry-dark); }
.button.secondary { border-color: var(--blush-200); background: var(--white); color: var(--berry-dark-ink); }
.button.secondary:hover:not(:disabled) { background: var(--blush-50); }
.button.muted { background: #ece9ea; color: var(--muted); }
.button.quiet-danger { border-color: rgba(var(--danger-rgb), .3); background: transparent; color: var(--danger); }
.button.full { width: 100%; }
.button.small { min-height: 38px; padding: .45rem .9rem; font-size: .83rem; }
.button:disabled { cursor: not-allowed; opacity: .62; }
.text-button { padding: .25rem; border: 0; background: transparent; color: var(--berry-ink); font-weight: 700; }
.icon-button { display: inline-flex; min-height: 42px; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-weight: 700; }
.qr-mini { font-size: 1.4rem; }

form { display: grid; gap: 1rem; }
label { display: grid; gap: .42rem; color: var(--plum); font-size: .88rem; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--plum); }
input, select { height: 50px; padding: 0 .95rem; }
textarea { resize: vertical; padding: .75rem .95rem; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:hover, select:hover, textarea:hover { border-color: rgba(var(--brand-rgb), .38); }
input:focus, select:focus, textarea:focus { border-color: var(--berry); }
.form-message { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .72rem .9rem; border-radius: 12px; background: rgba(var(--danger-rgb), .12); color: var(--danger); font-size: .84rem; }
.form-message.success { background: #e7f3ed; color: var(--success); }
.form-message.persistent { margin-bottom: 1rem; }
.toast { position: fixed; z-index: 40; right: 1rem; bottom: calc(80px + env(safe-area-inset-bottom)); left: 1rem; margin: 0 auto; max-width: 28rem; padding: .85rem 1rem; border: 1px solid var(--blush-200); border-radius: 14px; background: var(--white); color: var(--plum); font-size: .9rem; font-weight: 600; text-align: center; box-shadow: var(--shadow); }
@media (min-width: 900px) { .toast { bottom: 1.5rem; } }
.page-error { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid rgba(var(--danger-rgb), .3); border-radius: 14px; background: rgba(var(--danger-rgb), .06); color: var(--danger); font-size: .88rem; }

/* Customer landing */
.landing-shell { min-height: 100vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.brand-panel { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(2rem, 5vw, 4.5rem); background: radial-gradient(circle at 8% 85%, rgba(var(--brand-rgb), .2) 0 4%, transparent 5%), radial-gradient(circle at 13% 79%, rgba(var(--brand-rgb), .1) 0 12%, transparent 13%), linear-gradient(145deg, var(--ivory), var(--blush-100)); }
.brand-panel::after { position: absolute; right: -9rem; bottom: -10rem; width: 27rem; height: 27rem; border: 1px solid rgba(var(--brand-rgb), .2); border-radius: 50%; content: ""; }
.brand-copy { position: relative; z-index: 1; max-width: 580px; padding: 4rem 0 9rem; }
.brand-copy h1 { margin-bottom: 1.2rem; font-weight: 500; }
.brand-copy h1 em { color: var(--berry-ink); font-weight: 500; }
.brand-copy > p:last-child { max-width: 460px; color: var(--muted); font-size: 1.04rem; }
.preview-card { position: absolute; z-index: 1; right: clamp(1rem, 5vw, 5rem); bottom: clamp(1.5rem, 5vw, 4rem); width: min(395px, 48%); min-height: 205px; overflow: hidden; padding: 1.25rem; border: 1px solid rgba(255,255,255,.75); border-radius: 26px; background: rgba(255,255,255,.66); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.preview-card .hand-art { --fl-line: var(--ink-soft); position: absolute; right: -1rem; bottom: -2.5rem; width: 60%; height: auto; aspect-ratio: 32 / 25; }
.preview-card > div { position: absolute; bottom: 1.4rem; left: 1.4rem; display: flex; flex-direction: column; }
.preview-card strong { font-size: 3.5rem; line-height: 1; }
.preview-card small, .preview-card span { color: var(--muted); font-size: .65rem; letter-spacing: .08em; }
.preview-label { position: relative; z-index: 2; padding: .28rem .55rem; border-radius: 999px; background: rgba(255,255,255,.8); }
.auth-panel, .staff-auth-panel { display: grid; place-items: center; padding: 2rem; background: var(--ivory); }
.auth-card { width: min(100%, 440px); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(255,255,255,.82); box-shadow: var(--shadow); }
.auth-card.compact { width: min(100%, 420px); }
.auth-card h2 { margin-bottom: .55rem; }
.auth-card .muted { margin-bottom: 1.6rem; font-size: .9rem; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2.3rem; padding: .28rem; border-radius: 999px; background: var(--blush-100); }
.segmented button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 700; }
.segmented button[aria-selected="true"] { background: var(--white); color: var(--berry-dark-ink); box-shadow: 0 3px 12px rgba(var(--brand-rgb), .12); }
.staff-link { display: flex; justify-content: center; gap: .45rem; margin-top: 1.5rem; color: var(--muted); font-size: .84rem; text-decoration: none; }
.staff-link:hover { color: var(--berry-ink); }
.mobile-brand { display: none; }

/* Staff login */
.staff-login-shell { min-height: 100vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.staff-welcome { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); background: linear-gradient(155deg, rgba(var(--brand-rgb), .1), rgba(var(--brand-rgb), .18) 55%, rgba(var(--brand-rgb), .26)), var(--white); color: var(--plum); }
.staff-welcome::after { position: absolute; right: -12rem; bottom: -12rem; width: 34rem; height: 34rem; border: 1px solid rgba(var(--brand-rgb), .18); border-radius: 50%; content: ""; }
.staff-welcome > div { position: relative; z-index: 1; max-width: 500px; }
.staff-welcome h1 { font-weight: 500; overflow-wrap: anywhere; }
.staff-welcome p:last-child { color: var(--muted); }
.staff-welcome > .flower-art { position: absolute; right: -1rem; bottom: -1rem; width: 48%; height: auto; aspect-ratio: 13 / 9; opacity: .8; }

/* Shared member app */
.app-page { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
/* In-app browsers draw their own bottom bar over the page; leave room so the last content and the menu stay reachable. */
.in-app .app-page::after, .in-app .admin-page::after { display: block; height: 5rem; flex: 0 0 auto; content: ""; }
.in-app .modal { padding-bottom: 5rem; }
.app-header { position: sticky; z-index: 20; top: 0; display: flex; height: 76px; align-items: center; justify-content: space-between; padding: 0 max(1.2rem, calc((100vw - 1120px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255,252,251,.9); backdrop-filter: blur(14px); }
.member-main { flex: 1 0 auto; width: min(100% - 2rem, 1080px); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 0 2rem; }
.member-main > section { animation: fade-up .28s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(7px); } }
.welcome-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.welcome-row h1 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 500; }
.welcome-row .flower-art { flex: 0 0 auto; width: 130px; height: 75px; opacity: .72; }
/* Loyalty card. Every face reads --c-* vars; the defaults below are the free `classic` look driven by the theme color.
   Other looks are picked with data-card on .loyalty-card (the Worker sets it from the brand settings). */
.loyalty-card {
  --c-front: linear-gradient(135deg, rgba(var(--brand-rgb), .11), rgba(var(--brand-rgb), .19) 60%, rgba(var(--brand-rgb), .27)), var(--white);
  --c-back: linear-gradient(160deg, rgba(var(--brand-rgb), .03), rgba(var(--brand-rgb), .11)), var(--white);
  --c-edge: var(--line);
  --c-shadow: var(--shadow);
  --c-ink: var(--plum);
  --c-sub: var(--ink-soft);
  --c-label: var(--muted);
  --c-accent: var(--berry-ink);
  --c-accent-2: var(--berry-dark-ink);
  --c-slot: var(--white);
  --c-slot-ring: rgba(var(--brand-rgb), .3);
  --c-slot-dash: rgba(var(--brand-rgb), .5);
  --c-slot-icon: rgba(var(--brand-rgb), .42);
  --c-slot-shadow: 0 6px 14px rgba(var(--brand-rgb), .08);
  --c-stamp: radial-gradient(circle at 32% 28%, rgba(255,255,255,.24), rgba(255,255,255,0) 48%, rgba(0,0,0,.14)), var(--berry);
  --c-stamp-ink: var(--on-brand);
  --c-stamp-ring: rgba(255,255,255,.72);
  --c-num: var(--white);
  --c-num-ink: var(--berry-ink);
  --c-num-on: var(--berry);
  --c-num-on-ink: var(--on-brand);
  --c-reward: linear-gradient(rgba(var(--brand-rgb), .22), rgba(var(--brand-rgb), .22)), var(--white);
  --c-reward-ink: var(--berry-ink);
  --c-terms: rgba(var(--brand-rgb), .13);
  --c-rule: var(--rose);
  display: grid; gap: 1.1rem; container-type: inline-size;
}
.card-face { position: relative; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--c-shadow); color: var(--c-ink); }
.card-face > :not(.card-flower) { position: relative; z-index: 1; }
.card-face::before, .card-face::after { position: absolute; z-index: 0; pointer-events: none; }
/* Sizes follow the card's own width (cqi), with the viewport as fallback for browsers without container units. */
.card-front { display: grid; gap: clamp(1.1rem, 3vw, 1.6rem); gap: clamp(1.1rem, 3cqi, 1.6rem); padding: clamp(1.3rem, 4vw, 2rem); padding: clamp(1.3rem, 4cqi, 2rem); background: var(--c-front); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card-brand { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem; line-height: 1.05; }
.card-logo { grid-row: span 2; width: 48px; height: 48px; font-size: 1.45rem; }
.card-brand strong { align-self: end; font-size: clamp(1.05rem, 3.6vw, 1.7rem); font-size: clamp(1.05rem, 4.8cqi, 1.7rem); letter-spacing: .14em; overflow-wrap: break-word; }
.card-brand small { align-self: start; margin-top: .4rem; color: var(--c-sub); font-size: .52rem; font-weight: 600; letter-spacing: .3em; }
.card-title { margin: 0; color: var(--c-accent); font-size: clamp(.9rem, 2.6vw, 1.15rem); font-size: clamp(.9rem, 3cqi, 1.15rem); font-weight: 500; font-style: italic; white-space: nowrap; }
.card-points { display: grid; gap: .15rem; }
.card-points small { color: var(--c-label); font-size: .68rem; font-weight: 700; letter-spacing: .18em; }
.card-points div { display: flex; align-items: baseline; gap: .55rem; }
.card-points strong { color: var(--c-accent); font-size: clamp(3.6rem, 13vw, 5.4rem); font-size: clamp(3.6rem, 13cqi, 5.4rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.card-points span { color: var(--c-accent-2); font-size: 1rem; font-weight: 700; }
.card-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.card-holder { margin: 0; color: var(--c-sub); font-size: .72rem; letter-spacing: .12em; }
.card-holder b { color: var(--c-accent-2); letter-spacing: .04em; }
.card-tagline { margin: 0; color: var(--c-sub); font-size: .82rem; }
.card-back { padding: clamp(1.2rem, 3.5vw, 2rem); padding: clamp(1.2rem, 3.5cqi, 2rem); border: 1px solid var(--c-edge); background: var(--c-back); }
.card-back-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1.2rem; font-size: .9rem; }
.card-back-head strong { min-width: 0; letter-spacing: .28em; overflow-wrap: anywhere; }
.card-back-head b { color: var(--c-accent); font-size: 1.15em; }
.card-back-head i { color: var(--c-accent); font-style: normal; }
.stamp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.2rem; margin-bottom: 1rem; }
.stamp-grid { display: flex; flex: 1 1 260px; flex-wrap: wrap; justify-content: center; align-items: start; gap: .6rem .9rem; margin: 0; padding: 0; list-style: none; }
.stamp-grid.few { gap: .6rem 1.5rem; }
/* Large point scales: a meter with a tick per reward, then one stamp per reward threshold. */
.stamp-meter { --fill: 0%; position: relative; flex: 1 0 100%; height: 12px; margin: .3rem 0 .7rem; border-radius: 999px; background: var(--c-slot); box-shadow: inset 0 0 0 1px var(--c-slot-ring); }
.stamp-meter::before { position: absolute; inset: 0 auto 0 0; width: var(--fill); border-radius: inherit; background: var(--c-stamp); content: ""; }
.stamp-meter span { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--c-rule); }
.stamp-grid.meter .stamp-hit > i { width: auto; min-width: 20px; padding: 0 .4rem; border-radius: 999px; }
.stamp-grid.meter .stamp-goal { max-width: 100%; }
.stamp { position: relative; display: grid; width: 64px; gap: .3rem; justify-items: center; }
.stamp .slot, .stamp .ink { position: relative; display: grid; width: 64px; height: 64px; place-items: center; align-content: center; border-radius: 50%; }
.stamp .slot { background: var(--c-slot); box-shadow: inset 0 0 0 1px var(--c-slot-ring), var(--c-slot-shadow); color: var(--c-slot-icon); font-size: 1.5rem; }
.stamp .slot::before { position: absolute; inset: 6px; border: 1.5px dashed var(--c-slot-dash); border-radius: 50%; content: ""; }
.stamp i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--c-num); box-shadow: 0 2px 6px rgba(var(--brand-rgb), .15); color: var(--c-num-ink); font-size: .7rem; font-style: normal; font-weight: 700; }
.stamp .slot i { color: var(--c-slot-heart, var(--c-num-ink)); }
.stamp .ink { gap: 1px; color: var(--c-stamp-ink); background: var(--c-stamp); }
.stamp .ink::before { position: absolute; inset: 4px; border: 1.5px dashed var(--c-stamp-ring); border-radius: 50%; content: ""; }
.stamp .ink::after { position: absolute; inset: 0; border-radius: 50%; content: ""; background: radial-gradient(circle at 72% 76%, rgba(255,255,255,.28), transparent 42%), radial-gradient(circle at 22% 68%, rgba(40,10,25,.22), transparent 38%); mix-blend-mode: soft-light; }
.stamp .ink > span { position: relative; z-index: 1; display: grid; place-items: center; color: inherit; font-size: 1.35rem; line-height: 1; }
.stamp .ink i { width: auto; height: auto; background: none; box-shadow: none; color: inherit; font-size: inherit; }
.stamp .ink small { position: relative; z-index: 1; color: inherit; font-size: .46rem; font-weight: 700; letter-spacing: .06em; line-height: 1; white-space: nowrap; opacity: .95; }
.stamp.stamped > i { background: var(--c-num-on); color: var(--c-num-on-ink); box-shadow: 0 2px 6px rgba(var(--brand-rgb), .35); }
.stamp-hit { display: grid; gap: .3rem; justify-items: center; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.stamp-hit:focus-visible { outline: none; border-radius: 12px; box-shadow: var(--focus); }
.stamp .stamp-gift { position: absolute; top: -5px; right: -5px; z-index: 2; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--gold); color: var(--white); font-size: .6rem; font-style: normal; box-shadow: 0 2px 6px rgba(120,70,40,.25); }
.stamp .ink .stamp-gift { background: var(--c-num); color: var(--c-num-ink); }
.stamp-goal { max-width: 72px; overflow: hidden; color: var(--c-accent); font-size: .55rem; font-weight: 700; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.stamp.stamped .ink { animation: stamp-in .4s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes stamp-in { from { scale: 1.5; opacity: 0; } to { scale: 1; opacity: 1; } }
.stamp-grid.few .stamp:not(:last-child)::after { position: absolute; top: 24px; right: -1.15rem; color: var(--c-rule); content: "→"; font-size: .9rem; }
.stamp-equals { color: var(--c-rule); font-size: 1.6rem; font-weight: 700; }
.stamp-reward { position: relative; isolation: isolate; display: grid; width: 132px; height: 132px; padding: .4rem; place-content: center; justify-items: center; border: 0; border-radius: 38%; background: var(--c-reward); color: var(--c-reward-ink); font: inherit; line-height: 1.15; text-align: center; cursor: pointer; transition: transform .18s; }
.stamp-reward::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: inherit; content: ""; rotate: 45deg; }
.stamp-reward:hover { transform: scale(1.03); }
.stamp-reward:focus-visible { outline: none; box-shadow: var(--focus); }
.stamp-reward > span { font-size: 1.5rem; }
.stamp-reward small { font-size: .7rem; font-weight: 600; }
.stamp-reward strong { max-width: 104px; font-size: .82rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.reward-card.highlight { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .45), var(--shadow); transition: box-shadow .3s; }
/* Missions add-on (member page only: the dashboard loads app.css and has its own mission/claim markup). A claimable
   milestone pulses a ring in the card's accent and its label becomes a pill in the card's prize colors, so every card
   style (dark and seasonal included) keeps it readable; a used one swaps the gift for a check. */
.app-page .stamp.claimable :is(.slot, .ink) { outline: 2px solid var(--c-accent); outline-offset: 3px; animation: stamp-glow 1.6s ease-in-out infinite; }
.app-page .stamp.claimable.stamped .ink { animation: stamp-in .4s cubic-bezier(.2,.9,.3,1.3) both, stamp-glow 1.6s ease-in-out .4s infinite; }
@keyframes stamp-glow { 50% { outline-color: transparent; outline-offset: 8px; } }
.app-page .stamp-goal.action { display: -webkit-box; padding: 0; border: solid transparent; border-width: .15rem .4rem; border-radius: 8px; background: var(--c-reward); background-origin: border-box; color: var(--c-reward-ink); white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.app-page .loyalty-card[data-card="minimal"] .stamp-goal.action { box-shadow: 0 0 0 1px rgba(var(--brand-rgb), .45); } /* white prize on a white back */
.app-page .stamp.used .stamp-goal { opacity: .72; }
.app-page [data-kind="bonus"] .points-badge { background: #e7f3ed; color: var(--success); }
.app-page .confetti { position: fixed; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }
.app-page .modal-card.celebrate { animation: pop-in .45s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes pop-in { from { scale: .85; opacity: 0; } to { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .app-page .stamp.claimable :is(.slot, .ink), .app-page .stamp.claimable.stamped .ink, .app-page .modal-card.celebrate { animation: none; }
}
.progress-copy { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; color: var(--c-accent-2); font-size: .84rem; }
.card-carry { margin: -.3rem 0 1rem; color: var(--c-accent); font-size: .82rem; font-weight: 600; }
.card-terms { margin-bottom: 1rem; padding: .9rem 1.1rem; border-radius: var(--radius-md); background: var(--c-terms); font-size: .82rem; }
.card-terms strong { display: block; margin-bottom: .3rem; color: var(--c-accent); }
.card-terms ul { margin: 0; padding-left: 1.1rem; overflow-wrap: anywhere; }
.card-thanks { margin: 0; color: var(--c-sub); font-style: italic; }
.card-flower { position: absolute; right: -1rem; bottom: -1.4rem; width: 130px; aspect-ratio: 13 / 9; opacity: .4; pointer-events: none; }

/* Line-art flowers inlined in the pages, recolored from the theme (and by each card style on the card back). */
.flower-art { --fl-line: var(--petal-line); --fl-a: var(--petal); --fl-b: var(--blush-200); --fl-core: #f4d78b; display: block; }
.flower-art > g { stroke: var(--fl-line); }
.flower-art .fl-a { fill: var(--fl-a); }
.flower-art .fl-b { fill: var(--fl-b); }
.flower-art .fl-core { fill: var(--fl-core); }

/* Minimal (free): white, hairlines, typography-led. */
.loyalty-card[data-card="minimal"] {
  --c-front: var(--white);
  --c-back: var(--white);
  --c-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 36px rgba(var(--brand-rgb), .07);
  --c-slot: transparent;
  --c-slot-ring: rgba(var(--brand-rgb), .32);
  --c-slot-dash: transparent;
  --c-slot-icon: rgba(var(--brand-rgb), .3);
  --c-slot-shadow: 0 0 transparent;
  --c-stamp: var(--berry);
  --c-stamp-ring: transparent;
  --c-num: transparent;
  --c-num-ink: var(--muted);
  --c-slot-heart: var(--rose);
  --c-num-on: transparent;
  --c-num-on-ink: var(--berry-ink);
  --c-reward: var(--white);
  --c-terms: transparent;
  --c-rule: var(--blush-200);
}
.loyalty-card[data-card="minimal"] .card-face { border: 1px solid var(--line); }
.loyalty-card[data-card="minimal"] .card-brand strong { font-weight: 500; letter-spacing: .18em; }
.loyalty-card[data-card="minimal"] .card-title { color: var(--c-label); font-size: .6rem; font-style: normal; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.loyalty-card[data-card="minimal"] .card-points small { display: flex; align-items: center; gap: .6rem; }
.loyalty-card[data-card="minimal"] .card-points small::before { width: 1.5rem; height: 2px; border-radius: 2px; background: var(--berry); content: ""; }
.loyalty-card[data-card="minimal"] .card-points strong { color: var(--c-ink); font-weight: 400; letter-spacing: -.04em; }
.loyalty-card[data-card="minimal"] .card-points span { color: var(--c-accent); font-weight: 500; }
.loyalty-card[data-card="minimal"] .card-bottom { padding-top: .9rem; border-top: 1px solid var(--line); }
.loyalty-card[data-card="minimal"] .card-tagline i { color: var(--berry); }
.loyalty-card[data-card="minimal"] .stamp i, .loyalty-card[data-card="minimal"] .stamp.stamped > i { box-shadow: none; }
.loyalty-card[data-card="minimal"] .stamp .ink::after { content: none; }
.loyalty-card[data-card="minimal"] .stamp .ink .stamp-gift { background: var(--white); color: var(--berry-ink); box-shadow: 0 0 0 1px var(--line); }
.loyalty-card[data-card="minimal"] .stamp-reward { border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); }
.loyalty-card[data-card="minimal"] .stamp-reward::before { content: none; }
.loyalty-card[data-card="minimal"] .card-terms { padding: .9rem 0 0; border-top: 1px solid var(--line); border-radius: 0; }
.loyalty-card[data-card="minimal"] .card-flower { --fl-line: var(--rose); --fl-a: transparent; --fl-b: transparent; --fl-core: transparent; opacity: .45; }

/* Marble: white-grey veined stone, gold hairline frame. */
.loyalty-card[data-card="marble"] {
  --mb-gold: linear-gradient(135deg, #8f6a26, #d9b867 30%, #f6e7b4 48%, #c49a45 66%, #8a6524);
  --c-front: radial-gradient(70% 60% at 18% 22%, rgba(255,255,255,.95), transparent 70%), radial-gradient(60% 55% at 88% 86%, rgba(196,196,202,.45), transparent 70%), linear-gradient(135deg, #f7f6f3, #eae8e4 52%, #f4f2ee);
  --c-back: radial-gradient(80% 60% at 85% 10%, rgba(255,255,255,.95), transparent 70%), radial-gradient(70% 50% at 10% 95%, rgba(200,200,206,.35), transparent 70%), linear-gradient(160deg, #faf9f7, #eeece8);
  --c-edge: #cfb173;
  --c-shadow: 0 18px 42px rgba(70,62,50,.16);
  --c-ink: #2d2a27;
  --c-sub: #5f5850;
  --c-label: #6d655c;
  --c-accent: #7d5f25;
  --c-accent-2: #6e521d;
  --c-slot: #fdfcfa;
  --c-slot-ring: #ddd2bd;
  --c-slot-dash: #c8b58a;
  --c-slot-icon: #cdbd98;
  --c-slot-shadow: 0 5px 12px rgba(70,62,50,.1);
  --c-stamp: radial-gradient(circle at 32% 26%, #fdf4d3, #e4c77f 38%, #b88f43 74%, #8c6a2c);
  --c-stamp-ink: #33260d;
  --c-stamp-ring: rgba(80,58,18,.4);
  --c-num: #fffdf8;
  --c-num-ink: #7d5f25;
  --c-num-on: #2d2a27;
  --c-num-on-ink: #f1dca0;
  --c-reward: radial-gradient(circle at 30% 25%, #fff, transparent 60%), linear-gradient(135deg, #fbf8f1, #efe6d2);
  --c-reward-ink: #6e521d;
  --c-terms: rgba(255,255,255,.62);
  --c-rule: #c8b58a;
}
.loyalty-card[data-card="marble"] .card-face { border: 1px solid #cfb173; }
.loyalty-card[data-card="marble"] .card-face::before {
  inset: -8%; content: ""; filter: blur(.5px);
  background:
    linear-gradient(122deg, transparent 38%, rgba(125,125,135,.08) 42.5%, rgba(88,88,98,.3) 44.2%, rgba(125,125,135,.1) 45.6%, transparent 49%),
    linear-gradient(109deg, transparent 55%, rgba(105,105,115,.2) 55.8%, rgba(125,125,135,.06) 57%, transparent 58.5%),
    linear-gradient(136deg, transparent 17%, rgba(130,130,140,.06) 20%, rgba(98,98,108,.2) 21.1%, transparent 22.8%),
    linear-gradient(128deg, transparent 69%, rgba(118,118,128,.14) 69.9%, transparent 71.4%),
    linear-gradient(150deg, transparent 80%, rgba(118,118,128,.1) 80.6%, transparent 81.8%),
    radial-gradient(150% 85% at 112% 130%, transparent 62%, rgba(100,100,110,.13) 63%, transparent 64.4%),
    radial-gradient(42% 32% at 28% 72%, rgba(165,165,174,.2), transparent 70%),
    radial-gradient(36% 30% at 78% 30%, rgba(180,180,188,.18), transparent 70%);
  -webkit-mask: radial-gradient(55% 60% at 30% 35%, #000 40%, rgba(0,0,0,.35) 100%), radial-gradient(50% 55% at 78% 72%, #000 35%, transparent 100%);
  mask: radial-gradient(55% 60% at 30% 35%, #000 40%, rgba(0,0,0,.35) 100%), radial-gradient(50% 55% at 78% 72%, #000 35%, transparent 100%);
}
.loyalty-card[data-card="marble"] .card-back::before { opacity: .6; }
.loyalty-card[data-card="marble"] .card-face::after { inset: 7px; border: 1px solid rgba(190,154,82,.55); border-radius: calc(var(--radius-xl) - 7px); content: ""; }
.loyalty-card[data-card="marble"] .card-logo { border-color: #b8913f; color: #7d5f25; background: rgba(255,255,255,.6); }
.loyalty-card[data-card="marble"] .card-title { font-weight: 400; letter-spacing: .04em; }
.loyalty-card[data-card="marble"] .card-points strong { color: var(--c-ink); font-weight: 500; }
.loyalty-card[data-card="marble"] .card-tagline i { color: var(--berry); }
.loyalty-card[data-card="marble"] .stamp .ink::after { background: radial-gradient(circle at 70% 75%, rgba(255,255,255,.45), transparent 45%); mix-blend-mode: normal; }
.loyalty-card[data-card="marble"] .stamp.stamped > i { background: var(--mb-gold); color: #2d2410; box-shadow: 0 2px 6px rgba(120,90,30,.3); }
.loyalty-card[data-card="marble"] .stamp .stamp-gift { background: var(--mb-gold); color: #2d2410; }
.loyalty-card[data-card="marble"] .stamp .ink .stamp-gift { background: #2d2a27; color: #f1dca0; }
.loyalty-card[data-card="marble"] .stamp-reward { filter: drop-shadow(0 0 .6px #b8913f) drop-shadow(0 0 .6px #b8913f) drop-shadow(0 8px 14px rgba(70,62,50,.14)); }
.loyalty-card[data-card="marble"] .card-terms { box-shadow: inset 0 0 0 1px rgba(190,154,82,.35); }
.loyalty-card[data-card="marble"] .card-flower { --fl-line: #b08c45; --fl-a: rgba(214,190,140,.35); --fl-b: rgba(230,222,205,.7); --fl-core: #d9b867; opacity: .5; }

/* Black gold: matte black, gold-foil lettering. */
.loyalty-card[data-card="gold"] {
  --gd-foil: linear-gradient(100deg, #a8782a 0%, #f7e08a 22%, #c99a3a 40%, #fff1b8 55%, #b98a2e 72%, #eccf7a 88%, #9c6e22 100%);
  --c-front: radial-gradient(110% 80% at 0% 0%, rgba(255,236,190,.09), transparent 55%), repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px), linear-gradient(145deg, #1f1d1a, #0f0e0d 58%, #1b1917);
  --c-back: radial-gradient(90% 60% at 100% 0%, rgba(255,236,190,.07), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px), linear-gradient(160deg, #1c1a18, #100f0e);
  --c-edge: rgba(212,175,90,.45);
  --c-shadow: 0 20px 44px rgba(12,10,6,.34);
  --c-ink: #f1e4bf;
  --c-sub: #c9b88f;
  --c-label: #b3a27c;
  --c-accent: #e8c66f;
  --c-accent-2: #f0d589;
  --c-slot: #1d1b18;
  --c-slot-ring: rgba(212,175,90,.34);
  --c-slot-dash: rgba(212,175,90,.55);
  --c-slot-icon: rgba(212,175,90,.5);
  --c-slot-shadow: 0 6px 14px rgba(0,0,0,.35);
  --c-stamp: radial-gradient(circle at 30% 24%, #fff4c6, #eacb73 34%, #b98b2f 70%, #7a5818);
  --c-stamp-ink: #1d1609;
  --c-stamp-ring: rgba(45,32,8,.45);
  --c-num: #131210;
  --c-num-ink: #e8c66f;
  --c-num-on: #e8c66f;
  --c-num-on-ink: #1d1609;
  --c-reward: linear-gradient(135deg, #a67a2b, #f3da86 42%, #c89b3d 64%, #93691f);
  --c-reward-ink: #1d1609;
  --c-terms: rgba(255,255,255,.04);
  --c-rule: rgba(212,175,90,.62);
}
.loyalty-card[data-card="gold"] .card-face { border: 1px solid rgba(212,175,90,.45); }
.loyalty-card[data-card="gold"] .card-front::after { inset: auto 1.4rem 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,198,111,.55), transparent); content: ""; }
.loyalty-card[data-card="gold"] .card-logo { border-color: #d4af5a; color: #e8c66f; }
.loyalty-card[data-card="gold"] .card-title { font-weight: 400; letter-spacing: .06em; }
.loyalty-card[data-card="gold"] .card-points small { letter-spacing: .3em; }
.loyalty-card[data-card="gold"] .stamp i, .loyalty-card[data-card="gold"] .stamp.stamped > i { box-shadow: 0 0 0 1px rgba(212,175,90,.5), 0 2px 6px rgba(0,0,0,.4); }
.loyalty-card[data-card="gold"] .stamp.stamped > i { background: var(--gd-foil); }
.loyalty-card[data-card="gold"] .stamp .ink::after { background: radial-gradient(circle at 70% 76%, rgba(255,255,255,.4), transparent 44%), radial-gradient(circle at 24% 70%, rgba(60,40,5,.3), transparent 40%); }
.loyalty-card[data-card="gold"] .stamp .stamp-gift { background: var(--gd-foil); color: #1d1609; }
.loyalty-card[data-card="gold"] .stamp .ink .stamp-gift { background: #131210; color: #e8c66f; box-shadow: 0 0 0 1px rgba(212,175,90,.6); }
.loyalty-card[data-card="gold"] .stamp-reward { filter: drop-shadow(0 6px 16px rgba(232,198,111,.22)); }
.loyalty-card[data-card="gold"] .card-terms { box-shadow: inset 0 0 0 1px rgba(212,175,90,.28); }
.loyalty-card[data-card="gold"] .card-terms li::marker { color: #e8c66f; }
.loyalty-card[data-card="gold"] .card-flower { --fl-line: #c9a44c; --fl-a: rgba(212,175,90,.14); --fl-b: rgba(212,175,90,.08); --fl-core: #e8c66f; opacity: .55; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .loyalty-card[data-card="gold"] :is(.card-brand strong, .card-title, .card-points strong, .card-back-head strong) {
    background: var(--gd-foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
  .loyalty-card[data-card="gold"] .card-points strong { background-size: 160% 100%; }
}

/* Sakura: blush pink, drifting petals, blossom-shaped stamps. */
.loyalty-card[data-card="sakura"] {
  --sk-petals:
    radial-gradient(9px 5px at 8% 18%, rgba(242,143,176,.85) 62%, transparent 100%),
    radial-gradient(5px 8px at 22% 64%, rgba(248,178,200,.9) 62%, transparent 100%),
    radial-gradient(7px 4px at 40% 12%, rgba(255,255,255,.9) 62%, transparent 100%),
    radial-gradient(8px 5px at 58% 80%, rgba(242,143,176,.7) 62%, transparent 100%),
    radial-gradient(4px 7px at 72% 30%, rgba(250,196,214,.95) 62%, transparent 100%),
    radial-gradient(10px 6px at 90% 72%, rgba(247,166,193,.8) 62%, transparent 100%),
    radial-gradient(6px 4px at 34% 92%, rgba(255,255,255,.85) 62%, transparent 100%),
    radial-gradient(5px 9px at 84% 8%, rgba(242,143,176,.6) 62%, transparent 100%),
    radial-gradient(7px 4px at 50% 46%, rgba(250,196,214,.55) 62%, transparent 100%),
    radial-gradient(4px 6px at 12% 88%, rgba(247,166,193,.75) 62%, transparent 100%);
  --sk-flower: polygon(50% 6%,52% 3.4%,54.1% 1.7%,56.2% 1.1%,58.1% 2%,60% 3.1%,61.7% 4.5%,63.3% 6.1%,64.6% 7.9%,65.8% 10%,66.8% 12.3%,67.4% 14.9%,67.7% 17.9%,67.4% 21.2%,66.4% 25.3%,61.8% 33.8%,68.4% 26.7%,72% 24.5%,75.1% 23.3%,78% 22.6%,80.6% 22.4%,83.1% 22.6%,85.5% 23.1%,87.7% 23.8%,89.7% 24.8%,91.5% 26%,93.1% 27.4%,94.6% 29%,94.7% 31.2%,93.7% 33.7%,91.8% 36.4%,94.9% 37.5%,97.2% 38.9%,98.4% 40.8%,98.2% 42.9%,97.7% 45%,96.9% 47%,95.9% 49%,94.5% 50.9%,92.9% 52.7%,91% 54.3%,88.7% 55.7%,86% 56.9%,82.8% 57.7%,78.6% 58%,69% 56.2%,77.8% 60.4%,81% 63.1%,83.2% 65.6%,84.7% 68.1%,85.7% 70.6%,86.3% 73%,86.6% 75.4%,86.5% 77.7%,86.2% 79.9%,85.6% 82.1%,84.8% 84.1%,83.7% 85.9%,81.7% 86.7%,79% 86.6%,75.9% 85.6%,75.8% 88.9%,75.1% 91.5%,73.7% 93.2%,71.6% 93.6%,69.5% 93.8%,67.3% 93.7%,65.1% 93.3%,62.9% 92.6%,60.7% 91.6%,58.6% 90.3%,56.5% 88.6%,54.6% 86.4%,52.8% 83.6%,51.2% 79.7%,50% 70%,48.8% 79.7%,47.2% 83.6%,45.4% 86.4%,43.5% 88.6%,41.4% 90.3%,39.3% 91.6%,37.1% 92.6%,34.9% 93.3%,32.7% 93.7%,30.5% 93.8%,28.4% 93.6%,26.3% 93.2%,24.9% 91.5%,24.2% 88.9%,24.1% 85.6%,21% 86.6%,18.3% 86.7%,16.3% 85.9%,15.2% 84.1%,14.4% 82.1%,13.8% 79.9%,13.5% 77.7%,13.4% 75.4%,13.7% 73%,14.3% 70.6%,15.3% 68.1%,16.8% 65.6%,19% 63.1%,22.2% 60.4%,31% 56.2%,21.4% 58%,17.2% 57.7%,14% 56.9%,11.3% 55.7%,9% 54.3%,7.1% 52.7%,5.5% 50.9%,4.1% 49%,3.1% 47%,2.3% 45%,1.8% 42.9%,1.6% 40.8%,2.8% 38.9%,5.1% 37.5%,8.2% 36.4%,6.3% 33.7%,5.3% 31.2%,5.4% 29%,6.9% 27.4%,8.5% 26%,10.3% 24.8%,12.3% 23.8%,14.5% 23.1%,16.9% 22.6%,19.4% 22.4%,22% 22.6%,24.9% 23.3%,28% 24.5%,31.6% 26.7%,38.2% 33.8%,33.6% 25.3%,32.6% 21.2%,32.3% 17.9%,32.6% 14.9%,33.2% 12.3%,34.2% 10%,35.4% 7.9%,36.7% 6.1%,38.3% 4.5%,40% 3.1%,41.9% 2%,43.8% 1.1%,45.9% 1.7%,48% 3.4%);
  --sk-bloom: radial-gradient(circle, #e9a93a 0 2.6%, transparent 3.4%), radial-gradient(circle, transparent 0 14%, #f48ab0 14.6%, #f9aec5 28%, #ffd0de 46%, #ffe2ea 60%, #ffcbdb 71%), repeating-conic-gradient(rgba(240,178,70,.95) 0 4deg, transparent 4deg 24deg), #ec6795;
  --c-front: var(--sk-petals), radial-gradient(90% 70% at 100% 0%, rgba(255,255,255,.8), transparent 60%), linear-gradient(150deg, #fff5f8, #ffe3ec 52%, #ffcfdd);
  --c-back: var(--sk-petals), radial-gradient(80% 60% at 0% 0%, rgba(255,255,255,.9), transparent 60%), linear-gradient(165deg, #fffafc, #ffeef3);
  --c-edge: #f8cfdc;
  --c-shadow: 0 18px 44px rgba(214,86,128,.16);
  --c-ink: #5a1f35;
  --c-sub: #843f59;
  --c-label: #92536a;
  --c-accent: #b8305f;
  --c-accent-2: #9c2752;
  --c-slot: #fff;
  --c-slot-ring: #f8c7d6;
  --c-slot-dash: #f2a3bd;
  --c-slot-icon: #f4b0c6;
  --c-slot-shadow: 0 6px 14px rgba(214,86,128,.1);
  --c-stamp: radial-gradient(circle at 35% 30%, #f9a3c2, #e25b89 55%, #c43f6c); /* meter fill; the stamps draw a blossom instead */
  --c-stamp-ink: #fff;
  --c-num: #fff;
  --c-num-ink: #b8305f;
  --c-num-on: #d9517f;
  --c-num-on-ink: #fff;
  --c-reward: radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), transparent 55%), linear-gradient(135deg, #ffe4ed, #ffc3d5);
  --c-reward-ink: #9c2752;
  --c-terms: rgba(255,214,227,.55);
  --c-rule: #f29bb8;
}
.loyalty-card[data-card="sakura"] .card-face::before, .loyalty-card[data-card="sakura"] .card-front::after { aspect-ratio: 1; background: var(--sk-bloom); clip-path: var(--sk-flower); content: ""; }
.loyalty-card[data-card="sakura"] .card-front::after { top: 50%; right: -26px; width: 132px; translate: 0 -54%; rotate: 14deg; }
.loyalty-card[data-card="sakura"] .card-front::before { right: 96px; bottom: 18%; width: 46px; rotate: -18deg; opacity: .9; }
.loyalty-card[data-card="sakura"] .card-back::before { top: -22px; right: -20px; width: 92px; rotate: 24deg; opacity: .75; }
.loyalty-card[data-card="sakura"] .card-logo { border-color: #e889aa; color: #b8305f; background: rgba(255,255,255,.65); }
.loyalty-card[data-card="sakura"] .card-tagline i { color: #e2608c; }
.loyalty-card[data-card="sakura"] .stamp .ink::before { inset: -4px; border: 0; border-radius: 0; background: radial-gradient(circle, #f78fb4, #e25b89 55%, #c43f6c); clip-path: var(--sk-flower); }
.loyalty-card[data-card="sakura"] .stamp .ink::after { inset: 36%; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,160,.9) 0 30%, rgba(255,255,255,.35) 60%, transparent 72%); mix-blend-mode: normal; opacity: .55; }
.loyalty-card[data-card="sakura"] .stamp .ink { background: none; filter: drop-shadow(0 4px 6px rgba(196,63,108,.28)); }
.loyalty-card[data-card="sakura"] .stamp .ink > span { font-size: 1.15rem; }
.loyalty-card[data-card="sakura"] .stamp-reward { filter: drop-shadow(0 8px 16px rgba(214,86,128,.18)); }
.loyalty-card[data-card="sakura"] .card-terms { box-shadow: inset 0 0 0 1px rgba(242,155,184,.35); }
.loyalty-card[data-card="sakura"] .card-flower { --fl-line: #d9668f; --fl-a: #ffc3d5; --fl-b: #ffe0e9; --fl-core: #f5cf6b; opacity: .55; }

/* Holographic: iridescent foil with a slow shimmer. */
.loyalty-card[data-card="holo"] {
  --c-front: repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 1px, transparent 1px 7px), repeating-linear-gradient(125deg, rgba(255,110,205,.2), rgba(110,160,255,.2) 9%, rgba(90,240,195,.2) 18%, rgba(255,230,100,.2) 27%, rgba(255,110,205,.2) 36%), linear-gradient(125deg, #fbc8ef, #d2cdff 22%, #bdeeff 42%, #c9ffe6 60%, #fff1b8 78%, #ffc8e6);
  --c-back: repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 1px, transparent 1px 8px), linear-gradient(150deg, #fdf0fb, #eceeff 35%, #e6fbff 65%, #fffbe8);
  --c-edge: rgba(150,130,230,.3);
  --c-shadow: 0 18px 44px rgba(110,90,200,.2);
  --c-ink: #261d4d;
  --c-sub: #463c75;
  --c-label: #574c87;
  --c-accent: #4a2bb5;
  --c-accent-2: #3d2596;
  --c-slot: rgba(255,255,255,.72);
  --c-slot-ring: rgba(110,90,200,.26);
  --c-slot-dash: rgba(110,90,200,.4);
  --c-slot-icon: rgba(110,90,200,.4);
  --c-slot-shadow: 0 6px 14px rgba(110,90,200,.12);
  --c-stamp: radial-gradient(circle at 32% 26%, rgba(255,255,255,.75), rgba(255,255,255,0) 50%), conic-gradient(from 210deg, #ff9fd6, #b3a4ff, #86dcff, #92f7cf, #fff196, #ffb7a0, #ff9fd6);
  --c-stamp-ink: #261d4d;
  --c-stamp-ring: rgba(38,29,77,.3);
  --c-num: #fff;
  --c-num-ink: #4a2bb5;
  --c-num-on: #261d4d;
  --c-num-on-ink: #fff;
  --c-reward: radial-gradient(circle at 30% 25%, rgba(255,255,255,.7), transparent 55%), conic-gradient(from 30deg, #ffc2e6, #cbbfff, #b2ecff, #c0fbe2, #fff4bc, #ffc2e6);
  --c-reward-ink: #261d4d;
  --c-terms: rgba(255,255,255,.58);
  --c-rule: #9d8cf0;
}
.loyalty-card[data-card="holo"] .card-face { border: 1px solid rgba(255,255,255,.7); }
.loyalty-card[data-card="holo"] .card-face::before {
  inset: -60%; content: ""; opacity: .6; mix-blend-mode: overlay;
  background: conic-gradient(from 0deg at 50% 50%, #ff7ac8, #8f7bff, #5fd4ff, #6ff5bd, #ffe66b, #ff9f7a, #ff7ac8);
  animation: holo-spin 16s linear infinite;
}
.loyalty-card[data-card="holo"] .card-face::after {
  inset: 0 -60%; content: ""; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.9) 48%, rgba(255,255,255,.2) 53%, transparent 62%);
  animation: holo-sheen 7s ease-in-out infinite;
}
.loyalty-card[data-card="holo"] .card-logo { border-color: #4a2bb5; color: #4a2bb5; background: rgba(255,255,255,.55); }
.loyalty-card[data-card="holo"] .card-title { font-weight: 600; letter-spacing: .03em; }
.loyalty-card[data-card="holo"] .stamp .ink { box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset, 0 6px 14px rgba(110,90,200,.22); }
.loyalty-card[data-card="holo"] .stamp .ink::after { background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%); mix-blend-mode: normal; }
.loyalty-card[data-card="holo"] .stamp .stamp-gift { background: #261d4d; color: #fff3a8; }
.loyalty-card[data-card="holo"] .stamp-reward { filter: drop-shadow(0 8px 16px rgba(110,90,200,.22)); }
.loyalty-card[data-card="holo"] .card-terms { box-shadow: inset 0 0 0 1px rgba(110,90,200,.18); }
.loyalty-card[data-card="holo"] .card-flower { --fl-line: #7b68d8; --fl-a: rgba(255,170,220,.45); --fl-b: rgba(160,220,255,.45); --fl-core: #ffe066; opacity: .45; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .loyalty-card[data-card="holo"] .card-points strong {
    background: linear-gradient(95deg, #4a2bb5, #a02a7a 45%, #1d63a8 90%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
}
@keyframes holo-spin { to { rotate: 360deg; } }
@keyframes holo-sheen { 0%, 100% { translate: -32% 0; } 50% { translate: 32% 0; } }

/* Midnight: deep navy sky, starfield and a crescent moon. */
.loyalty-card[data-card="midnight"] {
  --mn-stars:
    radial-gradient(circle at 6% 14%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 17% 58%, #fff 0 .7px, transparent 1.3px),
    radial-gradient(circle at 27% 8%, #fff 0 .6px, transparent 1.2px), radial-gradient(circle at 33% 36%, rgba(255,255,255,.8) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 44% 18%, #fff 0 .9px, transparent 1.5px), radial-gradient(circle at 52% 70%, rgba(255,255,255,.7) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 61% 30%, #fff 0 .7px, transparent 1.3px), radial-gradient(circle at 68% 88%, #fff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 76% 12%, rgba(255,255,255,.85) 0 .6px, transparent 1.2px), radial-gradient(circle at 93% 78%, #fff 0 .7px, transparent 1.3px),
    radial-gradient(circle at 97% 26%, #fff 0 .6px, transparent 1.2px), radial-gradient(circle at 11% 92%, rgba(255,255,255,.75) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 39% 94%, #fff 0 .6px, transparent 1.2px), radial-gradient(circle at 84% 48%, rgba(255,255,255,.7) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 57% 52%, rgba(255,255,255,.6) 0 .5px, transparent 1.1px), radial-gradient(circle at 23% 80%, #fff 0 .6px, transparent 1.2px);
  --c-front: var(--mn-stars), radial-gradient(circle at 84% 48%, rgba(255,238,184,.2) 0 17px, rgba(255,238,184,.07) 30px, transparent 50px), radial-gradient(90% 80% at 88% 8%, rgba(96,120,255,.32), transparent 60%), radial-gradient(80% 70% at 6% 100%, rgba(150,96,255,.22), transparent 62%), linear-gradient(160deg, #111b44, #0a1030 55%, #141d4b);
  --c-back: var(--mn-stars), radial-gradient(80% 60% at 100% 0%, rgba(96,120,255,.22), transparent 62%), linear-gradient(170deg, #111a42, #0b112f);
  --c-edge: rgba(160,176,255,.22);
  --c-shadow: 0 20px 46px rgba(8,12,40,.36);
  --c-ink: #eef1ff;
  --c-sub: #bcc5ea;
  --c-label: #a3aedb;
  --c-accent: #f5da8e;
  --c-accent-2: #f8e4ad;
  --c-slot: rgba(255,255,255,.06);
  --c-slot-ring: rgba(180,195,255,.26);
  --c-slot-dash: rgba(200,212,255,.42);
  --c-slot-icon: rgba(200,212,255,.48);
  --c-slot-shadow: 0 6px 14px rgba(0,0,0,.25);
  --c-stamp: radial-gradient(circle at 32% 28%, #fffbe8, #f5da8e 42%, #c9a24e);
  --c-stamp-ink: #141c48;
  --c-stamp-ring: rgba(20,28,72,.32);
  --c-num: #1b2657;
  --c-num-ink: #e3e8ff;
  --c-slot-heart: #b3bee9;
  --c-num-on: #f5da8e;
  --c-num-on-ink: #141c48;
  --c-reward: radial-gradient(circle at 30% 25%, rgba(255,255,255,.7), transparent 55%), linear-gradient(135deg, #fdf2c9, #e8c46a);
  --c-reward-ink: #141c48;
  --c-terms: rgba(255,255,255,.06);
  --c-rule: rgba(200,212,255,.55);
}
.loyalty-card[data-card="midnight"] .card-face { border: 1px solid rgba(160,176,255,.22); }
.loyalty-card[data-card="midnight"] .card-face::before {
  inset: 0; content: "";
  background:
    radial-gradient(circle at 62% 9%, #fff 0 1.1px, rgba(190,205,255,.35) 1.6px, transparent 4px), radial-gradient(circle at 44% 42%, #fff 0 1px, rgba(190,205,255,.3) 1.5px, transparent 3.5px),
    radial-gradient(circle at 94% 30%, #fff 0 1.2px, rgba(190,205,255,.35) 1.7px, transparent 4.5px), radial-gradient(circle at 50% 95%, #fff 0 1px, rgba(190,205,255,.3) 1.5px, transparent 3.5px),
    radial-gradient(circle at 72% 72%, #fff 0 1.1px, rgba(190,205,255,.35) 1.6px, transparent 4px), radial-gradient(circle at 4% 95%, #fff 0 .9px, rgba(190,205,255,.3) 1.4px, transparent 3.5px);
  animation: twinkle 3.8s ease-in-out infinite alternate;
}
.loyalty-card[data-card="midnight"] .card-front::after {
  inset: 0; content: "";
  background: radial-gradient(circle at calc(84% - 6px) calc(48% + 5px), #fffcef 0 5px, #fbefc6 16px, transparent 16.8px), radial-gradient(circle at 84% 48%, #f8e7b2 0 16.5px, transparent 17.3px);
  -webkit-mask: radial-gradient(circle at calc(84% + 9px) calc(48% - 6px), transparent 0 15px, #000 16px);
  mask: radial-gradient(circle at calc(84% + 9px) calc(48% - 6px), transparent 0 15px, #000 16px);
}
.loyalty-card[data-card="midnight"] .card-logo { border-color: rgba(238,241,255,.75); color: #fff; }
.loyalty-card[data-card="midnight"] .card-title { font-weight: 400; letter-spacing: .05em; }
.loyalty-card[data-card="midnight"] .card-points strong { text-shadow: 0 0 22px rgba(245,218,142,.3); }
.loyalty-card[data-card="midnight"] .stamp i, .loyalty-card[data-card="midnight"] .stamp.stamped > i { box-shadow: 0 0 0 1px rgba(200,212,255,.3), 0 2px 6px rgba(0,0,0,.35); }
.loyalty-card[data-card="midnight"] .stamp .ink { box-shadow: 0 0 16px rgba(245,218,142,.35); }
.loyalty-card[data-card="midnight"] .stamp .ink::after { background: radial-gradient(circle at 66% 70%, rgba(201,162,78,.35) 0 10%, transparent 11%), radial-gradient(circle at 30% 62%, rgba(201,162,78,.28) 0 7%, transparent 8%), radial-gradient(circle at 70% 76%, rgba(255,255,255,.3), transparent 45%); mix-blend-mode: normal; }
.loyalty-card[data-card="midnight"] .stamp .stamp-gift { background: #f5da8e; color: #141c48; }
.loyalty-card[data-card="midnight"] .stamp .ink .stamp-gift { background: #1b2657; color: #f5da8e; }
.loyalty-card[data-card="midnight"] .stamp-reward { filter: drop-shadow(0 0 14px rgba(245,218,142,.3)); }
.loyalty-card[data-card="midnight"] .card-terms { box-shadow: inset 0 0 0 1px rgba(200,212,255,.14); }
.loyalty-card[data-card="midnight"] .card-terms li::marker { color: #f5da8e; }
.loyalty-card[data-card="midnight"] .card-flower { --fl-line: rgba(200,212,255,.75); --fl-a: rgba(150,165,255,.16); --fl-b: rgba(150,165,255,.1); --fl-core: #f5da8e; opacity: .5; }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
/* Valentine: deep rose front, blush back, scattered hearts, ribbon rules and heart-shaped stamps. */
.loyalty-card[data-card="valentine"] {
  --vl-heart: polygon(50% 26.9%,50.1% 26.1%,50.5% 23.9%,51.8% 20.6%,54% 16.6%,57.4% 12.6%,61.9% 9.1%,67.3% 6.7%,73.4% 5.7%,79.7% 6.4%,85.8% 8.7%,91.2% 12.6%,95.4% 17.7%,98.1% 23.6%,99% 30%,98.1% 36.5%,95.4% 43%,91.2% 49.3%,85.8% 55.2%,79.7% 60.9%,73.4% 66.4%,67.3% 71.6%,61.9% 76.7%,57.4% 81.4%,54% 85.6%,51.8% 89.2%,50.5% 92%,50.1% 93.7%,50% 94.3%,49.9% 93.7%,49.5% 92%,48.2% 89.2%,46% 85.6%,42.6% 81.4%,38.1% 76.7%,32.7% 71.6%,26.6% 66.4%,20.3% 60.9%,14.2% 55.2%,8.8% 49.3%,4.6% 43%,1.9% 36.5%,1% 30%,1.9% 23.6%,4.6% 17.7%,8.8% 12.6%,14.2% 8.7%,20.3% 6.4%,26.6% 5.7%,32.7% 6.7%,38.1% 9.1%,42.6% 12.6%,46% 16.6%,48.2% 20.6%,49.5% 23.9%,49.9% 26.1%);
  --vl-size: 112px;
  --vl-foil: linear-gradient(100deg, #eab09a, #fff0e8 30%, #f3c0aa 50%, #fff4ee 66%, #eab09a 86%, #f9d3c3);
  --vl-hearts:
    radial-gradient(closest-side, #8a1a40 88%, transparent) left 7px top 98px / 4.24px 4.24px no-repeat,
    radial-gradient(closest-side, #8a1a40 88%, transparent) left 10px top 98px / 4.24px 4.24px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #8a1a40 0 90deg, transparent 0) left 7.62px top 101.02px / 6px 3.6px no-repeat,
    radial-gradient(closest-side, #9a1f47 88%, transparent) right 114.5px top 9px / 3.54px 3.54px no-repeat,
    radial-gradient(closest-side, #9a1f47 88%, transparent) right 112px top 9px / 3.54px 3.54px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #9a1f47 0 90deg, transparent 0) right 112.52px top 11.42px / 5px 3.1px no-repeat,
    radial-gradient(closest-side, #e2a08a 88%, transparent) right 15.5px top 58px / 4.95px 4.95px no-repeat,
    radial-gradient(closest-side, #e2a08a 88%, transparent) right 12px top 58px / 4.95px 4.95px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #e2a08a 0 90deg, transparent 0) right 12.72px top 61.63px / 7px 4.1px no-repeat,
    radial-gradient(closest-side, #eab09a 88%, transparent) right 138.5px top 66px / 3.54px 3.54px no-repeat,
    radial-gradient(closest-side, #eab09a 88%, transparent) right 136px top 66px / 3.54px 3.54px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #eab09a 0 90deg, transparent 0) right 136.52px top 68.42px / 5px 3.1px no-repeat,
    radial-gradient(closest-side, #a3244e 88%, transparent) right 155px bottom 55.97px / 7.07px 7.07px no-repeat,
    radial-gradient(closest-side, #a3244e 88%, transparent) right 150px bottom 55.97px / 7.07px 7.07px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #a3244e 0 90deg, transparent 0) right 151.03px bottom 52px / 10px 5.6px no-repeat,
    radial-gradient(closest-side, #b9315a 88%, transparent) right 26px bottom 48.17px / 5.66px 5.66px no-repeat,
    radial-gradient(closest-side, #b9315a 88%, transparent) right 22px bottom 48.17px / 5.66px 5.66px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #b9315a 0 90deg, transparent 0) right 22.83px bottom 45px / 8px 4.6px no-repeat,
    radial-gradient(closest-side, #9a1d45 88%, transparent) left 30px bottom 8.98px / 3.54px 3.54px no-repeat,
    radial-gradient(closest-side, #9a1d45 88%, transparent) left 32.5px bottom 8.98px / 3.54px 3.54px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #9a1d45 0 90deg, transparent 0) left 30.52px bottom 7px / 5px 3.1px no-repeat;
  --vl-hearts-back:
    radial-gradient(closest-side, #ffd3de 88%, transparent) left 14px top 18px / 4.95px 4.95px no-repeat,
    radial-gradient(closest-side, #ffd3de 88%, transparent) left 17.5px top 18px / 4.95px 4.95px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #ffd3de 0 90deg, transparent 0) left 14.73px top 21.63px / 7px 4.1px no-repeat,
    radial-gradient(closest-side, #ffd6e0 88%, transparent) right 112.5px top 10px / 3.54px 3.54px no-repeat,
    radial-gradient(closest-side, #ffd6e0 88%, transparent) right 110px top 10px / 3.54px 3.54px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #ffd6e0 0 90deg, transparent 0) right 110.52px top 12.42px / 5px 3.1px no-repeat,
    radial-gradient(closest-side, #ffd0dc 88%, transparent) left 30px bottom 123.57px / 6.36px 6.36px no-repeat,
    radial-gradient(closest-side, #ffd0dc 88%, transparent) left 34.5px bottom 123.57px / 6.36px 6.36px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #ffd0dc 0 90deg, transparent 0) left 30.93px bottom 120px / 9px 5.1px no-repeat,
    radial-gradient(closest-side, #ffcbd8 88%, transparent) right 25px bottom 212.38px / 4.24px 4.24px no-repeat,
    radial-gradient(closest-side, #ffcbd8 88%, transparent) right 22px bottom 212.38px / 4.24px 4.24px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #ffcbd8 0 90deg, transparent 0) right 22.62px bottom 210px / 6px 3.6px no-repeat,
    radial-gradient(closest-side, #ffc9d6 88%, transparent) left 12px bottom 26.38px / 4.24px 4.24px no-repeat,
    radial-gradient(closest-side, #ffc9d6 88%, transparent) left 15px bottom 26.38px / 4.24px 4.24px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #ffc9d6 0 90deg, transparent 0) left 12.62px bottom 24px / 6px 3.6px no-repeat,
    radial-gradient(closest-side, #ffccd9 88%, transparent) right 152.5px bottom 61.98px / 3.54px 3.54px no-repeat,
    radial-gradient(closest-side, #ffccd9 88%, transparent) right 150px bottom 61.98px / 3.54px 3.54px no-repeat,
    conic-gradient(from -45deg at 50% 100%, #ffccd9 0 90deg, transparent 0) right 150.52px bottom 60px / 5px 3.1px no-repeat;
  --c-front: var(--vl-hearts), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 44%, transparent 58%), radial-gradient(45% 45% at 84% 50%, rgba(255,120,160,.14), transparent 70%), linear-gradient(155deg, #5e0a26, #85113a 45%, #9b1640 80%, #a61c44);
  --c-back: var(--vl-hearts-back), radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.85), transparent 60%), linear-gradient(165deg, #fff7f9, #ffe6ec 60%, #ffd9e2);
  --c-edge: #f5bccb;
  --c-shadow: 0 18px 44px rgba(120,10,45,.2);
  --c-ink: #5a0c26;
  --c-sub: #7a1f3d;
  --c-label: #86304c;
  --c-accent: #a8143f;
  --c-accent-2: #8e1036;
  --c-slot: #fff;
  --c-slot-ring: #f7bfcd;
  --c-slot-dash: #f09ab2;
  --c-slot-icon: #f3a5ba;
  --c-slot-shadow: 0 6px 14px rgba(200,30,80,.1);
  --c-stamp: radial-gradient(circle at 30% 24%, #ff8fab, #f2527d 12%, #d42a58 30%, #b3123f 75%);
  --c-stamp-ink: #fff;
  --c-num: #fff;
  --c-num-ink: #a8143f;
  --c-num-on: #c2184b;
  --c-num-on-ink: #fff;
  --c-reward: radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), transparent 55%), linear-gradient(135deg, #ffe3ea, #ffb9cb);
  --c-reward-ink: #8e1036;
  --c-terms: rgba(255,255,255,.62);
  --c-rule: #ee8aa6;
}
.loyalty-card[data-card="valentine"] .card-front { --c-ink: #fff3f5; --c-sub: #ffdbe3; --c-label: #ffc9d6; --c-accent: #ffd6c6; --c-accent-2: #ffe2d6; border: 1px solid rgba(234,176,154,.45); }
.loyalty-card[data-card="valentine"] .card-front::before, .loyalty-card[data-card="valentine"] .card-front::after { aspect-ratio: 1; clip-path: var(--vl-heart); content: ""; }
.loyalty-card[data-card="valentine"] .card-front::after { top: 50%; right: calc(var(--vl-size) * .16); width: var(--vl-size); translate: 0 -52%; rotate: 10deg; background: radial-gradient(40% 30% at 30% 28%, rgba(255,255,255,.7), transparent 70%), var(--vl-foil); }
.loyalty-card[data-card="valentine"] .card-front::before { top: calc(50% + var(--vl-size) * .1); right: calc(var(--vl-size) * .98); width: calc(var(--vl-size) * .4); rotate: -16deg; background: radial-gradient(40% 30% at 32% 30%, rgba(255,255,255,.55), transparent 70%), linear-gradient(160deg, #ff9ab3, #e8406a 55%, #c21d4c); }
/* Ribbon rules: satin bands with swallowtail ends. */
.loyalty-card[data-card="valentine"] :is(.card-bottom, .card-back-head)::before { position: absolute; left: 0; width: 100%; height: 5px; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%); content: ""; }
.loyalty-card[data-card="valentine"] .card-bottom { padding-top: .85rem; }
.loyalty-card[data-card="valentine"] .card-bottom::before { top: 0; background: linear-gradient(180deg, #f9d3c3, #e39a84 45%, #f6c3af 62%, #d98b78); }
.loyalty-card[data-card="valentine"] .card-back-head { padding-bottom: .95rem; }
.loyalty-card[data-card="valentine"] .card-back-head::before { bottom: 0; background: linear-gradient(180deg, #f7a9bd, #e0507a 48%, #f38fab 64%, #c9345f); }
.loyalty-card[data-card="valentine"] .card-logo { border-color: #eab09a; color: #ffd6c6; background: rgba(255,255,255,.06); }
.loyalty-card[data-card="valentine"] .card-title { font-weight: 400; letter-spacing: .04em; }
.loyalty-card[data-card="valentine"] .card-tagline i { color: #ff9db6; }
.loyalty-card[data-card="valentine"] .stamp .ink { background: none; filter: drop-shadow(0 4px 6px rgba(168,20,63,.3)); }
.loyalty-card[data-card="valentine"] .stamp .ink::before, .loyalty-card[data-card="valentine"] .stamp .ink::after { inset: -4px; border: 0; border-radius: 0; clip-path: var(--vl-heart); }
.loyalty-card[data-card="valentine"] .stamp .ink::before { background: var(--c-stamp); }
.loyalty-card[data-card="valentine"] .stamp .ink::after { background: radial-gradient(26% 18% at 30% 27%, rgba(255,255,255,.7), transparent 70%), radial-gradient(18% 13% at 70% 27%, rgba(255,255,255,.3), transparent 70%); mix-blend-mode: normal; }
.loyalty-card[data-card="valentine"] .stamp .ink > span { font-size: 1rem; }
.loyalty-card[data-card="valentine"] .stamp-reward { filter: drop-shadow(0 0 .7px #d98b78) drop-shadow(0 0 .7px #d98b78) drop-shadow(0 8px 16px rgba(168,20,63,.18)); }
.loyalty-card[data-card="valentine"] .card-terms { box-shadow: inset 0 0 0 1px rgba(238,138,166,.4); }
.loyalty-card[data-card="valentine"] .card-terms li::marker { color: #d6315e; }
.loyalty-card[data-card="valentine"] .card-flower { --fl-line: #d24b72; --fl-a: #ffc1d0; --fl-b: #ffe1e8; --fl-core: #f3c77a; opacity: .5; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .loyalty-card[data-card="valentine"] :is(.card-brand strong, .card-points strong) {
    background: var(--vl-foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
}

/* Songkran: bright aqua water, ripples and splash droplets, a jasmine garland with a rose tassel. */
.loyalty-card[data-card="songkran"] {
  --sg-drop: polygon(50% 1%,69.8% 34.1%,73.3% 36.8%,76.4% 40%,79.1% 43.5%,81.3% 47.4%,83% 51.5%,84.2% 55.8%,84.9% 60.2%,85% 64.6%,84.5% 69%,83.4% 73.3%,81.9% 77.5%,79.8% 81.4%,77.2% 85%,74.2% 88.3%,70.8% 91.2%,67% 93.6%,63% 95.5%,58.8% 96.9%,54.4% 97.7%,50% 98%,45.6% 97.7%,41.2% 96.9%,37% 95.5%,33% 93.6%,29.2% 91.2%,25.8% 88.3%,22.8% 85%,20.2% 81.4%,18.1% 77.5%,16.6% 73.3%,15.5% 69%,15% 64.6%,15.1% 60.2%,15.8% 55.8%,17% 51.5%,18.7% 47.4%,20.9% 43.5%,23.6% 40%,26.7% 36.8%,30.2% 34.1%);
  --sg-d: 96px; /* garland diameter; its center sits --sg-x from the right, just above the middle */
  --sg-x: 74px;
  --sg-drops:
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) left 151.44px top 10.64px / 1.76px 1.76px no-repeat,
    radial-gradient(closest-side, #5cc9dc 88%, transparent) left 150px top 9.2px / 6.4px 6.4px no-repeat,
    conic-gradient(from 150deg at 50% 0, #5cc9dc 0 60deg, transparent 0) left 150.43px top 6px / 5.54px 5.2px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) left 9.08px bottom 86.4px / 1.32px 1.32px no-repeat,
    radial-gradient(closest-side, #6fd2e2 88%, transparent) left 8px bottom 84px / 4.8px 4.8px no-repeat,
    conic-gradient(from 150deg at 50% 0, #6fd2e2 0 60deg, transparent 0) left 8.32px bottom 87.2px / 4.16px 4px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) right 150.6px top 61.77px / 1.43px 1.43px no-repeat,
    radial-gradient(closest-side, #4ec3d8 88%, transparent) right 148px top 60.6px / 5.2px 5.2px no-repeat,
    conic-gradient(from 150deg at 50% 0, #4ec3d8 0 60deg, transparent 0) right 148.35px top 58px / 4.5px 4.3px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) right 17.4px bottom 59.4px / 1.87px 1.87px no-repeat,
    radial-gradient(closest-side, #39b6cf 88%, transparent) right 14px bottom 56px / 6.8px 6.8px no-repeat,
    conic-gradient(from 150deg at 50% 0, #39b6cf 0 60deg, transparent 0) right 14.46px bottom 60.7px / 5.89px 5.5px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) right 142px bottom 66px / 1.1px 1.1px no-repeat,
    radial-gradient(closest-side, #5ccbdd 88%, transparent) right 140px bottom 64px / 4px 4px no-repeat,
    conic-gradient(from 150deg at 50% 0, #5ccbdd 0 60deg, transparent 0) right 140.27px bottom 66.6px / 3.46px 3.4px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) left 118.99px bottom 7.2px / 1.21px 1.21px no-repeat,
    radial-gradient(closest-side, #58c6da 88%, transparent) left 118px bottom 5px / 4.4px 4.4px no-repeat,
    conic-gradient(from 150deg at 50% 0, #58c6da 0 60deg, transparent 0) left 118.29px bottom 7.9px / 3.81px 3.7px no-repeat;
  --sg-drops-back:
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) right 21px top 18.35px / 1.65px 1.65px no-repeat,
    radial-gradient(closest-side, #8fdbe8 88%, transparent) right 18px top 17px / 6px 6px no-repeat,
    conic-gradient(from 150deg at 50% 0, #8fdbe8 0 60deg, transparent 0) right 18.4px top 14px / 5.2px 4.9px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) left 17.08px top 73.48px / 1.32px 1.32px no-repeat,
    radial-gradient(closest-side, #9ee0eb 88%, transparent) left 16px top 72.4px / 4.8px 4.8px no-repeat,
    conic-gradient(from 150deg at 50% 0, #9ee0eb 0 60deg, transparent 0) left 16.32px top 70px / 4.16px 4px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) right 42.2px bottom 222.2px / 1.21px 1.21px no-repeat,
    radial-gradient(closest-side, #9ee0eb 88%, transparent) right 40px bottom 220px / 4.4px 4.4px no-repeat,
    conic-gradient(from 150deg at 50% 0, #9ee0eb 0 60deg, transparent 0) right 40.29px bottom 222.9px / 3.81px 3.7px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent) left 27.26px bottom 92.8px / 1.54px 1.54px no-repeat,
    radial-gradient(closest-side, #8fdbe8 88%, transparent) left 26px bottom 90px / 5.6px 5.6px no-repeat,
    conic-gradient(from 150deg at 50% 0, #8fdbe8 0 60deg, transparent 0) left 26.38px bottom 93.8px / 4.85px 4.6px no-repeat;
  --sg-ripples: radial-gradient(calc(var(--sg-d) * 1.25) calc(var(--sg-d) * .62) at right var(--sg-x) top calc(50% - var(--sg-d) * .16), transparent 52%, rgba(255,255,255,.8) 55%, transparent 58.5%, transparent 70%, rgba(0,150,180,.2) 73%, transparent 76.5%, transparent 87%, rgba(0,150,180,.12) 90%, transparent 93.5%);
  --c-front: var(--sg-drops), var(--sg-ripples), radial-gradient(130px 30px at left 16% bottom 10px, transparent 48%, rgba(255,255,255,.7) 54%, transparent 60%, transparent 74%, rgba(0,150,180,.14) 79%, transparent 84%), repeating-linear-gradient(172deg, transparent 0 22px, rgba(255,255,255,.2) 22px 24px, transparent 24px 46px), radial-gradient(55% 60% at 82% 42%, rgba(255,255,255,.75), transparent 70%), linear-gradient(160deg, #effdff 0%, #cdf5f9 45%, #9fe6ef 100%);
  --c-back: var(--sg-drops-back), radial-gradient(170px 40px at left 22% bottom 34px, transparent 48%, rgba(255,255,255,.75) 53%, transparent 58%, transparent 72%, rgba(0,150,180,.12) 77%, transparent 82%), repeating-linear-gradient(172deg, transparent 0 26px, rgba(255,255,255,.22) 26px 28px, transparent 28px 54px), radial-gradient(80% 50% at 100% 0%, rgba(255,255,255,.9), transparent 60%), linear-gradient(170deg, #f4feff, #daf6fa 60%, #c3eff5);
  --c-edge: #a9e3ec;
  --c-shadow: 0 18px 44px rgba(0,120,150,.18);
  --c-ink: #053e4b;
  --c-sub: #0b5364;
  --c-label: #1b5c6b;
  --c-accent: #005f73;
  --c-accent-2: #004d5e;
  --c-slot: rgba(255,255,255,.85);
  --c-slot-ring: #9fe0ea;
  --c-slot-dash: #62cadb;
  --c-slot-icon: #6cc9d9;
  --c-slot-shadow: 0 6px 14px rgba(0,120,150,.1);
  --c-stamp: radial-gradient(circle at 50% 64%, #5fdcef 0 28%, #22bcd6 60%, #0e97b7);
  --c-stamp-ink: #03333f;
  --c-num: #fff;
  --c-num-ink: #006275;
  --c-num-on: #007c93;
  --c-num-on-ink: #fff;
  --c-reward: radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), transparent 55%), linear-gradient(135deg, #9eecf5, #3cc4da);
  --c-reward-ink: #033b47;
  --c-terms: rgba(255,255,255,.62);
  --c-rule: #3fbdd2;
}
.loyalty-card[data-card="songkran"] .card-face { border: 1px solid #a9e3ec; }
/* Garland (malai): jasmine buds radiating around a marigold band; a rose, a bud strand and a tassel hang below. */
.loyalty-card[data-card="songkran"] .card-front::before {
  top: 50%; right: calc(var(--sg-x) - var(--sg-d) / 2); width: var(--sg-d); aspect-ratio: 1; translate: 0 -66%; border-radius: 50%; content: "";
  background:
    radial-gradient(closest-side, transparent 68%, #e3801a 69%, #f8b53a 72%, #f6a623 75%, #e3801a 78%, transparent 79%),
    radial-gradient(closest-side, rgba(0,95,115,.34) 58%, transparent 64%, transparent 88%, rgba(0,95,115,.34) 99%),
    repeating-conic-gradient(#fffef8 0 4deg, #dfe9e3 6.5deg, #fffef8 9deg);
  -webkit-mask: radial-gradient(closest-side, transparent 57%, #000 59% 97%, transparent 99%); mask: radial-gradient(closest-side, transparent 57%, #000 59% 97%, transparent 99%);
}
.loyalty-card[data-card="songkran"] .card-front::after {
  top: calc(50% + var(--sg-d) * .25); right: calc(var(--sg-x) - var(--sg-d) * .1); width: calc(var(--sg-d) * .2); height: calc(var(--sg-d) * .5); content: "";
  background:
    radial-gradient(circle closest-side at 50% 14%, #ffe1e6 0 16%, #f0567a 30% 60%, #c01f47 80%, transparent 96%),
    radial-gradient(closest-side, #3f9f61 70%, transparent) 0 20% / 42% 11% no-repeat,
    radial-gradient(closest-side, #3f9f61 70%, transparent) 100% 20% / 42% 11% no-repeat,
    radial-gradient(circle closest-side at 50% 50%, #ffd36b 0 25%, #f5a524 55%, #d9781a 85%, transparent 97%) 50% 76% / 70% 26% no-repeat,
    repeating-linear-gradient(90deg, #e98a17 0 1px, #f8c15a 1px 2px) 50% 100% / 44% 16% no-repeat,
    radial-gradient(closest-side, #fffef6 72%, transparent) 50% 0 / 34% 11% repeat-y;
  -webkit-mask: linear-gradient(#000, #000) 50% 0 / 100% 84% no-repeat, linear-gradient(#000, #000) 50% 100% / 44% 16% no-repeat; mask: linear-gradient(#000, #000) 50% 0 / 100% 84% no-repeat, linear-gradient(#000, #000) 50% 100% / 44% 16% no-repeat;
  filter: drop-shadow(0 1.5px 1px rgba(0,100,125,.35));
}
.loyalty-card[data-card="songkran"] .card-logo { border-color: #1aa3b8; color: #005f73; background: rgba(255,255,255,.6); }
.loyalty-card[data-card="songkran"] .card-title { font-weight: 500; letter-spacing: .03em; }
.loyalty-card[data-card="songkran"] .card-tagline i { --fa: "\f043"; --fa-style: 900; color: #16a6bd; }
.loyalty-card[data-card="songkran"] .card-back-head { padding-bottom: 1.15rem; }
.loyalty-card[data-card="songkran"] .card-back-head::after { position: absolute; right: 3%; bottom: 0; left: 3%; height: 15px; border: 5px dotted #fffef6; border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; filter: drop-shadow(0 1px 1px rgba(0,100,125,.45)); content: ""; }
.loyalty-card[data-card="songkran"] .card-back-head::before { position: absolute; right: 3%; bottom: 9px; left: 3%; height: 12px; background: radial-gradient(circle at 6px 50%, #ffe1e6 0 1.4px, #f0567a 2.2px 4.2px, #c01f47 5px, transparent 5.8px), radial-gradient(circle at calc(100% - 6px) 50%, #ffe1e6 0 1.4px, #f0567a 2.2px 4.2px, #c01f47 5px, transparent 5.8px); content: ""; }
.loyalty-card[data-card="songkran"] :is(.stamp .ink, .stamp .slot) > span i { --fa: "\f043"; --fa-style: 900; }
.loyalty-card[data-card="songkran"] .stamp .ink { padding-top: 13px; background: none; filter: drop-shadow(0 4px 5px rgba(0,110,135,.3)); }
.loyalty-card[data-card="songkran"] .stamp .ink::before, .loyalty-card[data-card="songkran"] .stamp .ink::after { inset: -13px -10px -2px; border: 0; border-radius: 0; clip-path: var(--sg-drop); }
.loyalty-card[data-card="songkran"] .stamp .ink::before { background: var(--c-stamp); }
.loyalty-card[data-card="songkran"] .stamp .ink::after { background: radial-gradient(9% 7% at 33% 50%, rgba(255,255,255,.95), transparent 80%), radial-gradient(30% 12% at 50% 86%, rgba(255,255,255,.3), transparent 75%), linear-gradient(100deg, rgba(255,255,255,.35), transparent 30%); mix-blend-mode: normal; }
.loyalty-card[data-card="songkran"] .stamp .ink > span { font-size: 1.1rem; }
.loyalty-card[data-card="songkran"] .stamp-reward { border-radius: 50%; outline: 5px dotted #fffef6; outline-offset: -8px; filter: drop-shadow(0 8px 16px rgba(0,120,145,.22)); }
.loyalty-card[data-card="songkran"] .stamp-reward::before { content: none; }
.loyalty-card[data-card="songkran"] .stamp-reward strong { max-width: 88px; }
.loyalty-card[data-card="songkran"] .card-terms { box-shadow: inset 0 0 0 1px rgba(0,150,180,.22); }
.loyalty-card[data-card="songkran"] .card-terms li::marker { color: #19a9c1; }
.loyalty-card[data-card="songkran"] .card-flower { --fl-line: #1c9db3; --fl-a: #fff; --fl-b: #effcfd; --fl-core: #f6b53a; opacity: .7; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .loyalty-card[data-card="songkran"] .card-points strong {
    background: linear-gradient(100deg, #007a8f, #0a5fa8 70%, #007a8f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
}

/* Loy Krathong: night river under the full moon, a candle-lit krathong with its reflection, warm gold lotus stamps. */
.loyalty-card[data-card="loykrathong"] {
  --lk-lotus: polygon(36.6% 17.7%,37.5% 11.4%,39.6% 6.7%,42.6% 3.1%,46.1% 0.7%,50% 0%,53.9% 0.7%,57.4% 3.1%,60.4% 6.7%,62.5% 11.4%,63.4% 17.7%,68.4% 13.8%,73.3% 12%,77.9% 11.6%,82.1% 12.4%,85.4% 14.6%,87.6% 17.9%,88.4% 22.1%,88% 26.7%,86.2% 31.6%,82.3% 36.6%,88.6% 37.5%,93.3% 39.6%,96.9% 42.6%,99.3% 46.1%,100% 50%,99.3% 53.9%,96.9% 57.4%,93.3% 60.4%,88.6% 62.5%,82.3% 63.4%,86.2% 68.4%,88% 73.3%,88.4% 77.9%,87.6% 82.1%,85.4% 85.4%,82.1% 87.6%,77.9% 88.4%,73.3% 88%,68.4% 86.2%,63.4% 82.3%,62.5% 88.6%,60.4% 93.3%,57.4% 96.9%,53.9% 99.3%,50% 100%,46.1% 99.3%,42.6% 96.9%,39.6% 93.3%,37.5% 88.6%,36.6% 82.3%,31.6% 86.2%,26.7% 88%,22.1% 88.4%,17.9% 87.6%,14.6% 85.4%,12.4% 82.1%,11.6% 77.9%,12% 73.3%,13.8% 68.4%,17.7% 63.4%,11.4% 62.5%,6.7% 60.4%,3.1% 57.4%,0.7% 53.9%,0% 50%,0.7% 46.1%,3.1% 42.6%,6.7% 39.6%,11.4% 37.5%,17.7% 36.6%,13.8% 31.6%,12% 26.7%,11.6% 22.1%,12.4% 17.9%,14.6% 14.6%,17.9% 12.4%,22.1% 11.6%,26.7% 12%,31.6% 13.8%);
  --lk-krathong: polygon(4% 64%,9% 62%,13% 47%,20% 58%,25% 38%,33% 54%,38% 30%,44% 46%,46.8% 44%,46.8% 20%,49.3% 20%,49.3% 17%,49.3% 15.4%,48.3% 15.3%,46.8% 14.3%,45.8% 12.9%,45.4% 11.1%,45.7% 9.4%,46.6% 7.9%,48.1% 6.8%,50% 0%,51.9% 6.8%,53.4% 7.9%,54.3% 9.4%,54.6% 11.1%,54.2% 12.9%,53.2% 14.3%,51.7% 15.3%,50.7% 15.4%,50.7% 17%,50.7% 20%,53.2% 20%,53.2% 44%,56% 46%,62% 30%,67% 54%,75% 38%,80% 58%,87% 47%,91% 62%,96% 64%,94% 74%,93.2% 77.9%,90.7% 81.6%,86.6% 85%,81.1% 88%,74.4% 90.5%,66.8% 92.3%,58.6% 93.4%,50% 93.8%,41.4% 93.4%,33.2% 92.3%,25.6% 90.5%,18.9% 88%,13.4% 85%,9.3% 81.6%,6.8% 77.9%,6% 74%);
  --lk-w: 72px; /* krathong box; its center sits --lk-x from the right, its bottom --lk-b up */
  --lk-h: 64px;
  --lk-x: 68px;
  --lk-b: 22%;
  --lk-stars:
    radial-gradient(circle at 7% 10%, #fff 0 .7px, transparent 1.3px), radial-gradient(circle at 19% 36%, rgba(255,255,255,.8) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 31% 8%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 46% 26%, rgba(255,255,255,.7) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 57% 6%, #fff 0 .6px, transparent 1.2px), radial-gradient(circle at 66% 40%, rgba(255,255,255,.7) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 92% 12%, #fff 0 .7px, transparent 1.3px), radial-gradient(circle at 97% 44%, rgba(255,255,255,.75) 0 .6px, transparent 1.2px);
  --lk-lights:
    radial-gradient(circle at 14% 91%, rgba(255,226,150,.95) 0 1.5px, rgba(255,180,80,.28) 4px, transparent 12px), radial-gradient(3px 9px at 14% 95%, rgba(255,190,90,.3), transparent),
    radial-gradient(circle at 41% 83%, rgba(255,226,150,.8) 0 1.2px, rgba(255,180,80,.22) 3.5px, transparent 10px),
    radial-gradient(circle at 78% 62%, rgba(255,226,150,.7) 0 1px, rgba(255,180,80,.2) 3px, transparent 9px);
  --c-front: var(--lk-stars), var(--lk-lights),
    radial-gradient(circle at right var(--lk-x) top 30%, #fff8e4 0 11px, #f6e2b0 13px, rgba(255,226,160,.22) 15px, rgba(255,210,140,.07) 30px, transparent 48px),
    radial-gradient(calc(var(--lk-w) * 1.9) calc(var(--lk-w) * .4) at right var(--lk-x) bottom calc(var(--lk-b) + var(--lk-h) * .06), transparent 36%, rgba(255,200,110,.34) 40%, transparent 45%, transparent 62%, rgba(255,200,110,.18) 66%, transparent 71%, transparent 84%, rgba(160,190,255,.14) 88%, transparent 92%),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(150,190,255,.07) 7px 8px) 0 100% / 100% 45% no-repeat,
    linear-gradient(180deg, transparent 54%, rgba(130,165,235,.16) 55.5%, transparent 59%),
    linear-gradient(180deg, #0a1030 0%, #141c49 50%, #0d2747 56%, #07172e 100%);
  --c-back: var(--lk-stars), radial-gradient(90% 45% at 100% 0%, rgba(90,110,220,.2), transparent 62%), linear-gradient(170deg, #10183f, #0a1935 60%, #081a30);
  --c-edge: rgba(242,196,106,.3);
  --c-shadow: 0 20px 46px rgba(6,10,34,.4);
  --c-ink: #fbf1d9;
  --c-sub: #e0d2b0;
  --c-label: #cbbd99;
  --c-accent: #f2c46a;
  --c-accent-2: #f7d68e;
  --c-slot: rgba(255,255,255,.05);
  --c-slot-ring: rgba(242,196,106,.3);
  --c-slot-dash: rgba(242,196,106,.5);
  --c-slot-icon: rgba(242,196,106,.5);
  --c-slot-shadow: 0 6px 14px rgba(0,0,0,.3);
  --c-stamp: radial-gradient(circle at 36% 30%, #fff3c4, #f4c65a 36%, #d08a22 72%, #9c5d12);
  --c-stamp-ink: #3a2106;
  --c-stamp-ring: rgba(80,45,5,.35);
  --c-num: #16204a;
  --c-num-ink: #f4d58d;
  --c-slot-heart: #d9c48f;
  --c-num-on: #f2c46a;
  --c-num-on-ink: #2a1804;
  --c-reward: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 55%), linear-gradient(135deg, #b8751d, #f7d27a 42%, #e0a23c 64%, #a8661a);
  --c-reward-ink: #2a1804;
  --c-terms: rgba(255,255,255,.05);
  --c-rule: rgba(242,196,106,.6);
}
.loyalty-card[data-card="loykrathong"] .card-face { border: 1px solid rgba(242,196,106,.3); }
/* Candle glow and its broken reflection on the water, flickering softly. */
.loyalty-card[data-card="loykrathong"] .card-front::before {
  inset: 0; content: "";
  background:
    radial-gradient(circle at right var(--lk-x) bottom calc(var(--lk-b) + var(--lk-h) * .88), rgba(255,240,190,.8) 0 2px, rgba(255,196,96,.42) 9px, rgba(255,160,70,.14) 28px, transparent 52px),
    radial-gradient(calc(var(--lk-w) * .2) 1.6px at right var(--lk-x) bottom calc(var(--lk-b) - 6px), rgba(255,214,140,.75), transparent),
    radial-gradient(calc(var(--lk-w) * .14) 1.4px at right calc(var(--lk-x) + 4px) bottom calc(var(--lk-b) - 13px), rgba(255,214,140,.6), transparent),
    radial-gradient(calc(var(--lk-w) * .17) 1.4px at right calc(var(--lk-x) - 3px) bottom calc(var(--lk-b) - 20px), rgba(255,214,140,.5), transparent),
    radial-gradient(calc(var(--lk-w) * .1) 1.2px at right calc(var(--lk-x) + 2px) bottom calc(var(--lk-b) - 27px), rgba(255,214,140,.4), transparent),
    radial-gradient(calc(var(--lk-w) * .3) calc(var(--lk-h) * .55) at right var(--lk-x) bottom calc(var(--lk-b) - 14px), rgba(255,180,80,.18), transparent 70%);
  animation: lk-flicker 2.8s ease-in-out infinite alternate;
}
.loyalty-card[data-card="loykrathong"] .card-front::after {
  right: calc(var(--lk-x) - var(--lk-w) / 2); bottom: var(--lk-b); width: var(--lk-w); height: var(--lk-h); clip-path: var(--lk-krathong); content: "";
  background:
    repeating-linear-gradient(90deg, rgba(255,226,150,.14) 0 1px, transparent 1px 7px) 0 100% / 100% 36% no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 38%, transparent 62%, rgba(0,0,0,.32)),
    linear-gradient(180deg, #fffbe6 0%, #ffe07a 5%, #ff9d2f 12%, #f7ecd2 17%, #f4e6c6 28%, #f3c664 32%, #e0a445 44%, #a9742b 58%, #4b5a2a 63%, #2e3b1c 80%, #1a2311 100%);
}
.loyalty-card[data-card="loykrathong"] .card-logo { border-color: #e3b45c; color: #f2c46a; }
.loyalty-card[data-card="loykrathong"] .card-title { font-weight: 400; letter-spacing: .05em; }
.loyalty-card[data-card="loykrathong"] .card-points strong { text-shadow: 0 0 22px rgba(242,196,106,.35); }
.loyalty-card[data-card="loykrathong"] .card-tagline i { color: #f2c46a; }
.loyalty-card[data-card="loykrathong"] .stamp i, .loyalty-card[data-card="loykrathong"] .stamp.stamped > i { box-shadow: 0 0 0 1px rgba(242,196,106,.35), 0 2px 6px rgba(0,0,0,.35); }
.loyalty-card[data-card="loykrathong"] :is(.stamp .ink, .stamp .slot) > span i { --fa: "\f7e4"; --fa-style: 900; }
.loyalty-card[data-card="loykrathong"] .stamp .ink { background: none; filter: drop-shadow(0 0 7px rgba(255,180,70,.45)); }
.loyalty-card[data-card="loykrathong"] .stamp .ink::before { inset: -5px; border: 0; border-radius: 0; background: var(--c-stamp); clip-path: var(--lk-lotus); }
.loyalty-card[data-card="loykrathong"] .stamp .ink::after { inset: 8px; background: radial-gradient(circle at 50% 42%, rgba(255,250,225,.55), transparent 62%); box-shadow: inset 0 0 0 1px rgba(120,70,10,.3); mix-blend-mode: normal; }
.loyalty-card[data-card="loykrathong"] .stamp .stamp-gift { background: #f2c46a; color: #2a1804; }
.loyalty-card[data-card="loykrathong"] .stamp .ink .stamp-gift { background: #16204a; color: #f4d58d; }
.loyalty-card[data-card="loykrathong"] .stamp-reward { filter: drop-shadow(0 0 14px rgba(255,190,90,.32)); }
.loyalty-card[data-card="loykrathong"] .card-terms { box-shadow: inset 0 0 0 1px rgba(242,196,106,.2); }
.loyalty-card[data-card="loykrathong"] .card-terms li::marker { color: #f2c46a; }
.loyalty-card[data-card="loykrathong"] .card-flower { --fl-line: #e3b45c; --fl-a: rgba(242,196,106,.18); --fl-b: rgba(242,196,106,.1); --fl-core: #f7d68e; opacity: .55; }
@keyframes lk-flicker { 0% { opacity: .78; } 40% { opacity: 1; } 70% { opacity: .88; } 100% { opacity: 1; } }

/* Christmas: deep pine green, falling snow, a tree with a gold star, candy-cane trim, ornament stamps and a tartan back. */
.loyalty-card[data-card="christmas"] {
  --xm-tree: polygon(50% 1%,52.5% 7.6%,59.5% 7.9%,54% 12.3%,55.9% 19.1%,53.3% 21%,67% 42%,60% 42%,75% 65%,66% 65%,84% 89%,55% 89%,55% 99%,45% 99%,45% 89%,16% 89%,34% 65%,25% 65%,40% 42%,33% 42%,46.7% 21%,44.1% 19.1%,46% 12.3%,40.5% 7.9%,47.5% 7.6%);
  --xm-w: 100px; /* tree box; its center sits --xm-x from the right */
  --xm-h: 116px;
  --xm-x: 72px;
  --c-front:
    radial-gradient(circle at right var(--xm-x) top calc(50% - var(--xm-h) * .43), rgba(255,224,130,.42) 0 5px, rgba(255,210,100,.12) 22px, transparent 42px),
    radial-gradient(55% 70% at 84% 55%, rgba(70,165,110,.26), transparent 65%),
    repeating-linear-gradient(135deg, #c8102e 0 6px, #fff8ee 6px 12px) 0 100% / 100% 7px no-repeat,
    linear-gradient(155deg, #0f3d2b, #0a2e20 55%, #0e3526);
  --c-back:
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(200,24,50,.12) 26px 34px, transparent 34px 52px, rgba(244,201,93,.08) 52px 53px, transparent 53px 60px),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(200,24,50,.12) 26px 34px, transparent 34px 52px, rgba(244,201,93,.08) 52px 53px, transparent 53px 60px),
    radial-gradient(90% 60% at 100% 0%, rgba(70,160,110,.22), transparent 62%),
    linear-gradient(170deg, #0f3b2a, #0a2b1f);
  --c-edge: rgba(244,201,93,.3);
  --c-shadow: 0 20px 44px rgba(5,30,20,.36);
  --c-ink: #f4f8f1;
  --c-sub: #d2e3d6;
  --c-label: #b9cfbf;
  --c-accent: #f4c95d;
  --c-accent-2: #ffa3b0;
  --c-slot: rgba(255,255,255,.06);
  --c-slot-ring: rgba(244,201,93,.32);
  --c-slot-dash: rgba(244,201,93,.5);
  --c-slot-icon: rgba(230,240,232,.45);
  --c-slot-shadow: 0 6px 14px rgba(0,0,0,.25);
  --c-stamp: radial-gradient(circle at 34% 28%, #ff8d9b, #e3314a 14%, #c8162f 38%, #a50f2a 70%, #7d0a20);
  --c-stamp-ink: #fff;
  --c-stamp-ring: rgba(255,255,255,.35);
  --c-num: #0b2e20;
  --c-num-ink: #f4c95d;
  --c-slot-heart: #cfe0d3;
  --c-num-on: #d7193a;
  --c-num-on-ink: #fff;
  --c-reward: radial-gradient(circle at 30% 25%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #a10f2a, #c8173a 50%, #8e0d25);
  --c-reward-ink: #fff5e0;
  --c-terms: rgba(3,22,14,.45);
  --c-rule: rgba(244,201,93,.6);
}
.loyalty-card[data-card="christmas"] .card-face { border: 1px solid rgba(244,201,93,.3); }
.loyalty-card[data-card="christmas"] .card-front { padding-bottom: calc(clamp(1.3rem, 4cqi, 2rem) + 7px); }
/* Snow: two looping tiles (120px and 60px tall) drift down together. */
.loyalty-card[data-card="christmas"] .card-face::before {
  inset: -120px 0 0; content: "";
  background:
    radial-gradient(circle at 14px 18px, rgba(255,255,255,.9) 0 1.6px, transparent 2.3px) 0 0 / 150px 120px,
    radial-gradient(circle at 64px 54px, rgba(255,255,255,.75) 0 1.2px, transparent 1.9px) 0 0 / 150px 120px,
    radial-gradient(circle at 112px 12px, rgba(255,255,255,.85) 0 2px, transparent 2.7px) 0 0 / 150px 120px,
    radial-gradient(circle at 134px 86px, rgba(255,255,255,.7) 0 1.4px, transparent 2.1px) 0 0 / 150px 120px,
    radial-gradient(circle at 36px 98px, rgba(255,255,255,.8) 0 1.8px, transparent 2.5px) 0 0 / 150px 120px,
    radial-gradient(circle at 90px 104px, rgba(255,255,255,.6) 0 1px, transparent 1.7px) 0 0 / 150px 120px,
    radial-gradient(circle at 22px 44px, rgba(255,255,255,.45) 0 .8px, transparent 1.4px) 0 0 / 90px 60px,
    radial-gradient(circle at 70px 12px, rgba(255,255,255,.4) 0 .7px, transparent 1.3px) 0 0 / 90px 60px,
    radial-gradient(circle at 52px 34px, rgba(255,255,255,.35) 0 .6px, transparent 1.2px) 0 0 / 90px 60px;
  animation: xm-snow 14s linear infinite;
}
.loyalty-card[data-card="christmas"] .card-front::after {
  top: 50%; right: calc(var(--xm-x) - var(--xm-w) / 2); width: var(--xm-w); height: var(--xm-h); translate: 0 -54%; clip-path: var(--xm-tree); content: "";
  background:
    radial-gradient(circle at 52% 23%, #fffbe0 0 .8px, rgba(255,240,180,.8) 1.6px, transparent 2.6px),
    radial-gradient(circle at 44% 33%, #fff6c8 0 .8px, #f6c84c 2px, #c48d1c 3.2px, transparent 3.8px),
    radial-gradient(circle at 60% 49%, #ffb3bc 0 .8px, #e3243f 2.4px, #a30f29 3.6px, transparent 4.2px),
    radial-gradient(circle at 36% 57%, #fff6c8 0 .8px, #f6c84c 2.2px, #c48d1c 3.4px, transparent 4px),
    radial-gradient(circle at 53% 62%, #fffbe0 0 .8px, rgba(255,240,180,.8) 1.6px, transparent 2.6px),
    radial-gradient(circle at 66% 73%, #fff6c8 0 .8px, #f6c84c 2.4px, #c48d1c 3.6px, transparent 4.2px),
    radial-gradient(circle at 42% 78%, #ffb3bc 0 .8px, #e3243f 2.6px, #a30f29 3.8px, transparent 4.4px),
    radial-gradient(circle at 26% 84%, #fffbe0 0 .8px, rgba(255,240,180,.8) 1.6px, transparent 2.6px),
    radial-gradient(circle at 75% 85%, #ffb3bc 0 .8px, #e3243f 2.4px, #a30f29 3.6px, transparent 4.2px),
    repeating-linear-gradient(160deg, transparent 0 11px, rgba(246,200,76,.55) 11px 12.5px, transparent 12.5px 22px) 0 24% / 100% 64% no-repeat,
    linear-gradient(180deg, transparent 40.2%, #eef6f0 40.7% 42%, transparent 42.2%, transparent 63.6%, #eef6f0 64.1% 65%, transparent 65.2%, transparent 87.6%, #eef6f0 88.1% 89%, transparent 89.2%),
    linear-gradient(180deg, #fff6c4 0, #f7d25c 7%, #e0a82e 15%, #c98f1f 18.5%, transparent 19%),
    linear-gradient(180deg, transparent 89%, #7a4a2a 89%, #5a3319),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 42%, rgba(255,255,255,.1) 58%, rgba(0,0,0,.16)),
    repeating-linear-gradient(180deg, transparent 0 22.4%, rgba(255,255,255,.08) 22.4% 23.2%) 0 18% / 100% 72% no-repeat,
    linear-gradient(180deg, #33a06a 18%, #218050 55%, #16603c 89%);
}
.loyalty-card[data-card="christmas"] .card-logo { border-color: #f4c95d; color: #f4c95d; }
.loyalty-card[data-card="christmas"] .card-title { font-weight: 400; letter-spacing: .05em; }
.loyalty-card[data-card="christmas"] .card-tagline i { --fa: "\f005"; color: #f4c95d; }
.loyalty-card[data-card="christmas"] .card-back-head i { --fa: "\f005"; color: #f4c95d; }
.loyalty-card[data-card="christmas"] .stamp i, .loyalty-card[data-card="christmas"] .stamp.stamped > i { box-shadow: 0 0 0 1px rgba(244,201,93,.4), 0 2px 6px rgba(0,0,0,.35); }
.loyalty-card[data-card="christmas"] :is(.stamp .ink, .stamp .slot) > span i { --fa: "\f2dc"; --fa-style: 900; }
.loyalty-card[data-card="christmas"] .stamp:nth-child(even) { --c-stamp: radial-gradient(circle at 34% 30%, #fff1b8, #f2c84f 42%, #c28b1c 82%, #8d6310); --c-stamp-ink: #3a2a06; }
.loyalty-card[data-card="christmas"] .stamp .ink { box-shadow: 0 5px 10px rgba(0,0,0,.35); }
/* Ornament cap on top of every stamp, and a glass highlight. */
.loyalty-card[data-card="christmas"] .stamp .ink::before { inset: -6px auto auto 50%; width: 15px; height: 9px; translate: -50% 0; border: 0; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, #9c7020, #f7dc84 45%, #c9962f); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.loyalty-card[data-card="christmas"] .stamp .ink::after { background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.75) 0 7%, rgba(255,255,255,.2) 18%, transparent 34%), radial-gradient(circle at 72% 78%, rgba(255,255,255,.16), transparent 40%); mix-blend-mode: normal; }
.loyalty-card[data-card="christmas"] .stamp .stamp-gift { background: #f4c95d; color: #3a2a06; }
.loyalty-card[data-card="christmas"] .stamp .ink .stamp-gift { background: #0b2e20; color: #f4c95d; }
.loyalty-card[data-card="christmas"] .stamp-reward { filter: drop-shadow(0 0 .8px #f4c95d) drop-shadow(0 0 .8px #f4c95d) drop-shadow(0 8px 16px rgba(0,0,0,.3)); }
.loyalty-card[data-card="christmas"] .card-terms { box-shadow: inset 0 0 0 1px rgba(244,201,93,.24); }
.loyalty-card[data-card="christmas"] .card-terms li::marker { color: #ff6b80; }
.loyalty-card[data-card="christmas"] .card-flower { --fl-line: #f4c95d; --fl-a: #d7193a; --fl-b: #b3122f; --fl-core: #f4c95d; opacity: .7; }
@keyframes xm-snow { to { translate: 0 120px; } }
@media (prefers-reduced-motion: reduce) {
  .loyalty-card .card-face::before, .loyalty-card .card-face::after { animation: none !important; }
  .loyalty-card[data-card="midnight"] .card-face::before { opacity: .8; }
}

/* Front-only card preview (brand settings / card store): sized for a ~260-340px wide slot. At least card-shaped
   (1.586:1), but it grows rather than clipping when a long name wraps (overflow:hidden would cut an aspect-ratio box). */
.card-preview { gap: 0; }
.card-preview .card-front { min-height: calc(100cqi / 1.586); align-content: space-between; gap: .5rem; padding: 1rem 1.1rem; padding: 6cqi 6.5cqi; border-radius: 20px; }
.card-preview .card-face { box-shadow: 0 10px 26px rgba(40,30,40,.12); }
.card-preview .card-top { gap: .5rem; }
.card-preview .card-brand { column-gap: .5rem; }
.card-preview .card-logo { width: 34px; height: 34px; font-size: 1rem; }
.card-preview .card-brand strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: .95rem; font-size: clamp(.8rem, 5.4cqi, 1.1rem); letter-spacing: .12em; }
.card-preview .card-brand small { margin-top: .25rem; font-size: .45rem; letter-spacing: .24em; }
.card-preview .card-title { font-size: .78rem; font-size: clamp(.66rem, 4.4cqi, .9rem); }
.card-preview .card-points small { font-size: .55rem; }
.card-preview .card-points div { gap: .35rem; }
.card-preview .card-points strong { font-size: 2.6rem; font-size: clamp(2rem, 16cqi, 3.2rem); }
.card-preview .card-points span { font-size: .78rem; }
.card-preview .card-bottom { gap: .2rem .6rem; }
.card-preview .card-holder { font-size: .58rem; letter-spacing: .08em; }
.card-preview .card-tagline { font-size: .62rem; }
.card-preview[data-card="minimal"] .card-bottom { padding-top: .5rem; }
.card-preview[data-card="midnight"] .card-front::after { background: radial-gradient(circle at calc(84% - 4px) calc(48% + 3px), #fffcef 0 4px, #fbefc6 11.5px, transparent 12.2px), radial-gradient(circle at 84% 48%, #f8e7b2 0 12px, transparent 12.7px); -webkit-mask: radial-gradient(circle at calc(84% + 6px) calc(48% - 4px), transparent 0 10.5px, #000 11.5px); mask: radial-gradient(circle at calc(84% + 6px) calc(48% - 4px), transparent 0 10.5px, #000 11.5px); }
.card-preview[data-card="sakura"] .card-front::after { right: -22px; width: 96px; }
.card-preview[data-card="sakura"] .card-front::before { right: 74px; width: 34px; }
.card-preview[data-card="valentine"] { --vl-size: 84px; }
.card-preview[data-card="valentine"] .card-bottom { padding-top: .55rem; }
.card-preview[data-card="songkran"] { --sg-d: 70px; --sg-x: 54px; }
.card-preview[data-card="loykrathong"] { --lk-w: 54px; --lk-h: 48px; --lk-x: 50px; --lk-b: 20%; }
.card-preview[data-card="christmas"] { --xm-w: 66px; --xm-h: 76px; --xm-x: 50px; }
.card-preview[data-card="christmas"] .card-front { padding-bottom: calc(6cqi + 7px); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-heading h2, .section-heading p { margin-bottom: 0; }
.member-main .section-heading { margin: 2.3rem 0 1rem; }
.next-reward { min-height: 150px; }
.next-reward-card { display: grid; grid-template-columns: 190px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--soft-shadow); }
.next-reward-card > div:last-child { display: flex; flex-direction: column; justify-content: center; padding: 1.3rem 1.6rem; }
.reward-art { position: relative; display: grid; min-height: 150px; place-items: center; overflow: hidden; background: linear-gradient(145deg, rgba(var(--brand-rgb), .24), rgba(var(--brand-rgb), .46)), var(--white); }
.reward-art::before, .reward-art::after { position: absolute; width: 95px; height: 95px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; content: ""; }
.reward-art::before { top: -25px; left: -20px; }
.reward-art::after { right: -25px; bottom: -35px; }
.reward-art > span { position: relative; z-index: 1; font-size: 3rem; color: var(--berry-dark-ink); }
.reward-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reward-10, .reward-20 { background: linear-gradient(145deg, rgba(var(--brand-rgb), .2), rgba(var(--brand-rgb), .44)), #f1eced; }
.reward-15 { background: linear-gradient(145deg, #f7e3d2, #eac8ad); }
.points-badge { align-self: flex-start; margin-bottom: .7rem; padding: .25rem .6rem; border-radius: 999px; background: var(--blush-100); color: var(--berry-ink); font-size: .75rem; font-weight: 700; }
.next-reward-card h3, .reward-card h3 { margin-bottom: .35rem; }
.next-reward-card p, .reward-card p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }
.page-title { margin-bottom: 1.6rem; }
.page-title h1 { margin-bottom: .5rem; font-weight: 500; }
.page-title > p:last-child { color: var(--muted); }
.filter-pills { display: flex; gap: .55rem; margin-bottom: 1.3rem; overflow-x: auto; }
.filter-pills button { flex: 0 0 auto; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--muted); }
.filter-pills button.active { border-color: var(--berry); background: var(--berry); color: var(--on-brand); }
.transaction-list { display: grid; gap: .7rem; margin-bottom: 1rem; }
.transaction-list.is-loading { min-height: 100px; opacity: .48; }
.transaction-item.with-actions { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
.icon-button.small { min-height: 34px; padding: .3rem .55rem; font-size: .8rem; }
.icon-button.danger { border-color: rgba(var(--danger-rgb), .28); color: var(--danger); }
.transaction-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.transaction-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; font-size: 1.2rem; font-weight: 700; }
.transaction-mark.earn { background: #e4f1eb; color: var(--success); }
.transaction-mark.redeem { background: var(--blush-100); color: var(--berry-ink); }
.transaction-item strong { font-size: .92rem; }
.transaction-item p { margin: .2rem 0 0; color: var(--muted); font-size: .75rem; }
.points-in { color: var(--success); }
.points-out { color: var(--berry-ink); }
.rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.reward-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--soft-shadow); }
.reward-card > div:last-child { padding: 1.15rem; }
.reward-card .button { margin-top: 1rem; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.profile-card, .surface-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--soft-shadow); }
.profile-card { display: flex; flex-direction: column; align-items: center; padding: 2rem; text-align: center; }
.avatar { display: grid; width: 74px; height: 74px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, rgba(var(--brand-rgb), .45), rgba(var(--brand-rgb), .2)), var(--white); color: var(--berry-dark-ink); font-size: 2rem; }
.avatar.small { width: 38px; height: 38px; flex: 0 0 auto; font-size: 1rem; }
.profile-card h2 { margin: 1rem 0 .25rem; }
.profile-card p { color: var(--muted); }
.surface-card { padding: 1.4rem; }
.surface-card h2 { margin-bottom: 1rem; }
.settings-card { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.settings-card h2 { margin: 0 0 .2rem; }
.settings-card p { margin: 0; color: var(--muted); }
.field-label { color: var(--plum); font-size: .88rem; font-weight: 700; }
.birthday-field { display: grid; gap: .42rem; }
.birthday-selects { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .6rem; }
/* LINE link (profile): the pairing code is typed into the shop's LINE chat, so it is big and easy to copy by eye.
   .line-card/.line-linked are also admin class names (dashboard loads app.css too), so they stay scoped to the member page. */
.app-page .line-card { display: grid; align-content: start; gap: 1rem; }
.line-head { display: flex; align-items: center; gap: .85rem; }
.line-head h2 { margin: 0 0 .15rem; }
.line-head p { margin: 0; color: var(--muted); font-size: .84rem; }
.line-mark { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: #06c755; color: #fff; font-size: 1.7rem; }
.app-page .line-linked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; }
.line-badge { margin: 0; padding: .4rem .85rem; border-radius: 999px; background: #e7f3ed; color: var(--success); font-size: .88rem; font-weight: 700; }
.line-code-box { display: grid; justify-items: center; gap: .3rem; padding: 1.1rem 1rem; border: 1.5px dashed var(--blush-200); border-radius: var(--radius-md); background: var(--blush-50); text-align: center; }
.line-code-box small { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.line-code-box p { margin: 0; color: var(--ink-soft); font-size: .86rem; }
.line-code { margin-right: -.3em; color: var(--plum); font-size: 2.3rem; font-weight: 700; letter-spacing: .3em; line-height: 1.15; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }
.line-code-box .line-countdown { color: var(--berry-ink); font-size: .84rem; font-weight: 700; }
.line-code-box.expired .line-code { color: var(--muted); text-decoration: line-through; opacity: .55; }
.line-code-box.expired .line-countdown { color: var(--danger); }
.line-code-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .35rem; }
.bottom-nav { position: sticky; z-index: 30; bottom: 10px; flex: 0 0 auto; display: flex; width: min(calc(100% - 2rem), 620px); min-height: 64px; justify-content: space-around; margin: 0 auto calc(10px + var(--viewport-gap, 0px)); padding: .3rem; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 12px 35px rgba(var(--brand-rgb), .18); backdrop-filter: blur(14px); }
.bottom-nav button { display: flex; flex: 1 1 0; min-width: 0; min-height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .2rem .1rem; border: 0; border-radius: 16px; background: transparent; color: var(--muted); font-size: .58rem; white-space: nowrap; }
.bottom-nav button span { font-size: 1.25rem; line-height: 1; }
.bottom-nav button.active { background: var(--blush-100); color: var(--berry-dark-ink); font-weight: 700; }

/* Modals */
.modal { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 1rem; border: 0; background: transparent; }
.modal::backdrop { background: rgba(40, 28, 36, .38); backdrop-filter: blur(4px); }
.modal[open] { display: grid; place-items: center; }
.modal-card { position: relative; width: min(100%, 460px); max-height: calc(100dvh - 2rem - var(--viewport-gap, 0px)); overflow-y: auto; padding: 1.6rem; border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--shadow); }
.modal-close { position: absolute; z-index: 2; top: .9rem; right: .9rem; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; background: var(--blush-100); color: var(--plum); font-size: 1.35rem; }
.qr-modal-card { text-align: center; }
.qr-modal-card .eyebrow { margin-top: .5rem; }
.qr-modal-card > p:not(.eyebrow) { margin-bottom: .3rem; color: var(--muted); font-size: .85rem; }
.qr-box { display: grid; width: min(100%, 286px); min-height: 286px; place-items: center; margin: 1.2rem auto; padding: 1rem; border: 1px solid var(--line); border-radius: 22px; background: var(--white); }
.qr-box img { width: 100%; height: auto; image-rendering: pixelated; }
.confirm-list { display: grid; gap: .1rem; margin: 1.2rem 0; }
.confirm-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .15rem; border-bottom: 1px solid var(--line); }
.confirm-list dt { color: var(--muted); }
.confirm-list dd { margin: 0; font-weight: 700; text-align: right; }
.confirm-list .result { margin-top: .5rem; padding: 1rem; border: 0; border-radius: 14px; background: var(--blush-100); }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .4rem; }

/* Admin app */
.admin-page { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; padding-left: 238px; background: var(--blush-50); }
.admin-sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: 238px; flex-direction: column; padding: 1.6rem 1rem; border-right: 1px solid var(--line); background: var(--white); color: var(--plum); }
.admin-sidebar .brand { margin-left: .55rem; }
.admin-sidebar nav { display: grid; gap: .35rem; margin-top: 4rem; }
.admin-sidebar nav button { display: flex; min-height: 47px; align-items: center; gap: .8rem; padding: .65rem .9rem; border: 0; border-radius: 13px; background: transparent; color: var(--muted); text-align: left; }
.admin-sidebar nav button > span:first-child { width: 24px; font-size: 1.1rem; text-align: center; }
.admin-sidebar nav button.active { background: var(--blush-100); color: var(--berry-dark-ink); font-weight: 700; }
.staff-sidebar-user { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding: .8rem; border-top: 1px solid var(--line); }
.staff-sidebar-user > div { display: flex; min-width: 0; flex-direction: column; }
.staff-sidebar-user strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; }
.staff-sidebar-user small { color: var(--muted); font-size: .68rem; }
.admin-mobile-header, .admin-bottom-nav { display: none; }
.admin-main { flex: 1 0 auto; width: min(100% - 3rem, 1250px); margin: 0 auto; padding: 2.6rem 0 4rem; container-type: inline-size; container-name: admin; }
.admin-main > section { animation: fade-up .25s ease both; }
.admin-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.6rem; }
.admin-heading h1 { margin-bottom: .35rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; }
.admin-heading p:last-child { margin: 0; color: var(--muted); }
.date-field { width: 180px; flex: 0 0 auto; color: var(--muted); font-size: .72rem; }
.date-field input { height: 44px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .8rem; }
.stats-grid article { display: flex; min-width: 0; align-items: center; gap: .9rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--soft-shadow); }
.stat-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 14px; font-weight: 700; }
.stat-icon.rose { background: var(--blush-100); color: var(--berry-ink); }.stat-icon.berry { background: rgba(var(--brand-rgb), .17); color: var(--berry-dark-ink); }.stat-icon.gold { background: #f4ebd7; color: #9a742b; }.stat-icon.plum { background: #f7e8e1; color: #b3806a; }
.stats-grid article > div { min-width: 0; }
.stats-grid small { display: block; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.stats-grid strong { margin-right: .25rem; font-size: 1.5rem; font-weight: 500; }
.stats-grid article > div > span { color: var(--muted); font-size: .7rem; }
.heading-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.admin-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin-top: 1rem; }
.admin-columns .section-heading { margin-bottom: 1rem; }
.search-field { position: relative; display: block; }
.search-field > span:not(.sr-only) { position: absolute; z-index: 1; top: 50%; left: 1rem; color: var(--muted); transform: translateY(-50%); }
.search-field input { padding-left: 2.5rem; background: var(--blush-50); }
.customer-list { display: grid; gap: .35rem; min-height: 90px; margin-top: .8rem; }
.customer-list.is-loading { opacity: .55; }
.customer-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: .7rem; width: 100%; padding: .65rem; border: 1px solid transparent; border-radius: 13px; background: transparent; text-align: left; }
.customer-row:hover, .customer-row.selected { border-color: var(--blush-200); background: var(--blush-50); }
.customer-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.customer-row strong, .customer-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-row strong { font-size: .84rem; }.customer-row small { color: var(--muted); font-size: .67rem; }
.row-balance { color: var(--berry-ink); font-size: .78rem; font-weight: 700; }
.compact-list .customer-row:nth-child(n+6) { display: none; }
.quick-guide { background: linear-gradient(145deg, var(--white), rgba(var(--brand-rgb), .08)), var(--white); }
.quick-guide ol { display: grid; gap: 1rem; margin: 1.4rem 0; padding: 0; list-style: none; }
.quick-guide li { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .83rem; }
.quick-guide li span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--blush-100); color: var(--berry-ink); font-weight: 700; }
.customer-workspace { display: grid; grid-template-columns: 1fr; align-items: start; gap: 1rem; }
.customer-browser { position: static; }
.customer-detail { display: grid; gap: .8rem; min-height: 420px; }
.empty-detail, .empty-state { display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; border: 1px dashed var(--blush-200); border-radius: var(--radius-lg); color: var(--muted); text-align: center; }
.empty-detail > span, .empty-icon { color: var(--rose); font-size: 2rem; }
.empty-detail h2, .empty-state h3 { margin: .7rem 0 .25rem; color: var(--plum); }
.empty-detail p, .empty-state p { margin: 0; font-size: .82rem; }
.selected-member-card { overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(var(--brand-rgb), .22), rgba(var(--brand-rgb), .1)), var(--white); box-shadow: var(--soft-shadow); }
.selected-member-head { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1.3rem; }
.selected-member-head .avatar { width: 54px; height: 54px; background: rgba(255,255,255,.65); font-size: 1.35rem; }
.selected-member-head h2, .selected-member-head p { margin-bottom: 0; }
.selected-meta { color: var(--muted); font-size: .74rem; }
.selected-balance { display: flex; flex-direction: column; align-items: flex-end; }
.selected-balance small, .selected-balance span { color: var(--muted); font-size: .65rem; }
.selected-balance strong { font-size: 2rem; line-height: 1; }
.detail-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: .35rem; border-top: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.32); }
.detail-tabs button { min-height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: .8rem; }
.detail-tabs button[aria-selected="true"] { background: rgba(255,255,255,.82); color: var(--berry-dark-ink); font-weight: 700; box-shadow: 0 4px 12px rgba(var(--brand-rgb), .12); }
.detail-panel .section-heading { margin-bottom: 1.2rem; }
.rate-chip { padding: .35rem .6rem; border-radius: 999px; background: #f5ecdc; color: #866530; font-size: .68rem; font-weight: 700; }
.points-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.points-form label:first-child, .points-form .points-preview, .points-form label:has(textarea), .points-form .form-message { grid-column: 1 / -1; }
.points-form button { justify-self: start; }
.points-preview { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 1rem; border-radius: 14px; background: var(--blush-50); }
.points-preview > span { color: var(--muted); font-size: .8rem; }
.points-preview strong { color: var(--berry-ink); font-size: 1.2rem; }
.points-preview small { grid-column: 1 / -1; color: var(--muted); font-size: .68rem; }
.admin-rewards-grid { display: grid; gap: .6rem; }
.admin-reward { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; }
.admin-reward.locked { opacity: .7; }
.reward-small-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--blush-100); color: var(--berry-ink); }
.admin-reward h3 { margin: 0 0 .2rem; font-size: .9rem; }.admin-reward p { margin: 0; color: var(--muted); font-size: .68rem; }
.settings-grid { display: grid; gap: 1.2rem; }
.delete-member { margin: .35rem 0 0; padding: 0; color: var(--danger); font-size: .78rem; }
.settings-grid .surface-card { padding: clamp(1.2rem, 3vw, 1.8rem); }
.rule-form { display: grid; gap: .8rem; max-width: 420px; }
.rule-form label, .reward-admin-row label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.hint { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 400; }
.reward-admin-row { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.reward-admin-row label:nth-of-type(1) { flex: 2 1 150px; }
.reward-admin-row label:nth-of-type(2) { flex: 3 1 180px; }
.reward-admin-row label:nth-of-type(3) { flex: 0 1 130px; }
.reward-admin-row .button, .reward-admin-row .check { flex: 0 0 auto; }
.reward-admin-row.create { border-top: 2px dashed var(--blush-200); }
.reward-admin-row.inactive input:not([type="checkbox"]) { color: var(--muted); }
.reward-admin-row h3, .reward-admin-row .form-message { flex-basis: 100%; }
.reward-admin-row h3 { margin: .3rem 0 0; }
.reward-admin-row .form-message[hidden] { display: none; }
.reward-admin-row .check { display: flex; align-items: center; gap: .4rem; padding-bottom: .7rem; white-space: nowrap; }
.reward-admin-row .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--berry); }
.settings-panel { display: flex; min-height: 270px; align-items: center; justify-content: space-between; }
.settings-panel h2 { margin: 1rem 0 .2rem; }.settings-panel p { color: var(--muted); }
.camera-frame { position: relative; overflow: hidden; aspect-ratio: 1; margin: 1rem 0; border-radius: 20px; background: #1c1116; }
.camera-frame video { width: 100%; height: 100%; object-fit: cover; }
.camera-frame > span { position: absolute; inset: 12%; border: 2px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 0 0 999px rgba(40,28,36,.2); box-shadow: 0 0 0 999px color-mix(in srgb, var(--plum) 20%, transparent); }
.scanner-card form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.skeleton-card, .loading-block { animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .62; } }

/* Admin app: layout responds to the content area width, so tablets/iPad in any orientation adapt automatically */
@container admin (min-width: 700px) {
  .customer-workspace { grid-template-columns: minmax(270px, .7fr) minmax(0, 1.3fr); }
  .customer-browser { position: sticky; top: 1rem; max-height: calc(100dvh - 2rem); overflow-y: auto; }
}
/* Tablet: icon rail instead of the full sidebar */
@media (min-width: 761px) and (max-width: 1100px) {
  .admin-page { padding-left: 84px; }
  .admin-sidebar { width: 84px; padding: 1.2rem .55rem; align-items: center; }
  .admin-sidebar .brand { margin-left: 0; }
  .admin-sidebar .brand > span:last-child, .admin-sidebar .nav-label, .staff-sidebar-user > div { display: none; }
  .admin-sidebar nav { width: 100%; margin-top: 2.5rem; }
  .admin-sidebar nav button { justify-content: center; padding: .65rem; }
  .staff-sidebar-user { justify-content: center; }
}
@media (max-width: 960px) {
  .brand-panel { padding: 2.5rem; }
  .preview-card { width: 62%; }
}

@media (max-width: 760px) {
  .desktop-only { display: none; }
  .brand-panel { min-height: 350px; padding: 1.4rem; }
  .brand-copy { padding: 3rem 0 6rem; }
  .brand-copy h1 { font-size: 2.25rem; }
  .brand-copy > p:last-child { max-width: 70%; font-size: .88rem; }
  .preview-card { right: 1.2rem; bottom: 1.2rem; width: 42%; min-height: 135px; padding: .7rem; border-radius: 18px; }
  .preview-card .hand-art { right: -1rem; width: 72%; }
  .preview-card > div { bottom: .8rem; left: .8rem; }.preview-card strong { font-size: 2rem; }.preview-card .preview-label { display: none; }
  .auth-panel, .staff-auth-panel { padding: 1rem; }
  .auth-card { padding: 1.4rem; border-radius: 24px; box-shadow: none; }
  .staff-welcome { min-height: 310px; padding: 1.5rem; }
  .staff-welcome > div { margin-top: 4rem; }.staff-welcome h1 { font-size: 2.4rem; }.staff-welcome > .flower-art { width: 53%; }
  .next-reward-card { grid-template-columns: 120px 1fr; }

  .admin-page { padding: 68px 0 0; }
  .admin-sidebar { display: none; }
  .admin-mobile-header { position: fixed; z-index: 30; inset: 0 0 auto; display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 1rem; border-bottom: 1px solid var(--line); background: rgba(255,252,251,.94); backdrop-filter: blur(12px); }
  .admin-mobile-header .brand-mark { width: 35px; height: 35px; font-size: 1.1rem; }.admin-mobile-header .brand strong { font-size: .75rem; }
  .admin-bottom-nav { position: sticky; z-index: 30; bottom: 0; flex: 0 0 auto; display: flex; min-height: 56px; justify-content: stretch; padding: .25rem .2rem calc(.35rem + env(safe-area-inset-bottom) + var(--viewport-gap, 0px)); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
  .admin-bottom-nav button { display: flex; flex: 1 1 0; min-width: 0; min-height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .2rem .1rem; border: 0; border-radius: 13px; background: transparent; color: var(--muted); font-size: .58rem; }
  .admin-bottom-nav button span { font-size: 1.1rem; }
  .admin-bottom-nav .nav-label { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
  .admin-bottom-nav button.active { background: var(--blush-100); color: var(--berry-dark-ink); font-weight: 700; }
  .admin-main { width: min(100% - 1.5rem, 620px); padding: 1.6rem 0 1.5rem; }
  .admin-heading { align-items: start; }.admin-heading h1 { font-size: 2rem; }.date-field { width: 145px; }
}

@media (max-width: 520px) {
  .brand-panel { min-height: 320px; }
  .brand-panel > .brand { position: relative; z-index: 2; }
  .brand-copy { padding: 2.5rem 0 5rem; }.brand-copy h1 { font-size: 1.85rem; }.brand-copy > p:last-child { max-width: 67%; font-size: .78rem; }
  .preview-card { width: 39%; min-height: 120px; }.preview-card span { font-size: .54rem; }
  .app-header { height: 66px; padding: 0 1rem; }.app-header .brand small { display: none; }.app-header .brand-mark { width: 36px; height: 36px; font-size: 1.1rem; }.app-header .brand strong { font-size: .75rem; }
  .member-main { width: min(100% - 1.25rem, 1080px); padding: 1.4rem 0 1.5rem; }
  .welcome-row .flower-art { width: 85px; }
  .progress-copy { font-size: .72rem; }
  .stamp-row { flex-direction: column; align-items: center; }
  .stamp-grid, .stamp-grid.few { flex: 0 0 auto; justify-content: center; gap: .6rem .75rem; }
  .stamp-grid.few .stamp:not(:last-child)::after { display: none; }
  .stamp, .stamp .slot, .stamp .ink { width: 52px; }
  .stamp .slot, .stamp .ink { height: 52px; font-size: 1.4rem; }
  .stamp .ink > span { font-size: 1.2rem; }
  .stamp .ink small { font-size: .42rem; }
  .stamp-reward { width: 116px; height: 116px; }
  .stamp-reward strong { font-size: .74rem; }
  .next-reward-card { grid-template-columns: 105px 1fr; }.next-reward-card > div:last-child { padding: 1rem; }.next-reward-card p { font-size: .76rem; }
  .reward-card { display: grid; grid-template-columns: 110px 1fr; }.reward-card .reward-art { min-height: 175px; }
  .transaction-item { grid-template-columns: 36px minmax(0,1fr) auto; gap: .65rem; padding: .8rem; }.transaction-mark { width: 36px; height: 36px; }.transaction-item p { max-width: 180px; }
  .bottom-nav { width: calc(100% - 1rem); margin-bottom: 5px; }
  .bottom-nav button { font-size: .55rem; }
  .modal { padding: .5rem; align-items: center; }.modal-card { width: 100%; padding: 1.35rem; border-radius: 25px 25px 18px 18px; }
  .qr-box { min-height: 245px; }
  .admin-heading { display: grid; grid-template-columns: 1fr; }.admin-heading .button { justify-self: start; }.date-field { width: 100%; }
  .stats-grid { gap: .55rem; }.stats-grid article { gap: .55rem; padding: .85rem; }.stat-icon { width: 36px; height: 36px; border-radius: 11px; }.stats-grid strong { font-size: 1.3rem; }
  .admin-columns { gap: .7rem; }.surface-card { padding: 1rem; }
  .selected-member-head { grid-template-columns: 44px minmax(0,1fr); }.selected-member-head .avatar { width: 44px; height: 44px; }.selected-balance { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: .35rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.45); }.selected-balance strong { font-size: 1.55rem; }
  .points-form { grid-template-columns: 1fr; }.points-form > * { grid-column: 1 !important; }.points-form button { width: 100%; }
  .admin-reward { grid-template-columns: 38px minmax(0,1fr); }.admin-reward .button { grid-column: 1 / -1; width: 100%; }
  .settings-panel { display: grid; gap: 1rem; }.settings-panel .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Login-link page (/link/<code>#t=<secret>) */
.link-page { display: grid; min-height: 100vh; place-items: center; padding: 1rem; background: var(--blush-50); }
.link-card { text-align: center; }
.link-card .brand { justify-content: center; margin-bottom: 1.5rem; }
.link-card h1 { font-size: 1.5rem; }
.link-card #link-retry { margin-top: 1rem; }