/* ── Member enrollment & portal — page-specific styles ────────────────────── */

/* ── Enrollment (enrollment/join.html) ── */
.page--join {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 24px 56px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page-enter { animation: page-in 380ms var(--ease-out) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none; } }

.lang-bar { display: flex; justify-content: flex-end; margin-bottom: 24px; }

.header--join {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 40px;
}
.header__logo--join { width: var(--logo-width, 140px); height: auto; mix-blend-mode: var(--logo-blend, screen); }
/* Per-tenant logo alignment (center is the default via the header's align-items). */
.header--logo-left .header__logo--join  { align-self: flex-start; }
.header--logo-right .header__logo--join { align-self: flex-end; }
.header__sub {
  font: 600 12px/1 var(--f-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Heading resets — h1/h2 used for semantic outline; visuals are handled by their existing classes */
:where(.header__title, .sec-heading) { margin: 0; font: inherit; line-height: inherit; }

/* -- me page header -- */
.header--me {
  margin-bottom: 24px;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}
.header__lang-float {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 20px;
}
/* When the logo is right-aligned on the me page, move the language toggle to
   the left so it doesn't collide with the logo. */
.header--logo-right .header__lang-float { right: auto; left: 20px; }

.referral-banner {
  display: flex;
  gap: 12px;
  background: oklch(0.72 0.055 72 / 0.09);
  border: 1px solid oklch(0.72 0.055 72 / 0.26);
  border-radius: 6px;
  padding: 13px 15px;
  margin-bottom: 28px;
  align-items: flex-start;
}
.referral-banner__pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  flex-shrink: 0;
  margin-top: 5px;
}
.referral-banner__copy { font: 400 13px/1.55 var(--f-body); color: var(--accent-2); }
.referral-banner__copy strong { font-weight: 600; }

.benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--dim);
}
.benefit { display: flex; align-items: center; gap: 14px; }
.benefit__dot {
  width: 34px; height: 34px; min-width: 34px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
}
.benefit__badge { width: 18px; height: auto; }
.benefit__copy { font: 400 14px/1.4 var(--f-body); }
.benefit__copy strong { font-weight: 600; }
.benefit__dot--mega {
  background: oklch(0.72 0.055 72 / 0.18);
  color: var(--accent-2);
}

.form--join { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font: 600 11px/1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__optional {
  font: 400 10px/1 var(--f-body);
  letter-spacing: 0;
  text-transform: none;
  color: oklch(0.55 0.007 85);
}
.field__input {
  background: oklch(0.97 0.006 85 / 0.045);
  border: 1px solid var(--dim);
  border-radius: 6px;
  color: var(--white);
  font: 500 16px/1 var(--f-body);
  padding: 14px 15px;
  width: 100%;
  outline: none;
  transition: border-color 140ms;
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: oklch(0.72 0.007 85 / 0.3); }
.field__input:focus { border-color: var(--accent); }
.field__hint { font: 400 11px/1.5 var(--f-body); color: oklch(0.72 0.007 85 / 0.45); }
.field__input--error { border-color: oklch(0.62 0.19 35 / 0.55) !important; }

.field__phone-group {
  display: flex;
  align-items: stretch;
  background: oklch(0.97 0.006 85 / 0.045);
  border: 1px solid var(--dim);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 140ms;
}
.field__phone-group:focus-within { border-color: var(--accent); }
.field__phone-group--error { border-color: oklch(0.62 0.19 35 / 0.55) !important; }
.field__phone-dial {
  position: relative;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--dim);
  flex-shrink: 0;
  background: oklch(0.97 0.006 85 / 0.04);
}
.field__dial-select {
  background: transparent;
  border: none;
  color: var(--muted);
  font: 500 14px/1 var(--f-body);
  padding: 14px 28px 14px 11px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  letter-spacing: 0.01em;
}
.field__dial-select option { background: oklch(0.10 0.008 55); color: var(--white); }
.field__dial-arrow {
  position: absolute;
  right: 7px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  opacity: 0.6;
}
.field__input--phone {
  background: transparent;
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.field__input--phone:focus { border-color: transparent; }

.btn-join {
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: var(--black);
  border: none;
  border-radius: 6px;
  font: 600 12px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms, color 140ms, transform 80ms;
  margin-bottom: 20px;
}
.btn-join:hover { background: var(--accent-deep); color: var(--black); }
.btn-join:active { transform: scale(0.985); }
.btn-join--flush { margin-bottom: 0; }
.btn-join--block {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 14px 24px;
  margin-bottom: 0;
}

.form-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: oklch(0.62 0.19 35 / 0.10);
  border: 1px solid oklch(0.62 0.19 35 / 0.28);
  border-radius: 8px;
  padding: 12px 14px;
  font: 500 13px/1.4 var(--f-body);
  color: oklch(0.82 0.12 35);
}
.form-error__icon { flex-shrink: 0; margin-top: 1px; }
.login__card .form-error { margin-bottom: 16px; }

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font: 400 11px/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: oklch(0.72 0.007 85 / 0.25);
}
.or-divider--join { margin: 0 0 20px; }
.btn-login {
  display: block;
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--accent);
  border: 1px solid oklch(0.64 0.048 204 / 0.45);
  border-radius: 6px;
  font: 600 12px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.btn-login:hover { background: oklch(0.64 0.048 204 / 0.08); border-color: var(--accent); }
.btn-login:active { background: oklch(0.64 0.048 204 / 0.15); }

.legal {
  font: 400 11px/1.65 var(--f-body);
  color: var(--muted);
  text-align: center;
}
.legal--join { margin-top: 24px; }
.legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--text, currentColor); }

/* ── Member portal (member/me.html) ── */
.page--me {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 0 max(48px, env(safe-area-inset-bottom));
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 20px 16px;
  min-height: 0;
  border-bottom: none;
}
.topbar__logo {
  display: block;
  position: static;
  left: auto;
  transform: none;
  height: 28px;
  width: auto;
  max-width: none;
  pointer-events: auto;
  mix-blend-mode: var(--logo-blend, screen);
}
.btn-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 0.6875rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid oklch(0.97 0.010 75 / 0.18);
  border-radius: 6px;
  padding: 0 12px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 120ms, border-color 120ms;
}
.btn-lang svg { opacity: 0.7; flex-shrink: 0; }
.btn-lang:hover { color: var(--white); border-color: oklch(0.97 0.010 75 / 0.40); }
.btn-lang:hover svg { opacity: 1; }
.footer__logout-form { margin-top: 12px; }

.card-section { padding: 8px 20px 24px; }
.card-section--rewards { padding-bottom: 4px; }
.card-section--rewards .pending-reward-card { margin-bottom: 10px; }
.card-section--rewards .pending-reward-card:last-child { margin-bottom: 0; }
.card-label {
  font: 600 0.65rem/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.stamp-card--me {
  background: var(--surface2);
  border: 1px solid oklch(0.64 0.048 204 / 0.22);
  border-radius: 18px;
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stamp-card--mega {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px oklch(0.72 0.055 72 / 0.15);
}
.stamp-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid oklch(0.97 0.010 75 / 0.08);
}

/* ── Pending reward banner (member/me.html) ── */
.pending-reward-card {
  background: oklch(0.64 0.048 204 / 0.09);
  border: 1px solid oklch(0.64 0.048 204 / 0.28);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pending-reward-card__icon {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%;
  background: oklch(0.64 0.048 204 / 0.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.pending-reward-card--mega {
  background: oklch(0.72 0.055 72 / 0.08);
  border-color: var(--accent-2);
}
.pending-reward-card--mega .pending-reward-card__icon {
  background: oklch(0.72 0.055 72 / 0.15);
  color: var(--accent-2);
}
.pending-reward-card--mega .pending-reward-card__title { color: var(--accent-2); }
.pending-reward-card__body { flex: 1; }
.pending-reward-card__title {
  font: 600 0.9rem/1.2 var(--f-body);
  color: var(--accent);
  margin-bottom: 3px;
}
.pending-reward-card__meta {
  font: 500 0.72rem/1 var(--f-body);
  letter-spacing: 0.04em;
  color: oklch(0.64 0.048 204 / 0.55);
  margin-bottom: 6px;
}
.pending-reward-card__desc {
  font: 400 0.78rem/1.4 var(--f-body);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.pending-reward-card__desc::-webkit-details-marker { display: none; }
.pending-reward-detail { margin-top: 0; }
.pending-reward-detail__body {
  font: 400 0.78rem/1.5 var(--f-body);
  color: var(--muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid oklch(0.64 0.048 204 / 0.15);
}
.stamp-count--me { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.stamp-count__n--me { font: 600 2.5rem/1 var(--f-disp); letter-spacing: -0.01em; }
.stamp-count__of--me { font: 400 1.1rem/1 var(--f-disp); color: var(--muted); }
.stamp-count__label--me { font: 500 0.75rem/1 var(--f-body); color: var(--muted); margin-left: 2px; }
.reward-hint--me { font: 500 0.75rem/1.4 var(--f-body); color: var(--accent); text-align: right; }
.reward-hint--me-muted { color: var(--muted); }
.stamp-card--themed .stamp-count__n--me { color: oklch(0.97 0.010 75); }
.stamp-card--themed .stamp-count__of--me,
.stamp-card--themed .stamp-count__label--me { color: oklch(0.97 0.010 75 / 0.60); }
.stamp-card--themed .stamp-card__footer { border-top-color: oklch(0.97 0.010 75 / 0.12); }
.stamp-card--themed .reward-hint--me-muted { color: oklch(0.97 0.010 75 / 0.60); }

/* ── Reward ladder — two-tier display (member/me.html) ── */
.reward-ladder {
  margin-top: 10px;
  border: 1px solid var(--dim2);
  border-radius: 10px;
  overflow: hidden;
}
.reward-ladder__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 13px;
  opacity: 0.52;
  transition: opacity 200ms var(--ease-out);
}
.reward-ladder__row + .reward-ladder__row {
  border-top: 1px solid var(--dim);
}
.reward-ladder__row--on { opacity: 1; }
.reward-ladder__pip {
  width: 20px; height: 20px; min-width: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  flex-shrink: 0;
}
.reward-ladder__pip--accent { background: var(--accent); }
.reward-ladder__pip--accent-2 {
  background: oklch(0.72 0.055 72 / 0.18);
  color: var(--accent-2);
}
.reward-ladder__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.reward-ladder__name {
  font: 600 0.78rem/1.2 var(--f-body);
  color: var(--white);
}
.reward-ladder__freq {
  font: 400 0.68rem/1.3 var(--f-body);
  color: var(--muted);
}
.reward-ladder__row--mega .reward-ladder__name { color: var(--accent-2); }

.qr-section { padding: 0 20px 20px; }

.demo-staff-hint { padding: 0 20px 16px; font: 400 0.75rem/1.4 var(--f-body); color: var(--muted); text-align: center; }
.demo-staff-hint a { color: var(--accent); text-decoration: none; }
.demo-staff-hint a:hover { text-decoration: underline; }
.qr-card {
  background: var(--surface);
  border: 1px solid var(--dim2);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.qr-card__label { font: 600 0.6rem/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.qr-card__img { display: block; width: 200px; height: 200px; border-radius: 10px; image-rendering: pixelated; }
.qr-card__hint { font: 400 0.75rem/1.4 var(--f-body); color: var(--muted); text-align: center; }

.wallet-btns { display: flex; gap: 10px; padding: 0 20px 20px; }
.wallet-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 10px;
  font: 600 0.78rem/1 var(--f-body);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid var(--dim2);
  background: var(--surface);
  color: var(--white);
  cursor: pointer;
  transition: background 140ms, border-color 140ms, opacity 120ms;
}
.wallet-btn:hover { background: var(--surface2); }
.wallet-btn:active { opacity: 0.7; }
.wallet-btn--apple { background: var(--white); color: var(--black); border-color: oklch(0.65 0 0 / 0.2); }
.wallet-btn--apple:hover { background: oklch(0.87 0 0); border-color: oklch(0.45 0 0 / 0.55); }

.email-section { padding: 0 20px 20px; }
.email-card {
  background: var(--surface);
  border: 1px solid var(--dim2);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.email-card__info { flex: 1; min-width: 0; }
.email-card__title { font: 500 0.88rem/1 var(--f-body); margin-bottom: 4px; }
.email-card__sub {
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-email {
  background: none;
  border: 1px solid var(--dim2);
  color: var(--muted);
  font: 500 0.72rem/1 var(--f-body);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0 14px;
  min-height: 44px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 140ms, border-color 140ms;
  flex-shrink: 0;
}
.btn-email:hover { color: var(--white); border-color: oklch(0.97 0.006 85 / 0.2); }

.me-section { padding: 20px 20px 0; }
.me-section-title { font: 500 1.3rem/1 var(--f-disp); letter-spacing: 0.03em; margin-bottom: 4px; }
.me-section-sub { font: 400 0.8rem/1.5 var(--f-body); color: var(--muted); margin-bottom: 16px; }

.referral-card {
  background: oklch(0.72 0.055 72 / 0.08);
  border: 1px solid oklch(0.72 0.055 72 / 0.22);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.referral-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.referral-card__info { flex: 1; }
.referral-card__title { font: 600 1rem/1.2 var(--f-body); margin-bottom: 4px; }
.referral-card__desc { font: 400 0.78rem/1.4 var(--f-body); color: var(--muted); }
.referral-card__qr { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.referral-card__qr img { display: block; width: 72px; height: 72px; image-rendering: pixelated; }

.referral-code-row { display: flex; align-items: center; gap: 10px; }
.referral-code {
  flex: 1;
  background: var(--black);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  padding: 10px 14px;
  font: 600 1.1rem/1 var(--f-disp);
  letter-spacing: 0.12em;
  color: oklch(0.80 0.055 72);
}
.btn-copy {
  height: 44px;
  padding: 0 14px;
  background: oklch(0.72 0.055 72 / 0.15);
  border: 1px solid oklch(0.72 0.055 72 / 0.28);
  border-radius: 8px;
  color: oklch(0.80 0.055 72);
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-copy:active { opacity: 0.7; }

.referral-card__stat { display: flex; gap: 20px; }
.ref-stat { flex: 1; }
.ref-stat__n { font: 600 1.5rem/1 var(--f-disp); letter-spacing: 0.01em; }
.ref-stat__label { font: 500 0.72rem/1 var(--f-body); color: var(--muted); margin-top: 3px; }

.tx-list { display: flex; flex-direction: column; margin-top: 4px; }
.tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dim);
}
.tx-row:last-child { border-bottom: none; }
.tx-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tx-icon--earned   { background: oklch(0.64 0.048 204 / 0.15); color: var(--accent); }
.tx-icon--redeem   { background: oklch(0.64 0.048 204 / 0.08); color: var(--accent); }
.tx-icon--referral { background: oklch(0.72 0.055 72 / 0.12); color: var(--accent-2); }
.tx-icon--welcome  { background: oklch(0.64 0.048 204 / 0.10); color: var(--accent); }
.tx-info { flex: 1; min-width: 0; }
.tx-title { font: 500 0.88rem/1.2 var(--f-body); }
.tx-sub { font: 400 0.72rem/1 var(--f-body); color: var(--muted); margin-top: 3px; }
.tx-delta { font: 600 1rem/1 var(--f-disp); letter-spacing: 0.02em; flex-shrink: 0; }
.tx-delta--earned   { color: var(--accent); }
.tx-delta--redeem   { color: var(--muted); }
.tx-delta--referral { color: var(--accent-2); }

.footer--me {
  margin-top: 20px;
  padding: 32px 20px 0;
  text-align: center;
  color: var(--muted);
  font: 400 0.72rem/1.5 var(--f-body);
}
.footer--me a { color: var(--muted); }

/* ── Logout link button ── */
.btn-logout {
  background: none;
  border: none;
  color: var(--muted);
  font: 400 0.72rem/1.5 var(--f-body);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 120ms;
}
.btn-logout:hover { color: var(--white); }

/* ── Referral share button ── */
.btn-share {
  height: 44px;
  padding: 0 14px;
  background: oklch(0.72 0.055 72 / 0.15);
  border: 1px solid oklch(0.72 0.055 72 / 0.28);
  border-radius: 8px;
  color: oklch(0.80 0.055 72);
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: opacity 120ms;
}
.btn-share:active { opacity: 0.7; }

/* ── History link button ── */
.btn-history {
  display: block;
  margin: 20px 20px 20px;
  padding: 13px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: color 140ms, border-color 140ms;
}
.btn-history:hover { color: var(--white); border-color: oklch(0.97 0.006 85 / 0.20); }

/* ── Enrollment confirm (enrollment/confirm.html) ── */
.page--confirm {
  max-width: 420px;
  padding: max(56px, env(safe-area-inset-top)) 24px 56px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Pop animation only on confirm — earned stamps were just added */
.page--confirm .stamp--earned {
  animation: stamp-pop 240ms var(--ease-out) both;
}
@keyframes stamp-pop {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .page--confirm .stamp--earned { animation: none; } }
.logo--confirm {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 36px;
  mix-blend-mode: var(--logo-blend, screen);
  opacity: 0.9;
}
.welcome-title {
  font: 600 clamp(28px, 7.5vw, 36px)/1.05 var(--f-disp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.welcome-sub {
  font: 400 14px/1.5 var(--f-body);
  color: var(--muted);
  margin-bottom: 40px;
}
.pass-preview {
  width: 100%;
  background: var(--surface);
  border: 1px solid oklch(0.97 0.010 75 / 0.14);
  border-radius: 10px;
  padding: 20px 20px 16px;
  margin-bottom: 10px;
}
.pass-preview__eyebrow {
  font: 600 10px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.pass-preview__tally {
  font: 400 12px/1 var(--f-body);
  color: var(--muted);
  text-align: right;
  margin-top: 12px;
}
.pass-preview__tally strong { color: var(--white); font-weight: 600; }
.pass-note {
  font: 400 12px/1.5 var(--f-body);
  color: oklch(0.72 0.007 85 / 0.55);
  text-align: center;
  margin-bottom: 36px;
}
.email-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: oklch(0.64 0.048 204 / 0.08);
  border: 1px solid oklch(0.64 0.048 204 / 0.20);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 28px;
  text-align: left;
}
.email-notice__icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.email-notice__copy { font: 400 13px/1.55 var(--f-body); color: var(--muted); }
.email-notice__copy strong { color: var(--white); font-weight: 600; }
.btn-card {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: var(--black);
  border: none;
  border-radius: 6px;
  font: 600 12px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 140ms, color 140ms, transform 80ms;
}
.btn-card:hover { background: var(--accent-deep); color: var(--black); }
.btn-card:active { transform: scale(0.985); }

/* ── Member history page (member/history.html) ── */
.history-page {
  max-width: 430px;
  margin: 0 auto;
  padding-bottom: max(48px, env(safe-area-inset-bottom));
}
.history-header {
  padding: max(20px, env(safe-area-inset-top)) 20px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--dim);
  margin-bottom: 4px;
}
.history-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--dim2);
  color: var(--muted);
  text-decoration: none;
  flex-shrink: 0;
  font-size: 1rem;
  transition: color 120ms, background 120ms;
}
.history-back:hover { color: var(--white); background: var(--surface2); }
.history-title {
  font: 600 1.1rem/1 var(--f-disp);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.history-list {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.btn-add-wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 40px);
  margin: -8px 20px 16px;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--dim2);
  border-radius: 8px;
  color: var(--muted);
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.btn-add-wallet:hover { color: var(--white); border-color: oklch(0.97 0.006 85 / 0.20); }
.btn-add-wallet--google { margin-top: 8px; }
.btn-load-more {
  display: block;
  width: calc(100% - 40px);
  margin: 8px 20px 0;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--dim2);
  border-radius: 8px;
  color: var(--muted);
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.btn-load-more:hover { color: var(--white); border-color: oklch(0.97 0.006 85 / 0.20); }
.btn-load-more.htmx-request { opacity: 0.5; cursor: wait; }
.history-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font: 400 0.85rem/1.5 var(--f-body);
}

/* ── Social login ── */
.oauth-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  background: var(--surface);
  border: 1px solid var(--dim2);
  border-radius: 10px;
  color: var(--white);
  font: 600 0.83rem/1 var(--f-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.btn-oauth:active { background: var(--surface2); }
.btn-oauth svg { flex-shrink: 0; }
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: var(--muted);
  font: 400 0.72rem/1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.oauth-divider::before,
.oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: oklch(0.72 0.007 85 / 0.25);
}

/* ── Member profile section ───────────────────────────────────────────────── */
.profile-card {
  background: oklch(0.97 0.006 85 / 0.04);
  border: 1px solid var(--dim);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.profile-fields { display: flex; flex-direction: column; }
.profile-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--dim);
}
.profile-field:last-child { border-bottom: none; }
.profile-key {
  font: 600 0.65rem/1 var(--f-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.profile-val {
  font: 400 0.84rem/1.3 var(--f-body);
  color: var(--white);
  text-align: right;
  word-break: break-all;
}
.profile-val--empty { color: oklch(0.72 0.007 85 / 0.35); font-style: italic; }

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.btn-profile-action {
  width: 100%;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--dim2);
  border-radius: 8px;
  color: var(--muted);
  font: 500 0.78rem/1 var(--f-body);
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
  padding: 0 14px;
}
.btn-profile-action:hover { border-color: var(--accent); color: var(--accent); }

.profile-form-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-profile-cancel {
  background: transparent;
  border: none;
  color: var(--muted);
  font: 400 0.80rem/1 var(--f-body);
  cursor: pointer;
  padding: 10px 0;
  text-align: center;
  transition: color 120ms;
}
.btn-profile-cancel:hover { color: var(--white); }

.profile-toast {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 0.78rem/1 var(--f-body);
  color: var(--accent);
  margin-bottom: 10px;
}

.profile-email-hint {
  font: 400 0.80rem/1.5 var(--f-body);
  color: var(--muted);
  margin: 0 0 14px;
}
.profile-email-sent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: oklch(0.42 0.06 204 / 0.12);
  border: 1px solid var(--accent-bd);
  border-radius: 10px;
  padding: 16px;
  color: var(--white);
}
.profile-email-sent svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.profile-email-sent__title {
  font: 600 0.88rem/1 var(--f-body);
  margin-bottom: 6px;
  color: var(--accent);
}
.profile-email-sent__sub {
  font: 400 0.78rem/1.5 var(--f-body);
}
.profile-email-sent__sub strong { color: var(--accent); font-weight: 600; }

/* ── Email confirm page (member/email_confirm.html) ── */
.confirm-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px 32px;
  gap: 0;
}
.confirm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.confirm-icon--ok  { background: oklch(0.42 0.06 204 / 0.18); color: var(--accent); }
.confirm-icon--err { background: var(--danger-bg); color: var(--danger-tx); }
.confirm-title {
  font: 600 1.4rem/1.1 var(--f-disp);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.confirm-sub {
  font: 400 0.88rem/1.55 var(--f-body);
  color: var(--muted);
  margin-bottom: 28px;
  max-width: 320px;
}
.confirm-sub strong { color: var(--white); font-weight: 600; }

/* ── Login page (member/login.html) ─────────────────────────────────────── */
.page--login {
  max-width: 420px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 48px;
}
.login__title {
  font: 600 1.5rem/1.1 var(--f-disp);
  letter-spacing: 0.02em;
  margin-top: 8px;
}
.login__desc {
  font: 400 0.83rem/1.55 var(--f-body);
  color: var(--muted);
  max-width: 280px;
  margin-top: 4px;
}
.login__card {
  background: var(--surface);
  border: 1px solid var(--dim2);
  border-radius: 14px;
  padding: 28px 24px;
}
.login__success {
  text-align: center;
  padding: 8px 0 4px;
}
.login__success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: oklch(0.64 0.048 204 / 0.12);
  border: 1px solid oklch(0.64 0.048 204 / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--accent);
}
.login__success-title {
  font: 600 1.1rem/1.2 var(--f-disp);
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}
.login__success-desc {
  font: 400 0.83rem/1.55 var(--f-body);
  color: var(--muted);
  margin: 0;
}
.login__success-desc strong {
  color: var(--white);
  font-weight: 600;
}
.login__footer {
  text-align: center;
  margin-top: 20px;
  font: 400 0.8rem/1 var(--f-body);
  color: var(--muted);
}
.login__footer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Install banner (PWA Add to Home Screen) ---------- */

/* Banner is its own dark UI surface — colors are hardcoded so contrast
   stays high on light-themed tenants (where page tokens would otherwise
   land on mid-grey values against the dark background). */
.install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #f3f3f3;
  font-size: 14px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.install-banner--visible {
  opacity: 1;
  transform: translateY(0);
}

.install-banner[hidden] {
  display: none;
}

.install-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent, #7cbc6a);
  flex: 0 0 auto;
}

.install-banner__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.install-banner__title {
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
}

.install-banner__subtitle {
  color: rgba(243, 243, 243, 0.7);
  font-size: 11px;
}

.install-banner__cta {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #7cbc6a);
  color: var(--accent-fg, #0d0d0d);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.install-banner__cta:hover { filter: brightness(1.05); }
.install-banner__cta:active { filter: brightness(0.95); }

.install-banner__dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(243, 243, 243, 0.6);
  cursor: pointer;
}

.install-banner__dismiss:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }

@media (min-width: 640px) {
  .install-banner {
    left: auto;
    right: 24px;
    max-width: 380px;
  }
}

/* ---------- iOS install instructions modal ---------- */

.install-modal {
  max-width: 320px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px;
  background: #181818;
  color: #f3f3f3;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.install-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.install-modal__title {
  margin: 0 0 12px 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.install-modal__steps {
  margin: 0 0 16px 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(243, 243, 243, 0.92);
}

.install-modal__steps li {
  margin-bottom: 6px;
}

.install-modal__share-icon {
  display: inline-flex;
  vertical-align: text-bottom;
  margin-right: 4px;
  color: var(--accent, #7cbc6a);
}

.install-modal__close {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #7cbc6a);
  color: var(--accent-fg, #0d0d0d);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}