/* page-customers.css —— 顧客頁專屬樣式（v1.10.1 由 main.css 拆出）

   ⚠ 本檔內容是**從 main.css 原樣搬過來的**，v1.10.1 沒有改動任何一條規則的
     選擇器或宣告內容。要追原始出處看該版之前的 main.css。

   ⚠⚠ **本檔必須排在 index.html 的 main.css 之後。** CSS 的載入順序就是優先序：
     排到 main.css 前面，同權重的規則勝負會反轉，而且只會在少數幾個元素上出現，
     那是最難查的一種跑版。

   本檔的選擇器全部限定在 .cust / #pgCustomers 之下，與其他頁面檔的範圍互斥。 */

/* ══ 顧客頁（UI-8.0）═══════════════════════════════════════════════════
   定稿：design/mockups/salon_customers_mockup_v1.html
   ⚠ 定稿的色值是內嵌 hex（單檔 mockup 的權宜），這裡一律翻回 var(--lhrm-*) / var(--c-*)。
     本區塊只**追加**，不改任何既有規則。
   ⚠ 定稿以 .frame[data-device="mobile"] 切換手機版，實作翻成 @media (max-width:760px)。
   ⚠ 兩處與定稿的差異（已拍板）：
     ① 搜尋列右側的「＋ 新增顧客」不實作，HTML / CSS 都不留
        —— P1 顧客只來自匯入與 LINE 綁定，手動建客隨 P2 開單一起做。
     ② 多一顆「待確認」chip（定稿只有列上的紅標，1,852 筆裡靠肉眼找不到那幾筆）。 */

/* 顧客頁要自己撐滿、並讓左欄內部捲動，故覆寫 .pg 的內距與 [data-page-view].on 的高度。
   選擇器都帶了 customers，只作用於這一頁，其他頁不受影響。 */
[data-page-view="customers"].on { height: 100%; min-height: 0; }
#pgCustomers { padding: 0; display: flex; min-width: 0; min-height: 0; }

.cust { flex: 1; display: flex; min-height: 0; min-width: 0; }
.cust .listcol {
  width: 392px; flex: none; border-right: 1px solid var(--lhrm-border-2);
  display: flex; flex-direction: column; min-height: 0;
}
.cust .detcol { flex: 1; min-width: 0; overflow: auto; }

/* ── 搜尋列 ─────────────────────────────────────────────── */
.cust .srch { padding: 14px 16px 10px; border-bottom: 1px solid var(--lhrm-border); }
.cust .srch .box {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--lhrm-border-2); padding-bottom: 7px;
}
.cust .srch .box svg {
  width: 15px; height: 15px; stroke: var(--lhrm-text-faint); fill: none;
  stroke-width: 1.6; stroke-linecap: round; display: block; flex: none;
}
.cust .srch input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  font-size: 14px; font-weight: 300; color: var(--lhrm-text);
}
.cust .srch input::placeholder { color: var(--lhrm-text-faint); }
.cust .srch .box:focus-within { border-bottom-color: var(--lhrm-gold); }
/* 搜尋框與「＋ 新增」同列：框縮窄讓位，不換行 */
.cust .srch .srow { display: flex; align-items: center; gap: 10px; }
.cust .srch .srow .box { flex: 1; min-width: 0; }
.cust .srch .srow #cuNew { flex: none; white-space: nowrap; }
.cust .srch .hint {
  margin-top: 7px; font-family: var(--lhrm-font-mono); font-size: 10px;
  letter-spacing: 1.4px; color: var(--lhrm-text-faint);
}

/* ── 篩選 chips ─────────────────────────────────────────── */
.cust .chips {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px;
  border-bottom: 1px solid var(--lhrm-border);
}
.cust .chip {
  border: 1px solid var(--lhrm-border-2); border-radius: 2px; padding: 4px 9px;
  font-size: 11px; color: var(--lhrm-text-dim); display: flex; gap: 6px; align-items: center;
}
.cust .chip b {
  font-family: var(--lhrm-font-mono); font-weight: 400; font-size: 10px;
  color: var(--lhrm-text-faint);
}
.cust .chip.on { border-color: var(--lhrm-gold); color: var(--lhrm-gold-text); }
.cust .chip.on b { color: var(--lhrm-gold-text); }

/* ── 計數列 ─────────────────────────────────────────────── */
.cust .cnt {
  padding: 8px 16px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 1.6px;
  color: var(--lhrm-text-faint); border-bottom: 1px solid var(--lhrm-border);
}

/* ── 清單 ───────────────────────────────────────────────── */
.cust .rows { flex: 1; overflow: auto; min-height: 0; }
.cust .row {
  display: block; width: 100%; text-align: left; padding: 11px 16px;
  border-bottom: 1px solid var(--lhrm-border);
  transition: padding-left .15s, background .15s;
}
.cust .row:hover { background: var(--lhrm-surface); padding-left: 20px; }
.cust .row.on { background: var(--lhrm-surface); box-shadow: inset 2px 0 0 var(--lhrm-gold); }
.cust .row .l1 { display: flex; align-items: baseline; gap: 8px; }
.cust .row .nm {
  font-size: 14px; font-weight: 400; color: var(--lhrm-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 性別色條（定稿方案 C，取代舊的「M」標記；customers.js 的 sexBar()）。
   名字與色條的間距沿用 .l1 的 gap 8px；第二行縮排 = 色條 3px + gap 8px = 11px，電話與姓名字首對齊。
   ⚠ .l1 是 align-items: baseline：空的 inline-block 沒有文字基線，會以底邊貼齊基線而整條偏高，
     故列內的色條改 align-self: center。未填沿用髮絲線 --lhrm-border-2，不另設 token。 */
.cust .sx { display: inline-block; width: 3px; height: 15px; border-radius: 2px; flex: none; vertical-align: middle; }
.cust .sx-lg { height: 22px; }
.cust .sx-f { background: var(--lhrm-sex-f); }
.cust .sx-m { background: var(--lhrm-sex-m); }
.cust .sx-n { background: var(--lhrm-border-2); }
.cust .row .l1 .sx { align-self: center; }
.cust .det-hd .nm .sx { margin-right: 6px; vertical-align: -3px; }
/* LINE 綁定圖示（v1.35.0）：LINE 官方 Brand icon 原檔，20px（官方規範電腦版最小 20px、四周留白）。
   ⚠⚠ 不得加 filter / opacity / border-radius / background / box-shadow——官方規範禁止任何效果與底色。 */
.cust .ln-ic { width: 20px; height: 20px; flex: none; vertical-align: middle; margin: 0 4px; }
.cust .row .vis {
  margin-left: auto; flex: none; font-family: var(--lhrm-font-mono);
  font-size: 10px; color: var(--lhrm-text-faint); letter-spacing: .5px;
}
.cust .row .l2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-left: 11px; }
.cust .row .ph {
  font-family: var(--lhrm-font-mono); font-size: 12px;
  color: var(--lhrm-text-dim); letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust .row .ph.none { color: var(--lhrm-text-faint); }
.cust .row .bal {
  margin-left: auto; flex: none; font-family: var(--lhrm-font-mono);
  font-size: 10px; color: var(--lhrm-gold-soft); letter-spacing: .5px;
}
.cust .row .flag {
  font-size: 10px; color: var(--lhrm-danger); border: 1px solid currentColor;
  padding: 0 4px; line-height: 1.6; flex: none;
}

/* ── 詳情 ───────────────────────────────────────────────── */
.cust .det { padding: 22px 26px 40px; max-width: 640px; }
.cust .det .back { display: none; }
.cust .det-hd {
  display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px;
  border-bottom: 1px solid var(--lhrm-border-2);
}
.cust .det-hd .nm { font-size: 22px; font-weight: 400; letter-spacing: .5px; line-height: 1.25; }
.cust .det-hd .sub {
  margin-top: 6px; font-family: var(--lhrm-font-mono); font-size: 10px;
  letter-spacing: 2px; color: var(--lhrm-text-faint);
}
.cust .det-hd .act { margin-left: auto; display: flex; gap: 8px; flex: none; }

.cust .sec { margin-top: 26px; }
.cust .sec-t {
  font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--lhrm-text-faint);
  padding-bottom: 7px; border-bottom: 1px solid var(--lhrm-border);
  display: flex; align-items: center; gap: 10px;
}
.cust .sec-t .tail { margin-left: auto; letter-spacing: 1px; text-transform: none; }
.cust .kv { display: grid; grid-template-columns: 96px 1fr; gap: 0; }
.cust .kv dt {
  padding: 9px 0; font-size: 12px; color: var(--lhrm-text-dim);
  border-bottom: 1px solid var(--lhrm-border);
}
.cust .kv dd {
  padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--lhrm-border);
  min-height: 37px; word-break: break-all;
}
.cust .kv dd.num { font-family: var(--lhrm-font-mono); letter-spacing: .5px; }
.cust .kv dd .none { color: var(--lhrm-text-faint); font-size: 12px; }
.cust .kv dd .side {
  color: var(--lhrm-text-faint); font-size: 11px; margin-left: 8px;
  font-family: var(--lhrm-font-mono);
}
.cust .kv dd .bad { color: var(--lhrm-danger); }

/* 帳務：兩張卡**沒有任何編輯入口**。期初餘額是負債數字，
   唯一的合法異動來源是將來的結帳系統（後端白名單才是真正的保障）。 */
.cust .bal-grid { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.cust .bal-card {
  flex: 1; min-width: 150px; border: 1px solid var(--lhrm-border-2);
  background: var(--lhrm-surface); padding: 13px 15px;
}
.cust .bal-card .k {
  font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--lhrm-text-faint); display: flex; align-items: center; gap: 6px;
}
.cust .bal-card .k em {
  font-style: normal; border: 1px solid var(--lhrm-border-2);
  padding: 0 4px; font-size: 9px; letter-spacing: 1px;
}
.cust .bal-card .v {
  font-family: var(--lhrm-font-mono); font-size: 22px; font-weight: 300;
  margin-top: 8px; letter-spacing: .5px;
}
.cust .bal-card .v.neg { color: var(--c-money); }
.cust .bal-card .v small { font-size: 11px; color: var(--lhrm-text-faint); margin-right: 4px; }
.cust .note-why { margin-top: 10px; font-size: 11px; color: var(--lhrm-text-dim); line-height: 1.7; }

/* LINE 狀態列（同一套版面也用於最上方的待確認提示列，只換 .warn） */
.cust .line-st {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  border: 1px solid var(--lhrm-border-2); padding: 12px 15px; background: var(--lhrm-surface);
}
.cust .line-st .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lhrm-text-faint); flex: none;
}
.cust .line-st.ok .dot { background: var(--lhrm-gold); }
.cust .line-st.warn .dot { background: var(--lhrm-danger); }
.cust .line-st .t { font-size: 13px; }
.cust .line-st .d {
  font-family: var(--lhrm-font-mono); font-size: 10px; color: var(--lhrm-text-faint);
  letter-spacing: 1px; margin-left: auto; text-align: right;
}

/* 備註 */
.cust .memo {
  margin-top: 12px; border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface);
  padding: 13px 15px; font-size: 13px; line-height: 1.85; white-space: pre-wrap;
}
.cust .memo.none { color: var(--lhrm-text-faint); font-size: 12px; }
.cust .memo-ed { margin-top: 12px; }

/* 編輯態。控件 16px：iOS Safari 在 <16px 的輸入框上會自動放大整頁（同 UI-7.0 服務抽屜）。 */
.cust .ed input, .cust .ed textarea, .cust .ed select {
  width: 100%; background: var(--lhrm-input-bg); border: 1px solid var(--lhrm-border-2);
  border-radius: 2px; padding: 6px 8px; font-size: 16px; outline: none; color: var(--lhrm-text);
}
.cust .ed input:focus, .cust .ed textarea:focus, .cust .ed select:focus { border-color: var(--lhrm-gold); }
.cust .ed .kv dd { padding: 5px 0 6px; }
.cust .ed textarea { min-height: 96px; resize: vertical; line-height: 1.7; }
.cust .ed-bar {
  position: sticky; bottom: 0; margin-top: 24px; display: flex; gap: 10px;
  justify-content: flex-end; padding: 12px 0; background: var(--lhrm-bg);
  border-top: 1px solid var(--lhrm-border-2);
}
.cust .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 新增顧客：撞號清單（.nd- 前綴，避開全站通用 class；欄位本體沿用上方 .ed 那組） */
.cust .nd-list { margin-top: 10px; border-top: 1px solid var(--lhrm-border); }
.cust .nd-r {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; background: transparent; border: 0; border-bottom: 1px solid var(--lhrm-border);
  color: var(--lhrm-text); font-size: 14px; text-align: left; cursor: pointer;
}
.cust .nd-r:hover { color: var(--lhrm-gold-text); }
.cust .nd-r .go { font-family: var(--lhrm-font-mono); font-size: 11px; letter-spacing: 1px; color: var(--lhrm-text-faint); flex: none; }
.cust .nd-act { margin-top: 12px; display: flex; justify-content: flex-end; }

/* 空態 */
.cust .blank {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 40px 16px; font-family: var(--lhrm-font-mono); font-size: 11px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--lhrm-text-faint);
}

/* ── 手機（定稿的 .frame[data-device="mobile"]）────────────
   列表與詳情**整頁切換**，不用抽屜：390px 下抽屜必然全螢幕，
   還多一層遮罩要跟 UI-6.4 的堆疊層級表打架，沒有任何好處。 */
@media (max-width: 760px) {
  .cust .listcol { width: 100%; border-right: 0; }
  .cust .detcol { display: none; width: 100%; }
  .cust.detail .listcol { display: none; }
  .cust.detail .detcol { display: block; }
  .cust .det { padding: 16px 18px 40px; }
  .cust .det .back {
    display: flex; align-items: center; gap: 7px; font-family: var(--lhrm-font-mono);
    font-size: 11px; letter-spacing: 1.5px; color: var(--lhrm-text-dim); margin-bottom: 14px;
  }
  .cust .det .back svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block;
  }
  .cust .det-hd .nm { font-size: 19px; }
  .cust .kv { grid-template-columns: 80px 1fr; }
  .cust .two { grid-template-columns: 1fr; }
}

/* ── 服務相簿（批 3B）。定稿：design/mockups/salon_service_photos_v1.html「顧客卡」檢視。
   照片格本體（.ph-t / .ph-empty）在 main.css 的共用組；這裡只有顧客卡的分組容器 .alb-*。
   ⚠ .alb-row 在手機**維持左右並排**（前後對照的意義就在並排），靠 .alb-strip 橫向捲動吸收寬度，不得撐破版面。 */
.cust .sec-t .alb-add-btn { margin-left: 10px; }
/* 批 3E：同意書區塊的「重新簽署」鈕，位置與相簿的「＋ 新增照片」同一條規則 */
.cust .sec-t .cs-add-btn { margin-left: 10px; }
/* ── ＋ 新增照片的就地展開列（批 3D）：一列到底、≤760px 可換行；不開浮層（UI-6.4）。
   .chip 沿用本檔的篩選 chip 樣式做「術前 / 術後」分段；select 在手機放大到 16px（iOS 聚焦不縮放，同 .ed 那組）。 */
.cust .alb-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--lhrm-border-2); background: var(--lhrm-surface-2); }
.cust .alb-add select { flex: 1 1 220px; min-width: 0; max-width: 100%; background: var(--lhrm-input-bg); border: 1px solid var(--lhrm-border-2); border-radius: 2px; padding: 6px 8px; font-size: 13px; color: var(--lhrm-text); outline: none; }
.cust .alb-add select:focus { border-color: var(--lhrm-gold); }
.cust .alb-add .seg { display: flex; gap: 4px; flex: none; }
.cust .alb-add .chip { cursor: pointer; background: none; }
.cust .alb-add .act { display: flex; gap: 6px; flex: none; margin-left: auto; }
@media (max-width: 760px) {
  .cust .alb-add select { flex-basis: 100%; font-size: 16px; }
}
.cust .alb { margin-top: 10px; }
.cust .alb-v { border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface); padding: 11px 12px; margin-bottom: 8px; }
.cust .alb-v.unassigned { border-style: dashed; }
.cust .alb-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.cust .alb-h .dt { font-family: var(--lhrm-font-mono); font-size: 12px; color: var(--lhrm-gold-text); letter-spacing: 1px; }
.cust .alb-h .sv { font-size: 12px; }
.cust .alb-h .st { font-size: 10px; color: var(--lhrm-text-faint); }
.cust .alb-h .cnt2 { margin-left: auto; font-family: var(--lhrm-font-mono); font-size: 10px; color: var(--lhrm-text-faint); }
.cust .alb-row { display: flex; align-items: stretch; gap: 9px; }
.cust .alb-side { flex: 1; min-width: 0; }
.cust .alb-side .cap { font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--lhrm-text-faint); margin-bottom: 4px; }
.cust .alb-side.after .cap { color: var(--lhrm-gold-text); }
.cust .alb-strip { display: flex; gap: 5px; overflow-x: auto; }
.cust .alb-strip .ph-t { width: 56px; height: 56px; aspect-ratio: 1; flex: none; }
.cust .alb-sep { width: 1px; background: var(--lhrm-border-2); flex: none; }
.cust .alb-more { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; border: 1px solid var(--lhrm-border-2); font-family: var(--lhrm-font-mono); font-size: 10px; color: var(--lhrm-text-faint); }

/* ── 大圖對比燈箱（批 3C）。定稿：salon_service_photos_v1.html「大圖對比」檢視。
   掛在 #view-app（同 bookings.js 的面板；8-1），是覆蓋層不是頁面。
   z-index 取自 main.css 的全站堆疊層級秩序表：30 .scrim / 31 .drawer / 32–33 頁面抽屜（hours / trial）
   → **35** → 40 toast / 45 .hb / 50 .cfm。要高於所有抽屜（日後從抽屜開燈箱也得蓋得住），
   低於 toast 與二次確認框（刪除的確認框、「已刪除」的 toast 都必須蓋在燈箱之上）。
   ⚠ 暗幕與相片窗底用 rgba 黑（本檔唯一的寫死色值）：這是「把整頁壓暗、讓相片在中性黑底上看」的覆蓋層，
     不是頁面底色，兩個主題都該一樣黑——走 --lhrm-bg 的話亮色主題會變成白幕、相片色彩失真。
   字色一律走 token：標題列 / 底列鋪 --lhrm-surface，文字才在兩個主題都讀得到（亮色主題的 --lhrm-text 是深色，直接放在黑幕上會消失）。
   ⚠ 與定稿的差異（拍板）：**不放「刪除這張」鈕**，刪除只走縮圖的 ×。 */
.lb { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .78); display: flex; flex-direction: column; padding: 16px; }
.lb-hd { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--lhrm-surface); border: 1px solid var(--lhrm-border-2); color: var(--lhrm-text); min-width: 0; }
.lb-hd > div { min-width: 0; }
.lb-hd .t { font-size: 14px; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-hd .s { font-family: var(--lhrm-font-mono); font-size: 11px; color: var(--lhrm-text-dim); margin-top: 2px; }
.lb-hd .a { margin-left: auto; display: flex; gap: 8px; flex: none; }
.lb-stage { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; min-height: 0; }
.lb-pane { position: relative; min-height: 0; min-width: 0; border: 1px solid var(--lhrm-border-2); background: rgba(0, 0, 0, .55); overflow: hidden; }
/* ⚠ contain 不是 cover：大圖要看全貌，裁切會把指尖切掉 */
.lb-pane img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lb-pane.none { display: flex; align-items: center; justify-content: center; background: var(--lhrm-surface-2); font-family: var(--lhrm-font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--lhrm-text-faint); }
/* 角標鋪 --lhrm-surface（同 main.css 的 .ph-t .seq），壓在任何相片上都讀得到 */
.lb-pane .tag { position: absolute; top: 8px; left: 8px; font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 2px; padding: 2px 7px; background: var(--lhrm-surface); color: var(--lhrm-text); opacity: .92; }
.lb-pane.after .tag { color: var(--lhrm-gold-text); }
.lb-ft { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 14px; background: var(--lhrm-surface); border: 1px solid var(--lhrm-border-2); font-family: var(--lhrm-font-mono); font-size: 11px; color: var(--lhrm-text-dim); min-width: 0; }
.lb-ft .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-ft .nav { margin-left: auto; display: flex; gap: 6px; flex: none; }
.lb-ft .nav button { width: 32px; height: 26px; border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface); color: var(--lhrm-text); font-size: 14px; line-height: 1; cursor: pointer; }
.lb-ft .nav button:hover { border-color: var(--lhrm-gold); color: var(--lhrm-gold-text); }
/* 手機：全螢幕之下上下兩列比左右擠壓好看；min-height:0 讓兩列各佔一半、img 的 contain 才有基準 */
@media (max-width: 760px) {
  .lb { padding: 10px; }
  .lb-stage { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 10px; margin-top: 10px; }
}
.cust .alb-strip .ph-t[data-ph] { cursor: pointer; }

/* ── B1b-5 LINE 新客卡合併（定稿 salon_customer_merge_v2）── 全部 mg- 前綴、限定 .cust；色值全走 token ── */
.cust .mg-tag { font-size: 10px; padding: 1px 6px; border: 1px solid var(--lhrm-border-2); color: var(--lhrm-text-dim); white-space: nowrap; margin-left: 6px; }
.cust .mg-tag.liff { border-color: var(--c-success); color: var(--c-success); }
.cust .mg-tag.pend { border-color: var(--lhrm-gold); color: var(--lhrm-gold-text); }
.cust .mg-tag.auto { border-style: dashed; }
.cust .mg-wrap:empty { display: none; }
.cust .mg-box { border: 1px solid var(--lhrm-gold); padding: 12px 14px; margin-top: 16px; font-size: 13px; line-height: 1.8; }
.cust .mg-box b { color: var(--lhrm-gold-text); font-weight: 500; }
.cust .mg-box.ok { border-color: var(--c-success); }
.cust .mg-box.ok b { color: var(--c-success); }
.cust .mg-box.mute { border-color: var(--lhrm-border-2); color: var(--lhrm-text-dim); }
.cust .mg-box .sub { color: var(--lhrm-text-dim); }
.cust .mg-box .r { text-align: right; margin-top: 8px; }
.cust .mg-wrap .sec-t { margin-top: 18px; }
.cust .mg-cmp { border: 1px solid var(--lhrm-border-2); margin-top: 8px; }
.cust .mg-cmp table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cust .mg-cmp th { font: 400 10px var(--lhrm-font-mono); color: var(--lhrm-text-faint); letter-spacing: 2px; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--lhrm-border-2); }
.cust .mg-cmp td { padding: 7px 12px; border-bottom: 1px solid var(--lhrm-border); vertical-align: top; word-break: break-all; }
.cust .mg-cmp td:first-child { font: 10px var(--lhrm-font-mono); color: var(--lhrm-text-faint); letter-spacing: 2px; width: 78px; word-break: normal; }
.cust .mg-cmp td.diff { color: var(--lhrm-gold-text); }
.cust .mg-act { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid var(--lhrm-border-2); }
.cust .mg-act .btn:disabled { opacity: .45; cursor: not-allowed; }
.cust .mg-why { font-size: 11px; color: var(--lhrm-danger); padding: 0 12px 10px; text-align: right; }
.cust .mg-dlg { border-top: 1px solid var(--lhrm-gold); padding: 12px 12px 0; font-size: 13px; line-height: 1.8; }
.cust .mg-dlg .t { font-size: 15px; font-weight: 500; }
.cust .mg-dlg .w { color: var(--lhrm-text-dim); }
.cust .mg-dlg .w b { color: var(--lhrm-danger); font-weight: 500; }
.cust .mg-dlg ol { margin: 8px 0; padding-left: 20px; }
.cust .mg-dlg .mg-act { padding: 10px 0 12px; }
.cust .mg-ck { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.cust .mg-other { margin-top: 10px; }
.cust .mg-link { color: var(--lhrm-gold-text); font-size: 12px; border-bottom: 1px solid var(--lhrm-border-2); }
.cust #cuMgQ { width: 100%; margin: 6px 0; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--lhrm-input-bg); color: var(--lhrm-text); border: 1px solid var(--lhrm-border-2); }
.cust .mg-res { display: block; width: 100%; text-align: left; padding: 7px 10px; font-size: 12px; border-bottom: 1px solid var(--lhrm-border); color: var(--lhrm-text); }
.cust .mg-res:hover { background: var(--lhrm-surface-2); }

/* ══ 顧客卡強化 C（040 / 041；定稿 salon_customer_card_v1 · 01）══════════════════
   class 一律 cc- / rel- / tier- / note- 前綴：main.css 有不帶範圍的 .rt / .no / .x / .cnt（8-1）。
   等級徽章：VIP 金底、會員金框、一般不畫。金底上的字：亮色用 --lhrm-text（深）、暗色用 --lhrm-bg（深），兩邊都是深字。 */
.cust .tier-b { display: inline-block; font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 1px; line-height: 1; padding: 3px 6px; margin-left: 6px; border: 1px solid var(--lhrm-gold); vertical-align: middle; white-space: nowrap; }
.cust .tier-b.vip { background: var(--lhrm-gold); color: var(--lhrm-text); }
[data-theme="dark"] .cust .tier-b.vip { color: var(--lhrm-bg); }
.cust .tier-b.member { color: var(--lhrm-gold-text); }
.cust .det-hd .nm .tier-b { font-size: 11px; vertical-align: 4px; }
.cust .cc-lnk { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--lhrm-text-dim); }
.cust .cc-lnk .ln-ic { margin: 0; }   /* 官方原檔 20px 不縮（六章 v1.35.0） */
.cust .cc-auto { font-family: var(--lhrm-font-mono); font-size: 10px; border: 1px dashed var(--lhrm-border-2); padding: 1px 6px; }
.cust .cc-un { margin-left: auto; font-size: 12px; color: var(--lhrm-gold-soft); border-bottom: 1px solid var(--lhrm-border-2); padding: 0; }
.cust .sec-t .tail.lock { color: var(--lhrm-gold-soft); }
.cust .memo.click { cursor: text; }
.cust .memo.click:hover { border-color: var(--lhrm-gold); }
.cust .memo-ed.ed textarea { min-height: 110px; }
.cust .note-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cust .cc-cnt { margin-right: auto; font-family: var(--lhrm-font-mono); font-size: 10px; color: var(--lhrm-text-faint); }
.cust .rel-r { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--lhrm-border); font-size: 13px; }
.cust .cc-rt { font-size: 11px; border: 1px solid var(--lhrm-border-2); padding: 2px 6px; text-align: center; color: var(--lhrm-text-dim); }
.cust .cc-rt.ref { border-color: var(--lhrm-gold-soft); color: var(--lhrm-gold-soft); }
.cust .rel-go { color: var(--lhrm-text); border-bottom: 1px solid var(--lhrm-border-2); padding: 0; font-size: 13px; }
.cust .cc-no { font-family: var(--lhrm-font-mono); font-size: 10px; color: var(--lhrm-text-faint); }
.cust .cc-txt { color: var(--lhrm-text-dim); word-break: break-all; }
.cust .cc-x { font-size: 11px; color: var(--lhrm-text-faint); padding: 0; }
.cust .cc-x:hover { color: var(--lhrm-danger); }
.cust .rel-none { padding: 9px 0; font-size: 12px; color: var(--lhrm-text-faint); }
.cust .rel-f { display: grid; grid-template-columns: 88px 1fr auto; gap: 8px; margin-top: 10px; }
.cust .rel-f select, .cust .rel-f input { min-width: 0; padding: 6px 8px; font: inherit; font-size: 13px; background: var(--lhrm-input-bg); color: var(--lhrm-text); border: 1px solid var(--lhrm-border-2); border-radius: 2px; }
.cust .rel-f input:focus, .cust .rel-f select:focus { border-color: var(--lhrm-gold); outline: none; }
.cust .rel-res { grid-column: 1 / -1; }
.cust .tier-pick { display: inline-flex; margin-top: 12px; border: 1px solid var(--lhrm-border-2); }
.cust .tier-pick button, .cust .tier-pick span { padding: 6px 14px; font-size: 12px; color: var(--lhrm-text-dim); border-right: 1px solid var(--lhrm-border-2); }
.cust .tier-pick > :last-child { border-right: 0; }
.cust .tier-pick .on { background: var(--lhrm-surface); color: var(--lhrm-gold-text); }
.cust .tier-log { margin-top: 10px; }
.cust .cc-tl { font-family: var(--lhrm-font-mono); font-size: 11px; color: var(--lhrm-text-faint); padding: 3px 0; }
@media (max-width: 760px) {
  .cust .rel-f { grid-template-columns: 1fr auto; }
  .cust .rel-f select { grid-column: 1 / -1; }
  .cust .rel-f select, .cust .rel-f input { font-size: 16px; }   /* iOS 聚焦不縮放（同 .ed） */
}
.cust .rel-o { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

/* v1.43.1 等級：預選 → 確定變更 / 取消（金框）；紀錄預設 3 筆 + 顯示全部 */
.cust .tier-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.cust .tier-row .tier-pick { margin-top: 0; }
.cust .tier-row .tier-go { border-color: var(--lhrm-gold); color: var(--lhrm-gold-text); }
.cust .tier-more { margin-top: 4px; padding: 0; font-size: 11px; color: var(--lhrm-gold-soft); border-bottom: 1px solid var(--lhrm-border-2); }