:root{--h:187;--on:#fff;--bg:hsl(var(--h) 18% 90%);--card:hsl(var(--h) 20% 96%);--ink:hsl(var(--h) 35% 12%);--mut:hsl(var(--h) 12% 38%);--line:hsl(var(--h) 16% 82%);--ac:hsl(var(--h) 75% 29%);--ac2:hsl(var(--h) 80% 22%);--acs:hsl(var(--h) 40% 88%);--gold:#a96c0f;--golds:#f6ead0;--bad:#b8402b;--bads:#f7e2de;--ok:#12805c;--oks:#dcf1e7;--sh:0 1px 2px rgba(15,31,46,.05),0 4px 16px rgba(15,31,46,.06);color-scheme:light dark}
:root[data-mode=light]{color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-mode=light]){--on:#04212a;--bg:hsl(var(--h) 28% 9%);--card:hsl(var(--h) 26% 13%);--ink:hsl(var(--h) 25% 92%);--mut:hsl(var(--h) 14% 65%);--line:hsl(var(--h) 22% 22%);--ac:hsl(var(--h) 55% 62%);--ac2:hsl(var(--h) 60% 74%);--acs:hsl(var(--h) 35% 18%);--gold:#f0b94d;--golds:#2d2410;--bad:#ff8a73;--bads:#35191a;--ok:#4cd6a0;--oks:#0f2d25;--sh:none}}
:root[data-mode=dark]{--on:#04212a;--bg:hsl(var(--h) 28% 9%);--card:hsl(var(--h) 26% 13%);--ink:hsl(var(--h) 25% 92%);--mut:hsl(var(--h) 14% 65%);--line:hsl(var(--h) 22% 22%);--ac:hsl(var(--h) 55% 62%);--ac2:hsl(var(--h) 60% 74%);--acs:hsl(var(--h) 35% 18%);--gold:#f0b94d;--golds:#2d2410;--bad:#ff8a73;--bads:#35191a;--ok:#4cd6a0;--oks:#0f2d25;--sh:none;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 'Noto Sans Thai',system-ui,sans-serif;padding-top:env(safe-area-inset-top,0px)}
a{color:var(--ac);text-decoration:none}
.bar{display:flex;justify-content:space-between;align-items:center;max-width:720px;margin:0 auto;padding:14px 18px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);font-size:17px}
.mk{width:26px;height:26px;border-radius:8px;background:var(--ac);position:relative}.mk:after{content:"";position:absolute;inset:7px;border:2px solid #fff;border-radius:50%;border-right-color:transparent;transform:rotate(-30deg)}
.who{font-size:13px;color:var(--mut);background:var(--card);border:1px solid var(--line);padding:3px 11px;border-radius:99px}
.wrap{max-width:720px;margin:0 auto;padding:4px 18px calc(96px + env(safe-area-inset-bottom,0px))}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:var(--sh)}
h1{font-size:22px;margin:6px 0 14px;font-weight:700}h2{font-size:13px;margin:0 0 12px;font-weight:600;color:var(--mut);letter-spacing:.02em}
.mut{color:var(--mut);font-size:13px}.big{font-size:30px;font-weight:700;line-height:1.15}.hero{font-size:68px;font-weight:700;letter-spacing:-2px;line-height:1;color:var(--ac)}
.hero small{font-size:16px;letter-spacing:0;color:var(--ink);margin-left:6px;font-weight:500}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media(max-width:480px){.g3{grid-template-columns:1fr 1fr}}
.bar2{height:6px;border-radius:9px;background:var(--line);margin-top:14px;overflow:hidden}.bar2 i{display:block;height:100%;background:var(--ac);border-radius:9px}
.badge{display:inline-block;font-size:12px;padding:2px 10px;border-radius:99px;font-weight:600;background:var(--acs);color:var(--ac2)}
.badge.ok{background:var(--oks);color:var(--ok)}.badge.bad{background:var(--bads);color:var(--bad)}.badge.gold{background:var(--golds);color:var(--gold)}
button,.btn{font:inherit;font-weight:600;border:0;border-radius:12px;padding:12px 16px;min-height:46px;background:var(--ac);color:var(--on);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:100%;transition:filter .15s}
button:hover,.btn:hover{filter:brightness(1.06)}button.sec,.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.gold{background:var(--gold);color:var(--on)}button.bad{background:var(--bad);color:var(--on)}button.sm{min-height:36px;padding:6px 12px;font-size:13px;width:auto;border-radius:10px}
input,select,textarea{font:inherit;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);margin-bottom:10px;min-height:46px}
label{font-size:13px;color:var(--mut);display:block;margin:0 0 4px}
:focus-visible{outline:3px solid color-mix(in srgb,var(--ac) 45%,transparent);outline-offset:2px}
.flash{background:var(--acs);color:var(--ac2);padding:11px 14px;border-radius:12px;margin-bottom:12px;font-weight:500}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}.row:last-child{border:0}
.pack{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:10px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600}
.pack.best{border-color:var(--ac);background:var(--acs)}.pack b{font-size:18px;color:var(--ac)}
.nav{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:center;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));z-index:5}
.nav div{display:flex;width:100%;max-width:720px}.nav a{flex:1;text-align:center;padding:8px 2px;font-size:12px;color:var(--mut);font-weight:600;border-radius:12px}
.nav a.on{color:var(--ac);background:var(--acs)}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:4px}.tabs a{white-space:nowrap;padding:8px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-weight:600;font-size:14px}
.tabs a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill{display:flex;gap:8px;margin-bottom:12px}.pill label{flex:1;margin:0;padding:11px;text-align:center;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:600;cursor:pointer}
.pill input{position:absolute;opacity:0;width:0;height:0;min-height:0;margin:0}.pill input:checked+span{color:var(--ac)}.pill label:has(input:checked){border-color:var(--ac);background:var(--acs)}
.qr{display:block;width:100%;max-width:290px;margin:0 auto;border-radius:14px;border:1px solid var(--line)}
.copy{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:10px}.copy b{font-size:20px;letter-spacing:.04em}
.steps{counter-reset:s;padding:0;margin:0;list-style:none}.steps li{counter-increment:s;padding:6px 0 6px 34px;position:relative;font-size:14px}.steps li:before{content:counter(s);position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:50%;background:var(--acs);color:var(--ac2);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.wheel{width:200px;height:200px;border-radius:50%;margin:10px auto 18px;position:relative;border:6px solid var(--card);box-shadow:0 0 0 2px var(--line);background:conic-gradient(var(--line) 0 60%,#9bd6db 60% 85%,#5fbcc5 85% 95%,var(--ac) 95% 99%,var(--gold) 99% 100%)}
.wheel.go{animation:sp 2s cubic-bezier(.15,.7,.1,1)}@keyframes sp{from{transform:rotate(0)}to{transform:rotate(1080deg)}}
.pin{position:absolute;left:50%;top:-16px;transform:translateX(-50%);border:10px solid transparent;border-top:18px solid var(--ink)}
.res{text-align:center;font-size:22px;font-weight:700;min-height:34px;margin-bottom:10px}.ok{color:var(--ok)}.badt{color:var(--bad)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th{color:var(--mut);font-weight:600;text-align:left;padding:8px 6px;font-size:12px}.tbl td{padding:10px 6px;border-top:1px solid var(--line)}
.scroll{overflow-x:auto}.slip{width:100%;max-height:340px;object-fit:contain;background:var(--bg);border-radius:12px;border:1px solid var(--line)}
footer{text-align:center;color:var(--mut);font-size:12px;padding:0 18px 100px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.nav a{font-size:11px}textarea{resize:vertical}
.hd{position:relative;display:flex;align-items:center;gap:8px}.acct,.thm{position:static}.acct summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;min-height:34px;transition:border-color .15s}
.acct summary::-webkit-details-marker{display:none}.acct summary:after{content:"▾";font-size:11px;color:var(--mut)}.acct[open] summary,.acct summary:hover{border-color:var(--ac)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}.dot.off{background:var(--bad)}
.pop{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(15,31,46,.18);z-index:20}
.nav a.hl{color:var(--ac);font-weight:700}.nav a.hl.on{background:var(--ac);color:var(--on)}

.hbtn{background:var(--ac);color:var(--on);font-weight:600;font-size:13px;padding:6px 13px;border-radius:99px;white-space:nowrap}
.thm summary{list-style:none;cursor:pointer;width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center}.thm summary::-webkit-details-marker{display:none}
.sw{width:16px;height:16px;border-radius:50%;background:conic-gradient(hsl(187 70% 45%),hsl(262 60% 55%),hsl(340 70% 55%),hsl(28 85% 55%),hsl(150 55% 45%),hsl(187 70% 45%))}
.sws{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}.swb{width:32px;height:32px;min-height:32px;padding:0;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.modes{display:flex;gap:6px;margin-top:8px}.modes button{flex:1;min-height:34px;padding:4px}
.pio{display:inline-block;width:15px;height:15px;vertical-align:-2px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.gg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media(min-width:620px){.gg{grid-template-columns:repeat(3,1fr)}}
.gi{margin:0;cursor:zoom-in}.gi img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--line);display:block;background:var(--bg)}
.gi figcaption{font-size:12px;line-height:1.35;margin-top:5px;color:var(--ink)}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px;cursor:zoom-out}.lb img{max-width:100%;max-height:100%;border-radius:12px}
.wbox{position:relative;width:250px;height:250px;margin:14px auto 20px}.wbox .pin{top:-14px;z-index:3}
.w2{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 6px var(--card),0 0 0 8px var(--line),0 8px 24px rgba(0,0,0,.18)}
.lbl{position:absolute;left:50%;top:50%;width:46px;height:26px;margin:-13px 0 0 -23px;text-align:center;font-weight:700;font-size:15px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.hub{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--card);box-shadow:0 0 0 3px var(--line);z-index:2}
.contact{margin-bottom:6px;font-size:13px}

.sel{-webkit-user-select:all;user-select:all}
footer details.pm{margin-top:10px}footer details.pm summary{cursor:pointer;color:var(--mut);text-decoration:underline;text-underline-offset:3px;list-style:none;display:inline-block;padding:4px 8px}
footer details.pm summary::-webkit-details-marker{display:none}

.pu{position:fixed;inset:0;background:rgba(5,15,20,.6);display:flex;align-items:center;justify-content:center;z-index:99;padding:20px;animation:pufade .2s ease}
.pub{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:26px 22px 20px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pupop .28s cubic-bezier(.2,.9,.3,1.2)}
.pub h2{margin:10px 0 4px;font-size:19px}.pck{width:58px;height:58px;margin:0 auto;border-radius:50%;background:var(--oks);color:var(--ok);font-size:30px;line-height:58px;font-weight:700}
.pbig{font-size:34px;font-weight:700;margin:4px 0 0;color:var(--ac)}.ppts{margin:2px 0 0;color:var(--gold);font-size:16px}
.pbtn{display:grid;gap:8px;margin-top:18px}
@keyframes pufade{from{opacity:0}to{opacity:1}}@keyframes pupop{from{transform:scale(.88);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.pu,.pub{animation:none}}

.pwn{background:var(--bads);border:1px solid var(--bad);border-radius:14px;margin:0 0 14px}
.pwn summary{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--bad)}
.pwn summary::-webkit-details-marker{display:none}
.pwn summary small{margin-left:auto;font-weight:400;color:var(--mut);font-size:12px}
.pwn[open] summary small{display:none}
.wi{width:22px;height:22px;border-radius:50%;background:var(--bad);color:var(--card);font-style:normal;font-weight:700;font-size:14px;line-height:22px;text-align:center;flex:none}

/* ปรับคอนทราสต์ "เฉพาะโหมดมืด" — โหมดสว่างคงเดิมทุกอย่าง */
:root{--pop:var(--card);--sec:transparent}
button.sec,.btn.sec{background:var(--sec)}
@media(prefers-color-scheme:dark){:root:not([data-mode=light]){--bg:hsl(var(--h) 30% 6%);--card:hsl(var(--h) 24% 17%);--pop:hsl(var(--h) 26% 25%);--line:hsl(var(--h) 20% 31%);--mut:hsl(var(--h) 14% 72%);--acs:hsl(var(--h) 38% 24%);--sec:hsl(var(--h) 30% 100% / .06);--sh:inset 0 1px 0 rgba(255,255,255,.06)}:root:not([data-mode=light]) .pop{background:var(--pop);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.08)}:root:not([data-mode=light]) .acct[open]::before,:root:not([data-mode=light]) .thm[open]::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15}:root:not([data-mode=light]) .acct[open] summary,:root:not([data-mode=light]) .thm[open] summary{position:relative;z-index:21}}
:root[data-mode=dark]{--bg:hsl(var(--h) 30% 6%);--card:hsl(var(--h) 24% 17%);--pop:hsl(var(--h) 26% 25%);--line:hsl(var(--h) 20% 31%);--mut:hsl(var(--h) 14% 72%);--acs:hsl(var(--h) 38% 24%);--sec:hsl(var(--h) 30% 100% / .06);--sh:inset 0 1px 0 rgba(255,255,255,.06)}:root[data-mode=dark] .pop{background:var(--pop);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.08)}:root[data-mode=dark] .acct[open]::before,:root[data-mode=dark] .thm[open]::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15}:root[data-mode=dark] .acct[open] summary,:root[data-mode=dark] .thm[open] summary{position:relative;z-index:21}

/* ช่อง "ต่อไม่ได้?" อยู่ในตารางรูปวิธีใช้ ต่อจากข้อ 5 (ช่องว่างข้างรูป) */
.gh{border:1px solid var(--ac);background:var(--bg);border-radius:12px;padding:12px;align-self:start;display:flex;flex-direction:column;gap:8px}
.gh b{font-size:14px;color:var(--ac2)}
.gh .steps li{font-size:12.5px;padding:4px 0 4px 28px;line-height:1.35}
.gh .steps li:before{width:20px;height:20px;font-size:11px;top:4px}
.gh .btn{min-height:36px;padding:6px 10px;font-size:13px;border-radius:10px}
@media(min-width:620px){.gh{grid-column:span 2}}

/* หน้าหลัก: ปุ่มโหลดแอป + ปุ่มลัดแนวตั้ง */
.st{display:flex;gap:12px;align-items:center}.stl{flex:1;min-width:0}
.hcl{flex:none;width:106px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border-radius:16px;border:2px solid var(--ac);background:var(--acs);color:var(--ink);text-align:center;line-height:1.2;animation:hcp 2.6s ease-in-out infinite}
.hcl img{width:72px;height:72px;border-radius:16px;display:block}
.hcl b{font-size:12px;background:var(--ac);color:var(--on);padding:3px 9px;border-radius:99px;white-space:nowrap}.hcl span{font-size:11px;color:var(--mut)}
@keyframes hcp{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ac) 50%,transparent)}60%{box-shadow:0 0 0 9px transparent}}
.acts{display:flex;flex-direction:column;gap:12px}.acts .btn{flex:1;font-size:17px}

/* หน้าหลัก: ลดขนาดให้กระชับ */
.badge.and{float:right;background:var(--golds);color:var(--gold);font-size:11px;padding:2px 9px}

/* หน้าหลัก: กระชับ การ์ดซ้ายสูงเท่าปุ่มขวา */
.hm>.card{padding:14px 16px;margin-bottom:10px}.hm .g2{gap:10px;margin-bottom:10px!important}
.hm .g2 .card{padding:12px 16px}.hm h2{margin-bottom:6px}.hm .g2 .card h2{margin:0 0 2px;font-size:12px}
.hm .g2 .card .big{font-size:22px;line-height:1.15}.hm .g2 .card hr{margin:8px 0!important}
.acts{gap:10px}.acts .btn{flex:1;min-height:0;font-size:15px;padding:6px 8px}
/* หน้าเติมเงิน: ยอดเงิน (อ่านอย่างเดียว) + แนบสลิป อยู่แถวเดียวกัน */
.r2{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;align-items:end}.r2 label{margin-bottom:3px}
.r2 input[type=text]{min-height:42px;margin:0;padding:8px 12px;font-size:17px;font-weight:700;text-align:center;background:var(--acs);color:var(--ink)}
.fw{position:relative}.vh{position:absolute;left:0;bottom:0;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;pointer-events:none}
.fb{display:flex!important;margin:0!important;min-height:42px;padding:6px 8px;font-size:14px;width:100%;cursor:pointer;text-align:center;line-height:1.2}
#slippreviewimg{max-height:150px}
.pack.sel{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}
button:disabled,button[disabled]{opacity:.55;cursor:not-allowed;filter:none}
.btn.gold{background:var(--gold);color:var(--on)}
.btn.dl{background:#e8590c;color:#fff;font-size:17px;min-height:54px;border:2px solid #ffb27a;animation:hcd 2.2s ease-in-out infinite}
@keyframes hcd{0%,100%{box-shadow:0 0 0 0 rgba(232,89,12,.55)}60%{box-shadow:0 0 0 10px transparent}}
/* UI ใหม่: รวมเติมเงิน + เติมวัน + ประวัติ และเมนูล่าง 3 จุด */
.quicktabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px;position:sticky;top:0;z-index:4;padding:6px 0;background:var(--bg)}
.quicktabs a{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-weight:700;font-size:13px;text-decoration:none}
.quicktabs a:active{transform:scale(.98)}
.buy-preview{grid-template-columns:1fr 1fr!important}.buy-preview input{background:var(--acs)!important;text-align:center;font-weight:700}
.nav a.nav-wide{font-size:11px;line-height:1.25}.nav a.nav-wide small{font-size:10px;opacity:.85}.nav a.nav-home{font-size:13px;font-weight:800}
.guidepub{max-width:390px;padding:18px 14px 14px}.guidegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}.guidegrid .gi{background:var(--bg);border-radius:12px;overflow:hidden;border:1px solid var(--line)}.guidegrid .gi img{border:0;border-radius:0;aspect-ratio:1;object-fit:cover}.guidegrid .gi figcaption{padding:6px;font-size:10.5px;line-height:1.25;margin:0}.guidepub .pbtn{margin-top:10px}
@media(max-width:380px){.nav a.nav-wide{font-size:10px}.quicktabs a{font-size:12px}}
/* UI ปรับล่าสุด: พร้อมเพย์กระชับ + ยอดเงิน/แนบสลิปแทนพื้นที่เดิม */
.ppcompact{display:flex;align-items:center;justify-content:center;gap:7px;margin:4px 0 8px;font-size:13px}
.ppcompact .sel{font-size:14px;letter-spacing:.2px}
.ppcompact .sm{width:auto;min-height:32px;padding:4px 10px;font-size:12px}
.ppcompact .mut{font-size:12px}
.themebox{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;text-align:left}
.themebox .sws{margin:8px 0 10px}
.themebox .modes{margin-top:0}
.themebox .modes button{min-height:32px;font-size:11px}
.acct .btn.dl{background:#e8590c!important;color:#fff!important;border-color:#ffb27a!important}
@media(max-width:380px){.ppcompact{gap:5px}.ppcompact .sel{font-size:13px}.ppcompact .sm{padding:3px 8px}}
/* UI ปรับล่าสุด */
.ppcompact{display:flex;align-items:center;justify-content:center;gap:7px;margin:4px 0 8px;font-size:13px}
.ppcompact .sel{font-size:14px;letter-spacing:.2px}
.ppcompact .sm{width:auto;min-height:32px;padding:4px 10px;font-size:12px}
.ppcompact .mut{font-size:12px}
.themebox{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;text-align:left}
.themebox .sws{margin:8px 0 10px}
.themebox .modes{margin-top:0}
.themebox .modes button{min-height:32px;font-size:11px}
.acct .btn.dl{background:#e8590c!important;color:#fff!important;border-color:#ffb27a!important}
@media(max-width:380px){.ppcompact{gap:5px}.ppcompact .sel{font-size:13px}.ppcompact .sm{padding:3px 8px}}

/* UI ปรับเพื่อให้ผู้ใช้เข้าใจขั้นตอนเร็วขึ้น */
.home-actions{padding:14px 16px}.home-balance{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.home-balance>div:first-child{display:flex;flex-direction:column;gap:1px}.home-balance strong{font-size:26px;line-height:1.1}.points{min-width:70px;text-align:right;border-left:1px solid var(--line);padding-left:14px;display:flex;flex-direction:column;gap:1px}.points b{font-size:18px}.task-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.stepno{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--acs);border:1px solid var(--ac);color:var(--ac);font-weight:800;flex:none}.task-card{scroll-margin-top:62px}.quicktabs a{font-size:13px}.home-latest{padding-top:14px}.home-latest h2{margin-bottom:8px}
@media(max-width:380px){.home-balance strong{font-size:23px}.points{min-width:60px;padding-left:10px}.quicktabs a{font-size:11px}}

/* UX: ลดช่องว่างและเลื่อนอัตโนมัติบนมือถือ */
html{scroll-behavior:smooth}
.quicktabs{margin-bottom:8px}
.task-card{scroll-margin-top:58px}
#deposit .task-card{padding:12px 14px}
#deposit .qr{max-width:230px;margin:2px auto 6px}
#deposit .pill{margin-bottom:8px}
#deposit .ppcompact{margin:2px 0 6px}
#deposit .r2{margin-top:4px}
#deposit #amthint{margin:2px 0 4px!important}
#deposit #slippreview{margin:5px 0!important}
#days .pack{margin-bottom:7px}
#days #customDays{margin-top:8px!important}
#days #sum{margin-top:8px!important}
@media(max-width:600px){
  #deposit .card{padding-top:12px;padding-bottom:12px}
  #deposit .task-head{margin-bottom:8px}
  #deposit .task-head p{font-size:13px}
  #deposit .qr{max-width:225px}
  #deposit hr{margin:9px 0!important}
  #deposit .steps{margin-bottom:8px!important}
  #deposit form>button#submitBtn{margin-top:6px}
  #days .card{padding:14px}
  #days .task-head{margin-bottom:8px}
}