/*
 * April design system — tokens + ไอคอน + component ที่ใช้ซ้ำ (ต้นฉบับ: April_Icon_Set_preview/ และ
 * "Design brief ขอบเขตรอบแรก/" ที่ Claude Design ออกแบบหน้าร้านใหม่ — Spec.dc.html คือสเปกของไฟล์นี้)
 * ไฟล์ CSS ร่วมไฟล์เดียวของทุกหน้า — ต่างจากหลัก "หน้าเดียวจบในไฟล์" ของ TabaRandom โดยตั้งใจ
 * เพราะ token สี/ขนาดชุดนี้ต้องตรงกันทุกหน้า ก็อปแยกหลายหน้าจะเพี้ยนกันแน่ (เหตุผลเดียวกับ tiers.mjs)
 * สีโซนราคาไม่อยู่ที่นี่ — มาจาก tiers.mjs ทาง API เพราะผูกกับข้อมูลกล่อง
 */
:root{
  --april-black:#000000; --april-cream:#FFF4D8; --april-brick:#C1391A; --april-red-deep:#BC0012; --april-brown:#604824;
  --page-bg:#FAF3E0; --surface-card:#FFFFFF;
  --ink:#1F1A17; --ink-2:#5A4A3A; --ink-3:#7A6A58; --ink-soft:#CDBFAA; --ink-line:#3A322B;
  --accent:#C0392B; --accent-hover:#8E2A1F; --accent-tint:#F8E3DE;
  --line-green:#06C755;
  --ok:#2F7A78; --ok-tint:#E4EEEC;
  --warn:#9A5B2E; --warn-tint:#F3E8DC;
  --field-bg:#FFFCF4; --field-line:#E6D8B8;
  --scrim:rgba(31,26,23,.55);
  /* ปุ่มหลักเป็นดำ ink ตามคู่สีหลักดำ-ครีม — สีอิฐเก็บไว้เฉพาะจุดเด่น (เปิดขาย, SOLD, เวลาใกล้หมด) */
  --btn-primary:#1F1A17; --btn-primary-hover:#3A322B; --btn-secondary:#FFF4D8;

  --on-ink:#FFFFFF; --on-ok:#FFFFFF;

  --font-sans:'Anuphan',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --text-page-title:700 32px/1.2 var(--font-sans);
  --text-section:700 22px/1.2 var(--font-sans);
  --text-box-number:700 22px/1 var(--font-sans);
  /* ขนาดตัวอักษรชุดเต็มของ design system "April" (TabaRandom/design/april-brand/src/tokens.css) — หน้าที่ออกแบบใหม่ใช้ผ่าน site.css */
  --text-card-title:700 18px/1.35 var(--font-sans);
  --text-button:600 16px/1.3 var(--font-sans);
  --text-body:400 14px/1.6 var(--font-sans);
  --text-label:600 13px/1.4 var(--font-sans);
  --text-small:400 13px/1.5 var(--font-sans);
  --text-caption:600 12px/1.5 var(--font-sans);
  --text-code:500 13px/1.4 var(--font-mono);

  --radius-box:12px; --radius-card:16px; --radius-zone-card:18px; --radius-pill:999px;
  --icon-badge:12px; --icon-xs:14px; --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-status:34px; --icon-mascot:72px;
  --bow-on-box:26px; --badge-dot:20px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/*
 * ไอคอนเส้น: ใช้ไฟล์ SVG เป็น mask แล้วระบายด้วย currentColor — ย้อมสีตามข้อความรอบๆ ได้ (ตามกติกา design system)
 * ใช้: <i class="ic ic-lock" aria-hidden="true"></i> ขนาดตั้งผ่าน --ic
 * ชิ้นแบรนด์สีเต็ม (bow, gift, april-*) ใช้ <img src="/icons/…svg"> แทน ห้ามย้อมสี
 */
.ic{display:inline-block;flex:none;width:var(--ic,var(--icon-md));height:var(--ic,var(--icon-md));vertical-align:-.22em;
  background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.ic-gift{--src:url(/icons/gift-line.svg)}
.ic-bag{--src:url(/icons/bag.svg)}
.ic-play{--src:url(/icons/play.svg)}
.ic-lock{--src:url(/icons/lock.svg)}
.ic-lock-sm{--src:url(/icons/lock-sm.svg)}
.ic-hourglass{--src:url(/icons/hourglass.svg)}
.ic-hourglass-sm{--src:url(/icons/hourglass-sm.svg)}
.ic-sold{--src:url(/icons/sold-stamp.svg)}
.ic-sold-sm{--src:url(/icons/sold-stamp-sm.svg)}
.ic-package{--src:url(/icons/package.svg)}
.ic-truck{--src:url(/icons/truck.svg)}
.ic-refund{--src:url(/icons/refund-chat.svg)}
.ic-check{--src:url(/icons/check.svg)}
.ic-alarm{--src:url(/icons/alarm.svg)}
.ic-flame{--src:url(/icons/flame.svg)}
.ic-eyes{--src:url(/icons/eyes.svg)}
.ic-user{--src:url(/icons/user.svg)}
.ic-form{--src:url(/icons/form.svg)}
.ic-download{--src:url(/icons/download.svg)}
.ic-paperclip{--src:url(/icons/paperclip.svg)}
.ic-phone{--src:url(/icons/phone.svg)}
.ic-help{--src:url(/icons/help.svg)}
.ic-back{--src:url(/icons/arrow-back.svg)}
.ic-logout{--src:url(/icons/logout.svg)}
.ic-alert{--src:url(/icons/alert.svg)}
.ic-calendar{--src:url(/icons/calendar.svg)}
.ic-info{--src:url(/icons/info.svg)}
.ic-close{--src:url(/icons/close.svg)}
.ic-chevron-right{--src:url(/icons/chevron-right.svg)}
.ic-chevron-down{--src:url(/icons/chevron-down.svg)}
.ic-timer{--src:url(/icons/timer.svg)}
.ic-camera{--src:url(/icons/camera.svg)}
.ic-receipt{--src:url(/icons/receipt.svg)}
.ic-card{--src:url(/icons/card.svg)}
.ic-share{--src:url(/icons/share.svg)}
.ic-map-pin{--src:url(/icons/map-pin.svg)}
.ic-copy{--src:url(/icons/copy.svg)}
.ic-live{--src:url(/icons/live.svg)}
.ic-star{--src:url(/icons/star.svg)}
.ic-refresh{--src:url(/icons/refresh.svg)}
.ic-edit{--src:url(/icons/edit.svg)}
.ic-bell{--src:url(/icons/bell.svg)}
.ic-dice{--src:url(/icons/dice.svg)}
.ic-sparkle{--src:url(/icons/sparkle.svg)}
.ic-heart{--src:url(/icons/heart.svg)}
.ic-search{--src:url(/icons/search.svg)}
.ic-plus{--src:url(/icons/plus.svg)}
.ic-sort{--src:url(/icons/sort.svg)}
.ic-coupon{--src:url(/icons/coupon.svg)}
.ic-ios-share{--src:url(/icons/ios-share.svg)}
.ic-add-square{--src:url(/icons/add-square.svg)}
.ic-hot{color:var(--april-brick)}

/* ---------- เช็กลิสต์เตรียมตัว (PrepCard · แบบรอบ 2) — ui.js prepCard() / prepSingle() ---------- */
.prep{background:var(--surface-card);border-radius:16px;padding:14px 16px 4px;color:var(--ink)}
.prep-head{display:flex;align-items:center;gap:8px;min-height:36px}
.prep-head b{font-size:17px;line-height:1.3}
.prep-head .cnt,.prep-min .cnt{font-size:13px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.prep-head .hide{margin:-4px 0 -4px auto;min-height:44px;padding:0 2px 0 10px;border:0;background:none;font:600 13px var(--font-sans);color:var(--ink-2);cursor:pointer}
.prep-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin:6px 0 4px}
.prep-seg i{height:4px;border-radius:2px;background:var(--field-line);transition:background-color .2s var(--ease)}
.prep-seg i.on{background:var(--ok)}
.prep-hint{display:block;margin-top:6px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.prep-hint a{color:var(--ink);font-weight:600}
.prep-row{border-top:1px solid #F1E8D2;padding:12px 0;display:flex;flex-direction:column;gap:10px}
.prep-seg + .prep-row,.prep-hint + .prep-row{border-top:0}
.prep-top{display:flex;align-items:center;gap:12px;min-height:30px;width:100%;padding:0;border:0;background:none;text-align:left;font-family:var(--font-sans);color:var(--ink)}
button.prep-top{cursor:pointer}
.prep-top .dot,.prep-min .dot{width:26px;height:26px;flex:none;border-radius:50%;background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--field-line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--ink-3);--ic:14px}
.prep-row.open .dot{background:var(--ink);color:var(--april-cream);box-shadow:none}
.prep-row.done .dot,.prep-min .dot.done{background:var(--ok);color:#FFFFFF;box-shadow:none}
.prep-row.done .dot .ic{animation:april-pop .2s var(--ease) both}
.prep-top .tt{flex:1;min-width:0;display:flex;flex-direction:column}
.prep-top .tt b{font-size:15px;font-weight:600;line-height:1.4}
.prep-row.open .tt b{font-weight:700}
.prep-row.done .tt b{color:var(--ink-3)}
.prep-top .tt small{font-size:13px;line-height:1.5;color:var(--ink-3)}
.prep-top > .ic{color:var(--ink-3);--ic:16px}
.prep-body{padding-left:38px;display:flex;flex-direction:column;gap:12px;animation:april-in .25s var(--ease) both}
.prep-body > p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.prep-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.prep-acts .appicon{width:44px;height:44px;border-radius:11px}
.prep-min{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:8px 16px;border:0;border-radius:16px;background:var(--surface-card);font-family:var(--font-sans);color:var(--ink);text-align:left;cursor:pointer;--ic:16px}
.prep-min b{font-size:15px}
.prep-min .ok{margin-left:auto;font-size:13px;font-weight:600;color:var(--ok)}
.prep-min .more{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-2)}
.prep-min > .ic{color:var(--ink-3)}
.prep.single{padding:16px}
.prep.single .prep-top{align-items:flex-start;--ic:24px}
.prep.single .prep-top > .ic{color:var(--ink-2);margin-top:1px;--ic:24px}
.prep.single .prep-top b{flex:1;font-size:16px;line-height:1.4}
.prep.single .prep-body{padding:10px 0 0 36px}
.prep .x{width:44px;height:44px;margin:-10px -12px -10px 0;flex:none;border:0;background:none;display:flex;align-items:center;justify-content:center;color:var(--ink-3);cursor:pointer;--ic:18px}
.btn-sm{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--btn-primary);color:#FFFFFF;
  font:600 14px/1.3 var(--font-sans);text-decoration:none;cursor:pointer;--ic:18px}
.btn-sm:active{transform:scale(.98)}
.skip{min-height:44px;padding:0 10px;border:0;background:none;font:600 13px var(--font-sans);color:var(--ink-3);cursor:pointer}
/* ขั้นตอนเพิ่มไว้หน้าจอโฮม: มีภาพปุ่ม/เมนูให้เทียบกับจอจริง — ปุ่มแชร์ Safari สีฟ้าเหมือนของจริง */
.steps{display:flex;flex-direction:column;gap:8px}
.steps .st{display:flex;align-items:center;gap:10px}
.steps .n{width:14px;flex:none;font-size:12px;font-weight:700;color:var(--ink-3);text-align:center}
.steps .g{flex:none;width:36px;height:36px;border-radius:9px;background:var(--page-bg);border:1px solid var(--field-line);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;line-height:1;color:var(--ink)}
.steps .g.ios{color:#0A6CFF;--ic:20px}
.steps .m{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:9px;background:#FFFFFF;border:1px solid var(--field-line);font-size:13px;font-weight:600;white-space:nowrap;--ic:16px}
.steps .t{font-size:13px;line-height:1.5;color:var(--ink-2);min-width:0}

/* ---------- ปุ่มช่องทาง: แคปซูล 44px (LINE เขียว / TikTok ครีม) — ต่างรูปทรงจากปุ่มเข้าสู่ระบบ ---------- */
.cap{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 6px;border-radius:999px;background:var(--line-green);color:#FFFFFF;
  font:700 14px/1.3 var(--font-sans);text-decoration:none;white-space:nowrap}
.cap img{width:32px;height:32px;flex:none}
.cap.tt{gap:6px;padding:0 14px;background:var(--btn-secondary);color:var(--ink);font-weight:600}
.cap.tt img{width:auto;height:18px}
.cap:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ---------- แจ้งสภาพสินค้า (ConditionNote): หัวใจน้ำตาล — card หน้าแรก · line/sub ใต้หัวข้อ · pay ในการ์ดได้กล่อง ---------- */
.cond{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.55;color:var(--ink-2);--ic:16px}
.cond > .ic{margin-top:2px;color:var(--warn)}
.cond.sub{gap:6px;line-height:1.5;--ic:14px}
.cond.sub > .ic{margin-top:3px}
.cond.pay{background:var(--april-cream);border-radius:12px;padding:10px 12px;gap:10px;font-size:14px;color:var(--ink)}
.cond.pay > .ic{margin-top:3px}
.cond.ship > .ic{color:var(--ok)}
.cond .soft{color:var(--ink-2)}
.cond .nw{white-space:nowrap}
.cond-card{background:var(--april-cream);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.cond-card .hc{width:32px;height:32px;flex:none;border-radius:50%;background:#FFFFFF;display:flex;align-items:center;justify-content:center;color:var(--warn);--ic:18px}
.cond-card .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cond-card b{font-size:15px;line-height:1.4}
.cond-card span{font-size:14px;line-height:1.65;color:var(--ink-2)}
.cond-card .more{display:inline-flex;align-items:center;gap:2px;min-height:32px;font-size:13px;font-weight:600;color:var(--ink);--ic:14px}
.cond a{color:var(--ink);font-weight:600}

/* ---------- นโยบายร้าน + รูปตัวอย่างตำหนิจริง (ui.js policyList() / flawGallery()) ---------- */
.policy-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.policy-list li{display:flex;gap:10px;align-items:flex-start;--ic:18px}
.policy-list li > .ic{margin-top:2px;color:var(--warn)}
.policy-list li > span{display:flex;flex-direction:column;font-size:13px;line-height:1.55;color:var(--ink-2)}
.policy-list li b{font-size:14px;color:var(--ink)}
.flaws{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.flaws .fl{display:block;width:100%;padding:0;border:0;border-radius:8px;overflow:hidden;aspect-ratio:3/4;background:var(--field-line);cursor:zoom-in}
.flaws .fl img{display:block;width:100%;height:100%;object-fit:cover}
.flaws .fl:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.flawview{position:fixed;inset:0;z-index:95;background:#15100C;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:60px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.flawview.show{display:flex}
.flawview .bar{position:absolute;left:16px;right:6px;top:calc(8px + env(safe-area-inset-top,0px));display:flex;align-items:center;color:var(--april-cream);font:600 14px var(--font-sans)}
.flawview .x{margin-left:auto;width:44px;height:44px;border:0;background:none;color:var(--april-cream);display:flex;align-items:center;justify-content:center;cursor:pointer;--ic:22px}
.flawview img{max-width:100%;max-height:calc(100% - 60px);border-radius:12px;object-fit:contain}
.flawview .nav{display:flex;gap:10px}
.flawview .nav button{min-height:44px;padding:0 18px;border:0;border-radius:12px;background:var(--april-cream);color:var(--ink);font:600 14px var(--font-sans);cursor:pointer}

/* ---------- ปุ่ม (Spec: สูง 52 รัศมี 12 · hover ดำ → #3A322B · กดอยู่ scale .98 · focus กรอบ 3px ink ห่าง 2px) ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 16px;border:0;border-radius:12px;
  background:var(--btn-primary);color:#FFFFFF;font:600 16px/1.3 var(--font-sans);text-decoration:none;cursor:pointer;
  transition:background-color .15s var(--ease),transform .08s var(--ease)}
.btn:hover:not(:disabled){background:var(--btn-primary-hover)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn:focus-visible,.btn-2:focus-visible,.btn-3:focus-visible,.btn-text:focus-visible,.btn-line:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn-2{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 16px;border:0;border-radius:12px;
  background:var(--btn-secondary);color:var(--ink);font:600 16px/1.3 var(--font-sans);text-decoration:none;cursor:pointer;transition:transform .08s var(--ease)}
.btn-2:active{transform:scale(.98)}
.btn-3{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border:0;border-radius:12px;
  background:var(--surface-card);color:var(--ink);font:600 15px/1.3 var(--font-sans);text-decoration:none;cursor:pointer}
.btn-text{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 8px;border:0;background:none;
  color:var(--ink-2);font:600 14px/1.3 var(--font-sans);text-decoration:none;cursor:pointer;--ic:16px}
.btn-block{width:100%}
/* ปุ่ม LINE: โลโก้ทางการ 30px บนพื้น #06C755 มีเส้นคั่นบางหลังโลโก้ (ห้ามวาดใหม่/ย้อมสี) */
.btn-line{display:flex;align-items:center;width:100%;min-height:52px;padding:0;border:0;border-radius:12px;overflow:hidden;
  background:var(--line-green);color:#FFFFFF;font:600 16px/1.3 var(--font-sans);text-decoration:none;cursor:pointer}
.btn-line:hover{filter:brightness(.96)}
.btn-line .logo{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(0,0,0,.08)}
.btn-line .logo img{width:30px;height:30px}
.btn-line span:last-child{flex:1;text-align:center;padding-right:12px}
.btn-line.sm{min-height:48px;font-size:15px}
.btn-line.sm .logo{width:48px;height:48px}
.btn-line.sm .logo img{width:28px;height:28px}

/* ---------- ป้ายสถานะ: เขียว = เรียบร้อย · น้ำตาล = รอคนอื่น · แดง = ต้องทำ/เรื่องเงิน · ครีม = ปิดแล้ว ---------- */
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;--ic:14px}
.pill.ok{background:var(--ok-tint);color:#286C6A}
.pill.wait{background:var(--warn-tint);color:#8C5229}
.pill.act{background:var(--accent-tint);color:#B03427}
.pill.done{background:var(--page-bg);color:var(--ink-3)}

/* ---------- toast: ยืนยันสั้นๆ ล่างจอ 3 วินาที role="status" ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:8px;background:var(--ink);color:#FFFFFF;border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.45;
  z-index:70;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);--ic:16px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:var(--ok)}
.toast.lifted{bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* ---------- บันทึกรูป QR แบบกดค้าง (iPhone ที่ไม่มีแผ่นแชร์) — saveImage() ใน ui.js ---------- */
.savesheet{position:fixed;inset:0;z-index:90;background:rgba(31,26,23,.72);display:flex;align-items:flex-end;justify-content:center}
.savebox{background:var(--surface-card,#FFFFFF);border-radius:24px 24px 0 0;padding:10px 16px calc(24px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:520px;text-align:center}
.savebox .grip{align-self:center;width:40px;height:5px;border-radius:3px;background:var(--field-line,#E7D9B8)}
.savebox h2{margin:0;font:var(--text-card-title,700 18px/1.35 Anuphan,sans-serif)}
.savebox img{align-self:center;width:280px;max-width:100%;height:auto;max-height:58vh;object-fit:contain;border-radius:16px;outline:2px dashed var(--ink-3,#7A6A58);outline-offset:4px;-webkit-touch-callout:default;user-select:auto}
.savebox .savecap{font:var(--text-small,400 14px/1.5 Anuphan,sans-serif);color:var(--ink-2,#5A4A3A)}
.savebox .btn-text{align-self:center}

/* ---------- กล่องของขวัญ (BoxTile) — ทุกขนาดคำนวณจากขนาดกล่อง --s: โบว์ 28/96, ริบบิ้น 12/96, เลข 24/96, ป้ายมุม 22/96 ---------- */
.tile{--s:96px;position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:var(--s);height:var(--s);padding:0;border:0;border-radius:clamp(8px,calc(var(--s) * .1375),12px);background:var(--zc);
  font-family:var(--font-sans);cursor:default;outline-offset:3px;
  transition:background-color .35s var(--ease),opacity .3s var(--ease),transform .08s var(--ease),outline-color .3s}
.tile .rib{position:absolute;background:rgba(255,255,255,.3)}
.tile .rib.v{top:0;bottom:0;left:50%;width:max(4px,calc(var(--s) * .125));transform:translateX(-50%)}
.tile .rib.h{left:0;right:0;top:50%;height:max(4px,calc(var(--s) * .125));transform:translateY(-50%)}
.tile .bow{position:absolute;top:calc(-1 * max(7px,calc(var(--s) * .1458)));left:50%;width:max(14px,calc(var(--s) * .2917));height:max(14px,calc(var(--s) * .2917));
  transform:translateX(-50%);pointer-events:none;
  filter:drop-shadow(0 0 1px #FFF8EC) drop-shadow(0 0 1px #FFF8EC)}   /* ขอบครีมบาง — โบว์แดงยังเห็นชัดบนกล่องสีแดง (กล่อง Kevin) */
.tile .num{position:relative;font-weight:700;font-size:max(13px,calc(var(--s) * .25));line-height:1;color:#FFFFFF;font-variant-numeric:tabular-nums}
.tile .stamp{position:relative;display:none;width:calc(var(--s) * .4583);height:calc(var(--s) * .4583);margin:calc(var(--s) * -.094) 0;
  background:var(--april-brick);-webkit-mask:url(/icons/sold-stamp.svg) center/contain no-repeat;mask:url(/icons/sold-stamp.svg) center/contain no-repeat}
.tile .badge{position:absolute;right:max(3px,calc(var(--s) * .0625));bottom:max(3px,calc(var(--s) * .0625));display:none;align-items:center;justify-content:center;
  width:max(14px,calc(var(--s) * .229));height:max(14px,calc(var(--s) * .229));border-radius:50%;background:var(--zc)}
.tile .badge i{width:max(9px,calc(var(--s) * .125));height:max(9px,calc(var(--s) * .125));background:#FFFFFF;
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.tile .yours{position:absolute;left:50%;bottom:calc(var(--s) * .083);transform:translateX(-50%);display:none;background:var(--ink);color:var(--april-cream);
  font-size:max(10px,calc(var(--s) * .125));font-weight:600;line-height:1.5;padding:0 8px;border-radius:999px;white-space:nowrap}
.tile.can{cursor:pointer}
.tile.can:active{transform:scale(.96)}
.tile.pressed{transform:scale(.96)}
.tile:focus-visible{outline:3px solid var(--ink)}
.tile.no-bow .bow,.tile.preopen .bow,.tile.sold .bow{display:none}
.tile.reserved,.tile.pending,.tile.lost,.tile.waiting{background:var(--zr)}
.tile.reserved .badge,.tile.pending .badge,.tile.lost .badge,.tile.waiting .badge{display:flex}
.tile.sold{background:var(--zs);gap:calc(var(--s) * .02)}
.tile.sold .rib{background:rgba(255,255,255,.7)}
.tile.sold .num{font-size:max(12px,calc(var(--s) * .208));color:var(--ink-3)}
.tile.sold .stamp{display:block}
.tile.mine{outline:3px solid var(--ink)}
.tile.mine.big .yours{display:block}
.tile.lost{outline:3px solid var(--april-brick)}
.tile.dim{opacity:.32}
.tile.anim-bow .bow{animation:april-bowdrop .24s var(--ease) both;animation-delay:var(--d,0ms)}
.tile.anim-pop .badge{animation:april-pop .2s var(--ease) both}
.tile.anim-stamp .stamp{animation:april-stamp .25s var(--ease) both}
.tile.anim-wiggle .bow{animation:april-wiggle .6s var(--ease) both}
.tile.anim-pulse{animation:april-pulse .3s var(--ease) both}
@keyframes april-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

@keyframes april-bowdrop{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes april-pop{from{transform:scale(.6)}to{transform:scale(1)}}
@keyframes april-stamp{from{opacity:0;transform:rotate(-6deg) scale(1.15)}to{opacity:1;transform:none}}
@keyframes april-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes april-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes april-wiggle{0%,100%{transform:translateX(-50%) rotate(0)}30%{transform:translateX(-50%) rotate(-6deg)}70%{transform:translateX(-50%) rotate(6deg)}}

/* น้องเอพริลรอผล — โยกเบาๆ ±5° แทน spinner (design system: animation แบบนุ่มนวลเท่านั้น) */
.april-rock{animation:april-rock 2.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes april-rock{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* เครื่องตั้งลดการเคลื่อนไหว: ระยะเวลาทุกอันเป็น 0 เปลี่ยนสีทันที น้องเอพริลหยุดนิ่ง (พลุปิดใน JS) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0s !important;animation-iteration-count:1 !important;transition-duration:0s !important}
  .april-rock{animation:none}
}

/*
 * แถบนำทางร่วมทั้งสองเว็บ (Claude Design "April Nav" รอบ 1) — โลโก้ · แท็บ ของจากไลฟ์/กล่องสุ่ม · ปุ่มบัญชี
 * ไม่ติดบนจอ (เลื่อนหายไปพร้อมหน้า ไม่บังตารางกล่อง) · สร้างด้วย mountNav() ใน ui.js · จุดอิฐ = กล่องสุ่มเปิดขายอยู่
 */
.anav{display:block;margin:0;padding:0;background:var(--page-bg);font-family:var(--font-sans)}
.anav nav,.anav img{margin:0}
.anav .in{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:10px 12px}
.anav .logo{display:flex;flex:none;border-radius:999px}
.anav .logo img{width:40px;height:40px;border-radius:999px;object-fit:cover;display:block}
.anav .tabs{flex:1;max-width:340px;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:999px;background:var(--btn-secondary)}
.anav .tabs.t3{grid-template-columns:1fr 1fr 1fr;max-width:420px}
@media (max-width:420px){.anav .tabs.t3 a{gap:0;padding:0 4px;font-size:13px}.anav .tabs.t3 a .ic{display:none}}
/* แบบรอบ G: 4 แท็บ — มือถือเป็นแถบเต็มกว้างใต้โลโก้ (ไอคอน + คำ) · จอกว้างอยู่แถวเดียวกับโลโก้ */
.anav .tabs4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:0 12px 6px;padding:3px;border-radius:16px;background:var(--btn-secondary)}
.anav .tabs4 a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 2px;border-radius:13px;color:var(--ink-2);font:600 12px/1.2 var(--font-sans);text-decoration:none;white-space:nowrap;--ic:18px}
.anav .tabs4 a[aria-current="page"]{background:var(--surface-card);color:var(--ink)}
.anav .tabs4 a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.anav .tabs4 .dot{position:absolute;top:7px;right:calc(50% - 16px)}
.anav .tabs4 .n{position:absolute;top:3px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--april-brick);color:var(--on-ink);display:grid;place-items:center;font:700 11px/1 var(--font-sans)}
.anav .in .tabs4{display:none}
@media (min-width:768px){
  .anav > .tabs4{display:none}
  .anav .in .tabs4{display:grid;flex:1;max-width:560px;margin:0;border-radius:999px}
  .anav .in .tabs4 a{flex-direction:row;gap:6px;min-height:40px;padding:0 4px;border-radius:999px;font-size:14px;--ic:16px}
  .anav .in .tabs4 .dot,.anav .in .tabs4 .n{position:static}
  .anav .in .tabs4 .n{min-width:20px;height:20px;padding:0 6px}
}
.anav .tabs a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 6px;border-radius:999px;color:var(--ink-2);font:600 14px/1.2 var(--font-sans);text-decoration:none;white-space:nowrap;--ic:16px}
.anav .tabs a[aria-current="page"]{background:var(--surface-card);color:var(--ink)}
.anav .tabs a:focus-visible,.anav button:focus-visible,.anav .desk a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.anav .dot{width:7px;height:7px;flex:none;border-radius:999px;background:var(--april-brick)}
.anav .desk{display:none;margin-left:auto;align-items:center;gap:4px}
.anav .acct{flex:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:999px;background:var(--btn-secondary);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.anav .acct-d{display:flex;align-items:center;gap:8px;min-height:44px;max-width:220px;padding:0 14px 0 12px;border:0;border-radius:999px;background:var(--btn-secondary);color:var(--ink);font:600 14px/1.2 var(--font-sans);cursor:pointer;--ic:18px}
.anav .acct-d span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:768px){
  .anav .desk{display:flex}
  .anav .acct{display:none}
}
.amenu{position:fixed;inset:0;z-index:60}
.amenu .scrim{position:absolute;inset:0;background:var(--scrim);display:block}   /* หน้า /buy มี .scrim{display:none} ของแผ่นเลือกกล่อง — ต้องบอกตรงนี้ ไม่งั้นแตะข้างนอกปิดเมนูไม่ได้ */
.amenu .sheet{position:absolute;top:66px;left:12px;right:12px;max-width:380px;margin-left:auto;background:var(--surface-card);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 80px);overflow:auto;animation:amenu-in .18s var(--ease)}
@media (min-width:1064px){.amenu .sheet{right:calc((100vw - 1040px) / 2 + 12px)}}
@keyframes amenu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.amenu .who{display:flex;align-items:center;gap:12px;padding:8px 8px 12px}
.amenu .who .av{width:44px;height:44px;flex:none;border-radius:999px;background:var(--btn-secondary);display:grid;place-items:center;overflow:hidden}
.amenu .who .av img{width:44px;height:44px;object-fit:cover}
.amenu .who .body{display:flex;flex-direction:column;min-width:0}
.amenu .who b{font:700 18px/1.35 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amenu .who small{font-size:13px;line-height:1.5;color:var(--ink-2)}
.amenu .row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--ink);text-decoration:none;font:600 15px/1.3 var(--font-sans);text-align:left;cursor:pointer}
.amenu .row:hover,.amenu .row:focus-visible{background:var(--field-bg);outline:none}
.amenu .row .body{flex:1;display:flex;flex-direction:column;min-width:0}
.amenu .row small{font:400 13px/1.5 var(--font-sans);color:var(--ink-3)}
.amenu .row .chev{--ic:16px;color:var(--ink-3)}
.amenu form{margin:0}

/* ตัวอย่างสลิปใช้ได้/ใช้ไม่ได้ (หน้าจ่ายของไลฟ์ + หน้าจ่ายกล่องสุ่ม — แบบรอบ A/C) */
.examples{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:var(--field-bg)}
.examples > b{font:var(--text-label)}
.exgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ex{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.ex .pic{width:100%;aspect-ratio:3/4;border-radius:8px;background:var(--surface-card);padding:8px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.ex.good .pic{outline:2px solid var(--ok)}
.ex.bad .pic{outline:2px solid var(--accent)}
.ex .pic i{display:block;border-radius:2px;background:var(--field-line)}
.ex .pic i.hd{background:var(--ok);border-radius:3px}
.ex .pic i.amt{background:var(--ink-2)}
.ex .pic i.qr{margin-top:auto;align-self:flex-end;width:26px;height:26px;border-radius:0;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0/6px 6px}
.ex .pic.qronly{display:grid;place-items:center;padding:0}
.ex .pic.qronly i.qr{margin:0;align-self:center;width:60%;height:auto;aspect-ratio:1;background-size:8px 8px}
.ex span{display:flex;gap:3px;align-items:center;font:var(--text-caption);--ic:14px}
.ex.good span{color:var(--ok)}
.ex.bad span{color:var(--accent)}
/* โหมดดูก่อน (8 ต.ค.) — แถบบนสุดเฉพาะเครื่อง staff ที่เข้า /preview */
.pvbar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--april-black, #1A1613);color:var(--april-cream, #F3EADB);font:600 13px/1.4 var(--font-sans);text-decoration:none;--ic:16px}
.pvbar span{flex:1;min-width:0}
.pvbar b{text-decoration:underline}
/* รูปกล่องก่อนส่ง (9 ต.ค.) — การ์ดพัสดุ/กล่องของฉัน */
.packph{display:flex;flex-direction:column;gap:6px}
.packph .hd{display:flex;align-items:center;gap:6px;font:var(--text-small);color:var(--ink-2);--ic:16px}
.packph .row{display:flex;gap:8px}
.packph button{width:72px;height:72px;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--field-bg);cursor:pointer}
.packph img{display:block;width:100%;height:100%;object-fit:cover}
.ppview{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;background:rgba(20,16,13,.92);cursor:pointer}
.ppview img{max-width:100%;max-height:calc(100vh - 120px);border-radius:12px;object-fit:contain}
.ppview .cap{color:#F3EADB;font:var(--text-small)}
.ppview .x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(243,234,219,.15);color:#F3EADB;cursor:pointer;display:grid;place-items:center;--ic:20px}