*{box-sizing:border-box}
body{margin:0;color:#17233b;background:#f5f7fb;font:14px/1.45 system-ui,-apple-system,"PingFang SC",sans-serif}
.upload-page{width:min(100%,540px);margin:auto;padding:16px 20px max(16px,env(safe-area-inset-bottom));min-height:100dvh;background:white}
header{display:flex;align-items:center;gap:10px;margin-bottom:16px}h1{font-size:19px;margin:0}
.brand{display:grid;place-items:center;width:32px;height:32px;background:#2f64f5;color:white;border-radius:8px;font-weight:600}
#workflow{display:grid;gap:12px}[hidden]{display:none!important}
.order{display:grid;grid-template-columns:64px 1fr;gap:8px;padding-bottom:12px;border-bottom:1px solid #e6eaf0;align-items:start}
.order span,.amount span{color:#657087}.order strong{font-weight:400;overflow-wrap:anywhere}
.amount{display:grid;text-align:center;gap:2px}.amount strong{font-size:30px;line-height:1.2;font-weight:600}
.qr{display:grid;place-items:center;gap:6px}.qr img{width:min(56vw,208px);height:auto;border:1px solid #edf0f4;border-radius:8px;padding:8px}
.hint{margin:0;color:#657087;font-size:12px}
.upload-box{border:1px dashed #cbd3df;border-radius:8px;background:#fafbfc;padding:10px 12px}
.upload-box.drag-over{border-color:#2f64f5;background:#eef4ff}
.upload{display:grid;position:relative;gap:4px;min-height:56px;align-content:center;text-align:center;cursor:pointer}
.upload:has(img:not([hidden])){grid-template-columns:56px 1fr;text-align:left;column-gap:12px}
.upload span{color:#2f64f5}.upload small{color:#657087}
.upload input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.upload:focus-within{outline:2px solid #2f64f5;outline-offset:2px}
#screenshot{width:56px;height:56px;object-fit:contain;grid-row:1/3;background:white;border-radius:4px}
#preview{display:flex;align-items:center;gap:8px;margin-top:8px}#check{flex:1;margin:0;color:#795420;font-size:12px;overflow-wrap:anywhere}
button{min-height:44px;border:0;border-radius:7px;font:inherit;background:#2f64f5;color:white;width:100%;cursor:pointer}
button:disabled{background:#edf0f5;color:#8992a2;cursor:default}
.secondary{background:white;border:1px solid #d7dce4;color:#17233b;width:auto;flex-shrink:0;padding:6px 8px;min-height:32px;font-size:12px}
#confirm{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));box-shadow:0 0 0 6px white}
#notice:not(:empty){padding:14px;background:#eef4ff;border-radius:8px;margin-bottom:16px}#notice.error{background:#fff0ed;color:#ab3b26}
@media(max-width:360px){.upload-page{padding:12px 16px}h1{font-size:18px}}
@media(max-height:700px){header{margin-bottom:12px}#workflow{gap:10px}.qr img{width:min(50vw,176px)}}

#success{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:65dvh;text-align:center}
.success-icon{width:96px;height:96px;color:#32a567;flex-shrink:0}
#success h1{font-size:26px;font-weight:600}
.success-order{display:grid;gap:8px;color:#657087}.success-order strong{color:#17233b;font-size:16px;font-weight:400;overflow-wrap:anywhere}