/* Production recharge presentation; isolated from membership and account layout. */
.mf-account-dialog.mf-recharge-dialog{width:min(1120px,calc(100% - 32px));max-width:none;padding:0;background:transparent;border:0;border-radius:26px;overflow:auto;max-height:calc(100dvh - 32px)}
.mf-recharge-dialog>.mf-close{display:none}.mf-recharge-dialog>#mf-message:not(:empty){margin:0;padding:14px 28px;background:#18201d}
.mf-account-dialog .mf-recharge-checkout :where(button){font:inherit;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:transparent;line-height:1.4;cursor:pointer}
.mf-account-dialog .mf-recharge-checkout :where(svg){width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.mf-account-dialog .mf-recharge-checkout :where(a){color:#c4d9cc;text-decoration:none}
@property --mfrc-light { syntax: '<percentage>'; inherits: true; initial-value: 24%; }
.mf-account-dialog .mf-recharge-checkout{ --mfrc-bg:#18201d; --mfrc-text:#eef8f2; --mfrc-muted:#a0b3a9; --mfrc-accent:#b1ead4; --mfrc-ink:#14382c; --mfrc-line:#d9f9ed16; }
.mf-account-dialog .mf-recharge-checkout{ width:min(1120px,100%); color:var(--mfrc-text); background:linear-gradient(135deg,#1d2722,#181e1b 75%); border:1px solid #d9f9ed21; border-radius:26px; box-shadow:0 38px 100px #0007,0 8px 24px #0004; overflow:hidden; position:relative; isolation:isolate; }
.mf-account-dialog .mfrc-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:30px 36px 28px; }
.mf-account-dialog .mfrc-eyebrow{ font-size:10px; letter-spacing:2.8px; color:var(--mfrc-muted); font-weight:500; }
.mf-account-dialog .mfrc-header h1{ font-size:28px; font-weight:600; line-height:1.4; margin:9px 0 0; letter-spacing:0; }
.mf-account-dialog .mfrc-header-actions{ display:flex; align-items:center; gap:24px; }
.mf-account-dialog .mfrc-account{ display:flex; align-items:center; gap:11px; font-size:13px; color:#c0cdc5; }
.mf-account-dialog .mfrc-account img{ border-radius:50%; object-fit:cover; }
.mf-account-dialog .mfrc-icon{ background:transparent; color:#a3b3a8; border-radius:50%; width:36px; height:36px; display:grid; place-items:center; font-size:25px; }
.mf-account-dialog .mf-recharge-checkout .mfrc-icon:hover{ background:#e1ffef0c; color:#fff; }
.mf-account-dialog .mfrc-body{ border-top:1px solid var(--mfrc-line); display:grid; grid-template-columns:45% 55%; min-height:560px; position:relative; }
.mf-account-dialog .mfrc-visual{ position:relative; display:flex; flex-direction:column; border-right:1px solid var(--mfrc-line); padding:30px 32px; min-width:0; background:radial-gradient(ellipse at 50% 45%,#48745a1a,transparent 64%); }
.mf-account-dialog .mfrc-visual-top{ display:flex; justify-content:space-between; gap:12px; color:#b8d9ca; font-size:9px; letter-spacing:2px; }
.mf-account-dialog .mfrc-visual-top span:last-child{ font-size:11px; color:#91a699; letter-spacing:1px; }
.mf-account-dialog .mfrc-stage{ position:relative; flex:1; min-height:330px; perspective:1100px; }
.mf-account-dialog .mfrc-token-stack{ --mfrc-light:24%; position:absolute; width:226px; height:226px; left:calc(50% - 113px); top:calc(50% - 116px); transform-style:preserve-3d; transform:rotateX(21deg) rotateY(-27deg) rotateZ(-12deg); animation:mfrc-float 6s ease-in-out infinite; }
.mf-account-dialog .mfrc-token{ position:absolute; inset:0; border-radius:47px; transform-style:preserve-3d; background:linear-gradient(135deg,#edfff1 0%,#6d9e89 11%,#203e31 45%,#729a7b 82%,#d8f5d8); padding:3px; box-shadow:2px 4px 0 #284939,3px 6px 0 #152e23,4px 8px 0 #173426,0 13px 15px #0004; }
.mf-account-dialog .mfrc-token-back{ transform:translate3d(-36px,33px,-48px); }
.mf-account-dialog .mfrc-token-mid{ transform:translate3d(-18px,17px,-24px); }
.mf-account-dialog .mfrc-token-face{ width:100%; height:100%; border-radius:44px; position:relative; overflow:hidden; background:radial-gradient(ellipse at var(--mfrc-light) 4%,#c0ffe0b0,transparent 65%),linear-gradient(140deg,#4b9e77,#245c44 42%,#16382e 73%,#4b815b); box-shadow:inset 0 0 0 1px #e1fff530,inset 0 3px 5px #edfff540,inset 0 -5px 12px #061c1880; }
.mf-account-dialog .mfrc-token-face::after{ content:""; position:absolute; inset:-35%; background:linear-gradient(117deg,transparent 22%,#e9fff70c 28%,#f1ffea55 30%,#e9fff70a 33%,transparent 39%); transform:translateX(calc(var(--mfrc-light) - 50%)); pointer-events:none; }
.mf-account-dialog .mfrc-token-front .mfrc-token-face{ background:radial-gradient(ellipse at var(--mfrc-light) -20%,#d5ffcb9c,transparent 66%),linear-gradient(145deg,#6fa882,#265e48 45%,#153e33 75%,#377550); }
.mf-account-dialog .mfrc-token-ring{ position:absolute; inset:24px; border-radius:30px; box-shadow:inset 0 1px 0 #e2ffde5e,0 1px 0 #081f25b0; border:1px solid #082a1e70; }
.mf-account-dialog .mfrc-token-face img{ position:absolute; width:90px; height:90px; object-fit:contain; left:calc(50% - 45px); top:50px; filter:grayscale(1) brightness(0) invert(1) drop-shadow(0 3px 1px #12322780); opacity:.93; }
.mf-account-dialog .mfrc-token-face>span{ position:absolute; bottom:42px; width:100%; text-align:center; color:#e8f6db; font-size:10px; font-weight:600; letter-spacing:3.2px; text-shadow:0 2px 1px #153d2b; }
.mf-account-dialog .mfrc-ground{ position:absolute; width:238px; height:39px; left:calc(50% - 110px); top:calc(50% + 136px); border-radius:50%; background:#000; filter:blur(18px); opacity:.45; transform:rotate(-9deg); animation:mfrc-ground 6s ease-in-out infinite; }
.mf-account-dialog .mfrc-orbit{ display:none; position:absolute; width:16px; height:16px; border-radius:4px; background:linear-gradient(135deg,#e6ffd0,#7dc19a 70%); box-shadow:inset 0 1px 1px #fff9,1px 3px 2px #39634a,0 0 25px #a3f6be25; }
.mf-account-dialog .mfrc-visual-bottom{ position:relative; text-align:center; margin-top:auto; padding-top:22px; }
.mf-account-dialog .mfrc-visual-bottom h2{ font-size:22px; font-weight:500; margin:0; letter-spacing:1px; }
.mf-account-dialog .mfrc-visual-bottom p{ color:#9bae9f; font-size:11px; line-height:1.7; margin:13px 0 0; }
.mf-account-dialog .mfrc-details{ min-width:0; padding:31px 38px 30px; display:flex; flex-direction:column; }
.mf-account-dialog .mfrc-label{ margin:0 0 16px; color:#c0cdc5; font-size:13px; font-weight:500; }
.mf-account-dialog .mfrc-presets{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mf-account-dialog .mfrc-preset{ border:1px solid #cce9db1b; border-radius:13px; background:#111a143d; padding:17px 5px 14px; display:flex; flex-direction:column; align-items:center; gap:9px; color:#e8f2eb; }
.mf-account-dialog .mfrc-preset strong{ font-family:"Bahnschrift","Segoe UI",sans-serif; font-weight:600; font-size:21px; line-height:1.2; white-space:nowrap; }
.mf-account-dialog .mfrc-preset small{ font-size:10px; color:#9db1a5; white-space:nowrap; }
.mf-account-dialog .mf-recharge-checkout .mfrc-preset:hover{ background:#d6fbe90a; border-color:#b1ead466; }
.mf-account-dialog .mf-recharge-checkout .mfrc-preset[aria-checked=true]{ background:#b1ead414; border-color:#b1ead49e; box-shadow:inset 0 0 0 1px #b1ead409; }
.mf-account-dialog .mfrc-preset[aria-checked=true] strong,
.mf-account-dialog .mfrc-preset[aria-checked=true] small{ color:#c7f2dd; }
.mf-account-dialog .mfrc-custom-label{ display:block; margin:23px 0 10px; font-size:12px; color:#a6b9ad; }
.mf-account-dialog .mfrc-custom{ display:flex; align-items:center; gap:10px; border:1px solid #cce9db26; border-radius:12px; background:#0c171036; padding:0 17px; height:52px; }
.mf-account-dialog .mfrc-custom:focus-within{ border-color:#b1ead49e; box-shadow:0 0 0 3px #b1ead409; }
.mf-account-dialog .mfrc-custom>span{ color:#a8c5b2; font-size:17px; }
.mf-account-dialog .mfrc-custom input{ width:100%; min-width:0; color:#edf7f0; background:transparent; border:0; outline:0; font-family:"Bahnschrift","Segoe UI",sans-serif; font-size:21px; font-weight:500; caret-color:#b1ead4; }
.mf-account-dialog .mfrc-custom input::placeholder{ font-family:"Segoe UI","Microsoft YaHei UI",sans-serif; font-size:13px; font-weight:400; color:#6e8a7c; }
.mf-account-dialog .mfrc-custom:has(input[aria-invalid=true]){ border-color:#f3a995; }
.mf-account-dialog .mfrc-validation{ min-height:16px; margin:6px 0 0; color:#f3bba7; font-size:11px; }
.mf-account-dialog .mfrc-receive{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin:3px 0 0; padding:0 0 23px; border-bottom:1px solid var(--mfrc-line); }
.mf-account-dialog .mfrc-receive-label{ color:#a5b9ab; font-size:12px; display:block; margin-bottom:7px; }
.mf-account-dialog .mfrc-receive-total{ display:flex; align-items:baseline; gap:8px; line-height:1.1; }
.mf-account-dialog .mfrc-receive-total strong{ font-family:"Bahnschrift","Segoe UI",sans-serif; font-size:45px; font-weight:500; color:#d1f7dd; font-variant-numeric:tabular-nums; letter-spacing:-1.6px; }
.mf-account-dialog .mfrc-receive-total>span{ font-size:12px; color:#bfd0c3; }
.mf-account-dialog .mfrc-bonus{ color:#afd1ba; font-size:11px; line-height:1.7; padding-bottom:4px; text-align:right; }
.mf-account-dialog .mfrc-bonus b{ color:#c6edcf; font-weight:500; display:block; }
.mf-account-dialog .mfrc-rules{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:15px 0 20px; color:#91a99b; font-size:10px; line-height:1.7; }
.mf-account-dialog .mfrc-rules button{ color:#b9cdbf; padding:4px 0 4px 8px; background:transparent; font-size:10px; white-space:nowrap; }
.mf-account-dialog .mfrc-rules button:hover{ color:#e7ffef; }
.mf-account-dialog .mfrc-total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:auto 0 18px; }
.mf-account-dialog .mfrc-total>span{ color:#a2b4a8; font-size:12px; }
.mf-account-dialog .mfrc-price{ display:flex; align-items:baseline; gap:4px; color:#f0f8ef; }
.mf-account-dialog .mfrc-price small{ font-size:18px; }
.mf-account-dialog .mfrc-price strong{ font-family:"Bahnschrift","Segoe UI",sans-serif; font-size:38px; font-weight:500; line-height:1.15; font-variant-numeric:tabular-nums; }
.mf-account-dialog .mf-recharge-checkout .mfrc-primary{ display:block; width:220px; max-width:100%; min-height:47px; align-self:center; margin-left:auto; margin-right:auto; border:1px solid #e5fff11c; border-radius:28px; background:#b1ead4; color:#14382c; font-size:14px; font-weight:600; box-shadow:inset 0 1px 0 #fff5,0 4px 14px #0001; transition:background .2s,box-shadow .2s; }
.mf-account-dialog .mf-recharge-checkout .mfrc-primary:hover{ color:#14382c; background:#c8f4e2; box-shadow:inset 0 1px 0 #fff8,0 5px 24px #a1e9c815; }
.mf-account-dialog .mf-recharge-checkout .mfrc-primary:disabled{ color:#b7cbbf; background:#365446; border-color:transparent; box-shadow:none; opacity:.6; cursor:default; }
.mf-account-dialog .mfrc-terms{ margin:13px 0 0; color:#8fa79a; text-align:center; font-size:10px; line-height:1.8; }
.mf-account-dialog .mfrc-terms button,
.mf-account-dialog .mfrc-payment-terms button{ padding:0; background:transparent; color:#c4d9cc; font-size:inherit; }
.mf-account-dialog .mfrc-terms button:hover,
.mf-account-dialog .mfrc-payment-terms button:hover{ color:#f4fff7; }
.mf-account-dialog .mf-recharge-checkout button:focus-visible{ outline:2px solid #b1ead4; outline-offset:4px; }
.mf-account-dialog .mf-recharge-checkout .mfrc-custom input:focus-visible{ outline:0; }
.mf-account-dialog .mfrc-payment-top{ display:flex; align-items:center; justify-content:space-between; }
.mf-account-dialog .mfrc-back{ padding:0; color:#a7c6b4; background:transparent; display:flex; align-items:center; gap:6px; font-size:12px; }
.mf-account-dialog .mfrc-back svg{ width:15px; height:15px; }
.mf-account-dialog .mfrc-back:hover{ color:#f2fff3; }
.mf-account-dialog .mfrc-order-summary{ color:#a6bdaf; font-size:12px; }
.mf-account-dialog .mfrc-payment-title{ text-align:center; font-size:17px; font-weight:500; margin:24px 0 7px; color:#cbdbd0; }
.mf-account-dialog .mfrc-payment-amount{ text-align:center; color:#f1f9f1; font-family:"Bahnschrift","Segoe UI",sans-serif; font-size:40px; line-height:1.15; margin:0 0 17px; }
.mf-account-dialog .mfrc-payment-amount small{ font-size:21px; margin-right:5px; }
.mf-account-dialog .mfrc-qr{ width:226px; height:226px; background:#f5f5ef; border-radius:16px; padding:17px; position:relative; margin:0 auto; box-shadow:0 6px 20px #0002; }
.mf-account-dialog .mfrc-qr canvas{ display:block; width:100%; height:100%; image-rendering:pixelated; }
.mf-account-dialog .mfrc-alipay{ position:absolute; left:calc(50% - 20px); top:calc(50% - 20px); width:40px; height:40px; padding:4px; background:#f5f5ef; border-radius:9px; }
.mf-account-dialog .mfrc-alipay img{ width:100%; height:100%; object-fit:contain; }
.mf-account-dialog .mfrc-pay-method{ text-align:center; font-size:18px; font-weight:700; margin:18px 0 8px; color:#e5f0e7; }
.mf-account-dialog .mfrc-wait{ text-align:center; font-size:11px; color:#a5b9a9; margin:0; }
.mf-account-dialog .mfrc-wait i{ display:inline-block; width:5px; height:5px; border-radius:50%; background:#b1ead4; margin:0 7px 1px 0; box-shadow:0 0 10px #b1ead440; }
.mf-account-dialog .mfrc-payment-terms{ text-align:center; font-size:11px; color:#91a79a; line-height:1.9; margin:auto 0 0; padding-top:26px; }
.mf-account-dialog .mfrc-pay-actions{ display:flex; justify-content:center; gap:25px; margin-top:14px; }
.mf-account-dialog .mfrc-pay-actions button{ background:transparent; color:#a2bbab; font-size:11px; padding:3px 0; }
.mf-account-dialog .mfrc-pay-actions button:hover{ color:#effff4; }
.mf-account-dialog .mfrc-payment-notice{ min-height:16px; color:#bfdbc9; text-align:center; font-size:11px; margin:8px 0 0; }
.mf-account-dialog .mf-recharge-checkout[data-state=pay] .mfrc-body{ min-height:595px; }
.mf-account-dialog .mf-recharge-checkout.is-fading .mfrc-body{ opacity:0; transform:translateY(-4px); transition:opacity .4s ease,transform .4s ease; pointer-events:none; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-body{ display:block; height:590px; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-visual{ border:0; padding:0; width:100%; height:365px; background:radial-gradient(ellipse at 50% 60%,#568c6030,transparent 38%); }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-visual-top,
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-visual-bottom{ display:none; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-stage{ min-height:0; height:100%; flex:none; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-stack{ top:90px; transform:rotateX(14deg) rotateY(-18deg) rotateZ(-6deg); animation:mfrc-deposit-pose 2.8s cubic-bezier(.18,.7,.24,1) both,mfrc-success-float 6s 2.8s ease-in-out infinite; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-back{ animation:mfrc-back-join 2s cubic-bezier(.2,.7,.2,1) both; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-mid{ animation:mfrc-mid-join 2.1s cubic-bezier(.2,.7,.2,1) both; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-ground{ top:326px; animation:mfrc-deposit-shadow 2.8s ease both,mfrc-ground 6s 2.8s ease-in-out infinite; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-orbit{ display:block; left:calc(50% - 8px); top:160px; animation:mfrc-credit-arrive 1.6s .5s cubic-bezier(.3,.3,.25,1) both; }
.mf-account-dialog .mfrc-orbit-one{ --mfrc-from-x:-220px; --mfrc-from-y:-70px; --mfrc-turn:-40deg; }
.mf-account-dialog .mfrc-orbit-two{ --mfrc-from-x:200px; --mfrc-from-y:-30px; --mfrc-turn:30deg; }
.mf-account-dialog .mfrc-orbit-three{ --mfrc-from-x:140px; --mfrc-from-y:-110px; --mfrc-turn:70deg; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-orbit-two{ animation-delay:.75s; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-orbit-three{ animation-delay:.95s; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-details{ position:absolute; top:360px; left:0; width:100%; padding:0 24px; align-items:center; text-align:center; }
.mf-account-dialog .mfrc-success-summary{ opacity:0; animation:mfrc-receipt-in .7s .8s ease both; }
.mf-account-dialog .mfrc-success-summary>span{ color:#a5bdae; font-size:12px; letter-spacing:1px; }
.mf-account-dialog .mfrc-success-value{ margin:10px 0 6px; display:flex; align-items:baseline; justify-content:center; gap:9px; }
.mf-account-dialog .mfrc-success-value strong{ color:#d4f7de; font-family:"Bahnschrift","Segoe UI",sans-serif; font-size:51px; line-height:1.1; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-1.5px; }
.mf-account-dialog .mfrc-success-value span{ color:#b5cbbd; font-size:13px; }
.mf-account-dialog .mfrc-success-summary p{ font-size:11px; color:#9ab5a3; margin:8px 0 0; }
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-primary{ margin-top:28px; opacity:0; animation:mfrc-receipt-in .6s 2.6s ease both; }
.mf-account-dialog .mf-recharge-checkout[data-state=success][data-ready=true] .mfrc-primary{ opacity:1; }
@keyframes mfrc-float { 0%,100%{transform:translateY(4px) rotateX(21deg) rotateY(-27deg) rotateZ(-12deg);--mfrc-light:24%}50%{transform:translateY(-7px) rotateX(17deg) rotateY(-21deg) rotateZ(-9deg);--mfrc-light:78%} }
@keyframes mfrc-ground { 0%,100%{opacity:.42;filter:blur(17px);transform:scale(1) rotate(-9deg)}50%{opacity:.29;filter:blur(22px);transform:scale(.92) rotate(-6deg)} }
@keyframes mfrc-deposit-pose { 0%{opacity:0;transform:translateY(80px) rotateX(32deg) rotateY(-32deg) rotateZ(-15deg) scale(.87);--mfrc-light:0%}22%{opacity:1}100%{opacity:1;transform:translateY(0) rotateX(14deg) rotateY(-18deg) rotateZ(-6deg) scale(1);--mfrc-light:24%} }
@keyframes mfrc-back-join { 0%{transform:translate3d(-55px,82px,-64px)}100%{transform:translate3d(-20px,20px,-32px)} }
@keyframes mfrc-mid-join { 0%{transform:translate3d(38px,-38px,-35px)}100%{transform:translate3d(-10px,10px,-16px)} }
@keyframes mfrc-deposit-shadow { 0%{opacity:0;transform:scale(.6)}100%{opacity:.42;transform:scale(1) rotate(-9deg)} }
@keyframes mfrc-success-float { 0%,100%{transform:translateY(0) rotateX(14deg) rotateY(-18deg) rotateZ(-6deg);--mfrc-light:24%}50%{transform:translateY(-7px) rotateX(11deg) rotateY(-13deg) rotateZ(-4deg);--mfrc-light:78%} }
@keyframes mfrc-credit-arrive { 0%{opacity:0;transform:translate(var(--mfrc-from-x),var(--mfrc-from-y)) rotate(var(--mfrc-turn)) scale(.65)}24%{opacity:.9}82%{opacity:.9}100%{opacity:0;transform:translate(0,20px) rotate(0) scale(.3)} }
@keyframes mfrc-receipt-in { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
@media(min-width:601px) and (max-width:1100px) {
.mf-account-dialog .mfrc-details{padding:28px}
.mf-account-dialog .mfrc-visual{padding:30px 24px}
.mf-account-dialog .mfrc-preset strong{font-size:18px}
.mf-account-dialog .mfrc-preset small{font-size:9px}
.mf-account-dialog .mfrc-token-stack{width:200px;height:200px;left:calc(50% - 100px);top:calc(50% - 103px)}
.mf-account-dialog .mfrc-token{border-radius:43px}
.mf-account-dialog .mfrc-token-face{border-radius:40px}
.mf-account-dialog .mfrc-token-face img{top:39px;width:80px;height:80px;left:calc(50% - 40px)}
.mf-account-dialog .mfrc-token-face>span{bottom:37px}
.mf-account-dialog .mfrc-token-ring{inset:20px}
.mf-account-dialog .mfrc-ground{width:200px;left:calc(50% - 97px);top:calc(50% + 119px)}
.mf-account-dialog .mfrc-receive-total strong{font-size:39px} }
@media(max-width:850px) {
.mf-account-dialog .mfrc-body{grid-template-columns:40% 60%}
.mf-account-dialog .mfrc-token-stack{width:170px;height:170px;left:calc(50% - 85px)}
.mf-account-dialog .mfrc-token{border-radius:37px}
.mf-account-dialog .mfrc-token-face{border-radius:34px}
.mf-account-dialog .mfrc-token-face img{width:68px;height:68px;top:33px;left:calc(50% - 34px)}
.mf-account-dialog .mfrc-token-face>span{bottom:29px;font-size:8px;letter-spacing:2px}
.mf-account-dialog .mfrc-token-ring{inset:17px;border-radius:23px}
.mf-account-dialog .mfrc-visual-bottom h2{font-size:18px}
.mf-account-dialog .mfrc-visual-bottom p{font-size:10px}
.mf-account-dialog .mfrc-presets{gap:7px}
.mf-account-dialog .mfrc-preset strong{font-size:17px}
.mf-account-dialog .mfrc-preset{border-radius:10px}
.mf-account-dialog .mfrc-rules{font-size:9px}
.mf-account-dialog .mfrc-visual-top{font-size:7px;letter-spacing:1px}
.mf-account-dialog .mfrc-visual-top span:last-child{font-size:9px} }
@media(max-width:600px) {
.mf-account-dialog .mf-recharge-checkout{border-radius:19px}
.mf-account-dialog .mfrc-header{padding:21px 19px 20px;gap:10px}
.mf-account-dialog .mfrc-eyebrow{font-size:8px;letter-spacing:1.8px}
.mf-account-dialog .mfrc-header h1{font-size:22px;margin-top:7px}
.mf-account-dialog .mfrc-header-actions{gap:10px}
.mf-account-dialog .mfrc-account{gap:7px;font-size:10px}
.mf-account-dialog .mfrc-account img{width:29px;height:29px}
.mf-account-dialog .mfrc-icon{width:29px;height:29px}
.mf-account-dialog .mfrc-body{display:block;min-height:0}
.mf-account-dialog .mfrc-visual{height:196px;border-right:0;border-bottom:1px solid var(--mfrc-line);padding:17px 20px;background:radial-gradient(ellipse at 64% 40%,#48745a25,transparent 65%)}
.mf-account-dialog .mfrc-visual-top{font-size:8px;letter-spacing:1.3px;max-width:44%;display:block}
.mf-account-dialog .mfrc-visual-top span:last-child{display:block;margin-top:7px;font-size:10px;letter-spacing:.5px}
.mf-account-dialog .mfrc-stage{position:absolute;right:7px;top:4px;width:55%;height:180px;min-height:0}
.mf-account-dialog .mfrc-token-stack{width:124px;height:124px;left:calc(50% - 62px);top:27px}
.mf-account-dialog .mfrc-token{border-radius:28px;padding:2px}
.mf-account-dialog .mfrc-token-face{border-radius:26px}
.mf-account-dialog .mfrc-token-ring{inset:13px;border-radius:17px}
.mf-account-dialog .mfrc-token-face img{width:49px;height:49px;top:26px;left:calc(50% - 24.5px)}
.mf-account-dialog .mfrc-token-face>span{font-size:6px;letter-spacing:1.5px;bottom:19px}
.mf-account-dialog .mfrc-token-back{transform:translate3d(-20px,20px,-32px)}
.mf-account-dialog .mfrc-token-mid{transform:translate3d(-10px,10px,-16px)}
.mf-account-dialog .mfrc-ground{width:130px;height:22px;left:calc(50% - 62px);top:159px;filter:blur(13px)}
.mf-account-dialog .mfrc-visual-bottom{max-width:44%;text-align:left;margin:auto 0 0;padding-top:14px}
.mf-account-dialog .mfrc-visual-bottom h2{font-size:14px;line-height:1.65;letter-spacing:0;max-width:100px}
.mf-account-dialog .mfrc-visual-bottom p{font-size:9px;line-height:1.8;margin:6px 0 0;max-width:115px}
.mf-account-dialog .mfrc-details{padding:23px 20px 24px}
.mf-account-dialog .mfrc-label{font-size:12px;margin-bottom:13px}
.mf-account-dialog .mfrc-presets{gap:7px}
.mf-account-dialog .mfrc-preset{padding:14px 3px 12px;gap:7px;border-radius:10px}
.mf-account-dialog .mfrc-preset strong{font-size:17px}
.mf-account-dialog .mfrc-preset small{font-size:8px}
.mf-account-dialog .mfrc-custom-label{margin-top:20px;font-size:11px}
.mf-account-dialog .mfrc-custom{height:47px;padding:0 14px}
.mf-account-dialog .mfrc-custom input{font-size:20px}
.mf-account-dialog .mfrc-receive{margin-top:2px;padding-bottom:18px}
.mf-account-dialog .mfrc-receive-label{font-size:11px}
.mf-account-dialog .mfrc-receive-total strong{font-size:39px}
.mf-account-dialog .mfrc-receive-total>span{font-size:11px}
.mf-account-dialog .mfrc-bonus{font-size:9px}
.mf-account-dialog .mfrc-rules{font-size:9px;gap:5px;margin-top:12px;margin-bottom:20px}
.mf-account-dialog .mfrc-rules button{font-size:9px;padding-left:4px}
.mf-account-dialog .mfrc-price strong{font-size:33px}
.mf-account-dialog .mfrc-total{margin-bottom:17px}
.mf-account-dialog .mf-recharge-checkout .mfrc-primary{width:190px;min-height:44px;font-size:13px}
.mf-account-dialog .mfrc-terms{font-size:9px;margin-top:12px}
.mf-account-dialog .mf-recharge-checkout[data-state=pay] .mfrc-body{min-height:0}
.mf-account-dialog .mf-recharge-checkout[data-state=pay] .mfrc-visual{display:none}
.mf-account-dialog .mfrc-payment-title{margin-top:24px;font-size:16px}
.mf-account-dialog .mfrc-payment-amount{font-size:36px}
.mf-account-dialog .mfrc-qr{width:216px;height:216px}
.mf-account-dialog .mfrc-pay-method{font-size:18px}
.mf-account-dialog .mfrc-payment-terms{padding-top:28px}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-body{height:510px}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-visual{display:block;height:300px;border:0}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-stage{width:100%;height:100%;top:0;left:0;right:auto}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-stack{width:184px;height:184px;left:calc(50% - 92px);top:68px}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token{border-radius:38px}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-face{border-radius:36px}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-ring{inset:21px;border-radius:22px}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-face img{width:74px;height:74px;top:40px;left:calc(50% - 37px)}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-face>span{font-size:8px;bottom:33px;letter-spacing:2px}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-ground{width:190px;left:calc(50% - 90px);top:267px}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-details{top:299px;padding:0 17px}
.mf-account-dialog .mfrc-success-value strong{font-size:44px}
.mf-account-dialog .mfrc-success-summary>span{font-size:11px}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-primary{margin-top:27px}
.mf-account-dialog .mfrc-orbit-one{--mfrc-from-x:-120px;--mfrc-from-y:-70px}
.mf-account-dialog .mfrc-orbit-two{--mfrc-from-x:115px;--mfrc-from-y:-30px}
.mf-account-dialog .mfrc-orbit-three{--mfrc-from-x:85px;--mfrc-from-y:-100px}
}
@media(max-width:360px) {
.mf-account-dialog .mfrc-header{padding-left:17px;padding-right:14px}
.mf-account-dialog .mfrc-account>span{display:none}
.mf-account-dialog .mfrc-details{padding-left:17px;padding-right:17px}
.mf-account-dialog .mfrc-preset strong{font-size:16px}
.mf-account-dialog .mfrc-preset small{font-size:7px}
.mf-account-dialog .mfrc-presets{gap:6px}
.mf-account-dialog .mfrc-bonus{font-size:8px}
.mf-account-dialog .mfrc-receive-total strong{font-size:36px}
.mf-account-dialog .mfrc-rules{font-size:8px}
.mf-account-dialog .mfrc-visual-bottom p{font-size:8px}
.mf-account-dialog .mfrc-visual-bottom h2{font-size:13px} }
@media(prefers-reduced-motion:reduce) {
.mf-account-dialog .mf-recharge-checkout *,
.mf-account-dialog .mf-recharge-checkout *::before,
.mf-account-dialog .mf-recharge-checkout *::after{animation:none!important;transition:none!important}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-orbit{display:none}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-stack{opacity:1;transform:rotateX(14deg) rotateY(-18deg) rotateZ(-6deg)}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-back{transform:translate3d(-20px,20px,-32px)}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-mid{transform:translate3d(-10px,10px,-16px)}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-primary,
.mf-account-dialog .mfrc-success-summary{opacity:1;transform:none}
}

.mf-account-dialog .mf-recharge-checkout{width:100%;font:14px/1.65 "Segoe UI","Microsoft YaHei",sans-serif}
.mf-account-dialog .mfrc-icon{padding:0;border:0;min-height:36px;flex:none}
.mf-account-dialog .mfrc-account{min-width:0}.mf-account-dialog .mfrc-account>span:last-child{max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mf-account-dialog .mfrc-account .mf-synced-avatar{width:36px;height:36px;min-width:36px;position:relative;flex:none;isolation:isolate;background:#9ebfdb;display:block;overflow:hidden;border-radius:50%;padding:0}
.mf-account-dialog .mfrc-account .mf-synced-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}.mf-account-dialog .mfrc-account .mf-synced-avatar>.mf-avatar-custom{object-fit:cover;object-position:center}
.mf-account-dialog .mfrc-custom-label{margin-top:23px;color:#a6b9ad;font-size:12px}
.mf-account-dialog .mfrc-custom input:not([type=checkbox]){padding:0;margin:0;min-height:0;background:transparent;border:0;border-radius:0;outline:0;font:500 21px/1.4 "Bahnschrift","Segoe UI",sans-serif}
.mf-account-dialog .mfrc-rules{display:block;margin-top:14px;margin-bottom:20px}.mf-account-dialog .mfrc-rules summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;list-style:none}.mf-account-dialog .mfrc-rules summary::-webkit-details-marker{display:none}.mf-account-dialog .mfrc-rules summary>span{color:#c4d9cc;white-space:nowrap}.mf-account-dialog .mfrc-rules p{margin:10px 0 5px;font-size:11px;line-height:1.8}
.mf-account-dialog .mfrc-qr-image{width:100%;height:100%;display:block;image-rendering:pixelated}.mf-account-dialog .mfrc-qr-notice{display:grid;place-items:center;height:100%;font-size:13px;line-height:1.8;color:#3c5848;text-align:center;margin:0}
.mf-account-dialog .mfrc-order-link{font-size:12px;text-align:center;display:block;margin-top:12px}
.mf-account-dialog .mfrc-pay-actions button:disabled{opacity:.45;cursor:default}
@media(max-width:600px){.mf-account-dialog.mf-recharge-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:19px}.mf-account-dialog .mfrc-header-actions{gap:8px}.mf-account-dialog .mfrc-account>span:last-child{max-width:72px}.mf-account-dialog .mfrc-account .mf-synced-avatar{width:29px;height:29px;min-width:29px}.mf-account-dialog .mfrc-qr{width:min(216px,100%);height:auto;aspect-ratio:1}.mf-account-dialog .mfrc-custom-label{font-size:11px;margin-top:20px}}
@media(max-width:360px){.mf-account-dialog .mfrc-account>span:last-child{display:none}.mf-account-dialog .mfrc-presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mf-account-dialog .mfrc-preset small{font-size:10px}}

.mf-account-dialog .mfrc-account .avatar-palette-lilac{background:#b4a7c5}
.mf-account-dialog .mfrc-account .avatar-palette-mint{background:#87b7b0}
.mf-account-dialog .mfrc-account .avatar-palette-apricot{background:#abc6d3}
.mf-account-dialog .mfrc-account .avatar-palette-rose{background:#b7adbd}
.mf-account-dialog .mfrc-account .avatar-palette-sky{background:#9ebfdb}
.mf-account-dialog .mfrc-account .avatar-palette-iris{background:#7fa1d2}
/* Share one frame across amount selection, payment and deposited credits. */
.mf-account-dialog.mf-recharge-dialog:has(> #mf-dialog-body > .mf-recharge-checkout) > #mf-message:not(:empty) {
  position: absolute;
  z-index: 5;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  max-height: 76px;
  overflow-y: auto;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid #d9f9ed26;
  border-radius: 12px;
  background: #25352e;
  box-shadow: 0 8px 28px #0006;
}
.mf-account-dialog .mf-recharge-checkout {
  --mfrc-body-height: min(595px, calc(100dvh - 164px));
}
.mf-account-dialog .mf-recharge-checkout[data-state] .mfrc-body {
  height: var(--mfrc-body-height);
  min-height: var(--mfrc-body-height);
  max-height: var(--mfrc-body-height);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.mf-account-dialog .mf-recharge-checkout:not([data-state=success]) .mfrc-details {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mf-account-dialog .mf-recharge-checkout:not([data-state=success]) .mfrc-details > * {
  flex-shrink: 0;
}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-details {
  padding-bottom: 2px;
}
@media (max-width: 600px) {
  .mf-account-dialog .mf-recharge-checkout {
    --mfrc-body-height: min(595px, calc(100dvh - 126px));
  }
  .mf-account-dialog .mf-recharge-checkout[data-state=choose] .mfrc-body {
    display: flex;
    flex-direction: column;
  }
  .mf-account-dialog .mf-recharge-checkout[data-state=choose] .mfrc-visual {
    flex: 0 0 196px;
  }
  .mf-account-dialog .mf-recharge-checkout[data-state=choose] .mfrc-details {
    flex: 1;
  }
  .mf-account-dialog .mf-recharge-checkout[data-state=pay] .mfrc-details {
    height: 100%;
  }
}
.mf-account-dialog .mf-recharge-checkout.is-fading .mfrc-body {
  transform: none;
  transition: opacity .4s ease;
}

/* Raise the artwork and receipt together without moving the frame or backdrop. */
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-stage,
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-details {
  transform: translateY(-36px);
}
.mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-stack {
  transform: translateY(0) rotateX(6deg) rotateY(-7deg) rotateZ(-1deg) scale(1);
}
@keyframes mfrc-deposit-pose {
  0% { opacity: 0; transform: translateY(80px) rotateX(18deg) rotateY(-15deg) rotateZ(-6deg) scale(.87); --mfrc-light: 0%; }
  22% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotateX(6deg) rotateY(-7deg) rotateZ(-1deg) scale(1); --mfrc-light: 24%; }
}
@keyframes mfrc-success-float {
  0%, 100% { transform: translateY(0) rotateX(6deg) rotateY(-7deg) rotateZ(-1deg) scale(1); --mfrc-light: 24%; }
  50% { transform: translateY(-5px) rotateX(4deg) rotateY(-5deg) rotateZ(1deg) scale(1); --mfrc-light: 78%; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-account-dialog .mf-recharge-checkout[data-state=success] .mfrc-token-stack {
    transform: translateY(0) rotateX(6deg) rotateY(-7deg) rotateZ(-1deg) scale(1);
  }
}