@import url("https://fonts.googleapis.com/css2?family=Anton&family=Kanit:wght@600;700&family=Courier+Prime:wght@400;700&display=swap"); /* ธีม KV · ไม่มีเน็ต = ตก fallback */
/* Open House app · ธีมงาน BEST BEFORE MART (เหมือนหน้าสมัครเกมเมื่อวาน · Mac 9 ต.ค. "หน้าเหลืองๆ ci ธีมงาน ไม่ต้อง base จ๋า")
   กระดาษครีม + เทปเหลือง + ขอบดำคม + ปุ่มแดง · tokens หลักอยู่ /theme.css
   หัวตะกร้า #ed4724 ตาม PRD: ขาวบนส้มใช้เฉพาะตัวใหญ่/หนา · ตัวเล็กบนส้มใช้ดำ
   .dark = หน้าที่ต้องมืด (demo Skill Booster ที่เลียน JOINSTICK) */
:root{--cart:#ed4724;--cart-ink:#141414;--ok:#1f8a4c;--card:#fff;--card2:var(--paper-2);--fg:var(--ink);--mute:#5a554e;--edge:var(--ink);--field:#fff;color-scheme:light}
.dark{--card:#1d1a19;--card2:#24201f;--fg:var(--paper);--mute:var(--muted);--edge:var(--line);--field:var(--panel);--ok:#3ec27a;color-scheme:dark}
body{font-size:16px;line-height:1.5;min-height:100dvh;background:var(--paper);color:var(--fg)}
body.dark{background:var(--ground)}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px 96px}
h1,h2,h3{font-family:var(--display);margin:0 0 8px;line-height:1.25}
h1{font-size:26px}h2{font-size:21px}h3{font-size:17px}
p{margin:0 0 10px}
.muted{color:var(--mute)}
.small{font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:0;border:1.5px solid var(--edge);background:var(--fg);color:var(--paper);font:700 16px var(--display);cursor:pointer;text-decoration:none}
.dark .btn{background:var(--paper);color:var(--ink);border-color:transparent}
.btn.cart{background:var(--red);border-color:var(--red);color:#fff;font-size:17px}
.btn.ghost{background:transparent;color:var(--fg);border:1.5px solid var(--edge)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.on{background:var(--ok);border-color:var(--ok);color:#fff}
label.f{display:block;margin:12px 0 4px;font-weight:600}
.hint{display:block;font-size:13px;color:var(--mute);margin-top:4px}
input.i,select.i,textarea.i{width:100%;min-height:48px;padding:10px 12px;border-radius:0;border:1.5px solid var(--edge);background:var(--field);color:var(--fg);font-size:16px}
textarea{font:inherit}
.err{color:var(--red);font-size:14px;margin-top:4px;font-weight:600}
.card{background:var(--card);border:1.5px solid var(--edge);padding:14px;margin:10px 0}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1;min-width:0}
.chk{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:15px}
.chk input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--red)}
.pill{display:inline-block;padding:2px 10px;font:600 12px var(--mono);letter-spacing:.04em;background:var(--card2);border:1.5px solid var(--edge)}
.tape{display:inline-block;background:var(--tape);color:var(--ink);font:700 13px var(--mono);letter-spacing:.06em;padding:4px 10px;transform:rotate(-1.5deg)}
/* หัวตะกร้าติดบนทุกหน้า */
.cartbar{position:sticky;top:0;z-index:20;background:var(--cart);color:#fff;display:flex;align-items:center;gap:10px;padding:10px 16px;font-family:var(--display);border-bottom:2px solid var(--ink)}
.cartbar b{font-size:20px}
.cartbar .n{margin-left:auto;background:#fff;color:var(--cart-ink);font:700 18px var(--mono);border:2px solid var(--ink);min-width:44px;text-align:center;padding:2px 10px}
.cartbar.shake .n{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper-2);border-top:2px solid var(--ink);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{min-height:56px;background:none;border:0;color:var(--mute);font:600 13px var(--body);position:relative}
.tabs button.on{color:var(--ink);font-weight:700;box-shadow:inset 0 4px 0 var(--tape)}
.tabs button .dot{position:absolute;top:8px;right:28%;width:9px;height:9px;border-radius:50%;background:var(--cart)}
/* บัตรสมาชิกแดงเอียง (เหมือนหน้าเกมเมื่อวาน) */
.member{background:var(--red);color:#fff;padding:16px;display:flex;gap:14px;align-items:center;transform:rotate(-1deg);margin:14px 0 18px;box-shadow:4px 4px 0 var(--ink)}
.member .k{font:600 12px var(--mono);letter-spacing:.06em}
.member b{display:block;font:700 28px/1.15 var(--display);overflow-wrap:anywhere}
.member .code{display:inline-block;font:700 22px var(--mono);letter-spacing:.25em;background:rgba(0,0,0,.2);padding:2px 10px;margin-top:6px}
.member .qrbox{padding:6px;flex:none}
/* แถวฐาน (เหมือน .st หน้าเกม) */
.st{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--ink);padding:12px 14px;color:var(--ink);text-decoration:none;min-height:56px;margin:8px 0;width:100%;text-align:left;font:inherit;cursor:pointer}
.st b{font:700 16px var(--display);min-width:0}
.st span{font:600 12px var(--mono);color:var(--mute);white-space:nowrap;flex:none}
.st.done{background:var(--paper-2)}.st.done span{color:var(--ok)}
.resume{background:var(--tape);color:var(--ink);border:1.5px solid var(--ink);padding:10px 14px;margin:0 0 12px;font-weight:600}
/* ลูกบาศก์ */
.cube{display:inline-block;width:16px;height:16px;border:1.5px solid var(--ink);box-shadow:inset -3px -3px 0 rgba(0,0,0,.2);vertical-align:middle}
.drop{position:fixed;z-index:40;width:28px;height:28px;border:2px solid var(--ink);box-shadow:inset -5px -5px 0 rgba(0,0,0,.2);pointer-events:none;animation:drop .7s cubic-bezier(.5,0,.75,0) forwards}
@keyframes drop{from{transform:translateY(0) rotate(0)}to{transform:translateY(var(--dy)) rotate(200deg) scale(.5);opacity:.2}}
@media (prefers-reduced-motion:reduce){.drop{display:none}.cartbar.shake .n{animation:none}}
/* การ์ดทักษะ */
.skill{display:flex;flex-direction:column;gap:8px}
.skill .lbl{font-weight:700}
.bk{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bk button{min-height:44px;border:1.5px solid var(--edge);background:var(--field);color:var(--fg);font-size:13px;line-height:1.2;padding:4px}
.bk button.on{color:var(--ink);font-weight:700;border-color:var(--ink)}
.opt{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;text-align:left;padding:10px 14px;margin:6px 0;border:1.5px solid var(--edge);background:var(--field);color:var(--fg);font-size:16px}
.opt.on{background:var(--ink);color:#fff;font-weight:600}
.dark .opt.on{background:var(--paper);color:var(--ink)}
.opt .box{width:22px;height:22px;border:2px solid currentColor;flex:none}
.opt.on .box{background:var(--tape);border-color:var(--tape)}
.poster{display:flex;gap:12px;align-items:center}
.poster .art{width:64px;height:80px;flex:none;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:4px;font:700 10px/1.15 var(--body);color:#141414;overflow-wrap:anywhere;border:1.5px solid var(--ink)}
.banner{background:var(--tape);color:var(--ink);padding:12px 16px;font-weight:600;border-bottom:1.5px solid var(--ink)}
.stamps{display:flex;gap:8px;flex-wrap:wrap}
.stamps span{padding:6px 10px;border:1.5px dashed var(--mute);font-size:13px;color:var(--mute)}
.stamps span.on{border-style:solid;border-color:var(--ok);color:var(--ok)}
.qrbox{background:#fff;color:#141414;padding:10px;display:inline-block;word-break:break-all}
.code4{font:700 40px var(--mono);letter-spacing:.2em}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;font-weight:600;z-index:50;max-width:90vw;text-align:center;border:2px solid var(--tape)}
.hold{position:relative;overflow:hidden}
.hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(0,0,0,.25);transition:none}
.hold.go i{width:100%;transition:width 2s linear}
a{color:inherit}

/* ---------- micro animation (Mac 9 ต.ค. "ใส่ทุกจุดให้เหมาะ") ----------
   กด = ยุบ · เปลี่ยนหน้า = ไล่ขึ้นทีละชิ้น · ได้ของ/แสตมป์ = เด้ง · ทุกอย่าง ≤ 0.45 วิ · reduce motion = ปิดหมด */
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes popIn{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes cardIn{0%{opacity:0;transform:rotate(-6deg) translateY(16px) scale(.94)}70%{transform:rotate(.5deg)}100%{opacity:1;transform:rotate(-1deg)}}
@keyframes tapeIn{from{opacity:0;transform:rotate(-2deg) scaleX(.2);transform-origin:left}to{opacity:1;transform:rotate(-2deg) scaleX(1);transform-origin:left}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
@keyframes stamp{0%{opacity:0;transform:scale(1.8) rotate(-12deg)}60%{opacity:1;transform:scale(.92) rotate(-6deg)}100%{transform:scale(1) rotate(-6deg)}}
@keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.btn,.st,.opt,.bk button,.tabs button,.tile,.keys button,.pick{transition:transform .12s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}
.btn:active,.st:active,.opt:active,.bk button:active,.tile:active,.keys button:active,.pick:active{transform:scale(.97)}
@media (hover:hover){.btn:hover,.st:hover,.tile:hover,.pick:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.dark .btn:hover,.dark .pick:hover{box-shadow:3px 3px 0 var(--red)}}
.enter>*,.ani:not(.member){animation:up .32s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0) * 35ms)}
.member.ani{animation:cardIn .5s cubic-bezier(.2,.8,.3,1.2) both}
.brand.ani,.tape.ani,section .brand{animation:tapeIn .35s ease-out both}
.resume{animation:slideDown .3s ease-out both}
.toast{animation:toastIn .22s ease-out both}
.opt.on .box,.bk button.on{animation:pop .28s ease-out}
.btn.on{animation:pop .3s ease-out}
.st.done.ani span{display:inline-block;animation:stamp .4s ease-out both;animation-delay:calc(var(--i,0) * 35ms + .15s)}
.cartbar .n.bump{animation:pop .35s ease-out}
.tabs button .dot{animation:pulse 1.4s ease-in-out infinite}
.tabs button.on{transition:box-shadow .2s ease}
.ani .cube{animation:popIn .3s ease-out both}
.ani .qrbox svg,.ani.qrbox svg{animation:popIn .35s ease-out both;animation-delay:.15s}
.pending{background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent) 0 0/200% 100%;animation:shimmer 1s linear infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- ร้านค้า = ชั้นวางสินค้า + บินเข้าตะกร้า ---------- */
.shelf-h{display:flex;align-items:center;gap:8px;margin:14px 0 6px;font:700 18px var(--display)}
.shelf{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:4px 16px 16px;margin:0 -16px;border-bottom:10px solid var(--ink);box-shadow:0 6px 0 var(--tape);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shelf::-webkit-scrollbar{display:none}
.pz{flex:0 0 37%;max-width:180px;scroll-snap-align:start;position:relative;background:#fff;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .15s ease}
.pz-hit{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.pz-hit:active{transform:scale(.97)}
.pz img,.pz .ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.pz .ph{display:flex;align-items:flex-end;padding:8px;font:700 14px/1.2 var(--display);color:#141414}
.pz-nm{font:600 12px/1.3 var(--body);padding:5px 7px 7px;min-height:2.6em}
.pz-add{position:absolute;right:5px;bottom:40px;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:700 24px/1 var(--display);pointer-events:none;box-shadow:2px 2px 0 var(--ink)}
.pz.in .pz-add{background:var(--ok)}
.pz.in{outline:3px solid var(--ok);outline-offset:-3px}
.pz-i{position:absolute;left:5px;bottom:42px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);border:1.5px solid var(--ink);font:700 15px var(--mono);cursor:pointer}
.fly{position:fixed;z-index:60;pointer-events:none;object-fit:cover;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform-origin:center}
.sheet-bg{position:fixed;inset:0;z-index:55;background:rgba(20,20,20,.55);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .18s ease-out}
.sheet-bg.out{opacity:0;transition:opacity .18s}
.sheet{background:var(--paper);width:100%;max-width:560px;max-height:88dvh;overflow:auto;border-top:2px solid var(--ink);padding:10px 16px calc(20px + env(safe-area-inset-bottom));animation:sheetUp .28s cubic-bezier(.2,.8,.3,1)}
.sheet img{display:block;width:62%;margin:6px auto 12px;border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.sheet-grab{width:44px;height:5px;border-radius:9px;background:var(--mute);margin:0 auto 10px}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.cart-row{width:100%;font:inherit;color:inherit;cursor:pointer;text-align:left}
.cart-row:active{transform:scale(.98)}
.cart-th{width:44px;height:55px;flex:none;object-fit:cover;border:1.5px solid var(--ink);display:inline-block}
.sheet{max-height:72dvh}
.sheet img{width:40%}

.coach{display:flex;flex-direction:column;gap:4px;background:var(--tape);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:12px 14px;margin:4px 0 14px;animation:pulseIn 1.6s ease-in-out infinite}
.coach b{font:700 18px var(--display)}.coach span{font-size:14px}
.coach.ok{background:#d9f2e3;animation:none}
@keyframes pulseIn{50%{transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){.coach{animation:none}}
/* หน้า sales: ตะกร้าลูกค้าเป็นโปสเตอร์ */
.scart-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}.scart-h h3{margin:0}
.scart-n{margin-left:auto;background:var(--cart);color:#fff;font:700 13px var(--mono);padding:2px 8px;border:1.5px solid var(--ink)}
.scart-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.scart-i{margin:0;background:#fff;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);animation:popIn .35s ease-out both}
.scart-i img,.scart-ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-bottom:1.5px solid var(--ink)}
.scart-ph{display:flex;align-items:center;justify-content:center;text-align:center;font:700 15px var(--display);padding:8px}
.scart-i figcaption{padding:6px 7px 8px;font-size:12px;line-height:1.3}.scart-i b{display:block;margin-top:3px}
.scart-tag{display:inline-block;background:var(--tape);font:700 10px var(--mono);padding:1px 5px}.scart-tag.s{background:var(--ink);color:var(--paper)}
.scart-empty{text-align:center;padding:24px 0;font-size:34px}
@media (prefers-reduced-motion:reduce){.scart-i{animation:none}}

/* =====================================================================
   ธีม KV งาน BEST BEFORE (Mac 14 ต.ค. · canvas PpqaArNrigRPcS4pyQ928A)
   พื้นดำ · ใบเสร็จครีม · ตั๋วเหลือง · ตะกร้าลวดส้ม · ตัวหัว Kanit / BEST BEFORE Anton / ตัวพิมพ์ดีด Courier
   กติกาขอบ: ใบเสร็จ = บนเหลี่ยม ล่างหยัก · ตั๋ว/ปุ่มหลัก = เจาะรูตรงเส้นประ · กล่องอื่นเหลี่ยมเรียบ
   ใช้เฉพาะหน้า Open House ที่ไม่ใช่ .dark (demo Skill Booster คงหน้าตาเลียนแอปเดิม)
   ===================================================================== */
body:not(.dark){--kv-bg:#161514;--kv-cream:#F3EEE4;--kv-yellow:#F1E04B;--kv-orange:#E4572E;--kv-ink:#141414;--kv-grey:#A39C91;
  --cart:var(--kv-orange);--red:var(--kv-orange);--tape:var(--kv-yellow);--ok:var(--kv-yellow);
  --fg:var(--kv-cream);--mute:var(--kv-grey);--edge:var(--kv-cream);--card:var(--kv-cream);--card2:transparent;--field:transparent;
  --kv-mono:'Courier Prime','IBM Plex Sans Thai',ui-monospace,monospace;--kv-head:'Kanit','IBM Plex Sans Thai',sans-serif;
  background:var(--kv-bg);color:var(--kv-cream);color-scheme:dark}
body:not(.dark) h1,body:not(.dark) h2,body:not(.dark) h3{font-family:var(--kv-head);font-weight:700}
/* กระดาษครีมทุกใบ: ข้างในกลับเป็นหมึกดำ */
body:not(.dark) .card,body:not(.dark) .st,body:not(.dark) .opt,body:not(.dark) .sheet,body:not(.dark) .member,body:not(.dark) .qrbox,body:not(.dark) .scart-i{--fg:var(--kv-ink);--mute:#5A554E;--edge:var(--kv-ink);--field:transparent;color:var(--kv-ink)}
body:not(.dark) .card{background:var(--kv-cream);border:0}
body:not(.dark) .card .btn.ghost,body:not(.dark) .modal .box .btn.ghost,body:not(.dark) .sheet .btn.ghost,body:not(.dark) .poll .btn.ghost,body:not(.dark) .qrbox .btn.ghost{color:var(--kv-ink);border-color:var(--kv-ink)} /* ghost บนกระดาษครีม = หมึก (14 ต.ค. ปุ่มยกเลิกใน kiosk หาย) */
/* ปุ่มปกติบนกระดาษครีม = ปุ่มหมึกดำ (ไม่งั้นครีมบนครีมหาย) */
body:not(.dark) .card .btn:not(.ghost):not(.cart):not(.on),body:not(.dark) .poll .btn:not(.ghost):not(.cart):not(.on),body:not(.dark) .sheet .btn:not(.ghost):not(.cart):not(.on),body:not(.dark) .modal .box .btn:not(.ghost):not(.cart):not(.on){background:var(--kv-ink);color:var(--kv-cream)}
/* ใบเสร็จ: ขอบล่างหยัก */
body:not(.dark) .member,body:not(.dark) .rcpt{clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),95% 100%,90% calc(100% - 8px),85% 100%,80% calc(100% - 8px),75% 100%,70% calc(100% - 8px),65% 100%,60% calc(100% - 8px),55% 100%,50% calc(100% - 8px),45% 100%,40% calc(100% - 8px),35% 100%,30% calc(100% - 8px),25% 100%,20% calc(100% - 8px),15% 100%,10% calc(100% - 8px),5% 100%,0 calc(100% - 8px))}
body:not(.dark) .member{background:var(--kv-cream);box-shadow:none;padding-bottom:24px}
body:not(.dark) .member .k{font-family:var(--kv-mono);font-weight:700}
body:not(.dark) .member b{font-family:var(--kv-head)}
body:not(.dark) .member .code{font-family:'Anton',var(--kv-mono);font-weight:400;background:var(--kv-ink);color:var(--kv-cream)}
/* ปุ่ม */
body:not(.dark) .btn{background:var(--kv-cream);color:var(--kv-ink);border:0;font-family:var(--kv-head)}
body:not(.dark) .btn.ghost{background:transparent;color:var(--kv-cream);border:1.5px solid var(--kv-cream)}
body:not(.dark) .btn.on{background:var(--kv-yellow);color:var(--kv-ink)}
/* ปุ่มหลัก = ตั๋วเหลือง: บาร์โค้ดขวา + เส้นประ + รอยเจาะบน-ล่าง */
body:not(.dark) .btn.cart{position:relative;background-color:var(--kv-yellow);color:var(--kv-ink);border:0;border-radius:3px;padding-right:96px;min-height:58px;font-size:19px;
  background-image:repeating-linear-gradient(90deg,var(--kv-ink) 0 2px,transparent 2px 4px,var(--kv-ink) 4px 7px,transparent 7px 9px,var(--kv-ink) 9px 10px,transparent 10px 13px);
  background-size:58px 56%;background-position:right 14px center;background-repeat:no-repeat}
body:not(.dark) .btn.cart::before{content:"";position:absolute;right:84px;top:9px;bottom:9px;border-left:2px dashed var(--kv-ink)}
body:not(.dark) .btn.cart::after{content:"";position:absolute;right:76px;top:-1px;bottom:-1px;width:18px;pointer-events:none;
  background:radial-gradient(circle at 50% 0,var(--kv-bg) 8px,transparent 8.5px),radial-gradient(circle at 50% 100%,var(--kv-bg) 8px,transparent 8.5px)}
body:not(.dark) .card .btn.cart::after,body:not(.dark) .sheet .btn.cart::after{background:radial-gradient(circle at 50% 0,var(--kv-cream) 8px,transparent 8.5px),radial-gradient(circle at 50% 100%,var(--kv-cream) 8px,transparent 8.5px)}
body:not(.dark) .btn.cart:disabled{opacity:.5}
/* ช่องกรอก = เส้นประแบบฟอร์มกระดาษ */
body:not(.dark) input.i,body:not(.dark) select.i,body:not(.dark) textarea.i{background:transparent;border:0;border-bottom:1.5px dashed currentColor;padding:8px 2px;color:inherit}
body:not(.dark) select.i option{color:var(--kv-ink);background:var(--kv-cream)}
body:not(.dark) label.f{font:700 12px var(--kv-mono);letter-spacing:.04em;color:var(--mute);margin-top:14px}
body:not(.dark) .chk input{accent-color:var(--kv-orange)}
/* หัวตะกร้า + แท็บล่าง */
body:not(.dark) .cartbar{background:var(--kv-orange);color:var(--kv-ink);border-bottom:0;font-family:var(--kv-head)}
body:not(.dark) .cartbar .n{background:var(--kv-ink);color:var(--kv-cream);border:0;font-family:var(--kv-mono)}
body:not(.dark) .tabs{background:var(--kv-bg);border-top:2px solid var(--kv-cream)}
body:not(.dark) .tabs button{color:var(--kv-cream);font:700 12px var(--kv-mono)}
body:not(.dark) .tabs button.on{background:var(--kv-orange);color:var(--kv-ink);box-shadow:none}
body:not(.dark) .tabs button .dot{background:var(--kv-yellow)}
/* ป้าย/แถบเหลือง */
body:not(.dark) .brand,body:not(.dark) .tape{background:var(--kv-yellow);color:var(--kv-ink);font-family:var(--kv-mono);font-weight:700}
body:not(.dark) .resume,body:not(.dark) .banner,body:not(.dark) .coach{background:var(--kv-yellow);color:var(--kv-ink);border:0;box-shadow:none}
body:not(.dark) .coach b{font-family:var(--kv-head)}
body:not(.dark) .coach.ok{background:var(--kv-cream)}
body:not(.dark) .pill{font-family:var(--kv-mono);font-weight:700;background:transparent;border:1.5px solid var(--edge);color:inherit}
body:not(.dark) .toast{background:var(--kv-ink);color:var(--kv-cream);border:2px solid var(--kv-yellow);font-family:var(--kv-mono)}
/* แถวฐาน = ป้ายทางเดิน · ผ่านแล้ว = ตราปั๊มส้ม */
body:not(.dark) .st{background:var(--kv-cream);border:0;color:var(--kv-ink)}
body:not(.dark) .st b{font-family:var(--kv-head)}
body:not(.dark) .st span{font-family:var(--kv-mono);font-weight:700;color:#5A554E}
body:not(.dark) .st.done{background:var(--kv-cream)}
body:not(.dark) .st.done span{color:#C9431F;border:2px solid #C9431F;padding:1px 7px;transform:rotate(-6deg)}
body:not(.dark) .stamps span{border-color:var(--kv-grey);color:var(--kv-grey);font-family:var(--kv-mono)}
body:not(.dark) .stamps span.on{border:2px solid var(--kv-orange);color:var(--kv-orange);transform:rotate(-4deg)}
/* โหวต / คัดทักษะ */
body:not(.dark) .opt{background:var(--kv-cream);border:0;border-bottom:1.5px dashed var(--kv-ink);margin:0;font-family:var(--kv-head);font-weight:600}
body:not(.dark) .opt.on{background:var(--kv-yellow);color:var(--kv-ink)}
body:not(.dark) .opt .box{border-radius:0}
body:not(.dark) .opt.on .box{background:var(--kv-ink);border-color:var(--kv-ink)}
body:not(.dark) .bk button{border:1.5px solid var(--kv-ink);font-family:var(--kv-head);font-weight:600;color:var(--kv-ink)}
body:not(.dark) .cube{border-color:var(--kv-ink);box-shadow:none}
/* ร้านค้า = ชั้นวางลวดส้ม + โปสเตอร์ขอบกระดาษ + ป้ายราคาเหลือง */
body:not(.dark) .shelf-h{font:700 13px var(--kv-mono);letter-spacing:.06em;color:var(--kv-yellow);text-transform:uppercase}
body:not(.dark) .shelf{border-bottom:4px solid var(--kv-orange);box-shadow:none;padding-bottom:22px;background:linear-gradient(90deg,var(--kv-orange) 3px,transparent 3px) left bottom/18px 12px repeat-x}
body:not(.dark) .pz{background:transparent;border:0;box-shadow:none}
body:not(.dark) .pz img,body:not(.dark) .pz .ph{border:4px solid var(--kv-cream)}
body:not(.dark) .pz:nth-child(odd) img{transform:rotate(-1deg)}body:not(.dark) .pz:nth-child(even) img{transform:rotate(1deg)}
body:not(.dark) .pz-nm{background:var(--kv-yellow);color:var(--kv-ink);font:700 11px/1.3 var(--kv-mono);margin-top:6px;min-height:0}
body:not(.dark) .pz-add{border-radius:0;background:var(--kv-orange);color:var(--kv-ink);border:0;box-shadow:none}
body:not(.dark) .pz.in{outline:3px solid var(--kv-yellow)}
body:not(.dark) .pz.in .pz-add{background:var(--kv-yellow)}
body:not(.dark) .pz-i{border-radius:0;background:var(--kv-cream);border:0}
body:not(.dark) .fly{border:4px solid var(--kv-cream);box-shadow:none}
body:not(.dark) .sheet{background:var(--kv-cream);border-top:0}
body:not(.dark) .sheet img{border:4px solid var(--kv-ink);box-shadow:none}
body:not(.dark) .cart-th{border:2px solid var(--kv-cream)}
body:not(.dark) .card .cart-th{border-color:var(--kv-ink)}
/* โค้ด/QR */
body:not(.dark) .qrbox{background:var(--kv-cream)}
body:not(.dark) .code4{font-family:'Anton',var(--kv-mono);font-weight:400}
/* sales: ตะกร้าลูกค้าเป็นโปสเตอร์ */
body:not(.dark) .scart-n{background:var(--kv-orange);color:var(--kv-ink);border:0;font-family:var(--kv-mono)}
body:not(.dark) .scart-i{background:var(--kv-cream);border:0;box-shadow:none}
body:not(.dark) .scart-i img,body:not(.dark) .scart-ph{border-bottom:0}
body:not(.dark) .scart-tag{background:var(--kv-yellow);font-family:var(--kv-mono)}body:not(.dark) .scart-tag.s{background:var(--kv-ink);color:var(--kv-cream)}
/* คัดทักษะ = ป้ายสินค้า · checkout = ใบเสร็จ */
body:not(.dark) .skill{padding:14px 16px 12px}
body:not(.dark) .skill .lbl-h{display:flex;justify-content:space-between;gap:8px;font:700 11px var(--kv-mono);letter-spacing:.04em}
body:not(.dark) .skill .lbl{font:700 22px/1.25 var(--kv-head);padding-bottom:10px;border-bottom:1.5px dashed var(--kv-ink)}
body:not(.dark) .skill .bc{display:block;height:22px;margin-top:4px;background:repeating-linear-gradient(90deg,var(--kv-ink) 0 2px,transparent 2px 4px,var(--kv-ink) 4px 7px,transparent 7px 9px,var(--kv-ink) 9px 10px,transparent 10px 13px)}
body:not(.dark) .co{padding:18px 18px 28px;margin:14px 0}
body:not(.dark) .co-h{font:400 32px/1 'Anton',var(--kv-mono);padding-bottom:10px;border-bottom:1.5px dashed var(--kv-ink);margin-bottom:6px}
body:not(.dark) .co-r{display:flex;justify-content:space-between;font:400 14px var(--kv-mono);padding:4px 0}
body:not(.dark) .co-r b{font-weight:700}
body:not(.dark) .co .chk{margin-top:10px;padding-top:10px;border-top:1.5px dashed var(--kv-ink);font-weight:700}
/* ประชุม 14 ต.ค.: แท็บล่าง Home + Shopping · ปุ่ม Back · เมนูป้าย · ยืนยันโหวต · หน้าปิดงาน · + บนโปสเตอร์กดได้ */
body:not(.dark) .tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
body:not(.dark) .back{background:var(--kv-ink);color:var(--kv-cream);border:0;font:700 13px var(--kv-mono);min-height:36px;padding:0 10px;cursor:pointer}
body:not(.dark) .menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 6px}
body:not(.dark) .mt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:112px;padding:12px;border:0;background:var(--kv-cream);color:var(--kv-ink);text-align:left;cursor:pointer;font:inherit}
body:not(.dark) .mt.game{grid-column:1/-1;min-height:0;background:var(--kv-yellow)}body:not(.dark) .mt.on{background:var(--kv-orange)} /* 15 ต.ค.: เกมแถบบน + ช่วง 1–3 เรียงซ้าย→ขวา · ช่วงที่เปิดแล้ว = ส้ม */
body:not(.dark) .mt-k{font:700 10px var(--kv-mono);letter-spacing:.06em}
body:not(.dark) .mt b{font:700 17px/1.2 var(--kv-head)}
body:not(.dark) .mt-s{font-size:12px;line-height:1.35}
body:not(.dark) .mt.lock{background:transparent;color:var(--kv-grey);border:1.5px dashed var(--kv-grey);cursor:not-allowed}
body:not(.dark) .voted{margin-top:12px;padding-bottom:22px}body:not(.dark) .voted textarea{margin-top:8px}
body:not(.dark) .closed{text-align:center;padding:28px 18px 36px;margin-top:20px}
body:not(.dark) .closed-bb{font:400 44px/1 'Anton',var(--kv-mono)}
body:not(.dark) .pz-add{pointer-events:auto;cursor:pointer;font-family:var(--kv-mono)}
@media (hover:hover){body:not(.dark) .btn:hover,body:not(.dark) .st:hover,body:not(.dark) .tile:hover,body:not(.dark) .pick:hover{box-shadow:none;transform:translate(0,-2px)}}

/* แถบชวนเล่น Booster บนสุด Home (14 ต.ค.) · ป้ายส้มเหลี่ยม เต็มกว้าง */
.bst{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 14px;padding:12px 14px;background:#E4572E;color:#141414;border:0;border-radius:0;font:inherit;text-align:left;cursor:pointer}
.bst-k{font:700 11px 'Courier Prime',monospace;letter-spacing:.06em;background:#141414;color:#F1E04B;padding:2px 6px;text-transform:uppercase}
.bst b{flex:1;font:700 17px 'Kanit',sans-serif}
.bst-go{font:700 20px 'Kanit',sans-serif}