/* style.css — Super-Ops v2 外殼版型（tokens.css 為唯一色彩/字級來源） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- 版面骨架：側欄 + 主區 ---- */
#root { display: flex; min-height: 100vh; }
.side {
  width: 224px; flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--sp-4) 0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.main { flex: 1; min-width: 0; padding: var(--sp-6); max-width: 1280px; }

/* ---- 品牌塊 ---- */
.brand {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 0 var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-3);
}
.brand small { display: block; font-family: var(--font-body); color: var(--ink-2); font-size: var(--fs-small); letter-spacing: 0; }

/* ---- 導航（v20 切片工作區：可折疊卡式標頭 + 色帶層次） ---- */
/* v22 修正：.side 是 flex column 且高度固定 100vh；flex 子項預設 flex-shrink:1 會在內容
   撐爆容器時被壓縮，疊加 .nav-pkg 的 overflow:hidden 造成內容被「夾扁蓋住」而非讓
   外層捲動（side.scrollHeight 因此量不出溢出）。flex-shrink:0 讓每區維持自然高度，
   逼外層 .side 的 overflow-y:auto 真正生效可捲動。brand/side-foot 同理鎖住。 */
.brand, .side-foot { flex-shrink: 0; }
.nav-pkg { margin: 0 var(--sp-2) var(--sp-2); border-radius: var(--r-card); overflow: hidden; flex-shrink: 0; }
.nav-pkg.open { background: rgba(255,255,255,0.02); }
.pkg-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; min-height: var(--touch-min);
  background: none; border: 0; border-left: 3px solid var(--pkg-c, var(--line));
  color: var(--ink); font-family: inherit; cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease-out);
}
.pkg-head:hover { background: var(--surface-2); }
.pkg-ico { font-size: 1rem; flex: none; }
.pkg-name { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.04em; }
.pkg-hint { flex: 1; text-align: right; color: var(--ink-2); font-size: 0.72rem; }
.pkg-arrow {
  color: var(--ink-2); font-size: 0.7rem; flex: none;
  transform: rotate(-90deg);
  transition: transform var(--t-normal) var(--ease-out);
}
.nav-pkg.open .pkg-arrow { transform: rotate(0deg); }
.nav-pkg.open .pkg-name { color: var(--pkg-c, var(--ink)); }
/* 原地開合：項目恆在 DOM。
   v22 修正 #2：v22 #1 的 CSS 變數（--pkg-open-h）方案在部分瀏覽器有 transition+var()
   timing 缺陷——變數值在掛載時已寫入、之後只是選擇器匹配切換，transition 引擎解不出
   正確終點卡在 0（拿掉 transition 立刻變回正確值，證實是這個 quirk）。
   改為 JS 每次點擊直接寫 inline max-height（不透過變數），CSS 只留 transition 屬性本身。 */
.pkg-items {
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-normal) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .pkg-items, .pkg-arrow { transition: none; }
}
.nav-item {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 38px;
  background: none; border: 0; color: var(--ink-2);
  font-size: var(--fs-body); font-family: inherit; cursor: pointer;
  min-height: 42px;
  border-left: 3px solid transparent;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--surface-2); border-left-color: var(--gold); color: var(--gold); font-weight: 600; }
.side-foot { margin-top: auto; padding: var(--sp-3) var(--sp-4) 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); }
.side-foot button { margin-top: var(--sp-2); }

/* ---- 手機 ---- */
.burger { display: none; }
@media (max-width: 860px) {
  #root { display: block; }
  .side {
    position: fixed; z-index: var(--z-modal); height: 100vh;
    transform: translateX(-100%); transition: transform var(--t-normal) var(--ease-out);
  }
  .side.open { transform: translateX(0); }
  .main { padding: var(--sp-4); padding-top: calc(var(--sp-4) + 48px); }
  .burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-sticky);
    width: var(--touch-min); height: var(--touch-min);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-input);
    color: var(--ink); font-size: 1.2rem; cursor: pointer;
  }
  .backdrop {
    position: fixed; inset: 0; z-index: var(--z-backdrop);
    background: rgba(0,0,0,0.55);
    opacity: 0; transition: opacity var(--t-normal) var(--ease-out);
  }
  .backdrop.show { opacity: 1; }
  /* 側欄開啟時鎖背景滾動（不然底層跟著滑=廉價感） */
  body.side-locked { overflow: hidden; }
  /* 導航項按壓回饋：手指按下去要有「按到了」的感覺 */
  .nav-item:active { background: var(--surface-2); transform: translateX(2px); }
  .pkg-head:active { background: var(--surface-2); }
}
@media (prefers-reduced-motion: reduce) { .backdrop { transition: none; } .nav-item:active { transform: none; } }

/* ---- 標題與卡片 ---- */
h1.page-title { font-size: var(--fs-h1); font-weight: 700; margin-bottom: var(--sp-4); text-wrap: balance; }
h2.sec-title { font-size: var(--fs-h2); font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.card h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--sp-2); }
.muted { color: var(--ink-2); }
.gold { color: var(--gold); }
.danger { color: var(--danger); }
.ok { color: var(--ok); }

/* ---- KPI 大字 ---- */
.kpi-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.kpi { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); }
.kpi .label { color: var(--ink-2); font-size: var(--fs-small); }
.kpi .num {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-kpi); font-weight: 600; color: var(--ink-num); line-height: 1.15;
}
.kpi .sub { color: var(--ink-2); font-size: var(--fs-small); }
.kpi.alert { border-color: var(--red); }
.kpi.alert .num { color: var(--red-bright); }

/* ---- 按鈕 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--touch-min); padding: 0 var(--sp-4);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-input);
  font-size: var(--fs-body); font-family: inherit; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--line); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.btn.primary { background: var(--gold-dim); border-color: var(--gold); color: #fff; font-weight: 500; }
.btn.primary:hover { background: var(--gold); color: #1a1508; }
.btn.warn { border-color: var(--red); color: var(--red-bright); }
.btn.warn:hover { background: var(--red); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- 表單 ---- */
input, select, textarea {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-input);
  min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body); font-family: inherit;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold); }
input::placeholder { color: var(--ink-2); }
label.fld { display: block; margin-bottom: var(--sp-3); }
label.fld > span { display: block; color: var(--ink-2); font-size: var(--fs-small); margin-bottom: 4px; }
.fld-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.fld-row > label.fld { flex: 1 1 180px; }
input[data-num] { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---- 表格（數據密度高） ---- */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
th, td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--surface-2); color: var(--ink-2); font-weight: 500; position: sticky; top: 0; }
td.num, th.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
tr:hover td { background: var(--surface-2); }

/* ---- 狀態膠囊 ---- */
.pill {
  display: inline-block; padding: 1px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-small); border: 1px solid var(--line); color: var(--ink-2);
}
.pill.ok { border-color: var(--ok); color: var(--ok); }
.pill.warn { border-color: var(--warn); color: var(--warn); }
.pill.bad { border-color: var(--red-bright); color: var(--red-bright); }

/* ---- 登入閘 ---- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.login-box { width: 100%; max-width: 360px; }
.login-box .brand { border: 0; text-align: center; font-size: 1.4rem; margin-bottom: var(--sp-6); }

/* ---- 警示列表 ---- */
.alert-line { display: flex; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.alert-line:last-child { border-bottom: 0; }

/* ---- toast ---- */
#toast {
  position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--surface-2); border: 1px solid var(--gold); border-radius: var(--r-input);
  padding: var(--sp-2) var(--sp-4); color: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity var(--t-normal) var(--ease-out);
}
#toast.show { opacity: 1; }

/* ---- AI 工坊（v1 版型語彙） ---- */
.ak-sec {
  font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.06em;
  color: var(--gold); margin-bottom: var(--sp-2);
}
.ak-sec.ok { color: var(--ok); }
.ak-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-3);
}
.ak-imgbox {
  border: 1px dashed var(--line); border-radius: var(--r-card);
  min-height: 180px; padding: var(--sp-3);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.ak-imgbox > div { width: 100%; }

/* ---- 7 日趨勢長條 ---- */
.trend7 { display: flex; gap: var(--sp-2); align-items: flex-end; height: 100px; }
.trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.trend-bar { width: 100%; max-width: 48px; background: var(--gold-dim); border-radius: 3px 3px 0 0; }
.trend-col:last-child .trend-bar { background: var(--gold); }
.trend-lbl { font-size: var(--fs-small); color: var(--ink-2); font-family: var(--font-num); }
/* v36：趨勢圖窄屏防爆——.trend-col 的標籤有最小內容寬（~22px），90 根長條在 360px 必爆。
   手機改水平捲動＋右緣淡出（沿用分類列的既定手勢語彙），長條維持可讀寬度不擠成細絲。 */
@media (max-width: 480px) {
  .trend7 { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .trend7::-webkit-scrollbar { display: none; }
  .trend-col { flex: none; width: 24px; }
}

/* ---- POS ---- */
.pos-map {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--sp-3);
}
.pos-table {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-3); min-height: 108px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  color: var(--ink); text-align: left; position: relative; overflow: hidden;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.pos-table::before {
  /* 狀態一眼辨識（借鏡 dudoo 桌況全景圖）：頂部色條，空桌/用餐中/已出單三態，不擋文字排版 */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--line);
  transition: background var(--t-fast) var(--ease-out);
}
.pos-table:hover { background: var(--surface-2); transform: translateY(-1px); }
.pos-table:active { transform: translateY(0); }
.pos-table:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pos-table .tno { font-weight: 700; font-size: 1.05rem; }
.pos-table .tinfo { font-size: var(--fs-small); font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pos-table.seated { border-color: var(--gold-dim); background: rgba(200,144,26,0.07); }
.pos-table.seated::before { background: var(--gold-dim); }
.pos-table.fired { border-color: var(--warn); }
.pos-table.fired::before { background: var(--warn); }

.pos-split { display: flex; gap: var(--sp-4); align-items: flex-start; }
.pos-menu { flex: 1.4; min-width: 0; }
.pos-order { flex: 1; min-width: 280px; position: sticky; top: var(--sp-4); }
/* v30.1：舊的 column-reverse 手機規則已由檔尾「手機版點餐重排」區塊全面接手，這裡不再重複定義 */
/* v20：點餐大字化——員工 1 秒找到、指頭好按 */
.pos-cats {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--bg); padding: var(--sp-2) 0; margin-bottom: var(--sp-2);
}
.pos-cat {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--touch-min); padding: 0 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  color: var(--ink-2); font-size: 1.1rem; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.pos-cat.active {
  background: var(--gold); border-color: var(--gold); color: #1a1408;
}
.pos-cat-n {
  font-size: 0.75rem; font-weight: 400; color: var(--ink-2);
  background: var(--bg); border-radius: var(--r-pill); padding: 1px 8px;
}
.pos-cat.active .pos-cat-n { color: #1a1408; background: rgba(0,0,0,0.15); }
.pos-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
.pos-item {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3);
  color: var(--ink); font-family: inherit; cursor: pointer; text-align: left;
  position: relative; overflow: hidden;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.pos-item:hover { background: var(--surface-2); border-color: var(--gold-dim); }
.pos-item:active { transform: scale(0.97); }
.pos-item-name { font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.pos-item-price { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--gold-text); font-size: 1rem; font-weight: 600; }
/* 點菜視覺回饋：短暫金色微光 + ✓，取代原本按下即消失的背景色，讓員工在吵雜出餐現場也確認「有點到」 */
.pos-item.just-added {
  animation: pos-item-confirm 480ms var(--ease-out);
  border-color: var(--gold);
}
.pos-item.just-added::after {
  content: '✓'; position: absolute; top: 6px; right: 8px;
  color: var(--gold); font-weight: 900; font-size: 1.1rem;
  animation: pos-item-check 480ms var(--ease-out);
}
@keyframes pos-item-confirm {
  0% { background: var(--gold-dim); }
  100% { background: var(--surface); }
}
@keyframes pos-item-check {
  0% { opacity: 0; transform: scale(0.4) translateY(4px); }
  35% { opacity: 1; transform: scale(1.15) translateY(0); }
  100% { opacity: 0; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pos-item.just-added { animation: none; background: var(--gold-dim); }
  .pos-item.just-added::after { animation: none; opacity: 1; }
}

dialog {
  background: transparent; border: 0; padding: 0;
  max-width: min(92vw, 420px); width: 100%;
}
dialog::backdrop { background: rgba(0,0,0,0.6); }
dialog .card { border-color: var(--gold-dim); }

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
  #toast { transition: none; }
  .pos-table { transition: none; }
}

/* v21：POS 全分類連續滾動的區段標題 */
.pos-cat-sec { margin-bottom: var(--sp-4); }
.pos-sec-title {
  font-size: 1.15rem; font-weight: 800; color: var(--gold);
  padding: var(--sp-2) 0; margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

/* v29：已點數量徽章——員工掃菜單直接看到本桌各品項已點份數（直觀性：不用回右欄對單） */
.pos-item.in-order { border-color: var(--gold-dim); }
.pos-item-count {
  position: absolute; top: 6px; right: 8px;
  min-width: 24px; height: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #1a1408; border-radius: var(--r-pill);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 0.85rem; font-weight: 800;
}
/* ✓ 確認動畫改到右下，避免跟數量徽章疊在右上 */
.pos-item.just-added::after { inset: auto 8px 6px auto; }

/* ═══ v30 前場淺色主題（老闆：不要深色、要簡潔乾淨）═══
   只作用於 POS/KDS（body.fol 由 app.js 依 hash 掛上）：內容區換亮底大留白，
   側欄保持品牌深色形成對比。所有覆蓋走 CSS 變數，元件零改動。 */
body.fol .main {
  --bg: #faf9f7; --surface: #ffffff; --surface-2: #f1efeb; --line: #e4e0d8;
  --ink: #1d1a15; --ink-2: #6b645a; --ink-num: #141210;
  --gold: #a8770f; --gold-dim: #8a6512;
  --gold-text: #8a5f0a;   /* 實測 5.36:1 對 #faf9f7 —— 價格等內文級金字用這個 */
  background: var(--bg); color: var(--ink);
}
/* v34 作用域修正：淺色主題原本只掛在 .main，但 .burger／AI 客服鈕是 position:fixed
   掛在 body 下，逃逸了主題作用域 → 淺底上出現一顆深色方塊。這裡補齊外框元件。 */
body.fol .burger {
  background: #ffffff; border-color: #e4e0d8; color: #1d1a15;
  box-shadow: 0 1px 3px rgba(20,18,16,0.08);
}
body.fol .main .card { box-shadow: 0 1px 3px rgba(20,18,16,0.06); }
body.fol .main .pos-table { box-shadow: 0 1px 2px rgba(20,18,16,0.05); }
body.fol .main .pos-table.seated { background: #fdf6e8; }
body.fol .main .pos-cats { background: var(--bg); }
body.fol .main .pos-cat.active { color: #fff; }
body.fol .main .pos-item.just-added { animation-name: pos-item-confirm-l; }
@keyframes pos-item-confirm-l { 0% { background: #f3e3bd; } 100% { background: var(--surface); } }

/* ═══ v30 手機版點餐重排（iPhone 實測：無爆版但動線錯——訂單面板整坨壓在菜單上）═══
   賈伯斯式手機動線：菜單全螢幕優先 → 底部固定結帳列（合計+份數）→ 點一下上滑訂單抽屜 */
.pos-mobile-bar { display: none; }
@media (max-width: 860px) {
  .pos-split { flex-direction: column; }           /* 菜單在上（原 column-reverse 反轉回來） */
  .pos-order { display: none; }                     /* 訂單面板預設收進抽屜 */
  .pos-split.sheet-open .pos-order {
    display: block; position: fixed; left: 0; right: 0; bottom: 0;
    top: auto; /* 蓋掉桌機 sticky 的 top——否則 top+bottom+max-height 過度約束，bottom:0 會被忽略、抽屜懸空 */
    background: var(--bg);
    z-index: var(--z-modal); max-height: 80vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; border: 1px solid var(--line); border-bottom: 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
  .pos-split.sheet-open::before {                   /* 背景遮罩，點擊由 JS 收合 */
    content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: var(--z-modal-backdrop, 90);
  }
  .pos-mobile-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
  }
  .pos-mobile-bar .pmb-info { flex: 1; min-width: 0; }
  .pos-mobile-bar .pmb-count { font-size: var(--fs-small); color: var(--ink-2); }
  .pos-mobile-bar .pmb-total { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 800; color: var(--gold); }
  .pos-mobile-bar .btn.primary { min-height: 52px; padding: 0 22px; font-size: 1.05rem; }
  .pos-menu { padding-bottom: 84px; }               /* 底部列不擋最後一排菜 */
  /* 觸控目標：手機一律 ≥44px（iPhone 實測 12 顆 <40px 難按） */
  .pos-order .btn, .pos-order .pill { min-height: 44px !important; }
  .pos-order [data-base] { min-height: 44px !important; }
}

/* ═══ v35 離線橫幅 + 金額欄位驗證 ═══ */
#net-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toast);
  padding: 8px var(--sp-4); text-align: center;
  font-size: var(--fs-small); font-weight: 700;
  background: #4a3a10; color: #f3dc9a; border-bottom: 1px solid #6b5518;
  transform: translateY(-100%); transition: transform var(--t-normal) var(--ease-out);
}
#net-banner.show { transform: translateY(0); }
#net-banner.ok { background: #1c3a24; color: #9fdcae; border-bottom-color: #2f6b40; }
body.fol #net-banner { background: #fdf3d8; color: #6b5010; border-bottom-color: #e0cfa0; }
body.fol #net-banner.ok { background: #e6f4e9; color: #2f6b40; border-bottom-color: #bcd9c3; }
@media (prefers-reduced-motion: reduce) { #net-banner { transition: none; } }

/* 未備份提醒（GAP-SECRET-EXPOSURE 期間）——沿用 #net-banner 的形制與動線，
   改錨在底部：它是常駐提醒不是瞬時通知，不該和離線橫幅搶同一條位置。
   對比：深色 8.8:1／淺色 7.8:1，皆遠高於 4.5:1 門檻。 */
#backup-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-toast);
  padding: 10px var(--sp-4); text-align: center; cursor: pointer;
  font-size: var(--fs-small); font-weight: 700;
  background: #4a1616; color: #f5b8b8; border-top: 1px solid #7a2626;
  transform: translateY(100%); transition: transform var(--t-normal) var(--ease-out);
}
#backup-banner.show { transform: translateY(0); }
body.fol #backup-banner { background: #fde8e8; color: #8a1f1f; border-top-color: #e8bcbc; }
@media (prefers-reduced-motion: reduce) { #backup-banner { transition: none; } }

input.input-err {
  border-color: var(--danger) !important;
  background: rgba(199, 48, 48, 0.08);
}

/* only-mobile 工具類：桌機隱藏、手機顯示 */
.only-mobile { display: none; }
@media (max-width: 860px) { .only-mobile { display: inline-flex; } }

/* ═══ v34 手機前場：密度與遮擋修正（實測驅動，非猜測）═══
   iPhone 390×844 實測證據：
   ① AI 客服浮動鈕 x322–374 直接壓在主 CTA「訂單/結帳」x223–374 上——結帳鈕被吃掉 52px 寬
   ② 分類列 164px 佔掉 19% 螢幕；一屏只看得到 6/100 道菜，服務員得在客人面前滑 4 屏找菜
   設計判斷：POS 是「任務中」介面，密度是這個 register 的正當權限（不是雜亂）。
   菜品改單列「品名 ↔ 價格同行」，價格右對齊形成可縱向掃描的價格欄，
   比堆疊式卡片好找得多——這也是 iCHEF／Square 手機 POS 的既定做法，不是自創。 */
@media (max-width: 860px) {
  /* ⓪ 先修容器：.pos-split 桌機用 align-items:flex-start（sticky 訂單欄需要），
     但直向排列時它會讓子項「按內容寬」撐開而非填滿容器。分類列一改 nowrap，
     max-content 變 828px → .pos-menu 撐到 593px → 整頁橫向溢出 219px。
     stretch + min-width:0 讓子項乖乖填滿 358px，捲動才會發生在分類列自己身上。 */
  .pos-split { align-items: stretch; }
  .pos-menu, .pos-order { min-width: 0; }

  /* ① 分類：換行大卡 → 單行水平捲動 chip（回收約 110px 垂直空間） */
  .pos-cats {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pos-cats::-webkit-scrollbar { display: none; }
  .pos-cat { flex: none; }

  /* ② 菜品：堆疊卡 → 單列橫向（品名左｜份數｜價格右） */
  .pos-items { grid-template-columns: 1fr; gap: 6px; }
  .pos-item {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--sp-3); min-height: 52px; padding: var(--sp-2) var(--sp-3);
  }
  .pos-item-name { flex: 1; min-width: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pos-item-price { flex: none; font-size: 0.95rem; }
  /* 份數徽章由絕對定位改行內，否則會蓋住右側價格 */
  .pos-item-count { position: static; flex: none; }
  /* 橫列下 ✓ 會疊到價格；份數徽章本身就是更明確的回饋，改用徽章彈跳確認 */
  .pos-item.just-added::after { display: none; }
  .pos-item.just-added .pos-item-count { animation: pos-badge-pop 380ms var(--ease-out); }

  /* ③ 水平捲動提示：右緣淡出，讓「還有更多分類」讀起來是刻意設計而不是被切壞 */
  .pos-cats {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
}

/* v34：前場畫面（POS／KDS）不放 AI 客服浮動鈕。
   第一版我讓它「閃避」底部結帳列，結果它改去壓住菜單的價格——閃避是治標。
   真正的問題是它根本不該在這裡：服務員站在客人面前點餐、廚房盯著出餐，
   雙手都在忙，浮動客服對這兩個任務零價值卻永遠擋著內容。
   （product register：工具應該消失在任務裡。）客服鈕在後台分析類頁面照常出現。 */
body.fol #fa-btn, body.fol #fa-panel { display: none !important; }
@keyframes pos-badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pos-item.just-added .pos-item-count { animation: none; }
}

/* v36：手機寬表「凍結首欄」——打卡/薪資表水平滑動時，第一欄（日期/員工）釘住當座標，
   員工名字不會滑不見（RESPONSIVE_AUDIT P2 待辦） */
@media (max-width: 860px) {
  .tbl-stick1 th:first-child, .tbl-stick1 td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 2px 0 4px rgba(0,0,0,0.15);
  }
  .tbl-stick1 thead th:first-child { z-index: 2; background: var(--surface-2); }
}

/* ═══ v46 霸虎客服 FAB + 面板精緻化（impeccable polish：品牌紅金、呼吸光、彈出動畫）═══ */
#fa-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--z-toast);
  width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
  border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; line-height: 1;
  color: #fff;
  /* 雙層品牌紅徑向漸變（中心亮邊緣深，有立體感不是死平面） */
  background: radial-gradient(circle at 35% 30%, #b52828 0%, #8b1a1a 45%, #5a1010 100%);
  /* 金環 + 深色投影 + 金色光暈（三層 shadow 疊出「發光的實體」） */
  box-shadow: 0 0 0 1.5px var(--gold-dim), 0 4px 14px rgba(0,0,0,0.45), 0 2px 22px rgba(200,144,26,0.28);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
#fa-btn > span { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
#fa-btn:hover { transform: scale(1.08); box-shadow: 0 0 0 1.5px var(--gold), 0 6px 18px rgba(0,0,0,0.5), 0 3px 28px rgba(200,144,26,0.42); }
#fa-btn:active { transform: scale(0.95); }
#fa-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* 呼吸光環：伪元素脈動，吸引注意但克制（2.6s 慢速） */
#fa-btn::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--gold); opacity: 0;
  animation: fa-breathe 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes fa-breathe {
  0% { transform: scale(1); opacity: 0.5; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}
/* 營業中在線點 */
#fa-btn .fa-dot {
  position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #45c463; border: 2px solid #5a1010;
}
#fa-panel {
  position: fixed; right: 18px; bottom: 84px; z-index: var(--z-toast);
  display: none; flex-direction: column;
  width: min(92vw, 348px); height: min(62vh, 460px);
  background: var(--surface); border: 1px solid var(--gold-dim);
  border-radius: 16px 16px 8px 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  transform-origin: bottom right;
}
#fa-panel.fa-in { animation: fa-pop 220ms var(--ease-out); }
@keyframes fa-pop {
  0% { opacity: 0; transform: translateY(12px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fa-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-weight: 700; color: var(--gold);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--line);
}
.fa-head .fa-title { flex: 1; }
.fa-head .fa-sub { font-size: 0.7rem; font-weight: 400; color: var(--ok); }
.fa-head .fa-x {
  width: 30px; height: 30px; border-radius: 8px; border: 0; cursor: pointer;
  background: none; color: var(--ink-2); font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.fa-head .fa-x:hover { background: var(--surface-2); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  #fa-btn::after { animation: none; }
  #fa-btn { transition: none; }
  #fa-panel.fa-in { animation: none; }
}