:root{--ink:#1c1a1d;--ink-soft:#5b5560;--line:#e7e2e6;--surface:#fff;--bg:#f4f1f0;--brand:#fec122;--brand-deep:#9a6f00;--brand-soft:#fff3d1;--brand-ink:#4a3800;--ok:#138a5e;--ok-soft:#e6f7ee;--warn:#b4452b;--warn-soft:#fcece7;--pend:#8a5a00;--pend-soft:#fdeccb;--shadow:0 8px 30px #1c1a1d14;--shadow-sm:0 2px 10px #1c1a1d0f;--r:16px;--r-sm:10px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Sarabun,Noto Sans Thai,sans-serif;line-height:1.55}button{font-family:inherit}.topbar{border-bottom:1px solid var(--line);background:var(--surface);z-index:5;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 22px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;font-weight:700;display:flex}.brand .mark{object-fit:contain;border-radius:9px;width:32px;height:32px;display:block}.brand small{color:var(--ink-soft);letter-spacing:1.4px;text-transform:uppercase;font-size:10px;font-weight:600;display:block}.nav{gap:6px;display:flex}.nav button{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 14px;font-size:13.5px;font-weight:600}.nav button.active{background:var(--brand-soft);color:var(--brand-deep)}.who{color:var(--ink-soft);align-items:center;gap:8px;font-size:13px;display:flex}.who .ava{background:var(--brand-soft);width:30px;height:30px;color:var(--brand-deep);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:grid}.who .logout{cursor:pointer;color:var(--brand-deep);background:0 0;border:none;font-size:13px;font-weight:600}.wrap{max-width:600px;margin:0 auto;padding:30px 22px 48px}h1{letter-spacing:-.2px;margin-bottom:6px;font-size:23px;font-weight:750}.sub{color:var(--ink-soft);margin-bottom:22px;font-size:14px}.login-page{place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);width:100%;max-width:400px;box-shadow:var(--shadow);padding:34px 30px}.login-hero{text-align:center;margin-bottom:6px}.mark-lg{object-fit:contain;border-radius:18px;width:72px;height:72px;margin:0 auto 16px;display:block;box-shadow:0 10px 26px #fec12266}label{color:var(--ink-soft);margin:14px 0 6px;font-size:12.5px;font-weight:600;display:block}input{border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fcfbfc;width:100%;padding:13px 14px;font-family:inherit;font-size:15px;transition:all .15s}input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);background:#fff;outline:none}.hint{color:var(--ink-soft);margin-top:6px;font-size:11.5px}.pw-wrap{position:relative}.pw-wrap input{padding-right:60px}.pw-toggle{background:var(--brand-soft);color:var(--brand-deep);cursor:pointer;border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.pw-toggle:hover{background:var(--brand);color:var(--brand-ink)}.lock-note{background:var(--brand-soft);border-radius:var(--r-sm);color:var(--brand-deep);align-items:flex-start;gap:9px;margin-top:18px;padding:11px 13px;font-size:12px;display:flex}.form-error{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);margin-top:14px;padding:10px 13px;font-size:13px;font-weight:600}.btn{border-radius:var(--r-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px;font-size:15px;font-weight:700;transition:all .15s;display:flex}.btn-primary{background:linear-gradient(135deg,#ffd452,var(--brand));color:var(--brand-ink);box-shadow:0 6px 16px #fec12259}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 9px 22px #fec12273}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{color:var(--ink);border:1.5px solid var(--line);background:#fff}.btn-ghost:hover{border-color:var(--brand);color:var(--brand-deep)}.btn-row{gap:10px;display:flex}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:22px}.price-tag{background:linear-gradient(135deg,#fff,var(--brand-soft));border:1px solid var(--line);border-radius:var(--r);align-items:center;gap:10px;margin-bottom:20px;padding:14px 16px;display:flex}.price-tag .big{color:var(--brand-deep);font-size:24px;font-weight:800}.price-tag .desc{color:var(--ink-soft);font-size:12px}.field{margin-bottom:16px}.result-top{text-align:center;margin-bottom:18px}.status-chip{border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;display:inline-block}.chip-pend{background:var(--pend-soft);color:var(--pend)}.chip-ok{background:var(--ok-soft);color:var(--ok)}.chip-exp{background:var(--warn-soft);color:var(--warn)}.qr-wrap{border:1px solid var(--line);border-radius:var(--r);background:#fff;place-items:center;width:max-content;margin:0 auto 16px;padding:16px;display:grid}.qr-wrap img{border-radius:6px;width:196px;height:196px;display:block}.qr-save{justify-content:center;margin:0 auto 16px;display:flex}.qr-save .btn{width:auto;padding:10px 22px}.expiry-pill{color:var(--ink-soft);justify-content:center;align-items:center;gap:7px;margin-bottom:16px;font-size:12.5px;display:flex}.expiry-pill b{color:var(--ink)}.link-box{border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fbfafc;align-items:center;gap:8px;margin-bottom:14px;padding:10px 10px 10px 13px;display:flex}.link-box code{color:var(--ink-soft);word-break:break-all;flex:1;font-family:ui-monospace,Menlo,monospace;font-size:11.5px}.copy-btn{background:var(--brand-soft);color:var(--brand-deep);cursor:pointer;border:none;border-radius:8px;flex-shrink:0;padding:8px 12px;font-size:12px;font-weight:700}.modal-backdrop{z-index:50;background:#14101c80;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-sm);width:100%;max-width:360px;max-height:90vh;padding:24px;overflow:auto}.copy-btn:hover{background:var(--brand);color:var(--brand-ink)}.meta-grid{background:var(--line);border-radius:var(--r-sm);grid-template-columns:1fr 1fr;gap:1px;margin-bottom:18px;display:grid;overflow:hidden}.meta-grid>div{background:#fff;padding:10px 12px}.meta-grid .k{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.6px;font-size:10.5px}.meta-grid .v{margin-top:2px;font-size:13px;font-weight:650}.counts{flex-wrap:wrap;gap:12px;margin-bottom:18px;display:flex}.count-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);flex:1;min-width:96px;padding:12px 14px}.count-box .n{font-variant-numeric:tabular-nums;font-size:22px;font-weight:800}.count-box .l{color:var(--ink-soft);margin-top:2px;font-size:11px}.count-box.ok .n{color:var(--ok)}.count-box.pend .n{color:var(--pend)}.count-box.exp .n{color:var(--warn)}.filters{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.filters button{border:1.5px solid var(--line);color:var(--ink-soft);cursor:pointer;background:#fff;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600}.filters button.active{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)}.tbl-wrap{overflow-x:auto}.tbl{border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);width:100%;overflow:hidden}.tbl th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);border-bottom:1px solid var(--line);background:#faf9fa;padding:11px 14px;font-size:11px}.tbl td{border-bottom:1px solid var(--line);padding:12px 14px;font-size:13px}.tbl tr:last-child td{border-bottom:none}.tbl .cust{font-weight:650}.empty{text-align:center;color:var(--ink-soft);padding:50px 10px}.toast{background:var(--ink);color:#fff;opacity:0;pointer-events:none;z-index:50;border-radius:999px;padding:11px 20px;font-size:13px;font-weight:600;transition:all .25s;position:fixed;bottom:30px;left:50%;transform:translate(-50%)translateY(20px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.spinner{border:3.5px solid var(--brand-soft);border-top-color:var(--brand);border-radius:50%;width:38px;height:38px;margin:40px auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}