/* ===== Design tokens: จุดเดียวที่กำหนดสีแบรนด์ทั้งหมด (ใช้ทั้งจาก Tailwind config ใน index.html และ CSS ตรงนี้) ===== */
    /* ชุดสี "ป่า" — เขียวเข้ม + ดินเผา (เจ้าของร้านเลือกจากที่วาดเทียบสามชุด)
       ทั้งเว็บดึงสีจากเจ็ดตัวนี้ที่เดียว รวมหน้าที่ลูกค้าสแกน QR สั่งเอง (order.html)
       สีบอกสถานะ (เขียวซิงก์ ส้มกำลังซิงก์ แดงผิดพลาด เหลืองพักบิล) ไม่อยู่ในชุดนี้ เพราะต้องคงความหมายไว้ */
    :root {
      --color-primary: #1f4d3a;   /* เขียวเข้ม - สีหลัก ปุ่ม/หัวข้อ */
      --color-secondary: #163828; /* เขียวเข้มกว่า - สีตัวหนังสือ */
      --color-accent: #e8f0e4;    /* เขียวอ่อน - พื้นหลังไฮไลต์ */
      --color-mustard: #d2743f;   /* ดินเผา - สีเน้น ยอดเงิน/ปุ่มสำคัญ */
      --color-sand: #dfe6d8;      /* เส้นขอบ/เส้นแบ่งที่ใช้ซ้ำทั่วทั้งแอป */
      --color-cream: #fbfaf4;     /* พื้นหลังหลักของหน้า */
      --color-ink: #5b6559;       /* สีตัวหนังสือหลักบน body */
    }

    /* ===== สีเทากลางๆ ที่แตกออกมาจากชุดข้างบน =====
       ของเดิมหน้าขายใช้เทาของ Tailwind ตรงๆ (#94a3b8 #f1f5f9 #e2e8f0) ซึ่งเป็นเทาอมฟ้า
       วางคู่กับครีมกับเขียวของแบรนด์แล้วสีตีกัน และตัวหนังสือจางเกินอ่าน (2.5:1)
       ห้าตัวนี้ไล่จากโทนครีมไปหาโทน ink ให้อยู่ในตระกูลเดียวกับแบรนด์ และผ่าน AA ทุกตัวที่เป็นตัวหนังสือ */
    :root {
      --color-fill: #f2f3ec;      /* พื้นปุ่มเล็ก/ชิป แทน #f1f5f9 กับ bg-slate-50 */
      --color-fill-2: #e6e9de;    /* เส้นแบ่ง/พื้นตอนกด แทน #e2e8f0 กับ #e7e0cd */
      --color-line: #cbd1c1;      /* เส้นขอบจางๆ ที่ไม่ได้บอกสถานะ แทน #cbd5e1 */
      --color-mute: #63705c;      /* ตัวหนังสือชั้นที่สาม รองจาก secondary กับ ink — 5.25:1 บนขาว */
      --color-danger: #b3261e;    /* แดงที่อ่านออก แทน #f87171 กับ rgba(239,68,68) */

      /* ความมนกับเงา: ของเดิมมีความมนเก้าค่าและเงาแปดแบบสำหรับการ์ดที่เป็นของอย่างเดียวกัน */
      --r-sm: 12px;
      --r-md: 16px;
      --r-lg: 24px;
      --r-pill: 999px;
      --sh-1: 0 1px 2px rgba(22, 56, 40, .05);          /* การ์ดตอนอยู่เฉยๆ */
      --sh-2: 0 6px 14px -8px rgba(22, 56, 40, .28);    /* ยกขึ้นมา: hover, ปุ่มจ่ายเงิน */
      --sh-3: 0 14px 30px -14px rgba(22, 56, 40, .40);  /* ลอย: ตะกร้าบนมือถือ */
    }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-thumb { background-color: var(--color-line); border-radius: 4px; }
    .indicator { transition: background-color 0.3s ease; }
    .synced { background-color: #10b981; } 
    .syncing { background-color: #f59e0b; animation: pulse 1s infinite; } 
    .error { background-color: #ef4444; } 
    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .spin-icon { animation: spin 0.8s linear infinite; }
    
    /* ซ่อน Scrollbar เฉพาะบนอุปกรณ์จอสัมผัส (ในคอมจะแสดงแถบเลื่อนเล็กๆ ให้ใช้เมาส์ลากได้) */
    @media (pointer: coarse) {
      .hide-scroll::-webkit-scrollbar { display: none; }
      .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
    }
    .hide-scroll { -webkit-overflow-scrolling: touch; }

    /* กันปุ่มแท็บ Settings ค้างสี hover (bg-accent) หลังแตะบนมือถือ (iOS Safari ค้าง :hover จนกว่าจะแตะที่อื่น)
       ทำให้แท็บที่เพิ่งเลือก (มีแถบ indicator สีเนวี่ลอยอยู่ใต้ปุ่มอยู่แล้ว) ดูเหมือนมีสองสีทับกัน */
    @media (hover: none) {
      button[id^="settings-tab-"]:hover { background-color: transparent; }
    }

    /* เงาจางบอกใบ้ว่าเลื่อนซ้าย/ขวาได้ (จำเป็นเพราะซ่อน scrollbar ไปแล้วบนจอสัมผัส) */
    .scroll-fade { position: relative; }
    .scroll-fade::before, .scroll-fade::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 28px;
      pointer-events: none; z-index: 20; opacity: 1; transition: opacity .2s ease;
    }
    .scroll-fade::before { left: 0; background: linear-gradient(to right, var(--fade-color, var(--color-cream)), transparent); }
    .scroll-fade::after { right: 0; background: linear-gradient(to left, var(--fade-color, var(--color-cream)), transparent); }
    .scroll-fade.at-start::before { opacity: 0; }
    .scroll-fade.at-end::after { opacity: 0; }

    /* <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:none"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg> iOS: เผื่อพื้นที่ปลอดภัย กันเนื้อหามุดใต้ status bar และ home indicator ตอนเปิดเป็นแอปเต็มจอ */
    html { background: #ffffff; }
    /* iOS standalone (เพิ่มไปยังหน้าจอโฮม): 100dvh คำนวณผิด เหลือช่องว่างว่างๆ ล่างสุดของจอ
       -webkit-fill-available คือค่าที่ WebKit ให้ความสูงที่มองเห็นจริงตอนเปิดเป็นแอปเต็มจอ
       ใช้ feature query แบบนี้เพราะ -webkit-touch-callout มีแค่บน iOS Safari/WebKit เท่านั้น */
    @supports (-webkit-touch-callout: none) {
      body { height: -webkit-fill-available; }
    }
    body > nav {
      padding-top: env(safe-area-inset-top) !important;
      height: calc(4rem + env(safe-area-inset-top)) !important;
    }
    /* ชิ้นที่มีเฉพาะจอเล็ก จอใหญ่ออเดอร์อยู่คอลัมน์ขวาตลอดอยู่แล้ว */
    .cart-scrim, .pos-bottom-bar, .cart-edge-tab { display: none; }
    @media (max-width: 1023.98px) {
      /* ออเดอร์เป็นแผ่นเลื่อนเข้ามาจากขวา (แบบ C ที่เจ้าของร้านเลือก) ปิดอยู่ก็ซ่อนไว้นอกจอทางขวา
         ปักกับขอบจอจริงทั้งบนล่าง ไม่พึ่ง h-full/dvh ที่ Safari บนมือถือรีเฟลตไม่ทันตอนแถบ address bar ยุบ */
      #cart-container {
        position: fixed !important;
        top: 0; right: 0; bottom: 0; left: auto;
        width: min(88vw, 440px) !important;
        height: auto !important;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 0;
        border-radius: var(--r-lg) 0 0 var(--r-lg);
        overflow: hidden;
        z-index: 60;
        transform: translateX(105%);
        transition: transform .28s cubic-bezier(.2, .8, .2, 1) !important;
        box-shadow: -14px 0 30px -12px rgba(22, 56, 40, .35) !important;
      }
      #cart-container.is-open { transform: none; }
      .cart-scrim {
        display: block; position: fixed; inset: 0; z-index: 55;
        background: rgba(22, 56, 40, .4);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
      }
      .cart-scrim.is-on { opacity: 1; pointer-events: auto; }
      .pos-bottom-bar {
        display: flex; align-items: center; gap: 10px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: #fff; border-top: 1px solid var(--color-sand);
        box-shadow: 0 -8px 18px -12px rgba(22, 56, 40, .35);
        padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
      }
      .cart-edge-tab {
        display: grid; justify-items: center; gap: 2px;
        position: fixed; right: 0; top: 46%; z-index: 45;
        width: 54px; padding: 12px 0 10px 6px;
        border-radius: var(--r-md) 0 0 var(--r-md);
        background: var(--color-primary); color: #fff;
        box-shadow: -6px 6px 16px -8px rgba(0, 0, 0, .45);
      }
      .cart-edge-tab.hidden { display: none; }
      .cart-edge-tab.is-edit { background: var(--color-edit); }
      /* พนักงานดื่ม/ของเสีย: แถบล่างกับแท็บเป็นสีฟ้าเดียวกับปุ่มโหมด บอกว่าไม่ใช่ยอดขาย */
      .cart-edge-tab.is-free { background: var(--color-staff-drink); }
      .pos-bottom-bar.is-free #pos-bar-total { color: var(--color-staff-drink); }
      .pos-bottom-bar.is-free #btn-bar-view { border-color: var(--color-staff-drink); color: var(--color-staff-drink); }
      #btn-hold-order { white-space: nowrap; padding: 0 12px; }
      /* กันเนื้อหาเมนูโดนแถบล่าง (fixed) บังตอนเลื่อนดูสินค้า */
      #pos-content-scroll { padding-bottom: calc(88px + env(safe-area-inset-bottom) + 1rem) !important; }
    }

    /* Print Styles */
    @media print {
      /* ซ่อนทุกอย่างที่เป็นลูกของ body ยกเว้น receipt-container */
      body > *:not(#receipt-container) { 
        display: none !important; 
      }
      
      /* บังคับแสดง receipt-container (แก้บัค Tailwind class="hidden") */
      #receipt-container {
        display: block !important;
        visibility: visible !important;
        position: relative;
        width: 80mm; /* ขนาดสลิป 80mm ปกติ */
        margin: 0;
        padding: 0;
        font-family: 'Sarabun', sans-serif;
        color: #000;
      }
      
      /* ซ่อน Header/Footer ของ Browser */
      @page { 
        margin: 0;
        size: 80mm auto;
      }
    }

    /* ===== Pill Checkbox : ปุ่มกดเลือกแบบ Toggle ===== */
    input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }

    label:has(> input[type="checkbox"][id^="rs-show"]),
    label:has(> input.emp-perm-checkbox) {
      display: flex; align-items: center; justify-content: center;
      gap: 0; text-align: center;
      padding: 0.55rem 0.85rem;
      min-height: 2.75rem; /* ~44px: ให้แตะง่ายบนมือถือ ปุ่ม pill toggle เดิมเตี้ยเกินไป */
      border-radius: 9999px;
      background: #fdf3dd;
      border: 1.5px solid var(--color-sand);
      color: var(--color-secondary);
      font-weight: 700; font-size: 0.8rem; line-height: 1.2;
      cursor: pointer; -webkit-user-select: none; user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
    }
    label:has(> input[type="checkbox"][id^="rs-show"]) > input[type="checkbox"],
    label > input.emp-perm-checkbox {
      position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;
    }
    label:has(> input[type="checkbox"][id^="rs-show"]:checked),
    label:has(> input.emp-perm-checkbox:checked) {
      background: var(--color-primary); border-color: var(--color-primary); color: var(--color-mustard);
    }
    label:has(> input[type="checkbox"][id^="rs-show"]):active,
    label:has(> input.emp-perm-checkbox):active { transform: scale(0.96); }


    /* ===== หน้าจอล็อก PIN =====
       แก้วกาแฟใบใหญ่ทำหน้าที่แทนช่องกรอกหกช่อง กดหนึ่งหลักกาแฟขึ้นหนึ่งขีด
       จอกลับด้านเป็นกรมท่า อ่านง่ายกว่าครีมตอนแดดส่องเข้าร้าน แป้นตัวเลขอยู่บนแผ่นครีมที่โค้งขึ้นมา */
    #pin-lock-screen {
      background: var(--color-primary);
      color: var(--color-cream);
      overflow: hidden;
    }

    #pin-stage {
      position: absolute; left: 0; right: 0; top: 0; height: 51vh; min-height: 300px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 0 24px;
    }
    #pin-shop { font-size: 12.5px; font-weight: 700; opacity: .6; letter-spacing: .08em; margin: 0 0 18px; }

    #pin-cup { position: relative; width: 132px; height: 172px; flex: none; }
    #pin-glass {
      position: absolute; inset: 0;
      border: 3px solid rgba(255, 253, 245, .85);
      border-radius: 10px 10px 30px 30px;
      background: rgba(255, 253, 245, .05);
      overflow: hidden;
    }
    #pin-handle {
      position: absolute; right: -30px; top: 44px; width: 34px; height: 62px;
      border: 3px solid rgba(255, 253, 245, .85); border-left: none; border-radius: 0 22px 22px 0;
    }
    /* กาแฟในแก้ว ความสูงเป็นเปอร์เซ็นต์ที่ JS ตั้งตามจำนวนหลักที่กรอกแล้ว
       (ไม่ใช้ calc(var(--level) * 100%) เพราะเบราว์เซอร์ทิ้งค่านั้นแล้วความสูงกลายเป็น auto = 0) */
    #pin-fill {
      position: absolute; left: 0; right: 0; bottom: 0; height: 0;
      background: linear-gradient(180deg, var(--color-mustard) 0 6px, #e0a03a 6px);
      transition: height .3s cubic-bezier(.3, .9, .35, 1), background .2s ease;
    }
    /* ฟองนมอยู่บนผิวกาแฟ ตอนเข้าได้แก้วเต็มพอดี จึงเกาะขอบบนของแก้ว */
    #pin-foam {
      position: absolute; left: 0; right: 0; top: 0; height: 0; opacity: 0;
      background: rgba(255, 253, 245, .92);
      transition: height .34s ease, opacity .2s ease;
    }
    /* ขีดบอกระดับหกขั้น = หกหลัก */
    #pin-ticks { position: absolute; inset: 0; }
    #pin-ticks i {
      position: absolute; right: 8px; width: 14px; height: 2px;
      background: rgba(255, 253, 245, .35);
      bottom: calc(12px + var(--i) * 26px);
      transition: width .18s ease, background-color .18s ease;
    }
    #pin-ticks i.is-on { width: 20px; background: var(--color-cream); }

    /* จุดหกจุดใต้แก้ว โชว์ตัวเลขที่เพิ่งกดแวบหนึ่งแล้วกลับเป็นจุด */
    #pin-count {
      display: flex; gap: 10px; margin: 20px 0 0;
      font-size: 15px; font-weight: 700; letter-spacing: .04em;
    }
    #pin-count span {
      width: 14px; text-align: center; color: rgba(255, 253, 245, .35);
      transition: color .16s ease;
    }
    #pin-count span.is-on { color: var(--color-cream); }
    #pin-count span.is-pop { animation: pin-count-pop .2s ease-out; }

    /* คำใบ้กับข้อความผิดใช้ที่เดียวกัน สลับกันแสดง แป้นตัวเลขจะได้ไม่ขยับ */
    #pin-hint {
      margin: 12px 0 -1.25rem; min-height: 1.25rem;
      font-size: 13px; font-weight: 700; color: rgba(255, 253, 245, .55);
    }
    #pin-hint.is-off { visibility: hidden; }

    #pin-lock-error {
      min-height: 1.25rem; margin: 12px 0 0;
      font-size: 13px; font-weight: 700; color: #ffb4b4;
      visibility: hidden;
    }
    #pin-lock-error.is-shown { visibility: visible; }

    /* ผิด: กาแฟเปลี่ยนเป็นแดงแล้วแก้วสั่น */
    #pin-cup.is-error #pin-fill { background: #e05a5a; }
    #pin-cup.is-shaking { animation: pin-shake .48s ease-in-out; }

    /* เปิดหน้าล็อก: แก้วลอยขึ้นมา แผ่นปุ่มดันขึ้นตาม */
    #pin-lock-screen.is-dealing #pin-cup { animation: pin-glass-in .42s cubic-bezier(.2, .8, .3, 1) backwards; }
    #pin-lock-screen.is-dealing #pin-sheet { animation: pin-sheet-in .42s cubic-bezier(.2, .8, .3, 1) backwards; }

    #pin-sheet {
      position: absolute; left: 0; right: 0; bottom: 0; top: 51vh;
      min-height: 400px;
      background: var(--color-cream);
      border-radius: 34px 34px 0 0;
      box-shadow: 0 -14px 40px rgba(0, 0, 0, .16);
      padding: 26px 30px calc(26px + env(safe-area-inset-bottom, 0px));
      display: flex; align-items: center; justify-content: center;
      transition: transform .5s cubic-bezier(.65, 0, .2, 1);
    }
    #pin-pad {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px;
      width: 100%; max-width: 320px;
    }
    .pin-key {
      min-height: 64px; border: none; border-radius: 999px; background: transparent;
      font-family: inherit; font-size: 26px; font-weight: 700; color: var(--color-primary);
      transition: transform .1s ease, background-color .14s ease;
    }
    .pin-key:active { background: var(--color-accent); transform: scale(.9); }
    .pin-key-del { font-size: 21px; color: #f87171; }
    .pin-key-clear { font-size: 14px; color: #94a3b8; }

    /* เข้าได้: ฟองนมขึ้น ควันลอย แผ่นปุ่มเลื่อนลง แล้วทักชื่อ */
    #pin-hello {
      position: absolute; left: 24px; right: 24px; top: 58%;
      text-align: center; font-size: 21px; font-weight: 700; color: var(--color-cream);
      opacity: 0; margin: 0;
    }
    #pin-hello small { display: block; font-size: 12.5px; font-weight: 700; opacity: .6; margin-top: 4px; }

    #pin-steam { position: absolute; top: -46px; left: 50%; width: 60px; height: 42px; transform: translateX(-50%); }
    #pin-steam i {
      position: absolute; bottom: 0; width: 6px; height: 22px; border-radius: 3px;
      background: rgba(255, 253, 245, .75); opacity: 0;
    }
    #pin-steam i:nth-child(1) { left: 10px; }
    #pin-steam i:nth-child(2) { left: 27px; }
    #pin-steam i:nth-child(3) { left: 44px; }

    #pin-lock-screen.is-go #pin-foam { height: 26px; opacity: 1; }
    #pin-lock-screen.is-go #pin-sheet { transform: translateY(105%); }
    #pin-lock-screen.is-go #pin-stage { animation: pin-stage-rise .5s cubic-bezier(.3, .8, .3, 1) forwards; }
    #pin-lock-screen.is-go #pin-hello { animation: pin-hello-in .45s ease-out .28s forwards; }
    #pin-lock-screen.is-go #pin-steam i { animation: pin-steam 1s ease-out forwards; }
    #pin-lock-screen.is-go #pin-steam i:nth-child(2) { animation-delay: .1s; }
    #pin-lock-screen.is-go #pin-steam i:nth-child(3) { animation-delay: .2s; }

    /* is-unlocking = ยังต้องแสดงอยู่แม้ใส่ hidden แล้ว, is-go = เริ่มขยับ
       แยกสองคลาสเพราะถ้าใส่พร้อมกัน เบราว์เซอร์จะคิดค่าปลายทางเป็นค่าเริ่มต้น แล้วกระโดดข้ามอนิเมชันไปเลย */
    /* ปิดหน้าล็อกต้องใส่คลาส hidden ทันทีเสมอ (มีโค้ดอ่านคลาสนี้เป็นสถานะจริง)
       จึงบังคับให้ยังแสดงอยู่ระหว่างอนิเมชันแทนการหน่วงใส่ hidden */
    #pin-lock-screen.is-unlocking.hidden { display: block !important; }

    @keyframes pin-count-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
    @keyframes pin-glass-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
    @keyframes pin-sheet-in { from { transform: translateY(40px); } to { transform: none; } }
    @keyframes pin-stage-rise { to { transform: translateY(90px) scale(1.06); } }
    @keyframes pin-hello-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @keyframes pin-steam {
      0% { opacity: 0; transform: translateY(8px) scaleY(.6); }
      40% { opacity: .8; }
      100% { opacity: 0; transform: translateY(-28px) scaleY(1.4); }
    }
    @keyframes pin-shake {
      0%, 100% { transform: translateX(0); }
      15% { transform: translateX(-8px); }
      30% { transform: translateX(8px); }
      45% { transform: translateX(-6px); }
      60% { transform: translateX(6px); }
      75% { transform: translateX(-3px); }
      90% { transform: translateX(3px); }
    }

    /* จอกว้าง (แท็บเล็ต/Mac): แผ่นปุ่มไม่ยืดเต็มจอ ไม่งั้นเป็นแผ่นครีมว่างๆ ยาวทั้งหน้า
       ใช้ margin auto ไม่ใช้ transform เพราะ transform ถูกใช้ตอนเลื่อนแผ่นลงแล้ว */
    @media (min-width: 700px) {
      #pin-sheet {
        max-width: 460px; margin: 0 auto;
        border-radius: 34px 34px 0 0;
        box-shadow: 0 -14px 60px rgba(0, 0, 0, .22);
      }
    }

    /* จอสูงพอ ให้แก้วมีที่หายใจมากขึ้น */
    @media (min-height: 900px) {
      #pin-stage { height: 46vh; }
      #pin-sheet { top: 46vh; }
    }

    /* เครื่องที่ตั้งค่าลดการเคลื่อนไหว ให้เห็นสถานะครบเหมือนเดิมแต่ไม่ต้องขยับ */
    @media (prefers-reduced-motion: reduce) {
      .modal-opening,
      .modal-opening > *,
      .modal-sheet.modal-opening > *,
      .modal-sheet-mobile.modal-opening > *,
      #menu-grid.is-entering > *,
      #order-menu-grid.is-entering > *,
      .card-added,
      #cart-badge-mobile.is-bump,
      .pos-qty-badge.is-bump,
      .cart-line-in,
      .cart-qty-pop { animation: none; }
      .cart-line-out { animation: none; opacity: 0; }
      #menu-cat-indicator,
      #order-cat-indicator { transition: none; }

      /* หน้าสั่งของลูกค้า */
      #view-welcome > div > *,
      #order-cart-bar.is-rising,
      #view-submitted.view-enter,
      #view-submitted.view-enter > * > *,
      .status-pop,
      .status-lift,
      .status-rise,
      .queue-num-pop { animation: none; }

      /* หน้าเครื่องขาย รอบที่สี่ */
      .view-entering,
      .sum-cards.is-entering > *,
      #cart-queue-chip.is-pop,
      #cart-paid-mark.is-pop,
      #cart-container.is-paid,
      .cart-line-sweep,
      .badge-alert,
      .icon-shake { animation: none; }
      .cart-line-sweep { opacity: 0; }
      #cart-paid-mark.is-pop::before,
      #cart-paid-mark.is-pop::after { display: none; }
      /* วงแหวนไม่มีความหมายถ้าไม่ขยาย ซ่อนไปเลยดีกว่าค้างเป็นวงนิ่งๆ */
      .status-ring::before,
      .status-ring::after { display: none; }

      /* หน้าล็อก PIN: เห็นสถานะครบเหมือนเดิม แค่ไม่ขยับ */
      #pin-lock-screen.is-dealing #pin-cup,
      #pin-lock-screen.is-dealing #pin-sheet,
      #pin-lock-screen.is-go #pin-stage,
      #pin-lock-screen.is-go #pin-hello,
      #pin-lock-screen.is-go #pin-steam i,
      #pin-count span.is-pop,
      #pin-cup.is-shaking { animation: none; }
      #pin-fill, #pin-foam, #pin-sheet { transition: none; }
      #pin-lock-screen.is-go #pin-hello { opacity: 1; }
    }

    /* ===== อนิเมชันหน้าขายหลัก =====
       ค่าที่ใช้มาจากที่เจ้าของร้านเลือกไว้ในหน้าทดลอง:
       กดสั่ง = กลาง, รายการในตะกร้า = เบา, เปลี่ยนหมวด = เต็ม
       ทุกอันเป็น transform/opacity ล้วน ไม่แตะ layout จะได้ไม่ทำให้เครื่องหน่วง */

    /* ---- เปลี่ยนหมวด: การ์ดไล่กันขึ้นมาทีละใบ ---- */
    #menu-grid.is-entering > *,
    #order-menu-grid.is-entering > * {
      animation: card-in .44s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
      animation-delay: calc(var(--i, 0) * 55ms);
    }
    @keyframes card-in {
      from { opacity: 0; transform: translateY(26px) scale(.97); }
      to   { opacity: 1; transform: none; }
    }

    /* ---- แถบหมวด: ตัวชี้ที่เลื่อนตามปุ่มที่เลือก ----
       ตัวชี้อยู่นอก track ที่ถูกวาดใหม่ ไม่งั้นโดน innerHTML ล้างทุกครั้งที่เปลี่ยนหมวด */
    #menu-categories,
    #order-categories { position: relative; }
    #menu-categories-track,
    #order-categories-track { display: flex; gap: .5rem; position: relative; z-index: 1; }
    #menu-cat-indicator,
    #order-cat-indicator {
      position: absolute;
      top: 0;
      left: 0;
      height: 2.75rem;
      border-radius: var(--r-pill);
      background: var(--color-primary);
      box-shadow: var(--sh-2);
      transition: transform .44s cubic-bezier(0.34, 1.56, 0.64, 1),
                  width .44s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
      z-index: 0;
      opacity: 0;
    }
    #menu-cat-indicator.is-ready,
    #order-cat-indicator.is-ready { opacity: 1; }

    /* ---- แท็บราคาพนักงาน: สีดินเผาทั้งปุ่ม ตัวชี้ และป้าย ให้คนคิดเงินเห็นชัดว่ากำลังขายราคาพนักงานอยู่ ---- */
    #menu-categories-track .cat-staff:not(.is-active-cat) { border-color: var(--color-mustard); color: var(--color-mustard); }
    #menu-cat-indicator.is-staff { background: var(--color-mustard); }
    /* สามโหมดของแท็บพนักงาน: ขาย (ดินเผา) พนักงานดื่ม (ฟ้าอมเขียว) ของเสีย (แดง) สีบอกว่ากดการ์ดแล้วจะเกิดอะไร */
    :root { --color-staff-drink: #2f6f8f; }
    .menu-staff-banner { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
    .menu-staff-banner.hidden { display: none; }
    .staff-head {
      flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
      border: 1px solid var(--color-mustard); border-radius: var(--r-sm); background: color-mix(in srgb, var(--color-mustard) 12%, #fff);
    }
    .staff-head b { color: #8a4220; font-size: 15px; }
    .staff-head-back { min-height: 40px; padding: 0 14px; border: 1px solid var(--color-sand); border-radius: var(--r-sm); background: #fff; color: var(--color-secondary); font-family: inherit; font-size: 14px; font-weight: 800; }
    .staff-mode {
      flex: 1 1 140px; min-height: 52px; padding: 6px 10px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2;
      border: 2px solid var(--color-sand); border-radius: var(--r-sm); background: #fff;
      font-family: inherit; font-size: 14px; font-weight: 800; color: var(--color-secondary);
    }
    .staff-mode small { font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .staff-mode.is-on small { color: #fff; opacity: .9; }
    .staff-mode-sale.is-on { background: var(--color-mustard); border-color: var(--color-mustard); color: #fff; }
    .staff-mode-drink.is-on { background: var(--color-staff-drink); border-color: var(--color-staff-drink); color: #fff; }
    .staff-mode-waste.is-on { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
    /* จำนวนพนักงานดื่ม/ของเสียของวันนี้ มุมขวาบนของการ์ด */
    .pos-card { position: relative; }
    .pos-free-badge {
      position: absolute; top: -8px; right: -6px; z-index: 2;
      min-width: 30px; height: 26px; padding: 0 8px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 2px solid #fff; border-radius: var(--r-pill); color: #fff;
      font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums;
    }
    .pos-free-badge.is-drink { background: var(--color-staff-drink); }
    .pos-free-badge.is-waste { background: var(--color-danger); }
    /* กล่องบันทึกวันนี้ใต้ออเดอร์ ยาวได้ไม่เกินราวสองในห้าของคอลัมน์ ที่เหลือเลื่อนในกล่อง */
    #cart-free-box { max-height: 40%; overflow-y: auto; }
    .cart-free { border: 1px solid var(--color-sand); background: var(--color-cream); border-radius: var(--r-md); padding: 10px 12px; }
    .cart-free-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
    .cart-free-h b { font-size: 14px; color: var(--color-secondary); }
    .cart-free-h span { font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .cart-free-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--color-fill-2); }
    .cart-free-row:first-of-type { border-top: none; }
    .cart-free-tag { flex: none; padding: 1px 8px; border-radius: var(--r-pill); color: #fff; font-size: 11px; font-weight: 800; }
    .cart-free-tag.is-drink { background: var(--color-staff-drink); }
    .cart-free-tag.is-waste { background: var(--color-danger); }
    .cart-free-name { flex: 1; min-width: 0; font-weight: 700; color: var(--color-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cart-free-qty { font-weight: 900; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
    .cart-free-minus { flex: none; width: 40px; height: 40px; border: 1px solid var(--color-sand); border-radius: var(--r-sm); background: #fff; color: var(--color-danger); font-family: inherit; font-size: 22px; font-weight: 800; }
    .cart-free-minus:active { transform: scale(.94); }
    .cart-free-pill { flex: none; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; }
    .cart-free-pill.is-unsent { background: color-mix(in srgb, var(--color-mustard) 18%, #fff); color: #8a4220; border: 1px solid var(--color-mustard); }
    .cart-free-pill.is-sent { background: var(--color-accent); color: var(--color-primary); border: 1px solid var(--color-sand); }
    .cart-free-send { width: 100%; margin-top: 8px; min-height: 46px; border: none; border-radius: var(--r-sm); background: var(--color-primary); color: #fff; font-family: inherit; font-size: 15px; font-weight: 800; }
    .cart-free-send:active { transform: scale(.98); }
    .cart-free-sum { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--color-sand); font-size: 13px; font-weight: 800; color: var(--color-secondary); }
    .pos-price-staff { color: var(--color-mustard); text-align: right; }
    #menu-grid.staff-mode-drink .pos-price-staff { color: var(--color-staff-drink); }
    #menu-grid.staff-mode-waste .pos-price-staff { color: var(--color-danger); }
    .pos-price-staff s { display: block; font-size: 12.5px; font-weight: 700; color: var(--color-mute); }
    /* ---- บิลกลุ่ม: สีม่วงพลัม แยกจากพนักงาน (ดินเผา) พนักงานดื่ม (ฟ้า) ของเสีย (แดง) ---- */
    :root { --color-group: #5b4b8a; }
    .group-new {
      padding: 4px 10px; border: 1px dashed var(--color-group); border-radius: var(--r-pill);
      background: #fff; color: var(--color-group); font-family: inherit; font-size: 12px; font-weight: 800; white-space: nowrap;
    }
    .group-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .group-chip {
      flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
      border: 1px solid color-mix(in srgb, var(--color-group) 40%, #fff); border-radius: var(--r-pill);
      background: color-mix(in srgb, var(--color-group) 8%, #fff); color: var(--color-group);
      font-family: inherit; font-size: 13px; font-weight: 800; white-space: nowrap;
    }
    .group-chip small { font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; }
    .group-chip.is-on { background: var(--color-group); border-color: var(--color-group); color: #fff; }
    .group-bar {
      display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px;
      border: 1px solid color-mix(in srgb, var(--color-group) 35%, #fff); border-radius: var(--r-sm);
      background: color-mix(in srgb, var(--color-group) 10%, #fff);
    }
    .group-bar b { color: var(--color-group); font-size: 14px; }
    .group-bar span { font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .group-person {
      display: flex; justify-content: space-between; padding-top: 10px; margin-top: 4px;
      border-top: 1px solid var(--color-sand); color: var(--color-group); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
    }
    #cart-items .group-person:first-child { border-top: none; margin-top: 0; }
    .person-btn {
      min-height: 44px; padding: 0 14px; border: 1px solid var(--color-sand); border-radius: var(--r-sm);
      background: #fff; color: var(--color-secondary); font-family: inherit; font-size: 14px; font-weight: 700;
    }
    .person-btn.is-on { background: var(--color-group); border-color: var(--color-group); color: #fff; }
    .person-btn.is-add { border-style: dashed; border-color: var(--color-group); color: var(--color-group); }
    .group-chip.is-old { border-style: dashed; }
    .group-chip em { font-style: normal; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: var(--r-pill); background: var(--color-mustard); color: #fff; }
    .group-del { flex: none; min-height: 32px; padding: 0 10px; border: 1px solid var(--color-sand); border-radius: var(--r-sm); background: #fff; color: var(--color-danger); font-family: inherit; font-size: 12px; font-weight: 800; }
    .group-bar span { flex: 1; text-align: right; }
    .group-paid { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--color-accent); color: var(--color-primary); font-size: 13px; font-weight: 800; }
    .group-paid small { font-weight: 700; color: var(--color-mute); white-space: nowrap; }
    /* หน้าต่างเลือกว่าจ่ายทั้งบิลหรือแยกจ่าย */
    .group-pay-t { margin: 0; font-size: 18px; font-weight: 800; color: var(--color-secondary); }
    .group-pay-sub { margin: -6px 0 0; font-size: 13px; font-weight: 700; color: var(--color-mute); }
    .group-pay-choice { display: grid; gap: 10px; }
    .group-pay-btn {
      min-height: 54px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25;
      border: 1px solid var(--color-sand); border-radius: var(--r-sm); background: #fff; color: var(--color-secondary);
      font-family: inherit; font-size: 16px; font-weight: 800;
    }
    .group-pay-btn small { font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .group-pay-btn.is-go { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
    .group-pay-btn.is-go small { color: #fff; opacity: .85; }
    .group-pay-btn.is-group { border-color: var(--color-group); color: var(--color-group); }
    .group-pay-btn[disabled] { opacity: .5; }
    .split-person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left; border: 1px solid var(--color-sand); border-radius: var(--r-md); background: #fff; font-family: inherit; }
    .split-person.is-on { border-color: var(--color-group); background: color-mix(in srgb, var(--color-group) 7%, #fff); }
    .split-box { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-sand); border-radius: 7px; color: #fff; font-weight: 900; }
    .split-person.is-on .split-box { background: var(--color-group); border-color: var(--color-group); }
    .split-info { flex: 1; min-width: 0; }
    .split-info b { display: block; color: var(--color-secondary); font-size: 15px; }
    .split-info small { display: block; color: var(--color-mute); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .split-amt { font-weight: 900; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
    /* ตารางพนักงานและของเสียในหน้ายอดขาย */
    .staff-sum-wrap { overflow-x: auto; }
    .staff-sum { width: 100%; min-width: 380px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
    .staff-sum th { text-align: right; font-size: 12px; font-weight: 700; color: var(--color-mute); padding: 6px 8px; border-bottom: 1px solid var(--color-sand); }
    .staff-sum td { text-align: right; padding: 10px 8px; border-bottom: 1px dashed var(--color-fill-2); font-weight: 700; color: var(--color-secondary); }
    .staff-sum th:first-child, .staff-sum td:first-child { text-align: left; }
    .staff-sum tr.is-sum td { border-bottom: none; border-top: 1px solid var(--color-sand); font-weight: 800; }
    .staff-sellers-t { margin-top: 18px; }
    .staff-sum tr.is-flag td { color: var(--color-danger); }
    .staff-flag { margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 800; }
    .staff-sum-kind { display: inline-flex; align-items: center; gap: 8px; }
    .staff-sum-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
    .history-free-tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: var(--r-pill); color: #fff; font-size: 11px; font-weight: 800; }
    .history-free-tag.is-drink { background: var(--color-staff-drink); }
    .history-free-tag.is-waste { background: var(--color-danger); }
    .cart-staff-tag {
      display: inline-block; margin-right: 4px; padding: 1px 8px;
      border-radius: var(--r-pill);
      background: var(--color-mustard); color: #fff;
      font-size: 11.5px; font-weight: 800;
    }

    /* ---- กดสั่ง: การ์ดเด้งรับ ---- */
    .card-added { animation: card-added .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes card-added {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.14) translateY(-6px); }
      100% { transform: scale(1); }
    }

    /* ของที่ลอยจากหน้าต่างสินค้าไปตะกร้า สร้างชั่วคราวแล้วลบทิ้งเมื่อจบ */
    .cart-fly {
      position: fixed;
      z-index: 200;
      pointer-events: none;
      border-radius: 1rem;
      background: linear-gradient(135deg, var(--color-accent), var(--color-sand));
      border: 1px solid var(--color-sand);
      box-shadow: 0 12px 26px -12px rgba(31, 77, 58, .75);
    }

    /* ตัวเลขบนตะกร้าเด้งตอนของมาถึง
       ใช้ visibility ไม่ใช่ display ไม่งั้นอนิเมชันเล่นไม่ได้ (แบบเดียวกับ #pin-lock-error) */
    #cart-badge-mobile { visibility: hidden; }
    #cart-badge-mobile.is-on { visibility: visible; }
    #cart-badge-mobile.is-bump { animation: badge-bump .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes badge-bump {
      0%   { transform: scale(1); }
      45%  { transform: scale(1.35); }
      100% { transform: scale(1); }
    }

    /* ---- รายการในตะกร้า: เบาที่สุดในสามอย่าง เพราะเปลี่ยนทุกครั้งที่กด ---- */
    .cart-line-in { animation: cart-line-in .14s ease-out; }
    @keyframes cart-line-in {
      from { opacity: 0; transform: translateX(8px); }
      to   { opacity: 1; transform: none; }
    }
    .cart-line-out { animation: cart-line-out .14s ease-in forwards; pointer-events: none; }
    @keyframes cart-line-out {
      to { opacity: 0; transform: translateX(-8px); }
    }
    .cart-qty-pop { display: inline-block; animation: cart-qty-pop .14s ease-out; }
    @keyframes cart-qty-pop {
      0%   { transform: scale(1); }
      45%  { transform: scale(1.25); }
      100% { transform: scale(1); }
    }

    /* ===== ป๊อปอัพ: อนิเมชันตอนเปิด =====
       ระดับ "เต็ม" ตามที่เจ้าของร้านเลือกจากหน้าทดลอง
       ตอนปิดไม่มีอนิเมชัน หายทันทีเหมือนเดิม เจตนาเลย คนกดปิดเพราะอยากให้มันไปเร็วๆ
       และการหน่วงตอนปิดจะกระทบโค้ดอีกหลายจุดที่อ่านสถานะว่าหน้าต่างเปิดอยู่ไหม */

    /* กรอบนอกจางเข้ามาพร้อมกัน ทั้งสีทึบและเบลอ
       ห้ามใส่ transform ที่ตัวนี้เด็ดขาด เพราะมี backdrop-filter อยู่
       ถ้าขยับ transform ด้วย เบราว์เซอร์จะคำนวณเบลอใหม่ทุกเฟรม แท็บเล็ตกระตุกแน่ */
    .modal-opening { animation: modal-backdrop-in .32s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes modal-backdrop-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* แผ่นขาวข้างในเป็นตัวที่ขยับ ย่อมาจาก 92% */
    .modal-opening > * {
      animation: modal-panel-in .32s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes modal-panel-in {
      from { opacity: 0; transform: scale(.92) translateY(14px); }
      to   { opacity: 1; transform: none; }
    }

    @keyframes modal-sheet-in {
      from { transform: translateY(90px); }
      to   { transform: none; }
    }

    /* หน้าต่างที่ติดขอบล่างเสมอ (เมนูแท็บ Settings, หน้าสั่งของลูกค้า) เด้งขึ้นมาตลอด */
    .modal-sheet.modal-opening > * {
      animation: modal-sheet-in .32s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* หน้าต่างสินค้ากับหน้าชำระเงินเป็น items-end lg:items-center
       คือติดขอบล่างเฉพาะจอเล็ก จอใหญ่ไปอยู่กลางจอ อนิเมชันต้องสลับตามที่ 1024px ให้ตรงกับจุดตัด lg ของ Tailwind */
    @media (max-width: 1023px) {
      .modal-sheet-mobile.modal-opening > * {
        animation: modal-sheet-in .32s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
    }

    /* ===== หน้าสั่งของลูกค้า (order.html) =====
       ใช้ระดับเดียวกับหน้าขายของพนักงานทุกอย่าง ยกเว้นจังหวะเปลี่ยนสถานะที่เลือกไว้ระดับ "เต็ม"
       ข้อควรระวังที่สำคัญที่สุด: หน้านี้ถามเซิร์ฟเวอร์ทุก 12 วินาที ได้คำตอบเดิมเป็นส่วนใหญ่
       อนิเมชันทุกตัวในกลุ่มสถานะจึงต้องถูกสั่งจาก order.js เฉพาะตอนค่าเปลี่ยนจริงเท่านั้น */

    /* ---- แถบตะกร้าล่างโผล่ครั้งแรก ----
       แถบนี้เป็นลูกของ body แบบ flex (ไม่ได้ fixed เหมือนฝั่งพนักงาน) การโชว์จึงดันเนื้อหาเมนูขึ้น
       ขยับด้วย transform อย่างเดียว ตำแหน่งจริงเลยไม่เปลี่ยน ไม่มีอาการเนื้อหากระตุกตาม */
    /* ---- ปุ่มสลับภาษา TH/EN ----
       อยู่สองที่: มุมขวาบนของหน้าต้อนรับ กับในแถบหัวเพจตอนดูเมนู
       order.js เป็นคนใส่/ถอดคลาส is-lang-on ให้ตามภาษาที่เลือกอยู่ */
    .lang-pill button {
      color: var(--color-ink);
      transition: background-color .15s ease, color .15s ease;
    }
    .lang-pill button.is-lang-on {
      background: var(--color-primary);
      color: var(--color-cream);
    }

    /* ---- หน้าต้อนรับก่อนเข้าเมนู ----
       ชื่อร้านกับปุ่มไล่กันขึ้นมาเบาๆ ส่วนขบวนอาหารที่กระโดดอยู่ข้างหลังวาดด้วย canvas ใน order.js
       ตอนออก: จางลงพร้อมยกขึ้นนิดเดียว แล้ว order.js ค่อยใส่ hidden ให้หลังจบจังหวะ (300ms) */
    #view-welcome > div > * {
      animation: welcome-in .5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }
    #view-welcome > div > *:nth-child(2) { animation-delay: 80ms; }
    #view-welcome > div > *:nth-child(3) { animation-delay: 160ms; }
    @keyframes welcome-in {
      from { opacity: 0; transform: translateY(14px) scale(.96); }
      to   { opacity: 1; transform: none; }
    }
    #view-welcome.is-leaving {
      opacity: 0;
      transform: translateY(-12px);
      transition: opacity .3s ease, transform .3s ease;
      pointer-events: none;
    }

    #order-cart-bar.is-rising { animation: order-bar-in .32s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes order-bar-in {
      from { opacity: 0; transform: translateY(100%); }
      to   { opacity: 1; transform: none; }
    }

    /* ---- หน้าสถานะหลังส่งออเดอร์: ทั้งหน้าจางขึ้นมา แล้วการ์ดไล่กันทีละใบ ---- */
    #view-submitted.view-enter { animation: order-view-in .34s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes order-view-in {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
    #view-submitted.view-enter > div > * {
      animation: order-box-in .42s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }
    #view-submitted.view-enter > div > *:nth-child(1) { animation-delay: 0ms; }
    #view-submitted.view-enter > div > *:nth-child(2) { animation-delay: 70ms; }
    #view-submitted.view-enter > div > *:nth-child(3) { animation-delay: 140ms; }
    #view-submitted.view-enter > div > *:nth-child(4) { animation-delay: 210ms; }
    #view-submitted.view-enter > div > *:nth-child(5) { animation-delay: 280ms; }
    @keyframes order-box-in {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: none; }
    }

    /* ---- จังหวะเปลี่ยนสถานะ ----
       ไอคอนเด้งใช้ทุกสถานะ ส่วนวงแหวนกับการ์ดยกตัวใส่เฉพาะข่าวดี (ร้านรับออเดอร์ / เครื่องดื่มเสร็จ)
       ข่าวร้ายอย่างถูกปฏิเสธหรือยกเลิก ได้แค่ไอคอนเด้ง จะได้ไม่ดูเหมือนกำลังฉลอง */
    #submitted-status-icon { position: relative; }

    .status-pop { animation: status-pop .46s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes status-pop {
      0%   { opacity: 0; transform: scale(.55); }
      55%  { opacity: 1; transform: scale(1.16); }
      100% { opacity: 1; transform: scale(1); }
    }

    /* วงแหวนสองวงกระจายออกจากไอคอน ใช้ pseudo-element จะได้ไม่ต้องเพิ่ม element ใน HTML
       (ไอคอนถูกเขียนทับ innerHTML ทุกครั้งที่สถานะเปลี่ยน element ที่ใส่เองจะหายอยู่ดี) */
    .status-ring::before,
    .status-ring::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid currentColor;
      animation: status-ring .85s cubic-bezier(.2, .7, .3, 1) backwards;
    }
    .status-ring::after { animation-delay: .14s; }
    @keyframes status-ring {
      from { opacity: .7; transform: scale(1); }
      to   { opacity: 0;  transform: scale(2.35); }
    }

    .status-lift { animation: status-lift .55s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes status-lift {
      0%   { transform: none; }
      38%  { transform: translateY(-7px); }
      100% { transform: none; }
    }

    .status-rise { animation: status-rise .34s ease-out; }
    @keyframes status-rise {
      from { opacity: 0; transform: translateY(7px); }
      to   { opacity: 1; transform: none; }
    }

    /* ตัวเลขคิวตอนลดลง ให้ลูกค้าจับได้ว่าขยับแล้วโดยไม่ต้องจ้อง */
    .queue-num-pop { display: inline-block; animation: queue-num-pop .34s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes queue-num-pop {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.45); }
      100% { transform: scale(1); }
    }

    /* ===== หน้าเครื่องขาย: จังหวะที่เหลือ =====
       ระดับ "เต็ม" สำหรับตอนปิดบิล ตามที่เจ้าของร้านเลือกจากหน้าทดลอง
       ข้อห้ามเดิมยังอยู่: ห้ามหน่วงการใส่คลาส hidden เพราะมีโค้ดอ่านคลาสนี้เป็นสถานะจริงอยู่สามที่ */

    /* ---- สลับหน้า ขาย/ตั้งค่า ---- */
    .view-entering { animation: view-in .26s cubic-bezier(0.2, 0.8, 0.3, 1); }
    @keyframes view-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }

    /* ---- การ์ดตัวเลขหน้าสรุป: ใช้ keyframes card-in ตัวเดียวกับตารางเมนู ---- */
    .sum-cards.is-entering > * {
      animation: card-in .44s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }
    .sum-cards.is-entering > *:nth-child(1) { animation-delay: 0ms; }
    .sum-cards.is-entering > *:nth-child(2) { animation-delay: 60ms; }
    .sum-cards.is-entering > *:nth-child(3) { animation-delay: 120ms; }
    .sum-cards.is-entering > *:nth-child(4) { animation-delay: 180ms; }

    /* ---- ออเดอร์ออนไลน์เข้าใหม่ ----
       ปุ่มสั่นครั้งเดียวตอนตัวเลข "เพิ่มขึ้น" เท่านั้น
       หน้านี้ถามเซิร์ฟเวอร์ทุก 8 วินาที ถ้าไม่กันไว้ปุ่มจะสั่นทั้งวันโดยไม่มีอะไรใหม่เลย */
    .icon-shake { animation: icon-shake .7s cubic-bezier(.36, .07, .19, .97); }
    @keyframes icon-shake {
      0%, 100% { transform: rotate(0); }
      12% { transform: rotate(-13deg); }
      26% { transform: rotate(11deg); }
      40% { transform: rotate(-8deg); }
      54% { transform: rotate(6deg); }
      68% { transform: rotate(-3deg); }
      82% { transform: rotate(2deg); }
    }
    /* ใช้ keyframes badge-bump ตัวเดียวกับตัวเลขบนตะกร้า ไม่ต้องเขียนใหม่ */
    .badge-alert { display: inline-block; animation: badge-bump .42s cubic-bezier(0.34, 1.56, 0.64, 1); }

    /* ---- ปิดบิล ----
       ทุกอย่างอยู่ในคอลัมน์ตะกร้า ไม่ใช่กลางจอ เพราะหน้าต่างถามพิมพ์ใบเสร็จเด้งทับกลางจอในจังหวะเดียวกัน */
    .cart-line-sweep {
      animation: cart-line-sweep .26s ease-in forwards;
      animation-delay: calc(var(--k, 0) * 45ms);
      pointer-events: none;
    }
    @keyframes cart-line-sweep {
      to { opacity: 0; transform: translateX(26px); }
    }

    #cart-queue-chip.is-pop { animation: chip-pop .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes chip-pop {
      0%   { opacity: 0; transform: scale(.5) translateY(-6px); }
      55%  { opacity: 1; transform: scale(1.14); }
      100% { opacity: 1; transform: scale(1); }
    }

    #cart-container.is-paid { animation: cart-paid-flash .6s ease-out; }
    @keyframes cart-paid-flash {
      0%   { background-color: #ffffff; }
      25%  { background-color: #ecfdf5; }
      100% { background-color: #ffffff; }
    }

    #cart-paid-mark.is-pop { animation: paid-pop .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes paid-pop {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
      55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    /* วงแหวนสองวงกระจายออก ระดับ "เต็ม" ชุดเดียวกับหน้าลูกค้าตอนเครื่องดื่มเสร็จ */
    #cart-paid-mark.is-pop::before,
    #cart-paid-mark.is-pop::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid currentColor;
      animation: paid-ring .85s cubic-bezier(.2, .7, .3, 1) backwards;
    }
    #cart-paid-mark.is-pop::after { animation-delay: .14s; }
    @keyframes paid-ring {
      from { opacity: .65; transform: scale(1); }
      to   { opacity: 0;   transform: scale(2.3); }
    }

    /* ===== หน้าชำระเงิน =====
       ชุดนี้เพิ่มทีหลังตามที่เจ้าของร้านเลือกจากหน้าทดลอง Checkout Motion
       ค่าเวลาและเส้นโค้งใช้ชุดเดียวกับอนิเมชันหน้าขายทั้งหมด ไม่ตั้งใหม่ */

    /* ---- ตัวเลขเงินที่รับมา เขียนค่าจริงทันทีเสมอ เด้งแค่ย้ำว่ากดติด ---- */
    .cash-digit-pop { display: inline-block; animation: cash-digit-pop .14s ease-out; }
    @keyframes cash-digit-pop {
      0%   { transform: scale(1); }
      45%  { transform: scale(1.12); }
      100% { transform: scale(1); }
    }

    /* ---- ปุ่มที่เพิ่งถูกเลือก (วิธีชำระเงิน, ป้ายส่วนลด) ---- */
    .is-picked { animation: picked-pop .22s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes picked-pop {
      0%   { transform: scale(1); }
      45%  { transform: scale(1.06); }
      100% { transform: scale(1); }
    }

    /* ---- แป้นตัวเลขเงินสดโผล่ ปุ่มไล่กันทีละแถว ---- */
    #checkout-numpad.numpad-in { animation: numpad-in .28s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes numpad-in {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
    #checkout-numpad.numpad-in .numpad-key {
      animation: numpad-key-in .26s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }
    #checkout-numpad.numpad-in .numpad-key:nth-child(3n+1) { animation-delay: 40ms; }
    #checkout-numpad.numpad-in .numpad-key:nth-child(3n+2) { animation-delay: 55ms; }
    #checkout-numpad.numpad-in .numpad-key:nth-child(3n+3) { animation-delay: 70ms; }
    #checkout-numpad.numpad-in .numpad-key:nth-child(n+7)  { animation-delay: 95ms; }
    #checkout-numpad.numpad-in .numpad-key:nth-child(n+10) { animation-delay: 125ms; }
    @keyframes numpad-key-in {
      from { opacity: 0; transform: translateY(10px) scale(.96); }
      to   { opacity: 1; transform: none; }
    }

    /* ---- หน้าต่างชำระเงินตอนปิด ----
       คลาส hidden ยังใส่ทันทีเหมือนเดิม (มีโค้ดอ่านคลาสนี้เป็นสถานะจริง)
       ตรงนี้แค่ฝืนให้ยังวาดอยู่อีก 180ms เพื่อเล่นจังหวะออก แล้ว JS ถอดคลาสทิ้ง */
    .modal-closing.hidden {
      display: flex !important;
      pointer-events: none;
      animation: modal-backdrop-out .18s ease-in forwards;
    }
    @keyframes modal-backdrop-out {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    .modal-closing.hidden > * {
      animation: modal-panel-out .18s ease-in forwards;
    }
    @keyframes modal-panel-out {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: scale(.94) translateY(8px); }
    }
    /* จอเล็กหน้าต่างติดขอบล่าง ให้ไหลลงไปทางเดิมที่มันขึ้นมา */
    @media (max-width: 1023px) {
      .modal-sheet-mobile.modal-closing.hidden > *,
      .modal-sheet.modal-closing.hidden > * {
        animation: modal-sheet-out .18s ease-in forwards;
      }
    }
    @keyframes modal-sheet-out {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: translateY(90px); }
    }

    /* ---- จังหวะปิดบิล: ล้างทั้งจอ ----
       z-index ต่ำกว่าหน้าต่างถามพิมพ์ใบเสร็จ (z-50/z-[92]) และไม่รับคลิกเลย
       พนักงานต้องกดปุ่มพิมพ์บิลได้ทันทีทั้งที่แสงยังเล่นอยู่ */
    #paid-overlay {
      position: fixed;
      inset: 0;
      z-index: 40;
      pointer-events: none;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: rgba(255, 253, 245, 0.92);
    }
    /* คุมการโชว์ด้วยคลาสของตัวเอง ไม่ใช้ hidden เพราะ id ชนะ .hidden ของ Tailwind ด้านความจำเพาะ */
    #paid-overlay.is-on {
      display: flex;
      animation: paid-overlay-in .9s ease-out forwards;
    }
    @keyframes paid-overlay-in {
      0%   { opacity: 0; }
      12%  { opacity: 1; }
      70%  { opacity: 1; }
      100% { opacity: 0; }
    }

    /* จอเล็กหน้าต่างถามพิมพ์บิลกว้างเกือบเต็มจอ ถ้าวางกลางจอเหมือนเดิมการ์ดจะบังวงติ๊กถูกจนหมด
       ดันขึ้นไปอยู่ช่วงบนแทน เครื่องหมายถูกกับเลขคิวจะโผล่เหนือการ์ดพอดี */
    @media (max-width: 1023px) {
      #paid-overlay {
        justify-content: flex-start;
        padding-top: 56px;
      }
      /* พื้นที่เหนือการ์ดพอแค่วงติ๊กถูกกับเลขคิว ซึ่งเป็นตัวที่พนักงานต้องใช้เรียกคิวจริงๆ
         ยอดเงินตัดทิ้งบนจอเล็ก ไม่งั้นบรรทัดนี้จะไปมุดใต้การ์ด */
      #paid-overlay-total { display: none; }
    }

    #paid-overlay .paid-ring-wrap {
      position: relative;
      /* เว้นให้พ้นปลายแสง ไม่งั้นเส้นล่างสุดพาดทับเลขคิว */
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #paid-overlay .paid-burst {
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -72px 0 0 -72px;
      width: 144px;
      height: 144px;
      animation: paid-burst .85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes paid-burst {
      0%   { opacity: 0; transform: scale(.4) rotate(0deg); }
      35%  { opacity: .9; transform: scale(1) rotate(12deg); }
      100% { opacity: 0; transform: scale(1.25) rotate(18deg); }
    }
    #paid-overlay .paid-burst span {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 3px;
      height: 18px;
      margin: -72px 0 0 -1.5px;
      border-radius: 2px;
      background: var(--color-mustard);
      transform-origin: 50% 72px;
    }

    #paid-overlay .paid-ring-big {
      position: relative;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: #10b981;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: paid-ring-big .55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }
    @keyframes paid-ring-big {
      0%   { opacity: 0; transform: scale(.6); }
      55%  { opacity: 1; transform: scale(1.1); }
      100% { opacity: 1; transform: scale(1); }
    }
    #paid-overlay .paid-check {
      stroke-dasharray: 26;
      stroke-dashoffset: 26;
      animation: paid-check-draw .34s ease-out .18s forwards;
    }
    @keyframes paid-check-draw {
      to { stroke-dashoffset: 0; }
    }

    /* เครื่องที่ตั้งค่าลดการเคลื่อนไหว: ชุดหน้าชำระเงิน
       ต้องอยู่ท้ายไฟล์ เพราะกฎ .modal-closing.hidden ข้างบนใช้ !important ทับกันเอง */
    @media (prefers-reduced-motion: reduce) {
      .cash-digit-pop,
      .is-picked,
      #checkout-numpad.numpad-in,
      #checkout-numpad.numpad-in .numpad-key { animation: none; }

      /* ไม่ต้องฝืนให้วาดต่อ ปิดแล้วหายไปเลยเหมือนเดิม */
      .modal-closing.hidden {
        display: none !important;
        animation: none;
      }
      .modal-closing.hidden > * { animation: none; }

      #paid-overlay.is-on,
      #paid-overlay .paid-burst,
      #paid-overlay .paid-ring-big,
      #paid-overlay .paid-check { animation: none; }
      #paid-overlay.is-on { display: none; }
    }

    /* ===== หน้าประวัติบิล =====
       ชุดนี้เพิ่มตามที่เจ้าของร้านเลือกจากหน้าทดลอง History Motion (แถวโผล่ = เบา, ดูย้อนหลัง = โครงร่างเทา) */

    /* ---- ทั้งชุดจางเข้าพร้อมกัน เล่นเฉพาะตอนรายการเปลี่ยนจริง ไม่ใช่ทุกครั้งที่ถามเซิร์ฟเวอร์ ---- */
    #history-list.is-entering > * { animation: history-row-in .26s ease-out; }
    @keyframes history-row-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* ---- บิลใหม่แทรกหัวรายการ: เปิดที่ว่างลงมาแล้ววาบเขียวครั้งเดียว แถวเก่าไม่ขยับ ---- */
    #history-list .is-fresh {
      animation: history-fresh-open .34s cubic-bezier(0.34, 1.56, 0.64, 1), history-fresh-flash .9s ease-out;
      overflow: hidden;
    }
    @keyframes history-fresh-open {
      from { max-height: 0; opacity: 0; }
      to   { max-height: 400px; opacity: 1; }
    }
    @keyframes history-fresh-flash {
      0%   { background-color: #ecfdf5; }
      55%  { background-color: #ecfdf5; }
      100% { background-color: transparent; }
    }
    /* จุดเขียวหน้าเลขบิล หายไปเองแล้วคืนที่ว่างให้ตัวหนังสือ ไม่ค้างเป็นสถานะถาวร */
    .history-new-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 7px;
      border-radius: 50%;
      background: #10b981;
      vertical-align: middle;
      animation: history-dot 1.2s ease-out forwards;
    }
    @keyframes history-dot {
      0%   { opacity: 0; transform: scale(.4); }
      12%  { opacity: 1; transform: scale(1); }
      70%  { opacity: 1; width: 7px; margin-right: 7px; }
      100% { opacity: 0; width: 0; margin-right: 0; }
    }

    /* ---- แถวที่เพิ่งเปลี่ยนสถานะ วาบให้รู้ว่ากดโดนใบไหน สีตามป้ายที่ใช้อยู่แล้ว ---- */
    #history-list .is-hit-cancel { animation: history-hit-cancel .6s ease-out; }
    #history-list .is-hit-waste  { animation: history-hit-waste .6s ease-out; }
    #history-list .is-hit-refund { animation: history-hit-refund .6s ease-out; }
    @keyframes history-hit-cancel {
      0% { background-color: #ffffff; } 25% { background-color: #fef2f2; } 100% { background-color: transparent; }
    }
    @keyframes history-hit-waste {
      0% { background-color: #ffffff; } 25% { background-color: #fff7ed; } 100% { background-color: transparent; }
    }
    @keyframes history-hit-refund {
      0% { background-color: #ffffff; } 25% { background-color: #f0f9ff; } 100% { background-color: transparent; }
    }

    /* ---- แตะหัวบิลบนจอเล็ก: เนื้อหาไหลลงมา ไม่ใช่โผล่ทั้งก้อน ----
       ตอนพับใส่คลาส hidden ทันทีเหมือนเดิม ตรงนี้แค่ฝืนให้ยังวาดอยู่จนจังหวะจบ (ชุดเดียวกับหน้าต่างชำระเงิน) */
    .history-detail.is-opening { animation: history-detail-in .2s ease-out; overflow: hidden; }
    @keyframes history-detail-in {
      from { max-height: 0; opacity: 0; }
      to   { max-height: 600px; opacity: 1; }
    }
    .history-detail.is-closing.hidden {
      display: block !important;
      overflow: hidden;
      animation: history-detail-out .18s ease-in forwards;
    }
    @keyframes history-detail-out {
      from { max-height: 600px; opacity: 1; }
      to   { max-height: 0; opacity: 0; }
    }
    /* แถวที่แตะสว่างวาบสั้นๆ ให้รู้ว่ากดโดน */
    .history-row-tap { animation: history-row-tap .28s ease-out; border-radius: 12px; }
    @keyframes history-row-tap {
      0%   { background-color: var(--color-accent); }
      100% { background-color: transparent; }
    }

    /* ---- โครงร่างเทาระหว่างรอข้อมูลของวันที่เลือก ---- */
    .history-skel-row { padding: 14px 0; display: flex; justify-content: space-between; align-items: center; }
    .history-skel-row + .history-skel-row { border-top: 1px solid var(--color-sand); }
    .history-skel-bar {
      height: 12px;
      border-radius: 6px;
      background: linear-gradient(90deg, #e9eef4 25%, #d7dfe9 37%, #e9eef4 63%);
      background-size: 400% 100%;
      animation: history-skel-shimmer 1.3s linear infinite;
    }
    @keyframes history-skel-shimmer {
      from { background-position: 100% 0; }
      to   { background-position: -100% 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      #history-list.is-entering > *,
      #history-list .is-fresh,
      #history-list .is-hit-cancel,
      #history-list .is-hit-waste,
      #history-list .is-hit-refund,
      .history-detail.is-opening,
      .history-row-tap,
      .history-skel-bar { animation: none; }
      .history-new-dot { animation: none; opacity: 1; }
      /* พับแล้วหายไปเลย ไม่ต้องฝืนวาดต่อ */
      .history-detail.is-closing.hidden { display: none !important; animation: none; }
    }

    /* ===== หน้ายอดขาย (รวม Summary + Report เดิม) =====
       DOM ชุดเดียว สองหน้าตา: จอเล็กเป็นแผ่นเดียวคอลัมน์เดียวมีเส้นคั่น จอ lg ขึ้นไปแตกเป็นการ์ดสองคอลัมน์
       จุดตัด 1024px คือจุด lg ที่ทั้งแอปใช้อยู่แล้ว */
    /* กฎที่เจาะจงด้วย id (เช่น #settings-panel-printer ที่ตั้งเป็น grid บนจอกว้าง) ชนะคลาส .hidden ของ Tailwind
       ทำให้หน้าที่ควรถูกซ่อนโผล่ต่อท้ายหน้าที่เปิดอยู่ ต้องปิดให้ขาดตรงนี้จุดเดียว */
    .settings-panel.hidden { display: none !important; }

    #settings-panel-sales {
      display: grid;
      /* ต้องกำหนดคอลัมน์ไว้ ไม่งั้นคอลัมน์เดียวจะกว้างตาม max-content ทะลุกรอบการ์ด
         แล้ว overflow:hidden ข้างล่างจะเฉือนขอบขวาทิ้งเงียบๆ (วัดที่จอ 390px: กว้าง 395 ในกรอบ 350) */
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      background: #ffffff;
      border: 1px solid var(--color-sand);
      border-radius: 22px;
      overflow: hidden;
      /* แผงนี้เป็นลูกของกล่อง flex-col ที่เลื่อนได้ (#view-settings)
         ถ้าปล่อยให้ย่อได้ มันจะถูกบีบให้เท่าความสูงจอแล้ว overflow:hidden ตัดส่วนที่เหลือทิ้ง
         ผลคือหน้าเลื่อนไม่ลงเลย ต้องห้ามย่อไว้ */
      flex-shrink: 0;
      margin-bottom: 24px;
    }
    #settings-panel-sales.hidden { display: none; }

    .sales-sec { padding: 18px; border-top: 1px solid #f1f5f9; }
    .sales-sec:first-child { border-top: none; }
    .sales-sec-t { margin: 0 0 12px 0; font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: .04em; text-transform: uppercase; }
    .sales-label { margin: 0 0 6px 0; font-size: 12px; font-weight: 700; color: #94a3b8; }

    .sales-chips { display: flex; gap: 8px; overflow-x: auto; }
    /* ปุ่มรีเฟรชกับ Export เคยซ่อนทั้งแถวบนจอเล็ก มือถือเลยไม่มีทางกดเลย
       ตอนนี้ลงมาเป็นแถวที่สองใต้ชิปช่วงเวลา กว้างเท่ากันคนละครึ่ง */
    .sales-chips-tail { display: flex; gap: 8px; margin-top: 10px; }
    .sales-chips-tail .sales-chip { flex: 1 1 0; justify-content: center; }
    .sales-chip {
      min-height: 40px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--color-sand);
      border-radius: 999px;
      background: var(--color-cream);
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      white-space: nowrap;
      transition: background-color .15s ease, color .15s ease;
    }
    .sales-chip:active { transform: scale(.96); }
    .sales-chip.is-on { background: var(--color-secondary); border-color: var(--color-secondary); color: #ffffff; }

    .sales-hero { margin: 0; font-size: 40px; line-height: 1; font-weight: 900; color: var(--color-secondary); letter-spacing: -.02em; overflow-wrap: anywhere; }
    .sales-delta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
    .sales-delta-up { background: #ecfdf5; color: #059669; }
    .sales-delta-down { background: #fef2f2; color: #ef4444; }
    .sales-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 12px; }
    .sales-fact { color: #64748b; font-weight: 700; }
    .sales-fact b { color: var(--color-secondary); font-weight: 900; }
    .sales-note { margin: 10px 0 0 0; font-size: 10px; font-weight: 700; color: #94a3b8; }

    .sales-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sales-box { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 14px; padding: 12px 14px; }
    .sales-box-l { margin: 0; font-size: 11px; font-weight: 700; color: #64748b; }
    .sales-box-v { margin: 4px 0 0 0; font-size: 22px; font-weight: 900; color: var(--color-secondary); }
    .sales-box-v-good { color: #059669; }

    .sales-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
    .sales-btn { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 14px; font-family: inherit; font-size: 14px; font-weight: 700; transition: filter .15s ease; }
    .sales-btn:active { transform: scale(.98); }
    .sales-btn-go { background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary)); color: #ffffff; }
    .sales-btn-ghost { background: #ffffff; border: 1px solid var(--color-sand); color: #64748b; }
    .sales-btn[disabled] { background: #f1f5f9; border: 1px solid #e2e8f0; color: #94a3b8; pointer-events: none; }
    .sales-btn-link { color: var(--color-primary); border-color: var(--color-primary); }

    /* ---------- ประวัติเงินในลิ้นชัก ---------- */
    .fl-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
    .fl-sum-b { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 14px; padding: 10px 12px; }
    .fl-sum-l { margin: 0; font-size: 11px; font-weight: 700; color: #64748b; }
    .fl-sum-v { margin: 3px 0 0 0; font-size: 18px; font-weight: 900; color: var(--color-secondary); }
    .fl-day { margin: 16px 0 2px 0; font-size: 11px; font-weight: 800; color: #94a3b8; letter-spacing: .04em; }
    .fl-day:first-child { margin-top: 0; }
    .fl-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 2px; border-top: 1px solid #f1f5f9; }
    .fl-what { margin: 0; font-size: 14px; font-weight: 800; color: var(--color-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .fl-meta { margin: 4px 0 0 0; font-size: 11px; font-weight: 700; color: #94a3b8; }
    .fl-note { margin: 4px 0 0 0; font-size: 12px; font-weight: 700; color: #64748b; overflow-wrap: anywhere; }
    .fl-amt { text-align: right; white-space: nowrap; }
    .fl-amt b { display: block; font-size: 17px; font-weight: 900; }
    .fl-amt span { display: block; font-size: 11px; font-weight: 700; color: #94a3b8; margin-top: 3px; }
    .fl-in { color: #059669; }
    .fl-out { color: #ef4444; }
    .fl-close { color: var(--color-primary); }
    .fl-pill { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
    .fl-pill-in { background: #d1fae5; color: #047857; }
    .fl-pill-out { background: #fee2e2; color: #b91c1c; }
    .fl-pill-close { background: #e7efe9; color: var(--color-primary); }
    .fl-empty { padding: 28px 0; text-align: center; font-size: 13px; font-weight: 700; color: #94a3b8; }

    /* ---- แถวกราฟแท่งนอน (เมนูขายดี, วันในสัปดาห์) ----
       จอเล็กอ่านเป็นสองบรรทัด: ชื่อเต็มกับยอดอยู่บรรทัดบน แท่งกราฟกินเต็มความกว้างบรรทัดล่าง
       ของเดิมบีบชื่อไว้ในช่องตายตัว 66px ชื่อเมนูภาษาไทยเลยเหลือไม่กี่ตัวแล้วจบด้วยจุดไข่ปลา */
    /* ตารางสองคอลัมน์ ไม่ใช่ flex ที่ห่อบรรทัด เพราะ flex จะดีดยอดเงินตกไปบรรทัดใหม่แทนที่จะย่อชื่อ
       บรรทัดบน: ชื่อ (ยาวเกินก็ตัดด้วยจุดไข่ปลา) กับยอดเงิน  บรรทัดล่าง: แท่งกราฟกับจำนวนแก้ว */
    .sales-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; font-size: 12px; }
    .sales-row + .sales-row { margin-top: 14px; }
    .sales-row-lab { grid-area: 1 / 1; min-width: 0; font-size: 14.5px; font-weight: 800; color: var(--color-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sales-row-val { grid-area: 1 / 2; font-size: 15px; font-weight: 900; color: var(--color-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
    /* แท่งกินเต็มความกว้างทุกแถว ความยาวจึงเทียบกันได้จริง ถ้าปล่อยให้อยู่คอลัมน์เดียว
       ความกว้างรางจะไม่เท่ากันสักแถว เพราะคอลัมน์ขวากว้างตามยอดเงินของแถวนั้น */
    .sales-row-track { grid-column: 1 / -1; grid-row: 2; height: 12px; margin-top: 7px; background: var(--color-fill); border-radius: 6px; overflow: hidden; }
    .sales-row-extra { grid-column: 1 / -1; grid-row: 3; margin-top: 5px; font-weight: 700; color: var(--color-mute); }
    .sales-row-fill { display: block; height: 100%; border-radius: 6px; background: var(--color-primary); }
    .sales-row-fill-peak { background: #d97706; }
    /* จอเล็กเคยซ่อนกล่องอัตรากำไรแล้วเอาไปห้อยเป็นตัวหนังสือแถวสรุปจนมองข้าม
       ตอนนี้เป็นกล่องเหมือนจอคอม แค่กินเต็มความกว้างเพราะแถวหนึ่งมีสองช่อง */
    .sales-wide-box { grid-column: 1 / -1; }

    .sales-legend { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
    .sales-lg { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #64748b; }
    .sales-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
    .sales-empty { font-size: 12px; font-weight: 700; color: #cbd5e1; }
    /* วัตถุดิบที่ใช้มากที่สุด / เมนูขายน้อยสุด (renderStockUsage) */
    #settings-panel-sales .sales-row-extra:has(.stock-tag), #settings-panel-sales .sales-row-extra:has(.stock-left) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; }
    .stock-left { font-variant-numeric: tabular-nums; }
    .stock-left-low { color: var(--color-danger); font-weight: 800; }
    .stock-tag { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
    .stock-tag-warn { background: #fef3c7; color: #b45309; }
    .stock-tag-plain { background: var(--color-fill); color: var(--color-mute); }
    .slow-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; border-top: 1px solid #f1f5f9; }
    .slow-row:first-child { border-top: none; }
    .slow-name { min-width: 0; font-size: 14.5px; font-weight: 800; color: var(--color-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .slow-qty { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; color: var(--color-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .slow-zero { color: var(--color-danger); }

    @media (min-width: 1024px) {
      #settings-panel-sales {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
      }
      .sales-sec {
        border-top: none;
        background: #ffffff;
        border: 1px solid var(--color-sand);
        border-radius: 22px;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
        padding: 20px;
      }
      .sales-sec-full { grid-column: 1 / -1; }
      /* แถบปุ่มช่วงเวลาไม่ต้องเป็นการ์ด ปล่อยลอยอยู่เหนือแผง */
      .sales-sec-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 2px;
      }
      .sales-chips { overflow: visible; flex-wrap: wrap; }
      .sales-chips-tail { display: flex; margin-top: 0; margin-left: auto; }
      .sales-chips-tail .sales-chip { flex: none; }

      .sales-hero { font-size: 52px; }
      .sales-label { font-size: 13px; }
      .sales-facts { font-size: 13px; gap: 10px 24px; }
      .sales-split-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .sales-btns { flex-direction: row; }
      .sales-btn { width: auto; padding: 0 18px; }
      /* จอกว้างมีที่พอ กลับไปเป็นแถวเดียว: ชื่อ - แท่ง - ยอด - รายละเอียด เรียงเป็นคอลัมน์ตรงกันทุกแถว */
      .sales-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; font-size: 13px; }
      .sales-row + .sales-row { margin-top: 9px; }
      .sales-row-lab { order: 1; flex: none; width: 92px; font-size: 13px; font-weight: 700; color: var(--color-mute); }
      .sales-row-track { order: 2; flex: 1 1 auto; height: 10px; margin-top: 0; border-radius: 5px; }
      .sales-row-val { order: 3; width: 104px; margin-left: 0; text-align: right; font-size: 13px; }
      .sales-row-extra { order: 4; width: 116px; margin-top: 0; font-size: 13px; }
      /* วัตถุดิบมีรายละเอียดยาว (สูตรว่า · เหลือกี่วัน · ป้าย) คอลัมน์ 116px ไม่พอ ใช้แบบซ้อนบรรทัดเหมือนจอเล็ก */
      #sales-stock .sales-row { display: grid; align-items: baseline; gap: 0 8px; }
      #sales-stock .sales-row + .sales-row { margin-top: 14px; }
      #sales-stock .sales-row-lab { width: auto; font-size: 14.5px; font-weight: 800; color: var(--color-secondary); }
      #sales-stock .sales-row-val { width: auto; font-size: 15px; }
      #sales-stock .sales-row-track { height: 12px; margin-top: 7px; border-radius: 6px; }
      #sales-stock .sales-row-extra { width: auto; margin-top: 5px; }
      .sales-wide-box { grid-column: auto; }
      .sales-legend { flex-direction: row; flex-wrap: wrap; gap: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sales-chip, .sales-btn { transition: none; }
    }

    /* ===== หน้าตั้งค่า: เมนูจัดกลุ่ม + ชุดชิ้นส่วนกลาง =====
       DOM ชุดเดียว สองหน้าตา — จอ lg ขึ้นไปเมนูอยู่คอลัมน์ซ้ายค้างไว้ตลอด
       จอเล็กเมนูกลายเป็นหน้ารายการ เลือกแล้วรายการหลบไปเหลือแต่หน้าที่เปิด (ดู is-home / is-page ใน app.js) */
    #settings-shell { display: block; }
    #settings-shell.is-home #settings-main { display: none; }
    #settings-shell.is-page #settings-nav { display: none; }

    .set-nav-group + .set-nav-group { margin-top: 18px; }
    .set-nav-title { margin: 0 0 6px 4px; font-size: 10px; font-weight: 800; color: #94a3b8; letter-spacing: .06em; text-transform: uppercase; }
    .set-nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 48px;            /* นิ้วโป้งต้องกดโดนง่ายบนมือถือ */
      padding: 0 14px;
      border: 1px solid var(--color-sand);
      background: #ffffff;
      border-radius: 14px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--color-secondary);
      text-align: left;
      transition: background-color .15s ease, color .15s ease;
    }
    .set-nav-item + .set-nav-item { margin-top: 8px; }
    .set-nav-item:active { transform: scale(.99); }
    .set-nav-ic { width: 17px; height: 17px; flex: none; opacity: .85; }
    .set-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .set-nav-count { margin-left: auto; background: #ef4444; color: #ffffff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
    .set-nav-chev { margin-left: auto; color: #cbd5e1; font-size: 18px; line-height: 1; }
    .set-nav-count + .set-nav-chev { margin-left: 8px; }
    .set-nav-item.is-on { background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary)); border-color: var(--color-primary); color: #ffffff; }
    .set-nav-item.is-on .set-nav-chev { color: rgba(255,255,255,.6); }

    /* ---------- ชิ้นส่วนกลางที่ทุกหน้าย่อยจะทยอยย้ายมาใช้ ---------- */
    .set-card { background: #ffffff; border: 1px solid var(--color-sand); border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 16px; }
    .set-card + .set-card { margin-top: 14px; }
    .set-card-t { margin: 0 0 4px 0; font-size: 14px; font-weight: 800; color: var(--color-secondary); }
    .set-card-sub { margin: 0 0 14px 0; font-size: 12px; font-weight: 700; color: #94a3b8; }
    /* แถวไฟล์สำรอง: ชื่ออ่านได้ครบทุกขนาดจอ จอแคบปุ่มลงไปบรรทัดใหม่ จอกว้างอยู่บรรทัดเดียว */
    .backup-row { padding: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
    .backup-row-txt { min-width: 0; flex: 1 1 240px; }
    .backup-row-name { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
    .backup-row-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

    .set-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
    .set-search { flex: 1 1 200px; min-height: 44px; padding: 0 14px; border: 1px solid var(--color-sand); border-radius: 12px; background: #ffffff; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--color-secondary); }
    .set-btn { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
    .set-btn:active { transform: scale(.97); }
    .set-btn-go { background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary)); color: #ffffff; box-shadow: 0 2px 4px rgba(31, 77, 58,.25); }
    .set-btn-ghost { background: #ffffff; border: 1px solid var(--color-sand); color: #64748b; }
    .set-btn-soft { background: rgba(31, 77, 58,.1); color: var(--color-primary); }
    .set-btn-danger { background: #fef2f2; color: #ef4444; }
    .set-btn-warn { background: #fff7ed; color: #f97316; }
    .set-btn-sm { min-height: 38px; padding: 0 12px; font-size: 12px; border-radius: 999px; }

    .set-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #f1f5f9; }
    .set-row:first-child { border-top: none; }
    .set-row-body { min-width: 0; flex: 1 1 auto; }
    .set-row-t { margin: 0; font-size: 14px; font-weight: 700; color: var(--color-secondary); }
    .set-row-s { margin: 3px 0 0 0; font-size: 12px; color: #94a3b8; }
    .set-row-acts { display: flex; gap: 8px; flex: none; }

    .set-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
    .set-tag-ok { background: #ecfdf5; color: #059669; }
    .set-tag-off { background: #fef2f2; color: #ef4444; }
    .set-tag-warn { background: #fff7ed; color: #f97316; }
    .set-tag-info { background: #f0f9ff; color: #0284c7; }
    .set-tag-mute { background: #f1f5f9; color: #64748b; }

    .set-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
    .set-tbl th { text-align: left; font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 10px 0; }
    .set-tbl td { padding: 11px 10px 11px 0; border-top: 1px solid #f1f5f9; color: var(--color-secondary); font-weight: 700; }
    .set-tbl .num { text-align: right; padding-right: 0; }
    .set-tbl .dim { color: #94a3b8; }

    .set-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .set-field { display: flex; flex-direction: column; gap: 5px; }
    .set-field label { font-size: 11px; font-weight: 800; color: #94a3b8; }
    .set-field input, .set-field select, .set-field textarea { min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-sand); border-radius: 12px; background: var(--color-cream); font-family: inherit; font-size: 13px; font-weight: 700; color: var(--color-secondary); }
    .set-field .set-hint { font-size: 10px; font-weight: 700; color: #94a3b8; }

    .set-savebar { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
    .set-savebar .set-btn { width: 100%; }
    .set-save-note { font-size: 11px; font-weight: 700; color: #94a3b8; }

    .set-empty { padding: 32px 16px; text-align: center; color: #cbd5e1; font-weight: 800; font-size: 13px; }
    .set-danger { border-color: #fecaca; background: #fff8f8; }

    @media (min-width: 1024px) {
      /* จอใหญ่: เมนูค้างซ้าย เนื้อหาอยู่ขวา ทั้งสองโชว์พร้อมกันเสมอไม่ว่าจะอยู่สถานะไหน */
      #settings-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 22px; align-items: start; }
      #settings-shell.is-home #settings-main,
      #settings-shell.is-page #settings-nav { display: block; }
      #settings-nav { background: #ffffff; border: 1px solid var(--color-sand); border-radius: 22px; padding: 14px 10px; position: sticky; top: 0; }
      .set-nav-item { min-height: 40px; padding: 0 10px; border: none; background: none; border-radius: 12px; font-size: 13px; }
      .set-nav-item + .set-nav-item { margin-top: 2px; }
      .set-nav-item:hover { background: var(--color-accent); }
      .set-nav-item.is-on:hover { background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary)); }
      .set-nav-chev { display: none; }
      .set-nav-count { margin-left: auto; }

      .set-card { padding: 20px; }
      .set-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
      .set-field-full { grid-column: 1 / -1; }
      .set-savebar { flex-direction: row; align-items: center; }
      .set-savebar .set-btn { width: auto; }
      .set-savebar .set-spacer { flex: 1 1 auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      .set-nav-item, .set-btn { transition: none; }
    }

    /* รูปสินค้าในแถวรายการ (หน้าสินค้าในเมนู) */
    .set-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }

    /* จอเล็ก: ปุ่มจัดการท้ายแถวขึ้นบรรทัดใหม่ กดง่ายกว่าเบียดกันอยู่ข้างชื่อ */
    @media (max-width: 1023px) {
      .set-row { flex-wrap: wrap; }
      .set-row-body { flex: 1 1 100%; }
      .set-row-acts { flex: 1 1 100%; flex-wrap: wrap; }
      .set-row-acts .set-btn { flex: 1 1 auto; min-height: 40px; }
      .set-toolbar .set-btn { flex: 1 1 100%; }
      .set-toolbar .set-search { flex: 1 1 100%; }
    }

    /* ---------- หน้าวัตถุดิบ: หัวคอลัมน์ ---------- */
    .inv-head {
      grid-template-columns: 1fr 6rem 6rem 6rem 6rem 6rem;
      gap: 12px;
      padding: 14px 0 12px;
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
      border-bottom: 1px solid #f1f5f9;
    }

    /* ---------- หน้าต้นทุนเมนู ---------- */
    .cost-head {
      grid-template-columns: 1fr 5.5rem 7rem 7rem 5rem 5.5rem;
      gap: 10px;
      padding: 4px 0 10px;
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: .04em;
      border-bottom: 1px solid #f1f5f9;
    }
    .cost-row { padding: 13px 0; border-top: 1px solid #f1f5f9; }
    .cost-row:first-of-type { border-top: none; }
    .cost-cell { display: none; }
    .cost-act { margin-top: 8px; }
    .cost-extra-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f1f5f9; }
    .cost-extra-price { flex: none; font-size: 15px; font-weight: 900; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
    /* ปุ่มแตะเลือกค่าอื่นๆ ในหน้าสูตร สีเขียวทึบ = เลือกแล้ว */
    .recipe-extra { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--color-sand); background: #ffffff; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--color-mute); }
    .recipe-extra[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; }
    .recipe-extra[aria-pressed="true"]::before { content: '✓ '; }
    .recipe-extra:active { transform: scale(.97); }
    /* หน้าต่างแก้ต้นทุนบนคอม: แบบ ก ในม็อกอัป คอลัมน์เดียวเหมือนมือถือ แค่กว้างและตัวใหญ่ขึ้น
       เดิมกว้าง 384px เท่ามือถือ บนจอคอมตัวหนังสือกับช่องกรอกเล็กเกินอ่านจากหน้าเคาน์เตอร์ */
    @media (min-width: 1024px) {
      #modal-recipe-form > div { max-width: 640px; padding: 32px; }
      #modal-recipe-form h3 { font-size: 24px; }
      #modal-recipe-form p { font-size: 14px; }
      #modal-recipe-form .recipe-row { gap: 12px; margin-bottom: 10px; }
      #modal-recipe-form select, #modal-recipe-form input { min-height: 48px; padding: 12px; font-size: 16px; }
      #modal-recipe-form .recipe-ing-qty { width: 110px; }
      #modal-recipe-form .recipe-ing-cost { width: 90px; font-size: 15px; }
      #modal-recipe-form .recipe-extra { min-height: 48px; padding: 0 18px; font-size: 15px; }
      #modal-recipe-form button.flex-1 { padding: 14px 0; font-size: 17px; }
      #recipe-cost-total { font-size: 22px; }
    }
    .cost-note { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #fff7ed; }
    .cost-note p { margin: 0; font-size: 11px; font-weight: 700; color: #c2410c; }
    .cost-note p + p { margin-top: 6px; }

    /* ---------- ปฏิทินยอดขาย ----------
       จอเล็กช่องวันกว้างแค่ 43px ยอดเงินจึงโดนตัดเหลือ "฿1,2..." ทุกช่อง
       ตารางเลยเหลือหน้าที่กวาดตาดูจังหวะของเดือน (แท่งยิ่งยาวยิ่งขายดี) ส่วนตัวเลขเต็มไปอยู่ในรายการข้างล่าง
       จอกว้างช่องใหญ่พอใส่ยอดได้อยู่แล้ว เลยกลับไปหน้าตาเดิมและซ่อนรายการทิ้ง */
    /* หัวเดือน: ลูกศรสองข้าง ชื่อเดือนตรงกลาง อยู่บรรทัดเดียวทุกความกว้าง
       ของเดิมใช้ .set-toolbar ซึ่งบังคับปุ่มให้กินเต็มบรรทัดบนจอเล็ก ปฏิทินเลยถูกดันตกไปครึ่งจอ */
    .cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .cal-head .set-btn { flex: none; min-width: 46px; }
    .cal-head-mid { flex: 1 1 auto; min-width: 0; text-align: center; }
    .cal-nav-t { display: none; }

    .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; text-align: center; font-size: 11px; font-weight: 800; color: #94a3b8; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
    .cal-cell {
      min-height: 46px;
      min-width: 0;
      padding: 5px 3px;
      border-radius: 12px;
      border: 1px solid var(--color-sand);
      background: var(--color-cream);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }
    .cal-cell-blank { border-color: var(--color-sand); background: var(--color-cream); }
    .cal-day { font-size: 12px; font-weight: 800; color: var(--color-line); }
    .cal-cell.has-sale .cal-day { color: var(--color-secondary); }
    .cal-heat { display: block; height: 6px; width: 22px; border-radius: 3px; background: var(--color-fill-2); }
    .cal-total, .cal-bills { display: none; }
    .cal-total { margin-top: auto; font-size: 12px; font-weight: 900; color: var(--color-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cal-bills { font-size: 10px; font-weight: 700; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cal-cell.is-strong { background: var(--color-accent); border-color: var(--color-mustard); }

    /* รายการยอดรายวัน อ่านตัวเลขเต็มไม่ย่อ เฉพาะวันที่มีขายจริง */
    .cal-list-t { margin: 18px 0 2px; font-size: 11px; font-weight: 800; color: #94a3b8; letter-spacing: .04em; text-transform: uppercase; }
    .cal-row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--color-fill); }
    .cal-row-d { flex: none; width: 86px; font-size: 13.5px; font-weight: 800; color: var(--color-secondary); }
    .cal-row-b { flex: 1 1 auto; font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .cal-row-v { flex: none; font-size: 15px; font-weight: 900; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
    .cal-row.is-strong .cal-row-v { color: var(--color-mustard); }
    .cal-empty { padding: 24px 0; text-align: center; font-size: 13px; font-weight: 700; color: #94a3b8; }

    @media (min-width: 1024px) {
      .cost-row { display: grid; grid-template-columns: 1fr 5.5rem 7rem 7rem 5rem 5.5rem; gap: 10px; align-items: center; }
      .cost-cell { display: block; text-align: right; font-size: 13px; font-weight: 700; color: var(--color-secondary); }
      .cost-act { margin-top: 0; text-align: right; }
      .cost-mobile-line { display: none; }
      .cal-cell { min-height: 76px; padding: 8px; align-items: stretch; gap: 0; }
      .cal-day { font-size: 10px; font-weight: 700; color: #94a3b8; }
      .cal-cell.has-sale .cal-day { color: var(--color-secondary); }
      .cal-heat { display: none; }
      .cal-total, .cal-bills { display: block; }
      .cal-nav-t { display: inline; }
      #cal-list-wrap { display: none; }
    }

    /* ---------- ปุ่มสลับมุมมองในหน้าเดียว (ประวัติการใช้งาน) ---------- */
    .set-seg { display: flex; gap: 6px; flex: 1 1 100%; overflow-x: auto; }
    .set-seg-btn {
      min-height: 40px;
      padding: 0 14px;
      border: 1px solid var(--color-sand);
      background: #ffffff;
      border-radius: 999px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      white-space: nowrap;
    }
    .set-seg-btn.is-on { background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary)); border-color: var(--color-primary); color: #ffffff; }

    /* ---------- ป้ายสิทธิ์ในหน้าพนักงาน ---------- */
    .set-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .set-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }

    @media (min-width: 1024px) {
      .set-seg { flex: 0 1 auto; }
    }

    /* ---------- ปุ่มสลับภาษา ----------
       อยู่บนหน้าล็อกกับแถบบนหน้าขาย สองที่ที่คนอ่านไทยไม่ออกไปถึงได้เอง */
    .langsw { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--color-fill); flex: none; }
    .langsw button {
      padding: 5px 11px; border: none; border-radius: var(--r-pill); background: none;
      font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--color-mute); white-space: nowrap;
    }
    .langsw button.is-on { background: var(--color-secondary); color: #ffffff; }
    /* บนพื้นเขียวของหน้าล็อก */
    #pin-lock-screen .langsw { background: rgba(255, 255, 255, .16); }
    #pin-lock-screen .langsw button { color: rgba(255, 255, 255, .72); }
    #pin-lock-screen .langsw button.is-on { background: var(--color-cream); color: var(--color-primary); }
    .lock-langsw { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 2; }

    /* แถบบนบนมือถือไม่มีที่พอ คำว่า STATUS เป็นของประดับ จุดสีบอกสถานะอยู่แล้ว */
    @media (max-width: 1023px) {
      .nav-status-word { display: none; }
    }

    /* สวิตช์ภาษาในเมนูชื่อพนักงาน (ย้ายมาจากแถบบน) เปิด = พม่า */
    .lang-row {
      width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
      padding: 10px 16px; background: var(--color-fill); border: 0; font-family: inherit; color: var(--color-secondary);
    }
    .lang-row svg { width: 1em; height: 1em; flex: none; }
    .lang-row-t { flex: 1; display: grid; line-height: 1.25; font-size: 14px; font-weight: 700; }
    .lang-row-t small { font-family: 'Noto Sans Myanmar', 'Sarabun', sans-serif; font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .lang-row-sw { width: 46px; height: 26px; flex: none; border-radius: 99px; background: var(--color-line); position: relative; transition: background-color .15s ease; }
    .lang-row-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s ease; }
    .lang-row.is-on .lang-row-sw { background: var(--color-primary); }
    .lang-row.is-on .lang-row-sw::after { left: 23px; }

    /* ตัวพม่าไม่มีใน Sarabun ต้องยืม Noto Sans Myanmar มาเฉพาะช่วงตัวอักษรพม่า
       ตัวเลขกับตัวละตินยังเป็น Sarabun เหมือนเดิม เพราะ unicode-range ในไฟล์ฟอนต์กันไว้ให้แล้ว */
    [lang="my"], body.lang-my { font-family: 'Noto Sans Myanmar', 'Sarabun', sans-serif; }

    /* ---------- การ์ดติดตั้งเป็นแอป ---------- */
    .set-steps { margin: 0; padding-left: 18px; font-size: 12.5px; font-weight: 700; color: var(--color-mute); }
    .set-steps li { margin-bottom: 5px; }
    .set-steps li:last-child { margin-bottom: 0; }
    .set-steps b { color: var(--color-secondary); font-weight: 800; }
    .set-install-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .set-install-t { font-size: 13px; font-weight: 700; color: var(--color-mute); }
    .set-install-hint { margin: 8px 0 0; font-size: 11px; font-weight: 700; color: #94a3b8; text-align: center; }

    /* ---------- ช่องติ๊กและอัปโหลดในหน้าตั้งค่า ---------- */
    .set-check { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--color-secondary); min-height: 32px; }
    .set-check input[type="checkbox"] { width: 18px; height: 18px; border-radius: 5px; accent-color: var(--color-primary); flex: none; }
    .set-checkgrid { display: grid; grid-template-columns: 1fr; gap: 4px 16px; }
    .set-file { font-size: 12px; color: #64748b; }
    .set-file::file-selector-button { margin-right: 10px; padding: 9px 12px; border: none; border-radius: 12px; background: rgba(31, 77, 58,.1); color: var(--color-primary); font-family: inherit; font-weight: 700; }
    .set-spacer { flex: 1 1 auto; }

    @media (min-width: 1024px) {
      .set-checkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* ===== หน้าเครื่องพิมพ์บนจอกว้าง =====
       การ์ดสั้นๆ (โลโก้ VAT กระดาษ ความปลอดภัย รีเซ็ตคิว) เคยกินเต็มแถวคนละใบ เหลือที่ว่างข้างขวาเกือบครึ่ง
       และดันปุ่มบันทึกตกไปสามหน้าจอ จอ 1280px ขึ้นไปจึงจับคู่สองใบต่อแถว
       ส่วนสองใบที่เนื้อหาเยอะกินเต็มความกว้างแล้วใช้ที่ที่ได้มาเพิ่มคอลัมน์ข้างใน */
    @media (min-width: 1280px) {
      #settings-panel-printer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        align-items: start;
      }
      #settings-panel-printer .set-card { margin-top: 0; }
      #settings-panel-printer .set-card + .set-card { margin-top: 0; }
      /* ใบที่เนื้อหาเยอะกินเต็มความกว้าง ทำเครื่องหมายไว้ในมาร์กอัปตรงๆ จะได้ไม่ต้องเดาจากลำดับการ์ด */
      #settings-panel-printer .set-card-wide { grid-column: 1 / -1; }

      #settings-panel-printer .set-card-wide .set-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      #settings-panel-printer .set-card-wide .set-field-full { grid-column: span 2; }
      #settings-panel-printer .set-checkgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    }

    /* ===== ช่องติ๊กสิทธิ์ในฟอร์มพนักงาน =====
       แผ่นนี้กว้าง 384px หักขอบแล้วเหลือ 336px จึงตรึงไว้สองคอลัมน์
       ไม่ยืมค่า 3 คอลัมน์ของ .set-checkgrid บนจอใหญ่ ไม่งั้นชื่อหน้ายาวๆ จะตัดคำกลางคัน */
    .emp-perm-group + .emp-perm-group { margin-top: 12px; }
    .emp-perm-group-t {
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
      letter-spacing: .02em;
      margin-bottom: 2px;
    }
    #emp-perm-groups .set-checkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
    #emp-perm-groups .set-check { font-size: 12.5px; min-height: 30px; }

    /* ตัวอย่างใบเสร็จในหน้าเครื่องพิมพ์ พื้นเทาเข้มนิดเพื่อให้กระดาษขาวลอยออกมา */
    .receipt-preview {
      background: var(--color-cream);
      border: 1px solid var(--color-sand);
      border-radius: 18px;
      padding: 14px;
      text-align: center;
      max-height: 460px;
      overflow-y: auto;
    }
    .receipt-preview img {
      display: block;
      margin: 0 auto;
      width: 100%;
      max-width: 300px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(31, 77, 58, .12);
    }
    .set-save-note.is-dirty { color: var(--color-primary); font-weight: 800; }

    /* ===== หน้าขายหลัก: การ์ดเมนูแบบช่องใหญ่ + ตะกร้าแบบใบเสร็จ =====
       แบบ C ที่เจ้าของร้านเลือก (ต.ค. 2026): มือถือสองช่องต่อแถว จอใหญ่ห้าช่อง รูปแก้วด้านบน ชื่อกับราคาด้านล่าง
       กดได้ทั้งช่อง จำนวนที่อยู่ในออเดอร์แล้วขึ้นเป็นเลขกลมมุมขวาบน */
    .pos-card {
      display: flex; flex-direction: column; gap: 6px; min-width: 0;
      background: #ffffff;
      border: 1px solid var(--color-sand);
      border-radius: var(--r-md);
      padding: 10px 10px 12px;
      box-shadow: var(--sh-1);
      cursor: pointer;
      transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
    }
    .pos-card:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); box-shadow: var(--sh-2); }
    .pos-card:active { transform: scale(.975); }
    .pos-card.is-out { opacity: .55; }

    /* ช่องรูป: เมนูที่มีรูปจริงรูปจะทับช่องนี้ ที่เหลือวาดรูปแก้วให้จาก drinkArt ใน app.js */
    .pos-th {
      width: 100%; max-width: 100%; aspect-ratio: 4 / 3; flex: none;
      border-radius: var(--r-sm);
      background: var(--color-accent);
      border: 1px solid var(--color-sand);
      background-size: cover; background-position: center; background-repeat: no-repeat;
      display: flex; align-items: center; justify-content: center;
      color: var(--color-mute);
      position: relative; overflow: hidden;
    }
    /* รูปถ่ายจริงโชว์ทั้งรูป ไม่ซูมจนตัดฝากับก้นแก้วทิ้ง (เจ้าของร้านขอ: เดิม cover ในกล่องเตี้ย 92px ดูไม่ออกว่าเป็นแก้วอะไร)
       ช่องเป็น 4:3 ให้รูปแนวตั้งยังใหญ่พอ รูปที่แคบกว่าช่องจะมีขอบขาวสองข้าง
       รูปถ่ายที่พื้นหลังโปร่ง ถ้าปล่อยไว้จะเห็นเขียวทะลุขึ้นมา จึงรองพื้นขาว */
    .pos-th.has-photo { background-color: #fff; border-color: var(--color-fill-2); background-size: contain; }
    .pos-th svg { width: 36px; height: 36px; }
    .pos-th svg.pos-art { width: 64px; height: 64px; }
    .pos-card.is-out .pos-art { filter: grayscale(1); opacity: .75; }
    .pos-th-out {
      position: absolute; inset: 0;
      background: color-mix(in srgb, var(--color-danger) 92%, transparent); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 800;
    }

    /* จำกัดจำนวน: ป้ายเหลือกี่แก้ว ตัวใหญ่พออ่านข้ามเคาน์เตอร์ */
    .pos-th-left {
      position: absolute; left: 6px; bottom: 6px;
      padding: 3px 11px; border-radius: var(--r-pill);
      background: var(--color-mustard); color: #fff;
      font-size: 17px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums;
    }
    .portion-count { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; gap: 8px; margin-bottom: 10px; }
    .portion-step { min-height: 54px; border: 1px solid var(--color-sand); border-radius: 12px; background: var(--color-fill); color: var(--color-secondary); font-family: inherit; font-size: 24px; font-weight: 800; }
    .portion-input { min-width: 0; width: 100%; min-height: 54px; border: 1px solid var(--color-line); border-radius: 12px; background: #fff; color: var(--color-secondary); font-family: inherit; font-size: 28px; font-weight: 800; text-align: center; }
    .portion-error { margin: 0 0 12px; color: var(--color-danger); font-size: 15px; font-weight: 700; }
    .portion-hint { margin: 0 0 12px; color: var(--color-mute); font-size: 14px; }
    .portion-acts { display: grid; gap: 8px; }
    .portion-acts .set-btn { min-height: 54px; font-size: 16px; }

    /* ย้ายเครื่องไปที่อยู่ใหม่: คลุมทั้งจอสองวินาที กันคนกดระหว่างเปลี่ยนที่อยู่ */
    .till-moving {
      position: fixed; inset: 0; z-index: 300;
      display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center;
      background: var(--color-cream); color: var(--color-primary);
    }
    .till-moving svg { width: 88px; height: 88px; }
    .till-moving h3 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--color-secondary); }
    .till-moving p { margin: 0; max-width: 30ch; font-size: 17px; color: var(--color-ink); }
    html.look-cafe .till-moving { background: var(--cafe-paper); }
    html.look-cafe .till-moving h3 { font-family: var(--cafe-hand); }
    .till-move-card { display: grid; gap: 4px; justify-items: start; margin-bottom: 14px; padding: 14px; background: #fff; border: 1px solid var(--color-sand); border-radius: 16px; }
    html.look-cafe .till-move-card { background: var(--cafe-paper); }
    .till-move-why { margin: 0; font-size: 14px; color: var(--color-ink); }

    .pos-body { flex: 1; min-width: 0; }
    .pos-name { font-size: 17px; font-weight: 700; color: var(--color-secondary); line-height: 1.3;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .pos-sub { font-size: 12.5px; font-weight: 700; color: var(--color-mute); margin-top: 1px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pos-price { font-size: 19px; font-weight: 800; color: var(--color-primary); flex: none; }
    .pos-price.is-out { color: var(--color-mute); text-decoration: line-through; }
    .pos-card .pos-price-staff { text-align: left; }
    .pos-qty-badge {
      position: absolute; top: 6px; right: 6px; z-index: 2;
      min-width: 30px; height: 30px; padding: 0 8px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 2px solid #fff; border-radius: var(--r-pill);
      background: var(--color-primary); color: #fff;
      font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums;
    }
    .pos-qty-badge.is-bump { animation: badge-bump .3s ease-out; }

    /* ขายดีวันนี้: ปุ่มเขียวทึบเรียงแถวเดียว มือถือสี่ปุ่ม จอใหญ่หกปุ่ม */
    .menu-best { margin-bottom: 12px; }
    .menu-best.hidden { display: none; }
    .menu-best-h { font-size: 14px; font-weight: 800; color: var(--color-edit); margin-bottom: 8px; }
    .menu-best-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .menu-best-b {
      display: grid; gap: 2px; text-align: center; min-width: 0;
      background: var(--color-primary); color: #fff;
      border-radius: var(--r-md); padding: 10px 6px; font-family: inherit;
      transition: transform .1s ease;
    }
    .menu-best-b:active { transform: scale(.96); }
    .menu-best-b b { font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .menu-best-b span { font-size: 15px; font-weight: 700; opacity: .85; }
    .menu-best-b.is-out { opacity: .45; }
    .menu-best-b:nth-child(n+5) { display: none; }
    @media (min-width: 1024px) {
      .menu-best-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .menu-best-b:nth-child(n+5) { display: grid; }
    }

    /* แถบล่างกับหัวแผ่นออเดอร์บนจอเล็ก */
    .pos-bar-sum { flex: 1; min-width: 0; display: grid; }
    .pos-bar-sum small { font-size: 14px; font-weight: 700; color: var(--color-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pos-bottom-bar .btn-till { padding: 0 18px; white-space: nowrap; font-size: 18px; font-weight: 800; }
    .pos-bottom-bar .btn-till.is-ghost { color: var(--color-secondary); padding: 0 14px; font-size: 16px; }
    .btn-till.is-primary.is-off { background: var(--color-fill); color: var(--color-mute); box-shadow: none; }
    /* กดครั้งเดียวจบ: ชื่อวิธีบนปุ่มชำระเงิน กับปุ่มหน้าชำระเงินข้างๆ (Controller.setPayButtonLabel) */
    .pay-chip { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.2); font-size: .8em; font-weight: 800; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
    .cart-pay-row.has-quick { flex-wrap: wrap; }
    .cart-pay-row.has-quick > .btn-pay-full { flex: 1 1 0; }
    .cart-pay-row.has-quick > #btn-checkout { flex: 1 1 100%; order: 9; }
    .btn-pay-full { padding: 0 14px; font-size: 16px; font-weight: 700; color: var(--color-secondary); white-space: nowrap; }
    .pos-bottom-bar .btn-till.btn-pay-full { width: 72px; flex: none; padding: 0 6px; font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; }
    /* แถบล่างแคบ: กดครั้งเดียวจบเอาตัวการ์ตูนออก ให้ยอดกับสองปุ่มมีที่ ชื่อวิธีลงไปอยู่ใต้คำว่าชำระ */
    .pos-bottom-bar.has-quick .pos-bar-mascot { display: none; }
    .pos-bottom-bar .btn-till.is-quick { flex-direction: column; gap: 2px; max-width: 128px; padding: 0 10px; line-height: 1.1; }
    .pos-bottom-bar .btn-till.is-quick .pay-chip { margin: 0; font-size: 12px; max-width: 100%; }
    .quick-pay-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin-top: 8px; border: 1.5px solid var(--color-line); border-radius: 12px; background: var(--color-cream); cursor: pointer; }
    .quick-pay-opt.is-on { border-color: var(--color-primary); background: var(--color-accent); }
    .quick-pay-opt input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary); flex: none; }
    .quick-pay-opt b { display: block; font-size: 14px; color: var(--color-secondary); }
    .quick-pay-opt small { font-size: 12.5px; font-weight: 600; color: var(--color-mute); }
    /* การ์ดส่งเข้า LINE (Controller.renderLineCard) สีเขียว LINE ใช้เฉพาะปุ่มเชื่อมต่อกับ @id ให้รู้ว่าเป็นของ LINE */
    #line-card { max-width: 640px; }
    .line-big { width: 100%; min-height: 52px; margin-top: 8px; font-size: 15px; }
    .line-go { background: #06c755; color: #fff; }
    .line-note { margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--color-fill); font-size: 13px; font-weight: 700; color: var(--color-mute); }
    .line-err { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fbe7e1; font-size: 13px; font-weight: 700; color: #a8402a; line-height: 1.5; }
    .line-ok { margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: #e3efe2; font-size: 13px; font-weight: 700; color: #2f6b45; }
    .line-step { margin: 12px 0 6px; font-size: 14px; font-weight: 800; color: var(--color-secondary); }
    .line-qr { display: block; width: 150px; height: 150px; margin: 0 auto; image-rendering: pixelated; border-radius: 8px; }
    .line-id { display: block; margin-top: 6px; text-align: center; font-weight: 800; color: #06a548; }
    .line-code { margin: 0; padding: 10px; border-radius: 12px; background: var(--color-fill); text-align: center; font-size: 34px; font-weight: 800; letter-spacing: .08em; color: var(--color-secondary); }
    .line-how { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--color-ink); line-height: 1.6; }
    .line-wait { margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--color-mute); }
    .line-who { margin-top: 10px; padding: 10px 12px; border: 1.5px solid var(--color-line); border-radius: 12px; background: var(--color-cream); }
    .line-who-h { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--color-sand); font-size: 15px; font-weight: 800; color: var(--color-secondary); }
    .line-who-h i { font-style: normal; padding: 2px 8px; border-radius: 999px; background: #06c755; color: #fff; font-size: 11.5px; font-weight: 700; }
    .line-who-h button { margin-left: auto; min-height: 36px; font-size: 12.5px; font-weight: 700; color: var(--color-danger); }
    .line-tg { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14px; font-weight: 700; color: var(--color-secondary); }
    .line-tg small { display: block; font-size: 12px; font-weight: 600; color: var(--color-mute); }
    .line-sub { margin-left: 18px; padding-left: 12px; border-left: 2px solid var(--color-sand); }
    .line-time { margin-left: 6px; min-height: 32px; padding: 0 8px; border: 1px solid var(--color-sand); border-radius: 8px; background: #fff; font-family: inherit; font-size: 13px; font-weight: 800; color: var(--color-secondary); }
    .line-time:disabled { opacity: .5; }
    /* ระดับใกล้หมดที่ร้านตั้งเอง ใต้ชื่อวัตถุดิบ (Controller.lowLevelText) */
    .inv-lvl { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #fff6dc; color: #8a5a12; font-size: 12px; font-weight: 800; white-space: nowrap; }
    /* นำเงินออก: เหตุผลต้องใส่ (Controller.setFloatAction / saveFloatCashFromModal) */
    .float-note-req { color: var(--color-danger); }
    #float-note-input.is-error { border-color: var(--color-danger); background: #fff5f5; }
    .float-note-err { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--color-danger); }
    .quick-pay-sub { margin: 14px 0 0; font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .quick-pay-chk { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 0 12px; margin-top: 8px; border: 1.5px solid var(--color-line); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; color: var(--color-secondary); cursor: pointer; }
    .quick-pay-chk.is-on { border-color: var(--color-primary); background: var(--color-accent); }
    .quick-pay-chk input { width: 20px; height: 20px; accent-color: var(--color-primary); flex: none; }
    .quick-pay-chk small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--color-mute); }
    /* หลายวิธี: ปุ่มละวิธีเต็มแถวล่างของแผ่นออเดอร์ สองวิธีวางคู่ สามวิธีเรียงสาม สี่วิธีขึ้นไปเป็นตารางสองช่อง */
    .cart-quick-pays { flex: 1 1 100%; order: 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cart-quick-pays.hidden { display: none; }
    .cart-quick-pays.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quick-pay-btn { flex-direction: column; gap: 3px; min-height: 64px; padding: 6px 8px; line-height: 1.1; }
    .quick-pay-btn .pay-chip { margin: 0; max-width: 100%; }
    /* ไอคอนวิธีชำระเงิน (Controller.payIcon) */
    .pay-ic { width: 22px; height: 22px; flex: none; }
    .pay-method-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .pay-method-btn .pay-ic { width: 20px; height: 20px; }
    #btn-checkout.is-quick { gap: 8px; }
    .quick-pay-btn .pay-ic { width: 26px; height: 26px; }
    .quick-pay-btn > span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .pay-method-btn span { white-space: nowrap; }
    .quick-sheet-btn { justify-content: flex-start; gap: 14px; padding: 0 20px; }
    .quick-sheet-btn .pay-ic { width: 28px; height: 28px; }
    .quick-pay-chk .pay-ic { color: var(--color-primary); }
    .pay-row-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .pay-row-t .pay-ic { color: var(--color-primary); }
    /* แถบล่างบนมือถือแคบ ปุ่มกดครั้งเดียวจบวิธีเดียวไม่ต้องมีไอคอน */
    .pos-bottom-bar .btn-till.is-quick .pay-ic { display: none; }
    /* แผ่นรับเงินสด: แบงก์ชุดเดียวกับหน้าชำระเงิน ช่องเงินทอนสีแดงแบบเดิม (หน้าคาเฟ่ใช้สีตามหน้าชำระเงินคาเฟ่) */
    .quick-cash-t { display: flex; align-items: center; gap: 8px; }
    .quick-cash-t .pay-ic { width: 26px; height: 26px; color: var(--color-primary); }
    .quick-cash-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .quick-cash-notes .cash-note { min-height: 52px; }
    .quick-cash-rcv { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--color-fill); font-weight: 700; color: var(--color-mute); }
    .quick-cash-rcv b { font-size: 22px; font-weight: 800; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
    .quick-cash-rcv button { margin-left: 14px; min-height: 36px; padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--color-danger); }
    .quick-cash-chg { display: flex; justify-content: space-between; align-items: center; min-height: 4.5rem; padding: 10px 14px; border-radius: 12px; background: #fef2f2; color: #ef4444; font-weight: 800; }
    .quick-cash-chg b { font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
    .quick-cash-ok.is-off { background: var(--color-fill); color: var(--color-mute); box-shadow: none; }
    .quick-sheet-h { display: flex; justify-content: space-between; align-items: baseline; }
    .quick-sheet-h span { font-size: 18px; font-weight: 800; color: var(--color-secondary); }
    .quick-sheet-h b { font-size: 28px; font-weight: 800; color: var(--color-primary); }
    .quick-sheet-btn { width: 100%; min-height: 64px; font-size: 20px; }
    .quick-sheet-full { width: 100%; min-height: 52px; font-size: 16px; color: var(--color-secondary); }
    .quick-pay-err { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--color-danger); }
    .cart-back {
      height: 40px; padding: 0 12px; flex: none;
      border-radius: var(--r-sm); background: var(--color-fill);
      font-family: inherit; font-size: 16px; font-weight: 800; color: var(--color-secondary);
    }
    .cart-edge-tab svg { width: 24px; height: 24px; }
    .cart-edge-tab b { font-size: 20px; font-weight: 800; line-height: 1; }
    .cart-edge-tab i { font-style: normal; font-size: 20px; font-weight: 800; opacity: .8; line-height: 1; }

    /* ---- ตะกร้าแบบใบเสร็จ ---- */
    /* แถวในออเดอร์ (แบบ C): ชื่อกับยอด / หมายเหตุบรรทัดของตัวเอง / แก้ไข ซ้าย ปุ่มบวกลบ ขวา
       ปัดแถวไปทางซ้ายเพื่อลบ ป้ายแดง "ลบ" อยู่ข้างใต้ เลยเกณฑ์แล้วเข้มขึ้นบอกว่าปล่อยแล้วลบ */
    .pos-line { position: relative; overflow: hidden; border-bottom: 1px dashed var(--color-fill-2); }
    .pos-line:last-child { border-bottom: none; }
    .pos-line-slide { position: relative; padding: 14px 0; background: #fff; transition: transform .2s ease; }
    .pos-line-del {
      position: absolute; top: 10px; bottom: 10px; right: 0; width: 96px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--r-md); background: color-mix(in srgb, var(--color-danger) 75%, #fff); color: #fff;
      font-size: 18px; font-weight: 800;
    }
    .pos-line.is-armed .pos-line-del { background: var(--color-danger); }
    .swipe-hint { margin: 6px 0 4px; font-size: 13px; font-weight: 700; color: var(--color-mute); text-align: center; }
    .pos-line-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .pos-line-name { font-size: 17px; font-weight: 700; color: var(--color-secondary); min-width: 0;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pos-line-sum { font-size: 17px; font-weight: 800; color: var(--color-primary); flex: none; font-variant-numeric: tabular-nums; }
    /* ปุ่มแก้ไขกับปุ่มบวกลบอยู่แถวของตัวเอง ทุกปุ่มสูง 44px กดโดนง่ายตอนมือยุ่ง */
    .pos-line-bot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
    .pos-line-note { margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--color-mute); min-width: 0; line-height: 1.4; }
    .pos-step { display: flex; align-items: center; gap: 4px; flex: none; }
    .pos-step button {
      width: 44px; height: 44px; border: none; border-radius: var(--r-sm);
      background: var(--color-fill); color: var(--color-secondary);
      font-family: inherit; font-size: 20px; font-weight: 700;
      transition: background-color .14s ease, transform .1s ease;
    }
    .pos-step button:active { background: var(--color-fill-2); transform: scale(.94); }
    .pos-step .pos-qty { min-width: 30px; text-align: center; font-size: 17px; font-weight: 800; }
    .pos-line-acts { display: flex; gap: 6px; flex: none; }
    .pos-line-acts button {
      height: 44px; padding: 0 12px; border-radius: var(--r-sm);
      border: 1px solid var(--color-fill-2); background: #fff;
      font-family: inherit; font-size: 14px; font-weight: 700; color: var(--color-mute);
    }
    .pos-line-acts .is-del { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 30%, #fff); }

    /* ยอดรวมท้ายตะกร้า อ่านเป็นใบเสร็จ: จำนวนแก้วบรรทัดบน เส้นคั่น แล้วยอดตัวใหญ่ */
    .pos-sum-cups { display: flex; justify-content: space-between; align-items: baseline;
                    font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .pos-sum-total { display: flex; justify-content: space-between; align-items: baseline;
                     margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--color-secondary); }
    .pos-sum-total span { font-size: 18px; font-weight: 700; color: var(--color-secondary); }
    /* ยอดรวมคือสิ่งที่คนมองจากอีกฝั่งเคาน์เตอร์ ของเดิม text-2xl ถูกกฎบรรทัดบนทับจนเหลือ 14px */
    .pos-sum-total #cart-total { font-size: 40px; font-weight: 800; line-height: 1.1; color: var(--color-primary);
                                 font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
    .cart-total-bar { font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
    /* จอ 360 ที่มีปุ่มบิลค้างชำระกับยอดหลักพัน ลูกศรโดนดันตกขอบ 14px ที่ 32px */
    @media (max-width: 379.98px) { .cart-total-bar { font-size: 28px; } }

    /* ---- หน้าต่างรับเงินสด ---- */
    .cash-change-big { font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
    /* ---- ลบแล้วเอากลับได้ ลอยเหนือยอดรวมท้ายตะกร้า ---- */
    .undo-bar {
      position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); z-index: 5;
      display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 6px 6px 16px;
      background: var(--color-secondary); color: #fff; border-radius: var(--r-md);
      box-shadow: 0 10px 24px -8px rgba(22, 56, 40, .5); overflow: hidden;
    }
    .undo-bar-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .undo-bar-b { min-height: 44px; padding: 0 18px; border: none; border-radius: var(--r-sm); background: #fff; color: var(--color-secondary);
                  font-family: inherit; font-size: 16px; font-weight: 800; flex: none; }
    .undo-bar-line { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--color-mustard); transform-origin: 0 50%; }
    .undo-bar.is-running .undo-bar-line { animation: undo-drain 5s linear forwards; }
    @keyframes undo-drain { to { transform: scaleX(0); } }
    @media (prefers-reduced-motion: reduce) { .undo-bar.is-running .undo-bar-line { animation: none; } }
    /* ---- หน้าต่างสินค้าแบบ C: แตะความหวาน = ใส่ออเดอร์ ---- */
    #modal-sweetness-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    #modal-sweetness-container .mod-btn { min-height: 60px; padding: 0 8px; border-radius: var(--r-md); font-size: 17px; line-height: 1.2; text-align: center; }
    .fast-hint { font-size: 12.5px; font-weight: 700; color: var(--color-mute); margin-left: auto; }
    .sweet-again {
      width: 100%; min-height: 60px; margin-bottom: 18px; padding: 8px 16px;
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      border: 2px dashed var(--color-edit-line); border-radius: var(--r-md);
      background: var(--color-edit-bg); color: var(--color-edit-ink);
      font-family: inherit; font-size: 18px; font-weight: 800; text-align: left;
    }
    .sweet-again small { font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sweet-again:active { transform: scale(.98); }
    .sweet-again.hidden, .more-opts.hidden { display: none; }
    .more-opts {
      width: 100%; min-height: 48px; border-top: 1px solid var(--color-fill-2);
      font-family: inherit; font-size: 16px; font-weight: 700; color: var(--color-primary);
    }
    /* เพิ่งใส่แก้ว: ลอยเหนือแถบล่างบนมือถือ กลางคอลัมน์เมนูบนจอใหญ่ */
    .added-bar {
      position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
      bottom: calc(24px + env(safe-area-inset-bottom));
      width: min(calc(100% - 24px), 520px); min-height: 56px; padding: 6px 6px 6px 16px;
      display: flex; align-items: center; gap: 12px; overflow: hidden;
      background: var(--color-secondary); color: #fff; border-radius: var(--r-md);
      box-shadow: 0 10px 24px -8px rgba(22, 56, 40, .5);
    }
    .added-bar.hidden { display: none; }
    .added-bar span:first-child { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .added-bar button { min-height: 44px; padding: 0 16px; border: none; border-radius: var(--r-sm); background: #fff; color: var(--color-secondary);
                        font-family: inherit; font-size: 16px; font-weight: 800; flex: none; }
    .added-bar-line { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--color-mustard); transform-origin: 0 50%; }
    .added-bar.is-running .added-bar-line { animation: undo-drain 4s linear forwards; }
    @media (prefers-reduced-motion: reduce) { .added-bar.is-running .added-bar-line { animation: none; } }
    @media (max-width: 1023.98px) { .added-bar { bottom: calc(88px + env(safe-area-inset-bottom)); } }
    @media (min-width: 1024px) { .added-bar { left: calc((100% - 400px) / 2); } }

    /* ---- ข่าวดีที่หายเอง ---- */
    .toast-bar {
      position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 96;
      display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); min-height: 52px; padding: 10px 18px 10px 14px;
      background: var(--color-secondary); color: #fff; border-radius: var(--r-md); box-shadow: 0 10px 24px -8px rgba(22, 56, 40, .5);
      font-size: 15px; font-weight: 700; pointer-events: none;
    }
    .toast-bar svg { width: 22px; height: 22px; flex: none; color: #9fd3a8; }
    .toast-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .toast-bar.is-in { animation: toast-in .22s ease-out; }
    @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
    @media (prefers-reduced-motion: reduce) { .toast-bar.is-in { animation: none; } }

    /* ---- แถบแจ้งเตือนด้านล่าง (แทนกระดิ่ง): ค้างจนกว่าจะกด ✕ ----
       มือถือ: ลอยเหนือแถบชำระเงิน ไม่บังปุ่มชำระเงิน  จอใหญ่: มุมล่างซ้ายบนเมนู ไม่ทับแผงออเดอร์ทางขวา
       z ต่ำกว่าแถบ "เพิ่งใส่แก้ว" (50) ที่โผล่แค่ 4 วิ และต่ำกว่าลิ้นชักออเดอร์/หน้าต่างทุกบาน */
    .notice-bar {
      position: fixed; z-index: 48; left: 50%; transform: translateX(-50%);
      bottom: calc(24px + env(safe-area-inset-bottom));
      width: min(calc(100% - 20px), 520px); max-height: calc(100% - 140px); overflow-y: auto;
      background: #fff; border: 1.5px solid var(--color-line); border-radius: var(--r-md);
      box-shadow: 0 14px 30px -10px rgba(22, 56, 40, .45);
    }
    .notice-bar.hidden { display: none; }
    @media (max-width: 1023.98px) { .notice-bar { bottom: calc(86px + env(safe-area-inset-bottom)); } }
    @media (min-width: 1024px) { .notice-bar { left: 24px; transform: none; } }
    .notice-bar.is-in { animation: notice-in .25s ease-out; }
    @keyframes notice-in { from { opacity: 0; translate: 0 16px; } }
    @media (prefers-reduced-motion: reduce) { .notice-bar.is-in { animation: none; } }
    .notice-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; background: var(--color-secondary); color: #fff; }
    .notice-head strong { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; }
    .notice-x { flex: none; width: 44px; height: 44px; border: none; border-radius: var(--r-sm); background: rgba(255, 255, 255, .14);
                color: #fff; font-family: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
    .notice-x:active { background: rgba(255, 255, 255, .28); }
    .notice-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 0; border-top: 1px solid var(--color-sand); }
    .notice-head + .notice-row, #notice-list > .notice-row:first-child { border-top: none; }
    .notice-edge { flex: none; width: 5px; align-self: stretch; }
    .notice-txt { flex: 1; min-width: 0; }
    .notice-txt b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--color-secondary); overflow-wrap: anywhere; }
    .notice-txt small { display: block; font-size: 13px; font-weight: 600; color: var(--color-mute); }
    .notice-btn { flex: none; min-height: 44px; padding: 0 16px; border: none; border-radius: var(--r-sm);
                  font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
    .notice-btn:active { transform: scale(.96); }
    .notice-row.is-red .notice-edge { background: var(--color-danger); }
    .notice-row.is-red .notice-btn { background: #fde8e6; color: var(--color-danger); }
    .notice-row.is-soon .notice-edge { background: #ea7a2d; }
    .notice-row.is-soon .notice-btn { background: #fdeee2; color: #c2410c; }
    .notice-row.is-go .notice-edge { background: var(--color-primary); }
    .notice-row.is-go .notice-btn { background: var(--color-accent); color: var(--color-primary); }
    .notice-more { display: block; width: 100%; min-height: 44px; border: none; border-top: 1px solid var(--color-sand); background: var(--color-fill);
                   font-family: inherit; font-size: 15px; font-weight: 800; color: var(--color-primary); cursor: pointer; }
    /* หน้าขายบนมือถือ: เหนือแถบตะกร้า 84px / บนคอม: กลางพื้นที่เมนู ไม่ทับคอลัมน์ตะกร้า 400px */
    @media (max-width: 1023.98px) { .toast-bar.on-till { bottom: calc(84px + env(safe-area-inset-bottom) + 16px); } }
    @media (min-width: 1024px) { .toast-bar.on-till { left: calc((100% - 400px) / 2); } }

    .sweet-remembered { font-size: 13px; font-weight: 700; color: var(--color-primary); background: var(--color-accent); border-radius: 999px; padding: 2px 10px; }

    .cash-note {
      min-height: 48px; border-radius: var(--r-sm);
      border: 1px solid var(--color-sand); background: #fff; color: var(--color-secondary);
      font-family: inherit; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
      transition: transform .1s ease, background-color .15s ease;
    }
    .cash-note:active { transform: scale(.96); background: var(--color-accent); }
    .cash-note.is-exact { font-size: 15px; background: var(--color-accent); color: var(--color-primary); }
    .checkout-confirm { background: var(--color-primary); color: #fff; box-shadow: var(--sh-2); }
    .checkout-confirm.is-short { background: var(--color-fill-2); color: var(--color-mute); box-shadow: none; }

    /* ===== ปุ่มท้ายตะกร้า =====
       ของเดิมปุ่มหลักในแอปมีสามสูตรปนกัน (ไล่สี+เงาสี / rounded-xl ไม่มีเงา / .set-btn-go)
       ตรงนี้รวบเฉพาะสามปุ่มบนหน้าขายให้เหลือสูตรเดียว สีเรียบ ไม่ไล่สี ไม่มีเงาสี
       ปุ่มที่เหลือในหน้าตั้งค่ายังเป็นของเดิม เก็บไว้ทำรอบหน้า */
    .btn-till {
      min-height: 52px;
      border-radius: var(--r-md);
      font-family: inherit; font-size: 17px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
    }
    .btn-till:active { transform: scale(.97); }
    .btn-till.is-primary { background: var(--color-primary); color: #fff; box-shadow: var(--sh-2); }
    .btn-till.is-warn {
      background: color-mix(in srgb, var(--color-mustard) 18%, #fff);
      border: 1px solid var(--color-mustard);
      color: var(--color-secondary);
    }
    .btn-till.is-ghost {
      background: #fff; border: 1px solid var(--color-line); color: var(--color-mute);
    }
    .btn-till.is-ghost svg { width: 22px; height: 22px; }
    .btn-till.is-edit { background: var(--color-edit); color: #fff; box-shadow: var(--sh-2); }

    /* ===== แก้บิลย้อนหลังในหน้าขาย =====
       สีส้มดินเผาบอกว่าออเดอร์นี้ไม่ใช่บิลใหม่ ปุ่มบันทึกกับแถบบนใช้สีเดียวกัน */
    :root { --color-edit: #b45e2f; --color-edit-bg: #fdf3e7; --color-edit-line: #e9b58f; --color-edit-ink: #8a3f15; }
    .edit-bill-bar {
      margin: 10px 20px 0; padding: 10px 12px;
      display: flex; align-items: center; gap: 10px; flex-shrink: 0;
      background: var(--color-edit-bg); border: 1.5px solid var(--color-edit-line); border-radius: 14px;
    }
    .edit-bill-bar.hidden { display: none; }
    .edit-bill-bar-t { flex: 1; min-width: 0; }
    .edit-bill-bar-t b { display: block; color: var(--color-edit-ink); font-size: 16px; }
    .edit-bill-bar-t small { display: block; color: #8a5a3c; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .edit-bill-bar button {
      font: inherit; font-weight: 700; font-size: 14px; min-height: 44px; padding: 0 12px; white-space: nowrap;
      background: #fff; border: 1px solid var(--color-edit-line); color: var(--color-edit-ink); border-radius: 12px;
    }
    .edit-bill-chip {
      font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0;
      background: var(--color-edit-bg); border: 1px solid var(--color-edit-line); color: var(--color-edit-ink);
    }
    .edit-bill-was { text-align: right; margin: -12px 0 12px; font-size: 14px; font-weight: 700; color: var(--color-mute); }

    .bill-edit-sheet {
      background: #fff; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto;
      border-radius: 24px 24px 0 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
      display: flex; flex-direction: column; gap: 12px;
    }
    @media (min-width: 640px) { .bill-edit-sheet { border-radius: 24px; padding-bottom: 22px; } }
    .bill-edit-sheet h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--color-secondary); }
    .bill-edit-sub { margin: -8px 0 0; font-size: 13px; color: var(--color-mute); }
    .bill-edit-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .bill-edit-cmp div { background: var(--color-fill); border-radius: 14px; padding: 10px 12px; }
    .bill-edit-cmp small { display: block; font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .bill-edit-cmp b { font-size: 22px; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
    .bill-edit-diff { display: flex; justify-content: space-between; align-items: center; border-radius: 16px; padding: 12px 14px; font-size: 18px; font-weight: 800; }
    .bill-edit-diff b { font-size: 28px; font-variant-numeric: tabular-nums; }
    .bill-edit-diff.is-more { background: #fdecea; color: var(--color-danger); border: 1.5px solid #f2b8b5; }
    .bill-edit-diff.is-back { background: #e0f2fe; color: #075985; border: 1.5px solid #9ccbe8; }
    .bill-edit-diff.is-same { background: var(--color-fill); color: var(--color-mute); }
    .bill-edit-warn { margin: 0; font-size: 13px; line-height: 1.45; background: #fff7ed; color: #9a3412; border-radius: 12px; padding: 10px 12px; }
    .bill-edit-sheet label { font-size: 13px; font-weight: 700; color: var(--color-mute); margin-bottom: -8px; }
    .bill-edit-sheet select, .bill-edit-sheet input {
      font: inherit; font-weight: 700; color: var(--color-secondary);
      border: 1px solid var(--color-sand); border-radius: 12px; padding: 12px; background: #fff; width: 100%;
    }
    .bill-edit-btns { display: flex; gap: 8px; margin-top: 4px; }
    .bill-edit-btns .is-ghost { flex: .7; }
    .bill-edit-btns .is-edit { flex: 1.3; }

    /* ชิปบนแถบบน: ของเดิม text-slate-400 บน bg-slate-50 อ่านได้ 2.45:1 */
    .nav-chip {
      background: var(--color-fill);
      border: 1px solid var(--color-fill-2);
      color: var(--color-mute);
      transition: background-color .15s ease;
    }
    .nav-chip:hover { background: var(--color-fill-2); }
    /* ชิปพนักงานบนแถบบน: รูปกลม (หรือไอคอนคน) + ▾ แตะได้สูง 44px */
    .user-chip { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 3px 9px 3px 3px; }
    .user-av { width: 36px; height: 36px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center;
               background: var(--color-accent); color: var(--color-primary); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-sand); }
    .user-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .user-av svg { width: 60%; height: 60%; }
    .user-av-lg { width: 44px; height: 44px; border-width: 0; box-shadow: none; background: #fff; }
    .user-menu-who { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--color-accent); border-bottom: 1px solid var(--color-sand); }
    .user-menu-who b { display: block; font-size: 17px; font-weight: 800; color: var(--color-secondary); overflow-wrap: anywhere; }
    .user-menu-who small { display: block; font-size: 12px; font-weight: 700; color: var(--color-mute); }

    /* ===== อนิเมชันหน้าขาย รอบที่ห้า =====
       transform/opacity ล้วนเหมือนรอบก่อนๆ ทุกอันมีคู่ของมันในบล็อก prefers-reduced-motion */

    /* ---- น้ำในแก้วไหลขึ้นตอนการ์ดลงมา ----
       เกาะ --i ของ card-in ที่มีอยู่แล้ว บวก 120ms ให้การ์ดถึงที่ก่อนน้ำจึงเริ่ม
       คนละ element กับ card-in จึงไม่ชนกัน */
    #menu-grid.is-entering > * .art-liquid {
      animation: art-pour .5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
      animation-delay: calc(var(--i, 0) * 55ms + 120ms);
    }
    .art-liquid { transform-origin: 50% 100%; transform-box: fill-box; }
    @keyframes art-pour {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }

    /* ---- ยอดรวมกระตุกเบาๆ ตอนตัวเลขเปลี่ยนจริง ----
       ของเดิมจำนวนกับ badge เด้ง แต่ยอดเงินซึ่งเป็นตัวที่ต้องดูที่สุดเปลี่ยนเงียบๆ */
    .total-tick { animation: total-tick .16s ease-out; }
    @keyframes total-tick {
      0%, 100% { transform: scale(1); }
      45%      { transform: scale(1.06); }
    }

    /* ---- ตะกร้าว่าง: ค่อยๆ ลงมา ไม่ใช่โผล่ปุ๊บ ----
       เล่นหลัง cart-line-sweep จบแล้ว ไม่ทับกัน */
    .cart-empty-in { animation: cart-empty-in .28s ease-out backwards; }
    @keyframes cart-empty-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: none; }
    }

    /* ---- แถบหมวดไล่ขึ้นมาครั้งเดียวตอนเปิดแอป ----
       ใช้ชื่อคลาสของตัวเอง ไม่ใช้ is-entering ซ้ำ เพราะ is-entering มีเทสต์อ่านอยู่สามที่ */
    .cat-strip-in > * {
      animation: cat-strip-in .3s ease-out backwards;
      animation-delay: calc(var(--j, 0) * 35ms);
    }
    @keyframes cat-strip-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      /* น้ำต้องยังเห็นอยู่ แค่ไม่ไหล — ท่านิ่งของมันคือ scaleY(1) อยู่แล้ว ปิดอนิเมชันพอ */
      #menu-grid.is-entering > * .art-liquid,
      .total-tick,
      .cart-empty-in,
      .cat-strip-in > * { animation: none; }
    }

    /* ===== หน้าตาแบบคาเฟ่ (ขั้นที่ 1: สี พื้นผิว ฟอนต์ ยังไม่มีการขยับ) =====
       เปิดด้วยคลาส look-cafe บน <html> (Controller.applyLook) ค่าเริ่มต้นเปิด เลือก "เรียบ" ในตั้งค่าเพื่อกลับเป็นหน้าเดิม
       เปลี่ยนสีผ่านตัวแปรชุดเดิม Tailwind ผูกกับตัวแปรอยู่แล้ว ส่วนใหญ่จึงเปลี่ยนตามเอง
       หน้าล็อก PIN ไม่เปลี่ยน: คืนค่าสีเดิมให้ที่ #pin-lock-screen
       ใบเสร็จกับรายงานที่พิมพ์ไม่เกี่ยว วาดแยกจากหน้าจอ */
    html.look-cafe {
      --color-primary: #2f4a3a;   /* เขียวกันสาด */
      --color-secondary: #2b1d14; /* หมึกน้ำตาลเข้ม */
      --color-accent: #f1e3c8;    /* กระดาษคราฟต์ */
      --color-mustard: #c8553d;   /* แดงอิฐ ยอดเงิน/ป้าย */
      --color-sand: #e0cfb2;
      --color-cream: #f3e6d3;
      --color-ink: #4a3a2c;
      --color-fill: #f4ead8;
      --color-fill-2: #e8d9bf;
      --color-line: #d5c3a5;
      --color-mute: #7a6552;      /* 4.9:1 บนกระดาษ */
      --cafe-paper: #fffaf0;
      --cafe-gold: #e8b04b;
      --cafe-gold-d: #b9832a;
      --cafe-green-d: #1f3327;
      --cafe-tape: rgba(214, 196, 140, .8);
      --cafe-hand: 'Mali', 'Noto Sans Myanmar', 'Sarabun', sans-serif;
      --r-sm: 6px;
      --r-md: 8px;
      --r-lg: 12px;
      --sh-1: 2px 3px 0 rgba(43, 29, 20, .18);
      --sh-2: 3px 4px 0 rgba(43, 29, 20, .22);
      --sh-3: 0 14px 30px -14px rgba(43, 29, 20, .45);
    }
    /* ---- หน้าล็อก PIN แบบคาเฟ่: ครึ่งบนเป็นกันสาดเขียว ครึ่งล่างเป็นเคาน์เตอร์ไม้ ปุ่มตัวเลขเป็นกระดาษ ----
       ใช้สีชุดคาเฟ่ตามทั้งแอป (ไม่คืนสีเดิมแล้ว) แก้วกาแฟกับจังหวะเข้าแอปเหมือนเดิมทุกอย่าง แบบเรียบไม่เปลี่ยน */
    html.look-cafe #pin-stage {
      background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 40px, transparent 40px 80px), var(--color-primary);
    }
    html.look-cafe #pin-shop { font-family: var(--cafe-hand); font-size: 30px; font-weight: 700; opacity: 1; letter-spacing: .02em; margin: 0 0 20px; line-height: 1.15; text-align: center; }
    html.look-cafe #pin-shop span { display: block; font-size: 14px; font-weight: 600; opacity: .7; text-transform: lowercase; letter-spacing: .04em; }
    html.look-cafe #pin-hint { font-family: var(--cafe-hand); font-size: 15px; color: rgba(246, 236, 217, .72); }
    html.look-cafe #pin-lock-error { font-size: 14px; font-weight: 800; color: #ffd2c4; background: rgba(200, 85, 61, .35); padding: 2px 12px; border-radius: var(--r-sm); }
    html.look-cafe #pin-fill { background: linear-gradient(180deg, #a5622c 0 6px, var(--cafe-gold) 6px); }
    html.look-cafe #pin-cup.is-error #pin-fill { background: linear-gradient(180deg, #9e3a28 0 6px, var(--color-mustard) 6px); }
    html.look-cafe #pin-sheet {
      border-radius: 0; padding-top: 40px;
      background-color: #ead6bb;
      background-image: repeating-linear-gradient(90deg, rgba(120, 72, 30, .07) 0 2px, transparent 2px 46px), linear-gradient(180deg, #f3e6d3, #ead6bb);
      box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
    }
    /* ชายผ้าลายแดงครีมใต้กันสาด แบบเดียวกับใต้แถบบน (body > nav::after) แต่ใหญ่กว่า */
    html.look-cafe #pin-sheet::before {
      content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
      background: repeating-linear-gradient(90deg, var(--color-mustard) 0 22px, #f6ecd9 22px 44px);
      -webkit-mask: radial-gradient(circle at 11px 0, #000 13.5px, transparent 14px) 0 0 / 22px 14px repeat-x;
              mask: radial-gradient(circle at 11px 0, #000 13.5px, transparent 14px) 0 0 / 22px 14px repeat-x;
    }
    html.look-cafe #pin-sheet::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cafe-green-d); pointer-events: none; }
    html.look-cafe #pin-pad { gap: 12px 16px; }
    html.look-cafe .pin-key {
      min-height: 66px; border-radius: var(--r-md); background: var(--cafe-paper); box-shadow: var(--sh-1);
      color: var(--color-primary); font-size: 28px; transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
    }
    html.look-cafe .pin-key:active { transform: translate(2px, 3px); box-shadow: none; background: var(--color-accent); }
    html.look-cafe .pin-key-del { color: var(--color-mustard); font-size: 22px; }
    html.look-cafe .pin-key-clear { color: var(--color-mute); font-size: 15px; font-family: var(--cafe-hand); }
    html.look-cafe #pin-hello { font-family: var(--cafe-hand); font-size: 26px; }
    html.look-cafe #pin-hello small { font-family: 'Sarabun', sans-serif; }
    html.look-cafe #pin-lock-screen .langsw { background: rgba(246, 236, 217, .14); border: 1px solid rgba(246, 236, 217, .3); }
    html.look-cafe #pin-lock-screen .langsw button.is-on { background: #f6ecd9; color: var(--color-primary); }
    /* จอกว้าง: แบบเรียบย่อแผ่นปุ่มเป็นแผ่นกลางจอ แบบคาเฟ่ให้เคาน์เตอร์ไม้กับชายผ้ายาวเต็มจอ ปุ่มยังอยู่กลาง */
    @media (min-width: 700px) {
      html.look-cafe #pin-sheet { max-width: none; border-radius: 0; }
    }
    @media (min-width: 768px) {
      html.look-cafe #pin-pad { max-width: 380px; }
      html.look-cafe .pin-key { min-height: 72px; }
    }

    /* พื้นเคาน์เตอร์ไม้ แทนพื้นครีมเรียบ */
    html.look-cafe body,
    html.look-cafe .bg-cream {
      background-color: #ead6bb;
      background-image: repeating-linear-gradient(90deg, rgba(120, 72, 30, .07) 0 2px, transparent 2px 46px), linear-gradient(180deg, #f3e6d3, #ead6bb);
      background-attachment: fixed;
    }
    /* การ์ดขาวทั้งแอปเป็นกระดาษ */
    html.look-cafe .bg-white { background-color: var(--cafe-paper); }

    /* ลายมือ: หัวข้อกับชื่อเมนู ตัวเลขยอดเงินยังเป็น Sarabun ให้อ่านง่าย */
    html.look-cafe main h2, html.look-cafe main h3, html.look-cafe .modal-sheet-mobile h3,
    html.look-cafe .pos-name, html.look-cafe .menu-best-h, html.look-cafe .set-nav-title,
    html.look-cafe body > nav h1 { font-family: var(--cafe-hand); }
    html.look-cafe .set-nav-title { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--color-secondary); }

    /* แถบบนเป็นกันสาดเขียว มีชายผ้าลายแดงขาว */
    html.look-cafe body > nav,
    html.look-cafe body > nav.bg-white {
      position: relative; background: var(--color-primary); border-bottom: 0; color: #f6ecd9;
    }
    html.look-cafe body > nav::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; pointer-events: none;
      background: repeating-linear-gradient(90deg, var(--color-mustard) 0 22px, #f6ecd9 22px 44px);
      -webkit-mask: radial-gradient(circle at 11px 0, #000 10.5px, transparent 11px) 0 0 / 22px 10px repeat-x;
              mask: radial-gradient(circle at 11px 0, #000 10.5px, transparent 11px) 0 0 / 22px 10px repeat-x;
    }
    html.look-cafe body > nav h1 { color: #f6ecd9; font-size: 22px; }
    /* แถวในออเดอร์รองพื้นขาวไว้ให้ปัดลบ ในหน้าคาเฟ่ให้เป็นสีกระดาษสมุด */
    html.look-cafe .pos-line-slide { background: #fffdf6; }
    html.look-cafe .nav-chip { background: rgba(246, 236, 217, .12); border-color: rgba(246, 236, 217, .3); color: #f6ecd9; }
    html.look-cafe .nav-chip:hover { background: rgba(246, 236, 217, .22); }
    html.look-cafe main { padding-top: 6px; }

    /* การ์ดเมนูเป็นป้ายกระดาษแปะเทป เอียงนิดๆ สลับซ้ายขวา */
    html.look-cafe .pos-card {
      background: var(--cafe-paper); border: 0; border-radius: var(--r-sm);
      box-shadow: var(--sh-1); padding-top: 12px;
    }
    html.look-cafe .pos-card::before {
      content: ''; position: absolute; top: -7px; left: 50%; width: 46px; height: 14px; margin-left: -23px;
      background: var(--cafe-tape); transform: rotate(-3deg); z-index: 1; pointer-events: none;
    }
    html.look-cafe #menu-grid > .pos-card:nth-child(odd) { rotate: -.8deg; }
    html.look-cafe #menu-grid > .pos-card:nth-child(even) { rotate: .7deg; }
    html.look-cafe #menu-grid { row-gap: 16px; padding-top: 8px; }
    html.look-cafe .pos-card:hover { box-shadow: var(--sh-2); }
    html.look-cafe .pos-th { border: 0; }
    html.look-cafe .pos-price { color: var(--color-mustard); }
    html.look-cafe .pos-qty-badge { border-radius: 4px; rotate: 8deg; background: var(--color-mustard); }

    /* หมวดเป็นป้ายกระดาษขอบหมึก */
    html.look-cafe #menu-categories-track button { border-radius: var(--r-sm); }

    /* ปุ่มหลักบนหน้าขาย: ทองมีขอบล่าง กดแล้วยุบลง */
    html.look-cafe .btn-till.is-primary { background: var(--cafe-gold); color: var(--color-secondary); box-shadow: 0 4px 0 var(--cafe-gold-d); }
    html.look-cafe .btn-till.is-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cafe-gold-d); }
    html.look-cafe .btn-till.is-ghost { background: var(--cafe-paper); border-color: var(--color-line); }
    html.look-cafe .btn-till.is-primary .pay-chip { background: rgba(43, 29, 20, .1); }

    /* แผงออเดอร์: กระดาษสมุดมีเส้น */
    html.look-cafe #cart-container {
      background-color: #fffdf6;
      background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(80, 120, 170, .14) 31px 32px);
      border-color: var(--color-line);
    }

    @media (max-width: 1023.98px) {
      /* แถบล่างบนมือถือเป็นป้ายเขียวลอย มุมมน */
      html.look-cafe .pos-bottom-bar {
        left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
        padding: 10px 10px 10px 16px; border: 0; border-radius: 10px;
        background: var(--color-primary); color: #f6ecd9;
        box-shadow: 0 8px 0 var(--cafe-green-d), 0 18px 26px -12px rgba(0, 0, 0, .45);
      }
      html.look-cafe .pos-bottom-bar #pos-bar-label { color: rgba(246, 236, 217, .8); }
      html.look-cafe .pos-bottom-bar #pos-bar-total { color: #f6ecd9; }
      html.look-cafe .pos-bottom-bar .btn-till.is-ghost { background: rgba(246, 236, 217, .14); border-color: rgba(246, 236, 217, .5); color: #f6ecd9; }
      html.look-cafe .pos-bottom-bar.is-free { background: var(--color-staff-drink); box-shadow: 0 8px 0 #23536b, 0 18px 26px -12px rgba(0, 0, 0, .45); }
      html.look-cafe .pos-bottom-bar.is-free #pos-bar-total { color: #fff; }
      html.look-cafe .pos-bottom-bar.is-free #btn-bar-view { background: var(--cafe-paper); border-color: var(--cafe-paper); color: var(--color-staff-drink); }
      html.look-cafe .cart-edge-tab { border-radius: 10px 0 0 10px; }
    }

    /* ประวัติ: แต่ละบิลเป็นต้นขั้วกระดาษ */
    html.look-cafe #history-list { background: none; border: 0; box-shadow: none; padding: 4px 2px; }
    html.look-cafe #history-list > [data-invoice] {
      background: #fffdf7; border-radius: 3px; padding: 12px 14px; margin-bottom: 10px;
      box-shadow: 1px 2px 0 rgba(43, 29, 20, .2); border-top-width: 0 !important;
    }
    html.look-cafe #history-list > [data-invoice]:nth-child(odd) { rotate: -.4deg; }
    html.look-cafe #history-list > [data-invoice]:nth-child(even) { rotate: .35deg; }
    html.look-cafe .history-inv { font-family: var(--cafe-hand); font-size: 17px; }

    /* ตั้งค่า: ปุ่มเมนูเป็นการ์ดกระดาษ */
    html.look-cafe .set-nav-item { background: var(--cafe-paper); border: 0; box-shadow: var(--sh-1); }
    /* เมนูที่เลือกอยู่เป็นป้ายเขียวตัวหนังสือครีม (พื้นกระดาษข้างบนทับพื้นเขียวเดิมจนตัวหนังสือขาวหายไป) */
    html.look-cafe .set-nav-item.is-on { background: var(--color-primary); color: #f6ecd9; box-shadow: inset 4px 0 0 var(--color-mustard), var(--sh-1); }

    /* การ์ดหน้าตาแอปบนสุดของหน้าตั้งค่า (ทั้งสองหน้าตาใช้) */
    .look-card { background: #fff; border: 1px solid var(--color-sand); border-radius: var(--r-md); padding: 4px 14px; margin-bottom: 18px; }
    html.look-cafe .look-card { background: var(--cafe-paper); border: 0; box-shadow: var(--sh-1); }
    .look-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
    .look-row + .look-row { border-top: 1px dashed var(--color-line); }
    .look-row-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: var(--color-secondary); }
    .look-row-t small { display: block; font-size: 12px; font-weight: 700; color: var(--color-mute); }
    .look-seg { display: inline-flex; border: 2px solid var(--color-secondary); border-radius: var(--r-sm); overflow: hidden; flex: none; }
    .look-seg button { min-height: 40px; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 800; color: var(--color-secondary); }
    .look-seg button.is-on { background: var(--color-secondary); color: #fff; }
    .look-switch { width: 52px; height: 30px; flex: none; border: 0; border-radius: 99px; background: var(--color-line); position: relative; }
    .look-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s ease; }
    .look-switch.is-on { background: var(--color-primary); }
    .look-switch.is-on::after { left: 25px; }

    /* ลดการเคลื่อนไหว: เลือกเองในตั้งค่า ใช้ได้ทั้งสองหน้าตา (ระบบที่ตั้ง reduce motion ไว้มีบล็อกของตัวเองอยู่แล้ว) */
    html.calm *, html.calm *::before, html.calm *::after {
      animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; transition-delay: 0s !important;
    }

    /* ===== หน้าตาคาเฟ่ ขั้นที่ 2: หน้าขายขยับ =====
       ท่าเล่นจาก JS (Controller.cafeAnim) เฉพาะหน้าคาเฟ่และไม่ได้ลดการเคลื่อนไหว ตรงนี้มีแต่หน้าตาของชิ้นที่ขยับ */

    /* แก้วตัวการ์ตูน: หน้าเรียบไม่โชว์ */
    .pos-bar-mascot, .cart-empty-mascot { display: none; }
    html.look-cafe .pos-bar-mascot { display: block; width: 44px; height: 44px; flex: none; }
    html.look-cafe .pos-bar-mascot svg { width: 100%; height: 100%; display: block; }
    /* จอแคบใส่แก้ว ยอด ปุ่มดูออเดอร์ และปุ่มจ่ายไม่พอ: ซ่อนปุ่มดูออเดอร์ แตะยอดหรือแท็บขอบขวาแทน
       โหมดพนักงานดื่มไม่มีปุ่มจ่าย ปุ่มดูรายการจึงยังอยู่ */
    html.look-cafe .pos-bottom-bar:not(.is-free) #btn-bar-view { display: none; }
    html.look-cafe .pos-bar-sum { flex: 1; min-width: 0; cursor: pointer; }
    html.look-cafe .cart-empty-icon { display: none; }
    html.look-cafe .cart-empty-mascot { display: block; width: 88px; height: 88px; }
    html.look-cafe .cart-empty-mascot svg { width: 100%; height: 100%; display: block; }

    /* หมดแล้ว: แก้วล้มนอน ป้าย "หมด" เป็นป้ายกระดาษเล็ก ไม่ใช่แผ่นแดงทับทั้งช่อง */
    html.look-cafe .pos-card.is-out { opacity: .65; }
    html.look-cafe .pos-card.is-out .pos-art { rotate: -82deg; translate: -6px 8px; filter: none; opacity: 1; }
    html.look-cafe .pos-th-out {
      inset: auto; left: 50%; bottom: 12%; translate: -50% 0; rotate: -8deg;
      background: var(--cafe-paper); border: 2px solid var(--color-mustard); color: var(--color-mustard);
      border-radius: 6px; padding: 0 10px; font-family: var(--cafe-hand); font-size: 18px;
    }

    html.look-cafe .pos-th-left {
      border-radius: 6px; rotate: -4deg;
      background: var(--cafe-paper); border: 2px solid var(--color-mustard); color: var(--color-mustard);
      font-family: var(--cafe-hand); font-size: 18px;
    }

    /* แก้วที่บินลงออเดอร์ */
    .cart-fly.is-cup { width: 44px; height: 44px; border: 0; border-radius: 0; background: none; box-shadow: none; display: grid; place-items: center; }
    .cart-fly.is-cup svg { width: 100%; height: 100%; }
    .cart-fly.is-cup.has-photo { border-radius: 8px; background-size: cover; background-position: center; box-shadow: 0 6px 14px -6px rgba(43, 29, 20, .6); }

    /* ===== หน้าตาคาเฟ่ ขั้นที่ 3: ออเดอร์กับหน้าจ่ายเงิน ===== */

    /* แถวที่ขยำ (สำเนา) กับก้อนกระดาษที่ตก สร้างชั่วคราวแล้วลบทิ้ง */
    .cart-crumple { position: fixed; z-index: 200; pointer-events: none; margin: 0; background: #fffdf6; box-shadow: 0 6px 14px -8px rgba(43, 29, 20, .5); transform-origin: 70% 50%; overflow: hidden; }
    .cart-paper-ball {
      position: fixed; z-index: 200; width: 28px; height: 28px; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle at 35% 35%, #fffdf6, #e2d6bd 70%);
      box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .2);
    }

    /* ลิ้นชักเก็บเงิน: หน้าเรียบไม่มี หน้าคาเฟ่เลื่อนออกมาตอนเลือกเงินสด */
    .checkout-till, .checkout-stand { display: none; }
    html.look-cafe .checkout-till { display: block; height: 0; overflow: hidden; position: relative; z-index: 1; transition: height .26s cubic-bezier(.3, .7, .4, 1.3); }
    html.look-cafe #modal-checkout.is-cash .checkout-till { height: 54px; }
    .checkout-till-tray {
      margin: 0 22px; height: 46px; translate: 0 -46px; transition: translate .26s cubic-bezier(.3, .7, .4, 1.3);
      background: #8a6446; border-radius: 0 0 10px 10px; box-shadow: 0 5px 0 #5a3e2a;
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 6px 8px 8px;
    }
    html.look-cafe #modal-checkout.is-cash .checkout-till-tray { translate: 0 0; }
    .checkout-till-tray i { border-radius: 3px; background: #5a3e2a; position: relative; overflow: hidden; }
    .checkout-till-tray i::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 70%; border-radius: 2px; }
    .checkout-till-tray i:nth-child(1)::after { background: #9ccf8a; }
    .checkout-till-tray i:nth-child(2)::after { background: #8fb4e3; }
    .checkout-till-tray i:nth-child(3)::after { background: #e48b82; }
    .checkout-till-tray i:nth-child(4)::after { background: #b79ad0; }
    .checkout-till-tray i:nth-child(5)::after { background: #c9bcae; }
    .checkout-coin { position: absolute; top: 26px; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 35%, #fff3c4, #d8a536 70%); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .15); }

    /* ป้ายตั้งโต๊ะ QR (รูปประดับ) */
    html.look-cafe .checkout-stand:not(.hidden) { display: grid; justify-items: center; margin: -8px 0 18px; }
    .checkout-stand-card { width: 190px; background: #fff; border-radius: 10px; padding: 14px; display: grid; justify-items: center; gap: 6px; box-shadow: 0 10px 0 #8a6446, 0 14px 18px -8px rgba(0, 0, 0, .35); }
    .checkout-stand-card { width: 210px; }
    .checkout-stand-card img { width: 170px; height: 170px; object-fit: contain; display: block; }
    .checkout-stand-empty { width: 170px; height: 170px; display: grid; place-items: center; border: 2px dashed var(--color-line); border-radius: 8px; color: #b9a98d; }
    .checkout-stand-empty svg { width: 70px; height: 70px; }
    .checkout-stand-card b { font-size: 20px; color: var(--color-secondary); }
    .checkout-stand-card small { font-size: 13px; font-weight: 700; color: var(--color-mute); }

    /* แบงก์ตามสีจริง เอียงนิดๆ เหมือนเพิ่งยื่นมา */
    html.look-cafe .cash-note[class*="is-n"] { color: #fff; border: 0; position: relative; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
    html.look-cafe .cash-note[class*="is-n"]::after { content: ''; position: absolute; inset: 4px; border: 1px dashed rgba(255, 255, 255, .45); border-radius: 4px; pointer-events: none; }
    html.look-cafe .cash-note.is-n20 { background: #4f8a4b; }
    html.look-cafe .cash-note.is-n50 { background: #3d6fb0; }
    html.look-cafe .cash-note.is-n100 { background: #c0443a; }
    html.look-cafe .cash-note.is-n500 { background: #7b4f9e; }
    html.look-cafe .cash-note.is-n1000 { background: #8b7b6b; }
    html.look-cafe .cash-note[class*="is-n"]:active { transform: translateY(-6px) rotate(-4deg); }

    /* กล่องเงินทอน: ยังไม่รับเงินเป็นกระดาษ ขาดเป็นแดง พอแล้วเป็นเขียว */
    html.look-cafe #cash-change-box { background: var(--color-fill); color: var(--color-mute); }
    html.look-cafe #cash-change-box.is-short { background: #fbe7e1; color: #a8402a; }
    html.look-cafe #cash-change-box.is-enough { background: #e3efe2; color: #2f6b45; }
    html.look-cafe .quick-cash-chg { background: var(--color-fill); color: var(--color-mute); }
    html.look-cafe .quick-cash-chg.is-short { background: #fbe7e1; color: #a8402a; }
    html.look-cafe .quick-cash-chg.is-enough { background: #e3efe2; color: #2f6b45; }
    html.look-cafe .quick-cash-ok.is-off { background: var(--color-fill); color: var(--color-mute); box-shadow: none; }

    /* หัวหน้าต่างจ่ายเงินเป็นกันสาดเขียวเรียบ ลายมือ */
    html.look-cafe #modal-checkout .bg-gradient-to-b.from-primary { background: var(--color-primary); font-family: var(--cafe-hand); position: relative; z-index: 2; }
    /* ยอดเงินในหน้าต่างจ่ายเป็น h3 แต่ต้องคงตัวเลข Sarabun ไม่ใช่ลายมือ */
    html.look-cafe #checkout-total { font-family: 'Sarabun', 'Noto Sans Myanmar', sans-serif; }

    /* ===== หน้าตาคาเฟ่ ขั้นที่ 4: จังหวะจ่ายแล้ว =====
       แผ่นเดิม (#paid-overlay) ยังอยู่ใต้หน้าต่างถามพิมพ์และไม่รับคลิก หน้าคาเฟ่แค่เปลี่ยนของข้างในเป็นใบเสร็จ */
    .paid-receipt { display: none; }
    /* ขึ้นเหนือม่านเบลอของหน้าต่างถามพิมพ์ (z-[95]) ไม่งั้นเลขคิวเบลอจนอ่านไม่ออก ยังไม่รับคลิกเหมือนเดิม
       วางช่วงบนของจอทุกขนาด การ์ดคำถามอยู่กลางจอจึงไม่โดนบัง */
    #paid-overlay.is-cafe { z-index: 96; background: none; justify-content: flex-start; padding-top: 70px; }
    #paid-overlay.is-cafe .paid-ring-wrap,
    #paid-overlay.is-cafe #paid-overlay-queue,
    #paid-overlay.is-cafe #paid-overlay-total { display: none; }
    #paid-overlay.is-cafe .paid-receipt { display: grid; justify-items: center; }
    #paid-overlay.is-cafe.is-on { animation-duration: 1.4s; }
    #paid-overlay.is-cafe.has-ribbon.is-on { animation-duration: 2s; }
    .paid-slot { width: 280px; height: 14px; border-radius: 8px; background: #2b1d14; box-shadow: 0 2px 0 #000; position: relative; z-index: 2; }
    .paid-clip { width: 266px; overflow: hidden; margin-top: -6px; }
    .paid-paper {
      background: #fffdf7; padding: 18px 18px 28px; display: grid; gap: 4px; justify-items: center;
      filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .18));
      clip-path: polygon(0 0, 100% 0, 100% 94%, 95% 100%, 90% 94%, 85% 100%, 80% 94%, 75% 100%, 70% 94%, 65% 100%, 60% 94%, 55% 100%, 50% 94%, 45% 100%, 40% 94%, 35% 100%, 30% 94%, 25% 100%, 20% 94%, 15% 100%, 10% 94%, 5% 100%, 0 94%);
    }
    .paid-paper small { font-size: 13px; font-weight: 700; color: var(--color-mute); }
    .paid-paper b { font-family: var(--cafe-hand); font-size: 76px; line-height: 1; color: var(--color-mustard); font-weight: 700; }
    .paid-amtrow { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--color-secondary); }
    .paid-stamp { border: 3px solid #2f8a4f; color: #2f8a4f; border-radius: 8px; padding: 0 8px; font-family: var(--cafe-hand); font-size: 18px; rotate: -12deg; background: rgba(255, 253, 247, .85); }
    .paid-ribbon { margin-top: 8px; white-space: nowrap; background: var(--cafe-gold); color: var(--color-secondary); font-family: var(--cafe-hand); font-size: 15px; padding: 3px 12px; border-radius: 4px; rotate: -2deg; }
    .paid-ribbon.hidden { display: none; }

    /* ===== หน้าตาคาเฟ่ ขั้นที่ 5: ประวัติกับหน้ายอดขาย ===== */

    /* ประวัติ: ต้นขั้วเสียบหมุดแดงไว้บนสุด บิลยกเลิกโดนตราแดง บิลใหม่ตกลงมาแกว่งเข้าที่ */
    html.look-cafe #history-list { position: relative; padding-top: 22px; }
    html.look-cafe #history-list::before {
      content: ''; position: absolute; top: 2px; left: 50%; width: 14px; height: 14px; margin-left: -7px; z-index: 2;
      border-radius: 50%; background: var(--color-mustard); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .2), 0 10px 0 -5px #8a8a8a;
    }
    html.look-cafe #history-list > .is-cancelled { position: relative; }
    html.look-cafe #history-list > .is-cancelled::after {
      content: 'ยกเลิก'; position: absolute; right: 96px; top: 28px; rotate: -10deg; pointer-events: none;
      border: 3px solid #b3261e; color: #b3261e; border-radius: 6px; padding: 0 8px;
      font-family: var(--cafe-hand); font-size: 20px; line-height: 1.4; background: rgba(255, 253, 247, .7);
    }
    html.look-cafe body.lang-my #history-list > .is-cancelled::after { content: 'ပယ်ဖျက်'; font-family: 'Noto Sans Myanmar', sans-serif; font-size: 16px; }
    html.look-cafe #history-list .is-fresh {
      animation: history-stub-drop .52s cubic-bezier(.3, .7, .4, 1);
      overflow: visible;
    }
    @keyframes history-stub-drop {
      0%   { transform: translateY(-60px) rotate(-8deg); opacity: 0; }
      55%  { transform: translateY(6px) rotate(3deg); opacity: 1; }
      80%  { transform: translateY(-2px) rotate(-1deg); }
      100% { transform: none; }
    }

    /* หน้ายอดขาย: ยอดของวันกับเมนูขายดีเขียนบนกระดานดำกรอบไม้ ตัวเลขยังเป็น Sarabun */
    html.look-cafe #sales-hero-sec,
    html.look-cafe #sales-top-sec {
      position: relative; margin: 12px; border: 10px solid #8a6446; border-radius: 8px; color: #eef0e6;
      background-color: #24332b; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 6px 6px;
      box-shadow: 0 8px 0 #5a3e2a, inset 0 0 30px rgba(0, 0, 0, .35);
    }
    html.look-cafe #sales-hero-sec::after {
      content: ''; position: absolute; right: 14px; bottom: -16px; width: 46px; height: 10px; rotate: -6deg;
      border-radius: 3px; background: #f4f1e6; box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
    }
    html.look-cafe #sales-hero-sec .sales-label,
    html.look-cafe #sales-top-sec .sales-sec-t { font-family: var(--cafe-hand); font-size: 16px; letter-spacing: 0; text-transform: none; color: rgba(238, 240, 230, .85); }
    html.look-cafe #sales-hero-sec .sales-hero { color: #ffe08a; text-shadow: 0 0 1px rgba(255, 224, 138, .6); }
    html.look-cafe #sales-hero-sec .sales-fact { color: rgba(238, 240, 230, .85); }
    html.look-cafe #sales-hero-sec .sales-fact b { color: #fff; }
    html.look-cafe #sales-top-sec .sales-row-lab { font-family: var(--cafe-hand); color: #eef0e6; }
    html.look-cafe #sales-top-sec .sales-row-extra { color: rgba(238, 240, 230, .7); }
    html.look-cafe #sales-top-sec .sales-row-val { color: #fff; }
    html.look-cafe #sales-top-sec .sales-row-track { background: none; }
    html.look-cafe #sales-top-sec .sales-row-fill {
      background: repeating-linear-gradient(90deg, #ffe08a 0 6px, transparent 6px 9px); border-radius: 3px;
      filter: drop-shadow(0 0 1px rgba(255, 224, 138, .6)); transform-origin: 0 50%;
      animation: chalk-draw .48s ease-out backwards;
    }
    html.look-cafe #sales-top-sec .sales-row:nth-child(2) .sales-row-fill { animation-delay: .09s; }
    html.look-cafe #sales-top-sec .sales-row:nth-child(3) .sales-row-fill { animation-delay: .18s; }
    html.look-cafe #sales-top-sec .sales-row:nth-child(4) .sales-row-fill { animation-delay: .27s; }
    html.look-cafe #sales-top-sec .sales-row:nth-child(n+5) .sales-row-fill { animation-delay: .36s; }
    html.look-cafe #sales-top-sec .sales-empty { color: rgba(238, 240, 230, .7); }
    @keyframes chalk-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @media (prefers-reduced-motion: reduce) {
      html.look-cafe #history-list .is-fresh, html.look-cafe #sales-top-sec .sales-row-fill { animation: none; }
    }
    /* ส่วนอื่นของหน้ายอดขายเป็นกระดาษ (จอกว้างแตกเป็นการ์ดสองคอลัมน์ กระดานไม่ต้องเว้นขอบเพิ่ม) */
    html.look-cafe .sales-box { background: var(--color-fill); border-color: var(--color-fill-2); }
    @media (min-width: 1024px) {
      html.look-cafe .sales-sec { background: var(--cafe-paper); border-color: transparent; box-shadow: var(--sh-1); border-radius: var(--r-md); }
      html.look-cafe .sales-sec.sales-sec-bar { background: none; box-shadow: none; }
      html.look-cafe #sales-hero-sec, html.look-cafe #sales-top-sec { margin: 0; border: 10px solid #8a6446; border-radius: 8px; background-color: #24332b; }
    }

    /* ===== หน้าตาคาเฟ่ ขั้นที่ 6: ตั้งค่า สต๊อก แท็บพนักงาน ===== */

    /* หน้าแรกของตั้งค่าบนมือถือ: การ์ดสูตรอาหารแถวละสองใบ ชื่ออยู่เหนือเส้นแดง จอใหญ่เมนูข้างยังเป็นรายการ */
    @media (max-width: 1023.98px) {
      html.look-cafe #settings-shell.is-home .set-nav-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
      html.look-cafe #settings-shell.is-home .set-nav-title { grid-column: 1 / -1; margin: 6px 0 -2px 2px; }
      html.look-cafe #settings-shell.is-home .set-nav-item + .set-nav-item { margin-top: 0; }
      html.look-cafe #settings-shell.is-home .set-nav-item {
        position: relative; display: block; min-height: 92px; padding: 12px; border-radius: 6px; white-space: normal;
        background-color: var(--cafe-paper);
        background-image: repeating-linear-gradient(0deg, transparent 0 21px, rgba(80, 120, 170, .12) 21px 22px);
        background-position: 0 44px; background-repeat: no-repeat; background-size: 100% calc(100% - 44px);
      }
      html.look-cafe #settings-shell.is-home .set-nav-item:nth-child(odd) { rotate: .7deg; }
      html.look-cafe #settings-shell.is-home .set-nav-item:nth-child(even) { rotate: -.8deg; }
      html.look-cafe #settings-shell.is-home .set-nav-ic { float: left; width: 22px; height: 22px; margin-right: 8px; color: var(--color-primary); }
      html.look-cafe #settings-shell.is-home .set-nav-label {
        display: block; overflow: visible; white-space: normal; padding: 1px 22px 6px 0; border-bottom: 2px solid rgba(200, 85, 61, .7);
        font-family: var(--cafe-hand); font-size: 16px; line-height: 1.3;
      }
      html.look-cafe #settings-shell.is-home .set-nav-chev { display: none; }
      html.look-cafe #settings-shell.is-home .set-nav-count { position: absolute; top: 10px; right: 10px; margin: 0; }
    }

    /* สต๊อก: โหลเล็กเติมตามระดับ ของใกล้หมดโหลแดงส่ายตัว มีป้ายใกล้หมด และหมายเหตุแดงบนสุด หน้าเรียบไม่โชว์ทั้งหมด */
    .inv-jar, .inv-low-tag, .inv-low-note { display: none; }
    html.look-cafe .inv-jar {
      display: block; position: relative; width: 34px; height: 42px; flex: none; overflow: hidden; transform-origin: 50% 100%;
      border: 2.5px solid rgba(43, 29, 20, .6); border-top-width: 6px; border-radius: 6px 6px 11px 11px; background: rgba(255, 255, 255, .6);
    }
    html.look-cafe .inv-jar i { position: absolute; left: 0; right: 0; bottom: 0; background: #c9a27a; }
    html.look-cafe .inv-low .inv-jar { border-color: #b3261e; animation: jar-wobble 1.6s ease-in-out infinite; }
    html.look-cafe .inv-low .inv-jar i { background: #e48b82; }
    html.look-cafe .inv-low-tag { display: inline-block; background: #b3261e; color: #fff; border-radius: 4px; font-size: 12px; font-weight: 800; padding: 1px 6px; }
    html.look-cafe .inv-low-note:not(.hidden) { display: block; margin: 12px 0 4px; background: #fbe7e1; color: #a8402a; border-radius: 6px; padding: 10px 12px; font-weight: 800; font-size: 15px; }
    @keyframes jar-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

    /* แท็บพนักงาน: ตราประทับบนการ์ด */
    .free-stamp {
      position: absolute; left: 50%; top: 28%; translate: -50% 0; z-index: 3; pointer-events: none;
      border: 3px solid var(--color-staff-drink); color: var(--color-staff-drink); border-radius: 8px; padding: 0 10px;
      font-family: var(--cafe-hand); font-size: 28px; line-height: 1.3; background: rgba(255, 250, 240, .8);
    }
    .free-stamp.is-waste { border-color: var(--color-danger); color: var(--color-danger); }
    @media (prefers-reduced-motion: reduce) { html.look-cafe .inv-low .inv-jar { animation: none; } }
    /* "1 แก้ววันนี้" ยาวกว่ายอดเงิน ตัวใหญ่เท่ายอดเงินแล้วชนป้ายบรรทัดบน */
    html.look-cafe .pos-bottom-bar.is-free #pos-bar-total { font-size: 24px; line-height: 1.25; }

    /* ---- ประเภทออเดอร์: หน้าเลือก 3 ปุ่มบังเมนู ชิปบนหัวออเดอร์กับแถบล่าง ป้ายในประวัติ ----
       ปุ่มใหญ่สามแถวบนมือถือ การ์ดใหญ่สามใบเรียงแถวบนจอกว้าง แถบหมวดหมู่ยังกดได้ (ไปแท็บพนักงานไม่ต้องเลือก) */
    #view-pos.is-picking-type #menu-grid,
    #view-pos.is-picking-type #menu-best,
    #view-pos.is-picking-type #menu-staff-banner { display: none !important; }
    .order-type-picker { min-height: calc(100% - 64px); display: flex; align-items: center; justify-content: center; padding: 8px 0 24px; }
    .ot-picker-in { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 14px; }
    .ot-title { margin: 0; text-align: center; font-size: 24px; font-weight: 800; color: var(--color-secondary); }
    .ot-sub { margin: -8px 0 4px; text-align: center; font-size: 15px; font-weight: 600; color: var(--color-mute); }
    .ot-btns { display: flex; flex-direction: column; gap: 12px; }
    .ot-btn {
      display: flex; align-items: center; gap: 18px; width: 100%; min-height: 104px; padding: 0 24px;
      border-radius: 16px; border: 2px solid var(--color-line); background: #fff; color: var(--color-secondary);
      font-size: 28px; font-weight: 800; text-align: left; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
      transition: transform .08s ease, background-color .12s ease, border-color .12s ease;
    }
    .ot-btn:hover { border-color: var(--color-primary); }
    .ot-btn:active { transform: scale(.98); background: var(--color-accent); border-color: var(--color-primary); }
    .ot-btn:focus-visible, .ot-chip:focus-visible, .ot-cancel:focus-visible { outline: 3px solid var(--color-mustard); outline-offset: 2px; }
    .ot-btn .ot-ic { width: 46px; height: 46px; flex: none; color: var(--color-primary); }
    .ot-btn.is-cur { border-color: var(--color-primary); }
    .ot-btn em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--color-primary); color: #fff; }
    .ot-cancel { align-self: center; min-height: 44px; padding: 0 18px; font-size: 16px; font-weight: 700; color: var(--color-mute); background: none; border: 0; cursor: pointer; }
    @media (min-width: 1024px) {
      .ot-picker-in { max-width: 980px; }
      .ot-title { font-size: 32px; }
      .ot-btns { flex-direction: row; justify-content: center; gap: 22px; }
      .ot-btn { flex: 1 1 0; max-width: 300px; min-height: 240px; flex-direction: column; justify-content: center; text-align: center; gap: 14px; font-size: 32px; padding: 16px; }
      .ot-btn .ot-ic { width: 68px; height: 68px; }
      .ot-btn em { margin-left: 0; }
    }
    .ot-chip {
      display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; flex: none;
      border-radius: 999px; border: 1.5px solid var(--color-primary); background: var(--color-accent); color: var(--color-primary);
      font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer;
    }
    .ot-chip.hidden, .order-type-picker.hidden { display: none; }
    .ot-chip .ot-ic { width: 16px; height: 16px; flex: none; }
    .ot-chip::after { content: '▾'; font-size: 11px; }
    .ot-chip.is-empty { border-style: dashed; background: #fff; color: var(--color-mute); }
    .pos-bottom-bar .ot-chip { min-height: 44px; padding: 0 12px; font-size: 15px; }
    .pos-bottom-bar.has-type .pos-bar-mascot { display: none !important; }
    .cart-type-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--color-sand); font-size: 14px; font-weight: 700; color: var(--color-mute); flex: none; }
    .cart-type-row.hidden { display: none; }
    .cart-type-row .ot-chip { min-height: 40px; font-size: 16px; }
    @media (min-width: 1024px) { .cart-type-row { display: none !important; } }
    @media (max-width: 1023.98px) { #cart-type-chip { display: none !important; } }
    .ot-tag { display: inline-flex; align-items: center; gap: 3px; margin: 4px 0 0 4px; padding: 2px 7px; border-radius: 4px; background: var(--color-accent); color: var(--color-primary); font-size: 10px; font-weight: 800; vertical-align: top; }
    .ot-tag .ot-ic { width: 11px; height: 11px; }
    html.look-cafe .ot-title { font-family: var(--cafe-hand); font-weight: 700; font-size: 26px; }
    html.look-cafe .ot-btn { background: var(--cafe-paper); border-radius: var(--r-md); box-shadow: var(--sh-1); font-family: var(--cafe-hand); font-weight: 700; }
    html.look-cafe .ot-btn:active { transform: translate(2px, 3px); box-shadow: none; }
    html.look-cafe .pos-bottom-bar .ot-chip { background: rgba(255, 255, 255, .14); border-color: rgba(246, 236, 217, .6); color: #f6ecd9; }
    html.look-cafe .pos-bottom-bar .ot-chip.is-empty { background: transparent; }
    @media (min-width: 1024px) { html.look-cafe .ot-title { font-size: 34px; } }
    @media (prefers-reduced-motion: reduce) { .ot-btn { transition: none; } .ot-btn:active { transform: none; } }
    html.calm .ot-btn { transition: none; }