:root{
  --deep:#1A0B3B;--violet:#8B3DFF;--pink:#FF4FB4;--pink-text:#C8247A;--lime:#C6F432;
  --bg:#F5F2FC;--card:#FFFFFF;--line:#E6E0F5;--text:#1C1236;--muted:#6B5F8A;--soft:#F4EFFF;--pick:#FFF0F8;
  --ok-bg:#EAF8C2;--ok:#3A5200;--wait-bg:#F1E9FF;--wait:#5B1FB8;--bad-bg:#FFF0F8;--bad:#A3165F;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#160B36;--card:#1E1145;--line:#35266E;--text:#EFE7FF;--muted:#A998D8;--soft:#2C1D62;--pick:#33164F;--pink-text:#FF8FCB;
  --ok-bg:#24360A;--ok:#C6F432;--wait-bg:#2C1D62;--wait:#C9B3FF;--bad-bg:#3A1230;--bad:#FF8FCB;
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,"Noto Sans Thai",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:var(--violet)}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--deep);color:#fff}
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:#fff}
.logo{height:30px;width:auto}
.tagline{font-size:11px;color:#B9A6E0}
.toplink{color:#fff;text-decoration:none;font-size:14px;padding:10px 14px;border-radius:22px;background:#2E1A63;min-height:44px;display:flex;align-items:center}
main{max-width:720px;margin:0 auto;padding:16px 0 120px;outline:none}
main>.trust{margin-top:-16px}
.trust{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.trust b{color:var(--violet);font-weight:500}
.chips{display:flex;gap:8px;overflow-x:auto;padding:16px 16px 4px}
.chip{flex:none;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
h2{display:flex;align-items:center;gap:8px;margin:18px 16px 12px;font-size:20px;font-weight:600}
h2::before{content:"";width:5px;height:20px;border-radius:3px;background:var(--pink)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 10px;padding:0 16px}
@media (min-width:560px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tile{border-radius:14px;padding:4px 0;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--text);font-size:12px;text-align:center}
.icon{width:70px;height:70px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-family:Montserrat,sans-serif;font-weight:800;font-size:15px;color:#fff}
.empty{margin:24px 16px;padding:20px;border-radius:16px;border:1px dashed var(--line);color:var(--muted);text-align:center}
.band{margin:16px;padding:16px;border-radius:18px;background:var(--violet);color:#fff;display:flex;align-items:center;gap:14px}
.band .icon{border:3px solid rgba(255,255,255,.35)}
.band h1{margin:0;font-size:22px;font-weight:600;line-height:1.15}
.pill{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:3px 10px;border-radius:8px;background:rgba(20,8,50,.35);font-size:12px}
.step{margin:0 16px 14px;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.step-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:17px;font-weight:600}
.num{width:28px;height:28px;border-radius:8px;background:var(--violet);color:#fff;font-family:Montserrat,sans-serif;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
.field{width:100%;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--soft)}
.field:focus{outline:2px solid var(--violet);outline-offset:1px}
.hint{margin-top:6px;font-size:12px;color:var(--muted);font-weight:400}
.err{margin-top:6px;font-size:13px;color:var(--bad)}
.packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pack{min-height:72px;padding:12px;border-radius:14px;border:2px solid var(--line);background:var(--card);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.pack[aria-pressed="true"]{border-color:var(--pink);background:var(--pick)}
.pack .p{font-family:Montserrat,sans-serif;font-weight:700;color:var(--violet)}
.paybar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;background:var(--deep);color:#fff;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.paybar-in{width:100%;max-width:688px;display:flex;align-items:center;gap:14px}
.paybar .sum{flex:1;display:flex;flex-direction:column}
.paybar small{color:#B9A6E0;font-weight:400}
.total{font-family:Montserrat,sans-serif;font-size:22px;font-weight:800}
.cta{height:54px;padding:0 24px;border-radius:14px;border:0;background:var(--lime);color:var(--deep);font-size:17px;font-weight:600;cursor:pointer}
.cta[disabled]{opacity:.5;cursor:not-allowed}
.status{display:inline-block;padding:3px 10px;border-radius:8px;font-size:13px;font-weight:500}
.s-awaiting_payment{background:var(--bad-bg);color:var(--bad)}
.s-paid,.s-submitted{background:var(--wait-bg);color:var(--wait)}
.s-delivered{background:var(--ok-bg);color:var(--ok)}
.s-failed,.s-expired{background:var(--bad-bg);color:var(--bad)}
.qr{width:240px;height:240px;margin:12px auto;border-radius:14px;border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--muted);font-size:13px}
.code{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--soft);border:1px dashed var(--line)}
.code span{flex:1;font-family:Montserrat,sans-serif;font-weight:700;letter-spacing:1px;word-break:break-all}
.copy{min-height:44px;padding:0 14px;border-radius:10px;border:0;background:var(--violet);color:#fff;cursor:pointer}
.row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.row span:first-child{color:var(--muted)}
.list a{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 16px 10px;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--text)}
.foot{padding:24px 16px 140px;text-align:center;font-size:12px;color:var(--muted)}
.noscript{padding:24px;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pad{padding:0 16px}
.tile:focus-visible,.chip:focus-visible,.pack:focus-visible,.cta:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.icon{box-shadow:0 4px 12px rgba(26,11,59,.18)}
.qrimg{display:block;width:240px;height:240px;margin:8px auto;border-radius:12px;background:#fff;image-rendering:pixelated}
.payamt{display:flex;flex-direction:column;align-items:center;margin-bottom:4px}
.payamt small{color:var(--muted)}
.payamt b{font-family:Montserrat,sans-serif;font-size:30px;font-weight:800;color:var(--violet)}
.center{text-align:center}
.howto{margin:12px 0;padding-left:20px;font-size:14px;color:var(--muted)}
.howto li{margin-bottom:4px}
.cta.wide{display:flex;align-items:center;justify-content:center;width:100%;margin-top:8px}
.cta.busy{opacity:.6;pointer-events:none}
.okmsg{margin:8px 0 0;font-size:14px;color:var(--ok)}
.waitbox{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;background:var(--wait-bg);color:var(--wait);font-size:14px}
.waitbox b{font-size:16px}
.cta.ghostcta{background:transparent;border:2px solid var(--line);color:var(--text);font-size:15px;height:48px}
.policy h3{margin:0 0 8px;font-size:16px;font-weight:600}
.policy p{margin:0 0 8px;font-size:14px;line-height:1.7}
.policy ul{margin:0 0 8px;padding-left:20px;font-size:14px;line-height:1.7}
.consent{margin-top:0;padding-bottom:8px}
.consent a,.policylinks a{color:var(--violet)}
.soon{display:flex;flex-direction:column;gap:2px;margin:16px 16px 0;padding:12px 14px;border-radius:14px;background:var(--pick);color:var(--pink-text);font-size:13px}
.soon b{font-size:15px}
.searchbar{padding:16px 16px 0}
.search-in{background:var(--card)}
.iconwrap{position:relative;display:inline-block}
.hot{position:absolute;top:-6px;right:-8px;padding:1px 6px;border-radius:8px;background:var(--pink);color:#fff;font-family:Montserrat,sans-serif;font-size:10px;font-weight:800}
.icon.hasimg{background:var(--soft);overflow:hidden;padding:0}
.icon.hasimg img{width:100%;height:100%;object-fit:cover}
.lbl2{display:block;margin:12px 0 6px;font-size:15px;font-weight:500}