/* 「會員」頁(public/members.js;伺服器 server/routes/member-hub.js)
 * 獨立成檔,只用 .mh- 開頭的 class 與 #tab-members,不動 app.css。商米舊 WebView 的守則同 app.css:
 * 橫排用 margin 隔開、不靠 flex gap;不用 grid、:has()、:is()、min()、clamp()。觸控區一律 ≥ 44px。 */
/* 導覽:「會員」不論寬度一律只在「管理 ▾」裡(pos.html #nm-members),頂列不另放,這支檔案不用再依寬度切換 */

#tab-members { flex-direction: column; }
#tab-members > .mh-wrap { flex: 1 0 auto; min-width: 0; }
.mh-panel { padding: 14px 16px 18px; }
.mh-setmode .mh-panel { padding-bottom: 6px; }   /* 設定類分頁籤:上面標題與分頁籤,下面接 #mh-set 的卡片 */
.mh-head { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 10px; }
.mh-head h2 { font-size: 19px; margin: 0 14px 0 0; }
/* 標題後面的目前位置:會員 › 會員名單 / 會員 › 會員設定 › 沉睡喚醒 */
.mh-crumb { font-size: 16px; font-weight: 400; color: var(--muted); }
.mh-crumb > i { margin: 0 2px; font-style: normal; color: #adb5bd; white-space: pre; }
.mh-crumb > b { font-weight: 800; color: var(--ink); }
.mh-scope { flex: 1 1 220px; min-width: 0; font-size: 14px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.mh-scope b { color: var(--ink); }
.mh-scope-s { display: block; font-size: 13px; }   /* 全品牌時標題旁第二行小字:目前在哪家店、卡片上的店名是什麼 */

/* 主導覽一排:左邊「看資料」三格(會員名單 / 發券紀錄 / 成效分析,同報表頁、菜單頁的灰底分段),右邊另一顆紫色的「會員設定」(店長:本店設定)。
   選中:白底 + 粗體 + 底下一條色條(看資料用主色橘、設定用紫色),不只靠底色分辨 */
.mh-nav { display: flex; align-items: stretch; margin: 0 0 12px; }
.mh-nav > .mh-tabs { flex: 0 1 560px; min-width: 0; margin: 0 10px 0 0; }
.mh-tabs { display: flex; margin: 0 0 12px; padding: 3px; background: #eef1f5; border-radius: 11px; }
.mh-tabs > button { flex: 1 1 0; min-width: 0; min-height: 46px; margin: 0; padding: 8px 6px; border: none; border-radius: 9px; background: transparent; color: #495057; font-size: 16px; white-space: nowrap; }
.mh-tabs > button + button { margin-left: 2px; }
.mh-tabs > button.on { background: #fff; color: var(--ink); font-weight: 800; box-shadow: inset 0 -3px 0 var(--primary), 0 1px 3px rgba(28, 35, 51, .14); }
.mh-setbtn { position: relative; flex: none; display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0 0 0 auto; padding: 6px 16px; border: 1px solid #d0bfff; border-radius: 11px; background: #f8f6ff; color: #5f3dc4; font-size: 16px; font-weight: 700; white-space: nowrap; }
.mh-setbtn > .ic { width: 18px; height: 18px; margin-right: 6px; }
.mh-setbtn.on { background: #5f3dc4; border-color: #5f3dc4; color: #fff; font-weight: 800; }
/* 第二層(老闆 / 平台管理員進了設定才有):會員獎勵 / 沉睡喚醒 / 訊息預覽,紫框跟設定頁的全品牌區同一個顏色語言;上面的「會員設定」往下指一個小三角 */
.mh-nav.has-sub > .mh-setbtn.on::after { content: ''; position: absolute; left: 50%; bottom: -15px; margin-left: -8px; border: 8px solid transparent; border-top-color: #5f3dc4; }
.mh-subnav { margin: -4px 0 12px; padding: 4px; border: 1px solid #d0bfff; border-radius: 12px; background: #f3f0ff; }
.mh-subnav > .mh-tabs { margin: 0; padding: 0; background: transparent; }
.mh-tabs-set > button.on { color: #5f3dc4; box-shadow: inset 0 -3px 0 #5f3dc4, 0 1px 3px rgba(28, 35, 51, .14); }

.mh-warn { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffe066; background: #fff9db; color: #7c5b00; font-size: 14px; line-height: 1.5; }
.mh-note { margin: 8px 0 10px; font-size: 13px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.mh-empty { margin: 14px 0 4px; padding: 26px 12px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.7; border: 1px dashed var(--line); border-radius: var(--radius); background: #fbfcfd; }
.mh-empty button { margin-top: 10px; min-height: 44px; }
.mh-red { color: #c92a2a; }

/* 搜尋 / 篩選 / 排序 */
.mh-ctl { margin: 0 0 4px; }
.mh-ctl input[type="search"] { display: block; width: 100%; min-height: 46px; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 16px; -webkit-appearance: none; appearance: none; }
.mh-chips { display: flex; flex-wrap: wrap; margin: 0 0 2px; }
.mh-chip { min-height: 44px; margin: 0 6px 6px 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 15px; white-space: nowrap; }
.mh-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.mh-chip .mh-n { display: inline-block; margin-left: 3px; font-size: 13px; opacity: .75; font-variant-numeric: tabular-nums; }
/* 人數 0 的分群照樣能按,顏色淡一點(一眼看得出哪些分群現在有人) */
.mh-chip.mh-chip-zero { background: #f8f9fa; border-color: #eceef2; color: var(--muted); }
.mh-sort { display: flex; align-items: center; margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.mh-sort > span { margin-right: 8px; }
.mh-chips.top-sort { margin: 2px 0 6px; }   /* 報表頁 Top 會員表上方的「依累計消費 / 依最近消費」切換(同樣是 .mh-chip) */
.mh-sort select { min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 15px; max-width: 100%; }

/* 名單與發券紀錄:一列一張橫卡(窄螢幕自動換行,不左右捲) */
.mh-list { margin: 0; }
.mh-row { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; min-height: 60px; margin: 0 0 8px; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; color: var(--ink); font-size: 15px; }
.mh-row:active { background: #f1f3f6; }
.mh-name { flex: 1 1 200px; min-width: 0; margin: 0 8px 2px 0; padding-top: 2px; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.mh-name > b { font-weight: 800; }
.mh-name > small { display: block; margin-top: 1px; font-size: 13px; font-weight: 400; color: var(--muted); }
.mh-face { display: inline-block; margin-left: 8px; font-size: 14px; font-weight: 700; color: #d9480f; }
.mh-cell { flex: 0 0 112px; min-width: 0; margin: 0 6px 2px 0; line-height: 1.4; overflow-wrap: anywhere; }
.mh-g .mh-cell { flex-basis: 118px; }
.mh-g .mh-name { flex-basis: 170px; }
.mh-cell > i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.mh-cell > b { display: block; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mh-cell > small { display: block; font-size: 12px; color: var(--muted); }
.mh-tag { display: inline-block; margin: 0 0 0 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: 1px; white-space: normal; line-height: 1.5; background: #eef1f5; color: #495057; }
.mh-tag.tier { background: #fff4e6; color: #d9480f; }
.mh-tag.st-active, .mh-tag.gs-active { background: #ebfbee; color: #2b8a3e; }
.mh-tag.st-warning { background: #fff9db; color: #7c5b00; }
.mh-tag.st-dormant { background: #fff4e6; color: #d9480f; }
.mh-tag.st-lost, .mh-tag.gs-revoked { background: #ffe3e3; color: #c92a2a; }
.mh-tag.gs-used { background: #e7f5ff; color: #1864ab; }
.mh-tag.gs-expired { background: #f1f3f5; color: #868e96; }
.mh-g .mh-tag { margin-left: 0; border-radius: 10px; }   /* 狀態文字可能折成兩行,不用整圓的膠囊 */
.mh-foot { margin: 6px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.mh-foot > button { display: block; width: 100%; max-width: 320px; min-height: 46px; margin: 8px auto 0; }
.mh-foot .mh-warn { margin: 8px 0 0; text-align: left; }

/* 成效 */
.mh-sub { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.mh-sec { margin: 14px 0 4px; font-size: 13.5px; font-weight: 800; color: #14539a; }
.mh-kpis { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.mh-kpi { flex: 1 1 150px; min-width: 130px; margin: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; }
.mh-kpi-l { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.mh-kpi-v { margin-top: 2px; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mh-kpi-s { margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.mh-kpi.green .mh-kpi-v { color: #2b8a3e; }
.mh-kpi.amber .mh-kpi-v { color: #d9480f; }
.mh-kpi.red .mh-kpi-v { color: #c92a2a; }
.mh-bar { display: flex; height: 12px; margin: 8px 0 0; border-radius: 999px; overflow: hidden; background: #eef1f5; }
.mh-seg { display: block; height: 100%; }
.mh-seg.st-active { background: #51cf66; }
.mh-seg.st-warning { background: #fcc419; }
.mh-seg.st-dormant { background: #ff922b; }
.mh-seg.st-lost { background: #fa5252; }
.mh-seg.st-none { background: #ced4da; }

/* 名單工具列一排:篩選 | 排序 + 方向(一組)| 匯出 CSV(靠右)。「ⓘ 分群說明」跟著分群小標籤排,「ⓘ 這些數字怎麼算」在「符合條件 N 位」那一行 */
.mh-tools { display: flex; flex-wrap: wrap; align-items: center; margin: 2px 0 6px; }
.mh-tools > * { margin: 0 8px 6px 0; }
.mh-tools > .mh-exp { margin-left: auto; margin-right: 0; }
.mh-sortgrp { display: flex; align-items: center; }
.mh-sortgrp > .mh-sort { margin: 0 6px 0 0; }
.mh-fbtn, .mh-ordbtn, .mh-exp { min-height: 44px; padding: 6px 14px; border-radius: 10px; font-size: 15px; white-space: nowrap; }
.mh-fbtn { font-weight: 700; }
.mh-fbtn.on { border-color: var(--primary); color: var(--primary); font-weight: 800; }
.mh-fbtn .mh-n { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; line-height: 20px; text-align: center; opacity: 1; }
/* 成效數字旁的「看名單 ›」:點進會員名單(members.js statGo);在數字卡裡靠左、等級列裡靠右 */
.mh-kpi .mh-go { display: block; margin: 2px 0 0; padding: 6px 0; text-align: left; }
.mh-note .mh-go { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; }
.mh-tier .mh-go-s { flex: none; margin: 0 0 0 6px; white-space: nowrap; }
.mh-lnk { min-height: 44px; margin: 0 0 6px; padding: 6px 4px; border: none; background: transparent; color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: underline; }
/* 「更多分群 ▾ / 收起 ▴」:虛線框,看得出是「還有更多」而不是一個分群;沒展開時只露出常用的與選中的那一個 */
.mh-chip.mh-chip-more { display: inline-block; border-style: dashed; border-color: #adb5bd; background: transparent; color: var(--accent); font-weight: 700; }
.mh-chips-collapsed .mh-chip-x:not(.on) { display: none; }
.mh-chips > .mh-seghelp { margin-left: 2px; }
/* 「符合條件 N 位」與「ⓘ 這些數字怎麼算」同一行;點開的口徑說明是淺藍底一塊(同分群說明) */
.mh-countrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 2px 0 2px; }
.mh-countrow > .mh-count { flex: 1 1 auto; margin: 0 8px 0 0; }
.mh-countrow > .mh-lnk { flex: none; margin: 0; }
.mh-note.mh-notebox { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #f3f6fb; color: var(--ink); }
.mh-note.mh-grantnote { margin: 0 0 8px; }
.mh-segnote { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #f3f6fb; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.mh-segnote > div { margin: 0 0 4px; overflow-wrap: anywhere; }
.mh-segnote > .mh-segnote-s { color: var(--muted); }
.mh-fpanel { display: flex; flex-wrap: wrap; margin: 0 0 6px; padding: 8px 4px 2px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; }
.mh-fpanel[hidden], .mh-segnote[hidden], .mh-note[hidden], .mh-i-txt[hidden] { display: none !important; }
.mh-fld { display: block; flex: 1 1 128px; min-width: 118px; margin: 0 6px 8px; font-size: 13px; color: var(--muted); }
.mh-fld > span { display: block; margin: 0 0 2px; }
.mh-fsel { display: block; width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 15px; color: var(--ink); }
.mh-fclr { flex: 1 0 100%; margin: 0 6px 6px; }
.mh-fclr > button { min-height: 44px; }
.mh-vgbar { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.mh-vgbar:empty { display: none; }
.mh-vgbar > .mh-chip { margin: 0 0 0 8px; }
.mh-count { min-height: 20px; margin: 4px 0 6px; font-size: 14px; color: var(--muted); }
.mh-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mh-row:not(.mh-g) .mh-cell { flex-basis: 98px; }
.mh-tag.sg-new { background: #e7f5ff; color: #1864ab; }
.mh-tag.sg-regular { background: #ebfbee; color: #2b8a3e; }
.mh-tag.sg-highSpend { background: #fff4e6; color: #d9480f; }
.mh-tag.sg-once { background: #f1f3f5; color: #495057; }
.mh-tag.sg-never { background: #f1f3f5; color: #868e96; }
.mh-tag.sg-birthday { background: #fff0f6; color: #a61e4d; }
.mh-tag.vg-high { background: #fff4e6; color: #d9480f; }
.mh-tag.vg-loyal { background: #ebfbee; color: #2b8a3e; }
.mh-tag.vg-potential { background: #e7f5ff; color: #1864ab; }
.mh-tag.vg-warning { background: #fff9db; color: #7c5b00; }
.mh-tag.vg-dormant { background: #fff4e6; color: #d9480f; }
.mh-tag.vg-lost { background: #ffe3e3; color: #c92a2a; }

/* 分店切換列(只有看全品牌的人才有):全部分店 | 各分店。分店前一個分店色小圓點(public/store-color.js,顧客點餐頁同一色),
   頂端目前那家店後面標「目前」。選中:深底白字粗體(不只靠顏色)。手機一排放不下就左右滑,不換行、不撐寬整頁 */
.mh-stores { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 0 0 10px; padding: 0 0 2px; }
.mh-st { flex: none; display: flex; align-items: center; min-height: 44px; margin: 0 6px 0 0; padding: 6px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 15px; white-space: nowrap; }
.mh-st:last-child { margin-right: 0; }
.mh-st.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 800; }
.mh-dot { display: inline-block; flex: none; width: 10px; height: 10px; margin: 0 6px 0 0; border-radius: 50%; vertical-align: 0; }
.mh-st.on .mh-dot { box-shadow: 0 0 0 2px #fff; }   /* 深底上的深色圓點加一圈白邊,看得出顏色 */
.mh-cur { margin: 0 0 0 6px; padding: 0 6px; border-radius: 999px; background: #eef1f5; color: #495057; font-size: 12px; font-weight: 700; line-height: 1.6; }
.mh-st.on .mh-cur { background: rgba(255, 255, 255, .22); color: #fff; }
/* 會員卡:名字旁「常去 X店」(分店色小圓點 + 店名,字用一般深色,看字就懂、不靠顏色);卡片左邊 4px 分店色細條。整張卡不換底色 */
.mh-row.mh-row-home { border-left-width: 4px; padding-left: 9px; }
.mh-home { display: inline-block; margin: 0 0 0 8px; padding: 0 8px 0 6px; border: 1px solid #dee2e6; border-radius: 999px; background: #fff; color: #343a40; font-size: 12px; font-weight: 700; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.mh-home > .mh-dot { width: 8px; height: 8px; margin-right: 4px; }
/* 篩選面板裡「常去分店」與上面分店切換的差別說明(一整行) */
.mh-fnote { flex: 1 0 100%; margin: 0 6px 8px; font-size: 12.5px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }

/* 成效分頁:更新時間 / 立即更新、每個數字旁的 ⓘ、圖、價值分群、券、等級 */
.mh-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.mh-sub > .mh-sub-t { flex: 1 1 200px; min-width: 0; margin: 0 8px 0 0; overflow-wrap: anywhere; }
.mh-refresh { min-height: 44px; margin: 4px 0 0; padding: 6px 14px; border-radius: 10px; font-size: 14px; font-weight: 400; }
.mh-kpi { position: relative; min-height: 70px; }
.mh-kpi-l { padding-right: 30px; }
.mh-i { position: absolute; top: 0; right: 0; width: 44px; height: 44px; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mh-i > span { display: block; box-sizing: border-box; width: 19px; height: 19px; margin: 6px 6px 0 auto; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font: italic 700 13px/16px Georgia, "Times New Roman", serif; text-align: center; }
.mh-i[aria-expanded="true"] > span { background: var(--accent); color: #fff; }
.mh-i-txt { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: #f3f6fb; font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.mh-sec.mh-hasinfo { display: flex; flex-wrap: wrap; align-items: center; }
.mh-sec.mh-hasinfo > .mh-i { position: static; flex: none; margin: -12px 0 -12px 2px; }
.mh-sec.mh-hasinfo > .mh-i-txt { flex: 1 0 100%; margin: 4px 0; }
.mh-chart { margin: 8px 0 4px; padding: 8px 10px 4px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; }
.mh-chart-t { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
.mh-svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.mh-ax { stroke: #ced4da; stroke-width: 1; }
.mh-br { fill: #74c0fc; }
.mh-br.hi { fill: #228be6; }
.mh-bt { font-size: 11px; font-weight: 700; fill: #495057; }
.mh-bl { font-size: 11px; fill: #868e96; }
.mh-ln { stroke: #228be6; stroke-width: 2; stroke-linejoin: round; }
.mh-dot { fill: #228be6; }
.mh-vgs { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.mh-vg { position: relative; flex: 1 1 170px; min-width: 140px; margin: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; }
.mh-vg-h { min-height: 26px; padding-right: 34px; }
.mh-vg-h > .mh-tag { margin-left: 0; font-size: 13px; }
.mh-vg-n { margin: 4px 0 0; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mh-vg-s { font-size: 12.5px; color: var(--muted); }
.mh-vg-bar { height: 8px; margin: 6px 0 8px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.mh-vg-bar > span { display: block; height: 100%; background: #74c0fc; }
.mh-vg > button.secondary { display: block; width: 100%; min-height: 44px; }
.mh-types { margin: 6px 0 0; }
.mh-type { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 0 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; }
.mh-type > b { flex: 0 0 66px; margin: 0 6px 2px 0; padding-top: 2px; font-size: 15px; }
.mh-type > .mh-cell { flex: 1 1 78px; }
.mh-tiers { margin: 4px 0 0; }
.mh-tier { display: flex; align-items: center; margin: 0 0 6px; font-size: 14px; }
.mh-tier-n { flex: 0 0 72px; font-weight: 700; overflow-wrap: anywhere; }
.mh-tier-bar { flex: 1 1 auto; height: 12px; margin: 0 8px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.mh-tier-bar > span { display: block; height: 100%; background: #51cf66; }
.mh-tier-v { flex: 0 0 64px; text-align: right; font-variant-numeric: tabular-nums; }

/* 點得開的券數字(成效頁的券卡、每種券列上的格子、手動發券的小連結;發券紀錄每列的「狀態」):
   點下去開券清單(report-drill.js 的清單入口 data-list-url)。卡片整張是按鈕,底下寫「查看明細 ›」;觸控區 >= 44px */
.mh-go { cursor: pointer; -webkit-tap-highlight-color: rgba(25, 113, 194, .15); }
.mh-go:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.mh-kpi.mh-go:hover, .mh-cell.mh-go:hover, .mh-gst:hover { border-color: var(--accent); background: #f3f8ff; }
.mh-kpi.mh-go:active, .mh-cell.mh-go:active, .mh-gst:active { background: #e7f1ff; }
.mh-kpi-go { margin-top: 6px; text-align: right; font-size: 12px; font-weight: 700; color: var(--accent); line-height: 1.3; }
.mh-type > .mh-cell.mh-go { box-sizing: border-box; min-height: 44px; padding: 2px 6px; border-radius: 8px; }
.mh-type > .mh-cell.mh-go > b::after { content: ' ›'; color: var(--accent); font-weight: 700; }   /* 點得開的數字後面一個小箭頭,跟上面的卡片「查看明細 ›」同一個意思 */
.mh-lk, .er-lk { display: inline-block; min-height: 44px; box-sizing: border-box; padding: 11px 2px; line-height: 22px; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; }
.mh-lk:focus, .er-lk:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 發券紀錄:頂端摘要小標籤 + 每列分成「整列開會員細節」與「狀態(開那張券)」兩顆按鈕 */
.mh-gsum { margin: 0 0 8px; }
.mh-g { align-items: stretch; padding: 0; overflow: hidden; }
.mh-gmain { display: flex; flex-wrap: wrap; align-items: flex-start; flex: 1 1 360px; min-width: 0; margin: 0; padding: 10px 12px; text-align: left; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mh-gmain:active { background: #f1f3f6; }
.mh-gst { display: block; flex: 0 0 150px; box-sizing: border-box; min-height: 44px; margin: 0; padding: 10px 12px; text-align: left; border: 0; border-left: 1px dashed var(--line); border-radius: 0; background: none; color: inherit; font: inherit; }
.mh-gst-go { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--accent); }

@media (max-width: 760px) {
  .mh-panel { padding: 10px 10px 16px; }
  /* 手機與 iPad 直放:小標籤左右留白小一點,一排多放一兩個 */
  .mh-chip { padding: 6px 11px; }
  .mh-setmode .mh-panel { padding-bottom: 4px; }
  .mh-set { padding: 0 10px 16px; }
  .mh-head h2 { font-size: 18px; }
  /* 手機:名字佔滿一行,名單的數字三個一排、發券紀錄兩個一排 */
  .mh-name { flex: 1 1 100%; margin-right: 0; }
  .mh-cell, .mh-g .mh-cell { flex: 1 1 42%; }
  .mh-row:not(.mh-g) .mh-cell { flex: 1 1 28%; }
  .mh-kpi { flex: 1 1 42%; min-width: 0; }
  .mh-kpi-v { font-size: 22px; }
  .mh-vg { flex: 1 1 42%; min-width: 0; }
  .mh-fld { flex: 1 1 42%; min-width: 0; }
  .mh-type > .mh-cell { flex: 1 1 28%; }
  .mh-gmain { flex: 1 1 100%; }
  .mh-gst { flex: 1 1 100%; border-left: 0; border-top: 1px dashed var(--line); }
}

/* ═══ 設定類分頁籤(會員獎勵 / 本店設定、沉睡喚醒、訊息預覽)═══
   LO 2026-10-01:原本在設定頁與菜單頁優惠活動的會員設定卡搬到這裡(卡片、欄位 id、儲存鈕都是原本那些,在 pos.html 的 #mh-set)。
   設定頁那套卡片外觀都綁在 #tab-settings 底下,搬過來的卡片在下面「#tab-members .mh-set」那一段照樣套一份(由設定頁的規則複製而來,維持同樣的開關、數字欄、說明小圖示)。
   每個設定一列收合(一次只展開一列,同設定頁):標題、狀態膠囊、一行目前狀態、「未儲存」小標。商米舊 WebView 守則同上:不靠 flex gap、不用 grid / :has() / :is() */
.mh-set { padding: 0 16px 18px; max-width: 920px; }
.mh-set[hidden], .mh-pane[hidden], .mh-acc[hidden], .mh-sec-h[hidden], .mh-sub-h[hidden], .mm-co[hidden], .mm-mgr[hidden], .mm-moved[hidden] { display: none !important; }
.mh-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; margin: 14px 0 8px; color: #5f3dc4; }
.mh-sec-h:first-child { margin-top: 4px; }
.mh-sec-h > b { margin-right: 10px; font-size: 15px; font-weight: 800; }
.mh-sec-h > span { font-size: 13px; font-weight: 400; color: var(--muted); }
/* 「送券規則」那一組(全品牌送券規則 + 本店滿額送券):老闆看得到外框與兩個小標(.mh-grp-box,members.js 依身分加);店長只剩一列,不畫外框 */
.mh-grp.mh-grp-box { margin: 4px 0 6px; padding: 10px 10px 2px; border: 1px solid #d0bfff; border-radius: 14px; background: #f8f6ff; }
.mh-grp.mh-grp-box > .mh-sec-h { margin: 0 2px 4px; }
.mh-sub-h { display: flex; flex-wrap: wrap; align-items: baseline; margin: 10px 2px 6px; color: var(--ink); }
.mh-sub-h > b { margin-right: 6px; font-size: 14px; font-weight: 800; }
.mh-sub-h > span { font-size: 13px; font-weight: 400; color: var(--muted); }
/* 送券規則兩列裡的按鈕(新增規則、編輯、刪除、預覽補發)與「最近的規則異動」:手指點得到(至少 44px 高) */
#mh-grp-earn .set-card button:not(.hint-i) { min-height: 44px; }
#mh-grp-earn .er-changes > summary { min-height: 44px; line-height: 44px; }
.mh-acc { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mh-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 60px; padding: 10px 14px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.mh-acc > summary::-webkit-details-marker { display: none; }
.mh-acc-t { flex: 1 1 auto; min-width: 0; }
.mh-acc-name { display: block; font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.mh-acc-pill, .mh-acc-dirty { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.5; vertical-align: 1px; }
.mh-acc-pill:empty { display: none; }
.mh-acc-pill.ok { background: #ebfbee; color: #2b8a3e; border-color: #b2f2bb; }
.mh-acc-pill.warn, .mh-acc-pill.wait { background: #fff9db; color: #9c5700; border-color: #ffe066; }
.mh-acc-pill.bad { background: #fff5f5; color: #c92a2a; border-color: #ffc9c9; }
.mh-acc-pill.off { background: #f1f3f5; color: #6b7385; border-color: #e3e6ec; }
.mh-acc-dirty { color: #c2410c; background: #fff4e6; border-color: #ffc078; }
.mh-acc-dirty[hidden] { display: none; }
.mh-acc-sum { display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.mh-acc-sum:empty { display: none; }
.mh-acc-chev { flex: none; width: 9px; height: 9px; margin: 0 4px 0 12px; border-right: 2px solid #adb5bd; border-bottom: 2px solid #adb5bd; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.mh-acc[open] { margin: 12px 0; border-color: #ffc078; box-shadow: 0 4px 14px rgba(20, 24, 36, .1); }
.mh-acc[open] > summary { background: #fff8f1; border-bottom: 1px dashed #ffd8a8; border-radius: 11px 11px 0 0; }
.mh-acc[open] .mh-acc-sum { display: none; }
.mh-acc[open] .mh-acc-chev { -webkit-transform: rotate(45deg); transform: rotate(45deg); border-color: var(--primary); }
.mh-acc-body > .set-card { border: 0; border-radius: 0; background: transparent; }
/* 收合列的標題代替卡片標題:卡片裡的 h3 文字收起來(留在畫面外給權限判斷用),標題旁的「ⓘ 說明」照舊留著(同設定頁的 .srow-h3t) */
.mh-acc-body .srow-h3t { display: none; }
.mh-acc-body .set-card > h3.srow-h3-none { display: none; }
.mh-acc-body .set-card > h3.srow-h3-i { display: flex; align-items: center; font-size: 13px; font-weight: 400; color: var(--muted); cursor: pointer; }
.mh-acc-body .set-card > h3.srow-h3-i .hint-i { margin-left: 0; }
.mh-acc-body .set-card > h3.srow-h3-i::after { content: '說明'; margin-left: 6px; }
/* 沉睡喚醒分頁:一張卡直接攤開,不用收合列 */
#mh-pane-winback > .set-card { border: 1px solid var(--line); background: #fff; }
/* 訊息預覽(唯讀):每一波一塊 */
.mh-pv { margin: 0 0 12px; }
.mh-pv-h { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ink); }
.mh-pv .wb-preview { display: block; margin: 0; }
.mh-pv-go { min-height: 44px; margin: 4px 0 0; }
/* 「已搬到會員頁」指路:菜單頁「優惠活動」段原本滿額送券卡的位置留的那一條(設定頁那張是 .set-card) */
.mm-moved { display: flex; flex-wrap: wrap; align-items: center; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #d0bfff; background: #f3f0ff; color: #4b3a8f; font-size: 14px; line-height: 1.5; }
.mm-moved > .mm-txt { flex: 1 1 220px; min-width: 0; margin: 0 10px 0 0; }
.mm-moved > button { flex: none; min-height: 44px; margin: 4px 0 0; }
#mseg-promos > .mm-moved { margin: 0 0 8px; }   /* 菜單頁那一條夾在「優惠碼」小標與優惠碼卡之間 */
#mseg-promos > .mm-moved > button { margin: 0; }
/* 手機:主導覽一排放得下「會員名單 / 發券紀錄 / 成效分析 + 會員設定」,不換行、不用左右滑 */
@media (max-width: 480px) {
  .mh-nav > .mh-tabs { margin-right: 6px; }
  .mh-tabs > button { padding: 8px 4px; font-size: 15px; }
  .mh-setbtn { padding: 6px 10px; font-size: 15px; }
  .mh-setbtn > .ic { width: 16px; height: 16px; margin-right: 4px; }
  .mh-setpre { display: none; }   /* 「會員設定 / 本店設定」手機只寫「設定」 */
  .mh-grp.mh-grp-box { padding: 8px 6px 2px; }   /* 「送券規則」外框左右留白小一點,裡面的規則卡寬一點 */
  /* 工具列按鈕左右留白小一點:篩選、排序、方向擠得進同一排 */
  .mh-tools > * { margin-right: 6px; }
  .mh-fbtn, .mh-ordbtn, .mh-exp { padding: 6px 10px; }
  .mh-st { padding: 6px 11px; }   /* 分店切換列:左右留白小一點,一眼多看到一兩家 */
  .mh-sort select { padding: 6px 6px; max-width: 128px; text-overflow: ellipsis; }   /* 「X店消費」寫店名,店名長時下拉選單不撐寬、工具列不散成兩排 */
  .mh-sort > span { margin-right: 4px; }
  .mh-crumb { font-size: 15px; }
  .mh-crumb > i { margin: 0; }
}
@media (max-width: 400px) {
  .mh-acc > summary { padding: 10px 12px; }
  .mh-chip { margin-right: 5px; padding: 6px 9px; }
  .mh-chips > .mh-seghelp { margin-left: 0; padding: 6px 2px; }
}
@media (max-width: 374px) {
  .mh-sort > span { display: none; }   /* 窄手機(360 以下):「排序」兩個字收起來(下拉選單本身有名稱),篩選、排序(選項寫店名「X店消費」較長)、方向才擠得進同一排 */
}
@media (max-width: 352px) {
  .mh-tabs > button, .mh-setbtn { font-size: 14px; }
  .mh-tabs > button { padding: 8px 2px; }
}

/* 以下由設定頁(app.css 的「設定頁第一階段」那一組)複製而來,#tab-settings 換成 #tab-members .mh-set:搬過來的卡片外觀跟在設定頁一樣 */
#tab-members .mh-set .set-card label.chk:not(.day-chk) { display: block; position: relative; line-height: 20px; min-height: 44px; padding-top: 12px; padding-bottom: 8px; padding-left: 8px; padding-right: 66px; }
#tab-members .mh-set .set-card label.chk:not(.day-chk) > input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; right: 8px; top: 9px; margin: 0; padding: 0; border: 0; width: 46px; height: 26px; border-radius: 13px; cursor: pointer; background-color: #c5cad4; background-image: radial-gradient(circle, #fff 0, #fff 10px, rgba(255, 255, 255, 0) 11px); background-repeat: no-repeat; background-size: 26px 26px; background-position: 0 0; -webkit-transition: background-color .15s, background-position .15s; transition: background-color .15s, background-position .15s; }
#tab-members .mh-set .set-card label.chk:not(.day-chk) > input[type=checkbox]:checked { background-color: var(--ok); background-position: 20px 0; }
#tab-members .mh-set .set-card label.chk:not(.day-chk) > input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
#tab-members .mh-set .set-card label.chk:not(.day-chk) > small.hint { display: block; margin: 2px 0 0; line-height: 1.5; }
.no-flexgap #tab-members .mh-set .set-card label.chk:not(.day-chk) > * + * { margin-left: 0; }
.no-flexgap #tab-members .mh-set .set-card label.chk:not(.day-chk) > .hint-i { margin-left: 6px; }
#tab-members .mh-set .set-card label.set-num { flex-direction: row; flex-wrap: wrap; align-items: center; }
#tab-members .mh-set .set-card label.set-num > .set-name { flex: 1 1 0%; min-width: 0; margin-right: 12px; }
#tab-members .mh-set .set-card label.set-num > .set-val { flex: 0 0 auto; white-space: nowrap; }
#tab-members .mh-set .set-card label.set-num > small.hint { flex: 1 0 100%; margin-top: 4px; }
#tab-members .mh-set .set-card .set-unit { margin-left: 6px; color: var(--muted); }
#tab-members .mh-set .set-card input[type=number],
#tab-members .mh-set .set-card .set-val > input { width: 100px; max-width: 100%; }
#tab-members .mh-set .set-card .settings-grid2 > label { min-width: 0; }
#tab-members .mh-set .set-card .set-val > input { text-align: right; }
#tab-members .mh-set .set-card label.set-inl { flex-direction: row; flex-wrap: nowrap; align-items: center; white-space: nowrap; margin-right: 16px; }
#tab-members .mh-set .set-card label.set-inl > input { margin-left: 6px; margin-right: 6px; }
#tab-members .mh-set .hint-i { position: relative; display: inline-block; vertical-align: 1px; box-sizing: border-box; width: 19px; height: 19px; min-height: 0; margin: 0 0 0 6px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: var(--accent); font: italic 700 13px/16px Georgia, "Times New Roman", serif; text-align: center; cursor: pointer; }
#tab-members .mh-set .hint-i::before { content: 'i'; }
#tab-members .mh-set .hint-i::after { content: ''; position: absolute; top: -3px; right: -13px; bottom: -3px; left: -13px; }
#tab-members .mh-set .hint-i[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
#tab-members .mh-set .set-card details.hint-fold.hint-iconized > summary { display: none; }
#tab-members .mh-set .set-card details.hint-fold.hint-iconized:not([open]) { display: none; }
#tab-members .mh-set .set-card details.hint-fold.hint-iconized > .hint { margin-top: 0; padding: 8px 10px; border-radius: 8px; background: #f3f6fb; }
#tab-members .mh-set .set-card details.hint-fold.hint-row > summary::before { content: none; }
#tab-members .mh-set .set-card details.hint-fold.hint-row > summary .hint-i { margin-left: 0; margin-right: 2px; }
#tab-members .mh-set .set-card h3 { font-size: 16px; }
#tab-members .mh-set .set-card textarea { font-size: 15px; }
#tab-members .mh-set .wb-group-title { font-size: 14px; }
#tab-members .mh-set .wb-note,
#tab-members .mh-set .set-card details.hint-fold > summary { font-size: 13px; }
#tab-members .mh-set details.ln-tpl > summary { font-size: 15px; }   /* LINE 顧客通知卡(2026-10-02 從設定頁搬來)裡的「自訂推播卡片文字」 */
#tab-members .mh-set .set-card .empty { font-size: 14px; }
#tab-members .mh-set .set-chg { box-shadow: -7px 0 0 -4px #fd7e14; }
#tab-members .mh-set .set-orig { font-size: 13px; font-weight: 700; color: #c2410c; line-height: 1.4; white-space: nowrap; }
#tab-members .mh-set .set-orig[hidden] { display: none; }
#tab-members .mh-set label.chk > .set-orig,
#tab-members .mh-set .set-name > .set-orig { margin-left: 8px; }
#tab-members .mh-set .set-orig-line { line-height: 1.4; }
#tab-members .mh-set .set-orig-line > .set-orig { display: inline-block; margin-right: 14px; }
#tab-members .mh-set a.set-goto { color: var(--accent); font-weight: 700; text-decoration: underline; white-space: nowrap; display: inline-block; padding: 12px 0; margin: -12px 0; }