/* ═══ PM-Core · Soft Sage Theme ═══ */
:root {
  /* CSS 鐵則：顏色/圓角/z-index/陰影一律走 :root 變數，禁止在規則裡直接寫 hex/數字。
     要用色從下方變數挑；缺的先在此新增變數再用。違反會造成跨 session 改動衝突。
     合理例外：rgba 透明衍生（變數無法帶 alpha）、膠囊 99px / 圓點 50% 慣用語。 */
  --sage-50: #F0F4ED; --sage-100: #DCE6D2; --sage-200: #B8CCA5;
  --sage-300: #93B17A; --sage-400: #6F8E5C; --sage-500: #4A7C5C;
  --sage-600: #3A6B4E; --sage-700: #2D4A3A; --sage-800: #1E3326;

  --paper: #F7F9FB; --cream: #EEF1F4;
  --stone-50: #EDF0F3; --stone-100: #DDE3EA; --stone-200: #C7D0DA;
  --stone-300: #A3AEB9; --stone-400: #737E8B; --stone-500: #586372;
  --stone-600: #33404D; --stone-900: #182029;
  --gray-mid: #9CA3AF;   /* 中性冷灰：甘特 manual 錨點底 */
  --sidebar-ink2: #939BA4;      /* sidebar 次要字（石板藍灰，2026-07-03 換底色） */
  --sidebar-rule: rgba(255,255,255,.1);   /* 深底分隔線/邊框/虛線框 */
  --sidebar-card: rgba(255,255,255,.07);  /* 深底半透明卡 */
  --sb-bg: #262C33;             /* 側欄底：石板藍灰（Slate，退居背景讓右側數據跳出） */
  --sb-text: #E2E6EA;           /* 側欄主字 */
  --sb-grp: #EDF0F3;            /* 群組表頭字（NPI/ECN） */
  --sb-hover: rgba(255,255,255,.06);   /* 項目 hover 底 */
  --sb-active: rgba(255,255,255,.09);  /* 項目 active 底（搭琥珀左緣，非整塊綠） */
  /* KPI 卡淺底 --kpi-*-l 已移除(2026-06-28 階段一)：數據卡改白底+頂部細彩線，tone 改 border-top-color */
  --head-band: #E8EDE0;         /* 待辦表頭橫槓底 */
  --head-band-strong: var(--sage-700);  /* 待辦任務表頭:深 sage 反白底 */

  --terracotta: #C4633E; --terracotta-l: #FAE8DC;
  --amber: #C4956C; --amber-l: #F5E8DC;
  --slate: #5C7A8B; --slate-l: #DDE6EC;
  --plum: #8B5E73; --plum-l: #EDDFE5;
  --rose: #B8504D; --rose-l: #F5DEDD; --rose-ink: #7A2E2C; --rose-tint: #FCF2F1;   /* rose-l 淺底上的深字（與 -l 成對）；rose-tint 極淺玫瑰漸層底（爆表 hot 卡） */
  --amber-ink: #6B4423; --slate-ink: #2E3F4D;   /* -l 淺底上的深字(與 -l 成對) */
  /* 待辦篩選膠囊選中底（中淺階，比各色 -l 深一階）*/
  --sage-chip: #C7DDB8; --slate-chip: #BBCEDB; --terracotta-chip: #EBC79E; --rose-chip: #EBBBBA;
  /* 專案識別色 PROJ_COLORS，主題系統用（亮版）*/
  --proj-c1: #4CAF7D; --proj-c2: #E8853A; --proj-c3: #3E8FD8; --proj-c4: #9B6FC4;
  --proj-c5: #E0B53C; --proj-c6: #E25B5B; --proj-c7: #3DB8B0; --proj-c8: #E86FA0;

  /* 行事曆事件語意色族(漸層 from/to、邊框、字;-ink 為其上深字) */
  --navy: #4A6B85; --navy-from: #DCE7EF; --navy-to: #C8D8E4; --navy-ink: #1F3848;   /* 會議 meeting/auto-meeting */
  --khaki: #BA7517; --khaki-bg: #FAEEDA; --khaki-ink: #854F0B;                       /* 午休 lunch-band */
  --clay: #8B7355; --clay-from: #E8E1D4; --clay-to: #D4C9B5; --clay-ink: #4A3B2B;    /* 清潔 cleaning */
  --terracotta-d: #A85230; --terracotta-ink: #8B3A1D; --terracotta-l-hover: #F5DDC8; /* terracotta hover深色 / -l底深字 / -l hover */
  /* §16 專案頁 header 三層配色（純新增，不動既有 terracotta/clay/sage；套用見 §16.3，塊2/3）*/
  --nav-active: #33586B;                     /* 導航選中冷板藍（scoped .view-tabs-bar .tab-btn.active；冷灰底定版·原陶土橘 #C4633E）*/
  --danger: #B84A3E; --danger-d: #9E3A30;    /* 危險鈕更紅 + hover（.tb-action.danger 統一）*/
  --ink-btn: #33404D;                        /* 匯出深墨灰主鈕（值同 --stone-600，語意獨立）*/
  --amber-border: #E8C794;                                                           /* report-next amber 邊框 */
  --gantt-plan: #7FA08C;     /* 甘特計畫虛框（值同 --sidebar-ink2，語意獨立不借） */
  --gantt-done: #3B6B4A;     /* 甘特完成（號誌燈綠，不借 --sage-600） */
  --gantt-holiday: #EFEAE2;  /* 甘特假日底色 */
  --gantt-weekday: #F2F3F5;  /* 甘特平日底色（中性淡灰，比白略深、與假日暖灰區隔提辨識） */
  --gantt-today: #2E5A72;    /* 甘特今日線／今天旗標（冷石板深藍·中性資訊色，不借 sage/amber/rose 三色語意，避與延誤紅混淆） */
  --xl-gantt-plan: #D9D2C5;     /* Excel甘特 計畫(淺米灰) */
  --xl-gantt-done: #3B6B4A;     /* Excel甘特 完成(深綠,同螢幕) */
  --xl-gantt-wip: #4A6B85;      /* Excel甘特 進行中(navy,同螢幕) */
  --xl-gantt-late: #C4633E;     /* Excel甘特 逾期(terracotta,同螢幕) */
  --xl-bom-old: #E0DCD0;        /* Excel BOM匯出 舊料列(灰,stone系) */
  --xl-bom-new: #F6E8B8;        /* Excel BOM匯出 新料列(黃,amber系) */
  /* Excel 匯出「豪華標準格式」色票（比照參考檔 J_vs_G2；四支匯出器共用，JS 端 App._xlHouse 以 ARGB 鏡像此處，同 --xl-gantt-* 慣例） */
  --xl-navy: #305496;           /* 分頁標題帶 深藍底(白字) */
  --xl-blue: #4472C4;           /* 機種帶/次標 藍底(白字) */
  --xl-ltblue: #D9E1F2;         /* 區塊標題/淨變動 淺藍底 */
  --xl-hdr: #8FAADC;            /* 欄位表頭 藍底(白字) */
  --xl-cream: #FFF2CC;          /* 小計 米底 */
  --xl-gold: #FFD966;          /* 合計 金底 */
  --xl-pos: #C00000;           /* 金額 增(紅字) */
  --xl-neg: #006100;           /* 金額 省/減(綠字) */
  --xl-memo-ink: #595959;      /* 備註 灰字 */
  /* 週曆事件卡 冷灰石板＋琥珀點綴配色（方向⑤·2026-07-08 對齊冷灰定版；白格＋冷灰線＋冷綠會議/降彩度暖杏雜項/藍灰任務＋琥珀今日，hex 集中於此·值對齊系統 rule/pearl/ink3/sage/amber-accent/nav） */
  --cal-cell-bg: #FFFFFF;        /* 空白格 純白 */
  --cal-line-h: #DDE3EA;         /* 橫線/整點 冷灰(=--rule) */
  --cal-line-v: #E7EBF0;         /* 縱線/星期 冷灰更淡 */
  --cal-mtg-bg: #EAF1EC; --cal-mtg-line: #3A6B4E; --cal-mtg-ink: #1E3326;     /* 會議 冷綠底/sage-600 線/sage-800 字 */
  --cal-misc-bg: #FBEFD9; --cal-misc-line: #D99A3C; --cal-misc-ink: #5C330A;  /* 雜項 降彩度暖杏底/琥珀線/深褐字（方向⑤保留暖點綴） */
  --cal-axis-bg: #F6F8FA; --cal-noon-text: #8A93A0;     /* 時間軸＋午休 冷白底(=--pearl) / 冷灰字 */
  --cal-today-bg: #FBF4E9; --cal-today-badge: #D99A3C;  /* 今日直欄底 淡暖琥珀 / 圓圈 琥珀(方向⑤點綴) */
  --cal-date-ink: #1E293B;       /* 頂部日期大字 深藍灰(已冷) */
  --cal-time-ink: #586372;       /* 左側時間軸 冷石板灰(=--ink3) */
  --cal-ms-bg: #EDF1F5; --cal-ms-line: #33586B; --cal-ms-ink: #2E3F4D;  /* 里程碑 藍灰底/冷板藍線(=--nav)/深藍灰字（方向⑤冷化·取代原 terracotta 暖橘·週卡冷化聚焦工作台） */
  --xl-gantt-holiday: #F7DDE4;  /* Excel甘特 假日(淡粉紅,僅標表頭) */

  --amber-accent: #d99a3c;        /* 琥珀強調色（框/圈底） */
  --amber-accent-ink: #3a2806;    /* 琥珀底上的深褐字/icon */
  --amber-accent-hover: #c8862f;  /* hover 實心底略深 */
  --amber-icon-fg: #3a2806;       /* 亮圈內 icon 顏色 */
  --amber-bright: #EEA83A; --amber-bright-hover: #E29A20;   /* §19.6.1 ECN 動作亮琥珀（主鈕/進度條）·結構穩琥珀仍用 --amber-accent */
  --ecn-bg: #EAEEF2;   /* §19.6.1 ECN 戰情室石板冷藍底（模組專屬·非全站暖沙 --bg；套 .ecn-dash scope） */
  --ecn-zone-head: #F3F4F6;   /* §19.6.1 差異區分類標題列底（比白稍深·分群界線清楚·冷中性配石板） */
  --roi-hero-grad: linear-gradient(135deg,#FDF0D6 0%,#F8E1B6 100%);   /* §19.6.1 hero「每台目標成本差額」亮金卡 */
  --roi-forced-grad: linear-gradient(135deg,#FDF3F2 0%,#F9E4E2 100%); /* §19.6.1 被迫型合規總代價卡 */
  --roi-hero-border: #EABF74;
  --roi-forced-border: #E8C4C2;   /* §19.6.1 被迫型合規卡邊（配 --roi-forced-grad） */
  --roi-hero-grad-npi: linear-gradient(135deg,#ECF1FB 0%,#D8E4F6 100%);   /* §19.6.2 NPI BOM view hero 淺靛卡（NPI Indigo 靛藍·非 ECN 琥珀；套 .bom-npi scope） */
  --npi-700: #274873; --npi-600: #305691; --npi-500: #3E6DB0; --npi-300: #A9C2E6; --npi-50: #E7EEF8;   /* §19.6.2 NPI 靛藍識別階（跳出語意綠·與 ECN 琥珀區隔） */

  --memo-y: #FFF4B8; --memo-p: #FFD9E0; --memo-b: #C8E4F0;
  --memo-g: #D9EBC8; --memo-o: #FFD8B5;

  --bg: #EAEEF2; --surface: #FFFFFF; --surface2: var(--cream); --pearl: #F6F8FA;   /* --bg 石板冷灰底(冷灰底定版·原暖沙 #F5F4EE); --pearl 冷柔白卡面 */
  --hint-head: #EDF0F3;   /* HintBox header 冷灰淺底（冷灰底定版·原暖沙 #F1EFE8） */
  --rule: #DDE3EA; --rule2: #C7D0DA;
  --ink: var(--stone-900); --ink2: var(--stone-600); --ink3: var(--stone-500); --ink4: var(--stone-400);
  --ink-inverse: #FFFFFF;   /* 彩色底上的反白前景字(深色主題時仍須為白,勿與 --surface 混用) */

  --sans: 'Noto Sans TC', 'Microsoft JhengHei', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --hand: 'Caveat', 'Noto Sans TC', cursive;

  --r3:3px; --r4:4px; --r6:6px; --r8:8px; --r10:10px; --r12:12px; --r16:16px;
  --shadow-sm: 0 1px 2px rgba(58,51,42,.04);
  --shadow: 0 1px 3px rgba(58,51,42,.06), 0 4px 12px rgba(58,51,42,.04);
  --shadow-lg: 0 8px 24px rgba(58,51,42,.10);

  /* 全域層級階梯(元件內部相對疊序不在此列,維持就地寫死) */
  --z-ws-event-low: 1;   /* 工作台會議/雜務事件·低於任務層 */
  --z-sticky: 10; --z-dropdown: 50; --z-modal: 500;
  --z-confirm: 520;   /* §6.5 塊三：確認對話框，疊在 modal(500) 上、tooltip(550) 下 */
  --z-tooltip: 550; --z-toast: 600; --z-overlay: 1000;   /* tooltip 蓋 modal、不蓋 toast */
  --z-dev: 1100;   /* DEV 身份面板，須蓋過 login overlay 才能在登入頁切身份 */

  /* Can't view 擋頁（§8f.5）：遮罩底 + 反白字 + 層級夾在 login overlay 之上、DEV 面板之下 */
  --blockout-bg: rgba(15, 18, 24, 0.96);   /* 深近不透明遮罩底 */
  --blockout-fg: var(--ink-inverse);        /* 深底反白字，複用既有 */
  --z-blockout: 1050;   /* 高於 login overlay(1000)、低於 DEV 面板(1100) 讓切換器保持可點 */
}

/* ── 共用表格規範 .data-table（架構文件 §8g：內容自適應）─────────────
   table-layout:auto，欄寬由內容自動撐，人不管寬度。
   欄類型 class 只管對齊/截斷傾向。input/select 吃滿欄寬，表單表零設定自適應。
   色彩全複用既有變數，零寫死 hex。*/
.data-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  background: var(--surface);
}
.data-table th,
.data-table td {
  border-bottom: 1px solid var(--rule);
  padding: 6px 8px;
  vertical-align: middle;
}
.data-table thead th {
  background: var(--head-band-strong);
  color: var(--ink-inverse);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.data-table tbody tr:nth-child(even) { background: var(--cream); }
.data-table tbody tr:hover { background: var(--surface2); }
.data-table.cal-table tbody tr:nth-child(even) { background: transparent; }
.data-table.cal-table tbody tr:nth-child(odd):not(:first-child) { background: var(--cream); }

/* 表單欄位自適應：input/select 吃滿所在欄，跟著 auto 欄寬走、不破圖 */
.data-table td input[type="text"],
.data-table td input:not([type]),
.data-table td select {
  width: 100%;
  box-sizing: border-box;
}

/* 欄類型語彙（只管對齊/截斷傾向，不管寬度）*/
.data-table .col-num    { text-align: center; }
.data-table .col-action { text-align: center; white-space: nowrap; }
.data-table .col-mid    { text-align: left; }
.data-table .col-flex {
  text-align: left;
  max-width: 24rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 多行例外（§8g）：解除 col-flex 截斷，允許換行（可疊加）*/
.data-table .col-wrap { white-space: normal; overflow: visible; text-overflow: clip; }
/* 列間插入元件（通用，§8g B；複刻待辦 .row-insert：sage 線+圓鈕+hover 浮現）*/
.data-table .dt-insert-cell { position: relative; padding: 0; height: 0; border: none; }
.data-table .dt-insert { position: absolute; left: 0; right: 0; bottom: -13px; height: 26px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; z-index: var(--z-sticky); pointer-events: none; }
.data-table .dt-insert::before { content: ''; position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); height: 2px; background: var(--sage-600); border-radius: 99px; }
.data-table .dt-insert-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sage-600); color: var(--ink-inverse); border: none; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-sm); pointer-events: auto; }
.data-table tbody tr:hover + .dt-insert-row .dt-insert,
.data-table .dt-insert-row:hover .dt-insert { opacity: 1; }


* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; min-height: 100vh; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

/* ─── LOGIN ─── */
.login-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(160deg, var(--sage-700) 0%, var(--sage-800) 100%);
  z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .4s;
}
.login-overlay.hidden { opacity: 0; pointer-events: none; }
.login-box {
  background: var(--paper); border-radius: var(--r16); padding: 42px;
  width: 380px; box-shadow: var(--shadow-lg); text-align: center;
  position: relative; overflow: hidden;
}
.login-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sage-500), var(--amber), var(--terracotta));
}
.login-logo {
  font-family: var(--sans); font-weight: 600; font-size: 24px;
  color: var(--sage-700); margin-bottom: 4px; letter-spacing: -.01em;
}
.login-sub {
  font-family: var(--mono); font-size: 11px; color: var(--ink3);
  letter-spacing: .08em; margin-bottom: 28px;
}
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form input {
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r8);
  background: var(--surface); outline: none; transition: border-color .2s;
}
.login-form input:focus { border-color: var(--sage-500); box-shadow: 0 0 0 3px rgba(74,124,92,.1); }
.login-form button {
  padding: 12px; background: var(--sage-500); color: var(--ink-inverse); border: none;
  border-radius: var(--r8); font-weight: 500; transition: background .2s;
}
.login-form button:hover { background: var(--sage-600); }

.login-google-hint { font-size: 12px; color: var(--ink3); margin-bottom: 12px; }

.login-error {
  margin-top: 12px; padding: 10px 12px; background: var(--terracotta-l);
  border-left: 3px solid var(--terracotta); border-radius: var(--r6);
  font-size: 12px; color: var(--terracotta-ink); line-height: 1.5; text-align: left;
}

/* ─── APP SHELL ─── */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app.sb-collapsed { grid-template-columns: 64px 1fr; }   /* 收合：右側 1fr 自動補寬、不破圖 */

/* ─── SIDEBAR（石板藍灰 Slate，三區固定/捲動；2026-07-03 重構）─── */
.sidebar {
  background: var(--sb-bg); color: var(--sb-text);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid var(--sidebar-rule);
}
.sb-top { flex: none; }
.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.sb-scroll::-webkit-scrollbar { width: 6px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }

.sb-brand { padding: 16px 14px 8px; }
.sb-brand-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sb-brand-mark { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--sb-text); line-height: 1; margin-bottom: 3px; letter-spacing: -.01em; }
.sb-brand-sub { font-family: var(--mono); font-size: 9.5px; color: var(--sidebar-ink2); letter-spacing: .04em; }
.sb-collapse { flex: none; width: 24px; height: 24px; border-radius: var(--r6); border: none; background: var(--sidebar-card); color: var(--sidebar-ink2); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.sb-collapse::before { content: '◀'; }
.app.sb-collapsed .sb-collapse::before { content: '▶'; }
.sb-collapse:hover { background: var(--sb-active); color: var(--sb-text); }
.sb-user-badge { margin-top: 13px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; background: var(--sidebar-card); border-radius: var(--r8); font-size: 12px; }
.sb-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--sage-500), var(--sage-300)); color: var(--ink-inverse); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex: none; }
.sb-user-mode { font-family: var(--mono); font-size: 9px; color: var(--sidebar-ink2); text-transform: uppercase; letter-spacing: .1em; margin-top: 1px; }

.sb-section { padding: 10px 8px 0; }
.sb-label { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--sidebar-ink2); text-transform: uppercase; padding: 0 10px; margin-bottom: 5px; }
.sb-nav, .sb-proj-list { display: flex; flex-direction: column; gap: 2px; }
.sb-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: none; background: none; color: var(--sb-text);
  border-radius: var(--r8); text-align: left; font-size: 13px;
  transition: background .15s; width: 100%; position: relative; cursor: pointer;
}
.sb-item:hover { background: var(--sb-hover); }
.sb-item.active { background: var(--sb-active); color: var(--ink-inverse); font-weight: 600; }
.sb-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 0 3px 3px 0; background: var(--amber-accent); }
.sb-item .ico { width: 17px; text-align: center; opacity: .7; flex: none; }
.sb-item.active .ico { opacity: 1; }
.sb-logout { color: var(--rose-chip); }

/* 群組表頭（NPI／ECN）：13px 加粗 ＋ 底線分隔，分區明顯 */
.sb-grp {
  display: flex; align-items: center; gap: 7px;
  margin: 8px 10px 4px; padding: 6px 2px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--sb-grp);
  border-bottom: 1px solid var(--sidebar-rule);
}
.sb-grp.sb-grp-ecn { margin-top: 12px; }
.sb-grp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sage-300); }
.sb-grp-ecn .sb-grp-dot { background: var(--amber-accent); }
.sb-group-empty { font-size: 11px; color: var(--sidebar-ink2); padding: 3px 12px 4px; }

.sb-proj {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  border: none; background: none; color: var(--sb-text);
  border-radius: var(--r8); text-align: left; font-size: 12.5px;
  transition: background .15s; width: 100%; cursor: pointer; position: relative;
}
.sb-proj:hover { background: var(--sb-hover); }
.sb-proj.active { background: var(--sb-active); color: var(--ink-inverse); font-weight: 600; }
.sb-proj.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 0 3px 3px 0; background: var(--amber-accent); }
.sb-proj .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-proj .count { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--sidebar-ink2); }

/* 建案 CTA：實心琥珀，側欄唯一高對比焦點 */
.sb-add-proj {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; margin: 12px 10px 4px;
  border: none; background: var(--amber-accent); color: var(--amber-accent-ink);
  border-radius: var(--r8); font-size: 13px; font-weight: 600;
  transition: background .15s; width: calc(100% - 20px); cursor: pointer;
}
.sb-add-proj:hover { background: var(--amber-accent-hover); }
.sb-add-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 15px; line-height: 1; }

.sb-bottom { flex: none; padding: 6px 8px 10px; border-top: 1px solid var(--sidebar-rule); }
.sb-foot { font-family: var(--mono); font-size: 9px; color: var(--sidebar-ink2); text-align: center; padding: 6px 0 2px; letter-spacing: .08em; }

/* ─── 收合態（64px · icon only · hover 出原生 title）─── */
.app.sb-collapsed .sb-txt { display: none !important; }   /* !important：蓋過專案名 span 的 inline display:flex，收合＝純圖示不留半截字 */
.app.sb-collapsed .sb-brand { padding: 16px 0 8px; }
.app.sb-collapsed .sb-brand-row { justify-content: center; }
.app.sb-collapsed .sb-user-badge { justify-content: center; padding: 7px 0; background: none; }
.app.sb-collapsed .sb-section { padding: 8px 6px 0; }
.app.sb-collapsed .sb-label { display: none; }
.app.sb-collapsed .sb-item, .app.sb-collapsed .sb-proj { justify-content: center; padding: 9px 0; gap: 0; }
.app.sb-collapsed .sb-item .ico { width: auto; }
.app.sb-collapsed .sb-proj .count { display: none; }
.app.sb-collapsed .sb-add-proj { margin: 12px 8px 4px; padding: 10px 0; width: calc(100% - 16px); }
.app.sb-collapsed .sb-add-ico { font-size: 18px; }
.app.sb-collapsed .sb-grp { justify-content: center; margin: 8px 12px 4px; padding: 5px 0; border-bottom: none; font-size: 0; }
.app.sb-collapsed .sb-grp .sb-grp-dot { width: 18px; height: 2px; border-radius: 99px; }
.app.sb-collapsed .sb-foot { display: none; }

/* ─── MAIN ─── */
.main { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  padding: 18px 28px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.topbar.topbar-hidden { display: none; }
.tb-crumb { font-family: var(--mono); font-size: 11px; color: var(--ink3); letter-spacing: .04em; }
.tb-crumb b { color: var(--ink2); font-weight: 500; }
.tb-title { font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: -.01em; margin-top: 2px; }
.tb-spacer { flex: 1; }
.tb-meta-info { font-size: 11px; color: var(--ink3); font-family: var(--mono); }

.tb-action {
  padding: 7px 14px; background: var(--sage-500); color: var(--ink-inverse); border: none;
  border-radius: var(--r8); font-size: 13px; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
}
.tb-action:hover { background: var(--sage-600); }
.tb-action.ghost { background: var(--surface); color: var(--ink2); border: 1px solid var(--rule2); }   /* 冷灰底定版：次要鈕實白底+較深邊，不與冷灰背景同色（原 transparent 會隱形）*/
.tb-action.ghost:hover { background: var(--stone-50); border-color: var(--stone-300); }
.tb-action.danger { background: var(--danger); }
.tb-action.danger:hover { background: var(--danger-d); }
.tb-action.ink { background: var(--ink-btn); }   /* §16 塊2：匯出深墨灰主鈕 */
.tb-action.ink:hover { background: var(--stone-900); }
.tb-action.ws-smart { background: var(--amber-accent); color: var(--amber-accent-ink); }   /* 個人工作台「智慧排程」＝方向⑤琥珀點綴（時段排程動作·scoped 不動全站 sage 主鈕） */
.tb-action.ws-smart:hover { background: var(--amber-accent-hover); }
.tb-action:disabled,
.tb-action:disabled:hover {
  background: var(--stone-200);
  color: var(--stone-400);
  cursor: not-allowed;
}

.tabs { display: inline-flex; padding: 4px; background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--r10); gap: 2px; }   /* 冷灰底定版：頁籤槽實白底+邊，不與冷灰背景同色（原 surface2 幾乎同底色）*/
.tab-btn { padding: 9px 20px; border: none; background: none; border-radius: var(--r8); font-size: 14px; color: var(--ink3); transition: all .15s; font-weight: 500; cursor: pointer; }
.tab-btn.active { background: var(--sage-500); color: var(--ink-inverse); }
.tab-btn:hover:not(.active) { color: var(--ink2); }
/* 設定頁子分頁：CSS display 切換（4 個 panel 全留 DOM，避免 saveSettings 跨 tab 讀不到元素而 crash） */
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.view-tabs-bar { display: flex; justify-content: flex-start; margin-bottom: var(--r12); }
.view-tabs-bar .tab-btn.active { background: var(--nav-active); }   /* §16 塊3：專案四視圖選中=冷板藍，scoped 不動全域 tab（設定/總板維持 sage）*/
/* §16 塊4c：四視圖 segmented control 隔線（鈕間細豎線；選中鈕兩側隔線隱藏，:has 前向選取前一鈕）*/
.view-tabs-bar .tab-btn { position: relative; }
.view-tabs-bar .tab-btn:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: var(--rule2); }
.view-tabs-bar .tab-btn.active::after,
.view-tabs-bar .tab-btn:has(+ .tab-btn.active)::after { display: none; }

.content { padding: 22px 24px 60px; flex: 1; }
.page { display: none; animation: fadeIn .2s ease both; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

.viewonly-banner {
  background: var(--amber-l); border-left: 3px solid var(--amber);
  padding: 10px 14px; margin-bottom: 14px; border-radius: 0 var(--r8) var(--r8) 0;
  font-size: 12px; color: var(--amber-ink); display: none; align-items: center; gap: 8px;
}
body.viewonly .viewonly-banner { display: flex; }
body.viewonly [data-edit] { opacity: .35; pointer-events: none; }
body.viewonly [data-edit-hide] { display: none !important; }
body.viewonly .cloud-sync-sec { display: none; }

/* ─── 套範本提醒清單（沿用 viewonly-banner amber 版型，常駐於 #content 頂部） ─── */
/* §19.11：套範本提醒改設計款彈窗（原 #content 黏著 banner 已退役） */
.tpl-warn-modal-body { font-size: 12.5px; color: var(--ink2); line-height: 1.6; text-align: left; }
.tpl-warn-list { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.tpl-warn-list li { line-height: 1.5; font-size: 12px; color: var(--ink3); }
.tpl-warn-more { list-style: none; color: var(--ink4); font-style: italic; }
.tpl-warn-tip { margin-top: 10px; padding: 8px 12px; background: var(--sage-50); border-radius: var(--r6); font-size: 12px; color: var(--ink2); }

/* ─── STATS ─── */
.stats-row {
  display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12);
  overflow: hidden; margin-bottom: 14px;
}
.stat {
  flex: 1; display: flex; align-items: baseline; gap: 6px;
  padding: 8px 14px; position: relative;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: none; }
.stat.stat-urgent { cursor: pointer; transition: background .15s; }
.stat.stat-urgent:hover { background: var(--surface2); }
.stat-num { font-family: var(--sans); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--ink); letter-spacing: -.02em; }
.stat.stat-urgent .stat-num { color: var(--terracotta); }
.stat-label { font-family: var(--mono); font-size: 12px; color: var(--ink3); }

/* ─── 專案 KPI 卡片排(專案頁頂部,沿用 .stats-row/.stat)─── */
.proj-kpi .stat { cursor: help; }                                              /* 有 data-tip tooltip 的提示 */
.proj-kpi .stat-pct { font-family: var(--mono); font-size: 11px; color: var(--ink3); }  /* 副標:%/降級數字常駐 */
.proj-kpi .stat.kpi-warn .stat-num { color: var(--rose); }                     /* 延遲>0 / 已逾期 警示色（冷灰底定版：陶土橘→冷紅 rose，去暖點）*/
.proj-kpi .stat.kpi-stack { flex-wrap: wrap; }                                 /* stack 模式:副標換獨立第二行 */
.proj-kpi .stat-sub { flex-basis: 100%; font-family: var(--mono); font-size: 11px; color: var(--ink3); margin-top: 1px; }

/* ─── M2 視覺對齊:KPI 改獨立小卡(PM-Core 卡片語言 surface/rule/r10/shadow-sm;只 override .proj-kpi 作用域,不動通用 .stats-row/.stat) ─── */
.stats-row.proj-kpi { background: none; border: none; overflow: visible; gap: 10px; }   /* 長條容器→透明,卡距用 gap */
.proj-kpi .stat {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r10);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  flex-direction: column; align-items: flex-start; gap: 2px;   /* 直排:標題上、大數字、說明下 */
  border-top: 3px solid var(--rule);                           /* 頂部細彩線:預設中性,tone/warn 覆蓋 */
}
.proj-kpi .stat.kpi-warn { border-top-color: var(--rose); }
.proj-kpi .stat.kpi-tone-task    { border-top-color: var(--ink4); }
.proj-kpi .stat.kpi-tone-done    { border-top-color: var(--sage-500); }
.proj-kpi .stat.kpi-tone-wip     { border-top-color: var(--navy); }
.proj-kpi .stat.kpi-tone-delayed { border-top-color: var(--rose); }
.proj-kpi .stat.kpi-tone-overall { border-top-color: var(--sage-500); }
.proj-kpi .stat.kpi-tone-days    { border-top-color: var(--slate); }
/* DOM 序是 num→label→sub,用 order 反轉成 label→num→sub,不動 app.js */
.proj-kpi .stat-label { order: 1; font-size: 11px; font-family: var(--sans); color: var(--ink4); letter-spacing: 0; }   /* 冷灰底定版：中文標籤走 sans（原 mono 顯英文臉），比照 Mockup 淡灰小標 */
.proj-kpi .stat-num { order: 2; font-size: 24px; }
.proj-kpi .stat-sub { order: 3; flex-basis: auto; }

/* ─── 專案階段進度卡(專案頁,圖1 第二塊)─── */
.proj-stages-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 14px 16px; margin-bottom: 14px; }
.proj-stages-head { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.proj-stages-count { font-family: var(--mono); font-size: 12px; color: var(--ink4); margin-left: 6px; }

/* 分組膠囊標題 + 分隔線 */
.stage-group-cap { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }
.stage-group-cap:first-of-type { margin-top: 2px; }
.stage-cap-pill { font-size: 12.5px; font-weight: 500; padding: 3px 12px; border-radius: 99px; }
.stage-cap-pill.cap-0 { color: var(--sage-700); background: var(--sage-50); border: 1px solid var(--sage-100); }
.stage-cap-pill.cap-1 { color: var(--khaki-ink); background: var(--khaki-bg); border: 1px solid var(--khaki); }
.stage-cap-pill.cap-2 { color: var(--clay-ink); background: var(--clay-from); border: 1px solid var(--clay); }
.stage-pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-pick { font-size: 12.5px; font-weight: 500; padding: 4px 12px; border-radius: 99px; cursor: pointer; border: 1px dashed var(--rule2); background: var(--surface2); color: var(--ink3); transition: background .12s, color .12s, border-color .12s; }
.stage-pick:hover { border-color: var(--ink4); }
.stage-pick.on { background: var(--sage-50); color: var(--sage-700); border: 1px solid var(--sage-100); }
/* 選型引導頁（建立新案 wizard，§19.10 A.0）：兩欄型別卡、純白線框；NPI 綠／ECN 琥珀對齊 sidebar 色點，全走 :root */
.sb-add-main { margin-bottom: 8px; }
.modal:has(.wiz) { width: min(1150px, 88vw); }   /* 選型精靈＝重大不可逆選擇：Modal 放大到近滿版，字級升舒適閱讀（Gemini 覆核） */
.wiz-warn { display: flex; align-items: flex-start; gap: 9px; background: var(--hint-head); border: 1px solid var(--rule); border-radius: var(--r8); padding: 11px 14px; margin-bottom: 16px; font-size: 13.5px; color: var(--ink2); line-height: 1.6; }
.wiz-warn-ic { color: var(--amber-accent); font-size: 18px; flex: none; margin-top: 1px; }
/* subgrid：左右兩欄共用 6 條 row 軌（表頭/說明/卡1/卡2/卡3/防過勞），同 row 等高 → 左右卡片表頭對齊，短卡在 row 內自然留白 */
.wiz-cols { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); column-gap: 20px; row-gap: 10px; }
.wiz-col { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 10px; }
.wiz-colhead { display: flex; align-items: center; gap: 8px; border-radius: var(--r8); padding: 9px 13px; font-size: 15px; font-weight: 600; }
.wiz-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wiz-npi .wiz-colhead { background: var(--sage-50); border: 1px solid var(--sage-200); color: var(--sage-700); }
.wiz-npi .wiz-dot { background: var(--sage-500); }
.wiz-ecn .wiz-colhead { background: var(--amber-l); border: 1px solid var(--amber-border); color: var(--amber-ink); }
.wiz-ecn .wiz-dot { background: var(--amber-accent); }
.wiz-colnote { font-size: 12.5px; color: var(--ink4); padding: 2px 3px 0; line-height: 1.55; }   /* 上下距交給 row-gap */
.wiz-card { border: 1px solid var(--rule); border-radius: var(--r12); padding: 13px 15px; background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }   /* 卡距改由 .wiz-col row-gap 統一（subgrid） */
.wiz-npi .wiz-card { border-color: var(--sage-100); }
.wiz-ecn .wiz-card { border-color: var(--rule); }   /* 預設淡（中性細框，色點已足以識別），hover 才亮琥珀 */
.wiz-npi .wiz-card:hover { border-color: var(--sage-400); box-shadow: var(--shadow-sm); }
.wiz-ecn .wiz-card:hover { border-color: var(--amber-accent); box-shadow: var(--shadow-sm); }   /* ECN 卡 hover＝琥珀高亮，不落回 sage */
.wiz-ct { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.wiz-ci { font-size: 17px; color: var(--sage-600); flex: none; }
.wiz-cn { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.wiz-sev { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wiz-sev-s { background: var(--sage-500); }
.wiz-sev-m { background: var(--amber-accent); }
.wiz-sev-l { background: var(--rose); }
.wiz-cd { font-size: 13.5px; color: var(--ink3); line-height: 1.6; margin-bottom: 8px; }
.wiz-ch { font-size: 12px; color: var(--ink4); border-top: 1px solid var(--rule); padding-top: 7px; }
.wiz-prot { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--sage-700); background: var(--sage-50); border: 1px solid var(--sage-100); border-radius: var(--r8); padding: 9px 12px; line-height: 1.55; }
.wiz-prot-ic { color: var(--sage-600); font-size: 15px; flex: none; margin-top: 1px; }

/* §19.10 A.1 ECN 開案畫面（s1 頁 ECN 層）：分級 S/M/L＋說明行／ROI 下拉＋原因／PM 協調條／名冊（2026-07-02 覆核修訂：Banner/徽章/Fan-out 拔除） */
.s1-pagesub { font-size: 12px; color: var(--ink4); margin-top: 2px; }
.s1-ecnmeta { display: flex; flex-direction: column; gap: 14px; margin: 2px 0 12px; }
.s1-ecnmeta-col { display: flex; flex-direction: column; gap: 5px; }
.s1-ecnmeta-col textarea { padding: 8px 10px; border: 1px solid var(--rule2); border-radius: var(--r6); font-size: 13px; font-family: inherit; line-height: 1.6; resize: vertical; }
.s1-src-in { max-width: 340px; }        /* §19.6.1 #1：需求單號＝一串英數，縮窄 */
.s1-reason-in { max-width: 620px; }     /* §19.6.1 #1：背景原因 2~3 句，縮小不占大框 */
/* §19.6.1 #1：日期＋設變分級共框（同屬影響甘特的排程設定） */
.s1-sched-frame { border: 1px solid var(--amber-border); border-radius: var(--r10); padding: 12px 14px 14px; margin-bottom: 14px; background: var(--surface); }
.s1-sched-lbl { font-size: 12px; font-weight: 600; color: var(--amber-ink); margin-bottom: 10px; }
.s1-sched-frame .s1-ecnmeta { margin-bottom: 0; }
.s1-szpanel { min-height: 40px; font-size: 12px; line-height: 1.6; color: var(--amber-ink); background: var(--amber-l); border: 1px solid var(--amber-border); border-radius: var(--r6); padding: 8px 11px; margin-top: 2px; }   /* 分級提示＝固定高度淡琥珀底塊（緊貼按鈕正下方，不跳版、不蒼白） */
/* §19.6.1／§19.10 A.1：兩型 ROI 精簡範例卡（選型視覺指南，選中琥珀高亮·另一張淡化） */
/* §19.6.1 #1：設變類型 Radio Cards（可點·選中亮邊框＋琥珀底＋右上 ✓） */
.s1-roicards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2px; }
.s1-roicard { position: relative; border: 1.5px solid var(--rule2); border-radius: var(--r10); padding: 14px 16px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.s1-roicard:hover { border-color: var(--amber-accent); }
.s1-roicard.on { border-color: var(--amber-accent); background: var(--amber-l); box-shadow: 0 0 0 1px var(--amber-accent); }
.s1-rc-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--amber-accent); color: var(--amber-icon-fg); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.s1-rc-h { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 9px; padding-right: 26px; }
.s1-roicard.on .s1-rc-h { color: var(--amber-ink); }
.s1-rc-sec { font-size: 11.5px; line-height: 1.55; color: var(--ink3); margin-bottom: 7px; }
.s1-rc-sec:last-child { margin-bottom: 0; }
.s1-rc-sec b { color: var(--ink2); font-weight: 600; }
.s1-rc-lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--ink4); text-transform: uppercase; margin-bottom: 1px; }
@media (max-width: 640px) { .s1-roicards { grid-template-columns: 1fr; } }
.s1-qmark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 4px; border-radius: 50%; background: var(--stone-100); color: var(--ink3); font-size: 10.5px; font-weight: 600; cursor: help; }
.s1-qtip { display: none; position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: 300px; background: var(--stone-600); color: var(--ink-inverse); font-size: 11px; font-weight: 400; line-height: 1.6; text-align: left; padding: 8px 11px; border-radius: var(--r6); z-index: 60; box-shadow: var(--shadow-sm); }
.s1-qmark:hover .s1-qtip { display: block; }
.s1-ecnmeta-col input { padding: 7px 10px; border: 1px solid var(--rule2); border-radius: var(--r6); font-size: 13px; min-width: 220px; }
.s1-szrow { display: flex; gap: 8px; }
.s1-szbtn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 16px; border: 1px solid var(--rule2); border-radius: var(--r8); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.s1-szbtn b { font-size: 14px; font-weight: 600; color: var(--ink); }
.s1-szbtn span { font-size: 10.5px; color: var(--ink4); }
.s1-szbtn:hover { border-color: var(--sage-400); }
.s1-szbtn.on { border: 1.5px solid var(--sage-500); background: var(--sage-50); }
.s1-szbtn.on b { color: var(--sage-700); }

/* §19.10 A.1 ECN 頁琥珀主題（Gemini 覆核：內外層色彩一致——選型頁 ECN 琥珀 → 開案頁操作元件同琥珀；白底共用 .s1-preview） */
.s1-ecnpage .s1-szbtn:hover { border-color: var(--amber-accent); }
.s1-ecnpage .s1-szbtn.on { border: 1.5px solid var(--amber-accent); background: var(--amber-l); }
.s1-ecnpage .s1-szbtn.on b { color: var(--amber-ink); }
.s1-ecnpage .s1-dynhint:not(.s1-dynhint-alert) { background: var(--amber-l); color: var(--amber-ink); }   /* 含初始引導態，與分級/類型提示同底色（alert 紅警示保留） */
.s1-ecnpage .s1-pm-track { color: var(--amber-ink); background: rgba(217,154,60,.18); border-color: var(--amber-accent); }
.s1-ecnpage .stage2-foot .tb-action:not(.ghost) { background: var(--amber-accent); color: var(--amber-icon-fg); }
.s1-ecnpage .stage2-foot .tb-action:not(.ghost):hover { background: var(--amber-accent-hover); }
.s1-ecnpage .case-card { border-left: 1px solid var(--rule); border-radius: var(--r12); }   /* 單案制：左側粗綠裝飾線拿掉（Fan-out 縮排視覺已無意義） */
.s1-ecn-helpol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.7; color: var(--ink2); }
.s1-roster { margin: 14px 0 2px; }
.s1-pm-bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--rule); }
.s1-pm-track { flex: 1; font-size: 11px; font-weight: 600; color: var(--sage-700); background: rgba(74,124,92,.20); border: 1px dashed var(--sage-500); border-radius: var(--r6); padding: 3px 10px; }

/* Excel 上傳區（路線B ② 選檔鈕 + 三態狀態） */
.excel-upload .eu-filebtn { display:inline-flex; align-items:center; gap:var(--r4); padding:var(--r6) var(--r10); border:1px solid var(--rule); border-radius:var(--r6); background:var(--surface); font-size:13px; color:var(--ink); cursor:pointer; }
.excel-upload input[type="file"] { display:none; }
.excel-status { margin-top:var(--r8); font-size:13px; padding:var(--r6) var(--r8); border-radius:var(--r6); }
.excel-status:empty { display:none; }
.excel-status.ok { color:var(--sage-700); background:var(--sage-50); }
.excel-status.wait { color:var(--ink3); background:var(--surface2); }
.excel-status.err { color:var(--rose-ink); background:var(--rose-l); }

/* 案別卡（主案/另案）：左側色條區分，圓角讓出左側給色條 */
.case-card {
  border: 1px solid var(--rule); border-left: 4px solid var(--rule);
  border-radius: 0 var(--r12) var(--r12) 0;
  padding: var(--r10) var(--r12); margin: var(--r10) 0;
}
.case-main  { border-left-color: var(--proj-c1); }
.case-other { border-left-color: var(--proj-c3); }
.case-card-head { display: flex; align-items: flex-end; gap: var(--r8); }
.case-card-head .form-field { flex: 1; }
.case-name-hint { font-size: 11px; color: var(--ink3); margin-top: var(--r4); }
.stage-cap-rule { flex: 1; height: 0; border-top: 1px solid var(--rule); }

/* 表頭小字 */
.stage-colhead { display: flex; align-items: center; gap: 10px; padding: 2px 0 4px; }
.stage-bar-spacer { flex: 1; }
.stage-pct-h { width: 46px; text-align: right; font-size: 10.5px; color: var(--ink4); }
.stage-cnt-h { width: 64px; text-align: right; font-size: 10.5px; color: var(--ink4); }

/* 資料列（兩行高：階段名 + 日期） */
.stage-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: help; border-top: 1px solid var(--surface2); }
.stage-name { width: 150px; flex-shrink: 0; }
.stage-name-txt { font-size: 13.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-date { font-family: var(--mono); font-size: 11px; color: var(--ink3); margin-top: 2px; }
.stage-date-lbl { color: var(--ink4); margin-right: 3px; }
.stage-date-empty { color: var(--ink4); }
.stage-bar { flex: 1; height: 9px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.stage-bar-fill { height: 100%; border-radius: 99px; }
.stage-bar-fill.s100 { background: var(--sage-500); }
.stage-bar-fill.s50  { background: var(--slate); }
.stage-bar-fill.s1   { background: var(--amber); }
.stage-bar-fill.s0   { background: var(--rule2); }
.stage-pct { width: 46px; text-align: right; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink2); }
.stage-pct.s0 { color: var(--ink4); }
.stage-cnt { width: 64px; text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--ink3); }
.proj-stages-empty { font-size: 12px; color: var(--ink3); padding: 6px 0; }
.proj-stages-formula { font-size: 11px; color: var(--ink3); margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--rule); line-height: 1.4; }

/* ─── 專案部門負荷卡(專案頁,圖1 第三塊;卡框/標題/公式複用 .proj-stages-*)─── */
.dept-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: help; }
.dept-name { width: 150px; flex-shrink: 0; font-size: 13.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dept-bar { flex: 1; height: 14px; background: var(--surface2); border-radius: var(--r6); overflow: hidden; display: flex; }.dept-cnt { width: 48px; text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--ink3); }
.dept-head { display: flex; align-items: center; justify-content: space-between; }  /* 只掛在部門負荷標題列,不污染共用 .proj-stages-head */
/* 部門卡逾期迷你清單(buildProjDeptHtml overdueHtml) */
.dept-overdue { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }.dept-overdue-title { font-size: 13px; font-weight: 600; color: var(--ink); }/* §18.10c／§19.10 F.3 內頁負荷欄三卡（部門負荷工時／PM 協調負荷／緊急 issue） */
.proj-load-col { display: flex; flex-direction: column; }
.pl-card { margin-bottom: 12px; }
.pl-card:last-child { margin-bottom: 0; }
.pl-sub { font-size: 11px; color: var(--ink4); font-weight: 400; margin-left: 8px; }
.pl-sect { font-size: 11px; font-weight: 600; color: var(--ink3); padding: 8px 14px 2px; }
.pl-vhead { font-size: 12px; font-weight: 700; color: var(--ink); padding: 10px 14px 2px; margin-top: 6px; border-top: 1px solid var(--rule); }
.pl-vhead:first-of-type { margin-top: 0; border-top: 0; }
.pl-empty-cta { padding: 8px 14px; text-align: center; }
/* 刀3 歷史負荷帳（§18.10c）：入口小鈕＋階段×部門矩陣（橫捲只掛表、規則14） */
.pl-hist-btn { flex: none; padding: 3px 10px; font-size: 11px; color: var(--ink3); background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r6); cursor: pointer; }
.pl-hist-btn:hover { background: var(--sage-50); color: var(--sage-700); border-color: var(--sage-200); }
.ecn-hud-t .pl-hist-btn { height: 32px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--sage-700); background: var(--sage-50); border: 1px solid var(--sage-200); }   /* ECN HUD 版加大醒目（§6.5 32px） */
.ecn-hud-t .pl-hist-btn:hover { background: var(--sage-100); }
.lh-scroll { overflow-x: auto; margin-bottom: 16px; }
.lh-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.lh-tbl th, .lh-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.lh-tbl thead th { font-weight: 600; color: var(--ink2); background: var(--surface2); }
.lh-st { text-align: left; color: var(--ink2); }
.lh-h { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink3); }
.lh-sum { font-weight: 600; color: var(--ink); }
.lh-total td { font-weight: 600; color: var(--ink2); background: var(--sage-50); }
.lh-grand { display: flex; justify-content: space-between; padding: 10px 4px 0; font-size: 13px; font-weight: 700; color: var(--ink); }
/* §19.6 BOM·ROI 差額工具（Tab B 波1）：幣別列/四區/合計/ROI/呆滯警示，全走 :root */
.bom-wrap { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* §19.6 泛化 NPI · Wave2：一案多機種 */
.bomm-wrap { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bomm-import, .bomm-sumcard { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r10); padding: 16px 18px; }
.bomm-hd { font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 12px; }
.bomm-import { width: fit-content; max-width: 100%; }   /* §13.9：照 ECN 上傳卡適中寬（.bxb-blk:has(.bxb-imp) 同法），文字少不滿版 */
.bomm-sumcard { width: fit-content; max-width: 100%; }   /* §13.9：型號總表卡外框跟內容走，不留右側大空白 */
.bomm-toprow { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }   /* §13.9：①匯入卡＋型號總表左右並排（stretch 等高不突兀），窄幕 wrap 退直排 */
.bomm-import { display: flex; flex-direction: column; }   /* §13.9：等高時內容直欄分佈 */
.bomm-import .bxb-cur { margin-top: auto; }   /* 幣別＋比對鈕壓底，上傳卡在頂、不留中段尷尬空白 */
.bomm-head { width: fit-content; max-width: 100%; }   /* §13.9：HintBox＋並排列同寬容器（寬度由並排列決定） */
.bom-locked { pointer-events: none; opacity: .72; }   /* §19.5 Tab B closed 鎖：結案唯讀（照 .ecn-tbl-locked 同 pattern；handler 另有 _bomGuard 保底） */
.bomm-head .hintbox { width: 0; min-width: 100%; box-sizing: border-box; }   /* HintBox 不貢獻寬度、吃滿容器＝與並排列右邊界對齊 */
.bomm-row { display: grid; grid-template-columns: repeat(2, 320px); gap: 12px; margin-bottom: 12px; }
@media (max-width: 760px) { .bomm-import { width: auto; } .bomm-row { grid-template-columns: 1fr; } }
.bomm-drop { border: 1px dashed var(--stone-200); border-radius: var(--r8); padding: 12px 14px; min-width: 0; }
.bomm-drop.done { border-style: solid; border-color: var(--sage-200); background: var(--sage-50); }
.bomm-drop-tag { font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 8px; }
.bomm-drop-ph { cursor: pointer; color: var(--ink3); font-size: 13px; }
.bomm-drop-ph .big { margin-right: 6px; }
.bomm-drop-done { font-size: 13px; color: var(--sage-700); }
.bomm-tbl-scroll { overflow-x: auto; }
.bomm-tbl { width: auto; border-collapse: collapse; font-size: 13px; font-family: var(--mono); }   /* §13.9：資料五欄不滿版，自然寬 */
.bomm-tbl th, .bomm-tbl td { padding: 7px 22px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.bomm-tbl th:not(:first-child) { text-align: right; }   /* §13.9：數字欄表頭與內容同右對齊 */
.bomm-tbl th { background: var(--stone-50); font-weight: 700; border-bottom: 2px solid var(--amber-accent); color: var(--ink2); }
.bomm-tbl td.num { text-align: right; }
.bomm-tbl td.neg { color: var(--rose-ink); }   /* §13.9 Paul 定 B：總表財報慣例＝負數紅字（正數黑；語意省綠增紅留差異四區） */
.bomm-tbl tbody tr { cursor: pointer; }
.bomm-tbl tbody tr:hover { background: rgba(217,154,60,.07); }
.bomm-tbl tr.bomm-sel { background: var(--amber-l); }
.bomm-tbl tr.bomm-tot td { font-weight: 700; border-top: 2px solid var(--rule); background: var(--surface2); }
.bomm-unmatched { color: var(--rose-ink); font-size: 11px; font-weight: 600; }
.bomm-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bomm-picker label { font-size: 13px; font-weight: 600; color: var(--ink2); }
.bomm-picker select { height: 36px; padding: 4px 10px; font-size: 14px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); }
.bomm-picker-note { font-size: 11px; color: var(--ink3); }
.bom-wave-tag { font-size: 11px; color: var(--amber-ink); background: var(--amber-l); border-radius: 99px; padding: 1px 8px; margin-left: 6px; }
.bom-cfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bom-cfield label { font-size: 12px; color: var(--ink3); }
.bom-cfield select, .bom-cfield input { height: 36px; padding: 4px 10px; font-size: 14px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--ink); }
.bom-cfield input:disabled { background: var(--surface2); color: var(--ink3); }
.bom-rate { flex-direction: row; align-items: center; gap: 8px; }
.bom-rate label { margin-right: 4px; }
.bom-rate span { font-size: 13px; color: var(--ink2); }
.bom-rate input { width: 90px; }
/* 欄位對應面板（§13.7）：嵌入（WBS 兩處 modal 內）/彈窗（BOM）雙模式共用。
   單欄一列一欄位（label 固定寬不截字、下拉滿寬）＋圖例列＋? hover 定義（§6 tokens：label 12px/控件 32px/間距 8px 網格） */
/* §精簡精靈欄位對應面板（2026-07-08 改版：需選在上／已配反灰收折）。.imap-sect 仍供 BOM 匯出精靈(.bxw)用 */
.imap-panel { border: 1px solid var(--stone-100); border-radius: var(--r8); padding: 16px; background: var(--surface); text-align: left; }
.imap-sect { font-size: 13px; font-weight: 600; color: var(--ink); margin: 16px 0 8px; }
.imap-req { color: var(--rose-ink); }
.imap-sel { width: 100%; min-width: 0; height: 40px; line-height: 1.4; box-sizing: border-box; padding: 8px 10px; font-size: 14px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--ink); }   /* §6.5 表單標準 40px；鎖 box-sizing/line-height 防全站 select 內距把字吃掉 */
.imap-sel.imap-miss { border-color: var(--rose); background: var(--rose-l); }
.imap-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; gap: 12px; flex-wrap: wrap; }
.imap-rem { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); cursor: pointer; }
.imap-rem input { accent-color: var(--sage-600); }
/* 頂列：說明 + 下載範例 */
.imap-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.imap-top-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink3); line-height: 1.5; }
.imap-sample { flex: none; border: 1px solid var(--sage-500); background: var(--sage-50); color: var(--sage-700); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: var(--r6); cursor: pointer; white-space: nowrap; }
.imap-sample:hover { background: var(--sage-100); }
/* ① 需要你確認 */
.imap-eyebrow { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.imap-eb-n { width: 20px; height: 20px; border-radius: 50%; background: var(--amber); color: var(--surface); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.imap-eb-t { font-size: 13.5px; font-weight: 700; color: var(--amber-ink); }
.imap-eb-c { font-size: 11px; font-weight: 700; color: var(--amber-ink); background: var(--amber-l); border-radius: 99px; padding: 1px 8px; }
.imap-eb-h { font-size: 11.5px; color: var(--ink4); }
.imap-need { display: flex; flex-direction: column; gap: 10px; }
.imap-card { border: 1px solid var(--amber-border); background: var(--amber-l); border-radius: var(--r8); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.imap-card.req { border-color: var(--rose); background: var(--rose-l); }
.imap-card-field { font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.imap-badge { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; }
.imap-badge.req { color: var(--rose-ink); background: var(--rose-chip); }
.imap-badge.opt { color: var(--ink4); background: var(--stone-100); font-weight: 500; }
.imap-card-sel { grid-column: 2; grid-row: 1 / span 2; min-width: 190px; }
.imap-card-why { grid-column: 1; font-size: 11.5px; color: var(--amber-ink); line-height: 1.5; }
.imap-card.req .imap-card-why { color: var(--rose-ink); }
.imap-allgood { font-size: 13px; color: var(--sage-700); background: var(--sage-50); border: 1px solid var(--sage-100); border-radius: var(--r8); padding: 12px 14px; font-weight: 600; }
/* ② 系統已自動對應（反灰收折） */
.imap-auto { margin-top: 14px; border: 1px dashed var(--stone-200); border-radius: var(--r8); background: var(--stone-50); }
.imap-auto-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer; font-size: 12.5px; color: var(--ink4); user-select: none; }
.imap-chev { color: var(--ink4); transition: transform .15s; }
.imap-auto-head.open .imap-chev { transform: rotate(90deg); }
.imap-auto-lead { font-weight: 600; color: var(--ink2); }
.imap-auto-sub { color: var(--ink4); }
.imap-auto-pill { margin-left: auto; font-size: 11px; color: var(--sage-700); background: var(--sage-chip); padding: 2px 9px; border-radius: 99px; font-weight: 600; }
.imap-auto-body { padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 1px; }
.imap-arow { display: grid; grid-template-columns: 150px 18px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: var(--r6); font-size: 12px; color: var(--ink4); }
.imap-arow:hover { background: var(--surface); }
.imap-asys { font-weight: 600; color: var(--ink3); }
.imap-aarr { color: var(--sage-500); text-align: center; }
.imap-asrc { color: var(--ink4); }
.imap-aok { font-size: 11px; color: var(--sage-600); }
.imap-aedit { font-size: 11px; color: var(--ink4); text-decoration: underline; cursor: pointer; }
.imap-aedit:hover { color: var(--sage-700); }
.imap-ahide { grid-column: 1 / -1; margin-top: 4px; }
.bom-zone { border: 1px solid var(--rule); border-radius: var(--r8); overflow: hidden; }
.bom-zhead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ecn-zone-head); border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 13px; color: var(--ink); }   /* §19.6.1 分類標題列加深淺灰＝分群界線清楚 */
.bom-zchev { color: var(--ink4); }
.bom-zcnt { font-size: 11px; color: var(--ink3); background: var(--surface); border: 1px solid var(--rule); border-radius: 99px; padding: 1px 8px; }
.bom-zsub { font-size: 11px; color: var(--amber-ink); background: var(--amber-l); border-radius: 99px; padding: 1px 8px; }
.bom-zall { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; color: var(--ink3); font-weight: 400; cursor: pointer; }
.bom-zall input { accent-color: var(--sage-600); }
.bom-zsum { font-family: var(--mono); font-weight: 700; font-size: 13px; min-width: 56px; text-align: right; }
.bom-zall + .bom-zsum { min-width: 0; margin-left: 12px; }
.bom-zscroll { overflow-x: auto; }
.bom-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }   /* §19.6.1 #2：表格內文全面 14px */
.bom-tbl th, .bom-tbl td { padding: 7px 10px; border-top: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.bom-tbl thead th { font-size: 12px; font-weight: 600; color: var(--ink3); background: var(--stone-50); border-top: 0; border-bottom: 2px solid var(--amber-accent); }   /* §19.6.1 欄位表頭＝唯一分隔色 */
.bom-tbl tbody tr:hover td { background: rgba(217,154,60,.07); }   /* §19.6.1 列 hover 淡琥珀防看錯行 */
.bom-empty { color: var(--ink4); font-size: 12px; }
.bom-in { height: 32px; padding: 4px 7px; font-size: 14px; border: 1px solid var(--stone-200); border-radius: var(--r4); background: var(--surface); color: var(--ink); }   /* §19.6.1 #2：輸入框 14px */
.bom-in.w { width: 130px; }
.bom-in.n { width: 82px; text-align: right; }   /* 容 2~4 位小數價格不被截（單價可到 4 位） */
.bom-pq { display: inline-flex; align-items: center; gap: 4px; color: var(--ink3); }
.bom-sw { height: 28px; padding: 3px 6px; font-size: 12px; border-radius: 99px; border: 1px solid var(--rule); }
.bom-sw.imm { background: var(--rose-l); color: var(--rose-ink); }
.bom-sw.run { background: var(--sage-50); color: var(--sage-700); }
.bom-x { border: 0; background: transparent; color: var(--ink4); font-size: 14px; cursor: pointer; padding: 2px 6px; }
.bom-x:hover { color: var(--rose-ink); }
.bom-tbl b.up, .bom-zsum.up { color: var(--rose-ink); }
.bom-tbl b.dn, .bom-zsum.dn { color: var(--sage-700); }
.bom-deadv { color: var(--rose-ink); font-family: var(--mono); font-weight: 700; background: rgba(184,80,77,.09); padding: 1px 6px; border-radius: var(--r4); }
.bom-znote { padding: 8px 14px; font-size: 12px; color: var(--ink4); border-top: 1px solid var(--rule); }
/* ── §19.6.1 BOM·ROI 單頁三區塊重設計（石板底＋琥珀兩階＋白 header；引擎零變更只換 UI 殼） ── */
.ecn-panel:has(.bom-wrap) { background: transparent; border: none; border-radius: 0; padding: 0; }   /* Tab B：面板透明，三白卡浮於石板 */
.ecn-main:has(.bom-wrap) .ecn-tab.on::after { display: none; }   /* Tab B 面板透明→隱藏作用中分頁的白色連接橋（否則石板上浮一條白線） */
/* §ECN 拆頁·總覽（Phase 2）：面板透明→白卡浮於石板；說明框/甘特全寬＋2-column */
.ecn-panel:has(.ecn-ov) { background: transparent; border: none; border-radius: 0; padding: 0; }
.ecn-main:has(.ecn-ov) .ecn-tab.on::after { display: none; }
.ecn-ov { margin-top: 14px; }
.ecn-ov > .hintbox, .ecn-ov > .ecn-hudcard, .ecn-ov > .ecn-ov-ctx { margin-bottom: 16px; }
/* ① 背景動機 bar */
.ecn-ov-ctx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; background: linear-gradient(180deg, var(--surface), var(--paper)); border: 1px solid var(--rule); border-left: 4px solid var(--amber-accent); border-radius: var(--r12); padding: 13px 16px; }
@media (max-width: 820px) { .ecn-ov-ctx { grid-template-columns: 1fr; } }
.ecn-ov-ctxcell span { font-size: 11px; color: var(--ink4); display: block; }
.ecn-ov-ctxcell b { font-size: 13px; color: var(--ink); font-weight: 600; }
.ecn-ov-ctxcell.goal b { color: var(--amber-accent-ink); }
/* ③ 成本效益摘要 */
.ecn-ov-costgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.ecn-ov-costcell { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r8); padding: 9px 11px; }
.ecn-ov-costcell.hi { background: var(--sage-50); border-color: var(--sage-50); }
.ecn-ov-costcell .l { font-size: 11px; color: var(--ink4); }
.ecn-ov-costcell .v { font-size: 17px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ecn-ov-costcell.hi .v { color: var(--sage-700); }
.ecn-ov-costprog .cpbar { height: 10px; background: var(--cream); border-radius: 99px; overflow: hidden; }
.ecn-ov-costprog .cpfill { height: 100%; background: var(--sage-500); border-radius: 99px; }
.ecn-ov-costprog .cptxt { font-size: 12px; color: var(--ink3); margin-top: 6px; }
.ecn-ov-costprog .cptxt b { color: var(--sage-700); }
.ecn-ov-costempty { font-size: 12px; color: var(--ink4); line-height: 1.7; }
.ecn-ov-costbtn { display: block; margin-top: 10px; background: var(--amber-bright); color: var(--ink-inverse); border: none; border-radius: var(--r6); font-size: 12px; font-weight: 600; padding: 8px 14px; cursor: pointer; font-family: var(--sans); }
.ecn-ov-costbtn:hover { background: var(--amber-bright-hover); }
/* ⑥ 動態時間軸 */
.ecn-ov-tlall { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--amber-accent-ink); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--sans); }
.ecn-ov-tlall:hover { text-decoration: underline; }
.ecn-ov-tl { position: relative; padding-left: 18px; margin-top: 4px; }
.ecn-ov-tl::before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 6px; width: 2px; background: var(--rule2); }
.ecn-ov-tlitem { position: relative; padding: 0 0 12px; }
.ecn-ov-tlitem:last-child { padding-bottom: 0; }
.ecn-ov-tlitem::before { content: ''; position: absolute; left: -16px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber-accent); border: 2px solid var(--surface); }
.ecn-ov-tlitem.done::before { background: var(--sage-500); }
.ecn-ov-tldate { font-size: 11px; color: var(--ink4); font-variant-numeric: tabular-nums; }
.ecn-ov-tltxt { font-size: 12.5px; color: var(--ink2); margin-top: 1px; }
.ecn-ov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ecn-ov-cols { grid-template-columns: 1fr; } }
.ecn-ov-col > .ecn-hudcard { margin-bottom: 16px; }
.ecn-ov-col > .ecn-hudcard:last-child { margin-bottom: 0; }
.ecn-ov-sub { font-size: 11px; font-weight: 400; color: var(--ink4); margin-left: 8px; }
.ecn-ov-gvar { font-size: 12px; font-weight: 600; color: var(--ink3); margin: 8px 0 4px; }
/* ② 放大雙軌 */
.ecn-ov-dual { position: relative; height: 24px; background: var(--cream); border-radius: 99px; overflow: hidden; margin: 6px 0 4px; }
.ecn-ovd-act { position: absolute; left: 0; top: 0; bottom: 0; background: var(--amber-accent); border-radius: 99px; }
.ecn-ovd-gap { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--rose-l), var(--rose-l) 5px, transparent 5px, transparent 10px); }
.ecn-ovd-mark { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--ink2); }
.ecn-ovd-pcts { display: flex; gap: 18px; margin-top: 11px; }
.ecn-ovd-p span { font-size: 11px; color: var(--ink4); display: block; }
.ecn-ovd-p b { font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ecn-ovd-p.bad b { color: var(--rose-ink); }
.ecn-ovd-split { display: flex; gap: 10px; margin-top: 12px; }
.ecn-ovd-sp { flex: 1; border-radius: var(--r8); padding: 8px 11px; font-size: 12px; }
.ecn-ovd-sp.amber { background: var(--amber-l); color: var(--amber-ink); }
.ecn-ovd-sp.rose { background: var(--rose-l); color: var(--rose-ink); }
.ecn-ovd-sp b { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* ⑤ 負荷分佈 */
.ecn-ov-lrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.ecn-ov-lname { width: 68px; flex: none; color: var(--ink2); }
.ecn-ov-lbar-w { flex: 1; height: 16px; background: var(--cream); border-radius: 99px; overflow: hidden; }
.ecn-ov-lbar { height: 100%; border-radius: 99px; background: var(--amber-accent); }
.ecn-ov-lbar.hot { background: var(--rose); }
.ecn-ov-lval { width: 80px; flex: none; text-align: right; color: var(--ink3); font-variant-numeric: tabular-nums; }
/* ④ 卡關警報 */
.ecn-ov-seg { margin-left: auto; display: inline-flex; background: var(--cream); border-radius: 99px; padding: 2px; gap: 2px; font-size: 11px; font-weight: 500; }
.ecn-ov-seg span { padding: 2px 10px; border-radius: 99px; color: var(--ink3); cursor: pointer; }
.ecn-ov-seg span.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.ecn-ov-acounts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink3); padding: 8px 0 8px; border-bottom: 1px dashed var(--rule); margin-bottom: 4px; }
.ecn-ov-acounts b { color: var(--ink); }
.ecn-ov-asec { font-size: 11px; font-weight: 700; color: var(--ink4); letter-spacing: .04em; margin: 10px 0 2px; }
.ecn-ov-arow { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.ecn-ov-arow:last-child { border-bottom: none; }
.ecn-ov-aic { width: 18px; flex: none; text-align: center; }
.ecn-ov-abody { flex: 1; min-width: 0; }
.ecn-ov-aname { font-size: 12.5px; color: var(--ink); font-weight: 500; }
.ecn-ov-asub { font-size: 11px; color: var(--ink4); margin-top: 1px; }
.ecn-ov-apill { flex: none; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 3px 9px; }
.ecn-ov-apill.rose { background: var(--rose-l); color: var(--rose-ink); }
.ecn-ov-apill.amber { background: var(--amber-l); color: var(--amber-ink); }
.bxb-blk { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); box-shadow: 0 2px 10px rgba(58,51,42,.08); padding: 20px 22px; min-width: 0; }
.bxb-ey { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.bxb-no { width: 22px; height: 22px; border-radius: 50%; background: var(--amber-accent); color: var(--amber-accent-ink); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.bxb-tt { font-size: 15px; font-weight: 700; color: var(--ink); }
.bxb-note { margin-left: auto; font-size: 11.5px; color: var(--ink4); text-align: right; }
/* §19.6.1：上傳卡大小適中（像頂部類型條），外框縮到剛好包住內容·不滿版·無右側空白 */
.bxb-blk:has(.bxb-imp) { width: fit-content; max-width: 100%; }
.bxb-imp { display: grid; grid-template-columns: repeat(2, 320px); gap: 14px; align-items: start; }
@media (max-width: 760px) { .bxb-blk:has(.bxb-imp) { width: auto; } .bxb-imp { grid-template-columns: 1fr; } }.bxb-recount { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--amber-ink); background: var(--amber-l); padding: 1px 8px; border-radius: 99px; font-weight: 600; flex: none; }
.bxb-relink { font-size: 11px; color: var(--amber-ink); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }
.bxb-grow { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule2); display: grid; gap: 9px; }.bxb-ghelp { font-size: 12.5px; color: var(--ink2); line-height: 1.5; margin-top: 5px; }   /* §19.6.1：hint 改深色·灰色傷眼 */.bxb-gsel { height: 38px; border: 1px solid var(--rule2); border-radius: var(--r8); padding: 0 12px; font-size: 14px; background: var(--surface); color: var(--ink); max-width: 280px; width: 100%; min-width: 0; box-sizing: border-box; }   /* §19.6.1 #C：下拉靠左·設 max-width 不撐滿·14px */
.bxb-gval { font-family: var(--mono); font-size: 12.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxb-cur { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.bxb-cta { padding: 0 20px; height: 40px; border: none; border-radius: var(--r8); background: var(--amber-bright); color: var(--amber-accent-ink); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 1px 3px rgba(217,154,60,.35); }
.bxb-cta:hover { background: var(--amber-bright-hover); }
.bxb-cta.ghost { background: var(--surface); color: var(--ink2); border: 1px solid var(--rule2); font-weight: 500; box-shadow: none; }
.bxb-cta.wide { width: 100%; }
.bxb-cta-row { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.bxb-stats { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 12px; margin-bottom: 16px; }
.bxb-stat { border-radius: var(--r10); padding: 13px 16px; border: 1px solid var(--rule); background: var(--surface); min-width: 0; }
.bxb-stat.hero { background: var(--roi-hero-grad); border-color: var(--roi-hero-border); }
.bxb-stat .l { font-size: 11.5px; color: var(--ink3); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.bxb-stat .l .pct { margin-left: auto; font-family: var(--mono); color: var(--sage-600); }
.bxb-stat .v { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 22px; color: var(--ink); }
.bxb-stat.hero { box-shadow: inset 0 0 0 1px var(--roi-hero-border); }
.bxb-stat.hero .v { font-size: 38px; line-height: 1.02; }   /* §19.6.1 #C：核心指標再放大一級，視線吸附 */
.bxb-stat .v .u { font-size: 13px; font-weight: 500; color: var(--ink3); margin-left: 3px; }
.bxb-stat .v.dn { color: var(--sage-700); } .bxb-stat .v.up { color: var(--rose-ink); }
.bxb-pb { margin-top: 9px; }
.bxb-pb-t { height: 7px; border-radius: 99px; background: rgba(58,40,6,.13); overflow: hidden; }
.bxb-pb-f { height: 100%; border-radius: 99px; background: var(--amber-bright); }
.bxb-pb-c { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink3); margin-top: 4px; font-family: var(--mono); }
.bxb-machine { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--amber); border-radius: var(--r10); padding: 14px 18px; margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 18px; }
.bxb-machine .mh { grid-column: 1/-1; font-size: 12.5px; color: var(--amber-ink); font-family: var(--mono); margin-bottom: 6px; line-height: 1.5; }
.bxb-mcell { padding-left: 18px; border-left: 1px solid var(--rule); min-width: 0; }
.bxb-mcell:first-of-type { padding-left: 0; border-left: none; }
.bxb-mcell .l { font-size: 12.5px; color: var(--ink3); margin-bottom: 4px; }
.bxb-mcell .v { font-family: var(--mono); font-weight: 700; font-size: 20px; color: var(--ink); }
.bxb-mcell.dn .v { color: var(--sage-700); } .bxb-mcell.up .v { color: var(--rose-ink); }
.bxb-mcfg { margin-left: 8px; color: var(--amber-accent); font-weight: 600; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.bom-wm-cols { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; }
.bxb-sech { font-size: 12px; font-weight: 700; color: var(--ink2); margin: 6px 0 10px; display: flex; align-items: center; gap: 6px; }
/* §19.6.1 #5：頁首 ROI 類型切換條（顯眼·置頂·決定下方結算方式） */
/* §19.6.1 #1：置左·非滿版（fit-content，不滿版；但字級夠大不擠） */
.bxb-roimode { width: fit-content; max-width: 100%; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r10); box-shadow: 0 1px 4px rgba(58,51,42,.06); padding: 12px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bxb-roimode-hd { min-width: 0; }
.bxb-roimode-hd b { font-size: 14px; color: var(--ink); }
.bxb-roimode-hd span { display: block; font-size: 11.5px; color: var(--ink4); margin-top: 2px; line-height: 1.4; }
.bxb-rmseg { display: flex; gap: 10px; flex: none; }
.bxb-rmbtn { flex: none; text-align: left; border: 1.5px solid var(--rule2); border-radius: var(--r8); background: var(--surface); padding: 8px 18px; cursor: pointer; transition: border-color .15s, background .15s; }
.bxb-rmbtn b { font-size: 14px; color: var(--ink2); display: block; }
.bxb-rmbtn span { font-size: 11.5px; color: var(--ink4); display: block; margin-top: 2px; line-height: 1.4; }
.bxb-rmbtn:hover { border-color: var(--amber-accent); }
.bxb-rmbtn.on { border-color: var(--amber-accent); background: var(--amber-l); box-shadow: 0 0 0 1px var(--amber-accent); }
.bxb-rmbtn.on b { color: var(--amber-ink); }
.bxb-rmbtn.on span { color: var(--amber-ink); }
@media (max-width: 640px) { .bxb-rmseg { flex-direction: column; } }
/* §19.6.1 #2：效益試算參數（輸入框數字放大加粗，關鍵參數看得清） */
.bxb-rins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bxb-rin { display: flex; flex-direction: column; gap: 4px; }
.bxb-rin label { font-size: 12px; color: var(--ink3); }
.bxb-rin input { height: 42px; border: 1px solid var(--rule2); border-radius: var(--r8); padding: 0 12px; font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--ink); background: var(--surface); box-sizing: border-box; }
.bxb-rin input:disabled { background: var(--stone-50); color: var(--ink3); font-weight: 500; }
/* §19.6.1 #2：結算輸出＝橫向大卡（壓軸焦點，深綠大字） */
.bxb-bigout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bxb-bigout.forced { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
.bxb-bigcard { background: var(--sage-50); border: 1px solid var(--sage-100); border-radius: var(--r10); padding: 14px 18px; min-width: 0; }
.bxb-bigcard.cost { background: var(--roi-forced-grad); border-color: var(--roi-forced-border); }
.bxb-bigcard .bl { font-size: 12px; color: var(--ink3); margin-bottom: 6px; }
.bxb-bigcard .bv { font-family: var(--mono); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); }
.bxb-bigcard .bv small { font-size: 14px; font-weight: 500; color: var(--ink3); }
.bxb-bigcard .bl { font-size: 13px; }
.bxb-bigcard .bv.good { color: var(--sage-700); }
.bxb-bigcard .bv.cost { color: var(--rose-ink); }
.bxb-bigcard .bf { font-size: 10.5px; color: var(--ink4); margin-top: 7px; line-height: 1.45; }
/* §19.6.2 bigcard hero（達成率/年效益壓軸卡·亮金漸層·NPI scope 覆為靛藍）＋達標/超支徽章＋差異表斑馬紋 */
.bxb-bigcard.hero { background: var(--roi-hero-grad); border-color: var(--roi-hero-border); }
.bxb-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; vertical-align: 1px; }
.bxb-badge.good { background: var(--sage-50); color: var(--sage-700); border: 1px solid var(--sage-300); }
.bxb-badge.bad { background: rgba(184,80,77,.1); color: var(--rose-ink); border: 1px solid rgba(184,80,77,.35); }
.bom-tbl tbody tr:nth-child(even) td { background: rgba(30,40,60,.025); }
.bxb-rnote { font-size: 11.5px; color: var(--ink3); background: var(--stone-50); border-radius: var(--r8); padding: 12px 14px; line-height: 1.55; align-self: center; }
.bxb-expbar { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.bxb-exp-note { flex: 1; min-width: 220px; font-size: 11px; color: var(--ink4); line-height: 1.5; }
.bxb-exp-note b { color: var(--ink2); }
@media (max-width: 760px) { .bxb-rins, .bxb-bigout, .bxb-bigout.forced { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .bxb-imp, .bxb-stats, .bxb-roi, .bxb-rins, .bxb-machine { grid-template-columns: 1fr; } .bxb-mcell { padding-left: 0; border-left: none; } }
/* deadbar 軟化（§19.6.1：不整塊紅，改極淡襯＋rose 左邊條） */
.bom-deadbar { padding: 11px 14px; background: rgba(184,80,77,.06); border-left: 3px solid var(--rose); border-radius: 0 var(--r8) var(--r8) 0; font-size: 12px; color: var(--rose-ink); line-height: 1.6; }
.bom-deadbar b { font-family: var(--mono); }
/* ── §19.6.2 NPI BOM view Indigo 靛藍 scope（.bom-npi 容器＝renderProjectBom）：琥珀主視覺→Indigo 靛藍（跳出語意綠·避免整片綠死氣沉沉·與 ECN 琥珀區隔），省綠/增紅語意色不動；ECN 戰情室維持琥珀 ── */
.bom-npi .bxb-no { background: var(--npi-500); color: var(--ink-inverse); }
.bom-npi .bxb-cta { background: var(--npi-500); color: var(--ink-inverse); box-shadow: 0 1px 3px rgba(62,109,176,.35); }
.bom-npi .bxb-cta:hover { background: var(--npi-600); }
.bom-npi .bxb-cta.ghost { background: var(--surface); color: var(--ink2); box-shadow: none; }
.bom-npi .bxb-cta.ghost:hover { background: var(--surface2); }
.bom-npi .bxb-pb-f { background: var(--npi-500); }
.bom-npi .bomm-tbl th { border-bottom-color: var(--npi-500); }
.bom-npi .bomm-tbl tr.bomm-sel { background: var(--npi-50); }
.bom-npi .bom-tbl thead th { border-bottom-color: var(--npi-500); }
.bom-npi .bom-tbl tbody tr:hover td { background: rgba(62,109,176,.08); }
.bom-npi .bom-zsub { color: var(--npi-700); background: var(--npi-50); }
.bom-npi .bxb-recount { color: var(--npi-700); background: var(--npi-50); }
.bom-npi .bxb-relink { color: var(--npi-700); }.bom-npi .bxb-mcfg { color: var(--npi-600); }
.bom-npi .bxb-machine { border-top-color: var(--npi-500); }
.bom-npi .bxb-machine .mh { color: var(--npi-700); }
.bom-npi .bxb-stat.hero { background: var(--roi-hero-grad-npi); border-color: var(--npi-300); box-shadow: inset 0 0 0 1px var(--npi-300); }
.bom-npi .bxb-bigcard.hero { background: var(--roi-hero-grad-npi); border-color: var(--npi-300); }
.bom-npi .bom-stick { border-color: var(--npi-500); }
/* §19.6.2 吸頂精簡 KPI 條（Dashboard-First·捲入零件明細時鎖螢幕頂端·邊框走 accent＝NPI 靛/ECN 琥珀） */
.bom-stick { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; margin: 4px 0 12px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--amber-accent); border-radius: 99px; box-shadow: 0 3px 12px rgba(58,51,42,.12); }
.bom-stick-md { font-weight: 800; font-size: 13.5px; color: var(--ink); padding-right: 14px; border-right: 1px solid var(--rule); white-space: nowrap; }
.bom-stick-m { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 14px; border-right: 1px solid var(--rule); white-space: nowrap; }
.bom-stick-m:last-child { border-right: none; }
.bom-stick-m .l { font-size: 11px; color: var(--ink4); }
.bom-stick-m .v { font-family: var(--mono); font-weight: 800; font-size: 14px; color: var(--ink); }
.bom-stick-m .v.good { color: var(--sage-700); }
.bom-stick-m .v.cost { color: var(--rose-ink); }
.bom-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bom-pick-btn { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r8); background: var(--surface); cursor: pointer; text-align: left; }
.bom-pick-btn:hover { background: var(--sage-50); border-color: var(--sage-200); }
.bom-pick-btn b { font-size: 13px; color: var(--ink); }
.bom-pick-btn span { font-size: 11px; color: var(--ink3); line-height: 1.5; }
/* 匯出精靈（波3）：模式卡 on 態＋欄位勾選格 */
/* §19.6.1 #3：匯出精靈放大不擁擠——Modal 加寬、字級 14px、行距 1.5 */
.modal:has(.bxw) { max-width: 880px; width: 92vw; }
.bxw .imap-sect { font-size: 14px; }
.bxw .bom-pick-btn b { font-size: 14px; }
.bxw .bom-pick-btn span { font-size: 12.5px; line-height: 1.5; }
.bxw .field-hint { font-size: 12.5px; line-height: 1.5; }
.bom-pick-btn.on { background: var(--sage-50); border-color: var(--sage-500); }   /* 選型卡選中高亮：匯出精靈 ①模式/②呈現方式＋整機加總精靈共用 */
.bxw-all { margin-left: 12px; font-size: 13px; font-weight: 400; }
.bxw-all a { color: var(--sage-700); cursor: pointer; text-decoration: underline; }
.bxw-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; max-height: 300px; overflow-y: auto; padding: 10px 0; }
.bxw-col { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.5; color: var(--ink2); cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxw-col input { accent-color: var(--sage-600); flex: none; }
.pl-cta-btn { margin-top: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--sage-700); background: var(--sage-50); border: 1px solid var(--sage-200); border-radius: var(--r6); cursor: pointer; }
.pl-cta-btn:hover { background: var(--sage-100); }
.pl-dim { opacity: 0.5; }
.pl-done-tag { font-size: 11px; color: var(--ink4); text-align: center; }
.pl-fill.done { background: var(--stone-400); }
.pl-row { display: grid; grid-template-columns: 64px 1fr 46px; align-items: center; gap: 8px; padding: 5px 14px; font-size: 12px; }
.pl-crow { display: grid; grid-template-columns: 52px 104px 1fr 46px; align-items: center; gap: 8px; padding: 5px 14px; font-size: 12px; }
.pl-name, .pl-cstage { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-bar { height: 7px; border-radius: 4px; background: var(--surface2); overflow: hidden; min-width: 0; }
.pl-fill { height: 100%; border-radius: 4px; }
.pl-fill.dept { background: var(--sage-600); }
.pl-fill.pm { background: var(--amber-accent); }
.pl-h { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink3); }
.pl-pct { font-size: 11px; padding: 2px 4px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--stone-600); width: 100%; min-width: 0; }
/* §18.10c 部門總負荷拆段（已完工實心 sage-600＋未完成淺色 sage-200；完工段對得起「完工帳」）*/
.pl-drow { padding: 8px 14px 9px; border-bottom: 1px solid var(--rule); }
.pl-drow:last-of-type { border-bottom: none; }
.pl-dtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.pl-dtop .pl-name { font-size: 12px; flex: 1 1 auto; }
.pl-dtop .pl-h { flex: none; font-size: 13px; font-weight: 600; color: var(--ink); }
.pl-bar.split { display: flex; }
.pl-bar.split .pl-fill { border-radius: 0; }
.pl-fill.dept-done { background: var(--sage-600); }
.pl-fill.dept-wip { background: var(--amber-accent); }   /* 進行中＝琥珀金（Paul 選①），與完工的綠明顯區隔 */
.pl-dsub { display: flex; justify-content: flex-start; gap: 16px; margin-top: 4px; font-size: 10.5px; color: var(--ink4); font-variant-numeric: tabular-nums; }
.pl-dsub .pl-done-n { color: var(--sage-700); }
.pl-dsub .pl-wip-n { color: var(--khaki-ink); }
.pl-legend { display: flex; gap: 14px; padding: 8px 14px 2px; font-size: 10.5px; color: var(--ink4); }
.pl-lg { display: inline-flex; align-items: center; gap: 5px; }
.pl-lg::before { content: ''; width: 9px; height: 9px; border-radius: 2px; flex: none; box-sizing: border-box; }
.pl-lg-done::before { background: var(--sage-600); }
.pl-lg-wip::before { background: var(--amber-accent); }
.pl-lg-blank::before { background: var(--surface2); border: 1px solid var(--rule2); }
.pl-total { display: flex; justify-content: space-between; padding: 8px 14px 4px; margin-top: 4px; border-top: 1px solid var(--rule); font-size: 12px; font-weight: 600; color: var(--ink2); }
.dept-overdue-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--surface2); cursor: pointer; }
.dept-overdue-row:hover { background: var(--surface2); }
.dept-overdue-name { flex: 1; min-width: 0; }
.dept-overdue-name > div:first-child { font-size: 13.5px; color: var(--ink2); }
.dept-overdue-sub { font-size: 12px; color: var(--ink3); margin-top: 1px; }
.dept-overdue-days { font-family: var(--mono); font-size: 11px; color: var(--terracotta-ink); background: var(--terracotta-l); border-radius: 99px; padding: 3px 9px; flex-shrink: 0; }
.dept-overdue-days.soon { color: var(--amber-ink); background: var(--amber-l); }   /* 即將到期＝琥珀（逾期維持 terracotta 紅）·§拆頁橋樑卡 */
.risk-head { display: flex; align-items: center; }   /* 橋樑卡標題列：讓「查看全部」右對齊（不動共用 .proj-stages-head） */
.pl-risk-all { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--sage-700); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--sans); }
.pl-risk-all:hover { text-decoration: underline; }

/* ─── CARDS ─── */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 18px 20px; margin-bottom: 18px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-title { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); }
.card-sub { font-size: 11px; color: var(--ink3); font-family: var(--mono); margin-left: auto; }

.week-nav-mini {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 14px;
}
.week-nav-mini .rw-arrow {
  padding: 4px 8px; background: var(--surface2);
  border: 1px solid var(--rule); border-radius: var(--r6);
  font-size: 11px; color: var(--ink2); min-width: 26px;
  cursor: pointer;
}
.week-nav-mini .rw-arrow:hover { background: var(--stone-100); }
.rw-select-mini {
  padding: 4px 8px; border: 1px solid var(--rule);
  border-radius: var(--r6); background: var(--surface);
  font-size: 11.5px; color: var(--ink); outline: none;
  font-family: var(--mono); min-width: 220px; font-weight: 500;
  cursor: pointer;
}
.rw-select-mini:focus { border-color: var(--sage-500); }

/* ─── DASHBOARD GRID ─── */
.dash-grid { display: grid; grid-template-columns: 1fr 240px; gap: 22px; }

/* ─── WEEK SCHEDULE ─── */
.week-schedule { display: grid; grid-template-columns: 64px repeat(5, 1fr); gap: 0; background: var(--cal-cell-bg); padding: 0; border-top: 1px solid var(--cal-line-h); border-left: 1px solid var(--cal-line-h); }
.ws-time-col { position: relative; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--cal-time-ink); align-self: stretch; line-height: 1; background: var(--cal-axis-bg); border-right: 1px solid var(--cal-line-h); }
.ws-time-col .ws-tlabel { position: absolute; top: 0; right: 8px; transform: translateY(-50%); line-height: 1; }
.ws-time-col .ws-tlabel-first { top: 3px; transform: none; }
.ws-time-col .ws-tlabel-end { top: auto; bottom: 3px; transform: none; }
.ws-day-header { font-family: var(--mono); font-size: 11px; color: var(--ink3); text-align: center; padding: 7px 0; font-weight: 500; background: var(--cal-axis-bg); position: sticky; top: var(--ws-sticky-top, 76px); z-index: 6; box-shadow: 0 2px 4px rgba(58,51,42,.10); border-bottom: 1px solid var(--cal-line-h); border-right: 1px solid var(--cal-line-v); }
.ws-corner { position: sticky; top: var(--ws-sticky-top, 76px); z-index: 7; background: var(--cal-axis-bg); border-right: 1px solid var(--cal-line-h); border-bottom: 1px solid var(--cal-line-h); box-shadow: 0 2px 4px rgba(58,51,42,.10); }
.ws-day-header .date { font-family: var(--sans); font-weight: 700; font-size: 16px; display: block; color: var(--cal-date-ink); margin-bottom: 2px; }
.ws-day-header.today { background: var(--cal-today-bg); }
.ws-day-header.today .date { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 auto 2px; border-radius: 50%; background: var(--cal-today-badge); color: var(--ink-inverse); font-size: 16px; }
.ws-cell { background: var(--cal-cell-bg); height: 66px; position: relative; border-bottom: 1px solid var(--cal-line-h); border-right: 1px solid var(--cal-line-v); }
.ws-cell.today-col { background: var(--cal-today-bg); }
.ws-lunch-band {
  grid-column: span 5;
  height: 33px; margin: 0;
  background: var(--cal-axis-bg); border: none; border-bottom: 1px solid var(--cal-line-h); border-radius: 0;
  color: var(--cal-noon-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 1px;
  cursor: not-allowed;
}
.ws-event {
  position: absolute; left: 2px; right: 2px;
  border-radius: var(--r6); padding: 8px 12px;
  font-size: 11px; line-height: 1.3;
  overflow: hidden; cursor: pointer;
  border-left: 4px solid; transition: transform .1s;
  box-shadow: 0 1px 2px rgba(58,51,42,.04);
  z-index: 1;
}
.ws-event.ws-ev-task { display: flex; align-items: center; padding: 8px 12px; }
.ws-event.ws-ev-task b { display: inline; padding-left: 0; }
.ws-event .ws-ev-line { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; padding-right: 14px; }
.ws-event b { font-size: 13px; font-weight: 600; display: block; }
.ws-event .ev-meta { font-size: 11px; color: var(--ink3); margin-top: 1px; font-family: var(--mono); }
.ws-event:hover { transform: scale(1.02); z-index: 2; }
.ws-event.deep { background: var(--paper); border: 1px solid var(--cal-line-h); border-left: 4px solid var(--sage-600); color: var(--sage-800); }
.ws-event.admin { background: var(--amber-l); border-color: var(--amber); color: var(--amber-ink); }
.ws-event.meeting {
  background: var(--cal-mtg-bg);
  border-color: var(--cal-mtg-line);
  color: var(--cal-mtg-ink);
}
.ws-event.auto-meeting {
  background: var(--cal-mtg-bg);
  border-left: 4px solid var(--cal-mtg-line);
  color: var(--cal-mtg-ink);
  cursor: default;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding-left: 10px;
}
.ws-event.cleaning {
  background: var(--cal-misc-bg);
  border-left: 4px solid var(--cal-misc-line);
  color: var(--cal-misc-ink);
  cursor: default;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding-left: 10px;
}
.ws-event.auto-meeting b, .ws-event.cleaning b { padding-left: 0; }
.ws-event.auto-meeting .ev-meta, .ws-event.cleaning .ev-meta { padding-left: 0; }
.ws-event.meeting .ev-meta, .ws-event.cleaning .ev-meta { color: inherit; opacity: .7; font-size: 11px; font-weight: 400; }
.ws-event.auto-meeting:hover, .ws-event.cleaning:hover { transform: none; }
.ws-event.other { background: var(--stone-100); border-color: var(--stone-300); color: var(--stone-600); }
.ws-event.milestone { background: var(--cal-ms-bg); border-color: var(--cal-ms-line); color: var(--cal-ms-ink); }  /* M2-T3：里程碑週卡；方向⑤冷化 terracotta→藍灰(--cal-ms) */
.ws-event.locked { border-left-style: double; border-left-width: 5px; }
.ws-event.overdue { box-shadow: 0 0 0 1.5px var(--terracotta); }
.ws-event.completed {
  background: repeating-linear-gradient(
    -45deg,
    var(--sage-50),
    var(--sage-50) 4px,
    rgba(74, 124, 92, 0.12) 4px,
    rgba(74, 124, 92, 0.12) 8px
  );
  opacity: 0.85;
  cursor: pointer;
}
.ws-event.completed b { text-decoration: line-through; text-decoration-color: var(--sage-600); }
.ws-event .done-badge {
  position: absolute; top: 2px; right: 4px;
  font-size: 12px; color: var(--sage-700); font-weight: 700;
}
.ws-event.dragging { opacity: 0.4; }
.ws-event .lock-ico { position: absolute; top: 2px; right: 4px; font-size: 9px; opacity: .7; }
.ws-event .overdue-badge {
  position: absolute; top: 2px; left: 4px;
  font-size: 9px; color: var(--terracotta);
}
.ws-event b { display: block; font-weight: 600; font-size: 13px; line-height: 1.2; padding-left: 10px; }
.ws-event .ev-meta { font-size: 10px; opacity: .85; font-family: var(--mono); margin-top: 0; line-height: 1.15; padding-left: 10px; color: var(--ink3); }
.ws-event .ws-ev-proj { font-size: 11px; font-weight: 500; }

.ws-cell.drag-over {
  background: var(--sage-100) !important;
  outline: 2px dashed var(--sage-500);
  outline-offset: -2px;
}

.legend-row { display: flex; gap: 16px; padding: 12px 0 0; font-size: 11px; color: var(--ink3); border-top: 1px dashed var(--rule); margin-top: 12px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* ─── SCHEDULE SORT RULES（摺疊說明，純顯示） ─── */
.sched-rules { margin-top: 10px; font-size: 11.5px; color: var(--ink2); }
.sched-rules summary { cursor: pointer; color: var(--sage-700); font-weight: 600; padding: 4px 0; list-style: none; }
.sched-rules summary::-webkit-details-marker { display: none; }
.sched-rules summary::before { content: '▸ '; }
.sched-rules[open] summary::before { content: '▾ '; }
.sched-rules-body { padding: 6px 2px 2px; line-height: 1.7; }
.sched-rules-body p { margin: 0 0 6px; }
.sched-rules-body .sr-sink { color: var(--ink); background: var(--surface2); border-left: 3px solid var(--terracotta); border-radius: var(--r6); padding: 7px 10px; }
.sched-rules-body .sr-intro { color: var(--ink2); }
.sched-rules-body ul { margin: 0 0 6px; padding-left: 18px; }
.sched-rules-body li { margin: 3px 0; }
.sched-rules-body .sr-note { color: var(--ink3); font-size: 11px; }

/* ─── NEXT-WEEK TODO（下週待辦 + 釘選） ─── */
.next-week-todo { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.nwt-head { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.nwt-hint { font-size: 10.5px; font-weight: 400; color: var(--ink3); }
.nwt-subtitle { font-size: 11.5px; font-weight: 600; color: var(--sage-700); margin: 10px 0 6px; }
.nwt-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--rule); }
.nwt-row:last-child { border-bottom: none; }
.nwt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.nwt-proj { font-size: 11px; color: var(--ink3); white-space: nowrap; }
.nwt-date { font-family: var(--mono); font-size: 11px; color: var(--ink3); white-space: nowrap; }
.nwt-pin, .nwt-unpin { font-size: 11px; border: 1px solid var(--rule); border-radius: var(--r6); padding: 3px 8px; cursor: pointer; white-space: nowrap; background: var(--surface); color: var(--sage-700); }
.nwt-pin:hover { background: var(--sage-50); border-color: var(--sage-500); }
.nwt-unpin { color: var(--ink3); }
.nwt-unpin:hover { background: var(--surface2); }
.nwt-row.nwt-pinned { background: var(--sage-50); border-radius: var(--r6); padding: 5px 8px; border-bottom: none; margin-bottom: 3px; }
.nwt-empty { font-size: 11.5px; color: var(--ink3); font-style: italic; padding: 4px 0; }
.nwt-proj-group { margin-bottom: 8px; }
.nwt-proj-title { font-size: 12px; font-weight: 600; color: var(--ink); margin: 6px 0 4px; }
.nwt-proj-count { font-size: 10.5px; font-weight: 400; color: var(--ink3); }
.nwt-more > summary, .nwt-far > summary { cursor: pointer; font-size: 11px; color: var(--sage-700); padding: 3px 0; list-style: none; }
.nwt-more > summary::-webkit-details-marker, .nwt-far > summary::-webkit-details-marker { display: none; }
.nwt-more > summary::before, .nwt-far > summary::before { content: '▸ '; }
.nwt-more[open] > summary::before, .nwt-far[open] > summary::before { content: '▾ '; }
.nwt-far { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.nwt-far-body { padding-top: 4px; }

/* ─── MEMO ─── */
.memo-board {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r12); padding: 16px;
  position: relative; min-height: 540px;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(74,124,92,.04) 0, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(196,99,62,.04) 0, transparent 40%);
}
.memo-head { display: flex; align-items: center; margin-bottom: 12px; }
.memo-title { font-family: var(--sans); font-weight: 600; font-size: 14px; }
.memo-add {
  margin-left: auto; padding: 4px 10px; background: var(--sage-50);
  border: 1px solid var(--sage-200); border-radius: var(--r6);
  font-size: 11px; color: var(--sage-700); font-weight: 500;
}
.memo-add:hover { background: var(--sage-100); }
.memo-list { position: relative; height: 480px; }
.memo {
  position: absolute; width: 130px; padding: 10px 12px 24px;
  font-family: var(--hand); font-size: 15px; line-height: 1.4;
  color: var(--stone-900); box-shadow: 1px 2px 4px rgba(58,51,42,.12);
  cursor: grab; transition: transform .15s, box-shadow .15s;
  border-radius: 1px 1px 4px 4px;
}
.memo:hover { transform: rotate(0deg) scale(1.05) !important; z-index: 5; box-shadow: 2px 4px 10px rgba(58,51,42,.15); }
.memo .memo-author { position: absolute; bottom: 5px; right: 8px; font-size: 9px; opacity: .55; font-family: var(--mono); }
.memo .memo-del { position: absolute; top: 2px; right: 4px; background: none; border: none; color: rgba(0,0,0,.3); font-size: 14px; padding: 0 4px; opacity: 0; transition: opacity .15s; }
.memo:hover .memo-del { opacity: 1; }

/* ─── PROJECT ─── */
.proj-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.proj-color { width: 44px; height: 44px; border-radius: var(--r12); flex-shrink: 0; }
.proj-name { font-family: var(--sans); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--ink); }
.hdr-divider { width: 1px; height: 22px; background: var(--rule2); display: inline-block; align-self: center; }   /* §16 塊4b：header 操作鈕讀/寫分組豎隔線 */
/* §16 塊5：header 下拉/選單元件 */
.hdr-menu-wrap { position: relative; display: inline-flex; }
.hdr-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r10); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); padding: 6px; }
.hdr-menu.open { display: block; }
.hdr-menu-title { font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 6px 8px 2px; }
.hdr-menu-sub { font-size: 11px; color: var(--ink3); padding: 0 8px 6px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.hdr-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 8px; background: none; border: none; border-radius: var(--r6); font-size: 13px; color: var(--ink2); cursor: pointer; text-align: left; }
.hdr-menu-item:hover { background: var(--surface2); }
.hdr-menu-note { font-size: 10.5px; color: var(--ink4); font-family: var(--mono); white-space: nowrap; }
.hdr-menu-danger { color: var(--danger); }
.hdr-menu-danger:hover { background: var(--danger); color: var(--ink-inverse); }
.hdr-menu-danger-note { color: var(--danger); }
.hdr-menu-danger:hover .hdr-menu-danger-note { color: var(--ink-inverse); }
/* §13.9 匯出下拉（各頁單一匯出口）：每項 icon＋兩行備註（結果/情境）＋項間分隔＋停用態（規則16 反灰引導） */
.hdr-menu-export { min-width: 348px; }
.hdr-menu-item.rich { flex-direction: column; align-items: stretch; gap: 3px; padding: 9px 10px; }
.hdr-menu-item.rich + .hdr-menu-item.rich { border-top: 1px solid var(--rule); }
.hdr-menu-rt { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.hdr-menu-rt i { font-size: 15px; color: var(--sage-600); }
.hdr-menu-rtag { font-size: 10.5px; font-weight: 400; color: var(--ink4); }
.hdr-menu-rr { font-size: 12px; color: var(--ink2); line-height: 1.45; }
.hdr-menu-rc { font-size: 11.5px; color: var(--ink4); line-height: 1.45; }
.hdr-menu-item.disabled { opacity: .55; cursor: not-allowed; }
.hdr-menu-item.disabled:hover { background: none; }
.hdr-menu-hint { font-size: 11px; color: var(--amber-accent); line-height: 1.4; margin-top: 2px; }
.proj-meta { font-size: 12px; color: var(--ink3); font-family: var(--mono); }

.proj-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }

.proj-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--r16);
  margin-bottom: 14px;
}

/* ─── TASK LIST ─── */
.task-list-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); overflow: hidden; }
.tlc-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--head-band-strong); }
.tlc-title { font-family: var(--mono); font-size: 14px; color: var(--ink-inverse); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.tlc-count { font-family: var(--mono); font-size: 11px; color: var(--ink2); background: var(--stone-100); padding: 1px 8px; border-radius: 99px; }

/* 待辦表（.data-table.task-table）：auto 自適應，grid/subgrid 機制移除（步6）。 */
.task-table td, .task-table th { padding: 11px 16px; }
/* 批量編輯（2a-5）：勾選欄（NPI 待辦表＋ECN 大表共用）＋批量列 */
.task-table .col-chk, .s2-tbl .col-chk { width: 36px; padding: 11px 8px 11px 16px; text-align: center; }
.task-table .col-chk input, .s2-tbl .col-chk input { width: 15px; height: 15px; accent-color: var(--sage-600); cursor: pointer; }
.ecn-pt-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }   /* 工具列右側鈕組（承接原 bulk 的靠右） */
.ecn-bulk-btn { height: 32px; padding: 6px 14px; font-size: 12px; }   /* §6.5 表格內次要鈕 32px */
.ecn-newtask-btn { height: 32px; padding: 6px 14px; font-size: 12px; }   /* 與批量鈕同高 */
/* ECN 子案分頁（琥珀色系）：外框＝可按、選中＝實心反色高亮 */
.ecn-vtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.ecn-vtab { font-size: 12.5px; padding: 6px 14px; border-radius: var(--r6); background: var(--surface2); color: var(--amber-ink); border: 1px solid var(--amber-border); cursor: pointer; transition: all .12s; }
.ecn-vtab:hover { background: var(--amber-l); }
.ecn-vtab.on { background: var(--amber-bright); color: var(--amber-accent-ink); border-color: var(--amber-accent); font-weight: 500; }
.bulk-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--sage-50); border-bottom: 1px solid var(--sage-100); font-size: 12px; color: var(--ink2); }
.bulk-bar .bulk-info b { font-family: var(--mono); color: var(--sage-700); }
.bulk-bar .bulk-hint { font-size: 12px; color: var(--ink4); }   /* §1 輔助小字鐵則：12px 淡灰不加粗 */
.bulk-bar .tb-action { height: 32px; padding: 6px 14px; font-size: 12px; }   /* §6.5 表格內次要鈕 32px */
.task-table .task-row { cursor: pointer; transition: background .12s; }
.task-table .task-row-header th { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.task-table.hide-done .task-row.done,
.task-table.hide-done .task-row.done + .dt-insert-row { display: none; }
.task-table.ts-collapsed .task-row.undated,
.task-table.ts-collapsed .task-row.undated + .dt-insert-row { display: none; }
.task-table .task-row.done { opacity: .65; }
/* 待辦表欄寬/bar 護欄（步6-3，task-table scoped；通用 col/auto/dt-insert 不動）*/
.task-table .bar-row .bar-inner { display: flex; align-items: center; gap: 8px; }
.data-table.task-table .stage-bar { width: 72px; flex: none; }
.data-table.task-table td:nth-child(8), .data-table.task-table th:nth-child(8) { max-width: 120px; }
.data-table.task-table td:nth-child(7), .data-table.task-table th:nth-child(7) { min-width: 72px; text-align: left; }

/* ─── 待辦清單篩選列（§塊3 UI 殼：膠囊多選 + 展開面板，本批不接過濾）─── */
.task-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface2); border-bottom: 1px solid var(--rule); }
.tf-chip-wrap { position: relative; }
.tf-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1.5px solid var(--rule2); border-radius: 99px; background: var(--surface); color: var(--ink3); font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.tf-chip:hover { border-color: var(--ink4); }
.tf-caret { font-size: 9px; opacity: .7; }
/* 選中態 B+：中淺底（-chip 階）+ 1.5px 主色邊 + 最深階字（各膠囊語意色）*/
.tf-chip.tf-stages.active { background: var(--sage-chip); border-color: var(--sage-500); color: var(--sage-700); }
.tf-chip.tf-owners.active { background: var(--slate-chip); border-color: var(--slate); color: var(--slate-ink); }
.tf-chip.tf-urg.active { background: var(--terracotta-chip); border-color: var(--terracotta); color: var(--terracotta-ink); }
.tf-chip.tf-status.active { background: var(--rose-chip); border-color: var(--rose); color: var(--rose-ink); }
.tf-search { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule2); border-radius: var(--r6); padding: 3px 10px; background: var(--surface); }
.tf-search i { color: var(--ink4); font-size: 14px; }
.tf-search input { border: none; outline: none; background: transparent; font-size: 12px; width: 130px; color: var(--ink2); }
.tf-clear-all { margin-left: 4px; border: none; background: none; color: var(--ink3); font-size: 11px; cursor: pointer; padding: 4px 6px; text-decoration: underline; }
.tf-clear-all:hover { color: var(--rose); }
/* NPI 子案分頁（sage 色系）：外框＝可按、選中＝實心反色高亮 */
.npi-vtabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px 0; }
.npi-vtab { font-size: 12.5px; padding: 6px 14px; border-radius: var(--r6); background: var(--surface); color: var(--sage-700); border: 1px solid var(--sage-200); cursor: pointer; transition: all .12s; }
.npi-vtab:hover { background: var(--sage-50); }
.npi-vtab.on { background: var(--sage-500); color: var(--ink-inverse); border-color: var(--sage-600); font-weight: 500; }
/* 展開面板 */
.tf-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--r10); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); padding: 6px; }
.tf-chip-wrap.open .tf-panel { display: block; }
.tf-opts { display: flex; flex-direction: column; gap: 1px; }
.tf-opt { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: var(--r6); font-size: 12px; color: var(--ink2); cursor: pointer; }
.tf-opt:hover { background: var(--surface2); }
.tf-opt.on { background: var(--sage-50); color: var(--sage-700); font-weight: 500; }
.tf-opt input { accent-color: var(--sage-500); }
.tf-empty { padding: 8px; font-size: 11.5px; color: var(--ink4); text-align: center; }
.tf-panel-foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.tf-panel-foot button { flex: 1; border: 1px solid var(--rule2); background: var(--surface); border-radius: var(--r6); padding: 4px; font-size: 11px; color: var(--ink2); cursor: pointer; }
.tf-panel-foot button:hover { background: var(--surface2); }
.task-row:last-child { border-bottom: none; }
.task-row:nth-child(even of .task-row) { background: var(--cream); }
.task-row:hover { background: var(--surface2); }
.task-row.s2-pred-hl { background: var(--terracotta-l); }   /* 前置 hover 反色，特異度(0,2,0)+置於 nth-child 後勝出 */
/* 通用 zebra 只關 bar/insert 列（不碰資料列自訂 zebra，(0,3,0) 贏通用 (0,2,2)）*/
.data-table.task-table .bar-row,
.data-table.task-table .dt-insert-row { background: transparent; }
.task-check {
  width: 18px; height: 18px; border-radius: var(--r4); border: 1.5px solid var(--rule2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; background: var(--surface);
}
.task-check.done { background: var(--sage-500); border-color: var(--sage-500); color: var(--ink-inverse); font-size: 11px; }
.task-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.task-row.done .task-name { text-decoration: line-through; color: var(--ink4); }
.task-name .preview-tag {
  font-size: 9.5px; padding: 1px 6px; border-radius: 99px;
  background: var(--amber-l); color: var(--amber-ink); font-weight: 500; margin-left: 6px;
}
.task-desc { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-tag { font-size: 10px; font-family: var(--mono); padding: 2px 8px; border-radius: 99px; font-weight: 500; white-space: nowrap; }
.tag-deep { background: var(--sage-50); color: var(--sage-700); }
.tag-admin { background: var(--amber-l); color: var(--amber-ink); }
.tag-meeting { background: var(--slate-l); color: var(--slate-ink); }
.tag-other { background: var(--stone-100); color: var(--stone-600); }
.tag-milestone { background: var(--terracotta-l); color: var(--terracotta-ink); }  /* M2-T3：taskType 里程碑 tag，同甘特菱形 terracotta */
.task-urg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.task-urg.high { background: var(--terracotta); }
.task-urg.medium { background: var(--amber); }
.task-urg.low { background: var(--sage-400); }
.task-deadline { font-family: var(--mono); font-size: 10.5px; color: var(--ink3); white-space: nowrap; }
.task-deadline.near { color: var(--terracotta); font-weight: 600; }
.task-deadline.overdue { color: var(--rose); font-weight: 600; }
/* §6.5 塊四：負工期警示——整列淡紅底 + 區間欄深紅字（rose 家族，走 :root）。 */
.task-row.neg-dur { background: var(--rose-l); }
/* task-range：區間欄專屬 class（從 .task-deadline 拆出，等值重構保留 mono/10.5px/ink3/nowrap，不與第10欄截止欄共用）。 */
.task-range { font-family: var(--mono); font-size: 10.5px; color: var(--ink3); white-space: nowrap; }
.task-range.neg { color: var(--rose-ink); font-weight: 600; }
/* §6.5 負工期行首警示三角（rose，走 :root）。 */
.neg-flag { color: var(--rose); margin-right: 3px; font-size: 11px; }

.done-section { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); overflow: hidden; margin-top: 12px; opacity: .85; }
.done-section.collapsed .done-list, .done-section.collapsed .done-clear-tip { display: none; }
.done-head { padding: 11px 16px; background: var(--stone-50); display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; transition: background .15s; }
.done-head:hover { background: var(--stone-100); }
.done-head-title { font-family: var(--mono); font-size: 11px; color: var(--ink3); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.done-head-count { font-family: var(--mono); font-size: 11px; color: var(--ink2); background: var(--stone-100); padding: 1px 8px; border-radius: 99px; }
.done-head-chevron { margin-left: auto; transition: transform .2s; font-size: 12px; color: var(--ink3); }
.done-section.collapsed .done-head-chevron { transform: rotate(-90deg); }
.done-clear-tip { padding: 8px 16px; background: var(--surface2); font-size: 11px; color: var(--ink3); border-top: 1px dashed var(--rule); }

.deleted-section { border-color: var(--terracotta-l) !important; }
.deleted-section .done-head { background: rgba(196, 99, 62, 0.06); }
.deleted-section .done-head:hover { background: rgba(196, 99, 62, 0.12); }

/* commit2 C：done inline 原位 + 收合 toggle bar */
.done-toggle-bar td { padding: 11px 14px 11px 11px; background: var(--sage-100); border: 1px solid var(--sage-200); border-left: 4px solid var(--sage-500); cursor: pointer; user-select: none; transition: background .15s; }
.done-toggle-bar:hover td { background: var(--sage-200); }
.done-toggle-bar .done-head-chevron { margin-left: 0; color: var(--sage-600); }
.done-toggle-bar .done-head-title { color: var(--sage-800); font-weight: 600; }
.done-toggle-bar .done-head-count { color: var(--sage-50); background: var(--sage-700); }
.done-toggle-bar .done-toggle-note { color: var(--sage-600); }
.done-toggle-bar.collapsed .done-head-chevron { transform: rotate(-90deg); }
.done-toggle-note { font-size: 11px; color: var(--ink4); }

/* 第一刀：待排分隔 bar（仿 done-toggle-bar，terracotta 系，可摺疊預設展開） */
.toschedule-bar td { padding: 11px 14px 11px 11px; background: var(--terracotta-l); border: 1px solid var(--terracotta-chip); border-left: 4px solid var(--terracotta); cursor: pointer; user-select: none; transition: background .15s; }
.toschedule-bar:hover td { background: var(--terracotta-l-hover); }
.toschedule-bar .done-head-chevron { margin-left: 0; color: var(--terracotta); }
.toschedule-bar .done-head-title { color: var(--terracotta-ink); font-weight: 600; }
.toschedule-bar .done-head-count { color: var(--terracotta-l); background: var(--terracotta-d); }
.toschedule-bar .done-toggle-note { color: var(--terracotta); }
.toschedule-bar.collapsed .done-head-chevron { transform: rotate(-90deg); }
.deleted-row:last-child { border-bottom: none !important; }
.deleted-row:hover { background: var(--surface2); }

.list-foot { padding: 11px 14px; border-top: 1px solid var(--rule); background: var(--surface2); display: flex; align-items: center; gap: 8px; }
.list-foot input { flex: 1; border: none; background: transparent; outline: none; padding: 4px 8px; font-size: 13px; color: var(--ink); }
.list-foot input::placeholder { color: var(--ink4); }
.list-foot button { padding: 5px 12px; background: var(--sage-500); color: var(--ink-inverse); border: none; border-radius: var(--r6); font-size: 12px; font-weight: 500; }

.empty-task-list td { padding: 40px 20px; text-align: center; color: var(--ink3); font-size: 13px; }
.empty-task-list-icon { font-size: 32px; margin-bottom: 8px; opacity: .4; }

/* ─── SIDE CARD (meetings, generate) ─── */
.side-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 14px 16px; margin-bottom: 14px; }
.side-card-title { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.side-card-sub { font-size: 11px; color: var(--ink3); margin-bottom: 12px; line-height: 1.5; }

.meeting-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.meeting-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--slate-l); border-radius: var(--r6); font-size: 11.5px; color: var(--slate-ink); }
.meeting-item .m-time { font-family: var(--mono); font-weight: 500; }
.meeting-item .m-title { flex: 1; color: var(--slate-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.meeting-item .m-del { background: none; border: none; color: var(--ink3); font-size: 14px; padding: 0 2px; opacity: .5; }
.meeting-item .m-del:hover { color: var(--terracotta); opacity: 1; }

.add-meeting-tabs { display: flex; gap: 1px; background: var(--surface2); padding: 2px; border-radius: var(--r8); margin-bottom: 10px; }
.am-tab { flex: 1; padding: 5px; background: none; border: none; border-radius: var(--r6); font-size: 11px; color: var(--ink3); font-weight: 500; }
.am-tab.active { background: var(--surface); color: var(--sage-700); box-shadow: var(--shadow-sm); }

.am-form { display: flex; flex-direction: column; gap: 6px; }.am-form textarea { width: 100%; min-height: 72px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r6); font-family: var(--mono); font-size: 11px; resize: vertical; background: var(--surface2); outline: none; }
.am-form textarea:focus { background: var(--surface); border-color: var(--sage-500); }
.am-add-btn { background: var(--sage-500); color: var(--ink-inverse); border: none; border-radius: var(--r6); padding: 6px; font-size: 11.5px; font-weight: 500; transition: background .15s; }
.am-add-btn:hover { background: var(--sage-600); }
.am-add-btn:disabled { background: var(--stone-300); cursor: not-allowed; }
.am-drop { border: 1.5px dashed var(--rule2); border-radius: var(--r8); padding: 18px 12px; text-align: center; cursor: pointer; transition: all .2s; background: var(--surface2); }
.am-drop:hover { border-color: var(--sage-500); background: var(--sage-50); }
.am-drop.dragover { border-color: var(--sage-500); background: var(--sage-100); }
.am-drop .ic { font-size: 24px; opacity: .5; margin-bottom: 4px; }
.am-drop .tx { font-size: 11.5px; color: var(--ink2); }
.am-drop .sub { font-size: 10.5px; color: var(--ink3); margin-top: 2px; }

/* Screenshot list */
.shot-list { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.shot-list-head { font-size: 10.5px; color: var(--ink3); font-family: var(--mono); margin-bottom: 2px; letter-spacing: .04em; text-transform: uppercase; }
.shot-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--surface2); border-radius: var(--r6); font-size: 11px; }
.shot-thumb { width: 24px; height: 24px; border-radius: var(--r4); object-fit: cover; }
.shot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.shot-week { padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--r4); background: var(--surface); font-size: 10.5px; color: var(--ink2); outline: none; }
.shot-progress { font-size: 10px; color: var(--sage-600); font-family: var(--mono); }
.shot-item .m-del { background: none; border: none; color: var(--ink3); font-size: 14px; padding: 0 2px; opacity: .6; }
.shot-item .m-del:hover { color: var(--terracotta); opacity: 1; }

.ocr-result { margin-top: 10px; padding: 10px; background: var(--sage-50); border: 1px solid var(--sage-200); border-radius: var(--r8); }
.ocr-result-head { font-size: 11.5px; color: var(--sage-700); font-weight: 600; display: flex; align-items: center; margin-bottom: 8px; }
.ocr-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 2px 0; background: var(--surface); border-radius: var(--r6); font-size: 11px; cursor: pointer; }
.ocr-row.dim { opacity: .55; }
.ocr-row input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--sage-500); flex-shrink: 0; }
.ocr-row .ocr-time { font-family: var(--mono); font-weight: 600; color: var(--slate); white-space: nowrap; }
.ocr-row .ocr-title { flex: 1; color: var(--ink2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ocr-row .ocr-src { font-size: 9.5px; color: var(--ink3); font-family: var(--mono); white-space: nowrap; }
/* OCR 確認清單：可編輯列（星期/起訖時間/標題，§2026-06-28 截圖匯入彈窗） */
.ocr-row .ocr-day, .ocr-row .ocr-st, .ocr-row .ocr-et, .ocr-row .ocr-tt { padding: 5px 6px; border: 1px solid var(--rule); border-radius: var(--r6); font-size: 12px; background: var(--surface2); outline: none; min-width: 0; }
.ocr-row .ocr-day { flex: 0 0 66px; }
.ocr-row .ocr-st, .ocr-row .ocr-et { flex: 1 1 96px; }   /* 自適應：時間欄隨容器撐開，容下「上午10:00」不截 */
.ocr-row .ocr-tt { flex: 2 1 130px; }
.ocr-row .ocr-dash { color: var(--ink4); flex: 0 0 auto; }
.ocr-row .ocr-day:focus, .ocr-row .ocr-st:focus, .ocr-row .ocr-et:focus, .ocr-row .ocr-tt:focus { background: var(--surface); border-color: var(--sage-500); }
.ocr-row .ocr-day.ocr-day-need { border-color: var(--amber); background: var(--amber-l); }   /* 週檢視抓不到日期 → 提示需選星期 */
.ocr-tip { font-size: 10.5px; color: var(--ink3); padding: 6px 0 0; line-height: 1.5; }

/* Generate */
.generate-section { margin-top: 18px; }
.generate-cta {
  background: var(--sage-600);
  color: var(--ink-inverse); border: none; border-radius: var(--r12);
  padding: 14px 18px; font-size: 14px; font-weight: 600;
  width: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.generate-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.generate-cta::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transition: left .8s; }
.generate-cta:hover::before { left: 100%; }
.gen-sub { font-size: 11px; color: var(--ink3); text-align: center; margin-top: 6px; line-height: 1.5; }
.gen-result-card { background: var(--sage-50); border: 1px solid var(--sage-200); border-radius: var(--r12); padding: 14px 16px; margin-top: 14px; display: none; animation: slideUp .3s ease both; }
.gen-result-card.show { display: block; }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.gen-result-title { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--sage-700); margin-bottom: 6px; }
.gen-result-sub { font-size: 11.5px; color: var(--stone-600); line-height: 1.7; }
.gen-result-sub b { color: var(--sage-700); }

.tip { margin-top: 12px; padding: 12px 14px; background: var(--slate-l); border-radius: var(--r8); font-size: 12px; color: var(--slate-ink); line-height: 1.7; border-left: 3px solid var(--slate); }
.tip b { color: var(--slate-ink); }

/* ─── §18.16 跨專案時程 戰略甘特（月/季）─── */
.sg-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 18px 20px; }
.sg-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sg-range { font-size: 15px; font-weight: 700; color: var(--ink); }
.sg-spanbtns { display: inline-flex; border: 1px solid var(--rule2); border-radius: var(--r6); overflow: hidden; }
.sg-spanbtn { padding: 6px 14px; background: var(--surface); border: none; border-left: 1px solid var(--rule2); font-size: 12.5px; color: var(--ink2); cursor: pointer; }
.sg-spanbtn:first-child { border-left: none; }
.sg-spanbtn:hover { background: var(--stone-50); }
.sg-spanbtn.active { background: var(--gantt-today); color: var(--ink-inverse); }
.sg-nav { margin-left: auto; display: inline-flex; gap: 6px; }
.sg-nav button { padding: 6px 12px; background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--r6); font-size: 12.5px; color: var(--ink2); cursor: pointer; }
.sg-nav button:hover { background: var(--stone-50); }
.sg-empty { padding: 40px 20px; text-align: center; color: var(--ink3); font-size: 13px; line-height: 1.7; }
.sg-empty .ti { display: block; font-size: 34px; color: var(--ink4); margin-bottom: 10px; }

.sg-scroll { overflow-x: auto; }
.sg-grid { display: grid; grid-template-columns: 230px repeat(var(--sg-cols), 1fr); align-items: stretch; }
/* 表頭月欄 */
.sg-corner { font-size: 12px; font-weight: 700; color: var(--ink3); padding: 6px 10px 8px; border-bottom: 2px solid var(--rule2); }
.sg-mhead { position: relative; overflow: visible; text-align: center; padding: 4px 2px 7px; border-bottom: 2px solid var(--rule2); border-left: 1px solid var(--rule); color: var(--ink2); }
.sg-mhead b { display: block; font-size: 15px; font-weight: 700; margin-top: 1px; }
.sg-mhead .sg-mh-y { font-size: 12px; color: var(--ink4); }
.sg-mhead.cur { background: var(--slate-l); color: var(--slate-ink); }
.sg-mhead.cur .sg-mh-y { color: var(--slate-ink); }
/* 「今天」標籤：掛當月標頭底緣、對齊下方今日線；下尖角指向線 */
.sg-hd-today { position: absolute; bottom: -9px; transform: translateX(-50%); z-index: 5; background: var(--gantt-today); color: var(--ink-inverse); font-size: 12px; font-weight: 600; line-height: 1; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
/* 帶（撞期／PM）*/
.sg-band-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink2); padding: 6px 10px; border-bottom: 1px solid var(--rule); background: var(--pearl); }
.sg-band-label .ti { font-size: 15px; color: var(--ink3); }
.sg-clash, .sg-pm, .sg-wl { text-align: center; font-size: 12px; padding: 6px 2px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); background: var(--pearl); color: var(--ink4); font-variant-numeric: tabular-nums; }
.sg-clash.hot { background: var(--rose-l); color: var(--rose-ink); font-weight: 700; }
.sg-clash-1 { color: var(--slate); font-size: 10px; }
.sg-pm-ok { color: var(--sage-600); }
.sg-pm-warn { background: var(--amber-l); color: var(--amber-ink); font-weight: 600; }
.sg-pm-over { background: var(--rose-l); color: var(--rose-ink); font-weight: 700; }
.sg-pm-none { color: var(--ink4); }
/* §18.16 Phase 2：部門人力水位帶 */
.sg-dept-head { background: var(--cream); font-weight: 700; color: var(--ink2); border-top: 2px solid var(--rule2); cursor: pointer; user-select: none; }
.sg-dept-head .sg-chev { font-size: 13px; color: var(--ink3); transition: transform .15s; }
.sg-dept-head.collapsed .sg-chev { transform: rotate(-90deg); }
.sg-dept-head .sg-gear { margin-left: auto; font-size: 15px; color: var(--ink3); padding: 2px; border-radius: var(--r4); cursor: pointer; }
.sg-dept-head .sg-gear:hover { color: var(--amber-accent); }
.sg-dhblank { border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); border-top: 2px solid var(--rule2); background: var(--cream); }
.sg-dept-lbl { justify-content: flex-start; padding-left: 22px; color: var(--ink); font-weight: 500; }
.sg-dept-lbl .sg-dept-cnt { font-size: 11px; color: var(--ink4); font-weight: 400; margin-left: 6px; font-variant-numeric: tabular-nums; }
.sg-dept-lbl .sg-dept-est { font-size: 10px; font-weight: 600; color: var(--slate-ink); background: var(--slate-l); padding: 1px 6px; border-radius: 99px; margin-left: 6px; }
/* 推估列：淡斜線網底只上名稱格（資料格永不上·保三色對比·WCAG AA）；線條 rgba 透明衍生（允許例外）*/
.sg-dept-lbl.est { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(92,122,139,.09) 6px 7px), var(--pearl); }
.sg-wl-ok { color: var(--sage-600); }
.sg-wl-warn { background: var(--amber-l); color: var(--amber-ink); font-weight: 600; }
.sg-wl-over { background: var(--rose-l); color: var(--rose-ink); font-weight: 800; }
.sg-wl-none { color: var(--ink4); }
.sg-empty-band { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 12.5px; color: var(--ink3); background: var(--pearl); border-bottom: 1px solid var(--rule); }
.sg-empty-band .ti { font-size: 16px; color: var(--amber-accent); flex: 0 0 auto; }
.sg-link { color: var(--slate-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sg-link:hover { color: var(--amber-accent); }
/* §18.16 Phase 2：部門人力登記（設定區塊＋齒輪 Modal 共用）*/
.reg-sub { font-size: 14px; color: var(--ink2); margin: 0 0 14px; line-height: 1.5; }
.reg-guide { margin: 0 0 14px; padding: 10px 12px; background: var(--pearl); border: 1px solid var(--rule); border-radius: var(--r6); }
.reg-guide-hd { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }
.reg-guide-hd .ti { font-size: 15px; color: var(--amber-accent); }
.reg-guide-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink3); line-height: 1.7; }
.reg-guide-list b { color: var(--ink2); }
.reg-foot { display: flex; align-items: flex-start; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink4); line-height: 1.5; }
.reg-foot .ti { font-size: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--ink4); }
.reg-foot b { color: var(--ink3); }
.reg-emptybox { padding: 4px 2px; }
.reg-empty-hd { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.reg-empty-hd .ti { font-size: 19px; color: var(--rose); }
.reg-empty-desc { font-size: 13px; color: var(--ink2); line-height: 1.6; margin: 0 0 14px; }
.reg-empty-warn { display: flex; align-items: flex-start; gap: 7px; padding: 10px 12px; background: var(--amber-l); border: 1px solid var(--amber); border-radius: var(--r6); font-size: 12.5px; color: var(--amber-ink); line-height: 1.5; }
.reg-empty-warn .ti { font-size: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--amber-ink); }
/* 一鍵配置部門與負責人（多專案·wide modal·段間分隔線）*/
.dset-wrap { display: flex; flex-direction: column; }
.dset-sec { padding: 4px 0 12px; }
.dset-phd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dset-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.dset-pnm { font-size: 14px; font-weight: 700; color: var(--ink); }
.dset-ptag { font-size: 10.5px; font-weight: 600; color: var(--ink3); background: var(--pearl); border: 1px solid var(--rule); border-radius: var(--r4); padding: 1px 6px; }
.dset-div { height: 1px; background: var(--rule); margin: 4px 0; }
.dset-sec.collapsed .dept-edit-list .dept-edit-row:nth-child(n+3) { display: none; }
.dset-more { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 4px 2px; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--slate-ink); cursor: pointer; }
.dset-more:hover { color: var(--amber-accent); }
.dset-more .ti { font-size: 14px; }
.reg-grid { border: 1px solid var(--rule); border-radius: var(--r6); overflow: hidden; margin-top: 8px; max-width: 480px; }
.reg-ghead { display: grid; grid-template-columns: 1fr 160px; gap: 10px; padding: 7px 12px; background: var(--pearl); border-bottom: 1px solid var(--rule); font-size: 11.5px; font-weight: 700; color: var(--ink3); }
.reg-row { display: grid; grid-template-columns: 1fr 160px; gap: 10px; align-items: center; padding: 5px 12px; border-bottom: 1px solid var(--rule); }
.reg-row:last-child { border-bottom: none; }
.reg-row.empty { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(92,122,139,.05) 6px 7px); }
.reg-row.solo { opacity: .72; }
.reg-grid.collapsed .reg-row:nth-child(n+5) { display: none; }
.reg-rnm { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); min-width: 0; }
.reg-rin { display: flex; align-items: center; gap: 8px; min-width: 0; }
.reg-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--stone-300); }
.reg-in { width: 56px; height: 30px; border: 1px solid var(--rule2); border-radius: var(--r6); text-align: center; font-size: 14px; color: var(--ink); background: var(--surface); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.reg-row.empty .reg-in { border-color: var(--amber-accent); }
.reg-in::placeholder { color: var(--ink4); font-style: italic; }
.reg-unit { font-size: 12px; color: var(--ink4); flex: 0 0 auto; }
.reg-fill { font-size: 10.5px; font-weight: 600; color: var(--slate-ink); background: var(--surface); border: 1px solid var(--slate); padding: 3px 9px; border-radius: var(--r6); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.reg-fill:hover { background: var(--slate); color: var(--ink-inverse); }
.reg-applied { font-size: 11px; font-weight: 600; color: var(--ink4); display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; white-space: nowrap; }
.reg-applied .ti { font-size: 13px; }
.reg-solo { font-size: 11px; color: var(--ink4); flex: 0 0 auto; white-space: nowrap; }
.reg-more { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 6px 2px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--slate-ink); cursor: pointer; }
.reg-more:hover { color: var(--amber-accent); }
.reg-more .ti { font-size: 14px; }
.dset-miss { margin: 8px 0 4px; padding-left: 20px; text-align: left; }
.dset-miss li { font-size: 12.5px; line-height: 1.7; color: var(--ink2); }
.reg-empty { font-size: 12.5px; color: var(--ink4); padding: 8px 0; }
/* 專案列 */
.sg-plabel { grid-column: 1; padding: 8px 10px; border-bottom: 1px solid var(--rule); cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.sg-plabel:hover { background: var(--stone-50); }
.sg-pname { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
.sg-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sg-pn { line-height: 1.3; word-break: break-word; }
.sg-kind { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 99px; }
.sg-kind-npi { background: var(--sage-100); color: var(--sage-700); }
.sg-kind-ecn { background: var(--amber-l); color: var(--amber-ink); }
.sg-prisk { font-size: 13px; color: var(--ink2); }
.sg-prisk b { color: var(--ink); }
.sg-risk-ok b { color: var(--sage-600); }
.sg-risk-warn b { color: var(--amber-ink); }
.sg-risk-over b { color: var(--rose); }
.sg-track { grid-column: 2 / -1; position: relative; height: 40px; border-bottom: 1px solid var(--rule);
  background-image: linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: calc(100% / var(--sg-cols)) 100%; }
.sg-stage { position: absolute; height: 22px; border-radius: var(--r4); display: flex; align-items: center; padding: 0 7px; font-size: 13px; color: var(--ink-inverse); overflow: hidden; white-space: nowrap; box-sizing: border-box; cursor: default; box-shadow: 0 0 0 1px var(--surface); }
.sg-t-done { background: var(--gantt-done); }
.sg-t-wip { background: var(--amber-accent); color: var(--amber-accent-ink); }
.sg-t-late { background: var(--rose); }
.sg-t-future { background: var(--stone-200); color: var(--ink3); }
.sg-ms { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 14px; z-index: 3; line-height: 1; cursor: default;
  text-shadow: -1px -1px 0 var(--surface), 1px -1px 0 var(--surface), -1px 1px 0 var(--surface), 1px 1px 0 var(--surface), 0 0 3px var(--surface); }
.sg-ms-ok { color: var(--sage-600); }
.sg-ms-late { color: var(--rose); }
.sg-noplan { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink4); }
.sg-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gantt-today); z-index: 2; }
.sg-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px; font-size: 12px; color: var(--ink3); }
.sg-lg { display: inline-flex; align-items: center; gap: 5px; }
.sg-lg-ms { color: var(--sage-600); font-size: 13px; line-height: 1; vertical-align: middle; }
.sg-sw { width: 16px; height: 10px; border-radius: 2px; display: inline-block; }

/* ─── GANTT ─── */
.gantt-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 20px; overflow-x: auto; }
.gantt-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gantt-filter { position: relative; display: inline-block; margin-bottom: 14px; }
.gantt-filter-field { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r6); color: var(--ink2); font-size: 12px; cursor: pointer; }
.gantt-filter-field:hover { background: var(--stone-100); }
.gantt-filter-summary { font-size: 12px; color: var(--ink3); }
.gantt-filter-chevron { font-size: 10px; color: var(--ink3); transition: transform .15s; }
.gantt-filter-field.open .gantt-filter-chevron { transform: rotate(180deg); }
.gantt-filter-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 200px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r8); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); }
.gantt-filter-label { font-size: 12px; font-weight: 600; color: var(--ink2); margin-right: 2px; }
.gantt-filter-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink2); cursor: pointer; }
.gantt-filter-item input { width: auto; cursor: pointer; }
.gantt-filter-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.gantt-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.gantt-filter-bar .gantt-filter { margin-bottom: 0; }
.gantt-nav { display: flex; align-items: center; gap: 6px; }
.gantt-nav button { padding: 5px 10px; background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r6); font-size: 12px; color: var(--ink2); }
.gantt-nav button:hover { background: var(--stone-100); }
.gantt-period { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); }
.gantt { display: grid; grid-template-columns: 200px repeat(14, minmax(38px, 1fr)); gap: 0; min-width: 760px; position: relative; }
/* §12.3 連接線 overlay：絕對定位脫離 grid 流、不佔格；pointer-events 關，點擊穿透到 bar。 */
.gantt-links { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-sticky); overflow: visible; }
.gantt-corner, .gantt-day-header { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink3); padding: 6px 0; text-align: center; border-bottom: 2px solid var(--rule); background: var(--surface2); }
.gantt-corner { font-size: 14px; font-weight: 600; color: var(--ink2); padding: 8px 6px; }
.gd-hol { display: block; font-size: 12px; font-weight: 600; color: var(--ink2); margin-top: 1px; }
.gantt-xstage-badge { display:inline-flex; align-items:center; gap:2px; background:var(--clay); color:var(--clay-ink); font-size:9px; font-weight:600; padding:1px 5px; border-radius:99px; margin-right:4px; vertical-align:middle; cursor:default; }
.gantt-xstage-badge .ti { font-size:10px; }
.gantt-day-header { border-left: 1px solid var(--rule); }
.gantt-day-header.holiday { background: var(--gantt-holiday); color: var(--ink4); }
.gantt-day-header.today { color: var(--terracotta); background: var(--terracotta-l); }
.gantt-day-header .gd-day { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink2); display: block; margin-bottom: 1px; }
.gantt-day-header.today .gd-day { color: var(--terracotta); }
.gantt-day-header.holiday .gd-day { color: var(--ink3); }
.gantt-row-label { padding: 8px 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--rule); background: var(--surface); min-width: 0; }
.gantt-row-label .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.gantt-row-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gantt-cell { border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); min-height: 36px; position: relative; background: var(--gantt-weekday); }
.gantt-cell.holiday { background: var(--gantt-holiday); }
.gantt-cell.today { background: rgba(196,99,62,.04); }
.gantt-bar { position: absolute; top: 6px; bottom: 6px; border-radius: var(--r6); padding: 0 10px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-inverse); cursor: pointer; transition: filter .15s, transform .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 3; }
.gantt-bar:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gantt-bar.milestone { background: none; padding: 0; display: flex; align-items: center; }
.gantt-bar.milestone::before { content: ""; width: 14px; height: 14px; background: var(--terracotta); transform: rotate(45deg); margin: auto; }
/* §12.2 雙態條：plan 虛框 + actual 填色（取代單條實心 bar-*） */
.gantt-plan-frame { position: absolute; top: 6px; bottom: 6px; border: 1.5px dashed var(--gantt-plan); background: none; border-radius: var(--r6); z-index: 2; pointer-events: none; }
.gantt-actual-fill { position: absolute; top: 6px; bottom: 6px; border-radius: var(--r6); padding: 0 10px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-inverse); cursor: pointer; transition: filter .15s, transform .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 3; }
.gantt-actual-fill:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gantt-actual-fill.fill-wip { background: var(--navy); }
.gantt-actual-fill.fill-done { background: var(--gantt-done); }
.gantt-actual-fill.fill-over { background: var(--terracotta); }
.gantt-actual-fill .pill { background: rgba(255,255,255,.22); padding: 1px 7px; border-radius: 99px; font-size: 9.5px; margin-left: 6px; font-family: var(--mono); }
/* §12.2 Hunk4：狀態膠囊/warn 收 inline 進 class（取代 GANTT_STATUS_COLORS） */
.gantt-status-tag { display: inline-block; font-size: 10px; line-height: 1.4; padding: 0 5px; border-radius: var(--r3); margin-right: 4px; color: var(--ink-inverse); }
.gantt-status-tag.tag-manual { background: var(--gray-mid); }
.gantt-status-tag.tag-scheduled { background: var(--slate); }
.gantt-status-tag.tag-override { background: var(--amber); }
.gantt-warn { color: var(--rose); font-weight: 700; margin-right: 4px; }

/* ─── MONTH ─── */
.month-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 20px; }
.month-head-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; }
.month-title-btn { font-family: var(--sans); font-weight: 600; font-size: 22px; color: var(--ink); background: none; border: none; padding: 4px 8px; border-radius: var(--r6); display: flex; align-items: center; gap: 6px; transition: background .15s; }
.month-title-btn:hover { background: var(--surface2); }
.month-title-btn .chevron { font-size: 12px; color: var(--ink3); }
.month-nav { display: flex; align-items: center; gap: 4px; }
.month-nav button { padding: 5px 10px; background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r6); font-size: 12px; color: var(--ink2); min-width: 28px; }
.month-nav button:hover { background: var(--stone-100); }
.month-spacer { flex: 1; }

.ym-picker { position: absolute; top: 100%; left: 0; margin-top: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); box-shadow: var(--shadow-lg); padding: 14px; z-index: var(--z-dropdown); min-width: 280px; display: none; }
.ym-picker.open { display: block; animation: fadeIn .15s ease both; }
.ym-picker-year-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.ym-picker-year-row select { flex: 1; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r6); background: var(--surface2); outline: none; font-weight: 500; }
.ym-picker-year-row button { padding: 5px 10px; background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r6); }
.ym-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ym-months button { padding: 8px 4px; background: var(--surface2); border: none; border-radius: var(--r6); font-size: 12px; color: var(--ink2); transition: all .15s; }
.ym-months button:hover { background: var(--sage-100); color: var(--sage-700); }
.ym-months button.current { background: var(--sage-500); color: var(--ink-inverse); font-weight: 600; }

.month-weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 4px; }
.month-weekday-row div { text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--ink3); letter-spacing: .04em; padding: 4px; font-weight: 500; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.month-cell { min-height: 92px; padding: 6px 8px; background: var(--surface2); border-radius: var(--r8); font-size: 11px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: background .15s; }
.month-cell:hover { background: var(--stone-100); }
.month-cell.other-month { opacity: .4; }
.month-cell.today { background: var(--sage-50); border: 1.5px solid var(--sage-500); }
.month-cell .date { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink2); }
.month-cell.today .date { color: var(--sage-700); }
.month-cell.weekend .date { color: var(--ink3); }
.month-evt { font-size: 10px; padding: 2px 6px; border-radius: var(--r4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.month-evt.deep { background: var(--sage-500); color: var(--ink-inverse); }
.month-evt.admin { background: var(--amber-l); color: var(--amber-ink); }
.month-evt.meeting { background: var(--slate); color: var(--ink-inverse); }
.month-evt.rust-evt { background: var(--terracotta); color: var(--ink-inverse); }
.month-evt.preview { background: transparent; color: var(--amber); border: 1px dashed var(--amber); }

/* ─── REPORT ─── */
.report-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); margin-bottom: 16px; flex-wrap: wrap; }
.report-week-nav { display: flex; align-items: center; gap: 4px; }
.rw-arrow { padding: 6px 10px; background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r6); font-size: 12px; color: var(--ink2); min-width: 32px; }
.rw-arrow:hover { background: var(--stone-100); }
.rw-select { padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--r6); background: var(--surface); font-size: 13px; color: var(--ink); outline: none; font-family: var(--mono); min-width: 280px; font-weight: 500; }
.rw-select:focus { border-color: var(--sage-500); }
.report-print-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); margin-bottom: 14px; border-top: 4px solid var(--sage-500); }
.rph-week { font-family: var(--sans); font-weight: 600; font-size: 18px; color: var(--ink); }
.rph-range { font-family: var(--mono); font-size: 11px; color: var(--ink3); margin-top: 2px; }
.rph-right { text-align: right; }
.rph-author { font-weight: 600; font-size: 13px; color: var(--ink2); }
.rph-dept { font-size: 11px; color: var(--ink3); margin-top: 2px; }

.report-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.rs-stat { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r10); padding: 12px 14px; text-align: center; }
.rs-num { font-family: var(--sans); font-weight: 600; font-size: 22px; line-height: 1; color: var(--ink); }
.rs-label { font-family: var(--mono); font-size: 10px; color: var(--ink3); letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }

.report-highlights, .report-next, .report-notes { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 16px 20px; margin-bottom: 14px; }
.report-highlights { background: var(--sage-50); border-color: var(--sage-200); }
.report-next { background: var(--amber-l); border-color: var(--amber-border); }
.rh-title, .rn-title { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 8px; }
.report-highlights .rh-title { color: var(--sage-700); }
.report-next .rn-title { color: var(--amber-ink); }
.rh-list, .rn-list { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.9; color: var(--ink2); }
.rh-list li::before, .rn-list li::before { content: "·"; display: inline-block; width: 18px; color: var(--ink3); font-weight: 700; }
.rh-list b, .rn-list b { color: var(--ink); font-weight: 600; }
.rn-textarea-wrap { background: var(--surface2); border-radius: var(--r8); padding: 4px; }
.rn-textarea { width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r6); background: transparent; outline: none; resize: vertical; font-family: var(--sans); font-size: 13px; line-height: 1.7; color: var(--ink2); }
.rn-textarea:focus { border-color: var(--sage-500); background: var(--surface); }

.report-project { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); overflow: hidden; margin-bottom: 14px; }
.rp-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface2); border-bottom: 1px solid var(--rule); }
.rp-dot { width: 10px; height: 10px; border-radius: 50%; }
.rp-name { font-family: var(--sans); font-weight: 600; font-size: 14px; }
.rp-stats { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink3); }
.rp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rp-table th { text-align: left; padding: 8px 12px; background: var(--surface); font-family: var(--mono); font-size: 10px; color: var(--ink3); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--rule); }
.rp-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 12px; }
.rp-table tr:last-child td { border-bottom: none; }
.rp-table tr:hover td { background: var(--surface2); }
.rp-task-name { font-weight: 500; color: var(--ink); font-size: 12.5px; }
.rp-task-desc { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.rp-date { font-family: var(--mono); font-size: 11px; color: var(--ink3); white-space: nowrap; }
.rp-progress { display: inline-block; padding: 2px 9px; border-radius: 99px; font-family: var(--mono); font-size: 11px; font-weight: 600; }
.rp-progress.done { background: var(--sage-50); color: var(--sage-700); }
.rp-progress.wip { background: var(--amber-l); color: var(--amber-ink); }
.rp-progress.late { background: var(--terracotta-l); color: var(--terracotta); }
.rp-status { font-size: 11.5px; color: var(--ink2); }
.rp-status.done { color: var(--sage-600); }
.rp-status.wip { color: var(--amber-ink); }
.rp-status.late { color: var(--terracotta-ink); font-weight: 500; background: var(--terracotta-l); border-radius: 99px; padding: 2px 8px; }
.rp-note { font-size: 11px; color: var(--ink3); font-style: italic; }

.empty-report { text-align: center; padding: 40px 20px; color: var(--ink3); }

/* ─── SETTINGS ─── */
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 760px; }
.settings-section { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 22px 24px; }
.ss-title { font-family: var(--sans); font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.ss-desc { font-size: 12px; color: var(--ink3); margin-bottom: 16px; }
/* §設定頁重構（2026-07-08）：工時橫排＋週徽章／負荷精算 ⓘ tooltip／部門登記遷移引導卡 */
.ss-wh-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 26px; }
.ss-wh-days { flex: 1; min-width: 0; }
.ss-lbl-info { display: inline-flex; align-items: center; gap: 7px; }
.ss-info { position: relative; display: inline-flex; }
.ss-info-i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink4); color: var(--ink4); font-size: 10.5px; font-weight: 700; font-style: normal; display: flex; align-items: center; justify-content: center; line-height: 1; cursor: help; }
.ss-info:hover .ss-info-i, .ss-info:focus-within .ss-info-i { border-color: var(--sage-600); color: var(--sage-600); }
.ss-info-pop { position: absolute; left: 0; bottom: calc(100% + 8px); width: 280px; white-space: normal; background: var(--stone-900); color: var(--ink-inverse); font-size: 11.5px; line-height: 1.55; font-weight: 400; letter-spacing: 0; text-transform: none; padding: 10px 12px; border-radius: var(--r8); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: var(--z-tooltip); }
.ss-info-pop::after { content: ''; position: absolute; left: 14px; top: 100%; border: 6px solid transparent; border-top-color: var(--stone-900); }
.ss-info:hover .ss-info-pop, .ss-info:focus-within .ss-info-pop { opacity: 1; transform: translateY(0); }
.ss-movedout { display: flex; align-items: flex-start; gap: 11px; background: var(--paper); border: 1px dashed var(--rule2); border-radius: var(--r10); padding: 13px 15px; margin-top: 4px; font-size: 12.5px; color: var(--ink3); line-height: 1.6; }
.ss-movedout i { font-size: 17px; color: var(--ink4); flex: none; margin-top: 1px; }
.ss-movedout b { color: var(--ink2); }
.ss-movedout-link { border: none; background: none; color: var(--sage-600); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 0 0 0 2px; }
.ss-movedout-link:hover { text-decoration: underline; }
/* ECN 流程參數配置（§19.5）*/
.ss-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); cursor: pointer; margin-top: 4px; }
.ss-check input { width: 16px; height: 16px; accent-color: var(--sage-600); cursor: pointer; }
.ecn-appr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ecn-appr-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--slate-ink); background: var(--slate-l); border: 1px solid var(--stone-200); border-radius: 99px; padding: 3px 5px 3px 11px; }
.ecn-appr-x { border: none; background: none; color: var(--ink4); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 3px; border-radius: 50%; }
.ecn-appr-x:hover { color: var(--rose); }
.ecn-appr-add { display: flex; gap: 8px; align-items: center; max-width: 440px; }
.ecn-appr-add input { flex: 1; height: 34px; border: 1px solid var(--rule2); border-radius: var(--r6); padding: 0 10px; font-size: 13px; font-family: var(--sans); color: var(--ink); background: var(--surface); }
.ecn-appr-add input::placeholder { color: var(--ink4); }
.ss-teach { margin-top: 10px; border: 1px solid var(--rule); border-radius: var(--r8); background: var(--surface2); overflow: hidden; }
.ss-teach > summary { list-style: none; cursor: pointer; padding: 9px 13px; font-size: 12px; color: var(--ink2); display: flex; align-items: center; justify-content: space-between; user-select: none; }
.ss-teach > summary::-webkit-details-marker { display: none; }
.ss-teach > summary::after { content: '▸'; color: var(--ink4); transition: transform .15s; }
.ss-teach[open] > summary::after { transform: rotate(90deg); }
.ss-teach-body { padding: 0 14px 12px; font-size: 11.5px; line-height: 1.9; color: var(--ink3); }
.ss-teach-body code { background: var(--cream); padding: 1px 5px; border-radius: var(--r4); font-family: var(--mono); font-size: 11px; }
/* ── §19.11 範本管理頁（設定→範本 tab·全走 :root）── */
.tpl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tpl-card { background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r10); padding: 14px 16px; min-width: 0; }
.tpl-card-hd { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.tpl-card-hd b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tpl-dot.npi { background: var(--sage-600); }
.tpl-dot.ecn { background: var(--amber-accent); }
.tpl-badge { font-size: 10.5px; padding: 2px 8px; border-radius: 99px; background: var(--stone-100); color: var(--ink3); flex: none; }
.tpl-badge.ovr { background: var(--sage-50); color: var(--sage-700); }
.tpl-badge.custom { background: var(--amber-l); color: var(--amber-ink); }
.tpl-badge.warn { background: var(--amber-l); color: var(--amber-ink); }
.tpl-card-meta { font-size: 12px; color: var(--ink2); line-height: 1.5; }
.tpl-card-ver { font-size: 11px; color: var(--ink4); margin-top: 2px; }
.tpl-card-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tpl-card-acts .tb-action { font-size: 12px; padding: 5px 12px; }
.tpl-danger { color: var(--danger); }
/* 編輯器 */
.tpl-editor { min-width: 0; }
.tpl-ed-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.tpl-ed-hd b { font-size: 15px; }
.tpl-ed-acts { margin-left: auto; display: flex; gap: 8px; }
.tpl-base { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tpl-base label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink3); }
.tpl-sec-title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 16px 0 8px; }
.tpl-in { height: 32px; padding: 4px 8px; font-size: 13px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--ink); box-sizing: border-box; }
.tpl-in.w { width: 200px; } .tpl-in.xw { width: 320px; max-width: 100%; } .tpl-in.n { width: 64px; text-align: right; } .tpl-in.s { width: 90px; }
.tpl-szm { background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r8); padding: 12px 14px; margin-bottom: 12px; }
.tpl-szm-tbl { border-collapse: collapse; width: 100%; font-size: 12px; }
.tpl-szm-tbl th { text-align: left; color: var(--ink3); font-weight: 500; padding: 3px 8px; }
.tpl-szm-tbl td { padding: 4px 8px; vertical-align: top; }
.tpl-szm-k { font-weight: 700; }
.tpl-szm-st { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tpl-szm-chk { font-size: 12px; color: var(--ink2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tpl-npi-pm { display: flex; flex-wrap: wrap; gap: 12px; }
.tpl-npi-pmf { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink3); }
.tpl-mod { border: 1px solid var(--rule); border-radius: var(--r8); margin-bottom: 10px; overflow: hidden; }
.tpl-mod-hd { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface2); font-size: 12.5px; font-weight: 500; }
.tpl-mod-cnt { font-size: 11px; color: var(--ink4); font-weight: 400; }
.tpl-add { margin-left: auto; font-size: 11px; padding: 3px 10px; }
.tpl-mod-scroll { overflow-x: auto; }
.tpl-tbl { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 12px; }
.tpl-tbl th { text-align: left; color: var(--ink4); font-weight: 500; padding: 5px 8px; background: var(--surface); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tpl-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--rule); }
.tpl-tbl .tpl-n { color: var(--ink4); font-family: var(--mono); }
.tpl-sz-cell { white-space: nowrap; }
.tpl-sz-cell label { font-size: 11px; margin-right: 5px; }
.tpl-pbs { font-size: 10.5px; color: var(--amber-ink); font-family: var(--mono); }
.tpl-x { border: none; background: none; color: var(--ink4); font-size: 13px; cursor: pointer; padding: 2px 6px; }
.tpl-x:hover { color: var(--danger); }
/* §19.11 範本 Excel 匯入鈕（label 包 file input）＋欄位對應精靈 */
.tpl-imp-btn { cursor: pointer; display: inline-flex; align-items: center; }
.tpl-imp-btn input { display: none; }
.tpl-map-hint { font-size: 12.5px; color: var(--ink2); line-height: 1.6; margin-bottom: 12px; }
/* .tpl-map-grid/row/lbl/sel 已隨舊自訂 _tplImportWizard 移除（改共用 renderImportMapping 精簡精靈·2026-07-08） */
/* §19.11 Wave2-A：從 Excel 新增範本（虛線卡·依所在塊鎖定 NPI／ECN 類型） */
.tb-action.amber { background: var(--amber-accent); }
.tb-action.amber:hover { background: var(--amber-accent-hover); }
.tpl-group { margin-top: 18px; }
.tpl-group:first-of-type { margin-top: 8px; }
.tpl-group-hd { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink2); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.tpl-group-sub { font-size: 11.5px; color: var(--ink4); font-weight: 400; }
.tpl-card-new { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; background: var(--surface2); border: 1.5px dashed var(--rule2); border-radius: var(--r10); padding: 14px 16px; min-width: 0; cursor: pointer; font-family: inherit; color: var(--ink2); }
.tpl-card-new:hover { border-color: var(--amber-accent); background: var(--amber-l); }
.tpl-card-new .tnc-ic { font-size: 18px; color: var(--amber-accent); line-height: 1; }
.tpl-card-new b { font-size: 13px; }
.tpl-card-new .tnc-sub { font-size: 11.5px; color: var(--ink3); line-height: 1.5; }
/* §19.11 Wave2-B：階段改名／調序／刪除／新增控件 */
.tpl-mod-caret { color: var(--ink4); flex: none; }
.tpl-stage-name { height: 26px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); border: 1px solid transparent; border-radius: var(--r4); background: transparent; width: 132px; box-sizing: border-box; }
.tpl-stage-name:hover { border-color: var(--stone-200); background: var(--surface); }
.tpl-stage-name:focus { border-color: var(--sage-500); background: var(--surface); outline: none; }
.tpl-stage-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.tpl-st-btn { border: none; background: none; color: var(--ink4); cursor: pointer; font-size: 12px; padding: 3px 6px; border-radius: var(--r4); line-height: 1; }
.tpl-st-btn:hover:not([disabled]) { background: var(--stone-100); color: var(--ink2); }
.tpl-st-btn.del:hover:not([disabled]) { color: var(--danger); }
.tpl-st-btn[disabled] { opacity: .3; cursor: default; }
.tpl-mod-hd .tpl-add { margin-left: 8px; }
.tpl-add-stage { width: 100%; border: 1.5px dashed var(--rule2); border-radius: var(--r8); background: var(--surface2); color: var(--ink3); padding: 9px; font-size: 12.5px; cursor: pointer; font-family: inherit; margin-top: 2px; }
.tpl-add-stage:hover { border-color: var(--sage-500); color: var(--sage-700); }
/* Wave2-B：任務操作欄（▲▼調序＋✕）＋列間插入（複刻 .data-table .dt-insert：sage 線+圓鈕+hover 浮現） */
.tpl-row-acts { white-space: nowrap; }
.tpl-tbl .dt-insert-cell { position: relative; padding: 0; height: 0; border: none; }
.tpl-tbl .dt-insert-row { background: transparent; }
.tpl-tbl .dt-insert { position: absolute; left: 0; right: 0; bottom: -11px; height: 22px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; z-index: var(--z-sticky); pointer-events: none; }
.tpl-tbl .dt-insert::before { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%); height: 2px; background: var(--sage-600); border-radius: 99px; }
.tpl-tbl .dt-insert-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sage-600); color: var(--ink-inverse); border: none; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-sm); pointer-events: auto; }
.tpl-tbl tbody tr:hover + .dt-insert-row .dt-insert,
.tpl-tbl .dt-insert-row:hover .dt-insert { opacity: 1; }
/* §19.11 Wave2-C：試算排程面板（接塊3·slate 中性色·不搶 sage/amber 語意） */
.tpl-trial { border: 1px solid var(--slate-l); border-radius: var(--r8); margin-top: 16px; overflow: hidden; }
.tpl-trial-hd { width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--slate-l); color: var(--slate-ink); font-size: 12.5px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; }
.tpl-trial-caret { margin-left: auto; }
.tpl-trial-body { padding: 14px; }
.tpl-trial-inputs { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 4px; }
.tpl-trial-fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink3); }
.tpl-trial-fld input[type="date"] { height: 32px; padding: 4px 8px; font-size: 13px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--ink); }
.tpl-trial-var { margin-top: 12px; }
.tpl-trial-vname { font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 4px; }
.tpl-trial-of { margin-top: 10px; border: 1px solid var(--rose-l); background: var(--rose-l); border-radius: var(--r8); padding: 10px 14px; font-size: 12px; color: var(--rose-ink); line-height: 1.6; }
.tpl-trial-ok { margin-top: 10px; border: 1px solid var(--sage-200); background: var(--sage-50); border-radius: var(--r8); padding: 10px 14px; font-size: 12px; color: var(--sage-700); }
/* 安全 tab（設定→安全）：防護網條列，給 MIS/主管審閱 */
/* 雙欄黃金對稱（建議一）：全寬 banner → 中段左右雙欄 → 全寬資料保護＋定位 */
.sec-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; }
.sec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sec-col { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 920px) { .sec-cols { grid-template-columns: 1fr; } }
.sec-banner { background: var(--sage-50); border-color: var(--sage-100); }
.sec-list { list-style: none; counter-reset: secitem; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--ink2); line-height: 1.65; }
.sec-list > li { counter-increment: secitem; position: relative; padding-left: 26px; }
.sec-list > li::before { content: counter(secitem); position: absolute; left: 0; top: 1px; width: 18px; height: 18px; background: var(--sage-600); color: var(--ink-inverse); border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sec-list b { font-weight: 600; color: var(--ink); }
.sec-sub { font-weight: 600; font-size: 12.5px; color: var(--sage-700); margin: 14px 0 6px; }
.sec-pos { font-size: 13px; color: var(--ink2); line-height: 1.6; }
.sec-ul { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink2); line-height: 1.65; }
.sec-ul li { margin-bottom: 4px; }
.ss-field { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.ss-field:first-of-type { border-top: none; padding-top: 4px; }
.ss-field label { font-size: 13px; color: var(--ink2); font-weight: 500; }
.ss-field input, .ss-field select { padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--r8); background: var(--surface2); outline: none; font-size: 13px; width: 100%; transition: all .15s; }
.ss-field input:focus, .ss-field select:focus { border-color: var(--sage-500); background: var(--surface); box-shadow: 0 0 0 3px rgba(74,124,92,.1); }
.ss-field .help { font-size: 11px; color: var(--ink3); margin-top: 4px; line-height: 1.5; }
/* ④ 編輯權限白名單管理（editor/viewonly 雙名單） */
.wl-add { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.wl-add input { flex: 1; }
.wl-list { display: flex; flex-direction: column; gap: 6px; }
.wl-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r6); font-size: 13px; color: var(--ink2); }
.wl-del { border: none; background: none; color: var(--rose); font-size: 13px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: var(--r4); }
.wl-del:hover { background: var(--rose-l); }
.wl-empty { font-size: 12px; color: var(--ink4); padding: 4px 2px; }
/* 工作日曆（公休/補班）匯入區（§之二.9 第3步） */
.cal-import { display: flex; flex-direction: column; gap: 10px; }
.cal-label { font-size: 12px; color: var(--ink2); font-weight: 500; }
.cal-textarea { width: 100%; min-height: 120px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r6); font-family: var(--mono); font-size: 11px; resize: vertical; background: var(--surface2); outline: none; box-sizing: border-box; }
.cal-textarea:focus { background: var(--surface); border-color: var(--sage-500); }
.cal-btns { display: flex; gap: 8px; }
/* §工作日曆匯入器改版（2026-07-08）：雙入口 tab／Excel 檔鈕／沙盒預覽卡 */
.cal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-tabs { display: flex; gap: 8px; }
.cal-tab { border: 1px solid var(--stone-200); background: var(--surface); color: var(--ink3); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.cal-tab.on { background: var(--sage-600); border-color: var(--sage-600); color: var(--ink-inverse); }
.cal-head .tb-action { margin-left: auto; }
.cal-pane { display: flex; flex-direction: column; gap: 8px; }
.cal-filebtn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border: 1px solid var(--sage-500); background: var(--sage-50); color: var(--sage-700); font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: var(--r8); cursor: pointer; }
.cal-filebtn input { display: none; }
.cal-filename { color: var(--ink4); font-weight: 400; font-size: 12px; }
.cal-note { font-size: 11.5px; color: var(--ink4); line-height: 1.5; }
.cal-map:empty { display: none; }
.cal-sandbox { width: 100%; border: 1px solid var(--sage-100); background: linear-gradient(180deg, var(--sage-50), var(--surface)); border-radius: var(--r8); padding: 14px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cal-sb-big { display: flex; align-items: baseline; gap: 7px; }
.cal-sb-num { font-size: 28px; font-weight: 800; color: var(--sage-700); font-variant-numeric: tabular-nums; line-height: 1; }
.cal-sb-lbl { font-size: 12px; color: var(--ink3); }
.cal-sb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-chip { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; }
.cal-chip.hol { background: var(--rose-chip); color: var(--rose-ink); }
.cal-chip.wk { background: var(--sage-chip); color: var(--sage-700); }
.cal-chip.skip { background: var(--stone-100); color: var(--ink4); }
.cal-sb-warn { width: 100%; font-size: 11.5px; color: var(--amber-ink); border-top: 1px dashed var(--stone-200); padding-top: 9px; }
.cal-sb-warn b { color: var(--rose-ink); }
.cal-preview { padding: 10px 12px; background: var(--surface2); border-radius: var(--r8); font-size: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cal-preview:empty { display: none; }
.cal-hint { color: var(--terracotta-ink); }
.cal-loaded-head { font-size: 12px; color: var(--ink3); padding: 2px 0; }
.cal-loaded { border: 1px solid var(--rule); border-radius: var(--r8); max-height: 260px; overflow-y: auto; }
.cal-empty { padding: 16px; text-align: center; color: var(--ink4); font-size: 12px; }
.data-table .cal-year { padding: 6px 12px; background: var(--head-band-strong); color: var(--ink-inverse); font-size: 11px; font-weight: 600; position: sticky; top: 0; z-index: var(--z-sticky); }
.cal-row-date { font-family: var(--mono); color: var(--ink3); }
.cal-row-name { color: var(--ink); }
.cal-del { border: none; background: none; color: var(--ink4); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: var(--r6); }
.cal-del:hover { background: var(--terracotta-chip); color: var(--terracotta-ink); }
.time-range { display: flex; align-items: center; gap: 8px; }
.time-range input { flex: 1; }
.time-range span { color: var(--ink3); font-family: var(--mono); font-size: 11px; }
.day-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.day-pill { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface2); border: 1px solid var(--rule2); border-radius: 50%; font-size: 14px; color: var(--ink3); cursor: pointer; transition: all .15s; }
.day-pill.on { background: var(--sage-500); color: var(--ink-inverse); border-color: var(--sage-500); font-weight: 500; }
.day-pill:hover:not(.on) { background: var(--stone-100); }
.sync-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--sage-50); border: 1px solid var(--sage-200); border-radius: var(--r8); margin-bottom: 14px; }
.sync-status.error { background: var(--terracotta-l); border-color: var(--terracotta); }
.sync-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-500); box-shadow: 0 0 0 4px rgba(74,124,92,.2); animation: pulse 2s infinite; flex-shrink: 0; }
.sync-status.error .sync-pulse { background: var(--terracotta); box-shadow: 0 0 0 4px rgba(196,99,62,.2); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(74,124,92,.2); } 50% { box-shadow: 0 0 0 8px rgba(74,124,92,.05); } }
.sync-status-text { flex: 1; font-size: 12.5px; }
.sync-status-text b { color: var(--sage-700); font-weight: 600; }
.sync-status.error b { color: var(--terracotta); }
.sync-status-time { font-family: var(--mono); font-size: 11px; color: var(--ink3); }

/* ─── MODAL ─── */
.modal-overlay { position: fixed; inset: 0; background: rgba(26,22,18,.5); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
/* §6.5 塊三：confirm 第二層 overlay（疊在 #modal 上、獨立容器不覆寫表單）。背景 rgba 屬透明衍生例外。 */
.confirm-overlay { position: fixed; inset: 0; z-index: var(--z-confirm); display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.confirm-box { background: var(--surface); border-radius: var(--r12); padding: 20px 24px; max-width: 380px; box-shadow: var(--shadow-lg); }
.confirm-msg { font-size: 14px; line-height: 1.6; color: var(--ink2); padding: 4px 0 16px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-overlay.open { display: flex; animation: fadeIn .15s ease both; }
.modal { background: var(--surface); border-radius: var(--r16); width: 540px; max-width: calc(100vw - 32px); max-height: 85vh; overflow: hidden; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: modalIn .2s ease both; }
.modal.modal-wide { width: 680px; }   /* 寬版（會議設定：確認清單欄位多，避免擠壓） */
@keyframes modalIn { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--rule); }
.modal-head h3 { font-size: 16px; font-weight: 600; flex: 1; }
.modal-close { background: none; border: none; color: var(--ink3); font-size: 20px; padding: 2px 8px; border-radius: var(--r6); }
.modal-close:hover { background: var(--surface2); }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--rule); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface2); }

/* Forms in modal */
.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-field label { font-size: 11px; color: var(--ink3); font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.ss-loadcalc .form-field label { font-size: 13px; }   /* 負荷與資源精算：欄位表頭 +2px 明顯些 */
.form-field input, .form-field select, .form-field textarea { padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r8); background: var(--surface2); outline: none; font-size: 13px; transition: all .15s; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--sage-500); background: var(--surface); box-shadow: 0 0 0 3px rgba(74,124,92,.1); }
.form-field textarea { resize: vertical; min-height: 60px; font-family: var(--sans); line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* M2 表單改造：實際執行反向摺疊（DOM 永在、CSS 收合；new 預設收起、edit 預設展開） */
.form-collapse { border: 1px solid var(--rule); border-radius: var(--r8); margin-bottom: 12px; }
.form-collapse-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: pointer; font-size: 11px; color: var(--ink3); font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; user-select: none; }
.form-collapse-chevron { display: inline-block; transition: transform .15s; }
.form-collapse.open .form-collapse-chevron { transform: rotate(90deg); }
.form-collapse .collapse-body { display: none; padding: 0 10px 4px; }
.form-collapse.open .collapse-body { display: block; }

/* M2-§6.4：前置任務結構化（每條 = 三欄垂直堆疊卡片：接在誰後 / 銜接方式 / 緩衝天數） */
#tf-pred-list { display: flex; flex-direction: column; gap: var(--r8); }
.pred-row { display: flex; flex-direction: column; gap: var(--r8); padding: var(--r10); border: 1px solid var(--rule); border-radius: var(--r8); background: var(--surface); }
.pred-field { display: flex; flex-direction: column; gap: var(--r4); }
/* 彩色 label（info 色族，比照 .tip 的 --slate-ink）+ 行內 emoji icon */
.pred-field-label { font-size: 12px; font-weight: 500; color: var(--slate-ink); }
.pred-field-line { display: flex; align-items: center; gap: var(--r6); }
.pred-field-line .pred-search { flex: 1 1 auto; min-width: 0; }
.pred-row .pred-search, .pred-row .pred-rel, .pred-row .pred-lag { height: 36px; padding: 0 var(--r8); }
.pred-row .pred-lag { width: 96px; }
/* 刪鈕：比照 .dept-member-chip button（無框/透明/ink4，hover rose） */
.pred-del { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--ink4); font-size: 14px; line-height: 1; padding: 0 var(--r4); }
.pred-del:hover { color: var(--rose); }
/* 加列：text-link 風格小鈕 */
.pred-add { margin-top: var(--r6); border: none; background: none; cursor: pointer; color: var(--sage-700); font-size: 12px; padding: 2px 0; }
.pred-add:hover { text-decoration: underline; }
/* 常駐說明小字（前置欄三 / 總說明 / 類型·緊急·狀態 共用，單一定義） */
.field-hint { font-size: 11px; color: var(--ink3); line-height: 1.5; }
.pred-intro { margin-bottom: var(--r4); }

/* ── HintBox：區塊級說明框公版（展開/收起 + 收起態 hover 浮出 data-tip，§6.5b）── */
.hintbox { border: 0.5px solid var(--sage-100); border-radius: var(--r8); background: var(--surface); margin: 10px 0; }
.hintbox-bar { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 9px 12px; background: var(--hint-head); border-radius: var(--r8) var(--r8) 0 0; }
.hintbox.collapsed .hintbox-bar { border-radius: var(--r8); }
.hintbox-head { display: flex; align-items: center; gap: 8px; flex: 1; }
.hintbox-bar i { font-size: 18px; color: var(--sage-600); }
.hintbox-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.hintbox-summary { font-size: 12px; color: var(--ink3); }
.hintbox-toggle { font-size: 12px; color: var(--sage-600); }
.hintbox-body { overflow: hidden; max-height: 600px; transition: max-height .25s ease; padding: 12px; }
.hintbox.collapsed .hintbox-body { max-height: 0; padding-top: 0; padding-bottom: 0; }
/* HintBox 內 <ol> 步驟列表（原無樣式→吃瀏覽器預設破圖）：重設縮排、行高、項間距 */
.hintbox-body ol { margin: 0; padding-left: 20px; }
.hintbox-body ol li { font-size: 13.5px; line-height: 1.5; color: var(--ink2); margin-bottom: 6px; }
.hintbox-body ol li:last-child { margin-bottom: 0; }
.hintbox-body ol li b { color: var(--ink); }
/* HintBox 內四條規則色塊（成對 -l 底 / -ink 字，全走 :root） */
/* reg A：HintBox body 全站統一白底、一種規則——原 ht-start/dur/end/down 四色塊中性化（不再綠/琥珀/藍/粉多段） */
.ht-rule { display: block; padding: 4px 2px; margin-bottom: 5px; font-size: 12px; line-height: 1.6; color: var(--ink2); }
.ht-rule:last-child { margin-bottom: 0; }
.ht-rule b { display: block; margin-bottom: 3px; font-weight: 600; color: var(--ink); }
.ht-rule span { text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; }
.ht-rule.ht-start, .ht-rule.ht-dur, .ht-rule.ht-end, .ht-rule.ht-down { background: transparent; }


/* 計量方式（第27項）：模式由入口決定（專案任務＝工期制／工作台小時 Task＝時段制），data-measure 放 .task-form 遙控分散欄位顯隱。切換 toggle 已移除（兩邊切開，§18.10d 表單重排）。 */
.task-form[data-measure="duration"] .mg-hours { display: none; }
.task-form[data-measure="hours"] .mg-duration { display: none; }
.task-form[data-measure="hours"] .dur-only { display: none; }
.task-form .tf-invalid { border-color: var(--rose); background: var(--rose-l); }

/* ── 任務 modal 排版重構（.tf-redesign 限定，不影響其他表單）─────────────── */
/* 欄位標題改 13px sentence-case 暖墨（覆蓋全站 11px mono uppercase） */
.tf-redesign .form-field label { font-size: 13px; font-weight: 500; color: var(--ink2); font-family: var(--sans); letter-spacing: normal; text-transform: none; }
.tf-redesign .tf-field-name input { font-size: 15px; }
/* 分區小標＋細線 */
.tf-redesign .tf-section-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: var(--ink4); letter-spacing: .04em; margin: 18px 0 8px; }
.tf-redesign .tf-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
/* 排程與時程群組卡 */
.tf-redesign .tf-sched-card { background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r12); padding: 14px; margin-bottom: 18px; }
.tf-redesign .tf-sched-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--sage-700); margin-bottom: 14px; }
.tf-redesign .tf-sched-title i { font-size: 17px; color: var(--sage-600); }
.tf-redesign .tf-pred-field { margin-bottom: 14px; }
/* 時程三劍客橫列：預計開始 → 工期 → 預計完成（皆可直接編輯） */
.tf-redesign .tf-chain { display: flex; align-items: stretch; gap: 0; border-top: 1px dashed var(--rule); padding-top: 14px; }
.tf-redesign .tf-chain-cell { display: flex; flex-direction: column; }
.tf-redesign .tf-start-cell, .tf-redesign .tf-end-cell { flex: 1; }
.tf-redesign .tf-dur-cell, .tf-redesign .tf-hours-cell { width: 100px; flex: none; }
.tf-redesign .tf-chain-arrow { display: flex; align-items: flex-end; padding: 0 7px 9px; }
.tf-redesign .tf-chain-arrow i { font-size: 16px; color: var(--stone-300); }
.tf-redesign .tf-cell-label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink3); margin-bottom: 4px; }
.tf-redesign .tf-cell-accent { justify-content: center; color: var(--sage-700); font-weight: 500; }
.tf-redesign .tf-chain input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--r8); background: var(--surface); font-size: 13px; }
.tf-redesign .tf-dur-cell input { text-align: center; background: var(--sage-50); border: 1.5px solid var(--sage-300); font-weight: 500; color: var(--sage-700); }
.tf-redesign .tf-chain-hint { margin-top: 8px; color: var(--ink4); line-height: 1.5; }

/* ── §18.10d 表單重排：排程卡加大黑字＋Planned/Actual＋狀態晶片＋擱置＋淨工作天精算＋進階 ── */
.tf-redesign .tf-sched-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.tf-redesign .tf-cell-label { font-size: 13px; color: var(--ink); font-weight: 500; }
.tf-redesign .tf-cell-accent { color: var(--ink); font-weight: 700; }
.tf-redesign .tf-chain input { font-size: 14px; color: var(--ink); }
.tf-redesign .tf-dur-cell input { color: var(--sage-700); }
/* Planned / Actual 實際列（貼齊預計、綠底以資對照） */
.tf-redesign .tf-actual-row { display: flex; gap: 12px; margin-top: 12px; }
.tf-redesign .tf-actual-cell { flex: 1; display: flex; flex-direction: column; }
.tf-redesign .tf-actual-lbl { color: var(--sage-700); font-weight: 600; }
.tf-redesign .tf-actual-cell input { height: 38px; padding: 0 10px; border: 1px solid var(--sage-100); border-radius: var(--r8); background: var(--sage-50); font-size: 14px; color: var(--ink); box-sizing: border-box; }
/* 狀態晶片列 */
.tf-redesign .tf-statusbar { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--rule); flex-wrap: wrap; }
.tf-redesign .tf-stchip { font-size: 13px; font-weight: 600; border-radius: 99px; padding: 4px 13px; }
.tf-redesign .tf-stchip.st-pending, .tf-redesign .tf-stchip.st-hold { background: var(--cream); color: var(--ink3); }
.tf-redesign .tf-stchip.st-wip { background: var(--amber-l); color: var(--amber-ink); }
.tf-redesign .tf-stchip.st-done { background: var(--sage-50); color: var(--sage-700); }
.tf-redesign .tf-stlock { font-size: 12px; color: var(--ink3); display: flex; align-items: center; gap: 4px; }
.tf-redesign .tf-hold { margin-left: auto; font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tf-redesign .tf-hold input { width: auto; }
.tf-redesign .tf-holdreason { margin-top: 9px; }
.tf-redesign .tf-holdreason input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px; border: 1px solid var(--rule2); border-radius: var(--r8); font-size: 13px; }
/* 淨工作天精算（選填展開） */
.tf-redesign .tf-netdays-btn { margin-top: 9px; background: var(--surface); border: 1px solid var(--rule2); color: var(--ink3); border-radius: var(--r6); font-size: 12px; font-weight: 500; padding: 6px 12px; cursor: pointer; font-family: var(--sans); }
.tf-redesign .tf-netdays-btn:hover { border-color: var(--amber-accent); color: var(--amber-ink); }
.tf-redesign .tf-netdays { margin-top: 12px; border: 1px dashed var(--amber-accent); border-radius: var(--r8); padding: 12px 13px; background: var(--amber-l); }
.tf-redesign .tf-netdays-head { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--amber-ink); margin-bottom: 8px; }
.tf-redesign .tf-netdays-x { margin-left: auto; color: var(--ink4); cursor: pointer; font-weight: 400; }
.tf-redesign .tf-netdays-derived { font-size: 12px; color: var(--ink3); margin-bottom: 8px; }
.tf-redesign .tf-netdays-derived b { color: var(--ink2); font-weight: 600; }
.tf-redesign .tf-netdays-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink3); }
.tf-redesign .tf-netdays-row input { width: 84px; height: 34px; padding: 0 10px; border: 1px solid var(--rule2); border-radius: var(--r6); text-align: center; font-size: 14px; box-sizing: border-box; }
.tf-redesign .tf-netdays-conv { font-weight: 600; color: var(--amber-ink); }
.tf-redesign .tf-netdays-warn { margin-top: 9px; font-size: 12px; color: var(--amber-ink); background: var(--surface); border-radius: var(--r6); padding: 7px 10px; line-height: 1.55; }
/* 進階區：副標、風險勾選、連結 icon */
.tf-redesign .tf-adv-badge { font-size: 11px; font-weight: 600; color: var(--sage-700); background: var(--sage-50); border-radius: 99px; padding: 1px 8px; margin-left: 7px; text-transform: none; letter-spacing: normal; }
.tf-redesign .tf-adv-cap { margin-left: auto; font-size: 11px; color: var(--ink4); font-weight: 400; text-transform: none; letter-spacing: normal; }
.tf-redesign .tf-sublabel { font-size: 11px; color: var(--ink4); font-weight: 400; }
.tf-redesign .tf-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink2); padding: 8px 0; cursor: pointer; }
.tf-redesign .tf-chk input { width: auto; }
.tf-redesign .tf-link-wrap { position: relative; }
.tf-redesign .tf-link-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--ink4); pointer-events: none; }
.tf-redesign input.tf-has-ico { padding-left: 32px; }

/* §18.10d ⑤ 結案輕彈：實際工作天數回報彈窗（條列資訊＋單行數字輸入＋單位·壓低高度） */
.netcalib-info { list-style: none; margin: 0 0 12px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r8); font-size: 13px; color: var(--ink2); line-height: 1.9; }
.netcalib-info b { color: var(--ink3); font-weight: 600; }
.netcalib-opts { display: flex; flex-direction: column; gap: 11px; margin-bottom: 14px; }
.netcalib-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); cursor: pointer; }
.netcalib-opt input[type="radio"] { width: auto; margin: 0; flex: none; }
.netcalib-opt input[type="number"] { width: 92px; height: 34px; padding: 0 10px; border: 1px solid var(--rule2); border-radius: var(--r6); text-align: center; font-size: 14px; box-sizing: border-box; }
.netcalib-opt input[type="number"]:focus { outline: none; border-color: var(--sage-500); box-shadow: 0 0 0 3px rgba(74,124,92,.12); }
.netcalib-opt input[type="number"]:disabled { background: var(--cream); color: var(--ink4); }
.netcalib-unit { font-size: 13px; color: var(--ink2); }
.netcalib-feel { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 10px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r8); }
.netcalib-feel-lbl { font-size: 13px; color: var(--ink3); font-weight: 600; flex: none; }
.netcalib-feel-opt { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.netcalib-feel-opt input[type="radio"] { width: auto; margin: 0; }
.netcalib-desc { font-size: 12px; color: var(--ink4); line-height: 1.65; }

/* Color picker */
.color-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .1s; }
.cp-swatch.on { border-color: var(--ink); transform: scale(1.1); }

/* Urgent modal rows */
.urgent-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r8); background: var(--terracotta-l); margin-bottom: 6px; border-left: 3px solid var(--terracotta); cursor: pointer; }
.urgent-row:hover { background: var(--terracotta-l-hover); }
.urgent-row .u-name { font-weight: 500; flex: 1; font-size: 13px; }
.urgent-row .u-deadline { font-family: var(--mono); font-size: 11px; color: var(--terracotta); font-weight: 600; }
.urgent-row .u-proj { font-size: 10.5px; font-family: var(--mono); background: rgba(196,99,62,.15); padding: 2px 7px; border-radius: 99px; color: var(--terracotta); }

/* ─── TOOLTIP(data-tip 委派,JS 見 initTooltip)─── */
.pm-tooltip { position: fixed; max-width: 320px; padding: 8px 12px; background: var(--sage-800); color: var(--ink-inverse); border-radius: var(--r6); box-shadow: var(--shadow-lg); font-size: 12px; line-height: 1.6; z-index: var(--z-tooltip); pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.pm-tooltip.show { opacity: 1; }
.pm-tooltip-title { font-weight: 600; color: var(--sage-200); padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.18); } /* 分隔線 rgba 為合理例外:變數無法帶 alpha */
.pm-tooltip-body { white-space: pre-line; }

/* ─── TOAST ─── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 12px 18px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--sage-500); border-radius: var(--r8); box-shadow: var(--shadow-lg); font-size: 13px; min-width: 240px; animation: toastIn .25s ease both; }
.toast.error { border-left-color: var(--terracotta); }
.toast.warning { border-left-color: var(--amber); }
/* closable toast 的 ✕（:has 只影響有 ✕ 的 toast，其餘呼叫不變）*/
.toast:has(.toast-close) { display: flex; align-items: center; gap: 12px; }
.toast-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--ink3); font-size: 16px; line-height: 1; padding: 0 2px; }
.toast-close:hover { color: var(--ink2); }
@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--rule2); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ─── PRINT ─── */
@media print {
  .sidebar, .topbar, .report-toolbar { display: none !important; }
  body { background: white; }
  .app { grid-template-columns: 1fr; }
  .content { padding: 0; }
  .page { display: block !important; }
  #page-report ~ .page:not(#page-report) { display: none !important; }
}

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .dash-grid, .proj-grid, .proj-dash-grid { grid-template-columns: 1fr; }
  .report-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ── D-2c-3 部門擔當表 ───────────────── */
.dept-edit-list { display: flex; flex-direction: column; gap: var(--r8); }

/* 欄位標題列（小字 muted，約略對齊欄位） */
.dept-editor-head { display: flex; align-items: center; gap: var(--r8); font-size: 11px; color: var(--ink3); padding: 0 var(--r8) var(--r4); }
.dept-head-name { flex: 0 0 118px; }
.dept-head-members { flex: 1 1 auto; }

/* 一列 = 大膠囊 + 獨立刪部門鈕 */
.dept-edit-row { display: flex; align-items: center; gap: var(--r8); margin-bottom: var(--r6); }

/* 大膠囊（方形鈍角 --r8） */
.dept-pill {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--r8);
  padding: var(--r6) var(--r8);
  border: 1px solid var(--rule2); border-radius: var(--r8);
  background: var(--surface);
}
.dept-edit-name {
  flex: 0 0 110px; width: 110px;
  border: none; background: none; font: inherit; font-weight: 600;
  color: var(--ink); padding: var(--r4);
}
.dept-edit-name:focus { outline: none; }

/* 細分隔線 */
.dept-pill-sep { flex: 0 0 auto; width: 1px; align-self: stretch; background: var(--rule2); }

/* 擔當膠囊群（防爆：min-width:0 + flex-wrap） */
.dept-members { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--r6); }

/* 擔當成員群組：透明，input + 刪鈕並排 */
.dept-member-chip { display: inline-flex; align-items: center; gap: var(--r3); }
.dept-member-name { field-sizing: content; min-width: 60px; max-width: 200px; border: none; background: none; font: inherit; color: var(--ink); padding: var(--r4); }
.dept-member-name:focus { outline: none; }
.dept-member-del { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--rose); padding: 0; line-height: 1; font-size: 14px; opacity: 0; transition: opacity .12s; }
.dept-member-chip:hover .dept-member-del { opacity: .6; }

/* ＋擔當：輕量文字鈕，對齊成員框 */
.dept-member-add { padding: var(--r4) var(--r6); border: none; background: none; color: var(--sage-600); cursor: pointer; font-size: 13px; }
.dept-member-add:hover { color: var(--sage-700); }

/* 獨立刪部門鈕（方形鈍角 --r8，固定 28x28） */
.dept-del-btn {
  flex: 0 0 auto; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule2); border-radius: var(--r8);
  background: var(--surface); color: var(--ink4); cursor: pointer; font-size: 15px; line-height: 1;
}
.dept-del-btn:hover { color: var(--rose); border-color: var(--rose); }

/* ── D-2d-3 刪部門改派彈窗 ───────────── */
.reassign-list {
  display: flex; flex-direction: column; gap: var(--r6);
  max-height: 50vh; overflow-y: auto;
}
.reassign-row {
  display: flex; align-items: center; gap: var(--r8);
  padding: var(--r6) var(--r8); border-radius: var(--r6);
  background: var(--surface2);
}
.reassign-task { flex: 1 1 auto; font-size: 14px; color: var(--ink); }
.reassign-select {
  flex: 0 0 auto; min-width: 120px;
  padding: var(--r4) var(--r6);
  border: 1px solid var(--rule2); border-radius: var(--r4);
  background: var(--surface); color: var(--ink); font: inherit;
}

/* ── 範本第二階段 編輯任務骨架頁殼（§8d.15 B：頁殼+標頭；Gantt軸/清單步驟3/4）── */
.stage2-wrap { max-width: 1080px; margin: 0 auto; padding: 6px 4px 48px; }
.stage2-head { display: flex; align-items: center; font-size: 18px; font-weight: 600; color: var(--sage-700); margin-bottom: 16px; }
.stage2-head .s2-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sage-600); color: var(--ink-inverse); font-size: 13px; margin-right: 8px; }
.stage2-help { background: var(--sage-50); border: 1px solid var(--sage-100); border-radius: var(--r8); padding: 10px 14px; font-size: 12.5px; line-height: 1.7; color: var(--stone-600); margin-bottom: 20px; }
.stage2-help-head { font-weight: 600; color: var(--sage-700); margin-bottom: 4px; }
.stage2-help-block { padding: 7px 0; }
.stage2-help-block + .stage2-help-block { border-top: 1px solid var(--sage-100); }
.stage2-help-block b { color: var(--sage-700); }
.s2-case { background: var(--paper); border: 1px solid var(--stone-100); border-left-width: 4px; border-radius: var(--r8); padding: 14px 16px; margin-bottom: 18px; }
.s2-case-main  { border-left-color: var(--proj-c1); }
.s2-case-other { border-left-color: var(--proj-c3); }
.s2-case-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.s2-case-name { font-size: 14px; font-weight: 600; color: var(--stone-600); }
.s2-case-range { margin-left: auto; font-size: 12px; color: var(--stone-400); }
.s2-ph { border: 1px dashed var(--stone-200); border-radius: var(--r6); padding: 14px; margin-top: 8px; font-size: 12px; color: var(--stone-400); text-align: center; }
.stage2-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 26px; }
.s2-unassigned-bar { margin: 18px 0 0; padding: 10px 12px; background: var(--terracotta-l); border-left: 3px solid var(--terracotta); border-radius: var(--r6); font-size: 12px; color: var(--terracotta-ink); }

/* ── 範本第二階段 步驟4：任務清單可編輯（負責人下拉＋需交付勾選）── */
.s2-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; margin-top: 8px; }
.data-table.s2-tbl thead th { padding: 9px 11px; text-align: center; font-weight: 500; font-size: 13px; color: var(--stone-100); white-space: nowrap; vertical-align: middle; background: var(--sage-700); }
.data-table.s2-tbl tbody td.col-mid { text-align: center; }
.data-table.s2-tbl thead .s2-all-th { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--sage-200); white-space: nowrap; cursor: pointer; }
.data-table.s2-tbl thead tr:first-child th:first-child { border-top-left-radius: var(--r10); }
.data-table.s2-tbl thead tr:first-child th:last-child { border-top-right-radius: var(--r10); }
/* 前置任務跨三欄群組表頭（置中）＋下排子欄標題（序號/銜接方式/緩衝） */
.data-table.s2-tbl thead th.col-pred-group { text-align: center; padding-bottom: 3px; }
.data-table.s2-tbl thead th.col-pred-sub { text-align: center; font-size: 12px; font-weight: 400; color: var(--sage-200); padding-top: 0; vertical-align: top; }
/* 前置三欄內容置中、內距收緊 */
.s2-tbl td.col-pred { text-align: center; padding-left: 6px; padding-right: 6px; }
.s2-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--stone-100); color: var(--stone-600); vertical-align: middle; }
.s2-tbl tr.s2-crit > td { background: var(--terracotta-l); }
.s2-crit-tag { background: var(--rose-l); color: var(--rose-ink); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; margin-left: 6px; white-space: nowrap; }
.data-table.s2-tbl tbody tr:nth-child(even) { background: transparent; }   /* 關閉通用斑馬，改用 .s2-rz 精準上色（避開階段列/插入列） */
.data-table.s2-tbl tbody tr.s2-rz { background: var(--sage-50); }   /* 斑馬紋：偶數資料列 */
.data-table.s2-tbl tbody tr[data-taskid]:hover { background: var(--sage-100); }
.data-table.s2-tbl tbody tr[data-taskid]:hover td:first-child { box-shadow: inset 3px 0 0 0 var(--sage-700); }
.s2-all { font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.s2-sub { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--stone-400); background: var(--stone-50); padding: 1px 7px; border-radius: 99px; }
/* 輸入框/下拉平時透明無邊框（降噪）；滑入該列才浮現淡邊框＋白底 */
.s2-name-inp, .s2-owner-sel, .s2-dur-inp { font-size: 13px; padding: 3px 6px; border: 1px solid transparent; border-radius: var(--r6); background: transparent; color: var(--stone-600); transition: border-color .12s, background .12s; }
.s2-name-inp { width: 100%; font-size: 13px; color: var(--ink); }
.data-table.s2-tbl td.col-flex.s2-namecell { max-width: none; overflow: visible; text-overflow: clip; }
.s2-nameflex { display: flex; align-items: center; gap: 6px; }
.s2-nameflex .s2-name-inp { flex: 1 1 auto; width: auto; min-width: 80px; }
.s2-nameflex .s2-crit-tag { flex: none; margin-left: 0; }
/* §欄寬引導（auto 框架內給合理下限，穩定排版；非死寫固定，內容更寬仍可撐） */
.data-table.s2-tbl td.s2-namecell { min-width: 160px; }
.data-table.s2-tbl td.col-num { min-width: 38px; }
.data-table.s2-tbl td.s2-deptcell { min-width: 80px; }
.data-table.s2-tbl td.s2-ownercell { min-width: 84px; }
.data-table.s2-tbl td.s2-pc-typecell { max-width: 124px; }
.data-table.s2-tbl .s2-pc-seq { width: 68px; }   /* 容 2–3 位數前置序號（如「10」）不被卡 */
.data-table.s2-tbl .s2-pc-lag { width: 44px; }
.data-table.s2-tbl td.s2-dur { min-width: 50px; }
.data-table.s2-tbl td.s2-date { min-width: 98px; }
.s2-dur-inp { width: 52px; text-align: center; }
.s2-tbl tbody tr[data-taskid]:hover .s2-name-inp, .s2-tbl tbody tr[data-taskid]:hover .s2-owner-sel, .s2-tbl tbody tr[data-taskid]:hover .s2-dur-inp { border-color: var(--stone-200); background: var(--paper); }
.s2-name-inp:focus, .s2-owner-sel:focus, .s2-dur-inp:focus { border-color: var(--sage-500); background: var(--paper); outline: none; }
.s2-owner-unassigned { color: var(--stone-500); }
.s2-pred { color: var(--stone-500); white-space: nowrap; }
.s2-pred-hl { background: var(--sage-50); }
.s2-pred-multi { font-size: 13px; color: var(--stone-500); }
/* 前置組合框：序號/白話型別/緩衝三控制項收進一個淡底膠囊（無接縫）；滑入該列才浮主題色細框 */
.s2-predcombo { display: inline-flex; align-items: center; gap: 4px; background: var(--stone-50); border: 1px solid transparent; border-radius: var(--r6); padding: 2px 5px; white-space: nowrap; transition: border-color .12s; }
.s2-tbl tbody tr[data-taskid]:hover .s2-predcombo { border-color: var(--sage-500); }
/* 前置三欄：各自獨立儲存格，欄寬由表格分配、互不重疊；序號窄、銜接方式較寬、緩衝最窄 */
/* 前置三欄寬度交給 table-layout:auto 自適應（§8g，不寫死）；cell 內 .s2-pc-* width:100% 吃滿欄，表頭/內容同欄自動對齊 */
.s2-pc-seq, .s2-pc-type, .s2-pc-lag { font-size: 13px; border: 1px solid transparent; background: transparent; color: var(--stone-600); border-radius: var(--r6); box-sizing: border-box; width: 100%; padding: 3px 4px; transition: border-color .12s, background .12s; }
/* 下拉右側留箭頭空間，序號/型別文字不被箭頭壓到 */
.s2-pc-seq, .s2-pc-type { padding: 3px 18px 3px 6px; }
.s2-pc-lag { text-align: center; }
.s2-tbl tbody tr[data-taskid]:hover .s2-pc-seq, .s2-tbl tbody tr[data-taskid]:hover .s2-pc-type, .s2-tbl tbody tr[data-taskid]:hover .s2-pc-lag { border-color: var(--stone-200); background: var(--paper); }
.s2-pc-seq:focus, .s2-pc-type:focus, .s2-pc-lag:focus { border-color: var(--sage-500); background: var(--paper); outline: none; }
.s2-deptcell { font-size: 13px; color: var(--ink3); white-space: nowrap; }
.s2-dept-none { color: var(--ink4); }
.s2-dur, .s2-date { color: var(--stone-400); font-size: 13px; white-space: nowrap; }
.s2-del-cell { text-align: center; }
.s2-del { border: none; background: none; cursor: pointer; color: var(--stone-400); font-size: 13px; line-height: 1; padding: 2px 6px; border-radius: var(--r6); }
.s2-del:hover { color: var(--terracotta); background: var(--terracotta-l); }
.s2-ins { border: none; background: none; cursor: pointer; color: var(--stone-400); font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: var(--r6); }
.s2-ins:hover { color: var(--sage-600); background: var(--sage-100); }

/* ── 範本第二階段：interval 餘裕燈號（三態染色＋五欄排版，§4.8.7.4 配色方案 B）── */
.s2-slack { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r8); border: 0.5px solid; margin-bottom: 8px; }
.s2-slack-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.s2-slack-msg { font-size: 13px; font-weight: 500; }
.s2-slack-period, .s2-slack-nums, .s2-slack-fastest { font-size: 11px; }
.s2-slack-green { background: var(--sage-50); border-color: var(--sage-600); color: var(--sage-700); }
.s2-slack-green .s2-slack-dot { background: var(--sage-600); }
.s2-slack-yellow { background: var(--amber-l); border-color: var(--amber-accent); color: var(--amber-ink); }
.s2-slack-yellow .s2-slack-dot { background: var(--amber-accent); }
.s2-slack-red { background: var(--rose-l); border-color: var(--rose); color: var(--rose-ink); }
.s2-slack-red .s2-slack-dot { background: var(--rose); }

/* ── §4.8.7.5/.8 舊版嵌入式溢出引導 `.s2-ovf*` CSS 已退役（2026-06-27），由下方 §4.8.7.9 `.ovf-*` 取代 ── */

/* ── §4.8.7.9 智慧排程衝突處理面板（聚焦獨立頁：分頁＋三層卡＋層二Top3快選＋層三戰報/時程異動表）── */
.ovf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; flex-wrap: wrap; }
.ovf-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 15px; cursor: pointer; font-size: 13px; color: var(--ink4); display: flex; align-items: center; gap: 7px; }
.ovf-tab:hover { color: var(--ink2); }
.ovf-tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--terracotta); }
.ovf-tab-lack { color: var(--rose); font-size: 12px; }
.ovf-tab-ok { color: var(--sage-600); font-size: 12px; }
.ovf-case-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ovf-case-name { font-size: 17px; font-weight: 600; color: var(--ink); }
.ovf-case-range { margin-left: auto; font-size: 12px; color: var(--ink4); }
.ovf-rangebadge { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ovf-rb-old { color: var(--ink4); }
.ovf-rb-old i { font-size: 12px; vertical-align: -1px; }
.ovf-rb-arr { color: var(--terracotta); font-weight: 700; }
.ovf-rb-new { color: var(--ink2); font-weight: 500; }
.ovf-rb-delay { color: var(--terracotta-ink); background: var(--terracotta-l); padding: 1px 6px; border-radius: var(--r4); }
.ovf-banner { background: var(--rose-l); border: 1px solid var(--rose); border-radius: var(--r10); padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--rose-ink); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.ovf-banner b { color: var(--rose-ink); }
.ovf-bdot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); flex: none; }
.ovf-banner.ok { background: var(--sage-50); border-color: var(--sage-chip); color: var(--sage-700); }
.ovf-banner.ok i { font-size: 16px; color: var(--sage-600); }
.ovf-resolved-hint { display: flex; align-items: center; gap: 8px; background: var(--sage-50); border: 1px solid var(--sage-chip); border-radius: var(--r10); padding: 14px 16px; font-size: 13px; color: var(--sage-700); }
.ovf-resolved-hint i { font-size: 17px; }
.ovf-l2-recalc-btn { background: var(--surface); color: var(--amber-ink); border: 1px solid var(--amber-accent); border-radius: var(--r8); padding: 6px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.ovf-l2-recalc-btn:hover { background: var(--amber-l); }
.ovf-t3hd.ok { color: var(--sage-700); }
.ovf-t3hd.ok i { color: var(--sage-600); }
.ovf-hd { font-size: 13.5px; font-weight: 600; color: var(--ink2); margin-bottom: 10px; }
.ovf-plan { display: flex; gap: 11px; align-items: flex-start; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--stone-200); border-radius: 0 var(--r10) var(--r10) 0; padding: 12px 14px; margin-bottom: 10px; }
.ovf-p1 { border-left-color: var(--sage-500); }
.ovf-p2 { border-left-color: var(--amber); }
.ovf-p2.on { background: var(--amber-l); border-color: var(--amber); }
.ovf-p1.on { background: var(--sage-50); border-color: var(--sage-500); }
.ovf-p1.on .ovf-radio.on { border-color: var(--sage-600); }
.ovf-p1.on .ovf-radio.on span { background: var(--sage-600); }
.ovf-p1.on .ovf-pt { color: var(--sage-700); }
.ovf-plan.locked { opacity: .55; pointer-events: none; }
.ovf-radio { flex: none; width: 16px; height: 16px; border: 2px solid var(--stone-200); border-radius: 50%; cursor: pointer; margin-top: 2px; display: flex; align-items: center; justify-content: center; }
.ovf-radio.on { border-color: var(--amber); }
.ovf-radio.on span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.ovf-pbody { flex: 1 1 auto; min-width: 0; }
.ovf-pt { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 7px; margin-bottom: 4px; cursor: pointer; flex-wrap: wrap; }
.ovf-p2.on .ovf-pt { color: var(--amber-ink); }
.ovf-pd { font-size: 12px; color: var(--ink4); line-height: 1.55; }
.ovf-tag { font-size: 11px; padding: 1px 8px; border-radius: 99px; }
.ovf-tag.easy { background: var(--sage-chip); color: var(--sage-700); }
.ovf-tag.mid { background: var(--surface); color: var(--amber-ink); border: 1px solid var(--amber); }
.ovf-tag.hard { background: var(--rose-l); color: var(--rose-ink); }
.ovf-p1btn { font-size: 12.5px; padding: 7px 13px; margin-top: 9px; }
.ovf-l2-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ovf-l2-date { font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--stone-200); border-radius: var(--r8); background: var(--surface); color: var(--ink2); }
.ovf-t3box { margin-top: 12px; background: var(--surface); border: 1px solid var(--amber); border-radius: var(--r10); padding: 13px 15px; }
.ovf-t3hd { font-size: 12.5px; font-weight: 600; color: var(--amber-ink); display: flex; gap: 7px; margin-bottom: 10px; line-height: 1.45; }
.ovf-t3hd i { color: var(--amber-accent); font-size: 16px; flex: none; margin-top: 1px; }
.ovf-t3row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.ovf-t3n { background: var(--sage-50); color: var(--sage-700); font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 600; flex: none; }
.ovf-t3nmwrap { display: flex; flex-direction: column; width: 132px; flex: none; }
.ovf-t3nm { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovf-t3meta { font-size: 10.5px; color: var(--ink4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovf-t3dur { font-size: 12px; color: var(--ink4); }
.ovf-t3cap { flex-basis: 100%; font-size: 11px; color: var(--ink3); padding-left: 42px; line-height: 1.5; margin-top: 2px; }
.ovf-t3cap b { color: var(--rose-ink); }
.ovf-t3cap.none { color: var(--ink4); font-style: italic; }
.ovf-t3dur b { color: var(--ink2); }
.ovf-t3arr, .ovf-t3or { color: var(--ink4); font-size: 12px; }
.ovf-t3man { font-size: 12px; color: var(--ink3); }
.ovf-t3inp { width: 50px; padding: 4px 6px; border: 1px solid var(--stone-200); border-radius: var(--r6); font-size: 12px; text-align: center; }
.ovf-pill { min-width: 64px; text-align: center; background: var(--amber-l); color: var(--amber-ink); border: 1px solid var(--amber); border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ovf-pill:hover { background: var(--amber); color: var(--ink-inverse); }
.ovf-t3foot { display: flex; align-items: center; gap: 18px; margin-top: 13px; border-top: 1px solid var(--rule); padding-top: 12px; flex-wrap: wrap; }
.ovf-recalc { font-size: 12.5px; padding: 7px 15px; }
.ovf-t3tip { font-size: 13px; color: var(--ink3); line-height: 1.5; flex: 1 1 320px; }
.ovf-t3tip i { color: var(--amber-accent); margin-right: 2px; }
.ovf-t3tip b { color: var(--ink); font-weight: 600; }
.ovf-next-btn { font-size: 15px; font-weight: 700; }
.ovf-mini { margin-top: 12px; background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r8); padding: 11px 13px; }
.ovf-mini-hd { font-size: 11.5px; font-weight: 600; color: var(--ink2); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.ovf-mini-hd i { color: var(--amber-accent); font-size: 14px; }
.ovf-mini-row { display: flex; align-items: baseline; gap: 7px; font-size: 11.5px; flex-wrap: wrap; margin-bottom: 6px; }
.ovf-mini-k { color: var(--ink4); min-width: 78px; }
.ovf-mini-old { color: var(--ink4); }
.ovf-mini-arr { color: var(--rose); font-weight: 700; }
.ovf-mini-lack { color: var(--rose-ink); }
.ovf-mini-ok { color: var(--sage-700); }
.ovf-mini-cut { color: var(--sage-700); font-weight: 600; }
.ovf-mini-judge { font-size: 11px; color: var(--ink3); line-height: 1.5; }
.ovf-mini-judge b { color: var(--amber-ink); }

/* ── 範本第二階段 步驟3：Gantt 階段軸（色點＋綠黃紅燈號，點階段切換清單）── */
.s2-gantt-axis { margin: 22px 0 12px; }   /* top 4px→22px：上緣留白給首列今日線的「今天」旗標 */
.s2-grow { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: var(--r6); cursor: pointer; }
.s2-grow:hover { background: var(--stone-50); }
.s2-grow.on { background: var(--sage-50); box-shadow: inset 3px 0 0 0 var(--sage-600), inset 0 0 0 1px var(--sage-200); }
.s2-case-other .s2-grow.on { background: var(--slate-l); box-shadow: inset 3px 0 0 0 var(--slate), inset 0 0 0 1px var(--slate); }
.s2-gdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--stone-200); }
.s2-gdot-green { background: var(--sage-500); }
.s2-gdot-yellow { background: var(--amber); }
.s2-gdot-red { background: var(--rose); }
.s2-gname { flex: 0 0 78px; font-size: 14px; font-weight: 500; color: var(--stone-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2-gbar-track { flex: 1 1 auto; position: relative; height: 14px; background: var(--stone-50); border-radius: 99px; }
.s2-gbar { position: absolute; top: 0; height: 14px; border-radius: 99px; background: var(--proj-c1); }
.s2-gbar-none { left: 0; width: 100%; background: var(--stone-200); opacity: .5; }
.s2-gtoday { position: absolute; top: -9px; bottom: -9px; width: 2px; background: var(--gantt-today); z-index: 3; pointer-events: none; }   /* §甘特今日線：延伸出 track 高度→相鄰列連成一線；用中性今日色（非 rose，避與延誤混淆） */
.s2-gtoday-flag { position: absolute; left: 50%; top: -19px; transform: translateX(-50%); background: var(--gantt-today); color: var(--ink-inverse); font-size: 10px; font-weight: 500; line-height: 1; padding: 3px 6px; border-radius: 99px; white-space: nowrap; box-shadow: var(--shadow-sm); }   /* §今天旗標：只掛甘特首列今日線頂端，一眼標出「今天」 */
/* per-stage 燈號上色（比照 Stage 1：各段照 margin 綠/黃/紅，複用 sage/amber/rose） */
.s2-grow .s2-gbar-green { background: var(--sage-500); }
.s2-grow .s2-gbar-yellow { background: var(--amber); }
.s2-grow .s2-gbar-red { background: var(--rose); }
.s2-gdate { flex: 0 0 140px; min-width: 0; text-align: right; font-size: 13px; color: var(--stone-500); white-space: nowrap; cursor: help; }   /* min-width:0＝防日期長短不一撐破欄、偷走 track 寬 → 今日線各列對齊拉直 */
.s2-gstat { flex: 0 0 86px; text-align: center; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px; white-space: nowrap; margin-left: 8px; }
.s2-gstat.ok { background: var(--sage-50); color: var(--sage-800); }
.s2-gstat.bad { background: var(--rose-l); color: var(--rose-ink); cursor: pointer; text-decoration: underline; }

/* ── §4.8.7.4b Stage 2 New UI：頁殼＋部門面板＋甘特＋Banner＋說明列（buildHintBox）── */
.s2n-wrap { max-width: 1340px; margin: 0 auto; padding: 6px 4px 48px; }
.s2n-pagehd { margin-bottom: 14px; }
.s2n-head { display: flex; align-items: center; font-size: 18px; font-weight: 600; color: var(--sage-700); margin-top: 6px; }
.s2n-head .s2-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sage-600); color: var(--ink-inverse); font-size: 13px; margin-right: 8px; }
/* 說明列（buildHintBox 內文）每行：icon＋文字 */
.s2n-gd-row { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--stone-600); line-height: 1.55; }
.s2n-gd-row + .s2n-gd-row { margin-top: 6px; }
.s2n-gd-row > i { flex: none; margin-top: 1px; font-size: 15px; color: var(--sage-600); }
.s2n-gd-row b { font-weight: 600; color: var(--ink2); }
.s2n-gd-warn { color: var(--rose-ink); }
.s2n-gd-warn > i { color: var(--rose); }
.s2n-gd-warn b { color: var(--rose-ink); }
/* 提示 icon 分色（#1+#4：各行 icon 不同色好閱讀） */
.s2n-gd-row > i.ti-speakerphone { color: var(--terracotta); }
.s2n-gd-row > i.ti-chart-bar { color: var(--slate); }
.s2n-gd-row > i.ti-pointer { color: var(--sage-600); }
.s2n-gd-row > i.ti-bulb { color: var(--amber-accent); }
/* HintBox Title 列加底色＋區隔（scoped 不影響 Stage 1）；展開時只圓上緣 */
.s2n-wrap .hintbox-bar { background: var(--hint-head); border-radius: var(--r8) var(--r8) 0 0; }
.s2n-wrap .hintbox.collapsed .hintbox-bar { border-radius: var(--r8); }
.s2n-wrap .hintbox-body { padding-top: 10px; }
/* 每案 body：左部門面板（加寬）＋右甘特並排（窄欄收折成上下） */
.s2n-body { display: flex; gap: 16px; align-items: stretch; margin: 4px 0 10px; }
.s2n-left { flex: 0 0 300px; max-width: 300px; }
.s2n-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* 左部門面板（純顯示卡，標題＋新增/編輯部門鈕） */
.s2n-deptpanel { border: 1px solid var(--stone-100); border-radius: var(--r8); padding: 12px 14px; background: var(--surface); }
.s2n-dp-head { display: flex; align-items: center; margin-bottom: 10px; }
.s2n-dp-title { font-size: 14px; font-weight: 600; color: var(--sage-700); }
.s2n-dp-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: var(--sage-600); color: var(--ink-inverse); border: none; border-radius: var(--r6); padding: 6px 12px; font-size: 12px; cursor: pointer; }
.s2n-dp-btn:hover { background: var(--sage-700); }
.s2n-dp-btn i { font-size: 13px; }
.s2n-dp-row { display: flex; align-items: center; gap: 12px; padding: 6.5px 0; border-top: 1px solid var(--stone-100); }
.s2n-dp-name { flex: 0 0 90px; font-size: 13px; font-weight: 500; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2n-dp-members { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink3); line-height: 1.4; }
.s2n-dp-empty { color: var(--ink4); }
.s2n-dp-cnt { flex: none; font-size: 11px; color: var(--ink4); font-family: var(--mono); white-space: nowrap; }
.s2n-dp-none { font-size: 12px; color: var(--ink4); padding: 8px 0; line-height: 1.5; }
/* 未指派：有筆數→紅標警示；歸零→退為一般灰 */
.s2n-dp-unassigned .s2n-dp-name { color: var(--rose-ink); }
.s2n-dp-unassigned .s2n-dp-cnt { color: var(--rose-ink); font-weight: 600; }
.s2n-dp-unassigned.ok .s2n-dp-name, .s2n-dp-unassigned.ok .s2n-dp-cnt { color: var(--ink4); font-weight: 400; }
/* 當前階段 Banner（奶油底＋左綠線；固定專案綠，不隨階段換色，只更新文字） */
.s2n-banner { display: flex; align-items: center; gap: 10px; background: var(--cream); border: 1px solid var(--stone-100); border-left: 4px solid var(--sage-700); border-radius: var(--r8); padding: 9px 14px; margin-bottom: 10px; }
.s2n-bn-bad { color: var(--rose-ink); font-weight: 700; }
.s2n-bn-ok { color: var(--sage-700); font-weight: 600; }
.s2n-bn-ico { font-size: 17px; color: var(--sage-700); }
.s2n-bn-name { font-size: 16px; font-weight: 500; color: var(--sage-700); }
.s2n-bn-dl { margin-left: auto; font-size: 12.5px; color: var(--ink4); }
/* 部門彈窗內提示小字（§1 輔助小字：12px 淡灰、不粗不全黑） */
.s2n-dept-hint { font-size: 12px; color: var(--ink4); line-height: 1.5; margin: 2px 0 8px; }

/* ─── Auth DEV 身份切換面板（開發測試用，DEV_MODE 關閉後不顯示）─── */
#authDevPanel { position: fixed; right: 12px; bottom: 12px; z-index: var(--z-dev); background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--r8); padding: 8px; box-shadow: var(--shadow-lg); font-size: 12px; }
.adp-title { font-weight: 600; margin-bottom: 4px; }
.adp-cur { color: var(--ink3); margin-bottom: 6px; }
.adp-btn { display: block; width: 100%; margin: 2px 0; padding: 4px 8px; border: 1px solid var(--rule2); border-radius: var(--r6); background: var(--surface); cursor: pointer; font-size: 11px; }
.adp-btn:hover { background: var(--sage-50); }
#authDevPanel.collapsed { padding: 0; border: none; background: none; box-shadow: none; }
.adp-toggle { padding: 5px 10px; border: 1px solid var(--rule2); border-radius: 99px; background: var(--surface); cursor: pointer; font-size: 11px; color: var(--ink2); box-shadow: var(--shadow-sm); opacity: .85; }
.adp-toggle:hover { opacity: 1; background: var(--sage-50); }

/* ─── Can't view 擋頁（§8f.5）：none 全屏擋光，不顯示任何專案內容 ─── */
#authBlockout {
  position: fixed; inset: 0;
  background: var(--blockout-bg);
  color: var(--blockout-fg);
  z-index: var(--z-blockout);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
  font-size: 1.1rem;
}
#authBlockout.hidden { display: none; }

/* ═══ §4.8.7.4b 塊3a-刀1：第一階段「大局時間」預覽頁（靜態版面） ═══ */
.s1-preview { max-width: 957px; margin: 0 auto; padding: 16px 20px 20px; zoom: 1.15; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); }   /* 整頁等比放大 1.15；白底卡容器（內外層一致：選型 modal 白 → 開案表單白，NPI/ECN 共用） */
.s1-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.s1-proj-name { width: 300px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--rule2); border-radius: var(--r6); font-size: 12px; font-weight: 400; }
.s1-colors { display: flex; gap: 6px; align-items: center; min-height: 38px; }
.s1-tpl-sel { padding: 8px 10px; border: 1px solid var(--rule2); border-radius: var(--r6); font-size: 12px; font-weight: 400; }
.s1-cases { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.s1-case-col { flex: 1; min-width: 280px; padding: 14px; border-radius: var(--r8); box-shadow: var(--shadow); }
.s1-case-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.s1-case-del { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--stone-100); color: var(--ink3); cursor: pointer; font-size: 13px; }
.s1-case-del:hover { background: var(--rose-l); color: var(--rose-ink); }
.s1-case-name { flex: 1; padding: 6px 8px; border: 1px solid var(--rule2); border-radius: var(--r6); font-weight: 400; font-size: 12px; }
.s1-case-dates { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.s1-case-dates label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink3); }
.s1-case-dates input, .s1-case-dates select { padding: 5px 7px; border: 1px solid var(--rule2); border-radius: var(--r4); font-size: 13px; }
.s1-stagelist { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.s1-stage-chip { position: relative; padding: 2px 7px; border-radius: var(--r12); background: var(--surface2); font-size: 12px; color: var(--ink2); }
.s1-prev-section { margin-top: 24px; }
.s1-prev-title { font-weight: 600; font-size: 16px; margin-bottom: 10px; color: var(--ink); }
.s1-prev-case { padding: 12px; margin-bottom: 14px; border-radius: var(--r8); box-shadow: var(--shadow); }
.s1-prev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.s1-prev-name { font-weight: 600; }
.s1-prev-range { color: var(--ink3); font-size: 12px; }
.slack-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.slack-pill-green { background: var(--sage-chip); color: var(--sage-700); }
.slack-pill-yellow { background: var(--amber-l); color: var(--amber-ink); }
.slack-pill-red { background: var(--rose-l); color: var(--rose-ink); }
.s1-pill-wrap { position: relative; display: inline-flex; }
.s1-pill-wrap .slack-pill { cursor: help; }
.s1-pill-tip { position: absolute; bottom: calc(100% + 8px); left: 0; width: 250px; background: var(--surface); border: 1px solid var(--stone-200); border-radius: var(--r8); box-shadow: var(--shadow-lg); padding: 9px 11px; font-size: 12px; line-height: 1.6; color: var(--stone-500); z-index: 5; opacity: 0; visibility: hidden; transition: opacity .12s; }
.s1-pill-wrap:hover .s1-pill-tip { opacity: 1; visibility: visible; }
.s1-pill-tip::after { content: ""; position: absolute; top: 100%; left: 18px; border: 6px solid transparent; border-top-color: var(--surface); }
.s1-pill-tip-hd { display: flex; align-items: center; gap: 5px; font-weight: 600; margin-bottom: 3px; }
.s1-tiphd-green { color: var(--sage-700); }
.s1-tiphd-yellow { color: var(--amber-ink); }
.s1-tiphd-red { color: var(--rose-ink); }
.slack-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.slack-pill-green .slack-dot { background: var(--sage-500); }
.slack-pill-yellow .slack-dot { background: var(--amber); }
.slack-pill-red .slack-dot { background: var(--rose); }
.slack-dot.sd-green { background: var(--sage-500); }
.slack-dot.sd-yellow { background: var(--amber); }
.slack-dot.sd-red { background: var(--rose); }
.slack-help-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.slack-help-ambox { display: flex; align-items: flex-start; gap: 6px; background: var(--amber-l); border: 1px solid var(--amber-border); border-radius: var(--r6); padding: 8px 10px; font-size: 12px; line-height: 1.7; color: var(--stone-500); margin: 4px 0 12px; }
.slack-help-ambox .ti { flex: none; margin-top: 2px; color: var(--amber-ink); }
.slack-help-hl { background: var(--amber-accent); color: var(--ink-inverse); font-weight: 600; padding: 1px 7px; border-radius: 4px; }
.slack-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; border-top: 1px solid var(--stone-100); padding-top: 10px; }
.slack-help-cell { display: flex; align-items: flex-start; gap: 7px; }
.slack-help-cell .slack-dot { margin-top: 3px; }
.slack-help-ct { font-size: 12px; font-weight: 500; }
.slack-help-cd { font-size: 12px; color: var(--stone-400); margin-top: 2px; line-height: 1.6; }

/* ═══ §4.8.7.4b 塊3a-刀1（步2）：教育卡 + 第一頁文案版面 ═══ */
.s1-edu-lead { font-size: 13px; color: var(--ink2); margin-bottom: 14px; }
.s1-edu-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.s1-edu-card { flex: 1; min-width: 200px; padding: 14px; border: 1.5px solid var(--sage-400); border-radius: var(--r8); background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; }   /* NPI 專屬指引頁＝綠框（琥珀只留 ECN） */
.s1-edu-coretop { min-height: 80px; }
.s1-edu-cardhd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.s1-edu-ico { font-size: 22px; color: var(--ink3); }
.s1-edu-tag { padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.s1-tag-start { background: var(--sage-100); color: var(--sage-800); }
.s1-tag-end { background: var(--terracotta-l); color: var(--terracotta-ink); }
.s1-tag-both { background: var(--navy-from); color: var(--navy-ink); }
.s1-edu-cardtitle { font-weight: 600; font-size: 14px; margin-bottom: 5px; color: var(--ink); }
.s1-edu-carddesc { font-size: 12.5px; line-height: 1.55; color: var(--ink3); }
.s1-edu-secret { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--rule2); font-size: 11px; line-height: 1.55; color: var(--ink4); }
.s1-edu-bulb { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px; background: var(--sage-50); border-radius: var(--r8); font-size: 12px; line-height: 1.6; color: var(--sage-700); }
.s1-edu-bulb .ti { flex: none; font-size: 16px; margin-top: 1px; margin-right: 2px; }
.s1-top-col { display: flex; flex-direction: column; gap: 4px; }
.s1-top-label { font-size: 12px; color: var(--ink2); font-weight: 500; }
.s1-tips-line { font-size: 12px; line-height: 1.7; color: var(--ink2); }
.s1-tips-cap { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink3); font-size: 11px; }
.s1-add-case { flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 1px dashed var(--sage-300); border-radius: var(--r8); color: var(--sage-600); cursor: pointer; font-size: 13px; }
.s1-add-case .ti { font-size: 24px; }
.s1-add-case:hover { background: var(--sage-50); }
.s1-dynhint { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px 10px; background: var(--sage-50); border-radius: var(--r6); font-size: 12px; line-height: 1.6; color: var(--sage-800); }
.s1-dynhint .ti { flex: none; }
/* 初始引導態（雙空）：淡化成「等待輸入」靜態提示，非 active 運作態 */
.s1-dynhint-init { background: var(--stone-50); color: var(--stone-400); }
.s1-dynhint-alert { background: var(--rose-l); color: var(--rose-ink); }
/* 預覽空狀態：骨架條（複用 .s2-gbar-none）＋正中央淡引導文案 */
.s1-prev-empty { position: relative; }
.s1-prev-empty-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--stone-400); pointer-events: none; }

/* ═══ §4.8.7.4b 塊3a-刀1（文案/UI 調整批）：頁首 Header + 防呆強調 ═══ */
.s1-pagehd { margin-bottom: 16px; }
.s1-crumb { font-size: 12px; color: var(--ink3); margin-bottom: 4px; }
.s1-crumb-sep { color: var(--ink4); margin: 0 4px; }
.s1-pagetitle { font-size: 24px; font-weight: 700; color: var(--ink); }
.s1-tips-warn { color: var(--terracotta); font-weight: 600; }

/* ═══ §4.8.7.4b 塊3a-刀1（文案/UI v2）：小秘訣藍點 + 防呆標籤 ═══ */
.s1-tips-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); margin-right: 8px; vertical-align: middle; }
/* ═══ §4.8.7.4b 塊3a-刀1（頂部三欄 + 色卡打勾）═══ */
.s1-colors .cp-swatch { position: relative; }
.s1-colors .cp-swatch.on { border-color: transparent; }
.s1-colors .cp-swatch.on::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ink-inverse); font-size: 14px; font-weight: 700; line-height: 1; }

/* ═══ §4.8.7.4b 塊3a-刀1（第二步追加：膠囊 inline 編輯）═══ */
.s1-stage-hd { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.s1-stage-note { font-size: 11px; color: var(--ink4); margin-bottom: 8px; }
.s1-stage-chip .chip-text { cursor: text; }
.s1-stage-chip .chip-del { display: none; position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; line-height: 14px; text-align: center; border-radius: 50%; background: var(--ink4); color: var(--ink-inverse); font-size: 11px; cursor: pointer; }
.s1-stage-chip:hover .chip-del { display: block; }
.s1-stage-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px dashed var(--sage-300); color: var(--sage-600); cursor: pointer; }
.s1-stage-add:hover { background: var(--sage-50); }
.chip-edit { width: 80px; padding: 2px 6px; border: 1px solid var(--sage-400); border-radius: var(--r6); font-size: 12px; }

/* ═══ §4.8.7.4b 塊3a-刀1（膠囊優化批：箭頭/改名暗示/刪除調色/備註強調）═══ */
.s1-stage-arrow { color: var(--ink4); font-size: 12px; vertical-align: middle; margin: 0; }
.s1-stage-note i { margin-right: 4px; }
.s1-stage-note-em { color: var(--ink4); font-weight: 400; }
.s1-stage-chip .chip-del:hover { background: var(--rose); }

/* ═══ 全專案總覽 Phase 1（§18.8）═══ */
.pf-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.pf-kpi { position: relative; background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--sage-600); border-radius: var(--r10); padding: 12px 14px; }
.pf-kpi-i { position: absolute; top: 10px; right: 10px; font-size: 16px; color: var(--ink3); cursor: help; }
.pf-kpi-lbl { font-size: 12px; color: var(--ink3); margin-bottom: 8px; }
.pf-kpi-num { font-size: 24px; font-weight: 600; color: var(--ink); }
.pf-kpi-unit { font-size: 13px; font-weight: 400; color: var(--ink4); }
.pf-num-rose { color: var(--rose); }
.pf-num-amber { color: var(--amber-ink); }
.pf-kpi-sub { font-size: 12.5px; color: var(--ink3); margin-top: 6px; }
.pf-kpi-metric { display: flex; align-items: center; gap: 9px; }
.pf-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.pf-trend i { font-size: 12px; }
.pf-trend-good { background: var(--sage-50); color: var(--sage-700); }
.pf-trend-bad { background: var(--rose-l); color: var(--rose-ink); }
.pf-trend-busy { background: var(--amber-l); color: var(--amber-ink); }
.pf-trend-flat, .pf-trend-none { background: var(--stone-50); color: var(--ink4); }
.pf-bar { display: block; height: 6px; background: var(--stone-100); border-radius: 99px; overflow: hidden; }
.pf-bar.pf-bar-sm { height: 5px; margin-top: 7px; }
.pf-bar > span { display: block; height: 100%; border-radius: 99px; }
.pf-bar-act { background: var(--sage-600); }
.pf-bar-plan { background: var(--stone-300); }
.pf-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; margin: 12px 0; }
.pf-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 14px 16px; }
/* §18.15 B1 總覽三頁籤（sage 作用中·外框可按） */
.pf-subtabs { display: flex; gap: 6px; margin: 6px 0 16px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.pf-subtab { appearance: none; border: 1px solid var(--rule2); border-bottom: none; background: var(--surface); color: var(--ink2); font: inherit; font-size: 13px; padding: 9px 15px; border-radius: 9px 9px 0 0; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.pf-subtab:hover { background: var(--sage-50); }
.pf-subtab.on { background: var(--sage-700); color: var(--ink-inverse); border-color: var(--sage-700); font-weight: 500; }
.pf-subtab-p { font-size: 10.5px; color: var(--ink4); background: var(--cream); border-radius: 20px; padding: 1px 7px; }
.pf-subtab.on .pf-subtab-p { background: rgba(255,255,255,.18); color: var(--sage-50); }
.pf-panel[hidden] { display: none; }
.pf-card-t { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
/* 同人爆表告警（2a-4）：紅旗列 rose 淺底深字（§2 三色）、安心態 sage；點列開逐日明細 */
.pf-ol { margin-bottom: 22px; }
.pf-ol-sub { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--ink4); }
.pf-ol-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-top: 6px; background: var(--rose-l); border-radius: var(--r8); font-size: 12px; color: var(--rose-ink); cursor: pointer; }
.pf-ol-row:hover { filter: brightness(0.97); }
.pf-ol-name { font-weight: 700; font-size: 13px; }
.pf-ol-days { font-weight: 600; }
.pf-ol-first { color: var(--rose-ink); opacity: .8; }
.pf-ol-peak { margin-left: auto; font-family: var(--mono); font-weight: 700; }
.pf-ol-ok { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 6px; background: var(--sage-50); border-radius: var(--r8); font-size: 12px; color: var(--sage-700); }
.pf-ol-more { margin-top: 6px; font-size: 12px; color: var(--ink4); text-align: center; }
.pf-old-wrap { max-height: 340px; overflow-y: auto; }
.pf-old-day { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.pf-old-day:last-child { border-bottom: 0; }
.pf-old-dh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 13px; color: var(--ink); }
.pf-old-pct { font-family: var(--mono); font-weight: 700; color: var(--rose-ink); }
.pf-old-item { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 8px; font-size: 12.5px; color: var(--ink2); }
.pf-old-eff { flex: none; width: 44px; font-family: var(--mono); font-weight: 700; color: var(--ink2); }
.pf-old-tn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-old-pn { margin-left: auto; flex: none; padding-left: 12px; font-size: 12px; color: var(--ink3); }
.pf-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* §18.15 P1 專案差異表（落後優先·點列展開） */
.pf-vt { display: flex; flex-direction: column; }
.pf-vt-head, .pf-vt-row {
  display: grid;
  grid-template-columns: 4px minmax(0,1.7fr) minmax(80px,1.5fr) 46px 46px 54px 40px minmax(0,1.4fr) 20px;
  align-items: center; gap: 8px;
}
.pf-vt-head { font-size: 11px; color: var(--ink4); padding: 0 0 7px; border-bottom: 1px solid var(--rule); }
.pf-vt-head span { min-width: 0; }
.pf-vt-row { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 12.5px; cursor: pointer; }
.pf-vt-row:first-of-type { border-top: none; }
.pf-vt-row:hover, .pf-vt-row.on { background: var(--stone-50); }
.pf-vt-sevbar { width: 4px; height: 22px; border-radius: 99px; background: var(--ink4); }
.pf-vt-sev-red .pf-vt-sevbar { background: var(--rose); }
.pf-vt-sev-yellow .pf-vt-sevbar { background: var(--amber); }
.pf-vt-sev-green .pf-vt-sevbar { background: var(--sage-500); }
.pf-vt-sev-closed .pf-vt-sevbar { background: var(--stone-300); }
.pf-vt-sev-none .pf-vt-sevbar { background: var(--stone-200); }
.pf-vt-todo { color: var(--amber-ink); font-weight: 500; }
.pf-vt-name { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-vt-prog { min-width: 0; }
.pf-vt-track { position: relative; display: block; height: 7px; background: var(--stone-100); border-radius: 99px; }
.pf-vt-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--sage-600); border-radius: 99px; }
.pf-vt-fill.behind { background: var(--rose); }
.pf-vt-planmark { position: absolute; top: -2px; width: 2px; height: 11px; background: var(--amber); border-radius: 99px; transform: translateX(-1px); }
.pf-vt-num { text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums; }
.pf-vt-cur { font-weight: 600; color: var(--ink); }
.pf-vt-gap { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink3); }
.pf-vt-gap.neg { color: var(--rose-ink); }
.pf-vt-gap.pos { color: var(--sage-600); }
.pf-vt-light { text-align: center; font-size: 11px; }
.pf-vt-ms { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink3); font-size: 11.5px; }
.pf-vt-caret { color: var(--ink4); font-size: 15px; justify-self: center; }
.pf-vt-detail { padding: 2px 0 12px 12px; border-top: 1px dashed var(--rule); }
.pf-vd { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; padding-top: 10px; }
.pf-vd-col { min-width: 0; }
.pf-vd-h { font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pf-vd-h .ti { color: var(--sage-600); }
.pf-vd-ms { display: grid; grid-template-columns: minmax(0,1.4fr) auto minmax(0,1fr) 40px; gap: 8px; align-items: center; padding: 5px 0; font-size: 11.5px; border-top: 1px solid var(--stone-50); }
.pf-vd-ms:first-of-type { border-top: none; }
.pf-vd-ms-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.pf-vd-ms.up .pf-vd-ms-name { font-weight: 600; color: var(--ink); }
.pf-vd-ms.done .pf-vd-ms-name { color: var(--ink4); }
.pf-vd-ms-date { color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-vd-ms-dept { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink4); }
.pf-vd-ms-cnt { text-align: right; color: var(--ink3); font-variant-numeric: tabular-nums; }
.pf-vd-kr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--r8); background: var(--stone-50); border: 1px solid var(--rule); }
.pf-vd-kr-green { background: var(--sage-50); border-color: var(--sage-100); }
.pf-vd-kr-yellow { background: var(--amber-l); border-color: var(--amber-border); }
.pf-vd-kr-red { background: var(--rose-l); border-color: var(--rose-chip); }
.pf-vd-kr-lbl { font-size: 12px; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.pf-vd-kr-auto { font-size: 9.5px; color: var(--ink4); background: var(--surface); border: 1px solid var(--rule); border-radius: 99px; padding: 1px 6px; }
.pf-vd-kr-val { font-size: 15px; font-weight: 700; color: var(--ink); }
.pf-vd-kr-green .pf-vd-kr-val { color: var(--sage-700); }
.pf-vd-kr-yellow .pf-vd-kr-val { color: var(--amber-ink); }
.pf-vd-kr-red .pf-vd-kr-val { color: var(--rose-ink); }
.pf-vd-kr-sub { font-size: 11px; color: var(--ink4); margin-top: 5px; }
.pf-vd-note { font-size: 11.5px; color: var(--ink2); margin-top: 8px; font-style: italic; }
.pf-vd-note-edit { margin-left: 6px; font-size: 10.5px; color: var(--sage-600); background: none; border: none; cursor: pointer; text-decoration: underline; font-style: normal; }
.pf-vd-note-add { margin-top: 8px; font-size: 11px; color: var(--sage-600); background: none; border: 1px dashed var(--rule); border-radius: 99px; padding: 3px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.pf-vd-note-add:hover { background: var(--sage-50); border-color: var(--sage-200); }
@media (max-width: 720px) { .pf-vd { grid-template-columns: 1fr; gap: 12px; } }
.pf-dl-row { margin-bottom: 9px; }
.pf-dl-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink2); margin-bottom: 3px; }
.pf-dl-name { font-weight: 500; }
.pf-dl-h { color: var(--ink3); }
.pf-dl-brk { color: var(--ink4); font-weight: 400; margin-left: 2px; }
.pf-bar-stack { position: relative; height: 16px; border-radius: var(--r4); }
.pf-bar-stack > span { position: absolute; top: 0; height: 100%; border-radius: 0; }
.pf-bar-stack .pf-bar-proj { left: 0; background: var(--sage-600); }
.pf-bar-stack .pf-bar-chore { background: var(--amber-accent); }
.pf-bar-stack .pf-bar-cap { width: 0; border-left: 1.5px dashed var(--stone-400); }
.pf-dl-over { background: var(--rose-l); border-radius: var(--r8); padding: 6px 8px; margin: 0 -8px 9px; }
.pf-dl-over .pf-dl-name, .pf-dl-over .pf-dl-h, .pf-dl-over .pf-dl-brk { color: var(--rose-ink); }
.pf-dl-over .pf-bar-stack { background: var(--rose-chip); }
.pf-dl-over .pf-bar-cap { border-left-color: var(--rose); }

/* ═══ §19.10 F PM 跨案協調負荷區塊（總覽） ═══ */
.pf-pm { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--amber-accent); border-radius: var(--r12); padding: 14px 16px; margin: 8px 0 12px; }
.pf-pm-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pf-pm-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.pf-pm-empty { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink4); padding: 12px 4px 4px; }
.pf-pm-empty i { font-size: 16px; }
.pf-pm-seg { display: inline-flex; border: 1px solid var(--rule2); border-radius: var(--r8); overflow: hidden; }
.pf-pm-seg button { border: none; background: var(--surface); color: var(--ink3); font-size: 12px; padding: 5px 13px; cursor: pointer; border-right: 1px solid var(--rule2); }
.pf-pm-seg button:last-child { border-right: none; }
.pf-pm-seg button.on { background: var(--sage-600); color: var(--ink-inverse); font-weight: 500; }
.pf-pm-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: start; }
.pf-pm-body > * { min-width: 0; }
.pf-pm-metric .lbl { font-size: 12px; color: var(--ink3); margin-bottom: 4px; }
.pf-pm-metric .num { font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1; }
.pf-pm-metric .num.pf-pm-num-over { color: var(--rose-ink); }
.pf-pm-metric .num.pf-pm-num-warn { color: var(--amber-ink); }
.pf-pm-metric .hrs { font-size: 13px; color: var(--ink2); margin-top: 8px; font-variant-numeric: tabular-nums; }
.pf-pm-over { font-size: 13px; color: var(--rose-ink); font-weight: 600; margin-top: 4px; }
.pf-pm-ok { font-size: 13px; color: var(--sage-600); font-weight: 600; margin-top: 4px; }
.pf-pm-metric .cap { font-size: 11px; color: var(--ink4); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); line-height: 1.6; }
.pf-pm-i { color: var(--ink4); font-size: 13px; cursor: help; vertical-align: -1px; }
.pf-pm-rangebar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--ink3); margin-bottom: 8px; }
.pf-pm-rl { color: var(--ink3); }
.pf-pm-rt { color: var(--ink4); }
.pf-pm-din { font-size: 11px; padding: 3px 6px; border: 1px solid var(--rule2); border-radius: var(--r4); color: var(--ink2); background: var(--surface); font-family: var(--mono); }
.pf-pm-seg-sm button { padding: 3px 9px; font-size: 11px; }
.pf-pm-chart { position: relative; }
.pf-pm-plotwrap { overflow-x: auto; overflow-y: hidden; }
.pf-pm-strip { display: flex; align-items: flex-start; gap: 10px; min-width: 100%; padding: 14px 2px 0; }
.pf-pm-mcol { flex: 1 0 34px; min-width: 34px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.pf-pm-barbox { width: 100%; height: 60px; display: flex; align-items: flex-end; justify-content: center; }
.pf-pm-mbar { width: 100%; max-width: 42px; border-radius: 3px 3px 0 0; }
.pf-pm-mbar.g { background: var(--sage-500); }
.pf-pm-mbar.a { background: var(--amber-accent); }
.pf-pm-mbar.r { background: var(--rose); }
.pf-pm-mx { font-size: 12px; color: var(--ink3); margin-top: 5px; min-height: 15px; font-family: var(--mono); white-space: nowrap; }
.pf-pm-mcol.sel .pf-pm-mbar { outline: 2px solid var(--amber-accent); outline-offset: 1px; }
.pf-pm-mcol.sel .pf-pm-mx { color: var(--ink); font-weight: 600; }
.pf-pm-mcol:hover .pf-pm-mbar { filter: brightness(.94); }
.pf-pm-glover { position: absolute; left: 0; right: 0; top: 14px; height: 60px; pointer-events: none; }
.pf-pm-gl { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--rule2); }
.pf-pm-gl.g100 { border-top-color: var(--rose); }
.pf-pm-gl span { position: absolute; right: 0; top: -7px; font-size: 9px; color: var(--ink4); background: var(--surface); padding: 0 3px; }
.pf-pm-gl.g100 span { color: var(--rose-ink); }
.pf-pm-chd { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 6px; }
.pf-pm-ct { font-size: 13px; font-weight: 600; color: var(--ink2); }
.pf-pm-detail { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--amber-accent); background: var(--amber-l); color: var(--amber-accent-ink); font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: var(--r8); cursor: pointer; }
.pf-pm-detail i { font-size: 13px; }
.pf-pm-th, .pf-pm-row { display: grid; grid-template-columns: 16px 1fr 62px 96px 92px; gap: 10px; align-items: center; }
.pf-pm-th { font-size: 13px; color: var(--ink2); letter-spacing: .01em; padding: 0 0 6px; border-bottom: 1px solid var(--rule2); }
.pf-pm-th span:nth-child(4), .pf-pm-th span:nth-child(5) { text-align: right; }
.pf-pm-doth { color: var(--stone-400); font-size: 9px; cursor: help; text-align: center; }
.pf-pm-row { padding: 6px 0; border-top: 1px solid var(--rule); font-size: 12px; cursor: pointer; }
.pf-pm-row:hover { background: var(--surface2); }
.pf-pm-dot { width: 9px; height: 9px; border-radius: 50%; justify-self: center; }
.pf-pm-dot-done { background: var(--stone-300); }
.pf-pm-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-pm-name b { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0; }
.pf-pm-pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pf-pm-kind { flex: 0 0 auto; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 99px; letter-spacing: .02em; }
.pf-pm-kind-ecn { background: var(--amber-l); color: var(--amber-ink); }
.pf-pm-kind-npi { background: var(--sage-50); color: var(--sage-700); }
.pf-pm-name .ct { font-size: 12px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pm-st { font-size: 10px; font-weight: 600; border-radius: var(--r4); padding: 1px 7px; justify-self: start; }
.pf-pm-st-run { background: var(--sage-50); color: var(--sage-700); }
.pf-pm-st-done { background: var(--stone-100); color: var(--ink3); }
.pf-pm-st-late { background: var(--rose-l); color: var(--rose-ink); }
.pf-pm-date { color: var(--ink4); font-family: var(--mono); font-size: 11px; text-align: right; }
.pf-pm-hrs { font-weight: 600; color: var(--amber-accent-ink); font-variant-numeric: tabular-nums; text-align: right; }
.pf-pm-hrs small { color: var(--ink4); font-weight: 400; }
.pf-pm-hint { margin: 0; padding-left: 17px; }
.pf-pm-hint li { font-size: 14px; color: var(--ink2); line-height: 1.5; margin-bottom: 6px; }
.pf-pm-mosum { font-size: 12px; color: var(--ink2); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.pf-pm-grp { font-size: 11px; font-weight: 600; color: var(--ink3); margin: 12px 0 2px; display: flex; justify-content: space-between; }
.pf-pm-grp.late { color: var(--rose-ink); }
.pf-pm-motot { display: grid; grid-template-columns: 16px 1fr 62px 96px 92px; gap: 10px; margin-top: 8px; padding-top: 9px; border-top: 2px solid var(--rule2); font-size: 12px; font-weight: 600; }
.pf-pm-motot .tt { grid-column: 1 / 5; }
.pf-pm-motot .tv { grid-column: 5 / 6; text-align: right; color: var(--rose-ink); font-variant-numeric: tabular-nums; }
.pf-pm-bdg { font-size: 12px; font-weight: 600; border-radius: var(--r4); padding: 1px 8px; margin-left: 4px; }
.pf-pm-bdg-over { background: var(--rose-l); color: var(--rose-ink); }
.pf-pm-bdg-warn { background: var(--amber-l); color: var(--amber-ink); }
.pf-pm-bdg-ok { background: var(--sage-50); color: var(--sage-700); }
.pf-dl-legend { display: flex; gap: 14px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink3); }
.pf-dl-legend span { display: flex; align-items: center; gap: 5px; }
.pf-lg-sw { width: 10px; height: 10px; border-radius: var(--r4); display: inline-block; }
.pf-lg-proj { background: var(--sage-600); }
.pf-lg-chore { background: var(--amber-accent); }
.pf-lg-cap { width: 0; height: 12px; border-left: 1.5px dashed var(--stone-400); display: inline-block; }
/* §18.15 P2 異常任務追蹤表（延遲/卡關·權重凸顯·救援行動） */
.pf-rt-filter { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 12px; color: var(--ink3); }
.pf-rt-fsel { padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--r8); background: var(--surface); font-size: 12px; color: var(--ink); }
.pf-rt-cnt { margin-left: auto; color: var(--ink4); }
.pf-rt { display: flex; flex-direction: column; }
.pf-rt-head, .pf-rt-row {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1.7fr) 74px 92px 50px minmax(0,1.5fr) 34px 20px;
  align-items: center; gap: 8px;
}
.pf-rt-head { font-size: 11px; color: var(--ink4); padding: 0 0 7px; border-bottom: 1px solid var(--rule); }
.pf-rt-head span { min-width: 0; }
.pf-rt-row { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 12.5px; cursor: pointer; }
.pf-rt-row:first-of-type { border-top: none; }
.pf-rt-row:hover, .pf-rt-row.on { background: var(--stone-50); }
.pf-rt-proj { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink3); }
.pf-rt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; }
.pf-rt-owner { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.pf-rt-wt { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pf-rt-wbar { flex: 1; height: 6px; background: var(--stone-100); border-radius: 99px; overflow: hidden; min-width: 20px; }
.pf-rt-wfill { display: block; height: 100%; background: var(--sage-500); border-radius: 99px; }
.pf-rt-wfill.hi { background: var(--rose); }
.pf-rt-wn { font-size: 11px; color: var(--ink3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pf-rt-wn.hi { color: var(--rose-ink); font-weight: 700; }
.pf-rt-st { font-size: 11px; text-align: center; border-radius: 99px; padding: 2px 0; font-weight: 500; }
.pf-rt-st-delay { background: var(--rose-l); color: var(--rose-ink); }
.pf-rt-st-hold { background: var(--amber-l); color: var(--amber-ink); }
.pf-rt-block { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink3); font-size: 11.5px; }
.pf-rt-rescue { font-size: 11px; color: var(--sage-600); display: inline-flex; align-items: center; gap: 2px; justify-self: center; }
.pf-rt-caret { color: var(--ink4); font-size: 15px; justify-self: center; }
.pf-rt-detail { padding: 4px 0 12px 12px; border-top: 1px dashed var(--rule); }
.pf-ra { padding-top: 10px; }
.pf-ra-h { font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pf-ra-h .ti { color: var(--sage-600); }
.pf-ra-row { display: grid; grid-template-columns: 28px minmax(0,1.8fr) minmax(0,90px) minmax(0,96px) 28px; gap: 8px; align-items: center; padding: 5px 0; font-size: 12px; border-top: 1px solid var(--stone-50); }
.pf-ra-row:first-of-type { border-top: none; }
.pf-ra-st { background: none; border: none; cursor: pointer; font-size: 13px; padding: 0; line-height: 1; }
.pf-ra-action { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pf-ra-owner { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink3); }
.pf-ra-date { color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-ra-del { background: none; border: none; color: var(--ink4); cursor: pointer; padding: 0; }
.pf-ra-del:hover { color: var(--rose); }
.pf-ra-empty { font-size: 11.5px; color: var(--ink4); padding: 4px 0 8px; }
.pf-ra-add { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,110px) 130px auto; gap: 8px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.pf-ra-add input { padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--r8); font-size: 12px; background: var(--surface); color: var(--ink); min-width: 0; }
.pf-ra-add input:focus { border-color: var(--sage-400); outline: none; }
.pf-ra-addbtn { padding: 6px 12px; background: var(--sage-600); color: var(--ink-inverse); border: none; border-radius: var(--r8); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pf-ra-addbtn:hover { background: var(--sage-700); }
.pf-vd-foot { grid-column: 1 / -1; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--stone-50); }
.pf-vd-jump { background: none; border: none; color: var(--sage-600); font-size: 12px; cursor: pointer; padding: 0; font-weight: 500; }
.pf-vd-jump:hover { text-decoration: underline; }
@media (max-width: 720px) { .pf-ra-add { grid-template-columns: 1fr; } }
.pf-mini-empty { padding: 14px 0; text-align: center; font-size: 12px; color: var(--ink4); }
.pf-empty { text-align: center; padding: 60px 20px; color: var(--ink3); }

/* ═══ Phase 2b #4：全員跨案負荷（複用 pf-pm 視覺·基準線走 --gray-mid 冷灰·溢出斜紋） ═══ */
.pf-pl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pf-pl-subt { font-size: 11.5px; color: var(--ink4); font-weight: 400; }
.pf-pl-rangebar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); }
.pf-pl-rl, .pf-pl-rt { color: var(--ink4); }
.pf-pl-seg { margin-left: 4px; }
.pf-pl-seg b, .pf-pl-ovtog b, .pf-ht-seg b, .pf-ht-seg2 b, .pf-al-tog b { padding: 4px 10px; font-size: 11px; font-weight: 500; color: var(--ink3); cursor: pointer; background: var(--surface); border-right: 1px solid var(--rule2); }
.pf-pl-seg b:last-child, .pf-pl-ovtog b:last-child, .pf-ht-seg b:last-child, .pf-ht-seg2 b:last-child, .pf-al-tog b:last-child { border-right: none; }
.pf-pl-seg b.on, .pf-pl-ovtog b.on, .pf-ht-seg b.on, .pf-ht-seg2 b.on, .pf-al-tog b.on { background: var(--sage-600); color: var(--ink-inverse); }
/* §18.15 P3：過載/全部切換靠左·熱度粒度切換靠右·高負載主因 tag */
.pf-pl-ovtog { margin-right: auto; }
.pf-ht-seg { margin-left: auto; }
.pf-ht-seg2 { margin-left: 6px; }
/* §18.16 P3 v2 嚴重超載警報 HERO */
.pf-al.pf-al-hot { border: 1.5px solid var(--rose-chip); background: linear-gradient(180deg,var(--rose-tint),var(--surface) 60%); }
.pf-al-hot .pf-card-t { color: var(--rose-ink); }
.pf-al-tog { margin-right: auto; }
.pf-al-body { display: flex; flex-direction: column; margin-top: 4px; }
.pf-al-row { display: grid; grid-template-columns: 24px minmax(0,1.3fr) 74px minmax(0,1.5fr) 148px 78px; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule); }
.pf-al-row:first-of-type { border-top: none; }
.pf-al-hot .pf-al-row { border-top-color: var(--rose-chip); }
.pf-al-flag { font-size: 15px; text-align: center; }
.pf-al-name { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-al-dept { font-size: 11px; font-weight: 500; color: var(--ink4); margin-left: 6px; }
.pf-al-rate { font-size: 18px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink2); }
.pf-al-rate.over { color: var(--rose); }
.pf-al-rate.warn { color: var(--amber-ink); }
.pf-al-cause { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-al-causelb { font-size: 11px; color: var(--ink4); margin-right: 6px; }
.pf-al-causep { font-weight: 600; color: var(--ink); }
.pf-al-peak { font-size: 12px; color: var(--rose-ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-al-peak b { font-size: 14px; }
.pf-al-btn { font-size: 12px; color: var(--rose-ink); background: var(--surface); border: 1px solid var(--rose-chip); border-radius: 99px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.pf-al-btn:hover { background: var(--rose-l); }
.pf-al-ok { display: flex; align-items: center; gap: 7px; padding: 14px 4px; font-size: 13px; color: var(--sage-700); }
.pf-al-ok .ti { color: var(--sage-600); font-size: 16px; }
@media (max-width: 760px) { .pf-al-row { grid-template-columns: 22px minmax(0,1fr) 60px 70px; } .pf-al-cause, .pf-al-btn { display: none; } }
.pf-pl-cause { font-size: 10.5px; color: var(--ink4); background: var(--stone-50); border-radius: 99px; padding: 1px 8px; margin-left: 7px; white-space: nowrap; }
.pf-pl-legend { display: flex; gap: 14px; padding: 7px 2px 8px; font-size: 11px; color: var(--ink4); border-bottom: 1px solid var(--rule); }
.pf-pl-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pf-pl-lg { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.pf-pl-lg.g { background: var(--sage-500); } .pf-pl-lg.a { background: var(--amber-accent); } .pf-pl-lg.r { background: var(--rose); }
.pf-pl-lg-base { margin-left: auto; }
.pf-pl-lg-base i { width: 2px; height: 12px; background: var(--gray-mid); display: inline-block; border-radius: 1px; }
.pf-pl-body { padding: 4px 0 2px; }
.pf-pl-row { display: grid; grid-template-columns: 172px 1fr 116px; align-items: center; gap: 14px; padding: 9px 10px; border-radius: var(--r8); cursor: pointer; transition: background .12s; }
.pf-pl-row:hover { background: var(--surface2); }
.pf-pl-row.over { background: var(--rose-l); }
.pf-pl-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-pl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pf-pl-nm { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pf-pl-dept { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: var(--surface2); color: var(--ink3); white-space: nowrap; }
.pf-pl-dept.pm { background: var(--amber-l); color: var(--amber-ink); }
.pf-pl-barwrap { position: relative; height: 15px; border-radius: var(--r6); background: var(--surface2); overflow: hidden; min-width: 0; }
.pf-pl-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r6) 0 0 var(--r6); }
.pf-pl-fill.g { background: var(--sage-500); } .pf-pl-fill.a { background: var(--amber-accent); } .pf-pl-fill.r { background: var(--rose); }
.pf-pl-ovf { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--rose-ink) 0 3px, var(--rose) 3px 7px); }
.pf-pl-cap { position: absolute; top: -3px; bottom: -3px; left: 66.6%; width: 2px; background: var(--gray-mid); opacity: .85; border-radius: 1px; }
.pf-pl-metric { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.pf-pl-metric .pct { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--ink2); }
.pf-pl-metric.over .pct { color: var(--rose); } .pf-pl-metric.warn .pct { color: var(--amber-ink); }
.pf-pl-metric .hrs { font-size: 10.5px; color: var(--ink4); font-family: var(--mono); }
.pf-pl-metric .cnt { font-size: 10px; color: var(--ink4); }
.pf-pl-foot { padding: 12px 2px 2px; margin-top: 2px; font-size: 12.5px; color: var(--ink3); border-top: 1px solid var(--rule); }
.pf-pl-foot b { color: var(--ink2); font-weight: 700; }
/* #2 轉移任務 reassign（下鑽彈窗底部） */
.pf-pl-reassign { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 12px 14px; background: var(--surface2); border: 1px solid var(--rule); border-radius: var(--r8); font-size: 12px; color: var(--ink2); }
.pf-pl-rlbl { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
.pf-pl-resel { font-size: 12px; padding: 5px 8px; border: 1px solid var(--rule2); border-radius: var(--r6); background: var(--surface); color: var(--ink2); max-width: 240px; min-width: 0; }
.pf-pl-rarrow { color: var(--ink4); }
.pf-pl-rbtn { padding: 5px 14px; font-size: 12px; }
.pf-pl-rnote { flex-basis: 100%; font-size: 10.5px; color: var(--ink4); margin-top: 2px; }
/* #3 範本校準建議卡 */
.pf-cal-body { padding: 4px 2px 2px; }
.pf-cal-row { display: grid; grid-template-columns: 116px 1fr 104px 80px 48px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r8); }
.pf-cal-row:hover { background: var(--surface2); }
.pf-cal-st { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-cal-bar-w { position: relative; height: 12px; border-radius: var(--r6); background: var(--surface2); overflow: hidden; min-width: 0; }
.pf-cal-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r6) 0 0 var(--r6); }
.pf-cal-bar.r { background: var(--rose); } .pf-cal-bar.g { background: var(--sage-500); } .pf-cal-bar.n { background: var(--navy); }
.pf-cal-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--gray-mid); opacity: .8; }
.pf-cal-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.pf-cal-val.r { color: var(--rose); } .pf-cal-val.g { color: var(--sage-700); }
.pf-cal-val small { font-weight: 500; color: var(--ink4); }
.pf-cal-tag { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; text-align: center; }
.pf-cal-tag-r { background: var(--rose-l); color: var(--rose-ink); } .pf-cal-tag-g { background: var(--sage-50); color: var(--sage-700); } .pf-cal-tag-n { background: var(--surface2); color: var(--ink3); }
.pf-cal-n { font-size: 13px; color: var(--ink4); text-align: right; font-variant-numeric: tabular-nums; }
.pf-cal-feels { display: inline-flex; gap: 6px; margin-left: 6px; font-size: 11px; font-variant-numeric: tabular-nums; }
.pf-cal-f { padding: 1px 5px; border-radius: var(--r4); }
.pf-cal-f.g { color: var(--sage-700); background: var(--sage-100); }
.pf-cal-f.n { color: var(--ink3); background: var(--cream); }
.pf-cal-f.r { color: var(--rose-700); background: var(--rose-100); }
.pf-cal-apply { font-size: 11px; padding: 2px 8px; margin-left: 4px; flex: none; }
/* #5 逐日負荷熱度格 */
.pf-ht-legend { display: flex; gap: 14px; padding: 4px 2px 10px; font-size: 11px; color: var(--ink4); }
.pf-ht-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pf-ht-lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pf-ht-lg.z { background: var(--surface2); border: 1px solid var(--rule2); box-sizing: border-box; } .pf-ht-lg.g { background: var(--sage-200); } .pf-ht-lg.a { background: var(--amber-accent); } .pf-ht-lg.r { background: var(--rose); }
.pf-ht-scroll { overflow-x: auto; padding-bottom: 4px; }
.pf-ht-grid { display: grid; gap: 2px; align-items: center; width: max-content; }
.pf-ht-cellh { font-size: 9px; color: var(--ink4); text-align: center; font-variant-numeric: tabular-nums; height: 16px; line-height: 16px; }
.pf-ht-cellh.wk { border-left: 1px solid var(--rule2); }
.pf-ht-namec { font-size: 11.5px; color: var(--ink2); font-weight: 500; white-space: nowrap; cursor: pointer; padding-right: 8px; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.pf-ht-namec:hover { color: var(--sage-700); }
.pf-ht-cell { width: 20px; height: 16px; border-radius: 3px; background: var(--surface2); }
.pf-ht-cell.g { background: var(--sage-200); } .pf-ht-cell.a { background: var(--amber-accent); } .pf-ht-cell.r { background: var(--rose); }
/* §18.15 P3 週/雙週格：加寬顯示峰值%數字 */
.pf-ht-cell.w { width: auto; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-ht-cell.w.g { color: var(--sage-800); } .pf-ht-cell.w.a { color: var(--amber-ink); } .pf-ht-cell.w.r { color: var(--ink-inverse); } .pf-ht-cell.w.z { color: transparent; }
.pf-ht-redn { font-size: 9.5px; color: var(--rose-ink); font-weight: 700; margin-left: 5px; }
.pf-empty .ti { font-size: 32px; color: var(--ink4); }
.pf-empty-t { font-size: 15px; font-weight: 600; color: var(--ink2); margin-top: 8px; }
.pf-empty-s { font-size: 12px; color: var(--ink4); margin-top: 6px; }
ol.pf-hint-list { list-style: none; counter-reset: pfhint; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
ol.pf-hint-list > li { counter-increment: pfhint; position: relative; padding-left: 22px; }
ol.pf-hint-list > li::before { content: counter(pfhint) "."; position: absolute; left: 0; top: 0; color: var(--sage-600); font-weight: 700; }
.pf-hint-list b { font-weight: 600; }
/* §6.5b reg A（2026-07-02）：HintBox 全站統一淺色（淡沙底 header --sage-50 ＋白底 body ＋深字），
   總覽頁不再深色 override，回落基礎 .hintbox 淺色公版。 */

/* ═══ §19 ECN 設變案戰情室 dashboard（Tab A）：琥珀主題，大表複用 .s2-tbl 結構＋琥珀 CSS scope；全走 :root ═══ */
/* §19.6.1：整個 ECN 戰情室鋪石板冷藍底（負 margin 抵銷 .content 22/24 內距做 full-bleed·全站 --bg 不動） */
.ecn-dash { background: var(--ecn-bg); margin: -22px -24px 0; padding: 22px 24px 60px; min-height: calc(100vh - 110px); }
.ecn-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ecn-hd-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ecn-hd-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ecn-tag { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
.ecn-tag-size { background: var(--amber-l); color: var(--amber-ink); border: 1px solid var(--amber-border); }
.ecn-tag-st { background: var(--amber-l); color: var(--amber-ink); }
.ecn-tag-roi { background: var(--hint-head); color: var(--ink3); }
.ecn-hd-ver { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--amber-ink); background: var(--amber-l); border: 1px solid var(--amber-border); padding: 3px 10px; border-radius: 99px; }
/* §19.5 洞4：結案/翻案頁首鈕＋唯讀態 */
.ecn-hd-act { font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: var(--r6); cursor: pointer; border: 1px solid transparent; }
.ecn-hd-act.close { background: var(--amber-bright); color: var(--amber-accent-ink); }
.ecn-hd-act.close:hover { background: var(--amber-bright-hover); }
.ecn-hd-act.reopen { background: var(--surface); color: var(--rose-ink); border-color: var(--rose); }
.ecn-hd-act.reopen:hover { background: var(--rose-l); }
.ecn-tag-st.closed { background: var(--rose-l); color: var(--rose-ink); }
.ecn-closed-banner { flex-basis: 100%; margin: -4px 0 14px; padding: 9px 14px; background: var(--rose-l); color: var(--rose-ink); border: 1px solid var(--rose); border-radius: var(--r8); font-size: 12.5px; line-height: 1.5; }
.ecn-tbl-locked { pointer-events: none; opacity: .72; }
.ecn-row-frozen { opacity: .5; background: var(--stone-50); }
.ecn-row-frozen input, .ecn-row-frozen select, .ecn-row-frozen button { pointer-events: none; }
.ecn-close-form .form-field { margin-bottom: 14px; }
/* §19.5 Phase 5 生效日雙卡：舊料切換卡控 */
.ecn-stk-sect { margin: 8px 0 6px; font-size: 12px; font-weight: 700; color: var(--ink2); border-top: 1px solid var(--rule); padding-top: 12px; }
.ecn-stk-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; }
.ecn-stk-row .form-field { margin-bottom: 8px; min-width: 0; }
.ecn-stk-rate-wrap { display: flex; gap: 6px; }
.ecn-stk-rate-wrap input { min-width: 0; flex: 1; }
.ecn-stk-rate-wrap select { flex: none; }
.ecn-stk-result { margin-top: 4px; padding: 9px 12px; border-radius: var(--r6); font-size: 12.5px; line-height: 1.5; }
.ecn-stk-result.na { background: var(--surface2); color: var(--ink3); }
.ecn-stk-result.green { background: var(--sage-50); color: var(--sage-700); border: 1px solid var(--sage-100); }
.ecn-stk-result.red { background: var(--rose-l); color: var(--rose-ink); border: 1px solid var(--rose); }
/* B-2（§19.5）：呆滯超門檻強制特批區 */
.ecn-override { margin-top: 10px; padding-top: 11px; border-top: 1px dashed var(--rule2); }
.ecn-override .form-field { margin-bottom: 10px; }
.ecn-override .form-field:last-child { margin-bottom: 0; }
.ecn-override textarea, .ecn-override select { width: 100%; border: 1px solid var(--rule2); border-radius: var(--r6); padding: 7px 10px; font-size: 13px; font-family: var(--sans); color: var(--ink); background: var(--surface); }
/* A（§19.5 Phase 0）：早期預估卡 */
.ecn-est-sub { font-size: 11.5px; color: var(--ink4); margin-bottom: 10px; }
.ecn-est-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.ecn-est-f label { display: block; font-size: 11.5px; color: var(--ink3); margin-bottom: 4px; }
.ecn-est-f input, .ecn-est-f select { height: 32px; border: 1px solid var(--rule2); border-radius: var(--r6); padding: 0 8px; font-size: 13px; font-family: var(--sans); color: var(--ink); background: var(--surface); width: 100%; }

/* HUD 彈性吸收多出寬度（左），大表設上限（欄位固定、夠用就好）——收合 sidebar 多出的空間讓給左側 HUD 字卡（Paul 2026-07-03） */
.ecn-layout { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1240px); gap: 16px; align-items: start; }
/* §19.6.1 #2：BOM 成本差異分析頁專注模式——單欄全寬（HUD 已隱藏）*/
.ecn-layout.ecn-focus { grid-template-columns: 1fr; }
.ecn-focus .bom-in.n { width: 90px; }
.ecn-hud { position: sticky; top: 12px; align-self: start; }
.ecn-hudcard { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r12); padding: 13px 14px; margin-bottom: 10px; }
.ecn-hud-t { font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 9px; }
.ecn-hud-nums { display: flex; gap: 16px; }
.ecn-hud-num b { display: block; font-size: 20px; font-weight: 700; color: var(--ink); }
.ecn-hud-num b span { font-size: 12px; }
.ecn-hud-num > span { font-size: 10.5px; color: var(--ink4); }.ecn-fl-red b { color: var(--rose); }
.ecn-empty-edu { font-size: 10.5px; color: var(--ink4); line-height: 1.5; padding: 2px 0 0; }
.ecn-cause { font-size: 11px; color: var(--ink3); border-top: 1px solid var(--rule2); margin-top: 6px; padding-top: 6px; line-height: 1.6; }.ecn-badges { display: flex; gap: 6px; margin-top: 8px; }
.ecn-tabs { display: flex; gap: 4px; }
.ecn-tab { font-size: 13px; font-weight: 600; padding: 9px 18px; border: 1px solid var(--rule); border-bottom: none; border-radius: var(--r10) var(--r10) 0 0; background: var(--pearl); color: var(--ink4); cursor: pointer; }
.ecn-tab.on { background: var(--surface); color: var(--amber-ink); border-color: var(--amber-border); position: relative; }
.ecn-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--surface); }
.ecn-panel { background: var(--surface); border: 1px solid var(--amber-border); border-radius: 0 var(--r12) var(--r12) var(--r12); padding: 13px 16px 16px; }
.ecn-panel-toolrow { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.ecn-pt-title { font-size: 13px; font-weight: 600; color: var(--ink2); }

/* 大表琥珀化：override .s2-tbl 的 sage 表頭/斑馬/hover（只在 .ecn-tbl，NPI Stage 2 不受影響）；附在檔尾 → 同 specificity 後者勝 */
.data-table.s2-tbl.ecn-tbl thead th { color: var(--amber-ink); background: var(--amber-l); }
.data-table.s2-tbl.ecn-tbl thead th.col-pred-sub { color: var(--amber-accent); }
.data-table.s2-tbl.ecn-tbl thead tr:last-child th { border-bottom: 2px solid var(--amber-accent); }
.data-table.s2-tbl.ecn-tbl tbody tr.s2-rz { background: var(--pearl); }
.data-table.s2-tbl.ecn-tbl tbody tr[data-taskid]:hover { background: var(--amber-l); }
.data-table.s2-tbl.ecn-tbl tbody tr[data-taskid]:hover td:first-child { box-shadow: inset 3px 0 0 0 var(--amber-accent); }
.ecn-tbl .s2-pct-sel { font-size: 12px; padding: 3px 4px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--stone-600); width: 100px; }
/* §19.10 F.3 NPI 大表投入%欄＋每階段 PM 常駐協調列（.s2-tbl scope，非 ecn-tbl） */
.s2-tbl .s2-pct-sel { font-size: 12px; padding: 3px 4px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--stone-600); width: 100%; min-width: 88px; }
.s2-tbl tr.s2-coord-row > td { background: var(--sage-50); }
.s2-coord-label { font-size: 12px; color: var(--sage-700); }
.s2-coord-note { color: var(--ink4); margin-left: 8px; font-size: 11px; }
.ecn-tbl .ecn-dept-sel { font-size: 12.5px; padding: 3px 5px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--stone-600); min-width: 84px; max-width: 100%; }
.ecn-tbl .s2-stcell { white-space: nowrap; }
/* #3 任務名＝省略顯示（固定寬+…）＋ hover 全文（title）＋ 點擊才變輸入框編輯 */
.ecn-name-txt { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; cursor: text; }
.ecn-name-txt:hover { text-decoration: underline dotted var(--stone-300); }
/* #2/#4/#8：橫向捲動只掛「大表」本身，面板/HintBox 不被寬表撐爆 */
.ecn-tbl-scroll { overflow-x: auto; }
.ecn-panel .hintbox-body { overflow-wrap: anywhere; word-break: break-word; }
/* 問題1/2/7：HintBox 全面收斂——grid item 可縮(min-width:0)、header/body 斷字、nested 級別清單、字級收斂 */
.ecn-layout, .ecn-hud, .ecn-main { min-width: 0; }
.ecn-dash .hintbox { max-width: 100%; box-sizing: border-box; margin: 0 0 10px; }
.ecn-dash .hintbox-bar { flex-wrap: wrap; }
.ecn-dash .hintbox-head { flex-wrap: wrap; min-width: 0; }
.ecn-dash .hintbox-title, .ecn-dash .hintbox-summary { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ecn-dash .hintbox-body { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ecn-dash .hintbox-body ol { margin: 0; padding-left: 18px; }
.ecn-dash .hintbox-body li { overflow-wrap: anywhere; word-break: break-word; }
.ecn-hud .hintbox-body { padding: 10px 12px; font-size: 11.5px; line-height: 1.6; }
.ecn-hud .hintbox-body ol { padding-left: 16px; }
.ecn-hint-lv { margin: 5px 0 0; padding-left: 15px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ecn-hint-lv li { color: var(--ink3); }
/* 問題3：日期欄＝開始/結束兩個 date input 直向堆疊（省寬） */
.ecn-tbl .s2-datecell { white-space: nowrap; }
.ecn-dates { display: flex; flex-direction: column; gap: 3px; }
.ecn-date-in { font-size: 11px; padding: 2px 4px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--stone-600); width: 122px; }
/* ECN 列間插入鈕琥珀化（Stage 2 為 sage） */
.ecn-tbl .dt-insert-btn { background: var(--amber-accent); color: var(--surface); }
/* 狀態＝唯讀·時間衍生 pill（完工/擱置由「⚙ 編輯」設；逾期紅／進行中琥珀／未開始灰／擱置中性／完工綠） */
.ecn-st { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.ecn-st.ecn-st-done { background: var(--sage-50); color: var(--sage-700); }
.ecn-st.ecn-st-wip { background: var(--amber-l); color: var(--amber-ink); }
.ecn-st.ecn-st-delayed { background: var(--rose-l); color: var(--rose-ink); }
.ecn-st.ecn-st-hold { background: var(--stone-100); color: var(--ink3); }
.ecn-st.ecn-st-todo { background: var(--bg); color: var(--ink4); }
.ecn-edit-hint { font-size: 11px; color: var(--ink4); margin-top: 4px; line-height: 1.5; }
.ecn-edit-chk { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.ecn-ct { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: var(--rose-l); color: var(--rose-ink); cursor: pointer; border: 1px dashed var(--rose); }
/* PM 常駐列：琥珀底、鎖死 */
.data-table.s2-tbl.ecn-tbl tbody tr.ecn-pmrow > td { background: var(--amber-l); border-top: 1px dashed var(--amber-accent); cursor: not-allowed; }
.ecn-pm-nm { color: var(--amber-ink); font-weight: 600; }
.ecn-lock { font-size: 10px; font-weight: 600; color: var(--amber-ink); white-space: nowrap; }
.data-table.s2-tbl.ecn-tbl tbody tr.ecn-loop > td { background: var(--rose-l); }
.ecn-loop-tag { font-size: 10px; font-weight: 700; color: var(--rose); white-space: nowrap; margin-left: 6px; }
.ecn-op-btn { font-size: 11px; font-weight: 600; background: var(--surface); color: var(--rose-ink); border: 1px solid var(--rose-l); border-radius: var(--r6); padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.ecn-op-btn:hover { background: var(--rose-l); }
.ecn-op-btn.ecn-op-edit { color: var(--amber-ink); border-color: var(--amber-border); }
.ecn-op-btn.ecn-op-edit:hover { background: var(--amber-l); }
/* #1 ECN 列間插入線琥珀化（base 為 sage） */
.ecn-tbl .dt-insert::before { background: var(--amber-accent); }

.ecn-timeline { display: flex; flex-direction: column; gap: 0; padding: 6px 4px; }
.ecn-tl-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-left: 2px solid var(--amber-border); margin-left: 8px; padding-left: 16px; position: relative; font-size: 13px; color: var(--ink2); }
.ecn-tl-dot { position: absolute; left: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--amber-accent); border: 2px solid var(--surface); }
.ecn-tl-date { font-size: 11px; color: var(--ink4); font-family: var(--mono, monospace); flex: none; }
.ecn-tl-label { font-weight: 600; }
.ecn-tl-cause { font-size: 11px; color: var(--rose-ink); background: var(--rose-l); padding: 1px 7px; border-radius: 99px; }
.ecn-ph { text-align: center; padding: 48px 20px; color: var(--ink3); }
.ecn-ph-ico { font-size: 34px; margin-bottom: 10px; }
.ecn-ph b { display: block; font-size: 15px; color: var(--ink2); margin-bottom: 6px; }
.ecn-ph p { font-size: 12.5px; color: var(--ink4); line-height: 1.7; max-width: 460px; margin: 0 auto; }
.ecn-empty { text-align: center; color: var(--ink4); font-size: 12px; padding: 20px; }
/* #1 HUD 名冊＝複用部門卡（去掉外層 hudcard 雙框，內層 s2n-deptpanel 即卡）＋按鈕琥珀化 */
.ecn-hud-dept { padding: 0; border: none; background: transparent; }
.ecn-hud .s2n-deptpanel { margin: 0; }
.ecn-hud .s2n-dp-btn { background: var(--amber-l); color: var(--amber-ink); border-color: var(--amber-border); }
/* #2 PM 常駐列投入%改可調下拉：解除該列 cursor:not-allowed，讓 select 可點 */
.data-table.s2-tbl.ecn-tbl tbody tr.ecn-pmrow > td.s2-pct-cell { cursor: pointer; }
.ecn-pmrow .ecn-pm-pct { cursor: pointer; width: 92px; }

/* ── §19.11 範本管理（設定頁範本 tab·卡片列＋編輯器）── */
.tpl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 380px)); gap: 12px; }
.tpl-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r10); padding: 14px 16px; min-width: 0; }
.tpl-card-hd { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.tpl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tpl-dot.npi { background: var(--sage-500); }
.tpl-dot.ecn { background: var(--amber-accent); }
.tpl-badge { font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--surface2); color: var(--ink3); border: 1px solid var(--rule); flex: none; }
.tpl-badge.ovr { background: var(--amber-l); color: var(--amber-ink); border-color: var(--amber-accent); }
.tpl-badge.custom { background: var(--sage-50); color: var(--sage-700); border-color: var(--sage-200); }
.tpl-badge.warn { background: var(--amber-l); color: var(--amber-ink); border: none; }
.tpl-card-meta { font-size: 12px; color: var(--ink3); }
.tpl-card-ver { font-size: 11px; color: var(--ink4); margin-top: 2px; }
.tpl-card-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tpl-danger { color: var(--rose-ink); }
/* 編輯器 */
.tpl-editor { min-width: 0; }
.tpl-ed-hd { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; font-size: 15px; flex-wrap: wrap; }
.tpl-ed-acts { margin-left: auto; display: flex; gap: 8px; }
.tpl-base { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.tpl-base label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink3); }
.tpl-in { height: 32px; padding: 4px 8px; font-size: 13px; border: 1px solid var(--stone-200); border-radius: var(--r6); background: var(--surface); color: var(--ink); box-sizing: border-box; min-width: 0; }
.tpl-in.n { width: 72px; text-align: right; }
.tpl-in.s { width: 96px; }
.tpl-in.w { width: 240px; max-width: 100%; }
.tpl-in.xw { width: 420px; max-width: 100%; }
.tpl-sec-title { font-size: 13px; font-weight: 600; color: var(--ink2); margin: 14px 0 8px; }
.tpl-szm { margin-bottom: 6px; }
.tpl-szm-tbl { border-collapse: collapse; font-size: 12.5px; }
.tpl-szm-tbl th, .tpl-szm-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.tpl-szm-tbl th { font-size: 12px; color: var(--ink3); font-weight: 600; }
.tpl-szm-k { font-weight: 700; }
.tpl-szm-st { max-width: 620px; }
.tpl-szm-chk { display: inline-flex; align-items: center; gap: 3px; margin-right: 10px; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.tpl-npi-pm { display: flex; gap: 14px; flex-wrap: wrap; }
.tpl-npi-pmf { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink3); }
.tpl-mod { border: 1px solid var(--rule); border-radius: var(--r8); overflow: hidden; margin-bottom: 10px; }
.tpl-mod-hd { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--stone-50); font-size: 13px; font-weight: 600; color: var(--ink2); }
.tpl-mod-cnt { font-size: 11px; color: var(--ink4); font-weight: 400; }
.tpl-add { margin-left: auto; height: 28px; padding: 0 12px; font-size: 12px; }
.tpl-mod-scroll { overflow-x: auto; }
.tpl-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tpl-tbl th, .tpl-tbl td { padding: 5px 8px; border-top: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.tpl-tbl thead th { font-size: 11.5px; color: var(--ink3); background: var(--surface2); border-top: 0; }
.tpl-n { color: var(--ink4); font-family: var(--mono); }
.tpl-sz-cell label { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; font-size: 11.5px; }
.tpl-pbs { font-size: 10.5px; color: var(--amber-ink); background: var(--amber-l); border-radius: 99px; padding: 1px 6px; }
.tpl-x { border: 0; background: transparent; color: var(--ink4); font-size: 13px; cursor: pointer; padding: 2px 6px; }
.tpl-x:hover { color: var(--rose-ink); }