@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";
:root{--red:#e21d2d;--ink:#111214;--muted:#6c7077;--line:#e7e7e7;--soft:#f7f7f5}*{box-sizing:border-box}body{color:var(--ink);background:#f2f2ef;margin:0;font-family:IBM Plex Sans Thai,sans-serif}button,input{font:inherit}.shell{max-width:1080px;margin:0 auto;padding:28px 20px 48px}.topbar{border-bottom:1px solid #d8d8d5;align-items:center;gap:14px;padding-bottom:22px;display:flex}.mark{background:var(--red);color:#fff;letter-spacing:-1px;place-items:center;width:42px;height:42px;font:700 16px Space Grotesk;display:grid}.eyebrow{letter-spacing:1.7px;margin:0 0 5px;font:600 11px Space Grotesk}.red{color:var(--red)}h1,h2,h3,p{margin-top:0}h1{margin:0;font:600 20px Space Grotesk}.step{color:var(--muted);margin-left:auto;font:600 12px Space Grotesk}.hero{justify-content:space-between;align-items:end;padding:42px 0 25px;display:flex}.hero h2{letter-spacing:-1.5px;margin:0 0 8px;font:700 34px Space Grotesk}.muted{color:var(--muted);margin:0;font-size:14px;line-height:1.65}.timer{border-left:3px solid var(--red);color:var(--muted);gap:2px;padding-left:14px;font-size:12px;display:grid}.timer strong{color:var(--ink);font:700 24px Space Grotesk}.grid{grid-template-columns:1.05fr .95fr;gap:16px;display:grid}.card{border:1px solid var(--line);background:#fff;padding:24px}.card-head{justify-content:space-between;align-items:center;font-weight:700;display:flex}.status-dot{color:var(--red);font-size:12px}.booking-id{color:var(--muted);font:600 11px Space Grotesk}.qr-card{text-align:center}.qr-wrap{place-items:center;min-height:300px;margin:12px 0;display:grid}.qr-wrap img{width:280px;height:400px;image-rendering:pixelated}.qr-loading{color:var(--muted)}.amount-label{color:var(--muted);margin:0;font-size:12px}.amount{margin:3px 0 8px;font:700 37px Space Grotesk}.center{text-align:center;max-width:340px;margin:0 auto}.secondary{border:1px solid var(--ink);cursor:pointer;background:#fff;margin-top:18px;padding:11px 18px}.summary{flex-direction:column;gap:20px;display:flex}.room{align-items:center;gap:12px;display:flex}.room-icon{background:var(--ink);color:#fff;place-items:center;width:44px;height:44px;font-size:22px;display:grid}.room strong{font-size:15px}.line,.total{border-bottom:1px solid var(--line);justify-content:space-between;padding-bottom:14px;font-size:14px;display:flex}.line strong{font-weight:600}.total{border:0;padding-top:2px;padding-bottom:0;font-size:18px}.total strong{font:700 24px Space Grotesk}.upload{grid-template-columns:1fr 1fr;align-items:center;gap:20px;margin-top:16px;display:grid}.upload h3{margin:0 0 6px;font:700 22px Space Grotesk}.dropzone{cursor:pointer;text-align:center;border:1px dashed #aaa;align-content:center;place-items:center;gap:5px;min-height:150px;display:grid}.dropzone input{display:none}.upload-icon{color:var(--red);font-size:28px}.dropzone small{color:var(--muted)}.primary{background:var(--red);color:#fff;cursor:pointer;border:0;grid-column:2;padding:15px 18px;font-weight:700}.primary:disabled{opacity:.55;cursor:wait}.notice{border-left:3px solid var(--red);background:#fff3f3;grid-column:1/-1;margin:0;padding:13px;font-size:14px}footer{color:var(--muted);justify-content:space-between;padding-top:22px;font-size:12px;display:flex}@media (max-width:700px){.shell{padding:18px 14px 34px}.hero{align-items:start;gap:15px;padding:30px 0 20px}.hero h2{font-size:27px}.hero .muted{font-size:13px}.grid{grid-template-columns:1fr}.summary{order:-1}.card{padding:18px}.qr-wrap{min-height:270px}.qr-wrap img{width:240px;height:330px}.upload{grid-template-columns:1fr;gap:16px}.primary{grid-column:auto;width:100%}footer{gap:8px;display:grid}.topbar h1{font-size:17px}}