:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#1f2933;--muted:#6b7280;--brand:#2563eb;--brand-dark:#1d4ed8;--danger:#dc2626;--success:#16a34a;--bg:#f4f6fb;--card-bg:#fff;--border:#e2e8f0;font-family:Noto Sans Thai,Inter,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0}.page{justify-content:center;align-items:flex-start;min-height:100vh;padding:32px 16px;display:flex}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;width:100%;max-width:420px;padding:24px;box-shadow:0 1px 3px #0000000f}h1{margin:0 0 4px;font-size:1.25rem}h2{margin:20px 0 8px;font-size:1.05rem}.muted{color:var(--muted);font-size:.9rem}.price{margin:8px 0 20px;font-size:1.5rem;font-weight:700}.tabs{gap:8px;margin-bottom:16px;display:flex}.tab{text-align:center;border:1px solid var(--border);cursor:pointer;color:var(--muted);background:#fff;border-radius:10px;flex:1;padding:10px;font-weight:600}.tab.active{border-color:var(--brand);color:var(--brand);background:#eff4ff}.field{margin-bottom:12px}.field label{color:var(--muted);margin-bottom:4px;font-size:.85rem;display:block}.field input{border:1px solid var(--border);border-radius:8px;width:100%;padding:10px 12px;font-size:1rem}.field-row{gap:8px;display:flex}.field-row .field{flex:1}button.primary{background:var(--brand);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;margin-top:8px;padding:12px;font-size:1rem;font-weight:600}button.primary:disabled{cursor:not-allowed;background:#93c5fd}button.primary:hover:not(:disabled){background:var(--brand-dark)}.error{color:var(--danger);margin-top:10px;font-size:.9rem}.success{color:var(--success);font-weight:600}.qr-box{text-align:center}.qr-box img{width:220px;height:220px;margin:12px 0}.hidden{display:none!important}.list-item{border:1px solid var(--border);background:#fff;border-radius:12px;align-items:center;gap:12px;margin-bottom:10px;padding:14px;display:flex}.list-item.clickable{cursor:pointer}.list-item.locked{opacity:.6}.spinner{border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}