/* ClinicOS Design Tokens — first :root block in this stylesheet. Values are not invented: chosen
   by searching existing usage across style.css. #1d4ed8 is the dominant primary blue already used
   ~90x throughout the app (vs. e.g. #1e3a8a used only ~5x); #1741b8 is the hover-darken shade
   already paired with #1d4ed8 in multiple existing buttons (quick-favorite-plus-v233,
   sales-query-btn-primary-v22, debt-treatment-btn-primary); #e5e7eb/#98a2b3 is the existing
   disabled background/text pattern already used for a primary-style button in Adjustment Center
   (#adjustmentRefundActionsV230 button:disabled). */
:root{
  --clinic-primary:#1d4ed8;
  --clinic-primary-hover:#1741b8;
  --clinic-primary-disabled:#e5e7eb;
  --clinic-primary-text:#fff;
}

/* ClinicOS shared Button component — first usage: 常用銷售設定 Workflow Center (加入/移除).
   Danger variant is defined but intentionally not applied anywhere yet (base styling only, per
   explicit scope — do not wire it to any existing delete button in this change).

   UI Foundation Phase 1 (2026-07-22): .cos-btn* is the new platform-prefixed name for this exact
   component (docs/architecture/ClinicOS_UI_Foundation_Standard_V1.md §6 Approved Standard). Per
   that task's explicit compatibility rule ("不要複製兩套相同 CSS"), .clinic-btn* and .cos-btn* are
   declared as one shared selector list — same declarations, two class names, zero duplication.
   Existing .clinic-btn* callers anywhere else in the app are byte-for-byte unaffected. */
.clinic-btn,.cos-btn{min-height:40px;border-radius:12px;padding:0 16px;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.clinic-btn-primary,.cos-btn--primary{background:var(--clinic-primary);color:var(--clinic-primary-text);border:1px solid var(--clinic-primary)}
.clinic-btn-primary:hover:not(:disabled),.cos-btn--primary:hover:not(:disabled){background:var(--clinic-primary-hover);border-color:var(--clinic-primary-hover)}
.clinic-btn-primary:disabled,.cos-btn--primary:disabled{background:var(--clinic-primary-disabled);border-color:var(--clinic-primary-disabled);color:#98a2b3;cursor:not-allowed}
.clinic-btn-secondary,.cos-btn--secondary{background:#fff;color:var(--clinic-primary);border:1px solid #cbd5e1}
.clinic-btn-secondary:hover:not(:disabled),.cos-btn--secondary:hover:not(:disabled){background:#f8fafc;border-color:#94a3b8}
.clinic-btn-secondary:disabled,.cos-btn--secondary:disabled{color:#94a3b8;background:#f8fafc;border-color:#e2e8f0;cursor:not-allowed}
.clinic-btn-danger,.cos-btn--danger{background:#fff;color:#dc2626;border:1px solid #fecaca}
.clinic-btn-danger:hover:not(:disabled),.cos-btn--danger:hover:not(:disabled){background:#fef2f2;border-color:#fca5a5}
.clinic-btn-danger:disabled,.cos-btn--danger:disabled{color:#94a3b8;background:#f8fafc;border-color:#e2e8f0;cursor:not-allowed}
/* .cos-btn--ghost / .cos-btn--icon have no .clinic-btn equivalent yet — new, .cos-btn-only variants. */
.cos-btn--ghost{background:transparent;color:var(--clinic-primary);border:1px solid transparent}
.cos-btn--ghost:hover:not(:disabled){background:#f1f5f9;border-color:#e2e8f0}
.cos-btn--ghost:disabled{color:#94a3b8;cursor:not-allowed}
.cos-btn--icon{min-height:32px;min-width:32px;padding:0;border-radius:8px;background:transparent;border:1px solid transparent;color:#475467;font-size:16px}
.cos-btn--icon:hover:not(:disabled){background:var(--cos-surface-muted,#f7f8fa);color:var(--cos-text,#1f2430)}
.cos-btn--icon:disabled{color:#c0c7d1;cursor:not-allowed}
/* Focus ring scoped to .cos-btn only (not .clinic-btn) — Foundation Standard §14 Approved value,
   applied here first per this task's explicit "只在三個試點頁面" blast-radius limit; existing
   .clinic-btn callers elsewhere keep their current (no focus-ring) behavior unchanged. */
.cos-btn:focus-visible{outline:2px solid var(--clinic-primary);outline-offset:2px}

.usage-benefit-filter-v230{
  margin:10px 0 14px;
  padding:10px;
  border:1px solid #dbe2ea;
  border-radius:10px;
  background:#f8fafc;
}
.usage-benefit-filter-head-v230{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.usage-benefit-options-v230{
  margin-top:8px;
  max-height:180px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:6px 10px;
}
.usage-benefit-options-v230 label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}
.adjustment-reversal-summary-v230{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}
.adjustment-reversal-summary-v230 > div{
  border:1px solid #dbe2ea;
  border-radius:10px;
  padding:8px 10px;
  background:#f8fafc;
  display:grid;
  gap:4px;
}
.adjustment-reversal-summary-v230 span{
  font-size:12px;
  color:#667085;
}
.adjustment-reversal-summary-v230 strong{
  font-size:14px;
  color:#101828;
}
.adjustment-reversal-fees-v230{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.adjustment-reversal-fees-v230 > div{
  border:1px solid #dbe2ea;
  border-radius:10px;
  padding:10px;
  background:#fff;
  display:grid;
  gap:6px;
}
.adjustment-reversal-fees-v230 span{
  font-size:12px;
  color:#667085;
}
.adjustment-reversal-fees-v230 strong{
  font-size:18px;
  color:#111827;
}
#adjustmentReversalStateV230.error{
  color:#b42318;
  font-weight:700;
}

*{box-sizing:border-box}body{margin:0;font-family:"Microsoft JhengHei",Arial,sans-serif;background:#f5f6f8;color:#101828}.hidden{display:none!important}
.login{min-height:100vh;display:grid;place-items:center}.login-card{width:360px;background:#fff;border-radius:18px;padding:28px;box-shadow:0 8px 30px #0001;display:grid;gap:12px;text-align:center}
.login-remember-box{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px;color:#344054}
.login-remember-box label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.login-remember-box input[type=checkbox]{width:16px;height:16px;margin:0}
input,select,textarea,button{font:inherit;border:1px solid #d0d5dd;border-radius:10px;padding:10px 12px;background:#fff}textarea{resize:vertical;min-height:96px}button{background:#111827;color:white;border:0;cursor:pointer}button.ghost{background:#eef2ff;color:#1d4ed8}button.pick{background:#dcfce7;color:#166534}button.danger{background:#fee2e2;color:#991b1b}.logout{margin-top:auto;background:#fff;color:#111827;border:1px solid #d0d5dd}
.app{display:flex;min-height:100vh}aside{width:220px;background:#111827;color:white;padding:18px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh;overflow:auto}.brand{font-size:22px;font-weight:800;margin-bottom:18px}.nav{background:transparent;color:#e5e7eb;text-align:left;border:0}.nav.active{background:#344054;color:#fff}
main{flex:1;padding:24px;min-width:0}header{display:flex;align-items:flex-end;justify-content:space-between}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0}.card,.panel{background:#fff;border-radius:16px;padding:18px;box-shadow:0 1px 6px #0001}.card span{display:block;color:#667085}.card strong{font-size:28px}.panel{margin:16px 0}.form{display:grid;gap:12px}.form.two{grid-template-columns:repeat(2,1fr)}.form.three{grid-template-columns:repeat(3,1fr)}.form.four{grid-template-columns:repeat(4,1fr)}.wide{grid-column:1/-1}label{display:flex;flex-direction:column;gap:6px;font-weight:700}.birthday-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.table-head{display:flex;justify-content:space-between;align-items:center;gap:12px}table{width:100%;border-collapse:collapse;margin-top:12px}th,td{text-align:left;border-bottom:1px solid #eaecf0;padding:10px;vertical-align:top}th{background:#f9fafb}.picker{border:1px solid #d0d5dd;border-radius:12px;padding:10px;margin:8px 0;background:#fff}.msg{margin-left:12px;color:#166534}.note{color:#667085;font-size:14px}.line{display:grid;grid-template-columns:1fr 1fr 1.8fr 1fr 1fr auto;gap:8px;margin:12px 0}.payment-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:10px}.payment-line{display:flex;align-items:center;gap:12px;border:1px solid #d0d5dd;border-radius:12px;padding:8px}.payment-line input[type=checkbox]{transform:scale(1.5);width:22px;height:22px}.cancelled-row td{text-decoration:line-through;color:#98a2b3!important;background:#f3f4f6!important}.new-customer{color:#b42318;font-weight:700}.photo-date-bar220{display:flex;align-items:flex-end;gap:12px;margin:0 0 14px}.photo-date-bar220 label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:#344054}.photo-date-bar220 select{min-width:220px}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}.photo-card{border:1px solid #e5e7eb;border-radius:12px;padding:10px}.photo-card img{width:100%;height:140px;object-fit:contain;border-radius:10px;background:#f8fafc}.photo-empty220{padding:16px;border:1px dashed #d0d5dd;border-radius:12px;background:#f9fafb;color:#667085;font-weight:700}.logo{max-width:80px;max-height:80px;object-fit:contain}
@media(max-width:1000px){.cards,.form.two,.form.three,.form.four{grid-template-columns:1fr}.payment-grid{grid-template-columns:1fr}aside{width:180px}}
@media(max-width:1000px){.adjustment-reversal-fees-v230{grid-template-columns:1fr}}

.header-clinic-context-v221{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.context-chip-v221{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:12px;background:#fff}
.context-chip-v221 span{font-size:12px;color:#667085}
.context-chip-v221 strong{font-size:14px;color:#101828}
.context-chip-v221 small{font-size:12px;color:#344054;background:#eef2ff;padding:2px 6px;border-radius:999px}
.context-switcher-v221{display:flex;align-items:center;gap:8px}
.context-switcher-v221 label{font-size:12px;font-weight:700;color:#344054}
/* Organization Clinic Scope Switcher（Phase E4）。沿用 context-switcher-v221 的視覺語言，
   只補上「單一診所顯示」「唯讀狀態」「切換中」三個既有樣式沒有的元素。
   唯讀是狀態提示不是危險警告，因此用中性的琥珀色小標籤，不用紅色、不做 Banner。 */
.org-clinic-single-v4{font-size:14px;color:#101828;font-weight:700}
.org-access-badge-v4{font-size:12px;font-weight:700;color:#854d0e;background:#fef8e7;border:1px solid #f5e2b0;padding:2px 8px;border-radius:999px;white-space:nowrap}
.org-switching-hint-v4{font-size:12px;color:#667085;white-space:nowrap}
/* Organization / HQ Workspace（Phase E6）。沿用既有卡片／表格語彙，不新增設計系統。 */
.org-hq-entry-v1{height:38px;padding:0 12px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;color:#1f2937;font-weight:700;white-space:nowrap}
.org-hq-entry-v1:hover{background:#f8fafc}
.org-hq-head-v1{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.org-hq-filters-v1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.org-hq-loading-v1{font-size:12px;color:#667085}
.org-hq-cards-v1{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:12px 0 6px}
.org-hq-card-v1{border:1px solid #e4e7ec;border-radius:14px;background:#fff;padding:12px 14px}
.org-hq-card-label-v1{font-size:12px;color:#667085}
.org-hq-card-value-v1{font-size:22px;font-weight:800;color:#101828;margin-top:4px}
.org-hq-card-note-v1{font-size:11px;color:#854d0e;background:#fef8e7;border:1px solid #f5e2b0;border-radius:8px;padding:2px 6px;margin-top:6px;display:inline-block}
.org-hq-section-title-v1{margin:18px 0 8px;font-size:15px;color:#344054}
.org-hq-table-v1{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e4e7ec;border-radius:12px;overflow:hidden}
.org-hq-table-v1 th,.org-hq-table-v1 td{padding:9px 10px;border-bottom:1px solid #eef2f6;font-size:13px;text-align:left}
.org-hq-table-v1 th{background:#f8fafc;color:#344054;font-weight:700}
.org-hq-table-v1 .right{text-align:right}
.org-hq-enter-v1{padding:5px 10px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;font-weight:700}
.org-hq-empty-v1{padding:18px;border:1px dashed #d0d5dd;border-radius:12px;color:#667085;background:#fff}
/* Organization Management（Phase E7）。沿用 E6 的卡片／表格語彙，不新增設計系統。 */
.org-manage-block-v1{border:1px solid #e4e7ec;border-radius:14px;background:#fff;padding:14px 16px;margin:0 0 14px}
.org-manage-block-v1 h3{margin:0 0 10px;font-size:15px;color:#344054}
.org-manage-kv-v1{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.org-manage-kv-v1 span{display:block;font-size:12px;color:#667085}
.org-manage-kv-v1 strong{font-size:14px;color:#101828}
.org-manage-note-v1{margin:10px 0 0;font-size:12px;color:#667085}
.org-manage-muted-v1{color:#98a2b3}
.org-manage-form-v1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.org-manage-user-v1{border:1px solid #eef2f6;border-radius:12px;padding:12px;margin-bottom:10px;background:#fcfcfd}
.org-manage-user-head-v1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:#475467}
.org-manage-user-head-v1 strong{font-size:14px;color:#101828}
.org-manage-role-v1{font-size:12px;font-weight:700;color:#344054;background:#eef2ff;padding:2px 8px;border-radius:999px}
.org-manage-user-body-v1{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:8px;font-size:13px}
.org-manage-user-body-v1 span{display:block;font-size:12px;color:#667085;margin-bottom:2px}
.quick-launcher-wrap-v23{position:relative}
.quick-launcher-trigger-v23{height:42px;padding:0 14px;border:1px solid #f5d78e;border-radius:12px;background:linear-gradient(180deg,#fff9e9 0%,#fff1cc 100%);color:#713f12;font-weight:800;white-space:nowrap}
.quick-launcher-trigger-v23:hover{background:linear-gradient(180deg,#fff4d5 0%,#ffe8b3 100%)}
.quick-launcher-panel-v23{position:absolute;top:calc(100% + 10px);right:0;z-index:1200;width:min(420px,calc(100vw - 320px));min-width:360px;max-height:min(76vh,680px);overflow:auto;background:#fff;border:1px solid #e4e7ec;border-radius:18px;box-shadow:0 20px 48px rgba(15,23,42,.24);padding:14px}
.quick-launcher-head-v23{font-size:19px;font-weight:800;color:#111827;margin-bottom:8px}
.quick-launcher-section-v23{border-top:1px solid #eef2f6;padding-top:10px;margin-top:10px}
.quick-launcher-section-v23 h4{margin:0 0 8px;font-size:13px;color:#344054;letter-spacing:.02em}
.quick-launcher-grid-v23{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.quick-launcher-item-v23{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;text-align:left;padding:9px 10px;border:1px solid #e4e7ec;border-radius:12px;background:#f8fafc;color:#1f2937;font-weight:700}
.quick-launcher-item-v23:hover{background:#eef4ff;border-color:#bfdbfe}
.quick-launcher-item-v23 .icon{font-size:15px;line-height:1}
.quick-launcher-empty-v23{margin-top:10px;padding:10px 12px;border:1px dashed #d0d5dd;border-radius:12px;background:#f8fafc;color:#667085;font-weight:700}
.quick-launcher-foot-v23{margin-top:12px;padding-top:10px;border-top:1px solid #eef2f6}
.quick-launcher-edit-v23{width:100%;min-height:40px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;color:#1d4ed8;font-weight:700}

/* Root cause of the "每個中文字被擠成直排" bug: #menuWorkspaceCards is normally a 4-column
   workspace-card-grid-v211, and this whole settings panel is injected as a single child of it
   with no span rule — so the entire two-column layout below was being squeezed into 1 of 4
   columns (~25% width) instead of the full row, collapsing text to near-zero width. */
.menu-settings-panel-v23{grid-column:1/-1;width:100%;min-width:0;box-sizing:border-box}
.menu-settings-panel-v23 .menu-settings-grid-v23{display:grid;grid-template-columns:minmax(280px,42%) minmax(0,58%);gap:24px;align-items:start;width:100%;min-width:0;box-sizing:border-box}
.menu-settings-panel-v23 .setting-subpanel{min-width:0;width:100%;box-sizing:border-box}
.sidebar-module-settings-v23{display:grid;gap:8px}
.sidebar-module-settings-v23.compact-v23{gap:6px}
.quick-menu-setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 2px;white-space:nowrap}
.quick-menu-setting-main{display:flex;align-items:center;min-width:0;flex:1}
.quick-menu-setting-main label{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;margin:0;font-weight:700;color:#101828;white-space:nowrap;min-width:0;flex:1}
.quick-menu-setting-main input[type=checkbox]{width:18px;height:18px;margin:0}
.quick-menu-setting-status{font-size:13px;color:#667085;white-space:nowrap;flex-shrink:0;text-align:right}
.sidebar-module-setting-row-v23{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 2px;border:0;border-radius:0;background:transparent;white-space:nowrap;flex-wrap:nowrap}
.sidebar-module-setting-row-v23 label{display:flex;align-items:center;gap:8px;margin:0;font-weight:700;color:#101828;white-space:nowrap;min-width:0;flex:1}
.sidebar-module-setting-row-v23 input[type=checkbox]{width:18px;height:18px;margin:0}
.sidebar-module-setting-row-v23.is-locked label span:last-child{color:#475467}
.sidebar-module-setting-hint-v23{font-size:13px;color:#667085;white-space:nowrap;flex-shrink:0}

.quick-tree-v23{display:grid;gap:0;margin-top:4px;border:1px solid #d0d5dd;border-radius:12px;overflow:hidden;background:#fff}
.quick-tree-head-v23,.quick-tree-body-row-v23{display:grid;grid-template-columns:minmax(140px,1fr) minmax(140px,1fr) minmax(180px,1.2fr) 120px;align-items:center}
.quick-tree-head-v23{background:#f8fafc;font-weight:800;color:#344054;border-bottom:1px solid #d0d5dd}
.quick-tree-body-row-v23{min-height:40px;border-bottom:1px solid #eaecf0}
.quick-tree-body-row-v23:last-child{border-bottom:0}
.quick-tree-cell-v23{padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #eaecf0}
.quick-tree-head-v23 .quick-tree-cell-v23:last-child,.quick-tree-body-row-v23 .quick-tree-cell-v23:last-child{border-right:0}
.quick-tree-cell-v23.allow{display:flex;justify-content:center;align-items:center}
.quick-tree-cell-v23.level-1{font-weight:800;color:#101828}
.quick-tree-cell-v23.level-2{font-weight:700;color:#1d4ed8}
.quick-tree-cell-v23.level-3{font-weight:700;color:#b42318}
.quick-tree-hint-v23{font-size:12px;color:#98a2b3;font-weight:700}
.quick-tree-checkbox-v23{width:18px;height:18px;margin:0}

.platform-shell-v221{padding:22px}
.platform-shell-head-v221{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.platform-shell-head-v221 h3{margin:0 0 6px;font-size:24px}
.platform-shell-current-v221{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:8px 10px;border-radius:12px;background:#eef4ff;border:1px solid #bfdbfe}
.platform-shell-current-v221 span{font-size:12px;color:#1d4ed8}
.platform-shell-current-v221 strong{font-size:14px;color:#1e3a8a}

.platform-layout-v221{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px}
.platform-menu-v221{background:#f8fafc;border:1px solid #e4e7ec;border-radius:14px;padding:12px;display:grid;gap:8px;align-content:start}
.platform-menu-v221 h4{margin:2px 2px 8px;color:#344054}
.platform-menu-v221 button{width:100%;text-align:left;background:#fff;color:#344054;border:1px solid #d0d5dd}
.platform-menu-v221 button.active{background:#1d4ed8;color:#fff;border-color:#1d4ed8}

.platform-content-v221{display:grid;gap:12px}
.platform-cards-v221{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.platform-kpi-card-v221{border:1px solid #d0d5dd;border-radius:12px;padding:12px;background:#fff;display:grid;gap:6px}
.platform-kpi-card-v221 span{font-size:12px;color:#667085}
.platform-kpi-card-v221 strong{font-size:20px;color:#111827}

.platform-switcher-row-v221{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.platform-switcher-row-v221 select{min-width:220px}

.platform-clinic-toolbar-v221{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.platform-clinic-toolbar-v221 input[type=search]{min-width:min(520px,100%);flex:1 1 420px}
.platform-clinic-toolbar-actions-v221{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* --- SUPER 診所管理 / 功能授權（v1 版面）--------------------------------------
   全部選擇器都掛在 .platform-clinic-panel-v221 底下，避免影響其它平台頁。 */
.platform-clinic-panel-v221{display:grid;gap:14px}
/* 專案內尚未有 .cos-btn--sm；此處只在本面板內定義小尺寸，不影響其它頁面的按鈕。 */
.platform-clinic-panel-v221 .cos-btn--sm{min-height:28px;padding:0 8px;font-size:12px;border-radius:8px;gap:4px}
.platform-clinic-head-v1{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.platform-clinic-head-main-v1{flex:1 1 260px;min-width:0}
.platform-clinic-head-main-v1 h4{margin:0 0 4px;font-size:20px;color:#0f172a}
.platform-clinic-head-main-v1 .note{margin:0}
.platform-clinic-head-actions-v1{margin-left:auto;display:flex;align-items:center;gap:8px}

.platform-clinic-summary-v1{display:flex;gap:10px;flex-wrap:wrap}
.platform-summary-card-v1{
  display:grid;gap:2px;min-width:132px;padding:8px 14px;
  border:1px solid var(--cos-border);border-radius:10px;background:var(--cos-surface-muted);
}
.platform-summary-card-v1.is-ok{background:var(--cos-success-bg);border-color:var(--cos-success-border)}
.platform-summary-label-v1{font-size:12px;color:var(--cos-text-muted)}
.platform-summary-value-v1{font-size:22px;line-height:1.1;color:#111827}
.platform-summary-card-v1.is-ok .platform-summary-value-v1{color:var(--cos-success)}
.platform-summary-unit-v1{font-size:11px;color:var(--cos-text-muted)}

/* 單一列篩選：1366 的平台內容區實測只有約 707px（左側 App Nav 280 ＋ 平台選單 220），
   所以四個條件都必須可壓縮，min-width 歸零才不會被 .cos-field 的預設 min-width 逼到換行。 */
.platform-clinic-filters-v1{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.platform-clinic-search-v1{flex:2 1 150px;min-width:0}
.platform-clinic-filter-v1{flex:1 1 108px;min-width:0}
.platform-clinic-filter-v1 .cos-field__control{width:100%;min-width:0}
.platform-clinic-filter-v1 .cos-field__label{white-space:nowrap}
.platform-clinic-clear-v1{flex:0 0 auto;white-space:nowrap;padding-inline:10px}

/* 表格採百分比欄寬＋table-layout:fixed：任何寬度都剛好填滿容器，不會產生水平捲軸。 */
.platform-clinic-tablewrap-v1{overflow-x:auto}
.platform-clinic-table-v1{width:100%;table-layout:fixed}
/* 這三條必須用 table.xxx 提高權重：.cos-table th/td 定義在本檔更後面，同權重會蓋掉這裡 */
table.platform-clinic-table-v1 th,table.platform-clinic-table-v1 td{
  vertical-align:top;padding:10px 6px;overflow-wrap:anywhere;line-height:1.35;
}
table.platform-clinic-table-v1 th{font-size:12px;height:auto}
table.platform-clinic-table-v1 td{font-size:12px;height:auto}
/* 平台內容區在 1366 只有 ~707px，狀態膠囊在此表格採緊湊尺寸才不會互相擠壓 */
.platform-clinic-table-v1 .cos-status{height:auto;min-height:22px;padding:2px 7px;font-size:12px;line-height:1.3}
.platform-clinic-table-v1 th:nth-child(1),.platform-clinic-table-v1 td:nth-child(1){width:11%}
.platform-clinic-table-v1 th:nth-child(2),.platform-clinic-table-v1 td:nth-child(2){width:12%}
.platform-clinic-table-v1 th:nth-child(3),.platform-clinic-table-v1 td:nth-child(3){width:8%}
.platform-clinic-table-v1 th:nth-child(4),.platform-clinic-table-v1 td:nth-child(4){width:12%}
.platform-clinic-table-v1 th:nth-child(5),.platform-clinic-table-v1 td:nth-child(5){width:12%}
.platform-clinic-table-v1 th:nth-child(6),.platform-clinic-table-v1 td:nth-child(6){width:21%}
.platform-clinic-table-v1 th:nth-child(7),.platform-clinic-table-v1 td:nth-child(7){width:12%}
/* 第 8 欄刻意不指定寬度：百分比是對 border-box 解析的，若八欄合計剛好 100%，
   邊框寬度會把最後一欄擠成 0；留給它吸收餘寬最穩定（前七欄合計 88%）。 */
.platform-clinic-table-v1 .cos-table__empty td{text-align:center;color:var(--cos-text-muted);padding:26px 0}

/* 診所代號與方案是短字串，不允許被拆成兩行（CLN／001）*/
.platform-cell-code-v1{font-weight:700;color:#0f172a;overflow-wrap:normal;word-break:keep-all}
.platform-cell-name-v1{font-weight:600;color:#0f172a;word-break:break-word}
.platform-cell-plan-v1{font-weight:600;color:#0f172a;overflow-wrap:normal;word-break:keep-all}
.platform-cell-sub-v1{font-size:12px;color:var(--cos-text-muted);margin-top:2px}
.platform-chip-v1{
  display:inline-block;margin-top:4px;padding:1px 8px;border-radius:999px;
  font-size:11px;color:var(--cos-text-muted);
  background:var(--cos-surface-muted);border:1px solid var(--cos-border);
}

/* 功能授權：導入精靈 ＋ Smart Import 合併成一張 Permission Card */
.platform-perm-card-v1{
  display:grid;gap:6px;padding:8px 10px;
  border:1px solid var(--cos-border);border-radius:10px;background:var(--cos-surface-muted);
}
/* 窄欄位時自動改為「名稱＋狀態」一行、按鈕折到下一行，不需要 media query。 */
.platform-perm-row-v1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.platform-perm-name-v1{flex:0 0 auto;font-size:12px;font-weight:600;color:#344054}
.platform-perm-state-v1{
  flex:1 1 auto;display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;white-space:nowrap;
}
.platform-perm-state-v1.is-on{color:var(--cos-success)}
.platform-perm-state-v1.is-off{color:#b54708}
.platform-perm-dot-v1{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.platform-perm-action-v1{flex:0 0 auto}
.platform-perm-note-v1{
  font-size:11px;line-height:1.4;color:var(--cos-text-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.platform-perm-card-v1 .cos-btn--sm{white-space:nowrap}

.platform-admin-name-v1{font-weight:600;color:#0f172a;word-break:break-all}
.platform-admin-badge-v1{
  display:inline-block;margin-top:4px;padding:1px 7px;border-radius:999px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.platform-admin-badge-v1.is-ok{background:var(--cos-success-bg);color:var(--cos-success);border:1px solid var(--cos-success-border)}
.platform-admin-badge-v1.is-warn{background:var(--cos-warning-bg);color:#b54708;border:1px solid #fedf89}
.platform-admin-reset-v1{
  margin-top:6px;padding:0;border:0;background:none;
  font-size:12px;color:var(--cos-accent);text-decoration:underline;cursor:pointer;
}

.platform-cell-ops-v1{display:grid;gap:6px;justify-items:stretch}
/* auto-fit：欄寬夠就兩顆並排、不夠就各佔一行，不會出現同寬度卻排法不一致 */
.platform-op-row-v1{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}
.platform-op-row-v1 .cos-btn{min-width:0}
/* 允許換行：像「初始化展示資料」這種長標籤若強制不換行，min-content 會把整個儲存格撐爆 */
.platform-cell-ops-v1 .cos-btn{white-space:normal;padding-inline:8px;line-height:1.3;min-height:28px;height:auto;padding-block:4px}
.platform-op-danger-v1{color:var(--cos-danger)}

.clinic-dialog-v221{width:min(1120px,96vw)}
.clinic-dialog-grid-v221{display:grid;gap:16px}
.clinic-dialog-section-v221{border:1px solid #e5e7eb;border-radius:14px;padding:14px;background:#fafbff}
.clinic-dialog-section-v221 h4{margin:0 0 10px;color:#0f172a}
.clinic-dialog-footer-v221{margin-top:16px;align-items:center}
.clinic-dialog-footer-v221 .msg{margin-left:0;margin-right:auto}
.clinic-dialog-v221 input:disabled,.clinic-dialog-v221 select:disabled,.clinic-dialog-v221 input[readonly]{background:#f8fafc;color:#475467}

.clinic-setup-wizard-v221{width:min(1160px,96vw)}
.clinic-setup-stepper-v221{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 16px}
.clinic-setup-stepper-v221 button{background:#f8fafc;color:#344054;border:1px solid #d0d5dd;text-align:center;font-weight:700}
.clinic-setup-stepper-v221 button.is-active{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.clinic-setup-stepper-v221 button.is-complete{background:#ecfdf3;color:#166534;border-color:#bbf7d0}
.clinic-setup-body-v221{display:grid;gap:16px}
.clinic-setup-step-panel-v221{border:1px solid #e5e7eb;border-radius:14px;padding:14px;background:#fafbff}
.clinic-setup-step-panel-v221 h4{margin:0 0 10px;color:#0f172a}
.clinic-setup-confirm-v221{display:grid;gap:12px}
.clinic-setup-check-row-v221{font-weight:800;color:#166534;background:#ecfdf3;border:1px solid #bbf7d0;border-radius:12px;padding:10px 12px}
.clinic-setup-summary-grid-v221{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.clinic-setup-summary-grid-v221 > div{background:#fff;border:1px solid #d0d5dd;border-radius:12px;padding:10px 12px;display:grid;gap:4px}
.clinic-setup-summary-grid-v221 span{font-size:12px;color:#667085}
.clinic-setup-summary-grid-v221 strong{font-size:16px;color:#101828}
.clinic-setup-complete-v221{display:grid;gap:10px;padding:4px 2px}
.clinic-setup-complete-v221 strong{font-size:18px;color:#101828}
.clinic-setup-complete-note-v221{border:1px dashed #cbd5e1;background:#fff;border-radius:12px;padding:12px;color:#334155;line-height:1.7}
.clinic-setup-footer-v221{margin-top:16px;align-items:center;flex-wrap:wrap}
.clinic-setup-footer-v221 .msg{margin-left:0;margin-right:auto}
.clinic-setup-wizard-v221 input:disabled,.clinic-setup-wizard-v221 select:disabled,.clinic-setup-wizard-v221 input[readonly]{background:#f8fafc;color:#475467}

@media(max-width:900px){
  .platform-clinic-toolbar-v221 input[type=search]{min-width:0;flex:1 1 100%}
  .clinic-setup-summary-grid-v221{grid-template-columns:1fr}
}

/* V2.3 RC Sales UI Final */
#salesPanelCreate .sale-quick-toolbar-v233{grid-template-columns:minmax(260px,1.6fr) 100px 120px 88px minmax(140px,.8fr)!important;align-items:end}
.sale-quick-block-v233{margin-top:8px}
.sale-quick-block-v233 h5{margin:0 0 6px;font-size:13px;color:#344054}
.quick-sale-list-v233{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;border:1px solid #93c5fd;border-radius:10px;background:#eff6ff;padding:8px}
.quick-sale-row-v233{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:100%;min-height:42px;border:1px solid #bfdbfe;border-radius:10px;background:#dbeafe;color:#101828;padding:6px 10px;text-align:left}
.quick-sale-row-v233:hover{background:#bfdbfe}
.quick-sale-row-v233.is-selected{background:#bfdbfe;border-color:#60a5fa;box-shadow:inset 0 0 0 1px #60a5fa}
.quick-sale-favorites-v233{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:none;overflow:visible;padding:2px}
.quick-sale-favorites-v233 .quick-favorite-row-v233{display:flex;align-items:center;justify-content:flex-start;min-height:42px;padding:0 10px;border:1px solid #86efac;border-radius:10px;background:#dcfce7;color:#166534;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-sale-favorites-v233 .quick-favorite-row-v233:hover{background:#bbf7d0}
.quick-sale-favorites-v233 .quick-favorite-row-v233.is-selected{background:#bbf7d0;border-color:#4ade80;box-shadow:inset 0 0 0 1px #4ade80}
/* Sales UI V2 — quick-favorite card restyle (higher-specificity #id override, original .quick-sale-favorites-v233
   rules above left untouched/superseded rather than deleted, per minimal-change principle). */
#quickSaleFavoritesBlockV233 .quick-favorite-head-v233{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
#quickSaleFavoritesBlockV233 .quick-favorite-head-v233 h5{margin:0;font-size:17px;font-weight:700;line-height:1.4;color:#0f172a}
#quickSaleFavoritesBlockV233 .quick-favorite-manage-v233{background:transparent;border:0;color:#1d4ed8;font-size:14px;font-weight:600;padding:2px 0;cursor:pointer}
#quickSaleFavoritesBlockV233 .quick-favorite-manage-v233:hover{text-decoration:underline}
#quickSaleFavoritesBlockV233 .quick-favorite-tabs-v233{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 8px}
#quickSaleFavoritesBlockV233 .quick-favorite-tab-v233{height:36px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-size:14px;font-weight:600;cursor:pointer}
#quickSaleFavoritesBlockV233 .quick-favorite-tab-v233:hover{background:#eef6ff;border-color:#93c5fd}
#quickSaleFavoritesBlockV233 .quick-favorite-tab-v233.is-active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
#quickSaleFavoritesV233.quick-sale-favorites-v233{grid-template-columns:repeat(4,minmax(0,1fr))}
#quickSaleFavoritesV233 .quick-favorite-row-v233{min-height:56px;height:56px;padding:0 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#101828;gap:8px}
#quickSaleFavoritesV233 .quick-favorite-row-v233:hover{background:#eef6ff;border-color:#bfdbfe}
#quickSaleFavoritesV233 .quick-favorite-row-v233.is-selected{background:#eef4ff;border-color:#1d4ed8;box-shadow:inset 0 0 0 1px #1d4ed8}
#quickSaleFavoritesV233 .quick-favorite-icon-v233{flex:0 0 auto;font-size:16px;line-height:1}
#quickSaleFavoritesV233 .quick-favorite-name-v233{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;text-align:left}
#quickSaleFavoritesV233 .quick-favorite-code-v233{flex:0 0 auto;font-size:13px;color:#98a2b3;white-space:nowrap}
#quickSaleFavoritesV233 .quick-favorite-plus-v233{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#1d4ed8;color:#fff;font-size:15px;line-height:28px;text-align:center}
#quickSaleFavoritesV233 .quick-favorite-row-v233:hover .quick-favorite-plus-v233{background:#1741b8}
#quickSaleFavoritesBlockV233 .quick-favorite-empty-v233{grid-column:1/-1}
#quickSaleFavoritesBlockV233 .quick-favorite-more-v233{margin-top:8px;width:100%;height:40px;background:#fff;border:1px dashed #d0d5dd;border-radius:10px;color:#1d4ed8;font-weight:700;font-size:14px;cursor:pointer}
#quickSaleFavoritesBlockV233 .quick-favorite-more-v233:hover{background:#f8fafc;border-color:#93c5fd}
.quick-row-label-v233{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;line-height:1.2}
.quick-row-meta-v233{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:400;line-height:1.2;color:#475467}

#salesPanelCreate #paymentGrid.payment-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:stretch;grid-auto-flow:row;grid-auto-rows:1fr}
#salesPanelCreate .payment-line-v218{display:grid!important;grid-template-columns:22px minmax(0,1fr) minmax(108px,1fr) minmax(92px,132px)!important;grid-template-areas:"check name name name" ". amount last4 last4";grid-template-rows:auto auto;align-items:center!important;column-gap:8px;row-gap:8px;min-height:86px;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d0d5dd;border-radius:12px;background:#fff}
#salesPanelCreate .payment-line-v218 input[type=checkbox]{grid-area:check;justify-self:start;width:18px;height:18px;margin:0}
#salesPanelCreate .payment-line-v218 .pay-name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
#salesPanelCreate .payment-line-v218 [data-payamt]{grid-area:amount;width:100%;max-width:none;min-width:0}
#salesPanelCreate .payment-line-v218 .pay-last4{grid-area:last4;width:100%;max-width:none;min-width:0}
#salesPanelCreate .payment-line-v218.no-last4-v218 [data-payamt]{grid-column:2/5}

.package-modal-actions-v233{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap}
.package-rule-error-v233{color:#b42318;font-weight:700;min-height:22px;display:inline-flex;align-items:center}
.package-group-panel-v233{margin:8px 0}
.package-group-head-v233{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:6px;border-bottom:1px solid #eaecf0}
.package-group-head-v233 span{font-size:13px;color:#344054}
.package-group-list-v233{display:grid;gap:6px;margin-top:8px}
.package-option-row-v233{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:6px 8px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;cursor:pointer}
.package-option-row-v233:hover{background:#f8fafc}
.package-option-row-v233.is-selected{background:#eff6ff;border-color:#93c5fd}
.package-option-name-v233{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.package-qty-box-v233{display:flex;align-items:center;gap:6px}
.package-qty-btn-v233{min-width:28px;height:28px;padding:0;border-radius:8px;border:1px solid #d0d5dd;background:#fff;color:#344054}
.package-qty-val-v233{min-width:26px;text-align:center;font-weight:800;color:#1f2937}

.package-group-row td{background:#f8fafc;color:#344054}

@media(max-width:1024px){
  #salesPanelCreate #paymentGrid.payment-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  #salesPanelCreate .sale-quick-toolbar-v233{grid-template-columns:1fr!important}
  .quick-sale-list-v233,.quick-sale-favorites-v233{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){
  .quick-sale-list-v233,.quick-sale-favorites-v233{grid-template-columns:repeat(2,minmax(0,1fr))}
  #salesPanelCreate #paymentGrid.payment-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:480px){
  .quick-sale-list-v233,.quick-sale-favorites-v233{grid-template-columns:1fr}
  #salesPanelCreate #paymentGrid.payment-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

.brand-v230{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.side-brand-logo-v230{width:48px;height:48px;display:block;object-fit:contain;object-position:center center;border-radius:0;background:transparent}
.about-brand-logo-v230{width:48px;height:48px;display:block;object-fit:contain;margin-bottom:10px}
.side-brand-text-v230{display:flex;flex-direction:column;line-height:1.05}
.side-brand-text-v230 strong{font-size:20px;font-weight:800;color:#fff}
.side-brand-text-v230 span{font-size:12px;color:#a5b4fc;font-weight:700;letter-spacing:.6px}

.login-meta-row-v230{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:2px;text-align:left}
.login-meta-version-v230{font-size:13px;color:#344054;font-weight:800}
.login-meta-env-v230{display:flex;justify-content:flex-end}
.login-env-option-v230{padding:4px 10px;border-radius:999px;border:1px solid #d0d5dd;background:#f8fafc;color:#344054;font-size:11px;font-weight:800;letter-spacing:.3px}

.global-loading-v230{position:fixed;inset:0;background:rgba(15,23,42,.24);display:grid;place-items:center;z-index:9999}
.global-loading-box-v230{width:min(220px,86vw);padding:18px 14px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.16);display:grid;justify-items:center;gap:10px}
.global-loading-logo-v230{width:56px;height:56px;object-fit:contain;animation:spinLogoV230 1.2s linear infinite}
.global-loading-text-v230{font-size:13px;color:#344054;font-weight:700}
@keyframes spinLogoV230{from{transform:rotate(0)}to{transform:rotate(360deg)}}

#settingPanelAboutV230 p{margin:6px 0;color:#344054}

@media(max-width:640px){
  .login-meta-row-v230{grid-template-columns:1fr;justify-items:start}
  .login-meta-env-v230{justify-content:flex-start}
}

.login-card{width:min(96vw,480px);padding:28px 32px;gap:9px}
.login-brand-logo{display:block;width:100%;max-width:260px;height:auto;max-height:none;object-fit:contain;margin:0 auto 2px;transform:translateX(-16px)}
.login-brand-title{margin:0;color:#1d4ed8;font-size:40px;line-height:1.1;font-weight:800;letter-spacing:.4px}
.login-brand-primary{margin:0;color:#344054;font-size:22px;font-weight:800}
.login-brand-subtitle{margin:0 0 2px;color:#667085;font-size:15px;font-weight:700}
.login-env-wrap{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.login-env-badge,.login-version-badge{display:inline-flex;align-items:center;justify-content:center;min-width:88px;padding:4px 10px;border-radius:999px;border:1px solid #d0d5dd;font-size:12px;font-weight:800;background:#f8fafc;color:#344054}
.login-env-badge.env-local{background:#ecfdf3;border-color:#bbf7d0;color:#166534}
.login-env-badge.env-demo{background:#eff8ff;border-color:#bfdbfe;color:#1d4ed8}
.login-env-badge.env-production{background:#fff7ed;border-color:#fed7aa;color:#b54708}
.login-pass-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.login-pass-wrap #loginPass{width:100%}
.login-pass-toggle{background:#eef2ff;color:#1d4ed8;border:1px solid #c7d2fe;min-width:44px;padding:10px}
.login-copyright{margin-top:2px;font-size:12px}

#platformViewSystemNotesV230{display:grid;gap:10px}
.system-notes-card-v230{width:100%}
.system-notes-textarea-sticky-v230{width:100%;min-height:160px;font-size:15px}
.system-notes-textarea-main-v230{width:100%;min-height:360px;font-size:15px}
.system-notes-actions-v230{display:flex;justify-content:flex-start}

@media(max-width:640px){
  .login-brand-logo{max-width:220px}
  .login-card{padding:28px 20px}
}

/* V2.3 RC Sales Create Redesign */
#salesPanelCreate{position:relative;background:#f8fafc;border:1px solid #e4e7ec}
.sales-create-grid-v23{display:grid;gap:14px}
.sales-block-v23{background:#fff;border:1px solid #e4e7ec;border-radius:14px;padding:14px}
.sales-block-v23 h4{margin:0 0 10px;display:flex;align-items:center;gap:8px;font-size:18px;color:#0f172a}
.sales-step-v23{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#2563eb;color:#fff;font-size:12px;font-weight:800}
.sales-sub-title-v23{font-size:13px;font-weight:700;color:#344054;margin-bottom:6px}

.sales-basic-row-v23{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px}
.sales-doc-no-v23{display:flex;align-items:center;border:1px solid #d0d5dd;border-radius:10px;background:#fff;overflow:hidden}
.sales-doc-prefix-v23{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;border-right:1px solid #d0d5dd;background:#f8fafc;color:#1d4ed8;font-weight:800}
.sales-doc-no-v23 input{border:0;border-radius:0;box-shadow:none;height:42px;padding:0 10px}

.sales-customer-grid-v23{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;align-items:start}
.sales-customer-left-v23{padding-right:12px;border-right:1px solid #eef2f7}
.sales-customer-right-v23{display:grid;gap:8px}
/* Sales UI V2 — customer search restacked to a single vertical column (search -> results -> selected
   card); .sales-customer-grid-v23/-left/-right above are no longer used by index.html but left in
   place (dead, harmless) rather than deleted, per minimal-change principle. */
.sales-customer-stack-v23{display:grid;gap:10px}
/* Class-scoped (not ID-scoped) so the exact same rule also applies to #usagePicker once it carries
   this class too — reusing one component instead of duplicating near-identical CSS per page. */
.sales-picker-v23{min-height:0;max-height:300px;overflow-y:auto;margin:0}
/* Row now lives in the narrow (35%) search column — two-row Grid: 選擇 spans both rows in column 1;
   病歷號/姓名 share row 1 (columns 2/3); 生日+電話 merge into one row-2 strip spanning columns 2-3. */
.sales-picker-row-v23{display:grid;grid-template-columns:76px 88px minmax(0,1fr);grid-template-rows:40px 26px;column-gap:10px;align-items:center;width:100%;max-width:100%;box-sizing:border-box;min-height:76px;padding:8px 12px;border:0;border-bottom:1px solid #eef1f5;background:transparent;text-align:left;cursor:pointer;font:inherit;color:#101828}
.sales-picker-row-v23:last-child{border-bottom:0}
.sales-picker-row-v23:hover{background:#eef6ff}
.sales-picker-row-v23.is-selected{background:#eef4ff;color:#1d4ed8}
/* .clinic-btn/.clinic-btn-primary already supply the base Primary look; this scoped override sizes
   it for this row and pins it to span both grid rows. Span (not a nested <button>) because the whole
   row is already a <button> (existing pickCustomer('sale', id) click target) and HTML forbids
   nesting interactive buttons — keeping the outer element and its onclick exactly as-is avoids
   touching Event Handler/Select Logic. Colors are written as var(--clinic-primary*) per spec, not
   by editing the shared .clinic-btn-primary rule itself. */
.sales-picker-pick-v23.clinic-btn{grid-column:1;grid-row:1/span 2;align-self:center;width:76px;height:40px;border-radius:10px;font-size:15px;font-weight:600;background:var(--clinic-primary);color:#fff;border:1px solid var(--clinic-primary);display:inline-flex;align-items:center;justify-content:center;padding:0}
.sales-picker-pick-v23.clinic-btn:hover{background:var(--clinic-primary-hover);border-color:var(--clinic-primary-hover)}
.sales-picker-chart-v23{grid-column:2;grid-row:1;min-width:0;font-size:15px;font-weight:500;color:#667085;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sales-picker-name-v23{grid-column:3;grid-row:1;min-width:0;font-size:17px;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sales-picker-detail-v3{grid-column:2/4;grid-row:2;display:flex;align-items:center;gap:20px;min-width:0}
.sales-picker-birth-v23{flex:none;font-size:15px;font-weight:500;color:#667085;white-space:nowrap}
.sales-picker-phone-v23{flex:none;font-size:15px;font-weight:500;color:#667085;white-space:nowrap}
.sales-picker-group-label-v23{padding:6px 10px 4px;font-size:12px;font-weight:700;color:#98a2b3}
.sales-picker-empty-v23{padding:14px 10px;color:#667085;font-size:13px}
.sales-selected-customer-v23{border:1px solid #dbe4ef;border-radius:12px;background:#f8fbff;padding:12px;display:grid;gap:8px}
.sales-selected-head-v23{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sales-selected-head-v23 strong{font-size:24px;color:#0f172a}
.sales-selected-head-v23 span{font-size:12px;color:#667085}
.sales-selected-meta-v23{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:#344054}
.sales-selected-meta-v23 b{color:#0f172a}
.sales-selected-kpi-v23{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sales-selected-kpi-v23>div{border:1px solid #dbe4ef;border-radius:10px;background:#fff;padding:8px 10px;display:grid;gap:4px}
.sales-selected-kpi-v23 span{font-size:12px;color:#667085}
.sales-selected-kpi-v23 b{font-size:20px;color:#1d4ed8}

/* ===== Sales Order UI V3 (新增銷售單) — customer area two-tier grid + full-width detail/payment ===== */
/* Search results now live inside the search column itself (right under the input), not as a
   separate full-width row below both columns — grid-template-areas no longer has a "results" row. */
.sales-customer-grid-v3{display:grid;grid-template-columns:35fr 65fr;grid-template-areas:"search confirm";gap:14px;align-items:start}
.sales-customer-search-col-v3{grid-area:search;min-width:0}
.sales-customer-confirm-col-v3{grid-area:confirm}
.sales-customer-results-row-v3{margin-top:10px}
.sales-selected-meta-v3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;font-size:13px;color:#344054}
.sales-selected-meta-wide-v3{grid-column:1/-1}
.sales-selected-kpi-v3{grid-template-columns:repeat(4,minmax(0,1fr))}
.sales-selected-shortcuts-v3{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sales-selected-shortcuts-v3 button{height:34px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-size:12px;font-weight:700;cursor:pointer}
.sales-selected-shortcuts-v3 button:hover{background:#eef6ff;border-color:#bfdbfe;color:#1d4ed8}

.sales-detail-table-wrap-v3{max-height:480px;overflow:auto}
.sales-detail-table-wrap-v3 thead th{position:sticky;top:0;z-index:1;background:#f9fafb}

.sales-payment-block-v3{display:grid;gap:14px;
  /* Local, module-scoped token (not a global Design Token) — measured live from the current
     .payment-line-v218 rendered height (59px, no-last4 rows, 1366px viewport) and the existing
     .sales-payment-methods-v3 row gap (8px): 4*59 + 3*8 = 260px. */
  --sales-payment-summary-min-height:260px;
}
/* ===== Sales Order UI V3-R1 — checkout workspace: left 付款方式 (60%) / right single 結帳摘要 card (40%) =====
   align-items:stretch (was start) makes both columns match the taller side's height every row —
   pure CSS Grid behavior, no JS/ResizeObserver needed for the right card to grow with the left list. */
.sales-checkout-workspace-v3{display:grid;grid-template-columns:55fr 45fr;gap:20px;align-items:stretch}
.sales-payment-methods-v3{display:grid;gap:8px}
.sales-checkout-summary-v3{display:grid}
.sales-checkout-summary-card-v3{border:1px solid #dbe4ef;border-radius:14px;background:#f8fbff;padding:26px 28px;display:flex;flex-direction:column;gap:14px;height:100%;min-height:var(--sales-payment-summary-min-height);box-sizing:border-box}
.sales-checkout-row-v3{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sales-checkout-row-v3 span{font-size:15px;color:#475467;font-weight:600}
.sales-checkout-row-v3 b{font-size:18px;color:#0f172a;font-weight:700}
.sales-checkout-divider-v3{height:1px;background:#dbe4ef;margin:4px 0}
.sales-checkout-total-v3 span{font-size:16px;color:#0f172a}
.sales-checkout-total-v3 b{font-size:34px;color:#1d4ed8;font-weight:700}
.sales-checkout-status-v3{margin-top:auto;display:inline-flex;align-items:center;align-self:flex-start;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;background:#f2f4f7;color:#475467}
.sales-checkout-status-v3.is-due{background:#fef2f2;color:#b91c1c}
.sales-checkout-status-v3.is-paid{background:#ecfdf3;color:#166534}

.sales-summary-note-row-v3 label{margin:0;font-size:15px;font-weight:700;color:#0f172a}
.sales-summary-note-row-v3 textarea{min-height:84px}
.sales-summary-actions-row-v3{display:flex;gap:10px;justify-content:flex-end}
.sales-summary-actions-row-v3 button:nth-child(2){background:#eef2ff;color:#1d4ed8}
.sales-summary-actions-row-v3 .primary{background:#1e3a8a;color:#fff}

/* ===== Sales Order UI V3-R3 — shared button visual hierarchy (item-add row / bottom actions) ===== */
.sales-action-btn-v3{height:45px;border-radius:10px;font-size:15px;font-weight:600;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;transition:transform .12s ease,background .15s ease,border-color .15s ease}
.sales-action-btn-v3:active{transform:translateY(1px)}
.sales-action-btn-v3:disabled{opacity:.6;cursor:not-allowed;transform:none}
.sales-action-btn-primary-v3{background:#1e3a8a;color:#fff}
.sales-action-btn-primary-v3:hover{background:#16295e}
.sales-action-btn-secondary-v3{background:#eef2ff;color:#1d4ed8;border-color:transparent}
.sales-action-btn-secondary-v3:hover{background:#e0e7ff}
.sales-action-btn-danger-v3{background:#fff;color:#dc2626;border:1px solid #fecaca}
.sales-action-btn-danger-v3:hover{background:#fef2f2}
.sales-legacy-row-v23 .sales-action-btn-v3{align-self:end}

/* ===== Sales Order UI V3-R3 — Save Preview modal (reuses .detail-modal/.detail-modal-card/
   .detail-grid/.data-table design language already established by 耗療確認視窗 usageOrderConfirmModalV212
   in app.js; only new Sales-scoped classes are introduced here, no shared class is modified). ===== */
.sales-save-preview-dialog-v3{width:min(920px,96vw);max-height:88vh;display:flex;flex-direction:column;padding:0}
.sales-save-preview-header-v3{padding:20px 24px 14px;margin:0;flex:0 0 auto}
.sales-save-preview-body-v3{padding:0 24px 20px;overflow:auto;flex:1 1 auto}
.sales-save-preview-note-v3{margin:0 0 14px;color:#64748b;font-size:13px;line-height:1.6;background:#f8fafc;border:1px solid #e6edf5;border-radius:12px;padding:10px 12px}
.sales-save-preview-section-v3{margin-bottom:18px}
.sales-save-preview-section-v3 h4{margin:0 0 10px;font-size:14px;color:#0f172a}
.sales-save-preview-table-wrap-v3{max-height:280px;overflow:auto;border:1px solid #e6edf5;border-radius:12px}
.sales-save-preview-table-v3{width:100%;border-collapse:collapse}
.sales-save-preview-table-v3 thead th{position:sticky;top:0;background:#f9fafb;font-size:12px;color:#64748b;padding:8px 10px;text-align:left;border-bottom:1px solid #e6edf5}
.sales-save-preview-table-v3 td{font-size:13px;padding:8px 10px;border-bottom:1px solid #f1f5f9}
.sales-save-preview-table-v3 td.right,.sales-save-preview-table-v3 th.right{text-align:right}
.sales-save-preview-summary-v3{margin-bottom:12px}
.sales-save-preview-methods-v3{display:grid;gap:6px}
.sales-save-preview-method-row-v3{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 12px;border:1px solid #e6edf5;border-radius:10px;background:#f8fafc}
.sales-save-preview-method-extra-v3{color:#64748b;font-weight:600;margin-left:8px;font-size:12px}
.sales-save-preview-note-row-v3{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:start;margin-top:6px;padding:10px 12px;border:1px solid #e6edf5;border-radius:12px;background:#f8fafc}
.sales-save-preview-note-row-v3 b{font-size:13px;color:#475467}
.sales-save-preview-note-row-v3 span{font-weight:700;color:#101828;white-space:pre-wrap}
.sales-save-preview-footer-v3{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px;border-top:1px solid #e5e7eb;flex:0 0 auto;margin-top:0}
.sales-save-preview-footer-v3 .sales-action-btn-primary-v3{min-width:120px}
.sales-save-preview-footer-v3 .sales-action-btn-secondary-v3{min-width:96px}
@media(max-width:700px){.sales-save-preview-dialog-v3{max-height:94vh}.sales-save-preview-table-wrap-v3{max-height:220px}}

@media(max-width:1000px){
  .sales-customer-grid-v3{grid-template-columns:1fr;grid-template-areas:"search" "confirm"}
  .sales-selected-meta-v3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sales-selected-kpi-v3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sales-checkout-workspace-v3{grid-template-columns:1fr}
}

.sales-item-tabs-v23{display:flex;gap:8px;margin-bottom:10px}
.sales-item-tabs-v23 button{background:#f2f4f7;color:#344054;border:1px solid #d0d5dd;font-weight:700}
.sales-item-tabs-v23 button.active{background:#2563eb;color:#fff;border-color:#2563eb}
.sales-item-pane-v23{display:grid;gap:10px}
.sales-legacy-row-v23{display:grid;grid-template-columns:minmax(260px,1.8fr) 100px 120px 88px 160px;gap:8px;align-items:end}
.sales-item-tool-v23{margin-bottom:6px;display:flex;justify-content:flex-end}
.sales-stored-row-v23{display:grid;grid-template-columns:1fr 1fr 120px 90px 90px;gap:8px;align-items:end}
.sales-stored-row-v23.pkg-mode-v23{grid-template-columns:1fr 120px 90px 90px}

.sales-bottom-grid-v23{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.sales-detail-table-wrap-v23{overflow:auto}
.sales-detail-table-v23 th,.sales-detail-table-v23 td{font-size:13px;padding:9px 10px}
.sales-detail-table-v23 td.right,.sales-detail-table-v23 th.right{text-align:right}
.sales-detail-table-v23 td.center,.sales-detail-table-v23 th.center{text-align:center}
.sales-detail-table-v23 button,.sales-detail-table-v23 .danger{background:transparent!important;border:0!important;color:#dc2626!important;padding:0!important;min-height:auto}

.sales-payment-summary-v23{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,1fr);gap:16px}
.sales-payment-col-v23{display:grid;gap:8px}
#salesPanelCreate #paymentGrid.payment-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
#salesPanelCreate .payment-line-v218{min-height:0;grid-template-columns:20px minmax(0,1fr) 120px 110px!important;grid-template-areas:"check name amount last4"!important;grid-template-rows:auto!important;padding:8px 10px;border-radius:10px}
#salesPanelCreate .payment-line-v218 [data-payamt]{height:36px}
#salesPanelCreate .payment-line-v218 .pay-last4{height:36px}
/* Actual rendered payment rows use class="payment-line compact-payment payment-line-v216" (not
   -v218, which is dead markup from an earlier iteration and never matches). The unscoped
   .payment-line-v216 rule elsewhere in this file used a stretchy minmax(...,1fr) name column,
   which is what let each row's occupied width creep close to its full container instead of
   staying compact with the rest left blank. This scoped, higher-specificity override wins the
   cascade and fixes each field to the requested widths without stretching. */
#salesPanelCreate #paymentGrid .payment-line-v216{grid-template-columns:24px minmax(90px,150px) minmax(110px,1fr) minmax(130px,1fr)!important;justify-content:start!important;width:100%!important;max-width:100%!important;column-gap:12px!important;min-height:54px!important;padding:8px 12px!important;box-sizing:border-box!important}
#salesPanelCreate #paymentGrid .payment-line-v216 > span{font-size:15px;font-weight:600;color:#101828}
#salesPanelCreate #paymentGrid .payment-line-v216 [data-payamt]{width:100%!important;max-width:none!important;font-size:14px}
#salesPanelCreate #paymentGrid .payment-line-v216 .pay-last4{width:100%!important;max-width:none!important;font-size:14px}

.sales-summary-col-v23{display:grid;gap:8px}
.sales-amount-card-v23{border:1px solid #dbe4ef;border-radius:12px;background:#fff;padding:10px 12px;display:grid;gap:8px}
.sales-amount-card-v23>div{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:#344054}
.sales-amount-card-v23 b{color:#0f172a}
.sales-amount-card-v23 .main b{font-size:34px;color:#1d4ed8;line-height:1.1}
#salesUnpaidTotalV23.is-due{color:#dc2626}
#salesUnpaidTotalV23.is-paid{color:#16a34a}
.sales-payment-status-v23{margin-top:4px;justify-content:center!important;border:1px solid #dbe4ef;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;background:#f8fafc}
.sales-payment-status-v23.is-paid{border-color:#bbf7d0;background:#ecfdf3;color:#166534}
.sales-payment-status-v23.is-due{border-color:#fecaca;background:#fef2f2;color:#b91c1c}

.sales-sticky-actions-v23{position:sticky;bottom:0;z-index:8;margin-top:12px;border:1px solid #dbe4ef;border-radius:14px;background:#fff;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.sales-sticky-note-v23 label{margin:0}
.sales-sticky-note-v23 textarea{min-height:64px}
.sales-sticky-btns-v23{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sales-sticky-btns-v23 .primary{background:#1e3a8a;color:#fff}

/* ===== Sales Overview UI V2 (銷售單總覽) — scoped to #salesPanelOverview / #salesOverviewArea.
   耗療單總覽 (#usagePanelOverview / #usageOverviewArea) reuses these exact same rules by widening
   the selector list — this is the SAME shared component/CSS, not a second near-duplicate copy.
   Sales' own DOM/behavior is completely unaffected (purely additive alternate selectors). ===== */
#salesPanelOverview .sales-overview-kpi-grid-v22,#usagePanelOverview .sales-overview-kpi-grid-v22{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:14px 0}
#salesPanelOverview .sales-overview-kpi-card-v22,#usagePanelOverview .sales-overview-kpi-card-v22{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(16,24,40,.05)}
#salesPanelOverview .sales-overview-kpi-icon-v22,#usagePanelOverview .sales-overview-kpi-icon-v22{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:#eef4ff;display:flex;align-items:center;justify-content:center;font-size:19px}
#salesPanelOverview .sales-overview-kpi-body-v22,#usagePanelOverview .sales-overview-kpi-body-v22{min-width:0}
#salesPanelOverview .sales-overview-kpi-label-v22,#usagePanelOverview .sales-overview-kpi-label-v22{font-size:12px;font-weight:700;color:#667085;white-space:nowrap;display:flex;align-items:center;gap:6px}
#salesPanelOverview .sales-overview-kpi-period-v22,#usagePanelOverview .sales-overview-kpi-period-v22{font-size:11px;font-weight:600;color:#98a2b3;background:#f2f4f7;border-radius:999px;padding:1px 7px}
#salesPanelOverview .sales-overview-kpi-value-v22,#usagePanelOverview .sales-overview-kpi-value-v22{font-size:21px;font-weight:800;color:#0f172a;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

#salesPanelOverview .sales-overview-query-row-v22,#usagePanelOverview .sales-overview-query-row-v22{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px;margin-bottom:14px}
#salesPanelOverview .sales-overview-query-left-v22,#usagePanelOverview .sales-overview-query-left-v22{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
#salesPanelOverview .sales-overview-query-left-v22 label,#usagePanelOverview .sales-overview-query-left-v22 label{font-weight:700;color:#0f172a;font-size:13px;display:flex;flex-direction:column;gap:6px}
#salesPanelOverview .sales-overview-quickrange-v22,#usagePanelOverview .sales-overview-quickrange-v22{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:1px}
#salesPanelOverview .sales-overview-quickrange-v22 button,#usagePanelOverview .sales-overview-quickrange-v22 button{height:38px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-size:13px;font-weight:700;cursor:pointer}
#salesPanelOverview .sales-overview-quickrange-v22 button:hover,#usagePanelOverview .sales-overview-quickrange-v22 button:hover{border-color:#93c5fd}
#salesPanelOverview .sales-overview-quickrange-v22 button.is-active,#usagePanelOverview .sales-overview-quickrange-v22 button.is-active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
#salesPanelOverview .sales-overview-query-right-v22,#usagePanelOverview .sales-overview-query-right-v22{display:flex;gap:8px}

#salesPanelOverview #salesOverviewArea,#usagePanelOverview #usageOverviewArea{overflow-x:auto}
#salesPanelOverview .sales-overview-table-v22,#usagePanelOverview .sales-overview-table-v22{width:100%;border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden;border:1px solid #e5e7eb}
#salesPanelOverview .sales-overview-table-v22 th,#usagePanelOverview .sales-overview-table-v22 th{background:#eef1f7;color:#0f172a}
#salesPanelOverview .sales-overview-table-v22 td,#salesPanelOverview .sales-overview-table-v22 th,#usagePanelOverview .sales-overview-table-v22 td,#usagePanelOverview .sales-overview-table-v22 th{padding:12px 12px}
#salesPanelOverview .sales-overview-table-v22 tbody tr,#usagePanelOverview .sales-overview-table-v22 tbody tr{background:#fff;border-bottom:1px solid #eef1f5}
#salesPanelOverview .sales-overview-table-v22 tbody tr:hover,#usagePanelOverview .sales-overview-table-v22 tbody tr:hover{background:#f5f9ff}

#salesPanelOverview .sales-overview-pagination-v22,#usagePanelOverview .sales-overview-pagination-v22{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
#salesPanelOverview .sales-overview-page-info-v22,#usagePanelOverview .sales-overview-page-info-v22,#settingPanelBenefits .sales-overview-page-info-v22{font-size:13px;color:#667085}
#salesPanelOverview .sales-overview-page-controls-v22,#usagePanelOverview .sales-overview-page-controls-v22,#settingPanelBenefits .sales-overview-page-controls-v22{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#salesPanelOverview .sales-overview-page-size-v22,#usagePanelOverview .sales-overview-page-size-v22{height:34px;border-radius:8px;padding:0 8px;font-size:13px}
#salesPanelOverview .sales-overview-page-nav-v22,#salesPanelOverview .sales-overview-page-btn-v22,#usagePanelOverview .sales-overview-page-nav-v22,#usagePanelOverview .sales-overview-page-btn-v22,#settingPanelBenefits .sales-overview-page-nav-v22,#settingPanelBenefits .sales-overview-page-btn-v22{height:34px;min-width:34px;padding:0 10px;border-radius:8px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
#salesPanelOverview .sales-overview-page-nav-v22:disabled,#usagePanelOverview .sales-overview-page-nav-v22:disabled,#settingPanelBenefits .sales-overview-page-nav-v22:disabled{opacity:.4;cursor:not-allowed}
#salesPanelOverview .sales-overview-page-btn-v22.is-active,#usagePanelOverview .sales-overview-page-btn-v22.is-active,#settingPanelBenefits .sales-overview-page-btn-v22.is-active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
#salesPanelOverview .sales-overview-page-ellipsis-v22,#usagePanelOverview .sales-overview-page-ellipsis-v22{color:#98a2b3;padding:0 4px}

@media(max-width:1180px){
  #salesPanelOverview .sales-overview-kpi-grid-v22,#usagePanelOverview .sales-overview-kpi-grid-v22{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  #salesPanelOverview .sales-overview-kpi-grid-v22,#usagePanelOverview .sales-overview-kpi-grid-v22{grid-template-columns:repeat(2,1fr)}
  #salesPanelOverview .sales-overview-query-row-v22,#usagePanelOverview .sales-overview-query-row-v22{align-items:stretch}
}

/* ===== Sales Search UI V2 (銷售單查詢) — scoped to #salesPanelQuery / #salesQueryArea.
   耗療單查詢 (#usagePanelQuery / #usageQueryArea) reuses these exact same rules by widening the
   selector list — same pattern as the 耗療單總覽/sales-overview-* block above: SAME shared
   component/CSS, not a second near-duplicate copy. Sales' own DOM/behavior is unaffected. ===== */
.sales-tabs-panel-v22{padding-bottom:4px}
#salesPanelQuery .sales-query-kpi-grid-v22,#usagePanelQuery .sales-query-kpi-grid-v22{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:14px 0}
#salesPanelQuery .sales-query-kpi-card-v22,#usagePanelQuery .sales-query-kpi-card-v22{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(16,24,40,.05)}
#salesPanelQuery .sales-query-kpi-icon-v22,#usagePanelQuery .sales-query-kpi-icon-v22{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:#eef4ff;display:flex;align-items:center;justify-content:center;font-size:19px}
#salesPanelQuery .sales-query-kpi-body-v22,#usagePanelQuery .sales-query-kpi-body-v22{min-width:0}
#salesPanelQuery .sales-query-kpi-label-v22,#usagePanelQuery .sales-query-kpi-label-v22{font-size:12px;font-weight:700;color:#667085;white-space:nowrap}
#salesPanelQuery .sales-query-kpi-value-v22,#usagePanelQuery .sales-query-kpi-value-v22{font-size:21px;font-weight:800;color:#0f172a;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

#salesPanelQuery .sales-query-filter-card-v22,#usagePanelQuery .sales-query-filter-card-v22{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:12px}
#salesPanelQuery .sales-query-filter-row-v22,#usagePanelQuery .sales-query-filter-row-v22{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
#salesPanelQuery .sales-query-filter-row-v22 label,#usagePanelQuery .sales-query-filter-row-v22 label{font-weight:700;color:#0f172a;font-size:13px;display:flex;flex-direction:column;gap:6px}
#salesPanelQuery .sales-query-filter-row-v22 input,#salesPanelQuery .sales-query-filter-row-v22 select,#usagePanelQuery .sales-query-filter-row-v22 input,#usagePanelQuery .sales-query-filter-row-v22 select{background:#fff}
#salesPanelQuery .sales-query-quickrange-v22,#usagePanelQuery .sales-query-quickrange-v22{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:1px}
#salesPanelQuery .sales-query-quickrange-v22 button,#usagePanelQuery .sales-query-quickrange-v22 button{height:38px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-size:13px;font-weight:700;cursor:pointer}
#salesPanelQuery .sales-query-quickrange-v22 button:hover,#usagePanelQuery .sales-query-quickrange-v22 button:hover{border-color:#93c5fd}
#salesPanelQuery .sales-query-quickrange-v22 button.is-active,#usagePanelQuery .sales-query-quickrange-v22 button.is-active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
/* BATCH-007 #15 —— 客戶搜尋暫時放寬「系統預設區間」時，日期欄位要看得出目前沒有生效，
   否則畫面上寫著 09/07～09/13、查出來卻是全部歷史，等於在騙人。
   使用者一手動指定日期，class 就會被移除，區間立刻恢復生效。 */
#usagePanelQuery input.usage-query-date-bypassed-v7{background:#f9fafb;color:#98a2b3;border-style:dashed}
#salesPanelQuery .sales-query-filter-actions-v22,#usagePanelQuery .sales-query-filter-actions-v22{display:flex;gap:8px;margin-left:auto}
#salesPanelQuery .sales-query-btn-primary-v22,#usagePanelQuery .sales-query-btn-primary-v22{background:#1d4ed8;color:#fff;border:0;height:40px;padding:0 18px;border-radius:10px;font-weight:700;cursor:pointer}
#salesPanelQuery .sales-query-btn-primary-v22:hover,#usagePanelQuery .sales-query-btn-primary-v22:hover{background:#1741b8}
#salesPanelQuery .sales-query-report-btn-v22,#usagePanelQuery .sales-query-report-btn-v22{height:40px;padding:0 14px;border-radius:10px;background:#f3f4f6;border:1px solid #e5e7eb;color:#344054;font-weight:600;font-size:13px;cursor:pointer}
#salesPanelQuery .sales-query-report-btn-v22:hover,#usagePanelQuery .sales-query-report-btn-v22:hover{background:#e8eaed}
#salesPanelQuery .sales-query-filter-row2-v22,#usagePanelQuery .sales-query-filter-row2-v22{align-items:end}
#salesPanelQuery .sales-query-amount-range-v22,#usagePanelQuery .sales-query-amount-range-v22{min-width:220px}
#salesPanelQuery .sales-query-amount-inputs-v22,#usagePanelQuery .sales-query-amount-inputs-v22{display:flex;align-items:center;gap:6px}
#salesPanelQuery .sales-query-amount-inputs-v22 input,#usagePanelQuery .sales-query-amount-inputs-v22 input{width:100px}
#salesPanelQuery .sales-query-amount-inputs-v22 span,#usagePanelQuery .sales-query-amount-inputs-v22 span{color:#98a2b3}
#salesPanelQuery .sales-query-more-v22,#usagePanelQuery .sales-query-more-v22{margin-left:auto;align-self:end}
#salesPanelQuery .sales-query-more-toggle-v22,#usagePanelQuery .sales-query-more-toggle-v22{background:transparent;border:0;padding:8px 0;color:#1d4ed8;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
#salesPanelQuery .sales-query-more-caret-v22,#usagePanelQuery .sales-query-more-caret-v22{display:inline-block;transition:transform .15s}
#salesPanelQuery .sales-query-more-toggle-v22.is-open .sales-query-more-caret-v22,#usagePanelQuery .sales-query-more-toggle-v22.is-open .sales-query-more-caret-v22{transform:rotate(180deg)}
#salesPanelQuery .sales-query-more-body-v22,#usagePanelQuery .sales-query-more-body-v22{flex-basis:100%;padding-top:6px;display:flex;flex-direction:column;gap:10px}
#salesPanelQuery .sales-query-more-body-v22[hidden],#usagePanelQuery .sales-query-more-body-v22[hidden]{display:none}

#salesPanelQuery #salesQueryArea,#usagePanelQuery #usageQueryArea{overflow-x:auto}
#salesPanelQuery .sales-query-table-v22,#usagePanelQuery .sales-query-table-v22{width:100%;border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden;border:1px solid #e5e7eb}
#salesPanelQuery .sales-query-table-v22 th,#usagePanelQuery .sales-query-table-v22 th{background:#eef1f7;color:#0f172a;white-space:nowrap}
#salesPanelQuery .sales-query-table-v22 td,#salesPanelQuery .sales-query-table-v22 th,#usagePanelQuery .sales-query-table-v22 td,#usagePanelQuery .sales-query-table-v22 th{padding:12px 12px}
#salesPanelQuery .sales-query-table-v22 tbody tr,#usagePanelQuery .sales-query-table-v22 tbody tr{background:#fff;border-bottom:1px solid #eef1f5}
#salesPanelQuery .sales-query-table-v22 tbody tr:hover,#usagePanelQuery .sales-query-table-v22 tbody tr:hover{background:#f5f9ff}

#salesPanelQuery .sales-query-pagination-v22,#usagePanelQuery .sales-query-pagination-v22,#salesPerformanceReportPanel .sales-query-pagination-v22,#usagePerformanceReportPanel .sales-query-pagination-v22,#sourceValueReportPanel .sales-query-pagination-v22,#marketingCampaignPanelV230 .sales-query-pagination-v22,#settingPanelEmployees .sales-query-pagination-v22{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
#salesPanelQuery .sales-query-page-info-v22,#usagePanelQuery .sales-query-page-info-v22,#salesPerformanceReportPanel .sales-query-page-info-v22,#usagePerformanceReportPanel .sales-query-page-info-v22,#sourceValueReportPanel .sales-query-page-info-v22,#marketingCampaignPanelV230 .sales-query-page-info-v22,#settingPanelEmployees .sales-query-page-info-v22{font-size:13px;color:#667085}
#salesPanelQuery .sales-query-page-controls-v22,#usagePanelQuery .sales-query-page-controls-v22,#salesPerformanceReportPanel .sales-query-page-controls-v22,#usagePerformanceReportPanel .sales-query-page-controls-v22,#sourceValueReportPanel .sales-query-page-controls-v22,#marketingCampaignPanelV230 .sales-query-page-controls-v22,#settingPanelEmployees .sales-query-page-controls-v22{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#salesPanelQuery .sales-query-page-size-v22,#usagePanelQuery .sales-query-page-size-v22,#salesPerformanceReportPanel .sales-query-page-size-v22,#usagePerformanceReportPanel .sales-query-page-size-v22,#sourceValueReportPanel .sales-query-page-size-v22,#marketingCampaignPanelV230 .sales-query-page-size-v22,#settingPanelEmployees .sales-query-page-size-v22{height:34px;border-radius:8px;padding:0 8px;font-size:13px}
#salesPanelQuery .sales-query-page-nav-v22,#salesPanelQuery .sales-query-page-btn-v22,#usagePanelQuery .sales-query-page-nav-v22,#usagePanelQuery .sales-query-page-btn-v22,#salesPerformanceReportPanel .sales-query-page-nav-v22,#salesPerformanceReportPanel .sales-query-page-btn-v22,#usagePerformanceReportPanel .sales-query-page-nav-v22,#sourceValueReportPanel .sales-query-page-nav-v22,#usagePerformanceReportPanel .sales-query-page-btn-v22,#sourceValueReportPanel .sales-query-page-btn-v22,#marketingCampaignPanelV230 .sales-query-page-nav-v22,#marketingCampaignPanelV230 .sales-query-page-btn-v22,#settingPanelEmployees .sales-query-page-nav-v22,#settingPanelEmployees .sales-query-page-btn-v22{height:34px;min-width:34px;padding:0 10px;border-radius:8px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-size:13px;cursor:pointer}
#salesPanelQuery .sales-query-page-nav-v22:disabled,#usagePanelQuery .sales-query-page-nav-v22:disabled,#salesPerformanceReportPanel .sales-query-page-nav-v22:disabled,#usagePerformanceReportPanel .sales-query-page-nav-v22:disabled,#sourceValueReportPanel .sales-query-page-nav-v22:disabled,#marketingCampaignPanelV230 .sales-query-page-nav-v22:disabled,#settingPanelEmployees .sales-query-page-nav-v22:disabled{opacity:.4;cursor:not-allowed}
#salesPanelQuery .sales-query-page-btn-v22.is-active,#usagePanelQuery .sales-query-page-btn-v22.is-active,#salesPerformanceReportPanel .sales-query-page-btn-v22.is-active,#usagePerformanceReportPanel .sales-query-page-btn-v22.is-active,#sourceValueReportPanel .sales-query-page-btn-v22.is-active,#marketingCampaignPanelV230 .sales-query-page-btn-v22.is-active,#settingPanelEmployees .sales-query-page-btn-v22.is-active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
#salesPanelQuery .sales-query-page-ellipsis-v22,#usagePanelQuery .sales-query-page-ellipsis-v22,#salesPerformanceReportPanel .sales-query-page-ellipsis-v22,#usagePerformanceReportPanel .sales-query-page-ellipsis-v22,#sourceValueReportPanel .sales-query-page-ellipsis-v22,#marketingCampaignPanelV230 .sales-query-page-ellipsis-v22,#settingPanelEmployees .sales-query-page-ellipsis-v22{color:#98a2b3;padding:0 4px}

/* 耗療查詢「更多條件」內的既有療程多選區塊 — 沿用既有 .usage-benefit-filter-v230 class
   （不建立第二套療程多選元件），僅調整為緊湊型：每項固定 36px、可捲動最高 220px、主要文字為
   療程名稱、次要文字（代碼）用較小字級，避免顯示完整技術 ID 作為主要文字。 */
#usagePanelQuery .usage-benefit-filter-v230{margin:0;background:#f8fafc}
#usagePanelQuery .usage-benefit-options-v230{max-height:220px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
#usagePanelQuery .usage-benefit-options-v230 label{display:flex;flex-direction:row;align-items:center;gap:6px;font-weight:400;color:inherit;height:36px;padding:0 6px;border-radius:6px}
#usagePanelQuery .usage-benefit-options-v230 label:hover{background:#eef1f7}
#usagePanelQuery .usage-benefit-option-name-v230{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#usagePanelQuery .usage-benefit-option-code-v230{font-size:11px;color:#98a2b3;flex:0 0 auto}
#usagePanelQuery .sales-query-more-body-v230-title{font-weight:700;color:#0f172a;font-size:13px}

@media(max-width:1180px){
  #salesPanelQuery .sales-query-kpi-grid-v22,#usagePanelQuery .sales-query-kpi-grid-v22{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  #salesPanelQuery .sales-query-kpi-grid-v22,#usagePanelQuery .sales-query-kpi-grid-v22{grid-template-columns:repeat(2,1fr)}
  #salesPanelQuery .sales-query-filter-row-v22,#usagePanelQuery .sales-query-filter-row-v22{align-items:stretch}
  #salesPanelQuery .sales-query-more-v22,#usagePanelQuery .sales-query-more-v22{margin-left:0}
}

@media(max-width:1180px){
  .sales-legacy-row-v23{grid-template-columns:minmax(220px,1fr) 96px 110px 78px 140px}
  .sales-stored-row-v23{grid-template-columns:1fr 1fr 110px 82px 82px}
  .sales-stored-row-v23.pkg-mode-v23{grid-template-columns:1fr 110px 82px 82px}
  .sales-bottom-grid-v23{grid-template-columns:1fr}
}
@media(max-width:900px){
  .sales-basic-row-v23,.sales-customer-grid-v23,.sales-payment-summary-v23{grid-template-columns:1fr}
  .sales-customer-left-v23{padding-right:0;border-right:0;padding-bottom:10px;border-bottom:1px solid #eef2f7}
  .sales-legacy-row-v23,.sales-stored-row-v23{grid-template-columns:1fr 1fr}
  .sales-legacy-row-v23 button,.sales-stored-row-v23 button{grid-column:span 2}
  .sales-sticky-actions-v23{grid-template-columns:1fr}
  .sales-sticky-btns-v23{justify-content:flex-start}
}
@media(max-width:560px){
  #salesPanelCreate #paymentGrid .payment-line-v216{grid-template-columns:20px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;width:100%!important}
  #salesPanelCreate #paymentGrid .payment-line-v216 [data-payamt]{max-width:none!important}
  #salesPanelCreate #paymentGrid .payment-line-v216 .pay-last4{max-width:none!important}
  .sales-legacy-row-v23,.sales-stored-row-v23{grid-template-columns:1fr}
  .sales-legacy-row-v23 button,.sales-stored-row-v23 button{grid-column:auto}
}

@media(max-width:1000px){
  .header-clinic-context-v221{justify-content:flex-start;margin-top:8px}
  .platform-layout-v221{grid-template-columns:1fr}
  .platform-cards-v221{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .platform-cards-v221{grid-template-columns:1fr}
  .clinic-setup-stepper-v221{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* V2.0.1 UI fixes */
.form.three label:first-child input#custChart{max-width:180px}
.customer-summary{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:#f9fafb;border:1px solid #eaecf0;border-radius:12px;padding:12px;margin-bottom:12px}
.customer-summary strong{font-size:18px;color:#1d4ed8}
.customer-detail-switch-v07d{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.customer-detail-switch-v07d button{margin:0;white-space:nowrap}
.tabs button{margin-right:6px}
.compact-table th,.compact-table td{padding:8px 10px;font-size:14px}
.customer-contact-form-card-v230{background:#fff;border:1px solid #e4e7ec;border-radius:12px;padding:12px}
.customer-contact-meta-row-v230{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.customer-contact-actions-v230{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.customer-contact-list-v230{margin-top:10px}
.customer-contact-list-v230 th,.customer-contact-list-v230 td{font-size:13px;padding:7px 8px;vertical-align:top}
.customer-contact-list-v230 td:last-child{white-space:nowrap}
.payment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.payment-line{display:grid!important;grid-template-columns:22px 60px 1fr;align-items:center;gap:8px;padding:8px 10px}
.payment-line input[type=checkbox]{transform:none!important;width:18px!important;height:18px!important;margin:0}
.staff-chip{display:inline-block;border-radius:999px;padding:3px 8px;background:#fff;border:1px solid #d0d5dd}
.card.selected,.liability-card.selected{outline:3px solid #2563eb}
.report-tabs button.active-tab{background:#1d4ed8;color:white}
.checkline{flex-direction:row!important;align-items:center;gap:8px}
.checkline input{width:auto}

/* V2.0.2 */
.payment-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:8px;max-width:100%;overflow:hidden}
.compact-payment{display:grid!important;grid-template-columns:22px 54px minmax(90px,1fr)!important;align-items:center;gap:8px;min-width:0}
.compact-payment input[type=checkbox]{width:18px!important;height:18px!important;transform:none!important;margin:0!important}
.compact-payment input[type=number]{min-width:0;width:100%!important}
.daily-title{font-size:20px;font-weight:800;margin:10px 0 14px}
.daily-table{font-size:14px;border:1px solid #d0d5dd}
.daily-table th{background:#f2f4f7;font-weight:800}

/* V2.3 RC Adjustment Center skeleton */
.adjustment-center-panel-v230 .adjustment-block-v230{margin:12px 0;padding:12px;border:1px solid #dbe5f4;border-radius:10px;background:#fff}
.adjustment-center-panel-v230 .adjustment-block-v230 h5{margin:0 0 8px 0;font-size:14px;color:#1f2d4d}
.adjustment-center-panel-v230 textarea{min-height:90px;resize:vertical}
.adjustment-party-grid-v230{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;margin:10px 0 12px}
.adjustment-party-grid-v230.is-stacked{grid-template-columns:1fr}
.adjustment-party-card-v230{border:1px solid #dbe5f4;border-radius:12px;padding:12px;min-height:100%;box-sizing:border-box}
.adjustment-party-card-v230 h5{margin:0 0 10px 0;font-size:15px;color:#1f2d4d}
.adjustment-party-card-v230 h6{margin:0 0 8px 0;font-size:13px;color:#344054}
.adjustment-party-card-v230.is-source{background:#f4fbf5;border-color:#cfe8d2}
.adjustment-party-card-v230.is-target{background:#f7f4ff;border-color:#ddd2fa}
.adjustment-party-section-v230{margin-top:10px}
.adjustment-party-summary-v230{margin-top:8px;padding:10px;border:1px solid #d6def4;border-radius:10px;background:#fff;font-size:12px;color:#344054;line-height:1.5}
.adjustment-search-results-v230{margin-top:6px;max-height:260px;overflow:auto;border:1px solid #dbe5f4;border-radius:8px;background:#fff}
.adjustment-search-results-v230.hidden{display:none}
.adjustment-search-row-v230{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #eef2ff;background:#fff;padding:8px 10px;cursor:pointer}
.adjustment-search-row-v230:last-child{border-bottom:0}
.adjustment-search-row-v230:hover{background:#f8fbff}
.adjustment-search-name-v230{font-weight:700;color:#0f2b63}
.adjustment-search-meta-v230{font-size:12px;color:#475467;line-height:1.45}
.conversion-config-v230{display:flex;flex-direction:column;gap:10px}
.conversion-config-v230 .actions{justify-content:flex-start}
.conversion-config-v230 .note{line-height:1.8;background:#f8fbff;border:1px solid #dbe5f4;border-radius:10px;padding:8px 10px}
.conversion-target-table-v230 td,.conversion-target-table-v230 th{padding:6px 8px}
.conversion-target-table-v230 input[type="number"]{width:90px}
.conversion-diff-refund-v230{color:#1d4ed8;font-weight:700}
.conversion-diff-pay-v230{color:#b42318;font-weight:700}
#conversionRefundMethodWrapV230{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#conversionPreviewControlsV230{margin-top:10px}
#conversionQtyErrorV230{border-color:#fecaca;background:#fef2f2;color:#b42318}
.conversion-input-invalid-v230{border-color:#b42318!important;box-shadow:0 0 0 2px rgba(180,35,24,0.12)}
.adjustment-customer-summary-v230{margin-top:6px;padding:10px;border:1px solid #d6def4;border-radius:10px;background:#fff;color:#344054;font-size:12px;line-height:1.5}
.adjustment-customer-summary-v230 b{color:#0f172a}
.adjustment-customer-summary-head-v230{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.adjustment-customer-summary-grid-v230{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.adjustment-customer-summary-grid-v230 span{display:block;font-size:11px;color:#667085}
.adjustment-customer-summary-grid-v230 strong{font-size:13px;color:#101828}
.adjustment-toast-v230{position:fixed;right:16px;bottom:16px;z-index:3200;max-width:min(440px,90vw);padding:10px 12px;border-radius:10px;border:1px solid #b8d4ff;background:#eff6ff;color:#0b3f9c;box-shadow:0 10px 24px rgba(16,24,40,.18)}
.adjustment-toast-v230.is-error{border-color:#fecaca;background:#fef2f2;color:#b42318}
/* Clinical Media Center Toast — ClinicOS_UI_Foundation_Standard_V1.md §18 Approved Standard
   (same values as .adjustment-toast-v230, renamed per module — NOT notifyActionV221/showActionModal). */
.clinical-media-toast{position:fixed;right:16px;bottom:16px;z-index:3200;max-width:min(440px,90vw);padding:10px 12px;border-radius:10px;border:1px solid #b8d4ff;background:#eff6ff;color:#0b3f9c;box-shadow:0 10px 24px rgba(16,24,40,.18)}
.clinical-media-toast.is-error{border-color:#fecaca;background:#fef2f2;color:#b42318}
/* 確認報到 Toast（CHECKIN-LATENCY-002 §G）— 與 .adjustment-toast-v230 / .clinical-media-toast
   完全相同的值，依本專案「每模組一個 scoped toast」慣例改名，不是新的設計或新的通知系統。
   只用於報到成功；其餘預約操作與所有失敗仍走既有 showActionModal。 */
.appt-toast-v1{position:fixed;right:16px;bottom:16px;z-index:3200;max-width:min(440px,90vw);padding:10px 12px;border-radius:10px;border:1px solid #b8d4ff;background:#eff6ff;color:#0b3f9c;box-shadow:0 10px 24px rgba(16,24,40,.18)}
.adjustment-detail-modal-v230{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:3300}
.adjustment-detail-modal-v230.hidden{display:none}
.adjustment-detail-dialog-v230{width:min(980px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;border:1px solid #d0d5dd;padding:14px}
.adjustment-detail-dialog-v230 table{width:100%;border-collapse:collapse}
.adjustment-detail-dialog-v230 th,.adjustment-detail-dialog-v230 td{border:1px solid #e4e7ec;padding:8px;text-align:left}
@media(max-width:980px){
  .adjustment-party-grid-v230{grid-template-columns:1fr}
}

/* ===== 異動作業｜權益轉移 UI Review Round 2 (visual-only rebuild). #adjustmentEditorV230 is a SHARED
   skeleton used by refund/transfer/conversion — every rule below is scoped with :has() to only
   engage when the transfer step bar is actually visible (i.e. mode==='transfer', toggled in app.js),
   so refund/conversion keep today's exact layout untouched. Reuses .clinic-btn/.clinic-btn-primary/
   .clinic-btn-secondary/.ghost, .compact-table, .adjustment-block-v230, .adjustment-party-card-v230/
   .adjustment-customer-summary-v230 — no second design system. Some header/label/button TEXT is
   relabelled via a CSS font-size:0 + ::before content swap (e.g. 清除／重選→變更客戶,
   剩餘數量→剩餘, 轉讓數量→本次轉移) specifically because the functions that render that text
   (renderAdjustmentSelectedCustomerV230/renderAdjustmentEligibleRowsV230) are not window-exposed and
   must stay untouched — this changes only what's visually painted, never the underlying DOM text,
   onclick, or any data. ===== */
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-center-panel-v230,
.adjustment-center-panel-v230:has(#adjustmentEditorV230 #adjTransferStepbarV1:not(.hidden)){padding-bottom:24px}
.adjustment-center-panel-v230:has(#adjustmentEditorV230 #adjTransferStepbarV1:not(.hidden)) > .workspace-head-v211{display:none}
.adjustment-center-panel-v230:has(#adjustmentEditorV230 #adjTransferStepbarV1:not(.hidden)) #adjustmentRouteBadgeV230{font-size:11px;padding:2px 8px}

.adj-page-header-v1{padding:20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.adj-page-header-text-v1 h4{margin:0 0 6px;font-size:24px;font-weight:700;color:#0f172a}
.adj-page-header-text-v1 p{margin:0;font-size:14px;color:#667085}

.adj-transfer-stepbar-v1{display:flex;align-items:center;gap:0;margin:0 0 20px;padding:14px 16px;background:#fff;border:1px solid #eef1f5;border-radius:16px;min-height:72px;box-sizing:border-box}
.adj-transfer-step-v1{display:flex;align-items:center;gap:10px;white-space:nowrap}
.adj-transfer-step-num-v1{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #d0d5dd;color:#98a2b3;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.adj-transfer-step-text-v1{display:flex;flex-direction:column;gap:1px}
.adj-transfer-step-label-v1{font-size:15px;font-weight:600;color:#98a2b3}
.adj-transfer-step-sub-v1{font-size:12px;color:#98a2b3}
.adj-transfer-step-v1.is-active .adj-transfer-step-num-v1{background:var(--clinic-primary);border-color:var(--clinic-primary);color:#fff}
.adj-transfer-step-v1.is-active .adj-transfer-step-label-v1{color:#0f172a}
.adj-transfer-step-v1.is-active .adj-transfer-step-sub-v1{color:#667085}
.adj-transfer-step-line-v1{flex:1 1 auto;height:2px;background:#e4e7ec;margin:0 14px;min-width:16px}

#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-party-card-v230{border-radius:14px;padding:20px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-party-card-v230 h5{font-size:18px;font-weight:700}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-party-grid-v230.adj-transfer-grid-v1{grid-template-columns:1fr 72px 1fr}
.adj-transfer-arrow-v1{text-align:center;font-size:32px;color:var(--clinic-primary);font-weight:700}
.adj-transfer-arrow-v1.hidden{display:none}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-customer-summary-v230{padding:14px;min-height:96px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-customer-summary-head-v230{margin-bottom:8px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-customer-summary-v230 b{font-size:20px;font-weight:700}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-customer-summary-grid-v230 span{font-size:12px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-customer-summary-grid-v230 strong{font-size:14px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-customer-summary-head-v230 button.ghost{font-size:0;padding:6px 10px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-customer-summary-head-v230 button.ghost::before{content:"變更客戶";font-size:13px}

.adj-cust-stats-v1{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.adj-cust-stats-v1:empty{display:none}
.adj-cust-stat-v1{background:#fff;border:1px solid #e4e7ec;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.adj-cust-stat-label-v1{font-size:12px;color:#667085;font-weight:600}
.adj-cust-stat-value-v1{font-size:20px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adj-config-summary-wrap-v1{display:none}

#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adj-step2-block-v1{border-radius:16px;padding:20px}
/* 標題與分類 Tab 同列（spec 一）：h6 靠左，Tab（+已選擇筆數）靠右，同一個 flex row，
   不再額外佔一整行的垂直空間。 */
.adj-step2-table-head-v1{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.adj-step2-table-head-v1 h6{margin:0;font-size:18px;font-weight:700;color:#0f172a}
.adj-step2-head-right-v1{display:flex;align-items:center;gap:12px}
.adj-step2-selected-count-v1{font-size:13px;font-weight:700;color:var(--clinic-primary);background:#eff6ff;padding:3px 10px;border-radius:999px}
.adj-step2-selected-count-v1:empty{display:none}
/* 類型篩選為水平 Segment Control（原左側直向 Radio Card 欄已移除，Table 改用完整寬度）。
   #adjTransferFilterGroupV1 只在 transfer 模式顯示（setAdjTransferModeUiV1 toggle .hidden，app.js）—
   refund/conversion 共用同一個 #adjustmentEligibleListV230，但其 renderAdjustmentEligibleRowsV230
   分支從不讀取這個篩選值，所以該區塊在那兩個模式下直接隱藏，行為更明確。 */
.adj-step2-tabs-v1{display:flex;gap:12px;flex-wrap:nowrap}
.adj-step2-tabs-v1 label{position:relative;display:flex;flex-direction:row;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:10px;border:1px solid #d0d5dd;background:#fff;font-size:15px;font-weight:600;color:#344054;cursor:pointer;box-sizing:border-box;white-space:nowrap;transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.adj-step2-tabs-v1 label:hover{border-color:#98a2b3}
.adj-step2-tabs-v1 input[type="radio"]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.adj-step2-tabs-v1 label:has(input:checked){background:var(--clinic-primary);border-color:var(--clinic-primary);color:#fff}
.adj-step2-filter-count-v1{display:inline-flex;align-items:center;justify-content:center;height:22px;box-sizing:border-box;font-size:12px;font-weight:700;color:#98a2b3;background:#f2f4f7;padding:0 8px;border-radius:999px}
.adj-step2-tabs-v1 label:has(input:checked) .adj-step2-filter-count-v1{color:#fff;background:rgba(255,255,255,.28)}
/* renderAdjustmentTransferEligibleTableV1 (app.js) emits transfer mode's own dedicated table markup
   directly — checkbox column, simplified 7-column header, and group rows are all part of that single
   render pass, not a later positional CSS hide or JS injection. Only sizing/color styling lives here.
   Column proportions (spec 五): 勾選5% / 項目25% / 類型12% / 剩餘次數15% / 剩餘價值15% / 轉移數量15% /
   狀態13% — table-layout:fixed so the percentages hold regardless of cell content length. */
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table{table-layout:fixed;width:100%}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th{font-size:15px;font-weight:600;background:#f8fafc;height:44px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td{font-size:16px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table tbody tr{min-height:56px;height:auto}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table tbody tr:hover{background:#f8fafc}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(1),
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(1){width:5%;text-align:center}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(2),
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(2){width:25%}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(3),
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(3){width:12%}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(4),
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(4){width:15%}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(5),
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(5){width:15%}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(6),
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(6){width:15%}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(7),
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(7){width:13%}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td.adj-select-td-v1{padding:8px}
.adj-select-td-v1 input[type="checkbox"]{width:18px;height:18px;cursor:pointer}
.adj-row-selected-v1{background:#f5f8ff}
.adj-row-selected-v1:hover{background:#eef4ff!important}
.adj-group-row-v1 td{font-size:14px;font-weight:700;color:#475467;background:#f2f4f7;padding:8px 12px;height:auto}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .transfer-qty-input-v230{width:90px;height:40px;font-size:16px;text-align:center;border-radius:10px;max-width:100%}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .badge-v1{font-size:13px}
.badge-closed-v1{background:var(--cos-surface-muted);color:var(--cos-text-muted);border:1px solid var(--cos-border)}
.badge-disabled-v1{background:#fef3f2;color:#b42318;border:1px solid #fecdca}

#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjTrialBlockV1{border-radius:16px;padding:20px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjTrialBlockV1 h5,
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjReasonBlockV1 h5{font-size:18px;font-weight:700}
.adj-block-subtitle-v1{margin:-4px 0 12px!important;font-size:13px;color:#667085}
/* Preview Card's own 「試算」button (#adjTrialBlockV1 .actions) still triggers the exact same
   previewAdjustmentV230() and remains conversion mode's ONLY trigger for it — only hidden here for
   transfer, where the footer's 試算預覽/重新試算 button (#adjTransferPreviewBtnV1) takes over so there
   is never more than one visible trigger at once. */
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjTrialBlockV1 > .actions{display:none}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentPreviewResultV230 table.compact-table th{font-size:15px;font-weight:600;background:#f8fafc}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentPreviewResultV230 table.compact-table td{font-size:16px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentPreviewResultV230 table.compact-table tbody tr{height:48px}
.adj-trial-num-v1{font-variant-numeric:tabular-nums}
/* 轉移後數量（試算結果 Table 第4欄「轉出後」）一律放大強調，不論數值增/減/不變 — 純樣式，
   透過欄位序位（nth-child）套用，不需改動 renderTransferPreviewResultV230 本身或其計算邏輯。 */
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentPreviewResultV230 table.compact-table td:nth-child(4){font-size:18px;font-weight:700}
.adj-trial-decrease-v1{color:#dc2626}
.adj-trial-increase-v1{color:#12b76a}
.adj-preview-empty-v1{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:32px 12px;text-align:center}
.adj-preview-empty-icon-v1{font-size:24px;line-height:1}
.adj-preview-empty-title-v1{font-size:16px;font-weight:600;color:#344054}
.adj-preview-empty-hint-v1{font-size:14px;color:#667085}

#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjReasonBlockV1{border-radius:16px;padding:20px}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentReasonNoteV230{min-height:120px;font-size:16px;padding:14px;border-radius:12px;width:100%;box-sizing:border-box}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjReasonLabelV1{font-size:0}
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjReasonLabelV1::before{content:"";display:block}
.adj-reason-count-v1{text-align:right;font-size:12px;color:#98a2b3;margin-top:4px}
.adj-reason-chips-v1{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.adj-reason-chip-v1{height:32px;padding:0 14px;border-radius:999px;border:1px solid #e4e7ec;background:#f8fafc;color:#344054;font-size:13px;font-weight:600;cursor:pointer}
.adj-reason-chip-v1:hover{border-color:var(--clinic-primary);color:var(--clinic-primary);background:#eff6ff}

.adj-transfer-footer-v1{position:sticky;bottom:0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;margin-top:16px;border-top:1px solid #e4e7ec;min-height:72px;box-sizing:border-box}
.adj-transfer-footer-left-v1{display:flex;align-items:center;gap:16px}
.adj-transfer-footer-status-v1{display:flex;flex-direction:column;gap:2px;font-size:13px}
#adjTransferFooterStatusMainV1{font-weight:700;color:#0f172a}
#adjTransferFooterStatusSubV1{color:#667085}
.adj-transfer-footer-right-v1{display:flex;gap:10px}
.adj-transfer-footer-v1 button{height:44px}
/* spec 九: 轉讓試算完成訊息不得顯示在Footer外部 — the shared #adjustmentPageMsgV230 toast/message
   line is only hidden for transfer, where the footer's own status text (above) is the single place
   trial-completion state is shown; refund/conversion keep using it exactly as before. */
#adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) #adjustmentPageMsgV230{display:none}

@media(max-width:980px){
  #adjustmentEditorV230:has(#adjTransferStepbarV1:not(.hidden)) .adjustment-party-grid-v230.adj-transfer-grid-v1{grid-template-columns:1fr}
  .adj-transfer-arrow-v1{transform:rotate(90deg)}
  .adj-step2-table-head-v1{flex-wrap:wrap;gap:10px}
  .adj-step2-tabs-v1{flex-wrap:wrap}
  .adj-transfer-footer-v1{flex-direction:column;align-items:stretch}
  .adj-transfer-footer-left-v1{justify-content:space-between}
}

/* ===== 退費作業 UI 重構 (依確認稿). #adjustmentEditorV230 is the SAME shared skeleton
   transfer/refund/conversion all use — every rule below is scoped with :has(#adjRefundStepbarV1) so
   it only engages when mode==='refund' (toggled by setAdjRefundModeUiV1, app.js); transfer/conversion
   keep their exact current layout untouched. Reuses .adj-page-header-v1/.adj-transfer-stepbar-v1/
   .adj-transfer-step-v1/.clinic-btn*/.adj-reason-chips-v1/.adj-reason-chip-v1/.adj-transfer-footer-v1/
   .adj-select-th-v1/.adj-select-td-v1/.adj-row-selected-v1/.badge-v1 — all components already built
   for 權益轉移's own rebuild, not a second design system. Page header, step bar, reason chips, and
   footer chrome need NO new CSS at all here since those classes were never :has()-scoped to begin
   with. */

/* 一/三: workspace chrome — mirrors 權益轉移's exact same 4 rules, keyed off the refund marker. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adjustment-center-panel-v230,
.adjustment-center-panel-v230:has(#adjustmentEditorV230 #adjRefundStepbarV1:not(.hidden)){padding-bottom:96px}
.adjustment-center-panel-v230:has(#adjustmentEditorV230 #adjRefundStepbarV1:not(.hidden)) > .workspace-head-v211{display:none}
.adjustment-center-panel-v230:has(#adjustmentEditorV230 #adjRefundStepbarV1:not(.hidden)) #adjustmentRouteBadgeV230{font-size:11px;padding:2px 8px}
/* 「返回異動作業首頁」demoted to a small secondary text link — toggled via a JS class (not :has()
   scope) because it sits ABOVE the page header, before #adjRefundStepbarV1 in source order, so a
   :has() selector rooted at #adjustmentEditorV230 would still work, but the explicit class keeps the
   intent obvious at the call site (setAdjRefundModeUiV1). */
.adj-refund-top-actions-v1{margin:0 0 6px}
.adj-refund-top-actions-v1 button{background:none;border:none;padding:2px 0;font-size:13px;color:#667085;text-decoration:underline;cursor:pointer}
.adj-refund-top-actions-v1 button:hover{color:var(--clinic-primary)}
/* Typography (V2): Page Title 40px — .adj-page-header-text-v1 h4 is a SHARED, unscoped base class
   (24px) reused by transfer/conversion's own page titles too, so the bump to 40px is refund-scoped
   here rather than edited on the shared rule. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-page-header-text-v1 h4{font-size:40px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-page-header-text-v1 p{font-size:14px;color:#667085}
/* Breadcrumb (spec 三) — #adjustmentBreadcrumbV230 (the app's existing breadcrumb line) lives inside
   .workspace-head-v211, which stays fully hidden for refund (established since Round 1, so the old
   "Adjustment Center" title/route badge never show). Rather than un-hide that shared block (which
   would also resurface the title/badge it was hidden to remove), a dedicated element is added to
   .adj-page-header-v1 and only given text for refund mode (setAdjRefundModeUiV1, app.js) — never a
   second breadcrumb rendering path, just a second DISPLAY location for the same "異動作業 / 退費作業"
   copy the existing header logic already derives. */
.adj-page-header-breadcrumb-v1{margin:0 0 4px;font-size:14px;color:#667085}

/* 六 (V2): 會員資訊 Card — single-row CSS Grid. .is-source already has the confirmed 淡綠背景
   (#f4fbf5/#cfe8d2 border, base rule above), reused as-is. #adjSourceStatsV1 (療程/儲值金/套餐) stays
   the SAME independent element — still populated only by queryAdjustmentCustomerV230's own wrapper,
   never re-implemented here — it is placed into the SAME visual row purely via the outer .is-source
   grid-column assignment below (column 2), while <label> (search input + #adjustmentCustomerSummaryV230)
   occupies column 1; no DOM node was moved to achieve this. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adjustment-party-card-v230{border-radius:14px;padding:20px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adjustment-party-card-v230 h5{font-size:22px;font-weight:700}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adjustment-party-card-v230.is-source{display:grid;grid-template-columns:1fr auto;column-gap:20px;align-items:center}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adjustment-party-card-v230.is-source h5{grid-column:1/-1}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adjustment-party-card-v230.is-source label{grid-column:1;min-width:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adjustment-customer-summary-v230{border:none;background:transparent;padding:0;margin-top:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjSourceStatsV1{grid-column:2;margin-top:0;padding-left:20px;border-left:1px solid #e4e7ec;display:flex;gap:24px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-cust-stat-v1{background:none;border:none;padding:0;gap:4px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-cust-stat-value-v1{font-size:20px}
.adj-refund-member-card-v1{position:relative}
.adj-refund-member-row-v1{display:grid;grid-template-columns:auto minmax(0,220px) auto repeat(3,auto);align-items:center;column-gap:20px}
.adj-refund-avatar-v1{flex:none;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid #cfe8d2;display:flex;align-items:center;justify-content:center;font-size:26px}
.adj-refund-member-id-v1{min-width:0}
.adj-refund-member-name-row-v1{display:flex;align-items:center;gap:10px}
.adj-refund-member-name-row-v1 b{font-size:22px;font-weight:700;color:#0f172a}
.adj-refund-member-meta-v1{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:13px;color:#475467}
.adj-refund-member-divider-v1{width:1px;height:40px;background:#e4e7ec}
.adj-refund-member-stat-item-v1{display:flex;flex-direction:column;gap:4px;white-space:nowrap}
.adj-refund-member-stat-item-v1 span{font-size:12px;color:#667085;font-weight:600}
.adj-refund-member-stat-item-v1 strong{font-size:20px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums}
.adj-refund-change-btn-v1{position:absolute;top:0;right:0;font-size:13px;padding:6px 12px}
/* 療程轉換作業's own member-card layout (boxed stat row) — unchanged since that round, kept here
   because renderAdjustmentSelectedCustomerV230's conversion branch still targets these classes. */
.adj-refund-member-top-v1{display:flex;align-items:flex-start;gap:16px}
.adj-refund-stat-row-v1{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.adj-refund-stat-box-v1{background:#fff;border:1px solid #e4e7ec;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.adj-refund-stat-box-v1 span{font-size:12px;color:#667085;font-weight:600}
.adj-refund-stat-box-v1 strong{font-size:20px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums}

/* 五: 退款單搜尋 — compact card row: search input (main width) + 交易日期 (fixed width) + buttons. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentRefundSearchBlockV230 h5{font-size:22px;font-weight:700}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .refund-search-row-v230{align-items:flex-end;gap:12px;flex-wrap:nowrap}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-refund-search-input-v1{flex:1 1 auto;height:40px;font-size:18px;border-radius:10px;padding:0 12px;min-width:0}
.adj-refund-search-date-field-v1{flex:0 0 220px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:#667085;font-weight:600}
.adj-refund-search-date-range-v1{display:flex;align-items:center;gap:6px;color:#98a2b3;width:220px}
.adj-refund-search-date-range-v1 input{height:40px;border-radius:10px;padding:0 8px;font-size:13px;border:1px solid #d0d5dd;width:0;flex:1 1 auto;min-width:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .refund-search-row-v230 > .clinic-btn{flex:0 0 120px;height:40px;width:120px}

/* 七 (版面修正): 主工作區改為兩列 — 三欄版面下 Table 被壓縮到 55% 寬造成欄位截斷/退款設定與摘要過窄，
   改為 Row1 全寬可退費權益列表、Row2 左(退款金額設定 3fr≈60%)／右(退款摘要 2fr≈40%，最小320px)。
   Wrapper 仍是同一個 #adjRefundWorkspaceV1（沿用既有 DOM，只改 grid-template/位置），
   #adjTrialBlockV1 維持「退款摘要下方小型明細區」(spec 十二) 的定位，改列在 Row2 右欄第二列。 */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1{
  display:grid;
  grid-template-columns:minmax(0,11fr) minmax(320px,9fr);
  gap:16px;
  align-items:start;
}
/* fr tracks default to a content-based min size (min-width:auto), so a wide child (e.g. the Fee Row's
   nowrap label+input+amount) can force its whole track to grow past its fr share, squeezing the other
   two columns. min-width:0 on every grid item makes the fr ratios hold regardless of content. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > *{min-width:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > .adj-step2-block-v1{grid-column:1/-1;grid-row:1;margin:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjustmentRefundOptionsV230{grid-column:1;grid-row:2;margin:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjRefundSummaryCardV1{grid-column:2;grid-row:2;margin:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjTrialBlockV1{grid-column:2;grid-row:3;margin:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > .adjustment-block-v230{border-radius:16px;padding:24px}
/* Spacing (V2): Section 32px — vertical rhythm between the page's major blocks (搜尋/會員與 Card/
   三欄工作區/退款原因). */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentRefundSearchBlockV230,
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentPartyGridV230,
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1{margin-bottom:32px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjReasonBlockV1{padding:24px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-step2-table-head-v1 h6{font-size:28px;font-weight:700}

/* 八 (版面修正): 可退費權益 Table — 全寬列，不得水平捲動、不得截斷欄名、不得用 ellipsis 隱藏金額數字、
   不縮小字體。table-layout:fixed 保證 Table 永遠等於容器 100% 寬度（同一招已在退費/轉換多輪驗證過：
   table-layout:auto 會讓固定寬度子元素撐開整個欄位，overflow-x:hidden 再靜默裁切）。ellipsis 僅保留在
   項目名稱／剩餘已使用（文字欄，非規格禁止的「重要數字」），原成交價/可退價值/退款數量三個金額或數量欄一律
   完整顯示、不截斷。垂直捲動維持既有 max-height 容器，避免權益筆數多時整頁過長。 */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230{min-width:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .table-wrap{min-width:0;width:100%;overflow-x:hidden;max-height:420px;overflow-y:auto;border:1px solid #eef1f5;border-radius:10px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table{table-layout:fixed;width:100%}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th{font-size:15px;font-weight:600;background:#f8fafc;height:44px;position:sticky;top:0;z-index:1;white-space:nowrap;padding:0 6px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td{font-size:16px;padding:6px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table .adj-refund-ellipsis-td-v1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td.right{font-variant-numeric:tabular-nums}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table tbody tr{height:56px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table tbody tr:hover{background:#f8fafc}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .badge-v1{font-size:13px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .adj-select-td-v1 input[type="checkbox"]{width:20px;height:20px}
/* 退款數量 Stepper — Button 36×40px／Input 64×40px（60~72px 範圍內，可完整顯示三位數以上數量不被
   裁切），僅調整尺寸，未變更 adjustRefundQtyStepV1／onRefundQtyChangeV230 既有行為。 */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .refund-stepper-v1{min-width:148px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .refund-stepper-btn-v1{width:36px;height:40px;font-size:16px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .refund-stepper-num-v1{width:64px;height:40px;font-size:15px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(1),
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(1){width:6%;text-align:center}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(2),
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(2){width:24%}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(3),
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(3){width:10%}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(4),
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(4){width:18%}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(5),
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(5){width:14%}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(6),
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(6){width:14%}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(7),
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(7){width:14%}
.badge-type-benefit-v1{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.badge-type-storage-v1{background:#ecfdf3;color:#027a48;border:1px solid #a6f4c5}
.badge-type-package-v1{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}
.refund-stepper-v1{display:flex;align-items:center;gap:4px}
.refund-stepper-btn-v1{flex:none;width:36px;height:36px;border-radius:8px;border:1px solid #d0d5dd;background:#fff;color:#344054;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.refund-stepper-btn-v1:hover:not(:disabled){border-color:#98a2b3;background:#f8fafc}
.refund-stepper-btn-v1:disabled{color:#d0d5dd;cursor:not-allowed}
/* 十九 (V2): Table Footer — 已選擇 X 筆／總可退價值 $X, a pure sum over already-rendered rows (see
   adjustmentRefundSelectedTotalV1, app.js). */
.adj-refund-table-footer-v1{display:flex;justify-content:space-between;align-items:center;padding:10px 4px 0;font-size:14px;color:#475467}
.adj-refund-table-footer-v1 strong{font-variant-numeric:tabular-nums;color:#0f172a;font-weight:700;font-size:16px;margin-left:4px}

/* 九: 退款設定 — compact Fee Row (replaces the old large standalone cards); every input/checkbox
   keeps its existing id/onchange/oninput, only the surrounding chrome and sizing changed. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentRefundOptionsV230 h5{font-size:28px;font-weight:700}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .refund-method-row-v230{grid-template-columns:1fr;gap:8px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .refund-method-title-v230{font-size:16px;font-weight:600}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .refund-method-radios-v230 label{font-size:16px}
/* 九 (Refund UI Final Polish): 退款金額設定 — 每列 4 欄 Grid：checkbox(32px)／名稱(minmax(120,1fr))／
   自動計算徽章＋覆寫 Input(200px，同列水平排列，不再直式堆疊拆成兩行)／計算金額(120px，固定靠右)。
   checkbox 為獨立 grid item（HTML 用 <label for="..."> 關聯，點擊文字仍可切換 checkbox，勾選
   id/onchange 完全未動）。列高收斂至 48~52px，避免直式堆疊造成的額外留白。 */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .refund-fee-grid-v230{gap:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-refund-fee-row-v1{
  display:grid;
  grid-template-columns:32px minmax(120px,1fr) 200px 120px;
  align-items:center;
  min-height:50px;
  padding:0;
  margin:0;
  border-radius:0;
  background:none;
  border:none;
  border-bottom:1px solid #eef2f6;
}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-refund-fee-row-v1:last-child{border-bottom:none}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-refund-fee-row-v1 .adj-refund-fee-checkbox-v1{width:18px;height:18px;margin:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-refund-fee-row-v1 .refund-fee-label-v230{font-size:16px;font-weight:600;color:#344054;white-space:normal;cursor:pointer}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-refund-fee-row-v1 .refund-fee-input-wrap-v230{flex-direction:row;align-items:center;gap:8px;min-width:0;width:100%}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-refund-fee-row-v1 .refund-fee-input-wrap-v230 input[type="number"]{height:36px;font-size:15px;border-radius:8px;width:100px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-refund-fee-row-v1 .refund-input-addon-v230{flex:0 0 auto;height:24px;line-height:1;padding:0 10px;border-radius:999px;font-size:12px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-refund-fee-row-v1 .refund-fee-live-v230{font-size:16px;min-width:0;text-align:right}

/* 十 (版面修正): 退款摘要 — Highlight Card (背景#fbfcff/radius16/padding24)，寬度隨 Row2 右欄
   minmax(320px,2fr) 至少 320px。新增 position:sticky;top:16px，Row2 左欄(退款金額設定)內容較長時
   摘要仍保持在可視範圍。行政手續費／刷卡手續費改回各自獨立一行(renderRefundSummaryPanelV230,
   app.js) — 兩個數字本來就是分開算好的 metrics.administrative/metrics.card，只是顯示方式從合併
   一行改成分開兩行，未新增/更改任何金額公式。Negative fee lines use a minus sign + #d92d20, never
   green. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundSummaryCardV1{background:#fbfcff;padding:24px;border-radius:16px;position:sticky;top:16px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundSummaryCardV1 h5{font-size:28px;font-weight:700}
.adj-refund-summary-row-v1{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:18px;color:#344054;border-bottom:1px solid #eef1f5}
.adj-refund-summary-row-v1 strong{font-variant-numeric:tabular-nums}
.adj-refund-summary-row-v1.is-deduct strong{color:#d92d20;font-weight:600}
.adj-refund-summary-divider-v1{display:none}
.adj-refund-summary-total-v1{display:flex;justify-content:space-between;align-items:center;padding-top:16px}
.adj-refund-summary-total-v1 span{font-size:18px;font-weight:600;color:#344054}
.adj-refund-summary-total-v1 strong{font-size:42px;font-weight:700;color:var(--clinic-primary);font-variant-numeric:tabular-nums;text-align:right}
.adj-refund-summary-hint-v1{margin-top:14px;padding-top:12px;border-top:1px solid #eef1f5;font-size:12px;color:#98a2b3;line-height:1.6}

/* 十二: 試算結果 card demoted to a small detail area under 退款摘要 — no big card chrome/title, own
   trigger button hidden (Footer's 重新試算, #adjustmentRefundRecalcBtnV230, is the only trigger left). */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjTrialBlockV1{border:none;padding:0;border-radius:0;background:transparent}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjTrialBlockV1 h5{display:none}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjTrialBlockV1 > .actions{display:none}
/* Same class of overflow risk as the eligible-list table above: renderRefundPreviewResultV230's
   7-column item-detail table (untouched) is far wider than the ~225px column-3 slot it now sits in —
   contained to a local scroll instead of shrinking the page-level layout or the table's own font. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentPreviewResultV230{font-size:13px;min-width:0;overflow-x:auto}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentPreviewResultV230 .table-wrap,
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentPreviewResultV230 .refund-fee-table-wrap-v230{min-width:0;overflow-x:auto}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentPreviewResultV230 table.compact-table,
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentPreviewResultV230 table.refund-fee-table-v230{font-size:12px;min-width:480px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .refund-preview-cards-v230{display:none}

/* 十一: 退款原因 — same textarea, refund-specific min-height/font-size per spec. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjReasonBlockV1{border-radius:16px;padding:20px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentReasonNoteV230{min-height:200px;font-size:18px;padding:14px;border-radius:12px;width:100%;box-sizing:border-box}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjReasonBlockV1 h5{font-size:22px;font-weight:700}
/* Chip 36px/radius18/padding18 is a V2-specific size, refund-scoped so it doesn't also resize
   transfer's/conversion's chips (.adj-reason-chip-v1 is a shared, unscoped base class). */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-reason-chip-v1{height:36px;padding:0 18px;border-radius:18px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjReasonLabelV1{font-size:0}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjReasonLabelV1::before{content:"";display:block}

/* pageMsg hidden for refund too, same reasoning as transfer's identical rule above — the footer's own
   status text is the single place trial-completion state is shown. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjustmentPageMsgV230{display:none}

/* Footer (V2): 左(取消作業)／中(狀態)／右(按鈕) 三欄 — the SAME .adj-transfer-footer-v1
   justify-content:space-between already spaces 3 direct children apart automatically now that
   #adjRefundFooterStatusV1 is a sibling of the left/right groups instead of nested inside the left
   one; only the status block's own internal layout (horizontal row + checkmark icon) is refund-scoped,
   transfer/refund's own left-paired stacked status text is untouched. */
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundFooterStatusV1{flex-direction:row;align-items:center;gap:10px;font-size:16px}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundFooterStatusMainV1{font-weight:700;color:#0f172a}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundFooterStatusSubV1{color:#475467;display:flex;gap:16px}
.adj-refund-footer-status-icon-v1{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;background:#ecfdf3;color:#12b76a;font-size:13px;font-weight:700}
#adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) .adj-transfer-footer-v1 button{font-size:16px}

@media(max-width:980px){
  #adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1{grid-template-columns:1fr}
  #adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > .adj-step2-block-v1{grid-column:1;grid-row:1}
  #adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjustmentRefundOptionsV230{grid-column:1;grid-row:2}
  #adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjRefundSummaryCardV1{grid-column:1;grid-row:3;position:static}
  #adjustmentEditorV230:has(#adjRefundStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjTrialBlockV1{grid-column:1;grid-row:4}
  .adj-refund-stat-row-v1{grid-template-columns:1fr}
  .adj-refund-search-date-range-v1{flex-wrap:wrap}
}

/* ===== 療程轉換作業 UI 重構 (依確認稿). Reuses #adjRefundWorkspaceV1 (the SAME wrapper element
   already added around .adj-step2-block-v1/#adjustmentRefundOptionsV230/#adjTrialBlockV1 for 退費作業)
   plus the new #adjConversionSettingsCardV1 middle card — for conversion mode only different
   grid-column assignments are applied, so no new wrapper element or duplicated structure was needed.
   Reuses .adj-page-header-v1/.adj-transfer-stepbar-v1/.clinic-btn*/.adj-reason-chips-v1/
   .adj-transfer-footer-v1/.adj-select-th-v1/.adj-row-selected-v1/.badge-v1/.badge-type-*/
   .refund-stepper-v1/.adj-refund-member-card-v1 — every one of these classes was already built for
   權益轉移/退費作業, not a second design system. Page header, step bar, reason chips, and footer
   chrome need NO new CSS at all (never :has()-scoped to begin with). ===== */
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adjustment-center-panel-v230,
.adjustment-center-panel-v230:has(#adjustmentEditorV230 #adjConversionStepbarV1:not(.hidden)){padding-bottom:96px}
.adjustment-center-panel-v230:has(#adjustmentEditorV230 #adjConversionStepbarV1:not(.hidden)) > .workspace-head-v211{display:none}
.adjustment-center-panel-v230:has(#adjustmentEditorV230 #adjConversionStepbarV1:not(.hidden)) #adjustmentRouteBadgeV230{font-size:11px;padding:2px 8px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEditorTopActionsV1{margin:0 0 6px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEditorTopActionsV1 button{background:none;border:none;padding:2px 0;font-size:13px;color:#667085;text-decoration:underline;cursor:pointer}

/* 五/六: 來源會員／轉換目標療程 Card 並排 + 44px 圓形箭頭（比 retund/transfer 用的純文字箭頭更明顯）。 */
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adjustment-party-card-v230{border-radius:14px;padding:20px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adjustment-party-card-v230 h5{font-size:16px;font-weight:700}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adjustment-party-grid-v230{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjTransferArrowV1{width:44px;height:44px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto;align-self:center}
.adj-conversion-card-head-v1{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.adj-conversion-card-head-v1 h5{margin:0}
.adj-conversion-selected-icon-v1{flex:none;width:24px;height:24px;border-radius:50%;background:#12b76a;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentCustomerSummaryV230{border:none;background:transparent;padding:0;margin-top:10px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjSourceStatsV1{margin-top:16px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adj-cust-stat-value-v1{font-size:20px}

/* 六: 轉換目標療程 Card content — rendered by renderConversionTargetConfiguratorV230 (app.js). */
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adjustment-party-card-v230.is-target{position:relative}
.adj-conv-change-target-btn-v1{position:absolute;top:20px;right:20px;font-size:13px;padding:6px 12px}
.adj-conv-target-empty-v1{padding:40px 12px;text-align:center}
.adj-conv-target-empty-title-v1{font-size:16px;font-weight:700;color:#344054}
.adj-conv-target-empty-hint-v1{margin-top:6px;font-size:14px;color:#667085}
.adj-conv-target-primary-v1{display:flex;align-items:flex-start;gap:14px;padding-top:36px}
.adj-conv-target-icon-v1{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #ddd6fe;display:flex;align-items:center;justify-content:center;font-size:20px;color:#6d28d9}
.adj-conv-target-info-v1{flex:1 1 auto;min-width:0}
.adj-conv-target-name-row-v1{display:flex;align-items:center;gap:10px}
.adj-conv-target-name-row-v1 b{font-size:20px;font-weight:700;color:#0f172a}
.adj-conv-target-meta-v1{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:13px;color:#475467}
.adj-conv-target-qty-v1{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.adj-conv-target-qty-v1>span{font-size:12px;color:#667085;font-weight:600}
.adj-conv-target-extra-v1{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.adj-conv-target-extra-line-v1{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;padding:8px 10px}
.adj-conv-target-extra-name-v1{flex:1 1 auto;min-width:0;font-size:14px;color:#344054}
.adj-conv-target-extra-input-v1{width:64px;height:32px;border-radius:8px;border:1px solid #d0d5dd;text-align:center}
.adj-conv-target-remove-v1{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid #fecaca;background:#fff;color:#dc2626;cursor:pointer}
.adj-conv-target-search-v1{margin-top:14px;padding-top:14px;border-top:1px solid #eef1f5}
.adj-conv-target-search-v1 input[type="text"]{width:100%;height:40px;font-size:16px;border-radius:10px;padding:0 12px;box-sizing:border-box}

/* 八 (版面調整後): 主工作區改為兩列 — Row1 = 來源權益列表(2fr) + 轉換設定(minmax(320px,1fr))，
   Row2 = 即時預覽結果 橫跨兩欄整列。reuses #adjRefundWorkspaceV1, different grid-column/row
   placement than 退費作業's own use of the same wrapper. min-width:0 on every grid item avoids the
   exact overflow bug already fixed for 退費作業 (a wide child forcing its whole track past its fr
   share and squeezing the other columns). */
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(320px,1fr);
  gap:16px;
  align-items:start;
}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > *{min-width:0}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > .adj-step2-block-v1{grid-column:1;grid-row:1;margin:0}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjConversionSettingsCardV1{grid-column:2;grid-row:1;margin:0}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjTrialBlockV1{grid-column:1/-1;grid-row:2;margin:0}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > .adjustment-block-v230{border-radius:16px;padding:20px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adj-step2-table-head-v1 h6{font-size:18px}

/* 九 (版面調整後): 可轉換來源權益 — 搜尋/類型篩選 toolbar + checkbox-only Table (no per-row stepper;
   the Stepper lives in 轉換設定, spec 十). table-layout:fixed + 精確百分比欄寬保證 Table 永遠等於
   容器 100% 寬度、絕不超版（同一招已在退費作業 V2 驗證過：table-layout:auto 會讓固定寬度的子元素
   撐開整個欄位並被 overflow-x:hidden 靜默裁切）；移除舊有 overflow-x:auto + min-width:560px（那是
   舊三欄版面下的水平捲軸退路，本次二欄版面下改為 100% 寬度緊貼容器、不需要也不允許再出現水平捲軸）。
   長文字欄位改用 ellipsis + title 屬性截斷，字級不縮小。 */
.adj-conversion-toolbar-v1{display:flex;gap:10px;margin-bottom:10px}
.adj-conversion-search-input-v1{flex:1 1 auto;height:40px;font-size:15px;border-radius:10px;padding:0 12px;min-width:0}
.adj-conversion-type-filter-v1{flex:0 0 auto;height:40px;font-size:15px;border-radius:10px;padding:0 10px;border:1px solid #d0d5dd;background:#fff}
.adj-conversion-filter-icon-btn-v1{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid #d0d5dd;background:#fff;color:#344054;font-size:16px;cursor:pointer}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230{min-width:0}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .table-wrap{overflow-x:hidden;min-width:0;width:100%}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table{table-layout:fixed;width:100%}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th{font-size:15px;font-weight:600;background:#f8fafc;height:44px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td{font-size:16px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table tbody tr{height:54px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table tbody tr:hover{background:#f8fafc}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 .badge-v1{font-size:13px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(1),
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(1){width:7%;text-align:center}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(2),
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(2){width:29%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(3),
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(3){width:13%}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(4),
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(4){width:20%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(5),
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(5){width:14%}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th:nth-child(6),
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td:nth-child(6){width:17%}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table td.right,
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentEligibleListV230 table.compact-table th.right{font-variant-numeric:tabular-nums}

/* 十: 轉換設定 middle card. */
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjConversionSettingsCardV1 h5{font-size:16px;font-weight:700}
.adj-conv-settings-section-v1{margin-bottom:16px}
.adj-conv-settings-section-v1:last-child{margin-bottom:0}
.adj-conv-settings-section-v1 h6{margin:0 0 8px;font-size:13px;font-weight:600;color:#667085;text-transform:none}
.adj-conv-source-name-v1{font-size:15px;font-weight:600;color:#0f172a;display:flex;align-items:center;justify-content:space-between;gap:8px}
.adj-conv-source-remain-v1{font-size:13px;font-weight:600;color:#667085;white-space:nowrap}
.adj-conv-avail-v1{margin-top:8px;font-size:13px;color:#667085}
.adj-conv-source-extra-v1{margin-top:10px;display:flex;flex-direction:column;gap:10px;padding-top:10px;border-top:1px dashed #e4e7ec}
.adj-conv-source-line-v1{display:flex;flex-direction:column;gap:6px}
.adj-conv-target-line-v1{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:#344054;padding:4px 0}
.adj-conv-target-increase-v1{color:#12b76a;font-weight:700}

/* 十一/十二 (版面調整後): 即時預覽結果 — 移至獨立整列 Card，內部三區塊改用 Grid 並排（單目標
   1fr 1fr 1fr／多目標 30% 40% 30%），來源=淡橘、目標=淡綠、價值=中性，無漸層。 */
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjTrialBlockV1 h5{font-size:16px;font-weight:700;display:block}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjTrialBlockV1 > .actions{display:none}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentPreviewResultV230{min-width:0}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adj-conv-preview-blocks-v1{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adj-conv-preview-blocks-v1.is-multi-target{grid-template-columns:30% 40% 30%}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adj-conv-preview-blocks-v1 > *{min-width:0}
.adj-conv-preview-block-v1{border-radius:12px;padding:16px;height:100%;box-sizing:border-box}
.adj-conv-preview-block-v1 h6{margin:0 0 10px;font-size:13px;font-weight:600;color:#475467}
.adj-conv-preview-block-v1.is-source-block{background:#fffaf0;border:1px solid #fde8c8}
.adj-conv-preview-block-v1.is-target-block{background:#ecfdf3;border:1px solid #c7f0da}
.adj-conv-preview-block-v1.is-value-block{background:#f8fafc;border:1px solid #e4e7ec}
.adj-conv-change-row-v1{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:6px 0;font-size:14px}
.adj-conv-change-row-v1+.adj-conv-change-row-v1{border-top:1px dashed #e4e7ec}
.adj-conv-change-name-v1{font-weight:600;color:#0f172a;flex:1 1 100%}
.adj-conv-change-flow-v1{color:#475467;font-variant-numeric:tabular-nums}
.adj-conv-change-arrow-v1{margin:0 6px;color:#98a2b3}
.adj-conv-change-delta-v1{font-weight:700;font-variant-numeric:tabular-nums}
.adj-conv-change-delta-v1.is-decrease{color:#dc2626}
.adj-conv-change-delta-v1.is-increase{color:#12b76a}
.adj-conv-change-value-v1{flex:1 1 100%;font-size:13px;color:#475467}
.adj-conv-change-value-v1 b{color:#0f172a;font-variant-numeric:tabular-nums}
.adj-conv-value-row-v1{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:14px;color:#344054}
.adj-conv-value-row-v1 strong{font-variant-numeric:tabular-nums}
.adj-conv-value-divider-v1{border-top:1px solid #e4e7ec;margin:8px 0}
.adj-conv-value-row-v1.is-total strong{font-size:20px;font-weight:700}
.adj-conv-value-row-v1.is-total strong.is-owed{color:#d92d20}
.adj-conv-preview-hint-v1{margin-top:10px;font-size:12px;color:#98a2b3}

/* 十三: 轉換原因 — same textarea, conversion-specific min-height/font-size. */
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjReasonBlockV1{border-radius:16px;padding:20px}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentReasonNoteV230{min-height:96px;font-size:16px;padding:14px;border-radius:12px;width:100%;box-sizing:border-box}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjReasonLabelV1{font-size:0}
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjReasonLabelV1::before{content:"";display:block}

/* pageMsg hidden for conversion too — same reasoning as transfer/退費's identical rule. */
#adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjustmentPageMsgV230{display:none}

@media(max-width:980px){
  #adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) .adjustment-party-grid-v230{grid-template-columns:1fr}
  #adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjTransferArrowV1{transform:rotate(90deg)}
  #adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1{grid-template-columns:1fr}
  #adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > .adj-step2-block-v1{grid-column:1;grid-row:1}
  #adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjConversionSettingsCardV1{grid-column:1;grid-row:2}
  #adjustmentEditorV230:has(#adjConversionStepbarV1:not(.hidden)) #adjRefundWorkspaceV1 > #adjTrialBlockV1{grid-column:1/-1;grid-row:3}
  .adj-conversion-toolbar-v1{flex-wrap:wrap}
}
.daily-table th,.daily-table td{border:1px solid #d0d5dd;padding:7px 8px}
.daily-table tfoot td{background:#f9fafb;font-weight:800}
.daily-table.small{max-width:900px}
.right{text-align:right}
.daily-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.daily-summary-grid div{border:1px solid #d0d5dd;border-radius:10px;padding:10px;background:#fff}
.daily-note{border:1px solid #d0d5dd;border-radius:10px;min-height:48px;padding:10px;margin:12px 0;background:#fff}

/* ===== V2.6.0 日結帳報表重構 — 全部規則 scoped 於 #dailyReportPanel，不影響其他報表分頁
   （月報/銷售業績/消耗業績/來源產值/新客未成交 仍使用上面既有的 .daily-table 等既有 class）。===== */
#dailyReportPanel.daily-report-panel-v260{background:transparent;box-shadow:none;padding:0;margin:0;border-radius:0}
#dailyReportPanel .daily-header-v260{display:flex;align-items:flex-start;justify-content:space-between;margin:0 0 14px}
#dailyReportPanel .daily-header-title-v260{font-size:27px;font-weight:700;color:#0f172a;margin:0 0 6px}
#dailyReportPanel .daily-header-sub-v260{display:flex;align-items:center;gap:10px;font-size:14px;color:#667085;font-weight:600}
#dailyReportPanel .daily-status-badge-v260{font-size:13px;padding:4px 12px;border-radius:999px;font-weight:700;white-space:nowrap}
#dailyReportPanel .daily-status-badge-v260.open{background:#ecfdf3;color:#027a48}
#dailyReportPanel .daily-status-badge-v260.closed{background:#eef4ff;color:#1e3a8a}

#dailyReportPanel .daily-toolbar-v260{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e4e9f1;border-radius:12px;padding:12px 16px;margin-bottom:16px}
#dailyReportPanel .daily-toolbar-left-v260,#dailyReportPanel .daily-toolbar-right-v260{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#dailyReportPanel .daily-date-input-v260{height:40px;border-radius:10px;padding:0 12px;font-size:14px}
/* .daily-btn-v260/.daily-btn-primary-v260/.daily-card-v260/.daily-block-title-v260 重用給
   #newCustomerNoSaleReportPanel（同 .daily-kpi-card-v260 等既有的多 Panel 共用模式，只是加寬選擇器，
   不影響 #dailyReportPanel 或任何其他既有 Panel 的既有樣式）。 */
#dailyReportPanel .daily-btn-v260,#newCustomerNoSaleReportPanel .daily-btn-v260{height:40px;padding:0 16px;border-radius:10px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
#dailyReportPanel .daily-btn-v260:hover,#newCustomerNoSaleReportPanel .daily-btn-v260:hover{border-color:#93c5fd;background:#f8fafc}
#dailyReportPanel .daily-btn-blue-v260{background:#fff;border-color:#93c5fd;color:#1d4ed8}
#dailyReportPanel .daily-btn-blue-v260:hover{background:#eef4ff}
#dailyReportPanel .daily-btn-primary-v260,#newCustomerNoSaleReportPanel .daily-btn-primary-v260{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
#dailyReportPanel .daily-btn-primary-v260:hover,#newCustomerNoSaleReportPanel .daily-btn-primary-v260:hover{background:#1741b8}
#dailyReportPanel .daily-btn-primary-v260:disabled,#newCustomerNoSaleReportPanel .daily-btn-primary-v260:disabled{background:#e5e7eb;border-color:#e5e7eb;color:#98a2b3;cursor:not-allowed}

#dailyReportPanel .daily-block-title-v260,#newCustomerNoSaleReportPanel .daily-block-title-v260{font-size:19px;font-weight:700;color:#0f172a;margin:0 0 12px}
#dailyReportPanel .daily-card-v260,#newCustomerNoSaleReportPanel .daily-card-v260{background:#fff;border:1px solid #e4e9f1;border-radius:12px;padding:18px}
#dailyReportPanel .daily-link-v260{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:#1d4ed8;text-decoration:none;cursor:pointer}
#dailyReportPanel .daily-link-v260:hover{text-decoration:underline}

/* daily-kpi-* / daily-pay-card-* / daily-rank-table-* / daily-tx-* 這幾組 class 由 V2.7.0
   月營收統計表 + 產品銷售分析 Drill Down + V3.0.0 業務績效分析重用（見 #monthlyReportPanel /
   #productDrilldownV270 / #salesPerformanceReportPanel），選擇器加寬到多個容器，屬同一份共用元件
   CSS，不是第二套。 */
/* V4 W2：報表 Panel 的 KPI 卡外觀改由共用 .cos-kpi 提供（圖示置頂→標籤→數值→delta，
   與已遷移的每日工作台同一節奏）；行銷活動尚未遷移，維持原本的橫向卡片。 */
#marketingCampaignPanelV230 .daily-kpi-card-v260{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid #e4e9f1;border-radius:12px;padding:16px;min-height:104px}

/* ==========================================================================
   V4 W2 — 報表中心 KPI 列的欄數
   --------------------------------------------------------------------------
   卡片外觀（底色／框線／圓角／內距／字級）一律由共用的 .cos-kpi 提供，這裡只指定欄數。
   原因：.cos-kpi-row 的 auto-fit minmax(200px,1fr) 在 1440px 只排得下 5 欄，
   但報表的指標列是固定張數（經營摘要 6／收款方式 6／耗療 8／業務與來源 4），
   auto-fit 會產生 5+1 的孤兒卡。各報表依自己的指標數量指定欄數即可對齊。
   全部只使用 V4 唯一的強制斷點 900px —— 遷移前這幾個列散落在 640／760／1199／1299px。
   ========================================================================== */
#dailyReportPanel .daily-kpi-grid-v260,
#dailyReportPanel .daily-pay-grid-v260,
#monthlyReportPanel .monthly-kpi-grid-v270,
#monthlyReportPanel .monthly-pay-grid-v270{grid-template-columns:repeat(6,minmax(0,1fr))}
#salesPerformanceReportPanel .sp-kpi-grid-v300,
#usagePerformanceReportPanel .up-kpi-grid-v400,
#sourceValueReportPanel .monthly-kpi-grid-v270,
.sv-drawer-kpi-grid-v500,
.pdd-summary-grid-v270{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-drawer-kpi-grid-v300{grid-template-columns:repeat(3,minmax(0,1fr))}
#dailyReportPanel .daily-mini-kpi-grid-v260,
#monthlyReportPanel .monthly-forecast-kpi-grid-v290{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Drawer 內的摘要列沿用 Drawer 自己的左右內距（原 .pdd-summary-grid-v270 的一部分）。 */
.pdd-summary-grid-v270{padding:14px 24px}
@media(max-width:900px){
  #dailyReportPanel .daily-kpi-grid-v260,
  #dailyReportPanel .daily-pay-grid-v260,
  #monthlyReportPanel .monthly-kpi-grid-v270,
  #monthlyReportPanel .monthly-pay-grid-v270,
  #salesPerformanceReportPanel .sp-kpi-grid-v300,
  #usagePerformanceReportPanel .up-kpi-grid-v400,
  #sourceValueReportPanel .monthly-kpi-grid-v270,
  .sv-drawer-kpi-grid-v500,
  .sp-drawer-kpi-grid-v300,
  .pdd-summary-grid-v270{grid-template-columns:repeat(2,minmax(0,1fr))}
  #dailyReportPanel .daily-mini-kpi-grid-v260,
  #monthlyReportPanel .monthly-forecast-kpi-grid-v290{grid-template-columns:minmax(0,1fr)}
}
#dailyReportPanel .daily-kpi-icon-v260,#monthlyReportPanel .daily-kpi-icon-v260,#salesPerformanceReportPanel .daily-kpi-icon-v260,#usagePerformanceReportPanel .daily-kpi-icon-v260,#sourceValueReportPanel .daily-kpi-icon-v260,#marketingCampaignPanelV230 .daily-kpi-icon-v260{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px}
#dailyReportPanel .daily-kpi-icon-v260.blue,#monthlyReportPanel .daily-kpi-icon-v260.blue,#salesPerformanceReportPanel .daily-kpi-icon-v260.blue,#usagePerformanceReportPanel .daily-kpi-icon-v260.blue,#sourceValueReportPanel .daily-kpi-icon-v260.blue,#marketingCampaignPanelV230 .daily-kpi-icon-v260.blue{background:#eef4ff;color:#1d4ed8}
#dailyReportPanel .daily-kpi-icon-v260.green,#monthlyReportPanel .daily-kpi-icon-v260.green,#salesPerformanceReportPanel .daily-kpi-icon-v260.green,#usagePerformanceReportPanel .daily-kpi-icon-v260.green,#sourceValueReportPanel .daily-kpi-icon-v260.green,#marketingCampaignPanelV230 .daily-kpi-icon-v260.green{background:#ecfdf3;color:#027a48}
#dailyReportPanel .daily-kpi-icon-v260.orange,#monthlyReportPanel .daily-kpi-icon-v260.orange,#salesPerformanceReportPanel .daily-kpi-icon-v260.orange,#usagePerformanceReportPanel .daily-kpi-icon-v260.orange,#sourceValueReportPanel .daily-kpi-icon-v260.orange,#marketingCampaignPanelV230 .daily-kpi-icon-v260.orange{background:#fff4e5;color:#b54708}
#dailyReportPanel .daily-kpi-icon-v260.purple,#monthlyReportPanel .daily-kpi-icon-v260.purple,#salesPerformanceReportPanel .daily-kpi-icon-v260.purple,#usagePerformanceReportPanel .daily-kpi-icon-v260.purple,#sourceValueReportPanel .daily-kpi-icon-v260.purple,#marketingCampaignPanelV230 .daily-kpi-icon-v260.purple{background:#f4f3ff;color:#6938ef}
#dailyReportPanel .daily-kpi-icon-v260.teal,#monthlyReportPanel .daily-kpi-icon-v260.teal,#salesPerformanceReportPanel .daily-kpi-icon-v260.teal,#usagePerformanceReportPanel .daily-kpi-icon-v260.teal,#sourceValueReportPanel .daily-kpi-icon-v260.teal,#marketingCampaignPanelV230 .daily-kpi-icon-v260.teal{background:#e6fbf5;color:#0e9384}
#dailyReportPanel .daily-kpi-icon-v260.pink,#monthlyReportPanel .daily-kpi-icon-v260.pink,#salesPerformanceReportPanel .daily-kpi-icon-v260.pink,#usagePerformanceReportPanel .daily-kpi-icon-v260.pink,#sourceValueReportPanel .daily-kpi-icon-v260.pink,#marketingCampaignPanelV230 .daily-kpi-icon-v260.pink{background:#fdf2fa;color:#c11574}
#dailyReportPanel .daily-kpi-body-v260,#monthlyReportPanel .daily-kpi-body-v260,#salesPerformanceReportPanel .daily-kpi-body-v260,#usagePerformanceReportPanel .daily-kpi-body-v260,#sourceValueReportPanel .daily-kpi-body-v260,#marketingCampaignPanelV230 .daily-kpi-body-v260{min-width:0}
#dailyReportPanel .daily-kpi-label-v260,#monthlyReportPanel .daily-kpi-label-v260,#salesPerformanceReportPanel .daily-kpi-label-v260,#usagePerformanceReportPanel .daily-kpi-label-v260,#sourceValueReportPanel .daily-kpi-label-v260,#marketingCampaignPanelV230 .daily-kpi-label-v260{font-size:13px;font-weight:600;color:#667085;white-space:nowrap}
#dailyReportPanel .daily-kpi-value-v260,#monthlyReportPanel .daily-kpi-value-v260,#salesPerformanceReportPanel .daily-kpi-value-v260,#usagePerformanceReportPanel .daily-kpi-value-v260,#sourceValueReportPanel .daily-kpi-value-v260,#marketingCampaignPanelV230 .daily-kpi-value-v260{font-size:24px;font-weight:700;color:#0f172a;line-height:1.3;margin-top:2px;white-space:nowrap}
#dailyReportPanel .daily-kpi-delta-v260,#monthlyReportPanel .daily-kpi-delta-v260,#salesPerformanceReportPanel .daily-kpi-delta-v260,#usagePerformanceReportPanel .daily-kpi-delta-v260,#sourceValueReportPanel .daily-kpi-delta-v260,#marketingCampaignPanelV230 .daily-kpi-delta-v260{display:block;font-size:12px;font-weight:600;margin-top:4px;white-space:nowrap}
#dailyReportPanel .daily-kpi-delta-v260.up,#monthlyReportPanel .daily-kpi-delta-v260.up,#salesPerformanceReportPanel .daily-kpi-delta-v260.up,#usagePerformanceReportPanel .daily-kpi-delta-v260.up,#sourceValueReportPanel .daily-kpi-delta-v260.up,#marketingCampaignPanelV230 .daily-kpi-delta-v260.up{color:#027a48}
#dailyReportPanel .daily-kpi-delta-v260.down,#monthlyReportPanel .daily-kpi-delta-v260.down,#salesPerformanceReportPanel .daily-kpi-delta-v260.down,#usagePerformanceReportPanel .daily-kpi-delta-v260.down,#sourceValueReportPanel .daily-kpi-delta-v260.down,#marketingCampaignPanelV230 .daily-kpi-delta-v260.down{color:#b42318}
#dailyReportPanel .daily-kpi-delta-v260.flat,#monthlyReportPanel .daily-kpi-delta-v260.flat,#salesPerformanceReportPanel .daily-kpi-delta-v260.flat,#usagePerformanceReportPanel .daily-kpi-delta-v260.flat,#sourceValueReportPanel .daily-kpi-delta-v260.flat,#marketingCampaignPanelV230 .daily-kpi-delta-v260.flat{color:#98a2b3}

#dailyReportPanel .daily-pay-head-v260{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#dailyReportPanel .daily-pay-head-v260 .daily-block-title-v260{margin:0}
#dailyReportPanel .daily-pay-head-v260 .daily-link-v260{margin-top:0}
#dailyReportPanel .daily-pay-name-v260,#monthlyReportPanel .daily-pay-name-v260{font-size:13px;font-weight:600;color:#667085}
#dailyReportPanel .daily-pay-amount-v260,#monthlyReportPanel .daily-pay-amount-v260{font-size:20px;font-weight:700;color:#0f172a;margin-top:4px}
#dailyReportPanel .daily-pay-pct-v260,#monthlyReportPanel .daily-pay-pct-v260{font-size:12px;color:#98a2b3;margin-top:2px}

#dailyReportPanel .daily-two-col-v260{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;margin-bottom:20px;align-items:stretch}
#dailyReportPanel .daily-two-col-v260 .daily-card-v260{display:flex;flex-direction:column}

#dailyReportPanel .daily-note-body-v260{font-size:14px;color:#344054;line-height:1.6}
#dailyReportPanel .daily-mini-kpi-label-v260{font-size:12px;color:#667085;font-weight:600}
#dailyReportPanel .daily-mini-kpi-value-v260{font-size:20px;font-weight:700;color:#0f172a;margin-top:4px}

#dailyReportPanel .daily-rank-table-v260,#monthlyReportPanel .daily-rank-table-v260,#productDrilldownV270 .daily-rank-table-v260,#salesPerformanceReportPanel .daily-rank-table-v260,#spStaffDrawerV300 .daily-rank-table-v260,#usagePerformanceReportPanel .daily-rank-table-v260,#sourceValueReportPanel .daily-rank-table-v260,#upStaffDrawerV400 .daily-rank-table-v260,#svDrawerV500 .daily-rank-table-v260,#marketingCampaignPanelV230 .daily-rank-table-v260{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
#dailyReportPanel .daily-rank-table-v260 th,#monthlyReportPanel .daily-rank-table-v260 th,#productDrilldownV270 .daily-rank-table-v260 th,#salesPerformanceReportPanel .daily-rank-table-v260 th,#spStaffDrawerV300 .daily-rank-table-v260 th,#usagePerformanceReportPanel .daily-rank-table-v260 th,#sourceValueReportPanel .daily-rank-table-v260 th,#upStaffDrawerV400 .daily-rank-table-v260 th,#svDrawerV500 .daily-rank-table-v260 th,#marketingCampaignPanelV230 .daily-rank-table-v260 th{background:#eef1f7;color:#344054;font-weight:600;text-align:left;padding:10px 10px;white-space:nowrap}
#dailyReportPanel .daily-rank-table-v260 td,#monthlyReportPanel .daily-rank-table-v260 td,#productDrilldownV270 .daily-rank-table-v260 td,#salesPerformanceReportPanel .daily-rank-table-v260 td,#spStaffDrawerV300 .daily-rank-table-v260 td,#usagePerformanceReportPanel .daily-rank-table-v260 td,#sourceValueReportPanel .daily-rank-table-v260 td,#upStaffDrawerV400 .daily-rank-table-v260 td,#svDrawerV500 .daily-rank-table-v260 td,#marketingCampaignPanelV230 .daily-rank-table-v260 td{padding:10px 10px;border-bottom:1px solid #eef1f5}
#dailyReportPanel .daily-rank-table-v260 th.right,#dailyReportPanel .daily-rank-table-v260 td.right,#monthlyReportPanel .daily-rank-table-v260 th.right,#monthlyReportPanel .daily-rank-table-v260 td.right,#productDrilldownV270 .daily-rank-table-v260 th.right,#productDrilldownV270 .daily-rank-table-v260 td.right,#salesPerformanceReportPanel .daily-rank-table-v260 th.right,#salesPerformanceReportPanel .daily-rank-table-v260 td.right,#spStaffDrawerV300 .daily-rank-table-v260 th.right,#spStaffDrawerV300 .daily-rank-table-v260 td.right,#usagePerformanceReportPanel .daily-rank-table-v260 th.right,#sourceValueReportPanel .daily-rank-table-v260 th.right,#usagePerformanceReportPanel .daily-rank-table-v260 td.right,#sourceValueReportPanel .daily-rank-table-v260 td.right,#upStaffDrawerV400 .daily-rank-table-v260 th.right,#svDrawerV500 .daily-rank-table-v260 th.right,#upStaffDrawerV400 .daily-rank-table-v260 td.right,#svDrawerV500 .daily-rank-table-v260 td.right,#marketingCampaignPanelV230 .daily-rank-table-v260 th.right,#marketingCampaignPanelV230 .daily-rank-table-v260 td.right{text-align:right;font-variant-numeric:tabular-nums}
#dailyReportPanel .daily-rank-table-v260 tr.daily-rank-first-v260,#monthlyReportPanel .daily-rank-table-v260 tr.daily-rank-first-v260,#salesPerformanceReportPanel .daily-rank-table-v260 tr.daily-rank-first-v260,#spStaffDrawerV300 .daily-rank-table-v260 tr.daily-rank-first-v260,#usagePerformanceReportPanel .daily-rank-table-v260 tr.daily-rank-first-v260,#sourceValueReportPanel .daily-rank-table-v260 tr.daily-rank-first-v260,#upStaffDrawerV400 .daily-rank-table-v260 tr.daily-rank-first-v260,#svDrawerV500 .daily-rank-table-v260 tr.daily-rank-first-v260{background:#f8fafc;font-weight:700}
#dailyReportPanel .daily-rank-table-v260 tr.daily-total-row-v260,#monthlyReportPanel .daily-rank-table-v260 tr.daily-total-row-v260,#productDrilldownV270 .daily-rank-table-v260 tr.daily-total-row-v260,#salesPerformanceReportPanel .daily-rank-table-v260 tr.daily-total-row-v260,#spStaffDrawerV300 .daily-rank-table-v260 tr.daily-total-row-v260,#usagePerformanceReportPanel .daily-rank-table-v260 tr.daily-total-row-v260,#sourceValueReportPanel .daily-rank-table-v260 tr.daily-total-row-v260,#upStaffDrawerV400 .daily-rank-table-v260 tr.daily-total-row-v260,#svDrawerV500 .daily-rank-table-v260 tr.daily-total-row-v260{font-weight:700;background:#f8fafc}
#dailyReportPanel .daily-rate-good-v260{color:#027a48}
#dailyReportPanel .daily-rate-mid-v260{color:#1d4ed8}
#dailyReportPanel .daily-rate-bad-v260{color:#b42318}

#dailyReportPanel .daily-newold-wrap-v260{display:flex;gap:20px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
#dailyReportPanel .daily-donut-wrap-v260{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px}
#dailyReportPanel .daily-donut-v260{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#dailyReportPanel .daily-donut-hole-v260{width:60px;height:60px;border-radius:50%;background:#fff}
#dailyReportPanel .daily-donut-legend-v260{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#344054}
#dailyReportPanel .daily-legend-dot-v260{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
#dailyReportPanel .daily-legend-dot-v260.blue{background:#1d4ed8}
#dailyReportPanel .daily-legend-dot-v260.green{background:#12b76a}
#dailyReportPanel .daily-newold-table-v260{flex:1 1 220px;min-width:220px}

#dailyReportPanel .daily-tx-head-v260,#monthlyReportPanel .daily-tx-head-v260{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#dailyReportPanel .daily-tx-head-v260 .daily-block-title-v260{margin:0}
#dailyReportPanel .daily-tx-toggle-v260,#monthlyReportPanel .daily-tx-toggle-v260{height:36px;padding:0 14px;border-radius:10px;background:#f3f4f6;border:1px solid #e5e7eb;color:#344054;font-weight:600;font-size:13px;cursor:pointer}
#dailyReportPanel .daily-tx-toggle-v260:hover,#monthlyReportPanel .daily-tx-toggle-v260:hover{background:#e8eaed}
#dailyReportPanel .daily-tx-scroll-v260,#monthlyReportPanel .daily-tx-scroll-v260,#productDrilldownV270 .daily-tx-scroll-v260,#salesPerformanceReportPanel .daily-tx-scroll-v260,#spTxDrawerV300 .daily-tx-scroll-v260,#usagePerformanceReportPanel .daily-tx-scroll-v260,#sourceValueReportPanel .daily-tx-scroll-v260,#upTxDrawerV400 .daily-tx-scroll-v260,#svTxDrawerV500 .daily-tx-scroll-v260,#marketingCampaignPanelV230 .daily-tx-scroll-v260,#settingPanelEmployees .daily-tx-scroll-v260{overflow-x:auto}
#dailyReportPanel .daily-tx-table-v260,#monthlyReportPanel .daily-tx-table-v260,#productDrilldownV270 .daily-tx-table-v260,#salesPerformanceReportPanel .daily-tx-table-v260,#spTxDrawerV300 .daily-tx-table-v260,#usagePerformanceReportPanel .daily-tx-table-v260,#sourceValueReportPanel .daily-tx-table-v260,#upTxDrawerV400 .daily-tx-table-v260,#svTxDrawerV500 .daily-tx-table-v260{width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden;border:1px solid #e4e9f1;font-size:14px}
#dailyReportPanel .daily-tx-table-v260 th,#monthlyReportPanel .daily-tx-table-v260 th,#productDrilldownV270 .daily-tx-table-v260 th,#salesPerformanceReportPanel .daily-tx-table-v260 th,#spTxDrawerV300 .daily-tx-table-v260 th,#usagePerformanceReportPanel .daily-tx-table-v260 th,#sourceValueReportPanel .daily-tx-table-v260 th,#upTxDrawerV400 .daily-tx-table-v260 th,#svTxDrawerV500 .daily-tx-table-v260 th{background:#eef1f7;color:#344054;font-weight:600;text-align:left;padding:10px 10px;white-space:nowrap}
#dailyReportPanel .daily-tx-table-v260 td,#monthlyReportPanel .daily-tx-table-v260 td,#productDrilldownV270 .daily-tx-table-v260 td,#salesPerformanceReportPanel .daily-tx-table-v260 td,#spTxDrawerV300 .daily-tx-table-v260 td,#usagePerformanceReportPanel .daily-tx-table-v260 td,#sourceValueReportPanel .daily-tx-table-v260 td,#upTxDrawerV400 .daily-tx-table-v260 td,#svTxDrawerV500 .daily-tx-table-v260 td{padding:10px 10px;border-bottom:1px solid #eef1f5}
#dailyReportPanel .daily-tx-table-v260 tbody tr:hover,#monthlyReportPanel .daily-tx-table-v260 tbody tr:hover,#productDrilldownV270 .daily-tx-table-v260 tbody tr:hover,#salesPerformanceReportPanel .daily-tx-table-v260 tbody tr:hover,#spTxDrawerV300 .daily-tx-table-v260 tbody tr:hover,#usagePerformanceReportPanel .daily-tx-table-v260 tbody tr:hover,#sourceValueReportPanel .daily-tx-table-v260 tbody tr:hover,#upTxDrawerV400 .daily-tx-table-v260 tbody tr:hover,#svTxDrawerV500 .daily-tx-table-v260 tbody tr:hover{background:#f5f9ff}
#dailyReportPanel .daily-tx-table-v260.daily-tx-collapsed-v260 tr.daily-tx-extra-row-v260,#salesPerformanceReportPanel .daily-tx-table-v260.daily-tx-collapsed-v260 tr.daily-tx-extra-row-v260,#spTxDrawerV300 .daily-tx-table-v260.daily-tx-collapsed-v260 tr.daily-tx-extra-row-v260{display:none}
#dailyReportPanel .daily-tx-table-v260 .right,#dailyReportPanel .daily-tx-table-v260 .amount-cell,#monthlyReportPanel .daily-tx-table-v260 .right,#monthlyReportPanel .daily-tx-table-v260 .amount-cell,#productDrilldownV270 .daily-tx-table-v260 .right,#productDrilldownV270 .daily-tx-table-v260 .amount-cell,#salesPerformanceReportPanel .daily-tx-table-v260 .right,#salesPerformanceReportPanel .daily-tx-table-v260 .amount-cell,#spTxDrawerV300 .daily-tx-table-v260 .right,#spTxDrawerV300 .daily-tx-table-v260 .amount-cell,#usagePerformanceReportPanel .daily-tx-table-v260 .right,#usagePerformanceReportPanel .daily-tx-table-v260 .amount-cell,#upTxDrawerV400 .daily-tx-table-v260 .right,#upTxDrawerV400 .daily-tx-table-v260 .amount-cell,#sourceValueReportPanel .daily-tx-table-v260 .right,#sourceValueReportPanel .daily-tx-table-v260 .amount-cell,#svTxDrawerV500 .daily-tx-table-v260 .right,#svTxDrawerV500 .daily-tx-table-v260 .amount-cell{text-align:right;font-variant-numeric:tabular-nums}
#dailyReportPanel .daily-tx-table-v260 tfoot td,#monthlyReportPanel .daily-tx-table-v260 tfoot td,#productDrilldownV270 .daily-tx-table-v260 tfoot td,#salesPerformanceReportPanel .daily-tx-table-v260 tfoot td,#spTxDrawerV300 .daily-tx-table-v260 tfoot td,#usagePerformanceReportPanel .daily-tx-table-v260 tfoot td,#sourceValueReportPanel .daily-tx-table-v260 tfoot td,#upTxDrawerV400 .daily-tx-table-v260 tfoot td,#svTxDrawerV500 .daily-tx-table-v260 tfoot td{background:#f9fafb;font-weight:700}

@media(max-width:900px){
  #dailyReportPanel .daily-two-col-v260{grid-template-columns:1fr}
}
@media(max-width:900px){
  #dailyReportPanel .daily-toolbar-v260{flex-direction:column;align-items:stretch}
}

/* ===== 每月新客未成交明細表 UI 重構 (依確認稿 + Final Polish). 重用 .daily-card-v260/
   .daily-block-title-v260/.daily-btn-v260/.daily-btn-primary-v260/.monthly-month-input-v270/
   .compact-table 既有元件，非第二套 Report Component。#newCustomerNoSaleReportPanel 範圍內 scoped，
   不影響其他報表分頁。Final Polish：移除本報表自己重複顯示的「今日：」（sitewide 既有的 #todayText
   已經顯示過一次，不再重複渲染第二份，也未動 #todayText 本身），查詢區改單列 Toolbar，KPI 移到列表
   Header 右側改用「共 N 位」措辭，Footer 改為左（最後更新時間）右（Pagination）同一列，且不再重複顯示
   「共 N 筆」（與列表 Header 的「共 N 位」重複）。Header Cleanup：透過「行銷分析」卡片進入本報表時
   （app.js navigateMenuPageV211 帶入 action.pageTitle），最上方 sitewide #pageTitle 本來就會顯示
   「每月新客未成交明細表」——本報表自己原本又額外渲染一份同文字的 Module Header，造成畫面重複兩次同
   標題；已移除本報表自己的那份（.newnosale-header-v1／.newnosale-header-title-v1 一併刪除），只保留
   sitewide 最上方那一份，未修改 #pageTitle／navigateMenuPageV211 本身。 */
#newCustomerNoSaleReportPanel.newnosale-panel-v1{background:transparent;box-shadow:none;padding:0;margin:0;border-radius:0}

#newCustomerNoSaleReportPanel .newnosale-query-card-v1{margin-bottom:16px}
#newCustomerNoSaleReportPanel .newnosale-query-toolbar-v1{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
#newCustomerNoSaleReportPanel .newnosale-field-v1{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#667085}
#newCustomerNoSaleReportPanel .newnosale-actions-v1{display:flex;gap:10px;flex-wrap:wrap;margin:0}
#newCustomerNoSaleReportPanel .newnosale-query-note-v1{margin:0 0 0 auto;text-align:right;align-self:center}

#newCustomerNoSaleReportPanel .newnosale-list-card-v1{margin-bottom:12px}
#newCustomerNoSaleReportPanel .newnosale-list-head-v1{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
#newCustomerNoSaleReportPanel .newnosale-list-head-v1 .daily-block-title-v260{margin:0}
#newCustomerNoSaleReportPanel .newnosale-list-kpi-v1{font-size:16px;font-weight:700;color:var(--clinic-primary);font-variant-numeric:tabular-nums}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport{min-width:0;overflow-x:hidden}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table{table-layout:fixed;width:100%}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table th{font-size:15px;font-weight:600;background:#f8fafc;height:48px;box-sizing:border-box;padding:0 10px}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table td{font-size:16px;padding:4px 10px}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table tr.newnosale-row-v1 td{min-height:46px;box-sizing:border-box;line-height:1.2}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport .newnosale-nums-v1{font-variant-numeric:tabular-nums}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport .newnosale-note-cell-v1{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport .newnosale-action-cell-v1{text-align:center;white-space:nowrap}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table th:nth-child(1),
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table td:nth-child(1){width:12%}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table th:nth-child(2),
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table td:nth-child(2){width:10%}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table th:nth-child(3),
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table td:nth-child(3){width:10%}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table th:nth-child(4),
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table td:nth-child(4){width:12%}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table th:nth-child(5),
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table td:nth-child(5){width:10%}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table th:nth-child(6),
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table td:nth-child(6){width:12%}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table th:nth-child(7),
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table td:nth-child(7){width:24%}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table th:nth-child(8),
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport table.compact-table td:nth-child(8){width:10%}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport .newnosale-view-btn-v1{background:none;border:none;color:#1d4ed8;font-weight:600;cursor:pointer;padding:4px 6px}
#newCustomerNoSaleReportPanel #newCustomerNoSaleReport .newnosale-view-btn-v1:hover{text-decoration:underline}
/* 分頁只靠這個 class 隱藏非當前頁的列；printArea()/exportAreaToExcel() 產生的文件都不引用 style.css，
   這條規則在列印/匯出結果中完全不生效，兩者永遠拿到完整、未分頁的原始資料。 */
#newCustomerNoSaleReportPanel .newnosale-row-hidden-v1{display:none}

/* Footer：左（最後更新時間）／右（Pagination）同一列。「共 N 筆」已移除——與列表 Header 的
   「共 N 位」是同一個數字，本輪明確要求不重複顯示，Pagination 本身（頁碼/上下頁/每頁筆數）完全未變。 */
#newCustomerNoSaleReportPanel .newnosale-footer-v1{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid #eef1f5}
#newCustomerNoSaleReportPanel .newnosale-updated-at-v1{font-size:13px;color:#98a2b3}
#newCustomerNoSaleReportPanel .newnosale-pagination-v1{display:flex;align-items:center;gap:8px;font-size:14px;color:#475467}
#newCustomerNoSaleReportPanel .newnosale-pagination-v1 .daily-btn-v260{height:32px;padding:0 10px;min-width:32px}
#newCustomerNoSaleReportPanel .newnosale-page-num-v1{min-width:24px;text-align:center;font-weight:700;color:#0f172a}
#newCustomerNoSaleReportPanel .newnosale-page-size-v1{height:32px;border-radius:8px;padding:0 8px;font-size:13px}

/* ===== V2.7.0 月營收統計表重構 + 產品銷售分析 Drill Down ===== */
#monthlyReportPanel.monthly-report-panel-v270{background:transparent;box-shadow:none;padding:0;margin:0;border-radius:0}
/* .monthly-* 共用元件（頁首/工具列/按鈕/匯出選單/卡片/連結/KPI 版面）由 V3.0.0 業務績效分析
   （#salesPerformanceReportPanel）重用，選擇器加寬，非第二套 CSS。 */
#monthlyReportPanel .monthly-header-v270,#salesPerformanceReportPanel .monthly-header-v270,#usagePerformanceReportPanel .monthly-header-v270,#sourceValueReportPanel .monthly-header-v270,#marketingCampaignPanelV230 .monthly-header-v270,#settingPanelEmployees .monthly-header-v270{display:flex;align-items:flex-start;justify-content:space-between;margin:0 0 14px}
#monthlyReportPanel .monthly-header-title-v270,#salesPerformanceReportPanel .monthly-header-title-v270,#usagePerformanceReportPanel .monthly-header-title-v270,#sourceValueReportPanel .monthly-header-title-v270,#marketingCampaignPanelV230 .monthly-header-title-v270,#settingPanelEmployees .monthly-header-title-v270{font-size:27px;font-weight:700;color:#0f172a;margin:0 0 6px}
#monthlyReportPanel .monthly-header-sub-v270,#salesPerformanceReportPanel .monthly-header-sub-v270,#usagePerformanceReportPanel .monthly-header-sub-v270,#sourceValueReportPanel .monthly-header-sub-v270,#marketingCampaignPanelV230 .monthly-header-sub-v270{font-size:14px;color:#667085;font-weight:600}

#monthlyReportPanel .monthly-toolbar-v270,#salesPerformanceReportPanel .monthly-toolbar-v270,#usagePerformanceReportPanel .monthly-toolbar-v270,#sourceValueReportPanel .monthly-toolbar-v270,#marketingCampaignPanelV230 .monthly-toolbar-v270{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e4e9f1;border-radius:12px;padding:12px 16px;margin-bottom:16px}
#monthlyReportPanel .monthly-toolbar-left-v270,#monthlyReportPanel .monthly-toolbar-right-v270,#salesPerformanceReportPanel .monthly-toolbar-left-v270,#salesPerformanceReportPanel .monthly-toolbar-right-v270,#usagePerformanceReportPanel .monthly-toolbar-left-v270,#sourceValueReportPanel .monthly-toolbar-left-v270,#usagePerformanceReportPanel .monthly-toolbar-right-v270,#sourceValueReportPanel .monthly-toolbar-right-v270,#marketingCampaignPanelV230 .monthly-toolbar-left-v270,#marketingCampaignPanelV230 .monthly-toolbar-right-v270,#marketingCampaignHeaderActionsV230.monthly-toolbar-right-v270,#settingPanelEmployees .monthly-toolbar-right-v270{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative}
#monthlyReportPanel .monthly-month-input-v270,#salesPerformanceReportPanel .monthly-month-input-v270,#usagePerformanceReportPanel .monthly-month-input-v270,#sourceValueReportPanel .monthly-month-input-v270,#newCustomerNoSaleReportPanel .monthly-month-input-v270{height:40px;border-radius:10px;padding:0 12px;font-size:14px}
#monthlyReportPanel .monthly-btn-v270,#salesPerformanceReportPanel .monthly-btn-v270,#usagePerformanceReportPanel .monthly-btn-v270,#sourceValueReportPanel .monthly-btn-v270,#marketingCampaignPanelV230 .monthly-btn-v270,#marketingCampaignHeaderActionsV230 .monthly-btn-v270{height:40px;padding:0 16px;border-radius:10px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
#monthlyReportPanel .monthly-btn-v270:hover:not(:disabled),#salesPerformanceReportPanel .monthly-btn-v270:hover:not(:disabled),#usagePerformanceReportPanel .monthly-btn-v270:hover:not(:disabled),#sourceValueReportPanel .monthly-btn-v270:hover:not(:disabled),#marketingCampaignPanelV230 .monthly-btn-v270:hover:not(:disabled),#marketingCampaignHeaderActionsV230 .monthly-btn-v270:hover:not(:disabled){border-color:#93c5fd;background:#f8fafc}
#monthlyReportPanel .monthly-btn-v270:disabled,#salesPerformanceReportPanel .monthly-btn-v270:disabled,#usagePerformanceReportPanel .monthly-btn-v270:disabled,#sourceValueReportPanel .monthly-btn-v270:disabled,#marketingCampaignPanelV230 .monthly-btn-v270:disabled,#marketingCampaignHeaderActionsV230 .monthly-btn-v270:disabled{opacity:.55;cursor:not-allowed}
#monthlyReportPanel .monthly-btn-active-v270,#salesPerformanceReportPanel .monthly-btn-active-v270,#usagePerformanceReportPanel .monthly-btn-active-v270,#sourceValueReportPanel .monthly-btn-active-v270,#marketingCampaignPanelV230 .monthly-btn-active-v270,#marketingCampaignHeaderActionsV230 .monthly-btn-active-v270{background:#1d4ed8;border-color:#1d4ed8;color:#fff;opacity:1!important}
#monthlyReportPanel .monthly-export-menu-v270,#salesPerformanceReportPanel .monthly-export-menu-v270,#usagePerformanceReportPanel .monthly-export-menu-v270,#sourceValueReportPanel .monthly-export-menu-v270,#marketingCampaignPanelV230 .monthly-export-menu-v270,#marketingCampaignHeaderActionsV230 .monthly-export-menu-v270{position:relative}
#monthlyReportPanel .monthly-export-dropdown-v270,#salesPerformanceReportPanel .monthly-export-dropdown-v270,#usagePerformanceReportPanel .monthly-export-dropdown-v270,#sourceValueReportPanel .monthly-export-dropdown-v270,#marketingCampaignPanelV230 .monthly-export-dropdown-v270,#marketingCampaignHeaderActionsV230 .monthly-export-dropdown-v270{position:absolute;top:calc(100% + 4px);left:0;z-index:40;background:#fff;border:1px solid #e4e9f1;border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.14);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:180px}
#monthlyReportPanel .monthly-export-dropdown-v270[hidden],#salesPerformanceReportPanel .monthly-export-dropdown-v270[hidden],#usagePerformanceReportPanel .monthly-export-dropdown-v270[hidden],#sourceValueReportPanel .monthly-export-dropdown-v270[hidden],#marketingCampaignPanelV230 .monthly-export-dropdown-v270[hidden],#marketingCampaignHeaderActionsV230 .monthly-export-dropdown-v270[hidden]{display:none}
#monthlyReportPanel .monthly-export-dropdown-v270 button,#salesPerformanceReportPanel .monthly-export-dropdown-v270 button,#marketingCampaignPanelV230 .monthly-export-dropdown-v270 button,#marketingCampaignHeaderActionsV230 .monthly-export-dropdown-v270 button{height:36px;padding:0 10px;border:0;background:transparent;text-align:left;border-radius:8px;font-size:14px;color:#344054;cursor:pointer}
#monthlyReportPanel .monthly-export-dropdown-v270 button:hover,#salesPerformanceReportPanel .monthly-export-dropdown-v270 button:hover,#marketingCampaignPanelV230 .monthly-export-dropdown-v270 button:hover,#marketingCampaignHeaderActionsV230 .monthly-export-dropdown-v270 button:hover{background:#eef4ff;color:#1d4ed8}

#monthlyReportPanel .monthly-block-title-v270,#salesPerformanceReportPanel .monthly-block-title-v270,#spStaffDrawerV300 .monthly-block-title-v270,#usagePerformanceReportPanel .monthly-block-title-v270,#sourceValueReportPanel .monthly-block-title-v270,#upStaffDrawerV400 .monthly-block-title-v270,#svDrawerV500 .monthly-block-title-v270{font-size:19px;font-weight:700;color:#0f172a;margin:0 0 12px}
#monthlyReportPanel .monthly-card-v270,#salesPerformanceReportPanel .monthly-card-v270,#usagePerformanceReportPanel .monthly-card-v270,#sourceValueReportPanel .monthly-card-v270,#marketingCampaignPanelV230 .monthly-card-v270,#settingPanelEmployees .monthly-card-v270{background:#fff;border:1px solid #e4e9f1;border-radius:12px;padding:18px}
#monthlyReportPanel .monthly-link-v270,#salesPerformanceReportPanel .monthly-link-v270,#spStaffDrawerV300 .monthly-link-v270,#usagePerformanceReportPanel .monthly-link-v270,#sourceValueReportPanel .monthly-link-v270,#upStaffDrawerV400 .monthly-link-v270,#svDrawerV500 .monthly-link-v270{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:#1d4ed8;text-decoration:none;cursor:pointer}
#monthlyReportPanel .monthly-link-v270:hover,#salesPerformanceReportPanel .monthly-link-v270:hover,#usagePerformanceReportPanel .monthly-link-v270:hover,#sourceValueReportPanel .monthly-link-v270:hover{text-decoration:underline}
#monthlyReportPanel .monthly-kpi-delta-v270,#salesPerformanceReportPanel .monthly-kpi-delta-v270{display:block;font-size:12px;font-weight:600;margin-top:4px;white-space:nowrap}
#monthlyReportPanel .monthly-kpi-delta-v270.up,#salesPerformanceReportPanel .monthly-kpi-delta-v270.up{color:#027a48}
#monthlyReportPanel .monthly-kpi-delta-v270.down,#salesPerformanceReportPanel .monthly-kpi-delta-v270.down{color:#b42318}
#monthlyReportPanel .monthly-kpi-delta-v270.flat,#salesPerformanceReportPanel .monthly-kpi-delta-v270.flat{color:#98a2b3}

/* V4 W2：報表 Panel 的 KPI 列改由共用 .cos-kpi-row 提供；行銷活動尚未遷移，仍用本規則。 */
#marketingCampaignPanelV230 .monthly-kpi-grid-v270{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:20px}
#monthlyReportPanel .monthly-pay-head-v270,#salesPerformanceReportPanel .monthly-pay-head-v270,#usagePerformanceReportPanel .monthly-pay-head-v270,#sourceValueReportPanel .monthly-pay-head-v270{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#monthlyReportPanel .monthly-pay-head-v270 .monthly-block-title-v270,#salesPerformanceReportPanel .monthly-pay-head-v270 .monthly-block-title-v270,#usagePerformanceReportPanel .monthly-pay-head-v270 .monthly-block-title-v270,#sourceValueReportPanel .monthly-pay-head-v270 .monthly-block-title-v270{margin:0}
#monthlyReportPanel .monthly-pay-head-v270 .monthly-link-v270,#salesPerformanceReportPanel .monthly-pay-head-v270 .monthly-link-v270,#usagePerformanceReportPanel .monthly-pay-head-v270 .monthly-link-v270,#sourceValueReportPanel .monthly-pay-head-v270 .monthly-link-v270{margin-top:0}

#monthlyReportPanel .monthly-row-v270,#salesPerformanceReportPanel .monthly-row-v270,#usagePerformanceReportPanel .monthly-row-v270,#sourceValueReportPanel .monthly-row-v270{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-bottom:20px;align-items:stretch}
#monthlyReportPanel .monthly-row-3-v270,#salesPerformanceReportPanel .monthly-row-3-v270,#sourceValueReportPanel .monthly-row-3-v270{grid-template-columns:repeat(3,minmax(0,1fr))}
#monthlyReportPanel .monthly-chart-svg-v270,#usagePerformanceReportPanel .monthly-chart-svg-v270,#sourceValueReportPanel .monthly-chart-svg-v270{width:100%;height:auto;display:block}
#monthlyReportPanel .monthly-chart-point-v270,#usagePerformanceReportPanel .monthly-chart-point-v270,#sourceValueReportPanel .monthly-chart-point-v270{cursor:pointer}
#monthlyReportPanel .monthly-chart-tooltip-v270,#usagePerformanceReportPanel .monthly-chart-tooltip-v270,#sourceValueReportPanel .monthly-chart-tooltip-v270{margin-top:8px;font-size:13px;color:#344054;background:#f8fafc;border:1px solid #eef1f5;border-radius:8px;padding:8px 10px}

#monthlyReportPanel .monthly-donut-wrap-v270,#salesPerformanceReportPanel .monthly-donut-wrap-v270,#spStaffDrawerV300 .monthly-donut-wrap-v270,#usagePerformanceReportPanel .monthly-donut-wrap-v270,#sourceValueReportPanel .monthly-donut-wrap-v270,#upStaffDrawerV400 .monthly-donut-wrap-v270,#svDrawerV500 .monthly-donut-wrap-v270{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#monthlyReportPanel .monthly-donut-v270,#salesPerformanceReportPanel .monthly-donut-v270,#spStaffDrawerV300 .monthly-donut-v270,#usagePerformanceReportPanel .monthly-donut-v270,#sourceValueReportPanel .monthly-donut-v270,#upStaffDrawerV400 .monthly-donut-v270,#svDrawerV500 .monthly-donut-v270{width:110px;height:110px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
#monthlyReportPanel .monthly-donut-hole-v270,#salesPerformanceReportPanel .monthly-donut-hole-v270,#spStaffDrawerV300 .monthly-donut-hole-v270,#usagePerformanceReportPanel .monthly-donut-hole-v270,#sourceValueReportPanel .monthly-donut-hole-v270,#upStaffDrawerV400 .monthly-donut-hole-v270,#svDrawerV500 .monthly-donut-hole-v270{width:64px;height:64px;border-radius:50%;background:#fff}
#monthlyReportPanel .monthly-donut-legend-v270,#salesPerformanceReportPanel .monthly-donut-legend-v270,#spStaffDrawerV300 .monthly-donut-legend-v270,#usagePerformanceReportPanel .monthly-donut-legend-v270,#sourceValueReportPanel .monthly-donut-legend-v270,#upStaffDrawerV400 .monthly-donut-legend-v270,#svDrawerV500 .monthly-donut-legend-v270{flex:1 1 160px;min-width:160px;display:flex;flex-direction:column;gap:6px}
#monthlyReportPanel .monthly-donut-legend-row-v270,#salesPerformanceReportPanel .monthly-donut-legend-row-v270,#spStaffDrawerV300 .monthly-donut-legend-row-v270,#usagePerformanceReportPanel .monthly-donut-legend-row-v270,#sourceValueReportPanel .monthly-donut-legend-row-v270,#upStaffDrawerV400 .monthly-donut-legend-row-v270,#svDrawerV500 .monthly-donut-legend-row-v270{display:flex;align-items:center;gap:6px;font-size:13px;color:#344054}
#monthlyReportPanel .monthly-legend-dot-v270,#salesPerformanceReportPanel .monthly-legend-dot-v270,#spStaffDrawerV300 .monthly-legend-dot-v270,#usagePerformanceReportPanel .monthly-legend-dot-v270,#sourceValueReportPanel .monthly-legend-dot-v270,#upStaffDrawerV400 .monthly-legend-dot-v270,#svDrawerV500 .monthly-legend-dot-v270{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
#monthlyReportPanel .monthly-legend-label-v270,#salesPerformanceReportPanel .monthly-legend-label-v270,#spStaffDrawerV300 .monthly-legend-label-v270,#usagePerformanceReportPanel .monthly-legend-label-v270,#sourceValueReportPanel .monthly-legend-label-v270,#upStaffDrawerV400 .monthly-legend-label-v270,#svDrawerV500 .monthly-legend-label-v270{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#monthlyReportPanel .monthly-legend-amt-v270,#salesPerformanceReportPanel .monthly-legend-amt-v270,#spStaffDrawerV300 .monthly-legend-amt-v270,#usagePerformanceReportPanel .monthly-legend-amt-v270,#sourceValueReportPanel .monthly-legend-amt-v270,#upStaffDrawerV400 .monthly-legend-amt-v270,#svDrawerV500 .monthly-legend-amt-v270{font-variant-numeric:tabular-nums;color:#0f172a;font-weight:600}
#monthlyReportPanel .monthly-legend-pct-v270,#salesPerformanceReportPanel .monthly-legend-pct-v270,#spStaffDrawerV300 .monthly-legend-pct-v270,#usagePerformanceReportPanel .monthly-legend-pct-v270,#sourceValueReportPanel .monthly-legend-pct-v270,#upStaffDrawerV400 .monthly-legend-pct-v270,#svDrawerV500 .monthly-legend-pct-v270{font-variant-numeric:tabular-nums;color:#98a2b3;min-width:38px;text-align:right}

#monthlyReportPanel .monthly-forecast-row-v270{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eef1f5;font-size:14px;color:#344054}
#monthlyReportPanel .monthly-forecast-row-v270:last-child{border-bottom:0}
#monthlyReportPanel .monthly-forecast-row-v270 strong{font-size:16px;color:#0f172a;font-variant-numeric:tabular-nums}
#monthlyReportPanel .monthly-forecast-row-v270 strong.muted{color:#98a2b3;font-weight:600}

#monthlyReportPanel .monthly-newold-wrap-v270{display:flex;align-items:center;gap:16px;margin-bottom:12px}
#monthlyReportPanel .monthly-newold-table-v270 th,#monthlyReportPanel .monthly-newold-table-v270 td{padding:8px 8px;font-size:13px}

#monthlyReportPanel .monthly-view-day-btn-v270,#salesPerformanceReportPanel .monthly-view-day-btn-v270{height:30px;padding:0 10px;border-radius:8px;background:#f3f4f6;border:1px solid #e5e7eb;color:#344054;font-weight:600;font-size:12px;cursor:pointer}
#monthlyReportPanel .monthly-view-day-btn-v270:hover,#salesPerformanceReportPanel .monthly-view-day-btn-v270:hover{background:#e8eaed}
#monthlyReportPanel .monthly-legacy-wrap-v270{margin-top:16px;overflow-x:auto}
#monthlyReportPanel .monthly-legacy-table-v270{width:100%;font-size:13px}

/* ===== V2.9.0 Top5業務(60%)／月度預估(40%) 同列 ＋ 新舊客分析獨立整列 ===== */
#monthlyReportPanel .monthly-row-top5-forecast-v290{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
#monthlyReportPanel .monthly-forecast-kpi-label-v290{font-size:12px;font-weight:600;color:#667085}
#monthlyReportPanel .monthly-forecast-kpi-value-v290{font-size:20px;font-weight:700;color:#0f172a;margin-top:4px;font-variant-numeric:tabular-nums}
#monthlyReportPanel .monthly-forecast-kpi-value-v290.muted{color:#98a2b3}

#monthlyReportPanel .monthly-newold-full-v290{margin-bottom:20px}
#monthlyReportPanel .monthly-newold-full-body-v290{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:14px}
#monthlyReportPanel .monthly-newold-donut-col-v290,#sourceValueReportPanel .monthly-newold-donut-col-v290,#svDrawerV500 .monthly-newold-donut-col-v290{flex:0 0 auto;display:flex;align-items:center;gap:16px}
#monthlyReportPanel .monthly-newold-table-col-v290{flex:1 1 360px;min-width:320px}
#monthlyReportPanel .monthly-newold-actions-v290{display:flex;gap:10px}

@media(max-width:900px){
  #monthlyReportPanel .monthly-row-v270,#monthlyReportPanel .monthly-row-3-v270,#monthlyReportPanel .monthly-row-top5-forecast-v290{grid-template-columns:1fr}
  #monthlyReportPanel .monthly-newold-full-body-v290{flex-direction:column;align-items:stretch}
}
@media(max-width:900px){
  #monthlyReportPanel .monthly-toolbar-v270{flex-direction:column;align-items:stretch}
  #monthlyReportPanel .monthly-newold-actions-v290{flex-direction:column}
}

/* ---- 新客／舊客成交明細 Drawer（重用 .pdd-drawer-v270 外殼樣式）---- */
.cdd-footer-v290{display:flex;align-items:center;gap:20px;padding:14px 24px;background:#fff;border-top:1px solid #e4e9f1;flex-wrap:wrap}
.cdd-footer-label-v290{font-size:14px;font-weight:700;color:#0f172a}
.cdd-footer-stat-v290{display:flex;align-items:center;gap:6px;font-size:13px;color:#667085}
.cdd-footer-stat-v290 strong{font-size:16px;color:#0f172a;font-variant-numeric:tabular-nums}

/* ===== V3.0.0 業務績效分析（#salesPerformanceReportPanel）===== */
#salesPerformanceReportPanel .sp-rank-badge-v300,#usagePerformanceReportPanel .sp-rank-badge-v300,#sourceValueReportPanel .sp-rank-badge-v300{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#eef1f7;color:#344054;font-weight:700;font-size:13px}
#salesPerformanceReportPanel .sp-rank-badge-v300.sp-rank-medal-v300,#usagePerformanceReportPanel .sp-rank-badge-v300.sp-rank-medal-v300,#sourceValueReportPanel .sp-rank-badge-v300.sp-rank-medal-v300{background:transparent;font-size:18px}
#salesPerformanceReportPanel .sp-staff-select-label-v300{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#0f172a;margin-bottom:14px}
#salesPerformanceReportPanel .sp-staff-select-label-v300 select{height:38px;border-radius:8px;padding:0 10px;font-size:13px;font-weight:600;min-width:160px}
#salesPerformanceReportPanel .sp-row-structure-v300{align-items:stretch}
#salesPerformanceReportPanel .sp-reserved-card-v300{display:flex;align-items:center;justify-content:center;border-style:dashed;color:#98a2b3}
/* 業務績效排行：業務姓名可點擊（開啟既有 openStaffDetailDrawerV300 Drawer），整列輕度 hover */
#salesPerformanceReportPanel .sp-rank-table-v300 tbody tr:hover{background:#f5f8ff}
.sp-staff-name-btn-v300{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:6px 8px;margin:-6px -8px;border:none;background:none;border-radius:6px;font-size:14px;font-weight:600;color:#0f172a;cursor:pointer;text-align:left}
.sp-staff-name-btn-v300:hover{color:#1d4ed8;text-decoration:underline;background:#eaf1ff}
.sp-staff-name-btn-v300:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}
.sp-staff-name-arrow-v300{color:#98a2b3;font-weight:400}
.sp-staff-name-btn-v300:hover .sp-staff-name-arrow-v300{color:#1d4ed8}
/* 移除操作欄後的欄寬重新分配：排名/成交筆數/占比縮窄，業務姓名加寬 */
#salesPerformanceReportPanel .sp-rank-table-v300{table-layout:fixed}
#salesPerformanceReportPanel .sp-rank-table-v300 th:nth-child(1),#salesPerformanceReportPanel .sp-rank-table-v300 td:nth-child(1){width:52px}
#salesPerformanceReportPanel .sp-rank-table-v300 th:nth-child(2),#salesPerformanceReportPanel .sp-rank-table-v300 td:nth-child(2){width:15%}
#salesPerformanceReportPanel .sp-rank-table-v300 th:nth-child(9),#salesPerformanceReportPanel .sp-rank-table-v300 td:nth-child(9){width:80px}
#salesPerformanceReportPanel .sp-rank-table-v300 th:nth-child(11),#salesPerformanceReportPanel .sp-rank-table-v300 td:nth-child(11){width:64px}
#salesPerformanceReportPanel .sp-rank-table-v300 th,#salesPerformanceReportPanel .sp-rank-table-v300 td{padding-left:10px;padding-right:10px}

/* 業務業績明細 Drawer（重用 .pdd-drawer-v270 外殼，寬度改為窄版 420~500px） */
.sp-drawer-section-title-v300{font-size:16px;margin:18px 0 10px}
.sp-recent-table-v300 th,.sp-recent-table-v300 td{padding:8px 8px;font-size:13px}

/* ===== V4.0.0 耗療績效分析（#usagePerformanceReportPanel）===== */
#usagePerformanceReportPanel .daily-kpi-value-v260 .muted,#sourceValueReportPanel .daily-kpi-value-v260 .muted{color:#98a2b3}
#usagePerformanceReportPanel .up-rank-table-v400 tbody tr:hover{background:#f5f8ff}
/* 療程分類排名 Horizontal Bar：無既有元件可重用，新建最小獨立元件 */
.up-hbar-list-v400{display:flex;flex-direction:column;gap:12px}
.up-hbar-row-v400{display:grid;grid-template-columns:88px 1fr 76px 48px;align-items:center;gap:10px;font-size:13px}
.up-hbar-label-v400{color:#344054;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-hbar-track-v400{height:10px;border-radius:5px;background:#eef1f5;overflow:hidden}
.up-hbar-fill-v400{height:100%;border-radius:5px;background:#1d4ed8}
.up-hbar-value-v400{text-align:right;font-variant-numeric:tabular-nums;color:#0f172a;font-weight:600}
.up-hbar-pct-v400{text-align:right;font-variant-numeric:tabular-nums;color:#98a2b3}
/* 耗療明細 Drawer（重用 .pdd-drawer-v270 外殼，寬度改為窄版 420~500px，同 sp-staff-drawer-v300） */

/* ===== V5.0.0 客戶來源分析（#sourceValueReportPanel）=====
   本區塊為單一集中管理處，所有本報表 Dashboard 版面調整規則皆放在這裡，不另外散落於其他區塊；
   僅作用於 #sourceValueReportPanel（與明確標示的 Drawer 專屬規則），不影響其他報表共用之
   .daily-kpi-card-v260／.monthly-card-v270／.monthly-donut-v270 等基準樣式。 */

/* 頁首篩選（業務／排序）下拉樣式 */
.sv-staff-filter-label-v500{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#0f172a}
.sv-staff-filter-label-v500 select{height:40px;border-radius:10px;padding:0 10px;font-size:14px;font-weight:600;min-width:120px;border:1px solid #d0d5dd}

/* KPI：4 卡平均分配整列，卡片高度收斂至 84~96px */
#sourceValueReportPanel .daily-kpi-icon-v260{width:32px;height:32px;font-size:15px}
#sourceValueReportPanel .daily-kpi-value-v260{font-size:20px;margin-top:1px}
#sourceValueReportPanel .daily-kpi-label-v260{font-size:12px}
#sourceValueReportPanel .daily-kpi-delta-v260{font-size:11px;margin-top:2px}

/* 版面間距收斂（頁首／工具列／列距），為圖表區與明細表爭取垂直空間 */
#sourceValueReportPanel .monthly-header-v270{margin-bottom:10px}
#sourceValueReportPanel .monthly-toolbar-v270{padding:8px 12px;margin-bottom:12px}
#sourceValueReportPanel .monthly-row-v270{margin-bottom:12px}

/* 分析區三欄非等寬：來源排行 40% / 來源占比 35% / 新舊客占比 25%，頂部底部對齊（Grid 預設 stretch） */
#sourceValueReportPanel .monthly-row-3-v270{grid-template-columns:minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.85fr)}
#sourceValueReportPanel .monthly-row-3-v270 .monthly-card-v270{padding:12px}
#sourceValueReportPanel .monthly-row-3-v270 .monthly-block-title-v270{font-size:15px;margin:0 0 8px}

/* 來源排行：每列收斂至 30~34px、不產生垂直捲動；姓名按鈕最小高度隨列高收斂（僅本清單，不影響
   業務／耗療績效分析排行表沿用的同一顆按鈕元件） */
#sourceValueReportPanel .up-hbar-list-v400{gap:6px}
#sourceValueReportPanel .up-hbar-row-v400{grid-template-columns:72px 1fr 60px 40px;gap:6px;font-size:12px;padding:9px 0}
#sourceValueReportPanel .up-hbar-row-v400 .sp-staff-name-btn-v300{min-height:0;padding:2px 4px;margin:-2px -4px;font-size:12px}

/* 來源占比 Donut：縮小至 200px，圖例固定右側、不換行到下方（.sv-source-donut-wrap-v500 為
   report.js 新增的外層包裹 class，僅用於精準鎖定此處 Donut，不影響 monthlyCategoryDonutV270()
   在其他報表的既有尺寸） */
#sourceValueReportPanel .sv-source-donut-wrap-v500 .monthly-donut-wrap-v270{flex-wrap:nowrap;gap:10px}
#sourceValueReportPanel .sv-source-donut-wrap-v500 .monthly-donut-v270{width:200px;height:200px}
#sourceValueReportPanel .sv-source-donut-wrap-v500 .monthly-donut-hole-v270{width:118px;height:118px}
#sourceValueReportPanel .sv-source-donut-wrap-v500 .monthly-donut-legend-v270{min-width:0;flex:1 1 auto;gap:4px}
#sourceValueReportPanel .sv-source-donut-wrap-v500 .monthly-donut-legend-row-v270{font-size:12px;gap:5px}

/* 新舊客占比 Donut：縮小至 160px，置左；右側顯示新客／舊客各自的人數／產值／占比（三項指標無法
   套用既有單行 legend row，改用新增的 .sv-newold-legend-v500 堆疊呈現，仍是既有 Donut 圖表元件
   monthlyNewOldDonutV270() 本身，非新增第三套 Chart Component） */
#sourceValueReportPanel .monthly-newold-donut-col-v290{flex-wrap:nowrap;align-items:center;gap:10px}
#sourceValueReportPanel .monthly-newold-donut-col-v290 .monthly-donut-v270{width:160px;height:160px}
#sourceValueReportPanel .monthly-newold-donut-col-v290 .monthly-donut-hole-v270{width:94px;height:94px}
.sv-newold-legend-v500{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 auto}
.sv-newold-group-title-v500{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#0f172a;margin-bottom:2px}
.sv-newold-stat-v500{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:#667085}
.sv-newold-stat-v500 strong{font-variant-numeric:tabular-nums;color:#0f172a;font-weight:600}

/* 來源分析明細表 */
#sourceValueReportPanel .sv-table-v500 tbody tr:hover{background:#f5f8ff}
#sourceValueReportPanel .sv-table-v500 th,#sourceValueReportPanel .sv-table-v500 td{padding:7px 10px}

/* 來源明細 Drawer KPI：8 項指標（新客/舊客/成交/總產值/成交率/平均客單/占比/來源排名），4 欄 x 2 列 */
.sv-drawer-actions-v500{display:flex;gap:10px;margin-top:18px}
.sv-drawer-actions-v500 .monthly-btn-v270{flex:1 1 0}

/* ---- 產品銷售分析 Drill Down（85vw 右側大型 Drawer）---- */
.pdd-overlay-v270{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:900;display:flex;justify-content:flex-end}
.pdd-overlay-v270.hidden{display:none}
/* V4 W2（R8）：寬度改由封閉集合的 .cos-drawer--full / .cos-drawer--sm 提供，本規則不再自訂寬度。 */
.pdd-drawer-v270{height:100%;background:#f7f8fa;box-shadow:-8px 0 24px rgba(16,24,40,.18);display:flex;flex-direction:column;overflow:hidden;animation:pddSlideInV270 .18s ease-out}
@keyframes pddSlideInV270{from{transform:translateX(24px);opacity:.4}to{transform:translateX(0);opacity:1}}
.pdd-head-v270{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px;background:#fff;border-bottom:1px solid #e4e9f1}
.pdd-title-v270{font-size:22px;font-weight:700;color:#0f172a;margin:0 0 4px}
.pdd-subtitle-v270{font-size:14px;color:#667085;font-weight:600}
.pdd-filter-bar-v270{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:14px 24px;background:#fff;border-bottom:1px solid #e4e9f1}
.pdd-filter-bar-v270 label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#0f172a}
.pdd-filter-bar-v270 input,.pdd-filter-bar-v270 select{height:38px;border-radius:8px;padding:0 10px;font-size:13px;min-width:140px}
.pdd-filter-actions-v270{margin-left:auto}
/* V2.8.0 全部銷售分析／組合銷售分析頁籤 */
.pdd-maintabs-v280{display:flex;gap:8px;padding:14px 24px 0;background:#fff}
.pdd-maintab-btn-v280{height:38px;padding:0 16px;border-radius:10px 10px 0 0;background:#f3f4f6;border:1px solid #e4e9f1;border-bottom:0;color:#667085;font-size:14px;font-weight:700;cursor:pointer}
.pdd-maintab-btn-v280.is-active{background:#fff;color:#1d4ed8;border-color:#1d4ed8}
.pdd-integrity-note-v280{margin:12px 24px 0;padding:10px 14px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;font-size:13px;line-height:1.5}
.pdd-integrity-note-v280.hidden{display:none}
.pdd-breadcrumb-v270{padding:12px 24px 0;font-size:14px;color:#667085}
.pdd-breadcrumb-v270 a{color:#1d4ed8;text-decoration:none;cursor:pointer}
.pdd-breadcrumb-v270 a:hover{text-decoration:underline}
.pdd-crumb-current-v270{color:#0f172a;font-weight:700}
.pdd-crumb-sep-v270{margin:0 6px;color:#98a2b3}
.pdd-summary-label-v270{font-size:12px;font-weight:600;color:#667085}
.pdd-summary-value-v270{font-size:22px;font-weight:700;color:#0f172a;margin-top:4px;font-variant-numeric:tabular-nums}
.pdd-body-v270{flex:1 1 auto;overflow-y:auto;padding:6px 24px 24px}
.pdd-back-btn-v270{background:transparent;border:0;padding:0;margin-bottom:10px}
.pdd-table-v270{background:#fff;border:1px solid #e4e9f1;border-radius:12px;overflow:hidden}
@media(max-width:900px){
  .pdd-filter-bar-v270 input,.pdd-filter-bar-v270 select{min-width:110px}
}

/* V2.0.3 workflow cleanup */
.setting-tabs{display:flex;flex-wrap:wrap;gap:8px}
.setting-tabs button.active-tab{background:#1d4ed8;color:#fff}
.setting-subtabs{display:flex!important;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.setting-subtabs button.active-tab{background:#1d4ed8;color:#fff}
.setting-subtabs button.security-denied-v221{background:#e5e7eb;color:#98a2b3;border:1px solid #d0d5dd;cursor:not-allowed}
.security-filter-grid-v221{margin-top:10px}
.security-center-tab-v221{margin-top:14px;overflow:auto}
.security-table-v221{min-width:920px}
.security-table-v221 td{word-break:break-word}
.restore-btn{background:#dbeafe!important;color:#1d4ed8!important;border:1px solid #93c5fd!important}
.appointment-search-box{border:2px solid #bfdbfe;background:#eff6ff;border-radius:14px;padding:10px 12px;margin:6px 0}
.new-customer-box{border:2px solid #e5e7eb;background:#f9fafb;border-radius:14px;padding:10px 12px;margin:10px 0 4px}
.appointment-search-box h4,.new-customer-box h4{margin:0 0 4px}
.cancelled-row td{text-decoration:line-through!important}

/* Appointment Create UI V2 */
.appt-create-v2{display:grid;gap:8px}
.appt-search-actions-v2{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.appt-add-customer-btn-v2{white-space:nowrap}
.appt-customer-summary-v2{background:#f7f9fc;border:1px solid #e0e6ee;border-radius:12px;padding:14px 16px;margin-top:14px}
.appt-customer-summary-head-v2{font-size:14px;font-weight:700;color:#0f7b3d;margin-bottom:10px}
.appt-customer-summary-grid-v2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:center}
.appt-customer-summary-grid-v2 span{display:block;font-size:12px;color:#8a94a6;font-weight:600}
.appt-customer-summary-grid-v2 strong{font-size:15px;color:#1f2430}
.appt-customer-summary-grid-v2 button{height:36px;border-radius:10px}
/* 未建病歷預約 block — same panel shell as the selected-customer summary above (reused, not a
   second style), only the header tint differs so the two states are never confused. */
.appt-guest-btn-v3{white-space:nowrap}
.appt-guest-box-v3 .appt-customer-summary-head-v2{color:#9a5b00}
.appt-guest-grid-v3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:end}
.appt-guest-grid-v3 button{height:36px;border-radius:10px}
.appt-info-grid-v2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px;align-items:start}
.appt-inline-count-v2{font-weight:600;font-size:17px;color:#2E6B4F;display:inline-flex;align-items:center}
.appt-actions-v2{display:flex;justify-content:flex-start;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #eef1f5}
.appt-submit-btn-v2{min-height:44px;padding:0 28px;font-size:15px;font-weight:700;border-radius:12px;background:#0f6cbd;display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease,background .15s ease}
.appt-submit-btn-v2:hover{background:#0a5aa0;transform:translateY(-1px)}
.appt-actions-v2 button.ghost{height:44px;padding:0 20px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease,background .15s ease}
.appt-actions-v2 button.ghost:hover{background:#e2e5ea;transform:translateY(-1px)}
#apService,#apType{min-height:36px}
.shift-availability-hint-v223{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid #d8dce3;border-radius:12px;background:#f7f8fa;font-size:13px;margin-top:16px}
.shift-availability-hint-v223::before{content:'ℹ️';font-size:15px;line-height:1}
.shift-availability-hint-v223.ok{color:#0f7b3d;border-color:#bbf7d0;background:#eafbf1}
.shift-availability-hint-v223.ok::before{content:'✔️'}
.shift-availability-hint-v223.warn{color:#b42318;border-color:#fda29b;background:#fff1f3}
.shift-availability-hint-v223.warn::before{content:'⚠️'}

/* ===== Appointment page V3 Fluent redesign (UI-only; slot table/colors untouched) ===== */
#appointments.apptx-page{font-family:"Segoe UI Variable","Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC",Arial,sans-serif}
.apptx-page-head{display:flex;align-items:center;gap:10px;margin:4px 2px 20px}
.apptx-page-head h2{margin:0;font-size:21px;font-weight:700;color:#1f2430}
.apptx-page-icon{font-size:21px;line-height:1}
.apptx-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;box-shadow:0 1px 3px rgba(16,24,40,.06);margin:0 0 20px;transition:box-shadow .15s ease}
.apptx-card:hover{box-shadow:0 4px 16px rgba(16,24,40,.08)}
.apptx-card-head{margin-bottom:16px}
.apptx-card-head h4{margin:0 0 4px;font-size:16px;font-weight:700;color:#1f2430;display:flex;align-items:center;gap:8px}
.apptx-card-head .apptx-hint{margin:0;font-size:13px;color:#8a94a6}
.apptx-search-box{border:0;background:transparent;padding:0;margin:0}
.apptx-search-row{display:flex;gap:12px;align-items:center}
.apptx-search-field{position:relative;flex:1;display:flex;align-items:center}
.apptx-search-field .apptx-search-icon{position:absolute;left:14px;font-size:15px;color:#8a94a6;pointer-events:none}
.apptx-search-field #apSearch{width:100%;height:48px;padding:0 16px 0 42px;border-radius:12px;border:1px solid #d8dce3;background:#f7f8fa;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.apptx-search-field #apSearch:hover{background:#f0f2f5}
.apptx-search-field #apSearch:focus{outline:none;border-color:#6cb2f7;background:#fff;box-shadow:0 0 0 3px rgba(0,120,212,.15)}
.apptx-btn-secondary{height:48px;padding:0 20px;border-radius:12px;background:#f3f6fb;color:#0f6cbd;border:1px solid #cfe3fb;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:transform .12s ease,background .15s ease}
.apptx-btn-secondary:hover{background:#e6f1fc;transform:translateY(-1px)}
#apPicker.apptx-picker{border:0;background:transparent;padding:0;margin:14px 0 0}
#apPicker .apptx-result-list{display:flex;flex-direction:column;gap:8px}
#apPicker .apptx-result-card{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;transition:background .12s ease}
#apPicker .apptx-result-card:hover{background:#f3f8ff}
#apPicker .apptx-result-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:999px;background:#e6f1fc;color:#0f6cbd;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
#apPicker .apptx-result-info{flex:0 0 auto;min-width:120px}
#apPicker .apptx-result-name{font-size:15px;font-weight:700;color:#1f2430}
#apPicker .apptx-result-chart{font-size:12px;color:#8a94a6}
#apPicker .apptx-result-meta{flex:1;display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#475467}
#apPicker .apptx-result-pick{height:36px;padding:0 18px;border-radius:10px;background:#0f6cbd;color:#fff;border:0;font-weight:600;flex:0 0 auto}
#apPicker .apptx-result-pick:hover{background:#0a5aa0}
#apPicker .apptx-result-empty{padding:14px;color:#8a94a6;font-size:13px}
.apptx-field{display:flex;flex-direction:column;gap:6px;font-weight:400}
.apptx-field.wide{grid-column:1/-1}
.apptx-field-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#344054}
.apptx-field-icon{font-size:14px;line-height:1}
.apptx-field input,.apptx-field select{height:46px;border-radius:12px;border:1px solid #d8dce3;background:#fff;padding:0 14px;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.apptx-field input:hover,.apptx-field select:hover{border-color:#b7bfcb;background:#fafbfc}
.apptx-field input:focus,.apptx-field select:focus{outline:none;border-color:#6cb2f7;box-shadow:0 0 0 3px rgba(0,120,212,.15)}
/* 已約人數: a single-line, Input-height info field (icon + "已約N人") — matches the
   sibling 預約日期/預約時間 field height exactly. Two read-only states derived straight
   from the count text updateApptTimeCount() already writes (no new capacity/availability
   logic): 0 → neutral/green, >0 → informational blue. */
.apptx-count-card{display:flex;align-items:center;gap:10px;height:46px;width:100%;box-sizing:border-box;padding:0 15px;border-radius:12px;background:#F6FBF8;border:1px solid #D8E6DC;transition:background-color 150ms ease,border-color 150ms ease}
.apptx-count-card.is-some{background:#EFF6FE;border-color:#CFE3FB}
.apptx-count-card.is-some .appt-inline-count-v2{color:#0F6CBD}
.apptx-count-icon{font-size:19px;line-height:1;flex-shrink:0}
.apptx-list-card .table-head{gap:12px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid #eef1f5}
.apptx-list-card .table-head h3{margin:0;font-size:17px;font-weight:700;color:#1f2430;display:flex;align-items:center;gap:8px}
.apptx-list-card .table-head .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apptx-list-card .table-head .actions button{height:38px;padding:0 16px;border-radius:10px;background:#f3f4f6;color:#344054;font-weight:600;border:1px solid #e5e7eb;display:inline-flex;align-items:center;gap:6px;transition:transform .12s ease,background .15s ease}
.apptx-list-card .table-head .actions button:hover{background:#e8eaed;transform:translateY(-1px)}
.apptx-list-card .table-head .actions button.ghost{background:#eef6fe;color:#0f6cbd;border-color:#cfe3fb}
.apptx-list-card .table-head .actions button.ghost:hover{background:#dcedfc}
.apptx-list-card .table-head .actions input[type=date]{height:38px;border-radius:10px;border:1px solid #d8dce3;padding:0 10px}
@media(max-width:900px){
  .apptx-search-row{flex-direction:column;align-items:stretch}
  .apptx-btn-secondary{width:100%;justify-content:center}
}

/* ===== Appointment page readability fix (2026-07-15): font-size +2px minimum, matching
   component heights. Scoped to #appointments only — no other page's type scale is touched. ===== */
#appointments.apptx-page{font-size:16px}
#appointments .apptx-page-head h2{font-size:28px}
#appointments .apptx-card-head h4{font-size:20px}
#appointments .apptx-card-head .apptx-hint{font-size:15px;line-height:1.4}
#appointments .apptx-field-label{font-size:16px;line-height:1.4}
#appointments .apptx-field input,#appointments .apptx-field select{font-size:18px}
#appointments .apptx-search-field #apSearch{font-size:18px}
#appointments .apptx-btn-secondary{font-size:16px}
#appointments #apPicker .apptx-result-card{min-height:56px;padding:10px 16px}
#appointments #apPicker .apptx-result-name{font-size:17px}
#appointments #apPicker .apptx-result-chart{font-size:16px;line-height:1.4}
#appointments #apPicker .apptx-result-meta{font-size:16px;line-height:1.4}
#appointments #apPicker .apptx-result-pick{height:46px;font-size:16px}
#appointments .appt-customer-summary-head-v2{font-size:16px}
#appointments .appt-customer-summary-grid-v2 span{font-size:14px;line-height:1.4}
#appointments .appt-customer-summary-grid-v2 strong{font-size:17px;font-weight:600}
#appointments .appt-customer-summary-grid-v2 button{height:46px;font-size:16px}
#appointments .appt-submit-btn-v2{min-height:46px;font-size:16px}
#appointments .appt-actions-v2 button.ghost{height:46px;font-size:16px}
#appointments .appt-actions-v2 .msg{font-size:15px}
#appointments .shift-availability-hint-v223{font-size:15px;line-height:1.4}
#appointments .apptx-list-card .table-head h3{font-size:20px}
#appointments .apptx-list-card .table-head .actions button{height:46px;font-size:16px}
#appointments .apptx-list-card .table-head .actions input[type=date]{height:46px;font-size:16px}
/* Schedule header/time-column readability pass (2026-07-15, pass-4). Column names, order,
   and count are untouched (still whatever enabledAppointmentCategoryGroupsV225() returns) —
   only header sizing/centering/tint and time-column sizing/centering are added. Positional
   (nth-child) tinting mirrors the existing idx===1 pattern already used by app.js for the
   alt-column background, so it tracks the same column regardless of its configured name. */
#appointments .appt-slot-table-v212 thead th{height:52px;vertical-align:middle;text-align:center;font-size:17px;font-weight:700;line-height:1.3;white-space:nowrap;border-bottom:2px solid #d8dce3}
#appointments .appt-slot-table-v212 thead th:first-child{background:#F7F9FC;color:#344054}
#appointments .appt-slot-table-v212 thead th:nth-child(2){background:#F4F6FF;color:#3159B7}
#appointments .appt-slot-table-v212 thead th:nth-child(3){background:#F3FBF6;color:#237A4B}
#appointments .appt-slot-table-v212 thead th:nth-child(4){background:#FFF8F0;color:#9A5A16}
#appointments .appt-slot-table-v212 tbody th{font-size:15px;font-weight:600;line-height:1.3;text-align:center;padding-left:7px;padding-right:7px}
#appointments .appt-slot-table-v212 th,#appointments .appt-slot-table-v212 td{border-right-color:#E3E8EF;border-bottom-color:#E8ECF2}
#appointments .appt-slot-table-v212 .appt-slot-cell-v212{min-height:42px}
#appointments .appt-slot-line1-v212{font-size:16px;line-height:1.4;white-space:normal}
#appointments .appt-slot-line2-v212{font-size:14px;line-height:1.4;white-space:normal}
#appointments .appt-slot-line3-v212{font-size:14px;line-height:1.4;white-space:normal}
#appointments .appt-slot-actions-v212 button{font-size:12.5px;padding:3px 6px}

.shift-setting-block-v223{margin-top:12px;padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#fcfcfd}
.shift-setting-block-v223 h4{margin:0 0 8px;color:#0f172a}
.appointment-manage-hub-v223{margin-top:10px}
.appointment-manage-hub-v223 .workspace-entry-card-v211{min-height:200px;border-color:#d9d6fe;background:linear-gradient(180deg,#f5f3ff 0%,#fbfaff 100%)}
.appointment-manage-hub-v223 .workspace-entry-card-v211 p{font-size:14px;line-height:1.45}
.appointment-manage-hub-v223 .workspace-icon-v212{background:#ede9fe;color:#6d28d9}
.appointment-manage-hub-v223 .workspace-entry-card-v211 button.available{background:#6d28d9;color:#fff}
.weekday-checks-v223{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0}
.weekday-checks-v223 label{display:flex;flex-direction:row;align-items:center;gap:6px;font-weight:700}

/* ===== ClinicOS UI Foundation Phase 1 — 共用 .cos-* Component Class（見
   docs/architecture/ClinicOS_UI_Foundation_Standard_V1.md V1.1 §Component Class Mapping）。
   取代先前逐頁手刻的 holiday-settings-*／empoff-settings-* 一次性視覺 class（皆已確認無 JS
   selector 依賴，安全整併，非破壞性變更）。試點：系統管理／假日及預約管理下的診所假日設定、
   員工休假管理、醫師排班三個子頁（#appointmentManagePanelHolidayV223／
   #appointmentManagePanelEmployeeOffV223／#appointmentManagePanelDoctorShiftV223）。
   不動 .shift-setting-block-v223 本身、.form.four、全域 input,select,button 等既有共用規則——
   預約時段管理（第 4 個子頁，本輪未列入試點）與其餘沿用這些規則的頁面不受影響。全部數值沿用
   design-tokens.css 既有 --cos-* Token，未新增第四套 Token 系統。 */
.cos-page-shell{border:0;background:transparent;padding:0;margin-top:0}

/* --- Breadcrumb（純文字，不建立新導航流程；.cos-breadcrumb__back 是既有「返回」按鈕的視覺位置，
   本身仍是一般 .cos-btn，不是麵包屑的一部分） --- */
.cos-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 20px;font-size:14px;color:var(--cos-text-subtle,#667085)}
.cos-breadcrumb__separator{color:var(--cos-text-muted,#8a94a6)}
.cos-breadcrumb__current{color:var(--cos-text,#1f2430);font-weight:600}
.cos-breadcrumb__back{margin-left:auto;min-height:32px;height:32px;padding:0 12px;font-size:13px}

/* --- Page Header --- */
.cos-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 24px}
.cos-page-header__main{display:flex;flex-direction:column;gap:6px;min-width:0}
.cos-page-header__title{margin:0;display:flex;align-items:center;gap:10px;font-size:var(--cos-fs-page-title,28px);font-weight:var(--cos-fw-page-title,700);color:var(--cos-text,#1f2430)}
.cos-page-header__description{margin:0;font-size:var(--cos-fs-small,14px);font-weight:400;color:var(--cos-text-subtle,#667085)}
.cos-page-header__actions{display:flex;align-items:center;gap:12px;flex:none}

/* --- Card（禁止 Card 套 Card：.cos-card 本身即最外層可見容器） --- */
.cos-card{background:var(--cos-surface,#fff);border:1px solid var(--cos-border,#e5e7eb);border-radius:var(--cos-radius-md,12px);box-shadow:var(--cos-shadow-sm,0 1px 3px rgba(16,24,40,.06));padding:24px;margin:0 0 24px}
.cos-card:last-child{margin-bottom:0}
.cos-card__header{margin:0 0 20px}
.cos-card__header-title{margin:0;padding-left:12px;border-left:3px solid var(--cos-accent,#0f6cbd);font-size:var(--cos-fs-card-title,18px);font-weight:var(--cos-fw-card-title,600);color:var(--cos-text,#1f2430)}
.cos-card__body{min-width:0}
.cos-card__footer{display:flex;gap:12px;margin-top:24px}
.cos-card__footer .cos-btn{min-width:190px;max-width:230px;height:44px}
/* Card body 兩欄變體（例如診所假日設定的左右欄位分組）——用 child combinator 選取分欄，
   刻意不新增額外具名 class，維持 Phase 1「只建立 A-F 六類元件」的範圍。 */
.cos-card__body--split{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.cos-card__body--split>div{display:flex;flex-direction:column;gap:18px;min-width:0}
.cos-card__body--split>div+div{padding-left:36px;border-left:1px solid var(--cos-border,#e5e7eb)}

/* --- Toolbar／Filter Bar --- */
.cos-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;background:var(--cos-surface,#fff);border:1px solid var(--cos-border,#e5e7eb);border-radius:var(--cos-radius-md,12px);box-shadow:var(--cos-shadow-sm,0 1px 3px rgba(16,24,40,.06));padding:24px;margin:0 0 24px}
.cos-toolbar__filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:20px}
.cos-toolbar__actions{display:flex;gap:12px;flex-wrap:wrap}

/* --- Field（label + control，供 Toolbar／Card 內表單共用） --- */
.cos-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cos-field__label{font-size:var(--cos-fs-label,15px);font-weight:var(--cos-fw-label,600);color:var(--cos-text,#1f2430)}
.cos-field__control{height:44px;border:1px solid #d8dee9;border-radius:8px;background:#fff;padding:0 12px;box-sizing:border-box;min-width:200px}
.cos-field__control:not(select){min-width:0}
select.cos-field__control{min-width:200px}
.cos-field__control:focus{outline:0;border-color:var(--cos-accent-soft-border,#cfe3fb);box-shadow:0 0 0 3px var(--cos-accent-soft,#eef6fe)}

/* Temporary post-scroll edit highlight (e.g. Role edit workflow): a steady blue glow, not a blink/flash.
   JS adds this class right after focusing the field post-scroll and removes it ~1000ms later — CSS only
   defines the glow + its fade-out, no keyframe/animation-based flicker. */
.cos-edit-focus{border-color:var(--cos-accent,#0f6cbd)!important;box-shadow:0 0 0 3px var(--cos-accent-soft,#eef6fe),0 0 0 1px var(--cos-accent,#0f6cbd)!important;transition:box-shadow .6s ease,border-color .6s ease}

/* --- Table Card --- */
.cos-table-card{background:var(--cos-surface,#fff);border:1px solid var(--cos-border,#e5e7eb);border-radius:var(--cos-radius-md,12px);box-shadow:var(--cos-shadow-sm,0 1px 3px rgba(16,24,40,.06));padding:24px}
.cos-table-card__title{margin:0 0 12px;font-size:var(--cos-fs-card-title,18px);font-weight:var(--cos-fw-card-title,600);color:var(--cos-text,#1f2430)}
.cos-table{width:100%;border:1px solid var(--cos-border,#e5e7eb);border-radius:10px;overflow:hidden;border-collapse:separate;border-spacing:0}
.cos-table th{background:var(--cos-surface-muted,#f7f8fa);font-weight:600;height:48px;padding:0 12px;text-align:left;border-bottom:1px solid var(--cos-border,#e5e7eb);font-size:var(--cos-fs-body,16px)}
.cos-table td{height:48px;padding:8px 12px;border-bottom:1px solid #eef1f5;font-size:var(--cos-fs-body,16px)}
.cos-table tr:last-child td{border-bottom:0}
.cos-table tbody tr:hover{background:var(--cos-accent-soft,#eef6fe)}
.cos-table__empty td{text-align:center;color:var(--cos-text-muted,#8a94a6)}
.cos-table__empty:hover{background:transparent}

@media(max-width:900px){
  .cos-page-header{flex-direction:column;align-items:stretch}
  .cos-card__body--split{grid-template-columns:1fr}
  .cos-card__body--split>div+div{padding-left:0;border-left:0;margin-top:18px}
  .cos-card__footer{flex-direction:column}
  .cos-card__footer .cos-btn{max-width:none;width:100%}
  .cos-toolbar{flex-direction:column;align-items:stretch}
  .cos-toolbar__actions{flex-direction:column}
  .cos-toolbar__actions .cos-btn{width:100%}
}

.shift-calendar-v223{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:10px}
.shift-calendar-header-v223{font-weight:800;text-align:center;color:#344054}
.shift-calendar-day-v223{border:1px solid #d0d5dd;border-radius:10px;min-height:58px;padding:6px;background:#fff;cursor:pointer}
.shift-calendar-day-v223{color:#344054}
.shift-calendar-day-v223 .day-num{font-weight:800}
.shift-calendar-day-v223 .day-tag{display:block;font-size:11px;color:#667085;margin-top:4px}
.shift-calendar-day-v223.is-selected{background:#ecfdf3;border-color:#86efac;color:#166534}
.shift-calendar-day-v223.is-holiday{background:#fff1f2;border-color:#fecdd3;color:#b42318;cursor:not-allowed}
.shift-calendar-day-v223.is-holiday .day-num{font-weight:900;color:#b42318}
.shift-calendar-day-v223.is-empty{visibility:hidden;pointer-events:none}
.appt-group-block-v2{border:1px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff;margin-top:8px}
.appt-group-block-v2 h4{margin:0 0 8px;color:#0f172a}
.appt-slot-table-v212{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border:1px solid #e4e7ec;border-radius:12px;overflow:hidden;margin-top:8px}
.appt-slot-table-v212 thead th{background:#f2f4f7;font-weight:800;color:#111827;border-bottom:1px solid #e4e7ec}
.appt-slot-table-v212 th,.appt-slot-table-v212 td{padding:2px 6px;border-right:1px solid #e4e7ec;border-bottom:1px solid #e4e7ec;vertical-align:top}
.appt-slot-table-v212 tr:last-child th,.appt-slot-table-v212 tr:last-child td{border-bottom:0}
.appt-slot-table-v212 th:last-child,.appt-slot-table-v212 td:last-child{border-right:0}
.appt-slot-table-v212 colgroup col:first-child{width:60px!important}
.appt-slot-table-v212 tbody th{width:60px;background:#fcfcfd;font-weight:700;color:#344054;font-size:13px;line-height:1.1;white-space:nowrap}
.appt-slot-table-v212 thead th:first-child,.appt-slot-table-v212 tbody th{width:56px;min-width:56px;max-width:56px;padding-left:2px;padding-right:2px}
.appt-slot-cell-v212{min-height:36px;background:#fff}
.appt-slot-stack-v212{display:flex;flex-direction:column;gap:2px;min-height:32px;align-items:flex-start}
.appt-slot-card-v212{border:1px solid #d0d5dd;border-radius:8px;padding:2px 10px 2px 4px;width:89%;position:relative;overflow:hidden}
.appt-slot-card-v212::after{content:'';position:absolute;top:0;right:0;bottom:0;width:6px;background:var(--appt-type-color,#98a2b3);border-top-right-radius:8px;border-bottom-right-radius:8px}
.appt-slot-card-v212.is-cancel{opacity:.75}
.appt-slot-row-v212{display:flex;justify-content:space-between;gap:6px;font-size:12px;margin-bottom:2px}
.appt-slot-item-v212{font-weight:800;color:#101828;font-size:13px;line-height:1.25;margin-bottom:1px}
.appt-slot-meta-v212{font-size:12px;color:#475467;line-height:1.25}
.appt-slot-line1-v212{font-weight:800;color:#101828;font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt-slot-line2-v212{font-size:12px;color:#344054;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0}
.appt-slot-line3-v212{font-size:12px;color:#475467;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.appt-slot-actions-v212{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.appt-slot-actions-v212 button{padding:1px 4px;border-radius:7px;font-size:10.5px;line-height:1.1;min-height:20px}
.appt-slot-col-alt-v225{background:#f5f3ff}
.note-box-v225{min-height:92px;border:1px dashed #d0d5dd;border-radius:12px;background:#fcfcfd}
.note-box-v225.is-empty{color:#98a2b3}
.doctor-shift-ranges-v225{display:grid;gap:8px;margin:10px 0}
.doctor-shift-range-row-v225{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}

#dashboard .dashboard-note-panel-v225{margin:0}
#dashboard .dashboard-appt-panel-v225{margin:0}
#dashboard .dashboard-note-panel-v225 .note-box-v225{min-height:170px;white-space:normal;line-height:1.45;padding:10px 12px;cursor:text}
#dashboard .dashboard-note-panel-v225 .note-handover-list-v225{display:flex;flex-direction:column;gap:8px}
#dashboard .dashboard-note-panel-v225 .note-entry-v225{border:1px solid #d0d5dd;border-radius:10px;background:#f8fafc;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#dashboard .dashboard-note-panel-v225 .note-entry-v225.is-draft{background:#fff;border-color:#93c5fd;box-shadow:0 0 0 2px rgba(147,197,253,.25)}
#dashboard .dashboard-note-panel-v225 .note-entry-content-v225{white-space:pre-wrap;min-height:26px;outline:none;color:#b42318;font-size:14px;font-weight:400;flex:1;min-width:0}
#dashboard .dashboard-note-panel-v225 .note-entry-editor-v225{display:flex;align-items:end;gap:8px;flex-shrink:0}
#dashboard .dashboard-note-panel-v225 .note-entry-editor-v225 label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:#475467}
#dashboard .dashboard-note-panel-v225 .note-entry-editor-v225 input[type=date]{min-width:150px;padding:6px 8px}
#dashboard .dashboard-note-panel-v225 .note-entry-meta-v225{font-size:12px;color:#667085;line-height:1.35;white-space:nowrap;flex-shrink:0}
#dashboard .dashboard-note-panel-v225 .note-add-placeholder-v225{border:1px dashed #d0d5dd;border-radius:10px;padding:8px 10px;background:#fcfcfd;color:#98a2b3;font-size:12px}

.dash-slot-wrap-v212{position:relative}
.dash-slot-table-v212 tbody th{width:56px;min-width:56px;max-width:56px}
.dash-slot-nowline-v212{position:absolute;height:2px;background:#dc2626;pointer-events:none;z-index:3}
.dash-slot-table-v212 tbody th,.dash-slot-table-v212 tbody td{padding-top:13px;padding-bottom:13px}

/* Row grid density pass: on-the-hour rows keep a visible divider, half-hour rows fade
   almost to nothing, so the empty grid reads lighter without losing the hour markers.
   Row class is assigned in app.js purely from the slot label string (":00" vs ":30") —
   no schedule/appointment data changes. */
.dash-slot-table-v212 tbody tr.dash-row-hour-v3 th,
.dash-slot-table-v212 tbody tr.dash-row-hour-v3 td{border-bottom:1.5px solid #ccd2dc}
.dash-slot-table-v212 tbody tr.dash-row-half-v3 th,
.dash-slot-table-v212 tbody tr.dash-row-half-v3 td{border-bottom:1px solid #f1f3f6}

#dashboard .cards .card{display:grid;grid-template-columns:44px 1fr;grid-template-areas:'icon label' 'icon value';column-gap:12px;row-gap:2px;align-items:center;padding:12px 16px}
#dashboard .cards .card::before{grid-area:icon;content:'';width:38px;height:38px;border-radius:999px;display:block;background:#e5e7eb;box-shadow:inset 0 0 0 1px #d0d5dd}
#dashboard .cards .card span{grid-area:label;font-size:13px;color:#4b5563}
#dashboard .cards .card strong{grid-area:value;font-size:22px;line-height:1.1}
#dashboard .cards .card:nth-child(1)::before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="%232563eb" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4.5" width="13" height="12" rx="1.6"/><path d="M3.5 8.3h13M7 3v3M13 3v3"/></svg>');display:grid;place-items:center;background:#dbeafe}
#dashboard .cards .card:nth-child(2)::before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="%2316a34a" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"/><path d="M10 6v8M12.6 8.2c0-1.1-1.2-1.9-2.6-1.9s-2.6.8-2.6 1.9 1.2 1.5 2.6 1.7 2.6.7 2.6 1.8-1.2 1.9-2.6 1.9-2.6-.8-2.6-1.9"/></svg>');display:grid;place-items:center;background:#dcfce7}
#dashboard .cards .card:nth-child(3)::before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="%23c2410c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8c1.6 2.4 5.2 7.3 5.2 10.2a5.2 5.2 0 1 1-10.4 0c0-2.9 3.6-7.8 5.2-10.2z"/></svg>');display:grid;place-items:center;background:#ffedd5}
#dashboard .cards .card:nth-child(4)::before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="%237c3aed" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.1"/><path d="M4 17c0-3.3 2.7-5.6 6-5.6s6 2.3 6 5.6"/></svg>');display:grid;place-items:center;background:#f3e8ff}

.dash-slot-table-v212 .appt-slot-cell-v212{position:relative;overflow:visible;min-height:14px}
.dash-slot-table-v212 .appt-slot-stack-v212{align-items:stretch;gap:3px;min-height:10px;overflow:visible}
.dash-slot-table-v212 .appt-slot-card-v212{width:100%;padding:16px 18px;border-radius:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;height:auto;min-height:68px;background:#fbfcfe;border-color:#e4e7ec}
/* Low-saturation pass: the full-tint employee background becomes a thin left accent
   bar instead, over a near-white card. Same serviceColor()-derived color, just applied
   as --appt-staff-accent (set in app.js) rather than filling the whole card. */
.dash-slot-table-v212 .appt-slot-card-v212::before{content:'';position:absolute;top:0;left:0;bottom:0;width:5px;background:var(--appt-staff-accent,#98a2b3);border-top-left-radius:10px;border-bottom-left-radius:10px}
.dash-slot-table-v212 .dash-card-main-v212{min-width:0;flex:0 1 60%;display:flex;flex-direction:column;gap:6px}
.dash-slot-table-v212 .appt-slot-line1-v212{display:flex;align-items:baseline;gap:10px;white-space:normal;overflow:visible;text-overflow:clip}
.dash-slot-table-v212 .dash-chart-v212{font-size:16px;font-weight:600;color:#334155;white-space:nowrap}
.dash-slot-table-v212 .dash-name-v212{font-size:20px;font-weight:700;color:#111827;white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}
.dash-slot-table-v212 .dash-phone-v212{font-size:13px;font-weight:600;color:#374151;white-space:nowrap}
.dash-slot-table-v212 .appt-slot-line2-v212{font-size:15px;font-weight:500;color:#1f2937;white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}
.dash-slot-table-v212 .appt-slot-line3-v212{font-size:12.5px;color:#475467;white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}

/* ===== Presentation Architecture V1 — 時段日曆卡片採用 cos-* 元件 =====================
   CLINICOS-DASHBOARD-APPOINTMENT-SLOT-PRESENTATION-MIGRATION
   卡片改以 .cos-card 為語意基底、狀態改 .cos-status、服務人員改 .cos-badge。
   幾何仍由上方既有的 `.dash-slot-table-v212 .appt-slot-card-v212` 規則決定，
   這裡只處理三件密集版面才會遇到的事：
     1) .cos-card 的 margin-bottom:24px 會撐開 .appt-slot-stack-v212 的 gap:3px → 歸零
     2) .cos-status / .cos-badge 的預設高度對 min-height:68px 的卡片偏大 → 於此縮排
     3) 項目文字與服務人員 Badge 需在同一行對齊
   全部選擇器都限定在 .dash-slot-table-v212 之內，不影響 Playground、預約管理或其他頁面。 */
.dash-slot-table-v212 .appt-slot-card-v212.cos-card{margin:0;box-shadow:none}
.dash-slot-table-v212 .appt-slot-line2-v212{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dash-slot-table-v212 .dash-item-v1{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dash-slot-table-v212 .appt-slot-line2-v212 .cos-badge,
.dash-slot-table-v212 .appt-slot-line2-v212 .cos-status{height:22px;padding:0 8px;font-size:12px;flex:0 0 auto;max-width:none}
.dash-slot-table-v212 .appt-slot-line2-v212 .cos-status .cos-status__dot{width:6px;height:6px;flex-basis:6px}
/* 第一行維持病歷號／姓名／電話三元素；允許整塊換行，姓名本身不逐字斷行。 */
.dash-slot-table-v212 .appt-slot-line1-v212{flex-wrap:wrap}
.dash-slot-table-v212 .dash-name-v212{word-break:normal;overflow-wrap:anywhere}

.dash-slot-table-v212 .dash-actions-v212{margin-top:0;display:flex;flex-direction:row;justify-content:space-between;gap:4px;align-items:center;min-width:0;flex:0 1 40%;width:auto;flex-wrap:nowrap}
.dash-slot-table-v212 .dash-actions-v212 button{width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border-radius:6px;font-size:11px;font-weight:700;line-height:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px;border:1px solid #d0d5dd;background:#fff;flex:0 0 48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-slot-table-v212 .dash-actions-v212 button::before{font-size:14px;line-height:1}
.dash-slot-table-v212 .dash-actions-v212.dash-actions-icons-v225{justify-content:flex-end;gap:8px;flex:0 0 auto;width:auto}
.dash-slot-table-v212 .dash-actions-v212.dash-actions-icons-v225 button{width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border-radius:8px;font-size:0;flex:0 0 48px}
.dash-slot-table-v212 .dash-actions-v212.dash-actions-icons-v225 button .dash-icon-v3{width:22px;height:22px}
.dash-slot-table-v212 .dash-actions-v212.dash-actions-icons-v225 .dash-action-spacer-v225{width:48px;height:48px;min-width:48px;min-height:48px;flex:0 0 48px;visibility:hidden;pointer-events:none}
/* White button base + colored icon only (icon color = this rule's `color`, via
   dashIcon()'s stroke="currentColor") — was a tinted background per action. */
.dash-slot-table-v212 button.slot-action-confirm-v212{background:#fff;color:#166534;border-color:#bbf7d0}
.dash-slot-table-v212 button.slot-action-cancel-v212{background:#fff;color:#991b1b;border-color:#fecdd3}
/* CHECKIN-LATENCY-002 §F —— 上面兩條 (0,2,1) 會蓋掉 .cos-btn--secondary:disabled (0,2,0)，
   使得日曆卡片上的動作鈕停用時看不出來。這裡只是把「既有的 disabled 配色」以足夠的特異度
   套回來，值與 .cos-btn--secondary:disabled 相同，沒有新增任何視覺語彙。 */
.dash-slot-table-v212 button.slot-action-confirm-v212:disabled,
.dash-slot-table-v212 button.slot-action-cancel-v212:disabled{background:#f8fafc;color:#94a3b8;border-color:#e2e8f0;cursor:progress}
.dash-slot-table-v212 button.slot-action-sales-v212{background:#fff;color:#1d4ed8;border-color:#bfdbfe}
.dash-slot-table-v212 button.slot-action-usage-v212{background:#fff;color:#7e22ce;border-color:#e9d5ff}
.dash-slot-table-v212 button.slot-action-usage-v212.usage-done-v230{background:#fff;color:#166534;border-color:#bbf7d0}
.dash-slot-table-v212 button.slot-action-photo-v212{background:#fff;color:#475569;border-color:#e2e8f0}

/* ===== ClinicOS V3 Dashboard UI Polish (BUSINESS-DASHBOARD-UI-POLISH-001) =====
   Shared linear icon sizing + 今日銷售/今日耗療 action-column icon buttons +
   今日注意事項 empty-state. Visual-only, no workflow/logic change. ===== */
.dash-icon-v3{width:18px;height:18px;display:inline-block;vertical-align:middle;flex:none}
#todaySalesRows .dash-table-actions-v3,#todayUsageRows .dash-table-actions-v3{display:flex;width:100%;justify-content:center;align-items:center;gap:6px}
#todaySalesRows .dash-table-icon-btn-v3,#todayUsageRows .dash-table-icon-btn-v3{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#475467;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
#todaySalesRows .dash-table-icon-btn-v3:hover,#todayUsageRows .dash-table-icon-btn-v3:hover{background:#f2f4f7;color:#0f172a}
#todaySalesRows .dash-table-icon-btn-v3.is-done{background:#ecfdf3;color:#166534;border-color:#bbf7d0}
#dashboard .dashboard-note-panel-v225 .note-box-v225.is-empty{min-height:0}
#dashboard .dashboard-note-panel-v225 .note-add-placeholder-v225.note-add-empty-v3{display:flex;align-items:center;gap:10px;border:1px solid #d0d5dd;border-radius:10px;background:#f8fafc;padding:12px 14px;color:#475467;font-size:13px;font-weight:600}
#dashboard .dashboard-note-panel-v225 .note-add-placeholder-v225.note-add-empty-v3 .dash-icon-v3{width:18px;height:18px;color:#16a34a}

/* ===== DAILY-DASHBOARD-UI-POLISH-001-CLOSURE =====
   Consistent :focus-visible ring for the Daily Workstation's icon buttons only
   (keyboard navigation, not mouse). Reuses the same brand-blue ring already used
   elsewhere in the app (.workspace-entry-card-v211 button:focus-visible). ===== */
.dash-slot-table-v212 .dash-actions-v212.dash-actions-icons-v225 button:focus-visible,
#todaySalesRows .dash-table-icon-btn-v3:focus-visible,
#todayUsageRows .dash-table-icon-btn-v3:focus-visible{
  outline:2px solid #1d4ed8;
  outline-offset:2px;
}

/* ===== DAILY-DASHBOARD-SECTION-HEADER-POLISH-001 =====
   Plain-text Section Headers only (no emoji, no icon replacement). Scoped to
   #dashboard so the general Appointment Management page (#appointments), which
   shares .apptx-list-card .table-head h3 and has its own more specific 20px
   override, is unaffected. The already-hidden (aria-hidden) emoji glyphs are kept
   in the DOM (index.html unchanged) and simply not rendered. ===== */
#dashboard .apptx-note-head h3 span[aria-hidden],
#dashboard .apptx-list-card .table-head h3 span[aria-hidden]{
  display:none;
}
#dashboard .apptx-list-card .table-head h3{
  font-size:1.17em;
  color:inherit;
}

@media(max-width:1200px){
  .dash-slot-table-v212 .appt-slot-card-v212{flex-direction:column;align-items:stretch}
  .dash-slot-table-v212 .dash-card-main-v212{flex:1 1 auto}
  .dash-slot-table-v212 .dash-actions-v212{flex:1 1 auto;width:100%}
  .dash-slot-table-v212 .dash-actions-v212 button{width:48px;height:48px;min-width:48px;min-height:48px;font-size:11px;padding:0}
  .dash-slot-table-v212 .dash-actions-v212 button::before{font-size:14px}
}

@media(max-width:900px){
  .appt-customer-summary-grid-v2{grid-template-columns:1fr;}
  .appt-guest-grid-v3{grid-template-columns:1fr;}
  .appt-info-grid-v2{grid-template-columns:1fr;}
  .appt-search-actions-v2{grid-template-columns:1fr;}
}

/* V2.0.4 */
.map-line{display:flex;align-items:center;gap:6px;margin:2px 0}
button.mini{font-size:12px;padding:3px 6px;border-radius:6px}

/* V2.0.5 */
/* .setting-tabs removed from this hide-list: it's the live, currently-used 系統設定 tab row
   (診所資料/員工管理/.../套餐設定/儲值商品設定) — this !important rule always overrode the .setting-tabs
   {display:flex} definition above (line ~499) regardless of source order, unconditionally hiding
   the whole tab bar. Any tab reachable only by clicking it (not by a quick-launcher jumping
   straight to that panel) was never actually clickable. */
/* LEGACY/DEAD MARKUP — Customer/Sales/Usage native tab rows are permanently hidden now that
   navigation runs through the Workspace/Hub cards and (for migrated modules) the shared
   Navigation Shell (NAV_SHELL_MODULES_V1 / renderNavShellV1() in app.js). This is intentional,
   not a bug — do not remove/relax this rule to "bring back" the old tab row. Deleting the
   underlying HTML is a separate, dedicated cleanup after each module's UAT/Freeze sign-off. */
.customer-tabs,.sales-tabs,.usage-tabs{display:none!important}
.customer-tabs button.active-tab{background:#1d4ed8;color:#fff}
.customer-tab.active{background:#1f6feb;color:#fff;border:1px solid #1f6feb}
.customer-editor-head-v07c{margin-bottom:10px}
.customer-card-grid-v4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:14px 12px}
.customer-card-grid-v4 label,.customer-card-grid-v4 .customer-address-row-v07d,.customer-card-grid-v4 .customer-source-related-v07d{min-width:0}
.customer-card-grid-v4 input,.customer-card-grid-v4 select,.customer-card-grid-v4 textarea{width:100%}
.customer-birthday-v07d .birthday-row{grid-template-columns:1.05fr .8fr .8fr;max-width:300px}
.customer-source-related-v07d{display:flex;align-items:end;min-height:76px}
.customer-source-related-v07d .note{padding:10px 12px;border:1px dashed #d0d5dd;border-radius:10px;background:#f8fafc;width:100%}
.source-person-disabled-v07d{width:100%;background:#f2f4f7!important;color:#98a2b3!important;border:1px solid #d0d5dd!important;cursor:not-allowed}
/* 來源人（客戶）＝推薦關係的唯一維護入口。說明文字與 Deep Link 一起掛在欄位下方，
   沿用既有欄位寬度，不新增第二種欄位樣式，也不改變 .customer-card-grid-v4 的格線。 */
.customer-referral-hint-v1{display:block;margin-top:6px;font-size:12px;font-weight:400;line-height:1.6;color:#667085}
.customer-referral-link-v1{margin-left:6px;padding:0;border:0;background:none;color:#1e3a8a;font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer}
.customer-referral-link-v1:hover{color:#1d4ed8}
.customer-address-row-v07d{grid-column:1/3;display:grid;grid-template-columns:120px 140px minmax(220px,1fr);gap:10px}
.customer-address-row-v07d label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.customer-note-v07d textarea{min-height:112px}
.customer-record-meta-v07d{display:grid;justify-content:end;justify-items:end;gap:4px;margin-top:8px;color:#667085;font-size:12px}
.customer-record-meta-v07d div{display:flex;align-items:center;gap:10px}
.customer-record-meta-v07d strong{font-size:13px;color:#101828;min-width:150px;text-align:right}
.customer-editor-actions-v07c{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.customer-editor-actions-v07c .msg{margin-left:0}
#customerPanelCreate{scroll-margin-top:18px}

/* ===== V3/V4 additions: 室內電話/身高/體重/標籤/Card 分區 — scoped to the customer create/edit
   form only (#customerPanelCreate), never to global input/select/label. ===== */
.customer-card-grid-v4 label{font-size:16px}
.customer-card-grid-v4 input,.customer-card-grid-v4 select{min-height:46px;border-radius:12px}
.customer-height-weight-row-v3{grid-column:span 1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.customer-input-suffix-v3{display:flex;align-items:center;min-height:46px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;padding:0 4px 0 12px;transition:border-color .15s ease,box-shadow .15s ease}
.customer-input-suffix-v3:focus-within{border-color:#6cb2f7;box-shadow:0 0 0 3px rgba(0,120,212,.15)}
.customer-input-suffix-v3 input{border:0;min-height:44px;padding:0;background:transparent}
.customer-input-suffix-v3 input:focus{outline:none}
.customer-input-suffix-unit-v3{flex-shrink:0;padding:0 10px;color:#667085;font-size:14px;font-weight:700;border-left:1px solid #eaecf0;margin-left:6px}
.customer-field-error-v3{display:block;margin-top:4px;font-size:13px;color:#b42318;font-weight:600}
.customer-field-error-v3.hidden{display:none}
.customer-field-invalid-v3{border-color:#fda29b!important;background:#fff8f8}

.customer-tags-field-v3{display:flex;flex-direction:column;gap:6px}
.customer-tags-label-v3{font-weight:700;font-size:16px}
.customer-tag-picker-v3{border:1px solid #d0d5dd;border-radius:12px;padding:10px 12px;background:#fff;position:relative}
.customer-tag-chips-v3{display:flex;flex-wrap:wrap;gap:8px;min-height:30px}
.customer-tag-chip-v3{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;border-radius:999px;font-size:14px;font-weight:600;background:color-mix(in srgb, var(--tag-color,#1D4ED8) 12%, white);color:var(--tag-color,#1D4ED8);border:1px solid color-mix(in srgb, var(--tag-color,#1D4ED8) 30%, white)}
.customer-tag-chip-remove-v3{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;border:0;background:transparent;color:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0}
.customer-tag-chip-remove-v3:hover{background:rgba(0,0,0,.08)}
.customer-tag-empty-v3{color:#98a2b3;font-size:14px;padding:4px 2px}
.customer-tag-search-wrap-v3{position:relative;margin-top:8px}
.customer-tag-search-v3{width:100%;min-height:40px;border-radius:10px}
.customer-tag-options-v3{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:220px;overflow-y:auto;background:#fff;border:1px solid #d0d5dd;border-radius:12px;box-shadow:0 8px 20px rgba(16,24,40,.12);padding:6px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.customer-tag-options-v3.hidden{display:none}
.customer-tag-option-v3{height:32px;padding:0 12px;border-radius:999px;border:1px solid #d0d5dd;background:#f8fafc;color:#344054;font-size:13px;font-weight:600}
.customer-tag-option-v3:hover,.customer-tag-option-v3.is-active{background:#eef4ff;border-color:#bfdbfe;color:#1d4ed8}
.customer-tag-option-empty-v3{padding:8px;color:#98a2b3;font-size:13px}
.customer-readonly-v07d .customer-tag-search-wrap-v3{display:none}

/* Card 分區 (section 三/四): Fluent card shell, scoped to #customerPanelCreate only. */
#customerPanelCreate .customer-card-v4{background:#fff;border:1px solid #E5EAF1;border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
#customerPanelCreate .customer-card-v4:last-of-type{margin-bottom:16px}
#customerPanelCreate .customer-card-head-v4{margin-bottom:16px}
#customerPanelCreate .customer-card-head-v4 h4{margin:0;font-size:20px;font-weight:600;color:#101828;display:flex;align-items:center;gap:10px}
#customerPanelCreate .customer-card-head-v4 p{margin:4px 0 0;font-size:13px;color:#667085}
.customer-card-icon-v4{width:20px;height:20px;flex-shrink:0;color:#475467}

/* 客戶查詢列表：正式 Marketing Tags chip（最多 3 個 + N），與舊版 tags 唯讀 fallback */
.customer-tag-list-cell-v4{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.customer-tag-chip-list-v4{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:color-mix(in srgb, var(--tag-color,#1D4ED8) 12%, white);color:var(--tag-color,#1D4ED8);border:1px solid color-mix(in srgb, var(--tag-color,#1D4ED8) 30%, white)}
.customer-tag-chip-more-v4{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;background:#f2f4f7;color:#475467;cursor:default}
.customer-tag-chip-legacy-v4{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;background:#f8fafc;color:#98a2b3;border:1px dashed #d0d5dd}

@media(max-width:1200px){.customer-card-grid-v4{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-address-row-v07d,.customer-note-v07d,.customer-tags-field-v3{grid-column:1/-1}}
@media(max-width:760px){.customer-card-grid-v4{grid-template-columns:1fr}.customer-address-row-v07d{grid-template-columns:1fr}.customer-birthday-v07d .birthday-row{max-width:none}.customer-record-meta-v07d{justify-content:start;justify-items:start}.customer-record-meta-v07d strong{text-align:left;min-width:0}.customer-height-weight-row-v3{grid-template-columns:1fr}}

/* ===== Master-Detail Center Shell (Phase 1, reusable) =====
   Generic .center-* classes are deliberately reusable for future Employee/Vendor/Product/
   Equipment centers per the plan — only .customer-center carries customer-specific look, and
   even that is just spacing/typography already used by the rest of ClinicOS. Nothing here
   touches global table/th/td/input/select/label/button selectors. */
/* Phase 4.2.3: single-column shell — Customer Center's fixed 客戶列表 column is gone, replaced by
   a floating overlay Drawer (see .customer-search-drawer below). .center-main-panel now uses the
   shell's FULL width. position:relative so the trigger/Drawer/backdrop (all position:absolute)
   anchor to the Customer Center workspace itself, not the whole page — see Phase 4.2.3 report
   section 3/10. */
.center-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;height:calc(100vh - 160px);min-height:560px;overflow:hidden;position:relative}
/* .center-list-panel stays the generic, reusable base (background/border/flex layout) per the
   Phase 1 comment above — future non-Drawer Centers can still use it as a plain fixed column.
   Drawer-specific positioning (overlay/transform/width/z-index) lives entirely in the separate,
   Customer-Center-only .customer-search-drawer class added alongside it in index.html, never
   merged into this shared class. width:auto still overrides the pre-existing global
   `aside{width:220px}` rule (line 82, for the OUTER app sidebar) — .center-list-panel is also an
   <aside> — root-caused in Phase 4.2, unrelated to and unaffected by this Drawer change. */
.center-list-panel{width:auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 4px rgba(16,24,40,.05);display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.center-list-toolbar{flex:0 0 auto;padding:16px 16px 8px;border-bottom:1px solid #eef1f5}
.center-list-toolbar h2{margin:0;font-size:17px;font-weight:600;color:#101828}
.center-list-content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 12px 16px}

/* ===== Phase 4.2.3: Customer Search Drawer — edge trigger + overlay Drawer + backdrop. Scoped
   entirely to Customer Center (all three live only inside #customerCenterPanel); none of this
   touches the generic .center-* classes above, the global aside{} sidebar rule, or any other
   Drawer/Modal's z-index (.detail-modal uses 9999 — everything here stays well under that). ===== */
.customer-search-trigger{position:absolute;left:0;top:50%;transform:translateY(-50%);width:52px;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#fff;border:1px solid #e5e7eb;border-left:0;border-radius:0 12px 12px 0;box-shadow:0 2px 10px rgba(16,24,40,.08);color:#1d4ed8;cursor:pointer;z-index:15;padding:10px 4px}
.customer-search-trigger:hover,.customer-search-trigger:focus-visible{background:#eef4ff}
.customer-search-trigger svg{width:20px;height:20px;flex:0 0 auto}
.customer-search-trigger span{font-size:12px;font-weight:700;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:1px}

.customer-search-drawer{position:absolute;inset:0 auto 0 0;width:min(360px,calc(100vw - 32px));z-index:30;transform:translateX(-100%);visibility:hidden;box-shadow:4px 0 24px rgba(16,24,40,.14);transition:transform 200ms ease,visibility 0s linear 200ms}
.customer-search-drawer.is-open{transform:translateX(0);visibility:visible;transition:transform 200ms ease,visibility 0s linear 0s}
.customer-search-drawer-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eef1f5}
.customer-search-drawer-head h3{margin:0;font-size:15px;font-weight:700;color:#101828}
.customer-search-drawer-head-actions{display:flex;gap:6px}
.customer-search-drawer-pin,.customer-search-drawer-close{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#667085;cursor:pointer}
.customer-search-drawer-pin svg,.customer-search-drawer-close svg{width:15px;height:15px}
.customer-search-drawer-pin:hover,.customer-search-drawer-close:hover{background:#f2f4f7}
.customer-search-drawer-pin.is-pinned{background:#eef4ff;border-color:#bfdbfe;color:#1d4ed8}

.customer-search-drawer-backdrop{position:absolute;inset:0;background:rgba(16,24,40,.22);opacity:0;visibility:hidden;z-index:20;transition:opacity 180ms ease,visibility 0s linear 180ms}
.customer-search-drawer-backdrop.is-open{opacity:1;visibility:visible;transition:opacity 180ms ease,visibility 0s linear 0s}

@media(max-width:1280px){
  .customer-search-drawer{width:min(320px,calc(100vw - 32px))}
}
@media(max-width:1024px){
  .customer-search-drawer{width:min(90vw,340px)}
}

.center-main-panel{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;width:100%;overflow:hidden;gap:16px}
.center-entity-header{flex:0 0 auto;width:100%;min-width:0;box-sizing:border-box;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 20px;box-shadow:0 1px 4px rgba(16,24,40,.05)}
.center-tabs{flex:0 0 auto;width:100%;min-width:0;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px;box-shadow:0 1px 4px rgba(16,24,40,.05)}
.center-tab{height:38px;padding:0 18px;border-radius:8px;border:0;background:transparent;color:#475467;font-weight:600;font-size:14px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.center-tab:hover{background:#f2f4f7}
.center-tab.is-active{background:#eef4ff;color:#1d4ed8;box-shadow:inset 0 -2px 0 #1d4ed8}
/* Presentation Architecture V1 — 客戶中心 Breadcrumb 的密度修正。
   CLINICOS-CUSTOMER-CENTER-PRESENTATION-MIGRATION-PHASE1
   .center-shell 是 height:calc(100vh-160px) 的固定高度容器，.center-main-panel 又是
   gap:16px 的 flex column；.cos-breadcrumb 預設的 margin-bottom:20px 會與該 gap 疊加，
   等於從本來就偏窄的 Tab 內容區（overflow-y:auto）再吃掉 20px。此處只在這個固定高度
   Shell 內把 margin 歸零，間距交給既有的 gap 提供；.cos-breadcrumb 本體不動，
   其他頁面（referralNetwork / crmSearchEngine / 每日工作台）維持原本的 20px。 */
.center-shell .cos-breadcrumb{margin-bottom:0}

/* ==========================================================================
   W3（C1）— 共用 DOM 的 Layer 4 骨架在 Customer Center 情境下隱藏
   --------------------------------------------------------------------------
   #customerPanelCreate（新建客戶）是「同一份 DOM 節點」在自身頁面與 Customer Center
   的 基本資料 Tab 之間搬移（mountCustomerEditorIntoCenterV1 /
   restoreCustomerEditorToOriginalHostV1，搬入點為 #customerCenterContent）。

   它身為獨立頁面時需要 Breadcrumb ＋ Page Header；被搬進 Tab 內時則不該出現
   （Tab 內不應有第二層麵包屑與頁標題）。這裡以「所在容器」判斷情境，
   純 CSS、不新增節點、不改動搬移機制 —— 來回搬移的 DOM 完全等價。

   同時把 .cos-page-shell 的 flex column 還原為 block：在自身頁面需要垂直堆疊
   骨架，在 Tab 內則沿用面板原本的 block 版面。

   註：#customerPanelPhotos 不在此列 —— 盤點時誤判它為獨立頁面，實測發現
   applyCustomerPanelModeV07C() 在 currentTab==='records' 時會與 #customerPanelRecords
   同時顯示，所以它在兩種情境下都是「區塊」而非頁面，已改用 cos-card，無需情境切換。
   ========================================================================== */
#customerCenterContent #customerPanelCreate{ display:block }
#customerCenterContent #customerPanelCreate > .cos-breadcrumb,
#customerCenterContent #customerPanelCreate > .cos-page-header{ display:none }

/* Phase 2 — 客戶中心的次級切換與 off-tab 標題列。
   CLINICOS-CUSTOMER-CENTER-PRESENTATION-MIGRATION-PHASE2
   1) 四組次級切換改用 .cos-tabs--pill。膠囊型本身沒有底線，與主 Tab 的底線型
      在視覺層級上自然區隔；這裡只補「與下方內容的間距」與「窄螢幕可橫向捲動」。
   2) off-tab 標題列：由快捷功能開啟、key 不在主 Tab 列的內容（術前術後照／娃娃圖）
      自帶的標題＋返回出口，標題與按鈕分列兩端。 */
.customer-center .cos-tabs--pill{margin:0 0 16px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
.customer-center .cos-tabs--pill .cos-tabs__item{flex:0 0 auto}
.customer-center .customer-center-offtab-head-v1{margin-bottom:16px}
.customer-center .customer-center-offtab-head-row-v1{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0;
}
.customer-center .customer-center-offtab-head-v1 .cos-card__body{padding-top:12px}

.center-content{flex:1 1 auto;width:100%;min-width:0;min-height:0;box-sizing:border-box;overflow-y:auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 1px 4px rgba(16,24,40,.05)}

/* Phase 4.2: Quick Actions keeps the same bordered-card treatment the old .center-summary-card/
   .center-quick-actions rule gave it (now a single class since #customerCenterSummary no longer
   needs the "card" chrome — it's a row of its own KPI cards instead, styled below). */
.center-quick-actions{flex:0 0 auto;width:100%;min-width:0;box-sizing:border-box;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 20px;box-shadow:0 1px 4px rgba(16,24,40,.05)}
.center-quick-actions h3{margin:0 0 10px;font-size:15px;font-weight:600;color:#101828}

.center-empty-state{color:#98a2b3;font-size:14px;padding:24px 8px;text-align:center}

/* Phase 4.2.3: .center-shell is single-column now (see base rule above) — the old
   grid-template-columns/grid-template-areas overrides for a 客戶列表 grid column no longer apply
   at any breakpoint. .center-list-panel's own height/max-height still narrows on short viewports
   since the Drawer reuses that same base class. This generic (unscoped) narrow-viewport fallback
   is left exactly as Phase 4.2 defined it — any future non-Customer Center reuse of .center-shell
   still gets it; Phase 4.2.4's Customer-Center-only override below wins on specificity where it
   applies, without needing to edit this block at all. */
@media(max-width:1199px){
  .center-shell{height:auto}
  .center-list-panel{height:auto;max-height:70vh}
  .center-main-panel{height:auto}
  .center-content{max-height:60vh}
}

/* ===== Phase 4.2.4: unified main-content scrolling, Customer Center ONLY (.customer-center
   scope) — overrides the shared .center-main-panel/.center-content Phase-1 base rules above
   without touching them, so any future non-Customer Center use of those classes is unaffected.
   Header/KPI/Quick Actions/Tabs/Content now all scroll together as ONE region
   (.center-main-panel) instead of Tabs staying fixed above a short, independently-scrolling
   .center-content box — see Phase 4.2.4 report section 1/2. Drawer scrolling (客戶列表 result
   list, .center-list-content) is a separate DOM/overflow, untouched by this. No position:sticky,
   no JS wheel listener — plain CSS overflow only. */
.customer-center .center-main-panel{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.customer-center .center-content{flex:0 0 auto;min-height:auto;overflow:visible}
@media(max-width:1199px){
  /* Phase 4.2's original <1200px fallback let the whole page grow/scroll instead of the panel
     (.center-shell/.center-main-panel got height:auto there). Phase 4.2.4 explicitly requires
     "所有尺寸都必須：主內容可捲動" (main panel itself scrolls at every tested width, not the
     page) — scoped override keeps both bounded+scrolling even under 1200px. */
  .customer-center.center-shell{height:calc(100vh - 160px)}
  .customer-center .center-main-panel{height:100%}
  .customer-center .center-content{max-height:none}
}

/* ===== Customer Center — Phase 2A (list/identity/summary/quick-action look) =====
   Everything below is scoped under .customer-center so it can never leak into other pages;
   none of it redefines a .center-* layout class from the Phase 1 block above. */
.customer-center .center-list-toolbar h2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.customer-center .center-list-toolbar h2 button{height:26px;padding:0 10px;font-size:12px;border-radius:6px}
.customer-center .center-list-toolbar input[type="text"]{width:100%;box-sizing:border-box;margin-top:10px;height:34px;padding:0 10px;border:1px solid #d0d5dd;border-radius:8px;font-size:13px}
.customer-center-list-filters{display:flex;gap:8px;margin-top:8px}
.customer-center-list-filters select{flex:1 1 0;min-width:0;height:32px;padding:0 6px;border:1px solid #d0d5dd;border-radius:8px;font-size:12px;color:#344054;background:#fff}

.customer-center-list{display:flex;flex-direction:column;gap:6px}
.customer-center-list-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid #eef1f5;border-radius:10px;padding:8px 10px;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s ease,background-color .15s ease}
.customer-center-list-item:hover{background:#f9fafb}
.customer-center-list-item.is-selected{border-color:#1d4ed8;background:#eef4ff}
/* Phase 4.2 section 十: small identity avatar + two-row body (name/tags/total, then meta) —
   same fields as before, just an added avatar and a tighter grouping. */
.customer-center-list-item-avatar{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#eef4ff;color:#1d4ed8;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.customer-center-list-item-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.customer-center-list-item-row1{display:flex;align-items:center;gap:6px;min-width:0}
.customer-center-list-item-name{font-weight:600;color:#101828;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Phase 4.2.3 section 十一: ellipsis so a long chart/phone/最近來診 line never wraps and grows the
   card past the 72-88px target — same class reused for both the chart/phone line and the new 最近
   來診 line (two sibling spans, each becomes its own row via the flex-column body above). */
.customer-center-list-item-meta{color:#667085;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-center-list-item-tags{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.customer-center-list-item-total{margin-left:auto;flex:0 0 auto;color:#101828;font-size:13px;font-weight:600}

.customer-center-avatar{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:#eef4ff;color:#1d4ed8;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ===== Phase 4.3: Header V2 — three scan zones (Identity | Details | Side), reusing the SAME
   #customerCenterHeader/.customer-center-header-card element index.html already applies (no HTML
   change needed — .customer-center-header-card's own display is retargeted from flex to grid
   here, replacing the old single-row .customer-center-identity-* layout it used to hold). Height
   budget: identity/details/side are all align-items:center on one grid row, so total Header
   height is driven by content (name + one detail line), landing in the ~112-128px target without
   any fixed height rule forcing it. ===== */
.customer-center-header-card{min-height:112px;display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(420px,2fr) minmax(180px,auto);gap:20px;align-items:center}

.customer-center-header-identity{display:flex;align-items:center;gap:14px;min-width:0}
.customer-center-header-name-block{min-width:0}
.customer-center-header-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.customer-center-header-name-row h2{margin:0;font-size:19px;font-weight:700;color:#101828;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.customer-center-header-tags{display:flex;flex-wrap:wrap;gap:4px}
.customer-center-header-record{margin-top:4px;color:#667085;font-size:13px}

/* Round 2 (2026-07-24): 電話/性別/生日年齡/來源 column ratio — was an equal 4-way split, which
   left too little room for 生日／年齡's "058/02/02（67歲）" once the value text grew to 16px
   (below). 性別 stays narrow (single character), 電話/來源 keep a modest share, 生日／年齡 gets
   the extra width so it never needs the ellipsis. Overall 3-column header grid (identity/details
   /side) is untouched — this only re-splits the details sub-grid's own 4 tracks. */
.customer-center-header-details{display:grid;grid-template-columns:0.95fr 0.6fr 1.75fr 0.9fr;gap:10px 16px;min-width:0}
.customer-center-header-detail-item{display:flex;flex-direction:column;gap:2px;min-width:0}
.customer-center-header-detail-item span{color:#98a2b3;font-size:11px}
.customer-center-header-detail-item b{color:#101828;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 最近來診／建立日期 gap tightened (16px→10px) so the value-text growth below doesn't push this
   auto-sized 3rd grid column wider and squeeze 生日／年齡's column back down. */
.customer-center-header-side{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:nowrap;min-width:0}
.customer-center-header-status-item{display:flex;flex-direction:column;gap:2px;text-align:right;min-width:0}
.customer-center-header-status-item span{color:#98a2b3;font-size:11px}
.customer-center-header-status-item b{color:#101828;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-center-header-switch{flex:0 0 auto}

.customer-center-header-empty-v1{display:flex;align-items:center;justify-content:space-between;gap:16px}
.customer-center-header-empty-title{color:#101828;font-size:15px;font-weight:700}
.customer-center-header-empty-sub{margin-top:2px;color:#98a2b3;font-size:13px}

@media(max-width:1280px){
  .customer-center-header-card{grid-template-columns:minmax(240px,1fr) minmax(340px,1.6fr) minmax(160px,auto);gap:14px}
  .customer-center-header-details{gap:8px 12px}
}
@media(max-width:1024px){
  .customer-center-header-card{grid-template-columns:1fr;gap:12px;align-items:start}
  .customer-center-header-details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .customer-center-header-side{justify-content:flex-start;flex-wrap:wrap}
}

/* Phase 4.2 section 六: horizontal KPI row (replaces the old vertical .customer-center-summary-grid
   list). #customerCenterSummary itself carries no card chrome any more — each KPI is its own card.
   Phase 4.2.1 root-cause fix: the grid MUST be on #customerCenterSummaryBody, not on
   .customer-center-kpi-row (the outer <section id="customerCenterSummary">) — the 5
   .customer-center-kpi-card elements are children of #customerCenterSummaryBody, not direct
   children of the <section>. Putting display:grid on the <section> made #customerCenterSummaryBody
   a single grid item (one column wide, ~182px), so the 5 cards stacked vertically inside it in
   normal block flow — invisible to the grid entirely. See Phase 4.2.1 report section 1/2. */
.customer-center-kpi-row{width:100%;min-width:0;box-sizing:border-box}
#customerCenterSummaryBody{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:100%;min-width:0;box-sizing:border-box}
@media(max-width:1399px){#customerCenterSummaryBody{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1099px){#customerCenterSummaryBody{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phase 4.2.2 section 三/四: repositions the SAME 4 existing sibling children (icon/title/value/
   sub — see customerCenterKpiCardHtmlV1 in CustomerModuleV23.js, unmodified this phase) via CSS
   Grid areas instead of a plain flex-column stack, so icon+title share row 1 (icon never pushes
   the title to its own line), value is row 2, sub is row 3. No HTML/JS change needed. */
.customer-center-kpi-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon title" "value value" "sub sub";column-gap:10px;row-gap:4px;align-content:start;min-width:0;min-height:110px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.customer-center-kpi-icon{grid-area:icon;align-self:start;flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:#eef4ff;color:#1d4ed8;display:flex;align-items:center;justify-content:center}
.customer-center-kpi-icon svg{width:17px;height:17px}
.customer-center-kpi-title{grid-area:title;align-self:start;min-width:0;line-height:32px;color:#667085;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-center-kpi-value{grid-area:value;margin-top:2px;color:#101828;font-size:24px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-center-kpi-sub{grid-area:sub;color:#98a2b3;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* #customerCenterSummary itself needs the empty-state (no customer selected) to read like a
   normal card row, not a bare 5-column grid with one stray line of text in the first cell. */
#customerCenterSummary .center-empty-state{grid-column:1/-1;background:#fff;border:1px solid #e5e7eb;border-radius:12px}

/* Phase 4.2 section 七: horizontal Quick Actions row (replaces the old vertical stack). */
.customer-center-quick-actions-row{display:flex;flex-wrap:wrap;gap:10px}
.customer-center-action{height:38px;padding:0 16px;border-radius:8px;border:1px solid #d0d5dd;background:#fff;color:#344054;font-weight:600;font-size:13px;cursor:pointer;transition:background-color .15s ease}
.customer-center-action:hover:not(:disabled){background:#f2f4f7}
.customer-center-action:disabled{color:#c0c5cf;border-color:#eaecf0;cursor:not-allowed}

@media(max-width:760px){
  #customerCenterSummaryBody{grid-template-columns:1fr}
}

/* ===== Customer Center — Phase 2B (mounted 基本資料 editor) =====
   #customerPanelCreate keeps its own .panel/.customer-card-v4 classes/CSS untouched everywhere
   else; this rule only applies while it is a DIRECT descendant of #customerCenterContent (i.e.
   physically mounted there), so the old 新建客戶/客戶資料查詢 pages are pixel-identical to before.
   Single-column, full-width stacking is used deliberately instead of a 2-column wrapper grid:
   .customer-card-grid-v4's own internal 4-column layout switches on VIEWPORT width (not the
   narrower Center content column), so forcing 2 cards side-by-side here made every field wrap and
   overlap at common desktop widths — full-width single column is the safe, correct choice. */
#customerCenterContent > #customerPanelCreate.panel{background:transparent;box-shadow:none;padding:0;margin:0;border-radius:0}
/* Center's content column (~950px at 1600px viewport) is narrower than the old page's main
   column (~1256px), so .customer-card-grid-v4's default 4-column layout (which only switches to
   2 columns below a 1200px VIEWPORT width, not container width) wrapped/overlapped labels here.
   Reuse the existing 2-column fallback — same grid, same field order, just fewer columns. */
#customerCenterContent .customer-card-grid-v4{grid-template-columns:repeat(2,minmax(0,1fr))}
#customerCenterContent .customer-address-row-v07d,
#customerCenterContent .customer-note-v07d,
#customerCenterContent .customer-tags-field-v3{grid-column:1/-1}

/* ===== Customer Center — 基本資料 Round 1 (2026-07-24): left/right field layout + low-
   saturation section headers. Scoped under #customerCenterContent only (same pattern as Phase
   2B above) so the standalone 新建客戶 page keeps its original 4-column layout/plain headers —
   this same #customerPanelCreate DOM node is only restyled while mounted inside Customer Center.
   No field added/removed/renamed, no id/onchange/business logic touched — pure grid placement +
   background-color. */

/* Section header tint — same margin/padding-cancellation technique as the Overview cards
   (round 3): negative margin exactly cancels the card's own 24px padding and is re-added as the
   head's own padding, so the h4/icon keep the identical on-screen position and the card's total
   height is unchanged; only the background now paints into that same space, flush to the card's
   rounded top corners. No icon/button added — the existing SVG icon is untouched. */
#customerCenterContent .customer-card-v4 .customer-card-head-v4{
  margin:-24px -24px 16px;
  padding:24px 24px 16px;
  border-radius:16px 16px 0 0;
}
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-card-head-v4{background:#EFF6FF;}
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-card-head-v4{background:#F0FDF4;}
#customerCenterContent .customer-card-v4:nth-of-type(4) .customer-card-head-v4{background:#FFF7ED;}
#customerCenterContent .customer-card-v4:nth-of-type(5) .customer-card-head-v4{background:#F5F3FF;}

/* Round 3 (2026-07-24): Section 1 基本資料 — row1 病歷號30%／姓名50%／性別20%，row2
   生日25%／身分證字號40%／身高17.5%／體重17.5%. Row1 needs 3 unequal tracks and row2 needs 4
   different unequal tracks, so the grid uses a common 40-unit ruler (LCM of the two ratios) and
   each field spans the matching number of units — precise, no fr-rounding drift between rows.
   .customer-height-weight-row-v3 stays display:contents (Round 1) so 身高/體重 place independently. */
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-card-grid-v4{grid-template-columns:repeat(40,minmax(0,1fr));}
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-card-grid-v4>*:nth-child(1){grid-column:1/13;grid-row:1;}  /* 病歷號 30% */
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-card-grid-v4>*:nth-child(2){grid-column:13/33;grid-row:1;} /* 姓名 50% */
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-card-grid-v4>*:nth-child(3){grid-column:33/41;grid-row:1;} /* 性別 20% */
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-card-grid-v4>*:nth-child(4){grid-column:1/11;grid-row:2;}  /* 生日 25% */
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-card-grid-v4>*:nth-child(5){grid-column:11/27;grid-row:2;} /* 身分證字號 40% */
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-card-grid-v4>*:nth-child(6){display:contents;}
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-height-weight-row-v3 label:nth-child(1){grid-column:27/34;grid-row:2;} /* 身高 17.5% */
#customerCenterContent .customer-card-v4:nth-of-type(2) .customer-height-weight-row-v3 label:nth-child(2){grid-column:34/41;grid-row:2;} /* 體重 17.5% */

/* Round 3: Section 2 聯絡資訊 — row1 行動電話40%／室內電話25%／LINE ID35%；row2 地址全寬（內部
   縣市15%／鄉鎮市區15%／詳細地址70%，符合「至少60~70%」的上限，給輸入最大空間）；row3 緊急聯絡人
   40%／關係20%（新增下拉，僅此欄位）／電話40%. 20-unit ruler = LCM(20,5) of row1/row3 ratios. */
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-card-grid-v4{grid-template-columns:repeat(20,minmax(0,1fr));}
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-card-grid-v4>*:nth-child(1){grid-column:1/9;grid-row:1;}   /* 行動電話 40% */
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-card-grid-v4>*:nth-child(2){grid-column:9/14;grid-row:1;} /* 室內電話 25% */
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-card-grid-v4>*:nth-child(3){grid-column:14/21;grid-row:1;} /* LINE ID 35% */
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-card-grid-v4>*:nth-child(4){grid-column:1/21;grid-row:2;}  /* 地址 100% */
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-card-grid-v4>*:nth-child(5){grid-column:1/9;grid-row:3;}   /* 緊急聯絡人姓名 40% */
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-card-grid-v4>*:nth-child(6){grid-column:9/13;grid-row:3;}  /* 關係 20%（新增） */
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-card-grid-v4>*:nth-child(7){grid-column:13/21;grid-row:3;} /* 緊急聯絡人電話 40% */
#customerCenterContent .customer-card-v4:nth-of-type(3) .customer-address-row-v07d{grid-template-columns:15% 15% 1fr;}

/* Section 3 客戶與行銷資訊 — 左:客戶來源/標籤　右:來源明細（選填）/來源人（跟隨來源明細，既有
   欄位，本次未新增/未移除）。標籤 moves out of its old full-width span into the left column. */
#customerCenterContent .customer-card-v4:nth-of-type(4) .customer-card-grid-v4>*:nth-child(1){grid-column:1;grid-row:1;}
#customerCenterContent .customer-card-v4:nth-of-type(4) .customer-card-grid-v4>*:nth-child(2){grid-column:2;grid-row:1;}
#customerCenterContent .customer-card-v4:nth-of-type(4) .customer-card-grid-v4>*:nth-child(3){grid-column:2;grid-row:2;}
#customerCenterContent .customer-card-v4:nth-of-type(4) .customer-card-grid-v4>*:nth-child(4){grid-column:1;grid-row:2;}

/* ===== Customer Center — Phase 2C (概覽 Overview dashboard) =====
   All scoped under .customer-overview (only ever mounted inside #customerCenterContent). The
   2-column grid below uses plain `1fr 1fr` (container-relative, not a fixed px sub-grid like
   .customer-card-grid-v4 had), so it reflows safely at any #customerCenterContent width without
   the overlap issue found in Phase 2B — the narrow-viewport media query is a single-column
   fallback only, never used to force extra columns into a narrow container. */
.customer-overview{display:flex;flex-direction:column;gap:16px}
/* Phase 4.2 section 九: 3-column desktop grid (was 2) — same 6 cards, same order, only the
   column count changed, so 最近消費/剩餘療程/下一次預約 land on row 1 and 最近療程/最近客情/
   客戶標籤 land on row 2 automatically. 重要備註/近期活動時間軸 stay full-width below the grid,
   unchanged (customer-overview-card-wide). */
.customer-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1439px){.customer-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.customer-overview-grid{grid-template-columns:1fr}}

.customer-overview-card{background:#fff;border:1px solid #E5EAF1;border-radius:12px;padding:16px 18px}
.customer-overview-card-wide{grid-column:1/-1}
.customer-overview-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.customer-overview-card-head h4{margin:0;font-size:14px;font-weight:700;color:#101828}
.customer-overview-card-head button{height:26px;padding:0 10px;font-size:12px;border-radius:6px}

/* Round 3: 客戶中心 Overview — six card headers get a low-saturation tint per block, scoped
   to direct children of .customer-overview-grid only (重要備註/近期活動時間軸 wide cards below
   the grid use the same .customer-overview-card-head class but are untouched — not in scope).
   The negative margin exactly cancels the card's own padding and is re-added as padding on the
   head, so h4/button and the list below keep the identical on-screen position/height — only the
   background now paints into that same space and reaches the card's edges/top corners. */
.customer-overview-grid>.customer-overview-card>.customer-overview-card-head{
  margin:-16px -18px 0;
  padding:16px 18px 10px;
  border-radius:12px 12px 0 0;
}
.customer-overview-grid>.customer-overview-card:nth-child(1)>.customer-overview-card-head{background:#EFF6FF;}
.customer-overview-grid>.customer-overview-card:nth-child(2)>.customer-overview-card-head{background:#F0FDF4;}
.customer-overview-grid>.customer-overview-card:nth-child(3)>.customer-overview-card-head{background:#FFF7ED;}
.customer-overview-grid>.customer-overview-card:nth-child(4)>.customer-overview-card-head{background:#F5F3FF;}
.customer-overview-grid>.customer-overview-card:nth-child(5)>.customer-overview-card-head{background:#ECFEFF;}
.customer-overview-grid>.customer-overview-card:nth-child(6)>.customer-overview-card-head{background:#FDF8F0;}

.customer-overview-list{display:flex;flex-direction:column;gap:10px}
.customer-overview-list-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding-bottom:8px;border-bottom:1px solid #F2F4F7}
.customer-overview-list-item:last-child{border-bottom:0;padding-bottom:0}
.customer-overview-list-item.is-deleted{opacity:.6}
.customer-overview-list-item-main{display:flex;gap:10px;font-size:13px;color:#101828;font-weight:600}
.customer-overview-list-item-main span{color:#667085;font-weight:400}
.customer-overview-list-item-sub{flex-basis:100%;color:#475467;font-size:13px}
.customer-overview-list-item-amount{margin-left:auto;color:#101828;font-size:13px;font-weight:600}
.customer-overview-list-item-tags{display:flex;flex-wrap:wrap;gap:6px}
.customer-overview-deleted-tag{color:#B42318;font-size:11px;font-weight:600}
.customer-overview-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.customer-overview-empty{color:#98a2b3;font-size:13px;padding:6px 0}

/* Round 2 (2026-07-24): 剩餘療程 row typography — this card's row (customerCenterEntitlementRowHtmlV1)
   is the only one in the Overview grid using bare <b>/<span> with no -main/-sub wrapper, so it
   fell back to the browser's default bold <b> size instead of the other cards' 13px rhythm.
   Scoped to #customerOverviewEntitlementsV1 only (its unique container id) — no other card's
   markup matches this selector, so 最近消費/下一次預約/最近療程/最近客情/客戶標籤 are untouched. */
#customerOverviewEntitlementsV1 .customer-overview-list-item b{font-size:16px;font-weight:600;}
#customerOverviewEntitlementsV1 .customer-overview-list-item span{font-size:15px;font-weight:400;color:#667085;}

.customer-overview-note-text{max-height:130px;overflow:hidden;color:#344054;font-size:13px;line-height:1.6}
.customer-overview-note.is-expanded .customer-overview-note-text{max-height:none}
.customer-overview-note button{margin-top:8px;height:26px;padding:0 10px;font-size:12px;border-radius:6px}

.customer-overview-timeline{display:flex;flex-direction:column;gap:12px}
.customer-overview-timeline-item{display:grid;grid-template-columns:96px auto 1fr;align-items:start;gap:10px}
.customer-overview-timeline-date{color:#667085;font-size:12px;padding-top:2px}
.customer-overview-type{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.customer-overview-type-sales{background:#ECFDF3;color:#027A48}
.customer-overview-type-usage{background:#FFF6ED;color:#B93815}
.customer-overview-type-appointment{background:#EEF4FF;color:#1D4ED8}
.customer-overview-type-contact{background:#F4F3FF;color:#5925DC}
.customer-overview-timeline-body{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13px;color:#101828}
.customer-overview-timeline-body b{font-weight:600}
.customer-overview-timeline-body span{color:#667085}
@media(max-width:600px){.customer-overview-timeline-item{grid-template-columns:1fr;gap:4px}}

/* ===== Customer Center — Phase 3A (交易 Tab: 銷售/耗療紀錄) =====
   Scoped under .customer-transactions (only ever mounted inside #customerCenterContent). Table
   markup itself is the shared CustomerRender.js helpers' existing .compact-table — untouched
   globally; only the sub-tab bar and the horizontal-scroll wrapper are new here. */
.customer-transactions{display:flex;flex-direction:column;gap:12px;min-width:0}
.customer-transactions-tabs{display:flex;gap:6px;border-bottom:1px solid #E5EAF1;padding-bottom:8px}
.customer-transactions-tab{height:32px;padding:0 14px;border-radius:8px;border:0;background:transparent;color:#475467;font-weight:600;font-size:13px;cursor:pointer}
.customer-transactions-tab:hover{background:#f2f4f7}
.customer-transactions-tab.is-active{background:#eef4ff;color:#1d4ed8}
/* Content pane scrolls horizontally on its own when the table is wider than the Center column —
   the outer .center-shell / #customerCenterContent never gets a page-level horizontal scrollbar. */
.customer-transactions-content{min-width:0;overflow-x:auto}
.customer-transactions-content .compact-table{min-width:640px}

/* ===== Customer Center — Phase 3B (療程 Tab: 剩餘療程/療程歷史) =====
   Same pattern as Phase 3A's 交易 Tab: scoped under .customer-treatments, sub-tab bar is new UI,
   table markup itself is untouched shared .compact-table / .liability-tab-summary-v230 (from
   window.renderLiabilityTabRowsV230()) or .customer-transactions-content's usage-table look
   (reused via window.renderCustomerUsageRecordsV1()). */
.customer-treatments{display:flex;flex-direction:column;gap:12px;min-width:0}
.customer-treatments-tabs{display:flex;gap:6px;border-bottom:1px solid #E5EAF1;padding-bottom:8px}
.customer-treatments-tab{height:32px;padding:0 14px;border-radius:8px;border:0;background:transparent;color:#475467;font-weight:600;font-size:13px;cursor:pointer}
.customer-treatments-tab:hover{background:#f2f4f7}
.customer-treatments-tab.is-active{background:#eef4ff;color:#1d4ed8}
.customer-treatments-content{min-width:0;overflow-x:auto}
.customer-treatments-content .compact-table{min-width:640px}

/* ===== Customer Center — Phase 3C (預約 Tab) =====
   Scoped under .customer-appointments. Same sub-tab-bar + horizontal-scroll-wrapper pattern as
   Phase 3A/3B; the table itself is new markup (appointments never had a shared .compact-table
   renderer to reuse), but deliberately styled identically to the existing .compact-table look. */
.customer-appointments{display:flex;flex-direction:column;gap:12px;min-width:0}
.customer-appointments-head{display:flex;justify-content:flex-end}
.customer-appointments-tabs{display:flex;gap:6px;border-bottom:1px solid #E5EAF1;padding-bottom:8px}
.customer-appointments-tab{height:32px;padding:0 14px;border-radius:8px;border:0;background:transparent;color:#475467;font-weight:600;font-size:13px;cursor:pointer}
.customer-appointments-tab:hover{background:#f2f4f7}
.customer-appointments-tab.is-active{background:#eef4ff;color:#1d4ed8}
.customer-appointments-content{min-width:0}
.customer-appointments-table-wrap{overflow-x:auto}
.customer-appointments-table-wrap .compact-table{min-width:640px}
.customer-appointments-table-wrap .compact-table th:nth-child(1),
.customer-appointments-table-wrap .compact-table td:nth-child(1){width:100px}
.customer-appointments-table-wrap .compact-table th:nth-child(2),
.customer-appointments-table-wrap .compact-table td:nth-child(2){width:72px}
.customer-appointment-note{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-appointment-status{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.customer-appointment-status.is-confirmed{background:#ECFDF3;color:#027A48}
.customer-appointment-status.is-cancelled{background:#FEF3F2;color:#B42318}
.customer-appointment-status.is-pending{background:#F2F4F7;color:#475467}

/* ===== Customer Center — Phase 3D (文件與影像 Tab) =====
   Scoped under .customer-documents. #customerPanelPhotos (the mounted upload form) keeps its own
   existing .panel/.form styling untouched everywhere else — this only neutralizes its outer card
   chrome while mounted (mirrors Phase 2B's identical treatment of #customerPanelCreate), so it
   doesn't render as a nested card-in-a-card now that Media Gallery UI Phase 1 (below) wraps it in
   its own .customer-doc-card-v1 Card. */
.customer-documents{display:flex;flex-direction:column;gap:16px;min-width:0}
.customer-documents-tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid #E5EAF1;padding-bottom:8px}
.customer-documents-tab{height:32px;padding:0 14px;border-radius:8px;border:0;background:transparent;color:#475467;font-weight:600;font-size:13px;cursor:pointer}
.customer-documents-tab:hover{background:#f2f4f7}
.customer-documents-tab.is-active{background:#eef4ff;color:#1d4ed8}
.customer-documents-upload{background:transparent;border:0;padding:0}
.customer-documents-upload > .panel{background:transparent;box-shadow:none;padding:0;margin:0;border-radius:0}
.customer-documents-content{min-width:0}

/* ===== Customer Center — 文件與影像 Media Gallery UI Phase 1 (2026-07-25) =====
   Two stacked Cards (上傳照片／照片紀錄), both reusing the shared .panel Card chrome (white bg/
   radius/shadow) — only their internal layout is new. Photo grid/card/badge rules below are all
   NEW classes (*-gallery-v1/-v1 suffixes) so the old 客戶紀錄 page's .photo-grid/.photo-card
   (still used verbatim by renderPhotos()/goPhotoCustomer221/goPhoto) are completely untouched. */
.customer-doc-card-v1{margin:0}
.customer-doc-card-v1 h4{margin:0 0 14px;font-size:16px;font-weight:700;color:#101828}
/* Document Platform Phase 1: action row for the 術前術後照／娃娃圖／同意書 Tabs, reused by
   電子文件中心. Reuses the existing .panel/.customer-doc-card-v1/.clinic-btn look — no new
   colours, sizes or spacing scale. */
.customer-center-launcher-actions-v1{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
/* 電子文件中心 in-page tab row: the shared .center-tabs component, only spaced for this page. */
.document-center-tabs-v1{margin:14px 0}
/* Phase 2A-1 文件分類／文件模板：只做版面，控制項全部沿用 .cos-table/.cos-btn/.cos-field。 */
.doc-toolbar-v2a{display:flex;justify-content:flex-end;gap:12px;margin-bottom:12px}
.doc-table-v2a{min-width:820px}
.doc-table-v2a code{font-size:12px;color:#475467}
.doc-form-card-v2a{margin-top:16px}
.doc-form-actions-v2a{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.doc-form-actions-v2a .msg{margin-right:auto}
.doc-newversion-field-v2a{margin-top:16px;max-width:520px}
@media(max-width:900px){ .doc-table-v2a{min-width:640px} }
/* 模板列表狀態說明：讓使用者一眼看出「為什麼客戶端沒有這個模板」 */
.doc-warn-v2a{color:#B54708;font-weight:600}
.doc-ok-v2a{color:#067647;font-weight:600}
.doc-reason-v2a{margin-top:4px;font-size:12px;line-height:1.5;color:#B54708}
.doc-designer-footer-v2b .doc-reason-v2a{margin-top:0;margin-right:4px}
.doc-actions-cell-v2a{white-space:nowrap}
.doc-actions-cell-v2a .cos-btn{margin:2px 4px 2px 0}
.consent-empty-action-v2c{margin-top:12px}

/* CLINICOS-V4-CONSENT-MOBILE — 結構化同意書的單欄簽署
   刻意不縮放 A4：字級與行距以「在 390px 上可讀」為準，內容連續捲動不分頁。
   簽名板沿用 .consent-sign-canvas-v2c / .consent-sign-pad-wrap-v2c，不另做一套。 */
.ms-overlay-v2m{position:fixed;inset:0;background:#fff;z-index:960;display:flex;flex-direction:column}
.ms-sheet-v2m{display:flex;flex-direction:column;height:100%;width:100%;max-width:820px;margin:0 auto;background:#fff}
.ms-head-v2m{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid #e4e7ec;background:#fff}
.ms-head-text-v2m{display:flex;flex-direction:column;min-width:0}
.ms-head-text-v2m strong{font-size:15px;color:#101828;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-head-text-v2m span{font-size:12px;color:#667085}
.ms-close-v2m{border:none;background:transparent;font-size:18px;color:#667085;padding:4px 8px;cursor:pointer;line-height:1}
.ms-scroll-v2m{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 12px}
.ms-section-v2m{padding:16px;border-bottom:8px solid #f2f4f7}
.ms-section-v2m:last-child{border-bottom:none}
.ms-section-head-v2m{font-size:12px;font-weight:600;letter-spacing:.06em;color:#667085;margin-bottom:12px}
.ms-doc-v2m{font-size:15px;line-height:1.85;color:#1d2939;word-break:break-word}
.ms-title-v2m{font-size:19px;font-weight:700;text-align:center;margin:0 0 16px;color:#101828;line-height:1.5}
.ms-heading-v2m{font-size:16px;font-weight:600;margin:20px 0 8px;color:#101828;line-height:1.6}
.ms-h2-v2m{font-size:15px}.ms-h3-v2m{font-size:14px}
.ms-para-v2m{margin:0 0 14px;white-space:pre-wrap}
.ms-list-v2m{margin:0 0 14px;padding-left:22px}
.ms-list-v2m li{margin-bottom:8px}
.ms-notice-v2m{margin:0 0 14px;padding:12px 14px;border-radius:8px;font-size:14px;line-height:1.75}
.ms-notice--warn-v2m{background:#fffaeb;border:1px solid #fec84b;color:#93370d}
.ms-notice--info-v2m{background:#eff8ff;border:1px solid #b2ddff;color:#175cd3}
.ms-divider-v2m{border:none;border-top:1px solid #e4e7ec;margin:18px 0}
.ms-info-v2m{margin:0 0 14px;border:1px solid #e4e7ec;border-radius:8px;overflow:hidden}
.ms-info-row-v2m{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:14px;
  border-bottom:1px solid #f2f4f7}
.ms-info-v2m .ms-info-row-v2m:last-child{border-bottom:none}
.ms-info-row-v2m span{color:#667085}
.ms-info-row-v2m b{color:#101828;font-weight:600;text-align:right;word-break:break-all}
.ms-check-v2m{display:flex;align-items:flex-start;gap:12px;padding:14px;margin-bottom:8px;
  border:1px solid #e4e7ec;border-radius:8px;font-size:14px;line-height:1.7;color:#1d2939;cursor:pointer}
.ms-check-v2m.is-required{border-color:#d0d5dd}
.ms-check-v2m input{width:22px;height:22px;flex:none;margin-top:1px}
.ms-check-v2m.is-missing{border-color:#fda29b;background:#fef3f2}
.ms-req-v2m{color:#B42318;font-size:11px;font-weight:600;margin-left:4px}
.ms-sign-v2m{margin-bottom:18px}
.ms-sign-v2m.is-missing .ms-pad-v2m{border-color:#fda29b}
.ms-sign-label-v2m{font-size:14px;color:#344054;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ms-sign-role-v2m{font-size:11px;color:#667085;background:#f2f4f7;border-radius:10px;padding:2px 8px}
.ms-pad-v2m{width:100%}
.ms-clear-v2m{margin-top:8px}
.ms-foot-v2m{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid #e4e7ec;background:#fff;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.ms-foot-v2m .cos-btn{min-height:44px;padding-left:20px;padding-right:20px}
.ms-msg-v2m{flex:1;min-width:0;font-size:12px;color:#475467}

/* CLINICOS-V4-CONSENT-A4 Structured Editor（三欄式）
   沿用 .pdd-overlay-v270 / .pdd-drawer-v270 / .cos-btn / .cos-field，不新增設計系統。
   視覺基調：醫療文件感 —— 冷灰底、白紙、細線、留白；沒有霓虹、玻璃或重卡片。
   A4 紙面內只有文件內容；儲存／發布／區塊工具一律在紙面之外。 */
.a4-editor-overlay-v2e{align-items:stretch;justify-content:center}
.a4-editor-panel-v2e{width:min(1760px,100vw);max-width:1760px;height:100%;display:flex;flex-direction:column;background:#eef0f4}

/* 上方文件工具列：文件名稱／版本／狀態在左，動作在右。刻意保持一列高度，把空間讓給 A4。 */
.a4-topbar-v2e{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:12px 20px;background:#fff;border-bottom:1px solid #dcdfe6;flex:none}
.a4-topbar-doc-v2e{display:flex;flex-direction:column;gap:3px;min-width:0}
.a4-topbar-name-v2e{margin:0;font-size:15px;font-weight:600;color:#101828;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.a4-topbar-sub-v2e{display:flex;align-items:center;gap:10px;min-width:0}
.a4-editor-meta-v2e{font-size:12px;color:#667085;white-space:nowrap}
.a4-save-chip-v2e{font-size:11px;letter-spacing:.02em;color:#087443;background:#ecfdf3;
  border:1px solid #abefc6;border-radius:999px;padding:1px 9px;white-space:nowrap}
.a4-save-chip-v2e.is-dirty{color:#B54708;background:#fffaeb;border-color:#fedf89}
.a4-editor-actions-v2e{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.a4-editor-msg-v2e{font-size:12px;color:#475467;max-width:320px}
.a4-editor-body-v2e{flex:1;min-height:0;display:grid;grid-template-columns:252px minmax(0,1fr) 340px;gap:1px;background:#dcdfe6}
/* 兩側是輔助面板：淺灰底、小字、細線 —— 刻意退到背景，讓中央那張白紙成為視覺焦點。 */
.a4-editor-col-v2e{background:#f7f8fa;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.a4-editor-col-head-v2e{padding:11px 14px;border-bottom:1px solid #e8eaee;font-size:12px;font-weight:600;
  color:#667085;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.a4-preview-state-v2e{font-size:11px;font-weight:400;color:#98a2b3}
/* 中欄不套灰底：工作檯自己有更深的底色，白紙浮在上面。 */
.a4-editor-preview-v2e{background:#e6e9ee}
.a4-editor-preview-v2e>.a4-editor-col-head-v2e{background:#f7f8fa}

/* 左欄：文件結構
   主要文字 = 內容摘要（這一段在講什麼），次要文字 = 區塊型別。
   新增區塊移到欄位底部並壓成一列，讓「文件結構」本身佔滿視線。 */
.a4-editor-add-v2e{padding:10px 12px;border-top:1px solid #f2f4f7;flex:none;background:#fcfcfd}
.a4-editor-add-row-v2e{display:flex;gap:6px;align-items:center}
.a4-editor-add-row-v2e .cos-field__control{flex:1;min-width:0;height:30px;padding:2px 8px;font-size:12px}
.a4-editor-add-row-v2e .cos-btn{padding:5px 12px;font-size:12px}
.a4-block-list-v2e{list-style:none;margin:0;padding:6px 6px 10px;overflow:auto;flex:1;min-height:0}
/* 文件大綱：章節是節點，內容縮排掛在章節下。縮排由 --a4-depth 驅動。 */
.a4-block-item-v2e{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:5px 8px 5px calc(8px + var(--a4-depth, 0) * 13px);
  border:1px solid transparent;border-left:2px solid transparent;border-radius:4px;cursor:pointer}
.a4-block-item-v2e:hover{background:#eef0f4}
.a4-block-item-v2e.is-active{background:#e8effb;border-color:#c9dbf6;border-left-color:#2f6fd0}
.a4-block-main-v2e{min-width:0;display:flex;flex-direction:column;gap:0}
.a4-block-summary-v2e{font-size:12.5px;color:#475467;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a4-block-summary-v2e.is-empty{color:#b3b8c2;font-style:italic}
/* 章節列：顏色更深、字重更重，層級一眼看得出來 */
.a4-outline-row-v2e.is-section{margin-top:6px}
.a4-outline-row-v2e.is-section .a4-block-summary-v2e{font-size:13px;color:#101828;font-weight:600}
.a4-block-type-v2e{font-size:10.5px;color:#a8adb8;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a4-block-item-v2e.is-active .a4-block-summary-v2e{color:#101828;font-weight:600}
.a4-block-ops-v2e{display:flex;gap:2px;flex:none}
.a4-op-btn-v2e{border:1px solid #e4e7ec;background:#fff;color:#667085;border-radius:5px;width:24px;height:24px;
  line-height:1;cursor:pointer;font-size:12px}
.a4-op-btn-v2e:hover:not(:disabled){background:#f2f4f7;color:#344054}
.a4-op-btn-v2e:disabled{opacity:.35;cursor:not-allowed}
.a4-op-danger-v2e:hover:not(:disabled){background:#fef3f2;color:#B42318;border-color:#fda29b}
.a4-block-empty-v2e{padding:16px;color:#98a2b3;font-size:13px;list-style:none}

/* 中欄：A4 工作區（紙面之外是冷灰工作檯，紙面本身純白）
   這一欄是主角：留白給足，紙張陰影克制，頁與頁之間有明確呼吸。 */
.a4-preview-scroll-v2e{flex:1;min-height:0;overflow:auto;padding:34px 24px 44px;background:#e6e9ee;
  display:flex;flex-direction:column;align-items:center;gap:34px}
.a4-page-wrap-v2e{display:flex;flex-direction:column;align-items:center;gap:8px}
/* 紙張：較深的工作檯 + 明確但不誇張的落影，讓 A4 明顯浮起來成為主角 */
.a4-page-canvas-v2e{background:#fff;box-shadow:0 2px 6px rgba(16,24,40,.14),0 14px 38px rgba(16,24,40,.16);
  border-radius:1px;display:block}
.a4-page-label-v2e{font-size:11px;color:#98a2b3;letter-spacing:.02em}
.a4-preview-error-v2e{margin:32px auto;max-width:520px;padding:14px 16px;border-radius:8px;
  background:#fef3f2;border:1px solid #fda29b;color:#B42318;font-size:13px;line-height:1.6}

/* 右欄：內容設定。刻意樸素 —— 沒有工具列、沒有卡片、沒有一堆框，只有這個區塊需要填的東西。
   標頭與 [區塊][文件] 分頁固定不動，捲動只發生在下方那一個容器（沒有巢狀捲軸）。 */
.a4-inspector-tabs-v2e{display:flex;gap:0;padding:0 10px;background:#f7f8fa;
  border-bottom:1px solid #e8eaee;flex:none}
.a4-inspector-tab-v2e{border:0;background:none;padding:8px 14px;font-size:12.5px;color:#667085;
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.a4-inspector-tab-v2e:hover{color:#344054}
.a4-inspector-tab-v2e.is-on{color:#101828;font-weight:600;border-bottom-color:#2f6fd0}
.a4-inspector-body-v2e{padding:14px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
/* 顯示欄位：勾選框與文字同列，兩欄排列 */
.a4-check-grid-v2e{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 10px;margin-top:2px}
.a4-check-grid-v2e .a4-check-row-v2e{padding:4px 0;min-width:0}
/* 欄位名稱不折行：窄欄時「身分證字號」不該被拆成兩行 */
.a4-check-grid-v2e .a4-check-row-v2e>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 文件分頁 */
.a4-doc-sec-v2e{margin-bottom:18px}
.a4-doc-sec-head-v2e{font-size:11.5px;font-weight:600;color:#667085;letter-spacing:.03em;
  padding-bottom:6px;margin-bottom:10px;border-bottom:1px solid #f2f4f7}
.a4-doc-readonly-v2e{margin:0;font-size:12.5px;color:#344054;line-height:1.7}
.a4-inspector-body-v2e .cos-field__label{font-size:11.5px;color:#667085;font-weight:500}
.a4-inspector-body-v2e .cos-field{margin-bottom:12px}
.a4-inspector-body-v2e .note{font-size:11px;color:#98a2b3;line-height:1.6}
.a4-inspector-hint-v2e{font-size:12px;color:#98a2b3;line-height:1.7;margin:4px 2px}
.a4-inspector-type-v2e{font-size:12px;font-weight:600;color:#344054;letter-spacing:.02em;margin-bottom:12px}
/* 編輯正式醫療文字的地方，給足高度 —— 三行高的輸入框沒有人寫得下同意書段落。 */
.a4-textarea-v2e{resize:none;overflow-y:hidden;min-height:120px;line-height:1.8;font-family:inherit;font-size:13px}
/* 面板窄，插入資料欄位改成上下排列，下拉才不會被擠到看不見選項 */
.a4-token-row-v2e{display:flex;flex-direction:column;gap:6px;align-items:stretch;margin-top:8px}
.a4-token-row-v2e .cos-field__control{width:100%;min-width:0}
.a4-list-row-v2e{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.a4-list-row-v2e .cos-field__control{flex:1;min-width:0}
/* 全域 label 是 flex-direction:column，這裡必須明確改回 row，否則勾選框會疊在文字上面而不是同一列 */
.a4-check-row-v2e{display:flex;flex-direction:row;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:#344054;cursor:pointer;font-weight:400}
.a4-check-row-v2e>input{flex:none;margin:0}
.a4-check-row-v2e>span{line-height:1.5}
/* 刪除：安靜的文字操作，不是每列都掛的紅色 icon */
.a4-inspector-remove-v2e{margin-top:18px;padding-top:12px;border-top:1px solid #f2f4f7}
.a4-remove-btn-v2e{border:none;background:none;padding:0;font-size:12px;color:#98a2b3;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.a4-remove-btn-v2e:hover{color:#B42318}
.a4-settings-grid-v2e{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}

/* 側欄在視窗變窄時先讓步，A4 永遠是最寬的一欄 —— 不允許把紙張擠成細長條。 */
@media (max-width:1500px){
  .a4-editor-body-v2e{grid-template-columns:230px minmax(0,1fr) 320px}
}
@media (max-width:1380px){
  .a4-editor-body-v2e{grid-template-columns:208px minmax(0,1fr) 290px}
  .a4-preview-scroll-v2e{padding:22px 14px 30px;gap:26px}
}

/* 匯入內容工作台：左邊整理文字、右邊看 parser 怎麼理解。
   沿用既有 .pdd-overlay-v270 / .cos-btn，不新增設計語彙。 */
.wb-overlay-v2w{align-items:stretch;justify-content:center}
.wb-panel-v2w{width:min(1500px,98vw);height:100%;display:flex;flex-direction:column;background:#f7f8fa}
.wb-head-v2w{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:14px 20px;background:#fff;border-bottom:1px solid #dcdfe6;flex:none}
.wb-title-v2w{margin:0;font-size:15px;font-weight:600;color:#101828}
.wb-sub-v2w{margin:4px 0 0;font-size:12px;color:#667085;line-height:1.6;max-width:60ch}
.wb-source-v2w{display:flex;gap:8px;align-items:center;flex:none}
.wb-body-v2w{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1px;background:#dcdfe6}
.wb-col-v2w{background:#fff;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.wb-col-head-v2w{padding:10px 14px;border-bottom:1px solid #e8eaee;font-size:12px;font-weight:600;
  color:#667085;letter-spacing:.03em;display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.wb-hint-v2w{font-size:11px;font-weight:400;color:#98a2b3}
.wb-marks-v2w{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:400;color:#475467;cursor:pointer}
.wb-tools-v2w{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;border-bottom:1px solid #f2f4f7;flex:none}
.wb-tool-v2w{border:1px solid #e4e7ec;background:#fff;color:#475467;border-radius:5px;
  padding:4px 10px;font-size:12px;cursor:pointer;line-height:1.6}
.wb-tool-v2w:hover{background:#f2f4f7;color:#101828}
.wb-tool-gap-v2w{flex:1}
/* 編輯區與格式符號鏡像層必須用同一組字體度量，符號才會對得準 */
.wb-editor-wrap-v2w{position:relative;flex:1;min-height:0}
.wb-textarea-v2w,.wb-mirror-v2w{position:absolute;inset:0;margin:0;padding:14px 16px;border:0;
  font-family:"Consolas","Menlo","Noto Sans Mono CJK TC",monospace;font-size:13px;line-height:1.9;
  white-space:pre-wrap;word-break:break-word;overflow:auto}
.wb-textarea-v2w{resize:none;background:transparent;color:#101828;outline:none;z-index:1}
.wb-mirror-v2w{color:transparent;pointer-events:none;background:#fff;z-index:0}
.wb-mirror-v2w.is-on{color:transparent}
.wb-mk-v2w{color:#c3c8d2}
.wb-assign-v2w{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;border-bottom:1px solid #f2f4f7;flex:none}
.wb-assign-label-v2w{font-size:11px;color:#98a2b3;margin-right:2px}
.wb-lines-v2w{list-style:none;margin:0;padding:6px 8px 12px;overflow:auto;flex:1;min-height:0}
.wb-line-v2w{display:flex;align-items:flex-start;gap:8px;padding:5px 8px;border-radius:4px;
  cursor:pointer;border:1px solid transparent}
.wb-line-v2w:hover{background:#f7f8fa}
.wb-line-v2w.is-sel{background:#e8effb;border-color:#c9dbf6}
.wb-line-text-v2w{font-size:12.5px;color:#344054;line-height:1.6;min-width:0;word-break:break-word}
.wb-chip-v2w{flex:none;font-size:10.5px;border-radius:999px;padding:1px 8px;white-space:nowrap;
  border:1px solid #e4e7ec;background:#f9fafb;color:#667085}
.wb-chip-heading-v2w{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.wb-chip-ordered_list-v2w,.wb-chip-unordered_list-v2w{background:#ecfdf3;border-color:#abefc6;color:#087443}
.wb-chip-notice-v2w{background:#fffaeb;border-color:#fedf89;color:#B54708}
.wb-empty-v2w{padding:18px;color:#98a2b3;font-size:12.5px;list-style:none;line-height:1.7}
.wb-foot-v2w{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:12px 20px;background:#fff;border-top:1px solid #dcdfe6;flex:none}
.wb-foot-v2w .wb-hint-v2w{margin-right:auto}
@media (max-width:1280px){ .wb-body-v2w{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* 模板列表：正式版本唯讀預覽。沿用 A4 工作檯的視覺（同一種紙、同一種陰影），
   讓「列表預覽」與「Editor 預覽」看起來就是同一份文件。 */
.doc-preview-overlay-v2p{align-items:stretch;justify-content:center}
.doc-preview-panel-v2p{width:min(1100px,98vw);height:100%;display:flex;flex-direction:column;background:#eef0f4}
.doc-preview-head-v2p{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:#fff;border-bottom:1px solid #dcdfe6;flex:none}
.doc-preview-name-v2p{margin:0;font-size:15px;font-weight:600;color:#101828}
.doc-preview-sub-v2p{display:flex;align-items:center;gap:6px;font-size:12px;color:#667085;margin-top:3px;flex-wrap:wrap}
.doc-preview-ro-v2p{margin-left:6px;font-size:11px;color:#475467;background:#f2f4f7;
  border:1px solid #e4e7ec;border-radius:999px;padding:1px 9px}
.doc-preview-scroll-v2p{flex:1;min-height:0;overflow:auto;padding:28px 20px 36px;background:#eceef2;
  display:flex;flex-direction:column;align-items:center;gap:28px}
.doc-preview-note-v2p{color:#98a2b3;font-size:13px;margin-top:32px}

/* Phase 2A-2 PDF 簽署欄位 Designer：沿用 .pdd-overlay-v270/.pdd-drawer-v270 與 .cos-btn。
   舞台與欄位框皆為版面；欄位位置一律由 JS 依比例座標換算，CSS 不參與座標邏輯。 */
.doc-designer-overlay-v2b{align-items:flex-start}
.doc-designer-panel-v2b{max-width:1180px;width:min(1180px,96vw);max-height:94vh;display:flex;flex-direction:column}
.doc-designer-body-v2b{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}
.doc-designer-toolbar-v2b{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.doc-designer-addbar-v2b{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.doc-designer-pager-v2b{display:flex;gap:10px;align-items:center}
.doc-designer-main-v2b{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;min-width:0}
.doc-designer-stage-wrap-v2b{overflow:auto;max-height:64vh;border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc;padding:10px}
.doc-designer-stage-v2b{position:relative;margin:0 auto;box-shadow:0 1px 6px rgba(16,24,40,.14);background:#fff}
.doc-designer-stage-v2b canvas{display:block}
.doc-designer-layer-v2b{position:absolute;left:0;top:0;right:0;bottom:0}
.doc-field-box-v2b{position:absolute;border:2px solid #1D4ED8;background:rgba(29,78,216,.10);border-radius:4px;cursor:move;box-sizing:border-box;overflow:hidden}
.doc-field-box-v2b.is-selected{border-color:#B42318;background:rgba(180,35,24,.12)}
.doc-field-label-v2b{position:absolute;left:4px;top:2px;font-size:12px;font-weight:600;color:#1D4ED8;pointer-events:none;white-space:nowrap}
.doc-field-box-v2b.is-selected .doc-field-label-v2b{color:#B42318}
.doc-field-resize-v2b{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;background:#1D4ED8;cursor:nwse-resize;border-radius:2px}
.doc-field-box-v2b.is-selected .doc-field-resize-v2b{background:#B42318}
.doc-designer-side-v2b{display:flex;flex-direction:column;gap:14px;min-width:0}
.doc-designer-list-v2b{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.doc-field-item-v2b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;text-align:left}
.doc-field-item-v2b.is-selected{border-color:#B42318;background:#fef3f2}
.doc-field-item-v2b small{color:#667085}
.doc-designer-editor-v2b{display:flex;flex-direction:column;gap:10px}
.doc-field-coords-v2b{font-variant-numeric:tabular-nums}
.doc-designer-footer-v2b{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.doc-designer-footer-v2b .msg{margin-right:auto}
@media(max-width:1100px){ .doc-designer-main-v2b{grid-template-columns:1fr} }

/* Phase 2A-3 客戶同意書列表 + 簽署介面：沿用既有 .cos-table/.cos-btn/.pdd-* 元件。 */
.consent-head-v2c{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.consent-table-v2c{min-width:900px}
.consent-actions-v2c{white-space:nowrap}
.consent-actions-v2c .cos-btn{margin-right:6px}
.consent-status-v2c{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.consent-status--DRAFT{background:#f2f4f7;color:#475467}
.consent-status--PENDING_SIGNATURE{background:#FEF0C7;color:#B54708}
.consent-status--SIGNING{background:#EEF4FF;color:#1D4ED8}
.consent-status--COMPLETED{background:#ECFDF3;color:#027A48}
.consent-status--VOIDED{background:#FEE4E2;color:#B42318}
/* CLINICOS-V4-CONSENT-REMOTE-SIGNING-V1-G —— 遠端簽署連結面板。
   scope 僅限 .rsl-*-v1g，不動任何既有 class。簽署網址是一長串不含空白的 token，
   預設會把卡片撐破，因此必須強制斷行而不是讓容器長出水平捲軸。 */
.rsl-card-v1g{max-width:640px}
.rsl-state-v1g{margin:0 0 10px;font-size:14px;color:#101828}
.rsl-warn-v1g{color:#B54708;line-height:1.7}
.rsl-url-box-v1g{padding:10px 12px;border:1px solid #d0d5dd;border-radius:8px;background:#f9fafb;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.6;
  color:#101828;user-select:all;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-all}
.rsl-actions-v1g{flex-wrap:wrap;gap:8px}
.rsl-actions-v1g .msg{margin-right:auto}
/* UAT-FIX-008-1：三顆按鈕（撤銷／關閉／複製）Desktop 必須同一列。
   全站卡片footer慣例是 .cos-card__footer .cos-btn{min-width:190px}，三顆就是
   190*3 + 兩個 gap = 586px，剛好擠爆 ~590px 的 footer 而換行 —— 連只有兩個字的
   「關閉」也被撐成 190px。這裡照既有作法（見 #settingPanelPayments 的同類覆寫）
   在本面板 scope 內解除下限，讓按鈕回到內容寬度；高度沿用全站的 44px 不動。 */
.rsl-actions-v1g .cos-btn{min-width:0;max-width:none;flex:0 0 auto}
@media(max-width:480px){
  /* 窄螢幕：按鈕改為整列，避免被裁切；面板本身仍不產生自己的水平捲軸。
     .cos-btn 是 inline-flex ＋ 左右 16px padding，內容會撐出 min-content 底線，
     光給 width:100% 壓不下去（min-width 永遠贏 width／max-width）——
     因此必須同時解開 min-width 並允許標籤換行，否則在被壓縮的容器裡仍會被切掉。 */
  .rsl-actions-v1g{flex-direction:column;align-items:stretch}
  .rsl-actions-v1g .cos-btn{width:100%;min-width:0;padding-inline:8px;white-space:normal;line-height:1.3}
  .rsl-actions-v1g .msg{margin-right:0}
}
.consent-sign-panel-v2c{max-width:1180px}
.consent-field-v2c{position:absolute;border:2px dashed #1D4ED8;background:rgba(29,78,216,.06);border-radius:4px;cursor:pointer;box-sizing:border-box;overflow:hidden;display:flex;align-items:center;justify-content:center}
.consent-field-v2c.is-required{border-color:#B54708}
.consent-field-v2c.is-filled{border-style:solid;border-color:#027A48;background:rgba(2,122,72,.06)}
.consent-field-badge-v2c{position:absolute;left:3px;top:1px;font-size:11px;font-weight:600;color:#475467;pointer-events:none;white-space:nowrap}
.consent-field-text-v2c{font-size:13px;color:#101828;padding:0 4px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.consent-field-hint-v2c{font-size:12px;color:#98a2b3}
.consent-sig-preview-v2c{max-width:100%;max-height:100%;object-fit:contain}
.consent-side-item-v2c{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-bottom:1px solid #f2f4f7}
.consent-side-actions-v2c{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* 內嵌簽名板（取代原本的第二層 Signature Modal，不再有 Modal 疊 Modal） */
.consent-sign-item-v2c{gap:8px}
.consent-sign-pad-wrap-v2c{position:relative;width:100%;border:1px dashed #cbd5e1;border-radius:10px;
  background:#fff;overflow:hidden;line-height:0}
.consent-sign-pad-wrap-v2c.is-readonly{background:#f9fafb;border-style:solid}
.consent-sign-canvas-v2c{display:block;width:100%;background:#fff;cursor:crosshair;touch-action:none}
.consent-sign-pad-wrap-v2c.is-readonly .consent-sign-canvas-v2c{cursor:default}
.consent-sign-hint-v2c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;color:#98a2b3;font-size:14px;line-height:1.4}
.consent-sign-hint-v2c[hidden]{display:none}
.consent-sign-msg-v2c{font-size:12px;color:#B54708;line-height:1.5}
/* 簽署畫面：右側欄位區加寬並獨立垂直捲動，簽名板才不會被壓縮到不可用 */
.consent-sign-panel-v2c .doc-designer-main-v2b{grid-template-columns:minmax(0,1fr) 360px}
.consent-sign-panel-v2c #consentSideV2C{max-height:64vh;overflow-y:auto;overflow-x:hidden;padding-right:6px}
@media(max-width:1100px){
  .consent-sign-panel-v2c .doc-designer-main-v2b{grid-template-columns:minmax(0,1fr) 320px}
}
@media(max-width:900px){   /* 平板直向：改上下堆疊，簽名板取得整個寬度 */
  .consent-sign-panel-v2c .doc-designer-main-v2b{grid-template-columns:minmax(0,1fr)}
  .consent-sign-panel-v2c #consentSideV2C{max-height:none}
}
.consent-sign-item-v2c.is-focused .consent-sign-pad-wrap-v2c{border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.consent-sign-item-v2c.is-missing .consent-sign-pad-wrap-v2c{border-color:#d92d20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.consent-side-item-v2c.is-missing .cos-field__control{border-color:#d92d20}
@media(max-width:900px){ .consent-table-v2c{min-width:720px} }

/* ===== 大型簽名畫布（CLINICOS-V4-CONSENT-SIGNATURE-EXPANDED-CANVAS-001）=========
   小簽名板整塊就是入口，所以不另做「放大」按鈕；實際書寫都在這個 Modal 裡完成。 */
.consent-sign-pad-wrap-v2c[role="button"]{cursor:pointer}
.consent-sign-pad-wrap-v2c[role="button"] .consent-sign-canvas-v2c{cursor:pointer}
.consent-sign-pad-wrap-v2c[role="button"]:hover{border-color:#1d4ed8;background:#fbfdff}
.consent-sign-pad-wrap-v2c[role="button"]:focus-visible{outline:none;border-color:#1d4ed8;
  box-shadow:0 0 0 3px rgba(29,78,216,.18)}
.sig-overlay-v2s{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.55);
  display:flex;align-items:center;justify-content:center;padding:16px}
.sig-modal-v2s{width:min(80vw,1536px);height:min(70vh,820px);background:#fff;border-radius:14px;
  box-shadow:0 24px 64px rgba(15,23,42,.28);display:flex;flex-direction:column;overflow:hidden}
.sig-head-v2s{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid #e5e7eb;flex:0 0 auto}
.sig-head-text-v2s{display:flex;align-items:baseline;gap:10px;min-width:0}
.sig-head-text-v2s strong{font-size:16px;color:#101828}
.sig-head-text-v2s span{font-size:13px;color:#667085}
.sig-close-v2s{border:0;background:transparent;font-size:18px;line-height:1;color:#667085;
  cursor:pointer;padding:6px}
.sig-stage-v2s{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;
  justify-content:center;background:#f2f4f7;padding:14px}
.sig-canvas-v2s{display:block;background:#fff;border:1px solid #d0d5dd;border-radius:10px;
  touch-action:none;cursor:crosshair}
.sig-hint-v2s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#98a2b3;font-size:20px;pointer-events:none}
.sig-hint-v2s[hidden]{display:none}
.sig-foot-v2s{display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-top:1px solid #e5e7eb;flex:0 0 auto}
.sig-msg-v2s{flex:1 1 auto;font-size:13px;color:#667085}
.sig-foot-actions-v2s{display:flex;gap:8px}
@media(max-width:820px){   /* 手機／平板：接近全螢幕，避免畫布小到無法書寫 */
  .sig-overlay-v2s{padding:0}
  /* 用 100% 填滿 fixed 疊層，不用 100vw —— 100vw 含捲軸寬度，會多撐出橫向捲動 */
  .sig-modal-v2s{width:100%;height:100%;max-width:none;border-radius:0}
  .sig-stage-v2s{padding:10px}
}

/* ===== 服務人員交接 Dialog =====================================================
   Reuses the employee Drawer's .pdd-overlay-v270/.pdd-drawer-v270 shell and .cos-btn/.cos-table
   components — these rules only handle this dialog's own spacing and the inner table's scroll
   container, so a long customer list scrolls INSIDE the table instead of widening the page. */
.svc-handover-dialog-v1{max-width:860px;width:min(860px,92vw)}
.svc-handover-body-v1{display:flex;flex-direction:column;gap:14px;min-width:0}
.svc-handover-reason-v1{margin:0;line-height:1.6}
.svc-handover-modes-v1{display:flex;flex-wrap:wrap;gap:16px}
.svc-handover-panel-v1{display:flex;flex-direction:column;gap:10px;min-width:0}
.svc-handover-field-v1{display:flex;flex-direction:column;gap:6px;max-width:360px}
.svc-handover-table-wrap-v1{max-height:320px;overflow:auto;border:1px solid #e5e7eb;border-radius:8px}
.svc-handover-table-v1{width:100%;min-width:0}
.svc-handover-table-v1 select{max-width:100%}
.svc-handover-footer-v1{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.svc-handover-hint-v1{margin-right:auto;color:#b54708;font-size:13px}
.svc-handover-error-v1{margin-right:auto;color:#b42318;font-size:13px}
@media(max-width:900px){
  .svc-handover-dialog-v1{width:96vw}
  .svc-handover-table-wrap-v1{max-height:50vh}
}
/* ===== CRM 搜尋引擎 Phase 1 =====================================================
   Layout only — every control reuses the existing .cos-card/.cos-field/.cos-btn/.cos-table
   components. The result table scrolls inside its own container so 13 columns never widen
   the page itself; the search actions stay at the bottom of the (short) condition card, not
   at the bottom of the whole page. */
.crm-search-card-v1 .cos-card__body{display:flex;flex-direction:column;gap:20px}
/* 三個搜尋區塊以低飽和底色區分（UI-polish only）。圓角沿用 Card 的 --cos-radius-md，外層
   .cos-card 的 24px padding 完全不動；此處的 16px 只是讓底色塊本身有呼吸空間，欄位排列
   （.crm-search-grid-v1 的欄數／間距）、搜尋按鈕位置、結果表格全部維持原狀。無 icon、無動畫。 */
.crm-search-section-v1{display:flex;flex-direction:column;gap:10px;min-width:0;
  padding:16px;border-radius:var(--cos-radius-md,12px);border:1px solid transparent}
.crm-search-section-title-v1{margin:0;font-size:15px;font-weight:700;color:#101828}
.crm-search-section--basic-v1{background:#F4F9FF;border-color:#D9EAFE}
.crm-search-section--basic-v1 .crm-search-section-title-v1{color:#1D4ED8}
.crm-search-section--sales-v1{background:#FBF7FF;border-color:#EADFFF}
.crm-search-section--sales-v1 .crm-search-section-title-v1{color:#6941C6}
.crm-search-section--status-v1{background:#FFF5F5;border-color:#FFDADA}
.crm-search-section--status-v1 .crm-search-section-title-v1{color:#B42318}
.crm-search-note-v1{margin:0;line-height:1.6}
.crm-search-grid-v1{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;align-items:start}
/* select.cos-field__control 全域帶 min-width:200px；在本頁的網格內改為填滿欄位寬度，窄螢幕才不會
   被 200px 撐破。只作用在這個網格內，其他頁面的 .cos-field__control 完全不受影響。 */
.crm-search-grid-v1 .cos-field{min-width:0}
.crm-search-grid-v1 .cos-field__control,
.crm-search-grid-v1 select.cos-field__control{min-width:0;width:100%;max-width:100%}
.crm-search-hint-v1{display:block;margin-top:4px;line-height:1.5}
/* 購置品項多選：沿用 .customer-tag-picker-v3 元件，只補此頁需要的尺寸／截斷處理，
   讓長品項名稱不會撐破欄位（chip 內文字省略，picker 寬度跟著網格欄位走）。 */
.crm-item-field-v1{min-width:0}
.crm-item-picker-v1{width:100%;min-width:0;box-sizing:border-box;padding:8px 10px}
.crm-item-chips-v1{min-height:26px;align-items:center}
.crm-item-chip-v1{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.crm-item-options-v1{flex-direction:column;flex-wrap:nowrap;max-height:240px}
.crm-item-option-v1{width:100%;text-align:left;height:auto;min-height:32px;padding:6px 12px;white-space:normal;word-break:break-word}
.crm-item-clear-all-v1{width:22px;height:22px;color:#667085}
.crm-search-actions-v1{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.crm-search-actions-v1 .msg{margin-right:auto}
.crm-msg-error-v1{color:#b42318}
.crm-result-head-v1{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.crm-result-count-v1{font-size:14px;font-weight:600;color:#475467}
.crm-table-wrap-v1{overflow-x:auto;max-width:100%}
.crm-result-table-v1{min-width:1180px}
.crm-result-row-v1{cursor:pointer}
.crm-result-row-v1:hover{background:#f8fafc}
.crm-sort-btn-v1{background:transparent;border:0;padding:0;font:inherit;font-weight:inherit;color:inherit;cursor:pointer}
.crm-sort-btn-v1:hover{text-decoration:underline}
.crm-state-cell-v1{text-align:center;color:#667085;padding:28px 12px}
.crm-pagination-v1{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 0 0}
.crm-page-text-v1{font-size:14px;color:#475467}
@media(max-width:1280px){ .crm-search-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:900px){
  .crm-search-grid-v1{grid-template-columns:1fr}
  .crm-search-actions-v1{justify-content:stretch}
  .crm-search-actions-v1 .msg{margin-right:0;width:100%}
  .crm-result-table-v1{min-width:760px}
}
/* Toast: every successful/failed operation must surface one (existing project-wide UI rule). */
.svc-toast-v1{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:9999;max-width:min(560px,90vw);
  padding:12px 18px;border-radius:10px;background:#101828;color:#fff;font-size:14px;line-height:1.5;
  box-shadow:0 8px 24px rgba(16,24,40,.24)}
.svc-toast-v1.is-error{background:#b42318}
.customer-doc-gallery-head-v1{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.customer-doc-gallery-head-v1 h4{margin:0}
.customer-doc-gallery-view-toggle-v1{display:flex;align-items:center;gap:8px}
.customer-doc-gallery-view-toggle-v1 .clinic-btn-secondary.is-active{background:#eef4ff;color:#1d4ed8;border-color:#bfdbfe}

/* Upload dropzone — replaces the native <input type=file> visually; a <label for="photoFile">
   wrapping it still opens the native picker with zero JS (browser-native behavior). Drag/drop only
   populates the SAME input's FileList (see handlePhotoDropZoneDropV1 in CustomerModuleV23.js) —
   upload itself still requires clicking ＋上傳照片, same as picking a file by click ever did. */
.customer-photo-file-input-v1{display:none}
.customer-photo-dropzone-wrap-v1{margin-top:14px}
/* Upload icon fix (2026-07-25): was the 🖼️ emoji, whose frame+mountain/circle glyph reads as a
   "broken image" placeholder at a glance. Now a hand-drawn inline SVG (same stroke-icon language
   already used across this app, e.g. .customer-card-icon-v4/dashIcon()) — a cloud + upload arrow,
   a shape with no resemblance to a missing-image icon. Neutral gray-blue, sized well under the
   Primary Button's own visual weight. */
.customer-photo-dropzone-v1{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-height:120px;padding:24px;background:#fff;border:1.5px dashed #d0d5dd;border-radius:12px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.customer-photo-dropzone-v1:hover,.customer-photo-dropzone-v1.is-dragover{border-color:#93c5fd;background:#f8fbff}
.customer-photo-dropzone-icon-v1{width:32px;height:32px;color:#8a94a6;margin-bottom:2px}
.customer-photo-dropzone-text-v1{color:#344054;font-size:15px;font-weight:600}
.customer-photo-dropzone-hint-v1{color:#98a2b3;font-size:13px}
.customer-photo-upload-actions-v1{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.customer-photo-upload-actions-v1 .msg{margin-left:0}
.customer-photo-upload-actions-right-v1{display:flex;align-items:center;gap:10px;margin-left:auto}

/* Multi-upload rewrite (2026-07-25) section 四: preview Grid replaces the old single fixed-slot
   preview card — one small card per selected file, client-side only (Object URL thumbnails),
   never touches the server until ＋上傳照片 is clicked. Desktop ~4-6 per row via auto-fill;
   object-fit:contain (never cover/crop) per spec's explicit "不裁切醫療影像". */
.customer-photo-preview-grid-v1{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.customer-photo-preview-card-v1{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;max-height:180px}
.customer-photo-preview-card-thumb-v1{height:100px;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden}
.customer-photo-preview-card-thumb-v1 img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.customer-photo-preview-card-meta-v1{padding:6px 8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.customer-photo-preview-card-name-v1{color:#101828;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-photo-preview-card-size-v1{color:#98a2b3;font-size:12px}
.customer-photo-preview-card-status-v1{font-size:12px;color:#98a2b3}
.customer-photo-preview-card-v1.is-uploading .customer-photo-preview-card-status-v1{color:#1d4ed8}
.customer-photo-preview-card-v1.is-done .customer-photo-preview-card-status-v1{color:#027a48}
.customer-photo-preview-card-v1.is-error{border-color:#fecaca}
.customer-photo-preview-card-v1.is-error .customer-photo-preview-card-status-v1{color:#b42318}
.customer-photo-preview-card-remove-v1{position:absolute;top:6px;right:6px;width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:rgba(16,24,40,.55);color:#fff;font-size:12px;line-height:1;cursor:pointer}
.customer-photo-preview-card-remove-v1:hover{background:rgba(16,24,40,.75)}

/* Filter bar (療程日期 + 照片類型) — same .photo-date-bar220 layout the old page's date filter
   already used, just with a 2nd <label> alongside it. */
.photo-gallery-filter-bar-v1 select{min-width:160px}

/* Photo grid — responsive 220px cards, auto-fills 4-6 per row depending on the Customer Center
   content column's actual width rather than a hardcoded column count. */
.photo-grid-gallery-v1{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.photo-card-gallery-v1{border:1px solid #e5e7eb;border-radius:12px;padding:0;overflow:hidden;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease}
.photo-card-gallery-v1:hover{box-shadow:0 8px 20px rgba(16,24,40,.12);border-color:#93c5fd}
.photo-card-gallery-v1 img{width:100%;height:220px;object-fit:cover;background:#f8fafc;display:block;cursor:pointer}
.photo-card-gallery-body-v1{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.photo-card-gallery-top-v1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.photo-card-gallery-date-v1{font-size:13px;font-weight:600;color:#344054}
.photo-card-gallery-note-v1{margin:0;color:#667085;font-size:13px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* 照片類型 Badge — reuses the app's established pill-badge shape/palette (same formula as the
   Overview/CRM badges elsewhere this phase), scoped to these 4 real photoType values only. */
.photo-type-badge-v1{display:inline-flex;align-items:center;align-self:flex-start;height:22px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700}
.photo-type-badge-pre-v1{background:#EFF6FF;color:#1D4ED8}
.photo-type-badge-post-v1{background:#ECFDF3;color:#027A48}
.photo-type-badge-followup-v1{background:#F5F3FF;color:#5925DC}
.photo-type-badge-other-v1{background:#F2F4F7;color:#667085}

/* Empty state — icon + short message, not a large blank box. */
.photo-empty-gallery-v1{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:40px 20px;text-align:center;border:1px dashed #e4e7ec;border-radius:12px;background:#fafbfc}
.photo-empty-gallery-icon-v1{font-size:32px;line-height:1;margin-bottom:4px}
.photo-empty-gallery-v1 b{color:#344054;font-size:15px}
.photo-empty-gallery-v1 p{margin:0;color:#98a2b3;font-size:13px}

/* ===== Customer Center — CRM 客情管理 UI V1.1 (redesign, supersedes V1.0's flat timeline +
   search/list template picker) =====
   Scoped entirely under .customer-relations/.crm-* (only ever mounted inside
   #customerCenterContent while the 客情 Tab is active). Visual language matches the rest of
   Customer Center: white cards, 1px #e5e7eb border, 12px radius, the same box-shadow used by
   .customer-overview-card. No second visual style introduced. Three-column layout, no popup. */
/* CRM Phase 3.8 section 十四: section gap widened to the 18-24px range. */
.customer-relations{display:flex;flex-direction:column;gap:20px;min-width:0}

/* Header quick-entry bar (V1.1 section 八) — scoped to THIS Tab's own content only, never
   #customerCenterHeader (the shared, frozen Customer Center Header). */
.crm-quick-header{display:flex;flex-wrap:wrap;gap:8px}
/* CRM Phase 3.8 section 十二: unified button spec (42px/16px/12px radius) applied to real
   labeled action buttons throughout CRM; icon-only mini-controls (⋯ menu trigger, Pin, 展開/收合
   toggle) are deliberately exempt — forcing a 42px-tall "⋯" icon button would look broken, not
   "less small". Filter Chips/tags are a separate pill tier, not literal buttons. */
.crm-quick-header-btn{height:42px;padding:0 20px;border-radius:12px;font-size:16px}

/* CRM Phase 3.6: column 1 is now a fixed-width Drawer rail (58px) instead of a 260px+ fixed
   column — the freed space goes straight to column 2 (Workspace) via its existing fr ratio,
   satisfying section 五 ("Workspace 至少增加 30% 可用寬度") without any special-case width math:
   removing ~220-280px from column 1 and redistributing it across the still-1.4fr:0.85fr split
   between columns 2/3 works out to noticeably more than 30% extra for column 2 at typical
   Customer Center widths. */
.crm-columns{display:grid;grid-template-columns:58px minmax(360px,1.4fr) minmax(240px,0.85fr);gap:16px;align-items:start;min-width:0}
@media(max-width:1300px){.crm-columns{grid-template-columns:58px 1.4fr}}
@media(max-width:1024px){.crm-columns{grid-template-columns:1fr}}

/* CRM Phase 3.8 section 十三: 主標題 22px. */
.crm-col-head{margin-bottom:4px}
.crm-col-head h4{margin:0;font-size:22px;font-weight:700;color:#101828;line-height:1.3}
/* CRM Phase 3.6 section 二: 互動紀錄 Drawer. .crm-col-timeline is the 58px rail track and the
   positioning anchor (position:relative); the panel is absolutely positioned and overlays
   rightward across the Workspace column on open — it never participates in grid reflow, so
   opening/closing never squeezes or shifts Workspace (satisfies this section AND section 十二's
   RWD requirement at every breakpoint, not just ≤1024). */
.crm-col-timeline{position:relative;min-width:0;height:100%}
.crm-interaction-drawer-rail{position:absolute;inset:0;width:58px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(16,24,40,.04);cursor:pointer;z-index:10}
.crm-interaction-drawer-rail-icon{font-size:18px}
.crm-interaction-drawer-rail-label{writing-mode:vertical-rl;text-orientation:upright;font-size:14px;font-weight:700;color:#344054;letter-spacing:1px}
/* Section 九: 250ms ease-in-out slide+fade. Section 十六 (unchanged from Phase 3): no independent
   inner scroll box — the panel's height is its own content height (auto), so it scrolls together
   with Customer Center's single main-panel scroll, never on its own.
   CRM Phase 3.8 section 二: widened 500px→560px desktop / 520px tablet / min(95vw,560px) ≤1024. */
.crm-interaction-drawer-panel{position:absolute;top:0;left:0;width:min(560px,calc(100vw - 48px));max-width:600px;min-width:520px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:4px 4px 24px rgba(16,24,40,.14);padding:18px 20px;display:flex;flex-direction:column;gap:14px;z-index:30;opacity:0;transform:translateX(-8px);visibility:hidden;transition:opacity 250ms ease-in-out,transform 250ms ease-in-out,visibility 0s linear 250ms}
.crm-interaction-drawer-panel.is-open{opacity:1;transform:translateX(0);visibility:visible;transition:opacity 250ms ease-in-out,transform 250ms ease-in-out,visibility 0s linear 0s}
.crm-interaction-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.crm-interaction-drawer-head-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.crm-interaction-drawer-head h4{margin:0;font-size:22px;font-weight:700;color:#101828}
/* CRM Phase 3.9 section 三: 次標題 (最近五筆／全部互動紀錄／篩選摘要) + 今天共 N 筆, both 14px. */
.crm-interaction-drawer-subtitle{font-size:14px;color:#475467;font-weight:600}
.crm-interaction-drawer-today{font-size:14px;color:#98a2b3}
.crm-interaction-drawer-head-divider{height:1px;background:#f2f4f7;margin:2px 0}
.crm-interaction-drawer-pin{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #e5e7eb;background:#fff;font-size:16px;cursor:pointer;flex:0 0 auto}
.crm-interaction-drawer-pin:hover{background:#f2f4f7}
.crm-interaction-drawer-pin.is-pinned{background:#eef4ff;border-color:#bfdbfe}
.crm-interaction-drawer-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.18);opacity:0;visibility:hidden;z-index:20;transition:opacity 200ms ease,visibility 0s linear 200ms}
.crm-interaction-drawer-backdrop.is-open{opacity:1;visibility:visible;transition:opacity 200ms ease,visibility 0s linear 0s}
@media(max-width:1300px){.crm-interaction-drawer-panel{width:520px;min-width:0}}
@media(max-width:1024px){.crm-interaction-drawer-panel{width:min(95vw,560px);min-width:0}}

/* CRM Phase 4.0A section 五: card gap tightened 18px→12-14px as part of the compact-card redesign
   (undoes Phase 3.8's "generous breathing room" now that cards themselves are much shorter). */
.crm-timeline-list{display:flex;flex-direction:column;gap:14px}
.crm-timeline-filter-bar{display:flex;flex-direction:column;gap:10px;padding-bottom:10px;border-bottom:1px solid #f2f4f7}
.crm-timeline-keyword{height:36px;padding:0 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;width:100%}
/* CRM Phase 3.9 section 七/十一: event-type Chips collapsed into one <select> alongside 日期範圍／
   聯絡方式 — a single control row, at most two columns, 1 column ≤1024px so the Drawer's narrower
   RWD width never causes its own horizontal scroll. */
.crm-timeline-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
@media(max-width:1024px){.crm-timeline-filter-grid{grid-template-columns:1fr}}
.crm-timeline-filter-field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#667085;font-weight:600;min-width:0}
.crm-timeline-subselect{height:34px;padding:0 8px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;color:#344054;background:#fff;width:100%;min-width:0}
.crm-timeline-hide-voided{font-size:14px;color:#667085}
/* Dead since this phase's Chip→dropdown conversion (CRM Phase 3.9 section 七) — left in place per
   minimal-change policy, disclosed in the completion report, same treatment as the other
   long-standing dead .crm-timeline-* rules below (.crm-timeline-badge etc). */
.crm-timeline-filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.crm-timeline-filter-chip{height:30px;padding:0 12px;font-size:14px;border-radius:999px}
.crm-timeline-filter-chip.is-active{background:#1D4ED8;color:#fff;border-color:#1D4ED8}
.crm-timeline-subfilters{display:flex;gap:8px}
.crm-timeline-date-group{display:flex;flex-direction:column;gap:10px}
.crm-timeline-date-label{color:#667085;font-size:14px;font-weight:700;margin-top:6px}
.crm-timeline-empty{color:#98a2b3;font-size:14px;padding:20px 0;text-align:center;line-height:1.7}
.crm-timeline-load-more{align-self:center;height:36px;padding:0 16px;font-size:14px;border-radius:999px;margin-top:4px}
.crm-summary-toggle{align-self:flex-start;height:24px;padding:0 8px;font-size:13px;color:#1D4ED8;border:0;background:transparent}
/* CRM Phase 4.0A section 4.3: tightened 4→2 lines ("過長內容最多顯示兩行") as part of the compact
   card redesign — only ever applied to 客情 content (the only type with a free-text body on the
   card face). */
.crm-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Facebook-post-style card (CRM Phase 3.5 section 一) — icon+type header line, divider, then
   title/facts/summary stacked vertically, meta line, then a real visible action button — no
   table markup anywhere. Left color bar via border-left, one .is-<color> per event type. */
/* CRM Phase 4.0A section 五: padding/radius tightened (24px/16px → 18-20px/14-16px) as part of the
   compact-card redesign — target overall card height ~120-150px. */
.crm-fb-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #eef1f5;border-left:4px solid #98a2b3;border-radius:14px;padding:18px 20px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.crm-fb-card.is-green{border-left-color:#16A34A}
.crm-fb-card.is-blue{border-left-color:#1D4ED8}
.crm-fb-card.is-orange{border-left-color:#F97316}
.crm-fb-card.is-purple{border-left-color:#7C3AED}
.crm-fb-card.is-red{border-left-color:#DC2626}
.crm-fb-card.is-brown{border-left-color:#92400E}
.crm-fb-card.is-teal{border-left-color:#0891B2}
.crm-fb-card.is-gray{border-left-color:#98a2b3}
.crm-fb-card.is-navy{border-left-color:#1E3A8A}
.crm-fb-card.is-voided{opacity:.55}
.crm-fb-card-header{display:flex;align-items:center;gap:8px}
.crm-fb-card-icon{flex:0 0 auto;font-size:18px;line-height:1}
.crm-fb-card-type{font-size:16px;font-weight:700;color:#344054}
.crm-fb-card-divider{height:1px;background:#f2f4f7}
/* CRM Phase 3.7 section 七/十六: shared ⋯ Popover/Menu — sits at the header's right edge (after
   the voided-tag when present, which already claims margin-left:auto; this rule only matters when
   there's no voided-tag, i.e. it's the sole thing pushed to the right). */
.crm-card-menu-wrap{position:relative;margin-left:auto;flex:0 0 auto}
.crm-card-menu-trigger{width:28px;height:28px;padding:0;border:0;background:transparent;color:#98a2b3;font-size:18px;line-height:1;cursor:pointer;border-radius:6px}
.crm-card-menu-trigger:hover{background:#f2f4f7;color:#344054}
.crm-card-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:180px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.14);padding:6px;z-index:40}
.crm-card-menu.is-open{display:flex;flex-direction:column;gap:2px}
.crm-card-menu-item{display:block;width:100%;text-align:left;height:36px;padding:0 10px;border:0;background:transparent;color:#344054;font-size:14px;border-radius:6px;cursor:pointer}
.crm-card-menu-item:hover{background:#f2f4f7}
.crm-card-menu-item.is-danger{color:#B42318}
.crm-card-menu-item.is-danger:hover{background:#FEF2F2}
.crm-card-menu-item.is-disabled{color:#c0c5cd;cursor:default;font-size:13px}
.crm-timeline-badge{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600}
.crm-timeline-badge.is-contact{background:#EEF4FF;color:#1D4ED8}
.crm-timeline-badge.is-sales{background:#FEF2F2;color:#DC2626}
.crm-timeline-badge.is-usage{background:#FDF3EC;color:#92400E}
.crm-timeline-badge.is-appointment{background:#F3EEFF;color:#7C3AED}
.crm-timeline-badge.is-photo{background:#ECFEFF;color:#0891B2}
.crm-timeline-badge.is-system{background:#F2F4F7;color:#475467}
.crm-timeline-important{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;background:#FEF3F2;color:#B42318}
.crm-timeline-voided-tag{margin-left:auto;display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;font-size:14px;font-weight:700;background:#F2F4F7;color:#667085}
.crm-fb-card-body{display:flex;flex-direction:column;gap:6px}
/* CRM Phase 4.0A section 五: Bold, slightly smaller than Phase 3.8's 18px to keep the whole card
   inside the ~120-150px target height. */
.crm-fb-card-title{color:#101828;font-size:18px;font-weight:700;line-height:1.35}
/* CRM Phase 4.0A section 三/四: one "｜"-joined summary line replaces the Phase 3.8/3.9 labeled/
   iconed field-row stack — this is the whole point of the "集中摘要式" redesign (fewer rows, not
   the same facts styled differently). */
.crm-fb-card-summary-line{color:#475467;font-size:15px;line-height:1.5}
/* 4.3: 客情 events' free-text content preview (was .crm-fb-card-summary pre-4.0A; renamed since
   "summary" now means the fact line above). */
.crm-fb-card-content{color:#344054;font-size:16px;line-height:1.6}
.crm-fb-card-line{color:#344054;font-size:15px;line-height:1.5}
.crm-fb-card-meta{color:#98a2b3;font-size:14px;margin-top:4px}
.crm-fb-card-actions{display:flex;gap:10px}
/* CRM Phase 4.0A section 五: 40-42px kept at the existing 42px (already within range, no change
   needed for height/radius) — button face text is now generic "查看" (see crmPrimaryButtonHtmlV1). */
.crm-timeline-action-btn{height:42px;padding:0 20px;font-size:16px;border-radius:12px;border:1px solid #d0d5dd;background:#fff;color:#1d4ed8;font-weight:600;cursor:pointer}
.crm-timeline-action-btn:hover{background:#eef4ff}
.crm-timeline-action-btn.is-danger{color:#B42318;border-color:#FDA29B}
.crm-timeline-action-btn.is-danger:hover{background:#FEF2F2}

/* CRM Phase 3.8 section 六: full width of its Grid column (Drawer is a 58px rail + overlay, so
   Workspace already gets the column's full share — this just makes the padding/gap generous
   rather than leaving the old Timeline-column-era tightness). */
.crm-workspace{display:flex;flex-direction:column;gap:20px;width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.crm-workspace .form label{font-size:16px}
.crm-workspace .form input,.crm-workspace .form select,.crm-workspace .form textarea{font-size:16px}
/* CRM Phase 3.5 section 二: each main field stacked on its own full-width line (date/method/
   recorder), replacing the old two-per-row grid, with generous spacing between fields. */
.crm-field-stack{display:flex;flex-direction:column;gap:6px;font-size:16px;color:#344054;font-weight:600}
.crm-field-stack input,.crm-field-stack select{height:40px;font-size:16px;padding:0 12px;border:1px solid #d0d5dd;border-radius:8px}

/* 客情範本選擇器 Drawer 重構 (2026-07-25) section 二: compact entry replacing the old always-on
   常用範本／分類 Tree／範本預覽 panel — just a label + one row. */
.crm-tpl-entry-v1{display:flex;flex-direction:column;gap:6px}
.crm-tpl-entry-label-v1{font-size:16px;color:#344054;font-weight:600}
.crm-tpl-entry-row-v1{display:flex;align-items:center;gap:12px;min-height:40px}
.crm-tpl-entry-name-v1{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#475467;font-size:15px}
/* Final UX Polish section 三: selected state — 分類/範本 as two stacked lines (was one line with
   just the template name), plus 重新選擇/清除選擇 as two equal-weight buttons on their own row
   (was a single button + a small text-link clear). */
.crm-tpl-entry-selected-v1{display:flex;flex-direction:column;gap:12px}
.crm-tpl-entry-lines-v1{display:flex;flex-direction:column;gap:4px}
.crm-tpl-entry-line-v1{display:flex;gap:6px;min-width:0;font-size:15px}
.crm-tpl-entry-line-label-v1{flex:0 0 auto;color:#98a2b3}
.crm-tpl-entry-line-value-v1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#101828;font-weight:600}
.crm-tpl-entry-btns-v1{display:flex;gap:10px}

/* section 三: reuses the SAME global right-side overlay Drawer shell every other Drawer in this
   app already uses (.pdd-overlay-v270/.pdd-drawer-v270 — see emp-drawer-v1/mkt-camp-drawer-v1 for
   precedent) — only the width is narrowed here, no new Drawer component. Final UX Polish: desktop
   range widened to 560-620px (was 480-560px), viewport cap unchanged at 45vw. */
.crm-tpl-drawer-v1{width:clamp(560px,45vw,620px);max-width:620px}
@media(max-width:900px){.crm-tpl-drawer-v1{width:94vw;max-width:94vw}}
.crm-tpl-drawer-search-row-v1{flex:0 0 auto;padding:12px 24px;background:#fff;border-bottom:1px solid #e4e9f1}
.crm-tpl-drawer-search-row-v1 input{height:40px;width:100%;box-sizing:border-box;padding:0 14px;border:1px solid #d0d5dd;border-radius:8px;font-size:15px}
.crm-tpl-drawer-body-v1{display:flex;flex-direction:column;gap:4px}

/* section 五: 3-tier tree — Group (術後) → Container (第一天/未成交/VIP/使用者分類, folder/chevron,
   toggle-only) → Template (document/leaf, indented further, the only clickable/selectable tier). */
.crm-tpl-drawer-tree-v1{display:flex;flex-direction:column;gap:2px}
.crm-tpl-drawer-group-toggle,.crm-tpl-drawer-toggle{display:flex;align-items:center;gap:8px;width:100%;height:38px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#344054;font-size:16px;font-weight:700;text-align:left;cursor:pointer}
.crm-tpl-drawer-group-toggle:hover,.crm-tpl-drawer-toggle:hover{background:#f2f4f7}
.crm-tpl-drawer-toggle{padding-left:20px;font-weight:600}
.crm-tpl-drawer-chevron{display:inline-block;width:14px;color:#98a2b3}
.crm-tpl-drawer-count-v1{margin-left:auto;color:#98a2b3;font-size:13px;font-weight:400}
.crm-tpl-drawer-group-children{display:flex;flex-direction:column;gap:1px;padding-left:6px}
.crm-tpl-drawer-group-children.hidden{display:none}
.crm-tpl-drawer-children{display:flex;flex-direction:column;gap:1px;padding-left:40px}
.crm-tpl-drawer-children.hidden{display:none}
.crm-tpl-drawer-leaf{display:block;width:100%;height:36px;padding:0 10px;border:0;border-left:3px solid transparent;border-radius:6px;background:transparent;color:#344054;font-size:15px;text-align:left;cursor:pointer}
.crm-tpl-drawer-leaf:hover{background:#f8fafc}
.crm-tpl-drawer-leaf.is-selected{background:#eef4ff;color:var(--cos-accent,#0f6cbd);font-weight:600;border-left-color:var(--cos-accent,#0f6cbd)}
.crm-tpl-drawer-empty-v1{padding:32px 12px;text-align:center;color:#98a2b3;font-size:15px}
.crm-tpl-drawer-empty-sub-v1{margin-top:6px;font-size:13px}

/* section 六: read-only preview — plain div, not editable, no textarea. Final UX Polish: overall
   Card sized to the requested ~260-320px band (min-height 260, body scrolls internally once the
   card would otherwise exceed ~320) instead of a fixed 180px body clamp. Empty state matches the
   same min-height so the Drawer's layout doesn't jump when a selection is made/cleared. */
.crm-tpl-drawer-preview-label-v1{margin-top:14px;color:#667085;font-size:14px;font-weight:700}
.crm-tpl-drawer-preview-v1{margin-top:8px;min-height:260px;background:#fff;border:1px solid #eef1f5;border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.crm-tpl-drawer-preview-head-v1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.crm-tpl-drawer-preview-name-v1{color:#101828;font-size:16px;font-weight:700}
.crm-tpl-drawer-preview-cat-v1{color:#98a2b3;font-size:13px}
.crm-tpl-drawer-preview-body-v1{color:#344054;font-size:15px;line-height:1.65;max-height:240px;overflow-y:auto}
.crm-tpl-drawer-preview-empty-v1{margin-top:8px;min-height:260px;display:flex;align-items:center;justify-content:center;color:#98a2b3;font-size:14px;text-align:center;background:#fff;border:1px solid #eef1f5;border-radius:8px}

/* section 六/七 footer — 取消 pinned left, 套用範本 (+ disabled hint) pinned right (Final UX Polish:
   was both buttons grouped together on the right). */
.crm-tpl-drawer-footer-v1{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;background:#fff;border-top:1px solid #e4e9f1}
.crm-tpl-drawer-hint-v1{color:#98a2b3;font-size:13px}
.crm-tpl-drawer-footer-right-v1{display:flex;align-items:center;gap:12px}

/* Final UX Polish section 四: small scoped auto-dismiss toast — same shape/timing as this app's
   other per-module toasts (e.g. .marketing-toast-v230), not a new shared/global component. */
.crm-toast-v1{position:fixed;right:24px;bottom:24px;z-index:10050;max-width:min(360px,86vw);background:#101828;color:#fff;border-radius:10px;padding:12px 16px;font-size:14px;font-weight:600;box-shadow:0 10px 24px rgba(16,24,40,.25)}
.crm-toast-v1.hidden{display:none}

.crm-tpl-tree{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow-y:auto;border:1px solid #eef1f5;border-radius:8px;padding:4px;background:#fff}
.crm-tpl-tree-node{display:flex;flex-direction:column}
.crm-tpl-tree-toggle{height:32px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#344054;font-size:16px;font-weight:600;text-align:left;cursor:pointer}
.crm-tpl-tree-toggle:hover{background:#f2f4f7}
.crm-tpl-tree-children{display:flex;flex-direction:column;gap:1px;padding-left:16px}
.crm-tpl-tree-children.hidden{display:none}
.crm-tpl-tree-leaf{height:32px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#344054;font-size:16px;text-align:left;cursor:pointer}
.crm-tpl-tree-leaf:hover{background:#f2f4f7}
.crm-tpl-tree-leaf.is-selected{background:#eef4ff;color:#1d4ed8;font-weight:600}

.crm-editor-block{display:flex;flex-direction:column;gap:8px}
.crm-editor-label{color:#344054;font-size:16px;font-weight:600}
/* CRM Phase 3.9 section 十: quick-insert phrase row above the content textarea — reuses the
   existing .ghost pill-button treatment, not a new button style. */
.crm-quick-insert-row{display:flex;flex-wrap:wrap;gap:8px}
.crm-quick-insert-btn{height:32px;padding:0 14px;font-size:14px;border-radius:999px}
/* CRM Phase 3.9 section 五: live 0/5000 counter, right-aligned under the textarea. */
.crm-content-counter-row{display:flex;justify-content:flex-end}
.crm-content-counter{font-size:14px;color:#98a2b3}
.crm-content-counter.is-warning{color:#B42318;font-weight:700}
.crm-rich-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;border:1px solid #d0d5dd;border-bottom:0;border-radius:8px 8px 0 0;padding:6px 8px;background:#FAFBFC}
.crm-rich-btn{height:28px;min-width:28px;padding:0 8px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#344054;font-size:13px;cursor:pointer}
.crm-rich-btn:hover{background:#f2f4f7}
.crm-rich-emoji-wrap{position:relative}
.crm-emoji-picker{position:absolute;top:calc(100% + 4px);left:0;z-index:20;display:grid;grid-template-columns:repeat(5,28px);gap:2px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.12);padding:6px}
.crm-emoji-picker.hidden{display:none}
.crm-emoji-picker button{height:26px;border:0;background:transparent;cursor:pointer;font-size:15px;border-radius:4px}
.crm-emoji-picker button:hover{background:#f2f4f7}
/* CRM Phase 3.8 section 八: content textarea at least 300px tall for comfortable long-form typing. */
.crm-rich-editor{min-height:300px;max-height:460px;overflow-y:auto;border:1px solid #d0d5dd;border-radius:8px;padding:16px;font-size:16px;color:#101828;line-height:1.7}
.crm-rich-editor:empty::before{content:attr(data-placeholder);color:#98a2b3}
.crm-rich-editor:focus{outline:2px solid #bfdbfe;outline-offset:-1px}

.crm-followup-fields.hidden{display:none}
.crm-followup-fields{display:flex;flex-direction:column;gap:12px;background:#FAFBFC;border:1px solid #eef1f5;border-radius:8px;padding:12px 14px}
.customer-relations-modal-checkbox{display:flex;align-items:center;gap:8px;font-size:16px;color:#344054;font-weight:400}
.customer-relations-modal-flags{display:flex;gap:20px;flex-wrap:wrap}
.customer-relations-modal-note{color:#98a2b3;font-size:13px;font-style:italic}
.crm-workspace-actions{margin-top:4px}
.crm-workspace-actions button,.crm-workspace .actions button{height:42px;padding:0 20px;font-size:16px;border-radius:12px}

/* CRM 客情 Footer Action Bar (UI Phase 1, 2026-07-24) — 建立追蹤事項 checkbox on the left,
   清除內容/儲存客情 on the right, same row, separated from the content area above by a divider.
   Buttons reuse the app's approved shared Button component (.clinic-btn/.clinic-btn-primary/
   .clinic-btn-secondary, docs/architecture/ClinicOS_UI_Foundation_Standard_V1.md §6) instead of
   .crm-workspace-actions' own sizing above, so height/radius/color match 新增客戶／預約／銷售／
   耗療 exactly rather than approximating them. */
.crm-workspace-footer-divider{border-top:1px solid #eef1f5;margin-top:8px;}
.crm-workspace-footer{padding:18px 24px;}
.crm-workspace-footer-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.crm-workspace-footer-buttons{display:flex;align-items:center;gap:12px;}
.crm-workspace-footer .crm-followup-fields{margin-top:16px;}

/* UI Polish + Phase 3.5 section 四: side column reordered (重要提醒/客戶偏好 first, priority
   ★★★★★), each card's own padding trimmed further so the column takes noticeably less height. */
/* CRM Phase 3.8 section 十: padding 12px, title 18px (unchanged), body text 15px, relaxed gaps. */
.crm-col-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.customer-relations-side-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.customer-relations-side-card-head{margin-bottom:8px}
.customer-relations-side-card-head h4{margin:0;font-size:18px;font-weight:700;color:#101828}
.customer-relations-side-empty{color:#98a2b3;font-size:15px}
.customer-relations-side-note{margin-top:8px;color:#98a2b3;font-size:14px}
.customer-relations-ai-card{background:linear-gradient(135deg,#F5F8FF,#FFFFFF)}
/* Pin Card treatment (V1.1 section 七: 重要提醒／客戶偏好) — a small pin corner accent, still the
   same base card chrome as every other side card. */
.crm-pin-card{position:relative;border-top:2px solid #F97316}
/* CRM Phase 3.9 section 九: scan-style 3-row stat — divider between rows, 20px number/15px label. */
.crm-todo-list{display:flex;flex-direction:column}
.crm-todo-row{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;border-bottom:1px solid #f2f4f7}
.crm-todo-row:last-child{border-bottom:0}
.crm-todo-tag{font-size:15px;font-weight:600;color:#475467}
.crm-todo-tag.is-overdue{color:#B42318}
.crm-todo-tag.is-today{color:#1D4ED8}
.crm-todo-row b{color:#101828;font-size:20px;font-weight:700}
.crm-tag-list{display:flex;flex-wrap:wrap;gap:8px}
.crm-tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:#FEF3F2;color:#B42318;font-size:15px;font-weight:600}
.crm-tag.is-pref{background:#EEF4FF;color:#1D4ED8}
/* AI 建議 collapsed by default (UI Polish) — header stays visible as a compact bar, body only
   renders when expanded, cutting the card's default height to reduce information density. */
.crm-ai-card-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.crm-ai-card-toggle{color:#98a2b3;font-size:14px}
.customer-relations-ai-card.is-collapsed .crm-ai-card-body{display:none}
.crm-ai-suggestion{color:#101828;font-size:15px;line-height:1.65}
.crm-ai-suggestion b{color:#1d4ed8;font-size:16px}
.crm-ai-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.crm-ai-actions button{height:32px;padding:0 12px;font-size:14px;border-radius:8px}
/* CRM Phase 3.9 section 八: "即將提供" preview list replaces the old fake suggestion/disabled
   buttons — no real AI result, no clickable action, purely communicates future capability. */
.crm-ai-coming-label{color:#667085;font-size:14px;font-weight:700}
.crm-ai-coming-list{margin:6px 0 0;padding-left:18px;color:#344054;font-size:15px;line-height:1.9}

/* ----- CRM 客情範本中心 (系統設定 > CRM > 客情範本, #crmTemplateCenter) — reuses global
   .panel/.form/.actions styling already used across System Settings, plus the shared tree/editor
   classes above (same implementation as the Customer Center workspace picker). -----
   NOTE (UI Phase 1, 2026-07-24): a previous comment here contained the two characters that close
   a CSS comment block, embedded mid-sentence instead of at the very end. That silently ended the
   comment early, so the .crm-tpl-center-layout rule which followed got parsed as garbage and
   dropped entirely -- display:grid was never actually applied, and the left/right split rendered
   as a plain stacked block. Rewritten so no comment in this file contains those two characters
   anywhere but its own closing sequence. */
/* UI Phase 1 section 一: fixed 300px category column, remaining ~75% editor column (was 280px,
   and per the note above wasn't actually being applied at all before this fix). */
.crm-tpl-center-layout{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.crm-tpl-center-layout{grid-template-columns:1fr}}
.crm-tpl-center-tree-panel h4{margin:0 0 10px}
.crm-tpl-center-tree-panel .crm-tpl-tree{max-height:none}
.crm-tpl-form-panel{margin-top:0}
.crm-tpl-form-fav{align-self:end;margin-bottom:8px}

/* 客情範本名稱 UI 修正 (2026-07-25): 範本名稱 is now its own stacked field (not a 50/50 grid with
   設為常用範本), sized to a clear majority of the edit panel so it can never look empty/skippable.
   設為常用範本 moves below-left (section 二's preferred layout) instead of squeezing into the same
   row. Error styling reuses the SAME .customer-field-error-v3/.customer-field-invalid-v3 classes
   and showCustomerFieldErrorV3()/clearCustomerFieldErrorV3() functions the Customer 基本資料 form
   already uses for its own inline field validation — no new error-display component. */
.crm-tpl-name-field-v1{width:60%;min-width:320px;max-width:65%;margin-bottom:14px}
.crm-tpl-name-field-v1 label{display:block;margin-bottom:0;font-weight:700;color:#344054}
.crm-required-star-v1{color:#b42318}
.crm-tpl-name-field-v1 input{width:100%;margin-top:7px;box-sizing:border-box}
.crm-tpl-name-hint-v1{margin-top:6px;color:#98a2b3;font-size:13px}
.crm-tpl-fav-below-v1{margin-bottom:14px}
@media(max-width:900px){.crm-tpl-name-field-v1{width:100%;max-width:100%}}

/* UI Phase 1 section 二: intro header padding trimmed so the whole block lands around 70-80px
   tall (was full .panel 18px padding + default h3/p margins ≈130px+). Text unchanged. */
.crm-tpl-center-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;}
.crm-tpl-center-intro-text h3{margin:0;font-size:18px;}
.crm-tpl-center-intro-text .note{margin:2px 0 0;font-size:13px;}
.crm-tpl-center-add-btn{flex:0 0 auto;height:38px;padding:0 18px;border-radius:999px;background:var(--cos-accent,#0f6cbd);color:#fff;font-weight:600;border:0;white-space:nowrap;}
.crm-tpl-center-add-btn:hover{background:var(--cos-accent-hover,#0a5aa0);}

/* UI Phase 1 section 三/四: tree indentation + selected-item left accent bar — scoped to
   .crm-tpl-center-tree-panel only (this page's mount point), NOT the shared .crm-tpl-tree classes
   globally, so the Customer Center workspace's own template picker (#crmTemplateTreeV1, different
   panel) is untouched. Category data/expand-collapse logic is unchanged (same
   crmRenderTemplateTreeGenericV1()/toggleCrmTemplateTreeNodeV1() as before); 未成交／活動／一般／
   VIP have no children in CRM_TEMPLATE_TREE_V1 (only 術後 does), so they render as selectable leaf
   rows rather than fake collapsed groups — no non-functional expand arrow was added for them. */
.crm-tpl-center-tree-panel .crm-tpl-tree-children{padding-left:22px;border-left:1px solid #eef1f5;margin-left:6px;}
.crm-tpl-center-tree-panel .crm-tpl-tree-leaf,
.crm-tpl-center-tree-panel .crm-tpl-tree-toggle{border-left:3px solid transparent;padding-left:9px;transition:background .12s ease,border-color .12s ease;}
.crm-tpl-center-tree-panel .crm-tpl-tree-leaf:hover,
.crm-tpl-center-tree-panel .crm-tpl-tree-toggle:hover{background:#f2f4f7;}
.crm-tpl-center-tree-panel .crm-tpl-tree-leaf.is-selected{background:#eef4ff;color:var(--cos-accent,#0f6cbd);font-weight:600;border-left-color:var(--cos-accent,#0f6cbd);}

/* CRM 分類新增 Phase 1 (2026-07-25) section 二: "+新增分類" lives in the tree panel's OWN header
   row — separate from the top-of-page "+新增範本" pill (.crm-tpl-center-add-btn above) and the
   right-side edit panel. .crm-tpl-center-layout's 300px column width is untouched; this is only a
   header-row flex layout + a compact size override on the shared .clinic-btn-secondary look (the
   panel is narrow, so the button is sized down rather than reusing .clinic-btn's default 40px). */
.crm-tpl-center-tree-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.crm-tpl-center-tree-head h4{margin:0;}
.crm-tpl-center-tree-head .crm-add-category-btn-v1{min-height:30px;padding:0 10px;font-size:13px;white-space:nowrap;flex:0 0 auto;}

/* section 三 Modal field — reuses .customer-field-error-v3/.customer-field-invalid-v3 +
   showCustomerFieldErrorV3()/clearCustomerFieldErrorV3() (same as 範本名稱 above), just its own
   100%-width layout since this lives in a 520px .small-modal instead of the wide form panel. */
.crm-add-category-field-v1{margin:4px 0 14px;}
.crm-add-category-field-v1 label{display:block;margin-bottom:7px;font-weight:700;color:#344054;}
.crm-add-category-field-v1 input{width:100%;box-sizing:border-box;}
.crm-add-category-actions-v1{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}

/* UI Phase 1 section 五: 術後 > 第一天 breadcrumb + status badge, same row. */
.crm-tpl-form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.crm-tpl-form-head h4{margin:0;}

/* UI Phase 1 section 七: info row under 範本名稱 — plain muted text, no new data source (created_at
   /updated_at are existing customer_contact_templates columns; there is no 建立人 column, so that
   field is always —, matching the spec's own example). */
.crm-tpl-meta-row{display:flex;flex-wrap:wrap;gap:4px 20px;margin:10px 0 4px;color:#98a2b3;font-size:13px;}

/* UI Phase 1 section 十: actions row pinned bottom-right (was left-aligned via .actions' default
   flex-start). */
.crm-tpl-form-actions{justify-content:flex-end;margin-top:16px;}

/* 類別狀態 UI 修正 (2026-07-25) section 三/十: State A (category summary) — deliberately simpler
   than the editor form (crm-tpl-form-panel above): no Input/Textarea/meta row, content vertically
   centered in the right panel, min-height keeps it from collapsing to a sliver when the tree panel
   next to it is taller. .has-items switches from centered (empty state) to top-aligned (template
   list can grow long) without a separate panel class. */
.crm-tpl-summary-panel-v1{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:340px;gap:6px;padding:32px 24px;}
.crm-tpl-summary-panel-v1.has-items{align-items:stretch;text-align:left;justify-content:flex-start;padding:24px 28px;}
.crm-tpl-summary-panel-v1 h4{margin:4px 0 0;font-size:21px;color:#101828;}
.crm-tpl-summary-panel-v1.has-items h4{margin:0;}
.crm-tpl-summary-icon-v1{width:52px;height:52px;border-radius:14px;background:#f2f4f7;color:#98a2b3;display:flex;align-items:center;justify-content:center;}
.crm-tpl-summary-icon-v1 svg{width:26px;height:26px;}
.crm-tpl-summary-desc-v1{margin:0;color:#667085;font-size:14px;}
.crm-tpl-summary-count-v1{color:#667085;font-size:14px;margin:6px 0 16px;}
.crm-tpl-summary-add-btn-v1{margin-top:18px;}
.crm-tpl-summary-panel-v1.has-items .crm-tpl-summary-add-btn-v1{align-self:flex-start;margin-top:20px;}
.crm-tpl-summary-list-v1{display:flex;flex-direction:column;gap:2px;border:1px solid #eef1f5;border-radius:10px;padding:4px;max-height:260px;overflow-y:auto;}
.crm-tpl-summary-item-v1{display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:#344054;font-size:15px;text-align:left;cursor:pointer;}
.crm-tpl-summary-item-v1:hover{background:#f8fafc;}
.crm-tpl-summary-item-name-v1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.sales-search-box{border:2px solid #bfdbfe;background:#eff6ff;border-radius:14px;padding:14px;margin:8px 0}
.sales-search-box h4{margin:0 0 4px}
.doc-no-field{display:flex;align-items:center;gap:8px}
.doc-no-prefix{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;font-weight:700;color:#0f172a}
.doc-no-field input[type="text"]{width:100%;max-width:160px;letter-spacing:1px}
.usage-search-box{border:2px solid #d8b4fe;background:#f5e8ff;border-radius:14px;padding:14px;margin:8px 0}
.usage-search-box h4{margin:0 0 4px;color:#6b21a8}
.usage-selected-customer-box{border:1px solid #e9d5ff;background:#faf5ff;border-radius:12px;padding:12px;margin:8px 0}
.selected-customer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.selected-customer-grid div{display:flex;flex-direction:column;gap:4px}
.selected-customer-grid b{font-size:12px;color:#7c2d12}
.selected-customer-grid span{font-size:14px;color:#1f2937;font-weight:700}

@media(max-width:760px){
  .selected-customer-grid{grid-template-columns:1fr}
}
.sold-btn{background:#f59e0b!important;color:#fff!important}
.sold-row td{font-weight:700}

.right{text-align:right}.summary-card{margin:10px 0;padding:10px 12px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px}.report-tabs{flex-wrap:wrap}.compact-table tfoot td{font-weight:700;background:#f8fafc}

/* V2.0.7 report readability */
.report-panel{overflow-x:auto}
.compact-table{width:100%;border-collapse:collapse;table-layout:auto}
.compact-table th{white-space:nowrap;background:#f8fafc}
.compact-table td{vertical-align:top}
.amount-cell{white-space:nowrap;min-width:110px}
.group-row td{font-weight:700;background:#eef2ff}
.subtotal-row td{font-weight:700;background:#f8fafc;border-top:2px solid #e5e7eb}
#packageEditorSectionV230{scroll-margin-top:16px}
#packageEditingStatusV230{display:flex;align-items:center;gap:10px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:8px 12px;margin-bottom:8px}
#packageComboLoadStatusV230.is-error{color:#b42318;font-weight:700}
#packageComboLoadStatusV230.is-loading{color:#475467}
#packageComboLoadStatusV230.is-success{color:#166534}
.liability-tab-summary-v230{display:flex;justify-content:flex-end;align-items:baseline;gap:6px;padding:10px 12px;margin-top:8px;border-top:1px solid #eaecf0;font-size:14px;color:#344054}
.liability-tab-summary-v230 b{font-weight:700;color:#0f172a}
.liability-tab-summary-v230 .liability-tab-summary-amount-v230{font-size:16px;font-weight:700;color:#0f172a}

.platform-account-form-v221{margin:10px 0 12px}
.platform-account-form-v221 input,.platform-account-form-v221 select{width:100%}
.platform-account-form-v221 label{min-width:0}
.platform-account-form-v221 .wide{grid-column:1/-1}
.platform-account-form-v221 + .actions{margin-bottom:10px}
.platform-account-form-v221 + .actions .msg{margin-left:8px}
.platform-account-form-v221 + .actions button{white-space:nowrap}
.platform-account-form-v221 .platform-account-note-v221{grid-column:1/-1;color:#667085}
.platform-account-table-v221{width:100%;table-layout:auto}
.platform-account-table-v221 input{width:100%;min-width:140px}
.platform-account-table-v221 td{vertical-align:middle}
.platform-account-table-v221 button{margin-right:6px;margin-bottom:4px}

.platform-demo-toolbar-v221{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.platform-demo-toolbar-v221 label{min-width:260px;display:flex;flex-direction:column;gap:6px}
.platform-demo-cards-v221{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.platform-demo-card-v221{border:1px solid #dbe4ef;border-radius:14px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);display:grid;gap:8px;padding:14px}
.platform-demo-card-v221 h5{margin:0;font-size:18px;color:#0f172a}
.platform-demo-card-v221 .actions{margin-top:4px}

@media(max-width:1100px){
  .platform-demo-cards-v221{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .platform-demo-toolbar-v221 label{min-width:0;flex:1 1 100%}
  .platform-demo-cards-v221{grid-template-columns:1fr}
}

.appt-count-note,.appt-count-alert{color:#b42318!important;font-weight:800;background:#fff1f3;border:1px solid #fda29b;border-radius:10px;padding:8px 10px;display:inline-block;margin-top:6px}


/* V2.0.11 refinements */
.search-actions{margin-top:8px;display:flex;justify-content:flex-end;gap:8px}
button.small-action{align-self:end;width:auto;min-width:120px;padding:8px 12px;font-size:14px;line-height:1.2}
.photo-card img{cursor:pointer}
.photo-card img:hover{opacity:.88}

.sale-favorite-area-v230{border:1px solid #d0d5dd;border-radius:12px;background:#fcfcfd;padding:8px 10px}
.sale-favorite-head-v230{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.sale-favorite-head-v230 strong{font-size:14px;color:#111827}
.sale-favorite-list-v230{display:flex;flex-wrap:wrap;gap:6px;max-height:96px;overflow:auto}
.sale-favorite-chip-v230{display:inline-flex;align-items:center;gap:4px;border:1px solid #d0d5dd;border-radius:999px;background:#fff;padding:4px 8px;font-size:12px;color:#344054}
.sale-favorite-chip-v230 input{width:14px;height:14px;padding:0;margin:0}
.sale-fuzzy-search-v230{margin:8px 0 0}
.sale-favorite-empty-v230{font-size:12px;color:#667085}
.sale-favorite-setting-row-v230{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #eaecf0}
.sale-favorite-setting-row-v230:last-child{border-bottom:0}

/* ===== 常用銷售設定 — Dual List Selector (UI-first rebuild). Sales-page-scoped classes only;
   reuses existing .detail-modal/.detail-modal-card wrapper, .badge-v1, .primary/.ghost/.danger
   button classes and the app's existing color palette — no new design language, no product
   images/thumbnails anywhere in this block. ===== */
#salesFavoriteSettingModalV230.detail-modal{align-items:center;padding:24px}
.detail-modal-card.sales-fav-dialog-v234{width:min(1180px,calc(100vw - 48px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.sales-fav-header-v234{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 24px 14px;border-bottom:1px solid #e5e7eb}
.sales-fav-header-v234 h3{margin:0;font-size:19px;color:#0f172a}
.sales-fav-close-btn-v234{width:32px;height:32px;padding:0;border:0;background:transparent;color:#667085;font-size:20px;line-height:1;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sales-fav-close-btn-v234:hover{background:#f2f4f7;color:#0f172a}
.sales-fav-filters-v234{flex:0 0 auto;padding:14px 24px;border-bottom:1px solid #e5e7eb;display:grid;gap:10px}
.sales-fav-filters-row-v234{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:end}
.sales-fav-filter-field-v234{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#344054}
.sales-fav-filter-field-v234 select,.sales-fav-filter-field-v234 input{height:40px;box-sizing:border-box}
.sales-fav-search-wrap-v234{position:relative;display:flex;align-items:center}
.sales-fav-search-wrap-v234 input{width:100%;padding-right:36px}
.sales-fav-search-clear-v234{position:absolute;right:6px;width:26px;height:26px;padding:0;border:0;background:transparent;color:#98a2b3;font-size:16px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sales-fav-search-clear-v234:hover{background:#f2f4f7;color:#344054}
.sales-fav-chips-row-v234{display:flex;flex-wrap:wrap;gap:8px}
.sales-fav-chip-btn-v234{height:30px;padding:0 14px;border-radius:999px;border:1px solid #d0d5dd;background:#fff;color:#344054;font-size:13px;font-weight:600;cursor:pointer}
.sales-fav-chip-btn-v234:hover{background:#f8fafc}
.sales-fav-chip-btn-v234.is-active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
/* Root cause of the right-panel clipping bug: percentage grid tracks (43% 6% 51%) resolve against
   the FULL available width in this browser's actual Grid implementation, then column-gap (16px x2
   = 32px) is added ON TOP — that 32px overflow was being silently clipped by this container's own
   overflow:hidden, pushing the right panel past the modal's visible right edge. Measured live:
   .sales-fav-body-v234 scrollWidth (1210px) exceeded clientWidth (1178px) by exactly 32px. Fixed by
   switching to fr units, which correctly subtract gaps before distributing space. Center column is
   now a fixed 76px (within the 72-80px range) rather than a proportional track, matching what its
   content ("已選" / X/20 / 加入 button) actually needs. */
.sales-fav-body-v234{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,43fr) 76px minmax(0,51fr);gap:16px;padding:16px 24px;overflow:hidden}
.sales-fav-panel-v234{display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;box-sizing:border-box;border:1px solid #e6edf5;border-radius:12px;background:#f8fbff;overflow:hidden}
.sales-fav-panel-head-v234{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #e6edf5;background:#f2f6fc}
.sales-fav-panel-head-v234 h4{margin:0;font-size:15px;font-weight:500;color:#0f172a}
.sales-fav-panel-count-v234{font-size:18px;font-weight:700;color:#475467}
.sales-fav-clear-all-btn-v234{margin-left:auto;height:26px;padding:0 10px;border:0;background:transparent;color:#b91c1c;font-size:12px;font-weight:600;cursor:pointer;border-radius:6px}
.sales-fav-clear-all-btn-v234:hover{background:#fef2f2}
.sales-fav-limit-banner-v234{flex:0 0 auto;margin:8px 10px 0;padding:8px 10px;border-radius:8px;background:#fef2f2;color:#b91c1c;font-size:12px;font-weight:700;text-align:center}
.sales-fav-list-v234{flex:1 1 auto;min-height:0;min-width:0;max-width:100%;width:100%;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;padding:6px;scrollbar-width:thin;scrollbar-color:#c1c8d1 transparent}
.sales-fav-list-v234::-webkit-scrollbar{width:8px}
.sales-fav-list-v234::-webkit-scrollbar-track{background:transparent}
.sales-fav-list-v234::-webkit-scrollbar-thumb{background:#c1c8d1;border-radius:8px}
.sales-fav-list-v234::-webkit-scrollbar-thumb:hover{background:#a4acb8}
.sales-fav-empty-v234{padding:32px 12px;text-align:center;color:#667085;font-size:13px;line-height:1.8}
.sales-fav-row-v234{display:flex;flex-direction:row;align-items:center;text-align:left;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;font-weight:400}
.sales-fav-row-v234:hover{background:#eef6ff}
.sales-fav-row-v234.is-selected{background:#e0e7ff}
.sales-fav-row-v234.is-disabled{opacity:.5;cursor:not-allowed}
.sales-fav-row-v234 input[type=checkbox]{flex:none;width:21px;height:21px}
.sales-fav-row-content-v234{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden}
.sales-fav-row-code-v234{flex:none;font-size:12px;color:#667085;font-weight:600;white-space:nowrap}
.sales-fav-row-name-v234{flex:1 1 auto;min-width:0;font-size:16px;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sales-fav-row-badge-v234{flex:none;font-size:11px;padding:1px 8px;background:#eef2ff;color:#3730a3;border:1px solid #e0e7ff;white-space:nowrap}
.sales-fav-row-price-v234{flex:none;font-size:16px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums;text-align:right;min-width:64px}
.sales-fav-ops-v234.sales-fav-wf-center-v234{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;min-width:0;padding:8px 2px}
.sales-fav-wf-count-v234{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:24px;min-width:0}
.sales-fav-wf-count-label-v234{font-size:13px;color:#667085;font-weight:500}
.sales-fav-wf-count-num-v234{font-size:18px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Scoped override only — does not touch the shared .clinic-btn component's own padding, per
   explicit instruction to keep the reduced horizontal padding local to this 6%-wide column. */
.sales-fav-wf-center-v234 .clinic-btn{width:100%;height:48px;min-width:0;padding-left:8px;padding-right:8px;white-space:nowrap}
.sales-fav-selected-row-v234{display:grid;grid-template-columns:28px 32px minmax(0,1fr) auto 100px;align-items:center;column-gap:8px;width:100%;max-width:100%;box-sizing:border-box;padding:8px 10px;border-radius:10px;overflow:hidden}
.sales-fav-selected-row-v234:hover{background:#eef6ff}
.sales-fav-selected-row-v234.is-selected{background:#e0e7ff}
.sales-fav-order-num-v234{grid-column:1;text-align:center;font-size:12px;font-weight:700;color:#98a2b3}
/* display:contents makes the label structurally transparent to the row's Grid — its children
   (checkbox, content wrapper) become direct grid items in columns 2/3, while native label-click-
   toggles-checkbox behavior is preserved (that behavior follows DOM ancestry, not rendered box
   layout). Code+name are nested inside .sales-fav-row-content-v234 (one grid track, column 3) so
   the code hugs its own width instead of stretching a wide fixed column — this is what was causing
   the unnatural gap between code and name. */
.sales-fav-selected-check-v234{display:contents;cursor:pointer}
.sales-fav-selected-row-v234 input[type=checkbox]{grid-column:2;width:21px;height:21px;justify-self:center}
/* .sales-fav-row-content-v234/-badge-v234 are shared with the left (flex) row template —
   grid-column is simply ignored there, so pinning these to explicit tracks here only affects the
   right row's Grid context. */
.sales-fav-selected-row-v234 .sales-fav-row-content-v234{grid-column:3}
.sales-fav-row-badge-v234{grid-column:4}
.sales-fav-row-ops-v234{grid-column:5;width:100px;flex:0 0 100px;min-width:0;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding-right:2px}
.sales-fav-icon-btn-v234{width:28px;height:28px;padding:0;border:1px solid #d0d5dd;background:#fff;color:#475467;border-radius:8px;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sales-fav-icon-btn-v234:hover:not(:disabled){background:#f2f4f7;color:#0f172a}
.sales-fav-icon-btn-v234:disabled{opacity:.4;cursor:not-allowed}
.sales-fav-icon-btn-danger-v234{color:#dc2626;border-color:#fecaca}
.sales-fav-icon-btn-danger-v234:hover:not(:disabled){background:#fef2f2;color:#b91c1c}
.sales-fav-footer-v234{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-top:1px solid #e5e7eb}
.sales-fav-footer-status-v234{display:flex;align-items:center;gap:12px;font-size:13px;color:#475467}
.sales-fav-dirty-flag-v234{color:#b45309;font-weight:700}
.sales-fav-footer-actions-v234{display:flex;gap:10px}
.sales-fav-footer-actions-v234 .primary:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:900px){
  .sales-fav-filters-row-v234{grid-template-columns:1fr}
  .sales-fav-body-v234{grid-template-columns:1fr;grid-template-rows:minmax(160px,1fr) auto minmax(160px,1fr);overflow:auto}
  .sales-fav-ops-v234.sales-fav-wf-center-v234{flex-direction:row;flex-wrap:wrap;justify-content:center;height:auto}
  .sales-fav-wf-count-v234{flex:0 0 auto;margin-bottom:0}
  .sales-fav-wf-center-v234 .clinic-btn{width:auto;flex:1 1 160px}
}

/* V2.0.12 */
.check-grid{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.check-grid label{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px}
.staff-muted{color:#98a2b3;font-size:12px}
.usage-staff-select{min-width:92px}
.warning-note{padding:12px;border:1px solid #fda29b;background:#fff1f3;color:#b42318;border-radius:12px;font-weight:700;margin:8px 0}
td.center,.center{text-align:center!important}
button.used-btn{background:#b42318!important;color:#fff!important;border-color:#b42318!important}

/* V2.0.13 */
#empRoleGroup{align-items:center;padding:8px 10px;border:1px solid #d6dde8;border-radius:10px;background:#fff;}
#empRoleGroup label{white-space:nowrap;font-weight:600;}
.usage-staff-select{min-width:120px;}

/* V2.0.14 interface refresh */
.panel.enhanced-panel, .sales-panel.enhanced-panel, .usage-panel.enhanced-panel{
  border:1px solid #dbe4ef;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}
.filter-bar,.query-inline{
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:12px;
  align-items:end;
  margin:10px 0 14px;
  padding:12px;
  border:1px solid #e6edf5;
  border-radius:14px;
  background:#f8fafc;
}
.query-inline label,.filter-bar label{font-weight:700;color:#0f172a;}
.query-inline input,.filter-bar input{margin-top:6px;background:#fff;}
.liability-query-bar-v220{align-items:start}
.liability-item-filter220{grid-column:1/-1;display:flex;flex-direction:column;gap:10px}
.liability-item-header220{display:flex;align-items:center;justify-content:space-between;gap:12px}
.liability-item-title220{font-weight:800;color:#0f172a}
.liability-item-actions220{display:flex;gap:8px;flex-wrap:wrap}
.liability-item-actions220 button{padding:6px 10px;border-radius:999px;min-height:32px;font-size:13px}
.liability-item-grid220{display:flex;flex-wrap:wrap;gap:8px}
.liability-item-chip220{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:145px;min-height:34px;padding:6px 12px 6px 34px;border:1px solid #d0d5dd;border-radius:999px;background:#fff;font-size:13px;font-weight:700;color:#344054;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s}
.liability-item-chip220::before{content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;border:1.5px solid #98a2b3;border-radius:4px;background:#fff;box-sizing:border-box;transition:background-color .15s,border-color .15s,content .15s}
.liability-item-chip220::after{content:'';position:absolute;left:12px;top:50%;transform:translateY(-60%) rotate(45deg);width:4px;height:8px;border-right:2px solid transparent;border-bottom:2px solid transparent;opacity:0;transition:opacity .15s,border-color .15s}
.liability-item-chip220 input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}
.liability-item-chip220 span{line-height:1.2}
.liability-item-chip220:has(input:checked),.liability-item-chip220.is-selected{background:#1d4ed8;border-color:#1d4ed8;color:#fff;box-shadow:0 0 0 1px rgba(29,78,216,.12) inset}
.liability-item-chip220:has(input:checked)::before,.liability-item-chip220.is-selected::before{border-color:#fff;background:transparent}
.liability-item-chip220:has(input:checked)::after,.liability-item-chip220.is-selected::after{opacity:1;border-right-color:#fff;border-bottom-color:#fff}
.liability-item-chip220:has(input:checked) span,.liability-item-chip220.is-selected span{color:#fff}
.liability-item-chip220:hover{border-color:#93c5fd;transform:translateY(-1px)}
.liability-item-chip220:focus-within{outline:2px solid rgba(29,78,216,.18);outline-offset:1px}
.link-button{background:transparent;color:#1d4ed8;border:0;padding:0;font-weight:800;cursor:pointer;text-align:left}
.link-button:hover{text-decoration:underline}

/* ===== 負債療程查詢 UI V1（Phase: Customer > Debt Treatment Query workspace refresh）=====
   Scoped entirely under #liability.debt-treatment-query-page — reuses existing .panel/.data-table/
   .link-button/.liability-item-* structures and colors, does not touch any other page's CSS. */
#liability .debt-treatment-panel{padding-top:4px}
/* CLINICOS-V4-MANUAL-UAT-BATCH1（FIX-G）：負債療程 KPI 改用共用的 .cos-kpi Card。
   原本這裡的 #liability .debt-treatment-kpi-{grid,card,icon,body,label,value,unit} 是這一頁
   自己的第二套 KPI 樣式。其中 .debt-treatment-kpi-card 的 display:flex/align-items:center
   帶著 id 特異性，會直接壓過 .cos-kpi 的 column 版面，因此必須移除，否則共用卡片排不出來。
   .debt-treatment-kpi-card 這個 class 名稱本身保留在標記上 —— 它是 app.js
   （bindLiabilityKpiClicksV1 / closest('.debt-treatment-kpi-card')）綁點擊與 is-active-v1
   狀態用的 JS hook，不再負責任何視覺。
   下面兩條只補共用元件沒有的「可點擊／選取中」狀態，沿用既有 --cos-* token，不新增色票。 */
#liability .cos-kpi.is-clickable-v1{cursor:pointer;transition:border-color var(--cos-transition),box-shadow var(--cos-transition)}
#liability .cos-kpi.is-clickable-v1:hover{border-color:var(--cos-accent)}
#liability .cos-kpi.is-clickable-v1:focus-visible{outline:2px solid var(--cos-accent);outline-offset:2px}
#liability .cos-kpi.is-active-v1{border-color:var(--cos-accent);background:var(--cos-accent-soft)}
#liability .debt-treatment-kpi-info-v1{margin-left:4px;color:var(--cos-text-subtle);cursor:help}

#liability .debt-treatment-filter-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px 16px;margin-bottom:14px}
#liability .debt-treatment-filter-row{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
#liability .debt-treatment-filter-row label{font-weight:700;color:#0f172a;font-size:13px;display:flex;flex-direction:column;gap:6px}
#liability .debt-treatment-filter-row input,#liability .debt-treatment-filter-row select{background:#fff}
#liability .debt-treatment-filter-search{flex:1 1 220px;min-width:200px}
#liability .debt-treatment-filter-search input{width:100%}
#liability .debt-treatment-filter-quickpick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-bottom:1px}
#liability .debt-treatment-chip-btn{height:38px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-size:13px;font-weight:700;cursor:pointer}
#liability .debt-treatment-chip-btn:hover{border-color:#93c5fd}
#liability .debt-treatment-chip-btn.is-active{background:#eef4ff;border-color:#1d4ed8;color:#1d4ed8}
#liability .debt-treatment-filter-actions{display:flex;gap:8px;margin-left:auto}
#liability .debt-treatment-btn-primary{background:#1d4ed8;color:#fff;border:0;height:40px;padding:0 18px;border-radius:10px;font-weight:700;cursor:pointer}
#liability .debt-treatment-btn-primary:hover{background:#1741b8}

#liability .debt-treatment-more-filters{margin-top:12px;border-top:1px solid #eef1f5;padding-top:10px}
#liability .debt-treatment-more-toggle{background:transparent;border:0;padding:4px 0;color:#1d4ed8;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
#liability .debt-treatment-more-caret{display:inline-block;transition:transform .15s}
#liability .debt-treatment-more-toggle.is-open .debt-treatment-more-caret{transform:rotate(180deg)}
#liability .debt-treatment-more-body{margin-top:10px}
#liability .debt-treatment-more-body[hidden]{display:none}
#liability .liability-item-chip220:has(input:checked),#liability .liability-item-chip220.is-selected{background:#eef4ff;border-color:#1d4ed8;color:#1d4ed8;box-shadow:none}
#liability .liability-item-chip220:has(input:checked)::before,#liability .liability-item-chip220.is-selected::before{border-color:#1d4ed8;background:transparent}
#liability .liability-item-chip220:has(input:checked)::after,#liability .liability-item-chip220.is-selected::after{opacity:1;border-right-color:#1d4ed8;border-bottom-color:#1d4ed8}
#liability .liability-item-chip220:has(input:checked) span,#liability .liability-item-chip220.is-selected span{color:#1d4ed8}

#liability .debt-treatment-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 10px;flex-wrap:wrap}
#liability .debt-treatment-toolbar-count{font-size:14px;color:#344054}
#liability .debt-treatment-toolbar-count b{color:#0f172a;font-size:15px}
#liability .debt-treatment-toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#liability .debt-treatment-view-btn{height:36px;padding:0 12px;border-radius:8px;background:#fff;border:1px solid #e5e7eb;color:#98a2b3;font-size:13px;cursor:not-allowed}
#liability .debt-treatment-view-btn.is-active{background:#eef4ff;border-color:#bfdbfe;color:#1d4ed8;cursor:default}
#liability .debt-treatment-report-btn{height:36px;padding:0 14px;border-radius:8px;background:#f3f4f6;border:1px solid #e5e7eb;color:#344054;font-weight:600;font-size:13px;cursor:pointer}
#liability .debt-treatment-report-btn:hover{background:#e8eaed}

#liability .debt-treatment-table-wrap{overflow-x:auto}
#liability .debt-treatment-table{min-width:960px}
#liability .debt-treatment-table th{background:#eef1f7}
#liability .debt-treatment-table td{padding:14px 12px}
#liability .debt-treatment-table tbody tr{border-bottom:1px solid #eef1f5}
#liability .debt-treatment-table tbody tr:nth-child(even){background:#fff}
#liability .debt-treatment-table tbody tr:hover{background:#f5f9ff}
#liability .debt-treatment-empty-cell{text-align:center;color:#667085;padding:24px 12px}

#liability .debt-treatment-date-cell{font-size:13px;color:#344054;white-space:nowrap}
#liability .debt-treatment-customer-cell{display:flex;align-items:center;gap:10px;min-width:150px}
#liability .debt-treatment-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#eef4ff;color:#1d4ed8;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
#liability .debt-treatment-customer-info{min-width:0;display:flex;flex-direction:column;gap:2px}
#liability .debt-treatment-customer-name{font-size:14px}
#liability .debt-treatment-customer-sub{font-size:12px;color:#667085}
#liability .debt-treatment-treatment-cell{max-width:260px;display:flex;flex-direction:column;gap:3px}
#liability .debt-treatment-treatment-name{font-weight:700;color:#0f172a;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#liability .debt-treatment-cat-tag{align-self:flex-start;font-size:11px;font-weight:700;color:#1d4ed8;background:#eef4ff;border-radius:999px;padding:1px 8px}
#liability .debt-treatment-usedtotal-cell{text-align:center;font-weight:600;color:#344054;white-space:nowrap}
#liability .debt-treatment-value-cell{white-space:nowrap}
#liability .debt-treatment-value-positive{color:#166534;font-weight:700}
#liability .debt-treatment-value-zero{color:#98a2b3;font-weight:700}
#liability .debt-treatment-progress{min-width:130px}
#liability .debt-treatment-progress-top{display:flex;justify-content:flex-end;margin-bottom:3px}
#liability .debt-treatment-progress-pct{font-size:12px;font-weight:800;color:#344054}
#liability .debt-treatment-progress-track{height:7px;border-radius:999px;background:#eef1f5;overflow:hidden}
#liability .debt-treatment-progress-fill{height:100%;border-radius:999px}
#liability .debt-treatment-progress-high .debt-treatment-progress-fill{background:#1d4ed8}
#liability .debt-treatment-progress-mid .debt-treatment-progress-fill{background:#f59e0b}
#liability .debt-treatment-progress-low .debt-treatment-progress-fill{background:#dc2626}
#liability .debt-treatment-progress-exhausted .debt-treatment-progress-fill{background:#98a2b3}
#liability .debt-treatment-progress-note{font-size:12px;color:#667085;margin-top:3px}
#liability .debt-treatment-view-action{height:34px;padding:0 12px;border-radius:8px;background:#fff;border:1px solid #e5e7eb;color:#344054;font-size:13px;font-weight:600;cursor:pointer}
#liability .debt-treatment-view-action:hover{background:#f3f4f6}

@media(max-width:900px){
  /* FIX-G：舊的 .debt-treatment-kpi-grid 已移除；.cos-kpi-row 自己是
     repeat(auto-fit,minmax(200px,1fr))，窄寬度會自動收欄，不需要本頁再覆寫。 */
  #liability .debt-treatment-filter-row{align-items:stretch}
  #liability .debt-treatment-filter-actions{margin-left:0;width:100%}
}
/* W3（C6）：`.data-table` 是跨模組共用的全域規則（獎金、系統管理等共 42 處使用），
   規則本體完整保留，只以 `:not(.cos-table)` 縮小作用範圍 —— 已遷移到共用 Table 元件的
   表格（同時掛 .cos-table）改由 .cos-table 負責，其餘使用者行為完全不變。 */
.data-table:not(.cos-table){border-collapse:separate;border-spacing:0;width:100%;overflow:hidden;border-radius:14px;border:1px solid #e5e7eb;}
.data-table:not(.cos-table) th{background:#f1f5f9;color:#0f172a;font-weight:800;border-bottom:1px solid #dbe4ef;}
.data-table:not(.cos-table) td,.data-table:not(.cos-table) th{padding:10px 12px;vertical-align:middle;}
.data-table:not(.cos-table) tbody tr:nth-child(even){background:#fbfdff;}
.data-table:not(.cos-table) tbody tr:hover{background:#eef6ff;}
button.mini{padding:5px 10px;font-size:13px;border-radius:9px;min-width:auto;}
.detail-modal{position:fixed;z-index:9999;inset:0;background:rgba(15,23,42,.46);display:flex;align-items:flex-start;justify-content:center;padding:56px 24px;overflow:auto;}
.detail-modal.hidden{display:none;}
.detail-modal-card{width:min(980px,96vw);background:#fff;border-radius:18px;box-shadow:0 24px 72px rgba(15,23,42,.28);padding:18px;border:1px solid #dbe4ef;}
.detail-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e5e7eb;padding-bottom:12px;margin-bottom:14px;}
.detail-modal-head h3{margin:0;font-size:20px;color:#0f172a;}
.photo-preview-card220{width:min(1000px,80vw)!important;height:80vh;display:flex;flex-direction:column;padding:14px;}
.photo-preview-card220 .detail-modal-head{margin-bottom:10px;padding-bottom:10px;}
.photo-preview-actions220{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.photo-preview-zoom-label220{min-width:58px;text-align:center;font-weight:800;color:#1d4ed8;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:4px 8px;}
.photo-preview-media220{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc;overflow:auto;min-height:0;}
.photo-preview-stage220{min-width:100%;min-height:100%;width:max-content;height:max-content;display:flex;align-items:center;justify-content:center;}
.photo-preview-img220{display:block;flex:0 0 auto;max-width:none;max-height:none;width:auto;height:auto;object-fit:contain;transform-origin:center center;}
.photo-preview-info220{margin-top:10px;border:1px solid #e6edf5;border-radius:12px;background:#f8fafc;padding:10px 12px;min-height:78px;display:flex;flex-direction:column;justify-content:center;gap:8px;}
.photo-preview-row220{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center;}
.photo-preview-item220{font-size:14px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.photo-preview-item220 b,.photo-preview-note220 b{color:#475467;}
.photo-preview-note220{font-size:14px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px;}
.detail-grid div{border:1px solid #e6edf5;border-radius:12px;background:#f8fafc;padding:10px;}
.detail-grid b{display:block;font-size:12px;color:#64748b;margin-bottom:5px;}
.detail-grid span{font-weight:800;color:#0f172a;}
.sales-confirm-card-v212{width:min(860px,96vw);}
.sales-confirm-note-v212{margin:0 0 14px;color:#64748b;font-size:13px;line-height:1.6;background:#f8fafc;border:1px solid #e6edf5;border-radius:12px;padding:10px 12px;}
.sales-confirm-total-v212{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px;padding:14px 16px;border-radius:14px;background:#fff7ed;border:1px solid #fdba74;}
.sales-confirm-total-v212 span{font-size:13px;font-weight:700;color:#9a3412;}
.sales-confirm-total-v212 strong{font-size:26px;font-weight:900;color:#9a3412;line-height:1.1;}
.sales-confirm-note-row-v212{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:start;margin-top:14px;padding:10px 12px;border:1px solid #e6edf5;border-radius:12px;background:#f8fafc;}
.sales-confirm-note-row-v212 b{font-size:13px;color:#475467;}
.sales-confirm-note-row-v212 span{font-weight:700;color:#101828;white-space:pre-wrap;}
.sales-confirm-actions-v212{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
.sales-confirm-actions-v212 .primary{min-width:120px;font-weight:800;}
.sales-confirm-actions-v212 .ghost{min-width:92px;}
@media(max-width:900px){.filter-bar,.query-inline,.detail-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.filter-bar,.query-inline,.detail-grid{grid-template-columns:1fr;}}

/* V2.0.15 settings layout refinements */
.setting-subtabs{display:flex;gap:8px;margin:10px 0 14px;flex-wrap:wrap}
.setting-subtabs button{background:#eef2ff;color:#1d4ed8;border:1px solid #c7d2fe}
.setting-subtabs button.active-tab{background:#1d4ed8;color:#fff}
.setting-subpanel{border:1px solid #e6edf5;border-radius:14px;padding:14px;background:#fbfdff;margin-top:8px}
.product-form{grid-template-columns:120px minmax(130px,180px) minmax(260px,1fr) 120px 160px 140px!important}
.category-form{grid-template-columns:minmax(160px,1fr) 160px 120px minmax(160px,1fr) 120px!important}
.map-form{grid-template-columns:minmax(280px,1.4fr) minmax(260px,1.2fr) 120px 140px!important;align-items:end}
.package-form{grid-template-columns:120px 150px minmax(260px,1fr) 130px 130px 120px!important}
.benefit-form{grid-template-columns:150px minmax(320px,1fr) 120px 170px!important}
.compact-filter{grid-template-columns:220px 220px!important;max-width:520px}
.inline-check{flex-direction:row!important;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;height:43px;margin-top:22px}
.setting-table{table-layout:fixed;width:100%}
.setting-table th,.setting-table td{padding:8px 10px;vertical-align:middle;word-break:break-word}
.setting-table .col-code{width:105px}.setting-table .col-category{width:120px}.setting-table .col-price{width:105px}.setting-table .col-status{width:80px}.setting-table .col-actions{width:150px}.setting-table .col-unit{width:80px}.setting-table .col-staffneed{width:210px}.setting-table .col-qty{width:80px}.setting-table .col-inventory{width:130px}
.map-line{display:inline-flex;max-width:100%;align-items:center;gap:6px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:999px;padding:3px 8px;margin:2px 4px 2px 0;white-space:nowrap}

/* Shared page-header subtitle slot (#pageSubtitleV1, sits between #pageTitle and #todayText in the
   global <header> used by every page). Empty by default on all other pages via :empty{display:none}
   — zero visual impact anywhere except where a caller explicitly sets its text (currently only the
   消耗品項設定 quick-action, see runMenuActionV211's settingTab handler in app.js). */
.page-subtitle-v1{margin:2px 0 0;font-size:14px;color:#667085}
.page-subtitle-v1:empty{display:none}

/* ===== 消耗品項設定｜庫存對應設定 UI (Prototype, front-end only — 十四禁止事項: no DB/API/Inventory
   Ledger work here). Reuses .clinic-btn/.clinic-btn-primary/.clinic-btn-secondary, .badge-v1,
   .clinic-row-action-btn/.clinic-row-action-danger and the --clinic-primary token already
   established elsewhere in this stylesheet — no second design system. ===== */
.benefit-list-card-v1{background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 1px 6px #0001}
.benefit-list-toolbar-v1{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:12px}
.benefit-search-wrap-v1{position:relative;display:inline-flex;align-items:center}
.benefit-search-icon-v1{position:absolute;left:12px;font-size:14px;line-height:1;pointer-events:none;opacity:.6}
.benefit-search-wrap-v1 #benefitSettingSearch{height:40px;border-radius:10px;padding:0 14px 0 34px;font-size:15px;min-width:280px;box-sizing:border-box}
.benefit-list-pagination-v1{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.badge-v1.badge-warn{background:var(--cos-warning-bg);color:#b45309;border:1px solid #fde68a}

.benefit-edit-card-v1{background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 1px 6px #0001;margin-top:16px}
.benefit-edit-title-v1{margin:0 0 14px;font-size:18px;font-weight:700;color:#0f172a}
.benefit-edit-section-title-v1{margin:0 0 12px;font-size:16px;font-weight:700;color:#0f172a}
.benefit-edit-grid-v1{display:grid;grid-template-columns:minmax(0,40fr) 1px minmax(0,60fr);gap:20px;align-items:start}
.benefit-edit-divider-v1{align-self:stretch;background:#e5e7eb;width:1px}
/* 基本資料｜2-column paired grid (編碼+名稱 / 單位+分類 / 次分類 alone / 需要人員 spans both columns)
   — rebuilt per confirmed mockup, replaces the earlier single-column stacked layout. */
.benefit-basic-grid-v1{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.benefit-basic-field-v1{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600;color:#344054;position:relative;min-width:0}
.benefit-basic-field-v1 input,.benefit-basic-field-v1 select{height:40px;font-size:16px;border-radius:10px;box-sizing:border-box;width:100%}
.benefit-staff-need-field-v1{grid-column:1/-1}
.benefit-staff-need-label-v1{font-size:15px;font-weight:600;color:#344054}
.benefit-staff-need-trigger-v1{height:40px;font-size:16px;border-radius:10px;border:1px solid #d0d5dd;background:#fff;color:#0f172a;display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:pointer;width:100%;box-sizing:border-box;text-align:left}
.benefit-staff-need-trigger-v1:hover{border-color:#98a2b3}
.benefit-staff-need-trigger-v1 span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.benefit-staff-need-arrow-v1{font-size:12px;color:#667085;flex:none;margin-left:8px}
.benefit-staff-need-panel-v1{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #d0d5dd;border-radius:10px;box-shadow:0 8px 20px #0002;padding:6px;z-index:20;display:flex;flex-direction:column;gap:2px}
.benefit-staff-need-panel-v1.hidden{display:none}
.benefit-staff-need-panel-v1 label{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:14px;font-weight:500;color:#344054;cursor:pointer}
.benefit-staff-need-panel-v1 label:hover{background:#f8fafc}

.benefit-inv-head-v1{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.benefit-inv-toggle-v1{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#344054;cursor:pointer}
.benefit-inv-toggle-v1 input{position:absolute;opacity:0;width:1px;height:1px}
.benefit-inv-toggle-track-v1{position:relative;width:38px;height:22px;border-radius:999px;background:#d0d5dd;transition:background-color .15s ease;flex:none}
.benefit-inv-toggle-track-v1::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002;transition:transform .15s ease}
.benefit-inv-toggle-v1 input:checked + .benefit-inv-toggle-track-v1{background:var(--clinic-primary)}
.benefit-inv-toggle-v1 input:checked + .benefit-inv-toggle-track-v1::after{transform:translateX(16px)}
.benefit-inv-toggle-v1 input:focus-visible + .benefit-inv-toggle-track-v1{outline:2px solid var(--clinic-primary);outline-offset:2px}

.benefit-inv-body-v1{transition:opacity .15s ease}
.benefit-inv-body-v1.is-disabled-v1{opacity:.55}
.benefit-inv-table-wrap-v1{overflow-x:auto;border:1px solid #e5e7eb;border-radius:12px}
.benefit-inv-table-v1{width:100%;border-collapse:collapse;font-size:16px}
.benefit-inv-table-v1 th{text-align:left;padding:0 10px;background:#f8fafc;border-bottom:1px solid #e4e7ec;color:#344054;font-weight:600;font-size:15px;height:40px;white-space:nowrap}
.benefit-inv-table-v1 td{padding:8px 10px;border-bottom:1px solid #eef2f6;vertical-align:middle}
.benefit-inv-table-v1 tbody tr:last-child td{border-bottom:0}
.benefit-inv-table-v1 select,.benefit-inv-table-v1 input{height:40px;font-size:16px;border-radius:10px;box-sizing:border-box;width:100%}
.benefit-inv-table-v1 .benefit-inv-unit-cell-v1{color:#667085;text-align:center}
.benefit-inv-empty-v1{padding:14px;color:#667085;font-size:14px;text-align:center}
.benefit-inv-add-btn-v1{margin-top:12px}
.benefit-inv-note-wrap-v1{margin-top:16px}
.benefit-inv-note-label-v1{display:block;font-size:15px;font-weight:600;color:#344054;margin-bottom:6px}
.benefit-inv-note-wrap-v1 textarea{width:100%;box-sizing:border-box;min-height:80px;font-size:15px;padding:12px 14px;border-radius:12px;resize:vertical}
.benefit-inv-note-count-v1{text-align:right;font-size:12px;color:#98a2b3;margin-top:4px}

/* ===== 治療同意書規則的三個選項 —— CLINICOS-V4-CONSENT-RULE-RADIO-VISIBILITY-FIX =====
   這一組 label 原本沒有任何 CSS，於是被三條「裸元素選擇器」直接打中，壞成
   「radio 被拉成整條長框 ＋ 文字看不見」。三個來源都在本檔上方的全域區塊：

     label{display:flex;flex-direction:column;gap:6px}
        → radio 與文字被拆成上下兩列；且 column flex 的 align-items 預設是 stretch，
          radio 因此被拉滿整個容器寬度（實測 426px 寬、13px 高）——這就是那條長框。
     input,select,textarea,button{border:1px solid #d0d5dd;border-radius:10px;padding:10px 12px;background:#fff}
        → 再幫這顆被拉長的 radio 補上輸入框的外框與內距（配合全域 *{box-sizing:border-box}，
          10px/12px 的 padding 會把 16px 的 radio 完全吃掉）。
     aside{width:220px;background:#111827;color:white;...}（左側導覽列的規則）
        → Drawer 的容器是 <aside class="cos-drawer">，而 .cos-drawer 只覆寫 background 沒有覆寫 color，
          因此任何沒有自帶 color 的後代都會繼承成白字。這一組 label 正好沒有 class，所以是白的。

   修法沿用同一個 Drawer 內既有的 .benefit-staff-need-panel-v1 label 寫法（row flex ＋ 明確 color），
   以及全檔既有的 radio/checkbox 慣例（明確 width/height/margin），不新增任何設計語彙、
   不動那三條全域規則（它們還服務著側邊欄與一般表單，改動範圍過大）。 */
.benefit-consent-modes-v1{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.benefit-consent-modes-v1 label{display:flex;flex-direction:row;align-items:center;gap:8px;height:36px;padding:0 8px;margin:0;border-radius:8px;font-size:15px;font-weight:500;color:#344054;white-space:nowrap;cursor:pointer}
.benefit-consent-modes-v1 label:hover{background:#f8fafc}
.benefit-consent-modes-v1 input[type=radio]{flex:none;width:16px;height:16px;margin:0;padding:0;accent-color:var(--clinic-primary);cursor:pointer}
/* 唯讀（沒有消耗品項設定權限）時不給互動提示；父層 .is-disabled-v1 已負責整體淡化。 */
.benefit-consent-modes-v1 input[type=radio]:disabled{cursor:default}
.benefit-consent-modes-v1 label:has(input:disabled){cursor:default}
.benefit-consent-modes-v1 label:has(input:disabled):hover{background:transparent}

.benefit-edit-footer-v1{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid #e5e7eb}
.benefit-edit-footer-status-v1{font-size:14px;color:#b54708;font-weight:600}
.benefit-edit-footer-actions-v1{display:flex;gap:10px}

@media(max-width:1100px){
  .benefit-edit-grid-v1{grid-template-columns:1fr}
  .benefit-edit-divider-v1{display:none}
}

/* ===== Item Master | Legacy Sales Category Retirement — 銷售品項設定頁專屬 class，僅供本頁使用 ===== */
.product-edit-panel-v233{border:1px solid #e6edf5;border-radius:14px;background:#f8fbff;padding:16px 18px;margin-bottom:14px}
.product-edit-panel-v233 h4{margin:0 0 12px;font-size:15px;color:#0f172a}
.product-form-row-v233{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 12px;align-items:end}
.product-form-row-v233 label{font-size:12px;color:#475467}
.product-form-row-v233 input,.product-form-row-v233 select{margin-top:4px}
.product-form-row2-v233{grid-template-columns:1fr auto;margin-top:10px;align-items:center}
.product-form-actions-v233{display:flex;gap:10px;justify-self:end}
.product-form-actions-v233 button{height:42px;padding:0 20px;border-radius:10px;font-weight:600}
@media(max-width:1200px){.product-form-row-v233{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.product-form-row-v233{grid-template-columns:repeat(2,minmax(0,1fr))}.product-form-row2-v233{grid-template-columns:1fr}.product-form-actions-v233{justify-self:stretch}}

.product-filter-bar-v233{grid-template-columns:2fr repeat(3,1fr)}

.product-list-table-v233 td{vertical-align:middle}
.product-status-badge-v233{display:inline-flex;align-items:center;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}
.product-status-badge-v233.is-active{background:#ecfdf3;color:#166534}
.product-status-badge-v233.is-inactive{background:#fef2f2;color:#b91c1c}
.product-compat-badge-v233,.product-uncat-badge-v233{display:inline-flex;align-items:center;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;margin-left:4px;background:#fef3c7;color:#92400e}
.product-uncat-badge-v233{margin-left:0}
.product-list-table-v233 .ghost{background:#eef2ff;color:#1d4ed8}
.product-list-table-v233 .danger{background:#fee2e2;color:#991b1b}
.disabled{opacity:.55;text-decoration:none}
.tx-row-deleted{
  background:#f2f4f7!important;
  opacity:.6;
  cursor:not-allowed;
}
.tx-row-deleted td,.tx-row-deleted button,.tx-row-deleted .mini{
  cursor:not-allowed!important;
}
.tx-status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.tx-status.tx-active{
  background:#ecfdf3;
  color:#027a48;
  border:1px solid #abefc6;
}
.tx-status.tx-deleted{
  background:#fee4e2;
  color:#b42318;
  border:1px solid #fecdca;
}
@media(max-width:1100px){.product-form,.category-form,.map-form,.package-form,.benefit-form,.compact-filter{grid-template-columns:1fr!important}.setting-table{table-layout:auto}}
.payment-line-v216{grid-template-columns:auto minmax(70px,1fr) 110px 80px;align-items:center}
.pay-last4{max-width:80px}
.small-modal{max-width:520px}


/* ===== V2.0.17 layout fixes ===== */
#mapEditModal216 .detail-modal-card{width:min(520px,92vw)!important;max-width:520px!important;}
#mapEditModal216 .form.two{grid-template-columns:1fr 110px!important;}
#mapEditModal216 select,#mapEditModal216 input{max-width:100%;}
.payment-line-v216{grid-template-columns:22px minmax(72px,100px) 110px 86px!important;}
.pay-last4{max-width:86px;}
.employee-form-v217{grid-template-columns:120px 160px minmax(360px,1fr) auto!important;align-items:end;}
.role-checks-v217{display:grid!important;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px;margin:0;}
.role-checks-v217 label{font-weight:600;}
#usagePerfEmployee:disabled{background:#f3f4f6!important;color:#98a2b3!important;cursor:not-allowed;}

/* V2.0.18 UI fixes */
.payment-grid{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;gap:10px!important;overflow:visible!important;}
.payment-line-v218{display:grid!important;grid-template-columns:22px minmax(0,1fr) minmax(108px,1fr) minmax(92px,132px)!important;grid-template-areas:"check name name name" ". amount last4 last4";grid-template-rows:auto auto;align-items:center!important;column-gap:8px!important;row-gap:8px!important;width:100%!important;box-sizing:border-box!important;min-width:0!important;padding:10px 12px!important;min-height:86px;}
.payment-line-v218 input{min-width:0!important;width:100%!important;box-sizing:border-box!important;}
.payment-line-v218 input[type=checkbox]{grid-area:check;width:18px!important;height:18px!important;}
.payment-line-v218 .pay-name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.payment-line-v218 [data-payamt]{grid-area:amount;}
.payment-line-v218 .pay-last4{grid-area:last4;}
.payment-line-v218.no-last4-v218 [data-payamt]{grid-column:2/5;}
.role-checks-v217,.role-checks-v218{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(112px,1fr))!important;gap:8px!important;align-items:center!important;}
.role-checks-v217 label,.role-checks-v218 label{display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important;font-weight:600!important;margin:0!important;white-space:nowrap!important;}
.role-checks-v217 input,.role-checks-v218 input{width:auto!important;margin:0!important;}
.setting-search-bar-v218{margin:12px 0 4px;display:grid;grid-template-columns:minmax(260px,480px);}
.setting-search-bar-v218 label{font-weight:700;}
@media(max-width:900px){.payment-grid{grid-template-columns:1fr!important}}
.close-badge{font-size:13px;padding:4px 10px;border-radius:999px;margin-left:8px}.close-badge.closed{background:#fee4e2;color:#b42318}.close-badge.open{background:#ecfdf3;color:#027a48}.inline-actions{display:inline-flex;gap:8px;align-items:center;margin-left:8px}


/* V2.1.0 RC4 dashboard closing control */
.close-status-chip{font-size:13px;padding:6px 12px;border-radius:999px;font-weight:700;white-space:nowrap}
.close-status-chip.open{background:#ecfdf3;color:#027a48;border:1px solid #abefc6}
.close-status-chip.closed{background:#fee4e2;color:#b42318;border:1px solid #fecdca}
.close-action-btn{min-width:72px;white-space:nowrap}
.close-card221{max-width:620px;width:min(620px,92vw)}
.close-summary221{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.close-summary221>div{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#fff}
.close-summary221 span{display:block;font-size:12px;color:#667085;margin-bottom:4px}
.close-summary221 strong{font-size:15px;color:#101828}
.success-text{color:#027a48!important}.danger-text{color:#b42318!important}
.close-warning221{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:12px;margin:12px 0;line-height:1.5}
.full-label{display:block;margin-top:10px;font-weight:700;color:#344054}
.full-label textarea{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid #d0d5dd;border-radius:10px;padding:10px;font:inherit;resize:vertical}
.actions.right{justify-content:flex-end}
@media(max-width:760px){.close-summary221{grid-template-columns:1fr}.table-head .actions{flex-wrap:wrap}}

/* Shared System Color Palette */
.system-color-palette{display:grid;grid-template-columns:repeat(6,26px);gap:8px;margin-top:6px}
.system-color-swatch{width:26px;height:26px;border-radius:8px;border:1px solid #d0d5dd;cursor:pointer;padding:0}
.system-color-swatch.active{outline:2px solid #1d4ed8;outline-offset:1px}

/* ClinicOS Master Standard UI V1.0 - Appointment Type Management */
.appointment-type-form-v1{display:grid;gap:10px;margin-bottom:8px}
.appointment-type-row1-v1{display:grid;grid-template-columns:220px 80px auto 100px 1fr 120px;gap:10px;align-items:center}
.appointment-type-row2-v1{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.appointment-type-color-v1{display:flex;flex-direction:column;gap:4px;font-weight:700}
.appointment-type-color-v1 span{font-size:12px;color:#475467}
.appointment-type-flags-v1{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;white-space:nowrap}
.appointment-type-flags-v1 .checkline{margin:0;background:transparent;border:0;padding:0;height:auto}
.appointment-type-save-v1{width:120px;justify-self:stretch;align-self:center}
.appointment-type-compact-v1{padding:6px 10px;height:34px}

@media(max-width:1200px){
  .appointment-type-row1-v1{grid-template-columns:220px 80px auto 100px 1fr}
  .appointment-type-save-v1{grid-column:1/-1;justify-self:end}
}
@media(max-width:900px){
  .appointment-type-row1-v1{grid-template-columns:1fr 90px 1fr;align-items:start}
  .appointment-type-flags-v1{grid-column:1/-1;flex-wrap:wrap}
  .appointment-type-save-v1{grid-column:1/-1;justify-self:end}
}

/* ===== CLINICOS-V4-APPOINTMENT-SETTINGS-UI-REFINEMENT-001 =====================
   預約時段管理（#appointmentManagePanelSlotV223）的版面。全部規則都限定在
   .appt-slot-page-v1 內，不影響其它頁。只動 layout／spacing／typography，
   沒有新增 Token、沒有新增元件、沒有覆寫全域 .cos-* 規則。

   寬螢幕可讀寬度：設定類內容不應被拉满整個 viewport，因此限 1040px；
   列表仍可靠 .cos-scroll-x 水平滾動，不壓縮文字。 */
.appt-slot-page-v1{max-width:1040px;display:flex;flex-direction:column;gap:28px}
.appt-slot-section-v1{display:flex;flex-direction:column;gap:10px}
.appt-slot-head-v1{display:flex;flex-direction:column;gap:2px}
.appt-slot-title-v1{margin:0;font-size:16px;font-weight:600;color:#101828;line-height:1.5}
.appt-slot-desc-v1{margin:0;font-size:13px;color:#667085;line-height:1.6}
/* 儲存一律靠右、固定在該 Section 末端 */
.appt-slot-footer-v1{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.appt-slot-footer-v1 .msg{margin-right:auto;font-size:13px;color:#475467}

/* --- Section A：營業時段與預約間隔分群，input 不拉寬 ------------------ */
.appt-slot-group-v1{display:flex;flex-direction:column;gap:8px}
.appt-slot-group-v1+.appt-slot-group-v1{margin-top:18px;padding-top:18px;border-top:1px solid #f2f4f7}
.appt-slot-group-label-v1{font-size:13px;font-weight:600;color:#475467}
.appt-slot-fields-v1{display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:12px 20px}
.appt-slot-fields-v1.is-single{grid-template-columns:minmax(0,200px)}

/* --- Section B：緊湊設定列（取代行政化大表格）-------------------------- */
.appt-cat-body-v1{display:flex;flex-direction:column;gap:0}
.appt-cat-row-v1{display:grid;grid-template-columns:72px minmax(0,260px) 120px 1fr;gap:16px;align-items:end;padding:14px 0}
.appt-cat-row-v1+.appt-cat-row-v1{border-top:1px solid #f2f4f7}
.appt-cat-no-v1{font-size:14px;font-weight:600;color:#101828;padding-bottom:9px}
.appt-cat-name-v1{min-width:0}
.appt-cat-state-v1,.appt-cat-doctor-v1{padding-bottom:8px}
.appt-cat-fixed-v1{display:inline-block;font-size:13px;color:#667085;background:#f2f4f7;border-radius:999px;padding:3px 10px;white-space:nowrap}
.appt-cat-row-v1 .checkline{margin:0;background:transparent;border:0;padding:0;height:auto;font-size:14px;white-space:nowrap}

/* --- Section C：新增／編輯表單與列表分開 -------------------------------- */
.appt-type-form-v1{display:flex;flex-direction:column;gap:16px;margin-bottom:0}
.appt-type-grid-v1{display:grid;grid-template-columns:minmax(0,260px) 120px 140px minmax(0,1fr);gap:12px 20px;align-items:start}
.appt-type-color-field-v1{display:flex;flex-direction:column;gap:6px;min-width:0}
.appt-type-color-field-v1 .system-color-palette{margin:0}
.appt-type-flags-v1{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.appt-type-flags-v1 .checkline{margin:0;background:transparent;border:0;padding:0;height:auto;font-size:14px;white-space:nowrap}
.appt-type-form-v1 .cos-field__label{font-size:13px;color:#475467}
/* 備註不拉满整列 */
.appt-type-form-v1>.cos-field{max-width:520px}
/* 列表：只調 row height、表頭層級與 badge／色塊對齊，欄位完全未動 */
.appt-type-list-v1 table.cos-table th{font-size:13px;color:#475467;white-space:nowrap}
.appt-type-list-v1 table.cos-table td{font-size:14px;padding-top:11px;padding-bottom:11px;vertical-align:middle}
.appt-type-list-v1 table.cos-table td span[style*="width:16px"]{vertical-align:middle;border-radius:4px;margin-right:6px}

@media(max-width:1180px){
  .appt-type-grid-v1{grid-template-columns:minmax(0,240px) 110px 130px}
  .appt-type-color-field-v1{grid-column:1/-1}
}
@media(max-width:1024px){
  .appt-slot-page-v1{gap:22px}
  .appt-cat-row-v1{grid-template-columns:64px minmax(0,1fr);row-gap:10px}
  .appt-cat-state-v1,.appt-cat-doctor-v1{grid-column:2;padding-bottom:0}
  .appt-cat-no-v1{padding-bottom:0}
  .appt-type-grid-v1{grid-template-columns:minmax(0,1fr) 110px}
  .appt-type-color-field-v1{grid-column:1/-1}
  /* 窄版仍然不讓時間欄位被拉寬——兩欄各自封頂，多的空間留白 */
  .appt-slot-fields-v1{grid-template-columns:repeat(2,minmax(0,200px))}
}

/* ClinicOS V2.1.1 supplemental field labels */
.sales-field-labels-v211b{display:grid;grid-template-columns:1fr 1fr 1.4fr 1fr 1fr auto;gap:8px;margin:8px 0 4px;font-size:12px;font-weight:700;color:#475467;align-items:end;}
.sales-line-v211b{display:grid!important;grid-template-columns:1fr 1fr 1.4fr 1fr 1fr auto;gap:8px;align-items:center;}
.sales-line-v211b select,.sales-line-v211b input{width:100%;min-width:0;}
@media(max-width:900px){.sales-field-labels-v211b{display:none}.sales-line-v211b{display:flex!important;flex-wrap:wrap}.sales-line-v211b select,.sales-line-v211b input{min-width:140px;}}

/* V2.1.2 item-1 role settings UI polish (layout only) */
.role-form-card-v212{
  border:1px solid #e6edf5;
  border-radius:14px;
  background:#fbfdff;
  padding:14px;
  margin-bottom:12px;
  display:grid;
  gap:12px;
}
.role-base-row-v212{
  display:grid;
  grid-template-columns:120px minmax(220px,1fr);
  gap:12px;
  align-items:end;
}
/* 排序（窄）＋職務名稱（寬）同列。排序是兩三碼數字，撐滿整列只是浪費垂直空間。 */
.role-form-row-v212{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:12px 16px;
  align-items:end;
}
.role-form-row-v212 .cos-field{margin:0;}
/* 職務名稱不需要吃滿整個工作區寬度——超過這個寬度只會讓表單看起來空曠。 */
.role-field-name-v212 .cos-field__control{max-width:420px;}
@media (max-width:720px){
  .role-form-row-v212{grid-template-columns:minmax(0,1fr);}
  .role-field-name-v212 .cos-field__control{max-width:none;}
}

/* 緊湊型 Checkbox Grid：Desktop 4 欄，每格 44–48px，淡灰框、無陰影。 */
.role-cap-grid-v212{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px 14px;
}
.role-cap-grid-v212 .checkline{
  margin:0;
  padding:0 12px;
  border:1px solid #e4e7ec;
  border-radius:8px;
  background:#fff;
  box-shadow:none;
  min-height:46px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  font-weight:600;
  color:#344054;
  white-space:nowrap;
}
.role-cap-grid-v212 .checkline input[type=checkbox]{
  width:16px;height:16px;margin:0;flex:0 0 auto;
}
@media (max-width:1180px){ .role-cap-grid-v212{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:900px){  .role-cap-grid-v212{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){  .role-cap-grid-v212{grid-template-columns:minmax(0,1fr);} }

/* 狀態自成一區：與權限之間用一條分隔線，讀者不會再把「啟用」當成第七個權限。 */
.role-status-block-v212{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #eaecf0;
}
.role-status-title-v212{
  font-size:13px;
  font-weight:700;
  color:#475467;
  margin-bottom:8px;
}
.role-status-check-v212{
  margin:0;
  padding:0 12px;
  border:1px solid #e4e7ec;
  border-radius:8px;
  background:#fff;
  box-shadow:none;
  min-height:46px;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:#344054;
}
.role-status-check-v212 input[type=checkbox]{width:16px;height:16px;margin:0;}

/* 主要／次要動作靠右同列，訊息留在左側。 */
#roleFormCardV212 .cos-card__footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
#roleFormCardV212 .cos-card__footer #roleMsg{margin-right:auto;margin-left:0;}
.role-actions-row-v212{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.role-actions-v212{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
/* 欄寬策略：排序／職務名稱／狀態／操作 一律完整顯示，被壓縮的只有中間 6 個權限欄。
   用 table-layout:fixed 才能真的固定住這些寬度 —— 否則瀏覽器會依內容重新分配，
   權限欄又會把「操作」擠出畫面。職務名稱不給寬度，剩餘空間全歸它。 */
.role-table-v212{table-layout:fixed;width:100%;}
.role-table-v212 th,
.role-table-v212 td{padding-left:8px;padding-right:8px;}
.role-table-v212 th:nth-child(1),.role-table-v212 td:nth-child(1){width:64px;}
.role-table-v212 th:nth-child(2),.role-table-v212 td:nth-child(2){width:auto;min-width:132px;}
/* 一般權限欄 68px；「可耗療操作」「可服務客戶」字較長，給 88px。 */
.role-table-v212 th:nth-child(3),.role-table-v212 td:nth-child(3){width:68px;}
.role-table-v212 th:nth-child(4),.role-table-v212 td:nth-child(4){width:68px;}
.role-table-v212 th:nth-child(5),.role-table-v212 td:nth-child(5){width:88px;}
.role-table-v212 th:nth-child(6),.role-table-v212 td:nth-child(6){width:72px;}
.role-table-v212 th:nth-child(7),.role-table-v212 td:nth-child(7){width:68px;}
.role-table-v212 th:nth-child(8),.role-table-v212 td:nth-child(8){width:88px;}
.role-table-v212 th:nth-child(9),.role-table-v212 td:nth-child(9){width:80px;}
/* 操作欄要放得下「編輯／停用／刪除」三顆按鈕且不換行，寬度不足時會被裁掉，
   因此這一欄寧可給足，被壓縮的永遠是權限欄。 */
.role-table-v212 th:nth-child(10),.role-table-v212 td:nth-child(10){width:176px;}
/* 6 個權限欄一律置中（含第 8 欄「可服務客戶」——舊規則只涵蓋到第 7 欄，該欄是靠左的）。 */
.role-table-v212 th:nth-child(n+3):nth-child(-n+8),
.role-table-v212 td:nth-child(n+3):nth-child(-n+8){
  text-align:center;
}
.role-table-v212 th{font-size:13px;white-space:nowrap;}
.role-table-v212 td:nth-child(2){
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 有權限＝淡綠圓底＋綠勾；無權限＝淡灰破折號。兩者佔同樣的方框，欄位才對得齊，
   列高也不會因為多了圓底而變高。刻意不用紅叉：沒有這項權限不是錯誤。 */
.role-mark-v212{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  font-size:13px;
  line-height:1;
  font-weight:700;
}
.role-mark-v212.on{background:#ecfdf3;color:#027a48;}
.role-mark-v212.off{background:transparent;color:#d0d5dd;}
.role-status-badge-v212{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  padding:3px 10px;
  border-radius:999px;
  font-size:var(--cos-fs-badge,13px);
  font-weight:var(--cos-fw-badge,700);
  border:1px solid transparent;
}
.role-status-badge-v212.active{background:#ecfdf3;color:#027a48;border-color:#abefc6;}
.role-status-badge-v212.inactive{background:#f2f4f7;color:#667085;border-color:#e4e7ec;}
.role-actions-cell-v212{white-space:nowrap;}
.role-btn-v212{padding:4px 9px;font-size:12px;border-radius:8px;min-width:auto;line-height:1.3;}

@media(max-width:900px){
  .role-base-row-v212{grid-template-columns:1fr;}
  .role-cap-grid-v212{grid-template-columns:1fr;}
  .role-actions-row-v212{flex-direction:column;align-items:stretch;}
  .role-actions-v212{width:100%;justify-content:flex-end;}
}

/* ClinicOS V2.1.1 stage-1 navigation tree / workspace cards */
.sidebar-tree-v211{width:260px;display:flex;flex-direction:column;gap:0;padding:0;position:sticky;top:0;height:100vh;overflow:hidden;background:var(--cos-sidebar-bg,#182235);font-family:var(--cos-font,inherit);}
#app > main{max-width:calc(100% - 260px);margin-left:0;}
.sidebar-brand,.brand-v230{height:72px;display:flex;align-items:center;padding:0 18px;gap:10px;margin-bottom:0;flex:0 0 72px;}
.side-brand-logo-v230{width:48px;height:48px;display:block;object-fit:contain;object-position:center center;flex-shrink:0;}
.side-brand-text-v230{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.side-brand-text-v230 strong{font-size:22px;font-weight:700;line-height:1.05;}
.side-brand-text-v230 span{font-size:11px;line-height:1.2;white-space:nowrap;overflow:visible;letter-spacing:.02em;}

.nav-tree-v211{display:grid;gap:2px;align-content:start;height:calc(100vh - 72px - 104px);overflow-y:auto;overflow-x:hidden;padding:8px 10px 24px;}

.apptx-nav-divider{padding:14px 16px 6px;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--cos-sidebar-text-muted,#93a0b4);}
.apptx-nav-divider:first-child{padding-top:6px;}

.nav-module-v211{border:0;border-radius:10px;background:transparent;overflow:visible;}
.nav-module-toggle-v211{position:relative;width:100%;display:flex;align-items:center;gap:0;min-height:47px;height:47px;padding:0 14px;background:transparent;color:var(--cos-sidebar-text,#e2e8f0);font-size:16px;font-weight:600;line-height:1.4;border:0;border-radius:10px;transition:background-color var(--cos-transition,180ms ease),color var(--cos-transition,180ms ease);white-space:nowrap;}
.nav-module-toggle-v211::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:transparent;transition:background-color var(--cos-transition,180ms ease);}
.nav-module-toggle-v211>span{display:inline-flex;align-items:center;min-height:1em;}
.nav-module-toggle-v211 .apptx-nav-icon{margin-right:11px;font-size:19px;flex:0 0 auto;}
.apptx-nav-icon svg{width:19px;height:19px;display:block;}
.nav-module-toggle-v211>span:not(.apptx-nav-icon):not(.nav-module-arrow-v211){flex:1;text-align:left;}
.nav-module-toggle-v211:hover{background:var(--cos-sidebar-hover-soft,rgba(255,255,255,.06));color:#fff;}
.nav-module-toggle-v211:hover::before{background:var(--cos-accent,#0f6cbd);}
.nav-module-v211.is-open .nav-module-toggle-v211{background:var(--cos-accent,#0f6cbd);color:#fff;font-weight:600;}
.nav-module-v211.is-open .nav-module-toggle-v211::before{background:var(--cos-accent,#0f6cbd);}
.nav-module-arrow-v211{font-size:12px;color:#cbd5e1;transition:transform var(--cos-transition,180ms ease),color var(--cos-transition,180ms ease);}
.nav-module-v211.is-open .nav-module-arrow-v211{color:rgba(255,255,255,.85);transform:rotate(0deg);}
.nav-module-v211:not(.is-open) .nav-module-arrow-v211{transform:rotate(-90deg);}

.nav-group-list-v211{display:block;margin:0 10px 0 29px;padding:0;border-left:1px solid var(--cos-sidebar-tree-line,rgba(255,255,255,.14));max-height:0;opacity:0;overflow:hidden;transition:max-height .22s ease,opacity .18s ease,margin-top .22s ease,margin-bottom .22s ease;}
.nav-module-v211.is-open .nav-group-list-v211{max-height:480px;opacity:1;margin-top:4px;margin-bottom:8px;}
.nav-group-btn-v211{position:relative;display:flex;align-items:center;width:calc(100% - 4px);min-height:43px;height:auto;text-align:left;font-size:16px;font-weight:500;background:transparent;color:var(--cos-sidebar-text-muted,#93a0b4);border:0;margin:2px 0 2px 6px;padding:8px 12px 8px 26px;line-height:1.4;white-space:normal;word-break:keep-all;border-radius:8px;transition:background-color var(--cos-transition,180ms ease),color var(--cos-transition,180ms ease);}
.nav-group-btn-v211:hover{background:var(--cos-sidebar-hover-soft,rgba(255,255,255,.06));color:#fff;}
.nav-group-btn-v211.active{background:rgba(15,108,189,.28);color:#dbeafe;font-weight:600;}
.nav-group-btn-v211.active::before{content:'';position:absolute;left:-7px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--cos-accent,#0f6cbd);}
.legacy-nav-v211{display:none;}
.sidebar-footer-v24{position:absolute;bottom:12px;left:10px;right:10px;display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--cos-sidebar-tree-line,rgba(255,255,255,.10));}
.sidebar-footer-btn-v24{display:flex;align-items:center;justify-content:flex-start;gap:0;width:100%;height:42px;min-height:42px;margin:0;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--cos-sidebar-text,#e2e8f0);font-size:15px;font-weight:500;line-height:1.4;transition:background-color var(--cos-transition,180ms ease),color var(--cos-transition,180ms ease);}
.sidebar-footer-btn-v24 .apptx-nav-icon{margin-right:11px;display:inline-flex;align-items:center;flex:0 0 auto;}
.sidebar-footer-btn-v24:hover{background:var(--cos-sidebar-hover-soft,rgba(255,255,255,.06));color:#fff;}
.sidebar-tree-v211 .logout{position:static;height:42px;min-height:42px;}

.apptx-sidebar-brand{height:72px;flex:0 0 72px;display:flex;align-items:center;justify-content:center;padding:12px 16px;box-sizing:border-box;}
.apptx-sidebar-logo{width:164px;max-width:100%;height:auto;max-height:44px;object-fit:contain;}
.apptx-logout-ghost{background:transparent;color:var(--cos-sidebar-text,#e2e8f0);border:0;display:flex;align-items:center;justify-content:flex-start;transition:background-color var(--cos-transition,180ms ease),color var(--cos-transition,180ms ease);}
.apptx-logout-ghost:hover{background:var(--cos-sidebar-hover-soft,rgba(255,255,255,.06));color:#fff;}

/* ===== V3 Fluent redesign: workspace header, dashboard, sidebar toolbar (UI-only) ===== */
.apptx-toolbar{font-family:var(--cos-font,inherit);}
.apptx-badge{height:var(--cos-badge-height,36px);padding:0 12px;border-radius:var(--cos-radius-pill,999px);box-sizing:border-box;}
.apptx-badge span{white-space:nowrap;}
.apptx-badge strong{white-space:nowrap;}
.apptx-quick-btn{display:inline-flex;align-items:center;gap:6px;transition:transform var(--cos-transition-fast,150ms ease),background-color var(--cos-transition-fast,150ms ease);}
.apptx-quick-btn:hover{transform:scale(1.04);}

#dashboard.apptx-dashboard{font-family:var(--cos-font,inherit);}
#dashboard .apptx-summary-cards .card{height:110px;border-radius:var(--cos-radius-lg,16px);box-shadow:var(--cos-shadow-sm,0 1px 3px rgba(16,24,40,.06));}
#dashboard .apptx-summary-cards .card span{font-size:16px;font-weight:600;}
#dashboard .apptx-summary-cards .card strong{font-size:42px;font-weight:700;}

/* KPI amount/count: was one "$X／Y張" text node the browser could wrap mid-string;
   now two spans in a single-line flex row (values/calculation untouched). */
#dashboard .dashboard-kpi-value-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;white-space:nowrap;min-width:0;width:100%;grid-area:value;}
/* Selectors carry the full `.apptx-summary-cards .card` prefix on purpose: the generic
   `#dashboard .apptx-summary-cards .card span{font-size:16px}` rule above is more specific than
   a bare `#dashboard .dashboard-kpi-*`, so without it the amount silently rendered at 16px
   instead of the 42px the 今日預約/今日新客 cards use. */
#dashboard .apptx-summary-cards .card .dashboard-kpi-amount{font-size:42px;font-weight:700;line-height:1.1;overflow:hidden;text-overflow:ellipsis;}
#dashboard .apptx-summary-cards .card .dashboard-kpi-count{font-size:18px;font-weight:500;color:#667085;flex-shrink:0;text-align:right;}

/* ===== Dashboard 2nd-pass polish (2026-07-15): sidebar type scale, appointment-table
   header, sales/usage table cards. Scoped to .sidebar-tree-v211 / #dashboard only —
   #appointments (預約管理) and other pages are untouched. ===== */

/* 今日預約表 Header: centered, taller, clearer service-column tint (dashboard's own
   .dash-slot-table-v212 combo class only — #appointments's own appt-slot-table-v212
   instance is untouched since it never carries this combo class). */
.dash-slot-table-v212 thead th{height:50px;vertical-align:middle;text-align:center;font-size:17px;font-weight:700;}
.dash-slot-table-v212 thead th .apptx-dash-col-inner{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.dash-slot-table-v212 thead th .apptx-col-icon{font-size:16px;line-height:1;display:inline-flex;align-items:center;}
.dash-slot-table-v212 thead th .apptx-col-title{line-height:1.4;}
.dash-slot-table-v212 thead th .apptx-col-count{font-size:12px;font-weight:600;line-height:1.4;padding:2px 8px;border-radius:999px;background:rgba(15,23,42,.06);color:#475467;}
.dash-slot-table-v212 thead th.apptx-dash-col-nodoctor{background:#F3FBF7;color:#2E6B4F;}
.dash-slot-table-v212 thead th.apptx-dash-col-doctor{background:#F4F5FF;color:#3D3F7A;}
.dash-slot-table-v212 thead th:first-child{width:76px;min-width:76px;max-width:76px;text-align:center;}
.dash-slot-table-v212 tbody th{width:76px;min-width:76px;max-width:76px;text-align:center;}

/* 今日銷售 / 今日耗療 table cards */
.apptx-table-card{border-radius:16px;border:1px solid #E7EAF0;box-shadow:0 1px 3px rgba(16,24,40,.05);padding:18px 20px;}
.apptx-table-card-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
.apptx-table-card-head h3{margin:0;}
.apptx-table-summary{font-size:13px;color:#667085;font-weight:600;white-space:nowrap;}
.apptx-table-wrap{overflow-x:auto;}
/* Round 4: table-layout:fixed + explicit per-column % widths (summing to 100) replace the old
   min-width + horizontal-scroll approach — the table can never render wider than its card, so
   there is no X-scrollbar at any panel width; overflowing cell text clips with the existing
   ellipsis (Round 2) instead. No column added/removed, no pagination — width redistribution
   only. */
.apptx-dash-table{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:8px;}
/* 今日銷售 / 今日耗療 side-by-side: same panel/table styles, just laid out 50/50 in a row.
   No pagination/collapse/"more" added — each side still lists every row for the date. */
.apptx-dash-split-row-v3{display:flex;gap:16px;align-items:stretch;}
.apptx-dash-split-row-v3>.apptx-table-card{flex:1 1 50%;width:50%;min-width:0;display:flex;flex-direction:column;}
.apptx-dash-split-row-v3>.apptx-table-card .apptx-table-wrap{flex:1 1 auto;}
@media(max-width:1100px){
  .apptx-dash-split-row-v3{flex-direction:column;}
  .apptx-dash-split-row-v3>.apptx-table-card{width:100%;}
}
.apptx-dash-table thead th{height:40px;font-size:15px;font-weight:600;background:#F7F9FC;text-align:left;vertical-align:middle;border-bottom:1px solid #E7EAF0;white-space:nowrap;padding:0 8px;overflow:hidden;text-overflow:ellipsis;}
/* Round 2: 日期 column removed — every row must stay single-line (no wrap-driven row
   growth), so cell text now clips with an ellipsis instead of wrapping to a 2nd line. */
.apptx-dash-table tbody td{min-height:44px;height:44px;font-size:15px;line-height:1.45;border-bottom:1px solid #EEF1F5;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;}
.apptx-dash-table tbody tr:hover td{background:#F8FBFF;}
.apptx-dash-sales-table th:nth-child(1),.apptx-dash-sales-table td:nth-child(1){width:11%;}
.apptx-dash-sales-table th:nth-child(2),.apptx-dash-sales-table td:nth-child(2){width:19%;}
.apptx-dash-sales-table th:nth-child(3),.apptx-dash-sales-table td:nth-child(3){width:27%;}
.apptx-dash-sales-table th:nth-child(4),.apptx-dash-sales-table td:nth-child(4){width:15%;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;}
.apptx-dash-sales-table th:nth-child(5),.apptx-dash-sales-table td:nth-child(5){width:12%;text-align:left;}
.apptx-dash-sales-table th:nth-child(6),.apptx-dash-sales-table td:nth-child(6){width:16%;text-align:center;}
.apptx-dash-usage-table th:nth-child(1),.apptx-dash-usage-table td:nth-child(1){width:17%;}
.apptx-dash-usage-table th:nth-child(2),.apptx-dash-usage-table td:nth-child(2){width:28%;}
.apptx-dash-usage-table th:nth-child(3),.apptx-dash-usage-table td:nth-child(3){width:9%;text-align:center;font-variant-numeric:tabular-nums;}
.apptx-dash-usage-table th:nth-child(4),.apptx-dash-usage-table td:nth-child(4){width:15%;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;}
.apptx-dash-usage-table th:nth-child(5),.apptx-dash-usage-table td:nth-child(5){width:14%;text-align:left;}
.apptx-dash-usage-table th:nth-child(6),.apptx-dash-usage-table td:nth-child(6){width:17%;text-align:center;}

/* Status badge vs. secondary action buttons — scoped to the dashboard tables only;
   .pick/.sold-btn stay untouched globally (shared with 預約管理 and other pages). */
#todaySalesRows .used-btn{background:#FEE4E2!important;color:#B42318!important;border:0!important;border-radius:999px;height:32px;padding:0 14px;font-size:14px;font-weight:600;}
#todaySalesRows .pick{background:#DCFCE7;color:#166534;border-radius:10px;height:38px;padding:0 14px;font-size:15px;}
#todaySalesRows .pick:hover{background:#c8f5da;}
#todayUsageRows .pick{background:#E6F1FC;color:#0F6CBD;border-radius:10px;height:38px;padding:0 14px;font-size:15px;}
#todayUsageRows .pick:hover{background:#d5e9fb;}

.apptx-note-panel{border-radius:var(--cos-radius-lg,16px);}
.apptx-note-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.apptx-note-head h3{margin:0;display:flex;align-items:center;gap:8px;}
.apptx-note-add-btn{height:36px;padding:0 14px;border-radius:var(--cos-radius-pill,999px);font-size:13px;}
.note-box-v225 .note-add-placeholder-v225{color:var(--cos-text-muted,#8a94a6);}

.apptx-list-card .table-head{gap:10px;flex-wrap:wrap;}
.apptx-list-card .table-head input[type=date]{border-radius:var(--cos-radius-md,12px);height:36px;box-sizing:border-box;}
.apptx-toolbar-nav-btn{height:36px;padding:0 14px;border-radius:var(--cos-radius-pill,999px);}
.apptx-today-btn{height:36px;padding:0 16px;border-radius:var(--cos-radius-pill,999px);background:var(--cos-accent,#0f6cbd);color:#fff;font-weight:600;border:0;}
.apptx-today-btn:hover{background:var(--cos-accent-hover,#0a5aa0);}
.close-action-btn.primary::before{content:'🔒';margin-right:6px;}

/* Dashboard appointment column headers: header-only tint, columns/cards/colors otherwise
   untouched. (Superseded 2026-07-15 pass-3 header colors/layout now live further up this
   file, right after the .dash-slot-table-v212 tbody th width rule — kept here only for the
   card radius/shadow, which pass-3 didn't change.) */
.dash-slot-table-v212 tbody th{font-weight:600;}
.dash-slot-table-v212 .appt-slot-card-v212{border-radius:12px;box-shadow:0 1px 4px rgba(16,24,40,.06);transition:box-shadow 180ms ease;}
.dash-slot-table-v212 .appt-slot-card-v212:hover{box-shadow:0 4px 14px rgba(16,24,40,.14);}
.workspace-panel-v211{padding:24px;}
.workspace-head-v211{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.workspace-head-v211 h3{margin:0 0 6px;font-size:24px;line-height:1.25;color:#101828;}
.workspace-badge-v211{padding:6px 10px;border-radius:999px;background:#eef2ff;color:#1d4ed8;font-size:12px;font-weight:800;}
.workspace-notice-v211{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;}
.workspace-card-grid-v211{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:flex-start;gap:14px;margin-top:16px;align-items:stretch;}
.workspace-entry-card-v211{display:grid;grid-template-rows:auto 1fr auto;gap:10px;border:1px solid #e4e7ec;border-radius:18px;padding:16px;min-height:236px;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);box-shadow:0 1px 4px rgba(16,24,40,.06);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;cursor:default;}
.workspace-entry-card-v211:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.10);}
.workspace-entry-card-v211.is-available{border-color:#dbe4ef;}
.workspace-entry-card-v211.is-reserved{border-color:#d0d5dd;background:linear-gradient(180deg,#fcfcfd 0%,#f2f4f7 100%);}
.workspace-entry-card-v211.color-blue{border-color:#bfdbfe;background:linear-gradient(180deg,#eff6ff 0%,#f8fbff 100%);}
.workspace-entry-card-v211.color-green{border-color:#b7e0c4;background:linear-gradient(180deg,#ecfdf3 0%,#f7fdf9 100%);}
.workspace-entry-card-v211.color-purple{border-color:#d9d6fe;background:linear-gradient(180deg,#f5f3ff 0%,#fbfaff 100%);}
.workspace-entry-card-v211.color-orange{border-color:#fed7aa;background:linear-gradient(180deg,#fff7ed 0%,#fffaf5 100%);}
.workspace-entry-card-v211.color-reserved{border-color:#d0d5dd;background:linear-gradient(180deg,#fcfcfd 0%,#f2f4f7 100%);}
.workspace-entry-hero-v212{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:flex-start;}
.workspace-icon-v212{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:#e5e7eb;color:#101828;box-shadow:inset 0 0 0 1px rgba(16,24,40,.06);}
.workspace-entry-card-v211.color-blue .workspace-icon-v212{background:#dbeafe;color:#1d4ed8;}
.workspace-entry-card-v211.color-green .workspace-icon-v212{background:#dcfce7;color:#166534;}
.workspace-entry-card-v211.color-purple .workspace-icon-v212{background:#ede9fe;color:#6d28d9;}
.workspace-entry-card-v211.color-orange .workspace-icon-v212{background:#ffedd5;color:#c2410c;}
.workspace-entry-card-v211.color-reserved .workspace-icon-v212{background:#eaecf0;color:#475467;}
.workspace-entry-copy-v212{display:grid;grid-template-rows:auto 1fr;gap:8px;min-width:0;align-self:stretch;}
.workspace-entry-card-v211 h4{margin:0;font-size:var(--cos-fs-card-title,18px);font-weight:var(--cos-fw-card-title,600);color:#101828;line-height:var(--cos-lh-card-title,1.35);}
.workspace-entry-card-v211 p{margin:0;color:#475467;font-size:var(--cos-fs-label,15px);line-height:var(--cos-lh-body,1.5);min-height:0;}
.workspace-entry-meta-v211{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.workspace-status-v211{font-size:var(--cos-fs-badge,13px);line-height:var(--cos-lh-badge,1.2);font-weight:800;border-radius:999px;padding:4px 8px;white-space:nowrap;}
.workspace-status-v211.available{color:#1d4ed8;background:#eef4ff;}
.workspace-status-v211.reserved{color:#475467;background:#eaecf0;}
.workspace-entry-card-v211 button{width:100%;justify-content:center;font-weight:800;font-size:15px;min-height:44px;border-radius:12px;transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;cursor:pointer;margin-top:auto;}
.workspace-entry-card-v211 button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,24,40,.12);}
.workspace-entry-card-v211 button.available{background:#111827;color:#fff;}
.workspace-entry-card-v211.color-blue button.available{background:#1d4ed8;}
.workspace-entry-card-v211.color-green button.available{background:#15803d;}
.workspace-entry-card-v211.color-purple button.available{background:#6d28d9;}
.workspace-entry-card-v211.color-orange button.available{background:#c2410c;}
.workspace-entry-card-v211 button.reserved{background:#f2f4f7;color:#475467;border:1px solid #d0d5dd;cursor:not-allowed;}
.workspace-entry-card-v211 button:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px;}
.favorite-setting-table-v230 th,
.favorite-setting-table-v230 td{vertical-align:middle;white-space:nowrap;word-break:keep-all;}
.favorite-setting-table-v230 td:nth-child(4){max-width:360px;overflow:hidden;text-overflow:ellipsis;}
.favorite-actions-row-v230{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;}
.favorite-actions-row-v230 button{white-space:nowrap;}
.dashboard-shortcut-card-v212{cursor:pointer;transition:transform .16s ease, box-shadow .16s ease;}
.dashboard-shortcut-card-v212:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,24,40,.14);}
.dashboard-locked-card-v221{opacity:.58;filter:saturate(.72);cursor:not-allowed!important;box-shadow:inset 0 0 0 2px #fecdd3, 0 1px 6px rgba(16,24,40,.06)!important;}
.dashboard-locked-card-v221:hover{transform:none!important;box-shadow:inset 0 0 0 2px #fecdd3, 0 1px 6px rgba(16,24,40,.06)!important;}
.locked-action-v221,.locked-action-v221:disabled{opacity:.58!important;cursor:not-allowed!important;filter:grayscale(.18);box-shadow:none!important;}
#reports>.panel:first-child{display:none;}
/* LEGACY/DEAD MARKUP — same rationale as .customer-tabs/.sales-tabs/.usage-tabs above: Report
   navigation runs through the Workspace/Hub cards, not this native tab row. Intentional, not a
   bug. Removal is a dedicated cleanup after Reports UAT/Freeze sign-off, not a source-order fix. */
#reports .report-tabs{display:none!important;}
.report-standalone-v212>.panel:first-child{display:none;}
#usagePerfMode.usage-filter-active,
#usagePerfEmployee.usage-filter-active{
  border-color:#1d4ed8!important;
  box-shadow:0 0 0 2px rgba(29,78,216,.18);
  background:#eef4ff!important;
  color:#1d4ed8!important;
  font-weight:800;
}

.table-head .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.table-head .actions label{display:flex;flex-direction:row;align-items:center;gap:6px;margin:0}
.table-head .actions label input,.table-head .actions label select{margin:0}

.user-filter-actions-v221{margin:8px 0 0}
.user-role-group-cell-v221{display:grid;gap:6px}
.user-role-group-inline-v221{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.user-role-group-editor-v221{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-role-group-editor-v221 select{min-width:170px}
.user-action-row-v221{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.setting-table.compact-cols td:last-child .user-action-row-v221 button{white-space:nowrap}
.permission-tree-node-v221{display:flex;align-items:center;justify-content:space-between;gap:10px}
.permission-tree-label-v221{display:flex;align-items:center;gap:8px;font-weight:600;margin:0;flex:1;min-width:0}
.permission-tree-label-v221 span{display:inline-block;min-width:0}
.permission-tree-toggle-v221{margin-left:auto;white-space:nowrap}

#settingPanelPermissionGroups .setting-table.compact-cols th:nth-child(1){width:24%}
#settingPanelPermissionGroups .setting-table.compact-cols th:nth-child(2){width:24%}
#settingPanelPermissionGroups .setting-table.compact-cols th:nth-child(3){width:24%}
#settingPanelPermissionGroups .setting-table.compact-cols th:nth-child(4){width:28%}
.permission-node-cell-v221{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px}
.permission-node-label-v221{display:inline-flex;align-items:center;gap:8px;line-height:1.3;min-height:30px;max-width:100%}
.permission-node-label-v221 input[type=checkbox]{margin:0;transform:scale(1.05)}
.permission-node-text-v221{display:inline-flex;align-items:center;min-height:30px;line-height:1.3}
.permission-node-text-v221.permission-node-toggle-text-v221{cursor:pointer}
.permission-node-title-btn-v221{border:0;background:transparent;padding:0;text-align:left;cursor:pointer}
.permission-allow-label-v221{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#344054}
.permission-allow-state-v221{display:inline-block;min-width:56px}
.permission-allow-placeholder-v221{color:#98a2b3}

.permission-node-text-v221.permission-level-0-v221{font-weight:800;color:#101828}
.permission-node-text-v221.permission-level-1-v221{font-weight:700;color:#1d4ed8}
.permission-node-text-v221.permission-level-2-v221{font-weight:700;color:#b42318}
.permission-node-label-v221.permission-level-0-v221{font-weight:800;color:#101828}
.permission-node-label-v221.permission-level-1-v221{font-weight:700;color:#1d4ed8}
.permission-node-label-v221.permission-level-2-v221{font-weight:700;color:#b42318}

/* PERMISSION-TREE-REGISTRY-SYNC-002 §七 —— 群組權限：左樹右詳情。
   舊版三欄表格（第一層／第二層／第三層各一欄）在 13 個第一層、76 個群組下
   大半是空白格；改為單一縮排樹。
   層級以字重與縮排區分，不用紅色標第三層 —— 紅色在權限畫面會被讀成「禁止」。 */
/* PERMISSION-UI-POLISH-001 —— 真正的雙欄 Permission Workspace。
   左 40% 樹、右 60% 設定，各自 overflow-y 捲動，整頁不再無限延伸。 */
.permission-tree-2pane-v4{display:flex;align-items:stretch;gap:16px;padding:8px 12px 12px;min-width:0}
.permission-tree-pane-v4{flex:0 0 40%;max-width:40%;min-width:0;height:clamp(420px,58vh,640px);overflow-y:auto;overflow-x:hidden;border:1px solid var(--color-border,#e4e7ec);border-radius:10px;padding:6px;background:#fff}
.permission-detail-pane-v4{flex:1 1 60%;min-width:0;height:clamp(420px,58vh,640px);overflow-y:auto;border:1px solid var(--color-border,#e4e7ec);border-radius:10px;padding:16px 18px;background:#fff}
/* 樹列：36–40px 高、正常大小 checkbox、固定展開箭頭欄位，父子對齊。 */
.permission-tree-row-v4{display:flex;align-items:center;gap:8px;min-height:38px;padding:2px 10px;border-radius:8px;cursor:pointer}
.permission-tree-row-v4:hover{background:#f7f9fc}
/* 選中列：淡品牌藍底＋左側 3px accent line，明顯但克制。 */
.permission-tree-row-v4.is-selected{background:#eef4ff;box-shadow:inset 3px 0 0 var(--color-primary,#1d4ed8)}
.permission-tree-row-v4 .permission-node-check-v4{margin:0;flex:0 0 auto;width:17px;height:17px}
.permission-node-check-placeholder-v4{display:inline-block;width:17px;flex:0 0 auto}
.permission-tree-toggle-v4{border:0;background:transparent;cursor:pointer;padding:0;width:18px;flex:0 0 auto;color:#98a2b3;font-size:13px;line-height:1;text-align:center}
.permission-tree-toggle-v4.is-leaf{cursor:default}
.permission-node-text-v4{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.45;font-size:15px}
.permission-tree-row-v4.permission-level-0-v4 .permission-node-text-v4{font-weight:600;color:#101828;font-size:16px}
.permission-tree-row-v4.permission-level-1-v4{padding-left:30px}
.permission-tree-row-v4.permission-level-1-v4 .permission-node-text-v4{font-weight:500;color:#344054;font-size:15px}
.permission-tree-row-v4.permission-level-2-v4{padding-left:54px}
.permission-tree-row-v4.permission-level-2-v4 .permission-node-text-v4{font-weight:400;color:#667085}
/* 沒有獨立權限身分：中性灰，不用紅色。 */
.permission-tree-row-v4.is-non-permission .permission-node-text-v4{color:#98a2b3}
.permission-node-tag-v4{flex:0 0 auto;font-size:13px;color:#667085;background:#f2f4f7;border-radius:10px;padding:1px 8px;white-space:nowrap}
.permission-tree-row-v4 .permission-allow-state-v221{flex:0 0 auto;min-width:66px;text-align:right;font-size:13px;color:#667085;white-space:nowrap}
/* 右側 Detail */
.permission-detail-head-v4{border-bottom:1px solid var(--color-border,#e4e7ec);padding-bottom:12px;margin-bottom:16px}
.permission-detail-title-v4{font-weight:600;color:#101828;line-height:1.3;font-size:18px}
.permission-detail-level-v4{font-size:13px;color:#667085;margin-top:4px}
.permission-detail-note-v4{font-size:13px;color:#667085;line-height:1.6}
.permission-detail-empty-v4{color:#98a2b3;font-size:15px;padding:12px}
/* 設定區塊：compact setting row，不做巨大卡片。 */
.permission-setting-block-v4{border:1px solid var(--color-border,#e4e7ec);border-radius:10px;padding:14px 16px;background:#fcfdfe}
.permission-setting-title-v4{font-weight:600;color:#101828;font-size:15px;margin-bottom:10px}
/* CONSOLIDATED-UX-REGRESSION-FIX-003 ISSUE-03 —— 這兩個權限列都是 <label>，而全域規則
   `label{display:flex;flex-direction:column;gap:6px;font-weight:700}`（本檔第 128 行）會把
   未宣告方向的 flex 容器改成直向，導致 checkbox 被排到名稱／說明的「上一行」，列高從 48px
   變成 62px —— 這就是「三者視覺關係被拆散」的根因。這裡補上 flex-direction 與字重，
   純排版修正，permission code／階層／allow-deny／勾選狀態／儲存行為完全未動。 */
.permission-setting-row-v4{display:flex;flex-direction:row;align-items:flex-start;gap:12px;min-height:44px;cursor:pointer;font-weight:400}
.permission-setting-row-v4 input[type=checkbox]{margin:2px 0 0;width:17px;height:17px;flex:0 0 auto}
.permission-setting-text-v4{display:flex;flex-direction:column;gap:3px;min-width:0}
.permission-setting-name-v4{font-weight:600;color:#101828;font-size:15px;line-height:1.4}
.permission-setting-desc-v4{color:#667085;font-size:13px;line-height:1.5}
/* 進階權限：三列等高、以分隔線區隔，不做三張大卡。 */
.permission-advanced-v4{margin-top:18px}
.permission-advanced-group-v4{font-size:14px;color:#344054;font-weight:600;margin:0 0 8px}
.permission-advanced-hint-v4{font-size:13px;color:#3538cd;background:#eef4ff;border:1px solid #d9e2fc;border-radius:8px;padding:8px 12px;margin-bottom:10px;line-height:1.5}
.permission-advanced-list-v4{border:1px solid var(--color-border,#e4e7ec);border-radius:10px;overflow:hidden;background:#fff}
/* PERMISSION-INDEPENDENT-IDENTITY-001 §九 —— 三個庫存金額子權限改為「一列一項、
   checkbox／名稱／說明同一橫列」。這裡只動排版：三支權限碼、勾選連動與判定邏輯完全沒變。
   名稱給固定 min-width，三列的說明才會左緣對齊；說明可壓縮並以刪節號收尾，
   列高才不會因為換行而長高（原本名稱與說明上下兩層，列高 58px）。 */
/* ISSUE-03 —— 統一版型：[ checkbox ][ 權限名稱 ][ 說明 ] 同一橫列。
   flex-direction:row 是必要宣告（見上方 .permission-setting-row-v4 的說明）；
   align-items:flex-start ＋ checkbox 的 margin-top 讓 checkbox 與名稱對齊第一行，
   說明改為可自然換行（不再 nowrap／ellipsis，正式內容不被裁切）。
   font-weight:400 是為了擋掉全域 label 的 700，否則說明文字會變粗、失去 secondary 語氣。 */
.permission-advanced-item-v4{display:flex;flex-direction:row;align-items:flex-start;gap:12px;min-height:48px;padding:12px 16px;color:#344054;cursor:pointer;font-weight:400}
.permission-advanced-item-v4+.permission-advanced-item-v4{border-top:1px solid var(--color-border,#e4e7ec)}
.permission-advanced-item-v4:hover{background:#f7f9fc}
.permission-advanced-item-v4 input[type=checkbox]{margin:2px 0 0;width:17px;height:17px;flex:0 0 auto}
.permission-advanced-item-v4 .permission-setting-text-v4{flex:1 1 auto;flex-direction:row;align-items:baseline;gap:16px;min-width:0}
.permission-advanced-item-v4 .permission-setting-name-v4{flex:0 0 auto;min-width:132px}
.permission-advanced-item-v4 .permission-setting-desc-v4{flex:1 1 auto;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* 工具列 */
.permission-tree-toolbar-v4{display:flex;align-items:center;gap:8px;padding:12px 12px 4px}
.permission-tree-toolbar-v4 .ghost{font-size:14px}
.permission-tree-search-v4{flex:1 1 auto;max-width:360px;font-size:15px}
@media (max-width:1400px){
  .permission-tree-pane-v4{flex-basis:45%;max-width:45%}
}
@media (max-width:1024px){
  .permission-tree-2pane-v4{flex-direction:column}
  .permission-tree-pane-v4{flex:1 1 auto;max-width:100%;height:360px}
  .permission-detail-pane-v4{flex:1 1 auto;height:auto}
}

/* PERMISSION-UI-POLISH-001 §九 —— 群組列表／明細視覺整理。
   PERMISSION-WORKSPACE-UX-PHASE-2 —— Master → Detail：整列可點選、已選取狀態明確，
   下方改為 Workspace Header 而不是第二張表單卡片。 */
.permission-group-row-v4{cursor:pointer}
.permission-group-row-v4:hover{background:#f7f9fc}
.permission-group-row-v4.is-selected{background:#eef4ff}
.permission-group-row-v4.is-selected:hover{background:#e7efff}
.permission-group-row-v4.is-selected td:first-child{box-shadow:inset 3px 0 0 var(--color-primary,#1d4ed8);font-weight:600}
.permission-group-select-v4{padding:4px 12px;font-size:14px}
/* 已選取＝狀態，不是更重要的動作：維持次要按鈕尺寸，只改文字與淡色底，不放大成 Primary CTA。 */
.permission-group-select-v4.is-current{background:#eef4ff;border-color:#cfe0ff;color:var(--color-primary,#1d4ed8);font-weight:600;cursor:default}

/* ============================================================================
   PERMISSION-WORKSPACE-UX-PHASE-3 —— 依核定設計稿的四區版型。
   群組列表 → Selected Group Summary → Permission Workspace → Bottom Action Bar。
   全部不再包 .cos-card：先前每一區各自一層卡片，種出 Card-in-Card 與大片留白。
   ============================================================================ */
.permission-workspace-v5{display:flex;flex-direction:column;gap:14px}
.pw-visually-hidden-v5{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 區塊外框：單一淡框 + 小圓角，不疊卡片 */
.pw-section-v5,.pw-workspace-v5,.pw-summary-v5,.pw-actionbar-v5,.pw-people-panel-v5{
  border:1px solid var(--color-border,#e4e7ec);border-radius:12px;background:#fff;
}
.pw-section-head-v5{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.pw-section-title-v5{margin:0;font-size:18px;font-weight:600;color:#101828}
.pw-chip-v5{font-size:13px;color:#475467;background:#f2f4f7;border-radius:999px;padding:2px 10px}
.pw-section-actions-v5{margin-left:auto;display:flex;gap:8px}

/* --- 1. 群組列表 --------------------------------------------------------- */
.pw-grouplist-v5{padding:0 4px 6px}
.pw-grouptable-v5{width:100%;border-collapse:collapse;font-size:15px}
.pw-grouptable-v5 thead th{
  text-align:left;font-size:14px;font-weight:600;color:#667085;
  padding:8px 12px;border-bottom:1px solid var(--color-border,#e4e7ec);white-space:nowrap;
}
.pw-grouptable-v5 tbody td{padding:9px 12px;border-bottom:1px solid #f2f4f7;color:#344054;vertical-align:middle}
.pw-grouptable-v5 tbody tr:last-child td{border-bottom:0}
.pw-col-mark-v5{width:34px;padding-right:0!important}
.pw-col-num-v5{width:96px;text-align:right;white-space:nowrap;font-size:15px}
.pw-col-act-v5{width:112px;text-align:right;white-space:nowrap}
.pw-cell-name-v5{font-weight:600;color:#101828;font-size:16px}
.pw-cell-scope-v5{color:#667085;font-size:15px}
/* 左側 selection indicator（空圓 → 實心勾），不是可勾選的表單控制項 */
.pw-rowmark-v5{display:inline-block;width:16px;height:16px;border-radius:50%;border:1.5px solid #d0d5dd;vertical-align:middle}
.permission-group-row-v4.is-selected .pw-rowmark-v5{
  border-color:var(--color-primary,#1d4ed8);background:var(--color-primary,#1d4ed8);
  box-shadow:inset 0 0 0 2.5px #fff;
}
.pw-status-v5{display:inline-block;font-size:14px;font-weight:600;color:#067647;background:#ecfdf3;border-radius:999px;padding:2px 10px}
.pw-status-v5.is-off{color:#667085;background:#f2f4f7}

/* --- 2. Selected Group Summary（目標高度 90–110px）---------------------- */
.pw-summary-v5{
  display:flex;align-items:center;gap:16px;padding:14px 16px;min-height:90px;
  border-left:3px solid var(--color-primary,#1d4ed8);
}
.pw-summary-id-v5{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#eef4ff;color:var(--color-primary,#1d4ed8);font-size:18px;font-weight:700;
}
.pw-summary-main-v5{flex:1 1 auto;min-width:0}
.pw-summary-titlerow-v5{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pw-summary-title-v5{margin:0;font-size:18px;font-weight:600;color:#101828;line-height:1.3}
.pw-summary-badge-v5{font-size:14px;font-weight:600;color:#067647;background:#ecfdf3;border-radius:999px;padding:2px 10px}
.pw-summary-badge-v5.is-off{color:#667085;background:#f2f4f7}
.pw-summary-meta-v5{margin-top:3px;font-size:14px;color:#667085}
.pw-summary-people-v5{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-size:14px;color:#475467}
.pw-people-count-v5{white-space:nowrap}
.pw-people-avatars-v5{display:inline-flex}
/* 姓名首字頭像：系統沒有照片資料，不虛構人像 */
.pw-avatar-v5{
  width:26px;height:26px;border-radius:50%;background:#eef4ff;color:var(--color-primary,#1d4ed8);
  border:1.5px solid #fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex:0 0 auto;
}
.pw-people-avatars-v5 .pw-avatar-v5+.pw-avatar-v5{margin-left:-7px}
.pw-avatar-v5.is-more{background:#f2f4f7;color:#475467}
.pw-link-v5{border:0;background:none;padding:0;color:var(--color-primary,#1d4ed8);font-size:14px;cursor:pointer;white-space:nowrap}
.pw-summary-actions-v5{flex:0 0 auto;display:flex;gap:8px}
.pw-summary-actions-v5 .cos-btn{padding:6px 12px;font-size:14px;white-space:nowrap}
.pw-danger-v5{color:#b42318;border-color:#fecdca}
.pw-danger-v5:hover{background:#fef3f2}

/* 使用人員展開：不用 native <details>、不用 bullet list、不在內部自己滾動 */
.pw-people-panel-v5{padding:12px 16px}
.pw-people-panel-v5 ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 20px}
.pw-people-panel-v5 li{display:flex;align-items:center;gap:10px;font-size:15px;color:#344054;min-height:34px}
.pw-people-name-v5{font-weight:600;color:#101828}
.pw-people-code-v5{color:#98a2b3;font-size:13px}
.pw-people-empty-v5{color:#98a2b3}
.pw-msg-v5{min-height:0;margin:0 2px;color:#667085;font-size:13px}
.pw-msg-v5:empty{display:none}

.pw-people-head-v5{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.pw-people-title-v5{font-size:15px;font-weight:600;color:#101828}
.pw-people-assign-v5{margin-left:auto;padding:5px 12px;font-size:14px;white-space:nowrap}
/* 每列的成員操作是小型次要文字操作，不做成整排大按鈕。
   桌機以 hover 淡入減少視覺噪訊，但按鈕永遠存在於 DOM 且可 Tab 到——
   :focus-within 會把整列操作露出來，因此鍵盤操作不依賴 hover。 */
.pw-people-ops-v5{margin-left:auto;display:inline-flex;gap:10px;opacity:0;transition:opacity .12s}
.pw-people-panel-v5 li:hover .pw-people-ops-v5,
.pw-people-panel-v5 li:focus-within .pw-people-ops-v5{opacity:1}
.pw-people-op-v5{border:0;background:none;padding:0 2px;color:var(--color-primary,#1d4ed8);font-size:13px;cursor:pointer;white-space:nowrap}
.pw-people-op-v5:hover{text-decoration:underline}
.pw-people-op-v5.is-danger{color:#b42318}
.pw-people-op-v5:focus-visible{outline:2px solid var(--color-primary,#1d4ed8);outline-offset:2px;border-radius:4px}
/* 鍵盤使用者一按 Tab 就要看得到焦點所在，不能停在 opacity:0 的元素上 */
.pw-people-op-v5:focus{opacity:1}

/* 指派人員 Modal —— 沿用既有 .detail-modal 樣式，只補內容區排版 */
.pw-modal-card-v5{width:min(620px,94vw)}
.pw-modal-body-v5{padding:14px 2px 4px}
/* Footer 固定：左側說明「指派後會發生什麼」，右側取消／主要動作 */
.pw-modal-actions-v5{display:flex;align-items:center;gap:8px}
.pw-modal-hint-v5{margin-right:auto;font-size:13px;color:#667085;line-height:1.5}
/* 移除是降權而不是刪除，用 destructive secondary，不做大型紅色 Primary CTA */
.pw-btn-danger-v5{background:#fff;color:#b42318;border:1px solid #fecdca}
.pw-btn-danger-v5:hover{background:#fef3f2;border-color:#f97066}
.pw-remove-text-v5{margin:0;font-size:15px;line-height:1.7;color:#344054}
.pw-assign-search-v5{width:100%;font-size:15px;margin-bottom:8px}
/* 搜尋框正下方的即時計數，讓「已選幾位」不必捲到 Footer 才看得到 */
.pw-assign-count-v5{margin:0 2px 8px;font-size:13px;color:#667085}
/* 清單自己滾動，Modal 不隨人數無限長高 */
.pw-assign-list-v5{max-height:min(46vh,360px);overflow-y:auto;border:1px solid var(--color-border,#e4e7ec);border-radius:10px}
/* 一列一人，52–56px：checkbox 垂直置中，姓名與員工編號同列，目前群組靠右 */
/* BATCH-009 UI-01 —— 列本身是 <label>，本檔第 128 行的全域 label{display:flex;flex-direction:column;
   font-weight:700} 會把沒有明確寫出的 flex-direction／font-weight 帶進來：實測每列被改成 column，
   checkbox／姓名／帳號／「目前：」上下堆疊、列高 78px。因此這兩個屬性明確寫死，不靠繼承。 */
.pw-assign-row-v5{display:flex;flex-direction:row;align-items:center;gap:12px;padding:0 14px;min-height:54px;cursor:pointer;font-size:15px;font-weight:400}
.pw-assign-row-v5+.pw-assign-row-v5{border-top:1px solid #f2f4f7}
.pw-assign-row-v5:hover{background:#f7f9fc}
.pw-assign-row-v5.is-selected{background:#eef4ff}
.pw-assign-row-v5 input[type=checkbox]{width:17px;height:17px;flex:0 0 auto;margin:0;align-self:center}
/* 姓名＋帳號這一段吃剩餘寬度並可收縮；長姓名、長帳號以刪節號收尾，「目前：」永遠留在列內靠右。 */
.pw-assign-who-v5{display:inline-flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto;overflow:hidden}
.pw-assign-name-v5{font-weight:600;color:#101828;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.pw-assign-code-v5{color:#98a2b3;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.pw-assign-from-v5{margin-left:auto;color:#667085;font-size:13px;white-space:nowrap;padding-left:12px;flex:0 0 auto}
/* 窄螢幕允許「目前：」換到第二行（仍在列內），不壓縮姓名、不產生水平捲軸。 */
@media (max-width:600px){
  .pw-assign-row-v5{flex-wrap:wrap;row-gap:2px;padding-top:8px;padding-bottom:8px}
  .pw-assign-from-v5{padding-left:29px}
}
.pw-assign-empty-v5{padding:24px 12px;text-align:center;color:#98a2b3;font-size:14px}
.pw-assign-note-v5{margin:10px 2px 0;font-size:13px;color:#667085;line-height:1.6}
.pw-change-info-v5{display:flex;flex-direction:column;gap:8px;font-size:15px;color:#344054;margin-bottom:14px}
.pw-change-label-v5{display:inline-block;min-width:76px;color:#667085;font-size:14px}
.pw-change-target-v5{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#344054}

/* --- 3. Permission Workspace（左 42% \/ 右 58%）---------------------------- */
.pw-workspace-v5{display:flex;align-items:stretch;overflow:hidden}
.pw-tree-col-v5{flex:0 0 42%;max-width:42%;display:flex;flex-direction:column;border-right:1px solid var(--color-border,#e4e7ec)}
.pw-tree-head-v5{padding:14px 12px 0}
.pw-workspace-v5 .permission-tree-pane-v4{flex:1 1 auto;max-width:100%;border:0;border-radius:0}
.pw-workspace-v5 .permission-detail-pane-v4{flex:1 1 58%;max-width:58%;border:0;border-radius:0}

/* --- 4. Bottom Action Bar ------------------------------------------------- */
.pw-actionbar-v5{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fcfdfe}
.pw-actionbar-hint-v5{font-size:13px;color:#667085}
.pw-actionbar-btns-v5{margin-left:auto;display:flex;gap:8px}

@media (max-width:1400px){
  .pw-tree-col-v5{flex-basis:45%;max-width:45%}
  .pw-workspace-v5 .permission-detail-pane-v4{flex-basis:55%;max-width:55%}
}
@media (max-width:1024px){
  .pw-workspace-v5{flex-direction:column}
  .pw-tree-col-v5{flex:1 1 auto;max-width:100%;border-right:0;border-bottom:1px solid var(--color-border,#e4e7ec)}
  .pw-workspace-v5 .permission-detail-pane-v4{flex:1 1 auto;max-width:100%}
  .pw-summary-v5{flex-wrap:wrap}
}

.action-modal-card-v221{width:min(420px,92vw)}
/* 005A：訊息可能包含一段次要說明（例如銷售成功、但客戶服務人員未指派的原因），
   兩段之間以換行分隔。內容一律走 textContent，這裡只讓換行看得出來，
   沒有改動 modal 本身的行為或結構。 */
.action-modal-body-v221{padding:12px 2px 4px;font-size:16px;font-weight:700;color:#101828;white-space:pre-line}

.marketing-toast-v230{position:fixed;right:18px;bottom:18px;z-index:10001;max-width:min(420px,86vw);background:#166534;color:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 10px 24px rgba(0,0,0,.22);font-weight:700}
.marketing-toast-v230.is-error{background:#991b1b}

.nav-module-v211.disabled .nav-module-toggle-v211,
.nav-group-btn-v211.disabled,
.workspace-entry-card-v211.disabled{
  color:#98a2b3!important;
  text-decoration:none!important;
}

.nav-group-btn-v211.disabled,
.workspace-entry-card-v211.disabled button{
  background:#f2f4f7!important;
  border-color:#d0d5dd!important;
}

#settingPanelUsers .setting-table.compact-cols th:nth-child(4),
#settingPanelUsers .setting-table.compact-cols td:nth-child(4){width:110px;white-space:nowrap}
#settingPanelUsers .setting-table.compact-cols th:nth-child(6),
#settingPanelUsers .setting-table.compact-cols td:nth-child(6){width:300px}
#settingPanelUsers .setting-table.compact-cols td:nth-child(6){overflow:visible}
.user-action-row-v221{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap}
.user-action-row-v221 button{min-width:74px}

.permission-tree-label-v221.permission-level-0-v221{font-weight:800;color:#101828}
.permission-tree-label-v221.permission-level-1-v221{font-weight:700;color:#1d4ed8}
.permission-tree-label-v221.permission-level-2-v221{font-weight:700;color:#b42318}
.permission-tree-label-v221.permission-level-1-v221{padding-left:16px}
.permission-tree-label-v221.permission-level-2-v221{padding-left:34px}

@media(max-width:1380px){
  .workspace-card-grid-v211{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media(max-width:1200px){
  .menu-settings-panel-v23 .menu-settings-grid-v23{grid-template-columns:1fr;gap:16px}
}

@media(max-width:1000px){
  .sidebar-tree-v211{width:260px;}
  #app > main{max-width:calc(100% - 260px);}
  .workspace-card-grid-v211{grid-template-columns:repeat(2,minmax(0,1fr));}
  .workspace-entry-card-v211{min-height:220px;}
  .quick-launcher-panel-v23{min-width:320px;width:min(380px,calc(100vw - 300px));}
}

@media(max-width:640px){
  .workspace-card-grid-v211{grid-template-columns:1fr;}
  .workspace-entry-card-v211{min-height:unset;}
  .quick-launcher-panel-v23{right:auto;left:0;min-width:min(92vw,360px);width:min(92vw,360px)}
  .quick-launcher-grid-v23{grid-template-columns:1fr}
}

@media print{
  @page{size:A4 portrait;margin:10mm;}

  #dailyReport,
  #monthlyReportPanel,
  #monthlyTable,
  #salesPerformanceReport,
  #usagePerformanceReport,
  #sourceValueReport,
  #newCustomerNoSaleReport{
    transform:scale(0.9);
    transform-origin:top left;
    width:111.11%;
  }

  #dailyReport table,
  #monthlyReportPanel table,
  #monthlyTable,
  #salesPerformanceReport table,
  #usagePerformanceReport table,
  #sourceValueReport table,
  #newCustomerNoSaleReport table,
  table{
    width:100%;
    table-layout:fixed;
  }

  #dailyReport th,
  #dailyReport td,
  #monthlyReportPanel th,
  #monthlyReportPanel td,
  #monthlyTable th,
  #monthlyTable td,
  #salesPerformanceReport th,
  #salesPerformanceReport td,
  #usagePerformanceReport th,
  #usagePerformanceReport td,
  #sourceValueReport th,
  #sourceValueReport td,
  #newCustomerNoSaleReport th,
  #newCustomerNoSaleReport td,
  th,
  td{
    font-size:10pt;
    word-break:break-word;
  }

  #dailyReport,
  #monthlyReportPanel,
  #monthlyTable,
  #salesPerformanceReport,
  #usagePerformanceReport,
  #sourceValueReport,
  #newCustomerNoSaleReport,
  table,
  thead,
  tbody,
  tr,
  th,
  td,
  .summary-card,
  .daily-summary-grid,
  .daily-note{
    page-break-inside:avoid;
    break-inside:avoid;
  }
}


/* V2.3 RC consolidated UI fixes */
.adjustment-search-results-v230{position:static!important;display:block;max-height:280px;overflow:auto;margin-top:8px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;box-shadow:none!important}
.adjustment-search-results-v230.hidden{display:none!important}
.adjustment-search-results-v230 table{margin:0}.adjustment-search-results-v230 th,.adjustment-search-results-v230 td{padding:8px}
.refund-config-card-v230{display:flex;flex-direction:column;gap:14px;width:100%}
.refund-method-row-v230{display:grid;grid-template-columns:260px minmax(220px,1fr) 220px;align-items:center;gap:16px;width:100%}
.refund-method-title-v230{font-weight:600;color:#1f2d4d;white-space:nowrap}
.refund-method-radios-v230{display:flex;gap:24px;align-items:center;flex-wrap:nowrap;margin-top:0;justify-content:flex-start}
.refund-method-radios-v230 label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.refund-method-placeholder-v230{display:block}
.refund-fee-row-v230{display:grid;grid-template-columns:260px minmax(220px,1fr) 220px;align-items:center;gap:16px;width:100%}
.refund-fee-label-v230{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.refund-fee-placeholder-v230{display:block}
.refund-fee-row-v230 input[type="number"]{width:220px;max-width:100%;justify-self:start}
.refund-fee-row-v230 input[type="text"]{width:100%;max-width:320px;justify-self:start}
.refund-action-row-v230{display:flex;justify-content:flex-start}
#adjustmentEditorV230.is-refund-mode #adjustmentTargetCardTitleV230{font-size:19px;font-weight:700}
.fee-check-v230{display:grid!important;grid-template-columns:1fr 160px;align-items:center;gap:12px}.fee-check-v230>span{display:flex;align-items:center;gap:8px}.fee-check-v230 input[type=checkbox]{width:18px;height:18px}
.refund-fee-grid-v230{display:flex;flex-direction:column;gap:10px;width:100%}
.refund-fee-item-v230{display:flex;flex-wrap:nowrap;align-items:center;gap:16px;padding:10px 14px;border:1px solid #dbe4ef;border-radius:12px;background:#f8fbff}
.refund-fee-label-v230{flex:0 0 auto;min-width:150px;display:flex;align-items:center;gap:8px;font-weight:600;color:#1f2d4d;white-space:nowrap}
.refund-fee-input-wrap-v230{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-width:0}
.refund-fee-input-wrap-v230 input[type="number"]{width:140px;max-width:100%;padding:8px 10px;border:1px solid #d0d5dd;border-radius:8px;background:#fff}
.refund-input-addon-v230{display:inline-flex;align-items:center;height:36px;padding:0 10px;border:1px solid #d0d5dd;border-radius:8px;background:#f8fafc;color:#344054;font-size:12px;white-space:nowrap}
.refund-fee-live-v230{flex:0 0 auto;min-width:100px;text-align:right;font-size:20px;font-weight:700;color:#16a34a;white-space:nowrap}
.refund-search-row-v230{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.refund-search-row-v230 input{flex:1 1 320px;min-width:220px;padding:8px 10px;border:1px solid #d0d5dd;border-radius:8px;background:#fff}
.refund-preview-cards-v230{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:stretch;margin-bottom:12px}
.refund-preview-card-v230{border:1px solid #dbe4ef;border-radius:12px;background:#f8fafc;padding:10px 12px;display:grid;gap:6px;align-content:center;text-align:center}
.refund-preview-card-v230 .label{font-size:13px;color:#344054;font-weight:600}
.refund-preview-card-v230 .value{font-size:34px;color:#101828;font-weight:800;line-height:1.1}
.refund-preview-card-v230.is-main{background:#eef4ff;border-color:#c7d7ff}
.refund-preview-card-v230.is-main .value{color:#1d4ed8}
.refund-preview-card-v230.is-deduct .value{color:#dc2626}
.refund-preview-op-v230{display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:#334155;min-width:30px}
.refund-fee-table-wrap-v230{border:1px solid #dbe4ef;border-radius:12px;background:#fff;overflow:hidden}
.refund-fee-table-v230{width:100%;border-collapse:collapse}
.refund-fee-table-v230 thead th{background:#f2f4f7;color:#344054;font-size:13px;padding:10px 12px;border-bottom:1px solid #e5e7eb;text-align:left}
.refund-fee-table-v230 td{padding:10px 12px;border-bottom:1px solid #eef2f7;font-size:13px;color:#0f172a}
.refund-fee-table-v230 tbody tr:last-child td{border-bottom:0;font-weight:700;background:#f8fafc}
.refund-fee-table-v230 .right{text-align:right}
.refund-fee-table-v230 .deduct{color:#dc2626;font-weight:700}
#adjustmentRefundActionsV230 button#adjustmentConfirmRefundBtnV230{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
#adjustmentRefundActionsV230 button#adjustmentConfirmRefundBtnV230:hover{background:#1e40af;border-color:#1e40af}
#adjustmentRefundActionsV230 button:disabled{background:#e5e7eb;color:#98a2b3;border-color:#d0d5dd;cursor:not-allowed}
#adjustmentRefundActionsV230 button#adjustmentConfirmRefundBtnV230:disabled{background:#e5e7eb;border-color:#d0d5dd;color:#98a2b3;cursor:not-allowed}
.quick-access-flat-list-v23{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quick-access-flat-row-v23{display:flex!important;flex-direction:row!important;align-items:center;gap:9px;padding:10px 12px;border:1px solid #e4e7ec;border-radius:10px;background:#fff;font-weight:700}.quick-access-flat-row-v23 input{width:18px;height:18px;margin:0}
@media(max-width:900px){.quick-access-flat-list-v23{grid-template-columns:1fr}.fee-check-v230{grid-template-columns:1fr}.refund-method-row-v230,.refund-fee-row-v230{display:flex;flex-wrap:wrap;gap:12px}.refund-method-radios-v230{flex-wrap:wrap;gap:16px}.refund-method-placeholder-v230,.refund-fee-placeholder-v230{display:none}.refund-fee-row-v230 input[type="number"],.refund-fee-row-v230 input[type="text"]{width:auto;max-width:100%}.refund-fee-item-v230{flex-wrap:wrap}.refund-fee-live-v230{text-align:left;font-size:20px}.refund-preview-cards-v230{grid-template-columns:1fr;gap:8px}.refund-preview-op-v230{font-size:22px;min-height:22px}}

/* Quick Function expandable 3-level tree (系統管理 > 選單設定 > 快速功能設定) */
.qf-tree-panel{min-width:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column}
.qf-tree-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qf-tree-panel-head h5{margin:0}
.qf-tree-panel-count{flex:0 0 auto;font-size:13px;font-weight:700;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:2px 10px;white-space:nowrap}
.qf-tree-panel-desc{margin:4px 0 10px}
.qf-tree-empty-state{padding:16px;border:1px dashed #d0d5dd;border-radius:12px;background:#f9fafb;color:#667085;font-weight:600;text-align:center}
/* This is the ONE intentional scroll region for the whole 快速功能設定 list (per spec: only the
   entire right-side panel scrolls, never an individual card). Every .qf-tree-l1/.qf-tree-l2
   child below is pinned with flex-shrink:0 so they are never squeezed to fit inside this box —
   they keep their full natural height and this outer box scrolls past them instead. */
.qf-tree{width:100%;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;gap:11px;max-height:560px;overflow-y:auto;overflow-x:hidden}

/* Level 1 — 主選單：獨立卡片，淺藍灰背景，與第二/三層明顯區隔
   Root-cause fix: .qf-tree is a height-constrained flex column (max-height+overflow-y:auto,
   intentionally — it's the ONE allowed scroll region for the whole 快速功能設定 list). Any flex
   item with overflow other than visible gets its automatic minimum size reduced to 0 per the
   flexbox spec, which let this card be shrunk (with default flex-shrink:1) below its own
   content height whenever all modules combined exceeded 560px — and since it was overflow:hidden,
   that shrink silently clipped content instead of showing a scrollbar (looked like only the
   first child was "visible" and the rest vanished, with the card never growing to fit). Fixed by
   restoring visible overflow and pinning flex-shrink:0 so this card can never be shrunk below
   its content's natural height — only the outer .qf-tree scrolls, never an individual card. */
.qf-tree-l1{width:100%;min-width:0;box-sizing:border-box;border:1px solid #dbe4ef;border-radius:10px;background:#eef2f8;overflow:visible;flex-shrink:0}
.qf-tree-l1-head{display:flex;align-items:center;gap:8px;min-height:50px;padding:0 12px;cursor:pointer;user-select:none}
.qf-tree-l1.has-children .qf-tree-l1-head:hover{background:#e4eaf3}
.qf-tree-l1 > .qf-tree-l1-head .qf-tree-label{font-weight:700;font-size:15px;color:#1f2d4d}
.qf-tree-l1-body{display:flex;flex-direction:column;gap:0;padding:0 10px 10px;height:auto;overflow:visible}

/* Level 2 — 功能分類：白/極淺灰背景，縮排 24px，與第一層區隔
   Same fix as Level 1: pinned flex-shrink:0 so a group with many level-3 items can never be
   squeezed shorter than its content by its flex-column parent (.qf-tree-l1-body). */
.qf-tree-l2{width:100%;min-width:0;box-sizing:border-box;background:#fff;border-radius:8px;flex-shrink:0;overflow:visible}
.qf-tree-l2 + .qf-tree-l2{margin-top:2px}
.qf-tree-l2-head{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 10px 0 24px;border-top:1px solid #eef1f6;cursor:pointer;user-select:none}
.qf-tree-l2:first-child .qf-tree-l2-head{border-top:none}
.qf-tree-l2.has-children .qf-tree-l2-head:hover{background:#f5f8fc}
.qf-tree-l2-head .qf-tree-label{font-weight:600;font-size:14px;color:#344054}
.qf-tree-l2-body{display:flex;flex-direction:column;background:#fbfcfe;border-top:1px solid #f0f2f6;height:auto;overflow:visible}

/* Level 3 — 實際功能頁：縮排 52px，字重較輕，右側 checkbox，hover/已選狀態 */
.qf-tree-l3{display:flex;align-items:center;gap:8px;min-height:40px;flex-shrink:0;padding:0 10px 0 52px;font-weight:500;font-size:13.5px;color:#475467;border-top:1px solid #f2f4f7;background:#fff}
.qf-tree-l3:first-child{border-top:none}
.qf-tree-l3:hover{background:#eff6ff}
.qf-tree-l3.is-selected{background:#eff6ff;box-shadow:inset 3px 0 0 #1d4ed8}
.qf-tree-l3.is-disabled{color:#98a2b3}
.qf-tree-l3-node{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#c7d3e0}
.qf-tree-l3.is-selected .qf-tree-l3-node{background:#1d4ed8}
.qf-tree-l3-check{flex:0 0 auto;margin-left:auto}

/* Shared: handle / chevron / icon / label / count / checkbox sizing across all 3 levels */
.qf-tree-handle{flex:0 0 auto;width:16px;text-align:center;color:#98a2b3;cursor:grab;font-size:14px}
.qf-tree-chevron,.qf-tree-chevron-spacer{flex:0 0 auto;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}
.qf-tree-chevron::before{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid #667085}
.qf-tree-chevron.is-open::before{border-left:none;border-top:6px solid #667085;border-right:5px solid transparent;border-bottom:0;border-left:5px solid transparent}
.qf-tree-icon{flex:0 0 auto;font-size:15px;line-height:1}
.qf-tree-l1,.qf-tree-l2,.qf-tree-l3{min-width:0}
.qf-tree-l1-head .qf-tree-label,.qf-tree-l2-head .qf-tree-label,.qf-tree-l3 .qf-tree-label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qf-tree-count{flex:0 0 auto;font-size:12px;font-weight:700;color:#475467;background:#f2f4f7;border-radius:999px;padding:1px 8px;white-space:nowrap}
.qf-tree-l2-check input,.qf-tree-l3-check input{width:18px;height:18px;margin:0}

@media(max-width:1200px){
  .qf-tree{max-height:none}
}
@media print{.sidebar-tree-v211,header,.actions{display:none!important}main{padding:0}}

/* =========================================================
   ClinicOS Login UI v2.4.0
   Visual-only override. Existing IDs and login logic preserved.
   ========================================================= */
.login-shell-v240{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(420px,40%) minmax(620px,60%);
  background:#f8fafc;
  overflow:hidden;
  color:#0f2a58;
}
.login-brand-panel-v240{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:clamp(44px,6vh,76px) clamp(44px,6vw,92px) 72px;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.96) 0 22%,transparent 54%),
    radial-gradient(circle at 94% 76%,rgba(53,210,205,.24),transparent 34%),
    linear-gradient(150deg,#f4fbff 0%,#e8f7ff 48%,#d9efff 100%);
}
.login-brand-panel-v240::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:radial-gradient(circle,rgba(37,99,235,.12) 1.4px,transparent 1.5px);
  background-size:18px 18px;
  mask-image:linear-gradient(145deg,transparent 0 8%,#000 15%,transparent 42%);
}
.login-brand-content-v240{position:relative;z-index:2;width:min(100%,480px);margin:auto 0;display:grid;gap:clamp(28px,4.2vh,46px)}
.login-brand-logo-v240{display:block;width:min(100%,300px);height:auto;object-fit:contain;object-position:left center}
.login-brand-copy-v240 h1{margin:0;color:#0b2c63;font-size:clamp(24px,2vw,34px);line-height:1.3;font-weight:850;letter-spacing:.035em;white-space:nowrap}
.login-brand-subtitle-v240{margin:12px 0 0;color:#526784;font-size:clamp(15px,1.1vw,19px);line-height:1.65;font-weight:600}
.login-brand-accent-v240{display:block;width:38px;height:4px;margin-top:18px;border-radius:999px;background:linear-gradient(90deg,#18bfae,#3b82f6)}
.login-feature-list-v240{display:grid;gap:12px}
.login-feature-card-v240{
  display:grid;grid-template-columns:62px 1fr;gap:16px;align-items:center;
  min-height:86px;padding:12px 18px 12px 12px;border:1px solid rgba(255,255,255,.92);
  border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 10px 28px rgba(39,84,133,.09);
  backdrop-filter:blur(12px);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.login-feature-card-v240:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(39,84,133,.14);border-color:rgba(147,197,253,.82)}
.login-feature-icon-v240{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.18)}
.login-feature-icon-v240 svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-feature-icon-v240.is-blue{background:linear-gradient(145deg,#4f8ff8,#3566ec)}
.login-feature-icon-v240.is-teal{background:linear-gradient(145deg,#3ed1c4,#19a9b7)}
.login-feature-icon-v240.is-indigo{background:linear-gradient(145deg,#7188fa,#5268e8)}
.login-feature-card-v240 strong{display:block;color:#11356a;font-size:17px;font-weight:850;margin-bottom:4px}
.login-feature-card-v240 p{margin:0;color:#5b6f8a;font-size:13px;line-height:1.55;font-weight:600}
.login-brand-decoration-v240{position:absolute;right:2%;bottom:18%;z-index:1;color:rgba(255,255,255,.42);font-size:180px;font-weight:300;line-height:1}
.login-wave-v240{position:absolute;left:-6%;right:-10%;bottom:-74px;height:250px;z-index:1;border-radius:50% 50% 0 0/40% 45% 0 0;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.8),transparent 58%),linear-gradient(12deg,rgba(56,128,244,.28),rgba(30,203,194,.32));filter:blur(1px);transform:rotate(-3deg)}
.login-wave-v240::before,.login-wave-v240::after{content:"";position:absolute;left:-8%;right:-8%;height:72px;border-top:1px solid rgba(255,255,255,.76);border-radius:50%;transform:rotate(4deg)}
.login-wave-v240::before{top:34px}.login-wave-v240::after{top:68px;opacity:.65}
.login-brand-copyright-v240{position:absolute;left:clamp(44px,6vw,92px);bottom:24px;z-index:3;color:#58708d;font-size:12px;font-weight:600}

.login-form-panel-v240{
  position:relative;min-height:100vh;display:grid;place-items:center;padding:78px clamp(44px,7vw,112px) 50px;
  background:
    radial-gradient(circle at 92% 8%,rgba(209,226,247,.75),transparent 31%),
    radial-gradient(circle at 8% 88%,rgba(227,240,253,.8),transparent 36%),
    linear-gradient(145deg,#f8fbff 0%,#ffffff 52%,#f3f7fc 100%);
}
.login-form-panel-v240::before{content:"";position:absolute;right:-70px;top:18%;width:270px;height:270px;border:1px solid rgba(96,165,250,.12);border-radius:50%;box-shadow:0 0 0 46px rgba(96,165,250,.035),0 0 0 92px rgba(96,165,250,.025)}
.login-env-floating-v240{position:absolute;top:32px;right:clamp(34px,5vw,80px);display:flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid rgba(203,213,225,.82);border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 8px 22px rgba(15,42,88,.09);backdrop-filter:blur(12px)}
.login-env-screen-v240{width:17px;height:12px;border:1.8px solid #244a7c;border-radius:2px;position:relative}
.login-env-screen-v240::after{content:"";position:absolute;left:5px;right:5px;bottom:-4px;border-bottom:1.8px solid #244a7c}
.login-env-floating-v240 .login-env-option-v230{padding:0;border:0;background:transparent;color:#29466d;font-size:13px;letter-spacing:.02em}
.login-env-floating-v240 i{width:7px;height:7px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 0 4px rgba(45,212,191,.12)}
.login-card-v240{
  position:relative;z-index:2;width:min(100%,650px);padding:42px clamp(42px,4.4vw,68px) 34px;gap:0;text-align:left;
  border:1px solid rgba(255,255,255,.9);border-radius:24px;background:rgba(255,255,255,.82);
  box-shadow:0 22px 54px rgba(15,42,88,.12);backdrop-filter:blur(18px);
}
.login-card-head-v240{text-align:center;margin-bottom:28px}
.login-card-head-v240 h2{margin:0;color:#102f62;font-size:clamp(22px,1.7vw,28px);line-height:1.35;font-weight:850;letter-spacing:.02em}
.login-card-head-v240 p{margin:10px 0 0;color:#7789a2;font-size:15px;font-weight:600}
.login-field-v240{display:grid;gap:8px;margin-bottom:18px}
.login-field-v240>label{display:block;color:#304968;font-size:14px;font-weight:800}
.login-input-wrap-v240{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:stretch;min-height:56px;border:1px solid #d4dfec;border-radius:12px;background:rgba(255,255,255,.92);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.login-input-wrap-v240:focus-within{border-color:#6ea2ef;box-shadow:0 0 0 4px rgba(37,99,235,.10);background:#fff}
.login-input-icon-v240{display:grid;place-items:center;background:linear-gradient(180deg,#f4f8ff,#edf4ff);border-right:1px solid #e0e8f2;color:#4775bb}
.login-input-icon-v240 svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-input-wrap-v240 input{width:100%;height:100%;min-height:54px;border:0!important;border-radius:0!important;padding:0 18px!important;background:transparent!important;box-shadow:none!important;color:#111827;font-size:16px;font-weight:600;outline:0}
.login-input-wrap-v240 input::placeholder{color:#a0aec0;font-weight:500}
.login-password-field-v240{grid-template-columns:58px minmax(0,1fr) 52px}
.login-pass-toggle{display:grid!important;place-items:center;min-width:0!important;width:52px;height:100%;padding:0!important;border:0!important;border-left:1px solid #e0e8f2!important;border-radius:0!important;background:transparent!important;color:#315a8f!important}
.login-pass-toggle:hover{background:#f1f6fd!important;color:#1d4ed8!important}
.login-pass-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-remember-v240{display:flex;justify-content:space-between;gap:16px;margin:2px 0 24px;color:#435d7c;font-size:13px;font-weight:700}
.login-remember-v240 label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.login-remember-v240 input[type=checkbox]{appearance:none;width:18px;height:18px;border:1px solid #b9c9dc;border-radius:4px;background:#fff;display:grid;place-content:center;cursor:pointer}
.login-remember-v240 input[type=checkbox]::before{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .12s ease}
.login-remember-v240 input[type=checkbox]:checked{background:#2e6de0;border-color:#2e6de0}
.login-remember-v240 input[type=checkbox]:checked::before{transform:rotate(-45deg) scale(1)}
.login-submit-v240{width:100%;height:56px;border-radius:11px;border:0;background:linear-gradient(135deg,#326feb,#2359d7);box-shadow:0 12px 22px rgba(37,99,235,.23);color:#fff;font-size:17px;font-weight:850;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.login-submit-v240:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(37,99,235,.30);filter:brightness(1.04)}
.login-submit-v240:active{transform:translateY(0)}
.login-submit-v240 span{font-size:24px;font-weight:400;transition:transform .18s ease}.login-submit-v240:hover span{transform:translateX(3px)}
.login-or-v240{display:flex;align-items:center;gap:16px;margin:20px 0 16px;color:#7d8da4;font-size:13px}
.login-or-v240::before,.login-or-v240::after{content:"";height:1px;flex:1;background:#dce5ef}
.login-staff-hint-v240{min-height:50px;border:1px solid #d4dfec;border-radius:11px;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;gap:10px;color:#2563db;font-size:14px;font-weight:750}
.login-staff-hint-v240 svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-meta-v240{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:28px!important;color:#8291a7;font-size:12px!important;font-weight:600!important;text-align:center!important}
.login-meta-v240 .login-meta-product-v240{color:#2362dd;font-size:14px;font-weight:850}
.login-meta-v240 i{height:16px;width:1px;background:#c9d3e0}

@media(max-width:1180px){
  .login-shell-v240{grid-template-columns:minmax(360px,38%) minmax(560px,62%)}
  .login-brand-panel-v240{padding-left:42px;padding-right:42px}
  .login-brand-copy-v240 h1{white-space:normal}
  .login-card-v240{padding-left:44px;padding-right:44px}
}
@media(max-width:900px){
  .login-shell-v240{display:block;min-height:100vh;overflow:auto}
  .login-brand-panel-v240{min-height:auto;padding:28px 28px 34px}
  .login-brand-content-v240{width:100%;margin:0 auto;gap:22px}
  .login-brand-logo-v240{width:220px;margin:auto}
  .login-brand-copy-v240{text-align:center}.login-brand-accent-v240{margin:14px auto 0}
  .login-feature-list-v240{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .login-feature-card-v240{grid-template-columns:48px 1fr;min-height:76px;padding:10px}.login-feature-icon-v240{width:44px;height:44px;border-radius:13px}.login-feature-icon-v240 svg{width:23px;height:23px}
  .login-feature-card-v240 p{display:none}
  .login-brand-copyright-v240,.login-brand-decoration-v240,.login-wave-v240{display:none}
  .login-form-panel-v240{min-height:auto;padding:70px 24px 42px}
  .login-env-floating-v240{top:20px;right:24px}
}
@media(max-width:640px){
  .login-brand-panel-v240{padding:24px 18px 28px}.login-brand-copy-v240 h1{font-size:22px}.login-brand-subtitle-v240{font-size:14px}
  .login-feature-list-v240{grid-template-columns:1fr}.login-feature-card-v240 p{display:block}
  .login-form-panel-v240{padding:64px 14px 28px}.login-card-v240{padding:30px 20px 26px;border-radius:20px}
  .login-remember-v240{flex-direction:column;align-items:flex-start;gap:10px}.login-meta-v240{flex-wrap:wrap;gap:8px}
}

/* =========================================================
   ClinicOS Login UI v2.4.1
   Proportion refinement: narrower brand panel, wider and
   more compact login card. Visual-only override.
   ========================================================= */
@media(min-width:1181px){
  .login-shell-v240{
    grid-template-columns:minmax(360px,38%) minmax(700px,62%);
  }
  .login-brand-panel-v240{
    padding:clamp(34px,4.8vh,58px) clamp(34px,4.4vw,66px) 64px;
  }
  .login-brand-content-v240{
    width:min(100%,430px);
    gap:clamp(20px,2.8vh,30px);
  }
  .login-brand-logo-v240{
    width:min(100%,255px);
  }
  .login-brand-copy-v240 h1{
    font-size:clamp(23px,1.75vw,31px);
  }
  .login-brand-subtitle-v240{
    margin-top:8px;
    font-size:clamp(14px,.95vw,17px);
  }
  .login-brand-accent-v240{
    margin-top:13px;
  }
  .login-feature-list-v240{
    gap:10px;
  }
  .login-feature-card-v240{
    grid-template-columns:52px 1fr;
    min-height:70px;
    padding:9px 15px 9px 9px;
    gap:13px;
  }
  .login-feature-icon-v240{
    width:48px;
    height:48px;
    border-radius:14px;
  }
  .login-feature-icon-v240 svg{
    width:25px;
    height:25px;
  }
  .login-feature-card-v240 strong{
    font-size:15px;
    margin-bottom:2px;
  }
  .login-feature-card-v240 p{
    font-size:12px;
    line-height:1.42;
  }
  .login-brand-copyright-v240{
    left:clamp(34px,4.4vw,66px);
    bottom:20px;
  }
  .login-form-panel-v240{
    padding:62px clamp(48px,6vw,104px) 42px;
  }
  .login-card-v240{
    width:min(100%,700px);
    padding:34px clamp(48px,4vw,64px) 28px;
    border-radius:22px;
  }
  .login-card-head-v240{
    margin-bottom:22px;
  }
  .login-card-head-v240 h2{
    font-size:clamp(22px,1.55vw,27px);
  }
  .login-card-head-v240 p{
    margin-top:7px;
    font-size:14px;
  }
  .login-field-v240{
    margin-bottom:14px;
  }
  .login-input-wrap-v240{
    min-height:54px;
  }
  .login-input-wrap-v240 input{
    min-height:52px;
  }
  .login-remember-v240{
    margin:0 0 18px;
  }
  .login-submit-v240{
    height:54px;
  }
  .login-or-v240{
    margin:16px 0 13px;
  }
  .login-staff-hint-v240{
    min-height:46px;
  }
  .login-meta-v240{
    margin-top:22px!important;
  }
}
.login-product-kicker-v241{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 9px;
  padding:5px 10px;
  border:1px solid #dbe7f4;
  border-radius:999px;
  background:rgba(244,248,255,.86);
  color:#52719a;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.login-env-floating-v240 i{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
@media(min-width:901px) and (max-width:1180px){
  .login-shell-v240{grid-template-columns:minmax(340px,38%) minmax(580px,62%)}
  .login-card-v240{width:min(100%,680px);padding:34px 46px 28px}
  .login-feature-card-v240{min-height:74px}
}


/* =========================================================
   ClinicOS Login UI v2.4.2
   Header alignment refinement. Visual-only override.
   ========================================================= */
.login-card-head-v242{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  column-gap:18px;
  text-align:left;
  padding-bottom:20px;
  margin-bottom:22px;
  border-bottom:1px solid #e2e8f0;
}
.login-card-user-icon-v242{
  width:64px;
  height:64px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#eef5ff 0%,#e8f0ff 100%);
  color:#2563eb;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.06);
}
.login-card-user-icon-v242 svg{
  width:33px;
  height:33px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.login-card-title-v242{min-width:0}
.login-card-head-v242 .login-card-title-v242 h2{
  margin:0;
  text-align:left;
  font-size:clamp(22px,1.55vw,27px);
  line-height:1.35;
  letter-spacing:.01em;
}
.login-card-head-v242 .login-card-title-v242 p{
  margin:6px 0 0;
  text-align:left;
  color:#7789a2;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
}
@media(max-width:640px){
  .login-card-head-v242{
    grid-template-columns:50px minmax(0,1fr);
    column-gap:13px;
    padding-bottom:16px;
    margin-bottom:18px;
  }
  .login-card-user-icon-v242{width:50px;height:50px}
  .login-card-user-icon-v242 svg{width:26px;height:26px}
  .login-card-head-v242 .login-card-title-v242 h2{font-size:20px}
  .login-card-head-v242 .login-card-title-v242 p{font-size:13px}
}

/* =========================================================
   ClinicOS Login UI v2.4.3
   Simplified login header: centered, icon-free, single hierarchy.
   Visual-only override.
   ========================================================= */
.login-card-head-v243{
  display:block;
  text-align:center;
  padding:2px 0 20px;
  margin-bottom:22px;
  border-bottom:1px solid #e2e8f0;
}
.login-card-title-v243{
  display:grid;
  justify-items:center;
  gap:5px;
  min-width:0;
}
.login-card-eyebrow-v243{
  display:block;
  color:#64748b;
  font-size:14px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.08em;
}
.login-card-head-v243 .login-card-title-v243 h2{
  margin:0;
  max-width:100%;
  color:#0f2d63;
  text-align:center;
  font-size:clamp(23px,1.6vw,28px);
  line-height:1.32;
  font-weight:800;
  letter-spacing:.01em;
}
.login-card-head-v243 .login-card-title-v243 p{
  margin:1px 0 0;
  color:#7789a2;
  text-align:center;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
}
@media(max-width:640px){
  .login-card-head-v243{
    padding:0 0 16px;
    margin-bottom:18px;
  }
  .login-card-eyebrow-v243{font-size:13px}
  .login-card-head-v243 .login-card-title-v243 h2{font-size:21px}
  .login-card-head-v243 .login-card-title-v243 p{font-size:13px}
}

/* =========================================================
   ClinicOS Login UI v2.4.4
   Final header hierarchy and card proportion refinement.
   Visual-only override; login IDs and behaviors unchanged.
   ========================================================= */
.login-card-head-v244{
  display:block;
  text-align:left;
  padding:0 0 20px;
  margin-bottom:22px;
  border-bottom:1px solid #dfe7f1;
}
.login-card-title-v244{
  display:grid;
  justify-items:start;
  gap:4px;
  min-width:0;
}
.login-card-brand-v244{
  display:block;
  color:#2563eb;
  font-size:15px;
  line-height:1.35;
  font-weight:850;
  letter-spacing:.045em;
}
.login-card-head-v244 .login-card-title-v244 h2{
  margin:0;
  max-width:100%;
  color:#0f2d63;
  text-align:left;
  font-size:clamp(24px,1.7vw,29px);
  line-height:1.3;
  font-weight:850;
  letter-spacing:.01em;
  white-space:nowrap;
}
.login-card-head-v244 .login-card-title-v244 p{
  margin:2px 0 0;
  color:#7789a2;
  text-align:left;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
}

@media(min-width:1181px){
  .login-card-v240{
    width:min(100%,760px);
    padding:38px 56px 30px;
  }
  .login-form-panel-v240{
    padding-left:clamp(54px,6vw,112px);
    padding-right:clamp(54px,6vw,112px);
  }
  .login-remember-v240{
    padding:0 10px;
  }
}
@media(min-width:901px) and (max-width:1180px){
  .login-card-v240{
    width:min(100%,710px);
    padding:36px 48px 29px;
  }
  .login-card-head-v244 .login-card-title-v244 h2{
    white-space:normal;
  }
}
@media(max-width:900px){
  .login-card-head-v244 .login-card-title-v244 h2{
    white-space:normal;
  }
}
@media(max-width:640px){
  .login-card-head-v244{
    padding-bottom:16px;
    margin-bottom:18px;
  }
  .login-card-brand-v244{font-size:14px}
  .login-card-head-v244 .login-card-title-v244 h2{font-size:22px}
  .login-card-head-v244 .login-card-title-v244 p{font-size:13px}
}

/* =========================================================
   ClinicOS Login UI v2.4.5
   Desktop weight balance: left/right column ratio, wider and
   shorter login card, brand content nudged down, logo +6%.
   Visual-only override; DOM, IDs and login behavior unchanged.
   Scope: desktop only (>=1181px), does not touch <=1180px rules.
   ========================================================= */
@media(min-width:1181px){
  .login-shell-v240{
    grid-template-columns:minmax(400px,45%) minmax(620px,55%);
  }
  .login-brand-content-v240{
    transform:translateY(28px);
  }
  .login-brand-logo-v240{
    width:min(100%,270px);
  }
  .login-feature-list-v240{
    gap:13px;
  }
  .login-card-v240{
    width:min(100%,816px);
    padding:32px 56px 24px;
  }
  .login-card-head-v244{
    padding-bottom:16px;
    margin-bottom:16px;
  }
  .login-field-v240{
    margin-bottom:10px;
  }
  .login-remember-v240{
    margin:0 0 13px;
  }
  .login-or-v240{
    margin:13px 0 10px;
  }
  .login-meta-v240{
    margin-top:16px!important;
  }
}

.sales-stored-value-balance-v24{margin-top:10px;line-height:1.8;background:#f8fbff;border:1px solid #dbe5f4;border-radius:10px;padding:8px 10px}
.sales-stored-value-balance-v24 b{color:#1d2939}
.sales-stored-value-input-error-v24{border-color:#d92d20!important;background:#fef3f2!important}
.sales-stored-value-shortage-v24{color:#d92d20;font-weight:700}

/* ===== 施作部位管理 V1.1（UI 美化與版面優化，沿用 --cos-* Design Token，維持淺色風格，不建立第二套視覺系統）===== */
.ta-panel-shell{padding:20px 24px}

/* 頁首 */
.ta-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.ta-page-title{font-size:27px;font-weight:700;color:var(--cos-text);display:flex;align-items:center;gap:8px}
.ta-info-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--cos-surface-muted);color:var(--cos-text-subtle);font-size:13px;cursor:help;user-select:none}
.ta-page-subtitle{font-size:14px;color:var(--cos-text-subtle);margin-top:4px}

/* 資訊提示列（降低高度） */
.ta-info-banner{background:var(--cos-accent-soft);border:1px solid var(--cos-accent-soft-border);color:var(--cos-accent-hover);border-radius:var(--cos-radius-sm);padding:6px 14px;font-size:13px;margin-bottom:14px;line-height:1.6}

/* 主版面：左 20% (210~240px) / 右 80% —— V1.3 改為真正的自適應 Flex／Grid 高度，不再以固定 min-height 撐高。
   height 扣除值來源（實際盤點 ClinicOS 外層殼層結構，非隨意估算）：
     main{padding:24px} 上下各 24px                                    ≈  48px
     <header>（#pageTitle 標題＋今日日期，與右側診所/角色/使用者徽章列） ≈  66px
     header 與下方頁面內容間距                                          ≈  20px
     #settingsHeaderPanelV223（系統設定 H3 ＋ 13 個分頁按鈕，
       於一般桌面寬度會換行為 2 行）                                     ≈ 168px
     本頁 .ta-page-header（標題 27px＋副標＋新增部位按鈕）               ≈  72px
     本頁 .ta-info-banner                                               ≈  46px
     ------------------------------------------------------------------
     合計約 420px，取 400px 作為 calc() 扣除值（留些許緩衝，避免略為高估外層高度導致表格反而略小於可用空間）。
   此數值為程式碼比對推算，非實機量測結果，請於 UAT 依實際 window.innerHeight 與可視列數回報，
   若需微調只需調整下方 400px 這個數字，不需改動其餘 Flex 結構。
   優先使用 100dvh（行動瀏覽器网址列/工具列不佔用高度），並保留 100vh 作為不支援 dvh 瀏覽器的相容 fallback
   （CSS 對不支援的屬性值會整條宣告失效，因此以宣告順序讓支援 dvh 的瀏覽器套用後者覆蓋前者）。 */
.ta-layout{display:grid;grid-template-columns:minmax(210px,240px) minmax(0,1fr);gap:16px;align-items:stretch;height:calc(100vh - 400px);height:calc(100dvh - 400px);min-height:0}
@media(max-width:1000px){.ta-layout{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:760px){.ta-layout{grid-template-columns:1fr;height:auto;min-height:0}}

/* 左側：緊湊清單。高度完全跟隨 .ta-layout（grid align-items:stretch），不再另設固定 min-height。 */
.ta-sidebar{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
@media(max-width:760px){.ta-sidebar{max-height:280px}}
.ta-sidebar-header{font-size:18px;font-weight:600;color:var(--cos-text);padding:14px 16px 10px 16px;flex:none;border-bottom:1px solid var(--cos-border)}
.ta-list-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:6px 8px}
.ta-list-body{display:flex;flex-direction:column}
.ta-row,.ta-unassigned-row{display:flex;align-items:center;gap:8px;height:44px;padding:0 8px;border-radius:var(--cos-radius-sm);cursor:pointer;position:relative;border-left:3px solid transparent}
.ta-row:hover,.ta-unassigned-row:hover{background:var(--cos-surface-muted)}
.ta-row.selected{background:var(--cos-accent-soft);border-left-color:var(--cos-accent)}
.ta-row.inactive .ta-row-name{color:var(--cos-text-muted)}
.ta-row-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ta-row-dot.dot-active{background:var(--cos-accent)}
.ta-row-dot.dot-inactive{background:var(--cos-border-strong)}
.ta-row-dot.dot-warning{width:auto;height:auto;background:none;font-size:13px;color:#c2410c}
.ta-row-name{flex:1;font-size:15px;font-weight:600;color:var(--cos-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-row-count{font-size:13px;font-weight:600;color:var(--cos-text-subtle);flex:none;min-width:20px;text-align:right}
.ta-row-more-btn{opacity:0;flex:none;width:22px;height:22px;border:none;background:transparent;color:var(--cos-text-subtle);border-radius:var(--cos-radius-sm);cursor:pointer;font-size:14px;line-height:1;transition:opacity .1s ease}
.ta-row:hover .ta-row-more-btn,.ta-row-more-btn:focus{opacity:1}
.ta-row-more-btn:hover{background:var(--cos-border)}
.ta-unassigned-row{flex:none;margin:6px 0 2px 0;background:#fffbeb;border:1px solid #fde68a}
.ta-unassigned-row .ta-row-name{color:#92400e}
.ta-unassigned-row.selected{background:#fef3c7;border-color:#f59e0b;border-left-color:#f59e0b}
.ta-empty-hint{color:var(--cos-text-muted);font-size:13px;padding:16px 8px;text-align:center}

/* 左側「⋯」浮動選單（附加於 body，避免被清單捲軸裁切） */
.ta-row-menu-popover{position:fixed;z-index:10000;background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);box-shadow:var(--cos-shadow-lift);min-width:110px;padding:4px;display:flex;flex-direction:column}
.ta-row-menu-popover button{border:none;background:none;text-align:left;padding:7px 10px;font-size:13px;color:var(--cos-text);border-radius:6px;cursor:pointer}
.ta-row-menu-popover button:hover{background:var(--cos-accent-soft);color:var(--cos-accent-hover)}

/* 右側：高度完全跟隨 .ta-layout；column flex 內只有 .ta-table-scroll 為 flex:1 1 auto 並自行捲動，
   其餘子項（標題列／工具列／全選列／分頁／底部操作列）皆為 flex:0 0 auto 固定高度。 */
.ta-content{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.ta-content-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--cos-border);flex:0 0 auto}
.ta-content-header>div{font-size:14px;color:var(--cos-text-subtle)}
.ta-current-badge{display:inline-block;padding:2px 12px;border-radius:var(--cos-radius-pill);background:var(--cos-accent-soft);color:var(--cos-accent-hover);font-size:15px;font-weight:600;margin-left:4px}
.ta-icon-btn{width:30px;height:30px;border:1px solid var(--cos-border);background:var(--cos-surface);border-radius:var(--cos-radius-sm);color:var(--cos-text-subtle);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ta-icon-btn:hover{background:var(--cos-surface-muted);color:var(--cos-text)}
.ta-icon-btn.mini{width:26px;height:26px;font-size:13px}
.ta-icon-btn:disabled{opacity:.4;cursor:not-allowed}

/* 工具列（兩排、自適應） */
.ta-toolbar{padding:12px 16px;border-bottom:1px solid var(--cos-border);flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.ta-toolbar-row1{display:flex;flex-wrap:wrap;gap:8px}
.ta-search-input{flex:1;min-width:320px;padding:8px 12px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);font-size:14px}
.ta-select-status{width:170px;flex:none;padding:8px 10px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);font-size:14px}
.ta-select-category{width:160px;flex:none;padding:8px 10px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);font-size:14px}
.ta-toolbar-row2{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ta-select-all-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--cos-text-subtle);cursor:pointer}
.ta-select-all-label input[type=checkbox]{width:15px;height:15px}
.ta-toolbar-count{font-size:13px;color:var(--cos-text-muted)}

/* 表格區：真正的 Flex 自動填滿。flex:1 1 auto 搭配 min-height:0 讓表格區佔滿 .ta-content 扣除其餘
   固定高度子項後的「全部剩餘空間」，視窗越高可視列數越多，不再以固定 500px 撐高。 */
.ta-table-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:auto}
.ta-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ta-table thead th{position:sticky;top:0;background:var(--cos-surface-muted);color:var(--cos-text);font-size:14px;font-weight:600;text-align:left;padding:11px 12px;border-bottom:1px solid var(--cos-border);z-index:1}
.ta-table tbody td{padding:9px 12px;font-size:14px;color:var(--cos-text);border-bottom:1px solid var(--cos-border);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-table tbody tr{height:46px}
.ta-table tbody tr:hover{background:var(--cos-accent-soft)}
.ta-table tbody tr.ta-tr-checked{background:#f5faff}
.ta-table tbody tr.ta-tr-checked:hover{background:var(--cos-accent-soft)}
.ta-col-check{width:44px;text-align:center}
.ta-col-code{width:130px}
.ta-col-category{width:130px}
.ta-col-area{width:180px;white-space:normal!important}
.ta-cell-muted{color:var(--cos-text-muted)}

/* Badge */
.ta-badge{display:inline-block;padding:2px 9px;border-radius:var(--cos-radius-pill);font-size:12px;font-weight:600;margin-right:4px;white-space:nowrap}
.ta-badge-unassigned{background:#fff7ed;color:#c2410c}
.ta-badge-current{background:var(--cos-accent-soft);color:var(--cos-accent-hover)}
.ta-badge-other{background:#eef2f7;color:#475467}
.ta-badge-moving{background:var(--cos-warning-bg);color:#b45309;border:1px solid #fde68a}
.ta-badge-category{background:#eef6fe;color:#0f6cbd;border:1px solid #cfe3fb}
.badge-v1{display:inline-block;padding:2px 10px;border-radius:var(--cos-radius-pill);font-size:12px;font-weight:600}
.badge-active{background:var(--cos-success-bg);color:var(--cos-success);border:1px solid var(--cos-success-border)}
.badge-inactive{background:var(--cos-surface-muted);color:var(--cos-text-muted);border:1px solid var(--cos-border)}
/* Clinical Media Center — new Badge variants, ClinicOS_UI_Foundation_Standard_V1.md §12 三元組公式 */
.badge-draft{background:#f1f5f9;color:#475467;border:1px solid #e2e8f0}
.badge-archived{background:var(--cos-surface-muted);color:var(--cos-text);border:1px solid var(--cos-border-strong)}
.badge-coming-soon,.badge-planned{background:var(--cos-surface-muted);color:#475467;border:1px solid var(--cos-border)}
.badge-danger{background:var(--cos-danger-bg);color:var(--cos-danger);border:1px solid var(--cos-danger-border)}

/* 空狀態 */
.ta-empty-state{text-align:center;color:var(--cos-text-muted);font-size:14px;padding:48px 16px;line-height:2}
.ta-empty-state span{font-size:13px;color:var(--cos-text-muted)}
.ta-empty-state-ok{color:var(--cos-success);font-weight:600}

@media(max-width:760px){.ta-table-scroll{min-height:360px;max-height:60vh}}

/* ===== Clinical Media Center — Desktop Media Library P1-P6 (Backend API Integration round).
   Reuses existing --cos-* Design Tokens / .ta-layout/.ta-sidebar/.ta-content/.clinic-btn/.badge-v1/
   .ta-empty-state/.followup-rule-field/.data-table/.detail-modal — no new Design Token, only
   layout-level geometry for the grid/card/compare/modal structures this page set needs.
   CLINICAL-MEDIA-DESKTOP-UI-VISUAL-POLISH-AND-FINAL-FREEZE-001: card/grid density, filter
   collapsing, Detail information hierarchy, Compare/Replace/Metadata visual polish — every value
   below still traces to the same --cos-* tokens (design-tokens.css) or reuses a hex already
   present elsewhere in this same block; no new Design Token introduced. ===== */
.cml-icon{width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:4px}
.cml-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cml-filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--cos-accent);color:#fff;font-size:11px;font-weight:700}

/* UI-POLISH-009 B1：影像中心版面由「左窄欄篩選 ＋ 右側大片空白」改為
   「上方 compact 篩選 Toolbar ＋ 下方整寬結果區」。沿用既有 .cos-toolbar／.cos-field／.cos-btn，
   不新增 CSS framework、不新增 Design Token。 */
.cml-workspace{display:flex;flex-direction:column;min-width:0;min-height:0}
.cml-filter-toolbar{margin-bottom:16px;padding:16px 20px;row-gap:12px}
.cml-filter-toolbar .cos-toolbar__filters{align-items:flex-end;gap:12px 16px}
.cml-filter-toolbar .cos-toolbar__actions{align-items:flex-end}
.cml-field{min-width:0;flex:0 1 auto}
.cml-field .cos-field__control{min-width:140px}
.cml-filter-toolbar #cmlFilterKeyword{min-width:180px}
.cml-field-customer{min-width:210px}
.cml-customer-pick-btn{justify-content:flex-start;font-weight:400;color:var(--cos-text-subtle);min-width:210px}
.cml-customer-chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--cos-control-height,44px);padding:0 6px 0 12px;border:1px solid var(--cos-accent-soft-border);border-radius:var(--cos-radius-sm);background:var(--cos-accent-soft);min-width:210px}
.cml-customer-name{font-weight:600;color:var(--cos-text)}
.cml-customer-meta{font-size:12px;color:var(--cos-text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cml-customer-clear{margin-left:auto;width:24px;height:24px;flex:none;border:0;border-radius:var(--cos-radius-sm);background:transparent;color:var(--cos-text-subtle);font-size:16px;line-height:1;cursor:pointer}
.cml-customer-clear:hover{background:var(--cos-surface);color:var(--cos-text)}
/* 進階篩選：預設收合，展開後才顯示低頻／技術性條件。 */
.cml-advanced-row{flex:1 1 100%;min-width:0;margin-top:-4px}
.cml-advanced-toggle{border:0;background:none;padding:0;color:var(--cos-accent);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.cml-advanced-toggle::before{content:'▸';font-size:11px}
.cml-advanced-toggle[aria-expanded="true"]::before{content:'▾'}
.cml-advanced-body{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--cos-border)}
.cml-advanced-body[hidden]{display:none}
/* 結果區使用完整內容寬度。 */
.cml-results{flex:1 1 auto;min-width:0;min-height:0}

.cml-selection-summary{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cos-text-subtle)}
.cml-selection-chip{padding:3px 10px;border-radius:999px;background:var(--cos-surface-muted);border:1px solid var(--cos-border);font-size:12px}

/* Media Library grid — denser, image-first cards ("影像管理系統" not "資訊管理系統"): bigger/taller
   thumbnail proportion, shorter card body, fewer metadata lines, more visible hover/selection. */
.cml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:4px}
.cml-card{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}
.cml-card:hover{box-shadow:var(--cos-shadow-md);transform:translateY(-2px)}
.cml-card.is-selected-a{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.35)}
.cml-card.is-selected-b{border-color:#d97706;box-shadow:0 0 0 2px rgba(217,119,6,.35)}
.cml-card.is-selected-a .cml-card-thumb::after,.cml-card.is-selected-b .cml-card-thumb::after{position:absolute;top:6px;left:6px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--cos-radius-pill);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:var(--cos-shadow-sm)}
.cml-card.is-selected-a .cml-card-thumb::after{content:'A';background:#2563eb}
.cml-card.is-selected-b .cml-card-thumb::after{content:'B';background:#d97706}
.cml-card-skeleton{height:190px;background:linear-gradient(100deg,var(--cos-surface-muted) 30%,var(--cos-border) 50%,var(--cos-surface-muted) 70%);background-size:220% 100%;animation:cmlSkeletonShimmer 1.3s ease-in-out infinite}
@keyframes cmlSkeletonShimmer{0%{background-position:120% 0}100%{background-position:-20% 0}}
/* GRID-THUMBNAIL-FIX-011：縮圖容器沿用既有的 1:1 比例，但必須是「硬框」——
   .cml-card-thumb 是 .cml-card（column flex）的 flex item，預設 min-height:auto 會取內容的
   min-content 高度，因此一張真實大圖（intrinsic size）會蓋過 aspect-ratio，把整張卡片撐到
   照片的原始高度。flex:0 0 auto + min-height:0 讓比例成為唯一高度來源，overflow:hidden 只
   裁切縮圖區本身，不影響下方的資訊區與操作列。 */
.cml-card-thumb{position:relative;width:100%;aspect-ratio:1/1;flex:0 0 auto;min-height:0;overflow:hidden;background:var(--cos-surface-muted);background-size:cover;background-position:center;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--cos-text-muted)}
/* Grid 縮圖是 loadImageIntoElement() 以 asBackground:false 注入的 <img class="cml-img">
   （Detail／Compare 走 background-image，不經過這裡）。這個 class 先前全站沒有任何樣式，
   img 於是以原始像素尺寸排版 —— 這就是卡片被撐高的直接原因。 */
.cml-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cml-thumb-placeholder{opacity:.5}
.cml-thumb-placeholder .cml-icon{width:32px;height:32px;margin:0}
.cml-thumb-error{color:#b42318;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cml-card-body{padding:8px 10px;flex:1 1 auto;min-width:0}
.cml-card-line2{font-size:13px;font-weight:600;color:var(--cos-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cml-card-line3{font-size:11.5px;color:var(--cos-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.cml-card-actions{display:flex;gap:4px;padding:4px 8px 8px 8px;border-top:1px solid var(--cos-border)}
.cml-icon-btn{width:28px;height:28px;border:1px solid var(--cos-border);background:var(--cos-surface);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;color:var(--cos-text-subtle)}
.cml-icon-btn:hover{background:var(--cos-surface-muted)}
.cml-icon-btn.is-active{background:var(--cos-accent);border-color:var(--cos-accent);color:#fff}
.cml-icon-btn .cml-icon{margin:0}

.cml-load-more-wrap{display:flex;justify-content:center;margin-top:16px}
.cml-load-more-btn{min-width:160px}

/* Detail — information hierarchy: Photo (tier1, left column) > Basic Info (tier2, always open,
   full weight) > Metadata (tier3, open but visually quieter) > Replacement History (tier4,
   collapsed by default) — via native <details>/<summary>, no JS/business-logic change needed. */
.cml-detail-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:20px;align-items:start}
.cml-detail-preview{width:100%;aspect-ratio:4/3;background:var(--cos-surface-muted);background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:var(--cos-radius-md);border:1px solid var(--cos-border);display:flex;align-items:center;justify-content:center;color:var(--cos-text-muted)}
.cml-detail-panels{display:flex;flex-direction:column;gap:14px}
.cml-panel{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);padding:16px 18px;box-shadow:var(--cos-shadow-sm)}
.cml-panel-title{font-size:15px;font-weight:700;color:var(--cos-text);margin-bottom:10px}
.cml-panel-collapsible{padding:0}
.cml-panel-summary{cursor:pointer;list-style:none;padding:14px 18px;margin-bottom:0;user-select:none;position:relative}
.cml-panel-summary::-webkit-details-marker{display:none}
.cml-panel-summary::after{content:'▾';position:absolute;right:18px;top:14px;color:var(--cos-text-muted);transition:transform var(--cos-transition-fast,.15s ease)}
.cml-panel-collapsible[open]>.cml-panel-summary::after{transform:rotate(180deg)}
.cml-panel-summary.cml-panel-tier-3{font-size:14px;color:var(--cos-text-subtle)}
.cml-panel-summary.cml-panel-tier-4{font-size:13px;font-weight:600;color:var(--cos-text-muted)}
.cml-panel-collapsible-body{padding:0 18px 16px 18px}
.cml-field-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--cos-border);font-size:13px}
.cml-field-row:last-child{border-bottom:none}
.cml-field-label{color:var(--cos-text-subtle);flex:none}
.cml-field-value{color:var(--cos-text);text-align:right;overflow-wrap:anywhere}
.cml-hash-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.cml-metadata-group-title{font-size:12px;font-weight:700;color:var(--cos-text-muted);text-transform:uppercase;letter-spacing:.03em;margin:10px 0 4px 0}
.cml-metadata-group-title:first-child{margin-top:0}
.cml-metadata-unsupported{display:flex;gap:8px;margin-top:12px;padding:10px 12px;border-radius:var(--cos-radius-sm);background:var(--cos-warning-bg);border:1px solid #fde68a;color:#92400e}
.cml-metadata-unsupported .cml-icon{margin-top:1px}
.cml-metadata-unsupported-title{font-weight:700;font-size:13px}
.cml-metadata-unsupported-list{font-size:12px;line-height:1.6}
.cml-empty-inline{color:var(--cos-text-muted);font-size:13px;padding:8px 0}
.cml-history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cml-history-item{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--cos-border)}
.cml-history-item:last-child{border-bottom:none}
.cml-history-item.is-current{font-weight:700}
.cml-history-mediaid{color:var(--cos-text-subtle);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

/* Comparison — A/B header now a colored role badge (same #2563eb/#d97706 already used for grid
   card selection, tying the two views together) instead of plain bold text. */
.cml-compare-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cml-compare-side-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cml-compare-role-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 10px;border-radius:var(--cos-radius-pill);font-size:13px;font-weight:700;color:#fff}
.cml-compare-role-badge.role-a{background:#2563eb}
.cml-compare-role-badge.role-b{background:#d97706}
.cml-compare-preview{width:100%;aspect-ratio:4/3;background:var(--cos-surface-muted);background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:var(--cos-radius-md);border:1px solid var(--cos-border)}
.cml-compare-caption{font-size:12px;color:var(--cos-text-subtle);margin-top:6px;text-align:center}
.cml-compare-empty{border:1px dashed var(--cos-border-strong);border-radius:var(--cos-radius-md);padding:40px 16px;text-align:center;color:var(--cos-text-muted);font-size:13px}
.cml-diff-note{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--cos-text-subtle);margin-bottom:10px}
.cml-diff-table td,.cml-diff-table th{font-size:13px;padding:10px 12px}
.cml-diff-equal td{color:var(--cos-text-muted)}
.cml-diff-different td{color:var(--cos-text);font-weight:600}
/* Same/Different is never color-only: each flag also carries its own icon + text label (相同/不同)
   and a distinct pill background (success vs warning tokens), so the distinction survives even
   for a colorblind reader or a printed/grayscale copy. */
.cml-diff-flag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--cos-radius-pill);font-size:12px;font-weight:700}
.cml-diff-flag.is-equal{background:var(--cos-success-bg);color:var(--cos-success)}
.cml-diff-flag.is-different{background:var(--cos-warning-bg);color:#92400e}
@media(max-width:1280px){.cml-compare-layout{grid-template-columns:1fr}}

/* Clinical Media Center — Template Management UI V2 (Inline capture-setup accordion). No new color
   token: opacity-only dimming mirrors the existing .sales-fav-row-v234.is-disabled convention;
   .cml-icon/.data-table are all pre-existing. */
.cm-chevron{display:inline-flex;vertical-align:-3px;margin-right:2px}
.cm-chevron .cml-icon{margin-right:0}
.cm-row-disabled{opacity:.5}
.cm-row-disabled:hover{opacity:.7}
.cm-inline-input{height:32px;padding:0 10px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;margin:0 8px;min-width:180px}
/* UI-V2-FINAL round: parent/child count hint — secondary text only, never a badge, never competing
   with the row's own primary name (task's own explicit "不搶主名稱視覺焦點"). */
.cm-count-hint{font-size:12px;font-weight:400;color:var(--cos-text-muted,#98a2b3);margin-left:10px}

.cml-replace-modal-card,.cml-replace-confirm-card{width:min(560px,92vw)}
.cml-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--cos-border)}
.cml-modal-header h3{margin:0;font-size:17px}
.cml-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--cos-border)}
.cml-replace-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.cml-replace-original{background:var(--cos-surface-muted);border-radius:var(--cos-radius-sm);padding:10px 12px}
.cml-replace-col-title{font-size:12px;font-weight:700;color:var(--cos-text-subtle);margin-bottom:6px}
.cml-replace-error{padding:8px 10px;border-radius:var(--cos-radius-sm);background:var(--cos-danger-bg);border:1px solid var(--cos-danger-border);color:var(--cos-danger);font-size:13px}
.cml-confirm-warning{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--cos-text);background:var(--cos-warning-bg);border:1px solid #fde68a;border-radius:var(--cos-radius-sm);padding:10px 12px}
.cml-confirm-warning .cml-icon{color:#b45309;margin-top:2px}

@media(max-width:1024px){.cml-detail-layout{grid-template-columns:1fr}}
/* 窄畫面：篩選 Toolbar 直向堆疊，動作列與條件同寬，結果區仍是整寬。 */
@media(max-width:900px){
  .cml-filter-toolbar,.cml-filter-toolbar .cos-toolbar__filters{flex-direction:column;align-items:stretch}
  .cml-filter-toolbar .cos-toolbar__actions .cos-btn{flex:1 1 auto}
  .cml-field .cos-field__control,.cml-customer-pick-btn,.cml-customer-chip{min-width:0;width:100%}
}

/* Clinical Media Treatment Map — Stage 2 shell only. Drawing/annotation/canvas layers are
   intentionally absent until the dedicated interaction stage. */
.cmtm-shell{min-height:640px}
.cmtm-breadcrumb-separator{color:var(--cos-text-muted);padding:0 4px}
.cmtm-page{padding:18px 20px;min-height:560px}
.cmtm-page-header{align-items:center}
.cmtm-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:12px 14px;background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);box-shadow:var(--cos-shadow-sm)}
.cmtm-field{min-width:150px;gap:4px}
.cmtm-field input,.cmtm-field select{height:36px}
.cmtm-field-date{min-width:150px}
/* UI-POLISH-009 B7：客戶欄位是 Picker 按鈕／已選客戶 chip，寬度與其它條件對齊。 */
.cmtm-field-customer{min-width:210px}
.cmtm-field-gender{min-width:110px}
.cmtm-field-revision{min-width:300px;margin-left:auto}
.cmtm-content{margin-top:14px}
.cmtm-state{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.cmtm-loading{color:var(--cos-text-subtle)}
.cmtm-spinner{width:28px;height:28px;border:3px solid var(--cos-border);border-top-color:var(--cos-accent);border-radius:50%;animation:cmtmSpin .8s linear infinite}
@keyframes cmtmSpin{to{transform:rotate(360deg)}}
.cmtm-message{margin-top:10px;padding:9px 12px;border-radius:var(--cos-radius-sm);background:var(--cos-success-bg);color:var(--cos-success);font-size:13px}
.cmtm-message.is-error{background:var(--cos-danger-bg);color:var(--cos-danger)}
.cmtm-status{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--cos-radius-pill);font-size:12px;font-weight:700;border:1px solid var(--cos-border)}
.cmtm-status.is-draft{background:var(--cos-warning-bg);color:#92400e}
.cmtm-status.is-completed{background:var(--cos-success-bg);color:var(--cos-success)}
.cmtm-status.is-locked{background:var(--cos-surface-muted);color:var(--cos-text-subtle)}
.cmtm-detail{display:flex;flex-direction:column;gap:12px}
.cmtm-readonly-note,.cmtm-draft-note{padding:10px 12px;border-radius:var(--cos-radius-sm);font-size:13px}
.cmtm-readonly-note{background:var(--cos-surface-muted);color:var(--cos-text-subtle);border:1px solid var(--cos-border)}
.cmtm-draft-note{background:var(--cos-warning-bg);color:#92400e;border:1px solid #fde68a}
.cmtm-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cmtm-panel{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);padding:16px 18px;box-shadow:var(--cos-shadow-sm)}
.cmtm-panel-title{font-weight:700;margin-bottom:10px;color:var(--cos-text)}
.cmtm-summary{margin:0;display:flex;flex-direction:column}
.cmtm-summary>div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--cos-border)}
.cmtm-summary>div:last-child{border-bottom:0}
.cmtm-summary dt{color:var(--cos-text-subtle)}
.cmtm-summary dd{margin:0;color:var(--cos-text);text-align:right;overflow-wrap:anywhere}
.cmtm-editor-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md)}
.cmtm-editor-toolbar label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--cos-text-subtle)}
.cmtm-editor-toolbar input{height:32px;min-width:180px}
.cmtm-autosave{margin-left:auto;font-size:12px;color:var(--cos-text-muted)}
.cmtm-autosave.is-error{color:var(--cos-danger)}
.cmtm-workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:start}
.cmtm-map-panel{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);overflow:hidden}
.cmtm-map-svg{display:block;width:min(100%,560px);max-height:68vh;aspect-ratio:1/1;touch-action:none;user-select:none}
.cmtm-map-svg.is-readonly{cursor:default}
.cmtm-map-svg.is-drawing{cursor:crosshair}
.cmtm-face-outline{fill:#fff8f3;stroke:#667085;stroke-width:.7;vector-effect:non-scaling-stroke}
/* TREATMENT-MAP-WORKSPACE-BASE-IMAGE-AND-HIDDEN-REGIONS-FIX-001: base-image status in the work page.
   The region styles below still apply — they are only ever emitted in 'editor' render mode now. */
.cmtm-base-image-loading{margin:0 0 8px;font-size:13px;color:var(--cos-text-muted)}
.cmtm-base-image-error{margin:0 0 8px;padding:10px 12px;border:1px solid var(--cos-danger-border);background:var(--cos-danger-bg);border-radius:var(--cos-radius-sm);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cmtm-base-image-error strong{color:var(--cos-danger);font-size:14px}
.cmtm-base-image-error span{color:#7f1d1d;font-size:12px;overflow-wrap:anywhere}
.cmtm-region{fill:rgba(37,99,235,.045);stroke:rgba(37,99,235,.32);stroke-width:.45;vector-effect:non-scaling-stroke;transition:fill .12s ease,stroke .12s ease}
.cmtm-region.is-hovered{fill:rgba(37,99,235,.16);stroke:#2563eb}
.cmtm-region.is-selected{fill:rgba(13,148,136,.2);stroke:#0d9488}
.cmtm-region.is-active{fill:rgba(13,148,136,.24);stroke:#0d9488}
.cmtm-region.is-deemphasized{opacity:.28;fill:rgba(148,163,184,.05)}
.cmtm-reset-focus{position:absolute;top:12px;left:12px;z-index:2}
.cmtm-stroke{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.cmtm-annotation{cursor:pointer}
.cmtm-annotation circle{fill:#2563eb;stroke:#fff;stroke-width:.7;vector-effect:non-scaling-stroke}
.cmtm-annotation text{fill:#fff;font-size:2.6px;font-weight:700;text-anchor:middle;pointer-events:none}
.cmtm-annotation.is-selected circle{fill:#0d9488;stroke:#fef3c7;stroke-width:1.2}
.cmtm-annotation-leader{stroke:#1d4ed8;stroke-width:.55;vector-effect:non-scaling-stroke;pointer-events:none}
.cmtm-annotation-label rect{fill:#fff;stroke:#2563eb;stroke-width:.55;vector-effect:non-scaling-stroke}
.cmtm-annotation-label{cursor:grab;touch-action:none}
.cmtm-annotation.is-dragging .cmtm-annotation-label{cursor:grabbing}
.cmtm-annotation.is-dragging .cmtm-annotation-label rect{fill:#eff6ff;stroke:#1d4ed8;stroke-width:1}
.cmtm-annotation .cmtm-annotation-label text{fill:#1e3a8a;font-size:2.5px;font-weight:700;text-anchor:start;pointer-events:none}
.cmtm-annotation.is-selected .cmtm-annotation-label rect{fill:#ecfdf5;stroke:#0d9488;stroke-width:1}
.cmtm-context-summary{display:grid;gap:7px;margin-bottom:12px;padding:10px;border-radius:var(--cos-radius-sm);background:var(--cos-surface-muted)}
.cmtm-context-summary>div,.cmtm-selected-summary{display:flex;flex-direction:column;gap:2px}
.cmtm-context-summary span,.cmtm-selected-summary span{font-size:12px;color:var(--cos-text-subtle);overflow-wrap:anywhere}
.cmtm-selected-summary{margin-top:12px}
.cmtm-annotation-panel{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);padding:14px;min-height:220px}
.cmtm-annotation-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto}
.cmtm-annotation-row{display:flex;justify-content:space-between;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);background:var(--cos-surface);color:var(--cos-text);text-align:left;cursor:pointer}
/* UAT-FIX-008-4：標註列要完整顯示，右側區域標籤不得被擠掉。
   原本左邊的 <span> 沒有 min-width:0，flex 項目的 min-width:auto 讓它拒絕收縮，
   於是長一點的標註（中英數混排）會把右邊的 <small> 壓成 0 寬並推出列外
   —— 量到 smallVisible=false、small 的右緣超出列的右緣。
   同時把列本身標為不可壓縮，避免日後容器加高度限制時把文字上下切掉。 */
.cmtm-annotation-row{flex-shrink:0;align-items:flex-start}
.cmtm-annotation-row>span{min-width:0;flex:1 1 auto;overflow-wrap:anywhere;white-space:normal}
.cmtm-annotation-row small{color:var(--cos-text-muted);overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;white-space:nowrap}
.cmtm-annotation-row.is-selected{border-color:var(--cos-accent);background:var(--cos-accent-soft)}
.cmtm-annotation-empty{padding:18px 4px;text-align:center;color:var(--cos-text-muted);font-size:13px}
.cmtm-memo-field{display:flex;flex-direction:column;gap:5px;margin-top:12px;font-size:13px;color:var(--cos-text-subtle)}
.cmtm-memo-field textarea{min-height:90px;resize:vertical}
.cmtm-annotation-actions{display:flex;gap:7px;margin-top:8px}
.cmtm-recovery{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid #f59e0b;border-radius:var(--cos-radius-md);background:#fffbeb;color:#92400e}
.cmtm-recovery>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cmtm-recovery span{font-size:13px}
.cmtm-overlay-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);background:var(--cos-surface)}
.cmtm-overlay-toolbar label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--cos-text-subtle)}
/* CLINICOS-V4-CLINICAL-MEDIA-TREATMENT-MAP-UAT-FIX-001 —— 日期疊加的日期被裁切。
   成因：本檔第 121 行 *{box-sizing:border-box} ＋ 第 126 行全域 select{padding:10px 12px;border:1px}，
   在這裡又被指定 height:32px —— 內容高只剩 32-20-2 = 10px，13px 的字放不下而被上下裁掉。
   最小修法是把這一支 select 的垂直 padding 縮到與 32px 相符（內容高 22px），
   不動全域 select 規則、不動整區版面。
   寬度用 min-width:min(210px,100%)：CSS 的 min-width 會贏過 max-width，寫死 210px 時在
   390px 手機上會把選單推出容器外（實測 selRight 430 > 視窗 390）。min() 讓它在桌機
   維持 210px、在窄容器縮到容器寬，日期仍完整可讀（內容實測只需 208px）。 */
.cmtm-overlay-toolbar select{height:32px;min-width:min(210px,100%);max-width:100%;padding:4px 10px;line-height:22px}
.cmtm-overlay-toolbar label{min-width:0;max-width:100%}
.cmtm-overlay-toolbar input[type=range]{width:150px;max-width:100%}
.cmtm-history-overlay{pointer-events:none}
.cmtm-overlay-stroke{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:saturate(1.6)}
.cmtm-overlay-annotation{fill:#f59e0b;stroke:#fff;stroke-width:.7;vector-effect:non-scaling-stroke}
.cmtm-timeline{margin-top:18px;padding-top:14px;border-top:1px solid var(--cos-border);display:flex;flex-direction:column;gap:6px}
.cmtm-timeline-item{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);background:var(--cos-surface);text-align:left;color:var(--cos-text);cursor:pointer}
.cmtm-timeline-item span{font-size:12px;color:var(--cos-text-muted)}
.cmtm-timeline-item.is-current{border-color:var(--cos-accent);background:var(--cos-accent-soft)}
.cmtm-association-bar,.cmtm-media-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);background:var(--cos-surface);font-size:12px;color:var(--cos-text-subtle)}
/* UAT-FIX-008-5：關聯資訊／Before-After／日期疊加合併成同一列。
   三者原本各自是一張有邊框、有內距的卡片，直向堆疊後光是它們就吃掉 ~214px，
   加上黃色草稿提示讓主圖被推到 419px 以下。這裡只在外層容器內解除各自的卡片外觀，
   三個 class 的原始規則一個字都沒動（凍結測試仍以那些規則為準）。 */
.cmtm-controls-row-v8{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;min-width:0;
  padding:8px 12px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);background:var(--cos-surface)}
.cmtm-controls-row-v8>.cmtm-association-bar,
.cmtm-controls-row-v8>.cmtm-media-bar,
.cmtm-controls-row-v8>.cmtm-overlay-toolbar{padding:0;border:0;background:none;border-radius:0;min-width:0;flex:0 1 auto}
.cmtm-controls-row-v8>.cmtm-association-bar:empty{display:none}
.cmtm-association-bar:empty{display:none}
.cmtm-association-bar span,.cmtm-media-bar>span{padding:4px 8px;border-radius:var(--cos-radius-pill);background:var(--cos-surface-muted)}
/* CLINICOS-V4-TREATMENT-MAP-RESPONSIVE-OVERFLOW-FIX-003 —— 窄畫面下工具列欄位溢出。
   成因（實測）：.cmtm-toolbar 是 flex-wrap 容器，但它的欄位帶著寫死的 min-width
   （customer 210px、revision 300px、date 150px、gender 110px）。flex item 不能縮到
   min-width 以下，容器一旦比 210px 窄，該欄位就直接頂出去 —— 390px 實測
   .cmtm-field-customer right=532、容器只有 40px。
   原本這個 media query 只處理了 .cmtm-field-revision，其餘欄位沒被涵蓋。
   修法沿用本檔 clinical-media 既有的同類慣例（見上方 @media(max-width:900px) 內的
   .cml-field .cos-field__control / .cml-customer-chip{min-width:0;width:100%}）：
   窄畫面讓欄位可縮並改為整寬堆疊。>900px 完全不受影響，桌機版面一個像素都沒動。 */
@media(max-width:900px){
  .cmtm-field-revision{min-width:100%;margin-left:0}
  .cmtm-detail-grid{grid-template-columns:1fr}
  .cmtm-toolbar>*{min-width:0;max-width:100%}
  .cmtm-field,.cmtm-field-date,.cmtm-field-customer,.cmtm-field-gender{min-width:0;width:100%}
  /* 客戶名稱過長時換行，不要用寬度把工具列頂開。 */
  .cmtm-field-customer .cml-customer-chip{min-width:0;max-width:100%;flex-wrap:wrap}
  .cmtm-field .cos-field__label{min-width:0;overflow-wrap:anywhere}
}
/* CLINICOS-V4-TREATMENT-MAP-RESPONSIVE-OVERFLOW-FIX-003
   這個 media query 原本就把工作區收成單欄，但用的是 `1fr`。`1fr` 的自動最小值是
   min-content，因此容器一旦比面板的 min-content（實測 180px）還窄，軌道就會被撐開、
   面板整片頂出容器（實測 right=485）。桌機那條規則用的是 minmax(0,1fr) 正是為了避開
   這件事；單欄這條漏掉了同樣的保護，這裡補齊，並讓面板本身可以縮。 */
@media(max-width:900px){
  .cmtm-workspace{grid-template-columns:minmax(0,1fr)}
  .cmtm-map-panel{min-height:420px}
  .cmtm-annotation-panel{min-height:0}
  .cmtm-map-panel,.cmtm-annotation-panel,.cmtm-context-summary,.cmtm-panel-title{min-width:0}
  /* 標註面板是 <aside>，因此吃到本檔第 127 行為【左側導覽列】寫的裸元素選擇器
     aside{width:220px;position:sticky}，以及第 129 行 @media(max-width:1000px) 的
     aside{width:180px} —— 實測寬度剛好就是那個 180px，不是內容撐出來的。
     指定了 width 的元素不會被 min-width:0 影響（實測：加 min-width:0 仍 180px，
     改 max-width:100% 立刻收到 40px），所以要在這裡把寬度交還給格線軌道。
     只在窄畫面覆寫、且限定 .cmtm-*，不動全站那條 aside 規則、不動桌機版面。 */
  .cmtm-annotation-panel{width:auto;max-width:100%;height:auto;position:static;overflow:visible}
  /* 編輯器工具列（療程 ID 等）：select 會撐到最長選項的寬度（實測 172px，選項是
     「5010011｜IPL脈衝光」），而 flex item 的 min-width:auto 讓它縮不下去；
     .cmtm-editor-toolbar input 另有寫死的 min-width:180px。窄畫面一併放行。
     日期疊加工具列（.cmtm-overlay-toolbar）已於前一張處理，這裡不重複也不覆寫。 */
  .cmtm-editor-toolbar>*,.cmtm-editor-toolbar label{min-width:0;max-width:100%}
  .cmtm-editor-toolbar select,.cmtm-editor-toolbar input{min-width:0;max-width:100%}
}

/* ===== 耗療管理 — Workflow UI V1 (UI-first rebuild). Usage-page-scoped classes only;
   reuses existing .badge-v1/.primary/.ghost/.picker/.card design language, no new design
   language, no photos/avatars/mock images anywhere in this block. ===== */
.usage-wf-v1{display:flex;flex-direction:column;gap:16px}
.usage-wf-header-v1{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;padding:16px 20px}
.usage-wf-header-v1 h3{margin:0;font-size:19px;color:#0f172a}
.usage-wf-header-fields-v1{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.usage-wf-header-field-v1{display:flex;flex-direction:column;gap:4px;font-size:15px;font-weight:600;color:#344054}
.usage-wf-header-field-v1 input,.usage-wf-header-field-v1 select{height:44px;box-sizing:border-box;min-width:140px;font-size:18px;font-weight:600}
.usage-wf-header-field-v1 input[type="date"],.usage-wf-header-field-v1 select{font-size:17px;font-weight:400}
.usage-wf-readonly-field-v1{background:#f2f4f7;color:#344054;font-weight:700;cursor:default}
/* 耗療單號 split: fixed "H" (readonly) + editable digits box. #usageNoDigits is pre-existing,
   already-wired plumbing (setNoField/bindNoManualMarkers in the order-no IIFE above) shared with
   Sales' saleNoDigits pattern — only the DOM elements are new here, no order-no generation logic
   changed. #usageNo stays as the hidden field the existing save/normalize logic already reads. */
.usage-wf-header-field-v1 .usage-wf-doc-no-v1{display:flex;align-items:center;border:1px solid #d0d5dd;border-radius:10px;overflow:hidden;background:#fff;height:44px;box-sizing:border-box}
.usage-wf-header-field-v1 .usage-wf-doc-no-v1 input{height:100%;border:0;border-radius:0;box-sizing:border-box;min-width:0}
.usage-wf-header-field-v1 .usage-wf-doc-no-v1 .usage-wf-doc-prefix-v1{width:48px;min-width:48px;text-align:center;background:#f2f4f7;color:#344054;font-weight:700;font-size:18px;border-right:1px solid #d0d5dd}
.usage-wf-header-field-v1 .usage-wf-doc-no-v1 #usageNoDigits{width:120px;min-width:120px;font-size:18px;font-weight:600;padding:0 10px}
.usage-wf-step-v1{background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 1px 6px #0001}
.usage-wf-step-title-v1{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:22px;font-weight:700;color:#0f172a}
.usage-wf-step-num-v1{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}
.usage-wf-step-count-v1{font-weight:400;color:#667085;font-size:13px}
/* 耗療作業 Phase A: 客戶區一致化 — Steps 1-3 (客戶搜尋/客戶資訊/剩餘權益摘要) merged into a single
   "① 客戶資料" workspace that reuses Sales' .sales-customer-grid-v3/.sales-selected-customer-v23
   component set as-is (per explicit instruction to not build a second near-duplicate component).
   Only the left/right ratio + gap differ from Sales' own 35/65, via this scoped compound-selector
   override — Sales' own .sales-customer-grid-v3 rule (35fr/65fr, gap:14px) is untouched. */
.usage-wf-customer-grid-v1.sales-customer-grid-v3{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:16px}
.usage-wf-ent-inline-v1{margin-top:10px}
.usage-wf-ent-cards-v1{margin:0}
.usage-wf-ent-cards-v1 .liability-card:nth-of-type(n+7){display:none}
.usage-wf-ent-cards-v1.usage-wf-ent-expanded-v1 .liability-card:nth-of-type(n+7){display:block}
.usage-wf-ent-toggle-v1{margin-top:10px;font-size:13px}
/* Phase B: Desktop ERP-style single-row toolbar — 療程 gets all remaining width, 數量/加入 are
   fixed 140px columns, matching the requested grid-template-columns:minmax(0,1fr) 140px 140px. */
.usage-wf-add-row-v1{display:grid;grid-template-columns:minmax(0,1fr) 140px 140px;column-gap:14px;align-items:end}
.usage-wf-add-field-v1{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700;color:#344054;min-width:0}
.usage-wf-add-select-v1 select{height:44px;box-sizing:border-box;width:100%;font-size:16px}
.usage-wf-stepper-v1{display:flex;align-items:center;border:1px solid #d0d5dd;border-radius:10px;overflow:hidden;height:44px;width:140px;box-sizing:border-box}
.usage-wf-stepper-v1 input{flex:1 1 auto;min-width:0;height:100%;border:0;border-left:1px solid #d0d5dd;border-right:1px solid #d0d5dd;text-align:center;box-sizing:border-box;font-variant-numeric:tabular-nums;font-size:17px}
.usage-wf-stepper-v1 input::-webkit-inner-spin-button,.usage-wf-stepper-v1 input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.usage-wf-stepper-btn-v1{width:36px;height:100%;border:0;background:#f8fafc;color:#344054;font-size:16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.usage-wf-stepper-btn-v1:hover{background:#eef6ff;color:#1d4ed8}
/* .clinic-btn-primary-equivalent colors, scoped — no globally-shared Primary button rule exists for
   this button's context (confirmed: this button previously had no color rule at all and silently
   fell back to the default dark button{background:#111827}), so this token-based scoped override is
   what actually makes it "ClinicOS Primary" rather than a new invented color. */
.usage-wf-add-btn-v1{width:140px;height:44px;border-radius:12px;background:var(--clinic-primary);color:#fff;border:1px solid var(--clinic-primary);font-size:16px;font-weight:600}
.usage-wf-add-btn-v1:hover:not(:disabled){background:var(--clinic-primary-hover);border-color:var(--clinic-primary-hover)}
.usage-wf-add-hint-v1{margin-top:8px;margin-bottom:12px;font-size:14px;color:#667085}
.usage-wf-table-title-row-v1{display:flex;align-items:center;margin-bottom:8px}
.usage-wf-table-title-v1{font-size:18px;font-weight:700;color:#0f172a}
.usage-wf-table-wrap-v1{overflow-x:auto}
/* desktop 有空間就撐滿；空間不夠時給表格一個下限，由外層水平捲動，
   而不是把人員欄無限壓縮到看不見姓名。 */
.usage-wf-draft-table-v1{width:100%;min-width:1020px;border-collapse:collapse;font-size:16px;table-layout:fixed}
.usage-wf-table-wrap-v1{overflow-x:auto}
.usage-wf-draft-table-v1 th{text-align:left;padding:0 10px;background:#f8fafc;border-top:1px solid #e4e7ec;border-bottom:1px solid #e4e7ec;color:#344054;font-weight:600;font-size:16px;height:44px;white-space:nowrap}
.usage-wf-draft-table-v1 td{padding:8px 10px;border-bottom:1px solid #eef2f6;vertical-align:middle}
.usage-wf-draft-table-v1 tbody tr{height:52px;background:#fff}
.usage-wf-draft-table-v1 tbody tr:hover{background:#f8fafc}
.usage-wf-draft-table-v1 td:first-child:not(.usage-item-cell-v6){font-size:16px;font-weight:600;color:#101828}
.usage-wf-draft-table-v1 td:nth-child(2):not(.usage-item-cell-v6){font-variant-numeric:tabular-nums;color:#475467}
/* UAT-POLISH-BATCH-006 #9 —— 耗療明細改為兩層式區塊。
   原本那組 nth-child 欄寬規則整組移除：表已經不是橫向多欄，繼續留著只會對錯欄位。
   欄寬互搶的根因就是「一列要同時塞下品項、金額、四個人員、同意書、操作」，
   分層之後金額與人員各自有自己的空間，不需要再互相讓寬度。 */
.usage-item-table-v6{table-layout:auto}
.usage-item-table-v6 tbody tr.usage-item-row-v6{height:auto;background:#fff}
.usage-item-table-v6 tbody tr.usage-item-row-v6:hover{background:#fff}
.usage-item-cell-v6{padding:0!important;border-bottom:1px solid #eef2f6}
/* 白底、細框、緊湊 —— 沿用 ClinicOS 既有語彙，不做厚重卡片、不做圓角色塊。 */
.usage-item-block-v6{padding:10px 12px}
.usage-item-main-v6{display:flex;align-items:baseline;gap:12px}
/* BATCH-007 #14 —— 療程名稱與金額放大：這一列是品項的主資料，字級要比人員列高一階，
   否則整塊看起來像一片同等重量的表單欄位，看不出「這一項是什麼、多少錢」。 */
.usage-item-name-v6{flex:1 1 auto;min-width:0;font-size:17px;font-weight:600;color:#101828;overflow-wrap:anywhere}
.usage-item-meta-v6{flex:0 0 auto;font-size:13px;color:#667085;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 金額不換行、不縮字，並保留足夠寬度給 $128,000 這種長度（放大到 18px 後同步加寬）。 */
.usage-item-amount-v6{flex:0 0 auto;min-width:120px;text-align:right;font-size:18px;font-weight:600;
  color:#101828;font-variant-numeric:tabular-nums;white-space:nowrap}
.usage-item-actions-v6{flex:0 0 auto}
/* BATCH-007 #14 —— 治療同意書併入人員列，成為第五欄，不再自成第三排。
   同意書狀態是「這一項能不能耗」的條件之一，和四個角色是同一組品項層級的設定；
   單獨占一排會讓每個品項多長一截高度，三四個品項就把畫面推得很長。
   五欄等寬一列；空間不足時整組換行（3 欄 → 2 欄），不縮姓名字級、不回到舊的八欄橫向表。 */
.usage-item-staff-v6{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:8px 12px;margin-top:8px}
.usage-item-staff-field-v6{display:flex;flex-direction:column;gap:3px;min-width:0}
.usage-item-staff-label-v6{font-size:12px;color:#667085}
.usage-item-staff-control-v6{min-width:0}
.usage-item-staff-control-v6 .usage-staff-select{width:100%;min-width:0;box-sizing:border-box}
.usage-item-staff-control-v6 .staff-muted{display:inline-block;padding:6px 0;color:#98a2b3;font-size:14px}
/* 同意書欄的內容由 usageConsentV4.cellFor() 寫入（note／badge／待簽署按鈕），
   高度與 select 對齊，避免第五欄比前四欄矮一截。 */
.usage-item-consent-field-v6 .usage-item-consent-slot-v6{display:flex;align-items:center;min-height:34px;font-size:14px}
@media (max-width:1400px){
  .usage-item-staff-v6{grid-template-columns:repeat(3,minmax(150px,1fr))}
}
@media (max-width:1180px){
  .usage-item-staff-v6{grid-template-columns:repeat(2,minmax(150px,1fr))}
}
/* 扣庫產品 summary row — read-only, only rendered when usageDraft[i].stockProducts actually has
   entries (see renderUsageDraft wrapper); dormant today since no code path sets that field yet. */
.usage-wf-stock-summary-row-v1{height:auto;background:#fafbfc}
.usage-wf-stock-summary-row-v1:hover{background:#fafbfc}
.usage-wf-stock-summary-cell-v1{padding:4px 10px 10px 34px!important;border-bottom:1px solid #eef2f6;font-size:14px;color:#667085}
/* ClinicOS Row Action Button — shared, reusable component (Usage's row stepper buttons apply this
   class directly; other modules may reuse it later, none do yet). */
.clinic-row-action-btn{width:30px;height:30px;padding:0;border-radius:8px;border:1px solid #d0d5dd;background:#fff;color:#344054;display:inline-flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer}
.clinic-row-action-btn:hover{background:#f8fafc;border-color:#98a2b3}
.clinic-row-action-btn:disabled{color:#98a2b3;background:#f8fafc;border-color:#e4e7ec;cursor:not-allowed}
.clinic-row-action-danger{color:#d92d20;border-color:#fecdca}
.clinic-row-action-danger:hover{background:#fef3f2;border-color:#f97066}
/* Row action button: existing core-rendered <button class="danger" onclick="...">刪除</button> —
   event/onclick/class untouched; visually unified to the ClinicOS Row Action Button danger palette
   via a more-specific compound selector (scoped to this table only, .danger's own base rule and the
   core markup stay untouched). Width stays auto (not the icon-square 30px) since this button carries
   a 2-character label, not a single glyph. */
.usage-wf-draft-table-v1 td .danger{height:30px;padding:0 10px;font-size:13px;border-radius:8px;background:#fff;color:#d92d20;border:1px solid #fecdca}
.usage-wf-draft-table-v1 td .danger:hover{background:#fef3f2;border-color:#f97066}
.usage-wf-draft-table-v1 td:has(.usage-wf-empty-state-v1){padding:0;border-bottom:0}
.usage-wf-empty-state-v1{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:32px 12px;text-align:center;background:#fff}
.usage-wf-empty-icon-v1{font-size:24px;line-height:1}
.usage-wf-empty-title-v1{font-size:16px;font-weight:600;color:#344054}
.usage-wf-empty-hint-v1{font-size:14px;color:#667085}
#usageNote{width:100%;box-sizing:border-box;min-height:96px;resize:vertical;font-size:15px;padding:12px 14px;border-radius:12px}
.usage-wf-footer-v1{position:sticky;bottom:0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;min-height:70px;box-sizing:border-box;border-top:1px solid #e5e7eb;flex-wrap:wrap}
.usage-wf-footer-status-v1{display:flex;align-items:center;gap:12px}
.usage-wf-footer-status-lines-v1{display:flex;flex-direction:column;gap:2px}
.usage-wf-footer-line1-v1{font-size:15px;font-weight:600;color:#344054}
.usage-wf-footer-line2-v1{font-size:13px;color:#b54708}
.usage-wf-footer-actions-v1{display:flex;gap:10px}
.usage-wf-footer-actions-v1 .primary:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:900px){
  .usage-wf-header-v1{flex-direction:column;align-items:flex-start}
  .usage-wf-customer-card-v1{flex-wrap:wrap}
  .usage-wf-add-row-v1{grid-template-columns:1fr}
  .usage-wf-add-btn-v1{width:100%}
  .usage-wf-stepper-v1{width:100%}
}

/* 分頁（緊湊） */
.ta-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;border-top:1px solid var(--cos-border);flex:0 0 auto;font-size:13px;color:var(--cos-text-subtle)}
.ta-pagination-nav{display:flex;align-items:center;gap:8px}
.ta-page-size-select{padding:5px 8px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);font-size:13px;color:var(--cos-text-subtle)}

/* Sticky Footer：高度落於 64~72px 區間內（12px 上下 padding＋按鈕高度），為一般 flex 版面（非 position:absolute），
   不會覆蓋表格最後一列。 */
.ta-sticky-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--cos-border);background:var(--cos-surface);flex:0 0 auto;flex-wrap:wrap;min-height:64px;box-sizing:border-box}
.ta-footer-summary{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--cos-text);flex-wrap:wrap}
.ta-footer-moving-note{font-size:12px;color:#b45309;background:var(--cos-warning-bg);border:1px solid #fde68a;border-radius:var(--cos-radius-pill);padding:2px 10px}
.ta-footer-actions{display:flex;gap:8px}

/* 未設定警示卡：於 DOM 中已是 .ta-layout 的下一個兄弟節點（非子節點），不計入右側表格固定高度預算，
   由整個頁面主捲軸呈現（方案 A），並降低高度避免視覺過重。 */
.ta-warning-card{margin-top:12px;background:var(--cos-warning-bg);border:1px solid #fde68a;color:#92400e;border-radius:var(--cos-radius-sm);padding:8px 14px;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ta-ok-card{margin-top:12px;background:var(--cos-success-bg);border:1px solid var(--cos-success-border);color:var(--cos-success);border-radius:var(--cos-radius-sm);padding:8px 14px;font-size:13px}

/* 新增／編輯部位 Modal（限縮寬度，僅影響含 .ta-form-modal 的彈窗，不影響其他既有 Modal） */
.detail-modal-card:has(.ta-form-modal){width:min(520px,92vw)!important}
.ta-form-modal{display:flex;flex-direction:column;gap:8px}
.ta-form-modal label{font-size:13px;font-weight:600;color:var(--cos-text);margin-top:6px}
.ta-form-modal input,.ta-form-modal textarea{padding:8px 10px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);font-size:14px;font-family:inherit}
.ta-form-modal input:disabled{background:var(--cos-surface-muted);color:var(--cos-text-muted)}
.ta-form-hint{font-size:12px;color:var(--cos-text-muted);margin-top:-4px}
.ta-form-status-row{font-size:13px;color:var(--cos-text-subtle)}
.ta-form-modal .actions{display:flex;gap:8px;margin-top:10px}

/* 移動確認 Modal */
.detail-modal-card:has(.ta-modal-table){width:min(600px,94vw)!important}
.ta-modal-summary{font-size:14px;color:var(--cos-text);margin:0 0 10px 0}
.ta-modal-table{width:100%;border-collapse:collapse;margin-bottom:10px}
.ta-modal-table th{text-align:left;font-size:13px;font-weight:600;color:var(--cos-text-subtle);padding:6px 8px;border-bottom:1px solid var(--cos-border)}
.ta-modal-table td{font-size:13px;color:var(--cos-text);padding:6px 8px;border-bottom:1px solid var(--cos-border)}
.ta-modal-note{font-size:13px;color:var(--cos-text-subtle);margin:0}
.detail-modal-card:has(.ta-modal-table) .actions{display:flex;gap:8px;margin-top:6px}

/* ===== CRM Phase 4 — 追蹤引擎 UI Shell: 今日追蹤 (public/modules/followup/FollowupTodayV1.js).
   Scoped entirely under .followup-*; reuses global .panel/.data-table/.ghost/button styling (same
   visual language as every other top-level page) plus the CRM Relations Tab's already-shared
   .crm-card-menu-*/.crm-todo-*/.crm-tag*/.customer-relations-side-card* classes for the ⋯ menu and
   right-side info cards, rather than duplicating that CSS a second time. ===== */
.followup-today-panel{display:flex;flex-direction:column;gap:16px}
.followup-today-head{align-items:flex-start}
.followup-today-head .note{margin:2px 0 0;color:#667085;font-size:14px}

.followup-kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:900px){.followup-kpi-row{grid-template-columns:repeat(2,1fr)}}
.followup-kpi-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;background:#fff;border:1px solid #e5e7eb;border-left:4px solid #98a2b3;border-radius:12px;padding:14px 16px;cursor:pointer;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.followup-kpi-card:hover{background:#FAFBFC}
.followup-kpi-card.is-blue{border-left-color:#1D4ED8}
.followup-kpi-card.is-orange{border-left-color:#F97316}
.followup-kpi-card.is-green{border-left-color:#16A34A}
.followup-kpi-card.is-purple{border-left-color:#7C3AED}
.followup-kpi-card.is-gray{border-left-color:#98a2b3}
.followup-kpi-label{font-size:14px;color:#667085;font-weight:600}
.followup-kpi-value{font-size:26px;color:#101828;font-weight:700}

.followup-body-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media(max-width:900px){.followup-body-grid{grid-template-columns:1fr}}
.followup-main-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.followup-side-col{display:flex;flex-direction:column;gap:16px;min-width:0}

.followup-filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding-bottom:12px;border-bottom:1px solid #f2f4f7}
.followup-keyword{height:38px;padding:0 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;flex:1 1 220px;min-width:180px}
.followup-filter-field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#667085;font-weight:600}
.followup-filter-field select{height:38px;padding:0 8px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;color:#344054;background:#fff;min-width:120px}

.followup-tabs{display:flex;flex-wrap:wrap;gap:8px}
.followup-tab-btn{height:34px;padding:0 14px;border-radius:999px;border:1px solid #d0d5dd;background:#fff;color:#475467;font-size:14px;font-weight:600;cursor:pointer}
.followup-tab-btn:hover{background:#f2f4f7}
.followup-tab-btn.is-active{background:#1D4ED8;color:#fff;border-color:#1D4ED8}

.followup-table-wrap{overflow-x:auto}
.followup-table{width:100%;table-layout:fixed}
.followup-table th{white-space:nowrap}
.followup-table td{vertical-align:top;overflow:hidden}
/* Follow-up Today V2: shared blue-link style for 客戶姓名／來源單號 — both act as a real
   cross-module navigation trigger (Customer Center / 耗療單), not decorative text. */
.followup-cell-link{display:inline-block;border:0;background:transparent;padding:0;margin:0;color:#1D4ED8;font-weight:700;font-size:15px;cursor:pointer;text-align:left;text-decoration:none}
.followup-cell-link:hover{text-decoration:underline}
.followup-cell-customer-phone{color:#98a2b3;font-size:13px;margin-top:2px}
.followup-cell-task-title{display:flex;align-items:center;gap:8px;font-weight:600;color:#101828;font-size:15px}
.followup-cell-task-short{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.followup-day-chip{display:inline-flex;align-items:center;flex:0 0 auto;height:22px;padding:0 9px;border-radius:999px;background:#F2F4F7;color:#667085;font-size:13px;font-weight:700}
/* Follow-up Today V2 section 六: Day 數專屬色彩，未列出的天數維持預設灰色 (is-day-default，同基底樣式)。 */
.followup-day-chip.is-day-1{background:#ECFDF3;color:#16A34A}
.followup-day-chip.is-day-3{background:#EEF4FF;color:#1D4ED8}
.followup-day-chip.is-day-7{background:#FFF4E5;color:#B54708}
.followup-day-chip.is-day-14{background:#F3EEFF;color:#7C3AED}
.followup-day-chip.is-day-30{background:#FEF3F2;color:#DC2626}
.followup-cell-task-sub{color:#667085;font-size:13px;margin-top:2px}
.followup-cell-source-empty{color:#98a2b3}
.followup-cell-source-sub{color:#98a2b3;font-size:13px;margin-top:2px}
.followup-method-chip{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:#344054}
.followup-unassigned{color:#98a2b3}
.followup-status-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:700}
/* Follow-up Today V2 section 七: 今日到期=綠／明日到期=橘／逾期=紅／已完成=灰／未開始=灰
   (was 今日到期=藍、已完成=綠 pre-V2 — colors intentionally reassigned per this phase's spec). */
.followup-status-badge.is-due{background:#ECFDF3;color:#16A34A}
.followup-status-badge.is-due-tomorrow{background:#FFF4E5;color:#B54708}
.followup-status-badge.is-overdue{background:#FEF3F2;color:#B42318}
.followup-status-badge.is-completed{background:#F2F4F7;color:#667085}
.followup-status-badge.is-not-started{background:#F2F4F7;color:#667085}
.followup-status-badge.is-in-progress{background:#FDF3EC;color:#92400E}
.followup-status-badge.is-cancelled{background:#F2F4F7;color:#98a2b3}
.followup-due-hint{font-size:12px;color:#98a2b3;margin-top:4px}
.followup-empty{text-align:center;color:#98a2b3;font-size:14px;padding:24px 0}
.followup-table-foot{display:flex;justify-content:center}
.followup-show-more-btn{height:36px;padding:0 16px;font-size:14px;border-radius:999px}

/* Follow-up Today V2 section 八: 操作欄改兩列（開始客情 / 完成＋⋯），欄寬不變，讓其它欄位取得
   更多空間；固定 row-height（.followup-row-btn 32px×2 + gap）避免兩列版面撐高整列。 */
.followup-row-actions{display:flex;flex-direction:column;gap:6px}
.followup-row-actions-line2{display:flex;align-items:center;gap:6px}
.followup-row-btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #d0d5dd;background:#fff;color:#344054;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.followup-row-btn:hover{background:#f2f4f7}
.followup-row-btn.is-primary{border-color:#1D4ED8;color:#1D4ED8}
.followup-row-btn.is-primary:hover{background:#EEF4FF}
.followup-row-btn-wide{width:100%}
/* Follow-up Today V2.1 section 七: CRM 主次操作層級 — 開始客情＝深藍實心主按鈕，完成＝綠色語意
   （非僅靠顏色，文案仍保留「完成」字樣＋勾選符號）。 */
.followup-row-btn.is-start{height:38px;background:#1D4ED8;border-color:#1D4ED8;color:#fff;font-size:15px;font-weight:700}
.followup-row-btn.is-start:hover{background:#1E40AF;border-color:#1E40AF}
.followup-row-btn.is-complete{border-color:#16A34A;background:#ECFDF3;color:#16A34A;flex:1}
.followup-row-btn.is-complete:hover{background:#D1FADF}
/* 已完成／已取消任務改為唯讀狀態列，不可點擊，避免與狀態欄的 Badge 重複誤導使用者以為還能操作。 */
.followup-row-readonly{display:flex;align-items:center;justify-content:center;height:38px;border-radius:8px;font-size:14px;font-weight:700;background:#F2F4F7;color:#667085}
.followup-row-readonly.is-completed-readonly{background:#ECFDF3;color:#16A34A}
.followup-row-readonly.is-cancelled-readonly{background:#F2F4F7;color:#98a2b3}

.followup-rate-card{display:flex;flex-direction:column;align-items:center;gap:8px}
.followup-rate-ring{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
.followup-rate-ring::before{content:'';position:absolute;inset:10px;background:#fff;border-radius:50%}
.followup-rate-ring span{position:relative;font-size:18px;font-weight:700;color:#101828}
.followup-rate-sub{color:#667085;font-size:13px}

/* 開始客情／手動新增追蹤 mock modal body — reuses openDetailModal214()'s existing .detail-modal
   chrome, only the inner field layout is new. */
.followup-contact-modal-body{display:flex;flex-direction:column;gap:12px;min-width:340px}
.followup-contact-field{display:flex;flex-direction:column;gap:4px;font-size:14px;color:#344054;font-weight:600}
.followup-contact-field input,.followup-contact-field select,.followup-contact-field textarea{height:38px;padding:0 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;font-weight:400}
.followup-contact-field textarea{height:auto;padding:10px 12px;resize:vertical}
.followup-contact-field input:disabled{background:#F2F4F7;color:#667085}
.followup-contact-note{color:#98a2b3;font-size:13px;font-style:italic}
.followup-contact-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* ===== Follow-up Phase 1 — 追蹤規則 (public/modules/followup/FollowupRulesV1.js). Scoped under
   .followup-rule-*; reuses global .panel/.data-table/.table-head/.actions plus the same shared
   .followup-row-btn/.followup-day-chip/.crm-card-menu-*/.followup-keyword/.followup-filter-field
   classes FollowupTodayV1.js already established, rather than duplicating them a second time. ===== */
.followup-rules-panel{display:flex;flex-direction:column;gap:16px}
.followup-rules-head .note{margin:2px 0 0;color:#667085;font-size:14px}

/* 全部規則／啟用中／停用中 — underline-style tabs (distinct from 今日追蹤's pill tabs, matching the
   approved list-page wireframe). */
.followup-rule-status-tabs{display:flex;gap:24px;border-bottom:1px solid #e5e7eb}
.followup-rule-status-tab{padding:10px 2px;border:0;border-bottom:2px solid transparent;background:transparent;color:#667085;font-size:15px;font-weight:600;cursor:pointer}
.followup-rule-status-tab:hover{color:#344054}
.followup-rule-status-tab.is-active{color:#1D4ED8;border-bottom-color:#1D4ED8}

.followup-rule-filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.followup-reset-btn{height:38px;padding:0 16px;font-size:14px;border-radius:8px}

.followup-rule-table th{white-space:nowrap}
/* Treatment Classification Master Phase 2A-R1: 大類列可點擊選取，顯示其下次類別；沿用既有
   .followup-rule-table/.followup-toggle*/.followup-row-btn 樣式，不新增第二套元件系統。 */
.tcm-category-table tbody tr{cursor:pointer}
.tcm-category-table tbody tr:hover{background:#FAFBFC}
.tcm-category-table tbody tr.is-selected-row{background:#EEF4FF}
.tcm-sub-panel{margin-top:20px}
.followup-rule-name{font-weight:700;color:#101828;font-size:15px}
.followup-rule-meta{color:#98a2b3;font-size:13px;margin-top:2px}
.followup-scope-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:700}
.followup-scope-badge.is-category{background:#EEF4FF;color:#1D4ED8}
.followup-scope-badge.is-item{background:#F3EEFF;color:#7C3AED}
.followup-scope-badge.is-default{background:#FDF3EC;color:#92400E}
.followup-day-chip-list{display:flex;flex-wrap:wrap;gap:6px}
.followup-row-btn.is-danger{border-color:#FDA29B;color:#B42318}
.followup-row-btn.is-danger:hover{background:#FEF2F2}

/* 啟用／停用 Toggle — no pre-existing generic switch component in this codebase, built scoped to
   .followup-toggle so it can't collide with anything else. */
.followup-toggle-wrap{display:flex;align-items:center;gap:8px}
.followup-toggle{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto}
.followup-toggle input{opacity:0;width:0;height:0}
.followup-toggle-slider{position:absolute;inset:0;background:#d0d5dd;border-radius:999px;cursor:pointer;transition:background 150ms ease}
.followup-toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform 150ms ease;box-shadow:0 1px 2px rgba(16,24,40,.2)}
.followup-toggle input:checked + .followup-toggle-slider{background:#16A34A}
.followup-toggle input:checked + .followup-toggle-slider::before{transform:translateX(18px)}
.followup-toggle-label{font-size:13px;color:#667085;font-weight:600}

/* ===== 新增／編輯規則 Drawer — reuses the shared #detailModal214 singleton (same one
   FollowupTodayV1.js's 開始客情/手動新增追蹤 modals use), only widened via :has(). ===== */
.detail-modal-card:has(.followup-rule-drawer-wrap){width:min(1040px,92vw)!important}
.followup-rule-drawer-wrap{display:flex;flex-direction:column;gap:16px}
.followup-rule-drawer-body{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:start}
/* W3：原本 1439px→340px 兩欄、1023px→單欄的兩段式，統一為 V4 唯一強制斷點 900px 的單段收斂。 */
@media(max-width:900px){.followup-rule-drawer-body{grid-template-columns:1fr}}
.followup-rule-drawer-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.followup-rule-section-title{font-size:16px;font-weight:700;color:#101828;margin-top:4px}
.followup-rule-nodes-title{display:flex;align-items:center;justify-content:space-between;margin-top:0}
.followup-add-node-btn{height:34px;padding:0 14px;font-size:14px;border-radius:8px}
.followup-rule-field{display:flex;flex-direction:column;gap:6px}
.followup-rule-field label{font-size:14px;color:#344054;font-weight:600}
.followup-rule-field input[type="text"],.followup-rule-field input[type="number"],.followup-rule-field select,.followup-rule-field textarea{height:38px;padding:0 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;font-weight:400;color:#344054}
.followup-rule-field textarea{height:auto;padding:10px 12px;resize:vertical}
.followup-rule-field-inline{flex-direction:row;align-items:center;gap:10px}
.followup-rule-field-row{display:flex;gap:14px}
.followup-rule-field-row .followup-rule-field{flex:1 1 0;min-width:0}
.followup-rule-counter{align-self:flex-end;font-size:13px;color:#98a2b3}
.followup-rule-radio-row{display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:#344054;font-weight:400}
.followup-rule-radio-row label{display:flex;align-items:center;gap:6px;cursor:pointer}
.followup-rule-radio-row label.is-disabled{color:#98a2b3;cursor:default}
.followup-rule-future-tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:6px;background:#F2F4F7;color:#98a2b3;font-size:11px;font-weight:700}
.followup-rule-default-note{color:#667085;font-size:14px;background:#FAFBFC;border:1px solid #eef1f5;border-radius:8px;padding:10px 12px;line-height:1.6}

/* 選擇品項 — search box + selectable option list (same interaction shape as CRM Phase 3.9's
   template search: filters a list, click to single-select). */
.followup-item-search-input{height:38px;padding:0 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;margin-bottom:6px}
.followup-item-option-list{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto;border:1px solid #eef1f5;border-radius:8px;padding:4px;background:#fff}
.followup-item-option{display:block;width:100%;height:36px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:#344054;font-size:14px;text-align:left;cursor:pointer}
.followup-item-option:hover{background:#f2f4f7}
.followup-item-option.is-selected{background:#1D4ED8;color:#fff;font-weight:600}
.followup-item-search-empty{color:#98a2b3;font-size:14px;padding:10px 4px;text-align:center}

/* 追蹤節點設定 — each node is its own bordered row/card; drag handle is a static, non-interactive
   affordance only (final order is always re-sorted by Day on save, so drag reordering is
   functionally redundant — see completion report). */
.followup-rule-node-list{display:flex;flex-direction:column;gap:12px}
/* Flex-wrap rather than a fixed-column grid — the right drawer column's actual available width
   varies with viewport/breakpoint (roughly 550-700px), and a rigid multi-column grid with several
   130-170px fixed tracks doesn't reliably fit that range (found via UAT: 追蹤名稱 field visually
   collapsed). Each field wraps onto its own line naturally once space runs out instead. */
.followup-rule-node-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:#FAFBFC;border:1px solid #eef1f5;border-radius:10px;padding:12px}
.followup-rule-node-drag{color:#c0c5cd;font-size:16px;cursor:default;align-self:center;flex:0 0 auto}
.followup-rule-node-field{display:flex;flex-direction:column;gap:4px;flex:1 1 140px;min-width:130px}
.followup-rule-node-field.followup-rule-node-day{flex:0 0 76px;min-width:76px}
.followup-rule-node-field.followup-rule-node-title{flex:1 1 180px;min-width:160px}
.followup-rule-node-field.followup-rule-node-short{flex:0 0 110px;min-width:100px}
.followup-rule-node-field label{font-size:12px;color:#98a2b3;font-weight:600}
.followup-rule-node-field input,.followup-rule-node-field select{height:36px;padding:0 10px;border:1px solid #d0d5dd;border-radius:8px;font-size:13px;color:#344054;width:100%}
.followup-rule-node-field select + select,.followup-rule-node-field select + div select{margin-top:4px}
.followup-rule-node-actions{display:flex;gap:6px;align-self:flex-end;flex:0 0 auto}

.followup-rule-drawer-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:8px;border-top:1px solid #eef1f5}

/* ===== 行銷活動列表與管理頁（Marketing Campaign V1）======================================
   本區塊全部 scoped 至 #marketingCampaignPanelV230 / #mktCampDrawerV1，不影響其他頁面。
   共用元件（KPI Card / Header / Toolbar / Export Dropdown / Table / Pagination / Drawer 外殼）
   已在既有 .daily-kpi-card-v260 / .monthly-* / .sales-query-pagination-v22 / .pdd-drawer-v270
   規則加寬選擇器重用，此處只新增版面排列與活動特有元件（5 欄 KPI、Filter 欄位、狀態圓點、
   操作按鈕、說明欄位截字）樣式。 */
#marketingCampaignPanelV230.mkt-camp-panel-v1{display:block}
/* 共用 #marketingCampaignPanelV230 .monthly-kpi-grid-v270 規則（第 1567 行）已是
   repeat(6,1fr) 且帶 ID 選擇器，若只用單一 class 覆寫會因特異度不足而覆寫失敗（5 張卡片
   會被塞進 6 欄、且無 minmax(0,...) 保護，導致欄寬不齊＋右側留白）。這裡改用相同的
   ID+class 特異度、放在該規則之後，才能正確覆寫成 5 欄等寬。 */
#marketingCampaignPanelV230 .monthly-kpi-grid-v270{grid-template-columns:repeat(5,minmax(0,1fr))}

.mkt-camp-filter-card-v1{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.mkt-camp-filter-row-v1{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.mkt-camp-field-v1{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#667085;font-weight:600;flex:1 1 150px;min-width:130px}
.mkt-camp-field-v1 input,.mkt-camp-field-v1 select{height:38px;padding:0 10px;border:1px solid #d0d5dd;border-radius:8px;font-size:13px;color:#344054;width:100%}
.mkt-camp-field-search-v1{flex:1 1 220px;min-width:200px}
.mkt-camp-field-daterange-v1,.mkt-camp-field-budgetrange-v1{flex:1 1 240px;min-width:220px}
.mkt-camp-daterange-v1{display:flex;align-items:center;gap:6px}
.mkt-camp-daterange-v1 input{flex:1 1 0;min-width:0}
.mkt-camp-daterange-v1 span{color:#98a2b3;font-size:12px}
.mkt-camp-filter-actions-v1{display:flex;align-items:flex-end;gap:8px;margin-left:auto}

.mkt-camp-table-scroll-v1{overflow-x:auto}
.mkt-camp-table-v1{table-layout:fixed;min-width:1180px}
.mkt-camp-table-v1 th:nth-child(1),.mkt-camp-table-v1 td:nth-child(1){width:130px}
.mkt-camp-table-v1 th:nth-child(2),.mkt-camp-table-v1 td:nth-child(2){width:15%}
.mkt-camp-table-v1 th:nth-child(3),.mkt-camp-table-v1 td:nth-child(3){width:180px}
.mkt-camp-table-v1 th:nth-child(4),.mkt-camp-table-v1 td:nth-child(4){width:11%}
.mkt-camp-table-v1 th:nth-child(5),.mkt-camp-table-v1 td:nth-child(5){width:10%}
.mkt-camp-table-v1 th:nth-child(6),.mkt-camp-table-v1 td:nth-child(6){width:10%}
.mkt-camp-table-v1 th:nth-child(7),.mkt-camp-table-v1 td:nth-child(7){width:90px}
.mkt-camp-table-v1 th:nth-child(8),.mkt-camp-table-v1 td:nth-child(8){width:9%}
/* 共用 .daily-rank-table-v260 th 預設 white-space:nowrap，「活動成效 ROI」等較窄欄位標題會被
   擠出儲存格與下一欄重疊，這裡改回允許換行並限制列高，僅影響本頁表頭。 */
#marketingCampaignPanelV230 .mkt-camp-table-v1 th{white-space:normal;line-height:1.3;vertical-align:bottom}
.mkt-camp-table-v1 .mkt-camp-actions-cell-v1{white-space:nowrap}
.mkt-camp-table-v1 .mkt-camp-period-cell-v1{white-space:nowrap}
/* -webkit-line-clamp 需要 display:-webkit-box，但若直接套在 <td> 上會破壞 table-layout:fixed
   的 table-cell 排版（造成該欄寬度塌陷至內容大小，非固定欄寬），故改套在 td 內的 span。 */
.mkt-camp-table-v1 .mkt-camp-desc-cell-v1{white-space:normal;line-height:1.4;overflow:hidden}
.mkt-camp-table-v1 .mkt-camp-desc-inner-v1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 1366px 下優先縮減：活動說明 → 活動成效ROI → 操作欄寬 */
@media (max-width:1440px){
  .mkt-camp-table-v1{min-width:1080px}
  .mkt-camp-table-v1 th:nth-child(1),.mkt-camp-table-v1 td:nth-child(1){width:110px}
  .mkt-camp-table-v1 th:nth-child(8),.mkt-camp-table-v1 td:nth-child(8){width:70px}
}

.mkt-camp-action-btn-v1{height:30px;padding:0 10px;border-radius:8px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;margin-right:6px;background:transparent}
.mkt-camp-action-btn-v1.is-edit{background:#eef4ff;color:#1d4ed8}
.mkt-camp-action-btn-v1.is-edit:hover{background:#dbe8ff}
.mkt-camp-action-btn-v1.is-disable{background:#fef3f2;color:#b42318}
.mkt-camp-action-btn-v1.is-disable:hover{background:#fde4e1}
.mkt-camp-action-btn-v1.is-enable{background:#ecfdf3;color:#027a48}
.mkt-camp-action-btn-v1.is-enable:hover{background:#d7f7e5}

.mkt-camp-status-dot-v1{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.mkt-camp-status-dot-v1.is-active{background:#12b76a}
.mkt-camp-status-dot-v1.is-ended{background:#1d4ed8}
.mkt-camp-status-dot-v1.is-inactive{background:#f04438}

/* 新增／編輯 Drawer：重用 .pdd-overlay-v270/.pdd-drawer-v270 外殼，寬度收窄為 520px（480~560px 範圍）*/
.mkt-camp-drawer-v1{width:min(520px,92vw)!important;max-width:520px!important}
.mkt-camp-drawer-body-v1{display:flex;flex-direction:column;gap:14px}
.mkt-camp-drawer-field-v1{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#344054}
.mkt-camp-drawer-field-v1 input,.mkt-camp-drawer-field-v1 select,.mkt-camp-drawer-field-v1 textarea{height:40px;padding:0 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;color:#0f172a;font-weight:400}
.mkt-camp-drawer-field-v1 textarea{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
.mkt-camp-drawer-field-row-v1{display:flex;gap:12px}
.mkt-camp-drawer-field-row-v1 .mkt-camp-drawer-field-v1{flex:1 1 0;min-width:0}
.mkt-camp-drawer-checkline-v1{flex-direction:row;align-items:center;gap:8px}
.mkt-camp-drawer-checkline-v1 input{height:auto;width:auto;flex:0 0 auto}
.mkt-camp-drawer-footer-v1{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;background:#fff;border-top:1px solid #e4e9f1}

@media (max-width:1400px){
  .mkt-camp-table-v1 .mkt-camp-desc-cell-v1{-webkit-line-clamp:1}
}
@media (max-width:1440px){
  .mkt-camp-kpi-grid-v1{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
}

/* ===== 客戶來源設定 V2 — 兩層來源架構左右雙欄 Master-Detail。遵循既有 ClinicOS Desktop Design
   System 數值（Card radius 16px／Input,Button height 40px／Page Title 24/700／Section Title 18/700／
   Table Header 15/600／Table Body 16px／Badge 13/600／Gap 16px），重用既有 .panel（16px radius）/
   .badge-v1/.detail-modal 元件，非第二套 Design System。#settingPanelSources 範圍內 scoped。 */
#settingPanelSources.csrc-panel-v1{padding:0;background:transparent;box-shadow:none;border-radius:0}
/* align-items 預設值（stretch）讓左右兩欄高度一致（同一 Grid Row 內兩個 Card 撐到同高），
   不能覆寫成 start，否則右側內容較少時會比左側矮一截。 */
#settingPanelSources .csrc-layout-v1{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:16px}
#settingPanelSources .csrc-col-v1{background:#fff;border-radius:16px;border:1px solid #e4e9f1;padding:20px;min-width:0}
#settingPanelSources .csrc-col-head-v1{margin-bottom:16px}
#settingPanelSources .csrc-title-v1{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 4px}
#settingPanelSources .csrc-subtitle-v1{font-size:13px;color:#667085;margin:0}
#settingPanelSources .csrc-toolbar-v1{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
#settingPanelSources .csrc-search-v1{flex:1 1 auto;height:40px;border-radius:10px;padding:0 12px;font-size:14px;min-width:0}
#settingPanelSources .csrc-btn-primary-v1{height:40px;padding:0 16px;border-radius:10px;background:#1d4ed8;border:1px solid #1d4ed8;color:#fff;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
#settingPanelSources .csrc-btn-primary-v1:hover{background:#1741b8}
#settingPanelSources .csrc-table-wrap-v1{overflow-x:auto}
#settingPanelSources .csrc-table-v1{width:100%;border-collapse:collapse;table-layout:fixed}
#settingPanelSources .csrc-table-v1 th{font-size:15px;font-weight:600;text-align:left;padding:10px 8px;background:#f8fafc;border-bottom:1px solid #e4e9f1;white-space:nowrap}
#settingPanelSources .csrc-table-v1 td{font-size:16px;padding:10px 8px;border-bottom:1px solid #eef1f5;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
#settingPanelSources .csrc-table-v1 tbody tr{cursor:pointer}
#settingPanelSources .csrc-table-v1 tbody tr:hover{background:#f8fafc}
/* 選中列：淡藍底 + 左側 Primary 指示線（3px 藍色色塊），一眼可辨識目前選取的來源。 */
#settingPanelSources .csrc-table-v1 tr.csrc-row-selected-v1{background:#eff6ff;box-shadow:inset 3px 0 0 #1d4ed8}
/* 「編輯／停用」兩個文字按鈕並排需要 ~100px+，會讓操作欄位在 fixed table-layout 下不夠寬；改為直式
   堆疊（垂直排列），每顆按鈕只需自己的文字寬度，不需要跟鄰居搶橫向空間，也不會被判定成「逐字換行」
   （逐字換行指的是單一按鈕文字被拆成單字換行，不是兩顆完整按鈕上下排列）。 */
#settingPanelSources .csrc-row-actions-v1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
#settingPanelSources .csrc-row-actions-v1 button{padding:3px 10px;font-size:12px;min-width:0;white-space:nowrap}
#settingPanelSources .csrc-type-badge-v1{font-size:13px;font-weight:600;white-space:nowrap}
#settingPanelSources .csrc-empty-state-v1{padding:40px 16px;text-align:center;color:#475467}
#settingPanelSources .csrc-empty-state-v1 p{margin:0 0 6px}
#settingPanelSources .csrc-empty-state-v1 .csrc-btn-primary-v1{margin-top:14px}
/* 左側來源清單欄寬：名稱24% / 類型23% / 關聯限制23% / 狀態14% / 操作16%。類型/狀態/操作皆
   white-space:nowrap，避免逐字換行；23% 是實測「一般來源」badge（含 padding）不被裁切的最小寬度。
   關聯限制欄改用較短標籤（客戶名單／不限職務／實際職務值）+ title 屬性放完整說明；23% 是實測
   「!委外業務」（限制職務值，5字含!）不被裁切的最小寬度。操作按鈕改直式堆疊後只需單顆按鈕寬度，
   16% 已足夠，多餘寬度讓給關聯限制欄。名稱欄僅測試用超長 UAT_ 字串會 ellipsis（title 屬性可看完整
   名稱），真實來源名稱都很短。 */
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 th:nth-child(1),
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 td:nth-child(1){width:24%}
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 th:nth-child(2),
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 td:nth-child(2){width:23%;white-space:nowrap}
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 th:nth-child(3),
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 td:nth-child(3){width:23%;white-space:nowrap}
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 th:nth-child(4),
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 td:nth-child(4){width:14%;white-space:nowrap}
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 th:nth-child(5),
#settingPanelSources .csrc-col-left-v1 .csrc-table-v1 td:nth-child(5){width:16%;white-space:nowrap}
/* 右側來源明細欄寬：名稱25% / 備註35% / 狀態15% / 操作25%。 */
#settingPanelSources .csrc-col-right-v1 .csrc-table-v1 th:nth-child(1),
#settingPanelSources .csrc-col-right-v1 .csrc-table-v1 td:nth-child(1){width:25%}
#settingPanelSources .csrc-col-right-v1 .csrc-table-v1 th:nth-child(2),
#settingPanelSources .csrc-col-right-v1 .csrc-table-v1 td:nth-child(2){width:35%}
#settingPanelSources .csrc-col-right-v1 .csrc-table-v1 th:nth-child(3),
#settingPanelSources .csrc-col-right-v1 .csrc-table-v1 td:nth-child(3){width:15%;white-space:nowrap}
#settingPanelSources .csrc-col-right-v1 .csrc-table-v1 th:nth-child(4),
#settingPanelSources .csrc-col-right-v1 .csrc-table-v1 td:nth-child(4){width:25%;white-space:nowrap}
.csrc-modal-card-v1{width:min(480px,92vw)!important}
.csrc-modal-form-v1{display:flex;flex-direction:column;gap:14px}
.csrc-modal-form-v1 label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:#344054}
.csrc-modal-form-v1 input,.csrc-modal-form-v1 select{height:40px;border-radius:10px;padding:0 12px;font-size:14px}
.csrc-checkbox-field-v1{flex-direction:row!important;align-items:center;gap:8px!important}
.csrc-checkbox-field-v1 input{height:auto!important;width:18px;flex:0 0 auto}
.csrc-type-hint-v1{margin:-6px 0 0;font-size:12px;color:#667085;line-height:1.5}

@media(max-width:1300px){
  #settingPanelSources .csrc-layout-v1{grid-template-columns:1fr}
}

/* ===== 系統設定 → 員工管理 V1（UI First / Workflow First / Minimal Change）====================
   本區塊只調整 UI：Module Card 視覺化、Header、搜尋區、Table Badge/按鈕、Pagination、新增/編輯
   Drawer。共用元件：.monthly-header-v270/.monthly-card-v270/.monthly-toolbar-right-v270/
   .daily-tx-scroll-v260/.sales-query-pagination-v22（皆已於上方加寬選擇器涵蓋
   #settingPanelEmployees）、.pdd-overlay-v270/.pdd-drawer-v270（全域 Drawer 外殼，未加寬即可用）、
   .role-status-badge-v212（全域狀態 Badge）、.ghost/.danger（全域淺色按鈕）、.check-grid/
   .role-checks-v217（既有職務勾選群組樣式）。新增的僅有 Module Card 視覺樣式與員工搜尋區特有排版
   （Icon Card 選取態、搜尋欄位排列、Switch 元件、Table 欄寬、Drawer 寬度），未建立第二套設計系統。
   API／Database／Schema／Business Logic／權限／離職流程完全未變更。 */

/* ---- Module Card（Icon Card）：13 個系統設定入口 ---- */
#settingsHeaderPanelV223{padding:24px}
#settingsHeaderPanelV223 h3{margin:0 0 24px;font-size:24px}
#settingsHeaderPanelV223 .setting-tabs.setting-tabs-grid-v1{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:16px;margin:0;
}
#settingsHeaderPanelV223 .setting-tabs.setting-tabs-grid-v1 button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  height:96px;padding:12px;margin:0;
  background:#fff;color:#344054;border:1px solid #d0d5dd;border-radius:12px;
  font-size:13px;font-weight:600;line-height:1.3;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
#settingsHeaderPanelV223 .setting-tabs.setting-tabs-grid-v1 button:hover{background:#eef4ff;border-color:#93c5fd}
#settingsHeaderPanelV223 .setting-tabs.setting-tabs-grid-v1 button.active-tab{background:#eef4ff;border-color:#1d4ed8;color:#1d4ed8}
#settingsHeaderPanelV223 .setting-tab-icon-v1{font-size:24px;line-height:1}
#settingsHeaderPanelV223 .setting-tab-label-v1{white-space:nowrap}
@media(max-width:1024px){
  #settingsHeaderPanelV223 .setting-tabs.setting-tabs-grid-v1{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}

/* ---- 員工管理 Panel 版面 ---- */
#settingPanelEmployees{padding:0 24px 24px}
#settingPanelEmployees .monthly-header-v270{margin-top:24px;margin-bottom:32px}
#settingPanelEmployees .monthly-card-v270{margin-bottom:24px}
#settingPanelEmployees .monthly-card-v270:last-of-type{margin-bottom:0}

/* ---- 搜尋區 ---- */
.emp-filter-row-v1{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px}
.emp-filter-row-v1+.emp-filter-row-v1{margin-top:16px}
.emp-field-v1{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#667085;font-weight:600;flex:1 1 180px;min-width:160px}
.emp-field-v1 input,.emp-field-v1 select{height:40px;padding:0 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;color:#0f172a;font-weight:400}
.emp-role-checks-field-v1{flex:2 1 360px}
.emp-role-checks-v1{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.emp-role-checks-v1 label{display:flex;align-items:center;gap:6px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;color:#344054;white-space:nowrap;cursor:pointer}
.emp-role-checks-v1 input{width:auto;height:auto}
.emp-filter-actions-v1{display:flex;align-items:flex-end;gap:16px;margin-left:auto}

/* ---- Switch：顯示離職員工（純 CSS 視覺切換，底層仍是原生 checkbox，行為/事件不變）---- */
.emp-switch-v1{display:flex;align-items:center;gap:10px;cursor:pointer;flex:0 0 auto;padding-bottom:10px}
.emp-switch-v1 input{position:absolute;opacity:0;width:1px;height:1px}
.emp-switch-track-v1{position:relative;width:40px;height:22px;background:#d0d5dd;border-radius:999px;transition:background .15s ease;flex:0 0 auto}
.emp-switch-thumb-v1{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(16,24,40,.2);transition:transform .15s ease}
.emp-switch-v1 input:checked+.emp-switch-track-v1{background:#1d4ed8}
.emp-switch-v1 input:checked+.emp-switch-track-v1 .emp-switch-thumb-v1{transform:translateX(18px)}
.emp-switch-v1 input:focus-visible+.emp-switch-track-v1{outline:2px solid #93c5fd;outline-offset:2px}
.emp-switch-text-v1{font-size:var(--cos-fs-small,14px);font-weight:var(--cos-fw-small,600);line-height:var(--cos-lh-small,1.45);color:#344054}

/* ---- Table ---- */
.emp-table-scroll-v1{overflow-x:auto}
.emp-table-v1{table-layout:fixed;min-width:900px}
.emp-table-v1 th:nth-child(1),.emp-table-v1 td:nth-child(1){width:12%}
.emp-table-v1 th:nth-child(2),.emp-table-v1 td:nth-child(2){width:14%}
.emp-table-v1 th:nth-child(3),.emp-table-v1 td:nth-child(3){width:22%}
.emp-table-v1 th:nth-child(4),.emp-table-v1 td:nth-child(4){width:90px}
.emp-table-v1 th:nth-child(5),.emp-table-v1 td:nth-child(5){width:140px}
.emp-table-v1 th:nth-child(6),.emp-table-v1 td:nth-child(6){width:160px;white-space:nowrap}
.emp-table-v1 td button{margin-right:6px}
.emp-table-v1 td button:last-child{margin-right:0}

/* ---- 新增／編輯 Drawer：重用 .pdd-overlay-v270/.pdd-drawer-v270 外殼，寬度收窄為 520px（500~560px 範圍）---- */
.emp-drawer-v1{width:min(520px,92vw)!important;max-width:520px!important}
.emp-drawer-body-v1{display:flex;flex-direction:column;gap:16px}
.emp-drawer-field-v1{display:flex;flex-direction:column;gap:6px;font-size:var(--cos-fs-label,15px);font-weight:var(--cos-fw-label,600);color:#344054}
.emp-drawer-field-v1 input,.emp-drawer-field-v1 select,.emp-drawer-field-v1 textarea{height:40px;padding:0 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:var(--cos-fs-body,16px);color:#0f172a;font-weight:400}
/* Checkbox 說明文字（.role-checks-v217 label）是使用者實際勾選的職務名稱，屬主要內容而非輔助
   說明，優先套用 Body Token；只在 .emp-drawer-field-v1 情境下覆寫，不動 .role-checks-v217/
   .role-checks-v218 共用基底規則本身，避免影響未來其他頁面若重用這兩個 class。 */
.emp-drawer-field-v1 .role-checks-v217 label{font-size:var(--cos-fs-body,16px)}
.emp-drawer-footer-v1{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;background:#fff;border-top:1px solid #e4e9f1}

@media(max-width:1440px){
  .emp-table-v1{min-width:820px}
}

/* ===== ClinicOS UI Foundation Phase 2C — 員工管理頁面 UI 優化（page-scoped，only
   #settingPanelEmployees）。不動 .cos-* 基底定義，純新增頁面專屬 class + ID-scoped 覆寫；
   Foundation 目前無對應的 Segment Filter／Summary Stat／Sticky Table／Row More-Menu 元件。 */
.emp-segment-row-v1{display:flex;flex-wrap:wrap;gap:8px}
.emp-segment-pill-v1{cursor:pointer}
.emp-segment-pill-v1 input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
/* Active(選取)視覺完全交給 :has()（本檔案已有先例，見 .adj-step2-tabs-v1 label:has(input:checked)），
   不寫額外 JS 狀態同步。「全部」在沒有任何職務被勾選時視為選取中。 */
.emp-segment-pill-v1:has(input:checked),
.emp-segment-row-v1:not(:has(input:checked)) .emp-segment-all-v1{
  background:var(--clinic-primary);color:#fff;border-color:var(--clinic-primary);
}
/* UI-POLISH-009 A2：整個查詢區只有這一張 .cos-toolbar 卡片（不再卡中卡）。
   第一列 = 查詢條件 + 搜尋/清除（左）／＋新增員工（右）；職務 chips 以 flex-basis:100%
   換到第二列，並用一條細線與第一列分隔，維持同一個 hierarchy。 */
.emp-toolbar-row-v1{row-gap:16px}
.emp-toolbar-row-v1 .cos-toolbar__filters{align-items:flex-end}
/* Switch 是一個整體：toggle 與文字同一列。全域 `label{flex-direction:column}`（style.css 開頭的
   基底規則）會把兩者拆成上下兩行，這裡在工具列情境下復原成橫向，不動基底規則。 */
.emp-toolbar-row-v1 .emp-switch-v1{flex-direction:row;flex-wrap:nowrap;white-space:nowrap;align-items:center}
.emp-toolbar-actions-v1{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding-bottom:1px}
.emp-toolbar-row-v1 .emp-segment-row-v1{
  flex:1 1 100%;
  padding-top:16px;
  border-top:1px solid var(--cos-border,#e5e7eb);
}

/* A4 Summary strip：單行、compact，不再是 Dashboard KPI 卡片。 */
.emp-summary-row-v1{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  margin:0 0 20px;padding:12px 16px;
  background:var(--cos-surface-muted,#f7f8fa);
  border:1px solid var(--cos-border,#e5e7eb);
  border-radius:var(--cos-radius-sm,8px);
}
.emp-summary-item-v1{display:inline-flex;align-items:baseline;gap:8px}
.emp-summary-item-v1+.emp-summary-item-v1::before{
  content:'｜';color:var(--cos-border-strong,#d8dce3);margin-right:10px;
}
/* 數字仍比標籤醒目一級（Card Title），但不再用 Section Title 那種 Dashboard 級字級。 */
.emp-summary-value-v1{font-size:var(--cos-fs-card-title,16px);font-weight:700;line-height:1.3;color:var(--cos-text,#1f2430)}
.emp-summary-label-v1{font-size:var(--cos-fs-small,14px);line-height:var(--cos-lh-small,1.45);color:var(--cos-text-subtle,#667085)}

/* 「員工列表」是 section title，不是輸入框：整列不加外框、不加背景，
   標題純文字、動作靠右，兩者同一列。原本套 .cos-table 會帶進表格容器的灰色邊框，
   看起來就像一個假欄位包住標題與按鈕。 */
.emp-table-head-v1{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
  border:0;background:none;padding:0;box-shadow:none;
}
.emp-table-title-v1{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#101828;
  border:0;background:none;padding:0;
}
/* Drawer 分組標題：基本資料／任職資料。純文字小標，不做成卡片或輸入框。 */
.emp-drawer-group-v1{
  margin:14px 0 2px;
  font-size:13px;
  font-weight:700;
  color:#475467;
}
.emp-drawer-group-v1:first-child{margin-top:0;}
.emp-drawer-hint-v1{
  margin-top:2px;
  font-size:12px;
  color:#667085;
  line-height:1.5;
}
#settingPanelEmployees .emp-table-sticky-v1{max-height:520px;overflow:auto}
#settingPanelEmployees .emp-table-sticky-v1 thead th{position:sticky;top:0;z-index:1;background:var(--cos-surface-muted,#f7f8fa)}

.emp-row-menu-popover-v1{position:fixed;z-index:10000;background:var(--cos-surface,#fff);border:1px solid var(--cos-border,#e5e7eb);border-radius:var(--cos-radius-sm,8px);box-shadow:var(--cos-shadow-lift,0 8px 20px rgba(16,24,40,.14));min-width:120px;padding:4px;display:flex;flex-direction:column}
.emp-row-menu-popover-v1 button{border:none;background:none;text-align:left;padding:7px 10px;font-size:var(--cos-fs-small,14px);line-height:var(--cos-lh-small,1.45);color:var(--cos-text,#1f2430);border-radius:6px;cursor:pointer}
.emp-row-menu-popover-v1 button:hover:not(:disabled){background:var(--cos-accent-soft,#eef6fe);color:var(--cos-accent-hover,#0a5aa0)}
.emp-row-menu-popover-v1 button:disabled{color:#c0c7d1;cursor:not-allowed}
.emp-row-menu-popover-v1 button.is-danger{color:#b42318}
.emp-row-menu-popover-v1 button.is-danger:hover:not(:disabled){background:#fef2f2;color:#b42318}

@media(max-width:900px){
  .emp-toolbar-row-v1,
  .emp-toolbar-row-v1 .cos-toolbar__filters{flex-direction:column;align-items:stretch}
  .emp-toolbar-actions-v1{flex-direction:column}
  .emp-toolbar-actions-v1 .cos-btn{width:100%}
  .emp-toolbar-row-v1 .cos-toolbar__actions .cos-btn{width:100%}
}

/* ===== Section Quick Navigation V1（全系統共用單一元件，見 app.js renderSectionQuickNavV1）====
   一套 class 全站共用，不依 Panel/頁面各別 scoped，也不得被個別頁面樣式覆蓋。使用既有 Design
   Token（border #e4e9f1、primary #1d4ed8、淡藍 #eef4ff、radius/spacing 沿用其餘頁面已用的數值），
   不建立新色票。 */
.section-quick-nav{
  background:#fff;border:1px solid #e4e9f1;border-radius:12px;
  padding:16px 20px;margin:0 0 20px;
}
.section-quick-nav-title{font-size:15px;font-weight:700;color:#0f172a;margin:0 0 12px}
.section-quick-nav-list{display:flex;flex-wrap:wrap;gap:10px;overflow-x:visible}
.section-quick-nav-item{
  display:flex;align-items:center;gap:8px;
  height:52px;padding:12px 16px;
  background:#fff;border:1px solid #e4e9f1;border-radius:10px;
  font-size:14px;font-weight:600;color:#344054;
  cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.section-quick-nav-item:hover{background:#eef4ff;border-color:#93c5fd}
.section-quick-nav-item.active{background:#eef4ff;border-color:#1d4ed8;color:#1d4ed8}
.section-quick-nav-icon{font-size:18px;line-height:1}
.section-quick-nav-label{white-space:nowrap}
@media(max-width:1366px){
  .section-quick-nav{padding:14px 16px}
  .section-quick-nav-item{padding:10px 12px;font-size:13px}
}

/* V3 UI Modernization — 系統管理 only. .section-quick-nav 本身仍是全站共用、不做 per-page
   override（見上方註解），這裡不覆寫共用規則，而是疊加 app.js renderSectionQuickNavV1() 只在
   moduleKey==='systemOps' 時才會加上的 .section-quick-nav--system class，把小方塊 Button 外觀
   改成水平 Tab Navigation。其餘沿用 .section-quick-nav 的模組（每日工作台/經營分析/獎金管理/
   財務管理/臨床媒體中心）完全不受影響。
   UI Foundation Phase 1（2026-07-22）覆核：僅保留與 .section-quick-nav 基底值真正不同的宣告
   （layout 差異），移除了原本重複宣告的 background:#fff（基底已是 #fff）／box-shadow:none
   （基底本無 box-shadow 可覆寫）／font-weight:600（基底 .section-quick-nav-item 已是 600）。 */
.section-quick-nav--system{
  border:0;border-radius:0;padding:0 4px;margin:0 0 4px;
}
.section-quick-nav--system .section-quick-nav-title{display:none}
.section-quick-nav--system .section-quick-nav-list{gap:4px}
.section-quick-nav--system .section-quick-nav-item{
  height:56px;padding:0 16px;background:transparent;border:0;border-bottom:3px solid transparent;
  border-radius:0;color:var(--cos-text-subtle,#475467);transition:color .15s ease,border-color .15s ease;
}
.section-quick-nav--system .section-quick-nav-item:hover{background:var(--cos-surface-muted,#f7f8fa);color:var(--cos-text,#1f2430)}
.section-quick-nav--system .section-quick-nav-item.active{background:transparent;border-bottom-color:var(--cos-accent,#0f6cbd);color:var(--cos-accent,#0f6cbd)}

/* ===== Navigation Shell V1（Module→Function→Sub-Function→Workspace，全系統共用單一元件）========
   一套 class（.nav-tabs-v1/.nav-tab-v1）＋層級 modifier（--fn/--sub），不依 Panel/頁面各別 scoped。
   色票沿用既有既已在用的 Design Token：border #e4e9f1/#d0d5dd、primary #1d4ed8、淡藍 #eef4ff、
   hover border #93c5fd——未新增任何新色票。Function 列的數值取自現有 .center-tab（Customer Center
   既有分頁）已經在用、視覺效果最好的一組（38px／淡藍底＋藍字＋下緣提示線），Sub-Function 列在同一
   語彙下縮小一級（32px／膠囊角）。渲染邏輯見 app.js renderNavShellV1()。 */
.nav-shell-v1{display:block}
.nav-tabs-v1{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 24px;background:#fff;border-bottom:1px solid #e4e9f1}
.nav-tabs-v1.hidden{display:none}
.nav-tab-v1{height:38px;padding:0 18px;border-radius:8px;border:1px solid transparent;background:transparent;color:#475467;font-weight:600;font-size:14px;line-height:38px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.nav-tab-v1:hover{background:#eef4ff;border-color:#93c5fd}
.nav-tab-v1.active{background:#eef4ff;border-color:transparent;color:#1d4ed8;box-shadow:inset 0 -2px 0 #1d4ed8}
.nav-tab-v1.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.nav-tabs-v1--fn{background:#f8fafc}
.nav-tabs-v1--fn .nav-tab-v1{font-size:15px}
.nav-tabs-v1--fn .nav-tab-v1.active{font-weight:700}
.nav-tabs-v1--sub{padding:8px 24px;background:#fff;border-bottom:1px solid #eef1f5}
.nav-tabs-v1--sub .nav-tab-v1{height:32px;line-height:32px;font-size:13px;padding:0 14px;border-radius:16px}
@media(max-width:1366px){
  .nav-tabs-v1{padding:8px 16px}
  .nav-tabs-v1--sub{padding:6px 16px}
}

/* Clinical Media Center — Platform Dashboard (Platform Completion Pack 2). Same visual language
   as the existing .daily-kpi-* tile set (border #e4e9f1, radius 12px, value #0f172a/24px, label
   #667085/13px) — reused verbatim rather than a new scale, scoped under .cm- so it never collides
   with the Sales/Report tile classes above. */
.cm-dashboard{padding:4px 0}
.cm-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.cm-kpi-tile{background:#fff;border:1px solid #e4e9f1;border-radius:12px;padding:16px;min-height:88px}
.cm-kpi-tile-value{font-size:24px;font-weight:700;color:#0f172a;line-height:1.3}
.cm-kpi-tile-label{font-size:13px;font-weight:600;color:#667085;margin-top:4px}
.cm-kpi-tile--warning .cm-kpi-tile-value{color:#b54708}
.cm-kpi-tile--danger .cm-kpi-tile-value{color:#b42318}
.cm-dashboard-section{margin-bottom:20px}
.cm-dashboard-section-title{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:10px}
.cm-issue-list{list-style:none;margin:0;padding:0;border:1px solid #e4e9f1;border-radius:12px;overflow:hidden}
.cm-issue-list-row{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid #eef1f5;font-size:13px}
.cm-issue-list-row:last-child{border-bottom:none}
.cm-issue-list-time{color:#98a2b3;white-space:nowrap}
.cm-issue-list-label{color:#344054}
.cm-quicklink-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cm-quicklink-card{text-align:left;background:#fff;border:1px solid #e4e9f1;border-radius:12px;padding:14px 16px;cursor:pointer}
.cm-quicklink-card:hover{border-color:#1d4ed8}
.cm-quicklink-title{font-size:14px;font-weight:700;color:#0f172a}
.cm-quicklink-desc{font-size:12px;color:#667085;margin-top:4px}
@media(max-width:1366px){
  .cm-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .cm-quicklink-grid{grid-template-columns:repeat(2,1fr)}
}
/* CLINICAL-MEDIA-UI-UNIFICATION-PHASE1-001: .cm-platform-table/.cm-platform-section(-header) removed
   — Platform pages now render their own .ta-page-header shell and use the single canonical
   .data-table for tabular content (see PlatformPagesRender.js / CaptureRender.js). */

/* Clinical Media — Customer Capture Platform Phase 1 */
.cm-capture-flow{padding:4px 0}
.cm-capture-header{margin-bottom:12px}
.cm-capture-back{background:none;border:none;color:#1d4ed8;font-size:13px;font-weight:600;cursor:pointer;padding:4px 0}
.cm-capture-search-input{width:100%;max-width:420px;padding:10px 12px;border:1px solid #e4e9f1;border-radius:8px;font-size:14px;margin-bottom:14px}
.cm-capture-customer-row{cursor:pointer}
.cm-capture-customer-row:hover td{background:#f8fafc}
.cm-capture-select{padding:8px 12px;border:1px solid #e4e9f1;border-radius:8px;font-size:13px;min-width:280px;margin-right:10px}
/* .cm-capture-primary-btn removed (CLINICAL-MEDIA-UI-UNIFICATION-PHASE1-001) — both call sites now
   use .clinic-btn.clinic-btn-primary, the one shared ClinicOS Button System. */
.cm-capture-section-block{margin-bottom:18px}
.cm-capture-section-title{font-size:13px;font-weight:700;color:#0f172a;margin-bottom:8px}
.cm-capture-shotitem-list{list-style:none;margin:0;padding:0;border:1px solid #e4e9f1;border-radius:12px;overflow:hidden}
.cm-capture-shotitem-list li{padding:10px 14px;border-bottom:1px solid #eef1f5;font-size:13px}
.cm-capture-shotitem-list li:last-child{border-bottom:none}
.cm-capture-shotitem-name{font-weight:600;color:#344054;margin-right:8px}
.cm-capture-shotitem-instruction{font-size:12px;color:#667085;margin-top:4px}
.cm-capture-badge{display:inline-block;font-size:11px;font-weight:600;color:#667085;background:#f1f3f5;border-radius:6px;padding:2px 8px}
.cm-capture-badge--required{color:#b54708;background:#fff4e5}
.cm-capture-badge--completed{color:#027a48;background:#ecfdf3}
.cm-capture-badge--pending{color:#667085;background:#f1f3f5}
.cm-capture-shotitem-done{background:#f8fffb}
.cm-capture-shotitem-meta{font-size:11px;color:#98a2b3;margin-top:4px}

/* Treatment Map Templates (施作模板) — CLINICAL-MEDIA-UI-UNIFICATION-PHASE1-001 rebuild.
   Header/Breadcrumb/Page Title/Toolbar now come from the shared .ta-content/.ta-page-header
   shell (see TreatmentMapTemplateRender.js); Form Layout uses .followup-rule-field; Button Style
   uses .clinic-btn everywhere; Card/Badge colors are token-based, no hardcoded hex left. Only
   .ctmt-grid/.ctmt-card/.ctmt-thumb/.ctmt-badges/.ctmt-actions/.ctmt-form/.ctmt-form-head remain —
   .ctmt-shell/.ctmt-header/.ctmt-eyebrow/.ctmt-columns/.ctmt-preview/.ctmt-region were dead or
   superseded and have been removed. */
/* TREATMENT-TEMPLATE-UI-REBUILD-001 Stage 1 — thumbnail card grid (approved UI 圖一).
   Explicit 3/2/1 column breakpoints rather than auto-fit: the approved design fixes the card
   width so every base image renders at the same scale and the grid never reflows to a 4th
   column on a wide monitor. The thumbnail box has a fixed aspect-ratio with object-fit:contain
   over a checkerboard, so a transparent PNG stays readable and NO base image is ever cropped or
   allowed to overflow its card. */
.ctmt-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 20px}
.ctmt-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:4px 0 16px;padding:12px 14px;background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md,16px)}
.ctmt-toolbar-search{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:0}
.ctmt-toolbar-search input{flex:1 1 auto;min-width:0;height:34px;padding:0 10px;border:1px solid var(--cos-border);border-radius:8px;background:var(--cos-surface);color:var(--cos-text);font-size:14px}
.ctmt-toolbar-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ctmt-toolbar-controls select{height:34px;padding:0 8px;border:1px solid var(--cos-border);border-radius:8px;background:var(--cos-surface);color:var(--cos-text);font-size:14px}
.ctmt-field-inline{font-size:13px;font-weight:600;color:var(--cos-text-subtle);white-space:nowrap}
.ctmt-toolbar-count{flex:0 0 auto;margin-left:auto;font-size:13px;color:var(--cos-text-muted)}
.ctmt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:1180px){.ctmt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .ctmt-grid{grid-template-columns:minmax(0,1fr)}
  .ctmt-toolbar-count{margin-left:0}
}
.ctmt-card{display:flex;flex-direction:column;gap:10px;background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md,16px);overflow:hidden;padding:14px;min-width:0}
.ctmt-card-badges{display:flex;flex-wrap:wrap;gap:6px}
/* Fixed 4:3 box + contain = never cropped, never overflowing. Checkerboard makes transparent
   PNGs (the common case for outline base images) legible on both light and dark surfaces. */
.ctmt-thumb{position:relative;aspect-ratio:4/3;width:100%;border-radius:10px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--cos-border);
  background-color:var(--cos-surface-muted);
  background-image:linear-gradient(45deg,rgba(148,163,184,.22) 25%,transparent 25%),linear-gradient(-45deg,rgba(148,163,184,.22) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(148,163,184,.22) 75%),linear-gradient(-45deg,transparent 75%,rgba(148,163,184,.22) 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
/* Absolutely positioned against the already-relative .ctmt-thumb so the image fills exactly the
   4:3 frame and object-fit:contain letterboxes inside it. A percentage height would otherwise
   resolve against an auto-sized grid row whose height comes from this very image — a cyclic
   dependency the browser resolves as `auto`, which let a square 1024x1024 PNG render 353x353
   inside a 355x266 frame and spill past the card. */
.ctmt-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ctmt-thumb-status{color:var(--cos-text-muted);font-size:12px;text-align:center;padding:0 8px}
.ctmt-card-body{min-width:0}
.ctmt-card-title{margin:0;font-size:16px;font-weight:700;color:var(--cos-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctmt-card-meta{margin:2px 0 0;font-size:13px;color:var(--cos-text-subtle)}
.ctmt-card-meta-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;margin:8px 0 0;font-size:13px}
.ctmt-card-meta-list>div{display:contents}
.ctmt-card-meta-list dt{color:var(--cos-text-muted)}
.ctmt-card-meta-list dd{margin:0;color:var(--cos-text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctmt-card-footer{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--cos-border)}
.ctmt-card-regions{font-size:12px;color:var(--cos-text-muted);white-space:nowrap}
.ctmt-more{position:relative;margin-left:auto}
.ctmt-more-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;min-width:132px;display:flex;flex-direction:column;padding:4px;background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:10px;box-shadow:0 10px 26px rgba(15,23,42,.16)}
.ctmt-more-menu button{appearance:none;background:transparent;border:0;text-align:left;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--cos-text);cursor:pointer}
.ctmt-more-menu button:hover,.ctmt-more-menu button:focus-visible{background:var(--cos-surface-muted)}
.ctmt-more-menu button.is-danger{color:var(--cos-danger)}
.ctmt-card-new{align-items:center;justify-content:center;gap:6px;border-style:dashed;background:transparent;cursor:pointer;min-height:280px;color:var(--cos-text-subtle);text-align:center}
.ctmt-card-new:hover,.ctmt-card-new:focus-visible{border-color:var(--cos-primary,#2563eb);color:var(--cos-text)}
.ctmt-card-new-plus{font-size:26px;line-height:1;color:var(--cos-primary,#2563eb)}
.ctmt-card-new-title{font-size:15px;font-weight:700;color:var(--cos-text)}
.ctmt-card-new-desc{font-size:12px}
/* TREATMENT-TEMPLATE-UI-REBUILD-001 Stage 2 — 新增精靈（approved UI 圖二）. */
.ctmt-wizard{max-width:980px}
.ctmt-wizard-title{margin:4px 0 2px;font-size:20px;font-weight:700;color:var(--cos-text)}
.ctmt-wizard-subtitle{margin:0 0 16px;font-size:13px;color:var(--cos-text-muted)}
.ctmt-stepper{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;list-style:none;margin:0 0 18px;padding:0}
.ctmt-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cos-text-muted)}
.ctmt-step-no{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--cos-surface-muted);color:var(--cos-text-muted);font-size:12px;font-weight:700;border:1px solid var(--cos-border)}
.ctmt-step.is-active{color:var(--cos-text);font-weight:700}
.ctmt-step.is-active .ctmt-step-no{background:var(--cos-primary,#2563eb);color:#fff;border-color:transparent}
.ctmt-step.is-done .ctmt-step-no{background:var(--cos-success,#16a34a);color:#fff;border-color:transparent}
.ctmt-panel{border:1px solid var(--cos-border);border-radius:12px;padding:16px;margin-bottom:16px;background:var(--cos-surface)}
.ctmt-panel-title{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--cos-text)}
.ctmt-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
@media (max-width:720px){.ctmt-grid-2{grid-template-columns:minmax(0,1fr)}}
.ctmt-required{color:var(--cos-danger)}
.ctmt-help{display:block;margin-top:4px;font-size:12px;color:var(--cos-text-muted);font-weight:400}
.ctmt-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ctmt-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px;border:1px solid var(--cos-border);border-radius:10px;background:var(--cos-surface-muted)}
.ctmt-upload.is-empty{padding:0;border:0;background:transparent}
.ctmt-upload-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:110px;padding:18px;border:1.5px dashed var(--cos-border);border-radius:10px;cursor:pointer;font-size:13px;color:var(--cos-text-subtle);text-align:center}
.ctmt-upload-drop:hover{border-color:var(--cos-primary,#2563eb)}
.ctmt-upload-plus{font-size:22px;color:var(--cos-primary,#2563eb)}
.ctmt-upload-hint{font-size:12px;color:var(--cos-text-muted)}
.ctmt-upload-thumb{flex:0 0 auto;width:104px;height:104px;border-radius:8px;overflow:hidden;border:1px solid var(--cos-border);background:#fff;display:grid;place-items:center}
.ctmt-upload-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.ctmt-upload-info{flex:1 1 180px;min-width:0}
.ctmt-upload-name{font-size:14px;font-weight:600;color:var(--cos-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctmt-upload-meta{font-size:12px;color:var(--cos-text-muted);margin-top:2px}
.ctmt-upload-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ctmt-upload-verdict{margin:8px 0 0;font-size:12px}
.ctmt-upload-verdict.is-ok{color:var(--cos-success,#16a34a)}
.ctmt-upload-verdict.is-error{color:var(--cos-danger)}
/* In create mode the wizard's own 建立模板並儲存區域 is the single save path, so the Region
   Editor's own 儲存區域版本 control (and its "請先建立模板與版本 1" hint, which is correct for the
   edit-mode editor but meaningless here) is hidden — scoped to .ctmt-wizard only, so the editor
   keeps that control untouched everywhere else. The editor's own logic is not modified. */
.ctmt-wizard .ctmre-save-actions,
.ctmt-wizard .ctmre-save-hint{display:none}
.ctmt-wizard-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ctmt-blocked-reason{margin-right:auto;font-size:12px;color:var(--cos-danger)}
.ctmt-done{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ctmt-done-thumb{flex:0 0 auto;width:132px;height:132px;border-radius:10px;overflow:hidden;border:1px solid var(--cos-border);background:#fff;display:grid;place-items:center}
.ctmt-done-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.ctmt-done-info{flex:1 1 220px;min-width:0}
.ctmt-done-badge{display:inline-block;margin-bottom:6px;padding:2px 10px;border-radius:999px;background:var(--cos-success,#16a34a);color:#fff;font-size:12px;font-weight:700}
.ctmt-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 20px}
.ctmt-empty b{font-size:15px;color:var(--cos-text)}
.ctmt-empty p{margin:0;font-size:13px;color:var(--cos-text-muted)}
.ctmt-form{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md,16px);padding:20px}
.ctmt-form-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:16px}
.ctmt-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.ctmt-toggle-field{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--cos-text);font-weight:600}
.ctmt-save-choices{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#ctmtMessage.is-error{color:var(--cos-danger)}
#ctmtMessage.is-success{color:var(--cos-success)}
.cmtm-template-image{pointer-events:none}

/* Treatment Map Region Editor — Toolbar/Form/Empty-State unified onto the shared Button/Field
   system (CLINICAL-MEDIA-UI-UNIFICATION-PHASE1-001); the SVG drawing-canvas colors below
   (.ctmre-polygon/.ctmre-vertex/#ctmreCanvas/.ctmre-canvas-wrap/.ctmre-candidates) are the
   editor's own drawing-tool palette and keep their literal values.

   TREATMENT-MAP-REGION-EDITOR-PHASE2A-FINAL-INTEGRATION-001 layers the Phase 2A layout fixes
   (0deb3c8 workflow strip, c4d2120 overflow + region-name readability) on top of the Unification
   tokens instead of replacing them: the editor now sizes from its own container (the Clinical
   Media content pane is ~350px narrower than the viewport, so the old viewport media queries
   fired far too late and the side columns were clipped by the card's overflow), every track is
   minmax(0,...) so columns shrink instead of overflowing, and the two <aside> panels reset the
   leaked global `aside{width:220px;position:sticky;height:100vh;overflow:auto;display:flex}`
   rule that was pinning them to a fixed 220px regardless of their grid track. .ctmre-region-row
   and the candidate menu are <button>s, so they need an explicit text colour — the global
   `button{background:#111827;color:white}` left region names white-on-white. */
/* overflow:clip (not hidden) is load-bearing: `hidden` would make .ctmre a scroll container and
   break the sticky .ctmre-workflow strip; `clip` clips the rounded corners without doing so. */
.ctmre{border:1px solid var(--cos-border);border-radius:14px;background:var(--cos-surface);overflow:clip;container-type:inline-size}
.ctmre-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--cos-border);background:var(--cos-surface-muted)}
.ctmre-toolbar-actions,.ctmre-property-actions,.ctmre-json-actions,.ctmre-save-actions{display:flex;gap:8px;flex-wrap:wrap}
.ctmre-workflow{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin:0;padding:12px 14px;list-style:none;border-bottom:1px solid var(--cos-border);background:var(--cos-surface-muted);box-shadow:0 2px 6px rgba(15,23,42,.08)}
.ctmre-workflow li{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--cos-border);border-radius:10px;background:var(--cos-surface);min-width:0}
.ctmre-workflow strong{color:var(--cos-text)}
.ctmre-workflow span{color:var(--cos-text-muted);font-size:13px;line-height:1.45}
.ctmre-status{min-height:24px;padding:4px 14px}
.ctmre-status.is-error,.ctmre-validation .is-error{color:var(--cos-danger)}
.ctmre-status.is-success,.ctmre-validation .is-success{color:var(--cos-success)}
.ctmre-validation .is-warning{color:#92400e}
.ctmre-layout{display:grid;grid-template-columns:minmax(0,1fr);min-height:600px}
.ctmre-layout>*{min-width:0}
.ctmre-regions,.ctmre-properties{width:auto;height:auto;min-height:0;position:static;display:block;gap:0;color:inherit;overflow:visible;padding:12px;background:var(--cos-surface-muted);border-top:1px solid var(--cos-border)}
.ctmre-add-fields{display:grid;gap:6px;margin-bottom:10px;min-width:0}
.ctmre-add-fields input{height:38px;padding:0 10px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm,8px);font-size:14px;box-sizing:border-box;width:100%}
.ctmre input:not([type=checkbox]),.ctmre textarea,.ctmre select{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.ctmre-properties .followup-rule-field{margin-bottom:10px;min-width:0}
.ctmre-region-row{display:flex;width:100%;min-width:0;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;text-align:left;margin:5px 0;border:1px solid #e2e8f0;background:#fff;color:#0f172a}.ctmre-region-row span,.ctmre-region-row small{min-width:0;overflow-wrap:anywhere}.ctmre-region-row small{color:#64748b}.ctmre-region-row.is-selected{border-color:#2563eb;background:#eff6ff}.ctmre-region-row.is-inactive{opacity:.55}
.ctmre-canvas-wrap{position:relative;display:grid;place-items:center;min-width:0;padding:16px;background:#eef2f7}#ctmreCanvas{display:block;width:100%;height:auto;max-width:100%;max-height:72vh;background:white;touch-action:none;box-shadow:0 2px 14px rgba(15,23,42,.12)}
.ctmre-polygon{fill:rgba(37,99,235,.14);stroke:#2563eb;stroke-width:.55;vector-effect:non-scaling-stroke;cursor:pointer}.ctmre-polygon.is-selected{fill:rgba(234,88,12,.22);stroke:#ea580c;stroke-width:1}.ctmre-polygon.is-inactive{opacity:.35;stroke-dasharray:2 1}
.ctmre-vertex-hit{fill:transparent;stroke:none;cursor:grab;pointer-events:all}.ctmre-vertex{fill:#fff;stroke:#ea580c;stroke-width:.8;vector-effect:non-scaling-stroke;pointer-events:none}.ctmre-vertex.is-selected{fill:#ea580c;stroke:#fff}
.ctmre-candidates{position:absolute;z-index:3;display:grid;min-width:180px;padding:6px;background:#fff;border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,.18)}.ctmre-candidates[hidden]{display:none}.ctmre-candidates button{text-align:left;border:0;background:transparent;color:#0f172a}.ctmre-candidates button:focus,.ctmre-candidates button:hover{background:#eff6ff}
.ctmre-properties pre{max-width:100%;max-height:260px;overflow:auto;padding:8px;background:#0f172a;color:#e2e8f0;border-radius:8px;font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}.ctmre-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px}.ctmre-check input{width:auto!important}.ctmre-save-actions{margin-top:12px}.ctmre-validation p{margin:5px 0;font-size:13px;overflow-wrap:anywhere}
/* TREATMENT-MAP-REGION-EDITOR-SAVE-DISABLED-FIX-001: the reason a disabled 儲存區域版本 is unavailable,
   shown directly under the button so it is never an unexplained grey control (task §四). */
.ctmre-save-hint{margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--cos-text-muted);overflow-wrap:anywhere}
.ctmre-save-hint[hidden]{display:none}
/* Two columns once the editor itself is wide enough (list + canvas, properties full-width below). */
@container (min-width:640px){.ctmre-layout{grid-template-columns:minmax(0,200px) minmax(0,1fr)}.ctmre-regions{border-top:0;border-right:1px solid var(--cos-border)}.ctmre-properties{grid-column:1/-1}}
/* Three columns only when all of them genuinely fit: 216 + 272 side + >=380 for the image. */
@container (min-width:900px){.ctmre-layout{grid-template-columns:minmax(0,216px) minmax(0,1fr) minmax(0,272px)}.ctmre-properties{grid-column:auto;border-top:0;border-left:1px solid var(--cos-border)}}

/* ===== Clinical Media Center — 拍攝模板管理 (Capture Template Management)
   CLINICAL-MEDIA-CAPTURE-TEMPLATE-MANAGEMENT-UI-REBUILD-001.
   Replaces the 拍攝設定 page's old .ta-layout shell (fixed-height grid + narrow in-page
   左側狀態篩選欄 + its own nested scroll container) with a single flowing workspace:
   Page Header -> 摘要卡 -> 工具列 -> 模板表格 -> 右側詳細資訊. No fixed height anywhere, so the
   page contributes exactly ONE vertical scrollbar (the app shell's own) — the only overflow
   container left is the table's horizontal one.
   Every value below reuses an existing --cos-* Design Token or a hex already present in this
   file; no new Design Token, no new Button/Badge component (.clinic-btn*/.badge-v1* reused). */
.cmt-page{display:flex;flex-direction:column;gap:16px;min-width:0}
.cmt-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cmt-header-actions{display:flex;align-items:center;gap:8px;flex:none}

/* 摘要卡 — 最多兩張（已同步裝置／最新發布版本）。目前兩者皆無真實資料來源，
   故一律顯示「尚無資料」＋來源說明，絕不填入虛構數值。 */
.cmt-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cmt-summary-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md)}
.cmt-summary-icon{width:48px;height:48px;flex:none;border-radius:var(--cos-radius-md);display:grid;place-items:center;background:var(--cos-accent-soft);color:var(--cos-accent-hover)}
.cmt-summary-icon .cml-icon{width:24px;height:24px}
.cmt-summary-text{min-width:0}
.cmt-summary-label{font-size:var(--cos-fs-label);font-weight:var(--cos-fw-label);color:var(--cos-text-subtle)}
.cmt-summary-value{font-size:26px;font-weight:700;color:var(--cos-text);line-height:1.25;margin-top:2px}
.cmt-summary-value.is-empty{font-size:18px;color:var(--cos-text-muted);font-weight:600}
.cmt-summary-hint{font-size:var(--cos-fs-small);color:var(--cos-text-muted);margin-top:4px}

/* 工具列 — 單一列（可換行），沒有內嵌捲軸、沒有第二層頁籤 */
.cmt-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:12px 14px;background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md)}
.cmt-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.cmt-field>span{font-size:var(--cos-fs-small);color:var(--cos-text-subtle);font-weight:600}
.cmt-field-search{flex:1 1 260px}
.cmt-search-wrap{position:relative;display:flex}
.cmt-search-wrap input{width:100%;height:38px;padding:0 34px 0 12px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);font-size:14px;box-sizing:border-box;color:var(--cos-text);background:var(--cos-surface)}
.cmt-search-wrap .cml-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--cos-text-muted);pointer-events:none}
.cmt-toolbar select{height:38px;padding:0 10px;border:1px solid var(--cos-border);border-radius:var(--cos-radius-sm);font-size:14px;box-sizing:border-box;color:var(--cos-text);background:var(--cos-surface)}
.cmt-toolbar .clinic-btn{min-height:38px}

/* 主工作區：模板表格 ＋ 右側詳細資訊 */
.cmt-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;min-width:0}
/* 只有選取模板時才撐出右側詳細資訊欄，否則列表佔滿寬度（不留空白欄位） */
.cmt-body.has-detail{grid-template-columns:minmax(0,1fr) minmax(320px,360px)}
.cmt-list-panel,.cmt-detail-panel{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);min-width:0;overflow:hidden}
.cmt-table-scroll{overflow-x:auto;overflow-y:visible}
.cmt-table{width:100%;border-collapse:collapse;min-width:920px}
.cmt-table thead th{background:var(--cos-surface-muted);color:var(--cos-text);font-size:13px;font-weight:600;text-align:left;padding:11px 12px;border-bottom:1px solid var(--cos-border);white-space:nowrap}
.cmt-table tbody td{padding:10px 12px;font-size:14px;color:var(--cos-text);border-bottom:1px solid var(--cos-border);vertical-align:middle}
.cmt-table tbody tr.cmt-row{cursor:pointer}
.cmt-table tbody tr.cmt-row:hover{background:var(--cos-surface-muted)}
.cmt-table tbody tr.cmt-row.is-selected{background:var(--cos-accent-soft)}
.cmt-col-nowrap{white-space:nowrap}
.cmt-col-actions{white-space:nowrap;text-align:right}
.cmt-cell-muted{color:var(--cos-text-muted)}

/* 模板名稱格：中性 Placeholder 縮圖（系統沒有任何模板縮圖欄位，絕不放示意人像） */
.cmt-name-cell{display:flex;align-items:center;gap:10px;min-width:0}
.cmt-thumb{width:38px;height:38px;flex:none;border-radius:var(--cos-radius-sm);border:1px solid var(--cos-border);background:var(--cos-surface-muted);display:grid;place-items:center;color:var(--cos-text-muted)}
.cmt-name-text{min-width:0}
.cmt-name-title{font-weight:600;color:var(--cos-text);overflow-wrap:anywhere}
.cmt-name-code{font-size:12px;color:var(--cos-text-muted);margin-top:1px}
.cmt-treatments{display:flex;flex-wrap:wrap;gap:4px}

.cmt-list-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--cos-border);font-size:13px;color:var(--cos-text-muted)}

/* 正式錯誤呈現（不只依賴右下角 Toast） */
.cmt-error{margin:0;padding:16px;border:1px solid var(--cos-danger-border);background:var(--cos-danger-bg);border-radius:var(--cos-radius-md);color:var(--cos-danger);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cmt-error-title{font-weight:700}
.cmt-error-detail{font-size:13px;color:#7f1d1d;overflow-wrap:anywhere}

/* 右側詳細資訊 */
.cmt-detail-header{padding:14px 16px;border-bottom:1px solid var(--cos-border)}
.cmt-detail-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cmt-detail-title{font-size:var(--cos-fs-card-title);font-weight:700;color:var(--cos-text);overflow-wrap:anywhere}
.cmt-detail-meta{font-size:13px;color:var(--cos-text-muted);margin-top:6px;line-height:1.7}
.cmt-detail-tabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--cos-border)}
.cmt-detail-tab{border:none;background:none;padding:10px 6px;margin-bottom:-1px;font-size:14px;font-weight:600;color:var(--cos-text-subtle);cursor:pointer;border-bottom:2px solid transparent}
.cmt-detail-tab.is-active{color:var(--cos-accent-hover);border-bottom-color:var(--cos-accent)}
.cmt-detail-body{padding:14px 16px}
.cmt-kv{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px 12px;font-size:14px}
.cmt-kv dt{color:var(--cos-text-subtle);font-weight:600}
.cmt-kv dd{margin:0;color:var(--cos-text);overflow-wrap:anywhere}
.cmt-shot-section{margin-bottom:12px}
.cmt-shot-section-name{font-weight:600;font-size:14px;color:var(--cos-text);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.cmt-shot-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--cos-border);font-size:13px}
.cmt-shot-item-name{flex:1;min-width:0;overflow-wrap:anywhere}
.cmt-shot-index{width:20px;flex:none;color:var(--cos-text-muted);font-size:12px;text-align:right}
.cmt-detail-footer{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--cos-border)}
.cmt-detail-footer .clinic-btn{min-height:38px;flex:1 1 auto}

/* 1280 以下：詳細資訊改為右側 Drawer（列表拿回整個寬度，仍不產生第二個頁面捲軸） */
@media(max-width:1279px){
  .cmt-body,.cmt-body.has-detail{grid-template-columns:minmax(0,1fr)}
  .cmt-detail-panel{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:9500;border-radius:0;border:none;border-left:1px solid var(--cos-border);box-shadow:var(--cos-shadow-lift);display:flex;flex-direction:column;overflow-y:auto}
  .cmt-detail-panel .cmt-detail-body{flex:1 1 auto}
  .cmt-drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:9400}
}
@media(min-width:1280px){.cmt-drawer-backdrop,.cmt-drawer-close{display:none}}
@media(max-width:1023px){.cmt-summary{grid-template-columns:minmax(0,1fr)}}

/* ===== 付款方式設定 V4（系統設定 → 付款方式設定）=====
   純視覺樣式，全部限定在 #settingPanelPayments 底下，不影響其他設定頁。 */
#settingPanelPayments .pay-list-card-v4{margin:0 0 12px}
#settingPanelPayments .pay-table-v4{width:100%;border-collapse:collapse;table-layout:auto}
#settingPanelPayments .pay-table-v4 th,
#settingPanelPayments .pay-table-v4 td{vertical-align:middle}
#settingPanelPayments .pay-col-center-v4,
#settingPanelPayments .pay-table-v4 td.pay-col-center-v4{text-align:center}
#settingPanelPayments .pay-col-sort-v4{width:64px;text-align:center}
#settingPanelPayments .pay-table-v4 td.pay-col-sort-v4{text-align:center;color:var(--cos-text-subtle,#667085)}
#settingPanelPayments .pay-col-actions-v4{width:132px;text-align:center}
#settingPanelPayments .pay-table-v4 td.pay-col-actions-v4{text-align:center;white-space:nowrap}
#settingPanelPayments .pay-yes-v4{color:var(--cos-success,#0f9d58);font-weight:600}
#settingPanelPayments .pay-no-v4{color:var(--cos-text-muted,#98a2b3)}
#settingPanelPayments .pay-muted-v4{color:var(--cos-text-muted,#98a2b3)}
#settingPanelPayments .pay-row-inactive-v4 td:not(.pay-col-actions-v4){opacity:.62}
#settingPanelPayments .pay-list-foot-v4{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 4px 0;border-top:1px solid var(--cos-border,#e5e7eb);margin-top:12px}
#settingPanelPayments .pay-hint-v4{display:flex;align-items:center;gap:8px;margin:0 0 20px;padding:12px 16px;border:1px solid var(--cos-accent-soft-border,#cfe3fb);background:var(--cos-accent-soft,#eef6fe);border-radius:var(--cos-radius-md,12px);color:var(--cos-text,#1f2430)}
#settingPanelPayments .pay-bottom-grid-v4{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:20px;align-items:start}
#settingPanelPayments .pay-bottom-grid-v4 .cos-card{margin:0}
#settingPanelPayments .pay-form-card-v4 .cos-card__body{display:flex;flex-direction:column;gap:18px}
#settingPanelPayments .pay-form-card-v4 .cos-field__control{min-width:0;width:100%}
#settingPanelPayments .pay-form-card-v4 .cos-card__footer .cos-btn{min-width:0;flex:1 1 0}
/* 全域 label{flex-direction:column} 會把「必填 *」與 checkbox 文字擠成上下兩行，這裡改回橫排 */
#settingPanelPayments .pay-form-card-v4 .cos-field__label{flex-direction:row;align-items:center;gap:4px}
#settingPanelPayments .pay-required-v4{color:var(--cos-danger,#d92d20)}
#settingPanelPayments .pay-check-field-v4{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;cursor:pointer;font-weight:600;color:var(--cos-text,#1f2430)}
#settingPanelPayments .pay-check-field-v4 input{width:18px;height:18px;flex:none;accent-color:var(--clinic-primary,#1d4ed8);cursor:pointer}
#settingPanelPayments .pay-ref-field-v4 .note{margin:0}
#settingPanelPayments .pay-preview-grid-v4{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
#settingPanelPayments .pay-preview-item-v4{border:1px solid var(--cos-border,#e5e7eb);border-radius:var(--cos-radius-md,12px);overflow:hidden;background:var(--cos-surface,#fff)}
#settingPanelPayments .pay-preview-head-v4{padding:12px 14px;border-bottom:1px solid var(--cos-border,#e5e7eb);font-weight:600;color:var(--cos-text,#1f2430)}
#settingPanelPayments .pay-preview-head-v4 .note{display:block;margin-top:2px;font-size:12px;font-weight:400}
#settingPanelPayments .pay-preview-body-v4{padding:14px;display:flex;flex-direction:column;gap:6px}
#settingPanelPayments .pay-preview-label-v4{font-size:13px;font-weight:600;color:var(--cos-text,#1f2430)}
#settingPanelPayments .pay-preview-input-v4{height:40px;border:1px solid var(--cos-accent-soft-border,#cfe3fb);border-radius:8px;background:var(--cos-surface-muted,#f7f8fa);display:flex;align-items:center;padding:0 12px;color:var(--cos-text-muted,#98a2b3);font-size:13px}
#settingPanelPayments .pay-preview-note-v4{font-size:12px;color:var(--cos-text-subtle,#667085)}
#settingPanelPayments .pay-preview-empty-v4{padding:24px 14px;text-align:center;color:var(--cos-text-muted,#98a2b3);font-size:13px;background:var(--cos-surface-muted,#f7f8fa)}
@media(max-width:1279px){
  #settingPanelPayments .pay-bottom-grid-v4{grid-template-columns:minmax(0,1fr)}
}

/* ===== Customer Picker Drawer（唯一客戶搜尋入口）=========================================
   銷售／耗療／預約主畫面移除搜尋 label／input／結果區塊後，原本 35fr/65fr 的兩欄
   (grid-template-areas:"search confirm") 只剩右欄，這裡把它收成單欄，讓「已選客戶 Card」
   佔滿整列。特異度 0,2,0 且位於 .usage-wf-customer-grid-v1.sales-customer-grid-v3 之後，
   因此耗療頁的 44/56 覆寫也一併被收斂。既有兩欄規則本身完全未動（其他頁面不受影響）。 */
.sales-customer-grid-v3.cpk-single-col-v1{grid-template-columns:minmax(0,1fr);grid-template-areas:"confirm"}
.cpk-selected-head-v1{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cpk-open-btn-v1{white-space:nowrap}
.cpk-drawer-search-v1{position:relative;display:flex;align-items:center}
.cpk-drawer-search-v1 .cpk-drawer-search-icon-v1{position:absolute;left:12px;font-size:14px;pointer-events:none;opacity:.7}
.cpk-drawer-search-v1 input{width:100%;padding:10px 12px 10px 34px;border:1px solid var(--cos-border,#d0d5dd);border-radius:10px;font-size:14px}
.cpk-drawer-hint-v1{margin:8px 0 12px}
#cpkPickerV1{max-height:none}
.adj-customer-pick-row-v1{margin:6px 0 10px}

/* CLINICOS-DAILY-REPORT-VISITOR-COUNT —— 來客數統計表。版面沿用既有 .cos-toolbar／
   .report-panel／.cos-table，此處只補統計方式與摘要列的密度，不新增色票。 */
.visitor-toolbar-v1{flex-wrap:wrap;gap:12px}
.visitor-mode-v1{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.visitor-mode-v1 label{display:inline-flex;align-items:center;gap:4px}
.visitor-msg-v1{color:#d92d20;font-weight:600}
.visitor-meta-v1{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0 0 12px;color:#475467}
.visitor-meta-v1 strong{color:#1f2430}
/* VISITOR-COUNT-NEW-RETURNING-004 —— 來客數統計表的三個數字欄（新客／舊客／來客數）右對齊
   並使用等寬數字。原本 body 的 td.right 沒有生效：全域沒有 .right 規則，而 .cos-table th
   (0,2,0) 又蓋過 .right (0,1,0)。這裡以欄位序在本報表內限定，不動共用的 reportTable()，
   也不影響其它報表。第一欄（日期／合計標籤）維持靠左。 */
.visitor-count-table-v1 .cos-table th:nth-child(n+2),
.visitor-count-table-v1 .cos-table td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}

/* ---- CLINICOS-V4-CUSTOMER-CARE-HISTORY-DRAWER —— 客戶中心 ＞ 客情：主畫面歷史清單 ＋ 新增 Drawer.
   沿用既有色票（#101828 文字／#667085 次要／#eef1f5 分隔線／#1d4ed8 重點）與既有的
   .pdd-overlay-v270/.pdd-drawer-v270 Drawer 外殼，不另建第二套 Design System。 ---- */
.crm-history-panel-v1{display:flex;flex-direction:column;gap:14px;min-width:0}
.crm-history-head-v1{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.crm-history-head-text-v1 h4{margin:0;font-size:15px;font-weight:700;color:#101828}
.crm-history-head-desc-v1{margin:4px 0 0;font-size:12.5px;color:#667085;line-height:1.5}
.crm-history-filters-v1{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crm-history-filters-v1 input,.crm-history-filters-v1 select{height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#101828;font-size:13px;min-width:0}
.crm-history-search-v1{flex:1 1 200px}
.crm-history-filters-v1 input:focus,.crm-history-filters-v1 select:focus{outline:none;border-color:#bfdbfe;box-shadow:0 0 0 3px rgba(29,78,216,.10)}
.crm-history-range-sep-v1{color:#98a2b3;font-size:12px}
.crm-history-count-v1{font-size:12.5px;color:#667085;padding:2px 0 8px;border-bottom:1px solid #eef1f5}
.crm-history-items-v1{display:flex;flex-direction:column}
.crm-history-item-v1{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 2px;border-bottom:1px solid #eef1f5}
.crm-history-item-v1:hover{background:#fafbfc}
.crm-history-item-main-v1{min-width:0;flex:1 1 auto}
.crm-history-item-head-v1{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:5px}
.crm-history-date-v1{font-size:13px;font-weight:700;color:#101828}
.crm-history-time-v1{font-size:12px;color:#667085}
.crm-history-method-v1{font-size:11.5px;color:#1d4ed8;background:#eef4ff;border:1px solid #dbe7ff;border-radius:999px;padding:1px 9px}
.crm-history-recorder-v1{font-size:12px;color:#667085}
.crm-history-voided-v1{font-size:11.5px;color:#b42318;background:#fef3f2;border:1px solid #fecdca;border-radius:999px;padding:1px 9px}
.crm-history-summary-v1{font-size:13px;color:#475467;line-height:1.6;word-break:break-word}
.crm-history-item-actions-v1{flex:0 0 auto}
.crm-history-item-v1.is-voided .crm-history-date-v1,.crm-history-item-v1.is-voided .crm-history-summary-v1{color:#98a2b3}
.crm-history-empty-v1{display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px 16px;text-align:center}
.crm-history-empty-title-v1{font-size:14px;font-weight:600;color:#344054}
.crm-history-empty-hint-v1{font-size:12.5px;color:#667085;line-height:1.6;max-width:340px;margin-bottom:6px}
/* Drawer：固定寬度、Header 固定，表單區自己捲動，欄位一個都不因為空間而拿掉。 */
.crm-add-drawer-v1{width:min(560px,calc(100vw - 32px))}
.crm-add-drawer-body-v1{overflow-y:auto;padding:16px 18px 24px}
.crm-add-drawer-body-v1 .crm-workspace{display:flex;flex-direction:column;gap:12px}
.crm-add-drawer-body-v1 .crm-col-head{display:none}

/* ---- CLINICOS-V4-CUSTOMER-CENTER-KPI-COMPACT-ROW-001 —— 客戶中心 ＞ 客戶摘要 KPI。
   純 CSS，附加在檔尾覆寫，不改上方任何既有規則、不動 customerCenterKpiCardHtmlV1 的 HTML、
   不動 renderCustomerCenterSummaryV1 的資料與事件。

   問題根因：上方 #customerCenterSummaryBody 的 grid-template-columns 寫死 repeat(5,...)，
   但摘要現在有 6 個 KPI，第 6 個（會員等級）必然被擠到第二列；再加上卡片 min-height:110px
   與 24px 數值，整區垂直高度過大。

   作法：6 個 KPI 改為「一個共用容器 ＋ 6 個 Cell」——容器負責邊框與圓角，Cell 只用 1px
   分隔線區隔，因此不再是六張各自浮動的厚卡。資訊層級改為 名稱(小/次要) → 數值(最清楚但非
   Dashboard 巨型) → 補充(更小/低對比)，六格視覺權重一致，「累積消費」不因數字長就變大。

   一律限定在 #customerCenterSummaryBody.cos-kpi-row 之下：未選客戶時 renderer 會移除
   .cos-kpi-row，空狀態因此不會被套上容器外框。 ---- */
#customerCenterSummaryBody.cos-kpi-row{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
/* Cell：拿掉個別卡片的外框／陰影／圓角，只留一條分隔線。
   display:grid 是必要的——共用的 .cos-kpi 會把卡片設成 flex column，icon 因此自己佔一整行，
   等於白白多出一列高度，也不是原本設計的「icon 與名稱同一行」。這裡把上方既有的
   grid-areas（icon+title 同列 / value / sub）明確重新宣告回來，欄位順序與 DOM 完全不變。 */
#customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-card{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"icon title" "value value" "sub sub";align-content:start;
  background:transparent;border:0;border-right:1px solid #eef1f5;border-radius:0;box-shadow:none;
  padding:12px 14px;min-height:0;row-gap:2px;column-gap:8px;
}
#customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-card:last-child{border-right:0}
/* Icon 縮小，不再是大色塊容器。 */
#customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-icon{grid-area:icon;align-self:start;width:22px;height:22px;border-radius:6px;margin:0}
#customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-icon svg{width:13px;height:13px}
/* 名稱：次要。行高與 icon 對齊，icon 不會把名稱擠到下一行（沿用既有 grid-areas）。 */
#customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-title{line-height:22px;font-size:11.5px;font-weight:600;color:#667085}
/* 數值：最清楚，但不是 Dashboard 巨型數字；六格一致。 */
#customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-value{margin-top:1px;font-size:17px;font-weight:700;line-height:1.25;color:#101828}
/* 補充資訊：更小、更低對比，但完整保留。 */
#customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-sub{font-size:11px;line-height:1.35;color:#98a2b3}
/* Responsive：桌機一律 6 欄，不因一般桌機寬度換行；minmax(0,1fr) 保證不會撐出水平捲軸。
   只有真正窄的 viewport 才降欄，並在換行時把分隔線補回列與列之間。 */
@media(max-width:1099px){
  #customerCenterSummaryBody.cos-kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  #customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-card:nth-child(3n){border-right:0}
  #customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-card:nth-child(-n+3){border-bottom:1px solid #eef1f5}
}
@media(max-width:719px){
  #customerCenterSummaryBody.cos-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  #customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-card{border-right:1px solid #eef1f5;border-bottom:1px solid #eef1f5}
  #customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-card:nth-child(2n){border-right:0}
  #customerCenterSummaryBody.cos-kpi-row .customer-center-kpi-card:nth-last-child(-n+2){border-bottom:0}
}

/* ---- CLINICOS-V4-SALES-USAGE-KPI-COMPACT-ROW-001 —— 銷售單總覽／銷售單查詢／
   耗療單總覽／耗療單查詢 四頁的 KPI 區塊改為 Single-row Compact KPI Bar。

   純 CSS，附加在檔尾覆寫，不改上方任何既有規則、不動 index.html 的 KPI markup、
   不動任何 renderer。四頁的容器本來就共用兩個 class（.sales-overview-kpi-grid-v22 用於
   兩張總覽、.sales-query-kpi-grid-v22 用於兩張查詢），因此這裡只針對這兩個 class 收斂，
   沒有為了共用而重構任何 module，也沒有第二套 Design System。

   問題：五張各自帶邊框＋陰影＋12px 圓角的卡片，配上 40×40 的 icon 色塊、21px 數值、
   上下各 14px margin，整區把查詢條件與明細表往下推。

   作法：容器自己變成一個外框，五個 Cell 之間只留 1px 分隔線——不再是五張浮動卡片。
   資訊層級改為 icon(小) → 名稱(11.5px 次要) → 數值(17px 最清楚但非 Dashboard 巨型)
   → 自訂區間 badge(10.5px 低對比)，五格視覺權重一致。

   數值一律 white-space:nowrap + ellipsis（沿用上方既有宣告），金額不會換行、不裁字。 ---- */
#salesPanelOverview .sales-overview-kpi-grid-v22,
#usagePanelOverview .sales-overview-kpi-grid-v22,
#salesPanelQuery .sales-query-kpi-grid-v22,
#usagePanelQuery .sales-query-kpi-grid-v22{
  grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:10px 0 12px;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
/* Cell：拿掉個別卡片的外框／陰影／圓角，只留一條分隔線 */
#salesPanelOverview .sales-overview-kpi-card-v22,
#usagePanelOverview .sales-overview-kpi-card-v22,
#salesPanelQuery .sales-query-kpi-card-v22,
#usagePanelQuery .sales-query-kpi-card-v22{
  /* flex-direction 必須明講：共用的 .cos-kpi（cos-components.css）把卡片設成
     column，上方 722 行的頁面規則只寫了 display:flex 沒寫方向，於是 icon 會自己
     佔一整列，白白多出約 26px，也不是原設計的「icon 與內容同列」。 */
  display:flex;flex-direction:row;align-items:center;
  background:transparent;border:0;border-right:1px solid #eef1f5;border-radius:0;box-shadow:none;
  padding:20px 14px;gap:10px;min-width:0;
}
#salesPanelOverview .sales-overview-kpi-card-v22:last-child,
#usagePanelOverview .sales-overview-kpi-card-v22:last-child,
#salesPanelQuery .sales-query-kpi-card-v22:last-child,
#usagePanelQuery .sales-query-kpi-card-v22:last-child{border-right:0}
/* Icon：縮小，不再是大面積色塊 */
#salesPanelOverview .sales-overview-kpi-icon-v22,
#usagePanelOverview .sales-overview-kpi-icon-v22,
#salesPanelQuery .sales-query-kpi-icon-v22,
#usagePanelQuery .sales-query-kpi-icon-v22{
  width:26px;height:26px;border-radius:7px;font-size:13px;background:#f2f6ff;
}
/* 名稱：次要層級；自訂區間 badge 保留但更低調 */
#salesPanelOverview .sales-overview-kpi-label-v22,
#usagePanelOverview .sales-overview-kpi-label-v22,
#salesPanelQuery .sales-query-kpi-label-v22,
#usagePanelQuery .sales-query-kpi-label-v22{
  font-size:11.5px;font-weight:600;color:#667085;gap:5px;
}
#salesPanelOverview .sales-overview-kpi-period-v22,
#usagePanelOverview .sales-overview-kpi-period-v22{
  font-size:10.5px;font-weight:600;padding:0 6px;line-height:16px;
}
/* 數值：最清楚，但不是 Dashboard 巨型字 */
#salesPanelOverview .sales-overview-kpi-value-v22,
#usagePanelOverview .sales-overview-kpi-value-v22,
#salesPanelQuery .sales-query-kpi-value-v22,
#usagePanelQuery .sales-query-kpi-value-v22{
  font-size:17px;font-weight:700;line-height:1.35;margin-top:1px;
}
/* 桌機／筆電一律五格同列：上方既有的 1180px 斷點會降成 3 欄，Compact 之後
   1024 仍放得下，因此把降欄門檻往下移到真的塞不下時才生效。 */
@media(min-width:1000px){
  #salesPanelOverview .sales-overview-kpi-grid-v22,
  #usagePanelOverview .sales-overview-kpi-grid-v22,
  #salesPanelQuery .sales-query-kpi-grid-v22,
  #usagePanelQuery .sales-query-kpi-grid-v22{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* 真的過窄時才換行；此時容器分隔線改為同時有右／下邊界，避免出現懸空線段。 */
@media(max-width:999px){
  #salesPanelOverview .sales-overview-kpi-card-v22,
  #usagePanelOverview .sales-overview-kpi-card-v22,
  #salesPanelQuery .sales-query-kpi-card-v22,
  #usagePanelQuery .sales-query-kpi-card-v22{border-bottom:1px solid #eef1f5}
}

/* ---- CLINICOS-V4-ABC-PACKAGE-TARGET-GROUP-FIX-001 —— 套組及優惠設定 Step 3「加入至」組別選擇。
   Segmented Control：只有固定 A/B/C 三組，攤開比下拉選單更清楚目前加入的是哪一組。
   沿用既有色票（#667085 次要文字／#e5e7eb 邊框／#1d4ed8 重點），不新增色彩系統。 ---- */
.pkg-target-seg-row-v1{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.pkg-target-seg-row-v1.hidden{display:none}
.pkg-target-seg-label-v1{font-size:13px;font-weight:600;color:#344054;flex:0 0 auto}
.pkg-target-seg-v1{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#fff}
.pkg-target-seg-btn-v1{
  appearance:none;border:0;border-right:1px solid #e5e7eb;background:#fff;color:#475467;
  min-height:34px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.pkg-target-seg-btn-v1:last-child{border-right:0}
.pkg-target-seg-btn-v1:hover{background:#f7f8fa}
.pkg-target-seg-btn-v1.is-active{background:#eef4ff;color:#1d4ed8}

/* ---- CLINICOS-V4-ADJUSTMENT-CUSTOMER-PICKER-LIABILITY-AMOUNT-001（收尾）——
   轉換療程下一步的「不可轉換」說明區塊。純視覺，不影響任何資格判定。
   刻意用中性的警示色而不是紅色錯誤色：這不是錯誤，是既有業務規則的正常結果。 ---- */
.adj-nonconvertible-v1{margin-top:14px;border:1px solid #fde68a;border-radius:10px;background:#fffbeb;padding:12px 14px}
.adj-nonconvertible-head-v1{font-size:13px;color:#92400e;line-height:1.6;margin-bottom:8px}
.adj-nonconvertible-head-v1 b{font-weight:700}
.adj-nonconvertible-v1 .table-wrap{background:#fff;border:1px solid #fde68a;border-radius:8px;overflow:auto}
.adj-nonconvertible-v1 table{width:100%}
.adj-nonconvertible-tag-v1{display:inline-block;font-size:12px;font-weight:600;color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:999px;padding:1px 9px;white-space:nowrap}
.adj-nonconvertible-foot-v1{margin-top:8px;font-size:12px;color:#a16207;line-height:1.6}

/* ---- CLINICOS-V4-PACKAGE-WORKSPACE-FINAL-REFINEMENT-001 —— 套餐列表 Section 標題與檢視開關。 */
.pkg-list-head-v1{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 10px;padding-top:16px;border-top:1px solid #eef1f5}
.pkg-list-title-v1{margin:0;font-size:15px;font-weight:700;color:#101828}
.pkg-list-toggle-v1{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:600;color:#475467;white-space:nowrap}
.pkg-list-toggle-v1 input{margin:0}

/* ---- CLINICOS-V4-ADJUSTMENT-CUSTOMER-PICKER-LIABILITY-FINAL-FIX-003 ——
   Customer Picker Drawer 的「顯示 $0 客戶」。沿用既有 .checkline，只補位置與字級。 ---- */
.cpk-drawer-zero-toggle-v1{margin:2px 2px 0;font-size:13px;color:#475467;background:transparent;border:0;padding:0;height:auto}
.cpk-drawer-zero-toggle-v1.hidden{display:none}

/* CLINICOS-V4-MULTICLINIC-E10 —— 集團供應鏈 workspace。
   沿用 org-hq-* / org-manage-* 既有版面語彙，只補這個 workspace 特有的元素：
   分頁列、狀態區塊、在途徽章、數字右對齊。不引入第二套設計系統。 */
.org-supply-tabs-v1{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.org-supply-tab-v1{padding:8px 16px;border:1px solid var(--cos-border,#d9dee5);border-radius:6px;
  background:var(--cos-surface,#fff);cursor:pointer;font-size:14px;white-space:nowrap}
.org-supply-tab-v1.is-active{background:var(--cos-primary,#2f6fed);color:#fff;border-color:var(--cos-primary,#2f6fed)}
.org-supply-state-v1{padding:24px;text-align:center;border:1px dashed var(--cos-border,#d9dee5);
  border-radius:8px;color:var(--cos-text-muted,#6b7280);margin:12px 0}
.org-supply-state-v1--error{border-color:#e5534b;color:#b42318;border-style:solid}
.org-supply-state-v1--locked{border-color:#d9a441;color:#8a6100;border-style:solid}
.org-supply-card-v1{border:1px solid var(--cos-border,#d9dee5);border-radius:8px;padding:12px;margin:0 0 12px}
.org-supply-card-head-v1{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px;font-size:14px}
.org-supply-status-v1{padding:2px 8px;border-radius:999px;background:var(--cos-surface-alt,#f1f3f6);font-size:12px}
.org-supply-badge-v1--transit{padding:2px 8px;border-radius:999px;background:#fff4e5;color:#8a6100;font-size:12px}
.org-supply-actions-v1{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 0}
.org-supply-actions-inline-v1{margin-left:auto}
.org-supply-num-v1{text-align:right}
.org-supply-qty-v1,.org-supply-ship-v1{width:110px}
.org-supply-muted-v1{color:var(--cos-text-muted,#6b7280);font-size:13px}
/* 寬表格在窄視窗自行水平捲動，頁面本體永遠不橫向捲動。 */
#orgSupplyContentV1 table{width:100%}
#orgSupplyContentV1 .org-supply-card-v1{overflow-x:auto}

/* E10.1 —— 對應建立表單。沿用 org-manage-form-v1 的欄位排列，只補一個外框。 */
.org-supply-mapform-v1{border-top:1px solid var(--cos-border,#d9dee5);margin:16px 0 0;padding:12px 0 0}
.org-supply-mapform-v1 h4{margin:0 0 8px;font-size:14px}
.org-supply-mapform-v1 select.cos-field__control{min-width:220px;max-width:100%}

/* ===== 部門管理（CLINICOS-V4-BONUS-RECOVERY-R8-UI-B）=====
   沿用既有 .panel/.cos-card/.cos-table/.btn/.badge 視覺語彙，只補此區塊需要的排版。
   桌機優先；表格於窄視窗自行捲動，長部門名稱與長員工姓名一律截斷，不把版面撐破。 */
.dept-admin-v1 { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dept-head-v1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dept-sub-v1 { font-size: 12px; color: #64748b; margin-top: 4px; line-height: 1.6; }
.dept-table-v1 { width: 100%; display: block; overflow-x: auto; }
.dept-table-v1 th, .dept-table-v1 td { white-space: nowrap; }
.dept-table-v1 td:first-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.dept-num-v1 { text-align: right; font-variant-numeric: tabular-nums; }
.dept-actions-v1 { display: flex; gap: 6px; flex-wrap: wrap; }
.dept-empty-v1 { padding: 20px; text-align: center; color: #64748b; }
.dept-muted-v1 { color: #94a3b8; }
.dept-warn-v1 { color: #b45309; }
.dept-tag-v1 { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 11px; }
.dept-error-v1 { color: #b91c1c; font-size: 12px; margin-top: 8px; min-height: 16px; }
.dept-dialog-mask-v1 { position: fixed; inset: 0; background: rgba(15, 23, 42, .35);
  display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 24px; }
/* 對話框以 viewport 為界，1366 也不會超出畫面 */
.dept-dialog-v1 { background: #fff; border-radius: 10px; width: min(520px, 100%);
  max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 12px 40px rgba(15, 23, 42, .18); }
.dept-dialog-head-v1 { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; }
.dept-dialog-x-v1 { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: #64748b; }
.dept-dialog-body-v1 { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.dept-dialog-actions-v1 { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ===== CLINICOS-V4-TREATMENT-INVENTORY-EQUIPMENT-USAGE-RULES-001 =====
   消耗品項設定的庫存扣除／設備使用，以及耗療作業的扣除區塊。
   全部沿用既有 V4 Design System 的 token 與既有 .benefit-inv-* / .cos-table 版面，
   不新增卡片、不新增第二套設計語彙、不使用大面積警示色。 */
.benefit-inv-search-v1{width:100%;margin:0 0 8px;padding:6px 10px;border:1px solid var(--cos-border,#d9dee5);border-radius:6px;font-size:13px}
.benefit-inv-search-v1:disabled{background:var(--cos-surface-muted,#f5f6f8);color:var(--cos-text-muted,#8a929c)}
.benefit-inv-row-v1.is-selected-v1 .benefit-inv-product-v1{border-color:var(--cos-primary,#2f6feb)}
.benefit-inv-row-v1.is-inactive-v1{background:var(--cos-surface-muted,#f5f6f8)}
.benefit-inv-manual-hint-v1{display:inline-block;font-size:12px;color:var(--cos-text-muted,#8a929c)}
.benefit-inv-unit-cell-v1{white-space:nowrap}

/* 總覽的「庫存／設備」欄：兩行短摘要，未設定用弱化文字而不是紅色警示。 */
.benefit-consume-cell-v4{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.benefit-consume-line-v4{font-size:12px;white-space:nowrap}
.benefit-consume-line-v4.is-set-v4{color:var(--cos-text,#2b3038)}
.benefit-consume-line-v4.is-unset-v4{color:var(--cos-text-muted,#98a0aa)}
.benefit-consume-line-v4 em{font-style:normal;color:var(--cos-text-muted,#98a0aa)}
.benefit-consume-cell-v4.is-pending-v4{color:var(--cos-text-muted,#98a0aa)}

/* 耗療作業：庫存扣除／設備使用。附在該筆耗療明細的下一列，沒有設定時整列不存在。 */
.usage-consume-row-v4>td{background:var(--cos-surface-muted,#f7f8fa);padding:8px 12px}
.usage-consume-block-v4{margin:0 0 6px}
.usage-consume-block-v4:last-child{margin-bottom:0}
.usage-consume-title-v4{font-size:12px;font-weight:600;color:var(--cos-text-muted,#6b7480);margin:0 0 4px}
.usage-consume-item-v4{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 0}
.usage-consume-name-v4{min-width:140px;font-size:13px}
.usage-consume-field-v4{display:flex;align-items:center;gap:6px}
.usage-consume-value-v4{display:inline-block;min-width:64px;padding:3px 8px;border:1px solid var(--cos-border,#d9dee5);border-radius:6px;background:var(--cos-surface,#fff);color:var(--cos-text-muted,#6b7480);font-size:13px;text-align:right}
.usage-consume-input-v4{width:88px;padding:3px 8px;border:1px solid var(--cos-border,#d9dee5);border-radius:6px;font-size:13px;text-align:right}
.usage-consume-unit-v4{font-size:12px;color:var(--cos-text-muted,#6b7480)}
.usage-consume-tag-v4{font-size:11px;color:var(--cos-text-muted,#98a0aa)}
.usage-consume-tag-v4.is-manual-v4{color:var(--cos-primary,#2f6feb)}
.usage-consume-warn-v4{font-size:12px;color:var(--cos-danger,#c0392b)}

/* CLINICOS-V4-MANUAL-UAT-BATCH5-3 即時損益查詢 */
.fin-pnl-presets{display:inline-flex;gap:6px;flex-wrap:wrap}
.fin-pnl-profit{font-variant-numeric:tabular-nums}
.fin-pnl-profit.fin-pnl-loss{color:#b91c1c}
.fin-pnl-notice{margin:0;padding-left:18px;color:#64748b;font-size:12px;line-height:1.8}

/* CLINICOS-V4-MANUAL-UAT-BATCH5-5A —— Super Admin 進入診所後的身分揭露與平台帳號 Drawer。
   兩者都只用既有的色票與間距語彙，不新增第二套版型系統。 */
.super-tenant-banner-v1{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px 12px;border-radius:999px;
  background:#fef3c7;border:1px solid #f59e0b;color:#92400e;
  font-size:13px;font-weight:600;min-width:0;
}
.super-tenant-banner-v1.hidden{display:none}
.super-tenant-banner-v1__mode{font-weight:700}
.super-tenant-banner-v1__sep{opacity:.6}
.super-tenant-banner-v1__label{font-weight:500}
.super-tenant-banner-v1__back{
  margin-left:8px;padding:3px 10px;border-radius:999px;cursor:pointer;
  border:1px solid #92400e;background:#fff;color:#92400e;
  font-size:12px;font-weight:600;white-space:nowrap;
}
.super-tenant-banner-v1__back:hover{background:#92400e;color:#fff}

/* 窄版時允許整條橫幅換行，不撐破 Header。 */
@media (max-width: 900px){
  .super-tenant-banner-v1{width:100%;border-radius:10px}
  .super-tenant-banner-v1__back{margin-left:auto}
}

.platform-account-drawer-v1{position:fixed;inset:0;z-index:1200}
.platform-account-drawer-v1.hidden{display:none}
.platform-account-drawer-v1__scrim{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.platform-account-drawer-v1__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  background:#fff;box-shadow:-8px 0 24px rgba(15,23,42,.18);
  display:flex;flex-direction:column;
}
.platform-account-drawer-v1__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--color-border,#e4e7ec);
}
.platform-account-drawer-v1__head h4{margin:0}
.platform-account-drawer-v1__body{padding:20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1 1 auto}
.platform-account-drawer-v1__body label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;min-width:0}
.platform-account-drawer-v1__body input,
.platform-account-drawer-v1__body select{width:100%;max-width:100%;min-width:0}
.platform-account-drawer-v1__foot{
  display:flex;justify-content:flex-end;gap:10px;
  padding:16px 20px;border-top:1px solid var(--color-border,#e4e7ec);
}

/* CLINICOS-V4-MANUAL-UAT-BATCH5-5B —— Desktop 上的「切換手機版」入口。 */
.switch-to-mobile-btn-v1{
  padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--color-border,#e4e7ec);background:#fff;
  font-size:13px;font-weight:600;
}
.switch-to-mobile-btn-v1.hidden{display:none}
.switch-to-mobile-btn-v1:hover{background:#f2f4f7}

/* CLINICOS-V4-SALES-STAFF-PERFORMANCE-ALLOCATION-001 —— 銷售人員 membership 與業績分配。
   沿用既有 cos-field / cos-btn / cos-badge，不引入新的視覺語彙；Step 1 保持 compact，
   Step 5 只是一張清單，不做成 dashboard。 */
/* UAT-FIX-BATCH-20260906-005 §1 —— 基本資料左右兩欄。
   左欄是日期／單號，右欄是銷售人員；右欄寬度收在 300–380px，
   與左欄的欄位維持視覺平衡，不會把右半邊撐成一大塊。 */
.sales-basic-grid-v005{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  gap:16px 24px;align-items:start;
}
.sales-basic-grid-v005 > .sales-staff-field-v1{margin-top:0}
/* 窄視窗（含平板／手機）疊回單欄，右欄不再固定寬度。 */
@media (max-width:1100px){
  .sales-basic-grid-v005{grid-template-columns:minmax(0,1fr)}
  .sales-basic-grid-v005 > .sales-staff-field-v1 .sales-staff-editor-v1{max-width:none;width:auto}
}
/* 沒有指定銷售人員時的必填提示：用既有的 danger 紅，就近顯示在欄位下方。 */
.sales-staff-required-v1{
  margin-top:2px;font-size:13px;color:#b42318;
}
.sales-staff-field-v1{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sales-staff-label-v1{font-size:13px;font-weight:600;color:#475467}
/* UAT-FIX-BATCH-20260906-004 §1 —— 乾淨的人員清單，不是一個下拉控制項。
   003 把「新增」做成一個常駐的 <select>，瀏覽器畫出下拉箭頭之後，整個 component
   就長得像個 dropdown（Owner UAT 指出的問題）。現在清單與新增分開：
   清單是一個有輕量邊界的容器，新增是清單下方的一行文字操作。
   這一區只處理姓名／主要／設為主要／移除／新增 —— 業績比例在 Step 5，不在這裡。 */
.sales-staff-editor-v1{display:flex;flex-direction:column;gap:8px;width:fit-content;min-width:300px;max-width:380px}
.sales-staff-control-v1{
  border:1px solid var(--color-border,#e4e7ec);border-radius:8px;background:#fff;overflow:hidden;
}
.sales-staff-list-v1{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sales-staff-row-v1{
  display:flex;flex-direction:row;align-items:center;gap:12px;
  min-height:46px;padding:0 14px;border:0;background:transparent;
}
.sales-staff-row-v1 + .sales-staff-row-v1{border-top:1px solid #f2f4f7}
.sales-staff-row-v1:hover{background:#f9fafb}
.sales-staff-name-v1{
  flex:1;min-width:0;font-size:15.5px;font-weight:600;color:#101828;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sales-staff-hint-v1{margin-left:6px;font-size:12px;font-weight:400;color:#98a2b3}
.sales-staff-actions-v1{flex:none;display:flex;flex-direction:row;align-items:center;gap:10px}
.sales-staff-primary-v1{
  flex:none;padding:2px 8px;border-radius:4px;
  background:#eef2f6;color:#344054;font-size:12.5px;line-height:18px;font-weight:600;
}
.sales-staff-setprimary-v1{
  flex:none;border:0;background:transparent;padding:0;
  font-size:13.5px;color:#475467;cursor:pointer;white-space:nowrap;
}
.sales-staff-setprimary-v1:hover{color:#101828;text-decoration:underline}
/* 移除鍵的 hit area 至少 32×32，不能只是一個小灰符號。 */
.sales-staff-remove-v1{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;min-width:32px;border:0;border-radius:6px;background:transparent;
  padding:0;line-height:1;font-size:20px;color:#98a2b3;cursor:pointer;
}
.sales-staff-remove-v1:hover{color:#b42318;background:#fef3f2}
.sales-staff-empty-v1{padding:14px;font-size:14px;color:#98a2b3}
/* 新增：清單外的一行文字操作，沒有邊框、沒有下拉箭頭。 */
.sales-staff-add-v1{padding:0}
.sales-staff-addbtn-v1{
  border:0;background:transparent;padding:2px 0;
  font-size:14px;color:#175cd3;cursor:pointer;
}
.sales-staff-addbtn-v1:hover{text-decoration:underline}
/* 只有按下「新增」之後才出現的挑選器 —— 它是暫時的輸入狀態，不是常駐外觀。 */
.sales-staff-picker-v1{
  width:100%;height:38px;border:1px solid var(--color-border,#e4e7ec);border-radius:8px;
  background:#fff;padding:0 10px;font-size:14px;color:#101828;cursor:pointer;
}

/* 業績分配（Step 5）。金額欄一律是衍生顯示，因此不做成可編輯的樣子。 */
.sales-alloc-panel-v1{display:flex;flex-direction:column;gap:10px}
.sales-alloc-panel-v1.hidden{display:none}
.sales-alloc-head-v1{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:14px;color:#475467;
}
.sales-alloc-head-v1 b{font-size:18px;color:#101828}
.sales-alloc-mode-v1{display:flex;align-items:center;gap:16px;font-size:13px;color:#475467}
.sales-alloc-mode-v1 label{display:flex;align-items:center;gap:6px;cursor:pointer}
.sales-alloc-hint-v1{color:#98a2b3;font-size:12px}
.sales-alloc-rows-v1{display:flex;flex-direction:column;gap:6px}
.sales-alloc-row-v1{display:flex;align-items:center;gap:12px;min-height:34px}
.sales-alloc-name-v1{flex:1;display:flex;align-items:center;gap:6px;font-size:14px;color:#101828}
.sales-alloc-field-v1{flex:none;display:flex;align-items:center;gap:4px;width:130px;justify-content:flex-end}
.sales-alloc-input-v1{width:92px;text-align:right}
.sales-alloc-unit-v1{font-size:13px;color:#667085;width:12px}
.sales-alloc-derived-v1{flex:none;width:120px;text-align:right;font-variant-numeric:tabular-nums;color:#344054}
.sales-alloc-divider-v1{height:1px;background:var(--color-border,#e4e7ec)}
.sales-alloc-summary-v1 .sales-alloc-name-v1{color:#475467;font-weight:600}
.sales-alloc-summary-v1.is-incomplete-v1 .sales-alloc-derived-v1,
.sales-alloc-summary-v1.is-incomplete-v1 .sales-alloc-field-v1{color:#b54708}
.sales-alloc-warning-v1{
  padding:8px 10px;border-radius:8px;font-size:13px;
  background:#fffaeb;color:#b54708;border:1px solid #fedf89;
}
/* 超額分配是錯誤，不是「還沒填完」——用既有的 danger 紅，不另立新色。 */
.sales-alloc-error-v1{
  padding:8px 10px;border-radius:8px;font-size:13px;
  background:#fef3f2;color:#b42318;border:1px solid #fda29b;
}
/* 最後一位是自動承接的剩餘：欄位唯讀、外觀降階，並掛一個「自動」小標，
   讓使用者一眼看出那一格不需要他輸入。 */
.sales-alloc-auto-tag-v1{
  flex:none;margin-left:6px;padding:1px 6px;border-radius:4px;
  background:#eff8ff;color:#175cd3;font-size:12px;line-height:18px;
}
.sales-alloc-input--auto-v1{background:#f9fafb;color:#475467;cursor:default}

/* ==========================================================================
   CLINICOS-V4-UAT-FIX-BATCH-20260906-001
   Owner 在 Render 實測後的版面修正。全部只動視覺，沒有任何一條改到資料或流程。
   ========================================================================== */

/* §3 「需要人員」角色圓標。原本整串「醫師、美容師、護理師、諮詢師」把欄寬吃掉一大半，
   改成四個實心小圓標；完整角色名稱放 title/aria-label，滑過去就看得到。
   顏色沿用本專案既有的穩定色票，不引入 neon，也不做成大型 pill。 */
.need-role-chips-v1{display:inline-flex;align-items:center;gap:5px}
.need-role-chip-v1{
  display:inline-flex;align-items:center;justify-content:center;
  /* 20px 在實機上太小（Owner 第二輪回饋），放大到 28px；字級同步到 13.5px。
     只是尺寸，角色色與 title／aria-label 都不動。 */
  width:28px;height:28px;border-radius:50%;
  font-size:13.5px;line-height:1;font-weight:600;color:#fff;
  background:#98a2b3;cursor:default;
}
.need-role-chip--doctor-v1{background:#175cd3}      /* 醫師 */
.need-role-chip--beautician-v1{background:#9e77ed}  /* 美容師 */
.need-role-chip--nurse-v1{background:#12b76a}       /* 護理師 */
.need-role-chip--consultant-v1{background:#f79009}  /* 諮詢師 */
.need-role-none-v1{color:#98a2b3}

/* §6 施作部位管理：checkbox 與文字同一橫列。
   這幾個 class 先前完全沒有樣式，label 內的 <span> 以 block 排版，
   於是 checkbox 在上、文字掉到下一列。 */
.ta-tri-selectall-v1{display:inline-flex;flex-direction:row;align-items:center;gap:6px;cursor:pointer}
.ta-tri-selectall-v1 input[type="checkbox"],
.ta-pick-check-v1{
  /* style.css:126 給所有 input 上了 padding:10px 12px + border-radius:10px，
     checkbox 因此被撐成一個大方塊，文字才會被擠到下一列。這裡比照既有的
     .adj-select-td-v1 input[type="checkbox"] 把它拉回原生尺寸。 */
  flex:none;margin:0;width:16px;height:16px;padding:0;border-radius:3px;
}
.ta-pick-row-v1{
  display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap;
  padding:6px 8px;border-radius:6px;cursor:pointer;
}
.ta-pick-row-v1:hover{background:#f9fafb}

.ta-pick-body-v1{display:flex;flex-direction:column;min-width:0;flex:1}
.ta-pick-name-v1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-pick-meta-v1{font-size:12px;color:#98a2b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* §7 簽署頁勾選項：checkbox 與說明文字同一橫列、垂直置中、整個 label 可點。
   .cos-field__label 是 display:block，直接套用會把兩者拆成上下兩列。 */
.consent-checkbox-label-v2c{
  /* flex-direction 必須明寫：本專案別處已有 .cos-field__label 被排成 column 的情形
     （見 #settingPanelPayments 那條同樣要強制 row 的規則），只給 display:flex 不夠。 */
  display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap;cursor:pointer;
}
.consent-checkbox-label-v2c input[type="checkbox"]{
  flex:none;margin:0;width:16px;height:16px;padding:0;border-radius:3px;
}
.consent-checkbox-label-v2c > span{flex:1;min-width:0}

/* §8 必勾項的文字用既有的 danger 紅（#b42318，與 .sales-alloc-error-v1 同一支）。
   只有文字紅，checkbox 本體維持原生外觀，不加背景色塊。 */
.consent-checkbox-label--required-v2c > span{color:#b42318;font-weight:600}

/* §2 —— 銷售人員列上的職稱前綴。姓名仍是主資訊，職稱以較小、較淡的字體帶出，
   避免把一列塞得太滿。option 的 value 與 payload 都沒有改變。 */
.sales-staff-role-v1{font-size:13px;font-weight:500;color:#667085}

/* CLINICOS-V4-CUSTOMER-DIAGNOSIS-CERTIFICATE-AND-UI-POLISH-001 —— 診斷證明。
   狀態色沿用同意書那組色票（草稿灰／完成綠／作廢紅），不新增第二套配色語彙。 */
.dxc-status-v1{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.dxc-status--DRAFT{background:#f2f4f7;color:#475467}
.dxc-status--ISSUED{background:#ECFDF3;color:#027A48}
.dxc-status--VOID{background:#FEE4E2;color:#B42318}
.dxc-form-grid-v1{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.dxc-visit-row-v1{display:flex;gap:8px;align-items:center}
.dxc-visit-row-v1 input{max-width:200px}
.dxc-visit-chips-v1{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;min-height:28px;align-items:center}
.dxc-visit-chip-v1{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 10px;border:1px solid #d0d5dd;border-radius:999px;font-size:13px;background:#fff}
.dxc-visit-chip-x-v1{border:0;background:transparent;cursor:pointer;color:#667085;font-size:12px;line-height:1;padding:2px}
.dxc-visit-chip-x-v1:hover{color:#B42318}

/* UAT-POLISH-BATCH-006 #11 —— 從耗療紀錄挑應診日期。內嵌在表單裡的清單，
   不另開 Modal：日期是表單的一部分，跳出視窗反而讓人看不到已經挑了哪幾天。 */
.dxc-usage-picker-v1{margin-top:8px;border:1px solid #e4e7ec;border-radius:6px;background:#fff}
.dxc-usage-picker-head-v1{padding:8px 12px;border-bottom:1px solid #eef2f6;font-size:13px;color:#475467}
.dxc-usage-picker-list-v1{max-height:220px;overflow-y:auto}
/* BATCH-007 #16 —— 一筆耗療紀錄必須是一列：☐ ＋ 日期 ＋ 療程名稱。
   原本每筆會攤成 2～3 行，根因是本檔第 128 行的全域 `label{flex-direction:column}`：
   這裡只設了 display:flex，沒有設 flex-direction，那條全域規則就繼續生效，
   把 checkbox／日期／療程直向堆起來。因此明確寫死 row，不靠繼承。
   （font-weight 同理 —— 全域 label 是 700，清單項目不該是粗體。） */
.dxc-usage-picker-item-v1{display:flex;flex-direction:row;align-items:center;gap:10px;padding:7px 12px;
  border-bottom:1px solid #f2f4f7;font-size:14px;font-weight:400;cursor:pointer}
.dxc-usage-picker-item-v1:last-child{border-bottom:0}
.dxc-usage-picker-item-v1:hover{background:#f8fafc}
.dxc-usage-picker-check-v1{flex:0 0 auto;margin:0}
/* 日期固定寬度，日期欄才會對齊成一直行；療程名稱吃掉剩下的寬度，過長才自然換行。 */
.dxc-usage-picker-date-v1{flex:0 0 96px;font-variant-numeric:tabular-nums;color:#101828}
.dxc-usage-picker-name-v1{flex:1 1 auto;min-width:0;color:#475467;overflow-wrap:anywhere}
.dxc-usage-picker-actions-v1{display:flex;justify-content:flex-end;gap:8px;padding:8px 12px;border-top:1px solid #eef2f6}
.dxc-visit-row-v1{flex-wrap:wrap}