/* ===== 共用元件樣式（UI/UX Refactor）— CosDrawerV1 + CustomerPickerV1 =====
   只新增本檔案，不修改 design-tokens.css / cos-components.css。
   所有顏色、間距、圓角一律引用既有 --cos-* Token，不引入新的色票。 */

/* --------------------------------------------------------------------------
   1. Drawer Host — cos-components.css 的 .cos-drawer 是 position:absolute（設計為
      掛在某個定位容器內）。頁面級 Drawer 需要一個 fixed 的宿主，因此在此補一層
      .cos-drawer-host-v1，而不是去改 Design System 既有的 .cos-drawer 規則。
   -------------------------------------------------------------------------- */
.cos-drawer-host-v1{
  position:fixed;inset:0;z-index:1200;pointer-events:none;
}
.cos-drawer-host-v1[hidden]{display:none}
.cos-drawer-host-v1 .cos-drawer__backdrop{pointer-events:none}
.cos-drawer-host-v1 .cos-drawer__backdrop.is-open{pointer-events:auto}
.cos-drawer-host-v1 .cos-drawer{pointer-events:none}
.cos-drawer-host-v1 .cos-drawer.is-open{pointer-events:auto}
.cos-drawer-host-v1 .cos-drawer:focus{outline:none}

/* Drawer 內沿用既有表單網格密度（與 .customer-card-grid-v4 / .form two 一致的兩欄） */
.cos-drawer__body .cpk-form-grid-v1{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--cos-space-md);
}
.cos-drawer__body .cpk-form-grid-v1 .cpk-field-wide-v1{grid-column:1 / -1}
.cos-drawer__body .cpk-form-grid-v1 label{
  display:flex;flex-direction:column;gap:4px;
  font-size:var(--cos-fs-small);color:var(--cos-text-subtle);min-width:0;
}
.cos-drawer__body .cpk-form-grid-v1 label input,
.cos-drawer__body .cpk-form-grid-v1 label select,
.cos-drawer__body .cpk-form-grid-v1 label textarea{width:100%;box-sizing:border-box}
.cos-drawer__body .cpk-form-grid-v1 label.checkline{
  flex-direction:row;align-items:center;gap:8px;color:var(--cos-text);
}
.cos-drawer__body .cpk-form-grid-v1 label.checkline input{width:auto}
.cos-drawer__section-title-v1{
  margin:var(--cos-space-lg) 0 var(--cos-space-sm);
  font-size:var(--cos-fs-small);font-weight:600;color:var(--cos-text);
}
.cos-drawer__section-title-v1:first-child{margin-top:0}
@media(max-width:720px){
  .cos-drawer__body .cpk-form-grid-v1{grid-template-columns:minmax(0,1fr)}
}

/* --------------------------------------------------------------------------
   2. CustomerPickerV1 — 統一的客戶列
   -------------------------------------------------------------------------- */
.cpk-row-v1{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  padding:10px 12px;margin:0 0 6px;
  background:var(--cos-surface);border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-md,8px);
  text-align:left;cursor:pointer;
  transition:background var(--cos-transition),border-color var(--cos-transition);
}
.cpk-row-v1:hover{background:var(--cos-surface-subtle,rgba(16,24,40,.04));border-color:var(--cos-accent)}
.cpk-row-v1.is-selected{border-color:var(--cos-accent);background:var(--cos-accent-soft)}
.cpk-row-v1:focus-visible{outline:2px solid var(--cos-accent);outline-offset:1px}

.cpk-row-avatar-v1{
  flex:none;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cos-accent-soft);color:var(--cos-accent);
  font-weight:600;font-size:var(--cos-fs-small);
}
.cpk-row-body-v1{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cpk-row-line1-v1{display:flex;align-items:center;gap:8px;min-width:0}
.cpk-row-name-v1{font-weight:600;color:var(--cos-text);white-space:nowrap}
.cpk-row-tags-v1{display:flex;gap:4px;flex:1;min-width:0;overflow:hidden}
.cpk-row-total-v1{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;color:var(--cos-text)}
.cpk-row-line2-v1,
.cpk-row-line3-v1{
  display:flex;gap:10px;flex-wrap:wrap;
  font-size:var(--cos-fs-small);color:var(--cos-text-subtle);
}
.cpk-row-source-v1{
  padding:0 6px;border-radius:999px;
  background:var(--cos-surface-subtle,rgba(16,24,40,.05));
}
.cpk-row-date-v1{font-variant-numeric:tabular-nums}
.cpk-row-pick-v1{
  flex:none;align-self:center;padding:4px 10px;border-radius:6px;
  background:var(--cos-accent);color:#fff;font-size:var(--cos-fs-small);
}

.cpk-empty-v1{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:24px 12px;text-align:center;color:var(--cos-text-subtle);
}
.cpk-empty-title-v1{margin:0;font-size:var(--cos-fs-small)}
.cpk-create-v1{
  padding:6px 14px;border-radius:6px;cursor:pointer;
  border:1px solid var(--cos-accent);background:transparent;color:var(--cos-accent);
}
.cpk-create-v1:hover{background:var(--cos-accent-soft)}

/* 表格變體（客戶資料查詢保留 Management 表格外殼，欄位與卡片列一致） */
.cpk-trow-v1 td{vertical-align:middle}

/* --------------------------------------------------------------------------
   3. 品項管理 Drawer 內容微調（第 4／5 項）
      消耗品項編輯卡是整塊搬進 Drawer 的既有 DOM，這裡只把它原本的「卡片外框」
      壓平（Drawer body 本身已經是卡片），不改它內部任何欄位樣式。
   -------------------------------------------------------------------------- */
.cos-drawer__body .benefit-edit-card-v1{
  border:0;box-shadow:none;padding:0;margin:0;background:transparent;
}
.cos-drawer__body .benefit-edit-grid-v1{
  display:flex;flex-direction:column;gap:var(--cos-space-lg);
}
.cos-drawer__body .benefit-edit-divider-v1{
  border-top:1px solid var(--cos-border);height:0;width:100%;margin:0;
}
.cos-drawer__footer .benefit-edit-footer-status-v1{
  margin-right:auto;font-size:var(--cos-fs-small);color:var(--cos-text-subtle);
}

/* --------------------------------------------------------------------------
   4. 儲值商品 Card Form + Card List（第 9 項）
   -------------------------------------------------------------------------- */
.sv-form-grid-v1{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cos-space-md);
}
@media(max-width:1100px){ .sv-form-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){ .sv-form-grid-v1{grid-template-columns:minmax(0,1fr)} }

.sv-list-head-v1{
  margin:var(--cos-space-lg) 0 var(--cos-space-sm);
  font-size:var(--cos-fs-card-title);font-weight:var(--cos-fw-card-title);color:var(--cos-text);
}
.sv-card-list-v1{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--cos-space-md);
}
.sv-card-empty-v1{grid-column:1 / -1}
.sv-card-v1{
  display:flex;flex-direction:column;gap:var(--cos-space-sm);
  padding:var(--cos-space-md);
  background:var(--cos-surface);border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-md,8px);
}
.sv-card-v1.is-inactive{opacity:.62}
.sv-card-head-v1{display:flex;align-items:flex-start;gap:8px}
.sv-card-title-v1{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sv-card-name-v1{font-weight:600;color:var(--cos-text)}
.sv-card-code-v1{font-size:var(--cos-fs-small);color:var(--cos-text-subtle)}
.sv-card-status-v1{flex:none}
.sv-card-metrics-v1{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;padding:8px 0;border-top:1px solid var(--cos-border);border-bottom:1px solid var(--cos-border);
}
.sv-card-metric-v1{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv-card-metric-v1 span{font-size:var(--cos-fs-small);color:var(--cos-text-subtle)}
.sv-card-metric-v1 b{font-variant-numeric:tabular-nums;color:var(--cos-text);white-space:nowrap}
.sv-card-metric-v1 b em{
  display:block;font-style:normal;font-size:var(--cos-fs-small);
  font-weight:400;color:var(--cos-text-subtle);
}
.sv-card-metric-v1.is-bonus b{color:var(--cos-success,#0f7b4f)}
.sv-card-actions-v1{display:flex;gap:8px;justify-content:flex-end}

/* --------------------------------------------------------------------------
   5. 施作部位管理 — 三欄 Transfer List（第 1 項）
      沿用原本的 .ta-* 命名空間與既有 .ta-row / .ta-badge / .ta-warning-card 樣式，
      只新增三欄骨架與清單列，未改動任何既有 .ta-* 規則。
   -------------------------------------------------------------------------- */
.ta-tri-layout-v1{
  display:grid;
  grid-template-columns:minmax(200px,240px) minmax(0,1fr) auto minmax(0,1fr);
  gap:var(--cos-space-md);
  align-items:stretch;
  min-height:0;
}
/* 高度必須「封頂」：Transfer List 的三欄若隨內容長高（未設定品項可能上百筆），
   整個 grid 會被撐到上萬像素，內欄的 overflow-y 永遠不會生效，中間的
   加入／移除按鈕（align-self:center）也會被推到畫面外。因此固定欄高，
   讓捲動發生在 .ta-tri-list-v1 內部。 */
.ta-tri-col-v1{
  display:flex;flex-direction:column;min-width:0;
  height:clamp(380px,62vh,720px);
  background:var(--cos-surface);border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-md,8px);overflow:hidden;
}
.ta-tri-head-v1{
  display:flex;align-items:center;gap:8px;
  padding:10px var(--cos-space-md);
  border-bottom:1px solid var(--cos-border);
  background:var(--cos-surface-subtle,rgba(16,24,40,.03));
}
.ta-tri-title-v1{margin:0;font-size:var(--cos-fs-small);font-weight:600;color:var(--cos-text)}
.ta-tri-count-v1{margin-left:auto;font-size:var(--cos-fs-small);color:var(--cos-text-subtle)}
.ta-tri-tools-v1{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:8px var(--cos-space-md);border-bottom:1px solid var(--cos-border);
}
.ta-tri-tools-v1 input[type="text"],
.ta-tri-tools-v1 select{min-width:0;flex:1 1 130px}
.ta-tri-selectall-v1{
  display:flex;align-items:center;gap:5px;flex:none;
  font-size:var(--cos-fs-small);color:var(--cos-text-subtle);white-space:nowrap;
}
.ta-tri-list-v1{flex:1;min-height:0;overflow-y:auto;padding:8px var(--cos-space-md)}
.ta-tri-areas-v1 .ta-list-scroll{flex:1;min-height:0;overflow-y:auto}

.ta-tri-transfer-v1{
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  align-self:center;flex:none;
}
.ta-transfer-btn-v1{white-space:nowrap;min-width:104px}

.ta-pick-row-v1{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;margin-bottom:4px;
  border:1px solid transparent;border-radius:6px;cursor:pointer;
}
.ta-pick-row-v1:hover{background:var(--cos-surface-subtle,rgba(16,24,40,.04))}
.ta-pick-row-v1.is-checked{background:var(--cos-accent-soft);border-color:var(--cos-accent)}
.ta-pick-check-v1{flex:none}
.ta-pick-body-v1{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.ta-pick-name-v1{color:var(--cos-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-pick-meta-v1{font-size:var(--cos-fs-small);color:var(--cos-text-subtle)}

@media(max-width:1280px){
  .ta-tri-layout-v1{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  }
  .ta-tri-areas-v1{grid-column:1 / -1;min-height:200px}
}
@media(max-width:820px){
  .ta-tri-layout-v1{grid-template-columns:minmax(0,1fr)}
  .ta-tri-areas-v1{grid-column:auto}
  .ta-tri-transfer-v1{flex-direction:row;justify-content:center}
}

/* --------------------------------------------------------------------------
   6. 套餐及優惠設定 — 4 Step ＋ 右側固定摘要（第 6 項）
   -------------------------------------------------------------------------- */
.pkg-steps-v1{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--cos-space-md)}
.pkg-step-btn-v1{cursor:pointer}
.pkg-step-btn-v1.is-disabled,
.pkg-step-btn-v1:disabled{opacity:.45;cursor:not-allowed}

.pkg-layout-v1{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);
  gap:var(--cos-space-lg);align-items:start;
}
.pkg-steps-body-v1{min-width:0}
.pkg-step-panel-v1{display:none}
.pkg-step-panel-v1.is-active{display:block}
/* #packageComboEditorV230 是既有容器（.panel.cos-card），Step 2／3 放在它裡面。
   停在 Step 1／4 時它會變成一個沒有內容的空卡片，因此讓它本身不畫框、不佔位；
   用 :not(.hidden) 限定，確保 renderPackageComboEditor() 加上的 .hidden 仍能生效。 */
.pkg-combo-host-v1:not(.hidden){
  display:contents;border:0;background:transparent;padding:0;margin:0;box-shadow:none;
}
.pkg-step-title-v1{
  margin:0 0 var(--cos-space-sm);
  font-size:var(--cos-fs-card-title);font-weight:var(--cos-fw-card-title);color:var(--cos-text);
}
/* CLINICOS-V4-MANUAL-UAT-BATCH1（FIX-I）：套餐類型 select 被截成「① 同品項多...」的原因。
   Step 1 這一格同時掛著舊的 .package-form，而 style.css:4007 有一條為「舊版單列 6 欄套餐表單」
   寫的
     .package-form{grid-template-columns:120px 150px minmax(260px,1fr) 130px 130px 120px!important}
   它帶 !important，因此無論載入順序都壓過下面這條 2 欄版面。Step 1 只有 4 個欄位，依序落在
   第 1～4 欄，而第 4 欄固定 130px —— 套餐類型正好落在那裡，130px 放不下「① 同品項多組」，
   於是被裁掉。資料本身是完整的（3 個選項皆存在，見 index.html 的 #packageType）。
   這裡只讓本模組的 2 欄版面真正生效：加上 !important 取回控制權。
   不移除 .package-form（app.js:7917 仍以它作為插入位置的 fallback 選擇器），
   不改 style.css 的舊規則（其他舊版標記可能仍依賴它），不新增套餐類型、不改套餐規則。 */
.pkg-basic-grid-v1,
.pkg-price-grid-v1{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--cos-space-md);
}
.pkg-basic-grid-v1 label,
.pkg-price-grid-v1 label{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  font-size:var(--cos-fs-small);color:var(--cos-text-subtle);
}
.pkg-basic-grid-v1 label input,
.pkg-basic-grid-v1 label select,
.pkg-price-grid-v1 label input{width:100%;box-sizing:border-box}
.pkg-actions-v1{
  display:flex;justify-content:flex-end;gap:8px;
  margin-top:var(--cos-space-lg);padding-top:var(--cos-space-md);
  border-top:1px solid var(--cos-border);
}
.pkg-summary-v1{
  position:sticky;top:var(--cos-space-md);
  display:flex;flex-direction:column;gap:8px;
  padding:var(--cos-space-md);
  background:var(--cos-surface);border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-md,8px);
}
.pkg-summary-title-v1{margin:0;font-size:var(--cos-fs-small);font-weight:600;color:var(--cos-text)}
.pkg-summary-row-v1{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:var(--cos-fs-small);color:var(--cos-text-subtle);
}
.pkg-summary-row-v1 b{color:var(--cos-text);font-variant-numeric:tabular-nums}
.pkg-summary-detail-v1{border-top:1px solid var(--cos-border);padding-top:8px}
.pkg-summary-detail-v1 .note{margin:0;display:flex;flex-direction:column;gap:3px}
@media(max-width:1100px){
  .pkg-layout-v1{grid-template-columns:minmax(0,1fr)}
  .pkg-summary-v1{position:static}
  /* FIX-I：基準規則現在帶 !important（見上方說明），這裡的窄版收合必須同樣帶 !important
     才壓得過它，否則 1100px 以下會停在 2 欄。 */
  .pkg-basic-grid-v1,.pkg-price-grid-v1{grid-template-columns:minmax(0,1fr)!important}
}

/* --------------------------------------------------------------------------
   7. 銷售及消耗連結設定 — 左／中／右 ＋ 下方 Mapping（第 7 項）
   -------------------------------------------------------------------------- */
.pmap-layout-v1{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:var(--cos-space-md);align-items:stretch;
}
/* 與施作部位三欄同一個理由：欄高封頂，捲動發生在 .pmap-list-v1 內部，
   中間的「建立連結」才不會被長清單推到畫面外。 */
.pmap-col-v1{
  display:flex;flex-direction:column;min-width:0;
  height:clamp(320px,52vh,620px);
  background:var(--cos-surface);border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-md,8px);overflow:hidden;
}
.pmap-col-head-v1{
  display:flex;align-items:center;gap:8px;
  padding:10px var(--cos-space-md);border-bottom:1px solid var(--cos-border);
  background:var(--cos-surface-subtle,rgba(16,24,40,.03));
}
.pmap-col-title-v1{margin:0;font-size:var(--cos-fs-small);font-weight:600;color:var(--cos-text)}
.pmap-col-count-v1{margin-left:auto;font-size:var(--cos-fs-small);color:var(--cos-text-subtle)}
.pmap-col-tools-v1{padding:8px var(--cos-space-md);border-bottom:1px solid var(--cos-border)}
.pmap-col-tools-v1 input{width:100%;box-sizing:border-box}
.pmap-list-v1{flex:1;min-height:0;overflow-y:auto;padding:8px var(--cos-space-md)}
.pmap-row-v1{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 8px;margin-bottom:4px;text-align:left;cursor:pointer;
  border:1px solid transparent;border-radius:6px;background:transparent;
}
.pmap-row-v1:hover{background:var(--cos-surface-subtle,rgba(16,24,40,.04))}
.pmap-row-v1.is-selected{background:var(--cos-accent-soft);border-color:var(--cos-accent)}
.pmap-row-body-v1{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.pmap-row-name-v1{color:var(--cos-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmap-row-meta-v1{font-size:var(--cos-fs-small);color:var(--cos-text-subtle)}
.pmap-row-badge-v1{
  flex:none;min-width:22px;padding:1px 6px;border-radius:999px;text-align:center;
  background:var(--cos-surface-subtle,rgba(16,24,40,.06));
  font-size:var(--cos-fs-small);color:var(--cos-text-subtle);
}
.pmap-mid-v1{
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:10px;
  align-self:center;flex:none;min-width:160px;
}
.pmap-qty-field-v1{
  display:flex;flex-direction:column;gap:4px;
  font-size:var(--cos-fs-small);color:var(--cos-text-subtle);
}
.pmap-qty-field-v1 input{width:100%;box-sizing:border-box}
.pmap-hint-v1{margin:0;font-size:var(--cos-fs-small);color:var(--cos-text-subtle);text-align:center}
.pmap-current-v1{margin-top:var(--cos-space-lg)}
.pmap-current-head-v1{display:flex;align-items:center;gap:8px;margin-bottom:var(--cos-space-sm)}
@media(max-width:900px){
  .pmap-layout-v1{grid-template-columns:minmax(0,1fr)}
  .pmap-mid-v1{flex-direction:row;align-items:flex-end;justify-content:center}
}

/* --------------------------------------------------------------------------
   8. 療程類別 — Tree View ＋ 詳細資料（第 8 項）
   -------------------------------------------------------------------------- */
.tcm-tree-layout-v1{
  display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);
  gap:var(--cos-space-lg);align-items:start;
}
.tcm-tree-col-v1,
.tcm-detail-col-v1{
  background:var(--cos-surface);border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-md,8px);overflow:hidden;
}
.tcm-tree-head-v1{
  display:flex;align-items:center;gap:8px;
  padding:10px var(--cos-space-md);border-bottom:1px solid var(--cos-border);
  background:var(--cos-surface-subtle,rgba(16,24,40,.03));
}
.tcm-tree-title-v1{margin:0;font-size:var(--cos-fs-small);font-weight:600;color:var(--cos-text)}
.tcm-tree-hint-v1{margin-left:auto;font-size:var(--cos-fs-small);color:var(--cos-text-subtle)}
.tcm-tree-body-v1{max-height:62vh;overflow-y:auto;padding:8px}

.tcm-branch-v1{margin-bottom:2px}
.tcm-node-v1{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;border:1px solid transparent;border-radius:6px;
}
.tcm-node-v1:hover{background:var(--cos-surface-subtle,rgba(16,24,40,.04))}
.tcm-node-v1.is-selected{background:var(--cos-accent-soft);border-color:var(--cos-accent)}
.tcm-node-v1.is-inactive .tcm-node-name-v1{color:var(--cos-text-subtle);text-decoration:line-through}
.tcm-node-v1.is-dragging{opacity:.45}
.tcm-node-v1.is-drop-target{border-color:var(--cos-accent);border-style:dashed}
.tcm-node-grip-v1{flex:none;cursor:grab;color:var(--cos-text-subtle);font-size:var(--cos-fs-small)}
.tcm-node-caret-v1{
  flex:none;width:18px;height:18px;line-height:1;cursor:pointer;
  border:0;background:transparent;color:var(--cos-text-subtle);
  transition:transform var(--cos-transition);
}
.tcm-node-caret-v1.is-open{transform:rotate(90deg)}
.tcm-node-caret-v1.is-leaf{cursor:default;visibility:hidden}
.tcm-node-label-v1{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  border:0;background:transparent;text-align:left;cursor:pointer;padding:0;
}
.tcm-node-name-v1{color:var(--cos-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcm-node-meta-v1{font-size:var(--cos-fs-small);color:var(--cos-text-subtle)}
.tcm-node-status-v1{flex:none}
.tcm-children-v1{margin:2px 0 6px 26px;border-left:1px solid var(--cos-border);padding-left:8px}
.tcm-children-empty-v1{
  padding:6px 8px;font-size:var(--cos-fs-small);color:var(--cos-text-subtle);
}

.tcm-detail-body-v1{padding:var(--cos-space-lg)}
.tcm-detail-head-v1{margin-bottom:var(--cos-space-md)}
.tcm-detail-title-v1{margin:0;font-size:var(--cos-fs-card-title);font-weight:var(--cos-fw-card-title);color:var(--cos-text)}
.tcm-detail-sub-v1{margin:2px 0 0;font-size:var(--cos-fs-small);color:var(--cos-text-subtle)}
.tcm-detail-grid-v1{display:flex;flex-direction:column;gap:2px}
.tcm-detail-row-v1{
  display:flex;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--cos-border);
  font-size:var(--cos-fs-small);
}
.tcm-detail-row-v1 span{flex:none;width:110px;color:var(--cos-text-subtle)}
.tcm-detail-row-v1 b{flex:1;min-width:0;color:var(--cos-text);font-weight:500;word-break:break-word}
.tcm-detail-actions-v1{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  margin-top:var(--cos-space-lg);
}
@media(max-width:1000px){
  .tcm-tree-layout-v1{grid-template-columns:minmax(0,1fr)}
  .tcm-tree-body-v1{max-height:40vh}
}

/* CLINICOS-GLOBAL-SHORTCUTS-QUICK-CENTER —— 快捷功能中心（F12 / 頂部「⌨ 快捷鍵」共用）。
   外框沿用既有 .detail-modal / .cos-dialog，這裡只補清單列樣式；
   顏色、間距、圓角全部引用既有 --cos-* Token，未新增色票、未使用 gradient／glassmorphism。 */
/* .detail-modal 預設上下留 56px，12 列在 768px 高的螢幕會被擠到需要內捲。
   這裡只針對本對話框收窄外距並改為置中，不動共用的 .detail-modal 規則。 */
.gsk-help-modal-v1{padding:24px 16px;align-items:center}
.gsk-center-card-v1{width:min(420px,calc(100vw - 32px))}
/* 12 列在 1366×768 要能一次看完（不必內捲，也不擁擠）；視窗更矮時才由 Dialog body
   自己捲動 —— 捲動一律發生在對話框內，不讓整頁多長出一條捲軸。 */
.gsk-center-card-v1 .cos-dialog__body{max-height:min(80vh,660px);overflow-y:auto}
.gsk-center-list-v1{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.gsk-center-item-v1{margin:0}
.gsk-center-row-v1{
  display:flex;align-items:center;gap:var(--cos-space-md);width:100%;
  padding:6px 10px;text-align:left;cursor:pointer;
  border:1px solid transparent;border-radius:var(--cos-radius-md,8px);
  background:transparent;color:var(--cos-text);font:inherit;
}
.gsk-center-row-v1:hover{background:var(--cos-surface-subtle,rgba(16,24,40,.04));border-color:var(--cos-border)}
.gsk-center-row-v1:focus-visible{outline:2px solid var(--cos-accent);outline-offset:1px}
.gsk-center-row-v1.is-self,
.gsk-center-row-v1:disabled{cursor:default;color:var(--cos-text-subtle)}
.gsk-center-row-v1.is-self:hover{background:transparent;border-color:transparent}
/* Badge 寬度固定，12 列的鍵位對齊（F1 與 F10 同寬）。 */
.gsk-center-key-v1{
  flex:none;box-sizing:border-box;min-width:46px;padding:2px 8px;text-align:center;
  border:1px solid var(--cos-border);border-bottom-width:2px;border-radius:var(--cos-radius-sm,6px);
  background:var(--cos-surface-muted);color:var(--cos-text-subtle);
  font-family:inherit;font-size:var(--cos-fs-small);font-weight:600;
  font-variant-numeric:tabular-nums;
}
/* 功能名稱要比 Badge 更好讀：主色、正常字級。 */
.gsk-center-label-v1{
  flex:1;min-width:0;color:var(--cos-text);font-size:var(--cos-fs-body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gsk-center-arrow-v1{flex:none;width:12px;text-align:center;color:var(--cos-text-subtle)}
.gsk-center-row-v1:hover .gsk-center-arrow-v1{color:var(--cos-accent)}
.gsk-help-note-v1{margin-top:var(--cos-space-md)}
/* 頂部快速功能面板裡的固定入口：沿用面板既有的 .quick-launcher-edit-v23 外觀（width:100%），
   只補一個與下方「編輯快速功能」之間的間距，不改動既有按鈕樣式。 */
.gsk-quick-entry-v1{margin-bottom:8px}

/* --------------------------------------------------------------------------
   CLINICOS-SALES-USAGE-STEP-HEADER-UNIFICATION —— 工作流程 Step Header（共用）

   問題根因：銷售頁的編號 <span> 同時掛了 .sales-step-v23 與 .cos-steps__item。
   .cos-steps__item 是「橫向步驟列」元件（flex:1 1 0、背景透明、置中），並非行內徽章；
   它在 cos-components.css 中後載入，於是覆蓋了 .sales-step-v23 的藍色圓形設定，
   把編號撐成整列寬（實測 1191–1245px）、底色變透明，數字因而被置中、標題被推到右側。

   這裡以耗療頁既有的 .usage-wf-step-* 視覺為基準抽出共用 class，兩頁共用同一份定義。
   選擇器刻意寫成 h4.cos-workflow-step-header（與 .sales-block-v23 h4 同 specificity），
   而本檔在 style.css 之後載入，因此不必修改 style.css 既有規則即可生效。
   -------------------------------------------------------------------------- */
h4.cos-workflow-step-header{
  display:flex;align-items:center;gap:10px;
  margin:0 0 12px;
  font-size:22px;font-weight:700;color:#0f172a;
}
.cos-workflow-step-header__num{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:#1d4ed8;color:#fff;
  font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
/* Card padding 對齊耗療頁的 .usage-wf-step-v1（16px 20px）；
   邊框／圓角／陰影維持各頁原樣，本輪只統一 Step Header 相關的視覺基準。 */
.sales-block-v23{padding:16px 20px}

/* ---- CLINICOS-V4-PACKAGE-WORKSPACE-UI-REFINEMENT-003 —— Step 2 群組卡與 Step 3 加入品項工具列。
   純呈現：Step 2 的群組區是由 JS 以 generic `.panel` 產生的，因此吃不到任何 package 專用樣式，
   量到每張卡 280px、三組合計 840px。以下規則一律限定在 #packageGroupConfigV230 /
   [data-pkg-step="3"] 之內，不動全域 .panel、不動 DOM、不動任何 handler。 ---- */
#packageGroupConfigV230 .panel{
  padding:16px;border:1px solid var(--cos-border,#e5e7eb);border-radius:10px;
  background:#fff;box-shadow:none;
}
/* 欄位列：組別代碼／組別名稱／必選數量 三欄一列，標籤與輸入距離收緊。 */
#packageGroupConfigV230 .panel .form.three{gap:10px;margin:0 0 10px}
#packageGroupConfigV230 .panel .form.three label{gap:4px;font-size:12.5px;color:#475467}
#packageGroupConfigV230 .panel .form.three input{min-height:32px;padding:0 8px}
/* 「A組：2選1」這行當作卡片標題，視覺上比欄位重，讓 form 與 table 屬於同一張卡。 */
#packageGroupConfigV230 .panel .note{
  margin:0 0 8px;font-size:13px;font-weight:600;color:#101828;
}
/* Items table：列高收緊，空狀態用一般表格列，不做大型 Empty Card。 */
#packageGroupConfigV230 .panel table{margin:0}
#packageGroupConfigV230 .panel table th,
#packageGroupConfigV230 .panel table td{padding:6px 8px;font-size:12.5px}
#packageGroupConfigV230 .panel table td input{min-height:28px;height:28px;padding:0 6px;font-size:12.5px}
#packageGroupConfigV230 .panel table td button.mini{min-height:26px;padding:0 8px;font-size:12px}
/* 「移除此組」是次要動作，不搶主視覺。 */
#packageGroupConfigV230 .panel .actions{margin-top:10px}
#packageGroupConfigV230 .panel .actions .ghost{min-height:30px;padding:0 12px;font-size:12.5px;color:#667085}

/* Step 3：把「加入至／搜尋／候選品項／＋加入」收成緊湊工具列。
   注意必須帶 .is-active —— .pkg-step-panel-v1 預設 display:none，只有 active 才顯示，
   若在這裡無條件宣告 display 會讓四個 Step 同時出現。 */
.pkg-step-panel-v1[data-pkg-step="3"].is-active{display:flex;flex-direction:column;gap:8px}
.pkg-step-panel-v1[data-pkg-step="3"] .pkg-step-title-v1{margin-bottom:0}
.pkg-step-panel-v1[data-pkg-step="3"] .pkg-target-seg-row-v1{margin:0}
.pkg-step-panel-v1[data-pkg-step="3"] .form.three{
  display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.4fr) auto;
  gap:12px;align-items:end;margin:0;
}
.pkg-step-panel-v1[data-pkg-step="3"] .form.three label{gap:4px;font-size:12.5px;color:#475467}
.pkg-step-panel-v1[data-pkg-step="3"] .form.three input,
.pkg-step-panel-v1[data-pkg-step="3"] .form.three select{min-height:34px}
.pkg-step-panel-v1[data-pkg-step="3"] .actions{margin:0}
@media(max-width:1199px){
  .pkg-step-panel-v1[data-pkg-step="3"] .form.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* 套餐列表數量提示：純文字，數字由現行列表計算，不新增 API。 */
.pkg-list-count-v1{font-size:12.5px;color:#667085;margin:0 0 8px}