:root{color:#16221e;font-synthesis:none;--green:#159b74;--green-dark:#0e7b5b;--mint:#eaf8f2;--ink:#14211d;--muted:#75817d;--line:#e4ebe7;background:#f4f7f5;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html{background:#f4f7f5;min-width:320px}body{min-width:320px;min-height:100vh;margin:0}button,a{font:inherit}button{-webkit-tap-highlight-color:transparent}.checkout-shell{background:linear-gradient(#fffffff0,#f4f7f5fa 46%),radial-gradient(circle at 10% 0,#dff6ed 0,#0000 38%);min-height:100vh;padding:0 24px 28px;position:relative;overflow:hidden}.ambient{filter:blur(2px);pointer-events:none;border-radius:50%;position:absolute}.ambient-one{background:#28be9014;width:340px;height:340px;top:92px;right:-190px}.ambient-two{background:#28be900f;width:220px;height:220px;top:520px;left:-140px}.topbar{z-index:1;justify-content:space-between;align-items:center;width:min(100%,1040px);height:88px;margin:auto;display:flex;position:relative}.brand{color:inherit;align-items:center;gap:11px;text-decoration:none;display:flex}.brand-mark{width:35px;height:35px;color:var(--green);place-items:center;display:grid}.brand-mark svg{width:100%;height:100%}.brand-text{letter-spacing:-.5px;align-items:baseline;gap:5px;font-family:inherit;display:flex}.brand-text strong{font-size:20px;font-weight:800}.brand-text span{color:var(--green);letter-spacing:1.2px;font-size:13px;font-weight:800}.secure-badge{color:#68736f;align-items:center;gap:7px;font-size:13px;display:flex}.secure-badge svg{fill:none;stroke:#73817c;stroke-width:1.6px;width:16px}.payment-card,.steps-card{z-index:1;background:#fffffff2;border:1px solid #dce5e0e0;border-radius:24px;width:min(100%,1040px);margin:0 auto;position:relative;box-shadow:0 22px 65px #1a392f17,0 2px 6px #1a392f06}.state-card{z-index:1;border:1px solid var(--line);text-align:center;background:#fff;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:min(100%,680px);min-height:300px;margin:80px auto;padding:40px;display:flex;position:relative;box-shadow:0 22px 65px #1a392f17}.state-card p{max-width:420px;color:var(--muted);margin:0;font-size:13px;line-height:1.6}.loading-spinner{border:3px solid #dcece6;border-top-color:var(--green);border-radius:50%;width:30px;height:30px;animation:.8s linear infinite spin}.state-icon{color:#b76a25;background:#fff2e5;border-radius:50%;place-items:center;width:42px;height:42px;font-weight:800;display:grid}.payment-card{overflow:hidden}.merchant-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:72px;padding:15px 30px;display:flex}.merchant-info{align-items:center;gap:12px;display:flex}.merchant-logo{color:#fff;background:linear-gradient(145deg,#162c26,#1e4c3d);border-radius:13px;place-items:center;width:42px;height:42px;font-size:20px;font-weight:800;display:grid;box-shadow:inset 0 0 0 1px #ffffff1a}.merchant-info>div:last-child,.order-info{flex-direction:column;gap:3px;display:flex}.merchant-info span,.order-info span{color:#89928f;font-size:11px}.merchant-info strong,.order-info strong{color:#27332f;font-size:14px;font-weight:600}.order-info{align-items:flex-end}.order-info strong{letter-spacing:.15px;font-family:Manrope,sans-serif}.payment-heading{text-align:center;background:linear-gradient(#effaf6ad,#fff0);padding:28px 20px 24px}.payment-heading p{color:var(--muted);margin:0 0 5px;font-size:13px}.payment-heading h1{letter-spacing:-1.6px;color:var(--ink);margin:0;font:800 42px/1.2 Manrope,sans-serif}.payment-heading h1 small{color:#52615c;letter-spacing:.1px;margin-left:9px;font-size:15px;font-weight:700}.network-pill{width:fit-content;color:var(--green-dark);background:#f2fbf8;border:1px solid #cdeade;border-radius:99px;align-items:center;gap:7px;margin:12px auto 0;padding:6px 11px;font:700 11px Manrope;display:flex}.network-pill span{background:#23b88b;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 3px #23b88b21}.payment-body{border-top:1px solid var(--line);grid-template-columns:.82fr 1.18fr;min-height:340px;display:grid}.qr-column{border-right:1px solid var(--line);background:#fcfdfc;flex-direction:column;justify-content:center;align-items:center;padding:35px;display:flex}.qr-frame{background:#fff;border:1px solid #dfe7e3;border-radius:18px;width:208px;height:208px;padding:14px;position:relative;box-shadow:0 12px 32px #22433814}.qr-frame:before,.qr-frame:after{content:"";border-color:#25ad83;width:24px;height:24px;position:absolute}.qr-frame:before{border-top:2px solid #25ad83;border-left:2px solid #25ad83;border-radius:7px 0 0;top:-4px;left:-4px}.qr-frame:after{border-bottom:2px solid #25ad83;border-right:2px solid #25ad83;border-radius:0 0 7px;bottom:-4px;right:-4px}.qr-frame>img{width:100%;height:100%;image-rendering:pixelated;border-radius:3px;display:block}.qr-frame.expired{box-shadow:none;background:#faf8f7;border-color:#e8ded7}.qr-frame.expired:before,.qr-frame.expired:after{border-color:#c9bbb2}.expired-placeholder{color:#94877f;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.expired-placeholder span{color:#fff;background:#a99990;border-radius:50%;place-items:center;width:34px;height:34px;margin-bottom:10px;font-weight:800;display:grid}.expired-placeholder strong{font-size:13px}.expired-placeholder small{margin-top:4px;font-size:10px}.qr-token{background:var(--green);color:#fff;border:5px solid #fff;border-radius:50%;place-items:center;width:39px;height:39px;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.qr-token b{font:800 20px Manrope;transform:translateY(-1px)}.scan-hint{color:#687570;align-items:center;gap:7px;margin-top:15px;font-size:12px;display:flex}.scan-hint svg{fill:none;width:17px;stroke:var(--green);stroke-width:1.7px}.details-column{flex-direction:column;justify-content:center;padding:36px 38px 30px;display:flex}.section-label{color:#687570;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:12px;display:flex}.section-label em{color:#15916d;background:#edf9f5;border-radius:5px;padding:3px 7px;font:700 10px Manrope}.address-box{cursor:pointer;color:#2b3733;text-align:left;background:#fafcfb;border:1px solid #dce6e1;border-radius:11px;justify-content:space-between;align-items:center;gap:14px;width:100%;min-height:53px;padding:10px 11px 10px 15px;transition:all .2s;display:flex}.address-box:hover{background:#f8fdfa;border-color:#9dd8c4}.address-box:disabled,.address-box.expired{cursor:not-allowed;color:#9d928c;background:#faf8f7;border-color:#e6e0dc}.address-box.expired .copy-action{color:#958a84;background:#eee9e6}.address-box>span:first-child{overflow-wrap:anywhere;letter-spacing:.1px;font:600 12px/1.4 Manrope,sans-serif}.copy-action{min-width:68px;height:33px;color:var(--green-dark);background:#e9f7f2;border-radius:8px;flex:none;justify-content:center;align-items:center;gap:5px;padding:0 10px;font-size:12px;font-weight:600;display:flex}.copy-action.success{color:#fff;background:var(--green)}.copy-action svg{fill:none;stroke:currentColor;stroke-width:1.7px;width:15px}.timer-panel{background:#fbfcfb;border:1px solid #e5ebe8;border-radius:14px;align-items:center;gap:20px;margin-top:23px;padding:18px 20px;display:flex}.timer-ring{--progress:360deg;background:conic-gradient(var(--green) var(--progress), #e7eeea 0);border-radius:50%;flex:none;place-items:center;width:76px;height:76px;display:grid;position:relative}.timer-ring:after{content:"";background:#fff;border-radius:50%;position:absolute;inset:5px}.timer-ring.expired{background:#d8d0cb}.timer-ring div{z-index:1;flex-direction:column;align-items:center;display:flex;position:relative}.timer-ring span{color:#1e302a;letter-spacing:-.4px;font:700 17px Manrope}.timer-ring small{color:#95a09c;margin-top:-1px;font-size:9px}.status-copy{flex-direction:column;display:flex}.status-copy>span{color:#909a96;font-size:11px}.status-copy strong{color:#26332e;align-items:center;gap:7px;margin-top:3px;font-size:16px;display:flex}.status-copy strong i{background:#f0aa36;border-radius:50%;width:7px;height:7px;animation:1.8s infinite pulse;box-shadow:0 0 0 4px #fdf1dd}.status-copy.expired strong i{background:#a89a92;animation:none;box-shadow:0 0 0 4px #eee9e6}.status-copy.paid strong i{background:var(--green);animation:none;box-shadow:0 0 0 4px #e0f4ed}.status-copy p{color:#87918d;margin:4px 0 0;font-size:11px}.notice{color:#7b6c52;background:#fffaf0;border-radius:10px;align-items:flex-start;gap:9px;margin-top:17px;padding:11px 13px;display:flex}.notice svg{fill:none;stroke:#d49a3e;stroke-width:1.6px;flex:none;width:16px;margin-top:1px}.notice p{margin:0;font-size:10.5px;line-height:1.55}.notice strong{color:#85601f}.steps-card{border-radius:18px;margin-top:17px;padding:22px 30px 24px}.steps-title{align-items:baseline;gap:9px;display:flex}.steps-title span{font-size:14px;font-weight:700}.steps-title small{color:#9aa39f;font-size:10px}.steps{align-items:center;margin-top:20px;display:flex}.steps article{flex:1;align-items:center;gap:13px;display:flex}.step-icon{width:44px;height:44px;color:var(--green);background:#eef8f4;border-radius:12px;flex:none;place-items:center;display:grid;position:relative}.step-icon span{color:#fff;background:var(--green);border:2px solid #fff;border-radius:50%;place-items:center;width:20px;height:20px;font:700 7px Manrope;display:grid;position:absolute;top:-6px;right:-6px}.step-icon svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:22px}.steps article strong{color:#34413c;font-size:12px}.steps article p{color:#919b97;margin:3px 0 0;font-size:9.5px;line-height:1.4}.step-line{background:repeating-linear-gradient(90deg,#cddbd5 0 4px,#0000 4px 8px);flex:0 52px;height:1px;margin:0 15px}footer{z-index:1;color:#939d99;justify-content:space-between;width:min(100%,1040px);margin:20px auto 0;font-size:11px;display:flex;position:relative}footer p{margin:0}footer a{color:var(--green-dark);margin-left:5px;font-weight:600;text-decoration:none}footer a:hover{text-decoration:underline}.toast{z-index:10;color:#fff;background:#17352b;border-radius:10px;align-items:center;gap:8px;padding:11px 16px;font-size:12px;display:flex;position:fixed;bottom:26px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0a281e38}.toast span{color:#17352b;background:#5ed2aa;border-radius:50%;place-items:center;width:18px;height:18px;font-size:11px;font-weight:800;display:grid}.toast-enter-active,.toast-leave-active{transition:all .25s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%,10px)}@keyframes pulse{50%{box-shadow:0 0 0 7px #f0aa3614}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=760px){.checkout-shell{padding:0 14px 24px}.topbar{height:72px}.secure-badge{font-size:0}.secure-badge svg{width:19px}.payment-card{border-radius:19px}.merchant-row{min-height:64px;padding:12px 17px}.merchant-logo{border-radius:11px;width:36px;height:36px;font-size:17px}.merchant-info span,.order-info span{font-size:9px}.merchant-info strong,.order-info strong{font-size:11px}.payment-heading{padding:23px 15px 21px}.payment-heading h1{font-size:35px}.payment-body{grid-template-columns:1fr}.qr-column{border-right:0;border-bottom:1px solid var(--line);padding:27px 20px 23px}.qr-frame{width:202px;height:202px}.details-column{padding:25px 18px 22px}.address-box{flex-direction:column;align-items:stretch;gap:9px}.copy-action{width:100%}.timer-panel{gap:15px;padding:15px}.steps-card{padding:20px 18px 21px}.steps{flex-direction:column;align-items:stretch;gap:17px}.steps article{width:100%}.step-line{display:none}.steps article p{font-size:10px}footer{flex-direction:column;align-items:center;gap:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
