/* ─────────────────────────────────────────────────────────────
   StockT — ระบบออกแบบใหม่ (แนว iOS Health โหมดมืด)
   ไฟล์นี้เป็น mockup เท่านั้น ยังไม่ได้แตะของจริง
   ───────────────────────────────────────────────────────────── */
@font-face { font-family:'Sukhumvit Set'; font-weight:400; font-display:swap; unicode-range:U+0E00-0E7F; src:url('fonts/SukhumvitSet-Text.woff2') format('woff2'); }
@font-face { font-family:'Sukhumvit Set'; font-weight:500; font-display:swap; unicode-range:U+0E00-0E7F; src:url('fonts/SukhumvitSet-Medium.woff2') format('woff2'); }
@font-face { font-family:'Sukhumvit Set'; font-weight:600; font-display:swap; unicode-range:U+0E00-0E7F; src:url('fonts/SukhumvitSet-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Sukhumvit Set'; font-weight:700; font-display:swap; unicode-range:U+0E00-0E7F; src:url('fonts/SukhumvitSet-Bold.woff2') format('woff2'); }

:root {
  /* พื้นผิว */
  --bg:#000;              /* พื้นหลังหน้า — ดำสนิท */
  --card:#1c1c1e;         /* การ์ด */
  --card-2:#2c2c2e;       /* ของที่อยู่บนการ์ดอีกชั้น (ปุ่ม/ชิป) */
  --line:#38383a;         /* เส้นคั่นในลิสต์ */
  /* ตัวอักษร */
  --ink:#fff;
  --ink-2:#ebebf5;
  --muted:#8e8e93;
  /* สีสื่อความหมาย (ชุดเดียวกับ iOS โหมดมืด) */
  --tint:#0a84ff; --green:#30d158; --red:#ff453a; --orange:#ff9f0a;
  --purple:#bf5af2; --pink:#ff375f; --teal:#40c8e0; --yellow:#ffd60a;
  /* มุมโค้ง */
  --r-card:18px; --r-inner:12px; --r-pill:999px;
  /* ระยะห่าง 5 ขั้น (คงสเกลเดิมของแอป) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
}

html[data-theme="light"] {
  --bg:#f2f2f7; --card:#fff; --card-2:#f2f2f7; --line:#e3e3e8;
  --ink:#000; --ink-2:#1c1c1e; --muted:#8a8a8e;
  --tint:#007aff; --green:#34c759; --red:#ff3b30; --orange:#ff9500;
  --purple:#af52de; --pink:#ff2d55; --teal:#32ade6; --yellow:#ffcc00;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
button, input, select, textarea { font-family:inherit; }   /* ปุ่ม/ช่องกรอกไม่รับฟอนต์จาก body เอง */
body {
  margin:0; background:var(--bg); color:var(--ink);
  /* ฟอนต์ Apple ทั้งแอป: ไทย = Sukhumvit Set (ฝังไว้ เฉพาะช่วงอักษรไทย) · อังกฤษ/ตัวเลข = SF (ระบบ iPhone/Mac) */
  font-family:'Sukhumvit Set',-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  font-size:17px; line-height:1.45;
  padding:0 var(--s4) 132px;
}

/* ── หัวจอ ─────────────────────────────────────────────── */
.statusbar { display:flex; justify-content:space-between; padding:14px 4px 2px; font-size:15px; font-weight:600; opacity:.9; }
.pagehead { display:flex; align-items:flex-start; justify-content:space-between; padding:14px 0 var(--s4); }
.pagetitle { font-size:32px; font-weight:700; letter-spacing:-.5px; margin:0; }
.pagesub { color:var(--muted); font-size:14px; margin:2px 0 0; }
.circ-btn {
  width:38px; height:38px; border-radius:var(--r-pill); border:0; flex:none;
  background:var(--card); color:var(--ink-2); font-size:19px;
  display:grid; place-items:center;
}
.head-actions { display:flex; gap:var(--s2); }

/* ── การ์ดพื้นฐาน ───────────────────────────────────────── */
.card { background:var(--card); border-radius:var(--r-card); padding:var(--s4); margin-bottom:var(--s3); }
.card.tap { position:relative; }
.card-head { display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s3); }
.card-head .ic { font-size:18px; }
.card-head .t { font-weight:600; font-size:16px; }
.card-head .meta { margin-left:auto; color:var(--muted); font-size:14px; display:flex; align-items:center; gap:6px; }
.card-head .meta i { font-size:15px; opacity:.6; }

/* หัวข้อกลุ่ม (ตัวหนาใหญ่ ลอยอยู่บนพื้นดำ ไม่อยู่ในการ์ด) */
.section { display:flex; align-items:baseline; justify-content:space-between; margin:var(--s5) 0 var(--s3); }
.section h2 { font-size:22px; font-weight:700; margin:0; letter-spacing:-.3px; }
.section .note { color:var(--muted); font-size:13px; font-weight:400; }
.section a { color:var(--tint); font-size:16px; text-decoration:none; font-weight:500; }

/* ── ตัวเลขเด่น ─────────────────────────────────────────── */
.big { font-size:38px; font-weight:700; letter-spacing:-1px; line-height:1.1; }
.big small { font-size:16px; font-weight:500; color:var(--muted); margin-left:4px; letter-spacing:0; }
.kpi-label { color:var(--muted); font-size:14px; }

/* ชิปเปรียบเทียบ */
.chip { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600;
        padding:4px 10px; border-radius:var(--r-pill); background:var(--card-2); color:var(--ink-2); }
.chip.up { color:var(--green); } .chip.down { color:var(--red); }

/* ── กริดตัวเลขย่อยในการ์ด (Move / Exercise / Stand) ──────── */
.minirow { display:flex; gap:0; margin-top:var(--s4); }
.minirow > div { flex:1; min-width:0; padding:0 var(--s2); border-left:1px solid var(--line); }
.minirow > div:first-child { padding-left:0; border-left:0; }
.minirow .l { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.minirow .v { font-size:17px; font-weight:700; letter-spacing:-.3px; white-space:nowrap; }
.minirow .v small { font-size:12px; color:var(--muted); font-weight:500; }

/* ── การ์ดตัวเลข 2 ใบต่อแถว ─────────────────────────────── */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.grid2 .card { margin:0; }

/* ── ลิสต์แบบ iOS: หลายแถวในการ์ดใบเดียว เส้นคั่นเยื้อง ──── */
.list { background:var(--card); border-radius:var(--r-card); overflow:hidden; margin-bottom:var(--s3); }
.row { display:flex; align-items:center; gap:var(--s3); padding:13px var(--s4); position:relative; min-height:52px; }
.row + .row::before { content:''; position:absolute; left:var(--s4); right:0; top:0; height:1px; background:var(--line); }
.row.has-ic + .row.has-ic::before { left:64px; }   /* เยื้องให้ตรงกับข้อความ ไม่ลากใต้ไอคอน */
.row .ic { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:17px; color:#fff; flex:none; }
.row .txt { flex:1; min-width:0; }
.row .name { font-size:17px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .sub { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .val { font-size:17px; font-weight:600; text-align:right; white-space:nowrap; }
.row .val .sub { font-size:12px; font-weight:400; }
.row .go { color:var(--muted); opacity:.5; font-size:15px; }
.row.link .name { color:var(--tint); }
/* ลิสต์ยาวในหน้า (แชท 200 ห้อง / ขายแล้ว / ของขาด / ซ่อม): แถวที่อยู่นอกจอข้ามการคำนวณเลย์เอาต์ตอนเปิดหน้า
   — กลับเข้าหน้าแชท 1.3 วิ → ~0.3 วิ (มือถือช้า) · เบราว์เซอร์ที่ไม่รู้จัก content-visibility = เหมือนเดิม */
#ch-list .list > .row, #p-miss .list > .row, #pos-sold-log .list > .row, #rp-list .list > .row { content-visibility:auto; contain-intrinsic-size:auto 72px; }

/* ── แถบเลือกแบบแคปซูล (D W M 6M Y) ─────────────────────── */
.seg { display:flex; background:var(--card); border-radius:var(--r-pill); padding:4px; margin-bottom:var(--s4); }
.seg button { flex:1; border:0; background:transparent; color:var(--ink-2); font:inherit; font-size:16px;
              font-weight:500; padding:11px 6px; border-radius:var(--r-pill); white-space:nowrap; }
.seg button.on { background:transparent; font-weight:600; }
html[data-theme="light"] .seg { background:#e9e9ef; }
/* ตัวชี้ของแถบแท็บย่อย — ใช้กลไกเดียวกับลูกกลมของเมนูล่าง (ลากได้ ตามนิ้วช้า ๆ กดแล้วโต) */
.seg { position:relative; }
/* ต้องใส่ที่ปุ่มด้วย ไม่ใช่แค่ตัวแถบ — touch-action ไม่สืบทอดลงลูก ถ้าไม่ใส่ iOS จะยกเลิกการลากทิ้ง */
.seg, .seg * { touch-action:none; }
.seg button { position:relative; z-index:1; }
.seg .seg-ind {
  position:absolute; top:4px; bottom:4px; left:0; width:0; z-index:0;
  border-radius:var(--r-pill); background:var(--card-2); box-shadow:0 1px 3px rgba(0,0,0,.4);
  transform-origin:center center; will-change:transform,width;
}
html[data-theme="light"] .seg .seg-ind { background:#fff; }

/* แท็บเยอะเกิน 5 อัน = เลื่อนแนวนอนแทนที่จะบีบจนอ่านไม่ออก */
.seg.scroll { overflow:visible; }                       /* ปกติไม่ตัด ตัวชี้จะได้โผล่พ้นขอบได้ */
/* แท็บกว้างเกินจอ: ย่อตัวหนังสือให้พอดีก่อน ดีกว่าปล่อยให้เลื่อนแล้วโดนตัดตัวชี้ */
.seg.tight button { font-size:14px; padding:9px 3px; }
.seg.tighter button { font-size:12.5px; padding:9px 1px; letter-spacing:-.2px; }
.seg.tight.scroll button { padding:9px 10px; }
.seg.scroll.clip { overflow-x:auto; scrollbar-width:none; }  /* ตัดเฉพาะตอนแท็บล้นจริง (ต้องเลื่อน) */
.seg.scroll button { flex:none; padding:11px 16px; }

/* ── ปุ่ม ───────────────────────────────────────────────── */
.btn { border:0; font:inherit; font-size:16px; font-weight:600; padding:11px 18px; border-radius:var(--r-pill);
       background:var(--card-2); color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.btn.primary { background:var(--tint); color:#fff; }
.btn.plain { background:transparent; color:var(--tint); padding:6px 2px; }
.btn.block { width:100%; justify-content:center; }

/* ── ช่องค้นหา ──────────────────────────────────────────── */
.search { display:flex; align-items:center; gap:var(--s2); background:var(--card); border-radius:var(--r-pill);
          padding:9px var(--s4); color:var(--muted); margin-bottom:var(--s3); font-size:16px; }
.search input { flex:1; border:0; background:transparent; color:var(--ink); font:inherit; outline:none; }

/* ── ชิปตัวกรอง ─────────────────────────────────────────── */
.chips { display:flex; gap:var(--s2); overflow-x:auto; scrollbar-width:none; margin-bottom:var(--s3); }
.chips .c { flex:none; padding:7px 14px; border-radius:var(--r-pill); background:var(--card); color:var(--ink-2); font-size:15px; }
.chips .c.on { background:var(--tint); color:#fff; font-weight:600; }

/* ── ป้ายสถานะ ──────────────────────────────────────────── */
.badge { font-size:12px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); display:inline-block; }
.badge.in { background:rgba(48,209,88,.16); color:var(--green); }
.badge.sold { background:rgba(142,142,147,.2); color:var(--muted); }
.badge.warn { background:rgba(255,159,10,.16); color:var(--orange); }
.badge.late { background:rgba(255,69,58,.16); color:var(--red); }

/* ── กราฟแท่ง ───────────────────────────────────────────── */
.chart { display:flex; align-items:flex-end; gap:6px; height:132px; margin-top:var(--s3); }
.chart .b { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.chart .bar { border-radius:3px 3px 0 0; background:var(--orange); }
.chart .bar.b2 { background:var(--tint); }
.chart-x { display:flex; gap:6px; margin-top:6px; }
.chart-x span { flex:1; text-align:center; font-size:11px; color:var(--muted); }
.chart-legend { display:flex; gap:var(--s4); font-size:13px; color:var(--muted); margin-top:var(--s3); }
.chart-legend i { width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; }

/* ── เมนูล่างลอย: 5 ปุ่มหลัก + ปุ่มกลม "เพิ่มเติม" ────────── */
.tabbar { position:fixed; left:0; right:0; bottom:22px; display:flex;
          padding:0 var(--s4); justify-content:center; }
/* กล่องครอบแถบ+ปุ่มกลม — กดค้างแล้วขยายทั้งก้อน (ไอคอน ตัวหนังสือ ลูกกลม โตตามหมด) */
.tabwrap { display:flex; align-items:center; gap:var(--s3); }
.tabbar .pill { display:flex; gap:2px; border-radius:var(--r-pill); padding:5px; }
/* พื้นหลังของแถบอยู่ใน ::before ต่างหาก จะได้ยืด/หดสู้แรงลูกกลมได้ โดยไอคอนกับตัวหนังสือไม่ถูกดึงตาม */
.tabbar .pill::before {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:rgba(44,44,46,.82); backdrop-filter:blur(22px) saturate(180%);
  transform-origin:center center;   /* จุดหมุนกลางเสมอ กดค้างแล้วแถบจะ "โตขึ้นอยู่กับที่" ไม่เลื่อนไปข้าง */
}
html[data-theme="light"] .tabbar .pill::before { background:rgba(255,255,255,.82); box-shadow:0 6px 22px rgba(0,0,0,.14); }
.tabbar .pill button { border:0; background:transparent; color:var(--muted); font:inherit; font-size:10px;
                       padding:6px 10px 5px; border-radius:var(--r-pill); display:grid; justify-items:center; gap:1px; }
.tabbar .pill button i { font-size:20px; }
.tabbar .pill button.on { background:transparent; color:var(--tint); }

/* ── แคปซูลบอกแท็บที่เลือก: ลากนิ้วแล้วยืดตามนิ้วได้ (แบบแถบล่าง iOS) ──────
   ตัวแคปซูลเป็น element แยกวางอยู่หลังปุ่ม ขยับ/ยืดด้วย transform+width
   ไม่ใช่พื้นหลังของปุ่ม — พื้นหลังของปุ่มขยับตามนิ้วไม่ได้ */
.tabbar .pill { position:relative; transform:scale(var(--box-g, 1)); transform-origin:center center; }
.tabbar .pill button { position:relative; z-index:2; transition:color .18s ease; }
.tab-ind {
  position:absolute; top:50%; left:0; width:44px; height:44px; z-index:1;
  border-radius:50%; background:rgba(120,120,128,.36);
  transform:translate(0,-50%); transform-origin:center center;
  will-change:transform;   /* ขยับด้วย JS ทีละเฟรม ไม่ใช้ transition — ไม่งั้นมันหน่วงตามนิ้วไม่ทัน */
}
html[data-theme="light"] .tab-ind { background:rgba(120,120,128,.22); }
.tabbar .pill.dragging { cursor:grabbing; }
.tabbar .more { width:54px; height:54px; border-radius:var(--r-pill); border:0; flex:none;
                background:rgba(44,44,46,.82); backdrop-filter:blur(22px) saturate(180%); color:var(--ink); font-size:22px;
                display:grid; place-items:center; position:relative; }
html[data-theme="light"] .tabbar .more { background:rgba(255,255,255,.82); box-shadow:0 6px 22px rgba(0,0,0,.14); }
.tabbar .more .dot { position:absolute; top:9px; right:11px; width:9px; height:9px; border-radius:50%; background:var(--red); }

/* ── แผ่นเลื่อนขึ้น (sheet) ─────────────────────────────── */
.sheet-wrap { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; }
.sheet { width:100%; background:var(--bg); border-radius:22px 22px 0 0; padding:var(--s2) var(--s4) 34px; max-height:88vh; }
.sheet .grab { width:36px; height:5px; border-radius:3px; background:var(--line); margin:6px auto var(--s4); }
.sheet .sheet-title { font-size:22px; font-weight:700; margin:0 0 var(--s4); }

.muted { color:var(--muted); }
.small { font-size:13px; }
.mt0 { margin-top:0; }

/* ───────── ส่วนเพิ่มเฉพาะเดโมกดเล่น ───────── */
body { padding-bottom:calc(132px + env(safe-area-inset-bottom)); }
/* เปลี่ยนหน้า = cross fade หน้าเก่าจางออกพร้อมหน้าใหม่จางเข้า ไม่มีเลื่อนขึ้นลง
   หน้าที่กำลังออกถูกถอดออกจากโฟลว์ (absolute) เพื่อให้ซ้อนทับกันได้ ไม่ดันเนื้อหา */
body { position:relative; }
.view { display:none; opacity:0; transition:opacity .22s ease; position:relative; }  /* relative: ให้แพนที่กำลังจางออกวางทับได้ */
.view.on { display:block; }
.view.on.vis { opacity:1; }
.view.leaving { position:absolute; left:var(--s4); right:var(--s4); z-index:1; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .view { transition:none; } }
.tabbar { bottom:calc(22px + env(safe-area-inset-bottom)); }

/* ฟอร์ม */
.field { background:var(--card); border-radius:var(--r-inner); padding:10px var(--s4); margin-bottom:var(--s2); }
.field label { display:block; font-size:12px; color:var(--muted); }
.field input, .field select, .field textarea {
  width:100%; border:0; background:transparent; color:var(--ink); font:inherit; font-size:17px; outline:none; padding:2px 0;
}
.field select { appearance:none; }
.field.row2 { display:flex; gap:var(--s4); }
.field.row2 > div { flex:1; min-width:0; }
.formgrid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.hint { color:var(--muted); font-size:13px; margin:0 0 var(--s4); padding:0 var(--s1); }

/* POS ตะกร้า */
.cart-total { position:sticky; bottom:0; }
.paybar { display:flex; gap:var(--s2); margin-top:var(--s3); }
.paybar .btn { flex:1; justify-content:center; }
.qty { display:flex; align-items:center; gap:var(--s3); }
.qty button { width:30px; height:30px; border-radius:var(--r-pill); border:0; background:var(--card-2); color:var(--ink); font-size:17px; }

/* toast */
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:110px; background:var(--card-2);
         color:var(--ink); padding:11px 18px; border-radius:var(--r-pill); font-size:15px; font-weight:500;
         box-shadow:0 8px 26px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60; }
.toast.on { opacity:1; transform:translateX(-50%) translateY(-6px); }

/* sheet เปิด/ปิด */
.sheet-wrap { z-index:50; opacity:0; pointer-events:none; transition:opacity .2s; }
.sheet-wrap.on { opacity:1; pointer-events:auto; }
.sheet { transform:translateY(100%); transition:transform .26s cubic-bezier(.22,.7,.3,1); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sheet-wrap.on .sheet { transform:none; }
.sheet-x { position:absolute; right:var(--s4); top:calc(var(--s4) + 4px); }

/* แถวงวดผ่อน */
.pay-dot { width:26px; height:26px; border-radius:var(--r-pill); display:grid; place-items:center; font-size:13px; flex:none; }
.pay-dot.paid { background:rgba(48,209,88,.18); color:var(--green); }
.pay-dot.wait { background:var(--card-2); color:var(--muted); }
.pay-dot.late { background:rgba(255,69,58,.18); color:var(--red); }

/* แถบความคืบหน้า */
.bar-track { height:6px; border-radius:3px; background:var(--card-2); overflow:hidden; margin-top:10px; }
.bar-fill { height:100%; background:var(--green); border-radius:3px; }

.empty { text-align:center; color:var(--muted); padding:40px 0; font-size:15px; }
.hidden { display:none !important; }
.sheet { position:relative; }   /* ปุ่มปิดต้องยึดกับแผ่น ไม่ใช่กับจอ */

/* กดปุ่มรัว ๆ แล้วตัวหนังสือถูกไฮไลต์น้ำเงินเหมือนลากเลือกข้อความ — ปิดการเลือกทั้งแอป
   ยกเว้นช่องกรอก (ให้เหมือนแอปเนทีฟ) */
body { -webkit-user-select:none; user-select:none; }
input, textarea { -webkit-user-select:text; user-select:text; }

/* ลากนิ้วบนแถบล่าง = เลือกแท็บ ห้ามหน้าข้างหลังเลื่อนตาม
   ต้องใส่ที่ตัวปุ่มด้วย ไม่ใช่แค่แถบ เพราะนิ้วแตะลงบนปุ่ม และ touch-action ไม่สืบทอดลงลูก */
.tabbar, .tabbar * { touch-action:none; }
/* แถบล่างกว้างเต็มจอ แต่ตัวที่กดได้มีแค่ก้อนแท็บ+ปุ่มกลม — ช่องว่างสองข้างให้นิ้วทะลุไปหน้าข้างหลัง */
.tabbar { pointer-events:none; } .tabbar .pill, .tabbar .more { pointer-events:auto; }
/* เปิดหน้าต่างเด้งอยู่ = เก็บแถบล่างลงพ้นจอ (ยกเว้นเมนูเพิ่มเติมที่เกาะปุ่มกลม)
   iPhone ยังเอาเขต touch-action:none ของแถบมาทับปุ่มในแผ่นที่อยู่บนกว่า → กดปุ่มท้ายแผ่นไม่ติด */
body:has(.sheet-wrap.on:not(#sheet-more)) .tabbar { transform:translateY(calc(100% + 60px + env(safe-area-inset-bottom))); visibility:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1), visibility 0s .26s; }

/* แท็บย่อยตอนกดค้าง: ทั้งแถบโตขึ้นจากจุดกึ่งกลาง เหมือนเมนูล่าง */
.seg { transform:scale(var(--box-g, 1)); transform-origin:center center; }

/* กล่องแชทในแผ่นรายละเอียด */
.chatbox { background:var(--card); border-radius:var(--r-card); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.bubble { max-width:80%; padding:9px 13px; border-radius:16px; font-size:16px; line-height:1.35; }
.bubble.in { align-self:flex-start; background:var(--card-2); border-bottom-left-radius:5px; }
.bubble.out { align-self:flex-end; background:var(--tint); color:#fff; border-bottom-right-radius:5px; }
.tabbar .more.on { color:var(--tint); }   /* อยู่หน้าที่เปิดจากแผ่นเพิ่มเติม */

/* สลับร้าน: แถบล่างเลื่อนลงพ้นจอ เปลี่ยนชุดปุ่ม แล้วเลื่อนกลับขึ้นมา */
.tabbar { transition:transform .26s cubic-bezier(.4,0,.2,1); }
.tabbar.down { transform:translateY(calc(100% + 60px + env(safe-area-inset-bottom))); }   /* พ้นขอบล่างจอจริงเสมอ รวมขอบ safe-area ของ iPhone */
.portal-btn { background:var(--card); }
.nav-dot { position:absolute; top:6px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--red); }
.tabbar .pill button { position:relative; }

/* ── สรุปสต๊อก: ยกโครงมาจากแอปจริงทั้งชุด ──────────────────── */
.sum-headcard { background:var(--card); border-radius:14px; padding:18px; margin-bottom:18px; text-align:center; }
.sum-sec { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
           font-weight:700; font-size:15px; color:var(--ink); margin:6px 4px 10px; }
.sum-secmoney { font-weight:600; font-size:12.5px; color:var(--muted); }
.sum-card { background:var(--card); border-radius:12px; padding:14px; margin-bottom:12px; }
.sum-top { display:flex; align-items:center; gap:10px; margin-bottom:10px;
           padding-bottom:10px; border-bottom:1px solid var(--line); }
.sum-money { font-size:12.5px; color:var(--muted); margin:-4px 0 8px; }
.sum-mrow { display:flex; justify-content:space-between; align-items:center; padding:6px 4px 2px; font-size:14px; }
.sum-sub { padding:5px 4px 3px; margin-top:6px; font-size:13.5px; font-weight:700; border-top:1px solid var(--line); }
.brand-logo32 { width:32px; height:32px; object-fit:contain; flex:none; }
.brand-logo { width:22px; height:22px; object-fit:contain; flex:none; }
html[data-theme="light"] .brand-logo32, html[data-theme="light"] .brand-logo { filter:invert(1); }
.sum-sto { font-weight:700; color:var(--muted); font-size:12px; margin-right:6px; }
.sum-chip { display:inline-flex; align-items:center; gap:var(--s1); background:rgba(127,127,127,.12);
            border:1px solid var(--line); border-radius:var(--r-pill); padding:2px 9px;
            font-size:12px; color:var(--ink); margin:2px 4px 2px 0; }
.sum-dot { width:10px; height:10px; border-radius:50%; border:1px solid rgba(127,127,127,.45); flex:none; display:inline-block; }

/* ── โลโก้ยี่ห้อหน้าแถวสินค้า + ป้ายบอกว่าเป็นอุปกรณ์ ───────
   ช่องไอคอนซ้ายของแถวสินค้าเป็นของ "ยี่ห้อ" อย่างเดียว ยี่ห้อไหนไม่มีโลโก้
   ใช้ตัวอักษรย่อแทน ส่วนคำว่าอุปกรณ์ย้ายไปเป็นป้ายเล็กในบรรทัดคำอธิบาย */
.row .ic.brand { background:none; }   /* โลโก้ยี่ห้อลอยเปล่า ๆ ไม่มีกรอบ */
.row .ic.brand .brand-logo { width:28px; height:24px; }   /* โลโก้ที่เป็นตัวหนังสือ (Samsung/Sony) ต้องกว้างกว่าสูง ไม่งั้นอ่านไม่ออก */
.row .ic.mono { background:var(--card-2); color:var(--ink-2); font-size:11px; font-weight:700; letter-spacing:.2px; }
.tagmini { display:inline-block; margin-right:6px; padding:0 6px; border-radius:6px;
           background:rgba(127,127,127,.18); color:var(--ink-2); font-size:11px; font-weight:600; }

/* ── เมนูเด้งขึ้นจากปุ่มกลม (dropup) ────────────────────────
   ใช้โครงเดียวกับแผ่นเลื่อน (sheet) แต่ย่อเป็นแผ่นเล็กลอยเหนือปุ่ม
   ตำแหน่งขวา/ล่างคำนวณจากตัวปุ่มตอนเปิด (ดู openMore ใน demo.js) */
.sheet-wrap.dropup { background:rgba(0,0,0,.3); }
.sheet-wrap.dropup .sheet {
  position:absolute; width:min(290px, calc(100vw - 20px)); max-height:min(72vh, 620px);
  padding:7px; border-radius:20px; background:var(--card-2);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  opacity:0; transform:translateY(8px) scale(.88); transform-origin:100% 100%;
  transition:transform .24s cubic-bezier(.2,.9,.28,1.06), opacity .16s ease;
}
html[data-theme="light"] .sheet-wrap.dropup .sheet { box-shadow:0 18px 44px rgba(0,0,0,.22); }
.sheet-wrap.dropup.on .sheet { opacity:1; transform:none; }
.sheet-wrap.dropup .grab, .sheet-wrap.dropup .sheet-title { display:none; }
.sheet-wrap.dropup .list { background:transparent; border-radius:0; margin:0; }
.sheet-wrap.dropup .list + .list { border-top:1px solid var(--line); margin-top:5px; padding-top:5px; }
.sheet-wrap.dropup .row { padding:6px 9px; min-height:0; gap:10px; }
.sheet-wrap.dropup .row + .row::before { display:none; }
.sheet-wrap.dropup .row .sub { display:none; }
.sheet-wrap.dropup .row .ic { width:26px; height:26px; border-radius:7px; font-size:15px; }
.sheet-wrap.dropup .row .name { font-size:15px; }
.sheet-wrap.dropup .row:active { background:rgba(127,127,127,.16); border-radius:12px; }

/* ── ระยะห่างของบล็อกในหน้า: กำหนดที่เดียว ทุกหน้าเท่ากัน ───────────────────
   เดิม .card/.list/.seg/.search/.chips มี margin-bottom แต่ .grid2/.formgrid
   ไม่มีเลย หน้าไหนใช้สองตัวนี้ก้อนจะติดกันสนิท (หน้าแรกการ์ด 2 แถวชนกัน · จำนำ
   การ์ดชนลิสต์ · รับเข้า/บาร์โค้ด ฟอร์มชนปุ่ม) ส่วนหน้าอื่นห่าง 12 — ต่างกันคนละหน้า
   กติกา: บล็อกในหน้าห่างกัน 12 เสมอ · หัวข้อ .section เว้นบน 24 ล่าง 12 (จังหวะเดียว
   ที่ตั้งใจให้ต่าง เพราะมันคือที่ขึ้นหัวข้อใหม่) · ลูกที่อยู่ในบล็อกไม่ต้องมี margin เอง */
.grid2, .formgrid { margin-bottom:var(--s3); }
.formgrid { gap:var(--s3); }
.field, .hint { margin-bottom:var(--s3); }
.seg { margin-bottom:var(--s3); }
.grid2 > .card, .formgrid > .field, .field.row2 > div { margin-bottom:0; }
.view > .pane > *:last-child, .view > *:last-child { margin-bottom:0; }

/* ช่องว่าง "ไม่มีข้อมูล" ในการ์ดลิสต์ เดิมสูง 40+40 กลายเป็นกล่องเปล่าใหญ่กลางหน้า */
.empty { padding:28px var(--s4); }
.list > .empty { padding:22px var(--s4); }

/* ── ปุ่มสลับสาขา (ใต้ชื่อร้านบนหัวหน้า) ───────────────────────────────── */
.branch-pill { display:inline-flex; align-items:center; gap:5px; margin-top:6px;
               padding:4px 10px; border:1px solid var(--line); border-radius:var(--r-pill);
               background:var(--card); color:var(--tint); font:inherit; font-size:13px; font-weight:600; }
.branch-pill i { font-size:12px; }
.branch-pill i:last-child { color:var(--muted); }

/* ══════════ ส่วนต่อขยาย (x-*.js): หน้าจอของฟีเจอร์ที่เคยเป็นแค่ toast ══════════ */
/* แผ่นซ้อน — ตัวบนสุดทับตัวล่าง ฉากหลังบางลงเพื่อไม่ให้มืดทบกันหลายชั้น */
.sheet-wrap.dyn { background:rgba(0,0,0,.4); }
.sheet-wrap.dyn .sheet { max-height:92vh; }
.btn.danger { background:rgba(255,69,58,.16); color:var(--red); }
.btn[disabled] { opacity:.4; }
.circ-btn.sm { width:30px; height:30px; font-size:14px; background:var(--card-2); }
.circ-btn[disabled] { opacity:.3; }

/* ปุ่มคำสั่งแบบตาราง 3 ช่อง (ไอคอนสี่เหลี่ยมมน + ชื่อใต้) */
.actgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-bottom:var(--s3); }
.actbtn { border:0; background:var(--card); color:var(--ink); font:inherit; font-size:13px; font-weight:500; border-radius:var(--r-inner);
          padding:12px 4px 10px; display:grid; justify-items:center; gap:6px; }
.actbtn .ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:17px; }
.actbtn:active { background:var(--card-2); }

/* สวิตช์ iOS */
.sw-row { cursor:pointer; }
.sw { appearance:none; -webkit-appearance:none; width:51px; height:31px; border-radius:16px; background:var(--card-2); position:relative; flex:none; margin:0; transition:background .2s; }
.sw::after { content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.3); transition:transform .2s; }
.sw:checked { background:var(--green); }
.sw:checked::after { transform:translateX(20px); }
html[data-theme="light"] .sw { background:#e3e3e8; }

/* แถบเลือกในแผ่น/ฟอร์ม: ใช้ตัวชี้ลากชุดเดียวกับแท็บหลัก (bindSeg ใน demo.js) */
.sheet .seg, .sheet .field { background:var(--card); }

/* ช่องกรอกที่มีปุ่มต่อท้าย / select ในแถว */
.inrow { display:flex; align-items:center; gap:var(--s2); }
.inrow input { flex:1; min-width:0; }
.inrow .btn.plain { white-space:nowrap; font-size:14px; }
.search .btn.plain { padding:4px 2px; font-size:15px; }
.inline-sel { border:0; background:var(--card-2); color:var(--ink); font:inherit; font-size:15px; padding:6px 10px; border-radius:9px; max-width:58%; }
.chips.wrap { flex-wrap:wrap; overflow:visible; }
.chips .c { cursor:pointer; }

/* การ์ดปุ่มใหญ่ (ถ่ายรูป / เลือกรูป) */
.bigact { text-align:center; padding:18px 10px; }
.bigact i { font-size:30px; color:var(--tint); }
.bigact .name { font-weight:600; margin-top:4px; }
.bigact .sub { font-size:13px; color:var(--muted); }

/* กล้องสแกน (จำลอง) */
.scanbox { position:relative; height:250px; border-radius:var(--r-card); overflow:hidden; margin-bottom:var(--s3);
           background:radial-gradient(ellipse at 40% 35%, #3a3f47, #0d0f12 75%); }
.scanbox.torch { background:radial-gradient(ellipse at 45% 40%, #8e949c, #2a2d31 80%); }
.scan-frame { position:absolute; left:12%; right:12%; top:26%; height:40%; border:2px solid rgba(255,255,255,.8); border-radius:12px; }
.scan-line { position:absolute; left:6px; right:6px; height:2px; background:var(--red); box-shadow:0 0 10px var(--red); animation:scanl 1.3s ease-in-out infinite alternate; }
@keyframes scanl { from { top:8%; } to { top:88%; } }
.scanbox.hit .scan-frame { border-color:var(--green); }
.scanbox.hit .scan-line { display:none; }
.scan-tip { position:absolute; left:0; right:0; bottom:14px; text-align:center; color:#fff; font-size:14px; text-shadow:0 1px 3px #000; }

/* ตารางตัวอย่างก่อนพิมพ์ */
.ptable { background:var(--card); border-radius:var(--r-inner); overflow:auto; margin-bottom:var(--s3); max-height:320px; }
.ptable table { border-collapse:collapse; width:100%; font-size:13px; }
.ptable th, .ptable td { padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.ptable th { position:sticky; top:0; background:var(--card-2); font-weight:600; }
.ptable td.n { text-align:right; }

/* ใบเสร็จ / สลิป */
.receipt, .slip { background:#fff; color:#111; border-radius:10px; padding:16px; font-size:14px; margin-bottom:var(--s3); }
.receipt hr, .slip hr { border:0; border-top:1px dashed #bbb; margin:8px 0; }
.rl { display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
.rl span:last-child { text-align:right; }
.receipt .small, .slip .small { color:#666; }
.slip-top { color:#0a8f3c; font-weight:700; display:flex; align-items:center; gap:6px; }
.slip-amt { font-size:30px; font-weight:700; margin:6px 0 2px; }
.row.voided .name { text-decoration:line-through; color:var(--muted); }
.row.picked { background:rgba(10,132,255,.14); }
.row.picked .name::before { content:'✓ '; color:var(--tint); font-weight:700; }
.list.dim { opacity:.55; }

/* เอกสารสัญญา */
.docgrid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.doc { background:var(--card); border-radius:var(--r-inner); padding:10px; text-align:center; font-size:14px; }
.doc-th { height:92px; border-radius:8px; background:var(--card-2); display:grid; place-items:center; font-size:30px; color:var(--muted); margin-bottom:6px; }
.paper-th { background:repeating-linear-gradient(#fff 0 9px, #d8dbe2 9px 10px); }
.card-th { background:linear-gradient(135deg,#cfe3ff,#8fb6ea); color:#274a7a; }
.idcard-big { display:flex; gap:14px; align-items:center; background:linear-gradient(135deg,#dbeaff,#9dc0ee); color:#1d3557; border-radius:14px; padding:18px; font-size:15px; }
.idc-photo { width:70px; height:88px; border-radius:6px; background:linear-gradient(#b9c6d8,#8d9db4); flex:none; }
.photo-ph { height:220px; border-radius:var(--r-card); background:var(--card); display:grid; place-items:center; align-content:center; gap:8px; color:var(--muted); text-align:center; }
.photo-ph i { font-size:48px; }

/* ใบสัญญาแบบกระดาษ + ช่องเซ็น */
.paper { background:#fdfdf8; color:#111; border-radius:6px; padding:18px 16px; font-size:14px; line-height:1.7; box-shadow:0 2px 12px rgba(0,0,0,.4); }
.paper-h { text-align:center; font-weight:700; font-size:17px; margin-bottom:4px; }
.paper u { text-decoration:none; border-bottom:1px dotted #333; padding:0 3px; }
.paper-card { display:flex; gap:12px; align-items:center; justify-content:center; margin:12px auto; padding:10px; width:78%;
              border:1px dashed #888; border-radius:8px; background:linear-gradient(135deg,#eef4ff,#d4e3fa); font-size:13px; }
.paper-card .idc-photo { width:46px; height:58px; }
.sig { width:100%; height:110px; border-bottom:1px solid #333; touch-action:none; background:rgba(0,0,0,.02); display:block; }
.sig-row { text-align:center; margin-top:10px; }

/* ครอปบัตร */
.crop-area { position:relative; height:250px; border-radius:var(--r-card); overflow:hidden; margin-bottom:var(--s3); touch-action:none; }
.crop-photo { position:absolute; inset:0; background:linear-gradient(160deg,#5b5147,#2d2721); }
.crop-card { position:absolute; left:16%; top:25%; width:62%; height:46%; border-radius:10px; transform:rotate(-3deg);
             background:linear-gradient(135deg,#dbeaff,#9dc0ee); box-shadow:0 6px 18px rgba(0,0,0,.5); }
.crop-box { position:absolute; border:2px solid var(--yellow); border-radius:6px; box-shadow:0 0 0 999px rgba(0,0,0,.45); cursor:move; touch-action:none; }
.crop-h { position:absolute; right:-9px; bottom:-9px; width:18px; height:18px; border-radius:50%; background:var(--yellow); cursor:nwse-resize; }

/* ปฏิทิน */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; background:var(--card); border-radius:var(--r-card); padding:10px; }
.cal b { text-align:center; font-size:12px; color:var(--muted); font-weight:500; padding:2px 0; }
.cal button { border:0; background:transparent; color:var(--ink); font:inherit; border-radius:10px; padding:5px 0 3px; display:grid; justify-items:center; min-height:44px; }
.cal button i { font-style:normal; font-size:15px; font-weight:600; }
.cal button small { font-size:10px; color:var(--orange); }
.cal button.past { color:var(--muted); }
.cal button.on { background:var(--tint); color:#fff; }
.cal button.on small { color:#fff; }
.cal button[disabled] { opacity:.3; }

/* สติกเกอร์ตัวอย่าง */
.stkgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:var(--s3); }
.stkp { background:#fff; color:#000; border-radius:6px; padding:6px; font-size:10px; display:grid; gap:2px; position:relative; }
.stkp .bars { height:18px; background:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px); }
.stkp i { position:absolute; top:3px; right:5px; font-style:normal; font-weight:700; color:#0a84ff; }

/* ตารางงวดหลายคน */
.gridpay { display:flex; flex-wrap:wrap; gap:5px; }
.gridpay span { width:30px; height:30px; border-radius:8px; background:var(--card); display:grid; place-items:center; font-size:12px; color:var(--muted); }
.gridpay span.paid { background:rgba(48,209,88,.2); color:var(--green); font-weight:700; }
.gridpay span.late { background:rgba(255,69,58,.22); color:var(--red); font-weight:700; }

/* แชท: ปุ่มแนบรูป */
.chat-img { color:var(--tint); font-size:20px; display:grid; place-items:center; cursor:pointer; }

/* ล็อกหน้าจอ / PIN */
.lockscreen { position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; animation:lockin .22s ease; }
@keyframes lockin { from { opacity:0; } to { opacity:1; } }
.lock-in { width:min(340px, 90vw); text-align:center; }
.lock-shop { color:var(--muted); font-size:15px; margin-bottom:18px; }
.lock-av { width:74px; height:74px; margin:0 auto 8px; border-radius:50%; background:var(--tint); color:#fff; display:grid; place-items:center; font-size:30px; font-weight:700; }
.lock-av.sm { width:36px; height:36px; font-size:16px; margin:0; flex:none; }
.lock-name { font-size:22px; font-weight:700; }
.lock-sub { color:var(--muted); font-size:15px; }
.pin-dots { display:flex; justify-content:center; gap:16px; margin:20px 0 24px; }
.pin-dots i { width:14px; height:14px; border-radius:50%; border:2px solid var(--ink-2); }
.pin-dots i.on { background:var(--ink); }
.pin-dots.shake { animation:shake .35s; }
@keyframes shake { 20%,60% { transform:translateX(-10px); } 40%,80% { transform:translateX(10px); } }
.pinpad { display:grid; grid-template-columns:repeat(3,76px); gap:16px 24px; justify-content:center; margin-bottom:14px; }
.pinpad button { width:76px; height:76px; border-radius:50%; border:0; background:var(--card-2); color:var(--ink); font:inherit; font-size:30px; }
.pinpad button:active { background:var(--line); }
.lock-hint { color:var(--muted); font-size:12px; margin-top:6px; }
.lock-staff { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lock-staff button { border:0; background:var(--card); color:var(--ink); font:inherit; font-size:16px; font-weight:600; border-radius:var(--r-card);
                     padding:14px 10px; display:grid; justify-items:center; gap:4px; }
.lock-staff button .lock-av { margin-bottom:4px; }
.lock-staff small { color:var(--muted); font-weight:400; font-size:12px; }

/* สิทธิ์: ซ่อนสิ่งที่ไม่มีสิทธิ์ */
.nocap { display:none !important; }
body.no-cost .profit, body.no-cost [data-act="month-profit"] { display:none !important; }

/* ── ปุ่มเด้ง (ค่าอยู่ใน MOTION.press* ของ demo.js) ──────────────────────
   กด: โตขึ้นจากกึ่งกลางเร็ว ๆ · ปล่อย: เด้งกลับเลยจุดเดิมนิดนึงแล้วเข้าที่ (overshoot)
   แถวในลิสต์ใช้ไฮไลต์พื้นแทน เพราะลิสต์ตัดขอบ ขยายแล้วขอบแถวจะโดนตัด */
.pressing { transform:scale(var(--press, 1.06)); transition:transform .14s cubic-bezier(.2,.8,.3,1); }
.released { transition:transform .46s cubic-bezier(.34,1.8,.5,1); }
.pressing, .released { position:relative; z-index:2; }
.sheet-x.pressing, .sheet-x.released { position:absolute; }
.row.row-press { background:rgba(127,127,127,.16); transition:background 0s; }
.row { transition:background .25s ease; }
@media (prefers-reduced-motion:reduce) { .pressing { transform:none; } }

/* ── สีประจำฝั่งร้าน: หน้าร้าน = ฟ้า · ร้านผ่อน = ส้ม ─────────────────────
   สลับร้านแล้วเมนูล่างเปลี่ยนสีทั้งชุด (ไอคอน/ชื่อที่เลือก ลูกกลม ปุ่มเพิ่มเติม) ให้รู้ทันทีว่าอยู่ฝั่งไหน */
:root { --portal:var(--tint); }
body.portal-inst { --portal:var(--orange); }
.tabbar .pill button.on, .tabbar .more.on { color:var(--portal); }
#tabs-inst .tab-ind { background:rgba(255,159,10,.26); }
html[data-theme="light"] #tabs-inst .tab-ind { background:rgba(255,149,0,.2); }
.tabbar .pill button, .tabbar .more { transition:color .18s ease; }

/* ── ปฏิทินยอดต้องเก็บ (หัวแท็บผ่อน) ───────────────────────────── */
.dcal { background:var(--card); border-radius:var(--r-card); padding:var(--s3); margin-bottom:var(--s3); }
.dc-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s3); }
.dc-nav b { font-size:17px; }
.dc-nav .circ-btn { background:var(--card-2); width:34px; height:34px; font-size:16px; }
.dc-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-bottom:var(--s3); }
.dc-tiles div { background:var(--card-2); border-radius:var(--r-inner); padding:8px 6px; text-align:center; }
.dc-tiles span { display:block; font-size:12px; color:var(--muted); }
.dc-tiles b { font-size:16px; letter-spacing:-.3px; }
.dc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.dc-grid > i { font-style:normal; text-align:center; font-size:12px; color:var(--muted); padding-bottom:2px; }
.dc-d { border:1px solid var(--line); background:transparent; color:var(--muted); font:inherit; border-radius:10px;
        min-height:52px; padding:4px 0 3px; display:grid; align-content:start; justify-items:center; gap:0; }
.dc-d b { font-size:13px; font-weight:500; }
.dc-d .dc-amt { font-size:13px; font-weight:700; color:var(--ink); line-height:1.2; }
.dc-d small { font-size:10px; color:var(--muted); }
.dc-d.none { border-color:transparent; background:rgba(127,127,127,.06); }
.dc-d.wait { background:var(--card-2); }
.dc-d.paid { background:rgba(48,209,88,.12); border-color:rgba(48,209,88,.45); }
.dc-d.paid .dc-amt, .dc-d.paid small { color:var(--green); }
.dc-d.late { background:rgba(255,69,58,.14); border-color:rgba(255,69,58,.5); }
.dc-d.late .dc-amt { color:var(--red); }
.dc-d.today { border:2px solid var(--orange); }
.dc-d.sel { box-shadow:0 0 0 2px var(--tint) inset; }
.dc-d.today.sel { box-shadow:none; }
.dc-head { display:flex; justify-content:space-between; align-items:baseline; margin:var(--s4) 2px var(--s2); font-size:14px; }
.dc-head span { color:var(--muted); }
.dcal .list { background:var(--card-2); margin-bottom:0; }
/* เลื่อนเดือน = จางออก-จางเข้า · เลือกวัน = รายการจางเข้า (ความสูงยืดด้วย calMorph ใน x-inst.js) */
.dcal .dc-body { transition:opacity 140ms ease; }
.dcal .dc-body.dc-out { opacity:0; }
.dcal .dc-in { animation:dcIn 260ms ease both; }
.seg.none .seg-ind { opacity:0; }   /* แท็บสรุป: กดวันในปฏิทินแทนช่วง = ไม่มีช่วงไหนถูกเลือก */
.dc-d:disabled { opacity:.35; }
@keyframes dcIn { from { opacity:0; } to { opacity:1; } }

/* ── ส่งให้ลูกค้ากรอกเอง: ปุ่มบนสุดของฟอร์ม + รายชื่อเลือกได้หลายคน ── */
.send-cust { padding:14px; margin-bottom:var(--s3); }
.pick-dot { width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; color:transparent; font-size:13px; flex:none; }
.row.picked-p .pick-dot { background:var(--tint); border-color:var(--tint); color:#fff; }

/* เมนูล่าง: แถบชิดซ้าย · ปุ่มกลม "เพิ่มเติม" ชิดขวา (ขอบเท่าขอบเนื้อหาในหน้า 16px) */
.tabwrap { width:100%; justify-content:space-between; }

/* ── กล้อง/รูปจริง ─────────────────────────────────────────── */
.scan-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.scanbox.live .scan-video { display:block; }
.scanbox.live .scan-tip { background:rgba(0,0,0,.45); padding:6px 0; bottom:0; }
.qthumb { width:44px; height:44px; border-radius:9px; overflow:hidden; position:relative; flex:none; background:var(--card-2); }
.qthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.qthumb b { position:absolute; left:3px; top:3px; font-size:10px; background:rgba(0,0,0,.6); color:#fff; border-radius:6px; padding:0 4px; }
.qthumb i { position:absolute; right:2px; bottom:2px; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:10px; color:#fff; background:var(--muted); }
.qthumb i.q-ready { background:var(--green); } .qthumb i.q-check { background:var(--orange); }
.qphotos { display:flex; gap:8px; overflow-x:auto; margin-bottom:var(--s3); }
.qphotos img { height:140px; border-radius:10px; flex:none; }
.qphotos.one img { width:100%; height:auto; max-height:320px; object-fit:contain; background:#111; }
.idc-real { width:110px; height:70px; object-fit:cover; border-radius:6px; }
.crop-area.has-img { height:auto; background:#111; }
.crop-img { display:block; width:100%; height:auto; pointer-events:none; user-select:none; }

/* ── ต่อระบบจริง (real.js) ──────────────────────────────────── */
.row .ic.pimg { background:var(--card-2); overflow:hidden; width:40px; height:40px; border-radius:9px; }
.row .ic.pimg img { width:100%; height:100%; object-fit:cover; display:block; }
.unwired { display:flex; gap:10px; align-items:center; background:rgba(255,159,10,.12); border:1px solid rgba(255,159,10,.35);
  border-radius:var(--r-inner); padding:10px 12px; margin-bottom:var(--s3); font-size:13px; color:var(--ink-2); }
.unwired > i { color:var(--orange); font-size:22px; flex:none; }
.unwired > div { flex:1; min-width:0; }
.unwired .btn { flex:none; padding:8px 12px; font-size:14px; }
#auth { z-index:300; }
#auth .field input { font-size:18px; }

/* ── ที่พักรูป + กล้องถ่ายต่อเนื่อง (รับเข้า) ─────────────────────── */
#add-tray { margin-bottom:var(--s3); }
.tray-strip { display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; }
.tray-th { position:relative; flex:none; width:64px; height:64px; border-radius:10px; overflow:hidden; background:var(--card); }
.tray-th img { width:100%; height:100%; object-fit:cover; display:block; }
.tray-th button { position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:12px; display:grid; place-items:center; padding:0; }
.mcam { position:relative; border-radius:var(--r-card); overflow:hidden; background:#000; aspect-ratio:3/4; max-height:58vh; margin:0 auto var(--s3); }
.mcam video { width:100%; height:100%; object-fit:cover; display:block; }
.mcam-tip { position:absolute; left:0; right:0; bottom:10px; text-align:center; color:#fff; font-size:14px; text-shadow:0 1px 3px #000; }
.mcam-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.mcam-flash.on { animation:mflash .25s ease-out; }
@keyframes mflash { from { opacity:.8; } to { opacity:0; } }
.mcam-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:var(--s3); }
.mcam-bar .btn { min-width:88px; justify-content:center; }
.mcam-shutter { width:72px; height:72px; border-radius:50%; border:4px solid #fff; background:#fff; box-shadow:inset 0 0 0 4px #000; flex:none; }
.mcam-shutter:active { transform:scale(.92); }

/* ── โหมดนักพัฒนา (devmode.js) ─────────────────────────────── */
html.dev-on body { -webkit-touch-callout:none; }
.dev-box { position:fixed; z-index:45; pointer-events:none; border:2px solid #bf5af2; border-radius:10px; background:rgba(191,90,242,.12); box-shadow:0 0 0 9999px rgba(0,0,0,.25); transition:all .15s ease; }
.dev-pill { position:fixed; bottom:calc(92px + env(safe-area-inset-bottom)); right:16px; z-index:44; border:0; border-radius:999px; padding:7px 12px; font:inherit; font-size:13px; font-weight:600;
  background:#bf5af2; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35); display:flex; align-items:center; gap:5px; }
.dev-pill.hidden { display:none; }
.dev-marked { outline:2px dashed #bf5af2; outline-offset:2px; position:relative; }
.dev-marked::after { content:attr(data-devn); position:absolute; top:-9px; right:-9px; min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  background:#bf5af2; color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; z-index:3; }
.dev-path { font-weight:600; font-size:16px; }
.dev-ref { font-family:ui-monospace,monospace; font-size:12px; color:var(--purple); margin-top:4px; word-break:break-all; }
.sheet-wrap.dev-sheet { background:transparent; }

/* ── ดึงลงเพื่อรีเฟรช (ptr.js) ─────────────────────────────── */
#ptr-bar { position:fixed; left:50%; top:calc(8px + env(safe-area-inset-top)); transform:translate(-50%,-60px); width:36px; height:36px; border-radius:50%;
  background:var(--card-2); box-shadow:0 4px 14px rgba(0,0,0,.35); z-index:200; display:grid; place-items:center; pointer-events:none; opacity:0; }
#ptr-bar i { width:18px; height:18px; border:2px solid var(--line); border-top-color:var(--tint); border-radius:50%; }
#ptr-bar.spin i { animation:ptrsp .7s linear infinite; }
@keyframes ptrsp { to { transform:rotate(360deg); } }

/* ── ปลดล็อก (real.js unlockScreen) — เร็วแบบ iPhone: หน้าล็อกลอยขึ้น+จาง แอปซูมจากเล็กนิดๆ ── */
.lockscreen.unlock { pointer-events:none; animation:lockout .36s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes lockout { to { opacity:0; transform:translateY(-8%) scale(1.06); } }
html.unlocking .view.on { animation:appin .4s cubic-bezier(.2,.8,.2,1); }
html.unlocking .tabbar .tabwrap { animation:appin .4s cubic-bezier(.2,.8,.2,1); }
@keyframes appin { from { opacity:.3; transform:scale(.92); } }

/* เมนูล่างฝั่งหน้าร้านมี 6 ปุ่ม (เพิ่ม "สรุป") — ป้ายห้ามตัดบรรทัด + จอแคบบีบระยะข้างปุ่มให้พอดี */
.tabbar .pill button { white-space:nowrap; }
@media (max-width:420px) { .tabbar .pill button { padding-left:8px; padding-right:8px; } }
@media (max-width:350px) { .tabbar .pill button { padding-left:5px; padding-right:5px; } }

/* แผ่นแบบ "อีกหน้า" (pushSheet opts.page) — เต็มจอ เลื่อนเข้าจากขวา ปุ่มกลับซ้ายบน · ไม่มีปัดกลับ (กดปุ่มกลับเท่านั้น)
   ทั้ง wrap เลื่อน (แถบกลับ + .sheet ที่เป็นตัวเลื่อนเนื้อหา) — แถบกลับไม่ใช้ sticky เพราะ sticky ในแผ่นทำ iPhone จอขาว */
.sheet-wrap.dyn.page { background:var(--bg); flex-direction:column; align-items:stretch; opacity:1; transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.7,.3,1), visibility 0s .3s; visibility:hidden; box-shadow:-8px 0 24px rgba(0,0,0,.35); }
.sheet-wrap.dyn.page.on { transform:none; visibility:visible; transition:transform .3s cubic-bezier(.22,.7,.3,1); }
.sheet-wrap.dyn.page .sheet { flex:1; min-height:0; max-height:none; border-radius:0; transform:none; transition:none; padding-top:0; }
.page-nav { flex:none; padding:calc(4px + env(safe-area-inset-top)) var(--s2) 4px; background:var(--bg); }
.page-back { display:inline-flex; align-items:center; gap:2px; border:0; background:none; color:var(--tint); font:inherit; font-size:17px; padding:8px 6px; }
.page-back i { font-size:20px; }
.sheet-wrap.dyn.page .sheet-title { font-size:30px; }

/* ── ปลดล็อกล่วงหน้า (index.html __lk): กดหลักสุดท้ายปุ๊บ แป้นลอยหาย ม่านกลายเป็นกระจกฝ้าหนาบังแอปไว้ระหว่างรอเซิร์ฟเวอร์ตรวจ PIN
   ถูก = ม่านจางออก (unlockScreen) · ผิด = แป้นกลับมา (lk-back) · ม่านมี !important เพราะ #auth ใน index.html ตั้งพื้นทึบไว้ inline ── */
.lockscreen.pre-unlock { background:rgba(0,0,0,.6) !important; background:color-mix(in srgb, var(--bg) 62%, transparent) !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.2); backdrop-filter:blur(30px) saturate(1.2); }
.lockscreen.pre-unlock .lock-in { pointer-events:none; animation:lkaway .24s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes lkaway { to { opacity:0; transform:translateY(-5%) scale(1.04); } }
.lockscreen.pre-unlock::after { content:''; position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-13px; border-radius:50%; box-sizing:border-box;
  border:2.5px solid var(--line); border-top-color:var(--tint); opacity:0; animation:lkfade .2s .45s forwards, ptrsp .7s linear infinite; }
@keyframes lkfade { to { opacity:1; } }
.lockscreen.pre-unlock.unlock { animation:lockout .22s ease-out forwards; }
.lockscreen.lk-back .lock-in { animation:lkin .22s cubic-bezier(.2,.8,.2,1); }
@keyframes lkin { from { opacity:0; transform:translateY(-5%) scale(1.04); } }
.lockscreen.lk-wait .pinpad button { opacity:.35; pointer-events:none; }

/* ── หน้าแรกยังไม่มีตัวเลขจริง (real.js peekShow/unSk): โครงเทาแทนตัวเลขตัวอย่างของเดโม ── */
.view.sk > :not(.pagehead) :is(.big, .kpi-label, .minirow .v, .chip, .small.muted, .row .name, .row .sub, .row .val, .ri-sv, .empty) { color:transparent !important; background:var(--card-2); border-radius:7px; }
.view.sk > :not(.pagehead) :is(.big, .chip, .row .val) * { color:transparent !important; }
.view.sk > :not(.pagehead) :is(.chart, .row .ic, .ri-alert .btn) { opacity:.15; }
.view.sk > :not(.pagehead) { animation:skpulse 1.1s ease-in-out infinite alternate; }
@keyframes skpulse { from { opacity:1; } to { opacity:.55; } }

/* ── หน้าแรก: วันนี้แยกหมวด · เดือนนี้ · ต้องจัดการ · ขายดี (lib/home.js → real.js loadHome) ── */
.hd-split { display:grid; grid-template-columns:repeat(var(--hd-n,3),1fr); gap:8px; margin-top:14px; }
.hd-split > div { background:var(--card-2); border-radius:12px; padding:10px 10px 9px; cursor:pointer; min-width:0; }
.hd-split .h { font-size:13px; font-weight:600; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.hd-split .n { font-size:18px; font-weight:700; letter-spacing:-.3px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd-split .n small { font-size:12px; color:var(--muted); font-weight:500; }
.hd-split .s { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35; }
.hd-line { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:14px; }
.hd-line > i { font-size:18px; }
.hd-line b { margin-left:auto; font-size:16px; white-space:nowrap; }
.hd-mrow { display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); }
.hd-mrow:first-child { border-top:0; padding-top:2px; }
.hd-mrow:last-child { padding-bottom:2px; }
.hd-mrow .ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; flex:none; font-size:18px; }
.hd-mrow .tx { flex:1; min-width:0; }
.hd-mrow .tx .a { font-size:15px; font-weight:600; }
.hd-mrow .tx .b { font-size:13px; color:var(--muted); margin-top:1px; }
.hd-mrow .vv { text-align:right; flex:none; }
.hd-mrow .vv .a { font-size:17px; font-weight:700; white-space:nowrap; }
.hd-mrow .vv .a small { font-size:12px; color:var(--muted); font-weight:500; }
.hd-mrow .vv .chip { font-size:12px; margin-top:3px; }
.hd-prog { height:6px; border-radius:3px; background:var(--card-2); overflow:hidden; margin-top:6px; }
.hd-prog i { display:block; height:100%; border-radius:3px; background:var(--teal); }
.hd-top { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:15px; }
.hd-top:first-child { border-top:0; }
.hd-top .rk { width:22px; height:22px; border-radius:50%; background:var(--card-2); display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; }
.hd-top .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hd-top .q { color:var(--muted); font-size:14px; white-space:nowrap; }
.hd-tops { margin-top:6px; }
#hd-chart .chart, #hd-chart .chart-x { gap:14px; }
#hd-chart .chart .b { flex-direction:row; align-items:flex-end; gap:3px; }
#hd-chart .chart .bar { flex:1; }
.view.sk > :not(.pagehead) :is(.hd-split .n, .hd-split .s, .hd-line span, .hd-line b, .hd-mrow .a, .hd-mrow .b) { color:transparent !important; background:var(--card-2); border-radius:7px; }