:root{--ฟ้าเข้ม:#1f4ed8;--ฟ้า:#2f6bff;--ฟ้าอ่อน:#dbe6fb;--พื้น:#e8eefb;--หมึก:#16213a;--จาง:#5b6b8c;--เส้น:#dde5f3;--เขียว:#0f9d66;--ส้ม:#e08a1e;--แดง:#d8453f}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:IBM Plex Sans Thai,system-ui,sans-serif;color:var(--หมึก);background:var(--พื้น);overflow:hidden}#ฉาก{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.แผง{position:fixed;z-index:5;background:#ffffffd1;backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 2px 4px #1020400a,0 18px 40px -18px #10204059}.บนซ้าย{top:16px;left:16px;display:flex;gap:10px;padding:10px 12px;flex-wrap:wrap;max-width:min(620px,calc(100vw - 32px))}.ขวา{top:16px;right:16px;width:320px;max-height:calc(100vh - 150px);overflow:auto;padding:14px}.ล่างซ้าย{left:16px;bottom:16px;padding:10px 12px;max-width:min(680px,calc(100vw - 32px))}.ตัวเลข{min-width:116px}.ตัวเลข .ป้าย{font-size:11px;color:var(--จาง);line-height:1.3}.ตัวเลข .ค่า{font-size:22px;font-weight:700;letter-spacing:-.4px}.ตัวเลข .ค่า.ไม่รู้{font-size:13px;font-weight:600;color:var(--จาง)}.ตัวเลข .รอง{font-size:10.5px;color:var(--จาง)}.หัวแผง{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ฟ้าเข้ม)}.ชื่อแร็ค{font-size:17px;font-weight:700;margin:2px 0 8px;line-height:1.25}.แถวค่า{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:5px 0;border-top:1px solid var(--เส้น)}.แถวค่า .ขวาสุด{font-weight:600}.รายการ{margin-top:10px}.รายการ .หัว{font-size:11px;font-weight:700;color:var(--จาง);display:flex;justify-content:space-between;margin-bottom:4px}.แถวของ{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--เส้น);font-size:12.5px;cursor:pointer}.แถวของ:hover{background:#2f6bff0f}.แถวของ .กล่องสี{width:18px;height:18px;border-radius:5px;flex:0 0 auto}.แถวของ .ชื่อ{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ป้ายสถานะ{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}.มีของ{background:#dff5ea;color:var(--เขียว)}.หมด,.ติดลบ{background:#fdeceb;color:var(--แดง)}.ไม่รู้{background:#eef1f6;color:var(--จาง)}.ปุ่มหมวด{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.ปุ่มหมวด button{font:inherit;font-size:12px;font-weight:600;color:var(--หมึก);background:#fff;border:1px solid var(--เส้น);border-radius:999px;padding:6px 12px;cursor:pointer}.ปุ่มหมวด button:hover{border-color:var(--ฟ้า);color:var(--ฟ้าเข้ม)}.ปุ่มหมวด button.เปิดอยู่{background:var(--ฟ้าเข้ม);border-color:var(--ฟ้าเข้ม);color:#fff}.ปุ่มกล้อง{position:fixed;z-index:5;right:352px;top:16px;display:flex;flex-direction:column;gap:6px}.ปุ่มกล้อง button{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.9);background:#ffffffd1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:15px;color:var(--หมึก);cursor:pointer;line-height:1;box-shadow:0 2px 10px -4px #10204066}.ปุ่มกล้อง button:hover{background:#fff;color:var(--ฟ้าเข้ม)}.สถานะ{position:fixed;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);background:#fffffff0;border-radius:14px;padding:16px 20px;font-size:13.5px;max-width:min(520px,calc(100vw - 40px));line-height:1.6;box-shadow:0 20px 50px -20px #10204080;display:none}.สถานะ.โชว์{display:block}.สถานะ b{color:var(--ฟ้าเข้ม)}.สถานะ .เตือน{color:var(--แดง)}.หมายเหตุ{font-size:10.5px;color:var(--จาง);margin-top:6px;line-height:1.5}@media (max-width:860px){.ขวา{top:auto;bottom:16px;right:16px;left:16px;width:auto;max-height:42vh}.ล่างซ้าย{bottom:auto;top:96px;left:16px;right:16px;max-width:none}.ปุ่มกล้อง{right:16px;top:auto;bottom:calc(42vh + 28px);flex-direction:row}.บนซ้าย{max-width:calc(100vw - 32px)}}.แถบบน{position:fixed;z-index:6;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:12px;padding:0 14px;background:#ffffffc7;backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid rgba(255,255,255,.9);box-shadow:0 6px 20px -16px #10204080}.แถบบน .โลโก้{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}.แถบบน .ตรา{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--ฟ้า),var(--ฟ้าเข้ม));display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}.แถบบน .ชื่อโกดัง{font-size:12.5px;color:var(--จาง);border-left:1px solid var(--เส้น);padding-left:12px}.แถบบน .ชื่อโกดัง b{color:var(--หมึก)}.แถบบน .ขวาสุด{margin-left:auto;display:flex;align-items:center;gap:10px}.แถบบน .นาฬิกา{font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px;background:#e8f3ec;color:var(--เขียว);border-radius:999px;padding:4px 12px}.บนซ้าย{top:64px}.ขวา{top:64px;max-height:calc(100vh - 200px)}.ปุ่มกล้อง{top:64px}@media (max-width:860px){.แถบบน .ชื่อโกดัง{display:none}.ขวา{top:auto}.ล่างซ้าย{top:140px}.ปุ่มกล้อง{top:auto}}
