@font-face { font-family: MembershipDisplay; src: url("/assets/templates/membership-display.ttf") format("truetype"); font-style: normal; font-weight: 900; font-display: swap; }
.membership-brand b, .membership-hero h1, .membership-step h2, .membership-cta, .membership-reward b { font-family: MembershipDisplay, ui-rounded, system-ui, sans-serif; }
.share-home.membership-home { padding: 0px; position: relative; isolation: isolate; background: rgb(255, 249, 242); color: rgb(72, 40, 59); font-family: ui-rounded, "Hiragino Maru Gothic ProN", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.membership-home::before { content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; background: url("/assets/templates/membership-dots.webp") 0% 0% / 192px 192px repeat; opacity: 0.43; }
.membership-landing { width: 100%; max-width: 430px; margin: auto; padding: 46px 18px 30px; min-height: 100svh; }
.membership-header { display: flex; align-items: center; gap: 13px; min-height: 47px; }
.long-brand .membership-brand b { font-size: 21px; line-height: 1.4; }
.membership-brand { min-width: 0px; }
.membership-back { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; background: rgb(255, 250, 246); border: 1.5px solid rgb(247, 204, 209); border-radius: 14px; box-shadow: rgb(238, 219, 212) 0px 3px; color: rgb(72, 40, 59); text-decoration: none; }
.membership-brand { display: flex; gap: 9px; align-items: center; }
.membership-brand > img { width: 46px; height: 46px; object-fit: contain; }
.membership-brand b { overflow-wrap: anywhere; display: block; font-size: 28px; line-height: 1.15; letter-spacing: -1.6px; font-weight: 950; }
.membership-brand b span { color: rgb(238, 75, 131); }
.membership-brand p { margin: 5px 0px 0px; color: rgb(139, 113, 142); font-size: 12px; letter-spacing: 2px; }
.membership-hero { position: relative; min-height: 183px; padding-top: 43px; margin-bottom: 9px; }
.membership-hero h1 { position: relative; z-index: 1; margin: 0px; font-size: 37px; line-height: 1.22; font-weight: 950; letter-spacing: -1.8px; }
.membership-hero h1 > span { font-size: 28px; white-space: nowrap; letter-spacing: -1.5px; }
.long-reward .membership-hero strong { font-size: 42px; }
.membership-hero strong { font-size: 55px; color: rgb(220, 39, 110); line-height: 1; font-weight: 950; letter-spacing: -3px; vertical-align: -3px; }
.membership-hero > p { position: relative; z-index: 1; margin: 12px 0px 0px; font-size: 12px; color: rgb(137, 113, 142); letter-spacing: -0.3px; }
.membership-mascot { position: absolute; right: -14px; bottom: 0px; width: 163px; height: 153px; object-fit: contain; z-index: 0; }
.membership-hero h1 { max-width: 245px; }
.membership-step { border: 1.5px solid rgb(249, 197, 206); border-radius: 23px; padding: 17px 12px; box-shadow: rgb(242, 223, 218) 0px 4px; background: rgba(255, 250, 246, 0.88); margin-bottom: 14px; }
.membership-step-first { background: rgb(255, 240, 243); border-color: rgb(238, 151, 178); }
.membership-step-heading { display: flex; align-items: center; gap: 12px; padding: 0px 3px; }
.membership-number { display: grid; place-items: center; position: relative; width: 48px; height: 45px; color: rgb(246, 81, 139); flex-shrink: 0; }
.membership-number > svg { width: 51px; height: 51px; transform: rotate(-8deg); }
.membership-number > b { font-family: MembershipDisplay, system-ui; position: absolute; top: 9px; left: 0px; right: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 23px; font-weight: 900; transform: rotate(-8deg); }
.membership-step h2 { font-size: 26px; line-height: 1.35; margin: 0px; font-weight: 900; letter-spacing: -0.7px; }
.membership-step > p { margin: 6px 0px 15px 63px; font-size: 13px; line-height: 1.6; color: rgb(136, 113, 141); white-space: nowrap; letter-spacing: 0px; }
.membership-cta { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 65px; padding: 11px 10px; border-radius: 21px; text-decoration: none; border: 1.5px solid rgb(230, 76, 128); font-size: 23px; font-weight: 900; line-height: 1.35; letter-spacing: -0.5px; transition: transform 0.15s, box-shadow 0.15s; }
.membership-publish { background: rgb(251, 96, 150); color: rgb(255, 249, 241); box-shadow: rgb(216, 67, 120) 0px 4px; }
.membership-publish > img { width: 40px; height: 40px; object-fit: contain; border-radius: 9px; }
.membership-arrow { display: grid; place-items: center; width: 27px; height: 27px; background: rgb(255, 250, 243); border-radius: 50%; color: rgb(239, 81, 138); flex-shrink: 0; }
.membership-arrow svg { width: 20px; height: 20px; }
.membership-submit { background: rgb(255, 250, 245); color: rgb(120, 41, 64); box-shadow: rgb(232, 144, 168) 0px 4px; font-size: 21px; gap: 10px; }
.membership-link-icon { width: 40px; height: 40px; color: rgb(160, 51, 87); flex-shrink: 0; }
.membership-submit .membership-arrow { background: rgb(247, 86, 139); color: rgb(255, 250, 244); }
.membership-cta:active { transform: translateY(3px); box-shadow: none; }
.membership-cta:focus-visible, .membership-back:focus-visible { outline: rgb(118, 43, 80) solid 3px; outline-offset: 5px; }
.membership-cta[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.membership-cta:disabled { cursor: wait; opacity: 0.7; }
.membership-step-second { padding-top: 16px; padding-bottom: 17px; }
.membership-step-second > p { margin-bottom: 15px; }
.membership-reward { display: flex; align-items: center; gap: 12px; min-height: 84px; border: 1.5px solid rgb(248, 217, 152); background: rgb(255, 247, 223); border-radius: 22px; padding: 12px 15px; margin-top: 17px; }
.membership-reward > img { width: 78px; height: 70px; object-fit: contain; flex-shrink: 0; margin: -8px -8px -8px -5px; }
.membership-reward b { font-size: 16px; white-space: nowrap; font-weight: 900; letter-spacing: -0.7px; }
.membership-reward strong { font-size: 32px; color: rgb(217, 49, 115); line-height: 1; font-weight: 950; vertical-align: -2px; }
.membership-reward p { margin: 6px 0px 0px; font-size: 13px; color: rgb(143, 120, 140); letter-spacing: 0.3px; }
.membership-footer { display: flex; align-items: center; justify-content: center; gap: 9px; color: rgb(142, 117, 146); font-size: 12px; margin-top: 22px; }
.membership-footer svg { width: 12px; height: 12px; color: rgb(243, 97, 145); }
.membership-footer > span { width: 20px; border-top: 1px solid rgb(243, 188, 192); }
@media (max-width: 365px) {.long-reward .membership-hero strong { font-size: 32px; }
.membership-landing { padding: 28px 14px 25px; }
.membership-hero h1 { font-size: 29px; }
.membership-hero h1 > span { font-size: 23px; }
.membership-hero strong { font-size: 44px; }
.membership-mascot { width: 120px; height: 120px; right: -12px; bottom: 40px; }
.membership-hero > p { font-size: 10.5px; }
.membership-step h2 { font-size: 22px; }
.membership-step > p { font-size: 11px; letter-spacing: -0.5px; margin-left: 58px; }
.membership-cta { font-size: 18px; gap: 8px; }
.membership-submit { font-size: 15.5px; }
.membership-link-icon { width: 32px; height: 32px; }
.membership-submit .membership-arrow { width: 24px; height: 24px; }
.membership-reward { padding: 12px 10px; gap: 8px; }
.membership-reward > img { width: 58px; height: 60px; }
.membership-reward b { font-size: 13px; }
.membership-reward p { font-size: 11px; }}
.membership-qr-dialog { box-sizing: border-box; width: min(350px, -32px + 100vw); max-height: calc(-40px + 100dvh); padding: 0px; border: 2px solid rgb(242, 178, 197); border-radius: 28px; background: rgb(255, 249, 242); color: rgb(72, 40, 59); box-shadow: rgba(72, 40, 59, 0.25) 0px 16px 70px; overflow: auto; font-family: system-ui, -apple-system, "PingFang SC", sans-serif; }
.membership-qr-dialog::backdrop { background: rgba(61, 36, 50, 0.55); backdrop-filter: blur(5px); }
.membership-qr-card { position: relative; padding: 28px 23px 24px; text-align: center; }
.membership-qr-close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgb(242, 204, 212); border-radius: 50%; background: rgb(255, 246, 247); color: rgb(152, 96, 120); cursor: pointer; }
.membership-qr-close:focus-visible { outline: rgb(160, 51, 87) solid 3px; outline-offset: 2px; }
.membership-qr-badge { display: inline-flex; align-items: center; gap: 6px; color: rgb(164, 78, 112); font-size: 13px; font-weight: 700; }
.membership-qr-card h2 { margin: 13px 0px 10px; font-size: 27px; line-height: 1.4; }
.membership-qr-card h2 span { color: rgb(214, 55, 119); }
.membership-qr-card > p { margin: 0px; color: rgb(140, 113, 128); font-size: 13px; line-height: 1.8; }
.membership-qr-image { margin: 20px auto 18px; padding: 12px; width: 230px; max-width: 100%; box-sizing: border-box; border: 1px solid rgb(244, 217, 222); border-radius: 18px; background: rgb(255, 255, 255); min-height: 150px; display: grid; place-items: center; }
.membership-qr-image img { display: block; width: 100%; height: auto; object-fit: contain; }
.membership-qr-image p { font-size: 13px; line-height: 1.8; color: rgb(152, 96, 120); }
.membership-qr-card ol { text-align: left; margin: 0px; padding-left: 20px; font-size: 12px; color: rgb(140, 113, 128); line-height: 2; }
.membership-submit:disabled { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {.membership-cta { transition: none; }}
.membership-home *{box-sizing:border-box}.membership-page-title{font-size:28px;font-weight:900;line-height:1.25;overflow-wrap:anywhere;letter-spacing:-1px;color:#48283b}.membership-publish .heart-button-label{flex:1;text-align:center}.membership-publish .heart-platform-icon{width:32px;height:32px;object-fit:contain;flex-shrink:0}.membership-cta{cursor:pointer}.membership-step-second .membership-cta>svg:first-child{width:32px;height:32px;flex-shrink:0}.membership-step-second .submission-button-label{flex:1}.membership-qr-image img{max-width:100%;height:auto}.membership-landing #share-status{margin:8px 0 0}.membership-home .membership-brand strong{font-family:MembershipDisplay,system-ui,sans-serif}.membership-home .membership-header{padding:0}.membership-home .membership-footer{display:flex}
/* Customer card: a bounded image keeps tall uploads from stretching the dialog. */
.membership-qr-dialog{width:min(354px,calc(100vw - 32px));max-height:calc(100dvh - 32px);max-height:calc(100svh - 32px);border:1px solid #efb9cb;border-radius:26px;box-shadow:0 20px 70px #47283b40;overscroll-behavior:contain;outline:none}
.membership-qr-card{padding:22px 22px 18px;background:radial-gradient(circle at 10% 0,#ffe7ed 0,transparent 140px),linear-gradient(180deg,#fff9f4,#fffdf9);overflow:hidden}
.membership-qr-close{top:12px;right:12px;width:29px;height:29px;background:#fff;border-color:#f0d5dd;color:#a77285;z-index:2}.membership-qr-close svg{width:16px;height:16px}.membership-qr-close:hover{background:#fff0f5}
.membership-qr-badge{font-size:10px;letter-spacing:2px;border:1px solid #f3d6df;background:#fff3f7;border-radius:99px;padding:5px 10px;color:#b66483}.membership-qr-badge svg{width:15px;height:15px}
.membership-qr-heading{display:flex;justify-content:center;align-items:center;gap:16px;margin:12px 0 8px}.membership-qr-card h2{font:750 22px/1.4 system-ui,-apple-system,"PingFang SC",sans-serif;margin:0;letter-spacing:1px}.membership-qr-card h2 span{display:block;color:#d63d78}.qr-heading-spark{font-size:17px;color:#e5a56d}.qr-heading-spark:last-child{font-size:11px;transform:translateY(10px)}
.membership-qr-card #membership-qr-description{font-size:11px;line-height:1.9;color:#977887}.qr-benefit{display:inline-block;background:#fff0e1;color:#ac7c4d;border-radius:5px;padding:1px 8px;margin-top:4px;font-size:10px}
.membership-qr-image{position:relative;box-sizing:border-box;width:min(268px,calc(100vw - 84px));height:min(268px,calc(100vw - 84px));min-height:0;max-width:100%;padding:6px;margin:16px auto 8px;border:1px solid #eac7d3;border-radius:15px;background:#fff;box-shadow:0 5px 18px #b1748d10;overflow:hidden}
.membership-qr-image img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center}.membership-qr-image p{font-size:12px;padding:8px;line-height:1.8}
.membership-qr-card .qr-save-hint{font-size:10px;color:#a87387;line-height:1.6}.qr-save-hint>span{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#fce7ef;font-weight:700;margin-right:3px}
.membership-qr-card .qr-mini-steps{display:flex;list-style:none;padding:11px 0;margin:12px 0 0;border-top:1px dashed #ecd8de;text-align:center;gap:4px}.qr-mini-steps li{position:relative;flex:1;font-size:10px;line-height:1.5;color:#8d6c7b}.qr-mini-steps li+li:before{content:'›';position:absolute;left:-4px;top:8px;color:#d8adbe;font-size:19px}.qr-mini-steps b{display:block;width:22px;line-height:22px;margin:0 auto 4px;border-radius:8px;background:#fbe9f0;color:#c86489;font-size:10px}.qr-footer-tip{background:#f6f0ec;border-radius:8px;color:#a78a91;font-size:9px;line-height:1.7;padding:7px 5px}.qr-footer-tip span{margin-right:3px;color:#cf8ba5}
.membership-hero h1>.membership-hero-title{display:inline;font-size:inherit;white-space:normal;letter-spacing:inherit;overflow-wrap:anywhere}.membership-hero h1>.membership-reward-line{white-space:normal;overflow-wrap:anywhere}.membership-step h2,.membership-hero>p,.membership-reward b{overflow-wrap:anywhere}
@media(max-height:700px){.membership-qr-card{padding-top:16px;padding-bottom:12px}.membership-qr-heading{margin-top:8px}.membership-qr-image{width:min(240px,calc(100vw - 84px));height:min(240px,calc(100vw - 84px));margin-top:10px}.membership-qr-card .qr-mini-steps{margin-top:8px;padding:8px 0}}
.membership-qr-image{display:flex;align-items:center;justify-content:center}.membership-qr-image img{min-width:0;min-height:0;flex:1 1 0}