/* ui.css — หน้าตาของชุดเครื่องมือกลาง static/ui.js (คิว 0.463c) · ui.js ใส่ <link> ให้เองทุกหน้า · คลาสขึ้นต้น ui- ไม่ชนของเดิม
 * คิว 0.495a โฉมพิกเซล 16 บิต สดใส (PLAN_ui_pixel.md · แทนโทน X ของ 0.491): ชื่อ token เดิม --x-* (หน้าที่แปลงใน 0.491 ได้ผลทันที) · ค่าใหม่ครีม/ม่วงเข้ม/เหลือง
 *   สว่างอย่างเดียว (Park "ดำไม่เวิ้ค") — ไม่มีโหมดมืดแล้ว · ui.theme() คืน light เสมอ
 *   กรอบพิกเซล = box-shadow 4 ทิศ (มุมหักทีละพิกเซล) + เงาแข็งด้านล่าง · ไม่มีมุมโค้ง · กดแล้วยุบ 4px
 *   ฟอนต์: --x-font = Noto Sans Thai (ui.js ใส่ลิงก์ Google Fonts แบบไม่บล็อก — ห้าม @import ที่นี่ เน็ตไม่ออก = หน้าขาว) · Pixelify Sans (--x-logo) เฉพาะโลโก้ WAWA
 *   --x-line = เส้นแบ่งแถว/ขอบบาง (ครีมเข้ม · หน้าเดิมใช้เป็นเส้นแบ่ง) · --x-edge = เส้นขอบพิกเซลม่วงเข้ม (ต่างจากแผนที่ให้ --x-line เป็นม่วงเข้ม: หน้า 74 หน้าใช้ --x-line เป็นเส้นแบ่ง 1px → ม่วงเข้มทั้งหน้าจะรก)
 *   --x-accent = ม่วงเข้มพอให้อ่านเป็นตัวหนังสือ/ลิงก์ (#6A4BE0) · --x-accent-fill = ม่วงพาสเทล #A98BFF พื้นแท็บ/ตัวกรองที่เลือก (ตัวหนังสือบนพื้นนี้ = --x-fg) */
:root{--sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);--x-bg:#FFF6DF;--x-fg:#2B2140;--x-muted:#5A4E70;--x-line:#E6D7B0;--x-edge:#2B2140;--x-soft:#FFFFFF;--x-alt:#FFF9EA;
 --x-accent:#6A4BE0;--x-accent-bg:#ECE4FF;--x-accent-fill:#A98BFF;--x-pri:#FFD23F;--x-sky:#7FD3FF;
 --x-ok:#17724A;--x-ok-bg:#C9F2D9;--x-ok-fill:#1E9E5E;--x-bad:#D7264C;--x-bad-bg:#FFC9D6;--x-bad-fill:#E0324F;--x-warn:#7A5C00;--x-warn-bg:#FFF1B8;
 --x-ov:rgba(43,33,64,.45);--x-field:#2B2140;
 --x-font:'Noto Sans Thai','Leelawadee UI','Sarabun',Tahoma,system-ui,sans-serif;
 --x-logo:'Pixelify Sans','Noto Sans Thai',monospace;
 --x-mono:ui-monospace,Menlo,Consolas,'Noto Sans Thai',monospace;
 --x-r:12px;--x-tap:56px;--x-tap2:52px;--x-tap3:64px;
 --px:0 0 0 1px rgba(43,33,64,.10),0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);   /* คิว 0.826 กรอบพิกเซลดำ → เส้นบาง+เงานุ่ม (ชื่อเดิม · ทุกหน้าที่ใช้ var(--px) เปลี่ยนตาม) */
 --px-flat:0 0 0 1px rgba(43,33,64,.10);
 --px3:0 0 0 1px rgba(43,33,64,.12);
 color-scheme:light;
 /* ชื่อเดิมของ 0.463c ชี้ไปที่ token ใหม่ (โค้ดที่อ้าง --ui-* ยังทำงาน) */
 --ui-ok:var(--x-ok);--ui-ok-bg:var(--x-ok-bg);--ui-warn:var(--x-warn);--ui-warn-bg:var(--x-warn-bg);--ui-bad:var(--x-bad);--ui-bad-bg:var(--x-bad-bg);
 --ui-go:var(--x-accent);--ui-line:var(--x-line);--ui-muted:var(--x-muted);--ui-text:var(--x-fg);--ui-bg:var(--x-bg);--ui-r:var(--x-r);--ui-tap:56px}
html.x-page{--wawa-font:var(--x-font)}
html.x-page body{background:var(--x-bg);color:var(--x-fg);font-size:1rem}
.x-px{stroke:none!important;fill:none}
.x-logo{font-family:var(--x-logo)!important;font-weight:700;letter-spacing:.02em}
.px{box-shadow:var(--px);margin:4px;border-radius:var(--r)}

/* ── แผ่น/ป๊อปอัปกลาง (ui.confirm/prompt/sheet/toast/lightbox) · กรอบพิกเซล ── */
/* ui-ov มีคลาส wpi-ov ด้วย (หน้าเดิมรู้ว่ามีแผ่นเปิด) — wp_chat.js ตั้ง .wpi-ov เป็นแผงแชทเต็มจอ → ใช้ตัวเลือก 2 คลาส (ชนะ) + ตั้งค่าที่ชนให้ครบ */
.ui-ov.wpi-ov{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--x-ov);z-index:2147483000;display:flex;flex-direction:row;align-items:center;justify-content:center;
 padding:20px;margin:0;overflow:auto;overscroll-behavior:contain;font-size:inherit;max-width:none;color:inherit;--wawa-font:var(--x-font)}
.ui-ov.wpi-ov.ui-bottom{align-items:flex-end;padding:0}
.ui-sheet{background:var(--x-soft);color:var(--x-fg);width:100%;max-width:480px;max-height:86vh;max-height:86dvh;overflow:auto;overscroll-behavior:contain;border-radius:var(--r-lg);padding:20px;margin:4px;
 box-shadow:var(--px);box-sizing:border-box}
.ui-bottom .ui-sheet{max-width:640px;margin:0;padding-bottom:calc(20px + env(safe-area-inset-bottom));
 border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-3);border-top:4px solid var(--x-pri)}
.ui-title{font-size:1.3125rem;font-weight:700;margin-bottom:6px}
.ui-msg{font-size:1.0625rem;line-height:1.6;white-space:normal;word-break:break-word}
.ui-fld{display:block;margin:14px 0 6px;font-weight:700;color:var(--x-fg);font-size:1rem}
.ui-req{color:var(--x-bad)}
.ui-sheet input,.ui-sheet textarea{width:100%;box-sizing:border-box;min-height:var(--x-tap);font:inherit;font-size:1.0625rem;background:var(--x-soft);color:var(--x-fg);
 border:1px solid var(--ds-line-2);border-radius:var(--r-sm);padding:8px 12px}
.ui-sheet input:focus,.ui-sheet textarea:focus{outline:none;background:#FFFBEF;border-color:var(--x-accent);box-shadow:0 0 0 3px var(--x-accent-bg)}
.ui-err{color:var(--x-bad);font-weight:700;margin-top:8px}
.ui-acts{display:flex;gap:12px;margin-top:20px;padding:0 4px 8px}
.ui-acts .ui-btn{flex:1}
.ui-btn{min-height:var(--x-tap);padding:0 20px;border-radius:var(--r);border:0;background:var(--x-soft);color:var(--x-fg);font:inherit;font-size:1.0625rem;font-weight:700;cursor:pointer;
 box-shadow:var(--px);margin:4px;transition:transform var(--t),box-shadow var(--t),background-color var(--t),filter var(--t);-webkit-tap-highlight-color:transparent}
.ui-btn:active{transform:scale(.97);filter:brightness(.96)}
.ui-btn.go{background:var(--x-pri);color:var(--x-fg)}
.ui-btn.bad{background:var(--x-bad-fill);color:#fff}
.ui-btn:disabled,.ui-busy{opacity:.6;cursor:wait}
.ui-toasts{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147483001;display:flex;flex-direction:column;gap:14px;width:min(90vw,520px);pointer-events:none;--wawa-font:var(--x-font)}
.ui-toast{white-space:pre-line;pointer-events:auto;background:var(--x-soft);color:var(--x-fg);border-radius:var(--r);padding:12px 16px 12px 20px;font-size:1.0625rem;font-weight:600;
 box-shadow:var(--px);border-left:10px solid var(--x-ok-fill);transition:opacity var(--t-in),transform var(--t-in)}
.ui-toast.warn{border-left-color:var(--x-pri)}.ui-toast.bad{border-left-color:var(--x-bad-fill)}
.ui-toast.out{opacity:0;transform:translateY(8px)}
.ui-lb.wpi-ov{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(43,33,64,.94);z-index:2147483002;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0;margin:0;overflow:hidden;max-width:none}
.ui-lb img{max-width:100vw;max-height:100vh;max-height:100dvh;object-fit:contain}
.ui-lb button{position:absolute;background:var(--x-pri);color:var(--x-fg);border:0;border-radius:999px;width:52px;height:52px;font-size:1.625rem;font-weight:700;cursor:pointer;
 box-shadow:var(--sh-2)}
.ui-lbx{top:14px;right:14px}.ui-lbp{left:10px;top:50%}.ui-lbn{right:10px;top:50%}
.ui-lbc{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:1rem}
.ui-av{width:28px;height:28px;border-radius:var(--r-sm);object-fit:cover;vertical-align:middle;background:var(--x-line);image-rendering:pixelated}
.ui-chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 10px;font-size:.875rem;font-weight:700;background:var(--x-soft);color:var(--x-fg);
 border:1px solid var(--ds-line-2);line-height:1.4}
.ui-chip.ok{background:var(--x-ok-bg);color:var(--x-ok)}.ui-chip.warn{background:var(--x-warn-bg);color:var(--x-warn)}
.ui-chip.bad{background:var(--x-bad-fill);color:#fff}.ui-chip.todo{background:var(--x-accent-bg);color:var(--x-accent)}

/* ── คลาสโฉมพิกเซล .x-* (หน้าที่แปลงใน 0.491 ใช้อยู่แล้ว · ชื่อคลาสเดิม หน้าตาใหม่) ── */
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--x-tap2);padding:0 18px;border-radius:var(--r);margin:4px;
 border:0;background:var(--x-soft);color:var(--x-fg);font:inherit;font-size:1rem;font-weight:700;line-height:1.2;cursor:pointer;box-shadow:var(--px);
 text-decoration:none;white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:transform var(--t),box-shadow var(--t),background-color var(--t),filter var(--t)}
@media (hover:hover) and (pointer:fine){.x-btn:not(:disabled):hover,.x-pill:hover,.x-tab:hover{transform:translateY(-1px) scale(1.05);box-shadow:var(--sh-2)}}
@media (hover:hover){.x-btn:hover{background:#FFFBEF}.x-btn.pri:hover{background:#FFDB66}.x-tab:hover{background:#FFFBEF}.x-table tr:hover td{background:#FFF1C9}}
.x-btn:active{transform:scale(.97);filter:brightness(.96)}
.x-btn.pri{min-height:var(--x-tap);padding:0 22px;font-size:1.0625rem;background:var(--x-pri);color:var(--x-fg)}
.x-btn.acc{background:var(--x-accent-fill);color:var(--x-fg)}
.x-btn.ok{background:var(--x-ok-fill);color:#fff}
.x-btn.bad{background:var(--x-bad-bg);color:var(--x-bad)}
.x-btn.big{min-height:var(--x-tap3);font-size:1.125rem}
.x-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.x-tabs{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:6px 6px 14px;border:0;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.x-tabs::-webkit-scrollbar{display:none}
.x-tab{flex:0 0 auto;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;gap:6px;min-height:var(--x-tap2);padding:0 18px;color:var(--x-fg);font-weight:700;
 font-size:1rem;text-decoration:none;background:var(--x-soft);border:0;border-radius:var(--r);cursor:pointer;position:relative;white-space:nowrap;font-family:inherit;
 box-shadow:var(--px);margin:2px 0;-webkit-tap-highlight-color:transparent}
.x-tab,.x-pill{transition:transform var(--t),box-shadow var(--t),background-color var(--t),filter var(--t)}
.x-tab:active{transform:scale(.97);filter:brightness(.96)}
.x-tab.on,.x-tab[aria-selected=true]{background:var(--x-accent-fill);color:var(--x-fg)}
.x-pill{display:inline-flex;align-items:center;gap:6px;min-height:var(--x-tap2);padding:0 16px;border-radius:999px;border:0;margin:4px;
 background:var(--x-soft);color:var(--x-fg);font:inherit;font-size:1rem;font-weight:700;cursor:pointer;white-space:nowrap;box-sizing:border-box;box-shadow:var(--px);
 -webkit-tap-highlight-color:transparent}
.x-pill:active{transform:scale(.97);filter:brightness(.96)}
.x-pill.on,.x-pill[aria-pressed=true]{background:var(--x-accent-fill);color:var(--x-fg)}
.x-pill .x-n,.x-tab .x-n,.x-btn .x-n{min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--x-bad-fill);color:#fff;font-size:.875rem;font-weight:700;
 display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;box-shadow:var(--px3);margin-left:3px}
.x-card{background:var(--x-soft);color:var(--x-fg);border:0;border-radius:var(--r);padding:16px 18px;box-shadow:var(--px);margin:4px 4px 16px}
.x-card.soft{background:var(--x-alt)}
.x-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;padding:4px 4px 12px}
.x-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--r);overflow:hidden;overflow:clip;font-size:1rem;color:var(--x-fg);background:var(--x-soft);box-shadow:var(--px-flat)}
.x-table th{text-align:left;font-weight:700;font-size:.875rem;color:var(--x-fg);background:var(--x-warn-bg);padding:12px;border-bottom:1px solid var(--ds-line-2);white-space:nowrap}
.x-table td{padding:14px 12px;border-bottom:1px solid var(--ds-line);vertical-align:middle}.x-table tbody tr:last-child td{border-bottom:0}
.x-table tbody tr:nth-child(even) td{background:var(--x-alt)}
.x-table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.x-ic{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.x-ic.sm{width:22px;height:22px}
.x-ic.x-px{stroke:none;image-rendering:pixelated}
.x-muted{color:var(--x-muted)}
.x-mono{font-family:var(--x-mono)!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-weight:600}
.x-num{font-variant-numeric:tabular-nums;font-weight:700}
.x-input{width:100%;box-sizing:border-box;min-height:var(--x-tap);font:inherit;font-size:1.0625rem;background:var(--x-soft);color:var(--x-fg);
 border:1px solid var(--ds-line-2);border-radius:var(--r);padding:0 14px}
.x-input:focus{outline:none;background:#FFFBEF;border-color:var(--x-accent);box-shadow:0 0 0 3px var(--x-accent-bg)}
/* แถบสถานะ/ป้าย */
.x-ok{color:var(--x-ok)}.x-bad{color:var(--x-bad)}
@media (max-width:700px){html.x-page body{font-size:1rem}.x-table{font-size:1rem}.x-table th{font-size:.875rem}}
@media (prefers-reduced-motion:reduce){.ui-toast,.ui-btn,.x-btn,.x-tab,.x-pill{transition:none}
 html.x-page *,html.x-page *::before,html.x-page *::after{animation:none!important}}

/* ── คิว 0.532a โครงร่วมมือถือ/PDA/คอม (PLAN_mobile_ux เฟส A) ── */
/* ข้อ 6 สัมผัส: ไม่หน่วงแตะ 300ms/ไม่ซูมดับเบิลแตะบนปุ่ม · ไม่มีแสงฟ้าบนปุ่มพิกเซล (มีอาการยุบ :active แทน) */
a,button,label,summary,select,input,textarea,[role=button],[onclick]{touch-action:manipulation}
.x-btn,.x-tab,.x-pill,.ui-btn,.btn,.tile,.xapp,.xjob,.xfind{-webkit-tap-highlight-color:transparent}
.tile:active{transform:scale(.97);filter:brightness(.96)}
.xrail,.hubtabs{overscroll-behavior:contain}
/* ui.lockScroll() — หน้าหลังแผ่น/ป๊อปอัปไม่เลื่อนตาม (ui.js ตั้ง top ของ body ให้คงตำแหน่งเดิม) */
html.ui-lock,html.ui-lock body{overflow:hidden}
html.ui-lock body{position:fixed;left:0;right:0;width:100%}
/* ข้อ 8 แถบแท็บเลื่อนข้าง: เงาจางขอบขวา = ยังมีแท็บต่อ (ui.js ใส่ .x-more ตอนเลื่อนได้อีก) */
.x-tabs.x-more,.hubtabs.x-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
/* ข้อ 9 คอม (เมาส์): ปุ่ม/ช่องเตี้ยลง · มือถือ/PDA ขนาดเดิม · กรอบโฟกัสตอนใช้คีย์บอร์ด */
@media (hover:hover) and (pointer:fine){:root{--x-tap:44px;--x-tap2:40px;--x-tap3:52px}}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.x-btn:focus-visible,.x-tab:focus-visible{outline:3px solid var(--x-accent);outline-offset:2px}
/* ข้อ 11 ข้อความยาว (เลขเอกสาร/ชื่อร้าน) ไม่ดันกรอบล้นจอ */
.card,.tile,.x-card,.ui-toast{overflow-wrap:break-word}
td{overflow-wrap:break-word}
.x-scroll.x-tscroll{padding:0 0 4px;margin:0}
/* ข้อ 5 iPhone: ช่องพิมพ์ที่หน้าไม่ได้ตั้งขนาด = 16px (เล็กกว่านี้ Safari ซูมเข้าตอนแตะ) · ช่องที่หน้าตั้งเล็กไว้ ui.js ขยายตอนแตะ */
@supports (-webkit-touch-callout:none){@media (max-width:860px){input,select,textarea{font-size:16px}}}
/* ข้อ 1 Chrome 79–83 (PDA K3Pro) ไม่รู้จัก gap ของ flex (grid ได้) — ui.js ใส่ html.x-nofgap แล้วเว้นด้วย margin แทน */
html.x-nofgap .ui-acts>*+*{margin-left:12px}
html.x-nofgap .ui-toasts>*+*{margin-top:14px}
html.x-nofgap .x-tabs>*+*{margin-left:12px}
html.x-nofgap .x-btn>*+*,html.x-nofgap .x-tab>*+*,html.x-nofgap .x-pill>*+*{margin-left:6px}
html.x-nofgap .ui-chip>*+*{margin-left:4px}
html.x-nofgap .xjobs>*+*{margin-top:16px}
html.x-nofgap .xjob>*+*,html.x-nofgap .xfind>*+*,html.x-nofgap .xhi>*+*{margin-left:12px}
html.x-nofgap .xadm>*{margin-right:12px}
html.x-nofgap .top>*+*{margin-left:6px}
html.x-nofgap .top .me>*+*,html.x-nofgap .top .brand>*+*{margin-left:6px}
html.x-nofgap .xnav a>*+*,html.x-nofgap .xnav button>*+*{margin-top:3px}
html.x-nofgap .xrail>*+*{margin-top:8px}
html.x-nofgap .xrail a>*+*,html.x-nofgap .xrail button>*+*{margin-left:14px}
@media (min-width:1024px) and (max-width:1279px){html.x-nofgap.x-rail .xrail a>*+*,html.x-nofgap.x-rail .xrail button>*+*{margin-left:0;margin-top:2px}}
/* คิว 0.532d 7b แท็บเล็ตแนวนอน/จอพับกาง (กว้าง ≥1024 + จอสัมผัส) = รายการซ้าย · ใบขวา — ตัดสินจากความกว้างหน้าต่าง ไม่ใช่รุ่น/UA/แนวจอ
   .x2w กล่อง · .x2l รายการ · .x2d ใบ · คลาส x2 = มุมมองนี้มีรายการ · dt = เปิดใบอยู่ (จอแคบ/คอมเมาส์: เห็นทีละช่องเหมือนเดิม)
   หมุน/พับ-กาง/Split View = CSS สลับเอง (DOM เดิม ค่าที่กรอก/โฟกัสไม่หาย) · JS ช่วย: static/ui_split.js (uiSplit.wide/on + --x2top) */
.x2w:not(.x2)>.x2l,.x2w.x2.dt>.x2l,.x2w.x2:not(.dt)>.x2d{display:none}
.x2ph{padding:48px 16px;text-align:center;color:var(--x-muted);border:3px dashed var(--x-line);font-size:1rem;margin:10px 4px}
@media (min-width:1024px) and (pointer:coarse){
 .x2w.x2{display:grid;grid-template-columns:minmax(340px,400px) minmax(0,1fr);grid-gap:16px;gap:16px;align-items:start}
 .x2w.x2>.x2l,.x2w.x2>.x2d{display:block!important;min-width:0}
 .x2w.x2>.x2l{position:sticky;top:var(--x2top,0px);max-height:calc(100vh - var(--x2top,0px));max-height:calc(100dvh - var(--x2top,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 4px 24px 0;box-sizing:border-box}
 .x2w.x2>.x2l .x2on{outline:4px solid var(--x-accent);outline-offset:-4px}
}
/* คิว 0.527d คอม ≥1024 (มือถือ/PDA <1024 ไม่โดน · คลาสใส่โดย ui.deskTables ใน ui.js)
   table.x-sth = หัวตาราง (thead) ติดบนตอนเลื่อน · --x-thtop = ใต้แถบติดบนของหน้าเอง (ui.js วัดให้) · พื้นหัวโปร่ง = ui.js เติมสีพื้นหลังที่อยู่ใต้ตาราง
   td/th.x-num = คอลัมน์ตัวเลข (≥80% ของช่องที่มีค่าเป็นตัวเลข) ชิดขวา + ตัวเลขกว้างเท่ากัน · .x-ovv = กรอบห่อตารางที่ไม่ได้เลื่อนจริง ปลดเพื่อให้หัวติดได้
   .x-cg = การ์ดรายการเป็นตาราง 2–3 คอลัมน์ (การ์ดกว้าง ≥420px) · ลูกที่ต้องเต็มแถวใส่ .x-cgw */
@media (min-width:1024px){
 table.x-sth tr.x-sthr>th{position:sticky;top:var(--x-thtop,0px);z-index:2}
 table td.x-num,table th.x-num{text-align:right;font-variant-numeric:tabular-nums}
 .x-ovv{overflow:visible!important}
 .x-cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));grid-gap:12px;gap:12px;align-items:start}
 .x-cg>*{margin-top:0!important;margin-bottom:0!important;min-width:0}
 .x-cg>.x-cgw{grid-column:1/-1}
}
@media print{.x-cg{display:block}table.x-sth tr.x-sthr>th{position:static}.x-ovv{overflow:visible}}   /* คิว 0.527d พิมพ์จากจอคอม = เรียงเดี่ยว/หัวไม่ลอย */

/* ── คิว 0.719 เว้นขอบปลอดภัย (safe area) iPhone จอพับ/แนวนอน/รอยบาก — จอปกติ env = 0 → ไม่เปลี่ยนอะไร ──
 * --sa-t/r/b/l = ตัวแปรกลาง (ค่า fallback 0px ใน env() · เครื่องเก่า/PDA Chrome 79 ที่ไม่รู้ viewport-fit ได้ 0)
 * หน้าพนักงานทั่วไป: body เว้นซ้าย/ขวา (shell wawa_app จัดเองที่ .top/.wrap/.xnav จึงรีเซ็ต body เป็น 0)
 * ปุ่มลอย/แผ่น/ป๊อปอัป: ขยับเข้าจากขอบด้านที่ถูกแถบสถานะบัง */
body{padding-left:var(--sa-l,0px);padding-right:var(--sa-r,0px)}
.ui-ov.wpi-ov{padding-left:calc(20px + var(--sa-l,0px));padding-right:calc(20px + var(--sa-r,0px))}
.ui-ov.wpi-ov.ui-bottom{padding-left:var(--sa-l,0px);padding-right:var(--sa-r,0px)}
.ui-lbx{top:calc(14px + var(--sa-t,0px));right:calc(14px + var(--sa-r,0px))}
.ui-lbp{left:calc(10px + var(--sa-l,0px))}.ui-lbn{right:calc(10px + var(--sa-r,0px))}
.uis-fab{right:calc(14px + var(--sa-r,0px))!important}   /* ปุ่มค้นหาลอย (ui_search.js ฉีด CSS ทีหลัง → !important) */
@media (pointer:coarse),(max-width:1023px){select{min-height:44px}}
@media (pointer:coarse){button,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]){min-height:44px}}   /* คิว 0.813 เป้าแตะ ≥44pt บนจอสัมผัส (iPhone/Duo/iPad/Android) · select เดิม 40 */   /* ui_audit 26 ต.ค. select บน iPhone/iPad สูง 31px → ≥40 (กฎที่เฉพาะกว่า เช่น td select 44 / input,select 52 ยังชนะ) */

/* ── คิว 0.825 ระบบดีไซน์กลาง (claude/DESIGN_SYSTEM.md · Park 28 ต.ค. 10:58 · ธีมผสม: สี/ไอคอนพิกเซลคงเดิม โครงแบบใหม่) ──
 * โทเคน: --r 12 (rounded-xl) · --r-sm 8 (ปุ่มเล็ก/ชิป) · --r-lg 16 (sheet/โมดัล) · --sh-1/--sh-2 เงานุ่ม · --t transition · --ds-line เส้นบาง · --ds-glass กระจกเบลอ
 * ส่วนประกอบ: .ds-btn(.ds-go/.ds-acc/.ds-ghost/.ds-bad/.ds-sm) · .ds-card · .ds-glass · .ds-skel(ui.skel) · .ds-empty(ui.empty) · .ds-table · .ds-pill · ตัวอย่างครบที่ /oho/ui/kit
 * ห้ามตั้ง radius/เงา/สีเองรายหน้า — ใช้ตัวแปรเหล่านี้ · ไล่เปลี่ยนหน้าเดิม = คิว 0.826 (โครงพิกเซล --px เดิมยังอยู่จนกว่าจะไล่ครบ) */
:root{--r:12px;--r-sm:8px;--r-lg:16px;
 --sh-1:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);--sh-2:0 8px 24px rgba(0,0,0,.10);--sh-3:0 16px 40px rgba(0,0,0,.16);
 --t:180ms cubic-bezier(.2,.8,.2,1);--t-in:240ms cubic-bezier(.2,.8,.2,1);
 --ds-line:rgba(15,23,42,.08);--ds-line-2:rgba(15,23,42,.14);--ds-solid:#FFFFFF;--ds-glass:rgba(255,255,255,.65);--ds-glass-0:rgba(255,255,255,.92);
 --ds-skel:#ECE6D6;--ds-skel-hi:#F8F4EA;--ds-hover:rgba(106,75,224,.06)}
/* ปุ่ม: ≥44pt (มือถือ 48) · หลัก = สีเต็ม (เหลืองพิกเซล) · รอง = กระจก+เส้นบาง · โปร่ง · อันตราย */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r);border:1px solid var(--ds-line-2);
 background:var(--ds-glass-0);color:var(--x-fg);font:inherit;font-size:1rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;box-shadow:var(--sh-1);
 transition:transform var(--t),box-shadow var(--t),background-color var(--t),filter var(--t);touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-sizing:border-box;-webkit-user-select:none;user-select:none}
@media (pointer:coarse){.ds-btn{min-height:48px}}
.ds-btn.ds-go{background:var(--x-pri);border-color:rgba(0,0,0,.10);color:var(--x-fg)}
.ds-btn.ds-acc{background:var(--x-accent);border-color:transparent;color:#fff}
.ds-btn.ds-bad{background:var(--x-bad-fill);border-color:transparent;color:#fff}
.ds-btn.ds-ghost{background:transparent;border-color:transparent;box-shadow:none}
.ds-btn.ds-sm{min-height:36px;padding:0 12px;border-radius:var(--r-sm);font-size:.9375rem}
@media (pointer:coarse){.ds-btn.ds-sm{min-height:44px}}
@media (hover:hover) and (pointer:fine){.ds-btn:hover{transform:translateY(-1px) scale(1.05);box-shadow:var(--sh-2)}.ds-btn.ds-ghost:hover{background:var(--ds-hover);box-shadow:none}
 .ds-hov:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--sh-2)}.ds-table tbody tr:hover{background:var(--ds-hover)}}
.ds-btn:active,.ds-hov:active{transform:scale(.97);filter:brightness(.96);box-shadow:var(--sh-1)}
.ds-btn:focus,.ds-hov:focus{outline:3px solid var(--x-accent-fill);outline-offset:2px}.ds-btn:focus:not(:focus-visible),.ds-hov:focus:not(:focus-visible){outline:0}
.ds-btn:focus-visible,.ds-hov:focus-visible{outline:3px solid var(--x-accent-fill);outline-offset:2px}
.ds-btn:disabled,.ds-btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
/* การ์ด/แผง: พื้นเรียบ = ทึบขาว+เส้นบาง+เงานุ่ม · บนพื้นมีลาย/รูป = .ds-glass */
.ds-card{background:var(--ds-solid);border:1px solid var(--ds-line);border-radius:var(--r);box-shadow:var(--sh-1);padding:16px;box-sizing:border-box;transition:transform var(--t),box-shadow var(--t)}
@media (min-width:600px){.ds-card{padding:20px}}
.ds-hov{cursor:pointer;transition:transform var(--t),box-shadow var(--t)}
.ds-glass{background:var(--ds-glass-0);border:1px solid var(--ds-line);border-radius:var(--r)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 .ds-glass{background:var(--ds-glass);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}}
.ds-sheet{border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.ds-h1{font-size:1.375rem;font-weight:700;line-height:1.35;margin:0 0 4px}
.ds-h2{font-size:1rem;font-weight:700;margin:0 0 8px}
.ds-sub{font-size:.8125rem;color:var(--x-muted)}
.ds-num{font-variant-numeric:tabular-nums}
.ds-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:.8125rem;font-weight:700;background:var(--x-accent-bg);color:var(--x-accent);line-height:1.6}
.ds-pill.ds-ok{background:var(--x-ok-bg);color:var(--x-ok)}.ds-pill.ds-bad{background:var(--x-bad-bg);color:var(--x-bad)}.ds-pill.ds-warn{background:var(--x-warn-bg);color:var(--x-warn)}
/* ตาราง แบบ Linear/Stripe: หัวเล็กสีเทา · เส้นคั่นบาง · hover แถว · มือถือ (<600) = การ์ด (td ใส่ data-l="ชื่อคอลัมน์") */
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.ds-table th{font-size:.75rem;font-weight:600;color:var(--x-muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--ds-line-2);white-space:nowrap}
.ds-table td{padding:12px;border-bottom:1px solid var(--ds-line);vertical-align:middle}
.ds-table tr:last-child td{border-bottom:0}
.ds-table .r{text-align:right}
.ds-table tbody tr{transition:background-color var(--t)}
@media (max-width:599px){.ds-table.ds-cards thead{display:none}.ds-table.ds-cards,.ds-table.ds-cards tbody,.ds-table.ds-cards tr,.ds-table.ds-cards td{display:block;width:auto}
 .ds-table.ds-cards tr{background:var(--ds-solid);border:1px solid var(--ds-line);border-radius:var(--r);box-shadow:var(--sh-1);margin:0 0 10px;padding:6px 4px}
 .ds-table.ds-cards td{border:0;padding:6px 12px;display:flex;justify-content:space-between;gap:12px}.ds-table.ds-cards td.r{text-align:right}
 .ds-table.ds-cards td[data-l]::before{content:attr(data-l);color:var(--x-muted);font-size:.8125rem;font-weight:600}}
/* Skeleton Shimmer (ui.skel) แทนตัวหมุนกลม: โผล่หลัง 150ms (โหลดเร็ว = ไม่กระพริบ) · แถบไล่สีวิ่งซ้าย→ขวา 1.2 วิ */
.ds-skel{position:relative;opacity:0;animation:ds-in 1ms linear 150ms forwards}
.ds-skel .sk{display:block;border-radius:var(--r-sm);background:var(--ds-skel);background-image:linear-gradient(90deg,var(--ds-skel) 0,var(--ds-skel-hi) 40%,var(--ds-skel) 80%);
 background-size:200% 100%;background-repeat:no-repeat;animation:ds-shim 1.2s linear infinite}
.ds-skel .sk+.sk{margin-top:8px}
.ds-skel .sk.sk-t{height:14px}.ds-skel .sk.sk-t2{height:12px;width:60%}.ds-skel .sk.sk-h{height:20px;width:45%}.ds-skel .sk.sk-b{height:44px;border-radius:var(--r)}
.ds-skel .sk.sk-av{width:40px;height:40px;border-radius:var(--r);flex:0 0 40px;margin-right:12px}.ds-skel .sk.sk-img{height:0;padding-top:62%;border-radius:var(--r)}
.ds-skel .sk-row{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--ds-line)}.ds-skel .sk-row:last-child{border-bottom:0}
.ds-skel .sk-row .sk-col{flex:1;min-width:0}.ds-skel .sk-row .sk-col .sk+.sk{margin-top:8px}
.ds-skel .sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ds-skel .sk-kv{display:flex;justify-content:space-between;padding:10px 0}.ds-skel .sk-kv .sk{margin:0}
.ds-skel .sk-tr{display:flex;padding:12px 0;border-bottom:1px solid var(--ds-line)}.ds-skel .sk-tr .sk{flex:1;margin:0 12px 0 0;height:14px}.ds-skel .sk-tr .sk:last-child{margin-right:0}
@keyframes ds-shim{0%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes ds-in{to{opacity:1}}
/* Empty state (ui.empty): ค้นไม่เจอ/ไม่มีข้อมูล/ออฟไลน์/ผิดพลาด — กลางพื้นที่ · ไอคอนพิกเซลใหญ่ · หัวข้อ · คำแนะนำ · ปุ่มไปต่อ 1 ปุ่ม */
.ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;min-height:220px;box-sizing:border-box;animation:ds-fade var(--t-in) both}
.ds-empty .ic{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-lg);background:var(--x-accent-bg);margin-bottom:16px;font-size:44px;line-height:1}
.ds-empty .ic svg{width:56px;height:56px}
.ds-empty.ds-bad .ic{background:var(--x-bad-bg)}.ds-empty.ds-warn .ic{background:var(--x-warn-bg)}
.ds-empty .tt{font-size:1.0625rem;font-weight:700;margin:0 0 4px}
.ds-empty .hn{font-size:.9375rem;color:var(--x-muted);max-width:36em;margin:0;line-height:1.6}
.ds-empty .ds-btn{margin-top:18px}
td>.ds-empty,li>.ds-empty,.ds-empty.ds-sm{min-height:0;padding:20px 12px}td>.ds-empty .ic,.ds-empty.ds-sm .ic{width:56px;height:56px;font-size:30px;margin-bottom:10px}td>.ds-empty .ic svg,.ds-empty.ds-sm .ic svg{width:40px;height:40px}   /* คิว 0.826 ในเซลล์ตาราง/รายการ = เตี้ยลง */
@keyframes ds-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ds-btn,.ds-card,.ds-hov,.ds-table tbody tr{transition:none}.ds-btn:hover,.ds-hov:hover{transform:none}
 .ds-skel .sk{animation:none;background-image:none}.ds-empty{animation:none}}

/* ── คิว 0.841 รอบจอมือถือ (ตัวช่วยกลาง · ใช้ร่วมทุกหน้า) ──
 * table.x-mcards = จอ ≤599px แถวละการ์ด · ป้ายหัวคอลัมน์ทางซ้ายของแต่ละช่อง (ui.mcards ใส่ data-l จากหัวตารางให้เอง) · จอ ≥600 = ตารางเดิมทุกอย่าง
 *   td.x-mfull = เต็มแถวไม่มีป้าย (เช่น ปุ่ม/หมายเหตุยาว) · td.x-mhide = ซ่อนบนมือถือ (คอลัมน์รอง) · tr.x-mch = แถวหัวที่เป็น th ใน tbody (ui.js ใส่)
 *   ป้ายลอยซ้าย (float) ไม่ใช้ flex — ช่องที่มีหลายชิ้น (ชื่อ+รหัส) ไม่แตกเป็นคอลัมน์ · td.x-mempty = ช่องว่างซ่อน (ui.js) */
@media (max-width:599px){
 table.x-mcards,table.x-mcards>tbody,table.x-mcards>tbody>tr,table.x-mcards>tbody>tr>td,table.x-mcards>tr,table.x-mcards>tr>td{display:block;width:auto!important;min-width:0!important}
 table.x-mcards>thead,table.x-mcards tr.x-mch,table.x-mcards td.x-mhide,table.x-mcards th.x-mhide{display:none!important}
 table.x-mcards>tbody>tr,table.x-mcards>tr{background:var(--ds-solid,#fff);border:1px solid var(--ds-line,rgba(43,33,64,.10));border-radius:var(--r,12px);box-shadow:var(--sh-1);margin:0 0 10px;padding:6px 0}
 table.x-mcards>tbody>tr>td,table.x-mcards>tr>td{display:block;text-align:right;border:0!important;padding:6px 14px!important;font-size:.9375rem;line-height:1.45;white-space:normal!important;background:none!important;overflow:hidden}
 table.x-mcards td[data-l]:not([data-l=""])::before{content:attr(data-l);float:left;max-width:45%;margin-right:12px;text-align:left;color:var(--x-muted);font-size:.8125rem;font-weight:600;line-height:1.7}
 table.x-mcards td[data-l=""],table.x-mcards td.x-mfull{text-align:left}
 table.x-mcards>tbody>tr>td:first-child,table.x-mcards>tr>td:first-child{text-align:left;font-weight:700;padding-top:10px!important}
 table.x-mcards>tbody>tr>td:first-child::before,table.x-mcards>tr>td:first-child::before{display:none}
 table.x-mcards td.x-mempty{display:none}
}
/* เป้าแตะ: ปุ่มไอคอนตัวเดียว (↻ ✕ ค้น) กว้าง ≥44 · ปุ่มเมนูหัว ≥44 (ความสูงมีกฎ 0.813 แล้ว) */
@media (pointer:coarse){button,[role=button],[role=tab]{min-width:44px}a.nav{min-width:44px}}