:root {
    --lemon-400:#F5C518; --lemon-500:#E5B00A; --lemon-300:#FADF5E;
    --lemon-200:#FFE999; --lemon-100:#FFF4CC; --lemon-50:#FFFBEB;
    --ink-900:#1C1917; --ink-800:#292524; --ink-700:#44403C; --ink-500:#78716C;
    --cream:#FAF8F0; --paper:#FFFBF0; --line:#F0EBDC; --line-2:#E8E2CF;
    --success-500:#22C55E; --success-600:#16A34A; --success-100:#DCFCE7;
    --danger-500:#DC2626; --danger-100:#FEE2E2;
    --warn-500:#F59E0B; --warn-100:#FEF3C7;
    --info-500:#3B82F6; --info-100:#DBEAFE;
  }
  * { -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; overflow: hidden; }
  body {
    font-family:'Inter','Noto Sans Thai',sans-serif;
    color: var(--ink-900);
    background: #E8E4D6;
    background-image:
      radial-gradient(circle at 15% 5%, rgba(245,197,24,0.15), transparent 35%),
      radial-gradient(circle at 85% 90%, rgba(245,197,24,0.10), transparent 35%);
  }
  .tabular { font-variant-numeric: tabular-nums; }
  .logo-mark { font-family:'Inter',sans-serif; font-weight:900; font-style:italic; letter-spacing:-0.02em; }

  /* ═══════════════════════ APP SHELL · DESKTOP/MOBILE ═══════════════════════ */
  .app-shell {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    gap: 36px;
    padding: 24px;
  }

  /* ─── NAV RAIL (DESKTOP ONLY) ─── */
  .nav-rail {
    width: 240px;
    flex-shrink: 0;
    background: white;
    border-radius: 24px;
    padding: 24px 18px;
    box-shadow: 0 16px 32px -16px rgba(28,25,23,0.18);
    align-self: stretch;
    max-height: 820px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .nav-rail .brand {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 8px 16px 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
  }
  .nav-rail .brand-name { font-size: 22px; font-weight: 900; letter-spacing:-0.03em; }
  .nav-rail .brand-tag { font-size: 11px; font-weight: 700; opacity: 0.5; letter-spacing: 0.08em; }
  .nav-section-cap { font-size:9px; font-weight:800; letter-spacing:0.22em; opacity:0.45; padding:14px 8px 6px 8px; }
  .nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-700);
    cursor: pointer;
    transition: background .12s, color .12s;
  }
  .nav-link:hover { background: var(--lemon-50); color: var(--ink-900); }
  .nav-link.active { background: var(--ink-900); color: var(--lemon-400); }
  .nav-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
  .nav-link.active svg { opacity: 1; }
  .nav-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
  .nav-sub { display:flex; align-items:center; gap:8px; padding:10px 8px; }
  .nav-sub-pill { background: var(--lemon-100); color: var(--ink-900); padding: 4px 8px; border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; }
  .nav-sub-text { font-size: 11px; opacity: 0.65; font-weight: 600; line-height: 1.3; }

  @media (max-width: 900px) {
    .app-shell { padding: 0; gap: 0; }
    .nav-rail { display: none; }
  }

  /* ═══════════════════════ PHONE FRAME ═══════════════════════ */
  .phone-stage { flex-shrink: 0; }
  .phone {
    width: 380px;
    height: 820px;
    background: #0A0908;
    border-radius: 62px;
    padding: 14px;
    box-shadow:
      0 0 0 2px #1F1F1F inset,
      0 50px 100px -30px rgba(0,0,0,0.55),
      0 20px 40px -10px rgba(0,0,0,0.3);
    position: relative;
  }
  .phone::after {
    content:''; position:absolute;
    left: -3px; top: 150px; width: 4px; height: 64px;
    background: #0A0908; border-radius: 2px 0 0 2px;
  }
  .phone::before {
    content:''; position:absolute;
    right: -3px; top: 200px; width: 4px; height: 90px;
    background: #0A0908; border-radius: 0 2px 2px 0;
  }
  .phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 48px;
    overflow: hidden;
    position: relative;
    background: var(--cream);
    overscroll-behavior: contain;
  }
  .notch {
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 122px;
    height: 36px;
    background: #000000;
    border-radius: 20px;
    z-index: 95;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 2px rgba(255,255,255,0.08);
  }
  .notch::after {
    content: ''; position: absolute;
    top: 50%; right: 14px; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: #1A1A1F;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 4px rgba(60,80,120,0.25);
  }
  .status-bar {
    position: absolute;
    top: 14px; left: 14px; right: 14px;
    height: 50px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px 0 28px;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
    background: var(--cream);
    color: var(--ink-900);
    border-top-left-radius: 48px;
    border-top-right-radius: 48px;
  }
  .home-bar {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 4px;
    background: rgba(28,25,23,0.35);
    border-radius: 2px;
    z-index: 70;
  }
  /* Hide the status bar on screens that opt out (e.g. login) — keeps the
     top of the phone visually clean: just bezel + dynamic island + cream,
     symmetric with the bottom. */
  .phone:has(.screen.active[data-no-status="true"]) .status-bar {
    display: none;
  }

  @media (max-width: 900px) {
    .phone-stage { width: 100vw; height: 100vh; }
    .phone {
      width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
      border-radius: 0; padding: 0;
      box-shadow: none;
    }
    .phone::after, .phone::before { display: none; }
    .phone-screen { border-radius: 0; }
    .notch { display: none; }
    .status-bar { display: none; }
    .home-bar { display: none; }
  }

  /* ═══════════════════════ SCREEN BASE ═══════════════════════ */
  .screen {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    display: none;
    flex-direction: column;
    padding-top: 50px;     /* status bar */
    padding-bottom: 16px;   /* home bar */
  }
  .screen.active { display: flex; animation: fadeIn .2s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
  .screen::-webkit-scrollbar { width: 0; height: 0; }

  /* Sticky sub-header for inner pages. The .screen already has padding-top:50px
     to reserve space for the status bar, and sticky offsets are measured from
     the content edge, so top:0 sticks the header flush below the status bar.
     (Was top:50px, which double-counted and left a 50px gap where scrolled
     content leaked through.) */
  .page-head {
    position: sticky;
    top: 0;
    z-index: 55;
    flex-shrink: 0;
    padding: 12px 18px 14px 18px;
    background: var(--cream);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
  }
  .back-btn {
    width: 36px; height: 36px; border-radius: 12px;
    background: white; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .12s;
  }
  .back-btn:active { background: var(--lemon-100); }
  .page-title { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; }
  .page-sub { font-size: 11px; opacity: 0.55; font-weight: 600; }
  .page-action {
    margin-left: auto;
    display: flex; gap: 8px;
  }
  .icon-btn {
    width: 36px; height: 36px; border-radius: 12px;
    background: white; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .icon-btn:active { background: var(--lemon-100); }

  /* POS · today-total pill in page-head — wider than icon-btn, lemon background */
  .pos-total-pill {
    width: auto;
    padding: 0 12px;
    background: var(--lemon-400);
    color: var(--ink-900);
    font-size: 12px; font-weight: 900;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    border-color: var(--lemon-500);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 4px -1px rgba(229,176,10,0.4);
  }
  .pos-total-pill:active { background: var(--lemon-500); }
  /* Live-dot inside cream page-head needs a sane size · keep the existing pulse */
  .page-sub .pos-live-dot { vertical-align: middle; margin-right: 1px; }

  /* ═══════════════════════ HOME SCREEN ═══════════════════════ */
  .home-body { padding: 14px 18px 24px 18px; flex: 1; }
  .home-greet-row { display: flex; align-items: flex-start; justify-content: space-between; }
  .home-greet { font-size: 11px; opacity: 0.55; font-weight: 600; letter-spacing: 0.04em; }
  .home-shop { font-size: 26px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.25; margin-top: 2px; }
  .home-shop-em { color: var(--lemon-500); }
  .home-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--ink-900); color: var(--lemon-400);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 16px -8px rgba(28,25,23,0.4);
    flex-shrink: 0;
  }
  .open-pill {
    margin-top: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--success-100); color: var(--success-600);
    padding: 4px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  }
  .open-pill .dot { width:6px; height:6px; background: var(--success-500); border-radius:50%; box-shadow: 0 0 6px var(--success-500); }

  /* Status row · pill + date/time inline · v8.x · moved date here from
   * the breadcrumb area above so the top of the screen is less crowded
   * and the date sits naturally with the "open/closed" status it
   * effectively timestamps. flex-wrap so very long shop names + a
   * still-readable date won't overflow on narrow screens. */
  .home-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }
  /* Inside the status row the pill has no top margin · the row owns
   * spacing now. Outside the status row (legacy uses) it keeps its
   * original 8px so we don't break other places. */
  .home-status-row .open-pill { margin-top: 0; }
  .home-status-row .home-greet { margin-top: 0; }

  .hero {
    background: linear-gradient(135deg, #F5C518 0%, #FADF5E 60%, #FFE999 100%);
    border-radius: 24px;
    padding: 20px;
    margin-top: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 32px -12px rgba(245,197,24,0.55), 0 4px 8px -4px rgba(245,197,24,0.4);
  }
  .hero-cap { font-size: 10px; font-weight: 800; letter-spacing: 0.2em; opacity: 0.7; }
  .hero-amt { font-size: 44px; font-weight: 900; letter-spacing: -0.035em; line-height: 1; margin-top: 4px; }
  .hero-amt .currency { font-size: 18px; font-weight: 800; opacity: 0.55; margin-right: 4px; }
  .hero-meta {
    display: flex; gap: 0; margin-top: 12px;
    font-size: 11px; font-weight: 700;
  }
  .hero-meta > div { padding-right: 14px; margin-right: 14px; border-right: 1.5px solid rgba(28,25,23,0.18); }
  .hero-meta > div:last-child { border-right: none; }
  .hero-meta .label { font-size: 9px; font-weight: 800; opacity: 0.55; letter-spacing: 0.12em; }
  .hero-meta .val { font-size: 14px; font-weight: 900; letter-spacing: -0.01em; margin-top: 1px; }
  .hero-deco {
    position: absolute; right: -16px; bottom: -28px;
    font-size: 110px; opacity: 0.16; transform: rotate(-15deg);
    line-height: 1;
  }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; }
  .tile {
    background: white;
    border-radius: 20px;
    padding: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 4px 8px -4px rgba(28,25,23,0.06);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
    position: relative;
  }
  .tile:active { transform: scale(0.97); }
  .tile-head { display: flex; align-items: flex-start; justify-content: space-between; }
  .tile-icon {
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--lemon-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--lemon-500);
  }
  .tile-badge {
    background: var(--ink-900); color: var(--lemon-400);
    font-size: 10px; font-weight: 900; letter-spacing: 0.04em;
    padding: 3px 7px; border-radius: 999px;
    min-width: 22px; text-align: center;
  }
  /* Primary tile · headline action on /home (เปิด/ปิดวันขาย).
   * V12 · changed from dark ink to lemon yellow with ink border + drop
   * shadow · matches the rest of the brand (no jarring black box on home).
   * Still feels "primary" because of the bold yellow + thick ink border. */
  .tile.primary {
    background: var(--lemon-400);
    color: var(--ink-900);
    border-color: var(--ink-900);
    border-width: 1.5px;
    box-shadow: 0 4px 0 var(--ink-900), 0 14px 24px -12px rgba(245,197,24,0.4);
  }
  .tile.primary .tile-icon { background: var(--ink-900); color: var(--lemon-400); }
  .tile.primary .tile-sub { color: var(--ink-700); opacity: 0.85; }
  .tile-label { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
  .tile-sub { font-size: 11px; font-weight: 600; opacity: 0.6; margin-top: 2px; }

  .row-tile {
    background: white;
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
  }
  .row-tile:active { background: var(--lemon-50); }

  /* recent orders strip */
  .recent-strip { margin-top: 18px; }
  .strip-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 8px 4px; }
  .strip-cap { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; opacity: 0.55; }
  .strip-link { font-size: 11px; font-weight: 700; color: var(--lemon-500); cursor: pointer; }
  .recent-card {
    background: white; border: 1px solid var(--line);
    border-radius: 14px; padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
  }
  .recent-num {
    font-family:'JetBrains Mono', monospace; font-size: 10px; font-weight: 800;
    color: var(--ink-900); background: var(--lemon-200);
    padding: 4px 7px; border-radius: 5px; letter-spacing: 0.05em;
  }
  .recent-info { flex: 1; min-width: 0; }
  .recent-title { font-size: 13px; font-weight: 700; line-height: 1.2; }
  .recent-meta { font-size: 10px; opacity: 0.55; font-weight: 600; margin-top: 1px; }
  .recent-amt { font-size: 14px; font-weight: 900; letter-spacing: -0.01em; }
  .recent-status { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 4px; }
  .rs-cooking { background: var(--warn-100); color: #B45309; }
  .rs-ready { background: var(--success-100); color: var(--success-600); }
  .rs-pre { background: var(--info-100); color: #1D4ED8; }

  /* ═══════════════════════ ORDERS SCREEN ═══════════════════════ */
  .tabs {
    position: sticky;
    top: 62px;          /* sit flush under .page-head; was 114px which left a leak */
    z-index: 54;
    display: flex;
    gap: 4px;
    padding: 12px 18px 10px 18px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ink-700);
    cursor: pointer;
    transition: background .12s;
    display: flex; align-items: center; gap: 6px;
  }
  .tab:active { background: var(--lemon-100); }
  .tab.active { background: var(--ink-900); color: var(--lemon-400); }
  .tab-count {
    background: var(--lemon-200); color: var(--ink-900);
    font-size: 9px; font-weight: 900;
    padding: 2px 6px; border-radius: 6px; min-width: 18px; text-align: center;
  }
  .tab.active .tab-count { background: var(--lemon-400); color: var(--ink-900); }

  .orders-body { padding: 14px 18px 100px 18px; flex: 1; }

  /* ═══════════════════════ 3D AQUA / GEL ORDER CARDS ═══════════════════════
     Layout เดิม + เคลือบ 3D gel เหลืองรอบนอก · กรอบขาวข้างใน · เงาลึกนุ่ม */
  .order-card {
    position: relative;
    background:
      linear-gradient(180deg,
        #FFE066 0%,
        #FBCE2E 28%,
        #F5C518 55%,
        #E5B00A 100%);
    border-radius: 22px;
    padding: 5px;
    margin-bottom: 14px;
    cursor: pointer;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 -2px 6px rgba(180,130,0,0.18) inset,
      0 6px 14px -4px rgba(229,176,10,0.45),
      0 2px 4px rgba(28,25,23,0.10);
    transition: transform .15s ease, box-shadow .15s ease;
    isolation: isolate;
  }
  .order-card:active {
    transform: scale(0.985) translateY(1px);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 -2px 6px rgba(180,130,0,0.18) inset,
      0 3px 8px -2px rgba(229,176,10,0.40),
      0 1px 2px rgba(28,25,23,0.08);
  }
  /* glossy highlight at the very top — the "aqua/gel" specular */
  .order-card::before {
    content: "";
    position: absolute;
    left: 8px; right: 8px; top: 4px;
    height: 38%;
    border-radius: 18px 18px 32px 32px / 18px 18px 24px 24px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.18) 60%,
      rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
  }
  /* soft inner shadow line at the seam between gel & paper */
  .order-card::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 18px;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(120,80,0,0.15) inset;
    z-index: 1;
  }
  .order-card-inner {
    position: relative;
    background: white;
    border-radius: 17px;
    padding: 14px 16px 13px 16px;
    z-index: 1;
  }
  /* Subtle status accents — gel keeps the same lemon hue, but the
     pre-order family gets a faint cool tint for at-a-glance recognition */
  .order-card.preorder {
    background:
      linear-gradient(180deg,
        #BFE0FF 0%,
        #92C8FB 28%,
        #6FB1F4 55%,
        #4D95E6 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 -2px 6px rgba(20,80,160,0.20) inset,
      0 6px 14px -4px rgba(77,149,230,0.45),
      0 2px 4px rgba(28,25,23,0.10);
  }
  .order-card.done .order-card-inner { opacity: 0.62; }
  .order-card.ready {
    background:
      linear-gradient(180deg,
        #BBF2D0 0%,
        #88E2AB 28%,
        #5BCD86 55%,
        #2FB465 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 -2px 6px rgba(20,120,60,0.20) inset,
      0 6px 14px -4px rgba(34,197,94,0.45),
      0 2px 4px rgba(28,25,23,0.10);
  }

  .order-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
  /* Lemon-signature header · nickname is the PRIMARY caller, order# secondary.
   * "คุณ ปลาเบ๋อเริ่ม" big and friendly above a tiny "#0443 · QR". */
  .order-top-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .order-nickname {
    font-size: 15px; font-weight: 900;
    color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.15;
    /* Truncate so a long nickname doesn't push the time off card */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .order-no {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
    color: var(--ink-500);
    text-transform: uppercase;
  }
  .order-time { font-size: 11px; font-weight: 700; opacity: 0.6; font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .order-time.pre { color: var(--info-500); font-weight: 800; opacity: 1; }
  /* Status flags row · arrival + payment-verify alerts that the merchant
   * should glance at before starting cooking. Inline-flex + wrap so badges
   * stack cleanly even if both are present. */
  .order-flags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0 0 8px 0;
  }
  .order-arrived-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 800;
    background: rgba(34,197,94,0.13);
    color: #16a34a;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid rgba(34,197,94,0.25);
  }
  .order-verify-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 800;
    background: rgba(245,158,11,0.14);
    color: #b45309;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid rgba(245,158,11,0.3);
  }
  .order-items { font-size: 12.5px; line-height: 1.5; opacity: 0.88; color: var(--ink-800); }
  .order-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 11px; padding-top: 11px;
    border-top: 1px dashed var(--line-2);
    gap: 8px;
  }
  .order-foot-amt {
    font-size: 19px; font-weight: 900; letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .order-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700;
    margin-left: auto;
    margin-right: 4px;
    min-width: 0;
  }
  .order-channel { opacity: 0.55; white-space: nowrap; }
  .order-meta-sep { opacity: 0.35; }
  .order-cta {
    background: linear-gradient(180deg, #FCD647 0%, #F5C518 70%, #E5B00A 100%);
    color: var(--ink-900);
    padding: 7px 14px; border-radius: 999px;
    font-size: 11px; font-weight: 900; letter-spacing: 0.03em;
    border: 1.5px solid var(--ink-900);
    flex-shrink: 0;
    box-shadow: 0 2px 0 var(--ink-900), 0 4px 8px -2px rgba(229,176,10,0.4);
    transition: transform .12s, box-shadow .12s;
    cursor: pointer;
  }
  .order-cta:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--ink-900), 0 1px 4px -2px rgba(229,176,10,0.3);
  }

  /* ═══════════════════════ STATUS PILLS (paid / unpaid / info) ═══════════════════════ */
  .status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
  }
  .status-pill.paid {
    background: var(--success-100);
    color: var(--success-600);
    border: 1px solid rgba(34,197,94,0.25);
  }
  .status-pill.paid svg { stroke: var(--success-600); }
  .status-pill.unpaid {
    background: var(--lemon-100);
    color: #8B6914;
    border: 1px solid rgba(229,176,10,0.30);
  }
  .status-pill.info {
    background: var(--info-100);
    color: #1E40AF;
    border: 1px solid rgba(59,130,246,0.25);
  }

  /* ═══════════════════════ ORDER DETAIL MODAL POPUP ═══════════════════════
     เปิดเมื่อแตะการ์ด · swipe ลงเพื่อปิด · ใช้ .sheet-overlay/.sheet ของเดิม */
  .order-detail-overlay { z-index: 100; }
  .order-detail-sheet {
    background: var(--paper);
    padding: 14px 18px 22px 18px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }
  .od-head {
    /* Nickname is the headline · was order# before. Single-column flex now
     * since main content is the nickname stack rather than [number | info]. */
    display: flex; align-items: flex-start; gap: 12px;
    padding: 4px 0 14px 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
  }
  .od-head-main { flex: 1; min-width: 0; }
  .od-nickname {
    font-size: 22px; font-weight: 900;
    color: var(--ink-900); letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 4px;
  }
  .od-no-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--ink-500);
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  /* Legacy ID badge — kept for any callers that haven't migrated yet */
  .od-no {
    font-family:'JetBrains Mono', monospace;
    font-size: 17px; font-weight: 900; letter-spacing: 0.04em;
    background: var(--ink-900); color: var(--lemon-400);
    padding: 8px 14px; border-radius: 10px;
    flex-shrink: 0;
  }
  .od-head-info { flex: 1; min-width: 0; }
  .od-time-line { font-size: 12px; font-weight: 700; opacity: 0.65; font-variant-numeric: tabular-nums; }
  .od-time-em { color: var(--info-500); font-weight: 900; opacity: 1; }
  .od-channel { font-size: 11px; font-weight: 700; opacity: 0.5; margin-top: 2px; }

  /* Payment-verification banner · for QR-paid but unverified orders.
   * Inline button promotes paymentVerified to true after merchant glances
   * at their bank app. Yellow tint to signal "needs attention not blocking". */
  .od-verify-banner {
    display: flex; align-items: center; gap: 10px;
    background: rgba(245,158,11,0.13);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .od-verify-text { flex: 1; min-width: 0; }
  .od-verify-title { font-size: 13px; font-weight: 900; color: #92400e; }
  .od-verify-sub { font-size: 11px; font-weight: 700; color: #b45309; margin-top: 2px; line-height: 1.35; }
  .od-verify-btn {
    background: var(--ink-900); color: var(--lemon-400);
    padding: 9px 14px; border-radius: 10px;
    font-size: 12px; font-weight: 900; letter-spacing: 0.02em;
    border: none;
    cursor: pointer; flex-shrink: 0;
    box-shadow: 0 2px 0 #000;
    transition: transform .12s;
  }
  .od-verify-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #000; }

  .od-items {
    background: white;
    border-radius: 14px;
    border: 1px solid var(--line);
    padding: 6px 12px;
    margin-bottom: 14px;
  }
  .od-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--line-2);
  }
  .od-item:last-child { border-bottom: none; }
  .od-item-qty {
    font-size: 13px; font-weight: 900;
    color: var(--lemon-500);
    min-width: 24px;
    padding-top: 1px;
  }
  .od-item-info { flex: 1; min-width: 0; }
  .od-item-name { font-size: 13px; font-weight: 700; color: var(--ink-900); line-height: 1.35; }
  .od-item-note { font-size: 11px; opacity: 0.55; font-weight: 600; margin-top: 2px; line-height: 1.35; }
  .od-item-price { font-size: 13px; font-weight: 800; color: var(--ink-700); flex-shrink: 0; padding-top: 1px; }

  .od-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    background: var(--cream);
    border-radius: 14px;
    margin-bottom: 14px;
  }
  .od-pay { display: flex; }
  .od-total { display: flex; align-items: baseline; gap: 8px; }
  .od-total-cap { font-size: 11px; font-weight: 700; opacity: 0.55; }
  .od-total-amt { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }

  .od-actions { display: flex; gap: 8px; }
  .od-btn {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    font-size: 14px; font-weight: 900; letter-spacing: 0.03em;
    cursor: pointer;
    border: 2px solid var(--ink-900);
    transition: transform .12s;
  }
  .od-btn:active { transform: translateY(1px); }
  .od-btn.primary {
    background: linear-gradient(180deg, #FCD647 0%, #F5C518 70%, #E5B00A 100%);
    color: var(--ink-900);
    box-shadow: 0 3px 0 var(--ink-900), 0 6px 12px -2px rgba(229,176,10,0.4);
  }
  .od-btn.success {
    background: var(--ink-900);
    color: var(--lemon-400);
    box-shadow: 0 3px 0 var(--lemon-500), 0 6px 12px -2px rgba(28,25,23,0.4);
  }
  .od-btn.ghost {
    background: white;
    color: var(--ink-700);
    box-shadow: 0 3px 0 var(--line-2);
  }
  .od-btn.primary:active, .od-btn.success:active, .od-btn.ghost:active {
    box-shadow: 0 0 0 var(--ink-900);
  }

  /* FAB for new order */
  .fab {
    position: fixed; bottom: 28px; right: 50%;
    transform: translateX(190px);
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--lemon-400);
    box-shadow: 0 16px 32px -10px rgba(28,25,23,0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 60;
  }
  @media (max-width: 900px) {
    .fab { transform: none; right: 20px; bottom: 24px; }
  }
  .fab-inner {
    position: absolute;
    bottom: 22px; right: 22px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--lemon-400);
    box-shadow: 0 16px 32px -10px rgba(28,25,23,0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 60;
  }

  /* ═══════════════════════ NEW ORDER · POS-like ═══════════════════════ */
  .no-cats {
    position: sticky;
    top: 62px;          /* sit flush under .page-head (which is ~62px tall at top:0) */
    z-index: 54;
    display: flex; gap: 6px;
    padding: 10px 18px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  .no-cats::-webkit-scrollbar { display: none; }
  .cat-pill {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--lemon-50);
    color: var(--ink-700);
    cursor: pointer;
  }
  .cat-pill.active { background: var(--lemon-400); color: var(--ink-900); font-weight: 900; }

  .menu-grid { padding: 14px 18px 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; align-content: start; }
  .menu-item {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
    position: relative;
  }
  .menu-item:active { transform: scale(0.97); }
  .menu-item-img {
    width: 100%;
    aspect-ratio: 1.3;
    background: linear-gradient(135deg, var(--lemon-100), var(--lemon-200));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    line-height: 1;
  }
  .menu-item-name { font-size: 13px; font-weight: 800; margin-top: 8px; line-height: 1.2; }
  .menu-item-price { font-size: 14px; font-weight: 900; color: var(--lemon-500); margin-top: 2px; letter-spacing: -0.01em; }
  .menu-item.has-qty { border-color: var(--lemon-400); border-width: 2px; box-shadow: 0 4px 8px -2px rgba(245,197,24,0.4); }
  .menu-qty-badge {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px;
    background: var(--ink-900); color: var(--lemon-400);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  /* Cart bar at bottom · sticks at viewport bottom while scrolling */
  .cart-bar {
    position: sticky;
    bottom: 12px;
    margin: 12px 14px 16px 14px;
    background: var(--ink-900);
    color: white;
    border-radius: 20px;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 16px 32px -8px rgba(28,25,23,0.45);
    z-index: 50;
    align-self: stretch;
  }
  .cart-info { flex: 1; }
  .cart-cap { font-size: 9px; font-weight: 800; letter-spacing: 0.15em; opacity: 0.6; color: var(--lemon-400); }
  .cart-total { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
  .cart-total .currency { font-size: 12px; opacity: 0.55; margin-right: 3px; }
  .cart-meta { font-size: 10px; opacity: 0.6; }
  .cart-go {
    background: var(--lemon-400); color: var(--ink-900);
    padding: 10px 16px; border-radius: 14px;
    font-size: 13px; font-weight: 900; letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 6px;
  }

  /* ═══════════════════════ QR SCREEN ═══════════════════════ */
  .qr-body { padding: 20px 22px 24px 22px; flex: 1; display: flex; flex-direction: column; align-items: center; }
  .qr-wrap {
    background: white;
    border: 2.5px solid var(--ink-900);
    border-radius: 28px;
    padding: 22px;
    margin-top: 8px;
    width: 100%;
    box-shadow: 0 16px 32px -12px rgba(28,25,23,0.2);
    position: relative;
  }
  .qr-corner {
    position: absolute; width: 28px; height: 28px;
    background: var(--lemon-400);
  }
  .qr-corner.tl { top: -2px; left: -2px; border-radius: 26px 0 12px 0; }
  .qr-corner.tr { top: -2px; right: -2px; border-radius: 0 26px 0 12px; }
  .qr-corner.bl { bottom: -2px; left: -2px; border-radius: 0 12px 0 26px; }
  .qr-corner.br { bottom: -2px; right: -2px; border-radius: 12px 0 26px 0; }
  .qr-shop-name {
    font-size: 18px; font-weight: 900; letter-spacing: -0.02em;
    text-align: center; margin-bottom: 4px;
  }
  .qr-instruct {
    font-size: 11px; font-weight: 700; opacity: 0.6;
    text-align: center; letter-spacing: 0.04em; margin-bottom: 14px;
  }
  .qr-code-area {
    background: white;
    aspect-ratio: 1;
    width: 100%;
    border: 1.5px solid var(--ink-900);
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  /* QR canvas mount point · v7.3 fix · was a 21×21 CSS grid with `repeat(21,
   * 1fr) gap:1px` which painted a "fake QR" pattern via .qr-grid>div rules
   * back when QR was a static visual mock. Now renderQRCodeInto() appends
   * a real <canvas> with explicit pixel size (e.g. 210×210 for sizePx=220),
   * and the grid layout caused the canvas to be parked in the top-left
   * cell of an oversized track — visibly off-centre. Flex centering keeps
   * the canvas square in the middle of the white card regardless of canvas
   * size vs. parent size. */
  .qr-grid {
    position: relative;
    width: 85%;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qr-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 38px; height: 38px;
    background: white;
    border: 2px solid var(--ink-900);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
  }
  .qr-url { font-family:'JetBrains Mono',monospace; font-size: 11px; font-weight: 700; opacity: 0.65; text-align: center; margin-top: 14px; letter-spacing: -0.01em; }
  .qr-actions { display: flex; gap: 10px; margin-top: 18px; width: 100%; }
  .qr-btn {
    flex: 1;
    padding: 13px;
    border-radius: 14px;
    font-size: 12px; font-weight: 900; letter-spacing: 0.06em;
    background: white; border: 1.5px solid var(--ink-900);
    color: var(--ink-900);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer;
  }
  .qr-btn.primary { background: var(--ink-900); color: var(--lemon-400); }
  .qr-stats { margin-top: 18px; width: 100%; padding: 14px; background: white; border: 1px solid var(--line); border-radius: 16px; display: flex; justify-content: space-around; }
  .qr-stat { text-align: center; }
  .qr-stat-num { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
  .qr-stat-cap { font-size: 9px; font-weight: 800; letter-spacing: 0.15em; opacity: 0.55; margin-top: 2px; }

  /* ═══════════════════════ MENU LIST ═══════════════════════ */
  .menu-body { padding: 14px 18px 100px 18px; flex: 1; }
  .menu-body > :last-child { margin-bottom: 0; }
  .menu-list-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
  .menu-list-cats::-webkit-scrollbar { display: none; }
  .menu-row {
    background: white; border: 1px solid var(--line);
    border-radius: 16px; padding: 10px 12px;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
  }
  .menu-row:active { background: var(--lemon-50); }
  .menu-row-img {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--lemon-100), var(--lemon-200));
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; line-height: 1; flex-shrink: 0;
  }
  .menu-row-info { flex: 1; min-width: 0; }
  .menu-row-name { font-size: 14px; font-weight: 800; line-height: 1.2; }
  .menu-row-cat { font-size: 10px; font-weight: 700; opacity: 0.5; letter-spacing: 0.06em; margin-top: 2px; }
  .menu-row-price { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; }
  .menu-row.off .menu-row-img,
  .menu-row.off .menu-row-name,
  .menu-row.off .menu-row-price { opacity: 0.4; }
  .menu-row.off { background: #FAF8F0; }
  .toggle {
    width: 38px; height: 22px;
    background: var(--line-2); border-radius: 999px;
    position: relative; flex-shrink: 0;
    cursor: pointer; transition: background .15s;
  }
  .toggle.on { background: var(--success-500); }
  .toggle::after {
    content: ''; position: absolute;
    width: 18px; height: 18px;
    background: white; border-radius: 50%;
    top: 2px; left: 2px;
    transition: left .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .toggle.on::after { left: 18px; }

  /* ═══════════════════════ MENU EDIT ═══════════════════════ */
  .edit-body { padding: 16px 18px 16px 18px; flex: 1; }
  .img-up {
    width: 100%; aspect-ratio: 1.3;
    background: linear-gradient(135deg, var(--lemon-100), var(--lemon-200));
    border: 2px dashed var(--lemon-400);
    border-radius: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    cursor: pointer;
  }
  .img-up-text { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
  .img-up-sub { font-size: 10px; font-weight: 600; opacity: 0.6; }

  .form-field { margin-top: 14px; }
  .form-label { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; opacity: 0.6; margin-bottom: 6px; display: block; }
  .form-input {
    width: 100%;
    padding: 12px 14px;
    background: white;
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ink-900);
    transition: border-color .12s;
  }
  .form-input:focus { outline: none; border-color: var(--lemon-400); }
  .form-input.amount { font-weight: 900; font-size: 18px; letter-spacing: -0.01em; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-grid { display: flex; flex-wrap: wrap; gap: 6px; }
  .cat-chip {
    padding: 7px 12px; border-radius: 999px;
    background: white; border: 1.5px solid var(--line-2);
    font-size: 12px; font-weight: 700;
    cursor: pointer;
  }
  .cat-chip.active { background: var(--ink-900); color: var(--lemon-400); border-color: var(--ink-900); }

  /* Allergen quick-pick chips · single-row scrollable list of common allergens
   * the merchant can toggle into the textarea. Active chip = appears in the
   * current allergens text. Distinct visual from cat-chip (warning amber tint)
   * to communicate "this is a warning, not a category". */
  .allergen-quick {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
  }
  .allergen-chip {
    padding: 6px 10px; border-radius: 999px;
    background: white; border: 1.5px solid var(--line-2);
    font-size: 11px; font-weight: 700;
    color: var(--ink-700, #44403c);
    cursor: pointer;
    transition: transform .1s, background .12s, border-color .12s;
  }
  .allergen-chip:active { transform: scale(0.96); }
  .allergen-chip.active {
    background: #FFFAEB;
    color: #92400E;
    border-color: #F5C518;
  }

  /* Customer-facing allergen warning · shows below menu name on cust-menu and
   * in the modifier sheet header. Neutral cream pill with warning icon —
   * clearly visible but doesn't shout. */
  .menu-allergen-warn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px;
    padding: 4px 9px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    line-height: 1.3;
  }
  .mod-allergen-warn {
    margin: 8px 0 14px;
    padding: 9px 12px;
    background: #FEF3C7;
    border: 1px solid rgba(245,197,24,0.45);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #92400E;
    display: flex; align-items: flex-start; gap: 8px;
  }
  .mod-allergen-warn-ic { font-size: 14px; flex-shrink: 0; }
  .mod-allergen-warn-text { flex: 1; line-height: 1.45; }
  .mod-allergen-warn-text b { font-weight: 900; display: block; margin-bottom: 2px; }

  .save-bar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin-top: auto;
    flex-shrink: 0;
    display: flex; gap: 8px;
    padding: 12px 14px 16px 14px;
    background: linear-gradient(180deg, rgba(250,248,240,0) 0%, var(--cream) 50%, var(--cream) 100%);
  }
  .save-btn {
    flex: 1; padding: 14px;
    border-radius: 16px;
    font-size: 13px; font-weight: 900; letter-spacing: 0.06em;
    background: var(--ink-900); color: var(--lemon-400);
    border: 1.5px solid var(--ink-900);
    box-shadow: 0 16px 32px -10px rgba(28,25,23,0.45);
    cursor: pointer;
  }
  .save-btn.del {
    flex: 0 0 56px;
    background: white; color: var(--danger-500);
    border-color: var(--danger-500);
  }

  /* ─── Menu Edit · upgraded styles ─── */
  .edit-section-cap {
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.22em; opacity: 0.55;
    margin: 4px 4px 10px 4px;
    display: flex; align-items: center; gap: 6px;
  }
  .edit-section-help {
    font-size: 11px; font-weight: 600;
    opacity: 0.55; margin: -4px 4px 12px 4px; line-height: 1.4;
  }

  /* Amount input with prefix */
  .amt-input-wrap {
    background: white;
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    padding: 0 14px;
    display: flex; align-items: center; gap: 8px;
    transition: border-color .12s;
  }
  .amt-input-wrap:focus-within { border-color: var(--lemon-400); }
  .amt-input-wrap.muted { background: #FAF8F0; }
  .amt-prefix { font-size: 14px; font-weight: 800; opacity: 0.45; }
  .amt-input {
    flex: 1;
    background: transparent; border: none; outline: none;
    padding: 12px 0;
    font-size: 18px; font-weight: 900;
    letter-spacing: -0.01em;
    font-family: inherit;
    color: var(--ink-900);
    width: 100%;
  }
  /* New variants for set-expenses + set-target inputs */
  .amt-input-currency {
    font-size: 16px;
    font-weight: 900;
    color: var(--ink-700);
    opacity: 0.7;
  }
  .amt-input-unit {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.55;
    flex-shrink: 0;
  }
  /* Number input · hide spinner arrows for cleaner look */
  .amt-input[type="number"]::-webkit-inner-spin-button,
  .amt-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .amt-input[type="number"] { -moz-appearance: textfield; }

  /* Form label hint · small gray text right-aligned to the label */
  .form-label-hint {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.45;
    letter-spacing: 0.05em;
    margin-left: 6px;
    text-transform: none;
  }

  /* Error flash · used to highlight an input that failed validation
   * (e.g. cost field on menu-edit when user tries to leave without setting
   * it). Applied via JS class toggle for ~2 seconds. */
  .amt-input-wrap.error-flash {
    border-color: var(--danger-500);
    animation: amt-error-shake 0.35s ease-in-out;
    background: var(--danger-100);
  }
  @keyframes amt-error-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
  }

  /* Form hint · small gray text below input */
  .form-hint {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.55;
    margin-top: 6px;
    line-height: 1.4;
  }

  /* Auto-fill suggestion slot · holds optional pill that suggests filling
   * the OTHER target field (e.g. "↳ ลองใช้ ฿42,000/เดือน" appears below
   * the daily input when user fills daily but leaves monthly blank).
   * Pill is friendly · not pushy · tap to accept · ignore to leave blank. */
  .auto-fill-slot {
    margin-top: 8px;
    min-height: 0;
  }
  .auto-fill-slot:empty { display: none; }
  .auto-fill-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--lemon-100);
    border: 1.5px solid var(--lemon-400);
    color: var(--ink-900);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.005em;
    transition: transform .08s, background .12s;
  }
  .auto-fill-pill:active {
    transform: scale(0.96);
    background: var(--lemon-300);
  }

  /* Callout · informational block (lemon-tinted) used in set-expenses /
   * set-target to give context. Variant: .set-callout-info uses cyan tint. */
  .set-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: linear-gradient(135deg, var(--lemon-100), white);
    border: 1px solid var(--lemon-300);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
  }
  .set-callout-info {
    background: linear-gradient(135deg, #FFF8E0, white);
    border-color: var(--lemon-400);
    margin-top: 14px;
  }
  .set-callout-ic {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
  }
  .set-callout-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.5;
    flex: 1;
    min-width: 0;
  }
  .set-callout-text b {
    font-weight: 900;
    letter-spacing: -0.005em;
  }

  /* Summary card · live-preview total at bottom of set-expenses + set-target.
   * Stack of label/amount rows + total row with top border. */
  .set-summary-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 4px 10px -8px rgba(28,25,23,0.06);
  }
  .set-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-700);
  }
  .set-summary-row.total {
    font-size: 14px;
    font-weight: 900;
    color: var(--ink-900);
    padding-top: 9px;
    letter-spacing: -0.01em;
  }
  .set-summary-row.total .tabular {
    font-size: 16px;
  }
  .set-summary-divider {
    height: 1.5px;
    background: var(--ink-900);
    margin: 6px 0 2px 0;
  }
  .set-summary-foot {
    margin-top: 8px;
    font-size: 10.5px;
    font-weight: 700;
    opacity: 0.5;
    text-align: center;
  }

  /* Link-style button · used for "ใช้ค่าแนะนำ" / "ไม่ตั้งเป้า" */
  .link-btn {
    background: transparent;
    border: none;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-700);
    cursor: pointer;
    font-family: inherit;
    border-radius: 8px;
    margin-right: 6px;
    transition: background .12s, color .12s;
  }
  .link-btn:active { background: var(--line); color: var(--ink-900); }

  .cat-chip.add {
    background: transparent;
    border-style: dashed;
    color: var(--lemon-500);
  }

  /* Customize options */
  .opt-group {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 10px;
  }
  .opt-group-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
  }
  .opt-group-name {
    flex: 1;
    background: transparent; border: none; outline: none;
    font-size: 14px; font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    font-family: inherit;
    padding: 4px 0;
    border-bottom: 1.5px dashed transparent;
  }
  .opt-group-name:focus { border-bottom-color: var(--lemon-400); }
  .opt-group-drag {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--cream);
    color: var(--ink-700);
    display: flex; align-items: center; justify-content: center;
    cursor: grab; opacity: 0.55;
  }

  .opt-toggles {
    display: flex; gap: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .opt-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer;
    font-size: 11px; font-weight: 700;
    user-select: none;
  }
  .opt-toggle input {
    appearance: none;
    width: 16px; height: 16px;
    border: 1.5px solid var(--ink-700);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    background: white;
    transition: background .12s, border-color .12s;
  }
  .opt-toggle input:checked {
    background: var(--ink-900);
    border-color: var(--ink-900);
  }
  .opt-toggle input:checked::after {
    content: '';
    position: absolute;
    top: 1px; left: 4px;
    width: 4px; height: 8px;
    border: solid var(--lemon-400);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .opt-toggle-text { letter-spacing: 0.02em; }

  .opt-items { display: flex; flex-direction: column; gap: 6px; }
  .opt-item {
    display: flex; align-items: center; gap: 6px;
    background: var(--lemon-50);
    border-radius: 10px;
    padding: 6px 4px 6px 6px;
  }
  .opt-item-handle {
    width: 18px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-700); opacity: 0.4;
    cursor: grab;
    flex-shrink: 0;
  }
  .opt-item-name {
    flex: 1; min-width: 0;
    background: white;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px; font-weight: 600;
    font-family: inherit;
    color: var(--ink-900);
    outline: none;
    transition: border-color .12s;
  }
  .opt-item-name:focus { border-color: var(--lemon-400); }
  .opt-item-price-wrap {
    display: flex; align-items: center;
    background: white;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 6px 0 8px;
    flex-shrink: 0;
    transition: border-color .12s;
  }
  .opt-item-price-wrap:focus-within { border-color: var(--lemon-400); }
  .opt-item-plus {
    font-size: 11px; font-weight: 800;
    opacity: 0.55;
  }
  .opt-item-price {
    width: 38px;
    background: transparent; border: none; outline: none;
    font-size: 13px; font-weight: 800;
    text-align: right;
    padding: 7px 0;
    font-family: inherit;
    color: var(--ink-900);
  }
  .opt-item-del {
    width: 26px; height: 26px;
    border-radius: 6px;
    color: var(--ink-500);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px; font-weight: 700;
    flex-shrink: 0;
    transition: background .1s, color .1s;
  }
  .opt-item-del:active { background: var(--danger-100); color: var(--danger-500); }

  .opt-add-item {
    text-align: center;
    padding: 8px;
    margin-top: 4px;
    border: 1.5px dashed var(--line-2);
    border-radius: 10px;
    color: var(--ink-700);
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background .1s, border-color .1s;
  }
  .opt-add-item:active { background: var(--lemon-50); border-color: var(--lemon-400); color: var(--lemon-500); }

  .opt-add-group {
    width: 100%;
    background: var(--ink-900); color: var(--lemon-400);
    border: none; border-radius: 14px;
    padding: 12px;
    font-size: 12px; font-weight: 900; letter-spacing: 0.06em;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 4px;
    cursor: pointer;
    font-family: inherit;
  }
  .opt-add-group:active { background: #2A2622; }

  /* Empty state for option groups */
  .opt-empty {
    background: var(--cream);
    border: 1.5px dashed var(--line-2);
    border-radius: 16px;
    padding: 22px 16px;
    text-align: center;
    margin-bottom: 10px;
  }
  .opt-empty-ic {
    width: 44px; height: 44px;
    margin: 0 auto 8px auto;
    border-radius: 50%;
    background: var(--lemon-100);
    color: var(--lemon-500);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
  }
  .opt-empty-title {
    font-size: 13px; font-weight: 800;
    letter-spacing: -0.01em;
  }
  .opt-empty-sub {
    font-size: 11px; font-weight: 600;
    opacity: 0.55; margin-top: 3px;
    line-height: 1.4;
  }

  /* Group head with delete button */
  .opt-group-actions {
    display: flex; gap: 4px; align-items: center;
  }
  .opt-group-del {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-500);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .1s, color .1s;
  }
  .opt-group-del:active {
    background: var(--danger-100);
    color: var(--danger-500);
  }

  /* Category chip · manage button */
  .cat-chip.manage {
    background: transparent;
    border-style: dashed;
    color: var(--ink-700);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 11px;
  }
  .cat-chip.manage svg { opacity: 0.6; }

  /* ─── BOTTOM SHEET (category mgmt, etc.) ─── */
  .sheet-overlay {
    position: absolute; inset: 0;
    background: rgba(28,25,23,0.45);
    backdrop-filter: blur(4px);
    z-index: 90;
    display: none;
    align-items: flex-end;
    border-radius: 38px;
    overflow: hidden;
  }
  .sheet-overlay.show { display: flex; animation: fadeIn .15s; }
  .sheet {
    background: white;
    width: 100%;
    border-radius: 28px 28px 0 0;
    padding: 14px 18px 22px 18px;
    max-height: 85%;
    overflow-y: auto;
    animation: sheetUp .25s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .sheet-handle {
    width: 36px; height: 4px;
    background: var(--line-2);
    border-radius: 2px;
    margin: 0 auto 14px auto;
  }
  .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px 10px 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
  }
  .sheet-title { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; }
  .sheet-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--cream);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 18px; font-weight: 700;
    color: var(--ink-700);
  }

  /* Category list inside sheet */
  .cat-list-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px;
    background: var(--cream);
    border-radius: 12px;
    margin-bottom: 6px;
  }
  .cat-list-handle {
    width: 18px;
    color: var(--ink-700); opacity: 0.4;
    display: flex; justify-content: center;
    cursor: grab;
    flex-shrink: 0;
  }
  .cat-list-name {
    flex: 1; min-width: 0;
    background: white;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px; font-weight: 700;
    font-family: inherit;
    color: var(--ink-900);
    outline: none;
    transition: border-color .12s;
  }
  .cat-list-name:focus { border-color: var(--lemon-400); }
  .cat-list-count {
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.04em;
    background: white;
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0.65;
    flex-shrink: 0;
  }
  .cat-list-del {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: white;
    color: var(--ink-500);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .1s, color .1s;
  }
  .cat-list-del:active { background: var(--danger-100); color: var(--danger-500); }

  .cat-add-row {
    display: flex; gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line-2);
  }
  .cat-add-input {
    flex: 1;
    background: var(--lemon-50);
    border: 1.5px solid var(--lemon-200);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px; font-weight: 700;
    font-family: inherit;
    color: var(--ink-900);
    outline: none;
  }
  .cat-add-input:focus { border-color: var(--lemon-400); background: white; }
  .cat-add-btn {
    background: var(--ink-900); color: var(--lemon-400);
    border: none;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 12px; font-weight: 900; letter-spacing: 0.06em;
    cursor: pointer;
    font-family: inherit;
  }
  .cat-add-btn:active { background: #2A2622; }

  /* Badge chips · inline multi-select pills.
   * Replaces the old 4-up tile grid (looked like a feature picker rather
   * than menu badges). Pattern matches the rest of the app's pill chips
   * (range pills in /report, filter pills in /history) so it feels native.
   * `:has(input:checked)` drives the active state — the input is hidden
   * but kept in DOM for accessibility + form submission semantics. */
  .badge-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .badge-chip {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .badge-chip input { display: none; }
  .badge-chip-face {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: white;
    border: 1.5px solid var(--line-2);
    color: var(--ink-700);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.005em;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
  }
  .badge-chip:active .badge-chip-face { transform: scale(0.96); }
  .badge-chip:has(input:checked) .badge-chip-face {
    background: var(--lemon-300);
    border-color: var(--ink-900);
    color: var(--ink-900);
    font-weight: 900;
    box-shadow: 0 2px 0 var(--ink-900);
  }

  /* Delete link */
  .del-link {
    width: 100%;
    background: white;
    border: 1.5px solid var(--danger-100);
    border-radius: 14px;
    padding: 14px;
    margin-top: 22px;
    color: var(--danger-500);
    font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    font-family: inherit;
  }
  .del-link:active { background: var(--danger-100); }

  /* ─── SETTINGS SUB-SCREENS components ─── */

  /* Time input */
  .time-input {
    background: white;
    border: 1.5px solid var(--line-2);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 16px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    color: var(--ink-900);
    outline: none;
    transition: border-color .12s;
    width: 100px;
    text-align: center;
    box-sizing: border-box;
  }
  .time-input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }
  .time-input::-webkit-inner-spin-button,
  .time-input::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
  }
  .time-input:focus { border-color: var(--lemon-400); }
  .time-input:disabled { opacity: 0.35; }

  .day-row { gap: 6px !important; }
  .day-row .set-row-info { flex: 0 0 56px !important; }

  /* Toggle small */
  .toggle.small {
    width: 32px; height: 18px;
  }
  .toggle.small::after {
    width: 14px; height: 14px;
  }
  .toggle.small.on::after { left: 16px; }

  /* Slider */
  .slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin-top: 8px;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--lemon-400);
    border: 2px solid var(--ink-900);
    cursor: pointer;
    box-shadow: 0 4px 8px -2px rgba(245,197,24,0.5);
  }
  .slider::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--lemon-400);
    border: 2px solid var(--ink-900);
    cursor: pointer;
  }
  .slider-row { display: flex; align-items: baseline; gap: 6px; }
  .slider-val { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
  .slider-unit { font-size: 12px; font-weight: 700; opacity: 0.6; }
  .slider-marks {
    display: flex; justify-content: space-between;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.1em;
    opacity: 0.45;
    margin-top: 4px;
  }

  /* Location current card */
  .loc-current {
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 4px;
  }
  .loc-current-map {
    height: 110px;
    background: var(--lemon-50);
    background-image:
      linear-gradient(rgba(245,197,24,0.15) 1px, transparent 1px),
      linear-gradient(90deg, rgba(245,197,24,0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
  }
  .loc-pin {
    font-size: 28px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
    animation: bounce 1.6s ease-in-out infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .loc-current-info {
    padding: 12px 14px 10px 14px;
  }
  .loc-current-name { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; }
  .loc-current-addr { font-size: 11px; opacity: 0.55; font-weight: 600; margin-top: 2px; }
  .loc-current-btn {
    width: calc(100% - 28px);
    margin: 0 14px 14px 14px;
    background: var(--lemon-100);
    border: 1.5px dashed var(--lemon-400);
    color: var(--ink-900);
    padding: 10px;
    border-radius: 10px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer;
    font-family: inherit;
  }
  .loc-current-btn:active { background: var(--lemon-200); }

  /* PromptPay preview */
  .pp-preview {
    background: white;
    border: 2px solid var(--ink-900);
    border-radius: 18px;
    padding: 16px;
    margin-top: 4px;
    text-align: center;
    position: relative;
    box-shadow: 4px 4px 0 var(--ink-900);
  }
  .pp-preview-head { padding-bottom: 10px; border-bottom: 1px dashed var(--ink-900); margin-bottom: 12px; }
  .pp-preview-qr {
    width: 100px; height: 100px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--lemon-50), var(--lemon-100));
    border: 1.5px solid var(--ink-900);
    display: flex; align-items: center; justify-content: center;
  }
  .pp-preview-foot { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ink-900); }

  /* PromptPay QR upload card · merchant uploads a static QR image */
  .pp-upload-card {
    background: white;
    border: 2px solid var(--ink-900);
    border-radius: 18px;
    padding: 16px;
    margin-top: 4px;
    box-shadow: 4px 4px 0 var(--ink-900);
  }
  .pp-upload-preview {
    width: 180px; height: 180px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: var(--cream);
    border: 1.5px dashed var(--line-2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .pp-upload-preview.has-image {
    border-style: solid;
    border-color: var(--ink-900);
    background: white;
    padding: 8px;
  }
  .pp-upload-img {
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .pp-upload-empty {
    text-align: center;
    padding: 18px;
  }
  .pp-upload-empty-ic {
    font-size: 32px;
    margin-bottom: 6px;
    opacity: 0.5;
  }
  .pp-upload-empty-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-700, #44403c);
    opacity: 0.6;
    line-height: 1.4;
  }
  .pp-upload-actions {
    display: flex; gap: 8px;
    margin-bottom: 10px;
  }
  .pp-upload-btn {
    flex: 1;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    border: 2px solid var(--ink-900);
    font-family: inherit;
    transition: transform .1s;
    display: flex; align-items: center; justify-content: center;
  }
  .pp-upload-btn:active { transform: translateY(1px); }
  .pp-upload-btn.primary {
    background: var(--lemon-400);
    color: var(--ink-900);
    box-shadow: 0 2px 0 var(--ink-900);
  }
  .pp-upload-btn.ghost {
    background: white;
    color: var(--ink-900);
  }
  .pp-upload-hint {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.55;
    line-height: 1.5;
    text-align: center;
  }

  /* ═══════════════════════ STAFF SETTINGS (set-staff) ═══════════════════════
   * Owner-only screen for setting staff PIN + 4 capability toggles.
   * Visual style follows other settings (PromptPay, Loyalty) — bordered
   * cards, save bar at bottom. */
  .staff-pin-edit-card {
    background: white;
    border: 2px solid var(--ink-900);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 4px 4px 0 var(--ink-900);
  }
  .staff-pin-edit-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }
  .staff-pin-edit-cap {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .staff-pin-edit-display {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.18em;
    background: var(--cream);
    padding: 6px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--line-2);
  }
  .staff-pin-edit-hint {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.6;
    line-height: 1.5;
    margin-top: 8px;
  }

  /* Permission rows · toggle on right · matches iOS-style switch */
  .staff-perm-list {
    display: flex; flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
  }
  .staff-perm-row {
    display: flex; align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.12s;
  }
  .staff-perm-row:active {
    border-color: var(--ink-900);
  }
  .staff-perm-ic {
    font-size: 22px;
    flex-shrink: 0;
    width: 38px;
    text-align: center;
  }
  .staff-perm-text { flex: 1; min-width: 0; }
  .staff-perm-name {
    font-size: 14px;
    font-weight: 900;
    color: var(--ink-900);
    margin-bottom: 2px;
  }
  .staff-perm-desc {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.62;
    line-height: 1.4;
  }
  .staff-perm-toggle {
    width: 44px; height: 26px;
    border-radius: 999px;
    background: var(--line-2);
    position: relative;
    transition: background 0.18s ease;
    flex-shrink: 0;
    cursor: pointer;
  }
  .staff-perm-toggle::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.20);
    transition: transform 0.18s ease;
  }
  .staff-perm-toggle.on {
    background: var(--success-500);
  }
  .staff-perm-toggle.on::after {
    transform: translateX(18px);
  }

  /* Hardcoded-restriction warning · NEVER access X · stays at bottom */
  .staff-perm-warning {
    background: #FEF3C7;
    border: 1.5px solid #F5C518;
    border-radius: 14px;
    padding: 14px;
    display: flex; gap: 12px;
    margin-top: 6px;
  }
  .staff-perm-warning-ic {
    font-size: 22px;
    flex-shrink: 0;
  }
  .staff-perm-warning-text {
    flex: 1;
    font-size: 11.5px;
    font-weight: 600;
    color: #78350F;
    line-height: 1.6;
  }
  .staff-perm-warning-text b {
    display: block;
    font-weight: 900;
    margin-bottom: 4px;
    color: #78350F;
  }

  /* Staff bar · shown at top of POS body when role=staff. Identifies
   * the user as employee and lists what they're allowed to do, plus a
   * logout button to return to mode-select. */
  .pos-staff-bar {
    background: linear-gradient(135deg, #FAF8F0 0%, #F1EDDF 100%);
    border: 1.5px solid var(--ink-900);
    border-radius: 14px;
    padding: 10px 14px;
    margin: 10px 12px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 0 var(--ink-900);
  }
  .pos-staff-bar-info {
    flex: 1; min-width: 0;
  }
  .pos-staff-bar-cap {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 2px;
  }
  .pos-staff-bar-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-900);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pos-staff-bar-logout {
    background: var(--ink-900);
    color: white;
    border: none;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.08s;
  }
  .pos-staff-bar-logout:active {
    transform: scale(0.95);
  }

  /* Read-only tag · shown in place of CTA when staff lacks the action's
   * required permission. Visually muted so it reads "you're observing,
   * not acting" — distinct from the colored gel CTAs. */
  .pos-ticket-readonly-tag {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(28,25,23,0.06);
    color: var(--ink-700, #44403c);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    border: 1.5px dashed rgba(28,25,23,0.25);
    flex-shrink: 0;
    min-width: 100px;
    text-align: center;
    opacity: 0.75;
  }

  /* Printer status banner */
  .printer-status {
    background: linear-gradient(135deg, var(--warn-100) 0%, var(--lemon-50) 100%);
    border: 1.5px solid var(--warn-500);
    border-radius: 16px;
    padding: 16px;
    display: flex; gap: 12px; align-items: center;
  }
  .printer-status-ic { font-size: 28px; }
  .printer-status-info { flex: 1; }
  .printer-status-title { font-size: 13px; font-weight: 900; letter-spacing: -0.01em; }
  .printer-status-sub { font-size: 11px; opacity: 0.65; font-weight: 600; margin-top: 2px; line-height: 1.35; }

  /* Sound rows */
  .sound-row { cursor: pointer; }
  .sound-row.active-sound { background: var(--lemon-50); }
  .sound-row .set-row-icon { font-size: 16px; }

  /* Subscription card link */
  .sub-card { cursor: pointer; transition: transform .1s; }
  .sub-card:active { transform: scale(0.99); }

  /* ═══════════════════════ REPORT ═══════════════════════ */
  .rep-body { padding: 14px 18px 24px 18px; flex: 1; }
  .range-pills {
    display: flex; gap: 4px;
    background: white; padding: 4px;
    border-radius: 14px; border: 1px solid var(--line);
  }
  .range-pill {
    flex: 1; padding: 8px;
    border-radius: 10px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
  }
  .range-pill.active { background: var(--ink-900); color: var(--lemon-400); }

  .rep-hero {
    background: white;
    border-radius: 20px;
    padding: 18px;
    margin-top: 12px;
    border: 1px solid var(--line);
  }
  .rep-hero-cap { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; opacity: 0.55; }
  .rep-hero-amt { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin-top: 4px; }
  .rep-hero-amt .currency { font-size: 16px; font-weight: 800; opacity: 0.45; margin-right: 4px; }
  .rep-delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
  .rep-delta.up { background: var(--success-100); color: var(--success-600); }

  .chart {
    margin-top: 14px;
    height: 110px;
    display: flex; align-items: flex-end; gap: 4px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .chart-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--lemon-400) 0%, var(--lemon-300) 100%);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    position: relative;
  }
  .chart-bar.peak { background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-700) 100%); }
  .chart-labels { display: flex; justify-content: space-between; font-size: 9px; font-weight: 700; opacity: 0.5; margin-top: 6px; }

  .rep-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .rep-stat-card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
  .rep-stat-cap { font-size: 9px; font-weight: 800; letter-spacing: 0.15em; opacity: 0.55; }
  .rep-stat-num { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; margin-top: 2px; }
  .rep-stat-sub { font-size: 10px; font-weight: 700; opacity: 0.55; }

  .rep-section-cap { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; opacity: 0.55; margin: 18px 4px 8px 4px; }

  .rep-top-row {
    background: white; border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
  }
  .rep-rank {
    width: 22px; height: 22px;
    background: var(--ink-900); color: var(--lemon-400);
    border-radius: 6px; font-size: 11px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .rep-top-name { flex: 1; font-size: 13px; font-weight: 700; }
  .rep-top-qty { font-size: 11px; opacity: 0.55; font-weight: 700; }
  .rep-top-amt { font-size: 13px; font-weight: 900; }

  .rep-pay-card {
    background: white; border: 1px solid var(--line);
    border-radius: 14px; padding: 14px;
  }
  .rep-pay-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .rep-pay-row:last-child { margin-bottom: 0; }
  .rep-pay-name { font-size: 12px; font-weight: 700; width: 84px; }
  .rep-pay-bar-wrap { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
  .rep-pay-bar { height: 100%; background: var(--lemon-400); border-radius: 4px; }
  .rep-pay-bar.alt { background: var(--ink-900); }
  .rep-pay-amt { font-size: 12px; font-weight: 900; width: 70px; text-align: right; letter-spacing: -0.01em; }

  /* ═══════════════════════ REPORT V2 · INSIGHTS + WATERFALL + DONUT ═══════════════════════
   * Premium upgrades to /report:
   *   - Insight cards (auto-detected · "วันนี้สถิติใหม่!", peak/slow, prep time)
   *   - Profit waterfall · sold → cogs → overhead → net
   *   - Top sellers with 7-day sparkline
   *   - Payment donut chart replacing 2-bar layout
   *   - Share-to-LINE button (canvas-rendered PNG)
   */

  /* ── INSIGHT CARDS · vertical stack (was horizontal scroll · removed
   *    because the swipe-sideways pattern felt unfamiliar/strange in this
   *    context). Now reads top-to-bottom like a list of bullet points. ── */
  .rep-insights {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 4px 0;
  }
  .rep-insight-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    width: 100%;
    box-shadow: 0 4px 10px -6px rgba(28,25,23,0.06);
    transition: transform 0.12s ease;
  }
  .rep-insight-card:active { transform: scale(0.99); }
  /* Variants — unified to LEMON Go palette (lemon + ink + cream).
   * Previously each variant had its own color (green/blue/orange) which
   * looked inconsistent with the rest of the app. Now all share the
   * cream-to-lemon gradient · only the border accent changes by type:
   *   record → solid ink-900 (the headline event)
   *   good   → solid lemon-500 (positive but not headline)
   *   warn   → dashed ink-900 (attention but not bad)
   *   info   → light lemon-300 (neutral observation) */
  .rep-insight-card[data-insight-type="record"] {
    background: linear-gradient(135deg, var(--lemon-200), var(--lemon-100));
    border: 1.5px solid var(--ink-900);
    box-shadow: 0 2px 0 var(--ink-900);
  }
  .rep-insight-card[data-insight-type="good"] {
    background: linear-gradient(135deg, var(--lemon-100), white);
    border: 1.5px solid var(--lemon-500);
  }
  .rep-insight-card[data-insight-type="warn"] {
    background: linear-gradient(135deg, var(--lemon-100), white);
    border: 1.5px dashed var(--ink-900);
  }
  .rep-insight-card[data-insight-type="info"] {
    background: white;
    border: 1.5px solid var(--lemon-300);
  }
  .rep-insight-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
  }
  .rep-insight-text { flex: 1; min-width: 0; }
  .rep-insight-title {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink-900);
  }
  .rep-insight-sub {
    font-size: 10.5px;
    font-weight: 700;
    opacity: 0.6;
    margin-top: 2px;
  }

  /* ── DELTA DOWN variant (existing rep-delta only had .up) ── */
  .rep-delta.down { background: var(--danger-100); color: var(--danger-500); }

  /* ════════════════════════ HERO POSTER CARD (V11) ════════════════════════
   * Single dark card with dramatic yellow profit number front-and-center.
   * Inspired by Spotify Wrapped / Apple Music recap — a moment, not a ledger.
   * Replaces the previous 3-section stacked summary card.
   *
   * Structure:
   *   .rep-summary-card (host element, no chrome of its own — hero IS the card)
   *     .rep-hero (the dark poster · all visual weight here)
   *       .rep-hero-cap            "เข้ากระเป๋าวันนี้"
   *       .rep-hero-num            big yellow number
   *       .rep-hero-chips          delta + tangible chips
   *       .rep-hero-bars           daily + monthly progress bars
   *
   * Empty state · .rep-hero-empty replaces all of the above.
   */

  .rep-summary-card {
    /* Host has no styling · hero handles all visuals */
    background: transparent;
    border: none;
    padding: 0;
  }
  /* Scope all .rep-hero* overrides to .rep-summary-card so they don't
   * collide with the chart hero card (line 2129) which uses the same
   * .rep-hero class but is yellow-on-white. Both hero cards exist on
   * /report — chart hero at top (sales total + bar chart), summary hero
   * below (profit number + targets).
   *
   * V12 · Flipped from dark "poster" to cream/lemon to match the rest
   * of the LEMON Go brand · user wanted consistency with chart hero
   * above (no jarring black box mid-page). Same content, different
   * palette: cream background · ink-900 text · lemon-400 accents. */
  .rep-summary-card .rep-hero {
    position: relative;
    background: linear-gradient(135deg, var(--lemon-100), var(--lemon-200));
    color: var(--ink-900);
    border: 1.5px solid var(--ink-900);
    border-radius: 22px;
    padding: 22px 22px 18px 22px;
    overflow: hidden;
    box-shadow: 0 4px 0 var(--ink-900), 0 14px 28px -14px rgba(245,197,24,0.4);
    margin-top: 0;
  }
  /* Decorative glow · soft yellow radial in the corner · subtle visual depth */
  .rep-summary-card .rep-hero-glow {
    position: absolute;
    top: -50%; right: -30%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(245,197,24,0.4), transparent 70%);
    pointer-events: none;
  }
  .rep-summary-card .rep-hero-cap {
    position: relative;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--ink-900);
    text-transform: uppercase;
    opacity: 0.7;
  }
  .rep-summary-card .rep-hero-num {
    position: relative;
    font-size: 50px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-top: 8px;
    color: var(--ink-900);
  }
  .rep-summary-card .rep-hero-chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
  }
  .rep-summary-card .rep-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.005em;
    background: rgba(28,25,23,0.08);
    color: var(--ink-900);
    line-height: 1.4;
  }
  /* Up = ink-900 text on white background (positive feels "win") */
  .rep-summary-card .rep-hero-chip.gd {
    background: white;
    color: var(--ink-900);
    border: 1px solid var(--ink-900);
  }
  /* Down = subdued · darker chip · don't want it screaming red on lemon bg */
  .rep-summary-card .rep-hero-chip.dn {
    background: var(--ink-900);
    color: var(--lemon-400);
  }

  .rep-summary-card .rep-hero-bars {
    position: relative;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1.5px solid rgba(28,25,23,0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .rep-summary-card .rep-hero-bar-block { /* container for one bar */ }
  .rep-summary-card .rep-hero-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .rep-summary-card .rep-hero-bar-lbl {
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.75;
  }
  .rep-summary-card .rep-hero-auto {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--ink-900);
    color: var(--lemon-400);
    letter-spacing: 0.02em;
    opacity: 1;
  }
  .rep-summary-card .rep-hero-bar-pct {
    font-size: 14px;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.01em;
  }
  .rep-summary-card .rep-hero-bar-track {
    height: 7px;
    background: white;
    border: 1px solid rgba(28,25,23,0.1);
    border-radius: 4px;
    overflow: hidden;
  }
  .rep-summary-card .rep-hero-bar-fill {
    height: 100%;
    background: var(--lemon-500);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* Reached target · gradient lemon → green for celebration */
  .rep-summary-card .rep-hero-bar-fill.done {
    background: linear-gradient(90deg, var(--lemon-500), var(--success-500));
  }
  .rep-summary-card .rep-hero-bar-foot {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-700);
    margin-top: 4px;
    line-height: 1.4;
    opacity: 0.7;
  }
  /* Edit-target link · "แก้เป้า" lets user jump to /set-target from the bar */
  .rep-summary-card .rep-hero-bar-edit {
    color: var(--ink-900);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 800;
    margin-left: 6px;
    opacity: 0.85;
  }
  .rep-summary-card .rep-hero-bar-edit:active { opacity: 0.5; }

  .rep-summary-card .rep-hero-empty {
    text-align: center;
    padding: 30px 14px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink-700);
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  /* ════════════════════════ TOP SELLERS · BAR CHART ════════════════════════
   * Each menu = horizontal bar showing sales share. #1 has gold rank +
   * dark bar, others use lemon yellow. Bar width = sold/maxSold so #1
   * is always 100% wide.
   *
   * Row layout (left → right):
   *   [rank circle] [emoji] [name] [×qty] [bar fills available space] [฿amt]
   */
  .rep-top-list {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 6px 14px;
  }
  .rep-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
    font-size: 12px;
    font-weight: 800;
  }
  .rep-bar-row:last-child { border-bottom: 0; }
  .rep-bar-rank {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--lemon-100);
    color: var(--ink-900);
    font-size: 11px;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.02em;
  }
  .rep-bar-rank.gold {
    background: var(--lemon-400);
    color: var(--ink-900);
    box-shadow: 0 2px 6px -1px rgba(245,197,24,0.5);
  }
  .rep-bar-emoji {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
  }
  .rep-bar-name {
    width: 88px;
    color: var(--ink-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.005em;
  }
  .rep-bar-qty {
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-700);
    opacity: 0.7;
    flex-shrink: 0;
    min-width: 26px;
  }
  .rep-bar-track {
    flex: 1;
    height: 11px;
    background: #F5F1E5;
    border-radius: 5px;
    overflow: hidden;
    min-width: 30px;
  }
  .rep-bar-fill {
    height: 100%;
    background: var(--lemon-400);
    border-radius: 5px;
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .rep-bar-fill.lead {
    background: var(--ink-900);
  }
  .rep-bar-amt {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    flex-shrink: 0;
    min-width: 44px;
    text-align: right;
  }

  /* Empty state for top sellers section · used when range has no orders */
  .rep-empty {
    text-align: center;
    padding: 24px 14px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-700);
    opacity: 0.5;
  }

  /* ── PAYMENT DONUT V2 ── */
  .rep-pay-card-v2 {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
  }
  .rep-donut {
    flex-shrink: 0;
    display: block;
  }
  .rep-pay-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
  .rep-pay-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .rep-pay-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
  }
  .rep-pay-item-text { flex: 1; min-width: 0; }
  .rep-pay-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -0.005em;
  }
  .rep-pay-amt-line {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin-top: 1px;
  }
  .rep-pay-cnt {
    font-size: 10.5px;
    font-weight: 700;
    opacity: 0.55;
    margin-left: 2px;
  }

  /* ── SHARE BUTTON ── */
  .rep-share-btn {
    margin-top: 22px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--lemon-300), var(--lemon-400));
    border: 2px solid var(--ink-900);
    border-radius: 18px;
    color: var(--ink-900);
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 0 var(--ink-900), 0 10px 24px -6px rgba(245,197,24,0.4);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
  }
  .rep-share-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--ink-900), 0 6px 16px -4px rgba(245,197,24,0.4);
  }
  .rep-share-btn:disabled { opacity: 0.7; cursor: progress; }
  .rep-share-btn.busy { animation: rep-share-pulse 1s ease-in-out infinite; }
  @keyframes rep-share-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.99); }
  }
  .rep-share-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--lemon-400);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .rep-share-text {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .rep-share-title {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--ink-900);
  }
  .rep-share-sub {
    font-size: 10.5px;
    font-weight: 700;
    opacity: 0.65;
    letter-spacing: 0.02em;
  }
  .rep-share-arr {
    font-size: 18px;
    font-weight: 900;
    color: var(--ink-900);
    flex-shrink: 0;
  }

  /* ── EMPTY STATE for top sellers when no orders yet ── */
  .rep-empty {
    text-align: center;
    padding: 30px 14px;
    font-size: 12px;
    font-weight: 800;
    opacity: 0.4;
  }

  /* ═══════════════════════ SETTINGS ═══════════════════════ */
  .set-body { padding: 14px 18px 24px 18px; flex: 1; }
  .set-section-cap { font-size: 10px; font-weight: 800; letter-spacing: 0.22em; opacity: 0.45; padding: 12px 4px 8px 4px; }
  .set-card {
    background: white; border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden;
  }
  .set-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
  }
  .set-row:last-child { border-bottom: none; }
  .set-row:active { background: var(--lemon-50); }
  .set-row-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--lemon-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--lemon-500);
    flex-shrink: 0;
  }
  .set-row-info { flex: 1; min-width: 0; }
  .set-row-label { font-size: 13px; font-weight: 800; }
  .set-row-val { font-size: 11px; font-weight: 600; opacity: 0.55; margin-top: 1px; }
  .set-row-arr { opacity: 0.35; }

  .sub-card {
    background: linear-gradient(135deg, var(--ink-900) 0%, #2A2622 100%);
    color: white;
    border-radius: 18px;
    padding: 18px;
    margin-top: 14px;
    position: relative; overflow: hidden;
  }
  .sub-card::after {
    content: '🍋'; position: absolute;
    right: -12px; bottom: -20px;
    font-size: 100px; opacity: 0.1;
    transform: rotate(-15deg);
  }
  .sub-cap { color: var(--lemon-400); font-size: 9px; font-weight: 800; letter-spacing: 0.2em; }
  .sub-plan { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; margin-top: 4px; }
  .sub-price { font-size: 13px; opacity: 0.7; margin-top: 2px; }
  .sub-price em { color: var(--lemon-400); font-style: normal; font-weight: 800; }
  .sub-renew { font-size: 11px; opacity: 0.6; margin-top: 10px; }

  /* ═══════════════════════ FAB CONTAINER ═══════════════════════ */
  .fab-wrap {
    position: absolute;
    right: 18px;
    bottom: 22px;
    width: 56px; height: 56px;
    z-index: 60;
    display: none;
  }
  .fab-wrap.show { display: block; }
  .fab2 {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--lemon-400);
    box-shadow: 0 16px 32px -10px rgba(28,25,23,0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  /* ═══════════════════════ STAFF PIN ENTRY ═══════════════════════
   * Full-screen lock screen that staff sees after picking "พนักงาน"
   * from mode-select. Numeric-only · 4 digits · auto-validates. */
  .staff-pin-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 24px 32px;
    background: var(--cream);
  }
  .staff-pin-head {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 28px;
  }
  .staff-pin-brand {
    display: flex; align-items: baseline; justify-content: center; gap: 4px;
    margin-bottom: 28px;
  }
  .staff-pin-brand .mode-brand-name {
    font-size: 22px; font-weight: 900;
    letter-spacing: -0.02em;
  }
  .staff-pin-brand .mode-brand-go {
    font-size: 22px;
    color: var(--lemon-500);
  }
  .staff-pin-title {
    font-size: 22px; font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .staff-pin-sub {
    font-size: 12px; font-weight: 600;
    opacity: 0.55;
  }
  .staff-pin-dots {
    display: flex; gap: 16px;
    margin-bottom: 4px;
  }
  .staff-pin-dots.shake { animation: staff-pin-shake 0.4s ease-in-out; }
  @keyframes staff-pin-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
  }
  .staff-pin-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--ink-900);
    transition: background 0.15s ease, transform 0.1s ease;
  }
  .staff-pin-dot.filled {
    background: var(--ink-900);
    transform: scale(1.1);
  }
  .staff-pin-error {
    font-size: 12px;
    font-weight: 800;
    color: #DC2626;
    margin-top: 10px;
    margin-bottom: 18px;
    min-height: 16px;
    text-align: center;
  }
  .staff-pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 76px);
    gap: 14px;
    margin-bottom: 24px;
  }
  .staff-pin-key {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--ink-900);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 28px;
    font-weight: 800;
    color: var(--ink-900);
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ink-900), 0 6px 12px -3px rgba(28,25,23,0.20);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    display: flex; align-items: center; justify-content: center;
  }
  .staff-pin-key:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ink-900), 0 2px 6px -2px rgba(28,25,23,0.18);
  }
  .staff-pin-key-action {
    background: var(--cream);
    font-size: 22px;
  }
  .staff-pin-foot {
    margin-top: auto;
  }
  .staff-pin-back {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-700, #44403c);
    opacity: 0.65;
    cursor: pointer;
    padding: 12px 16px;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }

  /* ═══════════════════════ MOBILE FLOATING NAV (DESKTOP HIDDEN) ═══════════════════════ */
  .mobile-screen-picker {
    display: flex; align-items: center; gap: 6px;
    position: fixed; top: 16px; right: 16px;
    background: var(--ink-900); color: var(--lemon-400);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.06em;
    z-index: 100;
    cursor: pointer;
    box-shadow: 0 8px 24px -8px rgba(28,25,23,0.4);
    opacity: 0.9;
  }
  .mobile-screen-picker:hover { opacity: 1; }
  .mobile-screen-picker::before {
    content: 'DEMO';
    font-size: 8px; font-weight: 900;
    letter-spacing: 0.15em;
    background: var(--lemon-400);
    color: var(--ink-900);
    padding: 2px 5px;
    border-radius: 4px;
    margin-right: 4px;
  }
  .mobile-picker-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(28,25,23,0.5);
    backdrop-filter: blur(6px);
    z-index: 200;
    align-items: flex-end; justify-content: center;
  }
  .mobile-picker-overlay.show { display: flex; }
  .mobile-picker-sheet {
    width: 100%; max-width: 480px;
    background: white;
    border-radius: 24px 24px 0 0;
    padding: 18px;
    max-height: 80vh; overflow-y: auto;
  }
  .mobile-picker-sheet h3 { font-size: 14px; font-weight: 900; margin-bottom: 14px; padding: 0 4px; }
  .mp-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px; font-weight: 700;
  }
  .mp-link:active { background: var(--lemon-50); }
  .mp-link.active { background: var(--ink-900); color: var(--lemon-400); }

  @media (max-width: 900px) {
    .mobile-screen-picker { top: 12px; right: 12px; padding: 6px 10px; font-size: 10px; }
    .mobile-screen-picker::before { display: none; }
  }

  /* ═══════════════════════ LOGIN SCREEN ═══════════════════════ */
  .login-screen {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: linear-gradient(180deg, var(--cream) 0%, var(--lemon-50) 100%);
    overflow: hidden !important;
  }
  .login-bg-deco {
    position: absolute; pointer-events: none; user-select: none;
  }
  .login-bg-deco.l1 { top: 70px; right: -30px; font-size: 140px; opacity: 0.12; transform: rotate(-18deg); }
  .login-bg-deco.l2 { bottom: -20px; left: -30px; font-size: 110px; opacity: 0.10; transform: rotate(22deg); }

  .login-body {
    position: relative;
    height: 100%;
    padding: 80px 28px 40px 28px;
    display: flex;
    flex-direction: column;
    z-index: 2;
  }
  .login-brand {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 4px;
  }
  .login-brand-name { font-size: 28px; font-weight: 900; letter-spacing: -0.04em; }
  .login-brand-go { font-size: 28px; color: var(--lemon-500); }
  .login-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; opacity: 0.5; }
  .login-headline {
    font-size: 26px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.05;
    margin-top: 32px;
  }
  .login-headline em { font-style: normal; background: linear-gradient(180deg, transparent 65%, var(--lemon-300) 65%); padding: 0 4px; }
  .login-sub {
    font-size: 13px; opacity: 0.65; line-height: 1.5; margin-top: 8px; font-weight: 500;
  }

  .login-form { margin-top: 26px; }
  .login-field { margin-bottom: 14px; }
  .login-label {
    font-size: 10px; font-weight: 800; letter-spacing: 0.18em; opacity: 0.6;
    margin-bottom: 7px; display: block;
  }
  .login-input-wrap {
    background: white;
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    transition: border-color .12s, box-shadow .12s;
  }
  .login-input-wrap:focus-within {
    border-color: var(--lemon-400);
    box-shadow: 0 0 0 3px rgba(245,197,24,0.18);
  }
  .login-prefix {
    font-size: 13px; font-weight: 800; opacity: 0.55;
    padding-right: 10px; border-right: 1.5px solid var(--line-2);
  }
  .login-input {
    flex: 1; background: transparent; border: none; outline: none;
    font-size: 15px; font-weight: 700;
    font-family: inherit; color: var(--ink-900);
    letter-spacing: 0.02em;
  }
  .login-input.tabular { font-variant-numeric: tabular-nums; }

  .otp-row {
    display: grid;
    /* `minmax(0, 1fr)` (not `1fr` alone) is the canonical fix for grids
     * containing <input> elements — `1fr` defaults to `minmax(auto, 1fr)`,
     * and `auto` resolves to the input's intrinsic min-width (~20ch), so
     * the grid track refuses to shrink below ~150px and 6 cells overflow
     * the parent. `minmax(0, 1fr)` lets each track shrink to 0 and grow
     * equally, fitting all 6 cells inside the card. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .otp-cell {
    aspect-ratio: 1;
    /* Belt-and-suspenders · ensure the input itself can also shrink */
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    background: white;
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    text-align: center;
    font-size: 22px; font-weight: 900;
    font-family:'JetBrains Mono', monospace;
    color: var(--ink-900);
    outline: none;
  }
  .otp-cell.filled { border-color: var(--ink-900); background: var(--lemon-50); }
  .otp-cell:focus { border-color: var(--lemon-400); box-shadow: 0 0 0 3px rgba(245,197,24,0.18); }

  .login-cta {
    margin-top: 18px;
    width: 100%;
    background: var(--ink-900);
    color: var(--lemon-400);
    border: none;
    border-radius: 16px;
    padding: 16px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 16px 32px -10px rgba(28,25,23,0.4);
    transition: transform .1s;
    font-family: inherit;
  }
  .login-cta:active { transform: scale(0.98); }
  .login-cta.alt {
    background: var(--lemon-400);
    color: var(--ink-900);
    box-shadow: 0 16px 32px -10px rgba(245,197,24,0.5);
  }

  .login-foot {
    margin-top: auto;
    text-align: center;
    font-size: 11px; font-weight: 600;
    opacity: 0.55;
  }
  .login-foot a { color: var(--lemon-500); font-weight: 800; cursor: pointer; }
  .login-resend {
    text-align: center;
    font-size: 11px; font-weight: 700;
    margin-top: 14px;
    opacity: 0.65;
  }
  .login-resend em { color: var(--lemon-500); font-style: normal; font-weight: 800; cursor: pointer; }

  /* ─── Quick PIN/FaceID login ─── */
  .quick-brand {
    display: flex; align-items: baseline; gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
  }
  .quick-user {
    text-align: center;
    margin-bottom: 22px;
  }
  .quick-avatar {
    width: 64px; height: 64px;
    margin: 0 auto 12px auto;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--lemon-400);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    box-shadow: 0 12px 24px -8px rgba(28,25,23,0.4);
    border: 3px solid var(--lemon-400);
  }
  .quick-greet-cap {
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.2em; opacity: 0.55;
  }
  .quick-greet-name {
    font-size: 22px; font-weight: 900;
    letter-spacing: -0.025em;
    margin-top: 2px;
  }
  .quick-greet-shop {
    font-size: 11px; font-weight: 600;
    opacity: 0.55; margin-top: 2px;
  }

  .pin-dots {
    display: flex; justify-content: center;
    gap: 14px;
    margin: 6px 0 8px 0;
  }
  .pin-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ink-900);
    background: transparent;
    transition: background .12s, transform .12s;
  }
  .pin-dot.filled {
    background: var(--ink-900);
    transform: scale(1.05);
  }
  .pin-dots.shake { animation: shake .35s; }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
  }
  .pin-prompt {
    text-align: center;
    font-size: 11px; font-weight: 700;
    opacity: 0.55;
    margin-bottom: 16px;
    letter-spacing: 0.04em;
  }

  .keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 -2px;
  }
  .key {
    height: 54px;
    border-radius: 16px;
    background: white;
    border: 1px solid var(--line);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background .08s, transform .08s;
    color: var(--ink-900);
    font-family: 'Inter', sans-serif;
    line-height: 1;
  }
  .key:active { background: var(--lemon-200); transform: scale(0.96); }
  .key small {
    font-size: 8px; font-weight: 800;
    letter-spacing: 0.2em;
    opacity: 0.45;
    margin-top: 3px;
  }
  .key-face {
    background: var(--lemon-400);
    border-color: var(--lemon-400);
    color: var(--ink-900);
  }
  .key-face:active { background: var(--lemon-500); }
  .key-back {
    background: transparent;
    border: none;
    color: var(--ink-700);
    opacity: 0.55;
  }
  .key-back:active { opacity: 1; background: transparent; transform: scale(0.92); }

  .quick-foot {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    opacity: 0.65;
  }
  .quick-foot-link {
    color: var(--lemon-500);
    font-weight: 800;
    cursor: pointer;
  }
  .quick-foot-sep {
    margin: 0 10px;
    opacity: 0.4;
  }

  .otp-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.06em;
    opacity: 0.6;
    cursor: pointer;
    margin-bottom: 6px;
    width: fit-content;
  }
  .otp-back:active { opacity: 1; }

  .login-step {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px;
  }
  .login-step .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
  .login-step .dot.on { background: var(--ink-900); width: 18px; border-radius: 3px; }

  .phone-display {
    background: var(--lemon-100);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px; font-weight: 800;
    margin-bottom: 14px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .phone-display em { color: var(--lemon-500); font-style: normal; font-weight: 800; cursor: pointer; }

  /* ═══════════════════════ MODE SELECT ═══════════════════════ */
  .mode-screen {
    background: var(--cream);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mode-screen::-webkit-scrollbar { width: 0; }
  .mode-bg-deco {
    position: absolute; pointer-events: none; user-select: none; z-index: 0;
  }
  .mode-bg-deco.m1 { top: 80px; right: -40px; font-size: 160px; opacity: 0.08; transform: rotate(-12deg); }

  .mode-body {
    position: relative;
    z-index: 2;
    padding: 16px 22px 28px 22px;
    display: flex; flex-direction: column;
    min-height: 100%;
  }
  .mode-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 2px 0 2px;
  }
  .mode-brand { display: flex; align-items: baseline; gap: 6px; }
  .mode-brand-name { font-size: 16px; font-weight: 900; letter-spacing: -0.03em; }
  .mode-brand-go { font-size: 16px; color: var(--lemon-500); }
  .mode-account { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .mode-account-name { font-size: 11px; font-weight: 700; opacity: 0.7; }
  .mode-account-pic {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ink-900); color: var(--lemon-400);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
  }

  .mode-greet { margin-top: 22px; }
  .mode-time { font-size: 11px; font-weight: 700; opacity: 0.55; letter-spacing: 0.04em; }
  .mode-shop {
    font-size: 28px; font-weight: 900; letter-spacing: -0.025em;
    line-height: 1.25; margin-top: 4px;
  }
  .mode-shop em { font-style: normal; color: var(--lemon-500); }
  .mode-status {
    margin-top: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--success-100); color: var(--success-600);
    padding: 5px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  }
  .mode-status .dot { width: 6px; height: 6px; background: var(--success-500); border-radius: 50%; box-shadow: 0 0 6px var(--success-500); }

  /* Mode-select status row · pill + date/time inline · v8.x · paired
   * the date with the open/closed pill so the top of the mode-select
   * screen feels less stacked. flex-wrap protects narrow viewports. */
  .mode-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
  }
  /* Inside the row, suppress the pill's standalone top margin · the
   * row owns vertical spacing now. */
  .mode-status-row .mode-status { margin-top: 0; }

  /* Quick stats strip */
  .mode-stats {
    margin-top: 18px;
    background: white;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    border: 1px solid var(--line);
  }
  .mode-stat { flex: 1; padding-right: 12px; }
  .mode-stat:not(:last-child) { border-right: 1px solid var(--line); margin-right: 12px; }
  .mode-stat-cap { font-size: 9px; font-weight: 800; letter-spacing: 0.18em; opacity: 0.55; }
  .mode-stat-num { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; margin-top: 2px; }
  .mode-stat-num.tabular { font-variant-numeric: tabular-nums; }

  /* TWO BIG BUTTONS */
  .mode-buttons {
    margin-top: 22px;
    display: flex; flex-direction: column; gap: 12px;
    flex: 1;
  }
  .mode-btn {
    flex: 1;
    border-radius: 24px;
    padding: 22px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 170px;
  }
  .mode-btn:active { transform: scale(0.98); }
  .mode-btn-pos {
    background: linear-gradient(135deg, #F5C518 0%, #FADF5E 65%, #FFE999 100%);
    color: var(--ink-900);
    box-shadow: 0 24px 48px -16px rgba(245,197,24,0.5), 0 4px 8px -2px rgba(245,197,24,0.4);
  }
  .mode-btn-bos {
    background: linear-gradient(135deg, var(--ink-900) 0%, #2A2622 100%);
    color: white;
    box-shadow: 0 24px 48px -16px rgba(28,25,23,0.45), 0 4px 8px -2px rgba(28,25,23,0.25);
  }
  .mode-btn-staff {
    background: linear-gradient(135deg, #FAF8F0 0%, #F1EDDF 60%, #E8DFC3 100%);
    color: var(--ink-900);
    box-shadow: 0 18px 36px -14px rgba(28,25,23,0.25), 0 4px 8px -2px rgba(28,25,23,0.12);
    border: 2px solid rgba(28,25,23,0.08);
  }
  .mode-btn-staff .mode-btn-icon {
    background: rgba(28,25,23,0.10);
    color: var(--ink-900);
  }
  .mode-btn-staff .mode-btn-badge { background: var(--ink-900); color: var(--lemon-400); }
  .mode-btn-staff .mode-btn-deco { opacity: 0.10; color: var(--ink-900); }
  .mode-btn-badge-lock {
    /* PIN-locked indicator on staff button — slightly more prominent
     * than regular badge so the merchant sees "this needs unlock" */
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }
  .mode-btn-top { display: flex; align-items: flex-start; justify-content: space-between; }
  .mode-btn-icon {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: rgba(28,25,23,0.12);
    display: flex; align-items: center; justify-content: center;
  }
  .mode-btn-bos .mode-btn-icon {
    background: rgba(245,197,24,0.18);
    color: var(--lemon-400);
  }
  .mode-btn-badge {
    background: var(--ink-900); color: var(--lemon-400);
    font-size: 10px; font-weight: 900; letter-spacing: 0.04em;
    padding: 4px 10px; border-radius: 999px;
  }
  .mode-btn-bos .mode-btn-badge { background: var(--lemon-400); color: var(--ink-900); }
  .mode-btn-title {
    font-size: 28px; font-weight: 900;
    letter-spacing: -0.03em; line-height: 1;
    margin-top: 16px;
  }
  .mode-btn-sub {
    font-size: 12px; font-weight: 600;
    margin-top: 6px; opacity: 0.7;
    line-height: 1.4;
  }
  .mode-btn-deco {
    position: absolute; right: -16px; bottom: -24px;
    font-size: 110px; opacity: 0.13;
    transform: rotate(-15deg); pointer-events: none;
    line-height: 1;
  }
  .mode-btn-bos .mode-btn-deco { opacity: 0.08; color: var(--lemon-400); }
  .mode-btn-arrow {
    margin-top: 14px; display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    opacity: 0.85;
  }

  /* ═══════════════════════ POS PLACEHOLDER ═══════════════════════ */
  .pos-screen { background: var(--cream); }
  .pos-body {
    padding: 14px 18px 20px 18px;
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    gap: 14px;
  }
  .pos-deco {
    font-size: 80px; opacity: 0.4; line-height: 1;
    filter: grayscale(0.3);
  }
  .pos-title { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
  .pos-msg { font-size: 13px; opacity: 0.6; line-height: 1.5; max-width: 260px; }
  .pos-msg em { font-style: normal; color: var(--lemon-500); font-weight: 800; }
  .pos-back {
    margin-top: 8px;
    background: var(--ink-900); color: var(--lemon-400);
    padding: 12px 22px; border-radius: 14px;
    font-size: 13px; font-weight: 900; letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 16px 32px -10px rgba(28,25,23,0.4);
  }


  /* ═══════════════════════ POS V5 · PRODUCTION-GRADE ═══════════════════════ */
  /*
   * The new "หน้าร้าน" (storefront) screen.
   * Replaces the old POS placeholder. Production-grade design inspired by
   * Square / Toast / TouchBistro patterns — adapted to LEMON's black + yellow
   * + cream identity. One-handed, glove-friendly, glance-first.
   */

  .pos-screen-v5 {
    background: var(--cream);
    overflow: hidden;
  }
  .pos-screen-v5.active {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* ─── DARK HEADER · live status + 3-stat row ─── */
  .pos-header {
    background: var(--ink-900);
    color: white;
    padding: 14px 16px 16px 16px;
    flex-shrink: 0;
  }
  .pos-header-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
  }
  .pos-header-left { display: flex; align-items: center; gap: 10px; }
  .pos-back-btn {
    width: 28px; height: 28px;
    border-radius: 9px;
    background: var(--lemon-400);
    color: var(--ink-900);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .12s, background .12s;
    flex-shrink: 0;
  }
  .pos-back-btn:active { transform: scale(0.92); background: var(--lemon-500); }
  .pos-header-cap {
    font-size: 11px; font-weight: 800;
    opacity: 0.55;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin-bottom: 2px;
  }
  .pos-header-live {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800;
    color: var(--success-500);
    letter-spacing: 0.05em;
  }
  .pos-live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success-500);
    box-shadow: 0 0 0 0 var(--success-500);
    animation: pos-live-pulse 1.8s ease-in-out infinite;
  }
  @keyframes pos-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  }
  .pos-header-pill {
    background: var(--lemon-400); color: var(--ink-900);
    padding: 7px 14px; border-radius: 10px;
    font-size: 12px; font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  .pos-stats-row {
    display: flex; gap: 14px;
    padding-top: 4px;
  }
  .pos-stat {
    flex: 1;
    cursor: pointer;
    transition: opacity .12s;
  }
  .pos-stat + .pos-stat {
    border-left: 1px solid rgba(255,255,255,0.1);
    padding-left: 14px;
  }
  .pos-stat:active { opacity: 0.6; }
  .pos-stat-cap {
    font-size: 9px; font-weight: 800;
    opacity: 0.55;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .pos-stat-num {
    font-size: 24px; font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  /* Tab-stat highlights */
  .pos-stat[data-pos-tab="new"].is-active     .pos-stat-num { color: var(--lemon-400); }
  .pos-stat[data-pos-tab="cooking"].is-active .pos-stat-num { color: var(--lemon-400); }
  .pos-stat[data-pos-tab="ready"].is-active   .pos-stat-num { color: var(--success-500); }
  .pos-stat:not(.is-active) .pos-stat-num     { opacity: 0.7; }

  /* ─── SUB-TABS ─── */
  .pos-tabs {
    display: flex;
    background: white;
    border-bottom: 0.5px solid var(--line);
    padding: 0 12px;
    flex-shrink: 0;
    overflow-x: auto;
  }
  .pos-tab {
    position: relative;
    padding: 11px 14px;
    font-size: 12px; font-weight: 700;
    color: var(--ink-500);
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
    transition: color .12s;
  }
  .pos-tab.active { color: var(--ink-900); font-weight: 900; }
  .pos-tab.active::after {
    content: "";
    position: absolute; bottom: -1px; left: 14px; right: 14px;
    height: 3px; border-radius: 2px;
    background: var(--ink-900);
  }
  .pos-tab[data-pos-tab="ready"].active::after { background: var(--success-500); }
  .pos-tab-count {
    min-width: 18px; height: 18px;
    border-radius: 9px; padding: 0 5px;
    background: var(--line-2); color: var(--ink-700);
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
  }
  .pos-tab.active[data-pos-tab="new"]     .pos-tab-count { background: var(--lemon-400); color: var(--ink-900); }
  .pos-tab.active[data-pos-tab="cooking"] .pos-tab-count { background: var(--ink-900); color: var(--lemon-400); }
  .pos-tab.active[data-pos-tab="ready"]   .pos-tab-count { background: var(--success-500); color: white; }

  /* ─── BODY · scrollable order list ─── */
  /* Note: there's a stale `.pos-body` rule earlier in this file from the old
   * placeholder POS that set `align-items:center; justify-content:center;
   * display:flex;` — those CSS-cascade leaks INTO this v5 rule because the
   * selector specificity is identical. Combined with `overflow-y:auto` they
   * cause a known browser bug where flex-centered content can't be scrolled
   * back to its top, freezing the POS list. We force-reset the layout props
   * here so the body acts as a plain scrollable column. */
  .pos-body {
    flex: 1;
    overflow-y: auto;
    /* bottom 140px reserves space for the floating "+ สั่งหน้าร้าน" FAB
     * (which is absolute-positioned at bottom: 22px and ~44px tall, plus
     * has a 1.04x breathe animation that briefly extends its bounds).
     * Without this, the last card is partially obscured and tap-targets
     * around the FAB compete with card actions — exactly the "เลื่อน
     * มือยาก" complaint. 140px gives ~30px breathing room above the FAB. */
    padding: 12px 12px 140px 12px;
    background: var(--cream);
    -webkit-overflow-scrolling: touch;
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    gap: 0;
  }
  .pos-body::-webkit-scrollbar { width: 0; }

  /* ─── ORDER CARD V5 ─── */
  .pos-card {
    background: white;
    border: 0.5px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 10px;
    transition: transform .12s, box-shadow .15s;
  }
  .pos-card.is-new {
    border: 2px solid var(--lemon-400);
    background: linear-gradient(180deg, var(--lemon-50) 0%, white 60%);
    animation: pos-new-pulse 2.2s ease-in-out infinite;
  }
  @keyframes pos-new-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,24,0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(245,197,24,0); }
  }
  .pos-card.is-cooking-fresh { border-left: 3px solid var(--success-500); }
  .pos-card.is-cooking-warn  { border-left: 3px solid var(--warn-500); }
  .pos-card.is-cooking-hot   {
    border: 0.5px solid #FCA5A5;
    border-left: 3px solid var(--danger-500);
    box-shadow: 0 0 0 4px rgba(220,38,38,0.08);
  }
  .pos-card.is-ready {
    background: linear-gradient(135deg, #F0FDF4 0%, white 100%);
    border: 1px solid var(--success-100);
    border-left: 3px solid var(--success-500);
  }

  .pos-card-top {
    display: flex; justify-content: space-between; align-items: flex-start;
  }
  .pos-card-id-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .pos-card-id {
    font-size: 18px; font-weight: 900;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .pos-card-time {
    font-size: 10px; opacity: 0.55;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* New badge — top-left */
  .pos-card-newbadge {
    position: absolute; top: -9px; left: 14px;
    background: var(--ink-900); color: var(--lemon-400);
    padding: 3px 10px; border-radius: 8px;
    font-size: 9px; font-weight: 900;
    letter-spacing: 0.1em;
    display: flex; align-items: center; gap: 5px;
  }
  .pos-card-newbadge::before {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--lemon-400);
    animation: pos-live-pulse 1.5s ease-in-out infinite;
  }
  .pos-card.is-new { position: relative; margin-top: 14px; }

  /* Time pill */
  .pos-time-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 900;
    font-variant-numeric: tabular-nums;
  }
  .pos-time-pill.fresh { background: var(--success-100); color: var(--success-600); }
  .pos-time-pill.warn  { background: var(--warn-100);    color: #D97706; }
  .pos-time-pill.hot   { background: var(--danger-100);  color: var(--danger-500); }
  .pos-time-pill svg { stroke: currentColor; }

  /* Right side — total + payment chip */
  .pos-card-right { text-align: right; }
  .pos-card-total {
    font-size: 18px; font-weight: 900;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .pos-pay-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--success-100);
    padding: 2px 7px; border-radius: 6px;
    margin-top: 3px;
    font-size: 9px; font-weight: 900;
    color: var(--success-600);
  }
  .pos-pay-chip.pending { background: var(--warn-100); color: #D97706; }

  /* Items block */
  .pos-card-items {
    background: var(--lemon-50);
    padding: 9px 11px;
    border-radius: 9px;
    margin: 10px 0;
    font-size: 11px;
    line-height: 1.55;
    font-weight: 600;
  }
  .pos-item-row {
    display: flex; align-items: flex-start; gap: 7px;
  }
  .pos-item-row + .pos-item-row { margin-top: 4px; }
  .pos-item-qty {
    background: var(--lemon-400); color: var(--ink-900);
    min-width: 19px; height: 19px;
    border-radius: 5px;
    font-size: 10px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
  }
  .pos-item-name { flex: 1; }
  .pos-item-note {
    color: var(--danger-500);
    font-weight: 800;
  }

  /* Action buttons */
  .pos-cta {
    width: 100%;
    border: none;
    padding: 14px;
    border-radius: 14px;
    font-size: 14px; font-weight: 900;
    letter-spacing: 0.02em;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer;
    transition: transform .1s, background .12s;
    font-family: inherit;
  }
  .pos-cta:active { transform: scale(0.98); }
  .pos-cta.primary  { background: var(--ink-900);     color: var(--lemon-400); }
  .pos-cta.success  { background: var(--success-500); color: white; }
  .pos-cta.success:active { background: var(--success-600); }
  .pos-cta.outline  {
    background: white;
    color: var(--ink-900);
    border: 1.5px solid var(--ink-900);
  }
  .pos-cta-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
  }
  .pos-cta.compact { padding: 13px 10px; font-size: 12px; }

  /* Ready · waiting timer pill */
  .pos-ready-status {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--success-100); color: var(--success-600);
    padding: 2px 8px; border-radius: 6px;
    font-size: 9px; font-weight: 900;
    letter-spacing: 0.05em;
  }
  .pos-ready-wait {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--warn-100); color: #D97706;
    padding: 3px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 900;
    margin-top: 6px;
    width: fit-content;
    font-variant-numeric: tabular-nums;
  }

  /* Empty state */
  .pos-empty {
    text-align: center;
    padding: 60px 24px;
    opacity: 0.42;
  }
  .pos-empty-emoji { font-size: 48px; line-height: 1; opacity: 0.5; }
  .pos-empty-text {
    font-size: 11px; font-weight: 800;
    margin-top: 10px;
    line-height: 1.55;
    letter-spacing: 0.02em;
  }

  /* ═══════════════════════ POS V7 · "SPOTLIGHT" ═══════════════════════
   *
   * Direction A from the V7 design review · "nickname is the hero".
   * Layout top-to-bottom:
   *   ACCENT  → 5px LEFT edge bar, color identifies state
   *   SPOTLIGHT → cream-tinted top section · "SHOUT-OUT" cap + nickname BIG
   *               (this is what the merchant sees first — the call-out name)
   *   ITEMS   → qty + name list with note in yellow inline box
   *   META    → time chip (color-graded) + secondary meta inline
   *   FOOT    → total left + state-colored CTA right
   *   ARRIVED → optional bottom-row green dot when customer is at the shop
   *
   * Density target: 3 cards per phone screen (vs B's 4) — A trades density
   * for nickname legibility. Best for shops where the call-out moment
   * matters most (crepe trucks, smoothie stands).
   *
   * State colors drive: left accent + time chip + CTA + spotlight tint.
   *   <8min   normal · gray accent
   *   8-15    late-1 · amber accent + amber chip
   *   15-25   late-2 · orange accent
   *   25+     late-3 · red accent + animated pulse
   *   ready    · green accent + pulse + spotlight turns green
   */

  /* ═══════════════════════ POS V10 · LEMON GEL FRAME ═════════════════════
   * Card uses the same "lemon gel" frame look as .order-card on the home
   * screen — outer gradient frame (5px), white inner card, glossy specular
   * highlight on top, soft inner shadow at the seam. State changes the
   * gel color, not the layout.
   *
   * State semantics:
   *   new (ยังไม่เริ่มทำ)   → gray gel    (passive · CTA gray pill)
   *   cooking (กำลังทำ)    → YELLOW gel  (lemon · CTA yellow pill · brand)
   *   late-1/2/3            → amber → orange → red gel (escalation)
   *   ready + paid          → green gel  (chill · just hand over)
   *   ready + unpaid        → RED gel    (urgent · collect cash first) */
  .pos-ticket {
    position: relative;
    background:
      linear-gradient(180deg,
        #EAEAE7 0%, #D6D3CF 28%, #BCB9B2 55%, #A39E96 100%);
    border-radius: 22px;
    padding: 5px;
    margin-bottom: 14px;
    cursor: pointer;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 -2px 6px rgba(0,0,0,0.08) inset,
      0 6px 14px -4px rgba(28,25,23,0.18),
      0 2px 4px rgba(28,25,23,0.10);
    transition:
      transform .15s ease,
      box-shadow .15s ease,
      opacity .28s ease;
    isolation: isolate;
    --ticket-color: #D6D3CF;
    --ticket-text: #44403c;
  }
  /* v8.x · :active transform removed from .pos-ticket because the scale
   * down was causing buttons inside the card to displace mid-click on
   * desktop browsers (mousedown lands on button → card scales → button
   * moves slightly → mouseup lands on different element → click event
   * never fires). Buttons keep their own :active feedback below.
   * If we want card-level press feedback later, do it via a non-transform
   * effect (e.g., box-shadow change) so layout/hit-area stays put. */
  /* .pos-ticket:active removed · see comment above */
  /* Glossy specular highlight on top — the "aqua/gel" wet look.
   * v8.x · removed mix-blend-mode:screen because Chrome/Safari has a
   * known bug where mix-blend-mode pseudo-elements can intercept
   * clicks even with pointer-events:none, causing buttons inside the
   * parent to fail to fire. Replaced the screen-blend with a plain
   * alpha-blended white gradient · visually nearly identical (a soft
   * white glaze on the top half of the card) but without the hit-test
   * glitch. */
  .pos-ticket::before {
    content: "";
    position: absolute;
    left: 8px; right: 8px; top: 4px;
    height: 38%;
    border-radius: 18px 18px 32px 32px / 18px 18px 24px 24px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.42) 0%,
      rgba(255,255,255,0.14) 60%,
      rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 2;
  }
  /* Inner shadow at the seam between gel & paper */
  .pos-ticket::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 18px;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.10) inset;
    z-index: 1;
  }
  .pos-ticket-inner {
    position: relative;
    background: white;
    border-radius: 17px;
    overflow: hidden;
    z-index: 1;
  }

  /* STATE GEL COLORS · only the outer frame changes */
  .pos-ticket-new {
    background:
      linear-gradient(180deg,
        #EAEAE7 0%, #D6D3CF 28%, #BCB9B2 55%, #A39E96 100%);
    --ticket-color: #D6D3CF;
    --ticket-text: #44403c;
  }
  .pos-ticket-cooking {
    background:
      linear-gradient(180deg,
        #FFE066 0%, #FBCE2E 28%, #F5C518 55%, #E5B00A 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 -2px 6px rgba(180,130,0,0.18) inset,
      0 6px 14px -4px rgba(229,176,10,0.45),
      0 2px 4px rgba(28,25,23,0.10);
    --ticket-color: #F5C518;
    --ticket-text: #7A5A00;
  }
  /* COOKING LATENESS · color stays YELLOW (cooking has one identity) ·
   * urgency is signaled by pulse speed + a small "สาย Xm" badge in the
   * card (rendered by JS). Going amber/orange/red made the card look like
   * a different state and confused the merchant — yellow with urgency
   * cues is clearer: "still the same job, just hurry up". */
  .pos-ticket-cooking.pos-ticket-late-1 {
    animation: pos-ticket-cooking-pulse 2.4s ease-in-out infinite;
  }
  .pos-ticket-cooking.pos-ticket-late-2 {
    animation: pos-ticket-cooking-pulse 1.6s ease-in-out infinite;
  }
  .pos-ticket-cooking.pos-ticket-late-3 {
    animation: pos-ticket-cooking-pulse 1s ease-in-out infinite;
  }
  @keyframes pos-ticket-cooking-pulse {
    0%, 100% {
      box-shadow:
        0 1px 0 rgba(255,255,255,0.55) inset,
        0 -2px 6px rgba(180,130,0,0.18) inset,
        0 6px 14px -4px rgba(229,176,10,0.45),
        0 2px 4px rgba(28,25,23,0.10);
    }
    50% {
      box-shadow:
        0 1px 0 rgba(255,255,255,0.55) inset,
        0 -2px 6px rgba(180,130,0,0.25) inset,
        0 8px 22px -4px rgba(229,176,10,0.75),
        0 2px 4px rgba(28,25,23,0.12);
    }
  }
  .pos-ticket-ready {
    background:
      linear-gradient(180deg,
        #F5F1E8 0%, #EAEAE7 28%, #D6D3CF 55%, #BCB9B2 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 -2px 6px rgba(0,0,0,0.08) inset,
      0 6px 14px -4px rgba(28,25,23,0.18),
      0 2px 4px rgba(28,25,23,0.10);
    --ticket-color: #D6D3CF;
    --ticket-text: #44403c;
  }
  .pos-ticket-ready.pos-ticket-unpaid {
    background:
      linear-gradient(180deg,
        #FED7D7 0%, #FCA5A5 28%, #F87171 55%, #EF4444 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 -2px 6px rgba(180,40,40,0.18) inset,
      0 6px 14px -4px rgba(248,113,113,0.40),
      0 2px 4px rgba(28,25,23,0.10);
    --ticket-color: #F87171;
    --ticket-text: #B91C1C;
    animation: pos-ticket-urgent 2s ease-in-out infinite;
  }
  .pos-ticket-ready.pos-ticket-late-3 {
    background:
      linear-gradient(180deg,
        #F87171 0%, #EF4444 28%, #DC2626 55%, #B91C1C 100%);
    --ticket-color: #DC2626;
    --ticket-text: #991B1B;
    animation: pos-ticket-urgent 1.4s ease-in-out infinite;
  }

  @keyframes pos-ticket-urgent {
    0%, 100% { box-shadow: 0 2px 8px -2px rgba(239,68,68,0.10); }
    50%      { box-shadow: 0 4px 16px -2px rgba(239,68,68,0.40); }
  }
  @keyframes pos-ticket-ready-pulse {
    0%, 100% { box-shadow: 0 2px 8px -2px rgba(34,197,94,0.10); }
    50%      { box-shadow: 0 4px 14px -2px rgba(34,197,94,0.30); }
  }

  /* ═══════════════════════ POS V8 · "RECEIPT TAPE" ═══════════════════════
   *
   * Direction 01 from the variant brainstorm — paper-tape aesthetic.
   * Cook reads top-to-bottom like a real thermal-printed slip:
   *   HEADER     → time chip (color-graded) + nickname inline
   *   ALERTS     → optional verify-payment pill row
   *   ITEMS      → qty (mono) + name list — THE hero of the card
   *   META BAR   → #id · channel · paid (mono uppercase, like a receipt)
   *   FOOT       → "TOTAL" cap + ฿amount mono · state-colored CTA right
   *   ARRIVED    → optional green-dot row when customer is at the shop
   *
   * Sections separated by 1px dashed lines (like real receipt zones).
   * Bottom edge has zigzag perforation via ::after cutting page color
   * up into the card. Left accent bar (5px) carries state color. */

  /* TOP HEADER · time chip + nickname inline · no bg tint */
  /* V10 HEAD · two-column layout · nickname+id stacked left, time chip right.
   * Nickname size dialed back from 15-17px to 13-14px so the items get to be
   * the visual hero (cook needs to see the food list, not the call-out name
   * which is for pickup time only). */
  .pos-ticket-head {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px 9px;
  }
  .pos-ticket-head-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .pos-ticket-nick {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pos-ticket-id-row {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-700, #44403c);
    opacity: 0.55;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  /* Backward-compat · old class name still used in cust-status etc. */
  .pos-ticket-receipt-head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
  }
  .pos-ticket-receipt-head .pos-ticket-nick {
    flex: 1; min-width: 0;
  }

  /* TIME CHIP · NEUTRAL box · same look in every state. Now shows two pieces:
   * elapsed time + clock time of order ("20 นาที · 07:40"). Helps cook
   * understand both urgency and queue position. */
  .pos-ticket-time-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: #F1F0EA;
    color: var(--ink-900);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid #D6D3CF;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ALERTS · pill row between header and items */
  .pos-ticket-alerts {
    padding: 0 16px 8px;
  }
  .pos-ticket-alerts:empty { display: none; }
  button.pos-ticket-flag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    background: rgba(245,197,24,0.18);
    color: #B45309;
    border: 1px solid rgba(245,197,24,0.4);
    transition: transform .1s, background .12s;
  }
  button.pos-ticket-flag:active {
    transform: scale(0.97);
    background: rgba(245,197,24,0.32);
  }

  /* ITEMS · qty (mono) + name list · the visual hero of the card.
   * Each section after this is separated by a dashed line (border-top). */
  .pos-ticket-items {
    padding: 10px 16px 10px;
    border-top: 1px dashed rgba(28,25,23,0.18);
  }
  .pos-ticket-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 4px 0;
  }
  .pos-ticket-item + .pos-ticket-item {
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px dashed rgba(28,25,23,0.07);
  }
  .pos-ticket-item-qty {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 900;
    font-size: 17px;
    color: var(--ink-900);
    min-width: 22px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .pos-ticket-item-detail { flex: 1; min-width: 0; }
  .pos-ticket-item-name {
    font-weight: 900;
    font-size: 16px;
    color: var(--ink-900);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  /* Modifiers · rendered as small chips (one per addition). Chips wrap
   * naturally to a new line when there are many. Color: cream/amber tint
   * — secondary info (cook needs to glance, not stare). */
  .pos-ticket-item-mods {
    margin-top: 5px;
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .pos-ticket-mod-chip {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(245,197,24,0.35);
    line-height: 1.4;
    white-space: nowrap;
  }

  /* Customer NOTE · MUST be unmissable. The cook getting this wrong is the
   * difference between "great service" and "ลูกค้าด่า". Box has stronger
   * fill, bigger text, italic for "this is the customer's voice". */
  .pos-ticket-item-note {
    display: block;
    background: #FEF3C7;
    color: #92400E;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    padding: 6px 10px;
    border-radius: 8px;
    border-left: 3px solid #F5C518;
    margin-top: 6px;
    line-height: 1.4;
  }

  /* META BAR · LEGACY · kept for any back-compat callers · no longer used
   * by V10 buildPOSCard which puts #id under nickname and payment as pill */
  .pos-ticket-meta-bar {
    padding: 7px 16px;
    border-top: 1px dashed rgba(28,25,23,0.18);
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-700, #44403c);
    opacity: 0.65;
    letter-spacing: 0.06em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    text-transform: uppercase;
  }

  /* V10 FOOT · 3-column row: total (mono medium) · pay pill · CTA. Total
   * dialed back from 22px to 17px so it doesn't overpower the items above. */
  .pos-ticket-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 10px 14px 12px;
    border-top: 1px dashed rgba(28,25,23,0.18);
  }
  .pos-ticket-total-wrap { flex: 1; min-width: 0; }
  .pos-ticket-total-cap {
    font-size: 9px;
    font-weight: 900;
    color: var(--ink-700);
    opacity: 0.55;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .pos-ticket-total {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 17px;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    line-height: 1.1;
    flex-shrink: 0;
  }

  /* PAY PILL · soft pill in foot row · color-coded by paid status:
   *   .paid    → green soft (chill, payment done)
   *   .pending → amber soft (urgent, cash to collect or QR to verify) */
  .pos-ticket-pay-pill {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1.2;
  }
  .pos-ticket-pay-pill.paid {
    background: #DCFCE7;
    color: #15803D;
    border: 1px solid rgba(34,197,94,0.4);
  }
  .pos-ticket-pay-pill.pending {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid rgba(245,197,24,0.5);
  }
  /* CTA BUTTONS · "Glass Mono Escalation" (V9):
   *   เริ่มทำ (new)   · glass yellow · brand action · ดึงดูดสายตา
   *   ทำเสร็จ (cooking) · glass neutral gray · สงบ ไม่แย่งความสนใจ
   *   ส่งให้ลูกค้า (ready) · solid dark · final commit
   *
   * All 3 share min-width to look like a balanced trio in a list of cards.
   * Glass effect = white base + colored border + translucent tint overlay
   * + bright highlight bar on the top half (creates "frosted" look). */
  /* CTA BUTTONS · "V10 Gel Pill" — matches the .order-cta visual on the home
   * screen: gradient fill, black border, drop shadow underneath. State color
   * matches the card's gel frame so the CTA reads as "the action for this state". */
  .pos-ticket-cta {
    background: linear-gradient(180deg, #ECECEC 0%, #D6D3CF 70%, #B8B5B0 100%);
    color: var(--ink-900);
    padding: 8px 16px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.03em;
    border: 1.5px solid var(--ink-900);
    flex-shrink: 0;
    min-width: 100px;
    box-shadow: 0 2px 0 var(--ink-900), 0 4px 8px -2px rgba(28,25,23,0.18);
    transition: transform .12s, box-shadow .12s;
    cursor: pointer;
    /* v8.x · explicit stacking + pointer-events to defend against the
     * card's ::before glossy overlay (z:2, mix-blend-mode:screen) and
     * any other pseudo-element that might intercept clicks in some
     * browsers. position:relative+z:3 puts the button on top within
     * the card's stacking context · pointer-events:auto is redundant
     * with default but documents intent. */
    position: relative;
    z-index: 3;
    pointer-events: auto;
  }
  .pos-ticket-cta:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--ink-900), 0 1px 4px -2px rgba(28,25,23,0.12);
  }

  /* NEW · gray gel pill · waiting passive */
  .pos-ticket-new .pos-ticket-cta {
    background: linear-gradient(180deg, #ECECEC 0%, #D6D3CF 70%, #B8B5B0 100%);
    color: var(--ink-900);
    box-shadow: 0 2px 0 var(--ink-900), 0 4px 8px -2px rgba(28,25,23,0.18);
  }

  /* COOKING · YELLOW gel pill · brand action color */
  .pos-ticket-cooking .pos-ticket-cta {
    background: linear-gradient(180deg, #FCD647 0%, #F5C518 70%, #E5B00A 100%);
    color: var(--ink-900);
    box-shadow: 0 2px 0 var(--ink-900), 0 4px 8px -2px rgba(229,176,10,0.45);
  }
  /* COOKING LATE STATES · CTA stays YELLOW (no escalation override).
   * Lateness urgency comes from card pulse + the "สาย Xm" badge ·
   * NOT from changing CTA color. This keeps "ทำเสร็จ" reading as the
   * same safe action regardless of how long it's taken. */

  /* READY + PAID · gray gel pill · passive (food done · waiting for pickup) */
  .pos-ticket-ready .pos-ticket-cta {
    background: linear-gradient(180deg, #ECECEC 0%, #D6D3CF 70%, #B8B5B0 100%);
    color: var(--ink-900);
    box-shadow: 0 2px 0 var(--ink-900), 0 4px 8px -2px rgba(28,25,23,0.18);
  }

  /* READY + UNPAID · soft red gel pill · alert: collect cash before delivery */
  .pos-ticket-ready.pos-ticket-unpaid .pos-ticket-cta {
    background: linear-gradient(180deg, #FCA5A5 0%, #F87171 70%, #EF4444 100%);
    color: white;
    box-shadow: 0 2px 0 var(--ink-900), 0 4px 8px -2px rgba(248,113,113,0.45);
  }

  /* Lateness badge for cooking-late states · shows next to nickname when
   * card is in cooking state and at least late-1. "สาย Xm" pill pulses
   * to grab the cook's eye without changing the card's overall yellow. */
  .pos-ticket-late-badge {
    display: inline-flex; align-items: center;
    background: rgba(220,38,38,0.92);
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(220,38,38,0.4);
    animation: pos-late-badge-pulse 1.6s ease-in-out infinite;
  }
  @keyframes pos-late-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
  }

  /* Inline foot-time · clock time order landed · obsolete (was for
   * collapsed mode which is now removed). Hidden globally — kept here
   * to avoid breaking pages that still reference the class. */
  .pos-ticket-foot-time { display: none; }

  /* ─── HISTORY ROW (รับแล้ว tab · compact) ───
   * 1-line per delivered order. Density target: 8-10 rows per phone screen.
   * Tap to open the receipt modal. No actions on the row itself. */
  .pos-history-banner {
    background: linear-gradient(135deg, var(--lemon-50, #FFF8DC), var(--cream-50, #FAF8F0));
    border: 1px solid rgba(245,197,24,0.25);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  .pos-history-banner-cap {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ink-700, #44403c);
    opacity: 0.6;
    margin-bottom: 8px;
  }
  .pos-history-banner-row {
    display: flex; align-items: center; gap: 8px;
  }
  .pos-history-banner-stat { flex: 1; min-width: 0; }
  .pos-history-banner-num {
    font-size: 18px;
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .pos-history-banner-lbl {
    font-size: 10px;
    opacity: 0.55;
    font-weight: 600;
    margin-top: 2px;
  }
  .pos-history-banner-sep {
    width: 1px;
    align-self: stretch;
    background: rgba(28,25,23,0.10);
  }

  .pos-history-row {
    display: flex; align-items: center; gap: 12px;
    background: white;
    border: 1px solid rgba(28,25,23,0.05);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background .12s;
  }
  .pos-history-row:active { background: var(--cream-50, #FAF8F0); }
  .pos-history-row-time {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink-700);
    opacity: 0.6;
    min-width: 44px;
  }
  .pos-history-row-main { flex: 1; min-width: 0; }
  .pos-history-row-nick {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink-900);
    line-height: 1.2;
    display: flex; align-items: center; gap: 6px;
  }
  .pos-history-row-paid {
    color: #16a34a;
    font-size: 11px;
    background: rgba(34,197,94,0.12);
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-weight: 900;
  }
  .pos-history-row-unpaid {
    color: #B45309;
    font-size: 11px;
    background: rgba(245,197,24,0.18);
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-weight: 900;
  }
  .pos-history-row-meta {
    font-size: 11px;
    opacity: 0.55;
    margin-top: 2px;
  }
  .pos-history-row-amt {
    font-size: 15px;
    font-weight: 900;
    color: var(--ink-900);
    flex-shrink: 0;
  }

  /* FAB · "+ สั่งหน้าร้าน" ─── floating above the order list, must read as
   * "lift" not "stuck". Larger drop shadow + lemon-tinted glow below it
   * tells the eye it's hovering over the cards, not stamped onto them. */
  .pos-fab {
    position: absolute;
    bottom: 22px; right: 18px;
    background: var(--ink-900);
    color: var(--lemon-400);
    border: 2px solid var(--lemon-400);
    padding: 13px 20px;
    border-radius: 999px;
    font-size: 13px; font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    display: flex; align-items: center; gap: 9px;
    box-shadow:
      0 18px 36px -8px rgba(28,25,23,0.55),
      0 8px 16px -4px rgba(245,197,24,0.30),
      0 0 0 4px rgba(250,248,240,0.85);
    animation: pos-fab-breathe 3.2s ease-in-out infinite;
    transition: transform .15s;
    z-index: 10;
  }
  .pos-fab:active { transform: scale(0.95); animation-play-state: paused; }
  @keyframes pos-fab-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
  }
  .pos-fab-plus {
    background: var(--lemon-400); color: var(--ink-900);
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 900;
    line-height: 1;
  }

  /* ═══════════════════════ POS V6 · CHECKLIST CARDS ═══════════════════════ */
  /* Sticky board strip — shows status summary above the list */
  .pos-board-strip {
    background: var(--ink-900);
    color: white;
    padding: 8px 14px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .pos-board-strip span { opacity: 0.85; }
  .pos-clear-done {
    background: var(--lemon-400); color: var(--ink-900);
    border: none; padding: 6px 12px; border-radius: 999px;
    font-size: 10px; font-weight: 900;
    letter-spacing: 0.06em;
    cursor: pointer; font-family: inherit;
  }
  .pos-clear-done:active { background: var(--lemon-500); transform: scale(0.96); }

  /* Order card — checklist style */
  /* ═══════════════════════ POS CHECKLIST CARDS · 3D AQUA/GEL ═══════════════════════
     Single-element technique: `padding-box white` + `border-box gradient` gives us a
     gel-coated border without needing an extra wrapper. Status (urgent/warm/fresh/etc.)
     swaps the gel HUE, but the 3D treatment is uniform. The pulse/fade/complete
     transitions and the inline checklist UX are preserved 100% — POS merchants
     during a rush still tap rows directly, no modal popup gets in the way. */
  .pos-card.is-checklist {
    /* white interior + lemon gel border (default) */
    background:
      white padding-box,
      linear-gradient(180deg, #FFE066 0%, #FBCE2E 28%, #F5C518 55%, #E5B00A 100%) border-box;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 12px 14px;
    margin-bottom: 12px;
    position: relative;
    isolation: isolate;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 6px 14px -4px rgba(229,176,10,0.40),
      0 2px 4px rgba(28,25,23,0.10);
    transition: opacity .25s, transform .25s, box-shadow .15s;
  }
  /* glossy specular highlight at the top of the gel border */
  .pos-card.is-checklist::before {
    content: "";
    position: absolute;
    left: 6px; right: 6px; top: -2px;
    height: 32%;
    border-radius: 18px 18px 28px 28px / 18px 18px 22px 22px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.16) 60%,
      rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
  }

  /* ── Priority HUES — same 3D treatment, different gel color ────────────────
     Smart-sort cues at-a-glance: red gel pulses for urgent, orange for warm,
     green for ready, lemon for new. */
  .pos-card.is-checklist.urgent {
    background:
      white padding-box,
      linear-gradient(180deg, #FCA5A5 0%, #F87171 30%, #EF4444 65%, #DC2626 100%) border-box;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 8px 22px -6px rgba(220,38,38,0.50),
      0 2px 4px rgba(28,25,23,0.10);
    animation: pos-urgent-pulse 1.6s ease-in-out infinite;
  }
  .pos-card.is-checklist.warm {
    background:
      white padding-box,
      linear-gradient(180deg, #FCD9A8 0%, #FBB36A 30%, #F59E0B 65%, #D97706 100%) border-box;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 6px 16px -4px rgba(245,158,11,0.45),
      0 2px 4px rgba(28,25,23,0.10);
  }
  .pos-card.is-checklist.fresh {
    background:
      white padding-box,
      linear-gradient(180deg, #BBF2D0 0%, #88E2AB 30%, #5BCD86 65%, #22C55E 100%) border-box;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 6px 16px -4px rgba(34,197,94,0.45),
      0 2px 4px rgba(28,25,23,0.10);
  }
  .pos-card.is-checklist.fresh-new {
    /* default lemon gel — keep slightly brighter to signal "just landed" */
    background:
      white padding-box,
      linear-gradient(180deg, #FFEC99 0%, #FCD647 28%, #F5C518 55%, #E5B00A 100%) border-box;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 6px 16px -4px rgba(229,176,10,0.50),
      0 2px 4px rgba(28,25,23,0.10);
  }
  .pos-card.is-checklist.complete {
    /* Done — muted gel, dimmed inner, ready to be cleared */
    background:
      rgba(255,255,255,0.7) padding-box,
      linear-gradient(180deg, #C8E9D5 0%, #9BD8B5 30%, #6FC290 65%, #4FAA75 100%) border-box;
    opacity: 0.72;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.45) inset,
      0 3px 8px -2px rgba(34,197,94,0.30);
  }
  .pos-card.is-checklist.fading {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
    pointer-events: none;
  }
  /* V11+ ticket cards use .pos-ticket — same fade-out behaviour. The
   * transform here is intentionally subtle (no horizontal slide) since
   * tickets sit in a strict FIFO column where lateral motion looks wrong. */
  .pos-ticket.fading {
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
  }
  @keyframes pos-urgent-pulse {
    0%, 100% {
      box-shadow:
        0 1px 0 rgba(255,255,255,0.55) inset,
        0 8px 22px -6px rgba(220,38,38,0.50),
        0 2px 4px rgba(28,25,23,0.10);
    }
    50% {
      box-shadow:
        0 1px 0 rgba(255,255,255,0.55) inset,
        0 12px 30px -4px rgba(220,38,38,0.75),
        0 2px 4px rgba(28,25,23,0.10);
    }
  }

  /* Top row of card: id + time + total */
  .pos-card-row1 {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 4px;
    position: relative;
    z-index: 2;
  }
  .pos-card-row1-left { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .pos-card-row1 .pos-card-id { font-size: 14px; font-weight: 900; letter-spacing: -0.01em; }
  .pos-card-row1 .pos-card-meta {
    font-size: 10px; font-weight: 700;
    color: var(--ink-500); letter-spacing: 0.02em;
  }
  .pos-card-row1 .pos-card-total {
    font-size: 17px; font-weight: 900;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  /* Time pill colored by urgency — borderless gel mini-pill */
  .pos-elapsed-pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    border: 1px solid transparent;
  }
  .pos-elapsed-pill.fresh   { background: var(--success-100); color: var(--success-600); border-color: rgba(34,197,94,0.25); }
  .pos-elapsed-pill.warm    { background: var(--warn-100);    color: #D97706; border-color: rgba(245,158,11,0.25); }
  .pos-elapsed-pill.urgent  { background: var(--danger-100);  color: var(--danger-500); border-color: rgba(220,38,38,0.30); }
  .pos-elapsed-pill.fresh-new { background: var(--lemon-100); color: #8B6914; border-color: rgba(229,176,10,0.30); }

  /* Items block — keep cream interior, rests between gel border & checklist */
  .pos-card-items {
    background: var(--cream);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 6px 0 10px 0;
    position: relative;
    z-index: 2;
  }
  .pos-card-items .pos-item-row {
    display: flex; gap: 8px;
    font-size: 12px; font-weight: 700;
    line-height: 1.55;
  }
  .pos-card-items .pos-item-qty {
    color: var(--lemon-500);
    font-weight: 900;
    min-width: 18px;
  }
  .pos-card-items .pos-item-name { color: var(--ink-900); }
  .pos-card-items .pos-item-note {
    font-size: 11px; opacity: 0.65; font-weight: 600;
  }

  /* The checklist itself — sits above the gloss highlight */
  .pos-checklist {
    display: flex; flex-direction: column; gap: 5px;
    position: relative;
    z-index: 2;
  }
  .pos-check-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 11px;
    cursor: pointer;
    user-select: none;
    background: var(--cream);
    transition: background .12s, transform .08s;
  }
  .pos-check-row:active { transform: scale(0.985); }
  /* Active step (next thing to do) — yellow highlight */
  .pos-check-row.active {
    background: var(--lemon-400);
  }
  /* Done — green low-key */
  .pos-check-row.done {
    background: rgba(34,197,94,0.10);
  }
  .pos-check-box {
    width: 22px; height: 22px;
    border-radius: 7px;
    border: 1.5px solid var(--ink-900);
    background: white;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s;
  }
  .pos-check-row.active .pos-check-box {
    border-color: var(--ink-900);
    background: white;
  }
  .pos-check-row.done .pos-check-box {
    background: var(--success-500);
    border-color: var(--success-500);
    color: white;
    font-size: 13px; font-weight: 900;
    line-height: 1;
  }
  .pos-check-label {
    flex: 1;
    font-size: 12px; font-weight: 800;
    color: var(--ink-900);
    letter-spacing: 0.01em;
  }
  .pos-check-row.done .pos-check-label {
    text-decoration: line-through;
    text-decoration-color: rgba(22,101,52,0.4);
    color: var(--success-600);
  }
  .pos-check-hint {
    font-size: 10px; font-weight: 800;
    opacity: 0.65;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .pos-check-row.done .pos-check-hint {
    color: var(--success-600);
    opacity: 0.7;
  }

  /* Done banner inside complete card */
  .pos-card-done-banner {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(34,197,94,0.18);
    border-radius: 9px;
    font-size: 10px; font-weight: 900;
    color: var(--success-600);
    letter-spacing: 0.05em;
  }
  .pos-card-archive-btn {
    background: transparent;
    border: none;
    color: var(--success-600);
    font-size: 10px; font-weight: 900;
    cursor: pointer; font-family: inherit;
    padding: 2px 8px;
    letter-spacing: 0.05em;
  }

  /* ═══════════════════════ CASH CALCULATOR SHEET ═══════════════════════ */
  .cash-sheet {
    position: absolute; inset: 0;
    z-index: 600;
    display: none;
  }
  .cash-sheet.show { display: block; }
  .cash-sheet-back {
    position: absolute; inset: 0;
    background: rgba(28,25,23,0.5);
    backdrop-filter: blur(4px);
    animation: cash-fade-in .18s ease-out;
  }
  @keyframes cash-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .cash-sheet-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: white;
    border-radius: 22px 22px 0 0;
    padding: 8px 18px 22px 18px;
    box-shadow: 0 -16px 40px -8px rgba(0,0,0,0.18);
    animation: cash-slide-up .22s cubic-bezier(.2,.8,.3,1.05);
  }
  @keyframes cash-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .cash-sheet-handle {
    width: 40px; height: 4px;
    background: var(--line-2);
    border-radius: 2px;
    margin: 4px auto 14px;
  }
  .cash-sheet-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 14px;
  }
  .cash-sheet-cap {
    font-size: 10px; font-weight: 900;
    opacity: 0.55;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .cash-sheet-amt {
    font-size: 13px; font-weight: 800;
  }
  .cash-sheet-amt .tabular {
    font-size: 22px; font-weight: 900;
    letter-spacing: -0.02em;
    margin-left: 4px;
  }
  .cash-sheet-close {
    width: 30px; height: 30px;
    border: none; background: var(--cream);
    border-radius: 9px;
    font-size: 18px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    color: var(--ink-700);
    line-height: 1;
  }
  .cash-sheet-section-cap {
    font-size: 9px; font-weight: 900;
    opacity: 0.55;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    margin-top: 4px;
  }
  .cash-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  }
  .cash-quick {
    background: var(--cream);
    border: 1.5px solid transparent;
    padding: 12px 8px;
    border-radius: 12px;
    font-size: 13px; font-weight: 900;
    cursor: pointer; font-family: inherit;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
    transition: background .1s, border-color .1s, transform .08s;
  }
  .cash-quick:active { transform: scale(0.96); }
  .cash-quick.active {
    background: var(--lemon-100);
    border-color: var(--lemon-400);
  }
  .cash-input-wrap {
    display: flex; align-items: center;
    background: var(--cream);
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 0 14px;
    margin-bottom: 16px;
    transition: border-color .12s;
  }
  .cash-input-wrap:focus-within { border-color: var(--lemon-400); background: white; }
  .cash-input-prefix {
    font-size: 14px; font-weight: 800;
    opacity: 0.55;
    margin-right: 6px;
  }
  .cash-input {
    flex: 1;
    border: none; background: transparent;
    padding: 12px 0;
    font-size: 16px; font-weight: 800;
    font-family: inherit; outline: none;
    color: var(--ink-900);
  }
  .cash-change-row {
    display: flex; justify-content: space-between; align-items: baseline;
    background: var(--ink-900);
    color: white;
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 14px;
  }
  .cash-change-cap {
    font-size: 11px; font-weight: 800;
    opacity: 0.7;
    letter-spacing: 0.08em;
  }
  .cash-change-amt {
    font-size: 26px; font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--lemon-400);
  }
  .cash-change-amt.negative { color: var(--danger-500); opacity: 0.85; }
  .cash-confirm {
    width: 100%;
    background: var(--success-500); color: white;
    border: none;
    padding: 15px;
    border-radius: 14px;
    font-size: 14px; font-weight: 900;
    cursor: pointer; font-family: inherit;
    letter-spacing: 0.04em;
    transition: background .12s, transform .08s;
  }
  .cash-confirm:active {
    background: var(--success-600);
    transform: scale(0.98);
  }
  .cash-confirm:disabled {
    background: var(--line-2); color: var(--ink-500);
    cursor: not-allowed;
  }

  /* ═══════════════════════ WALK-IN CHECKOUT SHEETS ═══════════════════════
   * Shown when merchant taps "ต่อ" on the cart bar. Reuses cash-sheet
   * structure (same backdrop, slide-up animation, handle, header) but with
   * its own method-list body. Picking a method either commits directly
   * (defer) or hands off to cashSheet/walkinQrSheet for further input. */
  .checkout-sheet, .qr-sheet {
    position: absolute; inset: 0;
    z-index: 600;
    display: none;
  }
  .checkout-sheet.show, .qr-sheet.show { display: block; }
  .checkout-sheet-back, .qr-sheet-back {
    position: absolute; inset: 0;
    background: rgba(28,25,23,0.5);
    backdrop-filter: blur(4px);
    animation: cash-fade-in .18s ease-out;
  }
  .checkout-sheet-body, .qr-sheet-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: white;
    border-radius: 22px 22px 0 0;
    padding: 8px 18px 22px 18px;
    box-shadow: 0 -16px 40px -8px rgba(0,0,0,0.18);
    animation: cash-slide-up .22s cubic-bezier(.2,.8,.3,1.05);
  }
  .checkout-sheet-head, .qr-sheet-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 18px;
  }
  .checkout-sheet-cap, .qr-sheet-cap {
    font-size: 10px; font-weight: 900;
    opacity: 0.55;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .checkout-sheet-amt, .qr-sheet-amt {
    font-size: 13px; font-weight: 800;
  }
  .checkout-sheet-amt .tabular, .qr-sheet-amt .tabular {
    font-size: 22px; font-weight: 900;
    letter-spacing: -0.02em;
    margin-left: 4px;
  }
  .checkout-sheet-close, .qr-sheet-close {
    width: 30px; height: 30px;
    border: none; background: var(--cream);
    border-radius: 50%;
    font-size: 18px; font-weight: 900;
    cursor: pointer;
    line-height: 1;
  }

  /* Method buttons · stacked vertical · full width · clear icon + text */
  .checkout-method-list {
    display: flex; flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
  }
  .checkout-method {
    display: flex; align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: white;
    border: 2px solid var(--ink-900);
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: transform .1s, background .12s;
    box-shadow: 0 2px 0 var(--ink-900);
  }
  .checkout-method:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--ink-900);
  }
  .checkout-method.primary {
    background: linear-gradient(180deg, #FFE066 0%, #F5C518 100%);
  }
  .checkout-method.ghost {
    background: var(--cream);
    border-color: var(--line-2);
    box-shadow: 0 2px 0 var(--line-2);
  }
  .checkout-method-ic {
    font-size: 24px;
    flex-shrink: 0;
  }
  .checkout-method-text { flex: 1; min-width: 0; }
  .checkout-method-name {
    font-size: 14px; font-weight: 900;
    color: var(--ink-900);
    margin-bottom: 2px;
  }
  .checkout-method-desc {
    font-size: 11px; font-weight: 600;
    color: var(--ink-700, #44403c);
    opacity: 0.7;
  }
  .checkout-method-arrow {
    font-size: 18px; font-weight: 900;
    color: var(--ink-900);
    opacity: 0.5;
    flex-shrink: 0;
  }

  /* QR display sheet · centered QR image + "ลูกค้าจ่ายแล้ว" confirm */
  .qr-sheet-image-wrap {
    width: 220px; height: 220px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: white;
    border: 2px solid var(--ink-900);
    padding: 10px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .qr-sheet-image {
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .qr-sheet-image-wrap svg { width: 100%; height: 100%; }
  .qr-sheet-placeholder {
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-700);
    line-height: 1.6;
  }
  .qr-sheet-payee {
    text-align: center;
    font-size: 13px; font-weight: 900;
    margin-bottom: 4px;
  }
  .qr-sheet-hint {
    text-align: center;
    font-size: 11px; font-weight: 600;
    opacity: 0.6;
    margin-bottom: 16px;
  }
  .qr-sheet-confirm {
    width: 100%;
    background: var(--success-500); color: white;
    border: none;
    padding: 15px;
    border-radius: 14px;
    font-size: 14px; font-weight: 900;
    cursor: pointer; font-family: inherit;
    letter-spacing: 0.04em;
    transition: background .12s, transform .08s;
  }
  .qr-sheet-confirm:active {
    background: var(--success-600);
    transform: scale(0.98);
  }

/* ═══════════════════════════════════════════════════════════════════
 * CUSTOMER-END · 7 SCREENS + MODIFIER SHEET
 * What customers see after scanning the merchant's QR. Visually distinct
 * from the merchant chrome — softer, taller cards, more breathing room —
 * but still on-brand (lemon yellow, ink, cream).
 * ═══════════════════════════════════════════════════════════════════ */

/* All cust-screens get a faint lemon wash so they feel like a different
 * "app" than the merchant side. Subtle — not alarming. */
.cust-screen {
  background:
    radial-gradient(circle at 20% 0%, rgba(245,197,24,0.10), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(245,197,24,0.06), transparent 60%),
    var(--cream-50);
  /* OVERRIDE `.screen { overflow-y:auto }` — for customer screens, the screen
   * itself does NOT scroll. Instead the inner body (cust-menu-grid,
   * cust-cart-list, cust-*-body) is the scroll container. This keeps the
   * cart bar / foot pinned at the bottom of the visible viewport instead of
   * floating off with content (which is what `position: absolute` inside a
   * scroll parent does — known browser quirk). */
  overflow: hidden;
}

/* ─── HEADER (shared by inner cust screens) ─── */
.cust-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 14px;
  position: sticky; top: 0; z-index: 5;
  background: rgba(250,248,240,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(28,25,23,0.06);
  /* Critical · the parent .screen is `display:flex; flex-direction:column;
   * overflow-y:auto`. Without an explicit flex-shrink:0, browsers compress
   * fixed-height chrome when total content exceeds the screen — that's what
   * caused the cust-menu category strip to collapse on top of itself. */
  flex-shrink: 0;
}
.cust-head .back-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 12px;
  background: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px -1px rgba(28,25,23,0.08), inset 0 0 0 1px rgba(28,25,23,0.06);
  cursor: pointer; transition: transform .08s;
}
.cust-head .back-btn:active { transform: scale(0.94); }
.cust-head-title { flex: 1; min-width: 0; }
.cust-head-main, .cust-menu-shop {
  font-size: 16px; font-weight: 900; color: var(--ink-900);
  letter-spacing: -0.01em;
}
.cust-head-sub {
  font-size: 11px; font-weight: 700; color: var(--ink-500);
  margin-top: 1px;
}

/* ─── CUST-SHOP · LANDING ─── */
.cust-hero {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  flex-shrink: 0;
}
.cust-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,223,84,0.85), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(255,193,7,0.45), transparent 60%),
    linear-gradient(135deg, #FFE082 0%, #F5C518 100%);
}
.cust-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 15%, rgba(255,255,255,0.35) 0, transparent 8%),
    radial-gradient(circle at 88% 30%, rgba(255,255,255,0.25) 0, transparent 6%),
    radial-gradient(circle at 65% 85%, rgba(255,255,255,0.20) 0, transparent 7%);
}
.cust-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 22px 22px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.cust-shop-logo {
  width: 78px; height: 78px;
  border-radius: 26px;
  background: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 14px 28px -8px rgba(28,25,23,0.30),
    0 6px 12px -3px rgba(28,25,23,0.18),
    inset 0 0 0 4px rgba(255,255,255,1);
  margin-bottom: 12px;
}
.cust-shop-logo .logo-mark {
  font-size: 38px;
  font-weight: 900;
  color: var(--ink-900);
}
.cust-shop-name {
  font-size: 22px; font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cust-shop-tagline {
  font-size: 12px; font-weight: 700;
  color: var(--ink-700);
  margin-top: 4px;
  opacity: 0.8;
}
.cust-shop-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  margin-top: 12px;
  background: white;
  box-shadow: 0 2px 6px -2px rgba(28,25,23,0.15);
}
.cust-shop-status.open {
  color: var(--success-700, #15803d);
}
.cust-shop-status.closed {
  color: var(--danger-600, #dc2626);
}
.cust-shop-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: cust-pulse 2s ease-in-out infinite;
}
@keyframes cust-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.cust-shop-info {
  margin: 18px 18px 0;
  background: white;
  border-radius: 22px;
  padding: 4px 16px;
  box-shadow: 0 2px 8px -2px rgba(28,25,23,0.08), inset 0 0 0 1px rgba(28,25,23,0.04);
  flex-shrink: 0;
}
.cust-shop-info-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(28,25,23,0.08);
}
.cust-shop-info-row:last-child { border-bottom: none; }
.cust-shop-info-ic {
  font-size: 22px; flex-shrink: 0;
  width: 36px; text-align: center;
}
.cust-shop-info-text { flex: 1; min-width: 0; }
.cust-shop-info-cap {
  font-size: 10px; font-weight: 800;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cust-shop-loc, .cust-shop-hours {
  font-size: 13px; font-weight: 800;
  color: var(--ink-900);
  margin-top: 2px;
}

.cust-shop-cta-wrap {
  padding: 22px 18px 0;
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.cust-shop-cta {
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  background: var(--ink-900);
  color: var(--lemon-500, #F5C518);
  font-size: 15px; font-weight: 900;
  letter-spacing: -0.005em;
  border: none; cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(28,25,23,0.45);
  transition: transform .1s, box-shadow .15s;
}
.cust-shop-cta:active {
  transform: scale(0.985) translateY(1px);
  box-shadow: 0 4px 12px -4px rgba(28,25,23,0.45);
}
.cust-shop-cta.disabled {
  background: var(--ink-300, #d6d3d1); color: var(--ink-600);
  cursor: not-allowed;
  box-shadow: none;
}
.cust-shop-cart-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--lemon-100, #FFF4D1);
  border-radius: 14px;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--lemon-300, #F5D86F);
}
.cust-pill-cap { color: var(--ink-700); }
.cust-pill-amt { color: var(--ink-900); font-size: 14px; font-weight: 900; }

/* Active order pill on cust-shop · shown when there's an in-flight order
 * (custOrderId set, not delivered). Lets the customer return to the status
 * page from the landing screen — solves the "where's my order I just
 * placed" complaint. Visually bolder than the cart pill (dark+lemon) to
 * read as "active state" not "drafting". */
.cust-shop-active-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--ink-900);
  color: white;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(28,25,23,0.4);
  gap: 10px;
  transition: transform .12s;
}
/* Stacked-pill spacing · when there are multiple active orders, give each
 * pill its own breathing room. The first pill (most-recent) keeps its
 * default position; subsequent pills get a small top margin. */
.cust-shop-active-pill + .cust-shop-active-pill { margin-top: 8px; }
.cust-shop-active-pill:active { transform: scale(0.985); }
.cust-shop-active-left { flex: 1; min-width: 0; }
.cust-shop-active-cap {
  font-size: 9.5px; font-weight: 700;
  color: var(--lemon-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cust-shop-active-name {
  font-size: 14px; font-weight: 900;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cust-shop-active-right { text-align: right; flex-shrink: 0; }
.cust-shop-active-status {
  font-size: 11px; font-weight: 800;
  color: var(--lemon-400);
  margin-bottom: 2px;
}
.cust-shop-active-go {
  font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}

.cust-shop-foot {
  padding: 24px 18px 20px;
  text-align: center;
  /* Push to bottom of column flow (after content). flex-shrink:0 keeps the
   * brand line readable even when above content is tall. */
  margin-top: auto;
  flex-shrink: 0;
}
.cust-shop-back-merchant {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800;
  color: var(--ink-500);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(28,25,23,0.04);
  margin-bottom: 10px;
}
.cust-shop-brand {
  font-size: 9px; font-weight: 700;
  color: var(--ink-400, #a8a29e);
  letter-spacing: 0.03em;
}

/* ─── CUST-MENU · BROWSE ─── */
.cust-menu-search-wrap {
  position: relative;
  margin: 14px 18px 12px;
  flex-shrink: 0; /* prevent compression in column flex */
}
.cust-menu-search-wrap input {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(28,25,23,0.08);
  font-size: 13px; font-weight: 700;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cust-menu-search-wrap input:focus {
  border-color: var(--lemon-500);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.18);
}
.cust-menu-search-ic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-500);
  pointer-events: none;
}

.cust-cats {
  display: flex; gap: 8px;
  padding: 4px 18px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: center;
  /* Without an explicit min-height, the flex column can collapse this strip
   * to a few pixels and the pills end up overlapping each other visually.
   * 44px = pill height (≈30px) + container padding (14px). */
  min-height: 48px;
  flex-shrink: 0;
}
.cust-cats::-webkit-scrollbar { display: none; }
/* Explicit pill styling for the customer side — distinct from merchant
 * `.cat-pill` defaults so the customer chrome reads "softer + cleaner".
 * Inherits the merchant base if not overridden, but here we override
 * everything visual to avoid surprise inheritance. */
.cust-cats .cat-pill {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: white;
  color: var(--ink-700);
  border: 1px solid rgba(28,25,23,0.08);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s, transform .08s;
}
.cust-cats .cat-pill:active { transform: scale(0.96); }
.cust-cats .cat-pill.active {
  background: var(--ink-900);
  color: var(--lemon-500);
  border-color: var(--ink-900);
}

.cust-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 18px 18px; /* cart bar is now a normal sibling, no extra room needed */
  flex: 1 1 auto;
  align-content: start;
  /* Body is the scroll container (replaces .screen overflow:auto for cust). */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0; /* required for flex item to actually shrink + scroll */
}
.cust-menu-item {
  position: relative;
  background: white;
  border-radius: 18px;
  padding: 12px;
  display: flex; flex-direction: column;
  cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(28,25,23,0.08), inset 0 0 0 1px rgba(28,25,23,0.04);
  transition: transform .1s, box-shadow .15s;
}
.cust-menu-item:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px -1px rgba(28,25,23,0.10);
}
.cust-menu-item.has-qty {
  box-shadow:
    0 2px 10px -2px rgba(245,197,24,0.45),
    inset 0 0 0 2px var(--lemon-500);
}
.cust-menu-item.sold-out {
  opacity: 0.5;
  pointer-events: auto; /* still tappable to show toast */
}
.cust-menu-item.sold-out .cust-menu-img {
  filter: grayscale(0.85);
}
.cust-qty-badge {
  position: absolute; top: -6px; right: -6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink-900); color: var(--lemon-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
  box-shadow: 0 4px 8px -2px rgba(28,25,23,0.35);
  z-index: 2;
}
.cust-stock-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 8px;
  font-size: 9px; font-weight: 900;
  background: var(--lemon-100, #FFF4D1); color: var(--ink-900);
  z-index: 2;
}
.cust-stock-badge.out {
  background: var(--danger-100, #fee2e2);
  color: var(--danger-700, #b91c1c);
}
.cust-menu-img {
  background: var(--cream-100, #F0EDE2);
  border-radius: 12px;
  height: 100px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
}
.cust-menu-img img { width: 100%; height: 100%; object-fit: cover; }
.cust-menu-name {
  font-size: 12px; font-weight: 900;
  color: var(--ink-900);
  line-height: 1.25;
}
.cust-menu-desc {
  font-size: 10px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 3px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cust-menu-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
}
.cust-menu-price {
  font-size: 14px; font-weight: 900;
  color: var(--ink-900);
}
.cust-menu-opts {
  font-size: 10px; font-weight: 800;
  color: var(--ink-500);
}
.cust-menu-add {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--lemon-500);
  color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900;
  line-height: 0;
}

/* Cart pill — sibling of the (scrollable) menu grid. With overflow:hidden
 * on .cust-screen and flex column layout, this stays naturally pinned at
 * the bottom of the visible viewport without any positioning tricks. */
.cust-menu-cart-bar {
  display: none; /* hidden by default; .show toggles to flex */
  align-items: center;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 12px 14px;
  background: var(--ink-900); color: white;
  border-radius: 16px;
  box-shadow: 0 12px 28px -8px rgba(28,25,23,0.55);
  flex-shrink: 0;
  z-index: 4;
}
.cust-menu-cart-bar.show { display: flex; }
.cust-cart-info { flex: 1; min-width: 0; }
.cust-cart-cap {
  font-size: 10px; font-weight: 800;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cust-cart-tot {
  font-size: 16px; font-weight: 900;
  color: var(--lemon-500);
  margin-top: 1px;
}
.cust-cart-go {
  background: var(--lemon-500); color: var(--ink-900);
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px; font-weight: 900;
  cursor: pointer;
  transition: transform .08s;
}
.cust-cart-go:active { transform: scale(0.96); }

/* ─── CUST-CART · REVIEW ─── */
.cust-cart-empty {
  text-align: center;
  padding: 80px 30px 40px;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.cust-cart-empty-ic {
  font-size: 60px;
  filter: grayscale(0.3);
  margin-bottom: 12px;
}
.cust-cart-empty-title {
  font-size: 16px; font-weight: 900; color: var(--ink-900);
}
.cust-cart-empty-sub {
  font-size: 12px; font-weight: 700; color: var(--ink-500);
  margin-top: 4px;
}
.cust-cart-list {
  padding: 8px 18px 14px;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.cust-cart-row {
  display: flex; gap: 12px;
  background: white;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px -2px rgba(28,25,23,0.06), inset 0 0 0 1px rgba(28,25,23,0.04);
  position: relative;
}
.cust-cart-row-img {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--cream-100, #F0EDE2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cust-cart-row-img img { width: 100%; height: 100%; object-fit: cover; }
.cust-cart-row-info { flex: 1; min-width: 0; }
.cust-cart-row-name {
  font-size: 13px; font-weight: 900; color: var(--ink-900);
  line-height: 1.2;
}
.cust-cart-row-mods {
  font-size: 10px; font-weight: 700;
  color: var(--ink-600);
  margin-top: 3px;
  line-height: 1.3;
}
.cust-cart-row-note {
  font-size: 10px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 2px;
  font-style: italic;
}
.cust-cart-row-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
}
.cust-cart-qty {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream-100, #F0EDE2);
  border-radius: 999px;
  padding: 3px 4px;
}
.cust-cart-qty span {
  min-width: 22px; text-align: center;
  font-size: 13px; font-weight: 900;
  color: var(--ink-900);
}
.cust-cart-qty-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: white;
  color: var(--ink-900);
  border: none;
  font-size: 14px; font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px -1px rgba(28,25,23,0.15);
  transition: transform .08s;
}
.cust-cart-qty-btn:active { transform: scale(0.9); }
.cust-cart-row-price {
  font-size: 14px; font-weight: 900;
  color: var(--ink-900);
}
.cust-cart-row-del {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--ink-500);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.5;
  transition: opacity .12s, background .12s;
}
.cust-cart-row-del:hover {
  opacity: 1;
  background: var(--danger-100, #fee2e2);
  color: var(--danger-700, #b91c1c);
}

.cust-cart-foot, .cust-info-foot, .cust-pay-foot, .cust-receipt-foot {
  /* Normal flow flex sibling — pinned at end of column because preceding
   * body has flex:1 and consumes remaining space. No more position:absolute
   * (which scrolled with content in the previous broken architecture). */
  flex-shrink: 0;
  background: rgba(250,248,240,0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 18px 24px;
  border-top: 1px solid rgba(28,25,23,0.08);
  z-index: 3;
}
.cust-cart-summary {
  margin-bottom: 12px;
}
.cust-cart-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; font-weight: 900;
  color: var(--ink-900);
}
.cust-cart-summary-row .currency {
  font-size: 12px; opacity: 0.6;
}
.cust-cart-summary-row .tabular {
  font-size: 18px;
}
.cust-cart-summary-hint {
  font-size: 10px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 4px;
}

/* Shared CTA buttons */
.cust-info-cta {
  width: 100%;
  padding: 15px;
  border-radius: 16px;
  background: var(--ink-900); color: var(--lemon-500);
  font-size: 14px; font-weight: 900;
  border: none; cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(28,25,23,0.45);
  transition: transform .1s, box-shadow .15s;
}
.cust-info-cta:active {
  transform: scale(0.985);
  box-shadow: 0 4px 12px -4px rgba(28,25,23,0.45);
}
.cust-info-cta-ghost {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  background: white;
  color: var(--ink-900);
  font-size: 13px; font-weight: 900;
  border: 1px solid rgba(28,25,23,0.10);
  cursor: pointer;
  transition: transform .08s, background .12s;
}
.cust-info-cta-ghost:active {
  transform: scale(0.985);
  background: var(--cream-100, #F0EDE2);
}

/* ─── CUST-INFO · NAME / PHONE / PICKUP ─── */
.cust-info-body {
  padding: 16px 18px 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.cust-info-section {
  margin-bottom: 18px;
}
.cust-info-label {
  display: block;
  font-size: 12px; font-weight: 800;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.cust-info-input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(28,25,23,0.08);
  font-size: 14px; font-weight: 700;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cust-info-input:focus {
  border-color: var(--lemon-500);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.18);
}

/* Lemon nickname picker · gradient yellow card with the assigned nickname
 * front and center, plus a dice button to re-roll. The hint below is small
 * gray text that explains what the picker is. This block REPLACES the
 * old free-text "ชื่อ" input — Lemon's signature is to assign fun nicknames. */
.cust-info-nick {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #FFF4C9 0%, #FCD647 100%);
  border: 2px solid var(--ink-900);
  border-radius: 18px;
  padding: 14px 14px 14px 16px;
  box-shadow: 0 3px 0 var(--ink-900), 0 6px 14px -4px rgba(245,197,24,0.4);
}
.cust-info-nick-prefix {
  font-size: 13px; font-weight: 800;
  color: var(--ink-700); letter-spacing: -0.01em;
  flex-shrink: 0;
}
.cust-info-nick-name {
  flex: 1;
  font-size: 19px; font-weight: 900;
  color: var(--ink-900); letter-spacing: -0.02em;
  line-height: 1.1;
  /* Big nickname might wrap or be long — allow wrapping but keep neat */
  word-break: break-word;
}
.cust-info-nick-reroll {
  background: var(--ink-900);
  color: white;
  width: 38px; height: 38px;
  border-radius: 12px;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .12s, background .12s;
  border: none;
  box-shadow: 0 2px 0 #000;
}
.cust-info-nick-reroll:active {
  transform: translateY(1px) rotate(180deg);
  box-shadow: 0 1px 0 #000;
}
.cust-info-nick-hint {
  font-size: 10.5px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 8px;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.cust-info-pickup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cust-info-pickup-chip {
  background: white;
  border: 2px solid rgba(28,25,23,0.08);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, transform .1s, background .15s;
}
.cust-info-pickup-chip:active { transform: scale(0.97); }
.cust-info-pickup-chip.active {
  border-color: var(--ink-900);
  background: var(--lemon-100, #FFF4D1);
}
.cust-info-pickup-ic {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}
.cust-info-pickup-cap {
  font-size: 13px; font-weight: 900;
  color: var(--ink-900);
}
.cust-info-pickup-sub {
  font-size: 10px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 2px;
}
.cust-info-tot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
  font-size: 13px; font-weight: 800;
  color: var(--ink-700);
}
.cust-info-tot .tabular {
  font-size: 18px; font-weight: 900;
  color: var(--ink-900);
}

/* ─── CUST-PAY · PROMPTPAY QR ─── */
.cust-pay-body {
  padding: 14px 18px 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.cust-pay-card {
  background: white;
  border-radius: 22px;
  padding: 22px 18px 18px;
  box-shadow: 0 4px 12px -3px rgba(28,25,23,0.10), inset 0 0 0 1px rgba(28,25,23,0.05);
  position: relative;
  overflow: hidden;
}
.cust-pay-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #003D6B 0%, #2196F3 50%, #003D6B 100%);
}
.cust-pay-brand {
  text-align: center;
  font-size: 11px; font-weight: 900;
  color: #003D6B;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cust-pay-amt-wrap {
  text-align: center;
  margin: 8px 0 18px;
}
.cust-pay-amt-cap {
  font-size: 11px; font-weight: 800;
  color: var(--ink-500);
}
.cust-pay-amt-big {
  font-size: 40px; font-weight: 900;
  color: var(--ink-900);
  line-height: 1.1;
  margin-top: 2px;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.cust-pay-amt-big .currency {
  font-size: 22px; opacity: 0.6;
}
.cust-pay-qr-wrap {
  display: flex; justify-content: center;
  padding: 18px 0;
}
.cust-pay-qr {
  background: var(--cream-50);
  border: 8px solid var(--cream-50);
  border-radius: 12px;
  box-shadow: 0 4px 12px -3px rgba(28,25,23,0.20);
}
.cust-pay-recv {
  text-align: center;
  padding: 14px 0 12px;
  border-top: 1px dashed rgba(28,25,23,0.10);
}
.cust-pay-recv-cap {
  font-size: 10px; font-weight: 800;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.cust-pay-acct {
  font-size: 13px; font-weight: 900;
  color: var(--ink-900);
}
.cust-pay-num {
  font-size: 14px; font-weight: 900;
  color: var(--ink-900);
  margin-top: 2px;
}
.cust-pay-bank {
  font-size: 11px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 2px;
}
.cust-pay-meta {
  display: flex; justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed rgba(28,25,23,0.10);
  font-size: 11px; font-weight: 800;
  color: var(--ink-700);
}
.cust-pay-tip {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--lemon-100, #FFF4D1);
  border-radius: 14px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-700);
  line-height: 1.5;
}
.cust-pay-tip-ic { font-size: 16px; flex-shrink: 0; }
.cust-pay-cash-btn {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  background: white;
  color: var(--ink-900);
  font-size: 12px; font-weight: 900;
  border: 1px solid rgba(28,25,23,0.10);
  cursor: pointer;
  margin-bottom: 8px;
  transition: background .12s;
}
.cust-pay-cash-btn:active { background: var(--cream-100, #F0EDE2); }

/* ─── CUST-RECAP · cart summary shown on cust-info + cust-pay ───
 * Compact card so the customer can SEE what they're ordering at every
 * step of the flow. Sits at the top of the body in both screens. */
.cust-recap {
  background: white;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px -2px rgba(28,25,23,0.06);
}
.cust-recap:empty { display: none; } /* hide entirely when cart is empty */
.cust-recap-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.cust-recap-cap {
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--ink-900);
  display: inline-flex; align-items: center; gap: 6px;
}
.cust-recap-count {
  font-weight: 600;
  font-size: 11px;
  opacity: 0.55;
}
.cust-recap-edit {
  background: transparent;
  border: 1px solid rgba(28,25,23,0.15);
  color: var(--ink-900);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.cust-recap-edit:active { background: rgba(28,25,23,0.06); }
.cust-recap-body {
  border-top: 1px dashed rgba(28,25,23,0.10);
  padding-top: 8px;
}
.cust-recap-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 4px 0;
  font-size: 13px;
  gap: 10px;
}
.cust-recap-row-main { flex: 1; min-width: 0; }
.cust-recap-name { font-weight: 700; color: var(--ink-900); }
.cust-recap-mods {
  font-size: 11px;
  opacity: 0.55;
  margin-top: 2px;
}
.cust-recap-qty {
  font-weight: 700;
  color: var(--ink-900);
  flex-shrink: 0;
}
.cust-recap-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(28,25,23,0.10);
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
}

/* ─── CUST-VERIFY · payment-checking overlay ───
 * Shown for ~2.5s after the customer taps "ฉันจ่ายแล้ว" on QR. Fakes the
 * latency a real bank-webhook integration would have — answers the user's
 * question "shopee รู้ได้ไงว่าจ่ายแล้ว?" with: it doesn't trust the click,
 * it waits for the bank to confirm. We're prototyping the timing here. */
.cust-verify-overlay {
  position: absolute; inset: 0;
  background: rgba(28,25,23,0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  border-radius: 48px; /* match phone-screen radius so the blur respects the curve */
  animation: cust-verify-fade .2s ease-out;
}
.cust-verify-overlay.show { display: flex; }
@keyframes cust-verify-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cust-verify-card {
  background: white;
  border-radius: 24px;
  padding: 26px 28px 22px;
  text-align: center;
  width: 280px;
  box-shadow: 0 30px 60px -10px rgba(0,0,0,0.45);
}
.cust-verify-spinner {
  font-size: 44px;
  display: inline-block;
  animation: cust-verify-spin 1.2s linear infinite;
}
@keyframes cust-verify-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.cust-verify-title {
  font-size: 16px; font-weight: 900;
  margin-top: 12px;
  letter-spacing: -0.01em;
}
.cust-verify-sub {
  font-size: 12px; opacity: 0.55;
  margin-top: 4px;
}
.cust-verify-bar {
  margin-top: 16px;
  height: 4px;
  background: rgba(28,25,23,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.cust-verify-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lemon-400, #F5C518), var(--lemon-500, #DAA50F));
  width: 0;
  animation: cust-verify-fill 2.5s ease-out forwards;
}
@keyframes cust-verify-fill {
  from { width: 0; }
  to   { width: 100%; }
}

/* ─── CUST-STATUS · TRACKING ─── */
.cust-status-body {
  padding: 14px 18px 30px;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.cust-status-card {
  background: white;
  border-radius: 22px;
  padding: 22px 18px;
  box-shadow: 0 4px 12px -3px rgba(28,25,23,0.10), inset 0 0 0 1px rgba(28,25,23,0.04);
  text-align: center;
  margin-bottom: 18px;
}
/* Lemon nickname is now the headline of the status card · order# is below
 * as a small reference. This is the customer's "what to listen for" line:
 * "they'll call me คุณ ปลาเบ๋อเริ่ม" reads better than "Order 0443". */
.cust-status-nick-cap {
  font-size: 11px; font-weight: 800;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.cust-status-nickname {
  font-size: 26px; font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.cust-status-id {
  /* Demoted to a small secondary line · was the headline before nickname
   * took over. Stays so that customer can quote "#1234" on the phone if
   * something goes wrong. */
  font-size: 11px; font-weight: 700;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.cust-status-shop {
  font-size: 12px; font-weight: 800;
  color: var(--ink-500);
  margin-top: 2px;
}
.cust-status-eta {
  margin: 14px auto 6px;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--lemon-100, #FFF4D1);
  font-size: 13px; font-weight: 900;
  color: var(--ink-900);
}
.cust-status-eta.ready {
  background: #DCFCE7;
  color: #15803d;
}
/* Manual-verification waiting state · "ทางร้านกำลังเช็คเงิน" — distinct
 * blue tint so customer doesn't confuse it with normal cooking ETA. */
.cust-status-eta.info {
  background: #DBEAFE;
  color: #1e40af;
}
.cust-status-stages {
  display: flex; align-items: center;
  margin-top: 18px;
  padding: 0 4px;
}
.cust-stage {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cust-stage-bar {
  flex: 1; height: 2px;
  background: var(--cream-200, #E8E3D0);
  margin: 0 2px;
  position: relative; top: -10px;
  border-radius: 999px;
}
.cust-stage-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cream-200, #E8E3D0);
  color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
  transition: background .25s, color .25s, transform .25s;
}
.cust-stage.done .cust-stage-dot {
  background: var(--ink-900);
  color: var(--lemon-500);
}
.cust-stage.active .cust-stage-dot {
  background: var(--lemon-500);
  color: var(--ink-900);
  animation: cust-stage-bounce 1.2s ease-in-out infinite;
}
@keyframes cust-stage-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.cust-stage-label {
  font-size: 9px; font-weight: 800;
  color: var(--ink-700);
  white-space: nowrap;
}
.cust-stage.done .cust-stage-label {
  color: var(--ink-900);
}

.cust-status-section-cap {
  font-size: 10px; font-weight: 900;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 0 8px;
}
.cust-status-items {
  background: white;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: inset 0 0 0 1px rgba(28,25,23,0.04);
  font-size: 12px; font-weight: 700;
  color: var(--ink-700);
  line-height: 1.7;
}
.cust-status-total {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--lemon-100, #FFF4D1);
  border-radius: 14px;
  font-size: 13px; font-weight: 900;
  color: var(--ink-900);
}
.cust-status-total .tabular { font-size: 16px; }
.cust-status-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

/* ─── CUST-RECEIPT · DIGITAL RECEIPT ─── */
.cust-receipt-body {
  padding: 14px 18px 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.cust-rcpt-paper {
  background: white;
  border-radius: 14px;
  padding: 22px 18px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  position: relative;
  box-shadow: 0 6px 18px -6px rgba(28,25,23,0.18);
}
.cust-rcpt-paper::before, .cust-rcpt-paper::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 14px;
  background-image: radial-gradient(circle at 8px 0, transparent 6px, white 6.5px);
  background-size: 16px 14px;
  background-repeat: repeat-x;
}
.cust-rcpt-paper::before { top: -14px; transform: rotate(180deg); }
.cust-rcpt-paper::after  { bottom: -14px; }
.cust-rcpt-shop {
  text-align: center;
  font-size: 16px; font-weight: 900;
  color: var(--ink-900);
}
.cust-rcpt-tagline {
  text-align: center;
  font-size: 10px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 2px;
}
.cust-rcpt-tax {
  text-align: center;
  font-size: 10px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 4px;
}
.cust-rcpt-line {
  border-top: 2px solid var(--ink-900);
  margin: 12px -2px;
}
.cust-rcpt-line.dotted {
  border-top: 1px dashed var(--ink-700);
}
.cust-rcpt-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700;
  color: var(--ink-900);
  margin: 4px 0;
}
.cust-rcpt-items { margin: 8px 0; }
.cust-rcpt-item {
  display: flex; gap: 10px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--ink-900);
}
.cust-rcpt-qty { flex-shrink: 0; min-width: 26px; font-weight: 900; }
.cust-rcpt-info { flex: 1; min-width: 0; font-weight: 700; }
.cust-rcpt-sub {
  font-size: 10px; opacity: 0.65;
  margin-top: 1px;
}
.cust-rcpt-price { flex-shrink: 0; font-weight: 900; }
.cust-rcpt-total {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 900;
  color: var(--ink-900);
  margin: 6px 0;
}
.cust-rcpt-total .tabular { font-size: 15px; }
.cust-rcpt-pay {
  text-align: center;
  font-size: 11px; font-weight: 800;
  color: var(--ink-700);
  padding: 8px 0;
}
.cust-rcpt-foot {
  text-align: center;
  font-size: 10px; font-weight: 700;
  color: var(--ink-700);
  margin-top: 12px;
  line-height: 1.6;
}
.cust-receipt-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
 * MODIFIER SHEET (shared between merchant new-order & customer menu)
 * ═══════════════════════════════════════════════════════════════════ */
.mod-sheet {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.mod-sheet.show { pointer-events: auto; }
.mod-sheet-back {
  position: absolute; inset: 0;
  background: rgba(28,25,23,0);
  transition: background .25s;
}
.mod-sheet.show .mod-sheet-back {
  background: rgba(28,25,23,0.50);
}
.mod-sheet-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  max-height: 88%;
  background: var(--cream-50, #FAF8F0);
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .85, .25, 1);
  box-shadow: 0 -8px 30px -8px rgba(28,25,23,0.40);
}
.mod-sheet.show .mod-sheet-body {
  transform: translateY(0);
}
.mod-sheet-handle {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: rgba(28,25,23,0.18);
  margin: 8px auto 0;
  flex-shrink: 0;
}
.mod-sheet-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(28,25,23,0.06);
  border: none;
  color: var(--ink-700);
  font-size: 22px; font-weight: 700;
  line-height: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .12s;
}
.mod-sheet-close:active { background: rgba(28,25,23,0.14); }
.mod-sheet-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px 18px;
}
.mod-hero {
  height: 130px;
  border-radius: 18px;
  background: var(--cream-100, #F0EDE2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  background-size: cover;
  background-position: center;
}
.mod-hero-emoji { font-size: 64px; }
.mod-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.mod-name {
  font-size: 18px; font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  flex: 1;
}
.mod-base-price {
  font-size: 18px; font-weight: 900;
  color: var(--ink-900);
}
.mod-desc {
  font-size: 12px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 4px;
  line-height: 1.4;
}
.mod-grp {
  margin-top: 16px;
  background: white;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 1px rgba(28,25,23,0.04);
}
.mod-grp-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.mod-grp-name {
  font-size: 13px; font-weight: 900;
  color: var(--ink-900);
  flex: 1;
}
.mod-grp-req {
  background: var(--ink-900); color: var(--lemon-500);
  font-size: 9px; font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mod-grp-hint {
  font-size: 10px; font-weight: 700;
  color: var(--ink-500);
}
.mod-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(28,25,23,0.05);
  cursor: pointer;
}
.mod-opt:first-of-type { border-top: none; }
.mod-opt input { margin: 0; cursor: pointer; }
.mod-opt input[type="radio"], .mod-opt input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--ink-900);
}
.mod-opt-name {
  flex: 1;
  font-size: 13px; font-weight: 700;
  color: var(--ink-900);
}
.mod-opt-price {
  font-size: 12px; font-weight: 900;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.mod-note-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cream-50);
  border: 1px solid rgba(28,25,23,0.08);
  font-size: 12px; font-weight: 700;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
  resize: none;
}
.mod-note-input:focus {
  border-color: var(--lemon-500);
}
.mod-sheet-foot {
  flex-shrink: 0;
  padding: 12px 16px 18px;
  border-top: 1px solid rgba(28,25,23,0.06);
  background: rgba(250,248,240,0.96);
  display: flex; align-items: center; gap: 10px;
}
.mod-sheet-qty {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--cream-100, #F0EDE2);
  border-radius: 14px;
  padding: 4px;
}
.mod-qty-btn {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: white;
  color: var(--ink-900);
  border: none;
  font-size: 16px; font-weight: 900;
  line-height: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(28,25,23,0.10);
  transition: transform .08s;
}
.mod-qty-btn:active { transform: scale(0.92); }
.mod-qty-val {
  min-width: 28px; text-align: center;
  font-size: 14px; font-weight: 900;
  color: var(--ink-900);
}
.mod-sheet-confirm {
  flex: 1;
  padding: 13px;
  border-radius: 14px;
  background: var(--ink-900);
  color: var(--lemon-500);
  font-size: 13px; font-weight: 900;
  border: none;
  cursor: pointer;
  transition: transform .08s;
}
.mod-sheet-confirm:active { transform: scale(0.98); }

/* ═══════════════════════════════════════════════════════════════════
 * NEW MERCHANT BADGES (stock + sold-out treatment in /new-order grid)
 * ═══════════════════════════════════════════════════════════════════ */
.menu-stock-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--lemon-100, #FFF4D1);
  color: var(--ink-900);
  font-size: 9px; font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 2;
}
.menu-stock-badge.out {
  background: var(--danger-100, #fee2e2);
  color: var(--danger-700, #b91c1c);
}
.menu-item.sold-out {
  opacity: 0.55;
}
.menu-item.sold-out .menu-item-img {
  filter: grayscale(0.85);
}

/* ═══════════════════════════════════════════════════════════════════
 * MENU-EDIT · OPTION GROUPS UI (replaces the old alert-only placeholder)
 * ═══════════════════════════════════════════════════════════════════ */
.opt-group-card {
  background: white;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(28,25,23,0.06), 0 1px 4px -1px rgba(28,25,23,0.04);
}
.opt-group-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.opt-group-name-input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--cream-50);
  border: 1px solid rgba(28,25,23,0.08);
  font-size: 13px; font-weight: 800;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
}
.opt-group-name-input:focus { border-color: var(--lemon-500); }
.opt-group-del {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(28,25,23,0.06);
  border: none;
  color: var(--ink-700);
  font-size: 18px; font-weight: 700;
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.opt-group-del:hover { background: var(--danger-100, #fee2e2); color: var(--danger-700, #b91c1c); }
.opt-group-controls {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(28,25,23,0.08);
  margin-bottom: 10px;
}
.opt-group-radio, .opt-group-required {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-700);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--cream-100, #F0EDE2);
  cursor: pointer;
}
.opt-group-radio input, .opt-group-required input {
  margin: 0; accent-color: var(--ink-900);
  width: 13px; height: 13px;
}
.opt-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.opt-name-input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--cream-50);
  border: 1px solid rgba(28,25,23,0.08);
  font-size: 12px; font-weight: 700;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
}
.opt-name-input:focus { border-color: var(--lemon-500); }
.opt-price {
  display: inline-flex; align-items: center;
  background: var(--cream-50);
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 8px;
  padding-left: 8px;
  width: 78px;
  flex-shrink: 0;
}
.opt-price-prefix {
  font-size: 11px; font-weight: 800;
  color: var(--ink-500);
}
.opt-price-input {
  width: 100%;
  padding: 7px 8px 7px 2px;
  background: transparent;
  border: none;
  font-size: 12px; font-weight: 800;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
}
.opt-price-input::-webkit-outer-spin-button,
.opt-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.opt-del {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink-500);
  font-size: 16px; font-weight: 700;
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.opt-del:hover { color: var(--danger-700, #b91c1c); background: var(--danger-100, #fee2e2); }
.opt-add-opt {
  display: block;
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  background: transparent;
  border: 1px dashed rgba(28,25,23,0.18);
  border-radius: 10px;
  font-size: 11px; font-weight: 800;
  color: var(--ink-700);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.opt-add-opt:hover {
  background: var(--cream-100, #F0EDE2);
  border-color: var(--ink-900);
  border-style: solid;
}

/* Stock field card in /menu-edit */
#stockField {
  margin-top: 24px;
}
.stock-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.stock-mode {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 4px;
  background: var(--cream-100, #F0EDE2);
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px; font-weight: 800;
  color: var(--ink-700);
}
.stock-mode input[type="radio"] {
  margin: 0; accent-color: var(--ink-900);
  width: 13px; height: 13px;
}
.stock-mode:has(input:checked) {
  background: var(--ink-900);
  color: var(--lemon-500);
}
.stock-amt-wrap {
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
 * QR SCREEN (merchant) · Customer Preview entry button
 * ═══════════════════════════════════════════════════════════════════ */
.qr-customer-preview {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 18px 0;
  padding: 12px 14px;
  background: var(--ink-900);
  color: white;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(28,25,23,0.40);
  transition: transform .08s;
}
.qr-customer-preview:active { transform: scale(0.98); }
.qr-cp-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--lemon-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.qr-cp-text { flex: 1; min-width: 0; }
.qr-cp-title {
  font-size: 12px; font-weight: 900;
  color: var(--lemon-500);
}
.qr-cp-sub {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
 * SPRINT 2 · DAY SESSION + LOYALTY
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Session screens (open & close share most of these classes) ── */
.session-body {
  padding: 18px 18px 200px;
}
.session-hero {
  text-align: center;
  padding: 20px 12px 24px;
}
.session-hero-ic {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 10px;
}
.session-hero-title {
  font-size: 18px; font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.session-hero-sub {
  font-size: 12px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 4px;
}
.session-section {
  margin-bottom: 18px;
}
.session-label {
  display: block;
  font-size: 12px; font-weight: 800;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.session-amt-input-wrap {
  display: flex; align-items: center;
  background: white;
  border: 1px solid rgba(28,25,23,0.10);
  border-radius: 14px;
  padding: 4px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.session-amt-input-wrap:focus-within {
  border-color: var(--lemon-500);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.18);
}
.session-amt-prefix {
  font-size: 22px; font-weight: 900;
  color: var(--ink-500);
  margin-right: 6px;
}
.session-amt-input {
  flex: 1;
  padding: 14px 0;
  background: transparent;
  border: none;
  font-size: 24px; font-weight: 900;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
}
.session-amt-input::-webkit-outer-spin-button,
.session-amt-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.session-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.session-quick {
  padding: 10px 4px;
  background: white;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 10px;
  font-size: 12px; font-weight: 800;
  color: var(--ink-900);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, transform .08s;
}
.session-quick:active {
  transform: scale(0.96);
  background: var(--cream-100, #F0EDE2);
}

.session-tip {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--lemon-100, #FFF4D1);
  border-radius: 14px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-700);
  line-height: 1.5;
  margin-top: 8px;
}
.session-tip-ic { font-size: 16px; flex-shrink: 0; }

/* Close-day specific */
.session-summary-card {
  background: white;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px -2px rgba(28,25,23,0.06), inset 0 0 0 1px rgba(28,25,23,0.04);
}
.session-summary-cap {
  font-size: 10px; font-weight: 900;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.session-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.session-stat { text-align: center; }
.session-stat-cap {
  font-size: 10px; font-weight: 800;
  color: var(--ink-500);
}
.session-stat-num {
  font-size: 16px; font-weight: 900;
  color: var(--ink-900);
  margin-top: 2px;
}
.session-expected {
  background: var(--cream-100, #F0EDE2);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.session-exp-row {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 700;
  color: var(--ink-700);
  padding: 4px 0;
}
.session-exp-row.total {
  font-size: 14px; font-weight: 900;
  color: var(--ink-900);
  border-top: 1px dashed rgba(28,25,23,0.15);
  padding-top: 8px;
  margin-top: 4px;
}
.session-delta {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
  text-align: center;
  border: 2px solid rgba(28,25,23,0.08);
}
.session-delta.match {
  border-color: var(--success-600, #16a34a);
  background: #DCFCE7;
}
.session-delta.surplus {
  border-color: var(--lemon-500);
  background: var(--lemon-100, #FFF4D1);
}
.session-delta.shortfall {
  border-color: var(--danger-500, #dc2626);
  background: var(--danger-100, #fee2e2);
}
.session-delta-cap {
  font-size: 11px; font-weight: 900;
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.session-delta-amt {
  font-size: 28px; font-weight: 900;
  color: var(--ink-900);
  margin-top: 4px;
}
.session-delta-hint {
  font-size: 11px; font-weight: 700;
  color: var(--ink-700);
  margin-top: 4px;
  line-height: 1.4;
}

.session-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(250,248,240,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 18px 24px;
  border-top: 1px solid rgba(28,25,23,0.08);
  z-index: 3;
}
.session-cta {
  width: 100%;
  padding: 15px;
  border-radius: 16px;
  background: var(--ink-900);
  color: var(--lemon-500);
  font-size: 14px; font-weight: 900;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(28,25,23,0.45);
  transition: transform .1s, box-shadow .15s;
  font-family: inherit;
}
.session-cta:active {
  transform: scale(0.985);
  box-shadow: 0 4px 12px -4px rgba(28,25,23,0.45);
}

/* ── POS session banner ── */
.pos-session-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--lemon-100, #FFF4D1), white);
  border: 1px solid var(--lemon-300, #F5D86F);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .08s, background .15s;
}
.pos-session-banner:active { transform: scale(0.99); }
.pos-sb-ic { font-size: 18px; }
.pos-sb-text {
  flex: 1;
  font-size: 11px; font-weight: 700;
  color: var(--ink-700);
}
.pos-sb-text b { font-weight: 900; color: var(--ink-900); }
.pos-sb-go {
  background: var(--ink-900);
  color: var(--lemon-500);
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 10px; font-weight: 900;
  cursor: pointer;
}

/* ── Loyalty admin screen ── */
.loyalty-body {
  padding: 18px 18px 110px;
}
.loyalty-toggle-row {
  display: flex; align-items: center; gap: 12px;
  background: white;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(28,25,23,0.05);
}
.loyalty-toggle-info { flex: 1; min-width: 0; }
.loyalty-toggle-title {
  font-size: 13px; font-weight: 900;
  color: var(--ink-900);
}
.loyalty-toggle-sub {
  font-size: 11px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 2px;
}
.loyalty-config {
  background: white;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px rgba(28,25,23,0.05);
}
.loyalty-config-row {
  margin-bottom: 12px;
}
.loyalty-config-row:last-child { margin-bottom: 0; }
.loyalty-section-cap {
  font-size: 10px; font-weight: 900;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 18px 0 8px;
}
.loyalty-members {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(28,25,23,0.05);
}
.loy-member {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(28,25,23,0.05);
}
.loy-member:last-child { border-bottom: none; }
.loy-member.eligible {
  background: linear-gradient(90deg, var(--lemon-100, #FFF4D1), transparent);
}
.loy-member-info { flex: 1; min-width: 0; }
.loy-member-phone {
  font-size: 13px; font-weight: 900;
  color: var(--ink-900);
}
.loy-member-stamps {
  font-size: 10px; font-weight: 700;
  color: var(--ink-500);
  margin-top: 1px;
}
.loy-member-dots {
  display: inline-flex; gap: 3px;
  flex-shrink: 0;
}
.loy-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(28,25,23,0.12);
}
.loy-dot.on {
  background: var(--lemon-500);
  box-shadow: 0 1px 2px rgba(245,197,24,0.4);
}

/* ── Customer info loyalty pill ── */
.cust-info-loyalty {
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--lemon-100, #FFF4D1), white);
  border: 1px solid var(--lemon-300, #F5D86F);
  border-radius: 12px;
}
.cust-info-loy-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--ink-900);
  line-height: 1.4;
}
.cust-info-loy-ic {
  font-size: 18px;
  flex-shrink: 0;
}
.cust-info-loy-text { flex: 1; }
.cust-info-loy-text b { font-weight: 900; }
.cust-info-loy-dots {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 8px;
}

/* ── Customer receipt loyalty stamp ── */
.cust-rcpt-loyalty {
  text-align: center;
  font-size: 12px; font-weight: 800;
  color: var(--ink-900);
  padding: 8px 0;
}
.cust-rcpt-loyalty.hit {
  background: var(--lemon-100, #FFF4D1);
  border-radius: 10px;
  padding: 12px;
  margin: 4px 0;
  font-size: 14px; font-weight: 900;
}

/* ═══════════════════════ HISTORY SCREEN · ออเดอร์ย้อนหลัง ═══════════════════════
 * Where archived/delivered orders go. Search bar + range pills, daily-grouped
 * compact rows (1-line), and a top summary banner. Tap any row to view detail
 * + initiate refund. */

/* History screen layout · only override what's needed.
 * Critical: do NOT set `display: flex` on [data-screen="history"] base —
 * that would override `.screen { display: none }` and make the screen
 * render even when inactive (stacked over login etc.). The .screen.active
 * rule (line ~197) already provides `display: flex` when active. We only
 * need to add overflow:hidden so the body becomes the scroll container. */
[data-screen="history"] {
  background: var(--cream);
}
[data-screen="history"].active {
  flex-direction: column;
  overflow: hidden;
}

.history-controls {
  padding: 10px 16px 12px;
  border-bottom: 1px solid rgba(28,25,23,0.06);
  flex-shrink: 0;
  background: white;
}
.history-search-wrap {
  position: relative;
  margin-bottom: 10px;
}
.history-search-ic {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  pointer-events: none;
}
.history-search {
  width: 100%;
  background: var(--cream-50, #FAF8F0);
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 12px;
  /* Right padding bumped to leave room for the calendar icon button. */
  padding: 10px 44px 10px 36px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
  transition: border-color .12s, background .12s;
}
.history-search:focus {
  border-color: var(--lemon-400);
  background: white;
}
/* Calendar icon button · sits in the right slot of the search row.
 * Tapping it opens the custom bottom-sheet date picker (.hist-cal-overlay).
 * We don't use a native <input type="date"> because its OS-rendered panel
 * (a) escapes the iPhone mockup boundaries on desktop preview, and (b)
 * uses platform fonts/colors that clash with the lemon theme. */
.history-cal-btn {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink-700);
  opacity: 0.55;
  transition: opacity .12s, background .12s;
}
.history-cal-btn:hover, .history-cal-btn:active {
  opacity: 1;
  background: rgba(28,25,23,0.06);
}

.history-filter-row {
  display: flex; gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.history-filter-row::-webkit-scrollbar { display: none; }
.history-filter-pill {
  flex-shrink: 0;
  background: var(--cream-50, #FAF8F0);
  border: 1px solid rgba(28,25,23,0.08);
  color: var(--ink-700, #44403c);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.history-filter-pill.active {
  background: var(--ink-900);
  color: var(--lemon-400);
  border-color: var(--ink-900);
}

/* Date-selected chip · shown in place of the pills when user picks a
 * specific day from the calendar. Has × button to clear back to "วันนี้". */
.history-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  background: var(--lemon-100);
  border: 1.5px solid var(--lemon-500);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.history-date-chip svg { flex-shrink: 0; opacity: 0.75; }
.history-date-chip-lbl { white-space: nowrap; }
.history-date-chip-x {
  width: 22px; height: 22px;
  border: none;
  background: var(--ink-900);
  color: var(--lemon-400);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  margin-left: 2px;
  flex-shrink: 0;
}
.history-date-chip-x:active { transform: scale(0.92); }

/* ════════════════════ HISTORY CALENDAR SHEET ════════════════════
 * Custom bottom-sheet date picker · rendered inside the .screen
 * container (NOT viewport) so it stays within the iPhone mockup.
 *
 * Layout · backdrop dim layer + sheet panel sliding up from bottom.
 * Selected day = lemon-400 fill on ink-900 background of the cell.
 * Today = ink ring. Days-with-orders = small dot below number.
 * Future days disabled. */

.hist-cal-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  /* hidden attribute removes from layout; .open class drives transition */
}
.hist-cal-overlay:not([hidden]) { pointer-events: auto; }

.hist-cal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28,25,23,0);
  transition: background .24s ease;
}
.hist-cal-overlay.open .hist-cal-backdrop {
  background: rgba(28,25,23,0.42);
}

.hist-cal-sheet {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: var(--cream);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 8px 18px 16px 18px;
  box-shadow: 0 -8px 32px -8px rgba(28,25,23,0.25);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hist-cal-overlay.open .hist-cal-sheet {
  transform: translateY(0);
}

/* Grab handle · iOS-style pill at top of sheet */
.hist-cal-grab {
  width: 38px; height: 4px;
  background: rgba(28,25,23,0.18);
  border-radius: 2px;
  margin: 0 auto 10px auto;
}

.hist-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hist-cal-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.hist-cal-x {
  width: 28px; height: 28px;
  border: none;
  background: rgba(28,25,23,0.06);
  color: var(--ink-700);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hist-cal-x:active { background: rgba(28,25,23,0.14); }

/* Month nav row · ‹ พฤษภาคม 2569 › */
.hist-cal-monthnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 10px 0;
  border-bottom: 1px solid rgba(28,25,23,0.06);
  margin-bottom: 10px;
}
.hist-cal-navbtn {
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  color: var(--ink-900);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s;
}
.hist-cal-navbtn:active { background: rgba(28,25,23,0.08); }
.hist-cal-monthlbl {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

/* Day-of-week header · 7 columns · TH abbreviations */
.hist-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.hist-cal-dow span {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.5;
  padding: 6px 0;
}

/* 6×7 grid · cells are square-ish and tap-friendly */
.hist-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.hist-cal-cell {
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-900);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: background .1s, color .1s, transform .08s;
  padding: 0;
}
.hist-cal-cell:not(.muted):not(.future):not(.selected):active {
  background: rgba(28,25,23,0.08);
  transform: scale(0.94);
}
/* Muted cells · prev/next month days · less prominent + non-clickable */
.hist-cal-cell.muted {
  color: rgba(28,25,23,0.22);
  cursor: default;
  pointer-events: none;
}
/* Future days · disabled · grey + cursor not-allowed */
.hist-cal-cell.future {
  color: rgba(28,25,23,0.32);
  cursor: not-allowed;
}
/* Today · subtle ink ring · always shown unless selected (which overrides) */
.hist-cal-cell.today:not(.selected) {
  box-shadow: inset 0 0 0 1.5px var(--ink-900);
}
/* Selected day · ink-900 fill + lemon text · the headline state */
.hist-cal-cell.selected {
  background: var(--ink-900);
  color: var(--lemon-400);
  box-shadow: 0 4px 12px -4px rgba(28,25,23,0.4);
}
.hist-cal-cell.selected .hist-cal-dot { background: var(--lemon-400); opacity: 1; }
/* Days that have orders · small lemon dot below the number */
.hist-cal-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  margin-top: 2px;
  background: transparent;
  transition: background .1s;
}
.hist-cal-cell.has-orders .hist-cal-dot {
  background: var(--lemon-500);
}

/* Footer · ล้าง / วันนี้ buttons */
.hist-cal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(28,25,23,0.06);
  gap: 10px;
}
.hist-cal-foot-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  border: none;
  letter-spacing: -0.005em;
  transition: transform .08s, background .12s;
}
.hist-cal-foot-btn.link {
  background: transparent;
  color: var(--ink-700);
}
.hist-cal-foot-btn.link:active {
  background: rgba(28,25,23,0.06);
  color: var(--ink-900);
}
.hist-cal-foot-btn.primary {
  background: var(--lemon-400);
  color: var(--ink-900);
  box-shadow: 0 3px 0 var(--ink-900);
}
.hist-cal-foot-btn.primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink-900);
}

.history-summary {
  padding: 12px 16px;
  flex-shrink: 0;
}
.history-summary:empty { display: none; }
.history-summary-row {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--lemon-50, #FFF8DC), var(--cream-50, #FAF8F0));
  border: 1px solid rgba(245,197,24,0.25);
  border-radius: 14px;
  padding: 12px 14px;
}
.history-summary-stat { flex: 1; min-width: 0; }
.history-summary-num {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.history-summary-lbl {
  font-size: 10px;
  opacity: 0.55;
  font-weight: 600;
  margin-top: 2px;
}
.history-summary-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(28,25,23,0.10);
}

.history-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  padding: 0 16px 30px;
}
.history-day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-700, #44403c);
  opacity: 0.6;
  letter-spacing: 0.04em;
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(28,25,23,0.08);
}
.history-day-total {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  opacity: 1;
}

.history-row {
  display: flex; align-items: center; gap: 12px;
  background: white;
  border: 1px solid rgba(28,25,23,0.05);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background .12s;
}
.history-row:active { background: var(--cream-50, #FAF8F0); }
.history-row-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-700);
  opacity: 0.55;
  min-width: 44px;
}
.history-row-main { flex: 1; min-width: 0; }
.history-row-nick {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.2;
}
.history-row-meta {
  font-size: 11px;
  opacity: 0.55;
  margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.history-row-refund {
  background: rgba(239,68,68,0.10);
  color: #DC2626;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
}
.history-row-amt {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink-900);
  flex-shrink: 0;
}
.history-row-amt.refunded {
  text-decoration: line-through;
  opacity: 0.5;
}

.history-empty {
  text-align: center;
  padding: 80px 30px 40px;
}
.history-empty-emoji { font-size: 48px; opacity: 0.4; }
.history-empty-text {
  font-size: 13px;
  font-weight: 700;
  margin-top: 12px;
  opacity: 0.55;
}

/* ═══════════════════════ REFUND SHEET ═══════════════════════
 * Bottom sheet for refunding a delivered order. 3 sections:
 *   1. เหตุผล (single-select pills)
 *   2. จำนวน (input + half/full quick buttons)
 *   3. ช่องทาง (cash / QR / store credit · single-select cards)
 * Confirm at bottom, full-width, with live amount. */

.refund-overlay {
  position: absolute; inset: 0;
  background: rgba(28,25,23,0.45);
  z-index: 600;
  display: none;
  align-items: flex-end;
  border-radius: 48px;
}
.refund-overlay.show { display: flex; }
.refund-sheet {
  width: 100%;
  background: white;
  border-radius: 24px 24px 0 0;
  max-height: 88%;
  overflow-y: auto;
  padding: 6px 18px 22px;
  box-shadow: 0 -16px 40px -8px rgba(0,0,0,0.25);
  animation: refund-slide .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes refund-slide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.refund-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 0 6px;
}
.refund-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink-900);
}
.refund-close {
  background: var(--cream-50, #FAF8F0);
  border: 1px solid rgba(28,25,23,0.08);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  font-family: inherit;
}
.refund-summary {
  background: var(--cream-50, #FAF8F0);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(28,25,23,0.06);
}
.refund-summary-nick {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-900);
}
.refund-summary-meta {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 3px;
  font-weight: 600;
}
.refund-summary-items {
  font-size: 12px;
  margin-top: 6px;
  font-weight: 700;
  color: var(--ink-700);
}

.refund-section {
  margin-bottom: 16px;
}
.refund-section-cap {
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

/* Reasons: stacked pills */
.refund-reasons {
  display: flex; flex-direction: column; gap: 6px;
}
.refund-reason {
  background: white;
  border: 1px solid rgba(28,25,23,0.10);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.refund-reason.active {
  background: var(--ink-900);
  color: var(--lemon-400);
  border-color: var(--ink-900);
}
.refund-reason-text {
  margin-top: 6px;
  width: 100%;
  background: var(--cream-50, #FAF8F0);
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.refund-reason-text:focus {
  border-color: var(--lemon-400);
  background: white;
}

/* Amount: number input + 2 quick buttons */
.refund-amount-row {
  display: flex; align-items: center; gap: 8px;
}
.refund-amount-input-wrap {
  position: relative;
  flex: 1;
}
.refund-amount-prefix {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
}
.refund-amount-input {
  width: 100%;
  background: var(--cream-50, #FAF8F0);
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 12px;
  padding: 10px 12px 10px 28px;
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
}
.refund-amount-input:focus {
  border-color: var(--lemon-400);
  background: white;
}
.refund-amount-quick {
  background: white;
  border: 1px solid rgba(28,25,23,0.10);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-700);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.refund-amount-quick.active {
  background: var(--lemon-400);
  border-color: var(--lemon-400);
  color: var(--ink-900);
}

/* Methods: 3-col cards */
.refund-methods {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.refund-method {
  background: white;
  border: 1px solid rgba(28,25,23,0.10);
  border-radius: 12px;
  padding: 12px 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: background .12s, border-color .12s;
}
.refund-method.active {
  background: var(--lemon-50, #FFF8DC);
  border: 2px solid var(--lemon-400);
  padding: 11px 7px; /* compensate for thicker border */
}
.refund-method-ic { font-size: 22px; line-height: 1; }
.refund-method-cap {
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-900);
  margin-top: 2px;
}
.refund-method-sub {
  font-size: 10px;
  opacity: 0.55;
  font-weight: 600;
}

.refund-foot {
  margin-top: 10px;
}
.refund-confirm {
  width: 100%;
  background: #EF4444;
  color: white;
  border: none;
  border-radius: 14px;
  padding: 14px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 0 #B91C1C;
  transition: transform .1s, background .12s;
}
.refund-confirm:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #B91C1C;
  background: #DC2626;
}

/* Refunded tag inside the order detail modal */
.od-refunded-tag {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #DC2626;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

/* Refund button variant in order modal */
.od-btn.warn {
  background: white;
  color: #DC2626;
  border: 1.5px solid rgba(239,68,68,0.30);
}
.od-btn.warn:active {
  background: rgba(239,68,68,0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   SLIP VERIFICATION · ตรวจสลิปปลอม (slip2go API)
   ═══════════════════════════════════════════════════════════════════
   Three surfaces:
     1. set-slipverify   · settings sub-screen (master toggle, API config)
     2. cust-slip        · customer-end upload screen between cust-pay
                           and the actual order commit
     3. slip-check-sheet · staff bottom sheet for camera-based slip check
                           from order detail modal
   Plus per-order extras (od-slip-block, slip-thumb, status badges) used
   inside the existing order detail modal when the order has slipImage.
   Color palette stays in lemon/ink so feature feels native to LEMON Go. */

/* ─── SET-SLIPVERIFY · SETTINGS SUB-SCREEN ─── */
.slip-master-row {
  display: flex; align-items: center; justify-content: space-between;
  background: white;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px -2px rgba(28,25,23,0.05);
}
.slip-master-text { flex: 1; min-width: 0; }
.slip-master-title { font-size: 14px; font-weight: 900; color: var(--ink-900); }
.slip-master-sub { font-size: 11px; font-weight: 700; opacity: 0.55; margin-top: 2px; }

.slip-status {
  font-size: 11px; font-weight: 800;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
  text-align: center;
}
.slip-status.off { background: rgba(28,25,23,0.06); color: var(--ink-700, #404040); }
.slip-status.sim { background: rgba(245,158,11,0.13); color: #92400e; border: 1px solid rgba(245,158,11,0.3); }
.slip-status.live { background: rgba(34,197,94,0.13); color: #166534; border: 1px solid rgba(34,197,94,0.30); }

.slip-provider-grid { gap: 8px; }
.slip-provider-chip { cursor: pointer; }

.slip-test-btn {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border-radius: 14px;
  background: var(--ink-900); color: var(--lemon-400);
  font-size: 13px; font-weight: 900;
  border: none; cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(28,25,23,0.4);
  transition: transform .12s, box-shadow .15s;
}
.slip-test-btn:active { transform: translateY(1px); box-shadow: 0 2px 6px -2px rgba(28,25,23,0.4); }
.slip-test-btn:disabled { opacity: 0.6; cursor: wait; }

/* ─── CUST-SLIP · CUSTOMER UPLOAD SCREEN ─── */
.cust-slip-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 18px;
  min-height: 0;
}

.cust-slip-summary {
  background: white;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px -2px rgba(28,25,23,0.06);
}
.cust-slip-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 800;
  color: var(--ink-900);
  padding: 4px 0;
}
.cust-slip-summary-row + .cust-slip-summary-row {
  border-top: 1px dashed rgba(28,25,23,0.10);
  padding-top: 8px; margin-top: 4px;
}
.cust-slip-summary-cap { opacity: 0.6; font-weight: 700; }
.cust-slip-summary-val { font-weight: 900; }
.cust-slip-amt { font-weight: 900; }
.cust-slip-amt .currency { font-size: 11px; opacity: 0.6; margin-right: 1px; }
.cust-slip-amt .tabular { font-size: 16px; }

.cust-slip-preview-wrap {
  background: white;
  border: 2px dashed rgba(28,25,23,0.18);
  border-radius: 18px;
  padding: 16px;
  min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  transition: border-color .18s, background .18s;
}
.cust-slip-preview-wrap.has-image {
  border-style: solid;
  border-color: rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.04);
}
.cust-slip-placeholder {
  text-align: center;
}
.cust-slip-placeholder-ic {
  font-size: 36px;
  opacity: 0.5;
  margin-bottom: 6px;
}
.cust-slip-placeholder-cap {
  font-size: 12px; font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 2px;
}
.cust-slip-placeholder-sub {
  font-size: 10px; font-weight: 700;
  opacity: 0.55;
}
.cust-slip-thumb-wrap {
  width: 100%;
  text-align: center;
}
.cust-slip-thumb {
  max-width: 100%;
  max-height: 240px;
  border-radius: 12px;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.25);
  display: block;
  margin: 0 auto;
}
.cust-slip-thumb-ok {
  margin-top: 8px;
  font-size: 11px; font-weight: 800;
  color: #166534;
  letter-spacing: 0.02em;
}

.cust-slip-provider-hint {
  font-size: 10px; font-weight: 700;
  opacity: 0.6;
  text-align: center;
  margin: 4px 0 12px;
  letter-spacing: 0.02em;
}

.cust-slip-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cust-slip-pick-btn {
  display: block;
  text-align: center;
  cursor: pointer;
}
.cust-slip-remove-btn { width: 100%; }

.cust-slip-foot {
  flex-shrink: 0;
  background: rgba(250,248,240,0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 14px 18px 24px;
  border-top: 1px solid rgba(28,25,23,0.08);
  z-index: 3;
}
.cust-slip-tip {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(245,197,24,0.10);
  border: 1px solid rgba(245,197,24,0.25);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-900);
  line-height: 1.45;
  margin-bottom: 12px;
}
.cust-slip-tip-ic { font-size: 14px; flex-shrink: 0; }

#custSlipSubmitBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ─── ORDER DETAIL · slip thumbnail block (when order has slipImage) ─── */
.od-slip-block {
  border-radius: 14px;
  padding: 10px 12px 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(28,25,23,0.10);
  background: rgba(28,25,23,0.03);
}
.od-slip-block.ok {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.25);
}
.od-slip-block.pending {
  background: rgba(245,158,11,0.07);
  border-color: rgba(245,158,11,0.22);
}
.od-slip-cap {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.od-slip-amt { opacity: 0.85; font-weight: 900; }
.od-slip-img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 8px;
  background: white;
  cursor: zoom-in;
  display: block;
}
.od-slip-msg {
  font-size: 11px; font-weight: 700;
  margin-top: 6px;
  color: #92400e;
}

/* Two-button layout for verify banner (slip + manual) */
.od-verify-actions {
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}
.od-verify-btn.slip {
  background: white;
  color: var(--ink-900);
  border: 1.5px solid rgba(28,25,23,0.18);
  box-shadow: 0 2px 0 rgba(28,25,23,0.15);
}
.od-verify-btn.slip:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(28,25,23,0.15);
}

/* ─── SLIP-CHECK-SHEET · STAFF BOTTOM SHEET ─── */
.slip-check-sheet {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: none;
  pointer-events: none;
}
.slip-check-sheet.show {
  display: block;
  pointer-events: auto;
  animation: slip-sheet-fade .2s ease-out;
}
@keyframes slip-sheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.slip-check-back {
  position: absolute;
  inset: 0;
  background: rgba(28,25,23,0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 48px; /* match phone-screen radius */
  cursor: pointer;
}
.slip-check-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--cream-50, #FAF8F0);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 8px 18px 22px;
  max-height: 86%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -10px 40px -10px rgba(0,0,0,0.4);
  animation: slip-sheet-slide .25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes slip-sheet-slide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.slip-check-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 4px; margin-bottom: 14px;
}
.slip-check-cap {
  font-size: 12px; font-weight: 900;
  color: var(--ink-900);
  letter-spacing: 0.01em;
}
.slip-check-amt {
  font-size: 11px; font-weight: 700;
  opacity: 0.55;
  margin-top: 2px;
}
.slip-check-amt .tabular {
  font-size: 16px; font-weight: 900;
  opacity: 1;
  color: var(--ink-900);
  margin-left: 2px;
}
.slip-check-close {
  width: 28px; height: 28px;
  border-radius: 14px;
  background: rgba(28,25,23,0.08);
  color: var(--ink-900);
  font-size: 18px; font-weight: 700;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.slip-check-close:active { background: rgba(28,25,23,0.18); }

.slip-check-badge {
  font-size: 11px; font-weight: 800;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  text-align: center;
  letter-spacing: 0.01em;
}
.slip-check-badge.ok   { background: rgba(34,197,94,0.13); color: #166534; border: 1px solid rgba(34,197,94,0.3); }
.slip-check-badge.warn { background: rgba(245,158,11,0.13); color: #92400e; border: 1px solid rgba(245,158,11,0.3); }
.slip-check-badge.sim  { background: rgba(28,25,23,0.07);  color: var(--ink-900); border: 1px dashed rgba(28,25,23,0.20); }

.slip-check-preview {
  background: white;
  border: 2px dashed rgba(28,25,23,0.18);
  border-radius: 16px;
  padding: 14px;
  min-height: 160px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  transition: border-color .18s, background .18s;
}
.slip-check-preview.has-image {
  border-style: solid;
  border-color: rgba(28,25,23,0.12);
}
.slip-check-placeholder { text-align: center; }
.slip-check-placeholder-ic { font-size: 32px; opacity: 0.5; margin-bottom: 6px; }
.slip-check-placeholder-cap {
  font-size: 12px; font-weight: 800; color: var(--ink-900);
  margin-bottom: 2px;
}
.slip-check-placeholder-sub { font-size: 10px; font-weight: 700; opacity: 0.55; }
.slip-check-thumb-wrap { text-align: center; width: 100%; }
.slip-check-thumb {
  max-width: 100%;
  max-height: 240px;
  border-radius: 10px;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.25);
  display: block; margin: 0 auto;
}
.slip-check-thumb-cap {
  margin-top: 8px;
  font-size: 11px; font-weight: 800;
  color: var(--ink-900);
  opacity: 0.7;
  letter-spacing: 0.01em;
}

.slip-check-actions {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.slip-check-pick-btn {
  display: block; text-align: center; cursor: pointer;
  padding: 11px 14px;
  border-radius: 12px;
  background: white;
  color: var(--ink-900);
  font-size: 12px; font-weight: 900;
  border: 1px solid rgba(28,25,23,0.12);
  transition: background .12s;
}
.slip-check-pick-btn:active { background: var(--cream-100, #F0EDE2); }
.slip-check-reuse-btn {
  padding: 9px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-900);
  font-size: 11px; font-weight: 800;
  border: 1px dashed rgba(28,25,23,0.22);
  cursor: pointer;
}
.slip-check-reuse-btn:active { background: rgba(28,25,23,0.06); }

.slip-check-submit {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: var(--ink-900); color: var(--lemon-400);
  font-size: 13px; font-weight: 900;
  border: none; cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(28,25,23,0.45);
  transition: transform .1s, box-shadow .15s;
  letter-spacing: 0.01em;
}
.slip-check-submit:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px -3px rgba(28,25,23,0.45);
}
.slip-check-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.slip-check-foot-hint {
  font-size: 10px; font-weight: 700;
  opacity: 0.55;
  text-align: center;
  margin-top: 10px;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTO-CALL CUSTOMER (cust-status alerts)
   ═══════════════════════════════════════════════════════════════════
   Customer flow now has no phone/pickup fields — instead the ready alert
   plays on cust-status as a chime + Thai TTS the moment the merchant taps
   "ทำเสร็จ" in their POS. Two visual elements live here:
     1. cust-status-keep-open · sticky 3-line reminder while waiting
        (lemon-amber pulsing panel that explains the auto-call system)
     2. cust-status-ready-big · big pulsing banner when food is ready */

/* ─── CUST-STATUS · keep-window-open reminder while waiting ───
 * Three lines so the customer fully understands what's about to happen:
 *   line 1: imperative title in red-amber ("ห้ามปิดหน้าต่างนี้")
 *   line 2: what they should DO (keep this page open)
 *   line 3: what the SYSTEM will do (sound + voice when ready)
 * The pulsing background + ringing bell icon catch the eye while the
 * larger box gives the message room to breathe — important since this
 * is the customer's only instruction during the wait. */
.cust-status-keep-open {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245,197,24,0.18), rgba(245,197,24,0.10));
  border: 1.5px solid rgba(245,197,24,0.38);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 14px;
  box-shadow: 0 2px 10px -4px rgba(245,197,24,0.22);
  animation: cust-keepopen-pulse 2.4s ease-in-out infinite;
}
@keyframes cust-keepopen-pulse {
  0%, 100% {
    background: linear-gradient(135deg, rgba(245,197,24,0.18), rgba(245,197,24,0.10));
    box-shadow: 0 2px 10px -4px rgba(245,197,24,0.22);
  }
  50% {
    background: linear-gradient(135deg, rgba(245,197,24,0.30), rgba(245,197,24,0.18));
    box-shadow: 0 4px 16px -4px rgba(245,197,24,0.40);
  }
}
.cust-status-keep-open-ic {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
  filter: drop-shadow(0 1px 2px rgba(180,90,0,0.15));
  animation: cust-keepopen-bell 2.4s ease-in-out infinite;
  transform-origin: 50% 0;
}
@keyframes cust-keepopen-bell {
  0%, 50%, 100% { transform: rotate(0deg); }
  10%, 30%      { transform: rotate(-12deg); }
  20%, 40%      { transform: rotate(12deg); }
}
.cust-status-keep-open-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.cust-status-keep-open-title {
  font-size: 14px;
  font-weight: 900;
  color: #92400e;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.cust-status-keep-open-line {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-900);
  opacity: 0.82;
  line-height: 1.55;
}
.cust-status-keep-open-line + .cust-status-keep-open-line {
  margin-top: 2px;
}
.cust-status-keep-open-line b {
  font-weight: 900;
  color: #92400e;
  opacity: 1;
}

/* ─── CUST-STATUS · BIG ready-now banner (replaces the small pill) ─── */
.cust-status-ready-big {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
  border-radius: 22px;
  padding: 20px 18px 22px;
  text-align: center;
  margin: 0 0 14px;
  box-shadow:
    0 12px 30px -8px rgba(22,163,74,0.55),
    0 0 0 4px rgba(22,163,74,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);
  animation: cust-ready-pop .5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             cust-ready-glow 2.2s ease-in-out infinite 0.5s;
  position: relative;
  overflow: hidden;
}
.cust-status-ready-big::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none;
}
@keyframes cust-ready-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes cust-ready-glow {
  0%, 100% { box-shadow: 0 12px 30px -8px rgba(22,163,74,0.55), 0 0 0 4px rgba(22,163,74,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 16px 40px -6px rgba(22,163,74,0.75), 0 0 0 8px rgba(22,163,74,0.25), inset 0 1px 0 rgba(255,255,255,0.30); }
}
.cust-status-ready-big-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 6px;
  display: inline-block;
  animation: cust-ready-bounce 1.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
@keyframes cust-ready-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.cust-status-ready-big-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.20);
}
.cust-status-ready-big-sub {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.92;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   /PREORDERS · dedicated preorder management screen
   ═══════════════════════════════════════════════════════════════════
   Replaced the old V5 /orders BOS list. POS handles current orders,
   /history handles past orders, /preorders is the only place where
   orders the customer reserved for later show up. Merchants come here
   in the morning to plan: "what do I have to prep for the lunch rush?"
   Layout: pills (วันนี้/พรุ่งนี้/อนาคต) at top, time-sorted card list. */

/* ─── Filter pills row ─── */
.preorders-filter-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.preorders-filter-row::-webkit-scrollbar { display: none; }
.preorder-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-900);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.preorder-pill:active { transform: translateY(0.5px); }
.preorder-pill.active {
  background: var(--lemon);
  border-color: var(--ink-900);
  box-shadow: 0 2px 0 var(--ink-900);
}
.preorder-pill .po-count {
  font-size: 10px;
  font-weight: 900;
  background: rgba(0,0,0,0.10);
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.preorder-pill.active .po-count {
  background: var(--ink-900);
  color: var(--lemon);
}

/* ─── Body / list ─── */
.preorders-body {
  padding: 6px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Preorder card · pickup time + countdown front and center ─── */
.preorder-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.12s, transform 0.08s;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.preorder-card:active {
  transform: translateY(0.5px);
  box-shadow: 0 0px 0 rgba(0,0,0,0.04);
}
.po-card-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.po-time-big {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.po-countdown {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(245,197,24,0.20);
  color: #92400e;
  border: 1px solid rgba(245,197,24,0.30);
}
.po-countdown.po-soon {
  background: rgba(34,197,94,0.15);
  color: #15803d;
  border-color: rgba(34,197,94,0.30);
  animation: po-soon-pulse 2s ease-in-out infinite;
}
.po-countdown.po-late {
  background: rgba(239,68,68,0.15);
  color: #b91c1c;
  border-color: rgba(239,68,68,0.35);
  animation: po-late-pulse 1.4s ease-in-out infinite;
}
@keyframes po-soon-pulse {
  0%,100% { background: rgba(34,197,94,0.15); }
  50%     { background: rgba(34,197,94,0.28); }
}
@keyframes po-late-pulse {
  0%,100% { background: rgba(239,68,68,0.15); transform: scale(1); }
  50%     { background: rgba(239,68,68,0.30); transform: scale(1.04); }
}
.po-card-divider {
  border-top: 1px dashed var(--line-2);
  margin-bottom: 10px;
}
.po-card-head {
  margin-bottom: 8px;
}
.po-nickname {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.po-no-line {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-900);
  opacity: 0.55;
}
.po-items {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  opacity: 0.85;
  line-height: 1.55;
  margin-bottom: 10px;
}
.po-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
}
.po-amt {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink-900);
}
.po-paid-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}
.po-paid-pill.paid {
  background: rgba(34,197,94,0.15);
  color: #15803d;
  border: 1px solid rgba(34,197,94,0.30);
}
.po-paid-pill.unpaid {
  background: rgba(245,158,11,0.15);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.30);
}

/* ─── Empty / disabled states ─── */
.preorders-empty {
  text-align: center;
  padding: 48px 24px;
}
.preorders-empty-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
  opacity: 0.7;
}
.preorders-empty-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.preorders-empty-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-900);
  opacity: 0.55;
  line-height: 1.5;
  max-width: 240px;
  margin: 0 auto;
}
.preorders-empty-cta {
  display: inline-block;
  margin-top: 18px;
  background: var(--lemon);
  color: var(--ink-900);
  border: 2px solid var(--ink-900);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink-900);
  transition: transform 0.08s, box-shadow 0.08s;
}
.preorders-empty-cta:active {
  transform: translateY(1.5px);
  box-shadow: 0 0.5px 0 var(--ink-900);
}

/* ═══════════════════════════════════════════════════════════════════
   /MENU · LIST ↔ GRID VIEW TOGGLE
   ═══════════════════════════════════════════════════════════════════
   Merchants get a choice on the menu management screen between the
   original single-column list (text-heavy, info-dense) and a 2-column
   grid (visual-first, photo-driven). Preference is persisted in
   store.uiPrefs.menuView. The toggle lives in page-action of the
   header. Default is 'list' for backward compatibility. */

/* ─── View-toggle pill in page-action ─── */
.menu-view-toggle {
  display: inline-flex;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.menu-view-btn {
  width: 28px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-900);
  opacity: 0.45;
  transition: background 0.12s, opacity 0.12s;
  padding: 0;
}
.menu-view-btn:active { transform: translateY(0.5px); }
.menu-view-btn.active {
  background: var(--lemon);
  opacity: 1;
  box-shadow: 0 1px 0 rgba(28,25,23,0.20);
}

/* ─── GRID view tile ─── */
.menu-grid-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 0 12px;
}
.menu-tile {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.12s;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  min-height: 180px;
}
.menu-tile:active {
  transform: translateY(0.5px);
  box-shadow: 0 0 0 rgba(0,0,0,0.04);
}
.menu-tile.off { opacity: 0.55; }
.menu-tile.off .menu-tile-img { filter: grayscale(0.4); }
.menu-tile-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245,197,24,0.18), rgba(245,197,24,0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  overflow: hidden;
}
.menu-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.menu-tile-name {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  /* ellipsis after 1 line so tiles align */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-tile-cat {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-900);
  opacity: 0.55;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-tile-foot {
  margin-top: auto; /* push to bottom of tile */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.menu-tile-price {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
/* Smaller toggle in grid for space */
.menu-tile .toggle {
  transform: scale(0.78);
  transform-origin: right center;
}
.menu-tile-best {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(180,90,0,0.30));
}
.menu-tile-stock {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  z-index: 2;
  letter-spacing: 0.02em;
}
.menu-tile-stock.out {
  background: rgba(239,68,68,0.92);
  color: white;
}
.menu-tile-stock.low {
  background: rgba(245,158,11,0.92);
  color: white;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME · GOAL CARD (Hero Stat) + SMART LIST
   ═══════════════════════════════════════════════════════════════════
   Replaced the "ออเดอร์ล่าสุด" recent strip on home (which duplicated
   POS info) with two purpose-built widgets:
     1. Goal Card    — big-number Hero Stat, today's revenue + progress
     2. Smart List   — what needs attention right now, urgency-sorted
   See app.js · renderHomeGoalCard / renderHomeSmartList. */

/* ─── Goal Card · Hero Stat ─── */
.home-goal-zone {
  margin-top: 14px;
}
.hg-card {
  background: linear-gradient(180deg, white 0%, var(--lemon-50) 100%);
  border: 1.5px solid var(--line);
  border-radius: 24px;
  padding: 26px 22px 22px;
  text-align: center;
  box-shadow: 0 4px 16px -8px rgba(28,25,23,0.12);
}
.hg-cap {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--ink-700);
  opacity: 0.55;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hg-amount {
  font-size: 56px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.hg-baht {
  font-size: 32px;
  font-weight: 900;
  color: var(--ink-700);
  margin-right: 2px;
  vertical-align: 12px;
}
.hg-target {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-700);
  margin-bottom: 16px;
  cursor: pointer;
  transition: color 0.12s;
}
.hg-target:hover { color: var(--ink-900); }
.hg-target b { color: var(--ink-900); font-weight: 900; }

/* CTA when no target set */
.hg-target-cta {
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-900);
  background: var(--lemon-100);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--lemon-300);
  cursor: pointer;
  margin-bottom: 14px;
  transition: background 0.12s;
}
.hg-target-cta:hover { background: var(--lemon-200); }

/* Progress bar with shine */
.hg-bar-wrap {
  height: 10px;
  background: rgba(28,25,23,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(28,25,23,0.10);
}
.hg-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lemon-400), var(--lemon-300));
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.hg-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  animation: hg-shine 2.4s linear infinite;
}
@keyframes hg-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.hg-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-700);
}
.hg-foot b { color: var(--ink-900); font-weight: 900; }
.hg-foot-up    { color: #16A34A; font-weight: 900; }   /* ahead of avg */
.hg-foot-down  { color: #B45309; font-weight: 900; }   /* behind avg */
.hg-foot-muted { color: var(--ink-500); opacity: 0.7; } /* early day */

/* Empty card variant when no target & no history */
.hg-card-empty .hg-amount {
  font-size: 48px;
}

/* ─── Smart List ─── */
.home-smart-zone {
  margin-top: 18px;
}
.sl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 12px;
}
.sl-head-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.sl-head-title::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16A34A;
  animation: sl-pulse 1.8s ease-out infinite;
}
@keyframes sl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.65); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.sl-head-meta {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.sl-head-meta b {
  color: var(--ink-900);
  font-weight: 900;
}

.smart-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* List item — base */
.sl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.08s;
}
.sl-item:active { transform: translateY(0.5px); }

/* High urgency · lemon tint + left stripe */
.sl-item.urgency-high {
  background: linear-gradient(135deg, var(--lemon-100) 0%, var(--lemon-50) 100%);
  border-color: var(--lemon-300);
  padding-left: 18px;
}
.sl-item.urgency-high::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  background: var(--lemon-400);
  border-radius: 0 4px 4px 0;
}

/* Low urgency · cream */
.sl-item.urgency-low {
  background: var(--cream);
  border-color: var(--line);
}

/* Icon block */
.sl-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: white;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sl-item.urgency-high .sl-icon-wrap {
  border-color: var(--lemon-300);
  box-shadow: 0 1px 0 rgba(245,197,24,0.30);
}
.sl-icon { font-size: 20px; line-height: 1; }

/* Content */
.sl-content { flex: 1; min-width: 0; }
.sl-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sl-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900);
  color: var(--lemon-400);
  font-size: 10px;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  font-variant-numeric: tabular-nums;
}
.sl-meta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.sl-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--lemon-200);
  color: var(--ink-900);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 10px;
  border: 1px solid var(--lemon-300);
  font-variant-numeric: tabular-nums;
}
.sl-time-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lemon-400);
  border: 1px solid var(--ink-900);
}
.sl-sep { opacity: 0.4; }

/* Status text for low urgency */
.sl-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  opacity: 0.6;
  width: 100px;
  text-align: center;
}

/* Action button · Ink Pill style (LEMON brand contrast) */
.sl-btn {
  width: 100px;
  height: 38px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.12s, transform 0.08s;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900);
  color: var(--lemon-400);
  border: none;
  border-radius: 999px;
}
.sl-btn:hover { background: #2A2521; }
.sl-btn:active { transform: translateY(1px); }

/* Empty state */
.sl-empty {
  text-align: center;
  padding: 36px 20px;
  background: var(--cream);
  border: 1.5px dashed var(--line-2);
  border-radius: 18px;
}
.sl-empty-emoji {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 8px;
  opacity: 0.85;
}
.sl-empty-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.sl-empty-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.65;
}

/* ═══════════════════════════════════════════════════════════════════
   /set-receipt · ข้อมูลใบเสร็จ
   ═══════════════════════════════════════════════════════════════════
   Form for editing tax ID + address + footer message that appear on
   the customer receipt. Includes a live preview that updates as the
   user types so they can see exactly what shows on receipts. */

.form-textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.setrcpt-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--cream);
  border-radius: 12px;
}
.setrcpt-toggle-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-900);
}

/* Live preview · styled like a thermal-printer receipt */
.setrcpt-preview {
  background: white;
  border: 1.5px dashed var(--line-2);
  border-radius: 14px;
  padding: 18px 20px;
  font-family: "SF Mono", "Menlo", "Courier New", monospace;
  text-align: center;
  margin-top: 6px;
}
.setrcpt-prev-shop {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  font-family: -apple-system, "Helvetica Neue", "Noto Sans Thai", sans-serif;
}
.setrcpt-prev-tax {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 4px;
}
.setrcpt-prev-addr {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 6px;
  line-height: 1.45;
  font-family: -apple-system, "Helvetica Neue", "Noto Sans Thai", sans-serif;
}
.setrcpt-prev-divider {
  border-top: 1px dashed var(--line-2);
  margin: 8px 0;
}
.setrcpt-prev-body {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-500);
  font-style: italic;
  padding: 12px 0;
  font-family: -apple-system, "Helvetica Neue", "Noto Sans Thai", sans-serif;
}
.setrcpt-prev-footer {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-900);
  margin-top: 4px;
  font-family: -apple-system, "Helvetica Neue", "Noto Sans Thai", sans-serif;
  line-height: 1.5;
}

/* Customer receipt · address style for live receipt page */
.cust-rcpt-addr {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  text-align: center;
  margin: 4px 0 6px;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════
   /faq · คำถามที่พบบ่อย
   ═══════════════════════════════════════════════════════════════════
   Vertical accordion. One item open at a time. */
.faq-intro {
  background: linear-gradient(135deg, var(--lemon-100), var(--lemon-50));
  border: 1.5px solid var(--lemon-300);
  border-radius: 18px;
  padding: 16px 18px;
  margin: 8px 16px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq-intro-emoji {
  font-size: 32px;
  line-height: 1;
}
.faq-intro-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.faq-intro-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.75;
}

.faq-list {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.faq-item.open {
  border-color: var(--lemon-300);
  box-shadow: 0 2px 0 rgba(245,197,24,0.18);
}
.faq-q {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.faq-q:active { background: var(--cream); }
.faq-q-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--lemon-400);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-q-text {
  flex: 1;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.faq-q-chev {
  flex-shrink: 0;
  color: var(--ink-700);
  opacity: 0.5;
  transition: transform 0.25s;
}
.faq-item.open .faq-q-chev {
  transform: rotate(180deg);
  opacity: 1;
}
.faq-a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  line-height: 1.65;
  padding: 0 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease;
}
.faq-item.open .faq-a {
  max-height: 400px;
  opacity: 1;
  padding: 0 16px 16px;
  border-top: 1px dashed var(--line-2);
  padding-top: 12px;
}

.faq-foot {
  margin: 24px 16px 32px;
  padding: 16px;
  background: var(--cream);
  border: 1.5px dashed var(--line-2);
  border-radius: 14px;
  text-align: center;
}
.faq-foot-title {
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.faq-foot-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.7;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   /about · เกี่ยวกับ LEMON Go
   ═══════════════════════════════════════════════════════════════════
   Hero banner · mission · stats · links · credit. Static screen. */
.about-hero {
  text-align: center;
  padding: 24px 24px 20px;
  background: linear-gradient(180deg, var(--lemon-50), white);
}
.about-logo {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 14px rgba(245,197,24,0.4));
}
.about-name {
  font-size: 28px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.04em;
  margin-bottom: 4px;
}
.about-tag {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-700);
  margin-bottom: 12px;
}
.about-version {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  background: var(--ink-900);
  color: var(--lemon-400);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

.about-mission {
  margin: 0 16px 16px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}
.about-mission-cap {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--ink-700);
  opacity: 0.55;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.about-mission-body {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.65;
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 0 16px 16px;
}
.about-stat {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}
.about-stat-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.about-stat-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-700);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.about-links {
  margin: 0 16px 16px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.about-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--line);
}
.about-link:last-child { border-bottom: none; }
.about-link:active { background: var(--cream); }
.about-link-icon {
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--lemon-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.about-link-text { flex: 1; min-width: 0; }
.about-link-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 1px;
}
.about-link-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-500);
  opacity: 0.85;
}
.about-link-arr {
  flex-shrink: 0;
  color: var(--ink-700);
  opacity: 0.4;
}

.about-credit {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.7;
  margin: 18px 16px 32px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   /faq · ENHANCED — search + category pills + counter + highlight
   ═══════════════════════════════════════════════════════════════════
   Builds on the basic .faq-* styles already defined. New parts:
     · .faq-search-wrap     — search bar with icon + clear button
     · .faq-pills           — horizontal scrollable category pills
     · .faq-counter         — result count beneath pills
     · .faq-mark            — highlights matched search query in q/a
     · .faq-q-cat           — small emoji badge showing item category
                              (only visible when "ทั้งหมด" is active)
     · .faq-empty           — friendly no-results state with reset CTA
*/

/* ─── Search bar ─── */
.faq-search-wrap {
  margin: 0 16px 12px;
  position: relative;
  display: flex;
  align-items: center;
}

/* Sticky header wrapper · keeps search + pills visible while scrolling
 * the long FAQ list. Background covers content scrolling beneath it.
 * Inner elements (search-wrap / pills / counter) have their own margins
 * so this wrapper just provides the sticky behavior + background. */
.faq-sticky-head {
  position: sticky;
  top: 0;
  background: var(--cream);
  z-index: 20;
  padding: 8px 0 4px;
  /* Subtle bottom shadow appears once content scrolls under */
  box-shadow: 0 4px 6px -4px rgba(28,25,23,0);
  transition: box-shadow 0.2s;
}
.faq-sticky-head.scrolled {
  box-shadow: 0 4px 6px -4px rgba(28,25,23,0.12);
}
.faq-search-icon {
  position: absolute;
  left: 14px;
  color: var(--ink-700);
  opacity: 0.5;
  pointer-events: none;
}
.faq-search-input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 38px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.faq-search-input::placeholder {
  color: var(--ink-500);
  opacity: 0.7;
  font-weight: 600;
}
.faq-search-input:focus {
  border-color: var(--lemon-400);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.18);
}
/* Hide native ✕ in webkit search input */
.faq-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
}
.faq-search-clear {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink-900);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
}
.faq-search-clear:hover { background: #2A2521; }

/* ─── Category pills ─── */
/* ─── Category pills ─── 
   Wrap into multiple rows instead of horizontal scroll · scroll on mobile
   inside an iframe / inside the iPhone-frame mockup is unreliable (touch
   panning often gets captured by the outer scroll container). Wrapping
   guarantees all pills are visible without any scroll trick. */
.faq-pills {
  margin: 4px 16px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.faq-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-900);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  white-space: nowrap;
  /* No flex-shrink:0 needed since we wrap · no overflow:hidden risk */
}
.faq-pill:hover { background: var(--cream); }
.faq-pill:active { transform: translateY(0.5px); }
.faq-pill.active {
  background: var(--lemon-400);
  border-color: var(--ink-900);
  /* Removed box-shadow that caused phantom-overlap appearance with
   * adjacent pills in tight scroll containers · use a slightly heavier
   * border instead which doesn't take outside space. */
  border-width: 2px;
  padding: 7px 13px; /* compensate for thicker border so size stays equal */
}
.faq-pill-emoji {
  font-size: 14px;
  line-height: 1;
}
.faq-pill-count {
  font-size: 10px;
  font-weight: 900;
  background: rgba(0,0,0,0.10);
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  color: var(--ink-900);
}
.faq-pill.active .faq-pill-count {
  background: var(--ink-900);
  color: var(--lemon-400);
}

/* ─── Result counter ─── */
.faq-counter {
  margin: 0 22px 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-700);
  opacity: 0.65;
  letter-spacing: 0.02em;
}

/* ─── Category badge (when "ทั้งหมด" active, show small emoji on each) ─── */
.faq-q-cat {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}

/* ─── Highlighted search match ─── */
.faq-mark {
  background: linear-gradient(180deg, transparent 60%, var(--lemon-300) 60%, var(--lemon-300) 90%, transparent 90%);
  color: var(--ink-900);
  font-weight: 900;
  padding: 0 1px;
  border-radius: 0;
}

/* ─── Empty state ─── */
.faq-empty {
  text-align: center;
  padding: 36px 20px;
  background: var(--cream);
  border: 1.5px dashed var(--line-2);
  border-radius: 16px;
}
.faq-empty-emoji {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0.85;
}
.faq-empty-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.faq-empty-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.65;
  line-height: 1.5;
  margin-bottom: 14px;
}
.faq-empty-cta {
  font-size: 11px;
  font-weight: 900;
  padding: 8px 18px;
  background: var(--ink-900);
  color: var(--lemon-400);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.faq-empty-cta:hover { background: #2A2521; }

/* ═══════════════════════════════════════════════════════════════════
   /set-holidays · วันหยุดร้าน
   ═══════════════════════════════════════════════════════════════════
   Status card · preset chips · manual add · sortable list */

/* ─── Status card at top ─── */
.hol-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  margin-bottom: 6px;
  border: 1.5px solid var(--line);
}
.hol-status.active {
  background: linear-gradient(135deg, #FEE2E2, #FEF3F2);
  border-color: #FCA5A5;
}
.hol-status.upcoming {
  background: linear-gradient(135deg, var(--lemon-100), var(--lemon-50));
  border-color: var(--lemon-300);
}
.hol-status.empty {
  background: var(--cream);
  border-color: var(--line);
}
.hol-status-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
.hol-status-text { flex: 1; min-width: 0; }
.hol-status-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.hol-status-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.75;
  line-height: 1.4;
}

/* ─── Preset chips row ─── */
.hol-presets-row {
  margin-top: 22px;
}
.hol-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.hol-preset-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 12px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s, border-color 0.12s;
}
.hol-preset-chip:hover { background: var(--lemon-50); border-color: var(--lemon-300); }
.hol-preset-chip:active { transform: translateY(0.5px); }
.hol-preset-chip::before {
  content: '+';
  font-size: 11px;
  font-weight: 900;
  color: var(--ink-900);
  position: absolute;
  display: none; /* hidden — using cleaner chip without leading + */
}
.hol-preset-name {
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.hol-preset-date {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.7;
}
.hol-presets-empty {
  width: 100%;
  text-align: center;
  padding: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.6;
  background: var(--cream);
  border-radius: 12px;
}

/* ─── Manual add row ─── */
.hol-add-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.hol-date-input {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.hol-add-btn {
  width: 100%;
  height: 42px;
  background: var(--ink-900);
  color: var(--lemon-400);
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: background 0.12s, transform 0.08s;
}
.hol-add-btn:hover  { background: #2A2521; }
.hol-add-btn:active { transform: translateY(1px); }

/* ─── List section header with clear-past button ─── */
.hol-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hol-clear-btn {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-700);
  background: transparent;
  border: 1.5px solid var(--line);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.hol-clear-btn:hover { background: var(--cream); border-color: var(--line-2); }

/* ─── List ─── */
.hol-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hol-list-cap {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--ink-700);
  opacity: 0.6;
  text-transform: uppercase;
  margin: 8px 4px 4px;
}
.hol-list-cap.muted { opacity: 0.4; margin-top: 14px; }

.hol-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.hol-row:hover { background: var(--cream); }
.hol-row.today {
  background: linear-gradient(135deg, #FEE2E2, #FEF3F2);
  border-color: #FCA5A5;
}
.hol-row.past {
  opacity: 0.55;
  background: var(--cream);
}
.hol-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--lemon-50);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.hol-row.today .hol-row-icon {
  background: white;
  border-color: #FCA5A5;
}
.hol-row.past .hol-row-icon {
  background: white;
  border-color: var(--line);
}
.hol-row-info { flex: 1; min-width: 0; }
.hol-row-name {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.hol-row-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.hol-row-del {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-700);
  opacity: 0.5;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, opacity 0.12s, color 0.12s;
}
.hol-row-del:hover {
  background: #FEE2E2;
  color: #DC2626;
  opacity: 1;
}

/* ─── Empty state when no holidays at all ─── */
.hol-empty {
  text-align: center;
  padding: 32px 20px;
  background: var(--cream);
  border: 1.5px dashed var(--line-2);
  border-radius: 14px;
}
.hol-empty-emoji { font-size: 36px; line-height: 1; margin-bottom: 8px; opacity: 0.85; }
.hol-empty-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.hol-empty-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.65;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME · holiday banner
   ═══════════════════════════════════════════════════════════════════
   Prominent alert at top of home when today is a closure day. */
.home-hol-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #FEE2E2, #FEF3F2);
  border: 1.5px solid #FCA5A5;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.12s;
  box-shadow: 0 2px 8px -4px rgba(220, 38, 38, 0.20);
}
.home-hol-banner:active { transform: translateY(0.5px); }
.home-hol-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.home-hol-text { flex: 1; min-width: 0; }
.home-hol-title {
  font-size: 13px;
  font-weight: 900;
  color: #991B1B;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.home-hol-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: #B91C1C;
  opacity: 0.85;
  line-height: 1.4;
}
.home-hol-arr {
  flex-shrink: 0;
  color: #991B1B;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════
   /set-preorder · ONLINE QR PANEL
   ═══════════════════════════════════════════════════════════════════
   Section in /set-preorder that lets merchant generate + share an
   online QR / link distinct from the in-shop walk-in QR. */

.online-qr-panel {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.online-qr-card {
  background: linear-gradient(180deg, white, var(--lemon-50));
  border: 1.5px solid var(--lemon-300);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.online-qr-card-cap {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--ink-700);
  opacity: 0.6;
  text-transform: uppercase;
}
.online-qr-img {
  width: 168px;
  height: 168px;
  background: white;
  padding: 8px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.online-qr-img canvas, .online-qr-img img, .online-qr-img svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.online-qr-link-box {
  display: flex;
  width: 100%;
  gap: 6px;
}
.online-qr-link {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: "SF Mono", "Menlo", monospace;
  color: var(--ink-700);
  outline: none;
}
.online-qr-link:focus { border-color: var(--lemon-400); }
.online-qr-copy {
  height: 36px;
  padding: 0 14px;
  background: var(--ink-900);
  color: var(--lemon-400);
  border: none;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s;
}
.online-qr-copy:hover { background: #2A2521; }
.online-qr-help {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.7;
  text-align: center;
  line-height: 1.5;
  width: 100%;
}

.online-qr-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.online-qr-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.5;
}
.online-qr-rule b { font-weight: 900; }
.online-qr-rule-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lemon-300);
  color: var(--ink-900);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOMER · context banners on /cust-shop
   ═══════════════════════════════════════════════════════════════════
   Two variants: online-mode info, holiday/closure warning. Inserted
   above the shop hero by _renderCustShopBanners. */
.cust-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid;
}
.cust-banner-online {
  background: linear-gradient(135deg, var(--lemon-100), var(--lemon-50));
  border-color: var(--lemon-300);
}
.cust-banner-closed {
  background: linear-gradient(135deg, #FEE2E2, #FEF3F2);
  border-color: #FCA5A5;
}
.cust-banner-emoji { font-size: 26px; line-height: 1; flex-shrink: 0; }
.cust-banner-text { flex: 1; min-width: 0; }
.cust-banner-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  line-height: 1.3;
}
.cust-banner-closed .cust-banner-title { color: #991B1B; }
.cust-banner-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.85;
  line-height: 1.4;
}
.cust-banner-closed .cust-banner-sub { color: #B91C1C; }

/* ═══════════════════════════════════════════════════════════════════
   CUSTOMER · pickup time slot picker
   ═══════════════════════════════════════════════════════════════════
   Visible only in online mode on /cust-info. Vertical-flowing chips. */
.cust-pickup-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.cust-pickup-chip {
  min-width: 64px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink-900);
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.cust-pickup-chip:hover { background: var(--cream); }
.cust-pickup-chip:active { transform: translateY(0.5px); }
.cust-pickup-chip.active {
  background: var(--ink-900);
  color: var(--lemon-400);
  border-color: var(--ink-900);
}
.cust-pickup-empty {
  padding: 16px;
  background: var(--cream);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-700);
  text-align: center;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 1B · MULTI-BRANCH UI
   ═══════════════════════════════════════════════════════════════════
   Three pieces:
     1. .branch-chip          → compact chip in home top bar
     2. .branch-sheet-row     → bottom sheet for fast switching
     3. .branches-* / .branch-row — the /branches management screen */

/* ─── 1. Home branch chip ─── */
.branch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--lemon-100);
  border: 1.5px solid var(--lemon-300);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-900);
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.12s, transform 0.08s;
  width: fit-content;
}
.branch-chip:hover { background: var(--lemon-200); }
.branch-chip:active { transform: translateY(0.5px); }
.branch-chip-ic { color: var(--ink-700); flex-shrink: 0; }
.branch-chip-name {
  letter-spacing: -0.01em;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branch-chip-count {
  font-size: 10px;
  font-weight: 900;
  background: var(--ink-900);
  color: var(--lemon-400);
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.branch-chip-chev { color: var(--ink-700); opacity: 0.6; flex-shrink: 0; }

/* ─── 2. Branch sheet rows (bottom sheet) ─── */
.branch-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  margin-bottom: 6px;
  transition: background 0.12s;
}
.branch-sheet-row:hover { background: var(--cream); }
.branch-sheet-row.active {
  background: linear-gradient(135deg, var(--lemon-100), var(--lemon-50));
  border-color: var(--lemon-300);
}
.branch-sheet-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--lemon-50);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.branch-sheet-row.active .branch-sheet-icon {
  background: white;
  border-color: var(--lemon-300);
}
.branch-sheet-info { flex: 1; min-width: 0; }
.branch-sheet-name {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.branch-sheet-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branch-sheet-tag {
  font-size: 10px;
  font-weight: 900;
  background: var(--ink-900);
  color: var(--lemon-400);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ─── 3. /branches screen ─── */

/* Billing summary card */
.branches-billing {
  background: linear-gradient(180deg, var(--ink-900), #2A2521);
  color: white;
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 8px;
  box-shadow: 0 4px 16px -8px rgba(28,25,23,0.30);
}
.branches-billing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.branches-billing-cap {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--lemon-400);
  opacity: 0.8;
  text-transform: uppercase;
}
.branches-billing-amt {
  font-size: 26px;
  font-weight: 900;
  color: white;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.branches-billing-per {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.7;
  margin-left: 4px;
}
.branches-billing-detail {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  margin-top: 8px;
}
.branches-billing-plan {
  background: var(--lemon-400);
  color: var(--ink-900);
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.branches-billing-hint {
  font-size: 11px;
  font-weight: 700;
  color: var(--lemon-300);
  opacity: 0.9;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.15);
}

/* Branch list */
.branches-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.branch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 14px;
}
.branch-row.active {
  background: linear-gradient(135deg, var(--lemon-100), var(--lemon-50));
  border-color: var(--lemon-300);
}
.branch-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--lemon-50);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.branch-row.active .branch-row-icon {
  background: white;
  border-color: var(--lemon-300);
}
.branch-row-info { flex: 1; min-width: 0; }
.branch-row-name {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.branch-row-meta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-500);
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branch-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.branch-row-tag {
  font-size: 10px;
  font-weight: 900;
  background: var(--ink-900);
  color: var(--lemon-400);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.branch-row-switch {
  font-size: 11px;
  font-weight: 900;
  background: var(--ink-900);
  color: var(--lemon-400);
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.branch-row-switch:hover { background: #2A2521; }
.branch-row-edit, .branch-row-del {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink-700);
  opacity: 0.5;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, opacity 0.12s, color 0.12s;
}
.branch-row-edit:hover {
  background: var(--cream);
  opacity: 1;
}
.branch-row-del:hover {
  background: #FEE2E2;
  color: #DC2626;
  opacity: 1;
}

/* Add new branch card */
.branches-add-card {
  background: var(--cream);
  border: 1.5px dashed var(--line-2);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.branches-add-cost {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
}
.branch-cost-row {
  display: flex;
  justify-content: space-between;
  color: var(--ink-700);
}
.branch-cost-total {
  color: var(--ink-900);
  font-weight: 900;
}
.branches-add-btn {
  width: 100%;
  height: 42px;
  background: var(--ink-900);
  color: var(--lemon-400);
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: background 0.12s, transform 0.08s;
}
.branches-add-btn:hover { background: #2A2521; }
.branches-add-btn:active { transform: translateY(1px); }
.branches-add-btn:disabled {
  background: var(--line-2);
  color: var(--ink-500);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 3 · NETWORK VIEW (cross-branch dashboard)
   ═══════════════════════════════════════════════════════════════════
   Hero · top performer · per-branch cards · activity feed.
   Colors lean lemon (warm) for hero + cream/white for cards. */

/* ─── Period selector pills ─── */
.network-period-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.network-period-pill {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-900);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.network-period-pill:hover { background: var(--cream); }
.network-period-pill:active { transform: translateY(0.5px); }
.network-period-pill.active {
  background: var(--ink-900);
  color: var(--lemon-400);
  border-color: var(--ink-900);
}

/* ─── Hero card ─── */
.network-hero {
  background: linear-gradient(180deg, var(--lemon-100), var(--lemon-50) 60%, white);
  border: 1.5px solid var(--lemon-300);
  border-radius: 22px;
  padding: 20px 22px;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px -8px rgba(245, 197, 24, 0.30);
}
.network-hero-cap {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--ink-700);
  opacity: 0.6;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.network-hero-amt {
  font-size: 44px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.network-hero-amt .currency {
  font-size: 24px;
  font-weight: 900;
  color: var(--ink-700);
  margin-right: 2px;
  vertical-align: 8px;
}
.network-hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(28,25,23,0.15);
  margin-bottom: 8px;
}
.network-hero-meta > div { text-align: center; }
.network-hero-meta .lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-700);
  opacity: 0.7;
  margin-bottom: 2px;
}
.network-hero-meta .val {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.network-delta {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.network-delta-up    { background: #DCFCE7; color: #166534; }
.network-delta-down  { background: #FEE2E2; color: #991B1B; }
.network-delta-flat  { background: var(--cream); color: var(--ink-700); }

/* ─── Top performer call-out ─── */
.network-top {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--ink-900), #2A2521);
  color: white;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px -8px rgba(28,25,23,0.30);
}
.network-top-emoji {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(245,197,24,0.30));
}
.network-top-text { flex: 1; min-width: 0; }
.network-top-cap {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--lemon-400);
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 2px;
}
.network-top-name {
  font-size: 16px;
  font-weight: 900;
  color: white;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.network-top-meta {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}
.network-top-meta b { color: var(--lemon-400); font-weight: 900; }

/* ─── Per-branch breakdown cards ─── */
.network-branches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.network-branch-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.network-branch-card:hover { background: var(--cream); }
.network-branch-card:active { transform: translateY(0.5px); }
.network-branch-card.current {
  background: linear-gradient(135deg, var(--lemon-50), white);
  border-color: var(--lemon-300);
}
.network-branch-rank {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--lemon-400);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.network-branch-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.network-branch-row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.network-branch-name {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.network-branch-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  background: var(--ink-900);
  color: var(--lemon-400);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.network-branch-amt {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.network-branch-row2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.network-branch-meta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.75;
}
.network-branch-share {
  font-size: 10.5px;
  font-weight: 900;
  color: var(--ink-900);
}
.network-branch-bar {
  height: 4px;
  background: rgba(28,25,23,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.network-branch-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lemon-400), var(--lemon-300));
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Activity feed ─── */
.network-feed {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
}
.network-feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.12s;
}
.network-feed-row:last-child { border-bottom: none; }
.network-feed-row:hover { background: var(--cream); }
.network-feed-time {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-500);
  width: 50px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.network-feed-mid {
  flex: 1;
  min-width: 0;
}
.network-feed-branch {
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.network-feed-id {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.network-feed-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.network-feed-badge.cooking  { background: #FEF3C7; color: #92400E; }
.network-feed-badge.waiting  { background: #FEE2E2; color: #991B1B; }
.network-feed-badge.ready    { background: #DBEAFE; color: #1E40AF; }
.network-feed-badge.done     { background: #DCFCE7; color: #166534; }
.network-feed-badge.preorder { background: var(--lemon-100); color: var(--ink-900); border: 1px solid var(--lemon-300); }
.network-feed-amt {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.network-feed-empty,
.network-empty {
  text-align: center;
  padding: 36px 20px;
  background: var(--cream);
  border: 1.5px dashed var(--line-2);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.65;
}

/* ─── Branch sheet · secondary CTA variant for "📊 ทุกสาขา" ─── */
.cat-sheet-cta-secondary {
  background: white !important;
  color: var(--ink-900) !important;
  border: 1.5px solid var(--line) !important;
  margin-bottom: 8px;
}
.cat-sheet-cta-secondary:hover { background: var(--cream) !important; }

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 · LOGIN · TENANT LOOKUP
   ═══════════════════════════════════════════════════════════════════
   Pin shake feedback for wrong PIN, demo accounts hint card on OTP
   step 1 so testers know which seeded tenants to log in as. */

/* ─── Pin dots shake animation · plays on wrong PIN ─── */
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
.pin-dots.pin-shake {
  animation: pin-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.pin-dots.pin-shake .pin-dot.filled {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
}

/* ─── Demo accounts hint card (OTP step 1) ─── */
.login-demo-card {
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--lemon-50), var(--cream));
  border: 1.5px dashed var(--lemon-300);
  border-radius: 14px;
}
.login-demo-title {
  font-size: 10px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.login-demo-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 700;
  border-bottom: 1px dashed rgba(28,25,23,0.10);
}
.login-demo-row:last-of-type { border-bottom: none; }
.login-demo-name {
  color: var(--ink-900);
  font-weight: 800;
}
.login-demo-phone {
  color: var(--ink-700);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.login-demo-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(28,25,23,0.08);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-700);
  text-align: center;
}
.login-demo-hint b {
  color: var(--ink-900);
  font-weight: 900;
  background: white;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* OTP cell filled state (matches existing typography but adds emphasis) */
.otp-cell.filled {
  background: var(--lemon-50);
  border-color: var(--lemon-400);
  color: var(--ink-900);
  font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6 · PWA INSTALL BUTTON (in /about)
   ═══════════════════════════════════════════════════════════════════
   Lemon-themed call-out · stands out from the regular about-link rows
   because it's the strategic CTA (PWA install = no App Store cut). */

.about-link-install {
  background: linear-gradient(135deg, var(--lemon-100), var(--lemon-50)) !important;
  border: 1.5px solid var(--lemon-300) !important;
  position: relative;
}
.about-link-install::after {
  /* Subtle "available" pulse when the prompt is captured */
  content: '';
  position: absolute;
  top: 12px;
  right: 36px;
  width: 8px;
  height: 8px;
  background: var(--lemon-500);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.4);
  display: none;
}
.about-link-install.install-available::after {
  display: block;
  animation: install-pulse 2s ease-out infinite;
}
@keyframes install-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(245, 197, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}
.about-link-install .about-link-icon {
  background: white !important;
  border: 1.5px solid var(--lemon-300) !important;
}
.about-link-install:hover {
  background: linear-gradient(135deg, var(--lemon-200), var(--lemon-100)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 4A · PORTAL LINK INSIDE APP
   ═══════════════════════════════════════════════════════════════════
   The "Manage subscription" link appears inside the /branches billing
   card · it opens portal.html in a new tab to avoid the App Store/
   Play Store cut on subscription revenue (Hybrid model). */

.branches-billing-portal {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.15);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--lemon-300);
  letter-spacing: -0.01em;
  text-align: center;
}
.branches-billing-portal b {
  color: var(--lemon-400);
  font-weight: 900;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 4C · APP STORE COMPLIANT SUBSCRIPTION UI
   ═══════════════════════════════════════════════════════════════════
   Text-only links (no clickable redirect to portal payment) · home
   subscription state banners (trial countdown, past-due, canceled). */

/* ─── /about · text-only portal mention (was clickable, now not) ─── */
.about-link-portal {
  background: var(--cream) !important;
  border: 1.5px dashed var(--line-2) !important;
  cursor: default !important;
}
.about-link-portal:hover { background: var(--cream) !important; }
.about-link-portal .about-link-icon {
  background: white !important;
  border: 1.5px solid var(--line) !important;
}
.about-link-portal .about-link-sub {
  line-height: 1.5;
}
.about-link-portal .about-link-sub b {
  color: var(--ink-900);
  font-weight: 900;
  background: white;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* ─── Home · subscription state banner ─── */
.home-sub-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1.5px solid;
}
.home-sub-banner-warn {
  background: linear-gradient(135deg, var(--lemon-100), var(--lemon-50));
  border-color: var(--lemon-300);
  box-shadow: 0 2px 8px -4px rgba(245,197,24,0.20);
}
.home-sub-banner-urgent {
  background: linear-gradient(135deg, #FEE2E2, #FEF3F2);
  border-color: #FCA5A5;
  box-shadow: 0 2px 8px -4px rgba(220,38,38,0.20);
}
.home-sub-banner-info {
  background: var(--cream);
  border-color: var(--line-2);
}
.home-sub-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.home-sub-text { flex: 1; min-width: 0; }
.home-sub-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
  color: var(--ink-900);
}
.home-sub-banner-urgent .home-sub-title { color: #991B1B; }
.home-sub-msg {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  opacity: 0.85;
  line-height: 1.5;
}
.home-sub-banner-urgent .home-sub-msg { color: #B91C1C; }
.home-sub-msg b {
  font-weight: 900;
  color: var(--ink-900);
  background: white;
  padding: 1px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  letter-spacing: 0.01em;
}
.home-sub-banner-urgent .home-sub-msg b {
  color: #991B1B;
  border-color: #FCA5A5;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 7B · WELCOME + STAFF-BIND
   ═══════════════════════════════════════════════════════════════════
   3-button welcome screen for first-time device · staff-bind screen
   for entering shopCode. Both reuse login-screen background decoration. */

.welcome-screen, .staff-bind-screen {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

.welcome-body {
  padding: 60px 24px 32px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
  z-index: 1;
}

.welcome-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.welcome-tag {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--ink-500);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 32px;
}
.welcome-headline {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
  text-align: center;
}
.welcome-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: center;
}

.welcome-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
  margin-bottom: 10px;
  text-align: left;
}
.welcome-card:hover { border-color: var(--ink-900); transform: translateY(-1px); }
.welcome-card:active { transform: translateY(0); }
.welcome-card-emoji {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--lemon-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.welcome-card-text { flex: 1; min-width: 0; }
.welcome-card-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin-bottom: 2px;
}
.welcome-card-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-500);
  line-height: 1.4;
}
.welcome-card-arr {
  color: var(--ink-300);
  flex-shrink: 0;
}

/* ─── Staff bind screen ─── */
.staff-bind-body {
  padding: 24px 24px 40px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
  z-index: 1;
}
.staff-bind-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  cursor: pointer;
  color: var(--ink-700);
}
.staff-bind-back:hover { border-color: var(--ink-900); color: var(--ink-900); }
.staff-bind-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 30px;
  letter-spacing: -0.025em;
}
.staff-bind-headline {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
  text-align: center;
}
.staff-bind-headline em {
  color: var(--lemon-600);
  font-style: normal;
}
.staff-bind-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: 28px;
  text-align: center;
  line-height: 1.5;
}

.staff-bind-input-wrap {
  display: flex;
  justify-content: center;
}
.staff-bind-input {
  width: 100%;
  max-width: 240px;
  height: 64px;
  padding: 0 16px;
  background: white;
  border: 2px solid var(--line);
  border-radius: 14px;
  font-size: 26px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.16em;
  font-family: inherit;
  color: var(--ink-900);
  outline: none;
  transition: border-color 0.12s;
  font-variant-numeric: tabular-nums;
}
.staff-bind-input:focus { border-color: var(--lemon-500); }
.staff-bind-input::placeholder { color: var(--ink-300); letter-spacing: 0.12em; }
.staff-bind-shake { animation: bind-shake 0.4s; border-color: #DC2626 !important; }
@keyframes bind-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.staff-bind-error {
  font-size: 12px;
  font-weight: 700;
  color: #DC2626;
  text-align: center;
  margin: 8px 0 18px;
  min-height: 16px;
}

.staff-bind-cta {
  width: 100%;
  height: 52px;
  background: var(--ink-900);
  color: var(--lemon-400);
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  transition: background 0.12s, transform 0.08s;
}
.staff-bind-cta:hover { background: #2A2521; }
.staff-bind-cta:active { transform: translateY(1px); }

.staff-bind-hint {
  background: var(--lemon-50);
  border: 1.5px dashed var(--lemon-300);
  border-radius: 12px;
  padding: 14px 16px;
}
.staff-bind-hint-cap {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.staff-bind-hint-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 0;
}
.staff-bind-hint-row code {
  background: white;
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 900;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 7C · /set-staff multi-staff CRUD + /staff-edit + /audit-log
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Shop code card ─── */
.staff-shopcode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--lemon-50) 0%, white 100%);
  border: 1.5px solid var(--lemon-300);
  border-radius: 14px;
  margin-bottom: 8px;
}
.staff-shopcode-display {
  flex: 1;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.staff-shopcode-regen {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-700);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}
.staff-shopcode-regen:hover { border-color: var(--ink-900); color: var(--ink-900); }
.staff-shopcode-regen:active { transform: translateY(1px); }
.staff-shopcode-hint {
  font-size: 11.5px;
  color: var(--ink-500);
  line-height: 1.5;
  margin-bottom: 8px;
  font-weight: 600;
}

/* ─── Staff list count badge ─── */
.staff-list-count {
  font-size: 10px;
  font-weight: 800;
  background: var(--ink-100);
  color: var(--ink-700);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
}

/* ─── Staff card ─── */
.staff-list { display: flex; flex-direction: column; gap: 8px; }
.staff-list-empty {
  padding: 22px 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-500);
  font-weight: 600;
  background: var(--cream);
  border: 1.5px dashed var(--line);
  border-radius: 12px;
}
.staff-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.staff-card[data-staff-card]:hover { border-color: var(--ink-900); transform: translateY(-1px); }
.staff-card[data-staff-card]:active { transform: translateY(0); }
.staff-card.archived {
  opacity: 0.65;
  background: var(--cream);
  cursor: default;
}
.staff-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lemon-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-900);
  flex-shrink: 0;
}
.staff-card.archived .staff-card-avatar { background: var(--ink-100); }
.staff-card-text { flex: 1; min-width: 0; }
.staff-card-name {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.staff-card-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
  margin-bottom: 2px;
}
.staff-card-sub {
  font-size: 10.5px;
  color: var(--ink-400);
  font-weight: 600;
}
.staff-card-arr { color: var(--ink-300); flex-shrink: 0; }
.staff-card-restore {
  background: white;
  border: 1.5px solid var(--lemon-400);
  color: var(--ink-900);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.staff-card-restore:hover { background: var(--lemon-50); }

/* ─── Add staff button (full-width CTA) ─── */
.staff-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 14px;
  background: var(--ink-900);
  color: var(--lemon-400);
  border: none;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, transform 0.08s;
}
.staff-add-btn:hover { background: #2A2521; }
.staff-add-btn:active { transform: translateY(1px); }
.staff-add-plus { font-size: 16px; line-height: 1; }

/* ─── Archive (collapsible) ─── */
.staff-archive {
  margin-top: 18px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.staff-archive-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  color: var(--ink-700);
}
.staff-archive-summary::-webkit-details-marker { display: none; }
.staff-archive-arr { transition: transform 0.2s; color: var(--ink-400); }
.staff-archive[open] .staff-archive-arr { transform: rotate(180deg); }
.staff-archive-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
}
.staff-archive-empty {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-400);
  font-weight: 600;
}

/* ─── Staff edit form ─── */
.staff-edit-pin-wrap {
  display: flex;
  gap: 8px;
}
.staff-edit-pin-wrap .form-input { flex: 1; min-width: 0; letter-spacing: 0.16em; font-weight: 900; font-size: 18px; }
.staff-edit-pin-gen {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--lemon-50);
  border: 1.5px solid var(--lemon-300);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: all 0.12s;
}
.staff-edit-pin-gen:hover { background: var(--lemon-100); border-color: var(--lemon-500); }
.staff-edit-pin-gen:active { transform: translateY(1px); }

.staff-edit-branch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.staff-edit-branch-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.staff-edit-branch-row:has(input:checked) {
  border-color: var(--lemon-500);
  background: var(--lemon-50);
}
.staff-edit-branch-cb {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--lemon-500);
  cursor: pointer;
  flex-shrink: 0;
}
.staff-edit-branch-text { flex: 1; min-width: 0; }
.staff-edit-branch-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 1px;
}
.staff-edit-branch-addr {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
}

/* ─── Danger zone ─── */
.staff-edit-danger { margin-top: 8px; }
.staff-edit-delete-btn {
  width: 100%;
  padding: 12px;
  background: white;
  border: 1.5px solid #FCA5A5;
  border-radius: 10px;
  color: #B91C1C;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 4px;
  transition: background 0.12s;
}
.staff-edit-delete-btn:hover { background: #FEF2F2; }

/* ═══════════════════ RBAC v8 · Phase 5 · /staff-edit ═══════════════════
 *
 * New CSS for the v8 staff-edit form · 3 visual modules:
 *
 *   1. Role picker  · 3 cards in a column · selected = lemon border + ✓
 *   2. Cap list     · 9 toggle rows · LEMON yellow (not green) when on
 *   3. Status row   · active/suspended toggle · cream pill, ink-900 border
 *
 * Tokens used (from :root):
 *   --lemon-400 = #F5C518   (primary brand · selected card border + on-toggle)
 *   --lemon-500 = #E5B00A   (deeper lemon · check mark, ink contrast)
 *   --lemon-50  = #FFFBEB   (selected card background · soft yellow)
 *   --cream     = #FAF8F0   (default card surface)
 *   --line-2    = #E8E2CF   (default card border · neutral)
 *   --ink-900   = #1C1917   (text + on-toggle text)
 *   --ink-500/700 = subtitle/muted text
 *
 * Why LEMON yellow toggles (not the default green --success-500):
 *   The cap list is brand-styled · matches the selected role card
 *   border · gives a single visual rhythm down the form. Status toggle
 *   keeps green because "active" is genuinely a positive on/off state.
 * ─────────────────────────────────────────────────────────────────── */

/* ─── Role picker · stacked card list ─── */
.staff-edit-role-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.staff-edit-role-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: white;
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.staff-edit-role-card:hover { border-color: var(--ink-700); }
.staff-edit-role-card:active { transform: translateY(1px); }
.staff-edit-role-card.selected {
  background: var(--lemon-50);
  border-color: var(--lemon-400);
  box-shadow: 0 0 0 2.5px var(--lemon-200);
}
.staff-edit-role-card .ic {
  font-size: 24px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}
.staff-edit-role-card .body {
  flex: 1;
  min-width: 0;
}
.staff-edit-role-card .tt {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.staff-edit-role-card .st {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-500);
  line-height: 1.4;
}
.staff-edit-role-card .ck {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lemon-400);
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(229,176,10,0.35);
}

/* ─── Cap list · 9 rows · ic + label + LEMON yellow toggle ─── */
.staff-edit-cap-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.staff-edit-cap-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.staff-edit-cap-row:hover { border-color: var(--ink-700); }
.staff-edit-cap-row:active { background: var(--lemon-50); }
.staff-edit-cap-row .ic {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.staff-edit-cap-row .label {
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-900);
  min-width: 0;
}
/* LEMON yellow toggle · scoped override of default green ·
 * inside .staff-edit-cap-row only, so .staff-perm-row (set-staff)
 * keeps its green-when-on appearance unchanged. */
.staff-edit-cap-row .staff-perm-toggle.on {
  background: var(--lemon-400);
}
.staff-edit-cap-row .staff-perm-toggle.on::after {
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}

/* ─── Status row · active vs suspended toggle ─── */
.staff-edit-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: white;
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  margin-bottom: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.staff-edit-status-row.suspended {
  background: #FAFAF9;
  border-color: var(--line);
  opacity: 0.92;
}
.staff-edit-status-row.suspended .staff-edit-status-ic {
  filter: grayscale(1);
  opacity: 0.55;
}
.staff-edit-status-ic {
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  transition: filter 0.15s, opacity 0.15s;
}
.staff-edit-status-text {
  flex: 1;
  min-width: 0;
}
.staff-edit-status-label {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 2px;
}
.staff-edit-status-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
  line-height: 1.4;
}
/* Status toggle keeps green-when-on (success state · "active") ·
 * inherits .staff-perm-toggle defaults · no override needed. */

/* ─── Audit log filter pills ─── */
.audit-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.audit-pill {
  padding: 6px 12px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-700);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.audit-pill:hover { border-color: var(--ink-900); }
.audit-pill.active {
  background: var(--ink-900);
  color: var(--lemon-400);
  border-color: var(--ink-900);
}

/* ─── Audit list rows ─── */
.audit-list { display: flex; flex-direction: column; gap: 6px; }
.audit-empty {
  padding: 28px 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-500);
  font-weight: 600;
}
.audit-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.audit-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.audit-body { flex: 1; min-width: 0; }
.audit-msg {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 2px;
}
.audit-msg b {
  font-weight: 900;
  color: var(--ink-900);
}
.audit-meta {
  font-size: 10.5px;
  color: var(--ink-400);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* v7.1 · welcome customer hint · replaces the "ฉันเป็นลูกค้า" button.
 * Customers don't download the merchant app · they reach the system
 * by scanning the QR at the shop, which opens customer.html. The
 * hint reassures any customer who accidentally landed here. */
.welcome-customer-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--lemon-50);
  border: 1px dashed var(--lemon-300);
  border-radius: 12px;
  margin-top: 14px;
}
.welcome-customer-hint-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.welcome-customer-hint-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-700);
  line-height: 1.4;
  flex: 1;
}
.welcome-customer-hint-text b {
  font-weight: 900;
  color: var(--ink-900);
}

/* ═══════════ v7.2 · Staff suspend toggle ═══════════
 * Three visual states for staff cards:
 *   .staff-card             → active · normal
 *   .staff-card.is-suspended → temporarily blocked · dimmed + badge
 *   .staff-card.archived    → soft-deleted · in archive section
 * The toggle button sits to the right of the card body, before the
 * chevron. Clicking it stops propagation so it doesn't open edit. */
.staff-card.is-suspended {
  opacity: 0.55;
  background: var(--ink-50);
}
.staff-card.is-suspended .staff-card-avatar {
  background: var(--line-2);
  color: var(--ink-600);
}
.staff-card-badge-pause {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--ink-200);
  color: var(--ink-800);
  border-radius: 6px;
  vertical-align: middle;
}
.staff-card-toggle {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 6px 4px;
  margin-right: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.staff-card-toggle-track {
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--ink-300);
  position: relative;
  transition: background 0.15s ease;
}
.staff-card-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: left 0.15s ease;
}
.staff-card-toggle.is-on .staff-card-toggle-track {
  background: var(--lemon-500);
}
.staff-card-toggle.is-on .staff-card-toggle-knob {
  left: 16px;
}
.staff-card-toggle:focus-visible {
  outline: 2px solid var(--lemon-400);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   v7.3 · STAFF PICKER ON LOGIN SCREEN
   ═══════════════════════════════════════════════════════════════════
   When a device is bound as staff (deviceBinding.bindAs === 'staff')
   the login screen shows this picker FIRST so the user identifies who
   they are before entering a PIN. Without this, the daily PIN screen
   defaulted to the OWNER's name + avatar which made staff think they
   needed the owner's PIN. After picking a staff, the existing data-
   step="quick" view appears with that staff's name+avatar, and only
   that staff's PIN (or owner-PIN as escape hatch) authenticates.
   ─────────────────────────────────────────────────────────────────── */

/* Headline mirrors .welcome-headline style for visual continuity with
 * the rest of the onboarding flow. <em> is the lemon highlight. */
.staff-pick-headline {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin-top: 18px;
  margin-bottom: 6px;
  text-align: center;
  color: var(--ink-900);
}
.staff-pick-headline em {
  font-style: normal;
  color: var(--lemon-500);
}
.staff-pick-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Vertical stack of staff cards · scrolls if many staff */
.staff-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-height: 380px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 4px 2px;
}
.staff-pick-list::-webkit-scrollbar { width: 0; }

/* Individual staff card · pattern echoes .welcome-card from the
 * welcome screen so the visual language stays consistent. Tap target
 * is the whole card. */
.staff-pick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, transform 0.08s, background 0.12s;
}
.staff-pick-card:hover {
  border-color: var(--ink-900);
  transform: translateY(-1px);
}
.staff-pick-card:active { transform: translateY(0); }
.staff-pick-card-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--lemon-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink-900);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.staff-pick-card-text {
  flex: 1;
  min-width: 0;
}
.staff-pick-card-name {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-pick-card-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-pick-card-arr {
  flex-shrink: 0;
  color: var(--ink-700);
  opacity: 0.4;
}

/* Empty list (tenant has no active staff yet) — small notice with CTA */
.staff-pick-empty {
  text-align: center;
  padding: 28px 18px;
  background: var(--cream);
  border: 1.5px dashed var(--line-2);
  border-radius: 14px;
  color: var(--ink-700);
}
.staff-pick-empty-emoji { font-size: 36px; margin-bottom: 8px; opacity: 0.7; }
.staff-pick-empty-title { font-size: 13px; font-weight: 900; color: var(--ink-900); margin-bottom: 4px; }
.staff-pick-empty-sub { font-size: 11px; font-weight: 700; opacity: 0.65; line-height: 1.5; }

/* Footer links · "ฉันคือเจ้าของร้าน" + "เปลี่ยนร้าน" · matches the
 * .quick-foot pattern below the keypad on the PIN view. */
.staff-pick-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 700;
}
.staff-pick-foot-link {
  color: var(--ink-700);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  letter-spacing: 0.02em;
  transition: background 0.12s, color 0.12s;
}
.staff-pick-foot-link:hover {
  background: var(--cream);
  color: var(--ink-900);
}

/* Back-to-picker link in the PIN view (data-step="quick") · only
 * shown when a staff was selected, hidden for owner-bound devices.
 * Sits above the brand row so it reads as "you're in the staff PIN
 * screen, tap to go back". */
.quick-back-to-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-700);
  background: rgba(28,25,23,0.04);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  margin-bottom: 14px;
  width: fit-content;
  transition: background 0.12s, color 0.12s;
  letter-spacing: 0.01em;
}
.quick-back-to-picker:hover {
  background: var(--lemon-50);
  color: var(--ink-900);
}
.quick-back-to-picker:active {
  transform: translateY(1px);
}

/* ─── DEMO PIN HINT CARD ───
 * Bottom-of-screen card shown ONLY when bound to a demo tenant so
 * testers know which PIN to type. Hidden in production / for any
 * user-created tenant. Content swaps based on context:
 *   - On staff picker view → list all PINs (staff + owner)
 *   - On PIN view (staff selected) → "PIN ของน้องเอ คือ 556 677"
 *   - On PIN view (owner) → "PIN เจ้าของ คือ 123 456"
 * Lemon-tinted dashed border to read as "demo aid" not real content. */
.login-demo-pin-hint {
  margin: 18px 18px 8px 18px;
  background: var(--lemon-50);
  border: 1.5px dashed var(--lemon-300);
  border-radius: 14px;
  padding: 12px 14px;
}
.login-demo-pin-cap {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.75;
}
.login-demo-pin-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.login-demo-pin-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-900);
  padding: 2px 0;
}
.login-demo-pin-row .name {
  color: var(--ink-700);
  font-weight: 700;
}
.login-demo-pin-row .pin {
  background: white;
  padding: 2px 9px;
  border-radius: 5px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.login-demo-pin-row.highlight .pin {
  background: var(--lemon-200);
  box-shadow: 0 1px 0 rgba(28,25,23,0.20);
}