:root{font-family:Arial,Helvetica,sans-serif;color:#292b2a;background:#f0f0f0;font-synthesis:none;--green:#44b978}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;background:radial-gradient(ellipse 300px 260px at 100% 0%,#dcece1 0%,transparent 100%),radial-gradient(ellipse 300px 260px at 0% 100%,#dcece1 0%,transparent 100%),#f0f0f0}
button,input,a{-webkit-tap-highlight-color:transparent}a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #248557;outline-offset:5px}[hidden]{display:none!important}
.payment-shell{width:465px;max-width:calc(100% - 32px);margin:auto;padding:32px 0;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.back-link{display:inline-flex;align-items:center;gap:4px;color:#858785;font-size:12px;text-decoration:none;align-self:flex-start;margin:0 0 16px}.back-link:hover{color:#2c8757}
.payment-card{border:1px solid transparent;border-radius:16px;padding:32px;box-shadow:0 2px 25px #1c322211;background:radial-gradient(ellipse 200px 190px at 100% 0%,#f1f9f3 0%,transparent 100%),radial-gradient(ellipse 140px 130px at 0% 100%,#f2faf5 0%,transparent 100%),linear-gradient(white,white) padding-box,linear-gradient(135deg,#bedbc8 0%,#3bba72 38%,#cae2d4 70%,#3bba72 100%) border-box}
.payment-heading h1{font-size:28px;line-height:1.25;letter-spacing:-1px;font-weight:600;margin:0 0 6px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.payment-heading p{margin:0;font-size:16px;line-height:1.4}
.qr-block{margin:32px 0 0;text-align:center;min-height:377px}
.qr-image{display:block;max-width:100%;height:auto;width:320px;aspect-ratio:1;margin:0 auto;object-fit:contain}
.qr-block figcaption{margin-top:12px;font-size:13px;line-height:1.6}.qr-block strong{display:block;font-size:14px;font-weight:600}.qr-block figcaption span{display:block;color:#292b2a}
.qr-loading{width:320px;max-width:100%;margin:auto}
.skeleton{position:relative;overflow:hidden;background:#ededed;border-radius:5px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent 0%,#ffffff38 45%,#ffffff70 50%,#ffffff38 55%,transparent 100%);animation:shimmer 1.65s linear infinite}
.skeleton-square{width:300px;max-width:100%;aspect-ratio:1;margin:10px auto}
.skeleton-lines{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:12px}.skeleton-line{height:15px;border-radius:6px}.skeleton-line.short{width:180px;max-width:60%}.skeleton-line.long{width:240px;max-width:80%}
@keyframes shimmer{to{transform:translateX(100%)}}
.card-footer{border-top:1px solid #e4e7e5;margin:24px 4px 0;padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;line-height:1.5;color:#858785}
.page-status{display:flex;align-items:center;gap:8px}.page-status svg{flex-shrink:0}.countdown{white-space:nowrap;font-variant-numeric:tabular-nums}
.session-message{margin:12px 0 0;min-height:18px;font-size:12px;text-align:center;line-height:1.5;color:#8c7340}.test-link{text-decoration:none;font-size:11px;color:#929992;align-self:center;margin-top:10px}.test-link:hover{color:#2c8757}
.error-box{font-size:14px;color:#9d3434;background:#fff3f2;border:1px solid #f1d4ce;padding:16px;border-radius:8px;margin-top:25px;line-height:1.6}.no-script{text-align:center;padding:20px;color:#a13c36}.is-expired .qr-image{opacity:.18;filter:grayscale(1)}
@media(max-width:520px){.payment-shell{padding:26px 0;justify-content:center}.payment-card{padding:26px 22px;border-radius:15px}.payment-heading h1{font-size:27px}.payment-heading p{font-size:15px}.qr-block{margin-top:23px;min-height:0}.qr-image{width:300px}.qr-loading{width:300px}.skeleton-square{width:calc(100% - 20px)}.skeleton-lines{margin-bottom:12px}.card-footer{margin:26px 0 0;padding-top:20px;font-size:10px;gap:6px}.page-status{gap:5px}.qr-block figcaption{font-size:11px}.qr-block strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.skeleton::after{animation:none;transform:none;background:none}}