/* ══════════════════════════════════════════════════════════════
AP 站 設計系統 v1 — 照《AP站_設計系統_v1.html》整段複製，不要自己另外定義
顏色、圓角、陰影或字級。找不到合適的 token 就先問，不要硬湊。
══════════════════════════════════════════════════════════════ */
:root{
/* 中性：2026-09-30 改成蓝灰（「企業藍骨架・紫互動」方案 A）。
原本是暖白基底，但 --t3 的 #A8A29C 太淡，提示文字幾乎讀不到。 */
--bg:#F4F6F9; --c0:#FFFFFF; --c1:#F4F6F9; --card:#FFFFFF; --soft:#EDF1F6; --c2:#EDF1F6; --c3:#D5DDE6; --line:1px solid #D5DDE6;
--t1:#10243D; --t2:#4A5C71; --t3:#7C8CA0;
/* 八個分頁色 —— 每個顏色綁定一個分頁，這是活潑但不花俏的關鍵。
順序＝分頁順序＝課程填寫順序。不要拿這些顏色去做裝飾。 */
--c-ov:#64748B; --c-ov-bg:#EEF1F5; /* 1 總覽（中性） */
--c-res:#3B82F6; --c-res-bg:#E8F1FE; /* 2 帳戶研究 */
/* 2026-09-30：調暗調淡。換成蓝灰底之後，#0EA5A5 變成整張樹上最亮的東西，
但它只是在說「這個人屬於哪個部門」，不該跟燈號跟互動色搶。
還是青色系（看得出「部門」跟「人」不同類），只是退回背景層。 */
--c-org:#2F7E7E; --c-org-bg:#E9F1F1; /* 3 組織樹狀圖 */
--c-ws:#F59E0B; --c-ws-bg:#FEF3DC; /* 4 白地與份額 */
--c-opp:#7C5CFF; --c-opp-bg:#F1EDFF; /* 5 機會與優先 */
--c-road:#22C55E; --c-road-bg:#E4F9EC; /* 6 目標與藍圖 */
--c-gov:#EC4899; --c-gov-bg:#FDE9F3; /* 7 治理與風險 */
--c-his:#A8A29C; --c-his-bg:#F3F0ED; /* 8 歷程（中性） */
/* 語意：燈號一律用這三組，不要另外調色。
這三個顏色是在講「這段關係好不好」，所以品牌色（紫）永遠不碰它們。 */
--ok:#147A46; --ok-bg:#E3F3EA; /* 綠燈 ≥4.0 */
--warn:#9A6200; --warn-bg:#FBF0DC; /* 黃燈 3.0–3.9 */
--bad:#C0273D; --bad-bg:#FBE6E9; /* 紅燈 <3.0 */
--none:#C3CCD6; --none-bg:#EDF1F6; /* 未評分 */
/* 全站互動色。方案 A 的規則：紫只出現在「可以按、被選到」的東西上（主要按鈕、
分頁底線、選取框、分級標籤）；結構（底色、文字、線條）是蓝灰，狀態是燈號。 */
--acc:#5B4BD6; --acc-bg:#ECEAFB; --accent:#5B4BD6; --accent-soft:#ECEAFB; --accent-ink:#4437A8;
--f-xs:12px; --f-sm:13px; --f:14px; --f-md:16px; --f-lg:21px; --f-xl:28px; --f-2xl:38px;
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:48px;
--r-sm:4px; --r:6px; --r-lg:8px; --r-xl:10px; --pill:999px; --r-full:999px;
--h:38px; /* 標準控制項高度 */
--lift:0 1px 3px rgba(16,36,61,.10);
--lift-2:0 6px 16px rgba(16,36,61,.14);
}
/* 三個主色方案（沿用既有 body class 切換機制，全部指到同一組 --acc） */
.t-indigo,.t-teal,.t-ink{--accent:var(--acc);--accent-soft:var(--acc-bg);--accent-ink:#5A3FD6}
*{box-sizing:border-box}
body{
margin:0;background:var(--bg);color:var(--t1);
font-family:-apple-system,BlinkMacSystemFont,"SF Pro TC","Noto Sans TC","PingFang TC",system-ui,sans-serif;
font-size:var(--f);line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;line-height:1.3}
h1{font-size:var(--f-xl);font-weight:800}
h2{font-size:var(--f-lg);font-weight:700}
h3{font-size:var(--f-md);font-weight:700}
h4{font-size:var(--f);font-weight:700}
.mut{color:var(--t2)} .hint{color:var(--t3);font-size:var(--f-sm)}
.num{font-variant-numeric:tabular-nums;letter-spacing:0}
/* ── 按鈕：一律 pill ── */
.btn{height:var(--h);padding:0 var(--s4);border-radius:var(--pill);border:none;
background:var(--t1);color:#fff;font:700 var(--f-sm)/1 inherit;font-family:inherit;
cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.15s}
.btn:hover{opacity:.88}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-2{background:var(--card);color:var(--t1);border:1.5px solid var(--c3)}
.btn-2:hover{border-color:var(--t3);background:var(--card);opacity:1}
.btn-2.on{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-3{background:transparent;color:var(--t2);border:none}
.btn-3:hover{background:var(--soft);color:var(--t1)}
.btn-sm{height:29px;padding:0 var(--s3);font-size:var(--f-xs)}
/* ── 表單：無重邊框，focus 才出現主色環 ── */
.in,.sel,.ta{width:100%;height:var(--h);padding:0 var(--s3);border-radius:var(--r-sm);
border:1.5px solid var(--c3);background:var(--card);color:var(--t1);font:var(--f-sm)/1.5 inherit;font-family:inherit;transition:.12s}
.ta{height:auto;min-height:56px;padding:var(--s2) var(--s3);resize:vertical;line-height:1.5}
.in:focus,.sel:focus,.ta:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg)}
.in::placeholder,.ta::placeholder{color:var(--t3)}
.sel{appearance:none;padding-right:30px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center}
/* ── 卡片：陰影分層，不靠重邊框 ── */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--lift);padding:var(--s5)}
.flat{background:var(--soft);border-radius:var(--r-lg);padding:var(--s5)}
/* ── 徽章：低飽和 pill ── */
.tag{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 var(--s2);
border-radius:var(--pill);font-size:11px;font-weight:700;background:var(--soft);color:var(--t2)}
.tag-a,.tag-acc{background:var(--acc-bg);color:var(--acc)}
.tag-ok{background:var(--ok-bg);color:var(--ok)}
.tag-w,.tag-warn{background:var(--warn-bg);color:var(--warn)}
.tag-b,.tag-bad{background:var(--bad-bg);color:var(--bad)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
/* ── 進度 ── */
.bar{height:4px;background:var(--c3);border-radius:var(--pill);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--acc);border-radius:var(--pill)}
.bar.ok>i{background:var(--ok)} .bar.w>i{background:var(--warn)} .bar.b>i{background:var(--bad)}
/* ── 表格 ── */
.tb{width:100%;border-collapse:collapse;font-size:var(--f-sm)}
.tb th{text-align:left;padding:var(--s2) var(--s3);font-size:11px;font-weight:700;color:var(--t3);white-space:nowrap}
.tb td{padding:var(--s2) var(--s3);border-top:1px solid var(--c3);vertical-align:top}
.tb tbody tr{transition:.12s}
.tb tbody tr:hover{background:var(--soft)}
.tb .r{text-align:right}
/* ── 客戶卡：頂部色條＋完成度環，見 clients.js 的 .ccard ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s3)}
.ccard{display:block;background:var(--card);border-radius:var(--r);box-shadow:var(--lift);
overflow:hidden;cursor:pointer;transition:box-shadow .14s,transform .14s;border:1.5px solid transparent;text-decoration:none;color:inherit}
.ccard:hover{box-shadow:var(--lift-2);transform:translateY(-2px)}
.ccard:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* 用 > 子代選擇器，避免卡片內容裡另一條「證據強度」.bar 被這條健康度色條的 3px 高度吃掉 */
.ccard>.bar{height:3px;background:var(--none)}
.ccard .bd{padding:var(--s4)}
.ccard .nm{font-size:var(--f-md);font-weight:700;line-height:1.3}
.ccard .meta{display:flex;align-items:center;gap:6px;margin-top:var(--s1);font-size:var(--f-xs);color:var(--t2);flex-wrap:wrap}
.ccard .meta .sep{color:var(--t3)}
.ccard .amt{font-size:var(--f-lg);font-weight:800;margin-top:var(--s3)}
.ccard.empty{border-style:dashed;border-color:var(--c3);box-shadow:none;background:var(--soft)}
.av{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
font-size:10px;font-weight:800;color:#fff;flex:none}
/* 業務代表色：固定配色，全站一致（見設計系統 v1 §04） */
.av-cynthia{background:#7C5CFF} .av-amanda{background:#F59E0B} .av-becky{background:#0EA5A5} .av-none{background:var(--t3)}
.grade-badge{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
font-size:var(--f-xs);font-weight:800;background:var(--acc-bg);color:var(--acc);flex:none}
/* 完成度環：67%
*/
.ring{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
font-size:10px;font-weight:800;color:var(--t2);
background:conic-gradient(var(--acc) calc(var(--p, 0)*1%),var(--soft) 0)}
.ring::after{content:'';position:absolute;width:26px;height:26px;border-radius:50%;background:var(--card)}
.ring>span{position:relative;z-index:1}
/* ── 統計列（設計系統 v1 §⑨）：各分頁自己土砲的數字卡一律改用這個共用元件，
不要各自客製 inline style，例如 org-tree 的 .ot-stats 現在也是照這個結構長的 ── */
.stats{display:flex;gap:var(--s3);flex-wrap:wrap}
.stats>div{background:var(--card);border-radius:var(--r);padding:var(--s3) var(--s4);box-shadow:var(--lift);min-width:116px}
.stats .v{font-size:var(--f-xl);font-weight:800;line-height:1.15}
.stats .v.sm{font-size:var(--f-md)}
/* ── 九宮格：必須是 3×3 網格（設計系統 v1 §⑪ .nine/.ncell，class 名稱沿用專案原本的
.grid9/.cell/.cell-h/.struct——之前這裡誤寫成 .g9/.cell-t，跟 plan-research.js 實際
輸出的 class 對不起來，9 宮格從來沒真的排成 3×3，這次一起修掉 ── */
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:900px){.grid9{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid9{grid-template-columns:1fr}}
.cell{background:var(--card);border-radius:var(--r);border:1.5px solid var(--c3);border-left-width:4px;
padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);position:relative}
.cell .ta{min-height:60px;font-size:var(--f-sm);border:none;background:var(--soft)}
.cell .ta:focus{background:var(--card);border:1.5px solid var(--c3)}
.cell-h{display:flex;align-items:center;gap:var(--s2)}
.cell-h b{flex:1;font-size:var(--f-sm);font-weight:700}
.cell .sel{height:26px;width:auto;font-size:var(--f-xs);padding:0 26px 0 9px;border:none;background-color:var(--soft)}
/* 結構格（組織架構／關鍵人物／競爭對手）：只能看摘要跳轉，不能輸入文字——灰底虛線區分 */
.cell.struct{background:var(--soft);border-style:dashed}
/* ── 象限 ── */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);max-width:340px}
.q{border-radius:var(--r);padding:var(--s3);min-height:96px;position:relative;border:1.5px solid var(--c3)}
.q b{display:block;font-size:var(--f-sm)}
.q span{font-size:var(--f-xs);color:var(--t2)}
.q1{background:var(--bad-bg)} .q2{background:var(--ok-bg)}
.q3{background:var(--soft)} .q4{background:var(--acc-bg)}
.q i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--t1);border:2px solid var(--card)}
/* ── 版面骨架 ── */
.app{display:flex;min-height:560px;border-radius:var(--r-xl);overflow:hidden;border:1.5px solid var(--c3)}
.side{width:198px;background:var(--card);border-right:1.5px solid var(--c3);padding:var(--s4) var(--s3);flex:none}
.brandbox{display:flex;align-items:center;gap:9px;padding:0 var(--s2) var(--s5)}
.mark{width:26px;height:26px;border-radius:7px;background:var(--acc);flex:none;display:grid;place-items:center}
.side a{display:flex;align-items:center;gap:9px;padding:8px var(--s2);border-radius:var(--r-sm);
color:var(--t2);text-decoration:none;font-size:var(--f-sm);cursor:pointer;margin-bottom:2px}
.side a:hover{background:var(--soft);color:var(--t1)}
.side a.on{background:var(--soft);color:var(--t1);font-weight:700}
.side .gp{padding:var(--s4) var(--s2) var(--s1);font-size:var(--f-xs);color:var(--t3)}
.body{flex:1;background:var(--bg);padding:var(--s5);min-width:0}
.topbar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.chip{height:30px;padding:0 var(--s3);border-radius:var(--pill);border:1.5px solid var(--c3);
background:var(--card);color:var(--t2);font:700 var(--f-xs)/1 inherit;font-family:inherit;
display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.chip:hover{border-color:var(--t3)}
.chip.on{background:var(--t1);color:#fff;border-color:transparent;font-weight:700}
/* ══════════════════════════════════════════════════════════════
組織與關係人樹（設計系統 v1 §13 ⑬組織樹狀圖，逐項照抄）——規格增修
v2.4.2 §4.1 明確要求「樣式不要另開檔案」，原本獨立的 org-tree.css
併進這裡，index.html 不再另外 它
══════════════════════════════════════════════════════════════ */
/* --line 在這份設計系統裡是純色，跟本檔前面「完整 border 簡寫」用法衝突，
這裡改用 --ot-line 指到 --c3（純色 token），避免 background:var(--line) 這種寫法失效 */
:root{ --ot-line:var(--c3); }
.ot-stats{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.ot-stats>div{background:var(--card);border-radius:var(--r);padding:var(--s3) var(--s4);box-shadow:var(--lift);min-width:116px}
.ot-stats .v,.ot-stat-v{font-size:var(--f-xl);font-weight:800;line-height:1.15}
.ot-stat-l{color:var(--t3);font-size:var(--f-sm)}
.ot-stat-bad .ot-stat-v{color:var(--bad)}
.tree-board{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--lift);
padding:var(--s5) var(--s4) var(--s6);overflow:auto}
.tree-canvas{position:relative;min-width:max-content;margin:0 auto}
.forest{display:flex;gap:var(--s6);justify-content:center;align-items:flex-start;position:relative;z-index:1}
.ot-canvas{position:relative;padding:0}
.ot-trees{display:flex;gap:var(--s6);justify-content:center;align-items:flex-start;flex-wrap:wrap}
.blk{display:flex;flex-direction:column;align-items:center;position:relative}
.kids{display:flex;gap:var(--s3);padding-top:38px;position:relative;align-items:flex-start}
/* .kids{display:flex} 的 specificity 蓋過瀏覽器內建的 [hidden]{display:none}，收合時 org-tree.js
設的原生 hidden 屬性完全沒作用（按鈕文字跟 🔻/★ 有變，但底下的人從沒真的被藏起來）——
2026-09-10 靠 Cynthia 的拖曳自我檢查清單測出來的，這裡補一條選擇器優先度更高的規則蓋掉它 */
.kids[hidden]{display:none}
.kids::before{content:'';position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:19px;background:var(--ot-line)}
.kids>.blk::before{content:'';position:absolute;top:19px;right:50%;width:50%;height:2px;background:var(--ot-line)}
.kids>.blk::after{content:'';position:absolute;top:19px;left:50%;width:50%;height:19px;border-top:2px solid var(--ot-line);border-left:2px solid var(--ot-line)}
.kids>.blk:first-child::before{display:none}
.kids>.blk:last-child::after{border-top-color:transparent}
.kids>.blk:only-child::before{display:none}
.kids>.blk:only-child::after{border-top-color:transparent}
.dropzone,.ot-drop-root{border:1.5px dashed var(--c3);border-radius:var(--pill);padding:5px var(--s4);
font-size:var(--f-xs);color:var(--t3);margin:0 auto var(--s4);width:max-content;transition:.12s;text-align:center}
.dropzone.hot,.ot-drop-root.ot-hot,.ot-drop-root-active{border-color:var(--acc);background:var(--acc-bg);color:var(--acc);border-style:solid}
.node-card,.nd{position:relative;cursor:pointer;touch-action:none;user-select:none;background:var(--card);
border:1.5px solid var(--c3);border-radius:11px;box-shadow:var(--lift);padding:7px 10px;
min-width:124px;max-width:180px;text-align:center;transition:box-shadow .12s,border-color .12s}
.node-card:hover,.nd:hover{box-shadow:var(--lift-2)}
.node-card.ot-sel,.nd.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg)}
.node-card.root,.nd.root{box-shadow:0 3px 14px rgba(31,27,24,.14)}
/* 上緣色條＝態度（org-tree.js 用 style="border-top:3px solid ..." 直接指定色值，這裡保留粗細） */
.person-card{border-top-width:3px}
/* 待查單位：虛線斜紋，代表「還不知道誰在管」＝待辦 */
.unit-card,.nd.u{background:repeating-linear-gradient(45deg,#F4FBFB,#F4FBFB 7px,#EAF7F7 7px,#EAF7F7 14px);
border-color:#BCE7E5;border-style:dashed;text-align:center;min-width:112px}
.unit-card .nc-name,.nd.u .nm{color:var(--c-org);font-weight:800}
.unit-card .nc-sub,.nd.u .who{font-size:10px;color:var(--bad);font-weight:700}
.nc-name,.nd .nm{font-size:var(--f-sm);font-weight:700;line-height:1.3;outline:none;border-radius:4px}
.nc-name[contenteditable="true"]{background:#fff;box-shadow:0 0 0 2px var(--acc);cursor:text;padding:0 3px}
.nc-title,.nd .tt{font-size:10.5px;color:var(--t2);line-height:1.3}
.nc-unit,.nd .un{font-size:10px;color:var(--c-org);font-weight:700;line-height:1.35}
.ot-chips,.nd .mt{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:5px;flex-wrap:wrap}
.ot-badges{position:absolute;top:-8px;right:-6px;display:flex;gap:2px}
.ot-badge{font-size:12px;line-height:1}
.ot-badge-gap,.nd .star{color:var(--bad)}
.star{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;
background:var(--bad);color:#fff;font-size:10px;display:grid;place-items:center;font-weight:700}
.led{position:absolute;top:-7px;left:-7px;font-size:11px}
.lv{font-size:9px;font-weight:800;padding:1px 5px;border-radius:var(--pill)}
.lv-exec{background:#EDE9FE;color:#6D28D9}
.lv-mgr{background:#DBEAFE;color:#1D4ED8}
.lv-op{background:var(--soft);color:var(--t2)}
.rl{font-size:9px}
/* 拖曳三態 */
.ot-dragging,.nd.dragging,.dragging{opacity:.3}
.ot-hot,.nd.hot,.hot{border-color:var(--acc) !important;border-style:dashed;background:var(--acc-bg);box-shadow:0 0 0 3px var(--acc-bg)}
.ot-bad,.nd.no{border-color:var(--bad) !important;background:var(--bad-bg)}
.ot-ghost,.ghost{position:fixed;pointer-events:none;z-index:99;opacity:.92;
transform:rotate(-2deg);box-shadow:var(--lift-2)}
.ot-collapse-btn,.fold{position:relative;margin-top:var(--s2);min-width:19px;height:17px;
padding:0 5px;border-radius:var(--pill);background:var(--card);border:1.5px solid var(--c3);
color:var(--t2);font-size:10px;font-weight:800;display:inline-grid;place-items:center;cursor:pointer;white-space:nowrap}
.ot-collapse-btn:hover,.fold:hover{border-color:var(--acc);color:var(--acc)}
svg.edges,.ot-edges{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:0}
svg.edges .informal{stroke:var(--acc);stroke-width:1.8;stroke-dasharray:5 4;fill:none;opacity:.75}