:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#344b55;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}.cashier{width:100%;min-height:100svh;padding:0 0 28px;position:relative}.payment-header{background:#1095ce;color:#fff;margin:0;padding:22px 24px 28px;border-radius:0 0 50% 50%/0 0 20% 20%;display:grid;grid-template-columns:24px 1fr 24px;align-items:center;text-align:center}.payment-header h1{font-size:18px;margin:0;font-weight:600}.star{font-size:17px;opacity:.8}.amount{grid-column:1/-1;font-size:40px;font-weight:750;letter-spacing:-1px;margin-top:26px;line-height:1.25}.amount span{font-size:30px;margin-right:3px}.notice{text-align:center;color:#d97724;font-size:12px;font-weight:600;line-height:1.8;margin:22px 12px}.transfer-hint{text-align:center;font-size:13px;color:#7b8b92;margin:26px 0 24px}.payment-details{padding:0 22px}.fields{display:grid;gap:24px;margin-top:24px}.field{position:relative;display:flex;align-items:center;gap:12px;border:1px solid #dce2e5;border-radius:8px;min-height:51px;padding:14px 13px 11px}.field-label{position:absolute;top:-9px;left:11px;padding:0 5px;background:#fff;color:#7d8b92;font-size:12px}.field-value{flex:1;min-width:0;overflow-wrap:anywhere;font-size:15px;font-weight:550;-webkit-user-select:text;user-select:text}.field button{border:0;background:none;color:#168db9;font-size:13px;padding:5px 0 5px 8px;flex-shrink:0}.expiry{text-align:center;font-size:14px;margin:24px 0 0}.expiry strong{color:#128dbb;font-variant-numeric:tabular-nums;font-weight:600}.footnote{text-align:center;color:#99a4aa;font-size:12px;margin-top:10px}footer{text-align:center;color:#a8b3b9;font-size:11px;margin-top:64px;letter-spacing:.5px}.qr-section{text-align:center;margin:24px 0 34px}.qr-section p{font-size:13px;color:#7d8b92}.qr-section img{display:block;width:224px;height:224px;object-fit:contain;margin:18px auto 12px}.qr-caption{font-size:11px;color:#96a1a6}.qr-error{padding:40px 0}.overlay{position:fixed;inset:0;background:#0005;display:flex;align-items:center;justify-content:center;padding:24px;z-index:10}.dialog{background:#fff;border-radius:5px;width:min(100%,420px);box-shadow:0 18px 60px #0003;overflow:hidden}.dialog h2{font-weight:500;font-size:19px;color:#282e32;margin:0;background:#f7f7f7;border-bottom:1px solid #eee;padding:24px}.dialog form{padding:22px 24px 24px;display:flex;flex-direction:column;align-items:stretch}.dialog form>p:first-child{font-size:12px;color:#849097;line-height:1.8;margin:0 0 18px}.dialog input{width:100%;height:48px;border:1px solid #c9d4dc;border-radius:5px;padding:10px 12px;outline:none;color:#344b55}.dialog input:focus{border:2px solid #087fbc;box-shadow:0 0 0 2px #0b90ce12}.dialog input::placeholder{color:#b4bdc3}.primary{border:0;border-radius:4px;background:#169feb;color:#fff;padding:11px 26px;font-weight:600;font-size:15px}.dialog .primary{align-self:flex-end;min-width:90px}.error{min-height:17px;color:#d84c41;font-size:12px;margin:9px 0 12px}.state{text-align:center;padding:72px 4px;min-height:300px}.state h2{font-size:17px;font-weight:500;line-height:1.8}.state p{font-size:13px;color:#87969e}.state-symbol{display:inline-grid;place-items:center;border:1px solid #d9e4e9;border-radius:50%;width:48px;height:48px;color:#7b939e;font-size:24px}.matching-loader{display:block;position:relative;width:88px;height:88px;margin:0 auto 28px}.matching-loader span{position:absolute;left:calc(50% - 4px);top:0;width:8px;height:25px;border-radius:8px;background:#344b55;transform-origin:4px 44px;transform:rotate(calc(var(--segment) * 30deg));animation:matching-pulse 1.2s linear infinite;animation-delay:calc(var(--segment) * -.1s)}@keyframes matching-pulse{0%{opacity:1}to{opacity:.12}}.toast{position:fixed;bottom:48px;left:50%;transform:translate(-50%);padding:12px 22px;background:#263b47e8;color:#fff;border-radius:6px;z-index:20;font-size:13px;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:600px){.cashier{padding-top:0}.payment-header{padding-top:24px}.dialog h2{padding:25px 28px}.dialog form{padding:24px 28px}}@media(prefers-reduced-motion:reduce){.matching-loader span{animation:none;opacity:.55}}
