/*
 * หน้าเว็บลูกค้าที่ออกแบบใหม่ (Claude Design "April Live รอบ 1": แถบนำทางร่วม, หน้าแรกของจากไลฟ์, /link, /pay)
 * ใช้คู่กับ brand.css (token + ไอคอน + ปุ่ม) · component ชุดเดียวกับ design system "April" ของ TabaRandom
 * (design/april-brand/src/components.css) + ชิ้นใหม่ที่แบบรอบ 1 ประกอบจาก token เดิม
 * หน้ากล่องสุ่มเดิมยังไม่โหลดไฟล์นี้ (รอบ 4) — ยกเว้นแถบนำทาง .anav ที่อยู่ใน brand.css
 */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
body.site{margin:0;min-height:100vh;background:var(--page-bg);color:var(--ink);font:var(--text-body);-webkit-text-size-adjust:100%}
.page{max-width:560px;margin:0 auto;padding:4px 16px 32px;display:flex;flex-direction:column;gap:12px}
.page a:not([class]){color:var(--ink)}   /* ลิงก์ในข้อความเท่านั้น — ปุ่ม .btn ที่เป็น <a> ใช้สีของปุ่มเอง */
a[href*="/profile?back="]{white-space:nowrap}   /* "เพิ่มที่อยู่" ในแถบเตือน — ไม่ให้ตัดเป็น "เพิ่มที่ / อยู่" */
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{margin:0;font:var(--text-small);color:var(--ink-2)}
.faint{margin:0;font:var(--text-small);color:var(--ink-3)}
.pagehead{display:flex;flex-direction:column;gap:2px}
.pagehead .btn-text{align-self:flex-start;padding:0}
.pagehead h1{margin:0;font:var(--text-page-title)}

/* ชิ้นแบรนด์สีเต็ม (ห้ามย้อมสี) — ขนาดผ่าน --art-size */
.april-logo,.april-happy,.april-waiting,.april-sad,.april-gift,.april-bow{display:inline-block;flex:none;background:center/contain no-repeat}
.april-logo{width:var(--art-size,48px);height:var(--art-size,48px);background-image:url(/logo.webp);border-radius:999px}
.april-happy{width:var(--art-size,72px);height:var(--art-size,72px);background-image:url(/icons/april-happy.svg)}
.april-waiting{width:var(--art-size,72px);height:var(--art-size,72px);background-image:url(/icons/april-waiting.svg)}
.april-sad{width:var(--art-size,72px);height:var(--art-size,72px);background-image:url(/icons/april-sad.svg)}
.april-gift{width:var(--art-size,24px);height:var(--art-size,24px);background-image:url(/icons/gift.svg)}
.april-bow{width:var(--art-size,26px);height:var(--art-size,26px);background-image:url(/icons/bow.svg)}

/* การ์ด */
.card{background:var(--surface-card);border-radius:var(--radius-card);padding:18px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h2{margin:0;font:var(--text-card-title);display:flex;align-items:center;gap:8px;--ic:20px}
.card h2 img{display:block;flex:none}
.card.dark{background:var(--ink);color:var(--on-ink);gap:14px;padding:20px 18px}
.card.dark h2{font:var(--text-section)}
.card.center{align-items:center;text-align:center;padding:28px 18px}
.card.row{flex-direction:row;align-items:center;gap:14px}
.card.warn{background:var(--warn-tint);gap:10px}
.card .body{display:flex;flex-direction:column;gap:6px;min-width:0}
.card .title{font:var(--text-card-title)}
.card p{margin:0}

/* ขั้นตอนเป็นเลขกลม */
.nsteps{margin:0;padding:0;list-style:none;display:grid;gap:10px;font:var(--text-body)}
.nsteps li{display:flex;gap:10px;align-items:center}
.nsteps b.n{width:24px;height:24px;flex:none;border-radius:999px;display:grid;place-items:center;font:700 12px/1 var(--font-sans);background:var(--btn-secondary);color:var(--ink)}
.card.dark .nsteps b.n{background:var(--on-ink);color:var(--ink)}
.nsteps.boxed{gap:8px}
.nsteps.boxed li{padding:10px 12px;border-radius:12px;background:var(--surface-card)}
.nsteps.boxed b.n{width:26px;height:26px;font-size:13px;background:var(--ink);color:var(--on-ink)}
.stepline{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.stepline li{display:flex}
.hello{margin:6px 0 0;font:var(--text-label);color:var(--ink-2)}

/* แถบเตือน / หมายเหตุ */
.alertrow{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:10px 12px;font:var(--text-small);--ic:18px}
.alertrow > .ic{flex:none;margin-top:1px}
.alertrow a,.alertrow button{font-weight:600;color:inherit}
.alertrow.warn{background:var(--warn-tint)}
.alertrow.warn > .ic{color:var(--warn)}
.alertrow.stop{background:var(--accent-tint)}
/* ต้องใส่ที่อยู่ก่อนจ่ายเงิน (เจ้าของร้าน 13 ต.ค.) — กรอบแดงเด่นกว่าแถบเตือนทั่วไป */
.addrgate{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--accent-tint);border:2px solid var(--accent);color:var(--ink);--ic:26px}
.addrgate > .ic{flex:none;color:var(--accent)}
.addrgate .body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.addrgate .body b{font:var(--text-card-title);color:var(--accent)}
.addrgate .body span{font:var(--text-small);color:var(--ink-2);text-wrap:pretty}
.alertrow.stop > .ic{color:var(--accent)}
.alertrow.ok{background:var(--ok-tint)}
.alertrow.ok > .ic{color:var(--ok)}
.tint{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font:var(--text-small)}
.tint > .ic{flex:none;margin-top:2px}
.tint .body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.tint b{font:var(--text-label)}
.tint.warn{background:var(--warn-tint);color:var(--warn)}
.tint.warn a{font:700 14px/2 var(--font-sans);color:var(--warn)}
.tint.ok{background:var(--ok-tint);color:var(--ok)}
.tint.bad{background:var(--accent-tint);color:var(--accent);border-radius:12px;padding:12px}
.tint.note{background:var(--btn-secondary);color:var(--ink-2);--ic:16px}
.tint.note a{color:var(--ink-2);font-weight:600}
.oabar{position:relative;padding-right:40px}
.oabar .oaacts{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:8px}
.oabar .oax{position:absolute;top:6px;right:6px;min-width:40px;min-height:40px;padding:0;display:grid;place-items:center;color:var(--ink-3)}
.okbar{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;background:var(--ok-tint);color:var(--ok);font:var(--text-label)}

/* แถวลิงก์ใหญ่ (แถบกล่องสุ่ม, ทักแอดมิน) */
.rowlink{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-card);color:var(--ink);text-decoration:none;--ic:24px}
.rowlink .body{flex:1;display:flex;flex-direction:column;min-width:0}
.rowlink b{font:var(--text-label)}
.rowlink small{font:var(--text-small);color:var(--ink-2)}
.rowlink .chev{--ic:20px;color:var(--ink-2)}
.rowlink img{display:block;flex:none;border-radius:8px}
.footgrid{display:grid;gap:8px;margin-top:4px}
.footgrid .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.foot{margin:4px 0 0;text-align:center;font:var(--text-small);color:var(--ink-3)}
.foot a{color:var(--ink-3)}

/* ยอดค้าง + แถบกำหนดจ่าย */
.duehead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.duehead > span:first-child{font:var(--text-label);color:var(--ink-2)}
.amount{font:700 48px/1 var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.amount.md{font:700 40px/1.1 var(--font-mono)}
.dl{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--field-bg);--ic:22px}
.dl .body{display:flex;flex-direction:column;min-width:0}
.dl small{font:var(--text-small);color:var(--ink-2)}
.dl .big{font:600 18px/1.3 var(--font-mono);font-variant-numeric:tabular-nums}
.dl.urgent{align-items:flex-start;padding:12px;background:var(--accent-tint);color:var(--accent)}
.dl.urgent > .ic{margin-top:2px}
.dl.urgent .body{gap:2px}
.dl.urgent b.lbl{font:var(--text-label)}
.dl.urgent .big{font:700 24px/1.2 var(--font-mono)}
.dl.urgent small{color:var(--accent)}
.dl.live b{font:var(--text-label)}
.dl.sm{gap:8px;margin-top:4px;padding:8px 10px;border-radius:10px;font:var(--text-small);--ic:16px}

/* รายการของจากไลฟ์ */
.grp{display:flex;flex-direction:column;gap:6px}
.grp-title{display:flex;align-items:center;gap:6px;font:var(--text-label);color:var(--ink-2);--ic:16px}
.item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:8px 12px 8px 8px;border-radius:12px;background:var(--field-bg)}
.item.gone{opacity:.62}
/* แบบรอบ G: ปุ่มยกเลิก (กดผิด) เต็มแถวในแถวของ + ป้ายเวลา */
.item .shopcancel{grid-column:1/-1;display:block}
.item .cxbtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-top:4px;padding:0 6px 0 14px;border:0;border-radius:10px;background:var(--surface-card);color:var(--ink);font:600 14px/1.3 var(--font-sans);cursor:pointer}
.item .cxbtn .tag{display:flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:var(--field-bg);font:600 12px/1.3 var(--font-sans);color:var(--ink-2);--ic:13px}
.item .cxbtn:disabled{opacity:.6}
.item .ph{width:56px;height:56px;border-radius:10px;background:var(--btn-secondary);display:grid;place-items:center;color:var(--ink-3);overflow:hidden}
.item .ph img{width:56px;height:56px;object-fit:cover;display:block}
.item .t{display:flex;flex-direction:column;min-width:0}
.item .t b{font:var(--text-label)}
.item .t span{font:var(--text-small);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .t .code{font:500 12px/1.4 var(--font-mono);color:var(--ink-3)}
.item .r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.item .r b{font:600 15px/1.3 var(--font-mono);font-variant-numeric:tabular-nums}
.item .r .pill{align-self:flex-end}
.item .sub{grid-column:2/-1;font:var(--text-small);color:var(--ink-2)}

/* พัสดุ / เครดิต / บัญชี TikTok */
.kvrow{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:32px}
.kvrow > b{font:600 15px/1.3 var(--font-sans);min-width:0;overflow-wrap:anywhere}
.kvrow > b.mono{font:600 15px/1.3 var(--font-mono)}
.kvrow .pill{align-self:center;flex:none}
.box2{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--field-bg)}
.trk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trk code{font:600 15px/1.3 var(--font-mono);letter-spacing:.02em;overflow-wrap:anywhere}
.trk .btn-3{min-height:40px;margin-left:auto;padding:0 12px;background:var(--surface-card);font-size:14px;--ic:16px}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg2 label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:0 8px;border-radius:12px;background:var(--field-bg);font:600 14px/1.3 var(--font-sans);cursor:pointer}
.seg2 input{position:absolute;opacity:0;pointer-events:none}
.seg2 label:has(input:checked){background:var(--ink);color:var(--on-ink)}
.f{display:flex;flex-direction:column;gap:6px;font:var(--text-label);color:var(--ink-2)}
.f input{min-height:48px;padding:0 12px;border-radius:12px;border:1.5px solid var(--field-line);background:var(--field-bg);color:var(--ink);font:400 16px var(--font-sans);width:100%}
.f input:focus{outline:none;border-color:var(--ink-2)}
.msg{font:var(--text-small);color:var(--accent)}
.msg:empty{display:none}

/* หน้าจ่าย: ขั้นที่ล็อก / เปิด / เสร็จ */
.locked{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:var(--btn-secondary);color:var(--ink-3);font:600 15px/1.3 var(--font-sans);--ic:16px}
.stephead{display:flex;align-items:center;gap:10px}
.stephead .pill{align-self:center;flex:none}
.stephead b{flex:1;font:var(--text-card-title)}
.card.step{gap:12px}
.donesum{display:flex;align-items:center;gap:8px;margin-top:-6px;font:var(--text-small);color:var(--ink-2);--ic:16px}
.donesum > .ic{color:var(--ok)}
.donesum span{flex:1;min-width:0}
.donesum .btn-text{min-height:32px;text-decoration:underline;color:var(--ink)}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;padding:14px;border:0;border-radius:12px;background:var(--field-bg);color:var(--ink);font:inherit;cursor:pointer;--ic:24px}
.opt:disabled{opacity:.5;cursor:progress}
.opt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.opt .body{flex:1;display:flex;flex-direction:column;gap:2px}
.opt b{font:var(--text-button)}
.opt small{font:var(--text-small);color:var(--ink-2)}
.opt .chev{align-self:center;--ic:20px}
.qrwrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;border-radius:12px;background:var(--field-bg);text-align:center}
.qrimg{width:184px;height:184px;border:10px solid #FFFFFF;border-radius:8px;background:#FFFFFF;display:grid;place-items:center;font:var(--text-small);color:var(--ink-2)}
.qrimg canvas,.qrimg img{width:164px !important;height:164px !important;image-rendering:pixelated;display:block}
.qrwrap b{font:var(--text-label)}
.qrwrap b .mono{font-weight:700}

.ready{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--field-bg)}
.ready img{width:52px;height:70px;flex:none;border-radius:6px;object-fit:cover;background:var(--surface-card)}
.ready .body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.ready .body span:last-child{font:var(--text-small);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ready label{cursor:pointer}
.waitbox{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--field-bg)}
.waitbox .body{display:flex;flex-direction:column}
.waitbox b{font:var(--text-label)}
.waitbox span{font:var(--text-small);color:var(--ink-2)}
.pickbtn{cursor:pointer}
.nextbox{display:flex;gap:10px;padding:14px;border-radius:14px;background:var(--surface-card)}
.nextbox > .ic{margin-top:2px;flex:none}
.nextbox .body{display:flex;flex-direction:column;gap:2px}
.nextbox b{font:var(--text-label)}
.nextbox span{font:var(--text-small);color:var(--ink-2)}
.result h1{margin:0;font:var(--text-section);text-wrap:pretty}
.result p{color:var(--ink-2);text-wrap:pretty}

/* โค้ดส่วนลด (หน้าจ่ายของจากไลฟ์) */
.promos{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.promos .chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--ok-tint);color:var(--ok);font:600 12px/1.5 var(--font-sans);--ic:14px}
.promos .chip button{min-height:28px;padding:0 8px;border:0;border-radius:999px;background:none;color:var(--ok);font:600 12px var(--font-sans);text-decoration:underline;cursor:pointer}
.promobox{display:flex;flex-direction:column;gap:8px}
.promobox > .btn-text{align-self:flex-start;padding:0;min-height:36px;text-decoration:underline;color:var(--ink)}
.promoform{display:flex;gap:8px}
.promoform input{flex:1;min-width:0;min-height:48px;padding:0 12px;border-radius:12px;border:1.5px solid var(--field-line);background:var(--field-bg);color:var(--ink);font:600 16px var(--font-sans);text-transform:uppercase;letter-spacing:.04em}
.promoform input:focus{outline:none;border-color:var(--ink-2)}
.promoform .btn{min-height:48px;padding:0 16px;flex:none}

/* หน้าผูกบัญชี */
.donerow{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:var(--surface-card)}
.donerow .pill{align-self:center;flex:none}
.donerow span.t{flex:1;font:var(--text-body);min-width:0}
.codebox{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:12px;background:var(--field-bg)}
.codebox b{flex:1;font:700 26px/1.2 var(--font-sans);white-space:nowrap}
.codebox b .mono{letter-spacing:.04em}
.codebox .btn-3{min-height:44px;flex:none;background:var(--surface-card);--ic:18px}
.whobox{display:flex;align-items:center;gap:12px;padding:16px;border-radius:12px;background:var(--field-bg)}
.whobox img{display:block;flex:none}
.whobox .body{display:flex;flex-direction:column;min-width:0}
.whobox b{font:700 22px/1.2 var(--font-sans);overflow-wrap:anywhere}
.pair{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.tips{margin:0;padding:12px 14px 12px 32px;border-radius:14px;background:var(--btn-secondary);display:grid;gap:6px;font:var(--text-small);color:var(--ink-2)}
.acc{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--field-bg)}
.acc .btn-text{align-self:flex-start;padding:0}

/* ม่านเต็มจอ (เมนูบัญชี) */
@media (min-width:768px){
  .page{padding-top:16px}
}
@media (prefers-reduced-motion:reduce){.april-rock{animation:none}}

/* หน้าที่วาดใหม่ทั้งก้อน (หน้าแรก/จ่าย/ผูกบัญชี) คุมตำแหน่งเองด้วย keepScroll() ใน ui.js — ปิด scroll anchoring ของ Chrome กันเลื่อนซ้ำสองชั้น */
#page,#body{overflow-anchor:none}

/* ===== แบบรอบ A (Claude Design 30 ก.ย.) — หน้าจ่าย: ใบสรุปแบบใบเสร็จ · โค้ดในการ์ดยอด · กันโอนซ้ำ ===== */
/* ช่องกรอกของ design system April (design/april-brand components.css) */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field input,.field select{min-height:48px;padding:0 12px;border-radius:12px;border:1.5px solid var(--field-line);background:var(--field-bg);color:var(--ink);font:400 16px var(--font-sans);width:100%;box-sizing:border-box}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink-2)}
.field small{font-size:12px;color:var(--ink-3)}
.field .err{display:none;align-items:flex-start;gap:4px;font-size:12px;font-weight:600;color:var(--accent);--ic:14px}
.field.bad input{border-color:var(--accent)}
.field.bad .err{display:flex}
/* ใบสรุปยอด */
.rcpt{display:flex;flex-direction:column;gap:6px}
.rcpt .r{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rcpt .r .t{display:flex;flex-direction:column;min-width:0;font:var(--text-body)}
.rcpt .r .t small{font:var(--text-small);color:var(--ink-3)}
.rcpt .r .v{flex:none;font:500 15px/1.6 var(--font-mono);font-variant-numeric:tabular-nums}
.rcpt .r.okv .v{color:var(--ok)}
.rtotal{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:12px;border-top:1.5px solid var(--field-line)}
.rtotal > span{font:var(--text-label);color:var(--ink-2);padding-bottom:6px}
.rtotal .amts{display:flex;align-items:baseline;gap:10px}
.rtotal s{font:500 18px/1 var(--font-mono);color:var(--ink-3)}
.rtotal b{font:700 40px/1 var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.flashok{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--ok-tint);color:var(--ok);font:var(--text-label);--ic:16px}
.dlrow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--field-bg);font:var(--text-small);--ic:16px}
.dlrow b{font-family:var(--font-mono)}
/* โค้ดส่วนลด (ท้ายการ์ดยอด) */
.codes{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1.5px dashed var(--field-line)}
.coderow{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 4px 6px 12px;border-radius:12px;background:var(--ok-tint);color:var(--ok);--ic:18px}
.coderow .t{flex:1;min-width:0;display:flex;flex-direction:column}
.coderow .t b{font:600 14px/1.4 var(--font-sans)}
.coderow .t b .mono{font-family:var(--font-mono)}
.coderow .t small{font:var(--text-small)}
.coderow .btn-text{flex:none;color:var(--ok);text-decoration:underline;min-height:44px}
.coderow .lk{--ic:16px;margin-right:10px}
.codeopen{display:flex;flex-direction:column;align-items:flex-start}
.codeopen .btn-text{padding:0;color:var(--ink);text-decoration:underline}
.codeopen small,.codes .note{font:var(--text-small);color:var(--ink-3)}
.codes .lockednote{display:flex;align-items:flex-start;gap:6px;font:var(--text-small);color:var(--ink-2);--ic:14px}
.codes .lockednote .ic{margin-top:3px}
.codeinput{display:flex;gap:8px}
.codeinput input{flex:1;min-width:0;text-transform:uppercase;font-family:var(--font-mono);letter-spacing:.04em}
.codeinput .btn-sm{flex:none;min-height:48px}
/* ไม่มียอดค้าง: ทางแนบสลิปเป็นแถวเงียบ */
.quietrow{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:14px;background:var(--surface-card);color:var(--ink);text-decoration:none;border:0;width:100%;text-align:left;font:inherit;cursor:pointer}
.quietrow > .ic:first-child{color:var(--ink-2)}
.quietrow .body{flex:1;display:flex;flex-direction:column}
.quietrow .body b{font:var(--text-label)}
.quietrow .body span{font:var(--text-small);color:var(--ink-2)}
.quietrow .chev{--ic:16px;color:var(--ink-3)}
/* ยอดเปลี่ยนหลังบันทึก QR: คำถามเดียว 2 ทาง */
.ask{font:var(--text-card-title)}
.okpick{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--ok-tint);color:var(--ok);--ic:16px}
.okpick span{flex:1;font:var(--text-small)}
.okpick .btn-text{min-height:32px;color:var(--ok);text-decoration:underline}

/* ===== แบบรอบ B (Claude Design 30 ก.ย.) — หน้าแรก: โค้ดในการ์ดยอด · แถวของ · พัสดุ + สถานะ Flash · เครดิต/คืนเงิน ===== */
.codebox{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--ok-tint);color:var(--ok)}
.codebox > b{display:flex;align-items:center;gap:6px;font:var(--text-label);--ic:16px}
.codebox .r{display:flex;justify-content:space-between;gap:12px;font:var(--text-small)}
.codebox .r b{flex:none;font-family:var(--font-mono)}
.item .t .meta{white-space:normal}
.item .t .meta .code{font:inherit;font-family:var(--font-mono);color:inherit}
.item .foot{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:var(--text-small);color:var(--ink-2)}
.promobadge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--ok-tint);color:var(--ok);font:600 12px/1.6 var(--font-sans);--ic:13px}
.grp.test{padding:10px;border-radius:14px;outline:2px dashed var(--ink-3);outline-offset:-2px}
.grp-title{flex-wrap:wrap}
.grp-title .pill{margin-left:auto}
/* พัสดุ */
.pcl{display:flex;flex-direction:column;gap:10px;padding:14px 12px;border-radius:14px;background:var(--field-bg)}
.pcl.alert{background:var(--warn-tint)}
.pcl.gone{opacity:.55}
.pcl .phead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcl .phead > b{font:600 16px/1.3 var(--font-sans)}
.pcl .phead > b .mono{font-family:var(--font-mono)}
.pcl .phead .pill{align-self:center;flex:none}
.trkbox{display:flex;flex-direction:column;gap:2px;padding:10px 12px 2px;border-radius:12px;background:var(--surface-card)}
.trkbox > span{font:var(--text-caption);color:var(--ink-3)}
.trkbox > b{font:600 16px/1.3 var(--font-mono);letter-spacing:.02em;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.trkbox .acts{display:flex;flex-wrap:wrap;gap:0 16px}
.trkbox .acts .btn-text{padding-left:0;padding-right:0;--ic:16px}
.tline{margin:0;padding:0 0 0 2px;list-style:none;display:flex;flex-direction:column}
.tline li{display:flex;align-items:stretch;gap:12px;min-height:28px}
.tline .rail{position:relative;width:14px;flex:none;display:flex;justify-content:center}
.tline .rail i{position:absolute;width:3px;background:var(--field-line)}
.tline .rail i.up{top:0;bottom:50%}
.tline .rail i.dn{top:50%;bottom:0}
.tline .rail i.on{background:var(--ok)}
.tline .rail i.none{background:transparent}
.tline .dot{position:relative;align-self:center;width:12px;height:12px;border-radius:999px;background:var(--field-line)}
.tline li.done .dot{background:var(--ok)}
.tline li.now .dot{background:var(--ok);outline:4px solid var(--ok-tint)}
.tline li > span:last-child{align-self:center;font:var(--text-small);color:var(--ink-3)}
.tline li.done > span:last-child{color:var(--ink)}
.tline li.now > span:last-child{font:700 14px/1.4 var(--font-sans);color:var(--ink)}
.pcl .at,.pcl .pfoot{font:var(--text-small);color:var(--ink-2)}
.palert{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:var(--surface-card)}
.palert .why{display:flex;gap:8px;align-items:flex-start;color:var(--accent)}
.palert .why > .ic{margin-top:2px;flex:none}
.palert .why span{display:flex;flex-direction:column;gap:2px}
.palert .why b{font:var(--text-label)}
.palert .why small{font:var(--text-small);color:var(--ink)}
.popen{display:flex;flex-direction:column;gap:6px}
.popen > b{display:flex;align-items:center;gap:8px;font:var(--text-label);--ic:18px}
.popen .ln{display:flex;justify-content:space-between;gap:12px;font:var(--text-small);color:var(--ink-2)}
.popen .ln b{flex:none;font-family:var(--font-mono);color:var(--ink)}
.popen .state{display:flex;align-items:center;gap:6px;font:var(--text-small);color:var(--ink-2);--ic:14px}
.popen .state.ok{color:var(--ok)}
.popen .state.bad{color:var(--accent)}
.popen .btn-2{margin-top:4px}
.linebtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:12px;background:var(--line-green);color:var(--on-ink);font:var(--text-button);text-decoration:none}
.linebtn img{display:block;border-radius:6px}
/* เครดิต */
.credrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.credrow > span{font:var(--text-label);color:var(--ink-2)}
.credrow > b{font:700 32px/1 var(--font-mono)}
.reserved{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:10px;background:var(--warn-tint);color:var(--warn);font:var(--text-label)}
.reserved b{font-family:var(--font-mono)}
.refreq{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--field-bg)}
.refreq .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.refreq .top b{font:var(--text-label)}
.refreq .top b .mono{font-family:var(--font-mono)}
.refreq .top .pill{align-self:center}
.refreq > span{font:var(--text-small);color:var(--ink-2)}
.refreq .btn-text{align-self:flex-start;padding:0}
/* หน้าขอคืนเงิน */
.gatehead{display:flex;align-items:center;gap:12px}
.gatehead .lockc{width:48px;height:48px;flex:none;border-radius:999px;background:var(--warn-tint);color:var(--warn);display:grid;place-items:center}
.gatehead b{font:var(--text-card-title)}
.nexthint{display:flex;flex-direction:column;gap:8px;padding:0 4px;opacity:.45}
.nexthint b{font:var(--text-label)}
.nexthint span{font:var(--text-small)}
.radio2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.radio2 button{min-height:52px;border:0;border-radius:12px;background:var(--field-bg);color:var(--ink-2);font:600 15px/1.3 var(--font-sans);cursor:pointer}
.radio2 button[aria-checked="true"]{outline:2px solid var(--ink);outline-offset:-2px;color:var(--ink)}