:root{--orange:#ff7f22;--orange2:#ffa24c;--orange3:#fff0e4;--text:#15171f;--muted:#9a9aa2;--line:#e8e8ec;--bg:#ffffff}*{box-sizing:border-box}html{background:#fff}body{margin:0;min-height:100vh;background:#fff;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",Arial,sans-serif}.app-shell{width:min(100%,760px);margin:0 auto;padding:46px 30px 26px}.app-header{display:grid;grid-template-columns:86px 1fr 86px;align-items:center;gap:16px;margin-bottom:38px}.back-btn{width:74px;height:74px;border:2px solid #e7e7e9;border-radius:50%;display:grid;place-items:center;text-decoration:none;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.025)}.back-btn span{width:17px;height:17px;border-left:5px solid #101116;border-bottom:5px solid #101116;transform:rotate(45deg);margin-left:8px;border-radius:2px}.title-block h1{margin:0 0 5px;font-size:35px;line-height:1.12;font-weight:900;letter-spacing:-.04em}.title-block p{margin:0;color:#a0a0a8;font-size:24px;font-weight:650;letter-spacing:-.03em}.title-block em{font-style:normal;margin-left:8px}.avatar{justify-self:end;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#d9c5ff,#b999f4);box-shadow:inset 0 -8px 18px rgba(83,50,143,.12)}.avatar span{font-size:54px;filter:drop-shadow(0 5px 8px rgba(54,29,92,.18))}.hero-card{position:relative;height:312px;border-radius:64px;background:radial-gradient(circle at 65% 5%,rgba(255,255,255,.36),transparent 26%),linear-gradient(135deg,#ff8a2d 0%,#ff9639 52%,#ffbb84 100%);overflow:hidden;margin-bottom:43px;box-shadow:0 22px 44px rgba(255,127,34,.12)}.hero-card:before{content:"";position:absolute;left:42%;right:-14%;bottom:-46%;height:72%;border-radius:50% 50% 0 0;background:rgba(255,218,190,.42);transform:rotate(-13deg)}.hero-card:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 55% 20%,rgba(255,255,255,.28) 0 1px,transparent 2px),radial-gradient(circle at 72% 35%,rgba(255,255,255,.22) 0 1px,transparent 2px);background-size:36px 34px,47px 42px;opacity:.46}.hero-copy{position:absolute;left:43px;top:94px;z-index:2;color:#fff}.hero-copy h2{margin:0 0 28px;font-size:43px;line-height:1;font-weight:950;letter-spacing:-.055em}.hero-copy p{margin:0;font-size:24px;line-height:1.55;font-weight:720;letter-spacing:-.035em}.hero-gift{position:absolute;right:35px;top:32px;width:300px;height:252px;z-index:3}.coin{position:absolute;width:102px;height:102px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffe475,#ffbd36);border:4px solid #cf7b1f;box-shadow:inset 0 8px rgba(255,255,255,.34),0 12px 18px rgba(169,82,12,.18)}.coin b{width:57px;height:57px;border-radius:14px;color:#ffe26a;text-shadow:0 0 0 #e59025;font-size:40px;display:grid;place-items:center}.coin-one{right:75px;top:25px}.coin-two{right:14px;top:62px;transform:rotate(-14deg)}.gift-bag{position:absolute;right:70px;top:94px;width:166px;height:132px;border-radius:17px 17px 23px 23px;background:linear-gradient(145deg,#ff963b,#df6720);border:2px solid #b95016;box-shadow:inset 0 7px rgba(255,184,103,.55),0 16px 24px rgba(152,69,13,.2);transform:rotate(4deg)}.gift-bag i{position:absolute;left:22px;right:22px;top:-22px;height:45px;border:9px solid #a94c17;border-bottom:0;border-radius:32px 32px 0 0}.gift-bag strong{position:absolute;left:35px;top:44px;width:74px;height:64px;border-radius:50% 50% 45% 45%;display:grid;place-items:center;color:#ff7fc5;font-size:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.32),transparent 19%),#f36bae;transform:rotate(-10deg)}.gift-bag strong:before,.gift-bag strong:after{content:"";position:absolute;width:44px;height:56px;border-radius:44px 44px 0 0;background:#f36bae;top:-19px}.gift-bag strong:before{left:4px;transform:rotate(-44deg)}.gift-bag strong:after{right:4px;transform:rotate(44deg)}.tag{position:absolute;right:16px;top:118px;width:70px;height:112px;border-radius:9px;background:#fff;display:grid;place-items:center;text-align:center;font-weight:950;font-size:21px;line-height:1.1;transform:rotate(-12deg);box-shadow:0 10px 18px rgba(109,57,16,.18)}.tag:before{content:"";position:absolute;top:13px;left:50%;width:11px;height:11px;border-radius:50%;background:#e7e7e7;transform:translateX(-50%)}.tag em{font-style:normal;color:#ff7dad}.spark{position:absolute;color:#ffd44b;-webkit-text-stroke:1.5px #5f4115;font-size:25px;font-weight:900}.s1{right:10px;top:26px}.s2{left:32px;bottom:58px}.s3{left:66px;top:20px;color:#ff86b8}.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 6px 22px}.section-head h2,.pay-section h2{margin:0;font-size:25px;font-weight:900;letter-spacing:-.04em}.custom-link{border:0;background:transparent;color:#ff7b1a;font:inherit;font-size:19px;font-weight:850;display:flex;align-items:center;gap:10px;cursor:pointer}.custom-link span{width:18px;height:18px;display:inline-block;position:relative}.custom-link span:before{content:"";position:absolute;left:2px;top:11px;width:16px;height:4px;border-radius:4px;background:#ff7b1a;transform:rotate(-45deg)}.custom-link span:after{content:"";position:absolute;right:0;top:2px;width:8px;height:8px;border:3px solid #ff7b1a;border-left:0;border-bottom:0;transform:rotate(45deg)}.gift-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:21px 17px;margin-bottom:29px}.gift-card{height:222px;border:0;border-radius:29px;background:linear-gradient(180deg,#fbf0ee 0%,#f9f1ef 72%,#fff 72%,#f7f7f8 100%);position:relative;overflow:hidden;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.045);transition:transform .16s ease,box-shadow .16s ease}.gift-card:nth-child(2){background:linear-gradient(180deg,#fff4dc 0%,#fff5df 72%,#fff 72%,#f8f8f8 100%)}.gift-card:nth-child(3){background:linear-gradient(180deg,#fff0df 0%,#fff3e8 72%,#fff 72%,#f8f8f8 100%)}.gift-card:nth-child(4){background:linear-gradient(180deg,#fff5d9 0%,#fff5df 72%,#fff 72%,#f8f8f8 100%)}.gift-card:nth-child(5){background:linear-gradient(180deg,#f0efff 0%,#f1efff 72%,#fff 72%,#f8f8f8 100%)}.gift-card:nth-child(6),.gift-card:nth-child(7),.gift-card:nth-child(8){background:linear-gradient(180deg,#ffeaf1 0%,#ffedf4 72%,#fff 72%,#f8f8f8 100%)}.gift-card.active,.gift-card:hover{transform:translateY(-3px);box-shadow:0 18px 30px rgba(255,127,34,.16),inset 0 0 0 3px rgba(255,127,34,.85)}.gift-emoji{position:absolute;left:50%;top:36px;transform:translateX(-50%);font-size:78px;filter:drop-shadow(0 12px 13px rgba(87,49,23,.13))}.gift-card strong{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:29px;font-weight:950;letter-spacing:-.04em}.custom-amount{display:none;margin:-8px 0 26px;padding:18px 20px;border-radius:24px;background:#fff7f1;border:2px solid rgba(255,127,34,.22);position:relative}.custom-amount.show{display:block}.custom-amount span{display:block;margin-bottom:9px;color:#7e6c5d;font-size:15px;font-weight:800}.custom-amount input{width:100%;height:52px;border:0;border-radius:16px;background:#fff;padding:0 44px 0 16px;font:inherit;font-size:18px;font-weight:750;outline:0;box-shadow:inset 0 0 0 1px #f1ded2}.custom-amount b{position:absolute;right:36px;bottom:31px;color:#b8a99d;font-size:20px}.pay-section{margin-top:2px}.pay-section h2{margin:0 6px 18px}.pay-types{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pay-types label{height:88px;border:2px solid #e6e6ea;border-radius:28px;background:#fff;display:grid;grid-template-columns:62px 1fr 34px;align-items:center;gap:13px;padding:0 22px;cursor:pointer;transition:.16s ease;position:relative}.pay-types label.selected{border-color:#ff7f22;box-shadow:0 10px 24px rgba(255,127,34,.09)}.pay-types input{position:absolute;opacity:0}.pay-icon{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:25px;font-weight:900}.pay-icon.wx{background:#54c65a}.pay-icon.ali{background:#2d8cff;font-size:31px}.pay-types strong{font-size:24px;font-weight:850;letter-spacing:-.035em;white-space:nowrap}.pay-types i{width:32px;height:32px;border:3px solid #c8c8cc;border-radius:50%;display:block}.pay-types label.selected i{border:0;background:#ff7f22;position:relative}.pay-types label.selected i:before{content:"";position:absolute;left:9px;top:7px;width:12px;height:8px;border-left:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(-45deg);border-radius:2px}.send-btn{width:100%;height:92px;margin-top:24px;border:0;border-radius:46px;background:linear-gradient(90deg,#ff983f,#ff7f22);color:#fff;font:inherit;font-size:31px;font-weight:900;letter-spacing:-.035em;display:grid;grid-template-columns:1fr 78px;align-items:center;padding:0 12px 0 82px;cursor:pointer;box-shadow:0 16px 28px rgba(255,127,34,.20);transition:.16s ease}.send-btn:hover{transform:translateY(-2px);box-shadow:0 20px 34px rgba(255,127,34,.24)}.send-btn:disabled{opacity:.75;cursor:wait;transform:none}.send-btn i{justify-self:end;width:70px;height:70px;border-radius:50%;background:#fff;position:relative}.send-btn i:before{content:"";position:absolute;left:25px;top:25px;width:18px;height:18px;border-top:3px solid #111;border-right:3px solid #111;transform:rotate(45deg)}.send-btn i:after{content:"";position:absolute;left:22px;top:34px;width:28px;height:3px;border-radius:4px;background:#111}.safe-tip{margin:18px 0 0;text-align:center;color:#a6a6ad;font-size:17px;font-weight:700}.safe-tip span{font-size:17px;opacity:.68}.safe-tip em{font-style:normal;color:#e1b754;margin-left:6px}.center-page{min-height:100vh;display:grid;place-items:center;padding:28px}.result-card{width:min(560px,92vw);padding:34px;border-radius:28px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.08)}.big-icon{font-size:72px}.result-card h1{font-size:32px}.back-home{display:inline-flex;margin-top:18px;padding:14px 22px;border-radius:16px;background:#ff7f22;color:#fff;text-decoration:none;font-weight:850}@media (max-width:720px){.app-shell{padding:40px 30px 22px}.app-header{grid-template-columns:86px 1fr 86px}.hero-card{height:312px}.gift-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:560px){.app-shell{padding:24px 15px 18px}.app-header{grid-template-columns:54px 1fr 54px;gap:10px;margin-bottom:24px}.back-btn{width:52px;height:52px}.back-btn span{width:13px;height:13px;border-width:4px}.title-block h1{font-size:25px}.title-block p{font-size:17px}.avatar{width:54px;height:54px}.avatar span{font-size:35px}.hero-card{height:188px;border-radius:34px;margin-bottom:30px}.hero-copy{left:22px;top:57px}.hero-copy h2{font-size:27px;margin-bottom:17px}.hero-copy p{font-size:16px;line-height:1.52}.hero-gift{right:4px;top:12px;transform:scale(.62);transform-origin:top right}.section-head{margin:0 4px 14px}.section-head h2,.pay-section h2{font-size:20px}.custom-link{font-size:15px;gap:7px}.custom-link span{width:15px;height:15px}.gift-grid{gap:12px 10px;margin-bottom:22px}.gift-card{height:114px;border-radius:18px;background:linear-gradient(180deg,#fbf0ee 0%,#f9f1ef 70%,#fff 70%,#f8f8f8 100%)}.gift-card:nth-child(n){background-size:auto}.gift-emoji{top:19px;font-size:43px}.gift-card strong{bottom:10px;font-size:21px}.gift-card.active,.gift-card:hover{box-shadow:0 12px 20px rgba(255,127,34,.13),inset 0 0 0 2px rgba(255,127,34,.78)}.custom-amount{border-radius:18px;margin:-4px 0 18px;padding:13px 14px}.custom-amount input{height:46px}.custom-amount b{right:28px;bottom:25px}.pay-section h2{margin:0 4px 14px}.pay-types{gap:10px}.pay-types label{height:64px;border-radius:20px;grid-template-columns:42px 1fr 22px;gap:8px;padding:0 13px}.pay-icon{width:39px;height:39px;font-size:18px}.pay-icon.ali{font-size:23px}.pay-types strong{font-size:17px}.pay-types i{width:22px;height:22px;border-width:2px}.pay-types label.selected i:before{left:6px;top:5px;width:9px;height:6px;border-width:3px}.send-btn{height:72px;margin-top:22px;border-radius:36px;grid-template-columns:1fr 58px;padding:0 8px 0 58px;font-size:24px}.send-btn i{width:56px;height:56px}.send-btn i:before{left:20px;top:20px;width:15px;height:15px}.send-btn i:after{left:18px;top:28px;width:22px}.safe-tip{font-size:13px;margin-top:14px}}@media (max-width:380px){.app-shell{padding-left:12px;padding-right:12px}.hero-copy h2{font-size:25px}.hero-copy p{font-size:15px}.gift-grid{gap:10px 8px}.gift-card{height:106px}.gift-emoji{font-size:39px}.gift-card strong{font-size:19px}.pay-types label{padding:0 10px;gap:6px}.pay-types strong{font-size:16px}.send-btn{font-size:22px}}
.pay-types{grid-template-columns:repeat(2,minmax(0,1fr))}.pay-types label{min-width:0}.pay-types strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.pay-types{grid-template-columns:repeat(2,minmax(0,1fr))}.pay-types label{min-width:0}.pay-types strong{letter-spacing:-.055em}}
.app-shell{position:relative}.app-shell:before{content:"";position:absolute;left:50%;top:132px;width:610px;height:360px;transform:translateX(-50%);background:radial-gradient(circle at 78% 28%,rgba(255,126,33,.08),transparent 36%),radial-gradient(circle at 22% 72%,rgba(255,195,131,.12),transparent 34%);pointer-events:none}.hero-card{isolation:isolate}.hero-card:after{z-index:0}.hero-copy,.hero-gift{z-index:2}.hero-card .grain{display:none}.hero-card{background:radial-gradient(circle at 70% 18%,rgba(255,255,255,.42),transparent 18%),radial-gradient(circle at 54% 9%,rgba(255,255,255,.24),transparent 22%),linear-gradient(135deg,#ff8a2d 0%,#ff9639 50%,#ffbd8b 100%)}.hero-copy h2{text-shadow:0 8px 18px rgba(153,65,0,.12)}.gift-bag{background:linear-gradient(145deg,#ff9f43 0%,#ee7a22 54%,#d95f18 100%)}.tag{border:1px solid rgba(0,0,0,.06)}.gift-card{isolation:isolate}.gift-card:before{content:"";position:absolute;left:12px;right:12px;top:12px;height:54%;border-radius:22px;background:radial-gradient(circle at 36% 20%,rgba(255,255,255,.70),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));z-index:0}.gift-card:after{content:"";position:absolute;left:16px;right:16px;bottom:13px;height:50px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,246,247,.96));z-index:0}.gift-emoji,.gift-card strong{z-index:1}.gift-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}.gift-card.active{box-shadow:0 18px 32px rgba(255,127,34,.18),inset 0 0 0 3px rgba(255,127,34,.92)}.gift-card.active:before{background:radial-gradient(circle at 36% 20%,rgba(255,255,255,.78),transparent 28%),linear-gradient(180deg,rgba(255,245,229,.62),rgba(255,255,255,0))}.pay-icon svg{width:100%;height:100%;display:block}.pay-icon svg path:first-child{fill:currentColor}.pay-icon.wx{color:#40c45a;background:#40c45a}.pay-icon.wx svg path{fill:#fff}.pay-icon.ali{color:#217aff;background:transparent}.pay-icon.ali svg path:first-child{fill:#217aff}.pay-types label.selected{background:linear-gradient(180deg,#fffaf5,#fff)}.pay-types label.selected:before{content:"";position:absolute;inset:7px;border-radius:21px;border:1px solid rgba(255,127,34,.12);pointer-events:none}.pay-types label:not(.selected){box-shadow:inset 0 0 0 1px rgba(0,0,0,.015)}.send-btn{position:relative;overflow:hidden}.send-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 35%,rgba(255,255,255,.24) 45%,transparent 55%);transform:translateX(-100%);animation:orangeShine 4.2s ease-in-out infinite}.send-btn span,.send-btn i{position:relative;z-index:1}@keyframes orangeShine{0%,58%{transform:translateX(-100%)}82%,100%{transform:translateX(100%)}}.safe-tip{letter-spacing:.01em}@media (max-width:560px){.app-shell:before{top:84px;width:360px;height:250px}.gift-card:before{left:8px;right:8px;top:8px;border-radius:16px}.gift-card:after{left:9px;right:9px;bottom:8px;height:38px}.pay-types label.selected:before{inset:5px;border-radius:16px}.pay-icon.wx{background:#40c45a}.pay-icon.ali{background:transparent}.pay-icon svg{padding:0}.send-btn:before{animation-duration:5s}}
.pay-icon{background:transparent!important;overflow:visible}.pay-icon img{width:100%;height:100%;display:block;object-fit:contain}.pay-icon svg{display:none}.pay-icon.wx,.pay-icon.ali{box-shadow:0 8px 18px rgba(0,0,0,.08)}
@media (max-width:560px){.gift-card strong{font-size:19px;letter-spacing:-.06em}.gift-card:nth-child(n+5) strong{font-size:18px}}@media (max-width:380px){.gift-card strong{font-size:17px}.gift-card:nth-child(n+5) strong{font-size:16px}}
:root{--ui-font:"PingFang SC","SF Pro Display","SF Pro Text","Helvetica Neue","HarmonyOS Sans SC","MiSans","Microsoft YaHei",Arial,sans-serif;--num-font:"SF Pro Display","DIN Alternate","DIN Condensed","Avenir Next Condensed","PingFang SC","Helvetica Neue",Arial,sans-serif}body{font-family:var(--ui-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.title-block h1,.hero-copy h2,.section-head h2,.pay-section h2,.pay-types strong,.send-btn{font-family:var(--ui-font);font-weight:800}.title-block p,.hero-copy p{font-family:var(--ui-font);font-weight:600}.gift-card strong,.custom-amount input{font-family:var(--num-font);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.045em}.safe-tip,.custom-link{font-family:var(--ui-font)}@media (max-width:560px){.title-block h1{font-weight:800}.hero-copy h2{font-weight:800}.gift-card strong{letter-spacing:-.055em}}
.heart-img{width:25px;height:25px;vertical-align:-4px;margin-left:6px}.title-block .heart-img{width:24px;height:24px}.send-btn .heart-img{width:32px;height:32px;vertical-align:-7px;margin-left:5px}.gift-emoji{width:96px;height:96px;display:grid;place-items:center;font-size:0}.gift-emoji img{max-width:100%;max-height:100%;display:block;object-fit:contain;filter:drop-shadow(0 14px 13px rgba(87,49,23,.14))}.bubble-tea img{transform:scale(1.08)}.cookie img{transform:scale(1.08) rotate(-6deg)}.chicken img{transform:scale(1.1) rotate(-8deg)}.fruit img{transform:scale(1.08)}.icecream img{transform:scale(1.1) rotate(-6deg)}.cake img{transform:scale(1.1)}.flowers img{transform:scale(1.12)}.present img{transform:scale(1.1)}@media (max-width:560px){.heart-img{width:18px;height:18px;vertical-align:-3px}.title-block .heart-img{width:18px;height:18px}.send-btn .heart-img{width:26px;height:26px;vertical-align:-6px}.gift-emoji{width:58px;height:58px;top:13px}.gift-emoji img{filter:drop-shadow(0 9px 9px rgba(87,49,23,.13))}}@media (max-width:380px){.gift-emoji{width:52px;height:52px;top:12px}}
.hero-coin,.hero-star{position:absolute;display:block;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(125,61,10,.18))}.hero-coin-one{right:80px;top:22px;width:116px;transform:rotate(6deg)}.hero-coin-two{right:18px;top:58px;width:98px;transform:rotate(-16deg)}.hero-star{filter:drop-shadow(0 8px 8px rgba(125,61,10,.13))}.hs1{right:9px;top:25px;width:31px}.hs2{left:34px;bottom:54px;width:25px}.hs3{left:62px;top:19px;width:22px}.gift-bag strong{display:none}.bag-heart{position:absolute;left:32px;top:40px;width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(103,31,83,.16));transform:rotate(-10deg)}.coin,.spark{display:none!important}@media (max-width:560px){.hero-coin-one{width:116px}.hero-coin-two{width:98px}.bag-heart{width:82px;height:82px}}
@media (min-width:561px){.gift-emoji{width:124px;height:124px;top:24px}.gift-card strong{bottom:16px}.gift-card{height:222px}.bubble-tea img,.cookie img,.chicken img,.fruit img,.icecream img,.cake img,.flowers img,.present img{transform:scale(1.18)}}@media (max-width:560px){.gift-emoji{width:64px;height:64px;top:10px}.bubble-tea img,.cookie img,.chicken img,.fruit img,.icecream img,.cake img,.flowers img,.present img{transform:scale(1.12)}.gift-card strong{bottom:9px}.hero-gift{right:0;transform:scale(.65);transform-origin:top right}.hero-copy{z-index:4}.tag{font-size:20px}}
@import url('/assets/fonts/harmonyos/fonts.css');
:root{--ui-font:"HarmonyOS Sans SC Medium","HarmonyOS Sans SC Bold","PingFang SC","Helvetica Neue",Arial,sans-serif;--title-font:"HarmonyOS Sans SC Bold","HarmonyOS Sans SC Medium","PingFang SC","Helvetica Neue",Arial,sans-serif;--num-font:"HarmonyOS Sans SC Bold","HarmonyOS Sans SC Medium","DIN Alternate","Helvetica Neue",Arial,sans-serif}body{font-family:var(--ui-font)!important}.title-block h1,.hero-copy h2,.section-head h2,.pay-section h2,.pay-types strong,.send-btn{font-family:var(--title-font)!important;font-weight:700!important}.title-block p,.hero-copy p,.safe-tip,.custom-link{font-family:var(--ui-font)!important;font-weight:500!important}.gift-card strong,.custom-amount input{font-family:var(--num-font)!important;font-weight:700!important}.title-block h1{letter-spacing:-.035em}.hero-copy h2{letter-spacing:-.055em}.section-head h2,.pay-section h2{letter-spacing:-.035em}.pay-types strong{letter-spacing:-.025em}.send-btn{letter-spacing:-.035em}
:root{--ui-font:"HarmonyOS Sans SC","PingFang SC","Helvetica Neue",Arial,sans-serif;--title-font:"HarmonyOS Sans SC","PingFang SC","Helvetica Neue",Arial,sans-serif;--num-font:"HarmonyOS Sans SC","DIN Alternate","Helvetica Neue",Arial,sans-serif}.title-block h1,.hero-copy h2,.section-head h2,.pay-section h2,.pay-types strong,.send-btn{font-family:var(--title-font)!important;font-weight:700!important}.title-block p,.hero-copy p,.safe-tip,.custom-link,body{font-family:var(--ui-font)!important}.gift-card strong,.custom-amount input{font-family:var(--num-font)!important}
.avatar{overflow:hidden;background:linear-gradient(145deg,#e4d4ff,#c7a8ff)!important}.avatar img{width:78%;height:78%;display:block;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(54,29,92,.18));transform:translateY(2px)}.pay-icon.ali img{border-radius:50%}.pay-types strong{white-space:nowrap}@media (max-width:560px){.avatar img{width:78%;height:78%}}
:root{--ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Helvetica Neue",Arial,sans-serif;--title-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;--num-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif}body{font-family:var(--ui-font)!important}.title-block h1,.hero-copy h2,.section-head h2,.pay-section h2,.pay-types strong,.send-btn{font-family:var(--title-font)!important;font-weight:800!important}.title-block p,.hero-copy p{font-family:var(--ui-font)!important;font-weight:600!important}.gift-card strong,.custom-amount input{font-family:var(--num-font)!important;font-weight:800!important}.title-block h1{font-size:35px;line-height:1.1}.title-block p{font-size:24px;line-height:1.18}.hero-copy h2{font-size:43px}.hero-copy p{font-size:24px;font-weight:650!important}.section-head h2,.pay-section h2{font-size:25px}.pay-types strong{font-size:24px}.send-btn{font-size:31px}@media (max-width:560px){.title-block h1{font-size:27px}.title-block p{font-size:18px}.hero-copy h2{font-size:30px}.hero-copy p{font-size:17px}.section-head h2,.pay-section h2{font-size:21px}.pay-types strong{font-size:18px}.send-btn{font-size:24px}.gift-card strong{font-size:20px}.gift-card:nth-child(n+5) strong{font-size:18px}}
:root{--ui-font:"Resource Han Rounded CN","PingFang SC","Helvetica Neue",Arial,sans-serif;--title-font:"Resource Han Rounded CN","PingFang SC","Helvetica Neue",Arial,sans-serif;--num-font:"Resource Han Rounded CN","Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif}body,.title-block p,.hero-copy p,.safe-tip,.custom-link{font-family:var(--ui-font)!important;font-weight:500!important}.title-block h1,.hero-copy h2,.section-head h2,.pay-section h2,.pay-types strong,.send-btn,.gift-card strong{font-family:var(--title-font)!important;font-weight:900!important}.title-block h1{letter-spacing:-.02em}.hero-copy h2{letter-spacing:-.025em}.hero-copy p{letter-spacing:-.012em}.gift-card strong{font-family:var(--num-font)!important}.hero-card{background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.38),transparent 18%),radial-gradient(circle at 58% 8%,rgba(255,255,255,.18),transparent 24%),linear-gradient(135deg,#ff8b2e 0%,#ff9639 48%,#ffc08c 100%)}.hero-card:after{background:radial-gradient(circle at 55% 20%,rgba(255,255,255,.34) 0 1px,transparent 2px),radial-gradient(circle at 72% 35%,rgba(255,255,255,.2) 0 1px,transparent 2px),linear-gradient(115deg,transparent 0 45%,rgba(255,255,255,.11) 46%,transparent 58%);background-size:36px 34px,47px 42px,100% 100%;opacity:.58}.hero-card:before{background:rgba(255,222,197,.46)}.hero-star{display:none}.hero-gift:before,.hero-gift:after,.gift-bag:after{content:"";position:absolute;width:24px;height:24px;background:#ffdc55;clip-path:polygon(50% 0,61% 34%,96% 35%,68% 55%,79% 90%,50% 69%,21% 90%,32% 55%,4% 35%,39% 34%);filter:drop-shadow(0 1.5px 0 #3c2a13) drop-shadow(0 8px 8px rgba(117,62,7,.12));z-index:7}.hero-gift:before{right:8px;top:26px;transform:rotate(18deg) scale(.86)}.hero-gift:after{left:34px;bottom:56px;transform:rotate(-22deg) scale(.56);background:#ffe899}.gift-bag:after{left:-36px;top:72px;transform:rotate(15deg) scale(.48);background:#fff0a6}.hero-gift .pink-pop{display:none}.gift-bag .pink-pop,.gift-bag i:after{content:"";position:absolute;width:20px;height:22px;left:-8px;top:-46px;background:#ff89b5;border:2px solid #543018;border-radius:8px 8px 12px 12px;transform:rotate(-18deg);box-shadow:0 4px 8px rgba(93,40,16,.12)}.gift-bag i:before{content:"";position:absolute;width:7px;height:42px;left:27px;top:-45px;border-radius:999px;background:#ffd0db;transform:rotate(-23deg);box-shadow:0 0 0 1px rgba(89,43,19,.18)}.tag{font-family:var(--title-font)!important;font-weight:900!important}@media (max-width:560px){.title-block h1{font-size:27px}.title-block p{font-size:18px}.hero-copy h2{font-size:30px}.hero-copy p{font-size:17px}.hero-gift:before{right:7px;top:25px}.hero-gift:after{left:34px;bottom:56px}.gift-bag:after{left:-35px;top:72px}}

/* 2026-05-04: rebuild hero gift illustration closer to the reference artwork */
.hero-card{
    background:
        radial-gradient(circle at 73% 18%,rgba(255,255,255,.42),transparent 17%),
        radial-gradient(circle at 56% 8%,rgba(255,255,255,.18),transparent 23%),
        radial-gradient(circle at 82% 73%,rgba(255,241,224,.52),transparent 28%),
        linear-gradient(135deg,#ff8a30 0%,#ff963d 49%,#ffc391 100%)!important;
}
.hero-card:before{
    left:45%!important;
    right:-19%!important;
    bottom:-48%!important;
    height:74%!important;
    background:rgba(255,224,201,.48)!important;
    transform:rotate(-12deg)!important;
}
.hero-card:after{
    background:
        radial-gradient(circle at 53% 20%,rgba(255,255,255,.35) 0 1px,transparent 2px),
        radial-gradient(circle at 72% 35%,rgba(255,255,255,.24) 0 1px,transparent 2px),
        linear-gradient(116deg,transparent 0 43%,rgba(255,255,255,.12) 45%,transparent 56%),
        linear-gradient(28deg,transparent 0 58%,rgba(255,255,255,.09) 59%,transparent 66%);
    background-size:36px 34px,47px 42px,100% 100%,100% 100%!important;
    opacity:.62!important;
}
.hero-gift{
    right:31px!important;
    top:25px!important;
    width:318px!important;
    height:270px!important;
    isolation:isolate;
}
.hero-coin{
    display:block!important;
    position:absolute!important;
    object-fit:contain!important;
    z-index:2!important;
    filter:drop-shadow(0 15px 11px rgba(122,60,9,.18)) drop-shadow(0 2px 0 rgba(118,60,13,.25))!important;
}
.hero-coin-one{
    right:92px!important;
    top:22px!important;
    width:124px!important;
    transform:rotate(5deg)!important;
}
.hero-coin-two{
    right:34px!important;
    top:48px!important;
    width:112px!important;
    transform:rotate(-13deg)!important;
    z-index:4!important;
}
.gift-bag{
    right:83px!important;
    top:112px!important;
    width:171px!important;
    height:126px!important;
    border-radius:19px 19px 23px 23px!important;
    background:
        linear-gradient(100deg,rgba(255,195,112,.42) 0 12%,transparent 28%),
        linear-gradient(153deg,#ff9d3f 0%,#f37e27 50%,#de651e 100%)!important;
    border:2px solid rgba(142,63,17,.66)!important;
    box-shadow:inset 0 8px 0 rgba(255,184,92,.48),inset -8px -9px 18px rgba(161,63,13,.13),0 18px 25px rgba(139,59,8,.22)!important;
    transform:rotate(4deg)!important;
    z-index:3!important;
}
.gift-bag:before{
    content:""!important;
    position:absolute!important;
    left:17px!important;
    right:17px!important;
    top:-21px!important;
    height:44px!important;
    border-radius:18px 18px 10px 10px!important;
    background:linear-gradient(165deg,#ff9f42 0%,#f47b25 65%,#da621e 100%)!important;
    border:2px solid rgba(142,63,17,.65)!important;
    box-shadow:inset 0 8px 0 rgba(255,188,95,.42),0 7px 10px rgba(121,55,12,.1)!important;
    transform:skewX(-7deg)!important;
    z-index:-1!important;
    clip-path:none!important;
    filter:none!important;
}
.gift-bag:after{
    content:""!important;
    position:absolute!important;
    left:-24px!important;
    top:67px!important;
    width:23px!important;
    height:23px!important;
    background:#fff0a6!important;
    clip-path:polygon(50% 0,61% 34%,96% 35%,68% 55%,79% 90%,50% 69%,21% 90%,32% 55%,4% 35%,39% 34%)!important;
    filter:drop-shadow(0 1.5px 0 #4b3515) drop-shadow(0 7px 7px rgba(117,62,7,.12))!important;
    z-index:7!important;
    transform:rotate(17deg) scale(.72)!important;
}
.gift-bag i{
    left:auto!important;
    right:-5px!important;
    top:-18px!important;
    width:50px!important;
    height:42px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    z-index:6!important;
}
.gift-bag i:before{
    content:""!important;
    position:absolute!important;
    left:3px!important;
    top:-24px!important;
    width:9px!important;
    height:44px!important;
    border-radius:999px!important;
    background:#ffd1dc!important;
    border:1px solid rgba(92,46,19,.2)!important;
    box-shadow:0 4px 8px rgba(93,40,16,.12)!important;
    transform:rotate(-24deg)!important;
}
.gift-bag i:after{
    content:""!important;
    position:absolute!important;
    left:-6px!important;
    top:-29px!important;
    width:22px!important;
    height:24px!important;
    border:2px solid #5d341a!important;
    border-radius:8px 8px 12px 12px!important;
    background:#ff91bb!important;
    box-shadow:inset 0 4px 0 rgba(255,190,211,.5),0 5px 9px rgba(93,40,16,.13)!important;
    transform:rotate(-18deg)!important;
}
.bag-heart{
    display:block!important;
    left:29px!important;
    top:38px!important;
    width:86px!important;
    height:86px!important;
    z-index:5!important;
    filter:drop-shadow(0 9px 8px rgba(103,31,83,.16))!important;
    transform:rotate(-10deg)!important;
}
.tag{
    right:26px!important;
    top:126px!important;
    width:72px!important;
    height:113px!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#171717!important;
    font-size:20px!important;
    line-height:1.08!important;
    letter-spacing:-.05em!important;
    box-shadow:0 11px 17px rgba(105,55,14,.18)!important;
    transform:rotate(-11deg)!important;
    z-index:6!important;
}
.tag:before{
    top:13px!important;
    width:10px!important;
    height:10px!important;
    background:#d9d9d9!important;
    box-shadow:0 0 0 2px rgba(120,58,17,.16)!important;
}
.tag:after{
    content:"";
    position:absolute;
    left:50%;
    top:-18px;
    width:28px;
    height:38px;
    border-right:3px solid #8c4d20;
    border-radius:0 0 19px 0;
    transform:translateX(-2px) rotate(15deg);
    z-index:-1;
}
.tag em{color:#ff80b2!important;font-size:18px!important;line-height:1!important}
.hero-star{
    display:block!important;
    position:absolute!important;
    object-fit:contain!important;
    z-index:8!important;
    filter:drop-shadow(0 2px 0 rgba(68,44,15,.45)) drop-shadow(0 8px 8px rgba(125,61,10,.13))!important;
}
.hs1{right:10px!important;top:24px!important;width:30px!important;transform:rotate(16deg)!important}
.hs2{left:34px!important;bottom:62px!important;width:24px!important;transform:rotate(-18deg)!important}
.hs3{left:71px!important;top:22px!important;width:23px!important;transform:rotate(16deg)!important;filter:drop-shadow(0 5px 8px rgba(125,61,10,.13))!important}
.hero-gift:before,.hero-gift:after{
    content:""!important;
    position:absolute!important;
    width:24px!important;
    height:24px!important;
    background:#ffdf59!important;
    clip-path:polygon(50% 0,61% 34%,96% 35%,68% 55%,79% 90%,50% 69%,21% 90%,32% 55%,4% 35%,39% 34%)!important;
    filter:drop-shadow(0 1.5px 0 #3c2a13) drop-shadow(0 8px 8px rgba(117,62,7,.12))!important;
    z-index:8!important;
}
.hero-gift:before{right:10px!important;top:24px!important;transform:rotate(18deg) scale(.82)!important}
.hero-gift:after{left:38px!important;bottom:65px!important;background:#ffe99b!important;transform:rotate(-24deg) scale(.55)!important}
@media (max-width:560px){
    .hero-gift{right:3px!important;top:28px!important;transform:scale(.66)!important;transform-origin:top right!important}
    .hero-coin-one{width:124px!important}.hero-coin-two{width:112px!important}
    .bag-heart{width:86px!important;height:86px!important}
    .tag{font-size:20px!important}
}
@media (max-width:380px){.hero-gift{transform:scale(.6)!important;right:-4px!important}}

/* 2026-05-04: star-embossed coins and larger foreground star */
.hero-coin{
    display:block!important;
    border-radius:50%!important;
    background:linear-gradient(145deg,#ffe87a 0%,#ffd14a 48%,#f4a72e 100%)!important;
    border:3px solid #b96518!important;
    box-shadow:inset 0 7px 0 rgba(255,255,255,.28),inset 0 -7px 12px rgba(185,86,13,.13),0 15px 11px rgba(122,60,9,.18)!important;
    object-fit:initial!important;
}
.hero-coin:before{
    content:"";
    position:absolute;
    inset:11px;
    border-radius:50%;
    border:2px solid rgba(189,98,20,.32);
    box-shadow:inset 0 4px 8px rgba(255,255,255,.24);
}
.hero-coin b{
    position:absolute;
    left:50%;
    top:50%;
    width:47%;
    height:47%;
    background:#ffe577;
    clip-path:polygon(50% 0,61% 34%,96% 35%,68% 55%,79% 90%,50% 69%,21% 90%,32% 55%,4% 35%,39% 34%);
    filter:drop-shadow(0 2px 0 rgba(196,110,25,.35));
    transform:translate(-50%,-50%) rotate(2deg);
}
.hs1{
    right:48px!important;
    top:49px!important;
    width:88px!important;
    z-index:5!important;
    transform:rotate(16deg)!important;
    filter:drop-shadow(0 3px 0 rgba(113,67,18,.32)) drop-shadow(0 13px 10px rgba(125,61,10,.18))!important;
}
.hs3{right:7px!important;left:auto!important;top:23px!important;width:29px!important;z-index:8!important}
.bag-heart{filter:hue-rotate(306deg) saturate(1.55) drop-shadow(0 9px 8px rgba(103,31,83,.16))!important}
@media (max-width:560px){.hs1{width:88px!important}.hs3{width:29px!important}}

/* 2026-05-04: final hero illustration restoration pass */
.hero-gift{
    right:36px!important;
    top:24px!important;
    width:304px!important;
    height:258px!important;
}
.hero-coin{
    position:absolute!important;
    display:block!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
    background:radial-gradient(circle at 32% 24%,#fff09a 0 8%,transparent 18%),linear-gradient(145deg,#ffe873 0%,#ffd052 47%,#f6a82f 100%)!important;
    border:3px solid #ad6119!important;
    box-shadow:inset 0 7px 0 rgba(255,255,255,.3),inset 0 -8px 12px rgba(185,86,13,.16),0 15px 12px rgba(122,60,9,.18)!important;
    z-index:2!important;
}
.hero-coin:before{
    content:""!important;
    position:absolute!important;
    inset:11px!important;
    border-radius:50%!important;
    border:2px solid rgba(179,88,17,.32)!important;
    box-shadow:inset 0 5px 8px rgba(255,255,255,.2)!important;
}
.hero-coin b{
    display:block!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:48%!important;
    height:48%!important;
    background:#ffe477!important;
    clip-path:polygon(50% 0,61% 34%,96% 35%,68% 55%,79% 90%,50% 69%,21% 90%,32% 55%,4% 35%,39% 34%)!important;
    filter:drop-shadow(0 2px 0 rgba(196,110,25,.35))!important;
    transform:translate(-50%,-50%) rotate(2deg)!important;
}
.hero-coin-one{
    width:116px!important;
    height:116px!important;
    right:105px!important;
    top:40px!important;
    transform:rotate(5deg)!important;
}
.hero-coin-two{
    width:94px!important;
    height:94px!important;
    right:60px!important;
    top:62px!important;
    transform:rotate(-14deg)!important;
    z-index:3!important;
}
.gift-bag{
    right:88px!important;
    top:113px!important;
    width:167px!important;
    height:123px!important;
    border-radius:18px 18px 22px 22px!important;
    background:linear-gradient(110deg,rgba(255,192,96,.48) 0 10%,transparent 27%),linear-gradient(152deg,#ff9b3d 0%,#f17b25 54%,#dc641e 100%)!important;
    border:2px solid rgba(126,58,18,.7)!important;
    box-shadow:inset 0 8px 0 rgba(255,188,96,.42),inset -9px -10px 18px rgba(137,50,9,.13),0 18px 23px rgba(139,59,8,.22)!important;
    transform:rotate(4deg)!important;
    z-index:4!important;
}
.gift-bag:before{
    content:""!important;
    position:absolute!important;
    left:18px!important;
    right:18px!important;
    top:-23px!important;
    height:47px!important;
    border-radius:17px 18px 8px 8px!important;
    background:linear-gradient(160deg,#ffa144 0%,#f47a24 72%,#d95f1c 100%)!important;
    border:2px solid rgba(126,58,18,.68)!important;
    box-shadow:inset 0 8px 0 rgba(255,190,94,.42),0 7px 10px rgba(121,55,12,.12)!important;
    transform:skewX(-7deg)!important;
    z-index:-1!important;
    clip-path:none!important;
    filter:none!important;
}
.gift-bag:after{
    left:-33px!important;
    top:68px!important;
    width:24px!important;
    height:24px!important;
    z-index:7!important;
    transform:rotate(18deg) scale(.6)!important;
}
.gift-bag i,.gift-bag i:before,.gift-bag i:after{display:none!important}
.bag-heart{
    left:29px!important;
    top:36px!important;
    width:86px!important;
    height:86px!important;
    filter:hue-rotate(306deg) saturate(1.55) drop-shadow(0 9px 8px rgba(103,31,83,.16))!important;
    transform:rotate(-10deg)!important;
    z-index:6!important;
}
.hs1{
    right:50px!important;
    top:64px!important;
    width:90px!important;
    height:90px!important;
    z-index:6!important;
    transform:rotate(16deg)!important;
    filter:drop-shadow(0 3px 0 rgba(113,67,18,.32)) drop-shadow(0 13px 10px rgba(125,61,10,.18))!important;
}
.hs2{left:34px!important;bottom:59px!important;width:25px!important;height:25px!important;z-index:8!important}
.hs3{right:8px!important;left:auto!important;top:24px!important;width:29px!important;height:29px!important;z-index:8!important}
.hero-gift:before{right:8px!important;top:23px!important;transform:rotate(18deg) scale(.76)!important;opacity:.95!important}
.hero-gift:after{left:35px!important;bottom:62px!important;transform:rotate(-24deg) scale(.5)!important;opacity:.95!important}
.tag{
    right:24px!important;
    top:130px!important;
    width:72px!important;
    height:113px!important;
    border-radius:10px!important;
    transform:rotate(-11deg)!important;
    z-index:7!important;
}
.tag:after{
    content:""!important;
    position:absolute!important;
    left:45%!important;
    top:-27px!important;
    width:39px!important;
    height:42px!important;
    border-top:3px solid #77401d!important;
    border-right:3px solid #77401d!important;
    border-radius:0 18px 0 0!important;
    transform:rotate(13deg)!important;
    z-index:-1!important;
}
@media (max-width:560px){
    .hero-gift{right:3px!important;top:27px!important;transform:scale(.66)!important;transform-origin:top right!important}
    .hero-coin-one{width:116px!important;height:116px!important}.hero-coin-two{width:94px!important;height:94px!important}
    .hs1{width:90px!important;height:90px!important}.hs3{width:29px!important;height:29px!important}
}
@media (max-width:380px){.hero-gift{right:-4px!important;transform:scale(.6)!important}}

/* 2026-05-04: pink front heart like the reference */
.bag-heart{
    width:82px!important;
    height:82px!important;
    left:30px!important;
    top:39px!important;
    filter:hue-rotate(318deg) saturate(1.18) brightness(1.07) drop-shadow(0 9px 8px rgba(103,31,83,.16))!important;
}
@media (max-width:560px){.bag-heart{width:82px!important;height:82px!important}}

/* 2026-05-04: use one cohesive illustration asset instead of separately assembled layers */
.hero-gift{
    right:24px!important;
    top:27px!important;
    width:300px!important;
    height:260px!important;
    transform:none!important;
}
.hero-gift:before,.hero-gift:after{display:none!important;content:none!important}
.hero-combo{
    display:block!important;
    position:absolute!important;
    right:0!important;
    top:0!important;
    width:285px!important;
    height:auto!important;
    object-fit:contain!important;
    filter:drop-shadow(0 16px 18px rgba(128,61,9,.16))!important;
}
.hero-coin,.gift-bag,.tag,.hero-star{display:none!important}
@media (max-width:560px){
    .hero-gift{right:9px!important;top:32px!important;width:190px!important;height:176px!important;transform:none!important}
    .hero-combo{width:188px!important;right:0!important;top:0!important}
}
@media (max-width:380px){
    .hero-gift{right:4px!important;top:35px!important;width:176px!important}
    .hero-combo{width:176px!important}
}

/* 2026-05-04: keep hero gift fully visible on narrow mobile screens */
html,body{max-width:100%;overflow-x:hidden!important}
@media (max-width:560px){
    .hero-gift{
        right:18px!important;
        top:48px!important;
        width:150px!important;
        height:145px!important;
        z-index:3!important;
        overflow:visible!important;
    }
    .hero-combo{
        width:148px!important;
        right:0!important;
        top:0!important;
        transform:none!important;
    }
    .hero-copy{left:24px!important;max-width:220px!important}
}
@media (max-width:430px){
    .hero-gift{right:16px!important;top:51px!important;width:142px!important;height:140px!important}
    .hero-combo{width:140px!important}
    .hero-copy{max-width:205px!important}
}
@media (max-width:390px){
    .hero-gift{right:18px!important;top:56px!important;width:128px!important;height:128px!important}
    .hero-combo{width:126px!important}
    .hero-copy{max-width:190px!important}
}
@media (max-width:360px){
    .hero-gift{right:14px!important;top:60px!important;width:116px!important;height:118px!important}
    .hero-combo{width:114px!important}
    .hero-copy{max-width:178px!important}
}

/* 2026-05-04: viewport-based mobile placement to avoid clipping from horizontal layout overflow */
@media (max-width:560px){
    .app-shell{width:100vw!important;max-width:100vw!important;overflow:hidden!important}
    .hero-card{width:calc(100vw - 30px)!important;max-width:calc(100vw - 30px)!important}
    .hero-gift{
        left:calc(100vw - 176px)!important;
        right:auto!important;
        top:48px!important;
        width:142px!important;
        height:140px!important;
    }
    .hero-combo{width:140px!important;left:0!important;right:auto!important;top:0!important}
}
@media (max-width:430px){
    .hero-gift{left:calc(100vw - 166px)!important;top:51px!important;width:132px!important;height:132px!important}
    .hero-combo{width:130px!important}
}
@media (max-width:390px){
    .hero-gift{left:calc(100vw - 158px)!important;top:55px!important;width:124px!important;height:124px!important}
    .hero-combo{width:122px!important}
}
@media (max-width:360px){
    .hero-gift{left:calc(100vw - 148px)!important;top:60px!important;width:112px!important;height:114px!important}
    .hero-combo{width:110px!important}
}

/* 2026-05-04: robust mobile safe-box position independent of vw quirks */
@media (max-width:560px){
    .hero-gift{
        left:min(212px,calc(100% - 146px))!important;
        right:auto!important;
        top:48px!important;
        width:140px!important;
        height:140px!important;
    }
    .hero-combo{left:0!important;right:auto!important;width:138px!important;max-width:100%!important}
}
@media (max-width:430px){
    .hero-gift{left:min(205px,calc(100% - 136px))!important;top:52px!important;width:130px!important;height:130px!important}
    .hero-combo{width:128px!important}
}
@media (max-width:390px){
    .hero-gift{left:min(196px,calc(100% - 126px))!important;top:56px!important;width:120px!important;height:120px!important}
    .hero-combo{width:118px!important}
}
@media (max-width:360px){
    .hero-gift{left:min(184px,calc(100% - 116px))!important;top:61px!important;width:110px!important;height:112px!important}
    .hero-combo{width:108px!important}
}

/* 2026-05-04: enlarge mobile hero gift while keeping it inside the card */
@media (max-width:560px){
    .hero-gift{left:min(202px,calc(100% - 164px))!important;top:44px!important;width:158px!important;height:154px!important}
    .hero-combo{width:156px!important}
}
@media (max-width:430px){
    .hero-gift{left:min(196px,calc(100% - 156px))!important;top:47px!important;width:150px!important;height:148px!important}
    .hero-combo{width:148px!important}
}
@media (max-width:390px){
    .hero-gift{left:min(188px,calc(100% - 146px))!important;top:50px!important;width:140px!important;height:138px!important}
    .hero-combo{width:138px!important}
}
@media (max-width:360px){
    .hero-gift{left:min(178px,calc(100% - 134px))!important;top:55px!important;width:128px!important;height:126px!important}
    .hero-combo{width:126px!important}
}

/* 2026-05-04: one more mobile hero gift enlargement */
@media (max-width:560px){
    .hero-gift{left:min(194px,calc(100% - 178px))!important;top:39px!important;width:172px!important;height:168px!important}
    .hero-combo{width:170px!important}
}
@media (max-width:430px){
    .hero-gift{left:min(188px,calc(100% - 170px))!important;top:42px!important;width:164px!important;height:160px!important}
    .hero-combo{width:162px!important}
}
@media (max-width:390px){
    .hero-gift{left:min(180px,calc(100% - 160px))!important;top:46px!important;width:154px!important;height:150px!important}
    .hero-combo{width:152px!important}
}
@media (max-width:360px){
    .hero-gift{left:min(170px,calc(100% - 148px))!important;top:51px!important;width:142px!important;height:138px!important}
    .hero-combo{width:140px!important}
}

/* 2026-05-04: larger and vertically centered mobile hero gift */
@media (max-width:560px){
    .hero-gift{left:min(184px,calc(100% - 196px))!important;top:24px!important;width:190px!important;height:184px!important}
    .hero-combo{width:188px!important}
}
@media (max-width:430px){
    .hero-gift{left:min(176px,calc(100% - 186px))!important;top:27px!important;width:180px!important;height:176px!important}
    .hero-combo{width:178px!important}
}
@media (max-width:390px){
    .hero-gift{left:min(170px,calc(100% - 176px))!important;top:30px!important;width:170px!important;height:166px!important}
    .hero-combo{width:168px!important}
}
@media (max-width:360px){
    .hero-gift{left:min(160px,calc(100% - 162px))!important;top:36px!important;width:156px!important;height:152px!important}
    .hero-combo{width:154px!important}
}

/* 2026-05-04: stronger mobile centering and larger hero gift */
@media (max-width:560px){
    .hero-gift{left:min(174px,calc(100% - 214px))!important;top:8px!important;width:208px!important;height:204px!important}
    .hero-combo{width:206px!important}
}
@media (max-width:430px){
    .hero-gift{left:min(166px,calc(100% - 204px))!important;top:9px!important;width:198px!important;height:194px!important}
    .hero-combo{width:196px!important}
}
@media (max-width:390px){
    .hero-gift{left:min(160px,calc(100% - 194px))!important;top:10px!important;width:188px!important;height:184px!important}
    .hero-combo{width:186px!important}
}
@media (max-width:360px){
    .hero-gift{left:min(150px,calc(100% - 178px))!important;top:15px!important;width:172px!important;height:168px!important}
    .hero-combo{width:170px!important}
}

/* 2026-05-04: gift meteor shower easter egg */
.gift-meteor-layer{
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    overflow:hidden;
    contain:layout paint;
}
.gift-meteor{
    position:absolute;
    display:block;
    height:auto;
    object-fit:contain;
    opacity:0;
    transform:translate3d(-50%,-50%,0px) rotate(-18deg) scale(.74);
    filter:drop-shadow(0 10px 10px rgba(255,127,34,.18));
    animation:giftMeteorFly 1.15s cubic-bezier(.18,.72,.22,1) forwards;
    will-change:transform,opacity;
}
.gift-meteor:after{content:"";position:absolute;inset:0}
@keyframes giftMeteorFly{
    0%{opacity:0;transform:translate3d(-50%,-50%,0px) rotate(-18deg) scale(.6)}
    12%{opacity:1}
    72%{opacity:.96}
    100%{opacity:0;transform:translate3d(calc(var(--mx) - 50%),calc(var(--my) - 50%),0px) rotate(var(--spin)) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){.gift-meteor-layer{display:none!important}}

/* 2026-05-04: chat-app style top-to-bottom gift rain */
.gift-meteor{
    transform:translate3d(0,0,0px) rotate(4deg) scale(.72);
    animation-name:giftMeteorRain;
    animation-timing-function:cubic-bezier(.22,.55,.36,1);
}
@keyframes giftMeteorRain{
    0%{opacity:0;transform:translate3d(0,0,0px) rotate(-6deg) scale(.58)}
    10%{opacity:1;transform:translate3d(var(--mx10),var(--my10),0px) rotate(-3deg) scale(.72)}
    86%{opacity:.98;transform:translate3d(var(--mx86),var(--my86),0px) rotate(var(--spin)) scale(.98)}
    100%{opacity:0;transform:translate3d(var(--mx),var(--my),0px) rotate(var(--spin)) scale(1.02)}
}

/* 2026-05-04: gravity stars inside the orange hero card */
.hero-star-field{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    border-radius:inherit;
    pointer-events:auto;
    contain:layout paint;
}
.hero-gravity-particle{
    position:absolute;
    left:0;
    top:0;
    width:34px;
    height:34px;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 10px 10px rgba(125,61,10,.18));
    opacity:.9;
    will-change:transform;
    user-select:none;
    -webkit-user-drag:none;
}
.hero-gravity-particle.star{filter:drop-shadow(0 8px 8px rgba(125,61,10,.13));opacity:.88}
.hero-gravity-particle.gravity-coin{width:46px;height:46px;filter:drop-shadow(0 14px 14px rgba(125,61,10,.18));opacity:.9}
.hero-gravity-particle.s-a{width:38px;height:38px}
.hero-gravity-particle.s-b{width:30px;height:30px;opacity:.78}
.hero-gravity-particle.s-c{width:44px;height:44px;opacity:.9}
.hero-gravity-particle.s-d{width:34px;height:34px;opacity:.82}
.hero-gravity-particle.s-e{width:28px;height:28px;opacity:.74}
.hero-gravity-particle.c-a{width:50px;height:50px}
.hero-gravity-particle.c-b{width:42px;height:42px;opacity:.82}
.hero-gravity-particle.c-c{width:36px;height:36px;opacity:.76}
.hero-copy,.hero-gift{pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero-star-field{display:none!important}}

/* 2026-05-04: gravity motion for the hero gift box */
.hero-gift{
    transform:var(--hero-gift-gravity-transform, translate3d(0,0,0) rotate(0deg));
    transform-origin:50% 62%;
    will-change:transform;
}
@media (max-width:560px){
    .hero-gift{
        transform:var(--hero-gift-gravity-transform, translate3d(0,0,0) rotate(0deg))!important;
    }
}
@media (prefers-reduced-motion:reduce){.hero-gift{transform:none!important}}

/* 2026-05-04: gravity motion for gift icons in the grid */
.gift-card .gift-emoji{
    transform:var(--gift-emoji-gravity-transform, translate3d(0,0,0) rotate(0deg));
    will-change:transform;
}
@media (prefers-reduced-motion:reduce){.gift-card .gift-emoji{transform:none!important}}

/* 2026-05-04: keep gift icon centered while applying gravity */
.gift-card .gift-emoji{
    transform:translateX(-50%) var(--gift-emoji-gravity-transform, translate3d(0,0,0) rotate(0deg))!important;
}
@media (prefers-reduced-motion:reduce){.gift-card .gift-emoji{transform:translateX(-50%)!important}}