/* SUNRIDER Web POS - ONE-POST inspired touch UI */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --blue: #6d28d9;
  --blue-dark: #4c1d95;
  --blue-light: #f3efff;
  --blue-mid: #7c3aed;
  --amber: #f5b301;
  --green: #16a34a;
  --red: #dc2626;
  --bg: #fdfcff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #6b6478;
  --border: #cfc4ea;
  --radius: 10px;
}

html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Microsoft JhengHei", "Noto Sans CJK HK", sans-serif;
  font-size: 17px; color: var(--text); background: var(--bg);
  -webkit-user-select: none; user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; border-radius: var(--radius); transition: transform .06s, background .15s; }
button:active { transform: scale(.97); }
input, textarea, select {
  font-family: inherit; font-size: 17px; border: 2px solid var(--border);
  border-radius: 10px; padding: 11px 13px; width: 100%; background: #fff; color: var(--text);
  outline: none; -webkit-user-select: text; user-select: text;
}
input:focus, textarea:focus, select:focus { border-color: var(--blue-mid); }

/* ------------------------------------------------------------- login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(160deg, #f1ecfe 0%, #f7fafd 60%, #eaf2fb 100%); }
.login-card { width: 100%; max-width: 440px; background: var(--card); border-radius: 18px; padding: 28px 26px 24px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .14); text-align: center; }
.sr-logo { width: 78px; height: 78px; margin: 0 auto 12px; background: #c8102e; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.sr-logo svg { width: 44px; height: 28px; }
.sr-logo span { font-size: 11px; letter-spacing: 1px; font-weight: 700; margin-top: 2px; }
.login-card h1 { font-size: 21px; margin: 8px 0 2px; letter-spacing: .5px; }
.login-card .sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.pin-display { height: 60px; border-radius: 10px; background: #fbf9ff; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; font-size: 32px; }
.pin-display .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--blue); display: inline-block; }
.pin-display .placeholder { color: #94a3b8; font-size: 15px; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.numpad button { height: 70px; font-size: 26px; font-weight: 600; background: #fbf9ff; border: 2px solid var(--border); }
.numpad button.fn { font-size: 17px; color: var(--muted); }
.numpad button.ok { background: var(--green); border-color: var(--green); color: #fff; font-size: 19px; }
.numpad button.ok.wide { grid-column: 1 / -1; height: 62px; }
.numpad button.back { font-size: 22px; font-weight: 700; color: var(--blue-dark); }

/* 搜尋框清空叉 */
.search-box { position: relative; flex: 1 1 200px; display: flex; min-width: 0; }
.search-box input { width: 100%; padding-right: 40px; }
.clear-x { position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: none; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: #cbd5e1; color: #1f2937; font-size: 15px;
  font-weight: 800; line-height: 1; cursor: pointer; padding: 0; }
.clear-x:active { background: #94a3b8; }
input:not(:placeholder-shown) ~ .clear-x { display: flex; }
.cust-pick .clear-x { right: 6px; }
.login-error { color: var(--red); font-size: 14px; min-height: 20px; margin-top: 10px; }

/* -------------------------------------------------------------- header */
.pos-header {
  height: 62px; background: var(--blue-light); border-bottom: 3px solid var(--blue);
  display: flex; align-items: center; gap: 10px; padding: 0 14px; position: sticky; top: 0; z-index: 30;
}
.clock { display: flex; flex-direction: column; line-height: 1.05; }
.clock .time { font-family: "SF Mono", Menlo, monospace; font-size: 26px; font-weight: 800; color: var(--blue-dark); letter-spacing: 1px; }
.clock .date { font-size: 12px; color: #475569; font-weight: 600; }
.brand { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 10px; font-weight: 800; font-size: 17px; color: var(--blue-dark); }
.brand .sr-mini { width: 30px; height: 30px; background: #c8102e; border-radius: 5px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .3px; }
.nav-tabs { display: flex; gap: 6px; }
.nav-tab { height: 42px; padding: 0 16px; font-size: 15px; font-weight: 700; background: #fff;
  border: 2px solid #ddd3f7; color: var(--blue-dark); white-space: nowrap; }
.nav-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.nav-tab.is-hidden { display: none; }
.auth-badge { font-size: 12px; background: #dcfce7; color: #166534; padding: 6px 10px; border-radius: 999px;
  font-weight: 700; white-space: nowrap; cursor: pointer; }

/* --------------------------------------------------------------- views */
.view { display: none; }
.view.active { display: block; }
.pos-layout { display: grid; grid-template-columns: var(--cat-w, 196px) 1fr var(--cart-w, 380px);
  /* 以前寫死 132px，同實際 head(62)+bar(60) 差 10px → 底欄上方露白邊 */
  height: calc(var(--ui-h, 100vh) - var(--head-h, 62px) - var(--bar-h, 60px)); overflow: hidden; }
.left-pane { overflow-y: auto; padding: 12px 14px 24px; min-width: 0; }

/* left category sidebar */
.pos-layout { position: relative; }
.cat-resizer { position: absolute; top: 0; bottom: 0; left: var(--cat-w, 196px); width: 9px;
  transform: translateX(-4px); cursor: col-resize; z-index: 12; }
.cat-resizer::after, .cart-resizer::after { content: ""; position: absolute; top: 14px; bottom: 14px; left: 3px; width: 4px;
  border-radius: 3px; background: rgba(109, 40, 217, .18); transition: background .15s; }
.cat-resizer:hover::after, .cart-resizer:hover::after,
body.col-resizing .cat-resizer::after, body.col-resizing .cart-resizer::after { background: rgba(109, 40, 217, .62); }
body.col-resizing { cursor: col-resize; user-select: none; }

/* 購物車拖軸：貼喺購物車左邊界，同分類欄拖軸一樣邏輯 */
.cart-resizer { position: absolute; top: 0; bottom: 0; left: calc(100% - var(--cart-w, 380px)); width: 9px;
  transform: translateX(-4px); cursor: col-resize; z-index: 12; }
/* 購物車收起時拖軸一齊收埋 */
.pos-layout.cart-collapsed .cart-resizer { display: none; }
@media (max-width: 1000px) { .cat-resizer, .cart-resizer { display: none; } }
.cat-side { background: #fff; border-right: 2px solid var(--border); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cat-side-btn { min-height: 52px; background: #fff; border: 2px solid #ddd3f7; border-radius: 8px; color: var(--text);
  font-size: 15px; font-weight: 700; text-align: left; padding: 7px 9px; display: flex; align-items: center; gap: 7px; line-height: 1.2; }
.cat-side-btn .num { color: var(--blue); font-weight: 800; min-width: 14px; }
.cat-side-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.cat-side-btn.active .num { color: var(--amber); }
.cat-side-btn.fav { border-color: #ddd3f7; background: #faf7ff; }
.cat-side-btn.fav.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* toolbar */
.cat-pickbar { display: none; }   /* 手機專用分類條；平板／電腦唔顯示，否則同 cat-side 之間留一條空白（.phone-only 會蓋過，所以唔可以加該 class） */
.toolbar { display: flex; gap: 8px; row-gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar .search-box { flex: 1 1 200px; min-width: 0; }
.toolbar input { flex: 1; min-width: 0; }
.mode-btn { height: 44px; padding: 0 12px; font-size: 14px; font-weight: 700; background: #fff;
  border: 2px solid #ddd3f7; color: var(--blue-dark); white-space: nowrap; }
.mode-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* product grid (image mode) */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.prod-card { position: relative; background: #fff; border: 2px solid var(--border); border-radius: 12px; padding: 8px 8px 10px;
  text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.prod-card:active { border-color: var(--blue); background: #f5f2ff; }
.prod-card .thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; background: #fbf9ff; display: flex;
  align-items: center; justify-content: center; overflow: hidden; }
.prod-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.prod-card .thumb .ph { font-size: 40px; }
.prod-card .thumb .ph.init { width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; text-align: center; font-size: 15px; font-weight: 700; color: #fff;
  line-height: 1.35; padding: 10px 8px; word-break: break-word; overflow-wrap: anywhere;
  hyphens: auto; }
.prod-card .cname { font-size: 19px; font-weight: 700; line-height: 1.32; min-height: 50px; }
.prod-card .cprice { font-size: 21px; font-weight: 800; color: var(--blue); }

/* favourite star */
.star { position: absolute; top: 5px; right: 5px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 1px solid #e2e8f0; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: #cbd5e1; z-index: 3; }
.star.on { color: #f59e0b; border-color: #fcd34d; background: #fffbeb; }
.prod-row .star { position: static; width: 38px; height: 38px; background: #fff; flex: 0 0 auto; }

/* 產品編輯小按鈕（有維護授權才出現） */
.edit-btn { position: absolute; top: 5px; right: 41px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 1px solid #e2e8f0; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; }
.edit-btn:active { background: #f5f2ff; }
.prod-row .edit-btn.row { position: static; margin-left: 6px; flex: 0 0 auto; background: #fff; }

/* category grid (ONE-POST 九宮格) */
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cat-btn {
  min-height: 62px; background: #fff; border: 2px solid var(--blue); border-radius: 8px;
  font-size: 15px; font-weight: 700; color: var(--text); padding: 6px 8px; text-align: left;
  display: flex; align-items: center; gap: 6px; line-height: 1.2;
}
.cat-btn .num { color: var(--blue); font-weight: 800; }
.cat-btn.active { background: var(--blue); color: #fff; }
.cat-btn.active .num { color: var(--amber); }

.search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.search-row input { flex: 1; }

.prod-list { border: 2px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; }
.prod-row {
  display: flex; align-items: center; gap: 10px; padding: 15px 14px; border-bottom: 1px solid #e2e8f0;
  font-size: 19px; font-weight: 600; cursor: pointer;
}
.prod-row:last-child { border-bottom: none; }
.prod-row:active { background: #f1ecfe; }
.prod-row .pid { font-size: 12px; color: var(--muted); font-weight: 500; min-width: 62px; }
.prod-row .pname { flex: 1; line-height: 1.25; }
.prod-row .pprice { font-weight: 800; color: var(--blue); white-space: nowrap; text-align: right; }
.prod-row .pprice .mop, .cprice .mop, .ci-line-total .mop {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---------------------------------------------------------------- cart */
.cart-pane { background: #fff; border-left: 2px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.cart-top { padding: 12px 14px 8px; border-bottom: 1px solid var(--border); }
.cart-title { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.cart-title .count { font-size: 13px; color: var(--muted); font-weight: 600; }
.customer-row { display: flex; gap: 6px; }
.customer-row select { flex: 1; min-width: 0; font-size: 15px; padding: 9px 10px; }
.cust-pick { flex: 1; position: relative; min-width: 0; }
.cust-pick input#custPick { width: 100%; font-size: 15px; padding: 9px 34px 9px 10px; }
.cust-suggest { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: #fff; border: 2px solid var(--border); border-radius: 10px; max-height: 300px; overflow-y: auto;
  box-shadow: 0 10px 26px rgba(15,23,42,.16); }
.cust-suggest.open { display: block; }
.cust-suggest button { display: block; width: 100%; min-width: 0; text-align: left; padding: 10px 12px; border: none;
  white-space: normal; line-height: 1.35; font-size: 15px;
  background: #fff; font-size: 15px; border-bottom: 1px solid #f4f1fb; cursor: pointer; }
.cust-suggest button:last-child { border-bottom: none; }
.cust-suggest button:active { background: #f5f2ff; }
.cust-suggest .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* 收起購物車 */
.cart-toggle { width: 38px; height: 38px; flex: 0 0 auto; border: 2px solid var(--border); background: #fff;
  border-radius: 9px; font-size: 17px; font-weight: 800; color: var(--blue-dark); cursor: pointer; padding: 0; }
.pos-layout.cart-collapsed { grid-template-columns: var(--cat-w, 196px) 1fr 66px; }
.cart-collapsed .cart-pane .customer-row,
.cart-collapsed .cart-pane .cart-items { display: none; }
.cart-collapsed .cart-pane .cart-title { flex-direction: column; gap: 10px; padding: 4px 0; }
.cart-collapsed .cart-pane .ct-label { writing-mode: vertical-rl; text-orientation: upright;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--muted); }
.customer-row > button { width: 46px; font-size: 20px; background: #f5f2ff; color: var(--blue); border: 2px solid #ddd3f7; }

.cart-items { flex: 1; overflow-y: auto; padding: 6px 14px; min-height: 0; }
.cart-empty { color: var(--muted); text-align: center; padding: 34px 0; font-size: 14px; }
.cart-item { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.ci-line1 { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 700; }
.ci-line2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.qty-btn { width: 46px; height: 44px; font-size: 22px; font-weight: 700; background: #f7f4fe; border: 1px solid var(--border); }
.qty-num { min-width: 30px; text-align: center; font-weight: 800; }
.ci-line-total { font-weight: 800; color: var(--blue); min-width: 74px; text-align: right; }
.ci-del { width: 40px; height: 40px; border-radius: 8px; font-size: 17px; background: #fee2e2; color: var(--red); }

.cart-bottom { border-top: 2px solid var(--border); padding: 10px 14px 14px; background: #fbf9ff; }
.total-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); padding: 3px 0; }
.total-row .val { font-weight: 700; color: var(--text); }
.checkout-btn { width: 100%; height: 62px; font-size: 21px; font-weight: 800; background: var(--green); color: #fff; margin-top: 8px; }
.checkout-btn:disabled { background: #cbd5e1; }

/* ------------------------------------------------------------ customers */
.cust-layout { display: grid; grid-template-columns: 420px 1fr; height: calc(100vh - 62px); }
.cust-list-pane { border-right: 2px solid var(--border); overflow-y: auto; background: #fff; }
.cust-toolbar { padding: 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 2; }
.cust-toolbar .search-row { margin-bottom: 8px; }
.cust-toolbar .btn-new { width: 100%; height: 46px; font-size: 16px; font-weight: 700; background: var(--blue); color: #fff; }
.cust-item { padding: 12px 14px; border-bottom: 1px solid #f4f1fb; cursor: pointer; }
.cust-item.active { background: #f1ecfe; }
.cust-item .cn { font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.cust-item .cmeta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.vip-tag { font-size: 11px; background: var(--amber); color: #4a2c00; padding: 2px 7px; border-radius: 999px; font-weight: 800; }
.cust-detail { overflow-y: auto; padding: 16px 18px 40px; }
.detail-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.detail-card h2 { font-size: 20px; margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.detail-card .code { font-size: 12px; color: var(--muted); font-weight: 600; }
.info-grid { display: grid; grid-template-columns: 96px 1fr; gap: 7px 10px; margin-top: 12px; font-size: 15px; }
.info-grid .k { color: var(--muted); font-size: 14px; }
.info-grid .v { font-weight: 600; word-break: break-all; -webkit-user-select: text; user-select: text; }
.detail-actions { display: flex; gap: 8px; margin-top: 14px; }
.detail-actions button { flex: 1; height: 46px; font-size: 15px; font-weight: 700; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-ghost { background: #f7f4fe; color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: var(--red); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.sec-title { font-size: 16px; font-weight: 800; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; }

/* --------------------------------------------------------------- orders */
.orders-wrap { height: calc(100vh - 62px); overflow-y: auto; padding: 14px 16px 70px; }
.order-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.order-card .oc-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; font-size: 16px; }
.order-card .oc-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.order-card .oc-items { font-size: 14px; color: #334155; margin-top: 6px; line-height: 1.45; }
.order-card .oc-actions { display: flex; gap: 8px; margin-top: 10px; }
.order-card .oc-actions button { height: 40px; padding: 0 14px; font-size: 14px; font-weight: 700; }
.order-card.deleted { opacity: .6; background: #fbf9ff; }

/* ---------------------------------------------------------------- modal */
.modal-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: none;
  align-items: center; justify-content: center; z-index: 100; padding: 14px; }
.modal-mask.open { display: flex; }
#receiptModal { align-items: flex-start; overflow-y: auto; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; padding: 20px; }
.modal.wide { max-width: 840px; }
.modal h2 { font-size: 20px; margin: 0 0 4px; }
.modal .hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.form-row { margin-bottom: 11px; }
.form-row label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.modal-actions { display: flex; gap: 9px; margin-top: 16px; }
.modal-actions button { flex: 1; height: 52px; font-size: 16px; font-weight: 700; }
.img-row { display: flex; gap: 12px; align-items: flex-start; }
.img-prev { width: 92px; height: 92px; border: 2px solid var(--border); border-radius: 12px;
  background: #f7f4fe; display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto; }
.img-prev img { width: 100%; height: 100%; object-fit: contain; }
.img-prev span { font-size: 12px; color: var(--muted); }
.img-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.file-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center;
  height: 42px; padding: 0 14px; font-size: 14px; cursor: pointer; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.img-hint { width: 100%; font-size: 12px; color: var(--muted); line-height: 1.4; }
.color-row { display: flex; align-items: center; gap: 8px; }
.color-row input[type=color] { width: 56px; height: 42px; padding: 2px; border: 2px solid var(--border); border-radius: 9px; background: #fff; }
.color-row .btn-ghost { height: 42px; padding: 0 12px; font-size: 14px; }
.color-row .color-auto { font-size: 12px; color: var(--muted); }
.modal-err { color: var(--red); font-size: 14px; min-height: 20px; margin-top: 6px; }

/* --------------------------------------------------------------- receipt */
.receipt-paper { background: #fff; color: #000; width: 210mm; min-height: 297mm; max-width: 100%;
  margin: 0 auto; padding: 14mm 16mm; box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "PingFang HK", sans-serif; border: 1px solid #e2e8f0; }
.receipt-paper * { -webkit-user-select: text; user-select: text; }
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid #000; padding-bottom: 10px; }
.rc-logo.custom { background: #fff; border: 1px solid #e5e7eb; }
.rc-logo.custom { padding: 4px; }
.rc-logo.custom img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.rc-phone { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.rc-logo { width: 74px; height: 74px; background: #c8102e; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; flex: 0 0 auto; }
.rc-logo svg { width: 42px; height: 26px; }
.rc-logo .word { font-size: 10px; font-weight: 800; letter-spacing: .5px; margin-top: 2px; }
.rc-company-block { flex: 1; font-size: 12px; line-height: 1.55; }
.rc-company-block .cname { font-size: 15px; font-weight: 800; letter-spacing: .5px; }
.rc-right { text-align: right; flex: 0 0 auto; }
.rc-right svg { display: block; margin-left: auto; }
.rc-right .tags { font-size: 11px; color: #222; margin-top: 2px; letter-spacing: .5px; }
.rc-title { text-align: center; font-size: 16px; font-weight: 800; letter-spacing: 6px; margin: 10px 0 12px; }
.rc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 18px; font-size: 12px; margin-bottom: 10px; }
.rc-fields .f { display: flex; gap: 6px; }
.rc-fields .f .k { color: #333; min-width: 62px; }
.rc-fields .f .v { font-weight: 700; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rc-table th { border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 5px 4px; text-align: left; font-weight: 700; }
.rc-table td { padding: 5px 4px; border-bottom: 1px dotted #bbb; }
.rc-table .num { text-align: right; white-space: nowrap; }
.rc-table .center { text-align: center; }
.rc-summary { display: flex; justify-content: flex-end; margin-top: 8px; }
.rc-summary table { font-size: 12px; border-collapse: collapse; min-width: 260px; }
.rc-summary td { padding: 3px 6px; }
.rc-summary td.k { color: #333; }
.rc-summary td.v { text-align: right; font-weight: 700; }
.rc-summary tr.grand td { border-top: 1px solid #000; font-size: 16px; font-weight: 800; color: #000; }
.rc-summary tr.grand td.k { color: #000; }
.rc-summary tr.grand + tr.grand td { border-top: none; }
.rc-foot { margin-top: 18px; text-align: center; font-size: 11px; color: #222; line-height: 1.6; }
.rc-foot .thx { font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.rc-foot .powered { margin-top: 8px; font-size: 10px; color: #555; }
.receipt-actions { display: flex; gap: 9px; width: 210mm; max-width: 100%; margin: 14px auto 0;
  position: sticky; bottom: 0; background: #f4f1fb; padding: 10px 0 12px; }
.receipt-actions button { flex: 1; height: 50px; font-size: 16px; font-weight: 700; }

/* --------------------------------------------------------- bottom bar */
.amount-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 60px; background: var(--blue-dark);
  color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 18px; z-index: 25; }
.amount-bar .cur { font-size: 21px; font-weight: 800; letter-spacing: 1px; }
.amount-bar .amt { font-family: "SF Mono", Menlo, monospace; font-size: 38px; font-weight: 800; color: var(--amber);
  line-height: 1; }
.amount-bar .cur2 { font-size: 15px; font-weight: 800; letter-spacing: 1px; color: #cbd5e1; margin-left: 8px;
  border-left: 1px solid rgba(255,255,255,.25); padding-left: 16px; }
.amount-bar .amt2 { font-family: "SF Mono", Menlo, monospace; font-size: 26px; font-weight: 700; color: #e2e8f0; }
.amount-bar .spacer { margin-left: auto; font-size: 13px; color: #cbd5e1; }
.amount-bar .qty-chip { font-size: 15px; font-weight: 700; color: #cbd5e1; letter-spacing: .5px;
  border-left: 1px solid rgba(255,255,255,.25); padding-left: 16px; margin-left: 4px; white-space: nowrap; }
.amount-bar .qty-chip b { font-size: 22px; color: #fff; margin-right: 2px; }
.amount-bar .bar-checkout { min-width: 128px; height: 46px; border: none; border-radius: 10px;
  background: var(--amber); color: #1f2937; font-size: 19px; font-weight: 800; letter-spacing: 2px;
  cursor: pointer; margin-left: 12px; }
.amount-bar .bar-checkout:disabled { background: #475569; color: #94a3b8; cursor: not-allowed; }

/* UI zoom control */
.zoom-ctrl { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap;
  white-space: nowrap; background: #fff;
  border: 2px solid var(--border); border-radius: 10px; padding: 2px 4px; }
.zoom-ctrl button { width: 42px; height: 42px; border: none; background: transparent; border-radius: 7px;
  font-size: 17px; font-weight: 800; color: var(--blue-dark); cursor: pointer; }
.zoom-ctrl button:active { background: var(--light); }
.zoom-ctrl span { display: none; }

.drag-handle { position: absolute; left: 6px; top: 6px; z-index: 3; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: rgba(109, 40, 217, .12); color: var(--blue-dark); font-size: 17px; line-height: 1;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.prod-row .drag-handle { position: static; margin-right: 6px; flex: 0 0 auto; }
.draggable.dragging { opacity: .55; outline: 2px dashed var(--blue); outline-offset: -3px; }
/* 拖動中：卡片浮起跟手指 */
.drag-lifted { box-shadow: 0 18px 40px rgba(15, 23, 42, .3); opacity: .95; transform: scale(.98) rotate(-.6deg);
  border-radius: 12px; background: #fff; pointer-events: none; }
/* 中間虛線佔位，顯示將會跌落嘅位置 */
.drag-placeholder { border-radius: 10px; border: 3px dashed var(--blue);
  background: repeating-linear-gradient(45deg, rgba(30,95,168,.14) 0 8px, rgba(30,95,168,.05) 8px 16px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.8);
  animation: phPulse 1s ease-in-out infinite; flex: 0 0 auto; }
.drag-placeholder.in-grid { animation: phPulseGrid 1.1s ease-in-out infinite; }
@keyframes phPulse { 0%,100% { opacity: .55; transform: scale(.99); } 50% { opacity: 1; transform: scale(1); } }
@keyframes phPulseGrid { 0%,100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } }
.prod-card.draggable, .prod-row.draggable { position: relative; }

/* 手機專用元素：桌面隱藏 */
.phone-only { display: none; }
.more-only { display: none; }
.more-menu { display: none; }
.amount-bar .bar-cart { align-items: center; gap: 6px; height: 46px; min-width: 74px;
  border: 2px solid rgba(255,255,255,.35); border-radius: 10px; background: rgba(255,255,255,.12);
  color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; padding: 0 12px; }
.amount-bar .bar-cart b { font-size: 17px; color: var(--amber); }
.sheet-close { width: 100%; height: 40px; border: none; background: #f3effc; color: var(--blue-dark);
  font-size: 14px; font-weight: 800; border-radius: 12px 12px 0 0; cursor: pointer; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .pos-layout { grid-template-columns: 1fr; height: auto; }
  .cat-side { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: none;
    border-bottom: 2px solid var(--border); padding: 6px; }
  .cat-side-btn { min-width: 132px; min-height: 46px; flex: 0 0 auto; }
  .cart-pane { border-left: none; border-top: 2px solid var(--border); position: sticky; bottom: 60px; max-height: 58vh;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .12); z-index: 20; }
  .cust-layout { grid-template-columns: 1fr; height: auto; }
  .cust-list-pane { border-right: none; max-height: 46vh; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand .full { display: none; }
}
@media (max-width: 1200px) {
  /* 放大縮細只縮內容文字，頂欄／分類／底欄保持固定尺寸 */
  .prod-row { font-size: calc(19px * var(--pfs, 1)); padding: calc(15px * var(--pfs, 1)) 14px; }
  .prod-row .pid { font-size: calc(12px * var(--pfs, 1)); }
  .prod-card .cname { font-size: calc(19px * var(--pfs, 1)); min-height: calc(50px * var(--pfs, 1)); }
  .prod-card .cprice { font-size: calc(21px * var(--pfs, 1)); }
  .prod-card .cprice .mop { font-size: calc(11.5px * var(--pfs, 1)); }
  .cart-pane .ci-name, .cart-pane .ci-price, .cart-pane .ci-line-total { font-size: calc(14px * var(--pfs, 1)); }
  /* A−／A＋ 一併放大縮細產品卡（圖＋字＋間距），所以一屏幾多張會跟住變 */
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(calc(170px * var(--pfs, 1)), 1fr));
    gap: calc(10px * var(--pfs, 1)); }
  .prod-card { padding: calc(8px * var(--pfs, 1)) calc(8px * var(--pfs, 1)) calc(10px * var(--pfs, 1));
    border-radius: calc(12px * var(--pfs, 1)); }
}
@media (max-width: 1000px) {
  html, body { overflow-x: hidden; }
  .pos-header { padding: 0 10px; gap: 8px; height: 52px; }
  .pos-header .clock .date { display: none; }
  .pos-header .clock .time { font-size: 19px; }
  .nav-tabs { gap: 4px; overflow-x: auto; flex-wrap: nowrap; }
  .nav-tab { min-height: 38px; padding: 0 10px; font-size: 14px; white-space: nowrap; }
  .phone-only { display: flex; }

  /* 版面：頂部分類橫向滑動 + 產品區，購物車變底部彈出 */
  .pos-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    height: calc(var(--ui-h, 100vh) - var(--head-h, 52px) - var(--bar-h, 60px)); overflow: hidden; }
  .cat-side { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 2px solid var(--border); padding: 6px; gap: 6px; min-height: 0; }
  .cat-side::-webkit-scrollbar { display: none; }
  .cat-side-btn { flex: 0 0 auto; min-width: 0; min-height: 42px; padding: 0 12px;
    font-size: 14px; white-space: nowrap; flex-direction: row; gap: 6px; }
  .left-pane { min-height: 0; }
  .toolbar { padding: 8px; gap: 6px; }
  .toolbar .search-wrap { flex: 1 1 100%; }
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(calc(140px * var(--pfs, 1)), 1fr));
    gap: calc(8px * var(--pfs, 1)); padding-bottom: calc(76px + 14px * var(--pfs, 1)); }
  .prod-card .name { font-size: 13px; }
  /* 平板／手機一樣保留 A− A＋（唔顯示百分比），唔再藏起 */
  .zoom-ctrl { display: flex; margin-left: auto; }
  .zoom-ctrl button { width: 38px; height: 40px; font-size: 17px; }
  .cart-toggle { display: none; }
  .amount-bar .bar-cart.has-items { background: var(--amber); border-color: var(--amber); color: #1f2937; }
  .amount-bar .bar-cart.has-items b { color: #1f2937; }

  /* 購物車：底部彈出 sheet */
  .cart-pane { position: fixed; left: 0; right: 0; bottom: 60px; height: 74vh; width: 100%;
    z-index: 60; border-left: none; border-radius: 16px 16px 0 0; transform: translateY(120%);
    transition: transform .24s ease; box-shadow: 0 -10px 30px rgba(15,23,42,.28); max-height: none; }
  .cart-pane { padding-bottom: 0; }
  body.phone-cart-open .cart-pane { transform: none; }
  body.phone-cart-open .phone-mask { display: block; pointer-events: auto; }
  .phone-mask { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 60px;
    background: rgba(15,23,42,.45); z-index: 55; pointer-events: none; }
  .pos-layout.cart-collapsed { grid-template-columns: 1fr; }
  .cart-collapsed .cart-pane .cart-title { flex-direction: row; }
  .cart-collapsed .cart-pane .cart-items { display: flex; }

  /* 底欄收窄 */
  .amount-bar { height: 60px; padding: 0 10px; gap: 8px; }
  .amount-bar .cur { font-size: 15px; }
  .amount-bar .amt { font-size: 28px; }
  .amount-bar .cur2, .amount-bar .amt2, .amount-bar .spacer { display: none; }
  .amount-bar .qty-chip { font-size: 13px; padding-left: 10px; }
  .amount-bar .qty-chip b { font-size: 18px; }
  .amount-bar .bar-checkout { min-width: 92px; height: 46px; font-size: 17px; margin-left: 0; }
  .cat-side, .cart-pane .cart-items { -webkit-overflow-scrolling: touch; }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(calc(190px * var(--pfs, 1)), 1fr));
    padding-bottom: calc(76px + 14px * var(--pfs, 1)); }
  .cat-side-btn { font-size: 15px; }
}
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block !important; }
  @page { size: A4 portrait; margin: 0; }
  html, body { width: 210mm; margin: 0; padding: 0; background: #fff; }
  .receipt-paper { width: 210mm; min-height: 295mm; padding: 12mm 15mm; border: none; box-shadow: none; }
}

/* ============================================================ phone ≤700 */
@media (max-width: 700px) {
  :root { --bar-h: 58px; }

  /* 頂欄：冇時鐘、冇重複按鈕，分頁 + ⋯ 選單 */
  .pos-header { height: 50px; padding: 0 8px; gap: 6px; }
  .pos-header .clock { display: none; }
  .pos-header .brand .full { display: none; }
  .pos-header .brand { flex: 0 0 auto; }
  .nav-tabs { gap: 4px; overflow: visible; flex: 1 1 auto; justify-content: flex-end; }
  .nav-tab { min-height: 36px; padding: 0 10px; font-size: 13.5px; }
  .nav-tab.phone-hide { display: none; }
  .more-btn { width: 38px; min-width: 38px; padding: 0; display: flex; align-items: center;
    justify-content: center; font-size: 20px; line-height: 1; }

  /* 頂欄跟 scroll 走；分類／常用／搜尋一行貼頂常駐 */
  .pos-header { position: static; }
  /* 注意：body 唔可以有 overflow（會令 sticky 失效，變咗 scroll container），交給 html */
  html { height: auto; overflow-x: hidden; overflow-y: auto; }
  body { height: auto; overflow: visible; }
  #view-pos.view { height: auto; overflow: visible; }
  .pos-layout { height: auto; overflow: visible; }
  .left-pane { overflow: visible; min-height: 0; }
  .prod-list { overflow: visible; max-height: none; border-bottom: none; border-radius: 0; border: none; }
  body { padding-bottom: 62px; }
  .cat-pickbar { position: sticky; top: 0; z-index: 45; background: #fff;
    padding: 6px 8px; border-bottom: 1px solid var(--border); margin: 0; }
  .cat-pickbar .cp-btn, .cat-pickbar .cp-fav { height: 42px; }
  .cat-pickbar .cp-search { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
    border: 2px solid var(--border); background: #fff; font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
  .cat-pickbar .cp-search.active { background: var(--blue); border-color: var(--blue); }
  .toolbar .search-box { display: none; }

  /* 清單內 HKD 字樣同 MOP 一樣大細，金額保持紫色 */
  .prod-row .pprice { display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    font-size: calc(11px * var(--pfs, 1)); font-weight: 800; color: var(--blue);
    white-space: nowrap; line-height: 1.35; }
  .prod-row .pprice .hkd-line { display: block; white-space: nowrap; }
  .prod-row .pprice .cur { font-size: inherit; font-weight: 800;
    letter-spacing: .3px; color: var(--blue); }
  .prod-row .pprice .mop { display: block; font-size: inherit; font-weight: 600; color: var(--muted); }
  .prod-card .cprice .hkd-line { display: block; }
  .prod-card .cprice .cur { font-size: calc(11px * var(--pfs, 1)); font-weight: 800;
    color: var(--blue); margin-right: 2px; }
  .prod-card .cprice .mop { font-size: calc(11px * var(--pfs, 1)); }

  /* 收起購物車：上下左右置中 */
  .sheet-close { display: flex; align-items: center; justify-content: center; height: 42px; }

  /* 票據彈窗：唔跟 UI 放大，保持可讀 */
  #receiptModal .modal.wide { padding: 10px 8px 0; max-width: 100%; }
  #receiptModal .receipt-paper { transform-origin: top left; }
  #receiptModal .receipt-actions { margin: 8px auto 10px; }

  /* 購物車底層：收起時完全隱藏，唔會露邊 */
  .cart-pane { visibility: hidden; transform: translateY(calc(100% + 80px)); }
  body.phone-cart-open .cart-pane { visibility: visible; transform: none; }

  .more-menu { display: none; position: fixed; top: 54px; right: 8px; z-index: 120; min-width: 166px;
    background: #fff; border: 2px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .22); padding: 6px; }
  .more-menu.open { display: flex; flex-direction: column; gap: 4px; }
  .more-menu button { height: 46px; text-align: left; padding: 0 12px; font-size: 15px; font-weight: 700;
    background: #fff; border: none; border-radius: 8px; color: var(--text); cursor: pointer; }
  .more-menu button:active { background: #f5f2ff; }
  .more-menu button.is-hidden { display: none; }

  /* 分類：唔用橫向 chips，改揀選條 + 底部面板 */
  .cat-side { display: none; }
  .pos-layout { grid-template-rows: 1fr; }
  .cat-pickbar { display: flex; gap: 6px; padding: 8px 8px 0; }
  .cat-pickbar .cp-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px;
    padding: 0 12px; background: #fff; border: 2px solid var(--border); border-radius: 10px;
    font-size: 14px; font-weight: 800; color: var(--blue-dark); cursor: pointer; }
  .cat-pickbar .cp-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cat-pickbar .cp-caret { color: var(--muted); font-size: 12px; }
  .cat-pickbar .cp-fav { flex: 0 0 auto; height: 40px; padding: 0 12px; border-radius: 10px;
    border: 2px solid var(--border); background: #fff; font-size: 13px; font-weight: 800;
    color: var(--blue-dark); cursor: pointer; }
  .cat-pickbar .cp-fav.active { background: var(--blue); border-color: var(--blue); color: #fff; }

  .cat-sheet { display: none; position: fixed; inset: 0; z-index: 130; }
  body.cat-sheet-open .cat-sheet { display: block; }
  .cat-sheet .cs-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
  .cat-sheet .cs-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; background: #fff;
    border-radius: 16px 16px 0 0; display: flex; flex-direction: column;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .28); }
  .cat-sheet .cs-head { display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .cat-sheet .cs-head b { font-size: 16px; }
  .cat-sheet .cs-head button { height: 34px; padding: 0 10px; border: none; background: #f3effc;
    color: var(--blue-dark); border-radius: 8px; font-size: 13px; font-weight: 800; cursor: pointer; }
  .cat-sheet .cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 20px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cat-sheet .cs-item { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border: 2px solid var(--border); border-radius: 10px; background: #fff; font-size: 14.5px; font-weight: 700;
    color: var(--text); text-align: left; line-height: 1.25; cursor: pointer; }
  .cat-sheet .cs-item .cs-num { color: var(--blue); font-weight: 800; }
  .cat-sheet .cs-item.active { background: var(--blue); border-color: var(--blue); color: #fff; }
  .cat-sheet .cs-item.active .cs-num { color: var(--amber); }

  /* 字體縮放：只縮產品／購物車文字，頭尾欄固定尺寸 */
  .prod-row { font-size: calc(16.5px * var(--pfs, 1)); padding: calc(13px * var(--pfs, 1)) 12px; gap: 8px; }
  /* 手機只顯示 HKD：MOP 收起，金額放大 */
  .prod-row .pprice .mop, .prod-card .cprice .mop { display: none; }
  .prod-row .pprice { font-size: calc(15px * var(--pfs, 1)); }
  .prod-row .star { width: 34px; height: 34px; }
  .prod-card .cname { font-size: calc(19px * var(--pfs, 1)); min-height: calc(50px * var(--pfs, 1)); }
  .prod-card .cprice { font-size: calc(21px * var(--pfs, 1)); }
  .cart-pane .ci-name, .cart-pane .ci-price, .cart-pane .ci-line-total { font-size: calc(14px * var(--pfs, 1)); }

  /* 工具列：搜尋獨佔一行，模式 + 縮放第二行 */
  .toolbar { padding: 8px; gap: 6px; row-gap: 8px; flex-wrap: wrap; }
  .toolbar .search-box { flex: 1 1 100%; width: 100%; min-width: 0; }
  .toolbar .search-box input { width: 100%; font-size: 15px; height: 44px; }
  .zoom-ctrl { display: flex; margin-left: auto; }
  .zoom-ctrl button { width: 36px; height: 36px; font-size: 16px; }
  .zoom-ctrl span { display: none; }
  .mode-btn { height: 36px; font-size: 13px; padding: 0 10px; }

  /* 底欄：HKD 縮細、按鈕靠右唔再擠爆 */
  .amount-bar { height: 58px; padding: 0 8px; gap: 5px; overflow: hidden; }
  .amount-bar .cur2, .amount-bar .amt2, .amount-bar .spacer { display: none !important; }
  .amount-bar .cur { font-size: 12px; letter-spacing: .5px; }
  .amount-bar .amt { font-size: 30px; line-height: 1; }
  .amount-bar .qty-chip { font-size: 10px; padding-left: 6px; margin-left: 0; }
  .amount-bar .qty-chip b { font-size: 13px; }
  .amount-bar .bar-cart { margin-left: auto; min-width: 50px; height: 42px; padding: 0 7px; flex: 0 0 auto; }
  .amount-bar .bar-checkout { min-width: 72px; height: 42px; font-size: 15px; letter-spacing: 1px;
    margin-left: 0; flex: 0 0 auto; }
  .cart-pane { bottom: 58px; height: auto; max-height: 76vh; }
  .cat-pickbar .cp-fav { min-height: 44px; }
  .phone-mask { bottom: 58px; }
}

/* ---------------------------------------------------- receipt modal 修正 */
.receipt-x { position: absolute; top: 8px; right: 8px; z-index: 5; width: 40px; height: 40px;
  border: none; border-radius: 50%; background: #fff; color: var(--blue-dark);
  font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .2); display: flex; align-items: center; justify-content: center; }
.receipt-x:active { background: var(--light); }
#receiptModal .modal.wide { position: relative; }
#receiptModal .receipt-paper { width: 794px; min-width: 794px; max-width: none; }
#receiptModal .receipt-actions { width: 794px; max-width: none; }

/* ------------------------------------------------------ 手機搜尋面板 */
.search-sheet { display: none; position: fixed; left: 0; right: 0; top: 0; z-index: 140;
  background: #fff; border-bottom: 2px solid var(--border); box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
  padding: 8px; }
.search-sheet.open { display: block; }
.search-sheet .ss-inner { display: flex; align-items: center; gap: 6px; }
.search-sheet input { flex: 1; min-width: 0; height: 44px; font-size: 16px; padding: 0 36px 0 12px;
  border: 2px solid var(--border); border-radius: 10px; }
.search-sheet .ss-inner { position: relative; }
.search-sheet .ss-clear { position: absolute; right: 76px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; background: transparent; color: var(--muted);
  font-size: 15px; cursor: pointer; display: none; }
.search-sheet.has-text .ss-clear { display: block; }
.search-sheet .ss-done { flex: 0 0 auto; height: 44px; padding: 0 14px; border: none; border-radius: 10px;
  background: var(--blue); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }