:root {
  --black: #0c0c0b;
  --black-soft: #171613;
  --gold: #cda85f;
  --gold-light: #ecd79f;
  --cream: #f4f0e7;
  --paper: #fbfaf6;
  --ink: #24211d;
  --muted: #777168;
  --line: rgba(77, 65, 47, .15);
  --shadow: 0 24px 60px rgba(21, 17, 11, .12);
  --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Serif SC", "Songti SC", "Microsoft YaHei", serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.page-loader {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; gap: 18px;
  color: var(--gold-light); background: var(--black); text-align: center;
  letter-spacing: .35em; transition: opacity .35s ease, visibility .35s ease;
}
.page-loader img { width: 82px; margin: auto; animation: breathe 1.8s ease-in-out infinite; }
.page-loader.is-hidden { opacity: 0; visibility: hidden; }
@keyframes breathe { 50% { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(205,168,95,.5)); } }

.site-header {
  position: sticky; top: 0; z-index: 90; height: 82px; padding: 0 clamp(22px, 4vw, 68px);
  display: grid; grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr); align-items: center;
  color: #f5efe2; background: rgba(11, 11, 10, .96); border-bottom: 1px solid rgba(205,168,95,.2);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; }
.brand img { width: 45px; height: 45px; object-fit: contain; }
.brand b { display: block; font-size: 18px; font-weight: 500; letter-spacing: .18em; }
.brand small { display: block; margin-top: 4px; color: #9f978a; font-size: 8px; letter-spacing: .16em; }
.desktop-nav { display: flex; align-items: stretch; align-self: stretch; }
.desktop-nav a { position: relative; display: grid; place-items: center; padding: 0 19px; font-size: 14px; letter-spacing: .08em; color: #c9c2b7; }
.desktop-nav a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s; }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--gold-light); }
.desktop-nav a.is-active::after { transform: scaleX(1); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.store-link, .account-button { border: 0; background: transparent; color: #d8d1c5; padding: 10px 12px; cursor: pointer; font-size: 13px; }
.account-button { color: var(--black); background: var(--gold); padding-inline: 18px; }

#app-view { min-height: calc(100vh - 180px); outline: 0; }
.page-shell { width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 72px 0 100px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 10px; color: #a98645; font-family: Arial, sans-serif; font-size: 11px; letter-spacing: .22em; }
.page-heading h1, .section-heading h2 { margin: 0; font-weight: 400; letter-spacing: .08em; }
.page-heading p { max-width: 620px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; }

.hero { position: relative; overflow: hidden; color: white; background: #0a0908; min-height: 560px; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.hero::before { width: 480px; height: 480px; right: -80px; top: -140px; background: radial-gradient(circle, rgba(207,164,79,.32), transparent 67%); }
.hero::after { width: 650px; height: 240px; left: -160px; bottom: -160px; background: radial-gradient(ellipse, rgba(114,77,28,.25), transparent 70%); }
.hero-inner { position: relative; z-index: 1; width: min(1220px, calc(100% - 48px)); margin: auto; padding: 72px 0 78px; display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(48px, 8vw, 110px); align-items: center; }
.hero-copy .eyebrow { color: var(--gold-light); }
.hero-copy h1 { margin: 0; font-size: clamp(40px, 5vw, 72px); font-weight: 300; letter-spacing: .1em; line-height: 1.15; }
.hero-copy h1 span { display: block; color: var(--gold); font-family: Georgia, serif; font-size: .42em; font-style: italic; letter-spacing: .08em; margin-top: 12px; }
.hero-copy > p:not(.eyebrow) { max-width: 500px; margin: 28px 0; color: #bab2a6; font-size: 15px; line-height: 2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.primary-button, .outline-button, .text-button {
  min-height: 44px; border: 1px solid var(--gold); border-radius: 0; padding: 11px 22px;
  color: #18140e; background: var(--gold); cursor: pointer; letter-spacing: .08em; transition: .2s ease;
}
.primary-button:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-1px); }
.outline-button { color: var(--gold-light); background: transparent; }
.outline-button:hover { color: var(--black); background: var(--gold-light); }
.text-button { min-height: auto; padding: 0; border: 0; color: #8a6b32; background: transparent; }

.member-card {
  --card-metal: var(--gold);
  position: relative; aspect-ratio: 1.75 / 1; width: min(100%, 590px); justify-self: end;
  overflow: hidden; border: 1px solid color-mix(in srgb, var(--card-metal) 42%, transparent); border-radius: 14px;
  color: var(--card-metal); background:
    linear-gradient(125deg, rgba(255,255,255,.05), transparent 34%),
    radial-gradient(circle at 85% 28%, color-mix(in srgb, var(--card-metal) 13%, transparent), transparent 32%),
    linear-gradient(145deg, #151410, #050505 62%, #17140e);
  box-shadow: 0 32px 75px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.025);
}
.member-card::before { content: "JB"; position: absolute; right: 5%; bottom: -12%; color: color-mix(in srgb, var(--card-metal) 9%, transparent); font: 700 170px/1 Georgia, serif; letter-spacing: -.08em; }
.member-card.silver { --card-metal: #d9dde0; }
.member-card.diamond { --card-metal: #d9eef3; }
.member-card.regular { --card-metal: #cda85f; }
.member-card-content { position: absolute; inset: 0; padding: clamp(25px, 4.2vw, 48px); display: flex; flex-direction: column; }
.card-top { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.card-level-cn { font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .12em; }
.card-level-en, .card-no { font-family: Arial, sans-serif; font-size: 11px; letter-spacing: .18em; opacity: .82; }
.card-no { text-align: right; }
.card-name { margin-top: 10%; color: #f4f0e8; font-size: clamp(22px, 2.8vw, 36px); }
.card-script { margin-top: 9%; font: italic clamp(22px, 2.7vw, 34px)/1 Georgia, serif; letter-spacing: .08em; }
.card-progress { margin-top: auto; color: #aaa39a; font-size: 13px; }

.home-content { width: min(1220px, calc(100% - 48px)); margin: auto; padding: 72px 0 100px; }
.section-heading { text-align: center; margin-bottom: 36px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-heading h2 { font-size: clamp(27px, 3vw, 38px); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.benefit-card { position: relative; min-height: 250px; padding: 30px; overflow: hidden; color: #f5efe5; background: linear-gradient(145deg, #151410, #090909); border: 1px solid rgba(205,168,95,.18); transition: transform .25s, border-color .25s; }
.benefit-card:hover { transform: translateY(-5px); border-color: rgba(205,168,95,.62); }
.benefit-card::after { content: attr(data-mark); position: absolute; right: -8px; bottom: -34px; color: rgba(205,168,95,.075); font: 110px/1 Georgia, serif; }
.benefit-card i { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--gold); color: var(--gold); font-style: normal; font-size: 21px; }
.benefit-card h3 { margin: 42px 0 8px; font-size: 20px; font-weight: 400; letter-spacing: .1em; }
.benefit-card p { margin: 0; color: #989186; font-family: Arial, "Microsoft YaHei", sans-serif; font-size: 11px; letter-spacing: .12em; }

.account-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 26px 0 72px; border: 1px solid var(--line); background: white; }
.account-stat { padding: 24px 18px; text-align: center; border-right: 1px solid var(--line); }
.account-stat { border-top: 0; border-bottom: 0; border-left: 0; background: white; cursor: pointer; }
.account-stat:hover { background: #f8f5ed; }
.account-stat.is-active {
  color: #7f5c21;
  background: #f5efe3;
  box-shadow: inset 0 -2px 0 #b78b3c;
}
.account-stat:last-child { border: 0; }
.account-stat b { display: block; margin-bottom: 6px; color: #9b7532; font-size: 25px; font-weight: 400; }
.account-stat span { color: var(--muted); font-size: 12px; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card { display: flex; flex-direction: column; min-width: 0; background: white; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #eee9df; }
.product-image img { width: 100%; height: 100%; padding: 7%; object-fit: contain; object-position: center; transition: transform .45s; }
.product-card:hover .product-image img { transform: scale(1.025); }
.product-card--samples .product-image {
  background: linear-gradient(145deg, #f8f4ec, #e9e1d4);
}
.product-card--samples .product-image img {
  padding: 5%;
  object-fit: contain;
  object-position: center;
}
.product-card--samples .product-image::after { display: none; }
.product-stock { position: absolute; left: 14px; top: 14px; padding: 5px 9px; color: white; background: rgba(13,13,12,.82); font-size: 11px; letter-spacing: .08em; }
.product-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.product-body h3 { margin: 0 0 10px; font-size: 18px; font-weight: 400; line-height: 1.55; }
.product-body p { min-height: 3em; margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.product-market-price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 13px; color: #d1aa62; font-size: 13px; line-height: 1.4; }
.product-market-price small { color: #716b63; font-size: 9px; letter-spacing: .08em; }
.product-meta { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.product-price { color: #9a712b; font-size: 17px; }
.product-price small { display: block; color: #989187; font-size: 10px; margin-bottom: 3px; }
.product-action { border: 0; border-bottom: 1px solid #9a712b; padding: 4px 0; color: #7d5d25; background: transparent; cursor: pointer; }
.product-action:disabled { color: #a8a197; border-color: #cfc9bf; cursor: not-allowed; }

.subsection { margin-top: 78px; padding-top: 58px; border-top: 1px solid var(--line); }
.coupon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.coupon-card { display: grid; grid-template-columns: minmax(120px, .38fr) 1fr; min-height: 164px; overflow: hidden; border: 1px solid var(--line); background: white; }
.coupon-card > div { position: relative; display: grid; place-content: center; gap: 6px; padding: 24px 18px; color: #1a160f; background: linear-gradient(145deg, #e7ca8a, #b78b3c); text-align: center; }
.coupon-card > div::before, .coupon-card > div::after { content: ""; position: absolute; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); }
.coupon-card > div::before { top: -7px; }
.coupon-card > div::after { bottom: -7px; }
.coupon-card > div small { font: 9px/1.5 Arial, sans-serif; letter-spacing: .12em; }
.coupon-card > div b { font-size: 25px; font-weight: 400; }
.coupon-card > section { display: grid; align-content: center; padding: 24px; }
.coupon-card h3 { margin: 0 0 7px; font-size: 17px; font-weight: 400; }
.coupon-card p { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.coupon-card button { justify-self: start; border: 0; border-bottom: 1px solid #9a712b; padding: 3px 0; color: #7d5d25; background: transparent; cursor: pointer; }
.coupon-card button:disabled { color: #aaa49b; border-color: #d2cdc4; cursor: default; }
.coupon-owned-state { justify-self: start; color: #8a6a31; font-size: 12px; letter-spacing: .08em; }

.benefit-banner { position: relative; min-height: 290px; margin-bottom: 42px; overflow: hidden; color: white; background: #0e0e0d; }
.benefit-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .47; }
.benefit-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.92), rgba(5,5,5,.18)); }
.benefit-banner > div { position: relative; z-index: 1; width: min(520px, 75%); padding: 62px; }
.benefit-banner small { color: var(--gold-light); font: 10px/1.5 Arial, sans-serif; letter-spacing: .22em; }
.benefit-banner h2 { margin: 14px 0; font-size: 30px; font-weight: 400; letter-spacing: .1em; }
.benefit-banner p { margin: 0; color: #cec7ba; font-size: 13px; line-height: 1.8; }

.empty-state, .error-state { padding: 70px 24px; text-align: center; border: 1px solid var(--line); background: white; }
.empty-state i, .error-state i { display: block; color: var(--gold); font: 44px/1 Georgia, serif; }
.empty-state h3, .error-state h3 { margin: 18px 0 8px; font-weight: 400; }
.empty-state p, .error-state p { color: var(--muted); font-size: 13px; }

.dashboard-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: start; }
.panel { background: white; border: 1px solid var(--line); padding: 28px; }
.panel h2, .panel h3 { margin: 0 0 22px; font-weight: 400; letter-spacing: .06em; }
.menu-list { display: grid; }
.menu-list a, .menu-list button { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; text-align: left; }
.menu-list a:last-child, .menu-list button:last-child { border-bottom: 0; }
.menu-list em { color: var(--gold); font-style: normal; }
.menu-list a.is-active { color: #8b6627; }
.profile-edit-button { margin-top: 22px; color: #745721; border-color: #b9924d; }
.profile-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.profile-line { padding: 18px; background: white; }
.profile-line span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.profile-line b { font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }

.tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.tabs button { border: 1px solid var(--line); padding: 9px 16px; color: var(--muted); background: white; cursor: pointer; }
.tabs button.is-active { color: white; background: var(--black); border-color: var(--black); }
.record-list { display: grid; gap: 12px; }
.record-card { padding: 20px; border: 1px solid var(--line); background: white; }
.record-card-top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.record-card h3 { margin: 0; font-size: 15px; font-weight: 400; }
.record-card time { color: var(--muted); font-size: 12px; }
.record-card-body { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.record-value { color: #96702d; font-size: 18px; white-space: nowrap; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 38px clamp(24px, 5vw, 72px); color: #938b80; background: var(--black); font-size: 12px; }
.site-footer > div { display: flex; align-items: center; gap: 14px; }
.site-footer img { width: 40px; }
.site-footer p { margin: 0; }
.mobile-nav { display: none; }

.modal-root { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(5,5,5,.72); backdrop-filter: blur(8px); }
.modal-root.is-open { display: flex; }
html.has-locked-modal,
body.has-locked-modal { overflow: hidden; overscroll-behavior: none; }
.modal-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 40px; background: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.modal-card.modal-wide { width: min(860px, 100%); }
.modal-close { position: absolute; top: 12px; right: 15px; width: 38px; height: 38px; border: 0; color: #6e685f; background: transparent; font-size: 29px; cursor: pointer; }
.vip-login-guide{width:min(560px,100%);padding:48px 44px;text-align:left;border-color:rgba(211,175,104,.42);background:linear-gradient(145deg,#12110f,#090909)}
.vip-login-guide h2{margin:14px 0 16px;color:#f4efe7;font-family:var(--serif);font-size:clamp(28px,3vw,42px);font-weight:400;letter-spacing:.08em}
.vip-login-guide>p:not(.eyebrow){max-width:450px;margin:0;color:#c9c0b3;font-size:16px;line-height:1.9}
.vip-login-guide__actions{margin-top:28px}
.vip-login-guide__actions .primary-button{min-width:220px}
.vip-login-guide>small{display:block;margin-top:18px;color:#81796e;line-height:1.7}
.login-card { text-align: center; }
.login-logo { width: 76px; margin: 0 auto 18px; }
.login-card h2 { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: .12em; }
.modal-intro { margin: 16px auto 26px; max-width: 410px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.form-stack { display: grid; gap: 17px; text-align: left; }
.form-stack label > span { display: block; margin-bottom: 8px; font-size: 12px; color: #5c574f; }
.form-stack input, .form-stack select, .form-stack textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #d8d1c5; border-radius: 0; color: var(--ink); background: white; outline: none; }
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(205,168,95,.1); }
.birthday-selects { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
.birthday-select-note { display: block; margin-top: 7px; color: #777169; font-size: 10px; line-height: 1.6; }
.code-row { display: grid; grid-template-columns: 1fr auto; }
.code-row button { min-width: 132px; border: 1px solid var(--black); color: white; background: var(--black); cursor: pointer; }
.code-row button:disabled { color: #8d867c; background: #e1ddd5; border-color: #e1ddd5; }
.form-note { margin: 18px 0 0; color: #9a948b; font-size: 11px; line-height: 1.7; }
.modal-title { margin: 0 0 8px; font-size: 25px; font-weight: 400; }
.modal-product { display: grid; grid-template-columns: 210px 1fr; gap: 28px; }
.modal-product-image { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: #eee9df; }
.modal-product-image img { width: 100%; height: 100%; padding: 7%; object-fit: contain; object-position: center; }
.modal-product-copy h2 { margin: 0 0 10px; font-weight: 400; }
.modal-product-copy p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.address-list { display: grid; gap: 10px; margin: 20px 0; }
.address-option { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); background: white; }
.address-option p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.address-create { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.field-title { display: block; margin: 24px 0 10px; color: #4f4941; font-size: 13px; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.three-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

.toast { position: fixed; left: 50%; bottom: 38px; z-index: 300; max-width: min(460px, calc(100% - 40px)); padding: 12px 18px; color: white; background: rgba(18,17,15,.94); box-shadow: var(--shadow); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: .25s; text-align: center; font-size: 13px; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.skeleton { position: relative; overflow: hidden; min-height: 180px; background: #e9e5dc; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.25s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; height: 70px; padding-inline: 20px; }
  .desktop-nav { display: none; }
  .brand b { font-size: 15px; }
  .brand small, .store-link { display: none; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 52px; }
  .hero-copy { text-align: center; }
  .hero-copy > p:not(.eyebrow) { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .member-card { justify-self: center; width: min(580px, 100%); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { padding-bottom: 0; }
  .site-header { height: 62px; }
  .brand img { width: 38px; height: 38px; }
  .brand span { display: none; }
  .account-button { padding: 8px 12px; font-size: 12px; }
  .page-shell, .home-content, .hero-inner { width: min(100% - 28px, 620px); }
  .page-shell { padding: 38px 0 70px; }
  .page-heading { align-items: start; flex-direction: column; margin-bottom: 24px; }
  .page-heading h1 { font-size: 27px; }
  .hero { min-height: auto; }
  .hero-inner { padding: 44px 0 50px; gap: 38px; }
  .hero-copy h1 { font-size: 38px; }
  .hero-copy > p:not(.eyebrow) { margin: 20px auto 24px; font-size: 13px; }
  .member-card { border-radius: 10px; }
  .member-card-content { padding: 22px; }
  .card-name { margin-top: 8%; font-size: 22px; }
  .card-script { margin-top: 7%; font-size: 22px; }
  .card-progress { font-size: 11px; }
  .home-content { padding: 50px 0 72px; }
  .benefit-grid { gap: 10px; }
  .benefit-card { min-height: 186px; padding: 20px; }
  .benefit-card i { width: 38px; height: 38px; font-size: 17px; }
  .benefit-card h3 { margin-top: 30px; font-size: 17px; }
  .benefit-card p { font-size: 9px; }
  .account-strip { grid-template-columns: repeat(2, 1fr); margin-bottom: 48px; }
  .account-stat { border-bottom: 1px solid var(--line); }
  .account-stat:nth-child(2) { border-right: 0; }
  .account-stat:nth-child(n+3) { border-bottom: 0; }
  .product-grid { gap: 10px; }
  .product-body { padding: 15px; }
  .product-body h3 { font-size: 15px; }
  .product-body p { min-height: 0; font-size: 11px; }
  .product-meta { align-items: start; flex-direction: column; }
  .profile-lines { grid-template-columns: 1fr; }
  .coupon-grid { grid-template-columns: 1fr; }
  .coupon-card { grid-template-columns: 112px 1fr; min-height: 142px; }
  .coupon-card > div, .coupon-card > section { padding: 18px 14px; }
  .benefit-banner { min-height: 250px; }
  .benefit-banner > div { width: 86%; padding: 42px 24px; }
  .benefit-banner h2 { font-size: 23px; }
  .record-card-top, .record-card-body { grid-template-columns: 1fr; display: grid; gap: 7px; }
  .site-footer { display: none; }
  .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; height: calc(62px + env(safe-area-inset-bottom)); padding: 4px 8px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); color: #9c9589; background: rgba(12,12,11,.97); border-top: 1px solid rgba(205,168,95,.2); backdrop-filter: blur(14px); }
  .mobile-nav a { display: grid; place-content: center; gap: 2px; text-align: center; font-size: 10px; }
  .mobile-nav i { color: #8b806e; font-style: normal; font-size: 18px; line-height: 1; }
  .mobile-nav a.is-active, .mobile-nav a.is-active i { color: var(--gold-light); }
  .modal-root { align-items: end; padding: 0; }
  .modal-card { width: 100%; max-height: 91vh; padding: 34px 20px calc(26px + env(safe-area-inset-bottom)); }
  .login-card { border-radius: 0; }
  .code-row button { min-width: 116px; font-size: 12px; }
  .modal-product { grid-template-columns: 110px 1fr; gap: 16px; }
  .two-cols, .three-cols { grid-template-columns: 1fr; }
  .toast { bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* 2026-10-07: tier previews and restrained, explicit privilege actions. */
.collection-heading.has-level-switch {
  grid-template-columns: auto minmax(120px, 1fr) auto;
}
.collection-heading.has-level-switch > span { grid-column: 2; }
.privilege-level-stage {
  position: relative;
}
.privilege-switch-guide {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0 0 24px;
}
.privilege-level-controls {
  position: static;
  z-index: 8;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  transform: none;
  pointer-events: auto;
}
.privilege-level-arrow {
  position: static;
  z-index: 9;
  width: 36px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid rgba(115,88,47,.28);
  border-radius: 0;
  color: #c19b58;
  background: rgba(10, 9, 8, .94);
  box-shadow: none;
  font: 400 27px/1 Georgia, serif;
  cursor: pointer;
  pointer-events: auto;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.privilege-level-arrow-placeholder {
  display: block;
  width: 36px;
  height: 50px;
}
.privilege-level-arrow:hover,
.privilege-level-arrow:focus-visible {
  color: #f0d394;
  border-color: rgba(193,155,88,.58);
  background: rgba(207,171,104,.055);
  outline: none;
  transform: translateY(-2px) scale(1.035);
}
.is-coupon-stage > .privilege-level-controls,
.birthday-level-stage > .privilege-level-controls,
.annual-level-stage > .privilege-level-controls {
  position: static;
  top: auto;
}
.privilege-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #8f8679;
  font-size: 10px;
  letter-spacing: .1em;
  pointer-events: none;
}
.privilege-swipe-hint span {
  position: relative;
  width: 44px;
  height: 12px;
  border-bottom: 1px solid rgba(193,155,88,.32);
}
.privilege-swipe-hint span::before,
.privilege-swipe-hint span::after {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-bottom: 1px solid rgba(193,155,88,.58);
}
.privilege-swipe-hint span::before { left: 0; border-left: 1px solid rgba(193,155,88,.58); transform: rotate(45deg); }
.privilege-swipe-hint span::after { right: 0; border-right: 1px solid rgba(193,155,88,.58); transform: rotate(-45deg); }
.privilege-swipe-hint i {
  position: absolute;
  left: 4px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c19b58;
  opacity: .72;
  animation: privilegeSwipeGuide 2.4s ease-in-out infinite;
}
.privilege-swipe-hint em { font-style: normal; }
.privilege-coupon-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
}
.privilege-coupon-heading h2 { margin: 0; }
.privilege-switch-zone { position: relative; }
.privilege-level-results.is-entering {
  animation: privilegeResultsIn .2s cubic-bezier(.22,1,.36,1) both;
  will-change: opacity, transform;
}
.product-action,
.coupon-card button {
  min-height: 36px;
  padding: 8px 15px;
  border: 1px solid rgba(205,168,95,.58);
  color: #dec17e;
  background: rgba(205,168,95,.07);
  font-size: 12px;
  letter-spacing: .06em;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.product-action:hover,
.coupon-card button:hover {
  color: #17120b;
  border-color: #d2ad65;
  background: #d2ad65;
}
.product-action:disabled,
.coupon-card button:disabled {
  color: #827c73;
  border-color: rgba(152,145,135,.28);
  background: rgba(255,255,255,.025);
}
.level-requirement-modal { max-width: 520px; text-align: center; }
.level-requirement-modal .eyebrow { margin-bottom: 12px; }
.level-requirement-modal h2 { margin: 0 0 15px; color: #eee7dc; font-weight: 300; letter-spacing: .1em; }
.level-requirement-modal > p:not(.eyebrow) { margin: 0 auto 28px; color: #9b948a; line-height: 1.9; }
.point-redemption-success-modal h2 { font-size: clamp(30px, 3vw, 38px); line-height: 1.35; }
.point-redemption-success-modal > p:not(.eyebrow) { font-size: 14px; line-height: 1.75; }
.level-requirement-logo {
  display: block;
  width: 86px;
  height: auto;
  margin: 4px auto 24px;
  object-fit: contain;
}
.level-requirement-actions { display: flex; justify-content: center; gap: 12px; }
.level-requirement-actions .primary-button,
.level-requirement-actions .outline-button { min-width: 148px; }
@keyframes privilegeNextHint {
  0%, 72%, 100% { transform: translateX(0); box-shadow: 0 0 0 rgba(205,168,95,0); }
  82% { transform: translateX(3px); box-shadow: 0 0 18px rgba(205,168,95,.18); }
  90% { transform: translateX(0); }
}
@keyframes privilegeSwipeGuide {
  0%, 100% { transform: translateX(0); opacity: .32; }
  45%, 55% { transform: translateX(28px); opacity: .9; }
}
@keyframes privilegeResultsIn {
  from { opacity: .68; transform: translateX(var(--privilege-switch-offset, 7px)); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 680px) {
  .privilege-page { padding-top: 0; }
  .privilege-coupon-heading { align-items: center; }
  .privilege-level-stage { width: calc(100% - 28px); margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; box-sizing: border-box; }
  .privilege-level-stage.is-coupon-stage { width: calc(100% - 28px); padding-right: 0; padding-left: 0; }
  .privilege-level-controls { top: 50%; }
  .privilege-level-arrow { top: -23px; width: 30px; height: 46px; font-size: 25px; background: rgba(10, 9, 8, .96); }
  .privilege-level-arrow.is-previous { left: -15px; }
  .privilege-level-arrow.is-next { right: -15px; }
  .privilege-level-stage.is-coupon-stage .privilege-level-arrow.is-previous { left: -15px; }
  .privilege-level-stage.is-coupon-stage .privilege-level-arrow.is-next { right: -15px; }
  .birthday-level-stage .privilege-level-arrow.is-previous,
  .annual-level-stage .privilege-level-arrow.is-previous { left: -15px; }
  .birthday-level-stage .privilege-level-arrow.is-next,
  .annual-level-stage .privilege-level-arrow.is-next { right: -15px; }
  .privilege-swipe-hint { margin-top: 0; margin-bottom: 20px; padding-right: 0; padding-left: 0; box-sizing: border-box; }
  .level-requirement-actions { flex-direction: column; }
  .level-requirement-actions .primary-button,
  .level-requirement-actions .outline-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .privilege-level-arrow.is-next,
  .privilege-switch-zone.is-switching,
  .privilege-level-results.is-entering,
  .privilege-swipe-hint i { animation: none; }
}

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

/* 2026-09-17 · JennyBrown Privilege Club / executive black-gold theme */
:root {
  --black: #070707;
  --black-soft: #11110f;
  --gold: #bd9450;
  --gold-light: #e4c684;
  --cream: #d9d1c4;
  --paper: #090909;
  --ink: #f1ede5;
  --muted: #999188;
  --line: rgba(214, 181, 116, .16);
  --shadow: 0 28px 80px rgba(0, 0, 0, .42);
}

body {
  color: var(--ink);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 3%, rgba(184, 137, 62, .09), transparent 27rem),
    radial-gradient(circle at 5% 48%, rgba(118, 83, 35, .06), transparent 30rem),
    #090909;
}

.site-header {
  color: #f6f1e7;
  background: rgba(6, 6, 6, .92);
  border-bottom-color: rgba(213, 176, 104, .18);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .22);
}
.desktop-nav a { color: #aaa39a; }
.desktop-nav a:hover, .desktop-nav a.is-active { color: #e7cb91; }
.store-link { color: #aaa197; }
.account-button { color: #11100d; background: linear-gradient(120deg, #ac813d, #e0bf78); }

#app-view { background: transparent; }
.page-shell, .home-content { position: relative; }
.page-shell::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211, 175, 103, .18), transparent);
  transform: translateX(-50%);
}
.page-heading { margin-bottom: 46px; padding-bottom: 25px; border-bottom-color: rgba(218, 184, 117, .16); }
.page-heading h1, .section-heading h2 { color: #f3eee5; font-weight: 300; }
.page-heading h1 { font-size: clamp(32px, 4vw, 52px); }
.page-heading p { color: #938d85; }
.eyebrow { color: #bc9657; }

.hero { min-height: 610px; background: #060606; }
.hero::before { background: radial-gradient(circle, rgba(190, 143, 67, .2), transparent 68%); }
.hero::after { background: radial-gradient(ellipse, rgba(117, 78, 30, .15), transparent 70%); }
.hero-inner::before {
  content: ""; position: absolute; left: -9vw; right: -9vw; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211, 174, 102, .12), transparent);
}
.hero-copy { position: relative; z-index: 1; }
.hero-copy h1 { font-weight: 200; }
.hero-copy > p:not(.eyebrow) { color: #a29a90; }
.primary-button, .outline-button { min-height: 47px; padding-inline: 25px; }
.primary-button { border-color: #c49a54; background: linear-gradient(125deg, #ad813c, #d7b66f); }
.outline-button { color: #d8ba7c; border-color: rgba(211, 174, 102, .58); }

.member-card {
  border-color: color-mix(in srgb, var(--card-metal) 36%, transparent);
  background:
    linear-gradient(114deg, rgba(255,255,255,.055), transparent 32%),
    repeating-linear-gradient(132deg, transparent 0 32px, rgba(255,255,255,.012) 33px 34px),
    radial-gradient(circle at 86% 25%, color-mix(in srgb, var(--card-metal) 12%, transparent), transparent 32%),
    linear-gradient(145deg, #151512, #040404 61%, #17140d);
  box-shadow: 0 38px 85px rgba(0,0,0,.56), inset 0 0 0 1px rgba(255,255,255,.025);
}

.home-content { padding-top: 82px; }
.club-manifesto { max-width: 760px; margin: 0 auto 94px; text-align: center; }
.club-manifesto h2 { margin: 17px 0 22px; color: #eee9e0; font-size: clamp(28px, 4vw, 48px); font-weight: 300; line-height: 1.55; letter-spacing: .09em; }
.club-manifesto h2 em { color: #c69f5c; font-family: Georgia, "Songti SC", serif; font-weight: 400; }
.club-manifesto > p:last-child { margin: 0; color: #8f8980; font-size: 14px; line-height: 2; letter-spacing: .08em; }
.section-heading { margin-bottom: 44px; }

.account-strip { border-color: var(--line); background: #0c0c0b; }
.account-stat { color: #ded8cf; border-color: var(--line); background: #0c0c0b; transition: background .2s; }
.account-stat:hover { background: #15130f; }
.account-stat b { color: #d3ae68; }
.account-stat span { color: #8e887f; }
.account-stat.is-active {
  color:#f3e6c8;
  background:linear-gradient(145deg,#332818,#211a11);
  box-shadow:inset 0 -2px 0 #c9a25c,inset 0 0 0 1px rgba(213,175,104,.24);
}
.account-stat.is-active b { color:#f3ddb0; }
.account-stat.is-active span { color:#d6c29b; }

.benefit-grid { gap: 1px; padding: 1px; background: rgba(211, 175, 104, .16); }
.benefit-card {
  min-height: 286px; padding: 31px 30px; display: flex; flex-direction: column; justify-content: space-between;
  color: #efebe4; background: linear-gradient(145deg, #11110f, #080808 72%); border: 0;
}
.benefit-card:hover { transform: none; background: linear-gradient(145deg, #17150f, #0a0a09 72%); }
.benefit-card::after { font-size: 84px; bottom: -21px; color: rgba(205,168,95,.045); }
.benefit-card__index { color: #c19a58; font: 11px/1 Arial, sans-serif; letter-spacing: .2em; }
.benefit-card > div { margin-top: auto; }
.benefit-card > div p { margin: 0 0 12px; color: #716c64; font-size: 9px; letter-spacing: .2em; }
.benefit-card h3 { margin: 0 0 12px; font-size: 20px; font-weight: 300; }
.benefit-card small { display: block; color: #948d83; font-size: 12px; line-height: 1.7; }
.benefit-card i { position: absolute; right: 28px; top: 26px; width: auto; height: auto; border: 0; color: #9d7c42; font-size: 20px; }

.privilege-page { padding-top: 62px; }
.privilege-page > .page-heading { display: none; }
.privilege-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  min-height: 430px; overflow: hidden; border: 1px solid rgba(216, 180, 108, .18);
  background:
    radial-gradient(circle at 79% 23%, rgba(190, 143, 65, .15), transparent 28rem),
    linear-gradient(132deg, #12120f, #060606 66%);
}
.privilege-hero::after {
  content: ""; position: absolute; inset: 18px; border: 1px solid rgba(220, 187, 121, .08); pointer-events: none;
}
.privilege-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 6vw, 78px); }
.privilege-index { position: absolute; top: 28px; left: clamp(42px, 6vw, 78px); color: #6e5a36; font: 10px/1 Arial, sans-serif; letter-spacing: .25em; }
.privilege-hero__copy h2 { margin: 5px 0 20px; color: #f1ece3; font-size: clamp(32px, 4vw, 54px); font-weight: 200; letter-spacing: .1em; }
.privilege-hero__copy > p:not(.eyebrow) { max-width: 590px; margin: 0; color: #989188; font-size: 14px; line-height: 2; }
.privilege-hero__visual { position: relative; min-height: 430px; overflow: hidden; border-left: 1px solid rgba(216, 180, 108, .12); }
.privilege-hero__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #090908, transparent 42%), linear-gradient(0deg, rgba(0,0,0,.28), transparent); }
.privilege-hero__visual img { width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: saturate(.7) contrast(1.08); }
.privilege-monogram { position: absolute; right: 13%; top: 50%; transform: translateY(-50%); color: rgba(213, 176, 102, .54); font: 170px/.9 Georgia, serif; }
.privilege-monogram::before { content: "JB"; position: absolute; right: 44%; top: 46%; color: rgba(224, 198, 143, .1); font-size: 72px; letter-spacing: -.12em; }
.privilege-identity { width: min(420px, 100%); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3px 22px; margin-top: 35px; padding-top: 20px; border-top: 1px solid rgba(214, 177, 105, .22); }
.privilege-identity span { color: #c7a663; font-size: 12px; letter-spacing: .13em; }
.privilege-identity b { grid-row: span 2; color: #e4d7bc; font: 300 clamp(25px, 3.5vw, 42px)/1.1 Georgia, "Songti SC", serif; }
.privilege-identity small { color: #716c64; font-size: 11px; }

.privilege-rules { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1px 0 70px; background: rgba(214, 177, 105, .13); gap: 1px; }
.privilege-rules article { display: grid; grid-template-columns: auto 1fr; gap: 18px; min-height: 142px; padding: 31px 29px; background: #0c0c0b; }
.privilege-rules article > span { color: #80663a; font: 10px/1.5 Arial, sans-serif; letter-spacing: .12em; }
.privilege-rules h3 { margin: 0 0 10px; color: #ddd7ce; font-size: 15px; font-weight: 300; letter-spacing: .08em; }
.privilege-rules p { margin: 0; color: #79746d; font-size: 12px; line-height: 1.8; }

.collection-heading { display: grid; grid-template-columns: auto 1fr; column-gap: 26px; align-items: end; margin: 0 0 34px; }
.collection-heading .eyebrow { grid-column: 1; margin-bottom: 8px; }
.collection-heading h2 { grid-column: 1; margin: 0; color: #eee9e0; font-size: clamp(25px, 3vw, 35px); font-weight: 300; letter-spacing: .08em; }
.collection-heading span { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 1px; background: linear-gradient(90deg, rgba(211,175,104,.34), transparent); }
.privilege-gate { max-width: 700px; margin: 0 auto; padding: 62px 38px; text-align: center; border: 1px solid rgba(211,175,104,.18); background: linear-gradient(145deg, #12110e, #090909); }
.privilege-gate h2 { margin: 12px 0 18px; font-size: clamp(25px, 3vw, 36px); font-weight: 300; letter-spacing: .08em; }
.privilege-gate > p:not(.eyebrow) { max-width: 520px; margin: 0 auto 27px; color: #8e887f; font-size: 13px; line-height: 1.9; }

.product-grid { gap: 18px; }
.product-card { color: #e9e4dc; border-color: rgba(210, 174, 103, .14); background: #0d0d0c; box-shadow: none; }
.product-card:hover { box-shadow: 0 25px 55px rgba(0,0,0,.45); }
.product-image { background: #151411; }
.product-image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -60px 60px -65px rgba(0,0,0,.85); pointer-events: none; }
.product-stock { color: #c9a762; background: rgba(6,6,6,.84); border: 1px solid rgba(204,166,93,.28); }
.product-body h3 { color: #e7e1d8; font-weight: 300; }
.product-body p { color: #817b73; }
.product-meta { border-top-color: rgba(210,174,103,.13); }
.product-price { color: #d1aa62; }
.product-price small { color: #716b63; }
.product-action { color: #c8a45f; border-color: #806536; }

.subsection { border-top-color: rgba(211,175,104,.16); }
.coupon-grid { gap: 14px; }
.coupon-card { border-color: rgba(211,175,104,.18); background: #0d0d0c; }
.coupon-card > div { color: #17130d; background: linear-gradient(145deg, #dfc17e, #9f7535); }
.coupon-card > div::before, .coupon-card > div::after { background: #090909; }
.coupon-card > section {
  position: relative;
  color: #e5dfd5;
  background:
    linear-gradient(112deg, rgba(205,168,95,.105) 0%, rgba(205,168,95,.035) 34%, rgba(255,255,255,.018) 58%, transparent 82%),
    linear-gradient(145deg, #171511 0%, #12110f 55%, #0d0d0c 100%);
  box-shadow: inset 1px 0 rgba(245,220,166,.07), inset 0 1px rgba(255,255,255,.018);
}
.coupon-card p { color: #827c74; }
.coupon-card button, .coupon-owned-state { color: #c49d57; }

.empty-state, .error-state { color: #ddd7cd; border-color: rgba(211,175,104,.15); background: linear-gradient(145deg, #10100e, #0a0a09); }
.empty-state p, .error-state p { color: #777169; }
.skeleton { background: #11110f; }
.skeleton::after { background: linear-gradient(90deg, transparent, rgba(211,175,104,.09), transparent); }

.panel, .record-card { color: #ddd7ce; border-color: rgba(211,175,104,.15); background: #0d0d0c; }
.menu-list a, .menu-list button { color: #d2ccc3; border-bottom-color: rgba(211,175,104,.12); }
.profile-lines { border-color: var(--line); background: var(--line); }
.profile-line { background: #0d0d0c; }
.tabs button { color: #8d877e; border-color: rgba(211,175,104,.18); background: #0d0d0c; }
.tabs button.is-active { color: #17130d; background: #c39b55; border-color: #c39b55; }
.record-card-top { border-bottom-color: rgba(211,175,104,.12); }
.record-card-body, .record-card time { color: #837d75; }
.record-value { color: #c8a15b; }

.modal-root { background: rgba(0,0,0,.82); }
.modal-card { color: #ece7df; background: #11110f; border: 1px solid rgba(211,175,104,.22); }
.modal-close { color: #a49784; }
.modal-intro, .modal-product-copy p { color: #918a81; }
.form-stack label > span, .field-title { color: #ada69c; }
.form-stack input, .form-stack select, .form-stack textarea { color: #ece7df; border-color: rgba(211,175,104,.23); background: #080808; }
.code-row button { color: #17130e; border-color: #c29a54; background: #c29a54; }
.address-option { color: #ded8cf; border-color: rgba(211,175,104,.17); background: #0b0b0a; }
.address-create { border-top-color: rgba(211,175,104,.14); }
.site-footer { border-top: 1px solid rgba(211,175,104,.13); background: #050505; }

@media (max-width: 980px) {
  .privilege-hero { grid-template-columns: 1fr .72fr; }
  .privilege-rules article { padding-inline: 21px; }
}

@media (max-width: 1320px) and (min-width: 981px) {
  .site-header { grid-template-columns: auto 1fr auto; padding-inline: 28px; }
  .brand small, .store-link { display: none; }
  .desktop-nav { justify-self: center; }
  .desktop-nav a { padding-inline: 14px; }
}

@media (max-width: 680px) {
  .page-shell { padding-top: 34px; }
  .page-shell::before { left: -14px; right: -14px; width: auto; transform: none; }
  .page-heading { margin-bottom: 25px; padding-bottom: 18px; }
  .page-heading h1 { font-size: 30px; }
  .page-heading p { font-size: 12px; line-height: 1.8; }
  .hero-inner::before { display: none; }
  .club-manifesto { margin-bottom: 62px; }
  .club-manifesto h2 { font-size: 27px; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .benefit-card { min-height: 205px; padding: 21px 18px; }
  .benefit-card h3 { font-size: 17px; }
  .benefit-card small { font-size: 10px; }
  .benefit-card i { right: 17px; top: 17px; }
  .privilege-page { width: 100%; padding-top: 32px; }
  .privilege-page > .page-heading, .privilege-page > .privilege-rules, .privilege-page > .collection-heading,
  .privilege-page > .product-grid, .privilege-page > .coupon-grid, .privilege-page > .subsection,
  .privilege-page > .privilege-gate, .privilege-page > .empty-state, .privilege-page > .error-state {
    width: calc(100% - 28px); margin-left: auto; margin-right: auto;
  }
  .privilege-hero { grid-template-columns: 1fr; min-height: 0; border-left: 0; border-right: 0; }
  .privilege-hero__copy { min-height: 390px; padding: 52px 28px 38px; }
  .privilege-index { left: 28px; top: 25px; }
  .privilege-hero__copy h2 { font-size: 37px; }
  .privilege-hero__copy > p:not(.eyebrow) { font-size: 12px; }
  .privilege-hero__visual { min-height: 210px; border-top: 1px solid rgba(216,180,108,.12); border-left: 0; }
  .privilege-hero__visual::after { background: linear-gradient(0deg, #090908, transparent 55%); }
  .privilege-monogram { right: 50%; transform: translate(50%, -50%); font-size: 130px; }
  .privilege-rules { grid-template-columns: 1fr; margin-top: 1px; margin-bottom: 52px; }
  .privilege-rules article { min-height: 0; padding: 23px 21px; }
  .collection-heading { margin-bottom: 25px; }
  .collection-heading h2 { font-size: 25px; }
  .privilege-gate { padding: 43px 22px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-body { padding: 15px 13px; }
  .product-meta { gap: 10px; }
  .coupon-card { grid-template-columns: 104px 1fr; }
  .modal-card { background: #11110f; border-left: 0; border-right: 0; border-bottom: 0; }
}

/* 2026-09-17b · typography, editorial imagery and restrained motion */
@font-face {
  font-family: "JB Playfair";
  src: url("/vip-web/assets/fonts/playfair-display.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JB Open Sans";
  src: url("/vip-web/assets/fonts/open-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "JB Open Sans";
  src: url("/vip-web/assets/fonts/open-sans-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
}
:root {
  --font-display: "JB Playfair", "Noto Serif SC", "Songti SC", STSong, SimSun, Georgia, serif;
  --font-body: "JB Open Sans", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}
body { font-family: var(--font-body); font-weight: 400; }
.brand b,
.hero-copy h1,
.card-level-cn,
.card-name,
.page-heading h1,
.section-heading h2,
.club-manifesto h2,
.privilege-hero__copy h2,
.collection-heading h2,
.privilege-gate h2,
.product-body h3,
.coupon-card h3,
.panel h2,
.panel h3,
.modal-title,
.modal-product-copy h2 { font-family: var(--font-display); }
.eyebrow,
.desktop-nav,
.card-level-en,
.card-no,
.benefit-card > div p,
.benefit-card small,
.privilege-rules,
.product-price small { font-family: var(--font-body); }

.hero-copy h1 { font-size: clamp(48px, 6vw, 82px); line-height: 1.08; letter-spacing: .065em; }
.hero-copy h1 span { font-family: "JB Playfair", Georgia, serif; font-size: .38em; }
.hero-copy > p:not(.eyebrow) { font-size: clamp(15px, 1.35vw, 18px); line-height: 1.9; }
.club-manifesto h2 { font-size: clamp(38px, 4.8vw, 62px); line-height: 1.42; letter-spacing: .035em; }
.club-manifesto h2 em { font-family: var(--font-display); }
.club-manifesto > p:last-child { font-size: 16px; line-height: 1.9; }
.section-heading h2 { font-size: clamp(36px, 4.4vw, 56px); letter-spacing: .04em; }
.page-heading h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: .035em; }
.page-heading p { font-size: 16px; line-height: 1.85; }
.privilege-hero__copy h2 { font-size: clamp(42px, 5vw, 64px); line-height: 1.08; letter-spacing: .04em; }
.privilege-hero__copy > p:not(.eyebrow) { max-width: 610px; font-size: 16px; line-height: 1.85; }
.privilege-rules h3 { font-family: var(--font-display); font-size: 18px; }
.privilege-rules p { font-size: 14px; line-height: 1.8; }
.collection-heading h2 { font-size: clamp(36px, 4.2vw, 54px); letter-spacing: .035em; }
.product-body h3 { font-size: 21px; letter-spacing: .025em; }
.product-body p { font-size: 14px; }
.coupon-card h3 { font-size: 20px; }
.coupon-card p { font-size: 14px; }

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 1.15s cubic-bezier(.22, 1, .36, 1), transform 1.15s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"] { transform: translate3d(-42px, 0, 0); }
[data-reveal="right"] { transform: translate3d(42px, 0, 0); }
[data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }

.benefit-card {
  isolation: isolate;
  min-height: 340px;
  justify-content: flex-end;
  background: #0a0a09;
}
.benefit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0a0a09 var(--benefit-image) center / cover no-repeat;
  filter: saturate(.55) contrast(1.08) brightness(.7);
  transform: scale(1.015);
  transition: filter .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.benefit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4,4,4,.08) 10%, rgba(4,4,4,.38) 46%, rgba(4,4,4,.96) 100%);
}
.benefit-card--birthday::after {
  background: radial-gradient(circle at 74% 20%, rgba(206,171,100,.21), transparent 31%), linear-gradient(180deg, rgba(4,4,4,.14), rgba(4,4,4,.52) 45%, rgba(4,4,4,.97));
}
.benefit-card--annual::before { background-position: 68% center; filter: sepia(.25) saturate(.7) contrast(1.12) brightness(.52); }
.benefit-card--annual::after {
  background: linear-gradient(135deg, rgba(186,139,62,.14), transparent 45%), linear-gradient(180deg, rgba(4,4,4,.18), rgba(4,4,4,.58) 48%, rgba(4,4,4,.98));
}
.benefit-card:hover::before { filter: saturate(.72) contrast(1.08) brightness(.82); transform: scale(1.055); }
.benefit-card > div { position: relative; margin-top: 0; }
.benefit-card > div p { color: #c5a465; }
.benefit-card h3 { font-family: var(--font-display); font-size: 26px; }
.benefit-card small { max-width: 220px; color: #b3aca2; font-size: 13px; }
.benefit-card i { z-index: 2; top: auto; bottom: 30px; color: #d0ac66; }

.privilege-hero { min-height: 500px; }
.privilege-hero::after { display: none; }
.privilege-hero__copy { padding: clamp(52px, 6.5vw, 84px); }
.privilege-hero__visual { min-height: 500px; }
.privilege-hero__visual img { opacity: .72; filter: saturate(.58) contrast(1.08) brightness(.82); }
.privilege-hero--points .privilege-hero__visual img { object-position: 58% center; }
.privilege-hero--samples .privilege-hero__visual img { object-position: 58% center; }
.privilege-hero--birthday .privilege-hero__visual img,
.privilege-hero--annual .privilege-hero__visual img { object-position: center; }
.privilege-hero__visual::after { background: linear-gradient(90deg, #090908 0%, rgba(9,9,8,.58) 18%, transparent 58%), linear-gradient(0deg, rgba(0,0,0,.34), transparent 65%); }
.privilege-index, .privilege-monogram { display: none; }

@media (max-width: 680px) {
  .hero-copy h1 { font-size: clamp(42px, 13vw, 56px); }
  .club-manifesto h2 { font-size: 34px; line-height: 1.45; }
  .club-manifesto > p:last-child { font-size: 14px; }
  .section-heading h2 { font-size: 34px; }
  .privilege-hero { min-height: 0; }
  .privilege-hero__copy { min-height: 360px; padding: 48px 28px 36px; }
  .privilege-hero__copy h2 { font-size: 43px; }
  .privilege-hero__copy > p:not(.eyebrow) { font-size: 14px; }
  .privilege-hero__visual { min-height: 245px; }
  .privilege-hero--points .privilege-hero__visual img,
  .privilege-hero--samples .privilege-hero__visual img { object-position: center; }
  .privilege-rules h3 { font-size: 17px; }
  .privilege-rules p { font-size: 13px; }
  .benefit-card { min-height: 250px; padding: 22px 18px; }
  .benefit-card h3 { font-size: 21px; }
  .benefit-card small { font-size: 11px; }
  .benefit-card i { right: 17px; bottom: 20px; }
  .product-body h3 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* 2026-09-17e · restrained warm-luxury home composition */
body {
  background:
    radial-gradient(circle at 84% 2%, rgba(196, 157, 91, .1), transparent 28rem),
    linear-gradient(180deg, #15120f 0%, #0f0e0c 72%, #0b0b0a 100%);
}
.site-header {
  background: rgba(18, 16, 13, .94);
  border-bottom-color: rgba(212, 178, 112, .16);
}
.hero {
  min-height: 500px;
  background:
    radial-gradient(circle at 78% 22%, rgba(196, 157, 91, .19), transparent 27rem),
    radial-gradient(ellipse at 14% 86%, rgba(116, 83, 49, .22), transparent 34rem),
    linear-gradient(125deg, #17140f 0%, #0f0e0c 58%, #15120e 100%);
}
.hero::before { opacity: .58; }
.hero::after { opacity: .54; }
.hero-inner {
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(44px, 6vw, 82px);
  padding: 54px 0 58px;
}
.hero-copy h1 {
  font-size: clamp(43px, 4.8vw, 64px);
  line-height: 1.08;
  letter-spacing: .06em;
}
.hero-copy h1 span {
  margin-top: 10px;
  font-size: .34em;
  letter-spacing: .06em;
}
.hero-copy > p:not(.eyebrow) {
  max-width: 455px;
  margin: 21px 0 24px;
  font-size: 14px;
  line-height: 1.86;
}
.hero-actions { gap: 10px; }
.hero .primary-button,
.hero .outline-button {
  min-height: 40px;
  padding: 9px 18px;
  font-size: 12px;
}
.hero .member-card {
  width: min(100%, 500px);
  border-radius: 11px;
  box-shadow: 0 27px 65px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.024);
}
.hero .member-card-content { padding: clamp(24px, 3.2vw, 38px); }
.hero .card-level-cn { font-size: clamp(18px, 1.8vw, 25px); }
.hero .card-name { margin-top: 8%; font-size: clamp(20px, 2.2vw, 30px); }
.hero .card-script { margin-top: 7%; font-size: clamp(19px, 2.2vw, 29px); }
.hero .card-progress { font-size: 12px; }

.home-content {
  width: min(1220px, calc(100% - 48px));
  padding: 66px 0 82px;
  color: #302a23;
  background: #ece5da;
  box-shadow: 0 0 0 100vmax #ece5da;
  clip-path: inset(0 -100vmax);
}
.home-content .account-strip {
  margin: 0 0 58px;
  border-color: rgba(95, 76, 47, .14);
  background: rgba(255,255,255,.48);
}
.home-content .account-stat {
  padding: 19px 16px;
  color: #302a23;
  border-color: rgba(95, 76, 47, .14);
  background: transparent;
}
.home-content .account-stat:hover { background: rgba(255,255,255,.52); }
.home-content .account-stat b { color: #8d6936; font-size: 22px; }
.home-content .account-stat span { color: #777064; }
.club-manifesto {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(190px, .38fr) minmax(0, 1fr);
  column-gap: clamp(38px, 7vw, 92px);
  align-items: start;
  margin: 0 auto 72px;
  text-align: left;
}
.club-manifesto .eyebrow {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 9px 0 0;
  color: #98713a;
}
.club-manifesto h2 {
  grid-column: 2;
  margin: 0 0 18px;
  color: #27221c;
  font-size: clamp(30px, 3.35vw, 43px);
  line-height: 1.42;
  letter-spacing: .045em;
}
.club-manifesto h2 em { color: #9a733c; }
.club-manifesto > p:last-child {
  grid-column: 2;
  max-width: 640px;
  color: #70695f;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: .055em;
}
.home-content .section-heading { margin-bottom: 30px; }
.home-content .section-heading .eyebrow { color: #99723b; }
.home-content .section-heading h2 {
  color: #27221c;
  font-size: clamp(29px, 3.25vw, 42px);
}
.benefit-grid {
  gap: 14px;
  padding: 0;
  background: transparent;
}
.benefit-card {
  min-height: 272px;
  padding: 25px 24px;
  border: 1px solid rgba(79, 62, 38, .12);
  border-radius: 2px;
  background: #81705a;
  box-shadow: 0 12px 32px rgba(58, 45, 29, .09);
}
.benefit-card::before {
  background-color: #a28f75;
  background-position: center;
  filter: saturate(.7) contrast(1.02) brightness(.84);
}
.benefit-card::after {
  background: linear-gradient(180deg, rgba(23,18,13,.02) 16%, rgba(23,18,13,.2) 46%, rgba(17,14,11,.88) 100%);
}
.benefit-card--birthday::after,
.benefit-card--annual::after {
  background: linear-gradient(180deg, rgba(23,18,13,.02) 16%, rgba(23,18,13,.2) 46%, rgba(17,14,11,.88) 100%);
}
.benefit-card--annual::before {
  background-position: center;
  filter: saturate(.68) contrast(1.02) brightness(.82);
}
.benefit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(126, 91, 42, .28);
}
.benefit-card:hover::before { filter: saturate(.78) contrast(1.03) brightness(.9); transform: scale(1.035); }
.benefit-card > div p { margin-bottom: 8px; color: #dcc795; font-size: 9px; }
.benefit-card h3 { margin-bottom: 7px; font-size: 21px; }
.benefit-card small { max-width: 205px; color: #d0c8bc; font-size: 11px; line-height: 1.6; }
.benefit-card i { right: 22px; bottom: 22px; color: #e0c281; font-size: 17px; }

.privilege-hero__visual img { filter: saturate(.72) contrast(1.02) brightness(.92); }

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero .member-card { width: min(100%, 475px); }
}

@media (max-width: 680px) {
  .hero-inner { padding: 36px 0 42px; gap: 30px; }
  .hero-copy h1 { font-size: clamp(35px, 10.6vw, 44px); }
  .hero-copy h1 span { font-size: .38em; }
  .hero-copy > p:not(.eyebrow) { margin: 17px auto 20px; font-size: 12px; line-height: 1.78; }
  .hero-actions { justify-content: center; }
  .hero .primary-button,
  .hero .outline-button { min-height: 38px; padding: 8px 14px; font-size: 11px; }
  .hero .member-card { width: min(100%, 340px); }
  .hero .member-card-content { padding: 21px; }
  .hero .card-level-cn { font-size: 17px; }
  .hero .card-level-en,
  .hero .card-no { font-size: 9px; }
  .hero .card-name { margin-top: 7%; font-size: 20px; }
  .hero .card-script { margin-top: 6%; font-size: 19px; }
  .home-content {
    width: min(100% - 28px, 620px);
    padding: 48px 0 64px;
  }
  .home-content .account-strip { margin-bottom: 44px; }
  .home-content .account-stat { padding: 16px 10px; }
  .home-content .account-stat b { font-size: 19px; }
  .club-manifesto {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 50px;
    text-align: center;
  }
  .club-manifesto .eyebrow,
  .club-manifesto h2,
  .club-manifesto > p:last-child { grid-column: 1; }
  .club-manifesto .eyebrow { grid-row: auto; margin: 0 0 13px; }
  .club-manifesto h2 { margin-bottom: 13px; font-size: 27px; line-height: 1.42; letter-spacing: .035em; }
  .club-manifesto > p:last-child { max-width: 330px; margin-inline: auto; font-size: 12px; line-height: 1.8; }
  .home-content .section-heading { margin-bottom: 24px; }
  .home-content .section-heading h2 { font-size: 27px; }
  .benefit-grid { gap: 9px; }
  .benefit-card { min-height: 205px; padding: 18px 16px; }
  .benefit-card h3 { font-size: 17px; }
  .benefit-card small { max-width: 135px; font-size: 10px; line-height: 1.5; }
  .benefit-card i { right: 15px; bottom: 16px; font-size: 15px; }
}
.wechat-mini-mode body > :not(.wechat-mini-bridge):not(script) {
  display: none !important;
}

.wechat-mini-bridge {
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  color: #f6f0e5;
  background:
    radial-gradient(circle at 50% 12%, rgba(180, 139, 74, .18), transparent 34%),
    linear-gradient(145deg, #171613 0%, #080807 72%, #13100b 100%);
}

.wechat-mini-bridge[hidden] {
  display: none !important;
}

.wechat-mini-card {
  width: min(100%, 420px);
  padding: 42px 30px 34px;
  text-align: center;
  border: 1px solid rgba(200, 163, 99, .28);
  border-radius: 4px;
  background: rgba(17, 16, 14, .84);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.wechat-mini-card > img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  margin-bottom: 22px;
}

.wechat-mini-card .eyebrow {
  margin: 0 0 14px;
  color: #c8a363;
  font-size: 11px;
  letter-spacing: .22em;
}

.wechat-mini-card h1 {
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(25px, 7vw, 34px);
  font-weight: 500;
  letter-spacing: .06em;
}

.wechat-mini-card #wechat-mini-status {
  min-height: 24px;
  margin: 18px 0 28px;
  color: rgba(246, 240, 229, .66);
  font-size: 14px;
  line-height: 1.7;
}

.wechat-mini-open,
.wechat-mini-retry {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8a363;
  border-radius: 2px;
  color: #16130e;
  background: linear-gradient(135deg, #e0c18a, #b88a43);
  font: inherit;
  font-size: 15px;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
}

.wechat-mini-open.is-disabled {
  color: rgba(246, 240, 229, .5);
  border-color: rgba(200, 163, 99, .22);
  background: rgba(255, 255, 255, .04);
  pointer-events: none;
}

.wechat-mini-retry {
  margin-top: 10px;
}

.wechat-web-continue {
  display: inline-block;
  margin-top: 20px;
  color: rgba(246, 240, 229, .56);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 240, 229, .22);
}

/* 2026-09-17: original mini-program membership cards and invitation journey */
.join-link {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 4px;
  color: #c9a766;
  font-size: 13px;
  letter-spacing: .16em;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 167, 102, .46);
  transition: color .2s ease, border-color .2s ease;
}
.join-link:hover,
.join-link.is-active { color: #f0d79f; border-color: #f0d79f; }

.member-card {
  --card-metal: #cfae6a;
  aspect-ratio: 692 / 382;
  width: min(100%, 590px);
  isolation: isolate;
  border: 0;
  border-radius: 14px;
  color: var(--card-metal);
  background-color: #090908;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28), 0 3px 10px rgba(0, 0, 0, .3);
  text-decoration: none;
}
.member-card::before { content: none; }
.member-card.regular { --card-metal: #d5ad62; background-image: url("/vip-web/assets/member-card/card-regular.png"); }
.member-card.silver { --card-metal: #e6e7e7; background-image: url("/vip-web/assets/member-card/card-silver.png"); }
.member-card.gold { --card-metal: #dcb35e; background-image: url("/vip-web/assets/member-card/card-gold.png"); }
.member-card.diamond { --card-metal: #e5e7e8; background-image: url("/vip-web/assets/member-card/card-silver.png"); }
.member-card-content { padding: 7.1% 7.8% 7%; }
.card-top { align-items: flex-start; }
.card-top > div { display: flex; align-items: baseline; gap: 13px; min-width: 0; }
.card-level-cn {
  color: var(--card-metal);
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(17px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: .08em;
  white-space: nowrap;
}
.card-level-en {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--card-metal);
  font-size: clamp(8px, .9vw, 12px);
  font-weight: 500;
  letter-spacing: .03em;
  opacity: 1;
  white-space: nowrap;
}
.card-no {
  color: var(--card-metal);
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: .04em;
  opacity: .95;
  white-space: nowrap;
}
.card-name {
  margin-top: 7.5%;
  color: var(--card-metal);
  font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(20px, 2.35vw, 31px);
  font-weight: 500;
  letter-spacing: .015em;
}
.card-script-image {
  width: 34%;
  max-height: 42px;
  margin-top: 6.5%;
  object-fit: contain;
  object-position: left center;
  filter: none;
}
.member-card.silver .card-script-image,
.member-card.diamond .card-script-image { filter: grayscale(1) brightness(1.85); opacity: .9; }
.card-diamond { width: 15px; height: 15px; object-fit: contain; filter: grayscale(1) brightness(1.8); }
.card-progress {
  margin-top: auto;
  color: rgba(220, 215, 207, .58);
  font-size: clamp(10px, 1.05vw, 13px);
  letter-spacing: .015em;
}
.member-card.regular .card-script-image { display: none; }
.member-card.regular .card-progress { color: rgba(209, 202, 192, .58); }

.join-page,
.membership-benefits-page,
.invitation-page,
.profile-guest { padding-bottom: 110px; }
.join-intro {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(320px, 1.15fr);
  gap: clamp(44px, 8vw, 120px);
  align-items: end;
  margin: 20px 0 72px;
  padding: clamp(40px, 7vw, 80px);
  color: #efe9df;
  background:
    radial-gradient(circle at 78% 30%, rgba(192, 148, 76, .15), transparent 36%),
    linear-gradient(135deg, #15130f 0%, #070706 74%);
  border: 1px solid rgba(201, 166, 101, .2);
}
.join-intro h2 { margin: 16px 0 0; font-size: clamp(28px, 4vw, 50px); font-weight: 300; line-height: 1.5; letter-spacing: .08em; }
.join-intro h2 em { color: #d1ae69; font-family: Georgia, "Songti SC", serif; font-weight: 400; }
.join-intro > p { max-width: 520px; margin: 0; color: #a69e92; font-size: 15px; line-height: 2.1; letter-spacing: .06em; }
.join-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 72px; border: 1px solid var(--line); }
.join-steps article { min-height: 270px; padding: 34px 28px; border-right: 1px solid var(--line); background: #f7f3ea; }
.join-steps article:last-child { border-right: 0; }
.join-steps article > span { color: #b68b43; font: 18px/1 Georgia, serif; }
.join-steps h3 { margin: 74px 0 16px; color: #2b2721; font-size: 19px; font-weight: 500; letter-spacing: .08em; }
.join-steps p { margin: 0; color: #7c756b; font-size: 13px; line-height: 1.9; }
.membership-validity,
.join-invitation-cta {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
  gap: clamp(40px, 8vw, 110px);
  padding: 52px clamp(30px, 6vw, 70px);
  border-top: 1px solid rgba(99, 79, 46, .2);
}
.membership-validity h2,
.join-invitation-cta h2 { margin: 10px 0 0; font-size: clamp(25px, 3vw, 36px); font-weight: 400; letter-spacing: .06em; }
.membership-validity > div:last-child p,
.join-invitation-cta p { color: #746d63; font-size: 14px; line-height: 2; }
.join-invitation-cta { align-items: center; margin-top: 20px; color: #ede8df; background: #0d0c0a; border: 1px solid rgba(193, 154, 88, .26); }
.join-invitation-cta p { color: #9f978b; }
.join-invitation-cta > button { justify-self: end; }

.membership-level-tabs {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 4vw, 54px);
  margin: 12px 0 40px;
  border-bottom: 1px solid rgba(99, 79, 46, .18);
}
.membership-level-tabs button {
  position: relative;
  padding: 0 3px 17px;
  color: #847c71;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  letter-spacing: .08em;
  cursor: pointer;
}
.membership-level-tabs button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
.membership-level-tabs button.is-active { color: #8a672e; }
.membership-level-tabs button.is-active::after { background: #b68c46; }
.membership-carousel { position: relative; display: block; }
.membership-viewport { width: 100%; overflow: hidden; touch-action: pan-y; }
.membership-track { display: flex; transform: translateX(calc(var(--level-index) * -100%)); transition: transform .52s cubic-bezier(.22,.75,.22,1); }
.membership-level-slide { min-width: 100%; padding: 0; }
.membership-level-card { display: grid; grid-template-columns: minmax(330px, .95fr) minmax(260px, .75fr); gap: clamp(38px, 7vw, 96px); align-items: center; padding: 34px clamp(24px, 4vw, 52px); background: #11100e; }
.membership-level-card .member-card { width: 100%; }
.membership-level-copy h2 { margin: 11px 0 16px; color: #eee8dc; font-size: clamp(27px, 3.4vw, 43px); font-weight: 300; letter-spacing: .06em; }
.membership-level-copy > p:not(.eyebrow) { color: #8f877b; font-size: 13px; }
.current-level-mark { display: inline-flex; margin-top: 20px; padding: 7px 12px; color: #d4b575; border: 1px solid rgba(212,181,117,.42); font-size: 11px; letter-spacing: .1em; }
.membership-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-top: 1px solid rgba(101,80,46,.2); border-left: 1px solid rgba(101,80,46,.2); }
.membership-benefit-grid section { min-height: 145px; display: flex; gap: 17px; align-items: flex-start; padding: 28px 24px; border-right: 1px solid rgba(101,80,46,.2); border-bottom: 1px solid rgba(101,80,46,.2); background: rgba(255,255,255,.22); }
.membership-benefit-grid img { flex: 0 0 37px; width: 37px; height: 37px; object-fit: contain; }
.membership-benefit-grid h3 { margin: 2px 0 10px; color: #383128; font-size: 16px; font-weight: 500; letter-spacing: .06em; }
.membership-benefit-grid p { margin: 0; color: #80786d; font-size: 12px; line-height: 1.75; }
.membership-arrow { position: absolute; z-index: 6; top: clamp(132px, 14vw, 176px); width: 42px; height: 42px; display: grid; place-items: center; color: #8c6a34; border: 1px solid rgba(115,88,47,.28); background: rgba(10,9,8,.94); font: 28px/1 Georgia, serif; cursor: pointer; }
.membership-arrow.is-prev { left: -50px; }
.membership-arrow.is-next { right: -50px; }
.membership-arrow:disabled { opacity: .2; cursor: default; }
.membership-dots { display: flex; justify-content: center; gap: 9px; margin: 24px 0 44px; }
.membership-dots i { width: 22px; height: 2px; background: rgba(99,77,43,.2); transition: width .2s, background .2s; }
.membership-dots i.is-active { width: 42px; background: #aa8141; }
.benefits-login { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 28px 34px; color: #958d82; background: rgba(255,255,255,.32); border: 1px solid rgba(99,79,46,.15); }

.invitation-status-card {
  display: grid;
  grid-template-columns: minmax(340px, .95fr) minmax(280px, .7fr);
  gap: clamp(42px, 7vw, 100px);
  align-items: center;
  margin-top: 24px;
  padding: clamp(34px, 6vw, 74px);
  color: #efe9df;
  background: linear-gradient(135deg, #14120f, #070706);
  border: 1px solid rgba(199,161,96,.22);
}
.invitation-status-card .member-card { width: 100%; }
.invitation-status-card h2 { margin: 13px 0 18px; font-size: clamp(26px, 3vw, 40px); font-weight: 300; letter-spacing: .06em; }
.invitation-status-card > div:last-child > p:not(.eyebrow) { margin: 0 0 28px; color: #989085; font-size: 14px; line-height: 1.9; }
.invitation-pulse { animation: invitationPulse 2s ease-in-out infinite; }

.invitation-modal { position: relative; width: min(920px, calc(100vw - 34px)); min-height: min(710px, calc(100vh - 32px)); display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 18%, #2b2113, #090807 68%); border: 1px solid rgba(213,175,104,.28); box-shadow: 0 34px 100px rgba(0,0,0,.6); }
.invitation-close { z-index: 8; color: #e6d8bb; }
.invitation-stage { position: relative; width: min(680px, calc(100% - 38px)); height: min(600px, calc(100vh - 80px)); display: grid; place-items: center; perspective: 1200px; }
.invitation-envelope { position: absolute; z-index: 3; width: min(570px, 92%); aspect-ratio: 1.72/1; overflow: hidden; background: linear-gradient(145deg, #b98d49, #6d4d24); box-shadow: 0 22px 60px rgba(0,0,0,.48); transform: translateY(12%); animation: envelopeArrive .8s cubic-bezier(.2,.75,.2,1) both; }
.invitation-envelope::before,
.invitation-envelope::after { content: ""; position: absolute; inset: 0; }
.invitation-envelope::before { clip-path: polygon(0 0, 50% 58%, 100% 0); background: linear-gradient(155deg, #d0a65e, #8d642f); }
.invitation-envelope::after { clip-path: polygon(0 100%, 0 36%, 50% 72%, 100% 36%, 100% 100%); background: linear-gradient(145deg, #9f7439, #6f4d25); }
.invitation-flap { position: absolute; z-index: 4; inset: 0; clip-path: polygon(0 0, 50% 58%, 100% 0); background: linear-gradient(155deg, #ddb86e, #9d7037); transform-origin: top; backface-visibility: hidden; }
.invitation-seal { position: absolute; z-index: 5; left: 50%; top: 52%; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #f2d596; background: #372719; border: 1px solid rgba(245,212,151,.45); font: italic 18px Georgia, serif; transform: translate(-50%,-50%); }
.invitation-letter { position: relative; z-index: 2; width: min(530px, 88%); max-height: calc(100% - 24px); overflow: auto; padding: clamp(38px, 6vw, 66px); color: #302a21; background: #f2eadb; border: 1px solid #d5c4a4; box-shadow: 0 25px 65px rgba(0,0,0,.4); transform: translateY(20%) scale(.92); opacity: 0; }
.invitation-letter::before { content: ""; position: absolute; inset: 12px; pointer-events: none; border: 1px solid rgba(140,101,42,.22); }
.invitation-letter > * { position: relative; z-index: 1; }
.invitation-letter h2 { margin: 14px 0 24px; color: #2c251c; font-size: clamp(28px, 4vw, 42px); font-weight: 400; letter-spacing: .12em; }
.invitation-letter > strong { display: block; margin-bottom: 22px; color: #5e492a; font-weight: 500; }
.invitation-copy p { margin: 0 0 13px; color: #6f6659; font-size: 13px; line-height: 1.95; }
.invitation-gate-note { margin: 18px 0 6px; padding: 12px 14px; color: #6b5129; border: 1px solid rgba(151,110,48,.24); background: rgba(197,156,88,.1); font-size: 12px; line-height: 1.8; letter-spacing: .04em; }
.invitation-modal.is-mandatory { box-shadow: 0 34px 110px rgba(0,0,0,.72), 0 0 0 1px rgba(213,175,104,.08); }
.activation-card.is-mandatory { border-color: rgba(213,175,104,.42); box-shadow: 0 30px 90px rgba(0,0,0,.62); }
.invitation-signature { width: 155px; height: 48px; margin: 8px 0 22px; object-fit: contain; object-position: left center; }
.invitation-modal.is-presented .invitation-flap { animation: flapOpen .72s .65s cubic-bezier(.35,.05,.2,1) both; }
.invitation-modal.is-presented .invitation-seal { animation: sealFade .38s .62s ease both; }
.invitation-modal.is-presented .invitation-letter { animation: letterReveal 1.05s 1.05s cubic-bezier(.2,.76,.2,1) both; }
.invitation-modal.is-presented .invitation-envelope { animation: envelopeArrive .8s cubic-bezier(.2,.75,.2,1) both, envelopeLower .72s 1.1s ease both; }
.activation-card { text-align: center; }
.activation-emblem { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 22px; color: #e8c77f; border: 1px solid rgba(200,160,90,.58); border-radius: 50%; background: radial-gradient(circle, rgba(213,169,88,.16), transparent 70%); }
.activation-emblem span { font: italic 25px Georgia, serif; }
.activation-form { margin-top: 28px; text-align: left; }
.activation-form input { text-transform: uppercase; letter-spacing: .14em; text-align: center; }
.activation-success { text-align: center; overflow: hidden; }
.activation-success .activation-emblem { position: relative; animation: activationGlow 1.6s ease-in-out infinite alternate; }
.activation-success h2 { margin: 12px 0; font-weight: 400; letter-spacing: .1em; }
.activation-success p { color: #8a8176; line-height: 1.8; }
.activation-burst {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin: 0 auto 25px;
  border: 1px solid rgba(192, 150, 77, .44);
  border-radius: 50%;
  color: #b98d45;
  background: radial-gradient(circle, rgba(211, 176, 108, .17), transparent 68%);
  animation: activationGlow 1.6s ease-in-out infinite alternate;
}
.activation-burst span { position: relative; z-index: 2; font: 31px/1 Georgia, serif; animation: successCheck .55s .15s cubic-bezier(.2,.8,.2,1) both; }
.activation-burst i { position: absolute; left: 50%; top: 50%; width: 2px; height: 34px; background: linear-gradient(#c7a15e, transparent); transform-origin: 50% 0; animation: successRay .85s ease-out both; }
.activation-burst i:nth-child(1) { transform: rotate(0deg) translateY(-62px); }
.activation-burst i:nth-child(2) { transform: rotate(60deg) translateY(-62px); }
.activation-burst i:nth-child(3) { transform: rotate(120deg) translateY(-62px); }
.activation-burst i:nth-child(4) { transform: rotate(180deg) translateY(-62px); }
.activation-burst i:nth-child(5) { transform: rotate(240deg) translateY(-62px); }
.activation-burst i:nth-child(6) { transform: rotate(300deg) translateY(-62px); }
.activation-rays { position: absolute; inset: -140%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(204,164,92,.11) 0 2deg, transparent 2deg 18deg); animation: activationSpin 16s linear infinite; }

@keyframes invitationPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(210,170,99,0); } 50% { box-shadow: 0 0 0 8px rgba(210,170,99,.09); } }
@keyframes envelopeArrive { from { opacity: 0; transform: translateY(26%) scale(.9); } to { opacity: 1; transform: translateY(12%) scale(1); } }
@keyframes flapOpen { from { transform: rotateX(0); } to { transform: rotateX(178deg); } }
@keyframes sealFade { to { opacity: 0; transform: translate(-50%,-50%) scale(.7); } }
@keyframes letterReveal { 0% { opacity: 0; transform: translateY(24%) scale(.92); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateY(-4%) scale(1); z-index: 6; } }
@keyframes envelopeLower { to { opacity: .32; transform: translateY(48%) scale(.94); } }
@keyframes activationGlow { from { box-shadow: 0 0 0 rgba(200,159,86,0); } to { box-shadow: 0 0 34px rgba(200,159,86,.28); } }
@keyframes activationSpin { to { transform: rotate(360deg); } }
@keyframes successCheck { from { opacity: 0; transform: scale(.2) rotate(-22deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes successRay { from { opacity: 0; height: 8px; } 45% { opacity: 1; } to { opacity: 0; height: 34px; } }

@media (max-width: 1100px) {
  .site-header { padding-inline: 24px; }
  .desktop-nav { gap: 16px; }
  .desktop-nav a { font-size: 11px; }
  .membership-benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .join-page,
  .membership-benefits-page,
  .invitation-page,
  .profile-guest { padding-bottom: 84px; }
  .member-card { width: min(100%, 430px); border-radius: 9px; }
  .member-card-content { padding: 6.8% 7.4% 6.7%; }
  .card-level-cn { font-size: clamp(15px, 5vw, 21px); }
  .card-level-en { font-size: clamp(7px, 2.3vw, 10px); }
  .card-no { font-size: clamp(8px, 2.6vw, 11px); }
  .card-name { margin-top: 6.8%; font-size: clamp(18px, 5.7vw, 25px); }
  .card-script-image { width: 33%; max-height: 30px; margin-top: 5%; }
  .card-progress { font-size: clamp(9px, 3vw, 12px); }
  .card-top > div { gap: 8px; }
  .card-diamond { width: 11px; height: 11px; }
  .join-intro,
  .membership-validity,
  .join-invitation-cta,
  .invitation-status-card { grid-template-columns: 1fr; gap: 28px; }
  .join-intro { margin-bottom: 42px; padding: 34px 24px; }
  .join-intro h2 { font-size: 28px; }
  .join-intro > p { font-size: 13px; }
  .join-steps { grid-template-columns: 1fr; margin-bottom: 44px; }
  .join-steps article { min-height: 0; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 25px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .join-steps article:last-child { border-bottom: 0; }
  .join-steps h3 { margin: 0 0 9px; font-size: 17px; }
  .join-steps p { font-size: 12px; }
  .membership-validity,
  .join-invitation-cta { padding: 36px 24px; }
  .join-invitation-cta > button { width: 100%; justify-self: stretch; }
  .membership-level-tabs { justify-content: flex-start; gap: 28px; overflow-x: auto; padding: 0 4px; scrollbar-width: none; }
  .membership-level-tabs::-webkit-scrollbar { display: none; }
  .membership-level-tabs button { flex: 0 0 auto; font-size: 13px; }
  .membership-carousel { display: block; }
  .membership-arrow { top: clamp(148px, 48vw, 196px); width: 30px; height: 46px; display: grid; }
  .membership-arrow.is-prev { left: -15px; }
  .membership-arrow.is-next { right: -15px; }
  .membership-level-card { grid-template-columns: 1fr; gap: 28px; padding: 22px 16px 30px; }
  .membership-level-copy { padding: 0 8px; text-align: center; }
  .membership-level-copy h2 { font-size: 27px; }
  .membership-benefit-grid { grid-template-columns: 1fr; margin-top: 12px; }
  .membership-benefit-grid section { min-height: 0; padding: 22px 18px; }
  .membership-benefit-grid h3 { font-size: 15px; }
  .membership-dots { margin-bottom: 30px; }
  .benefits-login { flex-direction: column; align-items: stretch; padding: 24px 20px; text-align: center; }
  .invitation-status-card { padding: 28px 18px 36px; }
  .invitation-status-card > div:last-child { text-align: center; }
  .invitation-modal { min-height: calc(100dvh - 18px); width: calc(100vw - 18px); }
  .invitation-stage { width: calc(100% - 12px); height: calc(100dvh - 54px); }
  .invitation-envelope { width: 94%; }
  .invitation-letter { width: 91%; max-height: calc(100% - 18px); padding: 45px 28px 34px; }
  .invitation-letter h2 { font-size: 28px; }
  .invitation-copy p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .invitation-pulse,
  .invitation-envelope,
  .invitation-flap,
  .invitation-seal,
  .invitation-letter,
  .activation-success .activation-emblem,
  .activation-burst,
  .activation-burst span,
  .activation-burst i,
  .activation-rays { animation: none !important; }
  .invitation-letter { z-index: 6; opacity: 1; transform: translateY(-4%) scale(1); }
  .invitation-envelope { opacity: .25; transform: translateY(48%) scale(.94); }
}

/* 2026-09-21: luxury wax-sealed invitation sequence. */
.invitation-modal {
  width: min(1040px, calc(100vw - 30px));
  min-height: min(760px, calc(100dvh - 26px));
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(173,127,63,.18), transparent 32%),
    radial-gradient(circle at 50% 110%, rgba(133,91,40,.16), transparent 38%),
    linear-gradient(145deg, #15120e 0%, #090807 52%, #120e09 100%);
  border-color: rgba(205,165,94,.25);
  box-shadow: 0 38px 120px rgba(0,0,0,.72), inset 0 0 110px rgba(0,0,0,.46);
}
.invitation-modal::before,
.invitation-modal::after { content: ""; position: absolute; pointer-events: none; }
.invitation-modal::before { inset: 18px; border: 1px solid rgba(206,167,95,.12); }
.invitation-modal::after { width: 68%; height: 1px; top: 50%; left: 16%; background: linear-gradient(90deg,transparent,rgba(217,179,106,.22),transparent); box-shadow: 0 0 34px rgba(209,166,91,.16); }
.invitation-close { top: 23px; right: 25px; color: #d6c6a8; }
.invitation-stage { width: min(760px, calc(100% - 34px)); height: min(680px, calc(100dvh - 54px)); perspective: 1800px; transform-style: preserve-3d; }
.invitation-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.invitation-atmosphere i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #d8b56f; opacity: 0; box-shadow: 0 0 12px #d8b56f; }
.invitation-atmosphere i:nth-child(1) { left: 17%; top: 38%; }
.invitation-atmosphere i:nth-child(2) { right: 16%; top: 29%; }
.invitation-atmosphere i:nth-child(3) { right: 25%; bottom: 21%; }
.invitation-envelope {
  z-index: 4;
  width: min(620px, 91%);
  aspect-ratio: 1.68 / 1;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transform: translateY(8%) rotateX(2deg);
  transform-style: preserve-3d;
  animation: invitationEnvelopeArrive .9s cubic-bezier(.18,.77,.22,1) both;
}
.invitation-envelope::before,
.invitation-envelope::after { display: none; }
.invitation-envelope__back,
.invitation-envelope__paper,
.invitation-envelope__front,
.invitation-flap { position: absolute; inset: 0; }
.invitation-envelope__back {
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(229,203,151,.34);
  background:
    linear-gradient(128deg,rgba(255,255,255,.1),transparent 32%),
    linear-gradient(155deg,#5d4630 0%,#332319 55%,#201711 100%);
  box-shadow: 0 34px 82px rgba(0,0,0,.64), inset 0 0 46px rgba(255,232,180,.07);
}
.invitation-envelope__back::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(211,175,108,.14); }
.invitation-envelope__paper { z-index: 2; inset: 6% 5% 10%; background: #eee3cf; box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.invitation-envelope__front {
  z-index: 4;
  clip-path: polygon(0 23%,50% 69%,100% 23%,100% 100%,0 100%);
  border: 1px solid rgba(228,199,143,.24);
  background:
    linear-gradient(150deg,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(138deg,#70553a 0%,#3a291d 49%,#5d422d 100%);
  box-shadow: inset 0 -24px 50px rgba(0,0,0,.22);
}
.invitation-flap {
  z-index: 5;
  clip-path: polygon(0 0,50% 61%,100% 0);
  background:
    linear-gradient(156deg,rgba(255,255,255,.14),transparent 34%),
    linear-gradient(155deg,#826445,#463124 56%,#2c2019 100%);
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.22));
  transform-origin: 50% 0;
  backface-visibility: hidden;
}
.invitation-flap::after { content: ""; position: absolute; inset: 10px 13px 0; clip-path: polygon(0 0,50% 58%,100% 0); border-top: 1px solid rgba(225,195,139,.22); }
.invitation-seal {
  z-index: 7;
  left: 50%;
  top: 57%;
  width: 78px;
  height: 78px;
  color: #e4bc70;
  border: 1px solid rgba(255,216,141,.22);
  background:
    radial-gradient(circle at 35% 28%,rgba(255,215,140,.16),transparent 25%),
    radial-gradient(circle,#6b1420 0 48%,#400912 68%,#22070b 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,.48), inset 0 0 0 5px rgba(80,10,19,.72), inset 0 0 0 7px rgba(222,169,86,.18);
  font: italic 21px Georgia, serif;
}
.invitation-seal::before { content: ""; position: absolute; inset: -7px; border: 2px dotted rgba(137,24,38,.78); border-radius: 50%; }
.invitation-seal span { position: relative; z-index: 2; text-shadow: 0 1px 0 rgba(255,235,188,.22); }
.invitation-seal i { position: absolute; inset: 13px; border: 1px solid rgba(229,187,111,.48); border-radius: 50%; }
.invitation-letter {
  z-index: 3;
  width: min(590px, 86%);
  max-height: calc(100% - 22px);
  scrollbar-width: thin;
  padding: clamp(45px,5vw,66px) clamp(34px,6vw,72px) clamp(36px,4.5vw,54px);
  color: #2f2921;
  background-color: #f2eadc;
  background-image: linear-gradient(rgba(247,241,229,.76),rgba(247,241,229,.76)),url('/vip-web/assets/invitation/ivory-paper-texture-v1.webp');
  background-size: cover;
  border: 1px solid #d3bf98;
  box-shadow: 0 35px 90px rgba(0,0,0,.52), 0 0 0 1px rgba(255,250,235,.45) inset;
  transform: translateY(18%) scale(.86);
  opacity: 0;
}
.invitation-letter::before { inset: 13px; border-color: rgba(123,87,38,.2); }
.invitation-letter__frame { position: absolute!important; z-index: 0!important; inset: 22px; border: 1px solid rgba(155,116,57,.13); pointer-events: none; }
.invitation-letter__frame::before,
.invitation-letter__frame::after { content: ""; position: absolute; left: 50%; width: 74px; height: 1px; background: #a9854c; transform: translateX(-50%); }
.invitation-letter__frame::before { top: -1px; }
.invitation-letter__frame::after { bottom: -1px; }
.invitation-letter__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid rgba(126,94,47,.17); }
.invitation-letter__header .eyebrow { margin: 0; color: #8f6a32; font: 9px Georgia,serif; letter-spacing: .27em; }
.invitation-letter__header > span { color: #9c8c73; font: 8px Georgia,serif; letter-spacing: .18em; white-space: nowrap; }
.invitation-letter__title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 26px 0 20px; }
.invitation-letter__title i { height: 1px; background: linear-gradient(90deg,transparent,rgba(154,113,51,.38)); }
.invitation-letter__title i:last-child { transform: scaleX(-1); }
.invitation-letter h2 { margin: 0; color: #2d261e; font-size: clamp(27px,3.4vw,39px); font-weight: 400; letter-spacing: .17em; white-space: nowrap; }
.invitation-letter > strong { margin-bottom: 18px; color: #6f512b; font: 500 14px/1.7 "Noto Serif SC","Microsoft YaHei",serif; letter-spacing: .08em; }
.invitation-copy { max-width: 430px; margin: 0 auto; }
.invitation-copy p { margin-bottom: 11px; color: #675e52; font: 12px/1.95 "Noto Serif SC","Microsoft YaHei",serif; letter-spacing: .035em; }
.invitation-gate-note { margin: 17px 0 0; padding: 10px 12px; border-color: rgba(151,110,48,.2); background: rgba(197,156,88,.08); line-height: 1.7; }
.invitation-letter__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 14px 0 18px; }
.invitation-letter__footer span { color: #a39785; font: 7px Georgia,serif; letter-spacing: .18em; text-align: right; }
.invitation-signature { width: 143px; height: 42px; margin: 0; object-position: left bottom; }
.invitation-accept { min-width: 220px; margin: 0 auto; border-color: #221a12; background: #211a13; color: #dfc38c; font-size: 11px; letter-spacing: .14em; opacity: 0; transform: translateY(10px); }
.invitation-modal.is-presented .invitation-atmosphere i { animation: invitationDust 2.8s 1s ease-out both; }
.invitation-modal.is-presented .invitation-atmosphere i:nth-child(2) { animation-delay: 1.25s; }
.invitation-modal.is-presented .invitation-atmosphere i:nth-child(3) { animation-delay: 1.5s; }
.invitation-modal.is-presented .invitation-flap { animation: luxuryFlapOpen .85s .82s cubic-bezier(.33,.02,.19,1) both; }
.invitation-modal.is-presented .invitation-seal { animation: luxurySealRelease .58s .68s cubic-bezier(.22,.8,.2,1) both; }
.invitation-modal.is-presented .invitation-envelope__paper { animation: innerPaperLift .86s 1.28s cubic-bezier(.19,.76,.24,1) both; }
.invitation-modal.is-presented .invitation-letter { animation: luxuryLetterReveal 1.08s 1.42s cubic-bezier(.2,.8,.2,1) both; }
.invitation-modal.is-presented .invitation-envelope { animation: invitationEnvelopeArrive .9s cubic-bezier(.18,.77,.22,1) both, luxuryEnvelopeSettle .8s 1.48s ease both; }
.invitation-modal.is-presented .invitation-accept { animation: invitationActionIn .5s 2.35s ease both; }
@keyframes invitationEnvelopeArrive { from { opacity: 0; transform: translateY(20%) rotateX(8deg) scale(.9); } to { opacity: 1; transform: translateY(8%) rotateX(2deg) scale(1); } }
@keyframes luxurySealRelease { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); } 55% { opacity: 1; transform: translate(-50%,-56%) rotate(-8deg) scale(1.05); } 100% { opacity: 0; transform: translate(-50%,-95%) rotate(14deg) scale(.74); } }
@keyframes luxuryFlapOpen { from { transform: rotateX(0); } to { transform: rotateX(178deg); filter: drop-shadow(0 -10px 12px rgba(0,0,0,.18)); } }
@keyframes innerPaperLift { from { transform: translateY(0); } to { transform: translateY(-28%); } }
@keyframes luxuryLetterReveal { 0% { z-index: 3; opacity: 0; transform: translateY(20%) scale(.86); } 38% { opacity: 1; } 100% { z-index: 9; opacity: 1; transform: translateY(-1%) scale(1); } }
@keyframes luxuryEnvelopeSettle { to { opacity: .22; transform: translateY(58%) scale(.91); filter: blur(.2px); } }
@keyframes invitationActionIn { to { opacity: 1; transform: translateY(0); } }
@keyframes invitationDust { 0% { opacity: 0; transform: translateY(18px) scale(.7); } 35% { opacity: .75; } 100% { opacity: 0; transform: translateY(-74px) scale(1.2); } }

@media (max-width: 760px) {
  .invitation-modal { width: calc(100vw - 12px); min-height: calc(100dvh - 12px); }
  .invitation-modal::before { inset: 8px; }
  .invitation-stage { width: calc(100% - 4px); height: calc(100dvh - 24px); }
  .invitation-envelope { width: 94%; }
  .invitation-seal { width: 64px; height: 64px; font-size: 18px; }
  .invitation-letter { width: 92%; max-height: calc(100% - 18px); padding: 42px 28px 30px; }
  .invitation-letter__frame { inset: 13px; }
  .invitation-letter__header { display: grid; gap: 7px; }
  .invitation-letter__header > span { white-space: normal; }
  .invitation-letter__title { gap: 11px; margin: 22px 0 17px; }
  .invitation-letter h2 { font-size: 25px; letter-spacing: .12em; }
  .invitation-copy p { font-size: 11.5px; line-height: 1.85; }
  .invitation-letter__footer span { display: none; }
  .invitation-signature { width: 128px; }
  .invitation-accept { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .invitation-atmosphere i,
  .invitation-envelope__paper,
  .invitation-accept { animation: none!important; }
  .invitation-accept { opacity: 1; transform: none; }
}

/* Original VIP Club envelope artwork + low-cost invitation motion. */
.invitation-stage { perspective: none; transform-style: flat; contain: layout paint; }
.invitation-atmosphere { display: none; }
.invitation-envelope {
  width: min(470px, 76%);
  aspect-ratio: 598 / 628;
  overflow: hidden;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent url('/uploads/weimg/invitation_popup.png') center / contain no-repeat;
  transform: translateY(1%) scale(.96);
  transform-style: flat;
  will-change: transform, opacity;
  animation: none;
  cursor: pointer;
}
.invitation-envelope__back,
.invitation-envelope__paper,
.invitation-envelope__front,
.invitation-flap,
.invitation-seal { display: none; }
.invitation-letter {
  will-change: transform, opacity;
  transform: translateY(9%) scale(.96);
  box-shadow: 0 24px 64px rgba(0,0,0,.46), 0 0 0 1px rgba(255,250,235,.45) inset;
  pointer-events: none;
}
.invitation-modal.is-presented .invitation-envelope { animation: originalEnvelopeIn 6s cubic-bezier(.16,.72,.22,1) both; }
.invitation-modal.is-presented .invitation-letter { animation: none; opacity: 0; transform: translateY(5%) scale(.98); }
.invitation-modal.is-presented .invitation-accept { animation: none; opacity: 0; transform: none; }
.invitation-modal.is-open .invitation-envelope { pointer-events: none; animation: originalEnvelopeAway .18s ease-in both; }
.invitation-modal.is-open .invitation-letter { pointer-events: auto; animation: fastLetterReveal .28s .1s ease-out both; }
.invitation-modal.is-open .invitation-accept { opacity: 1; transform: none; animation: none; }
.invitation-accept {
  display: block;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  transition: color .08s linear, background-color .08s linear, border-color .08s linear;
}
.invitation-accept:hover,
.invitation-accept:focus-visible {
  color: #20170d;
  border-color: #d8b46a;
  background: #d8b46a;
  transform: none;
}
.invitation-letter__frame,
.invitation-letter__title i { display: none; }
.invitation-letter__header {
  justify-content: center;
  padding-bottom: 6px;
  border-bottom: 0;
}
.invitation-letter__header > span { display: none; }
.invitation-letter__title {
  display: block;
  margin: 18px 0 23px;
  text-align: center;
}
.invitation-letter h2 {
  font-size: clamp(25px,3vw,35px);
  letter-spacing: .13em;
}
.invitation-letter > strong {
  margin: 0 0 18px;
  text-align: center;
  font-family: "Noto Serif SC","Songti SC",STSong,serif;
  font-weight: 400;
  letter-spacing: .14em;
}
.invitation-copy { text-align: center; }
.invitation-copy p {
  margin-bottom: 14px;
  color: #5d554b;
  font-family: "Noto Serif SC","Songti SC",STSong,serif;
  font-size: 12px;
  line-height: 2.05;
  letter-spacing: .07em;
}
.invitation-gate-note {
  margin: 14px 0 5px;
  padding: 0;
  color: #8b6b3d;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: "Noto Serif SC","Songti SC",STSong,serif;
  letter-spacing: .05em;
}
.invitation-letter__footer { align-items: center; justify-content: center; margin: 10px 0 17px; }
.invitation-letter__footer span { display: none; }
.invitation-signature {
  width: 138px;
  filter: brightness(0) saturate(100%);
  opacity: .7;
}
.modal-root { backdrop-filter: none; }
.activation-card { contain: layout paint; }
.activation-card .primary-button { transition: color .08s linear, background-color .08s linear, border-color .08s linear; }
.activation-card .primary-button:hover,
.activation-card .primary-button:focus-visible { color: #1e160c; border-color: #d8b46a; background: #d8b46a; transform: none; }
.activation-success .activation-emblem,
.activation-burst,
.activation-burst span,
.activation-burst i { animation: none!important; }
@keyframes originalEnvelopeIn {
  from { opacity: 0; transform: translateY(5%) scale(.94); }
  to { opacity: 1; transform: translateY(1%) scale(.96); }
}
@keyframes originalEnvelopeAway {
  from { opacity: 1; transform: translateY(1%) scale(.96); }
  to { opacity: 0; transform: translateY(3%) scale(.95); }
}
@keyframes fastLetterReveal {
  from { z-index: 3; opacity: 0; transform: translateY(5%) scale(.98); }
  to { z-index: 9; opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .invitation-envelope { width: min(430px, 86%); }
  .invitation-accept { width: 100%; }
}

/* 2026-09-17 refinement: clean cards, compact member center, in-place privilege switching */
.member-card,
.member-card.regular,
.member-card.silver,
.member-card.gold,
.member-card.diamond {
  --card-metal: #d1ad67;
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(211, 174, 104, .22);
  border-radius: 11px;
  background-image: none;
  background-color: #0c0b09;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}
.member-card.regular {
  --card-metal: #d3aa60;
  background:
    radial-gradient(circle at 86% 22%, rgba(180, 135, 65, .11), transparent 30%),
    linear-gradient(118deg, #13110d 0%, #090908 58%, #17130d 100%);
}
.member-card.silver {
  --card-metal: #d7d9da;
  border-color: rgba(215, 217, 218, .22);
  background:
    radial-gradient(circle at 84% 20%, rgba(214, 217, 219, .1), transparent 31%),
    linear-gradient(118deg, #151514 0%, #090909 61%, #181919 100%);
}
.member-card.gold {
  --card-metal: #d9b35f;
  border-color: rgba(217, 179, 95, .3);
  background:
    radial-gradient(circle at 84% 20%, rgba(218, 177, 91, .16), transparent 31%),
    linear-gradient(118deg, #18140d 0%, #090807 59%, #20170a 100%);
}
.member-card.diamond {
  --card-metal: #e3e5e5;
  border-color: rgba(217, 225, 228, .25);
  background:
    radial-gradient(circle at 83% 19%, rgba(201, 220, 226, .13), transparent 30%),
    linear-gradient(118deg, #151617 0%, #080909 60%, #17191a 100%);
}
.member-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    repeating-linear-gradient(136deg, transparent 0 27px, rgba(255,255,255,.014) 28px 29px),
    linear-gradient(112deg, rgba(255,255,255,.045), transparent 28%);
  pointer-events: none;
}
.member-card::after {
  content: "VIP";
  position: absolute;
  z-index: 0;
  right: 6%;
  bottom: 8%;
  color: color-mix(in srgb, var(--card-metal) 78%, transparent);
  font: 500 clamp(58px, 8vw, 96px)/.9 Georgia, serif;
  letter-spacing: .02em;
  opacity: .88;
  pointer-events: none;
}
.member-card.regular::after {
  content: "JB";
  right: 7%;
  bottom: -4%;
  color: color-mix(in srgb, var(--card-metal) 13%, transparent);
  font-style: italic;
  font-size: clamp(74px, 10vw, 124px);
}
.member-card-content { z-index: 2; padding: 7.4% 8.2% 7.2%; }
.card-level-cn { font-size: clamp(15px, 1.55vw, 21px); font-weight: 400; letter-spacing: .075em; }
.card-level-en { font-size: clamp(7px, .72vw, 10px); font-weight: 400; }
.card-no { font-size: clamp(8px, .76vw, 10px); letter-spacing: .06em; }
.card-name { margin-top: 6.2%; font-size: clamp(17px, 1.75vw, 23px); font-weight: 400; }
.card-script-image { width: 31%; max-height: 32px; margin-top: 6%; object-fit: contain; object-position: left center; }
.member-card.regular .card-script-image { display: block; }
.card-progress { max-width: 58%; font-size: clamp(9px, .8vw, 11px); line-height: 1.55; }
.card-diamond { width: 12px; height: 12px; }

.member-center-page { width: min(1180px, calc(100% - 48px)); }
.member-center-page > .page-heading { margin-bottom: 38px; }
.member-center-page .account-strip { margin: 0 0 34px; }
.member-center-page .dashboard-grid {
  grid-template-columns: minmax(300px, 368px) minmax(0, 1fr);
  gap: 24px;
}
.member-center-sidebar,
.member-center-content { min-width: 0; }
.member-center-sidebar .member-card { width: 100%; margin: 0; }
.member-center-sidebar .menu-list { margin-top: 18px; padding: 8px 24px; }
.member-center-sidebar .menu-list a,
.member-center-sidebar .menu-list button { min-height: 48px; font-size: 13px; letter-spacing: .025em; }
.member-center-content > .panel {
  min-height: 100%;
  padding: clamp(24px, 4vw, 42px);
  color: #312b23;
  border-color: rgba(105, 82, 47, .17);
  background: #f0e9dd;
}
.member-center-content > .panel > h2 { color: #302920; font-size: 22px; }
.member-center-content .profile-lines { border-color: rgba(105, 82, 47, .14); background: rgba(105, 82, 47, .14); }
.member-center-content .profile-line { color: #312b23; background: rgba(255,255,255,.56); }
.member-center-content .profile-line span { color: #82796d; }
.member-center-content .record-card {
  color: #342e26;
  border-color: rgba(105, 82, 47, .15);
  background: rgba(255,255,255,.58);
}
.member-center-content .record-card-top { border-bottom-color: rgba(105, 82, 47, .13); }
.member-center-content .record-card-body,
.member-center-content .record-card time { color: #7d7469; }
.member-center-content .coupon-card { border-color: rgba(105, 82, 47, .16); background: rgba(255,255,255,.6); }
.member-center-content .coupon-card > section {
  color: #332d25;
  background:
    linear-gradient(112deg, rgba(181,139,67,.09), transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(244,238,227,.78));
  box-shadow: inset 1px 0 rgba(112,82,36,.08), inset 0 1px rgba(255,255,255,.45);
}
.member-center-content .coupon-card > div::before,
.member-center-content .coupon-card > div::after { background: #f0e9dd; }

.membership-benefits-page > .page-heading { margin-bottom: 30px; }
.membership-benefits-page > .page-heading h1 { font-size: clamp(31px, 3.4vw, 44px); }
.membership-level-tabs { margin: 0 0 28px; }
.membership-carousel { gap: 14px; }
.membership-track { transition: transform .58s cubic-bezier(.2,.78,.2,1); will-change: transform; }
.membership-level-slide { padding: 0; opacity: .58; transition: opacity .36s ease; }
.membership-level-slide.is-active { opacity: 1; }
.membership-level-card {
  grid-template-columns: minmax(310px, 480px) minmax(230px, 1fr);
  gap: clamp(28px, 5vw, 64px);
  padding: 28px clamp(24px, 4vw, 46px);
  border: 1px solid rgba(204, 166, 99, .16);
  background:
    radial-gradient(circle at 82% 26%, rgba(189, 143, 69, .12), transparent 32%),
    linear-gradient(135deg, #16130f, #090807 72%);
}
.membership-level-slide.is-active .membership-level-card { animation: privilegeCardIn .58s cubic-bezier(.2,.78,.2,1) both; }
.membership-level-copy h2 { margin: 9px 0 14px; color: #f0e8da; font-size: clamp(24px, 2.7vw, 35px); font-weight: 300; }
.membership-level-copy > p:not(.eyebrow) { color: #c1b5a4; font-size: 13px; }
.current-level-mark { color: #f1d08d; border-color: rgba(216,179,105,.48); }
.membership-benefit-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
  border: 0;
}
.membership-benefit-grid section {
  min-height: 108px;
  gap: 15px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(211, 175, 104, .16);
  background: linear-gradient(145deg, rgba(27, 24, 20, .96), rgba(12, 12, 11, .98));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.membership-benefit-grid section:hover { transform: translateY(-2px); border-color: rgba(211,175,104,.34); background: linear-gradient(145deg, rgba(34, 29, 23, .98), rgba(16, 15, 13, .99)); }
.membership-benefit-grid img { flex-basis: 31px; width: 31px; height: 31px; }
.membership-benefit-grid h3 { margin: 0 0 7px; color: #eee8de; font-size: 14px; font-weight: 500; }
.membership-benefit-grid p { color: #a69e92; font-size: 12px; line-height: 1.65; }
.membership-level-slide.is-active .membership-benefit-grid section { animation: privilegeItemIn .48s both; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(2) { animation-delay: 45ms; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(3) { animation-delay: 90ms; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(4) { animation-delay: 135ms; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(5) { animation-delay: 180ms; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(6) { animation-delay: 225ms; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(7) { animation-delay: 270ms; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(8) { animation-delay: 315ms; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(9) { animation-delay: 360ms; }
.membership-arrow { width: 36px; height: 50px; color: #c19b58; border: 0; background: rgba(207,171,104,.06); transition: background .2s, color .2s; }
.membership-arrow:not(:disabled):hover { color: #f0d394; background: rgba(207,171,104,.14); }
.membership-dots { margin: 19px 0 34px; }
.membership-dots i { width: 17px; }
.membership-dots i.is-active { width: 34px; }

@keyframes privilegeCardIn {
  from { opacity: .35; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes privilegeItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .member-center-page .dashboard-grid { grid-template-columns: 1fr; }
  .member-center-sidebar { width: min(100%, 560px); margin-inline: auto; }
  .member-center-content { width: 100%; }
}

@media (max-width: 760px) {
  .member-card,
  .member-card.regular,
  .member-card.silver,
  .member-card.gold,
  .member-card.diamond { border-radius: 8px; box-shadow: 0 9px 20px rgba(0,0,0,.2); }
  .member-card::after { font-size: clamp(51px, 18vw, 72px); }
  .member-card.regular::after { font-size: clamp(65px, 22vw, 92px); }
  .member-card-content { padding: 7% 8% 6.8%; }
  .card-level-cn { font-size: clamp(14px, 4.4vw, 18px); }
  .card-level-en { font-size: clamp(7px, 2.2vw, 9px); }
  .card-name { margin-top: 5.7%; font-size: clamp(16px, 5vw, 20px); }
  .card-script-image { width: 29%; max-height: 25px; margin-top: 4.8%; }
  .card-progress { max-width: 62%; font-size: clamp(8px, 2.6vw, 10px); }
  .member-center-page { width: min(100% - 28px, 620px); }
  .member-center-page > .page-heading { margin-bottom: 24px; }
  .member-center-page .account-strip { margin-bottom: 22px; }
  .member-center-sidebar .menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 8px 17px; }
  .member-center-sidebar .menu-list a,
  .member-center-sidebar .menu-list button { min-width: 0; min-height: 46px; font-size: 12px; }
  .member-center-sidebar .menu-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .member-center-content > .panel { padding: 24px 18px; }
  .membership-benefits-page > .page-heading { margin-bottom: 22px; }
  .membership-level-tabs { margin-bottom: 20px; }
  .membership-level-card { grid-template-columns: 1fr; gap: 22px; padding: 18px 13px 24px; }
  .membership-level-copy h2 { font-size: 24px; }
  .membership-benefit-grid { grid-template-columns: 1fr; gap: 8px; }
  .membership-benefit-grid section { min-height: 88px; padding: 17px; }
  .membership-benefit-grid img { flex-basis: 28px; width: 28px; height: 28px; }
  .membership-benefit-grid h3 { font-size: 14px; }
  .membership-benefit-grid p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .membership-level-slide.is-active .membership-level-card,
  .membership-level-slide.is-active .membership-benefit-grid section { animation: none !important; }
}

/* 2026-09-17: guest identity, WeChat QR login and invitation journey */
.member-card.guest {
  --card-metal: #d4ad65;
  background:
    radial-gradient(circle at 82% 22%, rgba(205, 166, 95, .14), transparent 31%),
    linear-gradient(118deg, #15120e 0%, #090908 60%, #1b150c 100%);
}
.member-card.guest::after {
  content: "JB";
  right: 7%;
  bottom: -4%;
  color: color-mix(in srgb, var(--card-metal) 13%, transparent);
  font-size: clamp(74px, 10vw, 124px);
  font-style: italic;
}
.member-card.guest .card-script-image { display: none; }
.member-card.guest .card-name { margin-top: 9%; }
.member-card.guest .card-progress { color: rgba(220, 211, 196, .62); }

.login-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 26px 0 24px;
  border-bottom: 1px solid rgba(205, 168, 95, .22);
}
.login-methods[hidden] { display: none; }
.login-methods button {
  position: relative;
  min-height: 42px;
  padding: 0 8px 13px;
  color: #827b71;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  letter-spacing: .08em;
  cursor: pointer;
}
.login-methods button::after {
  content: "";
  position: absolute;
  right: 16%;
  bottom: -1px;
  left: 16%;
  height: 1px;
  background: transparent;
}
.login-methods button.is-active { color: #e6cf9e; }
.login-methods button.is-active::after { background: #c9a15a; }
.login-method-panel[hidden] { display: none; }
.wechat-login-qr {
  min-height: 304px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 1px solid rgba(205, 168, 95, .18);
  background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(205,168,95,.035));
}
.wechat-login-qr img {
  width: 190px;
  height: 190px;
  margin-bottom: 15px;
  padding: 7px;
  object-fit: contain;
  background: #fff;
}
.wechat-login-qr strong { color: #e8dfd1; font-size: 15px; font-weight: 500; letter-spacing: .08em; }
.wechat-login-qr p { margin: 9px 0 18px; color: #8f887d; font-size: 11px; line-height: 1.7; }
.wechat-login-refresh {
  padding: 4px 2px;
  color: #caa766;
  border: 0;
  border-bottom: 1px solid rgba(202,167,102,.42);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}
.wechat-login-open {
  min-width: 188px;
  min-height: 44px;
  margin: 0 0 13px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(205,168,95,.7);
  color: #17130e;
  background: #d0ad69;
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
}
.wechat-login-spinner {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  border: 1px solid rgba(205,168,95,.24);
  border-top-color: #d7b36d;
  border-radius: 50%;
  animation: vipQrSpin .85s linear infinite;
}
@keyframes vipQrSpin { to { transform: rotate(360deg); } }

.join-steps {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 72px;
  border: 0;
  background: transparent;
}
.join-steps::before {
  content: "";
  position: absolute;
  top: 53px;
  right: 12.5%;
  left: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, rgba(180,139,70,.18), rgba(180,139,70,.65), rgba(180,139,70,.18));
}
.join-steps article {
  position: relative;
  min-height: 300px;
  display: grid;
  grid-template-rows: 106px minmax(0, 1fr);
  padding: 0 18px;
  border: 0;
  background: transparent;
  text-align: center;
}
.join-step-mark {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 106px;
  display: grid;
  place-items: start center;
  margin: 0 auto;
}
.join-step-mark span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #b7893e;
  border: 1px solid rgba(173,130,60,.38);
  border-radius: 50%;
  background: #f5f0e6;
  box-shadow: 0 0 0 8px #f5f0e6;
  font: 14px/1 Georgia, serif;
  letter-spacing: .08em;
  transition: color .28s ease, border-color .28s ease, transform .28s ease;
}
.join-step-mark i {
  position: absolute;
  top: 69px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b78a43;
  box-shadow: 0 0 0 5px rgba(183,138,67,.1);
}
.join-steps article:hover .join-step-mark span { color: #74531e; border-color: #b7893e; transform: translateY(-3px); }
.join-step-copy {
  min-height: 208px;
  height: 100%;
  padding: 27px 23px 30px;
  border-top: 1px solid rgba(105,82,47,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.18));
}
.join-step-copy small {
  color: #b08b4d;
  font: 9px/1.4 Arial, sans-serif;
  letter-spacing: .2em;
}
.join-steps .join-step-copy h3 { margin: 13px 0 14px; color: #2f2922; font-size: 17px; font-weight: 500; letter-spacing: .1em; }
.join-steps .join-step-copy p { margin: 0; color: #786f64; font-size: 12px; line-height: 1.9; text-align: left; }

@media (max-width: 760px) {
  .login-card .modal-intro { margin-bottom: 0; }
  .login-methods { margin-top: 20px; }
  .wechat-login-qr { min-height: 286px; padding: 18px; }
  .wechat-login-qr img { width: 178px; height: 178px; }
  .member-card.guest .card-name { margin-top: 7%; }
  .join-steps { grid-template-columns: 1fr; gap: 0; margin-bottom: 44px; }
  .join-steps::before { top: 28px; right: auto; bottom: 35px; left: 27px; width: 1px; height: auto; }
  .join-steps article {
    min-height: 0;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 15px;
    padding: 0 0 21px;
    text-align: left;
  }
  .join-steps article:last-child { padding-bottom: 0; }
  .join-step-mark { width: 56px; height: 56px; margin: 0; }
  .join-step-mark span { width: 46px; height: 46px; margin-left: 4px; box-shadow: 0 0 0 6px #f5f0e6; font-size: 12px; }
  .join-step-mark i { display: none; }
  .join-step-copy { min-height: 0; height: auto; padding: 5px 6px 24px 18px; border-top: 0; border-bottom: 1px solid rgba(105,82,47,.13); background: transparent; }
  .join-steps article:last-child .join-step-copy { border-bottom: 0; }
  .join-steps .join-step-copy h3 { margin: 9px 0 10px; font-size: 16px; }
  .join-steps .join-step-copy p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wechat-login-spinner { animation: none; }
}

/* 2026-09-17: tactile membership card and prestige motion */
.member-card,
.member-card.regular,
.member-card.silver,
.member-card.gold,
.member-card.diamond,
.member-card.guest {
  --card-art: url("/vip-web/assets/member-card/card-regular.png");
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  --card-shine-x: 50%;
  --card-shine-y: 42%;
  border: 1px solid rgba(224, 194, 135, .2);
  border-radius: 13px;
  background-color: #090806;
  background-image:
    linear-gradient(118deg, rgba(255,255,255,.055), transparent 28%, rgba(0,0,0,.08) 69%, rgba(255,221,157,.035)),
    var(--card-art);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 106.5% 113%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.74),
    0 8px 14px -8px rgba(0,0,0,.78),
    0 28px 58px -25px rgba(0,0,0,.72),
    0 42px 92px -56px color-mix(in srgb, var(--card-metal) 46%, transparent);
  transform: perspective(1100px) rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y)) translateZ(0);
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform .42s cubic-bezier(.2,.78,.2,1), box-shadow .42s ease, border-color .42s ease;
  will-change: transform;
}
.member-card.regular,
.member-card.guest { --card-art: url("/vip-web/assets/member-card/card-regular.png"); --card-metal: #d5ad62; }
.member-card.silver { --card-art: url("/vip-web/assets/member-card/card-silver.png"); --card-metal: #e6e7e7; border-color: rgba(224,228,230,.22); }
.member-card.gold { --card-art: url("/vip-web/assets/member-card/card-gold.png"); --card-metal: #dcb35e; border-color: rgba(225,183,98,.32); }
.member-card.diamond {
  --card-art: url("/vip-web/assets/member-card/card-silver.png");
  --card-metal: #e8edef;
  border-color: rgba(217,231,236,.28);
  background-image:
    linear-gradient(118deg, rgba(213,238,246,.07), transparent 30%, rgba(0,0,0,.06) 67%, rgba(226,245,250,.045)),
    var(--card-art);
}
.member-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,248,225,.2), rgba(255,238,198,.055) 13%, transparent 34%),
    linear-gradient(110deg, transparent 3%, rgba(255,255,255,.035) 23%, transparent 39% 66%, rgba(255,226,167,.025) 86%, transparent);
  mix-blend-mode: screen;
  opacity: .5;
  pointer-events: none;
  transition: opacity .38s ease;
}
.member-card::after,
.member-card.regular::after,
.member-card.guest::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 11px;
  background-image:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 20% 74%, rgba(0,0,0,.18)),
    var(--card-art);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 106.5% 113%;
  mix-blend-mode: screen;
  opacity: .14;
  pointer-events: none;
}
.member-card.is-interacting {
  border-color: color-mix(in srgb, var(--card-metal) 43%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.78),
    0 13px 22px -12px rgba(0,0,0,.8),
    0 38px 78px -34px rgba(0,0,0,.82),
    0 40px 92px -55px color-mix(in srgb, var(--card-metal) 65%, transparent);
  transition-duration: .12s;
}
.member-card.is-interacting::before { opacity: .76; }
.member-card-content {
  z-index: 3;
  padding: 7.4% 8.2% 7.2%;
  transform: translateZ(22px);
  backface-visibility: hidden;
}
.card-level-cn { text-shadow: 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.68); }
.card-level-en,
.card-no { text-shadow: 0 1px 4px rgba(0,0,0,.78); }
.card-name { text-shadow: 0 1px 0 rgba(255,255,255,.11), 0 3px 8px rgba(0,0,0,.78); }
.card-script-image { filter: drop-shadow(0 2px 5px rgba(0,0,0,.62)); }
.member-card.silver .card-script-image,
.member-card.diamond .card-script-image { filter: grayscale(1) brightness(1.85) drop-shadow(0 2px 5px rgba(0,0,0,.7)); opacity: .92; }
.member-card.regular .card-script-image,
.member-card.guest .card-script-image { display: none; }
.member-card.guest .card-level-cn { font-size: clamp(13px, 1.16vw, 16px); letter-spacing: .1em; }
.member-card.guest .card-name { margin-top: 8.4%; font-size: clamp(15px, 1.38vw, 18px); letter-spacing: .06em; }
.member-card.guest .card-progress { max-width: 54%; color: rgba(221,214,201,.64); }

.membership-benefits-page { position: relative; isolation: isolate; }
.membership-benefits-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 80px;
  right: -14vw;
  width: 52vw;
  height: 52vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,139,68,.08), transparent 68%);
  pointer-events: none;
  animation: privilegeAmbient 8s ease-in-out infinite alternate;
}
.membership-level-tabs button {
  transition: color .28s ease, letter-spacing .28s ease, text-shadow .28s ease;
}
.membership-level-tabs button.is-active {
  color: #a97d36;
  letter-spacing: .13em;
  text-shadow: 0 5px 18px rgba(176,132,61,.2);
}
.membership-level-tabs button.is-active::after {
  background: linear-gradient(90deg, transparent, #b58a45 22% 78%, transparent);
  box-shadow: 0 0 15px rgba(181,138,69,.32);
  animation: privilegeTabLine .58s cubic-bezier(.2,.78,.2,1) both;
}
.membership-level-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 28px 70px -44px rgba(0,0,0,.92);
}
.membership-level-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -45%;
  background: conic-gradient(from 210deg at 58% 50%, transparent, rgba(207,167,95,.105), transparent 22%, transparent 76%, rgba(255,238,198,.055), transparent);
  transform: rotate(-8deg) scale(1.08);
  pointer-events: none;
}
.membership-level-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(108deg, transparent 25%, rgba(244,218,165,.12) 43%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.membership-level-card > * { position: relative; z-index: 2; }
.membership-level-slide.is-active .membership-level-card {
  animation: privilegeStageIn .72s cubic-bezier(.16,.84,.24,1) both;
}
.membership-level-slide.is-active .membership-level-card::before { animation: privilegeAura 7s ease-in-out infinite alternate; }
.membership-level-slide.is-active .membership-level-card::after { animation: privilegeSweep 1.15s .16s cubic-bezier(.2,.72,.2,1) both; }
.membership-level-slide.is-active .membership-level-copy > * { animation: privilegeCopyIn .62s cubic-bezier(.2,.78,.2,1) both; }
.membership-level-slide.is-active .membership-level-copy > :nth-child(1) { animation-delay: 90ms; }
.membership-level-slide.is-active .membership-level-copy > :nth-child(2) { animation-delay: 150ms; }
.membership-level-slide.is-active .membership-level-copy > :nth-child(3) { animation-delay: 210ms; }
.membership-level-slide.is-active .membership-level-copy > :nth-child(4) { animation-delay: 270ms; }
.membership-benefit-grid section {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.membership-benefit-grid section::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,134,59,.8));
  transition: right .55s cubic-bezier(.2,.78,.2,1);
}
.membership-benefit-grid section:hover::after { right: 0; }
.membership-benefit-grid img { transition: transform .42s cubic-bezier(.2,.78,.2,1), filter .42s ease; }
.membership-benefit-grid section:hover img { transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 7px 12px rgba(148,108,45,.22)); }
.membership-level-slide.is-active .membership-benefit-grid section { animation: privilegeTileIn .62s cubic-bezier(.2,.78,.2,1) both; }
.membership-arrow { transition: color .25s ease, background .25s ease, transform .25s ease; }
.membership-arrow:not(:disabled):hover { transform: translateY(-2px) scale(1.04); }
.membership-dots i { border-radius: 999px; }
.membership-dots i.is-active { box-shadow: 0 0 14px rgba(173,128,54,.28); animation: privilegeDot .55s ease both; }

@keyframes privilegeAmbient {
  from { opacity: .55; transform: translate3d(-2%, -1%, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(3%, 2%, 0) scale(1.05); }
}
@keyframes privilegeStageIn {
  from { opacity: .25; transform: translate3d(0, 22px, 0) scale(.985); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes privilegeAura {
  from { opacity: .38; transform: rotate(-10deg) scale(1.04); }
  to { opacity: .82; transform: rotate(3deg) scale(1.13); }
}
@keyframes privilegeSweep {
  0% { transform: translateX(-125%); opacity: 0; }
  25% { opacity: .85; }
  100% { transform: translateX(125%); opacity: 0; }
}
@keyframes privilegeCopyIn {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes privilegeTileIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes privilegeTabLine {
  from { opacity: 0; transform: scaleX(.1); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes privilegeDot {
  from { transform: scaleX(.45); opacity: .35; }
  to { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 760px) {
  .member-card,
  .member-card.regular,
  .member-card.silver,
  .member-card.gold,
  .member-card.diamond,
  .member-card.guest {
    border-radius: 10px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -1px 0 rgba(0,0,0,.72),
      0 17px 36px -18px rgba(0,0,0,.74);
  }
  .member-card::after,
  .member-card.regular::after,
  .member-card.guest::after { border-radius: 8px; }
  .member-card-content { padding: 7.2% 8.1% 7%; transform: none; }
  .member-card.guest .card-level-cn { font-size: clamp(12px, 3.5vw, 14px); }
  .member-card.guest .card-name { margin-top: 7.5%; font-size: clamp(14px, 4.2vw, 17px); }
  .membership-benefits-page::before { top: 120px; right: -50vw; width: 130vw; height: 130vw; }
  .membership-level-card { overflow: hidden; }
  .membership-level-slide.is-active .membership-level-card { animation-duration: .6s; }
}

@media (prefers-reduced-motion: reduce) {
  .member-card,
  .membership-level-tabs button,
  .membership-benefit-grid img,
  .membership-arrow { transition: none !important; }
  .membership-benefits-page::before,
  .membership-level-slide.is-active .membership-level-card,
  .membership-level-slide.is-active .membership-level-card::before,
  .membership-level-slide.is-active .membership-level-card::after,
  .membership-level-slide.is-active .membership-level-copy > *,
  .membership-level-slide.is-active .membership-benefit-grid section,
  .membership-level-tabs button.is-active::after,
  .membership-dots i.is-active { animation: none !important; }
}

/* 2026-09-17: clean card artwork and lightweight benefit transitions */
.member-card,
.member-card.regular,
.member-card.silver,
.member-card.gold,
.member-card.diamond,
.member-card.guest {
  --card-art: url("/vip-web/assets/member-card/card-regular-clean.svg");
  background-color: #090908;
  background-image: var(--card-art);
  background-position: center;
  background-size: cover;
  border-color: rgba(218, 181, 111, .18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 15px 34px -18px rgba(0,0,0,.82),
    0 32px 62px -38px color-mix(in srgb, var(--card-metal) 34%, transparent);
  transition: transform .28s cubic-bezier(.2,.72,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.member-card.regular,
.member-card.guest { --card-art: url("/vip-web/assets/member-card/card-regular-clean.svg"); }
.member-card.silver { --card-art: url("/vip-web/assets/member-card/card-silver-clean.svg"); }
.member-card.gold { --card-art: url("/vip-web/assets/member-card/card-gold-clean.svg"); }
.member-card.diamond { --card-art: url("/vip-web/assets/member-card/card-diamond-clean.svg"); }
.member-card::before {
  background: radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,248,225,.105), rgba(255,240,206,.028) 15%, transparent 36%);
  mix-blend-mode: normal;
  opacity: .4;
  transition: opacity .24s ease;
}
.member-card::after,
.member-card.regular::after,
.member-card.guest::after {
  inset: 1px;
  border: 1px solid rgba(255,255,255,.045);
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 19% 78%, rgba(0,0,0,.12));
  mix-blend-mode: normal;
  opacity: 1;
}
.member-card.is-interacting {
  border-color: color-mix(in srgb, var(--card-metal) 32%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 18px 38px -20px rgba(0,0,0,.88),
    0 36px 70px -42px color-mix(in srgb, var(--card-metal) 44%, transparent);
}
.member-card.is-interacting::before { opacity: .54; }
.member-card-content { transform: translateZ(13px); }
.card-level-cn,
.card-level-en,
.card-no,
.card-name { text-shadow: 0 1px 4px rgba(0,0,0,.62); }
.card-script-image,
.member-card.regular .card-script-image,
.member-card.guest .card-script-image {
  display: block;
  width: 31%;
  max-height: 31px;
  margin-top: 5.6%;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
  opacity: .9;
}
.member-card.guest .card-name { margin-top: 7.5%; }

.membership-benefits-page::before { animation: none; opacity: .72; }
.membership-level-tabs button:focus { outline: none; }
.membership-level-tabs button:focus-visible { color: #a97d36; text-shadow: 0 4px 14px rgba(176,132,61,.2); }
.membership-viewport { overflow: hidden; }
.membership-track {
  display: block;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}
.membership-level-slide {
  display: none;
  min-width: 0;
  padding: 0;
  opacity: 1;
  contain: layout paint;
}
.membership-level-slide.is-active {
  display: block;
  animation: membershipPanelIn .3s cubic-bezier(.2,.72,.2,1) both;
}
.membership-level-card::before {
  inset: 0;
  background: radial-gradient(circle at 78% 20%, rgba(207,167,95,.07), transparent 38%);
  transform: none;
}
.membership-level-card::after { display: none; }
.membership-level-slide.is-active .membership-level-card,
.membership-level-slide.is-active .membership-level-card::before,
.membership-level-slide.is-active .membership-level-card::after,
.membership-level-slide.is-active .membership-level-copy > *,
.membership-level-slide.is-active .membership-benefit-grid section {
  animation: none !important;
}
@keyframes membershipPanelIn {
  from { opacity: 0; transform: translate3d(14px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

.login-card #send-code {
  padding-inline: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
}
.login-card #login-form > .primary-button {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
}

@media (max-width: 760px) {
  .member-card-content { transform: none; }
  .card-script-image,
  .member-card.regular .card-script-image,
  .member-card.guest .card-script-image { width: 29%; max-height: 24px; margin-top: 4.8%; }
  .login-card #send-code { padding-inline: 11px; font-size: 11px; }
  .login-card #login-form > .primary-button { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .membership-level-slide.is-active { animation: none !important; }
}

/* 2026-09-17: approved PSD membership cards and anchored privilege controls */
.member-card,
.member-card.regular,
.member-card.silver,
.member-card.gold,
.member-card.diamond,
.member-card.guest {
  --card-art: url("/vip-web/assets/member-card/card-regular-source.webp");
  aspect-ratio: 652 / 342;
  overflow: hidden;
  border: 0;
  border-radius: 17px;
  background-color: transparent;
  background-image: var(--card-art);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 14px 28px -16px rgba(0,0,0,.82), 0 26px 52px -34px rgba(0,0,0,.72);
  transition: transform .28s cubic-bezier(.2,.72,.2,1), box-shadow .28s ease;
}
.member-card.regular,
.member-card.guest { --card-art: url("/vip-web/assets/member-card/card-regular-source.webp"); --card-metal: #e4b85d; }
.member-card.silver { --card-art: url("/vip-web/assets/member-card/card-silver-source.webp"); --card-metal: #efefef; }
.member-card.gold { --card-art: url("/vip-web/assets/member-card/card-gold-source.webp"); --card-metal: #e8b85f; }
.member-card.diamond { --card-art: url("/vip-web/assets/member-card/card-diamond-source.webp"); --card-metal: #f1f1f1; }
.member-card::before,
.member-card::after,
.member-card.regular::after,
.member-card.guest::after { display: none; }
.member-card.is-interacting {
  border-color: transparent;
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.88), 0 34px 66px -40px color-mix(in srgb, var(--card-metal) 25%, transparent);
}
.member-card-content {
  z-index: 1;
  padding: 0;
  transform: translateZ(9px);
}
.card-top {
  position: absolute;
  top: 15.8%;
  right: 3.7%;
  left: 9.2%;
  align-items: flex-start;
}
.member-card.regular .card-top,
.member-card.guest .card-top { top: 23.4%; }
.card-level-cn {
  color: var(--card-metal);
  font-size: clamp(15px, 1.65vw, 23px);
  font-weight: 400;
  letter-spacing: .04em;
  text-shadow: none;
}
.card-level-en {
  color: var(--card-metal);
  font-size: clamp(7px, .72vw, 10px);
  font-weight: 400;
  letter-spacing: .02em;
  text-shadow: none;
}
.card-no {
  color: var(--card-metal);
  font-size: clamp(8px, .85vw, 12px);
  font-weight: 400;
  letter-spacing: .025em;
  text-shadow: none;
}
.card-name {
  position: absolute;
  top: 32.5%;
  right: 51%;
  left: 9.2%;
  max-width: 39.8%;
  margin: 0;
  color: var(--card-metal);
  font-size: clamp(15px, 1.7vw, 23px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}
.member-card:not(.guest) .card-name { top: 26.5%; }
.member-card.regular .card-name,
.member-card.guest .card-name { top: 38.5%; margin: 0; }
.card-script-image,
.member-card.regular .card-script-image,
.member-card.guest .card-script-image,
.member-card.silver .card-script-image,
.member-card.gold .card-script-image,
.member-card.diamond .card-script-image { display: none; }
.card-progress {
  position: absolute;
  bottom: 9.2%;
  left: 9.2%;
  max-width: 51%;
  margin: 0;
  color: rgba(229,224,216,.62);
  font-size: clamp(9px, .9vw, 12px);
  letter-spacing: .01em;
}
.member-card.regular .card-progress,
.member-card.guest .card-progress { color: rgba(225,215,196,.63); }

.membership-carousel {
  display: block;
}
.membership-arrow {
  margin-top: 0;
}
.membership-level-slide {
  --benefit-enter-x: 16px;
}
.membership-track[data-direction="-1"] .membership-level-slide { --benefit-enter-x: -16px; }
.membership-level-slide.is-active {
  animation: benefitPanelSwap .36s cubic-bezier(.2,.72,.2,1) both;
}
.membership-level-slide.is-active .membership-level-card {
  animation: benefitHeroReveal .4s cubic-bezier(.2,.72,.2,1) both !important;
}
.membership-level-slide.is-active .membership-benefit-grid section {
  animation: benefitTileReveal .34s cubic-bezier(.2,.72,.2,1) both !important;
}
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(2) { animation-delay: 28ms !important; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(3) { animation-delay: 56ms !important; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(4) { animation-delay: 84ms !important; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(5) { animation-delay: 112ms !important; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(6) { animation-delay: 140ms !important; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(7) { animation-delay: 168ms !important; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(8) { animation-delay: 196ms !important; }
.membership-level-slide.is-active .membership-benefit-grid section:nth-child(9) { animation-delay: 224ms !important; }
@keyframes benefitPanelSwap {
  from { opacity: 0; transform: translate3d(var(--benefit-enter-x),0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes benefitHeroReveal {
  from { opacity: .58; transform: translate3d(0,8px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes benefitTileReveal {
  from { opacity: 0; transform: translate3d(0,9px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@media (max-width: 760px) {
  .member-card,
  .member-card.regular,
  .member-card.silver,
  .member-card.gold,
  .member-card.diamond,
  .member-card.guest { border-radius: 13px; }
  .member-card-content { transform: none; }
  .card-level-cn { font-size: clamp(13px, 4vw, 17px); }
  .card-level-en { font-size: clamp(6px, 2.1vw, 8px); }
  .card-no { font-size: clamp(7px, 2.35vw, 9px); }
  .card-name { font-size: clamp(13px, 4vw, 17px); }
  .card-progress { max-width: 55%; font-size: clamp(8px, 2.55vw, 10px); }
}

@media (prefers-reduced-motion: reduce) {
  .membership-level-slide.is-active,
  .membership-level-slide.is-active .membership-level-card,
  .membership-level-slide.is-active .membership-benefit-grid section { animation: none !important; }
}

/* Member privileges: reveal every card as it enters the viewport. */
.membership-level-slide.is-active .membership-benefit-grid section[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: none !important;
}
.membership-level-slide.is-active .membership-benefit-grid section[data-reveal].is-revealed {
  animation: benefitTileReveal .62s cubic-bezier(.2,.78,.2,1) both !important;
  animation-delay: var(--reveal-delay, 0ms) !important;
}

@media (max-width: 760px) {
  .membership-benefits-page > .account-strip { display: none; }
}

/* 2026-09-17: restrained guest card copy and compact privilege typography */
.member-card.guest .card-name {
  top: 24%;
  margin: 0;
}
.member-card.diamond .card-top > div { gap: 17px; }
.member-card.diamond .card-level-en {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}
.member-card.diamond .card-diamond {
  width: clamp(14px, 1.45vw, 20px);
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
.membership-benefits-page .page-heading > p:last-child {
  font-size: 12px;
  line-height: 1.75;
}
.page-shell .primary-button[data-open-login] {
  min-height: 40px;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
}

@media (max-width: 760px) {
  .member-card.guest .card-name { top: 23%; }
  .member-card.diamond .card-top > div { gap: 11px; }
  .member-card.diamond .card-diamond { width: 14px; }
  .membership-benefits-page .page-heading > p:last-child { font-size: 11px; }
  .page-shell .primary-button[data-open-login] { min-height: 38px; padding: 8px 15px; font-size: 11px; }
}

/* 2026-09-17: mobile membership navigation and direct guest-login affordances */
.member-card.guest {
  cursor: pointer;
}
.member-card.guest .card-name {
  display: inline-flex;
  width: max-content;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(214, 177, 105, .42);
  transition: color .2s ease, border-color .2s ease;
}
.member-card.guest:hover .card-name,
.member-card.guest:focus-visible .card-name {
  color: #e4c684;
  border-color: rgba(228, 198, 132, .86);
}
.privilege-login-link {
  justify-self: start;
  width: max-content;
  padding: 0 0 4px;
  color: #c7a663;
  border: 0;
  border-bottom: 1px solid rgba(199, 166, 99, .46);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .13em;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.privilege-login-link:hover,
.privilege-login-link:focus-visible {
  color: #e4c684;
  border-color: #e4c684;
  outline: none;
}
[data-membership-carousel] {
  touch-action: pan-y;
}

@media (max-width: 680px) {
  .mobile-nav {
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 5px 4px env(safe-area-inset-bottom);
  }
  .mobile-nav a {
    position: relative;
    display: grid;
    grid-template-rows: 24px auto;
    place-items: center;
    align-content: center;
    min-width: 0;
    gap: 4px;
    color: #8e877c;
    text-align: center;
    text-decoration: none;
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: .01em;
  }
  .mobile-nav a::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 22px;
    height: 1px;
    background: transparent;
    transform: translateX(-50%);
  }
  .mobile-nav i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: inherit;
    font-size: 0;
  }
  .mobile-nav svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-nav img {
    display: block;
    width: 21px;
    height: 21px;
    object-fit: contain;
  }
  .mobile-nav a:not(.is-active) img:not(.nav-icon-active) {
    filter: grayscale(1) brightness(.62);
    opacity: .82;
  }
  .mobile-nav a.is-active img {
    filter: none;
    opacity: 1;
  }
  .mobile-nav .nav-icon-active {
    display: none;
  }
  .mobile-nav a.is-active .nav-icon-default.has-active {
    display: none;
  }
  .mobile-nav a.is-active .nav-icon-active {
    display: block;
  }
  .mobile-nav a.is-active,
  .mobile-nav a.is-active i {
    color: var(--gold-light);
  }
  .mobile-nav a.is-active::before {
    background: var(--gold-light);
    box-shadow: 0 0 10px rgba(214, 177, 105, .5);
  }
}

/* 2026-10-08: coupon information hierarchy and compact member coupon archive. */
.coupon-card > div .coupon-threshold {
  display: block;
  color: rgba(28, 22, 13, .74);
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
  white-space: nowrap;
}
.coupon-card .coupon-exchange-points {
  margin: 0 0 12px;
  color: #c49d57;
  font-size: 12px;
  line-height: 1.5;
}
.profile-coupon-panel { padding: 24px; }
.profile-coupon-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}
.profile-coupon-heading h2 { margin: 3px 0 0; font-size: 22px; }
.profile-coupon-heading > span { color: #8e877e; font-size: 11px; }
.profile-coupon-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 330px;
  margin-bottom: 18px;
  border: 1px solid rgba(205,168,95,.25);
}
.profile-coupon-tabs button {
  min-height: 38px;
  border: 0;
  color: #948c81;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}
.profile-coupon-tabs button + button { border-left: 1px solid rgba(205,168,95,.18); }
.profile-coupon-tabs button.is-active { color: #e0c17c; background: rgba(205,168,95,.10); }
.profile-coupon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.coupon-card.coupon-card--compact {
  grid-template-columns: minmax(62px, .42fr) 1fr;
  min-height: 96px;
}
.coupon-card.coupon-card--compact > div { gap: 2px; padding: 10px 7px; }
.coupon-card.coupon-card--compact > div small { font-size: 6px; letter-spacing: .08em; }
.coupon-card.coupon-card--compact > div b { font-size: 16px; line-height: 1.2; }
.coupon-card.coupon-card--compact > div .coupon-threshold { font-size: 7px; }
.coupon-card.coupon-card--compact > section { min-width: 0; padding: 10px 9px; }
.coupon-card.coupon-card--compact h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.coupon-card.coupon-card--compact .coupon-owned-state { font-size: 9px; }
.profile-coupon-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}
.profile-coupon-pagination button {
  min-width: 74px;
  min-height: 34px;
  border: 1px solid rgba(205,168,95,.32);
  color: #cda85f;
  background: rgba(205,168,95,.05);
  font-size: 11px;
  cursor: pointer;
}
.profile-coupon-pagination button:disabled { opacity: .35; cursor: default; }
.profile-coupon-pagination span { color: #8e877e; font-size: 11px; }

/* Keep the full benefits frame aligned; only reduce the membership card itself. */
.membership-level-card .member-card { width: min(100%, 500px); justify-self: center; }

@media (max-width: 1200px) and (min-width: 761px) {
  .profile-coupon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .profile-coupon-panel { padding: 18px 13px; }
  .profile-coupon-heading { align-items: start; margin-bottom: 13px; }
  .profile-coupon-heading h2 { font-size: 18px; }
  .profile-coupon-heading > span { margin-top: 4px; font-size: 9px; }
  .profile-coupon-tabs { max-width: none; margin-bottom: 14px; }
  .profile-coupon-tabs button { min-height: 35px; font-size: 11px; }
  .profile-coupon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .coupon-card.coupon-card--compact { grid-template-columns: 58px minmax(0, 1fr); min-height: 90px; }
  .coupon-card.coupon-card--compact > div { padding: 8px 5px; }
  .coupon-card.coupon-card--compact > div b { font-size: 14px; }
  .coupon-card.coupon-card--compact > section { padding: 8px 7px; }
  .coupon-card.coupon-card--compact h3 { margin-bottom: 6px; font-size: 10px; }
  .coupon-card.coupon-card--compact .coupon-owned-state { font-size: 8px; }
  .membership-level-card .member-card { width: min(88vw, 330px); }
}

/* Customer-service entry shared with the official storefront. */
.vip-customer-service {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 10020;
  width: 70px;
  height: 72px;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.vip-customer-service.is-dragging { cursor: grabbing; }
.vip-customer-service__link {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #cda85f;
  text-decoration: none;
  filter: none;
}
.vip-customer-service__link svg {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vip-customer-service__link b {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  white-space: nowrap;
}
.vip-customer-service__link:hover,
.vip-customer-service__link:focus-visible {
  color: #ecd79f;
  outline: 1px solid rgba(205, 168, 95, .55);
  outline-offset: 3px;
}
.vip-customer-service__close {
  position: absolute;
  top: -4px;
  right: -3px;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(205, 168, 95, .58);
  border-radius: 50%;
  background: rgba(18, 17, 15, .9);
  color: #d8bb78;
  font: 400 14px/1 Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  cursor: pointer;
}
.vip-customer-service__close:hover,
.vip-customer-service__close:focus-visible {
  background: #cda85f;
  color: #171612;
  outline: none;
}

/* Remove only the obsolete oval JennyBrown badge inside membership cards. */
.member-card .card-logo,
.member-card .card-brand-logo,
.member-card .member-card-logo,
.member-card img[src$="/vip-web/assets/brand-logo.png"],
.member-card img[src$="/assets/brand-logo.png"] {
  display: none !important;
}
.member-card::after,
.member-card.regular::after,
.member-card.guest::after {
  content: none !important;
  display: none !important;
}

.membership-benefits-page > .membership-benefits-login {
  margin-top: 30px;
}

@media (max-width: 680px) {
  .vip-customer-service {
    right: 14px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: 64px;
    height: 68px;
  }
  .vip-customer-service__link { gap: 3px; padding: 3px 0; }
  .vip-customer-service__link svg { width: 28px; height: 28px; }
  .vip-customer-service__link b { font-size: 11px; }
  .membership-benefits-page > .membership-benefits-login { margin-top: 22px; }
}

/* 2026-09-18 · two-path membership onboarding and recharge plans */
.join-pathways {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .65fr);
  gap: 18px;
  margin: 0 0 58px;
}
.join-pathways article {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(30px, 4vw, 50px);
  border: 1px solid rgba(151, 116, 59, .2);
  color: #302a22;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(239,232,216,.72));
}
.join-pathways article.is-invitation { min-height: 290px; color: #f2eadb; background: radial-gradient(circle at 82% 18%, rgba(194,151,77,.2), transparent 42%), #11100d; }
.join-pathways article.is-recharge { align-self: center; min-height: 236px; padding: clamp(28px, 3vw, 38px); color: #302a22; background: linear-gradient(150deg, #f7f2e8, #e9dfcd); }
.join-pathways small { color: #ae8647; font: 10px/1.4 Arial,sans-serif; letter-spacing: .2em; }
.join-pathways h2 { margin: 20px 0 14px; font-size: clamp(23px, 2.6vw, 34px); font-weight: 300; letter-spacing: .08em; }
.join-pathways p { max-width: 600px; margin: 0 0 30px; color: #756d61; font-size: 13px; line-height: 2; }
.join-pathways .is-invitation p { color: #b7aea1; }
.join-pathways .is-recharge h2 { font-size: clamp(20px, 2.1vw, 27px); }
.join-pathways .is-recharge p { color: #665d52; }
.join-pathways button { margin-top: auto; }
.invitation-status-button { color: #15110b; border-color: #dfbd78; background: linear-gradient(125deg, #c69a4e, #e2c681); box-shadow: 0 10px 24px rgba(173, 126, 48, .18); }
.invitation-status-button:hover { color: #0f0c08; border-color: #edd397; background: linear-gradient(125deg, #d4ad68, #edd397); }
.join-pathways .recharge-entry-button { color: #694c21; border-color: rgba(139, 99, 39, .46); }
.join-pathways .recharge-entry-button:hover { color: #fffaf0; background: #35291a; border-color: #35291a; }
.join-step-copy { border: 1px solid rgba(146,112,56,.18); border-top-color: #b99050; background: linear-gradient(180deg,#fffdf8,#f0e8da); box-shadow: 0 12px 32px rgba(50,38,20,.055); }
.join-step-copy small { color: #936d2f; }
.join-steps .join-step-copy h3 { color: #1f1b16; }
.join-steps .join-step-copy p { color: #575047; }

.recharge-page { padding-bottom: 110px; }
.recharge-principle { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(340px,1.1fr); gap:clamp(42px,8vw,116px); align-items:center; margin:18px 0 58px; padding:clamp(40px,6vw,72px); border:1px solid rgba(199,160,90,.23); color:#eee6d8; background:radial-gradient(circle at 76% 22%,rgba(188,141,63,.17),transparent 38%),#0d0c0a; }
.recharge-principle h2 { margin:14px 0 0; font-size:clamp(27px,3.8vw,48px); font-weight:300; line-height:1.55; letter-spacing:.07em; }
.recharge-principle h2 em { color:#d0aa64; font-family:Georgia,"Songti SC",serif; font-weight:400; }
.recharge-principle>div:last-child { display:grid; gap:12px; }
.recharge-principle>div:last-child p { margin:0; padding:0 0 12px; border-bottom:1px solid rgba(211,179,116,.12); color:#aaa197; font-size:13px; line-height:1.85; }
.recharge-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.recharge-plan-card { min-width:0; display:flex; flex-direction:column; padding:28px; border:1px solid rgba(157,121,62,.34); color:#1f1a14; background:linear-gradient(155deg,#fffdf9,#f3ead9); box-shadow:0 20px 48px rgba(59,43,20,.09); }
.recharge-plan-card.is-ineligible { opacity:.92; filter:saturate(.78); background:linear-gradient(155deg,#fbf8f1,#e9e0d0); }
.recharge-plan-card header { min-height:112px; padding-bottom:20px; border-bottom:1px solid rgba(116,86,41,.16); }
.recharge-plan-card header small { color:#9c7538; font:10px/1.4 Arial,sans-serif; letter-spacing:.18em; }
.recharge-plan-card header h2 { margin:12px 0 8px; font-size:21px; font-weight:400; line-height:1.5; }
.recharge-plan-card header p { margin:0; color:#5f564b; font-size:12px; }
.recharge-plan-price { padding:24px 0 19px; }
.recharge-plan-price span,.recharge-plan-price small { display:block; color:#665d51; font-size:11px; }
.recharge-plan-price b { display:block; margin:7px 0; color:#17130e; font:400 38px/1 Georgia,"Times New Roman",serif; }
.recharge-plan-price b i { margin-right:4px; color:#a47c3e; font-size:17px; font-style:normal; }
.recharge-plan-level { display:flex; justify-content:space-between; gap:15px; padding:13px 0; border-top:1px solid rgba(116,86,41,.12); border-bottom:1px solid rgba(116,86,41,.12); font-size:12px; }
.recharge-plan-level span { color:#665d51; }.recharge-plan-level b { color:#7f581f; font-weight:600; }
.recharge-plan-rewards { min-height:104px; display:grid; gap:9px; margin:19px 0 24px; padding:0; list-style:none; }
.recharge-plan-rewards li { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; font-size:11px; }
.recharge-plan-rewards li span { padding:3px 6px; color:#886329; border:1px solid rgba(160,121,59,.3); }
.recharge-plan-rewards li b { overflow:hidden; color:#30291f; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.recharge-plan-rewards li small { color:#825b23; }
.recharge-plan-empty { min-height:104px; margin:19px 0 24px; color:#655c50; font-size:11px; line-height:1.8; }
.recharge-plan-card>button { width:100%; margin-top:auto; }
.recharge-plan-card>.primary-button { color:#e8c982; border-color:#b98b42; background:#17130e; box-shadow:0 9px 22px rgba(32,23,12,.14); }
.recharge-plan-card>.primary-button:hover { color:#17130e; border-color:#d5af68; background:#d5af68; }
.recharge-ineligible-button {
  width:100%; min-height:46px; margin-top:auto; padding:11px 16px;
  color:#5d554a; border:1px solid rgba(84,69,48,.42); background:rgba(255,255,255,.62);
  font:500 12px/1.4 var(--font-body); letter-spacing:.08em; cursor:not-allowed;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}
.recharge-service-note { display:grid; grid-template-columns:120px 1fr; gap:22px; margin-top:28px; padding:22px 26px; border-top:1px solid rgba(123,93,47,.18); }
.recharge-service-note b { color:#987137; font-weight:500; letter-spacing:.1em; }.recharge-service-note p { margin:0; color:#746d63; font-size:12px; line-height:1.9; }
.recharge-history{margin-top:42px;padding-top:34px;border-top:1px solid rgba(123,93,47,.2)}
.recharge-history>header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}
.recharge-history>header h2{margin:7px 0 0;font-size:24px;font-weight:400;letter-spacing:.08em}
.recharge-history>header>small{color:#81786c;font-size:11px}
.recharge-history-list{display:grid;gap:10px}
.recharge-history-list article{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(180px,.8fr) minmax(150px,.7fr) auto;gap:22px;align-items:center;padding:18px 20px;border:1px solid rgba(124,91,43,.15);background:rgba(255,253,248,.72)}
.recharge-history-main{display:flex;align-items:center;gap:13px;min-width:0}.recharge-history-main>div{min-width:0}.recharge-history-main b,.recharge-history-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recharge-history-main b{font-size:13px;font-weight:500}.recharge-history-main small{margin-top:5px;color:#968c7e;font-size:10px;letter-spacing:.04em}
.recharge-history-status{flex:none;padding:4px 7px;border:1px solid currentColor;font-size:10px;letter-spacing:.08em}.recharge-history-status.is-paid{color:#8b682d}.recharge-history-status.is-pending{color:#846c4a}.recharge-history-status.is-closed{color:#aaa297}
.recharge-history-meta,.recharge-history-value{display:grid;gap:5px}.recharge-history-meta span,.recharge-history-value small{color:#8d8376;font-size:11px}.recharge-history-value b{font-size:13px;font-weight:500}.recharge-history-list .outline-button{min-width:92px;padding:10px 15px;font-size:11px}
.recharge-history-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}.recharge-history-pagination button{appearance:none;min-width:78px;padding:9px 14px;border:1px solid rgba(134,98,43,.28);background:transparent;color:#665b4d;font-size:11px;cursor:pointer}.recharge-history-pagination button:disabled{opacity:.35;cursor:default}.recharge-history-pagination span{color:#8b8174;font-size:11px}

.birthday-benefit-panel {
  margin-top:18px; overflow:hidden; border:1px solid rgba(160,122,59,.25);
  color:#201b15; background:linear-gradient(150deg,#fffdf8 0%,#f2e9d9 100%);
  box-shadow:0 24px 54px rgba(55,39,17,.08);
}
.birthday-benefit-panel>header {
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding:32px 36px 26px; border-bottom:1px solid rgba(119,87,39,.14);
}
.birthday-benefit-panel>header h2 { margin:10px 0 0; font-size:clamp(22px,2.6vw,34px); font-weight:400; letter-spacing:.07em; }
.birthday-member-meta { display:grid; gap:5px; text-align:right; }
.birthday-member-meta span { color:#3b3227; font:400 14px/1.4 Georgia,"Times New Roman",serif; letter-spacing:.08em; }
.birthday-member-meta small { color:#92703a; font-size:10px; letter-spacing:.12em; }
.birthday-reward-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.birthday-reward-item {
  min-width:0; min-height:250px; display:flex; flex-direction:column; gap:19px; padding:28px 30px;
  border-right:1px solid rgba(119,87,39,.12);
}
.birthday-reward-item:last-child { border-right:0; }
.birthday-reward-item small { color:#977137; font-size:9px; line-height:1.6; letter-spacing:.13em; }
.birthday-reward-item h3 { margin:8px 0 7px; font-size:17px; font-weight:500; line-height:1.55; }
.birthday-reward-item p { margin:0; color:#766d60; font-size:12px; line-height:1.75; }
.birthday-reward-visual { height:132px; display:grid; place-items:center; padding:6px; overflow:hidden; background:transparent; }
.birthday-reward-visual img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 13px 14px rgba(48,34,14,.13)); }
.birthday-reward-symbol {
  width:76px; height:76px; display:grid; place-items:center; border:1px solid rgba(183,142,71,.48); border-radius:50%;
  color:#bd9148; background:radial-gradient(circle,rgba(202,160,85,.12),transparent 68%);
  font:400 27px/1 "Noto Serif SC","Songti SC",serif;
}
.birthday-benefit-panel>footer {
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  padding:25px 36px; color:#eee6d8; background:#13110e;
}
.birthday-benefit-panel>footer b { display:block; color:#d5b36f; font-size:14px; font-weight:500; letter-spacing:.08em; }
.birthday-benefit-panel>footer p { max-width:720px; margin:7px 0 0; color:#aaa196; font-size:12px; line-height:1.75; }
.birthday-benefit-panel>footer .primary-button,
.birthday-benefit-panel>footer .outline-button { flex:none; min-width:160px; }
.birthday-state { flex:none; min-width:150px; padding:12px 18px; border:1px solid rgba(208,171,100,.4); color:#d6b777; text-align:center; font-size:12px; letter-spacing:.08em; }
@media(max-width:980px){.recharge-plan-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .join-pathways,.recharge-principle{grid-template-columns:1fr}
  .join-pathways article{min-height:230px;padding:28px 23px}
  .join-pathways h2{font-size:24px}
  .join-pathways p{font-size:12px}
  .join-step-copy{border-width:0 0 1px;background:transparent;box-shadow:none}
  .recharge-principle{gap:28px;margin-bottom:38px;padding:34px 24px}
  .recharge-plan-grid{grid-template-columns:1fr}
  .recharge-plan-card{padding:24px 21px}
  .birthday-benefit-panel>header { align-items:flex-start; padding:24px 20px 20px; }
  .birthday-member-meta { padding-top:3px; }
  .birthday-reward-list { grid-template-columns:1fr; }
  .birthday-reward-item { min-height:0; display:grid; grid-template-columns:78px 1fr; align-items:center; gap:16px; padding:21px 20px; border-right:0; border-bottom:1px solid rgba(119,87,39,.12); }
  .birthday-reward-item:last-child { border-bottom:0; }
  .birthday-reward-visual { width:82px; height:82px; padding:3px; }
  .birthday-reward-symbol { width:64px; height:64px; }
  .birthday-benefit-panel>footer { align-items:stretch; flex-direction:column; gap:18px; padding:23px 20px; }
  .birthday-benefit-panel>footer .primary-button,
  .birthday-benefit-panel>footer .outline-button,
  .birthday-state { width:100%; min-width:0; }
  .recharge-service-note{grid-template-columns:1fr;gap:8px;padding:20px 4px}
  .recharge-history>header{align-items:start;flex-direction:column;gap:6px}.recharge-history-list article{grid-template-columns:1fr auto;gap:13px 16px;padding:17px 15px}.recharge-history-main{grid-column:1/-1}.recharge-history-meta{grid-column:1}.recharge-history-value{grid-column:2;text-align:right}.recharge-history-list .outline-button{grid-column:1/-1;width:100%}
}

.recharge-payment-modal{width:min(92vw,540px);text-align:center;padding:42px 38px 34px}
.recharge-payment-modal .modal-close{top:16px;right:16px}
.recharge-payment-copy{max-width:420px;margin:12px auto 26px;color:var(--muted);line-height:1.85;font-size:14px}
.recharge-payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 20px}
.recharge-payment-methods button{appearance:none;border:1px solid rgba(194,153,83,.28);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));color:inherit;border-radius:2px;padding:20px 16px;display:grid;justify-items:center;gap:8px;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.recharge-payment-methods button:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(194,153,83,.09)}
.recharge-payment-methods b{font-size:16px;letter-spacing:.08em}
.recharge-payment-methods small{font-size:11px;color:var(--muted);line-height:1.6}
.payment-method-mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px}
.payment-method-mark.is-wechat{background:#08b35a}.payment-method-mark.is-alipay{background:#1677ff}
.recharge-payment-qr{width:230px;height:230px;padding:10px;background:#fff;margin:22px auto 12px;display:grid;place-items:center}
.recharge-payment-qr img,.recharge-payment-qr canvas{max-width:210px!important;max-height:210px!important}
.recharge-payment-amount{display:block;color:var(--gold);font-family:var(--serif);font-size:32px;margin:10px 0 5px}
.recharge-payment-modal.is-loading{min-height:260px;display:grid;place-items:center;align-content:center;gap:16px}
.recharge-payment-success .recharge-success-mark{width:58px;height:58px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;color:var(--gold);font-size:28px}
@media(max-width:640px){
  .recharge-payment-modal{padding:36px 20px 28px}
  .recharge-payment-methods{grid-template-columns:1fr}
  .recharge-payment-methods button{grid-template-columns:44px 1fr;text-align:left;justify-items:start;align-items:center;column-gap:13px;padding:15px}
  .recharge-payment-methods b,.recharge-payment-methods small{grid-column:2}
  .recharge-payment-methods b{grid-row:1}.recharge-payment-methods small{grid-row:2;margin-top:-20px}
  .payment-method-mark{grid-row:1 / span 2}
}

/*
 * Keep the nickname in one fixed vertical band on every member-card instance.
 * Using a band with flex centring avoids the previous combination of percentage
 * offsets, margins and translateY producing a different visual position on the
 * home, member-centre and benefit cards.
 */
.member-card:not(.guest) .card-name {
  top: 31.2%;
  right: 51%;
  left: 9.2%;
  width: auto;
  height: 11.2%;
  max-width: 39.8%;
  margin: 0;
  display: flex;
  align-items: center;
  transform: none;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.35vw, 18px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
}
.member-card.regular:not(.guest) .card-name { top: 37.1%; }

/* Composite birthday benefits: contained product art and visualised assets. */
.birthday-reward-item .birthday-reward-visual {
  width: 100%;
  height: auto;
  min-height: 188px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 12px 20px;
  overflow: visible;
  background: transparent;
}
.birthday-reward-item .birthday-reward-visual > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
.birthday-reward-symbol.birthday-coupon-ticket,
.birthday-reward-symbol.birthday-cash-packet {
  position: relative;
  width: 104px;
  height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  border-radius: 0;
}
.birthday-reward-symbol.birthday-coupon-ticket {
  clip-path: polygon(0 0,100% 0,100% 38%,94% 50%,100% 62%,100% 100%,0 100%,0 62%,6% 50%,0 38%);
  border: 0;
  color: #231a0c;
  background: linear-gradient(135deg,#e7ca88,#b8893e);
}
.birthday-reward-symbol.birthday-cash-packet {
  border: 1px solid rgba(191,148,75,.76);
  color: #ead29b;
  background: linear-gradient(145deg,#17130e,#4f3a1e);
  box-shadow: inset 0 0 0 4px rgba(8,6,4,.2);
}
.birthday-reward-symbol.birthday-cash-packet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(32deg,transparent 49%,rgba(216,176,102,.22) 50%,transparent 51%),linear-gradient(-32deg,transparent 49%,rgba(216,176,102,.22) 50%,transparent 51%);
  pointer-events: none;
}
.birthday-reward-symbol b {
  position: relative;
  z-index: 1;
  max-width: 90%;
  font: 500 13px/1.3 var(--font-display);
  text-align: center;
}
.birthday-reward-symbol i {
  position: relative;
  z-index: 1;
  font: normal 8px/1 var(--font-body);
  letter-spacing: .16em;
}

/* Birthday physical-gift choice and claim history. */
.birthday-fulfillment-modal {
  width: min(560px, 100%);
  padding: 42px 40px 36px;
}
.birthday-fulfillment-copy {
  margin: 13px 0 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
.birthday-shipping-note {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 15px;
  padding: 18px 19px;
  border: 1px solid rgba(197,156,84,.24);
  background: linear-gradient(135deg,rgba(197,156,84,.1),rgba(255,255,255,.018));
}
.birthday-shipping-note b {
  color: var(--gold);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
}
.birthday-shipping-note span {
  color: #b8afa1;
  font-size: 12px;
  line-height: 1.75;
}
.birthday-fulfillment-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 25px;
}
.birthday-record-panel { min-width: 0; }
.birthday-record-panel .panel-intro { margin: -8px 0 24px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.birthday-record-list { display: grid; gap: 18px; }
.birthday-record-card {
  overflow: hidden;
  border: 1px solid rgba(186,145,72,.2);
  background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.birthday-record-card>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid rgba(186,145,72,.14);
}
.birthday-record-card>header small { color: var(--gold); font-size: 8px; letter-spacing: .18em; }
.birthday-record-card>header h3 { margin: 7px 0 0; font: 400 17px/1.45 var(--font-display); letter-spacing: .06em; }
.birthday-record-card>header>span { flex: none; color: var(--muted); font-size: 10px; }
.birthday-record-card>section {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0,1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(186,145,72,.1);
}
.birthday-record-card>section>b { color: #d8c29b; font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.birthday-record-products,
.birthday-record-assets { display: grid; gap: 10px; min-width: 0; }
.birthday-record-products>span { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 11px; }
.birthday-record-products img { width: 46px; height: 46px; object-fit: contain; background: transparent; }
.birthday-record-products em,
.birthday-record-assets em { color: #e5dfd5; font-size: 12px; font-style: normal; line-height: 1.6; }
.birthday-record-assets>span { display: grid; gap: 3px; }
.birthday-record-assets small { color: var(--muted); font-size: 10px; }
.birthday-record-status {
  align-self: center;
  padding: 7px 10px;
  border: 1px solid rgba(185,145,73,.3);
  color: #d8b976;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.birthday-record-status.is-in_cart { color: #d8c9ad; }
.birthday-record-card>footer { padding: 0; }
.birthday-record-card>footer button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 22px; border: 0; color: #bdb3a3; background: rgba(0,0,0,.12); cursor: pointer;
  font: inherit; text-align: left;
}
.birthday-record-card>footer button:hover { color: var(--gold); background: rgba(187,145,74,.07); }
.birthday-record-card>footer b { color: #d5b66d; font-size: 11px; font-weight: 500; }
@media(max-width:760px){
  .member-card:not(.guest) .card-name {
    top: 31.2%;
    height: 11.2%;
    font-size: clamp(11px, 3.5vw, 14px);
  }
  .member-card.regular:not(.guest) .card-name { top: 37.1%; }
  .birthday-reward-symbol.birthday-coupon-ticket,
  .birthday-reward-symbol.birthday-cash-packet { width: 64px; height: 58px; gap: 4px; }
  .birthday-reward-symbol b { font-size: 9px; }
  .birthday-reward-symbol i { font-size: 6px; }
  .birthday-reward-item .birthday-reward-visual {
    width:82px;
    height:82px;
    min-height:0;
    aspect-ratio:1;
    padding:3px;
    overflow:visible;
  }
  .birthday-fulfillment-modal { padding: 35px 20px 27px; }
  .birthday-shipping-note { grid-template-columns: 1fr; gap: 7px; }
  .birthday-fulfillment-actions { grid-template-columns: 1fr; }
  .birthday-record-card>header { align-items: flex-start; padding: 18px 16px 15px; }
  .birthday-record-card>section { grid-template-columns: 70px minmax(0,1fr); gap: 12px; padding: 16px; }
  .birthday-record-status { grid-column: 2; justify-self: start; }
  .birthday-record-card>footer button { padding: 14px 16px; }
}

/* 2026-09-21: member-centre landing composition. */
.member-center-heading {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(360px, 520px);
  align-items: center;
  gap: clamp(34px, 6vw, 86px);
  margin-bottom: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(218,184,117,.16);
}
.member-center-heading > div { min-width: 0; }
.member-center-heading .eyebrow { margin-bottom: 12px; }
.member-center-heading h1 {
  margin: 0;
  color: #f3eee5;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 300;
  letter-spacing: .075em;
}
.member-center-heading .member-card {
  width: min(100%, 520px);
  margin: 0;
  justify-self: end;
}
.member-center-page .dashboard-grid.is-landing { grid-template-columns: minmax(0, 1fr); }
.member-center-page .dashboard-grid.is-landing .member-center-sidebar { width: 100%; }
.member-center-page .dashboard-grid.is-landing .menu-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  margin-top: 0;
}

/* Keep the name discreet and vertically centred between the level and script. */
.member-card:not(.guest) .card-name { font-size: clamp(9px, .95vw, 13px); }

@media (max-width: 760px) {
  .member-center-heading {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 22px;
    padding-bottom: 24px;
  }
  .member-center-heading h1 { font-size: 30px; }
  .member-center-heading .member-card {
    width: min(100%, 430px);
    justify-self: center;
  }
  .member-center-page .dashboard-grid.is-landing .menu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }
  .member-card:not(.guest) .card-name { font-size: clamp(8px, 2.5vw, 10px); }
}

/* 2026-09-21: show the next eligible sample tier without implying the campaign is closed. */
.sample-level-notice {
  display: grid;
  grid-template-columns: minmax(180px, .62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: 8px 36px;
  margin: -8px 0 28px;
  padding: 22px 26px;
  border: 1px solid rgba(201, 164, 92, .28);
  background: linear-gradient(118deg, rgba(190, 145, 65, .12), rgba(18, 17, 15, .72));
}
.sample-level-notice small {
  grid-row: 1 / span 2;
  color: #c9a55e;
  font: 10px Georgia, serif;
  letter-spacing: .23em;
}
.sample-level-notice h3 {
  margin: 0;
  color: #f1ece3;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .08em;
}
.sample-level-notice p {
  margin: 0;
  color: #aaa094;
  font-size: 12px;
  line-height: 1.8;
}
.product-card.is-level-locked { border-color: rgba(201, 164, 92, .2); }
.product-card.is-level-locked .product-image img { filter: saturate(.88); }
.product-card.is-level-locked .product-stock {
  color: #d7ba7b;
  background: rgba(18, 16, 13, .82);
}
.product-card.is-level-locked .product-action:disabled {
  color: #b8a17a;
  border-color: rgba(184, 161, 122, .45);
  opacity: 1;
}

@media (max-width: 760px) {
  .sample-level-notice {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 20px;
    padding: 19px 18px;
  }
  .sample-level-notice small { grid-row: auto; }
  .sample-level-notice h3 { font-size: 16px; }
}

/* 2026-09-21: one consistent icon grid for every member-centre state. */
.member-center-page .dashboard-grid,
.member-center-page .dashboard-grid.is-landing,
.member-center-page .dashboard-grid.has-content {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.member-center-page .member-center-sidebar {
  width: 100%;
  margin: 0;
}
.member-center-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(210, 174, 103, .18);
  background: rgba(210, 174, 103, .16);
}
.member-center-menu a,
.member-center-menu button {
  min-width: 0;
  min-height: 112px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 18px 12px;
  border: 0;
  color: #c8c0b5;
  background: linear-gradient(145deg, rgba(18,17,15,.98), rgba(12,12,11,.98));
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color .22s ease, background-color .22s ease;
}
.member-center-menu a:hover,
.member-center-menu a:focus-visible,
.member-center-menu button:hover,
.member-center-menu button:focus-visible,
.member-center-menu a.is-active,
.member-center-menu button.is-active {
  color: #e0bf7b;
  background: linear-gradient(145deg, rgba(42,34,22,.98), rgba(17,15,12,.98));
  outline: none;
}
.member-center-menu a.is-active::after,
.member-center-menu button.is-active::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 0;
  left: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cfa75c, transparent);
}
.member-center-menu svg {
  width: 25px;
  height: 25px;
  color: #ba9350;
}
.member-center-menu span {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-center-menu .member-center-logout {
  grid-column: 1 / -1;
  min-height: 88px;
}
.member-center-page .member-center-content { width: 100%; scroll-margin-top: 90px; }

/* Asset records expand in place beneath the four account cards. Keeping this
   section in normal flow lets the navigation below move naturally instead of
   replacing the member-centre landing page. */
.member-center-page .account-strip.has-open-detail { margin-bottom: 24px; }
.member-center-asset-detail {
  margin: 0 0 42px;
  overflow: hidden;
  transform-origin: top center;
  animation: memberAssetDetailReveal .36s cubic-bezier(.22,.72,.22,1) both;
}
.member-center-asset-detail > .panel {
  margin: 0;
  border-color: #d7ccbb;
  box-shadow: 0 18px 42px rgba(35,28,18,.08);
}
.member-center-page .dashboard-grid + .member-center-asset-detail { margin-top: 24px; }
@keyframes memberAssetDetailReveal {
  from { opacity: 0; transform: translateY(-12px) scaleY(.96); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

@media (max-width: 760px) {
  .member-center-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-center-menu a,
  .member-center-menu button { min-height: 92px; gap: 9px; padding: 14px 5px; }
  .member-center-menu svg { width: 22px; height: 22px; }
  .member-center-menu span { font-size: 10px; letter-spacing: 0; }
  .member-center-page .member-center-content { scroll-margin-top: 72px; }
  .member-center-page .account-strip.has-open-detail { margin-bottom: 16px; }
  .member-center-asset-detail { margin-bottom: 28px; }
}

/* Points redemption and quarterly samples: keep transparent PNG artwork
   transparent, reduce visual noise and fit four benefits across on desktop. */
.product-card--points .product-image,
.product-card--samples .product-image {
  background: transparent;
}
.product-card--points .product-image::after,
.product-card--samples .product-image::after {
  display: none;
}
.product-card--points .product-image img,
.product-card--samples .product-image img {
  padding: 8%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.product-card--points .product-body,
.product-card--samples .product-body {
  padding: 17px 16px;
  text-align: center;
}
.product-card--points .product-market-price,
.product-card--samples .product-market-price {
  justify-content: center;
  margin-bottom: 11px;
}
.product-card--points .product-body h3,
.product-card--samples .product-body h3 {
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.55;
}
.product-card--points .product-body p,
.product-card--samples .product-body p {
  min-height: 2.9em;
  margin-bottom: 13px;
  font-size: 11px;
  line-height: 1.5;
}
.product-card--points .product-meta,
.product-card--samples .product-meta {
  gap: 9px;
  padding-top: 12px;
}
.product-card--points .product-price,
.product-card--samples .product-price {
  font-size: 13px;
  line-height: 1.35;
}
.product-card--points .product-price small,
.product-card--samples .product-price small {
  margin-bottom: 3px;
  font-size: 9px;
}
.product-card--points .product-action,
.product-card--samples .product-action {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 12px;
  white-space: nowrap;
}
.activation-success-logo {
  display: block;
  width: clamp(118px, 17vw, 156px);
  height: auto;
  margin: 0 auto 20px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(201, 158, 77, .16));
}

@media (min-width: 981px) {
  .privilege-page > .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 680px) {
  .product-card--points .product-body,
  .product-card--samples .product-body {
    padding: 14px 12px;
  }
  .product-card--points .product-body h3,
  .product-card--samples .product-body h3 {
    font-size: 13px;
  }
  .product-card--points .product-meta,
  .product-card--samples .product-meta {
    align-items: stretch;
    flex-direction: column;
  }
  .product-card--points .product-action,
  .product-card--samples .product-action {
    width: 100%;
  }
}

/* 2026-09-21: birthday gifts share the restrained, transparent product-card
   presentation used by points redemption and quarterly samples. */
.birthday-benefit-panel {
  border-color: rgba(201, 158, 77, .2);
  color: #eee7db;
  background: transparent;
  box-shadow: none;
}
.birthday-benefit-panel > header { border-bottom-color: rgba(201,158,77,.16); }
.birthday-benefit-panel > header h2 {
  color:#f0e6d3;
  font:400 clamp(24px,2.6vw,35px)/1.25 var(--font-display);
  letter-spacing:.06em;
}
.birthday-benefit-panel .eyebrow,
.birthday-reward-item small,
.birthday-member-meta small { color:#c9a45f; }
.birthday-member-meta span { color:#e6dccb; }
.birthday-reward-item { border-color:rgba(201,158,77,.14); }
.birthday-reward-item h3 { color:#eee5d6; }
.birthday-reward-item p { color:#aaa195; }
.birthday-benefit-panel .empty-state { color:#aaa195; background:rgba(255,255,255,.018); }
.birthday-benefit-panel .empty-state h3,
.birthday-benefit-panel .empty-state h2 { color:#eee5d6; }
.birthday-benefit-panel > footer { border-top:1px solid rgba(201,158,77,.14); background:rgba(0,0,0,.2); }
.birthday-reward-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.birthday-reward-item {
  min-height: 0;
  gap: 13px;
  padding: 22px 20px 24px;
  background: transparent;
}
.birthday-reward-item .birthday-reward-visual {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 8%;
  overflow: visible;
  background: transparent;
}
.birthday-reward-asset {
  width:100%;
  aspect-ratio:1 / 1;
  display:grid;
  place-items:center;
}
.birthday-reward-copy { min-width:0; }
.birthday-reward-copy h3 {
  min-height:44px;
  display:flex;
  align-items:flex-start;
}
.birthday-reward-item .birthday-reward-visual > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: transparent !important;
  filter: drop-shadow(0 12px 14px rgba(48,34,14,.12));
}
.birthday-reward-item h3 { font-size: 14px; }
.birthday-reward-item p { font-size: 11px; }
.birthday-reward-item.birthday-reward-coupon,
.birthday-reward-item.birthday-reward-packet {
  justify-content: flex-start;
}

@media (min-width: 761px) {
  .birthday-reward-copy { text-align:center; }
  .birthday-reward-copy > small { display:block; text-align:center; }
  .birthday-reward-copy h3 {
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .birthday-reward-copy p { text-align:center; }
}

.birthday-reward-symbol.birthday-coupon-ticket,
.birthday-reward-symbol.birthday-cash-packet { margin:0 auto; }
.birthday-reward-symbol.birthday-cash-packet {
  isolation:isolate;
  width:104px;
  height:76px;
  border:1px solid rgba(218,184,117,.62);
  border-radius:7px;
  color:#f3d994;
  background:linear-gradient(145deg,#8f211d 0%,#651511 48%,#3f0c0a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px rgba(46,4,3,.18);
}
.birthday-reward-symbol.birthday-cash-packet::before {
  z-index:-1;
  inset:0 0 auto;
  height:39%;
  background:linear-gradient(160deg,rgba(255,218,146,.15),rgba(255,255,255,0));
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.birthday-reward-symbol.birthday-cash-packet::after {
  position:absolute;
  z-index:0;
  left:50%;
  bottom:7px;
  width:30px;
  height:14px;
  background:url('/vip-web/assets/brand-logo.png') center/contain no-repeat;
  content:"";
  transform:translateX(-50%);
}
.birthday-reward-symbol.birthday-cash-packet b {
  position:absolute;
  top:26px;
  left:50%;
  font:500 19px/1 var(--font-display);
  transform:translate(-50%,-50%);
}
.birthday-reward-symbol.birthday-cash-packet i { display:none; }

/* Annual red-packet privilege: dynamic totals, current claim and next unlock. */
.annual-gift-status {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(201,158,77,.24);
  color: #eee7db;
  background: linear-gradient(145deg,#11100e 0%,#17130e 58%,#211a10 100%);
  box-shadow: 0 26px 60px rgba(0,0,0,.24);
}
.annual-gift-status > header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 32px;
  padding: 31px 34px 27px;
  border-bottom: 1px solid rgba(201,158,77,.16);
}
.annual-gift-status > header small {
  color: #c9a45f;
  font-size: 9px;
  letter-spacing: .17em;
}
.annual-gift-status > header h2 {
  margin: 10px 0 7px;
  color: #f0e6d3;
  font: 400 clamp(24px,2.6vw,35px)/1.25 var(--font-display);
  letter-spacing: .06em;
}
.annual-gift-status > header p,
.annual-gift-status > header span,
.annual-gift-status > header b {
  margin: 0;
  color: #a9a093;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
}
.annual-gift-status > header > div:last-child {
  display: grid;
  gap: 6px;
  min-width: 230px;
  text-align: right;
}
.annual-gift-status > header b { color: #d6ba7d; }
.annual-packet-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.annual-packet-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 86px minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 26px 25px;
  border-right: 1px solid rgba(201,158,77,.13);
  border-bottom: 1px solid rgba(201,158,77,.13);
}
.annual-packet-card:nth-child(3n) { border-right: 0; }
.annual-packet-symbol {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 82px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(218,184,117,.62);
  border-radius: 7px;
  color: #f3d994;
  background: linear-gradient(145deg,#8f211d 0%,#651511 48%,#3f0c0a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(46,4,3,.18);
}
.annual-packet-symbol::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 39%;
  background: linear-gradient(160deg,rgba(255,218,146,.15),rgba(255,255,255,0));
  clip-path: polygon(0 0,100% 0,50% 100%);
}
.annual-packet-symbol::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 7px;
  width: 28px;
  height: 13px;
  background: url('/vip-web/assets/brand-logo.png') center/contain no-repeat;
  transform: translateX(-50%);
}
.annual-packet-symbol span,
.annual-packet-symbol b { position: absolute; z-index: 1; }
.annual-packet-symbol span {
  left: calc(50% - 25px);
  top: 27px;
  font-size: 11px;
  line-height: 1;
  transform: translateY(-50%);
}
.annual-packet-symbol b {
  left: 50%;
  top: 27px;
  font: 500 21px/1 var(--font-display);
  transform: translate(-50%,-50%);
}
.annual-packet-card small { color: #b99451; font-size: 8px; letter-spacing: .13em; }
.annual-packet-card h3 { margin: 7px 0 5px; font-size: 15px; font-weight: 400; line-height: 1.45; }
.annual-packet-card p { margin: 0; color: #968e82; font-size: 10px; line-height: 1.65; }
.annual-packet-claim {
  appearance:none; min-width:92px; padding:10px 13px; border:1px solid rgba(201,158,77,.5);
  color:#17120b; background:#c9a45f; font:500 10px/1.35 var(--font-body); letter-spacing:.07em; cursor:pointer;
}
.annual-packet-claim:hover { color:#0f0d0a; background:#dfbd79; border-color:#dfbd79; }
.annual-packet-claim:disabled { color:#8d8477; background:transparent; border-color:rgba(201,158,77,.2); cursor:not-allowed; }
.annual-gift-status > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 23px 34px;
  background: rgba(0,0,0,.2);
}
.annual-gift-status > footer p { max-width: 720px; margin: 0; color: #aaa195; font-size: 11px; line-height: 1.8; }
.annual-gift-status > footer .primary-button { flex: none; min-width: 170px; }

/* Annual-gift hero: make the member tier and quota label readable without
   competing with the monetary figure. */
.privilege-identity span {
  color: #d1ae69;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 400;
  letter-spacing: .11em;
}
.privilege-identity small {
  color: #aaa196;
  font-family: var(--font-display);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 400;
  letter-spacing: .06em;
}

@media (max-width: 980px) {
  .birthday-reward-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .birthday-reward-item:nth-child(2n) { border-right: 0; }
  .annual-packet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .annual-packet-card:nth-child(3n) { border-right: 1px solid rgba(201,158,77,.13); }
  .annual-packet-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 760px) {
  .birthday-reward-list { grid-template-columns: 1fr; }
  .birthday-reward-item {
    grid-template-columns: 108px minmax(0,1fr);
    gap: 22px;
    padding: 20px;
  }
  .birthday-reward-item .birthday-reward-visual {
    width: 108px;
    height: 108px;
    aspect-ratio: 1;
    padding: 4px;
  }
  .birthday-reward-asset { width:108px; height:108px; aspect-ratio:1; }
  .birthday-reward-copy { min-width:0; padding-left:2px; }
  .birthday-reward-symbol.birthday-coupon-ticket,
  .birthday-reward-symbol.birthday-cash-packet { width:78px; height:58px; }
  .birthday-reward-symbol.birthday-cash-packet b { top:21px; font-size:16px; }
  .birthday-reward-symbol.birthday-cash-packet::after { bottom:5px; width:24px; height:11px; }
  .birthday-reward-symbol.birthday-coupon-ticket b { font-size:11px; }
  .birthday-reward-copy h3 { min-height:0; }
  .annual-gift-status > header {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 25px 20px 22px;
  }
  .annual-gift-status > header > div:last-child { min-width: 0; text-align: left; }
  .annual-packet-grid { grid-template-columns: 1fr; }
  .annual-packet-card,
  .annual-packet-card:nth-child(3n),
  .annual-packet-card:nth-child(2n) { grid-template-columns:72px minmax(0,1fr); border-right: 0; }
  .annual-packet-symbol { width:68px; height:64px; }
  .annual-packet-symbol span { left: calc(50% - 22px); top: 25px; }
  .annual-packet-symbol b { top: 25px; font-size: 19px; }
  .annual-packet-symbol::after { bottom: 6px; width: 23px; height: 10px; }
  .annual-packet-claim { grid-column:1/-1; width:100%; }
  .annual-gift-status > footer {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    padding: 21px 20px;
  }
  .annual-gift-status > footer .primary-button { width: 100%; min-width: 0; }
}

/* 2026-09-22: mobile top menu keeps the header anchored while the page
   glides down to reveal a compact privilege directory. */
.mobile-menu-toggle,
.mobile-top-menu { display: none; }

@media (max-width: 680px) {
  .site-header {
    grid-template-columns: 48px 1fr 72px;
    position: sticky;
    top: 0;
  }
  .site-header .brand { grid-column: 1; }
  .site-header .header-actions { grid-column: 3; }
  .mobile-menu-toggle {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 58px;
    min-height: 48px;
    display: grid;
    place-content: center;
    gap: 4px;
    padding: 5px 8px;
    border: 0;
    color: #d8c49a;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }
  .mobile-menu-toggle > span {
    width: 18px;
    height: 12px;
    display: grid;
    align-content: space-between;
    margin: 0 auto;
  }
  .mobile-menu-toggle i {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform .24s ease, opacity .18s ease;
  }
  .mobile-menu-toggle b {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .13em;
  }
  .mobile-menu-toggle.is-open i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .mobile-menu-toggle.is-open i:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle.is-open i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .mobile-top-menu {
    position: fixed;
    z-index: 89;
    top: 62px;
    left: 0;
    right: 0;
    height: 232px;
    display: block;
    overflow: hidden;
    color: #eee5d6;
    background:
      radial-gradient(circle at 50% 0, rgba(201, 158, 77, .12), transparent 58%),
      linear-gradient(180deg, #17130f, #0d0c0a);
    border-bottom: 1px solid rgba(201, 158, 77, .23);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-18px);
    transition: opacity .26s ease, transform .34s cubic-bezier(.22,.72,.24,1), visibility .26s;
  }
  .mobile-top-menu > div {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);
    padding: 14px;
  }
  .mobile-top-menu a {
    min-width: 0;
    display: grid;
    place-content: center;
    gap: 7px;
    padding: 12px 5px;
    border-right: 1px solid rgba(201, 158, 77, .12);
    border-bottom: 1px solid rgba(201, 158, 77, .12);
    text-align: center;
  }
  .mobile-top-menu a:nth-child(3n) { border-right: 0; }
  .mobile-top-menu a:nth-child(n+4) { border-bottom: 0; }
  .mobile-top-menu small { color: #9c8969; font-size: 7px; letter-spacing: .14em; }
  .mobile-top-menu span { font-size: 13px; letter-spacing: .08em; }
  .mobile-top-menu a.is-active span { color: #e2c27f; }
  .mobile-top-menu a.is-active small { color: #c9a45f; }
  #app-view,
  .site-footer {
    transition: transform .34s cubic-bezier(.22,.72,.24,1);
    will-change: transform;
  }
  body.has-mobile-top-menu .mobile-top-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  body.has-mobile-top-menu #app-view,
  body.has-mobile-top-menu .site-footer { transform: translateY(232px); }
}

/* Keep benefit redemption surfaces consistent with the annual-gift module:
   warm black, restrained gold edge and a soft depth cue instead of flat black. */
.product-card--points,
.product-card--samples,
.birthday-benefit-panel {
  color: #eee7db;
  border-color: rgba(201, 158, 77, .24);
  background:
    radial-gradient(circle at 92% 4%, rgba(201, 158, 77, .1), transparent 38%),
    linear-gradient(145deg, #11100e 0%, #17130e 58%, #211a10 100%);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .2);
}
.product-card--points .product-image,
.product-card--samples .product-image { background: rgba(255, 255, 255, .025); }
.product-card--points .product-body,
.product-card--samples .product-body { background: rgba(0, 0, 0, .1); }
.birthday-benefit-panel .birthday-reward-item { background: rgba(255, 255, 255, .018); }

@media (prefers-reduced-motion: reduce) {
  .mobile-top-menu,
  .mobile-menu-toggle i,
  #app-view,
  .site-footer { transition-duration: .01ms !important; }
}

/* Keep privilege content flush with the mobile header. This late override is
   intentionally placed after the legacy responsive layers. */
@media (max-width: 680px) {
  .privilege-page { padding-top: 0; }
}

/* 2026-09-22: five-column desktop privilege catalog and unified account login. */
.login-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.login-card .form-stack input::placeholder {
  color: #746e65;
  font-size: 11px;
  letter-spacing: .01em;
}
.login-assist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.login-assist button {
  appearance: none;
  padding: 0;
  border: 0;
  color: #c8a45f;
  background: transparent;
  font-size: inherit;
  cursor: pointer;
}
.login-assist button:hover,
.login-assist button:focus-visible { color: #ead49f; outline: none; }
.login-card [data-send-reset-code] {
  min-width: 132px;
  padding-inline: 14px;
  border: 1px solid #c29a54;
  color: #17130e;
  background: #c29a54;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
}
.login-card [data-send-reset-code]:disabled { opacity: .55; cursor: wait; }

@media (min-width: 981px) {
  .privilege-level-stage > .product-grid,
  .privilege-level-stage > .coupon-grid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .privilege-page > .product-grid,
  .privilege-page .privilege-level-stage > .product-grid,
  .birthday-reward-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .annual-level-stage > .annual-gift-status {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  /* Points has four rule cards while the other privilege pages have three.
     Give the four-card variant a complete row so the grid background cannot
     appear as two pale, empty cells beside “兑换记录”. */
  .privilege-page .privilege-rules:has(> article:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Restrained hierarchy for privilege pages.  These late, page-scoped rules
   intentionally override the shared display-heading scale without changing
   headings elsewhere on the site. */
.privilege-page .privilege-hero__copy h2 {
  font-size: clamp(34px, 3.6vw, 48px);
}
.privilege-page .collection-heading h2 {
  font-size: clamp(20px, 1.9vw, 27px);
}
.privilege-page .privilege-coupon-heading h2 {
  font-size: clamp(19px, 1.8vw, 25px);
}
.birthday-page .birthday-benefit-panel > header h2 {
  font-size: clamp(18px, 1.7vw, 23px);
}

@media (max-width: 680px) {
  .privilege-page .privilege-hero__copy h2 { font-size: 35px; }
  .privilege-page .collection-heading h2 { font-size: 20px; }
  .privilege-page .privilege-coupon-heading h2 { font-size: 19px; }
  .birthday-page .birthday-benefit-panel > header h2 { font-size: 18px; }
  .privilege-page .privilege-switch-zone > .collection-heading,
  .privilege-page .privilege-switch-zone > .subsection > .privilege-coupon-heading {
    width: calc(100% - 28px);
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
  }
}

/* Side arrows are positioned outside the content frame. Keep this page-level
   wrapper visible so it does not clip them; the body still owns viewport
   overflow clipping and protects the mobile bottom navigation. */
.privilege-page { overflow-x: visible; }
.privilege-page .privilege-rules {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.privilege-page .privilege-rules article { min-width: 0; }

@media (max-width: 680px) {
  .mobile-menu-toggle {
    top: 50%;
    height: 62px;
    min-height: 62px;
    align-content: center;
    gap: 5px;
    padding-block: 0;
  }
  .mobile-menu-toggle > span { flex: none; }
  .mobile-menu-toggle b { line-height: 1; }
  .login-card .form-stack input::placeholder { font-size: 10px; }
  .login-card [data-send-reset-code] { min-width: 116px; padding-inline: 10px; font-size: 11px; }
}

/* 2026-10-08: compact privilege coupons and point-red-packet assets. */
.privilege-page .coupon-grid { gap: 12px; }
.privilege-page .coupon-card {
  grid-template-columns: minmax(96px, .32fr) 1fr;
  min-height: 132px;
}
.privilege-page .coupon-card > div { padding: 16px 12px; }
.privilege-page .coupon-card > div b { font-size: 21px; }
.privilege-page .coupon-card > section { padding: 17px 18px; }
.privilege-page .coupon-card h3 { margin-bottom: 5px; font-size: 14px; line-height: 1.45; }
.privilege-page .coupon-card p { margin-bottom: 12px; font-size: 11px; line-height: 1.6; }
.privilege-page .point-red-packet-visual {
  display: grid;
  place-items: center;
  color: #f1d79b;
  background:
    radial-gradient(circle at 50% 42%, rgba(154,55,39,.22), transparent 58%),
    linear-gradient(145deg, #2b1712, #120e0c 74%);
}
.privilege-page .point-red-packet-card {
  border-color: rgba(181,132,69,.32);
  border-radius: 4px;
  background: linear-gradient(135deg, #15100d, #0d0c0b 72%);
}
.privilege-page .point-red-packet-visual::before,
.privilege-page .point-red-packet-visual::after { display: none; }
.privilege-page .point-red-packet-visual .birthday-cash-packet {
  width: 92px;
  height: 68px;
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(46,4,3,.3);
}

.annual-gift-status.is-preview > header h2 {
  font-size: clamp(18px, 1.9vw, 24px);
  letter-spacing: .045em;
}
.annual-gift-status.is-preview > header .annual-status-quota {
  color: #d4c5ad;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .035em;
}

.membership-level-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.15vw, 29px);
  line-height: 1.35;
}

@media (min-width: 981px) {
  .privilege-page .coupon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .privilege-page .coupon-card { grid-template-columns: 92px 1fr; min-height: 120px; }
  .privilege-page .coupon-card > div,
  .privilege-page .coupon-card > section { padding: 14px 12px; }
  .privilege-page .coupon-card h3 { font-size: 13px; }
  .privilege-page .coupon-card p { font-size: 10px; }
  .privilege-page .point-red-packet-visual .birthday-cash-packet { width: 78px; height: 58px; }
  .privilege-page .point-red-packet-visual .birthday-cash-packet b { top: 20px; font-size: 15px; }
  .privilege-page .point-red-packet-visual .birthday-cash-packet::after { bottom: 4px; width: 23px; height: 10px; }
  .annual-gift-status.is-preview > header h2 { font-size: 18px; }
  .annual-gift-status.is-preview > header .annual-status-quota { font-size: 13px; }
  .membership-level-copy h2 { font-size: 21px; }
  .annual-level-stage > .annual-gift-status {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}

/* 2026-10-09: keep the mobile tier switch inside the same visual boundary
   as the benefit cards.  The guide and both controls share one stable row,
   so the controls no longer overlap products, coupons or the viewport edge. */
@media (max-width: 680px) {
  .privilege-switch-guide {
    width: 100%;
    min-height: 50px;
    display: block;
    margin: 0 0 18px;
  }
  .privilege-switch-guide .privilege-swipe-hint {
    min-width: 0;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }
  .privilege-switch-guide .privilege-swipe-hint span { width: 36px; }
  .privilege-switch-guide .privilege-swipe-hint em { font-size: 9px; letter-spacing: .07em; }
  .privilege-switch-guide .privilege-level-controls {
    position: static;
    width: 100%;
    height: 50px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    transform: none;
    pointer-events: auto;
  }
  .privilege-switch-guide .privilege-level-arrow,
  .privilege-switch-guide .privilege-level-arrow.is-previous,
  .privilege-switch-guide .privilege-level-arrow.is-next {
    position: static;
    width: 36px;
    height: 50px;
    padding: 0 0 2px;
    color: #c19b58;
    border: 0;
    background: rgba(207,171,104,.06);
    font-size: 27px;
    transform: none;
  }
  .privilege-switch-guide .privilege-level-arrow-placeholder {
    width: 36px;
    height: 50px;
  }
  .privilege-switch-guide .privilege-level-arrow:focus-visible {
    color: #f0d394;
    background: rgba(207,171,104,.14);
    transform: none;
  }
  .privilege-level-stage > .empty-state {
    width: 100%;
    padding: 46px 18px;
  }
}

/* The former mobile card width used 88vw inside an already inset page shell.
   On narrow screens that child was wider than its parent and pushed the
   membership-benefits page past the viewport. */
@media (max-width: 760px) {
  .membership-benefits-page,
  .membership-level-tabs,
  .membership-carousel,
  .membership-viewport,
  .membership-track,
  .membership-level-slide,
  .membership-level-card,
  .membership-benefit-grid {
    min-width: 0;
    max-width: 100%;
  }
  .membership-carousel,
  .membership-viewport,
  .membership-level-card,
  .membership-benefit-grid { width: 100%; }
  .membership-level-card .member-card {
    width: min(100%, 330px);
    max-width: 100%;
  }
  .membership-benefit-grid section,
  .membership-benefit-grid section > div { min-width: 0; }
  .membership-benefit-grid h3,
  .membership-benefit-grid p { overflow-wrap: anywhere; }
  .membership-benefits-page::before {
    top: 120px;
    right: 0;
    width: 100%;
    height: min(130vw, 520px);
    border-radius: 0;
    background: radial-gradient(circle at 100% 46%, rgba(184,139,68,.08), transparent 68%);
  }
  .membership-arrow.is-prev { left: -10px; }
  .membership-arrow.is-next { right: -10px; }
}

/* 2026-10-09: benefit artwork must fill the complete visual frame.
   This final override intentionally follows the historical contain-fit rules. */
.product-card--points .product-image img,
.product-card--samples .product-image img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}
.birthday-reward-item .birthday-reward-visual {
  padding: 0 !important;
  overflow: hidden !important;
}
.birthday-reward-item .birthday-reward-visual > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
}
.birthday-reward-price {
  justify-content: center;
  margin: 2px 0 0;
  color: #d1aa62;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 760px) {
  .birthday-reward-price {
    justify-content: flex-start;
    font-size: 12px;
    text-align: left;
  }
}

/* 2026-10-12: calmer spacing for the home brand lockup and manifesto. */
.hero-copy .eyebrow { margin-bottom: 26px; }
.hero-copy h1 span { margin-top: 22px; line-height: 1.45; }
.club-manifesto h2 { line-height: 1.72; }
.club-manifesto h2 em { display: block; margin-top: 12px; }

/* Tier controls keep a restrained but unmistakable pressed response. */
.privilege-level-arrow:active,
.membership-arrow:active {
  color: #fff1cb;
  border-color: rgba(222, 188, 122, .86);
  background: rgba(205, 168, 95, .18);
  transform: scale(.9);
}

@media (max-width: 680px) {
  .hero-copy .eyebrow { margin-bottom: 22px; }
  .hero-copy h1 span { margin-top: 18px; line-height: 1.5; }
  .club-manifesto h2 { line-height: 1.76; }
  .club-manifesto h2 em { margin-top: 10px; }
}

/* 2026-10-11 · final typography and palette for joining and member recharge. */
.join-page,
.recharge-page {
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100% - 1220px) / 2));
  padding-left: max(24px, calc((100% - 1220px) / 2));
  color: #ded8ce;
  background:
    radial-gradient(circle at 86% 4%, rgba(192, 148, 73, .12), transparent 32%),
    linear-gradient(180deg, #12110e 0%, #0b0b09 68%, #090908 100%);
}
.join-page .page-heading,
.recharge-page .page-heading { border-bottom-color: rgba(205, 168, 95, .19); }
.join-page .page-heading h1,
.recharge-page .page-heading h1,
.join-page h2,
.join-page h3,
.recharge-page h2,
.recharge-page h3 { font-family: var(--font-display); }
.join-page .page-heading h1,
.recharge-page .page-heading h1 { color: #f0ebe2; font-weight: 300; }
.join-page .page-heading p,
.recharge-page .page-heading p { color: #9c958b; }
.join-page p,
.join-page button,
.recharge-page p,
.recharge-page button { font-family: var(--font-body); }

.join-intro {
  border-color: rgba(205, 168, 95, .2);
  color: #eee7dc;
  background: radial-gradient(circle at 82% 16%, rgba(194, 151, 77, .16), transparent 40%), #11100d;
}
.join-intro > p { color: #aaa197; }
.join-pathways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.join-pathways article,
.join-pathways article.is-invitation,
.join-pathways article.is-recharge {
  min-height: 276px;
  align-self: stretch;
  color: #efe8dc;
  border-color: rgba(205, 168, 95, .22);
  background:
    radial-gradient(circle at 90% 4%, rgba(190, 144, 66, .14), transparent 42%),
    linear-gradient(145deg, rgba(27, 23, 17, .98), rgba(10, 10, 8, .99));
  box-shadow: 0 24px 54px rgba(0, 0, 0, .2);
}
.join-pathways article h2,
.join-pathways article.is-recharge h2 { color: #eee7dc; font-size: clamp(23px, 2.45vw, 32px); }
.join-pathways article p,
.join-pathways article.is-invitation p,
.join-pathways article.is-recharge p { color: #aaa197; }
.join-pathways .recharge-entry-button { color: #dec17f; border-color: rgba(218, 181, 111, .55); }
.join-pathways .recharge-entry-button:hover { color: #17130e; border-color: #d6b26a; background: #d6b26a; }
.join-step-copy,
.join-steps article {
  color: #dcd5ca;
  border-color: rgba(205, 168, 95, .17);
  background: rgba(21, 19, 15, .82);
  box-shadow: none;
}
.join-steps .join-step-copy h3 { color: #e9e2d8; }
.join-steps .join-step-copy p { color: #979087; }
.membership-validity,
.join-invitation-cta {
  color: #e9e2d8;
  border-color: rgba(205, 168, 95, .2);
  background: linear-gradient(145deg, rgba(25, 22, 17, .94), rgba(11, 10, 8, .98));
}
.membership-validity p,
.join-invitation-cta p { color: #9e978e; }

.recharge-principle { margin-top: 8px; }
.recharge-plan-card,
.recharge-plan-card.is-ineligible {
  color: #e7dfd3;
  border-color: rgba(205, 168, 95, .25);
  background:
    radial-gradient(circle at 92% 0, rgba(190, 144, 66, .13), transparent 38%),
    linear-gradient(150deg, #1a1712, #0d0c0a);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .24);
}
.recharge-plan-card.is-ineligible { opacity: .72; }
.recharge-plan-card header { border-bottom-color: rgba(205, 168, 95, .16); }
.recharge-plan-card header h2,
.recharge-plan-rewards li b { color: #eee7dc; }
.recharge-plan-card header p,
.recharge-plan-price span,
.recharge-plan-price small,
.recharge-plan-level span,
.recharge-plan-empty { color: #999188; }
.recharge-plan-price b { color: #f0e9dd; }
.recharge-plan-level { border-color: rgba(205, 168, 95, .14); }
.recharge-plan-level b { color: #d2ad67; }
.recharge-ineligible-button { color: #928a7f; border-color: rgba(205, 168, 95, .25); background: rgba(255, 255, 255, .025); }
.recharge-service-note,
.recharge-history { border-color: rgba(205, 168, 95, .18); }
.recharge-service-note p,
.recharge-history > header > small,
.recharge-history-meta span,
.recharge-history-value small { color: #918a81; }
.recharge-history-list article { border-color: rgba(205, 168, 95, .16); background: rgba(20, 18, 14, .82); }
.recharge-history-main b,
.recharge-history-value b { color: #ddd6cb; }
.recharge-history-pagination button { color: #bcb2a5; border-color: rgba(205, 168, 95, .28); }

@media (max-width: 760px) {
  .join-page,
  .recharge-page { padding-right: 20px; padding-left: 20px; }
  .join-pathways { grid-template-columns: 1fr; }
  .join-pathways article,
  .join-pathways article.is-invitation,
  .join-pathways article.is-recharge { min-height: 0; padding: 30px 24px; }
  .join-step-copy,
  .join-steps article { background: transparent; }
}

/* 2026-10-12 · align member-centre and joining-page hierarchy with the
   finalized privilege pages without changing their layout or behaviour. */
.member-center-page > .page-heading h1,
.profile-guest > .page-heading h1,
.member-center-heading h1,
.join-page > .page-heading h1 { font-size: clamp(30px, 3.35vw, 44px); }

.profile-guest .invitation-status-card h2 {
  margin: 11px 0 15px;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: .055em;
}

.join-step-mark span {
  color: #f1dca8;
  border-color: rgba(213, 173, 99, .78);
  background: linear-gradient(145deg, #2c2216, #15110c);
  box-shadow: 0 0 0 8px #0f0e0c, 0 10px 28px rgba(0,0,0,.28);
}
.join-steps article:hover .join-step-mark span {
  color: #fff1c9;
  border-color: #dfbd78;
}

@media (max-width: 760px) {
  .member-center-page > .page-heading h1,
  .profile-guest > .page-heading h1,
  .member-center-heading h1,
  .join-page > .page-heading h1 { font-size: 28px; }
  .profile-guest .invitation-status-card h2 { font-size: 20px; }
}