:root {
  --green: #1F4D2B; --green-2: #2C6A3C; --yellow: #F2B632; --red: #C8321E;
  --ink: #1A1A17; --muted: #6A6E64; --line: #E3E4DA; --bg: #F6F7F2; --card: #FFFFFF;
  --wa: #178A45;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Figtree", system-ui, sans-serif; font-size: 16px; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.top { background: var(--green); color: #fff; display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 18px; margin-right: auto; }
.brand small { display: block; font-weight: 500; font-size: 12px; opacity: .75; }
.tabs { display: flex; gap: 6px; background: rgba(0,0,0,.2); padding: 4px; border-radius: 12px; }
.tabs button { border: 0; background: none; color: #fff; font-weight: 700; padding: 8px 14px; border-radius: 9px; cursor: pointer; min-height: 44px; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--green); }
.wrap { max-width: 760px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.card :focus-visible { outline-color: var(--green); }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field label { font-weight: 700; font-size: 14px; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
.btn { border: 0; background: var(--green); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: none; color: var(--green); border: 1px solid var(--line); }
.btn-wa { background: var(--wa); }
.top .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.banner { background: var(--yellow); color: var(--ink); padding: 10px 16px; font-weight: 700; text-align: center; }
.banner-red { background: var(--red); color: #fff; }
.banner-ok { background: #DCEFD9; color: var(--green); }
.banner a { color: inherit; }
.muted { color: var(--muted); font-size: 14px; }
.err { color: var(--red); font-size: 14px; min-height: 1em; }
.ok { color: var(--green); font-size: 14px; min-height: 1em; }
.info { color: var(--muted); font-size: 14px; min-height: 1em; }
.list { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.row .grow { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--line); }
.badge-ok { background: #DCEFD9; color: var(--green); }
.badge-warn { background: #FBE9BF; }
.badge-bad { background: #F6D5CF; color: var(--red); }
[hidden] { display: none !important; }

/* ===== Customer QR ordering page (order.html) — scoped to body.order-page ===== */
.order-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; }
.order-page.has-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.order-page.sheet-open { overflow: hidden; }
.order-page .op-head { background: var(--green); color: #fff; padding: 18px 16px 16px; }
.order-page .op-head-in, .order-page .op-main, .order-page .op-chips-in, .order-page .op-bar-in { max-width: 640px; margin: 0 auto; }
.order-page .op-shop { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.order-page .op-where { display: inline-block; margin: 8px 0 0; padding: 4px 12px; border-radius: 99px; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 14px; }
.order-page .op-chips { position: sticky; top: 0; z-index: 20; background: rgba(246,247,242,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.order-page .op-chips-in { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; scroll-snap-type: x proximity; }
.order-page .op-chips-in::-webkit-scrollbar { display: none; }
.order-page .op-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; scroll-snap-align: start; }
.order-page .op-chip.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.order-page .op-main { width: 100%; flex: 1; padding: 12px 16px 24px; }
.order-page .op-loading { padding: 32px 0; text-align: center; font-size: 16px; }
.order-page .op-closed { margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; background: #FBE9BF; color: var(--ink); font-weight: 700; line-height: 1.4; }
.order-page #menu-msg:empty { display: none; }
.order-page .op-empty { padding: 32px 0; text-align: center; color: var(--muted); }
.order-page .op-cat { scroll-margin-top: 72px; margin-top: 12px; }
.order-page .op-cat-title { margin: 8px 0 10px; font-size: 19px; font-weight: 800; }
.order-page .op-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.order-page .op-item { display: flex; gap: 12px; align-items: center; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.order-page .op-item-text { flex: 1; min-width: 0; }
.order-page .op-item-name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.order-page .op-item-desc { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.order-page .op-item-price { margin: 6px 0 0; font-weight: 800; color: var(--green); }
.order-page .op-item-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.order-page .op-add { min-height: 44px; min-width: 88px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--green); color: #fff; font-weight: 800; cursor: pointer; transition: transform .12s ease; }
.order-page .op-add:active { transform: scale(.96); }
.order-page .op-add.is-added { animation: op-pop .3s ease; }
@keyframes op-pop { 50% { transform: scale(1.08); } }
.order-page .op-incart { font-size: 13px; font-weight: 800; color: var(--green); background: #DCEFD9; padding: 2px 10px; border-radius: 99px; }
.order-page .op-btn { min-height: 48px; padding: 0 20px; border-radius: 12px; font-weight: 800; font-size: 16px; }
.order-page .op-btn-full { width: 100%; }
.order-page .op-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(26,26,23,.08); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.order-page .op-bar-in { display: flex; align-items: center; gap: 12px; }
.order-page .op-bar-sum { flex: 1; display: grid; line-height: 1.2; min-width: 0; }
.order-page .op-bar-count { color: var(--muted); font-size: 14px; }
.order-page .op-bar-total { font-size: 20px; font-weight: 800; }
.order-page .op-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(26,26,23,.45); }
.order-page .op-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; background: var(--bg); border-radius: 18px 18px 0 0; max-width: 640px; margin: 0 auto; animation: op-up .22s ease-out; }
@keyframes op-up { from { transform: translateY(24px); opacity: 0; } }
.order-page .op-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.order-page .op-h2 { margin: 0; font-size: 19px; font-weight: 800; }
.order-page .op-h2:focus { outline: none; }
.order-page .op-icon-btn { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.order-page .op-sheet-body { overflow-y: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.order-page .op-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.order-page .op-line { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.order-page .op-line-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.order-page .op-line-name { min-width: 0; overflow-wrap: anywhere; }
.order-page .op-line-price { white-space: nowrap; }
.order-page .op-line-qty { color: var(--green); font-weight: 800; }
.order-page .op-line-note { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.order-page .op-line-static { padding: 10px 12px; }
.order-page .op-line-ctl { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.order-page .op-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.order-page .op-step { width: 44px; height: 44px; border: 0; background: none; font-size: 22px; font-weight: 800; color: var(--green); cursor: pointer; }
.order-page .op-step:disabled { opacity: .35; cursor: not-allowed; }
.order-page .op-qty { min-width: 28px; text-align: center; font-weight: 800; }
.order-page .op-note { flex: 1 1 160px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; }
.order-page .op-review { margin-bottom: 14px; }
.order-page .field input { min-height: 48px; font-size: 16px; }
.order-page .op-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 2px 4px; }
.order-page .op-sum-big strong { font-size: 22px; font-weight: 800; }
.order-page #send-msg { margin: 6px 0 10px; line-height: 1.4; }
.order-page #send-msg:empty { margin: 0; }
.order-page .op-fatal { padding: 32px 0; }
.order-page .op-fatal-card, .order-page .op-status-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 16px; margin-bottom: 14px; }
.order-page .op-fatal-card { text-align: center; }
.order-page .op-fatal-text { margin: 0 0 16px; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.order-page .op-status { padding-top: 8px; }
.order-page .op-status-card:first-child { text-align: center; }
.order-page .op-pill { display: inline-block; margin: 0 0 12px; padding: 8px 16px; border-radius: 99px; font-size: 16px; font-weight: 800; line-height: 1.35; }
.order-page .op-pill-wait { background: #ECEDE6; color: var(--ink); }
.order-page .op-pill-wait::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--muted); vertical-align: 1px; animation: op-breathe 1.2s ease-in-out infinite; }
.order-page .op-pill:focus { outline: none; }
.order-page .op-pill:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.order-page .op-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.order-page .op-pill-ok { background: #DCEFD9; color: var(--green); }
.order-page .op-pill-bad { background: #F6D5CF; color: var(--red); }
@keyframes op-breathe { 50% { opacity: .25; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .order-page .op-sheet, .order-page .op-add.is-added, .order-page .op-pill-wait::before { animation: none; } }
.order-page .op-big { font-size: 48px; font-weight: 800; letter-spacing: .02em; color: var(--green); line-height: 1.1; margin: 4px 0 8px; }
.order-page .op-big-label { font-size: 22px; color: var(--muted); }
.order-page .op-status-note { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.order-page #st-info:empty { display: none; }
.order-page .op-actions { display: grid; gap: 10px; margin-top: 14px; }
.order-page .op-actions:empty { display: none; }
.order-page .op-foot { text-align: center; padding: 18px 16px 24px; color: var(--muted); font-size: 13px; font-weight: 700; }
.order-page .op-foot span { font-weight: 500; }
.order-page button, .order-page a { touch-action: manipulation; }
.order-page .op-note { padding: 8px 10px; } .order-page .op-note::placeholder { font-size: 14px; }
/* Language switch (BM | EN | 中文) */
.order-page:lang(zh) { font-family: "Figtree", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
.order-page .op-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.order-page .op-head-row .op-where { margin: 0; }
.order-page .op-lang { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 14px; background: rgba(0,0,0,.22); }
.order-page .op-lang-btn { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: rgba(255,255,255,.86); font-size: 14px; font-weight: 800; letter-spacing: .02em; cursor: pointer; }
.order-page .op-lang-btn[aria-pressed="true"] { background: #fff; color: var(--green); }
/* Food photos */
.order-page .op-item.has-img { align-items: flex-start; }
.order-page .op-thumb { flex: 0 0 72px; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #ECEDE6; cursor: zoom-in; }
.order-page .op-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.order-page .op-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.order-page .op-item-row .op-item-price { margin: 0; }
.order-page .op-item-row .op-item-act { flex-direction: row; align-items: center; }
.order-page .op-illus { margin: 14px 2px 0; color: var(--muted); font-size: 12px; }
.order-page .op-photo-backdrop { z-index: 60; }
.order-page .op-photo { position: fixed; isolation: isolate; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90vw, 480px); max-height: 92vh; max-height: 92dvh; overflow-y: auto; background: var(--card); border-radius: 18px; box-shadow: 0 18px 50px rgba(26,26,23,.28); animation: op-zoom .18s ease-out; }
@keyframes op-zoom { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }
.order-page .op-photo-img { position: relative; aspect-ratio: 1 / 1; background: #ECEDE6; }
.order-page .op-photo-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.order-page .op-photo.is-broken .op-photo-img { display: none; }
.order-page .op-photo-close { position: absolute; z-index: 1; top: 10px; right: 10px; background: rgba(255,255,255,.94); border-color: transparent; }
.order-page .op-photo.is-broken .op-photo-close { position: static; float: right; margin: 10px 10px 0 12px; border-color: var(--line); }
.order-page .op-photo.is-broken .op-photo-body { padding-top: 16px; }
.order-page .op-photo-body { padding: 14px 16px 16px; }
.order-page .op-photo-body .op-h2 { overflow-wrap: anywhere; }
.order-page .op-photo-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.order-page .op-photo-foot .op-item-price { margin: 0 auto 0 0; font-size: 18px; }
.order-page .op-photo-illus { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .order-page .op-photo { animation: none; } }

/* ---------- POS ---------- */
/* Staff POS views (Pesanan, Meja & Bil) and their dialogs. Tabs row scrolls sideways on phones. */
.tabs { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 900px) { .top .tabs { order: 3; flex: 1 1 100%; } }
.pos-badge { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 99px; background: var(--red); color: #fff; font-size: 12px; line-height: 20px; text-align: center; vertical-align: 1px; }
.pos-view button, .pos-dlg button { touch-action: manipulation; min-height: 44px; }
.pos-btn-big { min-height: 48px; padding: 0 20px; font-size: 16px; }
.pos-btn-danger { background: var(--red); }
.pos-btn-reject, .pos-btn-void { color: var(--red); }
.pos-btn-accept { min-width: 120px; font-size: 17px; }
.pos-h2 { font-size: 18px; margin: 20px 0 10px; }
.pos-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pos-sync { color: var(--muted); font-size: 13px; font-weight: 700; }
.pos-start { border-color: var(--yellow); background: #FFF8E6; }
.pos-start p { margin-top: 0; }
.pos-empty { padding: 18px; text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: 12px; margin: 0; }
.pos-note-txt { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 99px; background: #FBE9BF; color: var(--ink); font-size: 14px; font-weight: 700; }
.pos-row-btn { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pos-row-btn:disabled { cursor: not-allowed; opacity: .6; }
.pos-btn-pay { pointer-events: none; }
.pos-warn { background: #FBE9BF; padding: 10px 12px; border-radius: 10px; font-weight: 700; }

/* QR open switch */
.pos-pill { font-weight: 800; padding: 8px 14px; border-radius: 99px; background: #ECEDE6; color: var(--muted); }
.pos-pill.is-on { background: #DCEFD9; color: var(--green); }
.pos-switch { position: relative; width: 68px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; }
.pos-switch::before { content: ""; position: absolute; left: 2px; right: 2px; top: 6px; height: 32px; border-radius: 99px; background: #C9CBC0; transition: background .15s; }
.pos-switch .pos-knob { position: absolute; top: 9px; left: 5px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.pos-switch[aria-checked="true"]::before { background: var(--green-2); }
.pos-switch[aria-checked="true"] .pos-knob { transform: translateX(32px); }
.pos-switch:disabled { opacity: .5; cursor: not-allowed; }

/* Incoming order cards */
.pos-orders { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pos-order { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--green-2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.pos-order.is-new { border-color: var(--yellow); border-left-color: var(--red); background: #FFF8E6; animation: pos-flash 1s ease-in-out 3; }
@keyframes pos-flash { 50% { box-shadow: 0 0 0 4px rgba(242,182,50,.6); } }
.pos-order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pos-place { font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.pos-time { color: var(--muted); font-weight: 700; white-space: nowrap; }
.pos-order-items, .pos-ob-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 16px; }
.pos-order-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.pos-sub { grid-column: 1 / -1; }

/* Tables grid */
.pos-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pos-view .pos-table { min-height: 88px; border-radius: 14px; border: 1px solid var(--line); background: #ECEDE6; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-weight: 700; padding: 8px; }
.pos-table-no { font-size: 18px; font-weight: 800; color: var(--ink); }
.pos-view .pos-table.is-open { background: var(--green); border-color: var(--green); color: #fff; }
.pos-table.is-open .pos-table-no { color: #fff; }
.pos-table-amt { font-size: 15px; }
.pos-table-wait { font-size: 12px; background: var(--yellow); color: var(--ink); border-radius: 99px; padding: 1px 8px; }

/* Bill detail */
.pos-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pos-detail-title { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.pos-ob { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fff; }
.pos-ob.is-wait { background: #FFF8E6; border-color: #F2D48A; }
.pos-ob-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pos-ob-sub { margin-left: auto; }
.pos-ob-items li { display: flex; justify-content: space-between; gap: 12px; }
.pos-li-name { min-width: 0; overflow-wrap: anywhere; }
.pos-ob-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.pos-bill-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; padding: 12px 2px; border-top: 2px solid var(--ink); margin-top: 8px; }
.pos-bill-total strong { font-size: 26px; }
.pos-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) { .pos-detail-actions .btn { flex: 1 1 100%; } }

/* Dialogs */
.pos-dlg { border: 0; padding: 0; border-radius: 16px; width: min(480px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); background: var(--bg); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.pos-dlg[open] { display: flex; flex-direction: column; }
.pos-dlg::backdrop { background: rgba(26,26,23,.5); }
.pos-dlg-wide { width: min(980px, calc(100vw - 24px)); height: calc(100vh - 24px); height: calc(100dvh - 24px); }
.pos-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.pos-dlg-title { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.pos-x { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.pos-dlg-body { padding: 16px; overflow-y: auto; flex: 1; min-height: 0; }
.pos-dlg-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.pos-intro { margin: 0 0 12px; }
.pos-choices { display: grid; gap: 8px; margin-bottom: 12px; }
.pos-choice { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 700; cursor: pointer; }
.pos-choice input { width: 20px; height: 20px; accent-color: var(--green); }

/* Menu picker */
.pos-dlg-wide .pos-dlg-body { padding: 0; display: flex; overflow: hidden; }
.pos-pick { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; flex: 1; min-height: 0; width: 100%; }
.pos-pick-menu { padding: 12px 16px; overflow-y: auto; min-height: 0; }
.pos-pick-cart { display: flex; flex-direction: column; min-height: 0; max-height: 45vh; max-height: 45dvh; background: #fff; border-top: 1px solid var(--line); }
@media (min-width: 720px) {
  .pos-pick { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr; }
  .pos-pick-cart { max-height: none; border-top: 0; border-left: 1px solid var(--line); }
}
.pos-search { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; }
.pos-cat { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pos-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pos-pick-item { min-height: 64px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.pos-pick-item:active { background: #DCEFD9; }
.pos-pick-item.is-off { opacity: .6; }
.pos-pick-name { font-weight: 700; overflow-wrap: anywhere; }
.pos-pick-price { color: var(--green); font-weight: 800; font-size: 14px; }
.pos-h3 { margin: 0; padding: 12px 16px 8px; font-size: 16px; }
.pos-lines { list-style: none; margin: 0; padding: 0 16px 8px; overflow-y: auto; flex: 1; min-height: 0; display: grid; gap: 8px; align-content: start; }
.pos-line { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.pos-line-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.pos-line-name { min-width: 0; overflow-wrap: anywhere; }
.pos-line-ctl { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pos-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.pos-step { width: 44px; height: 44px; border: 0; background: none; font-size: 22px; font-weight: 800; color: var(--green); cursor: pointer; }
.pos-step:disabled { opacity: .35; cursor: not-allowed; }
.pos-qty { min-width: 28px; text-align: center; font-weight: 800; }
.pos-note { flex: 1 1 140px; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }
.pos-pick-foot { padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.pos-sum { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pos-sum strong { font-size: 20px; }
.pos-pick-foot .pos-btn-big { width: 100%; }

/* Pay dialog */
.pos-pay-place { margin: 0 0 6px; font-weight: 800; color: var(--muted); }
.pos-pay-total { display: flex; justify-content: space-between; align-items: baseline; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.pos-pay-total strong { font-size: 32px; font-weight: 800; }
.pos-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(0,0,0,.06); padding: 4px; border-radius: 12px; margin-bottom: 12px; }
.pos-seg button { border: 0; background: none; border-radius: 9px; font-weight: 800; min-height: 48px; cursor: pointer; }
.pos-seg button[aria-pressed="true"] { background: var(--green); color: #fff; }
.pos-dlg #pos-paid { font-size: 24px; font-weight: 800; min-height: 56px; }
.pos-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.pos-quick .btn { min-height: 48px; font-size: 16px; }
.pos-change { font-size: 22px; font-weight: 800; min-height: 1.4em; margin: 12px 0 4px; }
.pos-change.err { font-size: 18px; }
.pos-change.is-ok { color: var(--ink); }
.pos-paid-ok { font-size: 24px; font-weight: 800; color: var(--green); background: #DCEFD9; border-radius: 14px; padding: 18px 16px; text-align: center; margin: 0 0 8px; }
@media (prefers-reduced-motion: reduce) { .pos-order.is-new { animation: none; } .pos-switch::before, .pos-switch .pos-knob { transition: none; } }

/* ---------- POS Menu & QR ---------- */
.mm-cat { font-size: 15px; margin: 14px 0 6px; color: var(--muted); }
.mm-item.is-off strong, .mm-item.is-off .muted { opacity: .55; }
.mm-avail { min-width: 64px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; font-weight: 800; cursor: pointer; background: #fff; }
.mm-avail.is-on { background: #DCEFD9; color: var(--green); border-color: transparent; }
.mm-avail.is-off { background: #F6D5CF; color: #9E2414; border-color: transparent; }
.mm-avail:disabled { opacity: .5; cursor: not-allowed; }
.mm-form .err { font-size: 14px; }
.mm-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--line); }
.mm-thumb[hidden] { display: none; }
.mm-extra { margin: 4px 0 12px; }
.mm-extra summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.mm-preview img { display: block; width: 96px; height: 96px; border-radius: 10px; object-fit: cover; margin-top: 8px; }
.mm-tables { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mm-table { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-weight: 700; }
.mm-x { width: 44px; height: 44px; border: 0; background: none; font-size: 22px; color: var(--red); cursor: pointer; border-radius: 50%; }
.mm-x:disabled { opacity: .4; cursor: not-allowed; }
.mm-link { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-link input { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; }

/* ---------- POS Report ---------- */
.rp-bar { align-items: flex-end; }
.rp-date { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.rp-date input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; min-height: 44px; }
.rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.rp-stat { display: grid; gap: 4px; margin: 0; }
.rp-stat strong { font-size: 18px; }
.rp-stat .rp-big { font-size: 26px; font-weight: 800; }
.rp-share { margin: 0 0 8px; font-size: 18px; }
.rp-meter { height: 12px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.rp-meter span { display: block; height: 100%; background: var(--green); }
.rp-top { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 0; }
.rp-top-name { overflow-wrap: anywhere; }
.rp-bar-fill { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.rp-bar-fill span { display: block; height: 100%; background: var(--green); }