:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft Yahei",sans-serif;color:#14243e;background:#e9edf3;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{position:relative;isolation:isolate;max-width:460px;min-height:100dvh;margin:auto;padding:25px 23px max(25px,env(safe-area-inset-bottom));background:#f5f7fa;overflow:hidden}main:before{content:'';position:absolute;z-index:-2;inset:0 0 auto;height:355px;background:radial-gradient(ellipse at 100% 0,#33517b 0,transparent 65%),linear-gradient(135deg,#152d50,#0b1d38)}main:after{content:'';position:absolute;z-index:-1;top:85px;right:-90px;width:280px;height:280px;border:1px solid #ffffff12;border-radius:50%;box-shadow:0 0 0 40px #ffffff03,0 0 0 80px #ffffff03;pointer-events:none}header{display:flex;align-items:center;gap:10px;color:#fff}.mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;border:1px solid #ffffff38;background:#ffffff0c;font-size:23px;font-weight:700;position:relative}.mark>span{position:absolute;color:#c7e2c6;right:3px;bottom:-3px}.brand{font-size:15px;font-weight:600;letter-spacing:2px}.brand small{display:block;font-weight:400;font-size:7px;letter-spacing:1.7px;color:#93a8c7;margin-top:4px}.currency{margin-left:auto;font-size:10px;letter-spacing:1px;border:1px solid #ffffff25;padding:7px 9px;border-radius:20px;color:#b9c8dc}.intro{padding:35px 0 24px}.eyebrow{font-size:10px;letter-spacing:3px;color:#a4b9d5}h1{font-size:31px;letter-spacing:1px;margin:11px 0 9px;color:#fff;font-weight:600}.intro p{color:#a4b6d0;font-size:12px;margin:0;letter-spacing:.4px}p{font-size:12px;color:#8994a5;line-height:1.8}.card{background:#fff;border:1px solid #e8ecf2;border-radius:20px;padding:23px;margin-bottom:17px;box-shadow:0 9px 25px #17355205}.amount-card{box-shadow:0 14px 30px #132e5010;border-color:#fff}.card-kicker{font-size:8px;letter-spacing:1.7px;color:#9ba7b8;margin-bottom:21px;display:flex;align-items:center;gap:7px}.card-kicker>span{background:#edf2f8;color:#7f93ad;font-size:9px;padding:4px 5px;border-radius:5px;letter-spacing:0}label{font-size:12px;font-weight:500}label>small{float:right;font-weight:400;color:#a0a9b7;font-size:10px}.money{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid #e8edf4;padding:15px 0 12px}.money>span{font-size:19px;font-weight:600;color:#1f375b}.money input{font-family:inherit;font-size:45px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-1.5px;line-height:1.2;max-width:100%;width:100%;min-width:0;border:0;outline:0;background:none;color:#102744;padding:0}.money input::placeholder{color:#c6d0df;font-weight:400}.money:focus-within{border-color:#6787b1}.presets{display:flex;gap:9px;margin-top:18px}button{font:inherit;cursor:pointer;touch-action:manipulation;transition:background .2s,transform .2s}.presets button{flex:1;border:1px solid #e5eaf2;background:#f7f9fc;border-radius:9px;min-height:42px;color:#657994;font-size:12px;font-weight:500}.presets button.selected{border-color:#2d4f7f;background:#edf3fa;color:#1a3d6c;box-shadow:inset 0 0 0 .5px #2d4f7f}.hint{font-size:9px;margin:13px 0 0;color:#9ba7b7}.methods-card{padding:20px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}h2{font-size:13px;font-weight:600;margin:0}.section-heading>span{font-size:7px;letter-spacing:1px;color:#aab4c2}.method{display:flex;align-items:center;gap:12px;border:1px solid #edf0f5;border-radius:12px;padding:13px 12px;min-height:68px;cursor:pointer;background:#fff;transition:.2s}.method+.method{margin-top:10px}.method:has(input:checked){border-color:#a9bdd9;background:#f5f8fd;box-shadow:0 0 0 1px #dce6f455}.icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;font-size:24px;font-weight:600;flex-shrink:0}.icon svg{width:27px;height:27px}.wechat{background:#e7f5ed;color:#22a76a}.alipay{background:#e6f2ff;color:#218ee7}.method small{display:block;font-size:9px;color:#9ba8b9;margin-top:4px;font-weight:400;letter-spacing:.3px}.method input{margin-left:auto;appearance:none;flex-shrink:0;border:1.5px solid #d4dce8;border-radius:50%;width:19px;height:19px;background:#fff;position:relative}.method input:checked{border-color:#274971;background:#274971}.method input:checked:after{content:'';position:absolute;left:5px;top:3px;width:5px;height:8px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(45deg)}.pay{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-height:55px;background:linear-gradient(110deg,#173658,#284b79);color:#fff;border:0;border-radius:13px;font-size:14px;font-weight:500;letter-spacing:1px;box-shadow:0 9px 18px #1a3d6421;padding:0 19px}.pay-label{flex:1;text-align:center;padding-left:18px}.pay-arrow{font-size:21px;line-height:1}.pay:disabled{background:#dce3ed;color:#8091aa;box-shadow:none;cursor:default}.pay:not(:disabled):active{transform:translateY(1px)}.footnote{font-size:9px;text-align:center;padding:5px 8px;line-height:1.9;color:#9aa6b6}.message{font-size:10px;color:#8b7760;background:#f0ece5;border:1px solid #e9e2d7;border-radius:8px;padding:9px 12px;margin:0 0 13px}.message:empty{display:none}footer{display:flex;align-items:center;justify-content:center;gap:11px;color:#a9b3c1;font-size:9px;letter-spacing:2px;margin-top:22px}.footer-line{display:block;width:26px;height:1px;background:#d9e0e9}.result-mark{display:grid;place-items:center;width:65px;height:65px;margin:10px auto;background:#edf3fa;color:#34587f;border-radius:50%;font-size:35px}#result{text-align:center;margin-top:5px}#result h2{font-size:21px;margin-top:19px}#order-amount{font-size:27px;color:#233e60;font-weight:500}.order-id{font-family:monospace;overflow-wrap:anywhere;font-size:10px}.outline{width:100%;background:white;border:1px solid #dce3ee;border-radius:10px;min-height:46px;margin-top:14px;color:#51627e}.text-button{border:0;background:none;color:#8a96a7;font-size:12px;padding:18px}button:focus-visible,input:focus-visible{outline:3px solid #9eb9fb;outline-offset:3px}[hidden]{display:none!important}@media(min-width:600px){main{margin:25px auto;border-radius:25px;min-height:calc(100dvh - 50px);box-shadow:0 20px 70px #18385915}}@media(max-width:360px){main{padding:22px 17px}.intro{padding-top:27px}.card{padding:19px}.money input{font-size:40px}.section-heading>span{font-size:6px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Tactile mobile controls */
.presets{gap:10px}.presets button{position:relative;min-height:49px;border:1.5px solid #e0e7f0;background:#f6f8fc;border-radius:12px;color:#4d6382;font-size:14px;font-weight:600;box-shadow:0 2px 0 #dce4ef55;transition:transform .14s,background .18s,border-color .18s,box-shadow .18s}.presets button.selected{background:#eaf1fc;color:#193f70;border-color:#345e94;box-shadow:0 3px 9px #224d7d12}.presets button.selected:after{content:'✓';position:absolute;right:6px;top:3px;font-size:9px;color:#345e94}.presets button:active{transform:scale(.96);box-shadow:none}.presets button:hover:not(.selected){background:#eef3fb;border-color:#b6c7df}.method{min-height:75px;border-radius:14px;border-width:1.5px;transition:transform .14s,background .18s,border-color .18s;user-select:none;-webkit-tap-highlight-color:transparent}.method:has(input:checked){border-color:#4d719f;background:#f0f5fd;box-shadow:0 3px 11px #24466e08}.method:active{transform:scale(.985)}.method:has(input:focus-visible){outline:3px solid #9eb9fb;outline-offset:3px}.method input{width:22px;height:22px;margin-right:1px}.method input:checked:after{left:6px;top:4px}.pay{position:relative;min-height:59px;border-radius:15px;background:linear-gradient(110deg,#1d426e,#315e96);box-shadow:0 8px 18px #244e7e2b,inset 0 1px 0 #ffffff20;letter-spacing:.6px;font-weight:600;transition:transform .14s,box-shadow .18s,filter .18s;-webkit-tap-highlight-color:transparent;overflow:hidden}.pay-label{padding-left:27px}.pay-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#ffffff12;font-size:22px}.pay:not(:disabled):active{transform:scale(.98);box-shadow:0 3px 8px #244e7e22;filter:brightness(.93)}.pay:not(:disabled):hover{filter:brightness(1.07)}.pay:disabled{background:#e2e8f1;border:1px solid #d1dae7;color:#7c8ca4;box-shadow:inset 0 1px 0 #ffffff80;opacity:1}.pay:disabled .pay-arrow{background:#d4ddea;color:#8597af}.outline{min-height:51px;border-radius:12px;border:1.5px solid #becce0;background:#f7faff;font-weight:500;color:#35567f;transition:transform .14s,background .18s}.outline:not(:disabled):active{transform:scale(.98);background:#eaf1fb}.outline:disabled{color:#9aa7b9;border-color:#e1e6ed;background:#f5f7fa}.text-button{min-height:46px;border-radius:10px;color:#617c9e}.text-button:active{background:#edf3fa}.pay[aria-busy=true]{pointer-events:none}.pay[aria-busy=true] .pay-arrow{font-size:0;background:none;border:2px solid #ffffff50;border-top-color:#fff;border-radius:50%;width:19px;height:19px;animation:button-spin .8s linear infinite}@keyframes button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pay[aria-busy=true] .pay-arrow{animation:none}}
.exchange-box{margin-top:20px;border:1px solid #dce7ee;border-radius:13px;background:linear-gradient(130deg,#f2f7fa,#f8fafc);padding:15px}.exchange-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#617c92}.exchange-heading>span{display:flex;align-items:center;gap:6px}.exchange-heading i{width:5px;height:5px;background:#599c86;border-radius:50%}#refresh-rate{border:0;background:transparent;color:#547a99;font-size:10px;min-height:32px;padding:5px 9px;border-radius:7px}#refresh-rate:active{background:#e0ebf2}.rate-value{color:#35556e;font-size:13px;font-weight:600;letter-spacing:.3px;margin-top:7px}.rate-meta{font-size:9px;color:#93a3b1;margin:7px 0 14px}.exchange-total{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px dashed #d4e0e9;padding-top:14px}.exchange-total>span{font-size:11px;color:#526b80}.exchange-total small{display:block;font-size:8px;color:#96a5b3;margin-top:5px}.exchange-total b{font-size:22px;color:#204e63;font-weight:600;letter-spacing:-.5px;white-space:nowrap}.fx-note{font-size:8px;color:#8b9da9;margin:12px 0 0;line-height:1.7}.amount-card .hint{margin-top:11px}.currency{letter-spacing:.4px}.intro{padding-top:28px;padding-bottom:20px}@media(max-width:360px){.exchange-total b{font-size:19px}.exchange-box{padding:12px}}