/* 結構與應用專屬元件——不重新定義顏色/間距/圓角，一律沿用 theme.css 的變數 */
.hidden{display:none !important}
.row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}

/* ── 版面骨架：滿版頁面用（跟提案文件裡的 .app демо框不同，不要圓角／外框） ── */
.shell{display:flex;min-height:100vh}
.shell .side{min-height:100vh}
.shell .body{max-width:1240px}

.login-overlay{
  position:fixed;inset:0;background:var(--c1);display:flex;align-items:center;justify-content:center;z-index:1000;
}
.login-box{width:300px}

.topbar{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);
  padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:var(--line);
}
/* 2026-09-30：這裡原本是 max-width:1240px 又沒有 margin:auto——視窗比 1240 寬時，
   整頁內容就鎖在 1240 並且貼著左邊，右邊空一大條。這就是「排版很靠左」的來源，
   而且是全站每一頁。外層 .shell .body 已經有 1800 上限＋置中，這層不用再鎖一次。 */
.view{max-width:none;margin-inline:auto}

/* ── 小尺寸輸入／下拉（表格內聯用） ── */
.in-sm{height:28px;font-size:var(--f-sm)}
.in-line{border:none;border-bottom:var(--line);border-radius:0;padding:0 0 2px;height:24px;font-size:var(--f-sm)}
.in-line:focus{box-shadow:none;border-bottom-color:var(--accent)}

/* ── 表單欄位 ── */
.field{display:block;margin-bottom:var(--s3)}
.label{display:block;font-size:var(--f-sm);font-weight:600;color:var(--t2);margin-bottom:var(--s1)}
.slider{width:100%;accent-color:var(--accent);height:20px}

/* ── 燈號（任務/風險狀態用，比 .dot 多了語意色） ── */
.dot-g{background:var(--ok)} .dot-a{background:var(--warn)} .dot-r{background:var(--bad)} .dot-n{background:var(--t3)}

/* ── 完成度環（帳戶計畫頁頭） ── */
.ring{
  --p:0;width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--c3) 0);
}
.ring::after{content:"";position:absolute;inset:5px;background:var(--c0);border-radius:50%}
.ring>span{position:relative;z-index:1;font-size:var(--f-sm);font-weight:700;color:var(--accent)}

/* ── 折疊區塊（帳戶計畫頁七大區） ── */
.sec{background:var(--c0);border:var(--line);border-radius:var(--r-lg);margin-bottom:var(--s3);overflow:hidden}
.sec-h{padding:var(--s3) var(--s5);display:flex;align-items:center;gap:var(--s3);cursor:pointer;user-select:none}
.sec-h:hover{background:var(--c2)}
.sec-no{width:24px;height:24px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-ink);
        display:grid;place-items:center;font-weight:700;font-size:var(--f-sm);flex:none}
.sec-t{font-size:var(--f-md);font-weight:600;flex:1}
.sec-b{padding:0 var(--s5) var(--s5);border-top:var(--line);padding-top:var(--s4);display:none}
.sec.open .sec-b{display:block}
.chev{color:var(--t3);font-size:10px;transition:.15s;flex:none}
.sec.open .chev{transform:rotate(90deg)}

/* ── 帳戶計畫分頁列（設計系統 v1 §03：每個分頁掛自己的顏色）── */
/* 2026-09-30：頁首釘住。頂部導列與客戶標題＋分頁列兩塊都釘，捣長表單時還看得到
   自己在哪個客戶、哪個分頁。背景本來寫死 rgba(253,251,249,.92)（舊的暖白），
   換成蓝灰底之後顏色就對不起來了，改成吃 token。
   釘住的高度要節制：「返回清單」跟待辦抽屜都移出去了，只留標題卡跟分頁列。 */
.topbar{position:sticky;top:0;z-index:9;background:var(--bg)}
.plan-sticky{position:sticky;top:var(--topbar-h,56px);z-index:8;background:var(--bg);
  padding-top:var(--s2);box-shadow:0 6px 10px -10px rgba(16,36,61,.45)}

/* 象限卡：只有客戶所在的那一格上色，其他三格安靜；兩條軸寫在圖邊上 */
.quad-card{margin-bottom:var(--s4)}
.quad-lede{margin:0 0 var(--s4);color:var(--t2);font-size:var(--f-sm)}
.quad-lede b{color:var(--t1)}
.quad-wrap{display:flex;gap:var(--s6);align-items:flex-start;flex-wrap:wrap}
.quad-grid{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:center}
/* 直軸標：中文要 white-space:nowrap 才不會一個字一行疊成一團，
   並且要 align-self:stretch 把高度擐滿兩列格子才置中得了 */
.quad-y{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.04em}
.quad-x{font-size:11px;font-weight:700;color:var(--t3);text-align:center;letter-spacing:.04em;padding-top:2px}
.quad .q{position:relative;background:none;border:1px solid var(--c3);border-radius:var(--r-sm);
  padding:var(--s3);min-height:78px}
.quad .q b{display:block;font-size:var(--f-sm);color:var(--t3)}
.quad .q span{display:block;font-size:11px;color:var(--t3);line-height:1.4;margin-top:2px}
.quad .q.on{border-color:var(--acc);background:var(--acc-bg);box-shadow:0 0 0 1px var(--acc)}
.quad .q.on b{color:var(--acc)}
.quad .q.on span{color:var(--t2)}
.quad .q i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--acc);
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--card)}
.quad-read{flex:1;min-width:230px}
.quad-now{font-size:var(--f-sm);color:var(--t2)}
.quad-nums{display:flex;gap:var(--s5);padding-top:var(--s3);border-top:1px solid var(--c3)}
.quad-nums b{font-size:var(--f-lg);margin:0 3px}
.quad-nums>div{display:flex;align-items:baseline}
.quad-read a{color:var(--acc);font-weight:600}
.saved{font-size:var(--f-xs);color:var(--t3);white-space:nowrap}
.saved.saving{color:var(--acc)} .saved.failed{color:var(--bad);font-weight:700}

.tabs{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;padding:var(--s2) var(--s3) var(--s3);border:none;background:none;
  font:700 var(--f-sm)/1.4 inherit;font-family:inherit;color:var(--t2);cursor:pointer;
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px;border-bottom:2.5px solid transparent}
.tab:hover{color:var(--t1)}
.tab.on{color:var(--t1);border-bottom-color:var(--tc,var(--acc))}
/* 交件狀態圓點：● 達標 ／ ◐ 有資料未達標 ／ ○ 空白 */
.tab .st{width:9px;height:9px;border-radius:50%;flex:none;border:1.5px solid var(--t3);background:transparent}
.tab .st.part{background:linear-gradient(90deg,var(--tc,var(--acc)) 50%,transparent 50%);border-color:var(--tc,var(--acc))}
.tab .st.done{background:var(--tc,var(--acc));border-color:var(--tc,var(--acc))}
/* 相容舊的 .tabbar/.tab-dot 呼叫點，避免漏改的地方樣式整個消失 */
.tabbar{display:flex;gap:var(--s1)} .tab-dot{font-size:10px}

.cell-ver{border-left:3px solid var(--ok)}
.cell-asm{border-left:3px solid var(--warn)}
.cell-todo{border-left:3px solid var(--t3);background:var(--c2)}
.cell-todo .ta{background:var(--c3)}

/* ── 篩選 chip 容器／業務標記 ── */
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.chip-o{
  height:20px;padding:0 8px;border-radius:var(--r-full);background:var(--accent-soft);
  color:var(--accent-ink);font-size:var(--f-xs);font-weight:600;display:inline-flex;align-items:center;
}
/* UX-01：chip／tag 現在多半是真的 <button>，重置瀏覽器預設按鈕外觀，吃 theme.css 原本的 .chip/.tag 樣式 */
button.chip,button.tag{font:inherit;margin:0;-webkit-appearance:none;appearance:none}
/* UX-01：鍵盤 Tab 導覽的可視焦點框，theme.css 只給了 .in/.sel/.ta，這裡補其餘自訂互動元件
   （客戶卡片的 .ccard:focus-visible 規則跟著卡片本體一起搬進 theme.css 了） */
.chip:focus-visible,button.tag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 任務：長在產生它的地方，不做獨立分頁 ── */
.tasklet{
  display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);
  padding:6px var(--s3);background:var(--warn-bg);border:var(--line);
  border-radius:var(--r-sm);font-size:var(--f-sm);color:var(--warn);
}
.tasklet .who{margin-left:auto;color:var(--t3);font-size:var(--f-xs)}

/* ── 白地矩陣 ── */
.mx{border-collapse:separate;border-spacing:3px;font-size:var(--f-sm)}
.mx th{background:var(--accent);color:#fff;padding:6px 10px;border-radius:var(--r-sm);font-size:var(--f-xs);text-align:center;font-weight:600}
.mx td:first-child{background:var(--c2);font-weight:600;text-align:left;padding:8px 12px;border-radius:var(--r-sm)}
.mx td{padding:8px 12px;text-align:center;border-radius:var(--r-sm);cursor:pointer;font-size:var(--f-xs);font-weight:600;transition:border-color .12s;border:1.5px solid transparent}
.mx td:hover{border-color:var(--t3)}
/* 白地矩陣格狀態，跟設計系統 v1 §⑫ 的 .ws-existing/.ws-competitor/.ws-untapped/.ws-unknown 同一套配色，
   直接當 <td> 的 class 用（矩陣格裡還塞了估算金額/對手名稱等輸入框，不套文件那個固定 46px 的 .ws-cell 盒子） */
.mx .ws-existing{background:var(--ok-bg);color:var(--ok)}
.mx .ws-competitor{background:var(--bad-bg);color:var(--bad)}
.mx .ws-untapped{background:var(--soft);color:var(--t3);font-weight:500}
.mx .ws-na{background:var(--none-bg);color:var(--t3);font-weight:500}
/* 「不知道」必須讓人一眼看出是缺口，不是普通的未填——斜紋底 */
.mx .ws-unknown{background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 6px,#EDE8E3 6px,#EDE8E3 12px);color:var(--t3)}

/* ── 提示框 ── */
.note{border-radius:var(--r);padding:var(--s3) var(--s4);font-size:var(--f);border:var(--line)}
.note-i{background:var(--accent-soft);color:var(--accent-ink)}
.note-w{background:var(--warn-bg);color:var(--warn)}
.note-d{background:var(--bad-bg);color:var(--bad)}
.note-s{background:var(--ok-bg);color:var(--ok)}
.note b{display:block;margin-bottom:2px}

/* ── 空狀態 ── */
.empty{text-align:center;padding:var(--s10) var(--s5);color:var(--t3)}
.empty h4{color:var(--t2);margin-bottom:var(--s1)}

@media (max-width:720px){
  .shell{flex-direction:column}
  .shell .side{min-height:auto;width:100%;display:flex;align-items:center;overflow-x:auto;padding:var(--s2)}
  .shell .brandbox{padding:0 var(--s3) 0 0}
  .shell .body{padding:var(--s4)}
}

/* ── 列印／匯出 PDF（PLN-06 計畫摘要頁）：藏側欄與操作按鈕，只印內容本身 ── */
@media print{
  .side,.topbar,.no-print{display:none !important}
  .shell .body{padding:0;max-width:none}
  body{background:#fff}
  .card,.sec{break-inside:avoid}
}

/* ══════════════════════════════════════════════════════════════
   OGSM 一頁式表格（2026-09-29 版面重做）
   這頁主要是拿給團隊/主管看帳戶打法，所以預設唯讀：O 橫跨頂部，
   G 成欄（.ogsm-cols 自動換行，不做橫向捲軸——要一眼讀完，不要用捲的），
   S/M 排在各自的 G 欄底下。顏色只當分頁識別，狀態一律直接寫字。
   只用 theme.css 既有 token，不新增顏色。
   ══════════════════════════════════════════════════════════════ */
.ogsm-top{display:flex;gap:var(--s3);align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--s4)}
.ogsm-guide{font-size:var(--f-sm);color:var(--t2);margin-bottom:2px}

.ogsm-board{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--lift);padding:var(--s5);margin-bottom:var(--s4)}

/* O：橫跨整張表的頂部帶狀區 */
/* 2026-09-30：O 條跟 G 標籤本來是綠色（舊「目標與藍圖」分頁色）。綠色在這個站是燈號
   「關係良好」的意思，拿來當裝飾會讓人以為這張表在說「一切都好」。改成互動色。 */
.ogsm-o{display:flex;gap:var(--s3);align-items:flex-start;background:var(--acc-bg);border-radius:var(--r);padding:var(--s3) var(--s4)}
.ogsm-o-l{flex:none;font-size:11px;font-weight:800;color:var(--t2);padding-top:6px;white-space:nowrap}
.ogsm-o-t{flex:1;min-width:0;font-size:var(--f-md);font-weight:700;line-height:1.4}
.ogsm-o-in{flex:1;min-width:0;font-weight:700;background:var(--card)}
.ogsm-meta{font-size:var(--f-xs);color:var(--t3);margin:var(--s3) 0 var(--s2)}

/* G：一個目標一欄 */
.ogsm-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--s3);align-items:start}
.ogsm-g{background:var(--soft);border-radius:var(--r);border-top:3px solid var(--acc);
  padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.ogsm-g-h{display:flex;align-items:center;gap:6px}
.ogsm-g-n{font-size:11px;font-weight:800;color:#fff;background:var(--acc);border-radius:var(--pill);padding:1px 8px}
.ogsm-g-l{font-size:11px;font-weight:700;color:var(--t3)}
.ogsm-g-t{font-size:var(--f);font-weight:700;line-height:1.4;word-break:break-word}
.ogsm-g-m{font-size:var(--f-xs);color:var(--t2)}
.ogsm-g-target{font-size:var(--f-sm);color:var(--t2);line-height:1.45}
.ogsm-g-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:var(--s2)}
.ogsm-inline-l{display:inline-block;font-size:10px;font-weight:700;color:var(--t3);margin-right:5px}

/* S/M：一條策略配一條衡量指標，排在該 G 欄底下 */
.ogsm-sm{margin-top:var(--s2);padding-top:var(--s3);border-top:1px solid var(--c3);display:flex;flex-direction:column;gap:var(--s3)}
.ogsm-sm-h{font-size:10px;font-weight:700;color:var(--t3)}
.ogsm-s{display:flex;gap:var(--s2);align-items:flex-start}
.ogsm-s-b{flex:1;min-width:0;word-break:break-word}
.ogsm-s-t{font-size:var(--f-sm);font-weight:600;line-height:1.45}
.ogsm-m{font-size:var(--f-xs);color:var(--t2);line-height:1.45}
.ogsm-s-edit{background:var(--card);border-radius:var(--r-sm);padding:var(--s2)}
.ogsm-s-edit .ogsm-s-b{display:flex;flex-direction:column;gap:var(--s2)}

/* 新增目標：長得像一個還沒填的空欄位，不是一顆浮在旁邊的按鈕 */
.ogsm-addg{border:1.5px dashed var(--c3);background:transparent;border-radius:var(--r);
  color:var(--t2);font:700 var(--f-sm)/1.4 inherit;font-family:inherit;cursor:pointer;
  min-height:104px;padding:var(--s4);transition:.12s}
.ogsm-addg:hover{border-color:var(--acc);color:var(--acc)}

@media (max-width:600px){
  .ogsm-o{flex-direction:column;gap:var(--s1)}
  .ogsm-o-l{padding-top:0}
  .ogsm-board{padding:var(--s4)}
}
@media print{
  .ogsm-top button{display:none !important}
  .ogsm-board{break-inside:avoid}
}

/* ── 帳戶計畫頁首（2026-09-29 壓縮）───────────────────────────────
   原本是兩張大卡：一張放完備度/證據強度/風險/到期，一張只放狀態＋下次檢視日，
   吸頂之後幾乎吃掉半個畫面。改成一張三行窄卡：
   第一行＝客戶是誰＋要操作的東西，第二行＝五個數字排成一條，第三行＝還缺什麼。 */
.card.plan-head{padding:var(--s3) var(--s4);margin-bottom:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.ph-r1{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.ph-r1 h3{font-size:var(--f-md)}
.ph-r2{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;font-size:var(--f-sm);color:var(--t2)}
.ph-r2 b{color:var(--t1);font-weight:700}
.ph-f{display:flex;align-items:center;gap:6px;font-size:var(--f-xs);color:var(--t2);white-space:nowrap}
/* OGSM 補強：G 欄等高（才像一張表，不是三張高度不一的卡）、狀態標籤等寬（S 文字對齊）、
   編輯模式每格都有小標籤（placeholder 填完就看不到，不然分不出哪格是 S 哪格是 M） */
.ogsm-cols{align-items:stretch}
.ogsm-s>.tag{min-width:52px;justify-content:center;flex:none;margin-top:1px}
.ogsm-f{display:flex;flex-direction:column;gap:2px;min-width:0}
.ogsm-fl{font-size:10px;font-weight:700;color:var(--t3);line-height:1.3}
.ogsm-t-prog{background:var(--card);color:var(--t2)}
/* 只有一兩個 G 的時候，1fr 會把單一欄拉滿整個版面寬度，字全擠在最左邊看起來很空。
   給欄位一個上限，少的時候靠左排就好。 */
.ogsm-g{max-width:560px}
/* OGSM 導讀：O/G/S/M 四列（各自的意思＋常見寫法），跟「這張表在回答」併在一起，
   唯讀模式也看得到——前兩版做成「編輯才出現」跟「可收合」，最需要它的人都找不到 */
.ogsm-eg{background:var(--soft);border-radius:var(--r);padding:var(--s3) var(--s4);margin-bottom:var(--s4)}
.ogsm-eg-row{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s2) 0}
.ogsm-eg-row+.ogsm-eg-row{border-top:1px solid var(--c3)}
.ogsm-eg-l{flex:none;width:100px;font-size:var(--f-xs);font-weight:800;color:var(--t2)}
.ogsm-eg-i{flex:1;min-width:0;font-size:var(--f-sm);color:var(--t2);line-height:1.6}
.ogsm-eg-i>b{color:var(--t1)}
.ogsm-eg-eg{display:block;font-size:var(--f-xs);color:var(--t3)}
@media (max-width:600px){.ogsm-eg-row{flex-direction:column;gap:2px}.ogsm-eg-l{width:auto}}

/* 刪除鈕：原本沿用 btn-3（透明底、灰字），看起來像一行說明文字，沒人知道可以按。
   給它紅色調＋淡紅底，按下去進入確認狀態再變成實心紅——兩個狀態一眼分得出來。 */
.btn-del{color:var(--bad);background:var(--bad-bg)}
.btn-del:hover{background:var(--bad);color:#fff;opacity:1}
.btn-del.armed{background:var(--bad);color:#fff;font-weight:800}

/* ══════════════════════════════════════════════════════════════
   組織與人：左樹右欄（2026-09-29，照 Cynthia 指定的原型）
   原本欄位表單接在樹的下面，人一多就要往下捲才看得到，而且看不到「全部的人
   長什麼樣」。改成右邊常駐一份關係人清單，點清單或點樹都會選到同一個人。
   ══════════════════════════════════════════════════════════════ */
.org-layout{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:var(--s4);align-items:start}
@media (max-width:1180px){.org-layout{grid-template-columns:1fr}}
.org-right{display:flex;flex-direction:column;gap:var(--s3);min-width:0}

/* 關係人清單：一眼看完全部的人 */
.org-list{padding:var(--s4);max-height:min(52vh,560px);overflow:auto}
.org-list-h{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s2)}
.org-list .tb td{vertical-align:middle}
.org-list .tb tbody tr{cursor:pointer}
.org-list .tb tbody tr.on{background:var(--acc-bg)}
.org-star{color:var(--bad);font-size:11px}

/* 欄位表單：標籤在左、控制項在右，一列一格 */
.org-f-head{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--c3)}
.org-f-head b{font-size:var(--f-md)}
.org-f{display:flex;gap:var(--s3);align-items:center;padding:4px 0}
.org-f-l{flex:none;width:96px;font-size:var(--f-xs);color:var(--t2);line-height:1.3}
.org-f-c{flex:1;min-width:0}
.org-f-c .in,.org-f-c .sel,.org-f-c .field{width:100%;margin:0}

/* 五項關係評分：預設收起來，沒填完才自動展開 */
.org-dims{margin-top:var(--s3);border-top:1px solid var(--c3);padding-top:var(--s3)}
.org-dims>summary{cursor:pointer;font-size:var(--f-xs);font-weight:700;color:var(--acc);list-style:none}
.org-dims>summary::-webkit-details-marker{display:none}
.org-dims>summary::before{content:'▸ '}
.org-dims[open]>summary::before{content:'▾ '}
.org-dim{margin-top:var(--s3)}
.org-dim-h{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-xs);color:var(--t2)}

/* 圖例：不用先懂顏色規則也讀得懂這張圖 */
.ot-legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
  font-size:var(--f-xs);color:var(--t2);margin:var(--s3) 0}
.ot-legend span{display:inline-flex;align-items:center;gap:5px}
.lg-line{width:18px;border-top:2px solid var(--t3);display:inline-block}
.lg-dash{width:18px;border-top:2px dashed var(--acc);display:inline-block}
.lg-star{color:var(--bad)}
.lg-layer{display:inline-block;font-size:12px;font-weight:800;color:var(--bad);margin-right:7px}
.lg-layer.on{color:var(--ok)}

/* ── 導覽移到上列（2026-09-29）：原本左邊固定 198px 的側欄裡只有 5 個連結，
   佔掉的寬度比它承載的資訊多太多。上面那條列本來就半空著，剛好放得下。 ── */
.shell{display:block}
.shell .body{max-width:1800px;margin:0 auto;padding:var(--s4) var(--s6)}
.topbar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.topnav{display:flex;gap:var(--s1);flex-wrap:wrap;margin-left:var(--s3)}
.topnav a{padding:5px var(--s3);border-radius:var(--pill);color:var(--t2);
  text-decoration:none;font-size:var(--f-sm);cursor:pointer;white-space:nowrap}
.topnav a:hover{background:var(--soft);color:var(--t1)}
.topnav a.on{background:var(--t1);color:#fff;font-weight:700}
@media (max-width:720px){.shell .body{padding:var(--s3)}.topnav{width:100%;margin-left:0;overflow-x:auto}}

/* ── 組織與人：版面重排（2026-09-30）────────────────────────────────
   1. 統計條（#orgStats）是這個帳戶的體檢結論，移到頁面最上面，不用捲過整棵樹才看到
   2. 樹的操作鈕貼回樹卡片上緣（.tree-head），操作跟它操作的對象在一起
   3. 圖例收進樹卡片底部當註腳（.tree-card > .ot-legend）
   4. 關係人清單固定在右邊、自己捲；人再多也不會把表單推到看不見的地方
   5. 點誰就在誰旁邊浮出表單（.fp-pop），清單不會被蓋掉             */
.tree-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.tree-head .th-sp{flex:1;min-width:var(--s4)}
.th-tools{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}

/* 卡片外框從 .tree-board 移到 .tree-card，board 只負責捲動，圖例才不會跟著橫向捲走 */
.tree-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--lift);padding:var(--s4)}
.tree-card .tree-board{background:none;box-shadow:none;border-radius:0;padding:var(--s3) 0 var(--s4)}
.tree-card .ot-legend{margin:0;padding-top:var(--s3);border-top:1px solid var(--c3)}

.org-right{position:sticky;top:var(--s3);max-height:calc(100vh - 116px)}
.org-list{max-height:none;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ol-search{display:flex;gap:var(--s2);padding:var(--s2) 0 var(--s3)}
.ol-search .in{flex:1;min-width:0}
.ol-scroll{flex:1;min-height:0;overflow:auto}

.fp-pop{position:fixed;width:360px;max-height:min(74vh,660px);overflow:auto;z-index:40}
.fp-pop>.card{position:relative;margin:0;box-shadow:0 10px 32px rgba(0,0,0,.18)}
.fp-close{position:absolute;right:var(--s3);top:var(--s3);z-index:2;padding:2px 8px}
.fp-arrow{position:fixed;width:11px;height:11px;background:var(--card);z-index:41;
  border-left:1px solid var(--c3);border-bottom:1px solid var(--c3);transform:rotate(45deg)}
.fp-arrow.flip{transform:rotate(225deg)}

@media (max-width:1180px){
  .org-right{position:static;max-height:none}
  .org-list{max-height:min(52vh,560px)}
}
/* 窄螢幕：浮窗改成貼底的抽屜，免得 360px 撐破畫面 */
@media (max-width:760px){
  .fp-pop{left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto;max-height:70vh}
  .fp-arrow{display:none}
}

/* ── 滿版置中（2026-09-30）───────────────────────────────────────
   Cynthia：「排版感覺很靠左邊，我是要滿版置中，要整個版面的感覺」。
   原因有三個，都在這裡處理：
   a. 統計列的五格是 min-width:116px 不會撐開，五格擠在左邊、右半邊整片空白
   b. 樹卡片跟關係人清單各自只有內容那麼高，人少的時候整頁浮在左上角
   c. 內容上限 1800px，超寬螢幕才吃得到；一般筆電是整條滿版，左右留同樣的邊    */
.ot-stats{gap:var(--s3)}
.ot-stats>div{flex:1 1 0;min-width:0}          /* 五格平均撐滿整條，不再擠在左邊 */
.ot-stats .lg-layer{white-space:nowrap}

/* 兩欄一樣高，撐到畫面底，版面才是一整塊而不是浮在左上角的兩個小卡 */
.org-layout{align-items:stretch;min-height:calc(100vh - 330px)}
.org-left{display:flex;flex-direction:column;min-width:0}
.org-left #orgTreeMount{flex:1;display:flex;flex-direction:column}
.org-left .tree-card{flex:1;display:flex;flex-direction:column}
.org-left .tree-card .tree-board{flex:1}
.org-right{max-height:none}
.org-right .org-list{max-height:calc(100vh - 150px)}
@media (max-width:1180px){
  .org-layout{min-height:0}
  .org-right .org-list{max-height:min(52vh,560px)}
}
.ot-stats{margin-bottom:var(--s2)}
.ot-stat-na{font-size:var(--f-sm);font-weight:600;color:var(--t3)}
.ot-stats-note{margin:0 0 var(--s4)}
/* #orgList 是 .org-list 卡片外面那層掛載點：卡片自己 flex:1 沒用，
   要長高的是這個外層，不然右欄拉滿高度、裡面的清單卡還是只有內容那麼高 */
.org-right #orgList{flex:1;min-height:0;display:flex;flex-direction:column}

/* ── 手機版（2026-09-30）───────────────────────────────────────────
   桌機的格子在 390px 寬底下會被擠成一格 60~70px，字一個一個往下折，
   看起來像壞掉。這一段只處理「在手機上會擠爛」的幾塊，其餘沿用桌機。  */
.ol-dot{display:none}                 /* 電腦版單位與層級是換行，不需要這個分隔點 */

@media (max-width:760px){
  /* 頁首那一行：手機上藏掉產業／負責人（客戶名旁邊已經夠了），
     狀態與日期各佔一半，動作鈕自己一排，不要五個東西擠成鋸齒狀 */
  .ph-meta{display:none}
  .ph-sp{flex-basis:100%;height:0}
  .card.plan-head #planStatus{flex:1;width:auto !important}
  .card.plan-head #planNextReview{flex:1;width:auto !important}

  /* 體檢數字：四格擠一排會把「還沒指定我方對接人」折成一個字一行 → 改 2×2 */
  .ot-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
  .ot-stats>div{min-width:0;padding:var(--s3)}
  .ot-stat-v{font-size:var(--f-lg)}
  .ot-stat-l{font-size:11px}

  /* 樹上方的操作鈕：手機上排不下五顆，折成兩排（新增一排、工具一排）。
     不用橫向捣：按鈕列要捣才看得到，在手機上容易被當成沒這個功能 */
  .tree-head{flex-wrap:wrap;row-gap:var(--s2)}
  .tree-head .th-sp{flex-basis:100%;height:0;min-width:0}
  .tree-head .btn{white-space:nowrap}

  /* 關係人清單：四欄表格在手機上必爛，改成一列兩行的卡片式 */
  .org-list .tb, .org-list .tb tbody{display:block}
  .org-list .tb thead{display:none}
  .org-list .tb tr{display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:2px var(--s3);padding:var(--s2) 0;border-top:1px solid var(--c3)}
  .org-list .tb tr:first-child{border-top:none}
  .org-list .tb td{display:block;padding:0;border:none}
  .org-list .tb td:nth-child(1){grid-area:1/1;font-size:var(--f-sm)}
  .org-list .tb td:nth-child(4){grid-area:1/2;text-align:right}
  .org-list .tb td:nth-child(2){grid-area:2/1}
  .org-list .tb td:nth-child(3){grid-area:2/2;text-align:right;white-space:nowrap}
  .org-list .tb td:nth-child(2) .ol-br{display:none}
  .org-list .tb td:nth-child(2) .ol-dot{display:inline}
  .ol-search{flex-wrap:wrap}
  .ol-search .in{flex:1 1 100%}
  .ol-search .sel{width:100% !important}

  /* 一般表格（合約、機會…）在手機上讓它自己橫向捲，不要撐破整頁 */
  .card > .tb{display:block;overflow-x:auto;white-space:nowrap}

  /* 分頁列右邊的「封存分頁」下拉在手機上自己一排 */
  .tabs{flex:1 1 100%}
}

/* ── 釘選客戶（2026-09-30）：業務自己排「先跑哪幾家」──────────────── */
.ccard{position:relative}
.pin-ctl{position:absolute;top:7px;right:7px;display:flex;gap:1px;z-index:2}
.pin-b{border:none;background:none;cursor:pointer;color:var(--t3);
  font-size:13px;line-height:1;padding:4px 5px;border-radius:var(--r-sm);transition:.12s}
.pin-b:hover{background:var(--soft);color:var(--t1)}
.pin-b.on{color:var(--warn)}
.pin-head{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s3)}
.pin-grid{margin-bottom:var(--s6)}

/* ── OGSM：新增改成隨時都在，編輯退成次要（2026-09-30）────────────────
   Cynthia：「策略與目標的編輯應該改為新增，而且按鈕不應該放在那邊」。
   原本要先按「編輯」整頁換成表單，才看得到「＋新增」——但按新增的人本來就
   知道自己要打字，編輯模式是副作用，不該變成他要先想的事。                */
.ogsm-bar{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 var(--s3)}
.ogsm-add{display:block;width:100%;border:1px dashed var(--c3);background:none;color:var(--t2);
  border-radius:var(--r-sm);padding:7px var(--s3);font:inherit;font-size:var(--f-sm);font-weight:600;
  cursor:pointer;transition:.12s;margin-top:var(--s2)}
.ogsm-add:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-bg)}
.ogsm-add-o{margin-top:var(--s4);padding:11px var(--s4);border-radius:var(--r)}
/* 唯讀模式下可以點進去改的文字：平常不著痕跡，滑過去才提示 */
.ogsm-click{cursor:text;border-radius:var(--r-sm);margin:-2px -6px;padding:2px 6px;transition:.12s}
.ogsm-click:hover{background:var(--acc-bg);box-shadow:inset 0 0 0 1px var(--acc)}

/* ── 客戶卡片：一種骨架就好（2026-09-30）────────────────────────────
   Cynthia：「客戶總覽的格子我還是覺得很花很亂」。三個原因：
   a. 沒計畫的卡寫成 <a class="ccard empty">，empty 撞到全站的空狀態樣式
      （.empty{text-align:center;padding:48px;color:灰}），所以那些卡變成置中、
      灰字、內距 48px——跟旁邊有計畫的卡完全兩種長相，整面牆才會看起來亂
   b. 每張卡都掛「草稿」「0/5 就緒」，每張都有就等於沒講話
   c. 卡片高度各長各的，同一列高低不齊                                  */
.ccard{display:flex;flex-direction:column}
.ccard .bd{flex:1;display:flex;flex-direction:column;gap:var(--s1)}
.cc-noplan .nm{color:var(--t2)}
.cc-tags{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
.cc-foot{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s3)}
.cc-foot .hint{line-height:1.35}
.cc-cta{color:var(--acc);font-weight:700;font-size:var(--f-sm)}

/* ── 機會評分：改成有說明的下拉（2026-09-30）────────────────────────
   Cynthia：「機會的分數用下拉選單，另外請多說明每個選項，才知道分數怎麼填」。
   原本是五個 1-5 的數字框、零說明——填的人只能猜，而且每個人猜得不一樣，
   分數就沒有比較的意義。                                              */
.opp-f{display:block;margin-bottom:var(--s3)}
.opp-fl{display:block;font-size:var(--f-sm);font-weight:700;color:var(--t2);margin-bottom:3px}
.opp-f .sel{width:100%}
.opp-help{display:block;font-size:11px;margin-top:3px;line-height:1.4}
.opp-sep{font-size:11px;color:var(--t3);border-top:1px solid var(--c3);
  padding-top:var(--s2);margin:var(--s3) 0}
.opp-land{display:flex;gap:var(--s2);align-items:flex-start;background:var(--soft);
  border-radius:var(--r-sm);padding:var(--s3);margin-top:var(--s3)}
.opp-land input{margin-top:3px;flex:none}
.opp-land .hint{display:block;font-size:11px;line-height:1.5;margin-top:2px}

/* ── 拖曳目標要一眼看得出來（2026-10-08）────────────────────────
   放開之前就要知道「會掛到誰底下」。原本的 .ot-hot 是虛線框，在卡片很多時
   不夠顯眼，改成實線加粗＋稍微放大。                                    */
.node-card.ot-hot{border-style:solid !important;border-width:2px;transform:scale(1.05);
  transition:transform .08s ease-out;z-index:3}
.node-card.ot-bad{transform:none}
.tree-head .th-hint{font-size:11px;color:var(--t3)}
@media (prefers-reduced-motion: reduce){ .node-card.ot-hot{transform:none} }
/* 拖曳時「被選中的卡」跟「要放的目標」都是互動色，一眼分不出來。目標卡上直接寫字。 */
.node-card.ot-hot::after,.node-card.ot-bad::after{position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:700;color:#fff;padding:2px 9px;border-radius:var(--pill);white-space:nowrap;pointer-events:none}
.node-card.ot-hot::after{content:'放到這裡';background:var(--acc)}
.node-card.ot-bad::after{content:'不能放這裡';background:var(--bad)}