/* 客戶管理中心。左欄入口＋客戶列表、右欄客戶詳情。跟 token，唔用 emoji。 */
.cc-main{min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.cc-drop{border:1.5px dashed var(--line);border-radius:var(--r-md);background:var(--card);padding:var(--sp-4) var(--sp-3h);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.cc-drop:hover,.cc-drop.over{border-color:var(--brand-green-deep);background:var(--ok-soft)}
.cc-drop .t{font-size:var(--fs-md);font-weight:700}
.cc-drop .s{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.cc-drop .h{font-size:var(--fs-2xs);color:var(--faint);margin-top:var(--sp-1h)}
.cc-drop.big{padding:var(--sp-7) var(--sp-5);border-radius:var(--r-lg)}
.cc-drop.big .t{font-size:var(--fs-xl)}.cc-drop.big .s{font-size:var(--fs-sm);margin-top:var(--sp-2)}
.cc-drop.big .h{font-size:var(--fs-xs);margin-top:var(--sp-3h);line-height:1.9}

/* 篩選區：搜尋 → 篩選掣＋排序 → 生效中嘅標籤 → 展開嘅篩選面板。
   舊版五個下拉逼喺一行度自動斷行，窄欄位下好難撳。 */
.cc-empty{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--muted);font-size:var(--fs-sm);line-height:1.9}
.cc-empty span{font-size:var(--fs-xs);color:var(--faint)}
.cc-empty2{padding:var(--sp-5);text-align:center;color:var(--muted);font-size:var(--fs-xs)}
.cc-err{padding:var(--sp-5);text-align:center;color:var(--bad)}

.cc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:var(--sp-4) var(--sp-4)}
.cc-card>h3{font-size:var(--fs-md);display:flex;align-items:center;gap:var(--sp-2h);flex-wrap:wrap;margin-bottom:var(--sp-2h)}
.cc-card>h3 .c{font-size:var(--fs-2xs);font-weight:400;color:var(--muted)}
.cc-drill{background:var(--card);border:1px solid var(--brand-green-deep);border-radius:var(--r-md);overflow:hidden}
.cc-drill .dh{background:var(--ok-soft);padding:var(--sp-2h) var(--sp-3h);font-size:var(--fs-sm);font-weight:700;display:flex;align-items:center;gap:var(--sp-1h)}
.cc-drill .dh span{font-weight:400;font-size:var(--fs-2xs);color:var(--muted)}
.cc-drill .dh .x{margin-left:auto;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);font-size:var(--fs-2xs);padding:3px var(--sp-2h);cursor:pointer}
/* 09-12 方案 B：保單檢視＋保障覆蓋合併成「保障缺口」一格；按類別嗰段用小標題分隔 */
.cc-covbody{margin-top:var(--sp-3)}
.cc-covsum{font-size:var(--fs-sm);font-weight:600;display:flex;align-items:center;gap:var(--sp-2h);margin-bottom:var(--sp-1h)}
.cc-covsum .c{font-size:var(--fs-2xs);font-weight:400;color:var(--muted)}
.cc-cov .row{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-2) 0;border-top:1px solid var(--line2)}
.cc-cov .row .lb{flex:none;width:96px;font-size:var(--fs-xs);color:var(--muted);padding-top:var(--sp-1h)}
.cc-cov .row .lb b{color:var(--ink);font-family:var(--mono)}
.cc-cov .bar{display:flex;gap:var(--sp-1h);flex-wrap:wrap;flex:1;min-width:0}
.cc-cov .bar .none{font-size:var(--fs-xs);color:var(--faint);padding-top:var(--sp-1h)}
.cc-cvt{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:var(--sp-1h) var(--sp-2h);cursor:pointer;text-align:left;min-width:88px}
.cc-cvt:hover{border-color:var(--brand-green-deep)}
.cc-cvt.on{border-color:var(--brand-green-deep);background:var(--ok-soft)}
.cc-cvt.gap{border-style:dashed;background:var(--warn-soft)}
.cc-cvt.gap.on{border-color:var(--warn)}
.cc-cvt .n{display:block;font-size:var(--fs-xs);font-weight:700}
.cc-cvt .s{display:block;font-size:var(--fs-3xs);color:var(--muted);margin-top:1px;white-space:nowrap}
.cc-cvpanel{margin-top:var(--sp-2h);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.cc-cvpanel .hd{background:var(--card2);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;gap:var(--sp-1h)}
.cc-cvpanel .hd span{font-weight:400;color:var(--muted)}
.cc-cvpanel .hd .x{margin-left:auto;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);font-size:var(--fs-2xs);padding:3px var(--sp-2h);cursor:pointer}
.cc-cvpanel.gap .hd{background:var(--warn-soft);color:var(--warn)}

/* 09-12 對比度根治（用戶兩次指正「太淺色」）：shell.css 有個通用 .flat{color:muted}，而保單一覽主行就係 tr.pr.flat → 成行變灰。
   呢度全部明寫：主文字 ink、次要 ink2、計劃名粗體、數字 ink。 */
.tbl td.cv .sub{color:var(--ink2)}
/* 09-12 用戶：淺灰太多、對比度不足 —— 次要文字用 ink2（唔用 muted／faint） */
/* 09-16 終審 🟡：clients.css 而家亦喺理財需要分析頁載（手動保單表格共用殼），呢條 bare .tbl 會蓋過 needs2.css 嘅 .q2-histtbl td.dim → 收窄到客戶頁 */
body[data-page="clients"] .tbl td.dim,body[data-page="clients"] .tbl th.dim{color:var(--ink2);font-size:var(--fs-xs)}

.cc-det>summary{font-size:var(--fs-md);font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-2h)}
.cc-det>summary::-webkit-details-marker{display:none}
.cc-det>summary::after{content:"▾";margin-left:auto;font-size:var(--fs-2xs);color:var(--muted)}
.cc-det[open]>summary::after{content:"▴"}
.cc-det>summary .c{font-size:var(--fs-2xs);font-weight:400;color:var(--muted)}
.cc-busy{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:var(--sp-2h) var(--sp-4);border-radius:var(--r-pill);font-size:var(--fs-sm);box-shadow:var(--shadow);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s;max-width:80vw;text-align:center}
.cc-busy.on{opacity:1}

/* 匯入結果報告（幾百份文件之後要交代清楚） */
.cc-card.cc-report{border-color:transparent}   /* 10-24 設計語言 v1：卡只得陰影一層（確認卡喺入面，唔准盒中盒）；DesignV1「有框必撳得」 */
.cc-report .rp-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.rp-sec{border-top:1px solid var(--line2);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.rp-sec>h4{font-size:var(--fs-xs);font-weight:700;color:var(--ink2);margin-bottom:var(--sp-2)}
/* 名單自動跟顯示闊度分欄：闊芒幾多欄就幾多欄，窄芒自動跌返一欄 */
.rp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));column-gap:var(--sp-5);max-height:280px;overflow:auto}
.rp-list.one-col{grid-template-columns:1fr}
.rp-row{display:flex;align-items:baseline;gap:var(--sp-2h);padding:var(--sp-1h) 0;border-bottom:1px solid var(--line2);font-size:var(--fs-xs);min-width:0}
.rp-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-row b{font-weight:700}
.rp-row .n{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap}
.rp-row s{text-decoration:none;color:var(--warn);font-size:var(--fs-2xs);margin-left:auto;text-align:right}
.rp-note{font-size:var(--fs-2xs);color:var(--muted);line-height:1.8;margin:var(--sp-3h) 0 0;padding-top:var(--sp-2h);border-top:1px solid var(--line2)}
/* 10-24 客戶身份配對確認卡（匯入報告「請確認係咪同一人」）—— 設計語言 v1：卡入面冇盒中盒（分隔線＋小標題）、資料冇框冇底色；
   掣一律 ui-kit button.act：建議嗰粒（肯定／好可能預設「係同一人」）淺綠 .act.def，其餘 .act.alt 灰；每畫面冇實心主要動作（可能有幾張卡）。
   左右對照：欄位｜今次 PDF｜現有客戶｜相同／唔同（綠勾／紅叉＋字，唔淨靠色）。iPad 820 直放內容區約 540：四欄照擺得落（名可以摺行）。 */
.idm-top{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-height:44px}   /* 總監 🔵16：定高，「全部按預設確認」收埋唔郁位 */
.idm-top>h4{margin:0}
.idm-top>#idmAll{margin-left:auto}
.idm-top button.act[data-off]{visibility:hidden}
.idm-sec>.ipop{margin:var(--sp-2) 0}
.idm-also{font-size:var(--fs-xs);color:var(--muted);margin:calc(var(--sp-2) * -1) 0 var(--sp-2)}
.idm-grid .v.nil{color:var(--faint);font-weight:400}
.idm-pick .mseg{flex-wrap:wrap;height:auto;max-width:100%}   /* 總監 🟡15：三位候選＋大字（data-fs xl）820 直放唔准打橫捲 —— 摺行 */
.idm-card{padding:var(--sp-4) 0;border-bottom:1px solid var(--line2)}
.idm-card:last-child{border-bottom:0}
.idm-hd{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.idm-hd b{font-size:var(--fs-md);font-weight:700}
.idm-hd .why{font-size:var(--fs-xs);color:var(--muted)}
.idm-pick{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.idm-pick .l{font-size:var(--fs-xs);color:var(--muted)}
.idm-grid{display:grid;grid-template-columns:minmax(76px,132px) minmax(0,1fr) minmax(0,1fr) minmax(64px,auto);column-gap:var(--sp-4);font-size:var(--fs-sm);align-items:stretch}
.idm-grid>div{padding:var(--sp-2) 0;border-bottom:1px solid var(--line2);min-width:0;overflow-wrap:anywhere;line-height:1.4}
.idm-grid .h{font-size:var(--fs-xs);color:var(--muted);font-weight:700}
.idm-grid .k{color:var(--ink2)}
.idm-grid .v{color:var(--ink);font-weight:500}
.idm-grid .v.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.idm-grid .v.diff{color:var(--bad)}
.idm-grid .mk{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.idm-grid .mk.same{color:var(--ok)}
.idm-grid .mk.diff{color:var(--bad)}
.idm-acts{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.idm-acts button.act.alt{background-color:var(--neutral-soft);color:var(--ink2)}
.idm-acts button.act.alt:hover{background-color:rgba(0,0,0,.08)}
.idm-acts button.act:disabled{opacity:.55;cursor:progress}
.idm-def{font-size:var(--fs-xs);color:var(--muted)}
.idm-err{color:var(--bad);font-size:var(--fs-xs);margin:var(--sp-2) 0 0}
.idm-card.done{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-2) 0}
.idm-card.done b{font-size:var(--fs-sm)}

/* 篩選列 */
/* 列表行 */
/* 頭部：貨幣切換同匯出 */
/* 09-14：hero 兩粒主動作（理財需要分析／醫療儲備計算）用金色實心，同其餘工具掣分開 */
/* 保單全部資料 */
.fgs{margin-top:var(--sp-2h);display:flex;flex-direction:column;gap:var(--sp-3h)}
.fg>h4{font-size:var(--fs-xs);font-weight:700;color:var(--ink2);padding-bottom:var(--sp-1h);border-bottom:1px solid var(--line2);margin-bottom:var(--sp-1)}
.fr{display:flex;align-items:baseline;gap:var(--sp-2h);padding:var(--sp-1h) 0;font-size:var(--fs-xs);border-bottom:1px solid var(--line2)}
.fr:last-child{border-bottom:0}
.fl{flex:none;width:120px;color:var(--muted)}
.fv{flex:1;min-width:0;word-break:break-word}
.fv.na{color:var(--faint)}
.src{flex:none;font-size:var(--fs-3xs);padding:1px var(--sp-1h);border-radius:var(--r-xs);white-space:nowrap}
.src.s-doc{background:var(--ok-soft);color:var(--ok)}
.src.s-todo{background:var(--warn-soft);color:var(--warn)}
/* 計劃明細 */
.pd{margin-top:var(--sp-2h)}
.pd-row{display:flex;align-items:baseline;gap:var(--sp-3);padding:var(--sp-1h) 0;border-bottom:1px solid var(--line2);font-size:var(--fs-xs)}
.pd-row:last-child{border-bottom:0}
.pd-row s{display:block;text-decoration:none;font-size:var(--fs-2xs);color:var(--muted);margin-top:2px}
.pd-row .v{margin-left:auto;font-family:var(--mono);white-space:nowrap}
.pd-row.tot{border-top:1px solid var(--line);font-weight:700}
/* ILAS */
.fu{margin-top:var(--sp-2h)}
.fu-h{display:flex;font-size:var(--fs-2xs);font-weight:700;color:var(--ink2);background:var(--card2);padding:var(--sp-1h) var(--sp-2h);border-radius:var(--r-sm);margin:var(--sp-2) 0 var(--sp-1)}
.fu-h span{margin-left:auto;font-family:var(--mono);font-weight:500}
/* 09-12 圖像化投資組合：四格數 ＋ 比重色條 ＋ 精簡表 */
.cc-invtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-2h)}
.cc-invtiles .t{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-2h);display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-invtiles .t .l{font-size:var(--fs-2xs);color:var(--ink2)}
.cc-invtiles .t .l i{font-style:normal;color:var(--muted);font-family:var(--mono)}
.cc-invtiles .t b{font-family:var(--mono);font-size:var(--fs-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-invtiles .t em{font-style:normal;font-family:var(--mono);font-size:var(--fs-xs)}
.cc-invtiles .t em.up,.fu-tbl em.up{color:var(--ok)}
.cc-invtiles .t em.down,.fu-tbl em.down{color:var(--bad)}
.cc-invtiles .t.divy b,.cc-invtiles .t.divs b{color:var(--ok)}
.fu-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--line2);margin:var(--sp-1) 0 var(--sp-2)}
.fu-bar i{display:block;height:100%}
.fu-tbl td{font-size:var(--fs-xs);vertical-align:middle}
.fu-tbl td.n{min-width:160px;white-space:normal;overflow-wrap:break-word}   /* 10-27：基金名可換行（.tbl td 預設 nowrap → 長英文基金名令持倉表 iPad 820 直／英文 1180 都要打橫捲） */
.fu-tbl td.n b{font-weight:600}
.fu-tbl td.n .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.fu-tbl td.n small{margin-left:6px;color:var(--ink2);font-size:var(--fs-2xs)}
.fu-tbl td.n .pill{margin-left:6px}
.fu-tbl td.num{font-family:var(--mono);white-space:nowrap}
.fu-tbl td.price .rp,.fu-tbl td.val .rv{color:var(--muted);display:block;font-size:var(--fs-2xs)}
.fu-tbl td.price .lp,.fu-tbl td.val .lv{display:block}
.fu-tbl td.price .lp em{margin-left:6px;font-size:var(--fs-2xs)}
.fu-tbl td .na{color:var(--muted)}
.fu-tbl td.divc small{display:block;font-size:var(--fs-3xs);color:var(--ok)}
.fu-tbl td.divc b{color:var(--ok)}
@media (max-width:820px){.cc-invtiles{grid-template-columns:repeat(2,1fr)}}
.fu-row{font-size:var(--fs-xs)}
.fu-row:last-child{border-bottom:0}
.fu-row .n{flex:1;min-width:0}
.fu-row .n s{display:block;text-decoration:none;font-size:var(--fs-3xs);color:var(--muted);margin-top:2px}
.fu-row .p,.fu-row .v,.fu-row .g{flex:none;font-family:var(--mono);white-space:nowrap;text-align:right}
.fu-row .p{width:56px;color:var(--muted)}
.fu-row .v{width:132px}
.fu-row .g{width:56px}
.fu-row .g.up{color:var(--ok)}.fu-row .g.down{color:var(--bad)}
.fu-row.tot{font-weight:700;border-top:1px solid var(--line)}
.cc-note2{font-size:var(--fs-2xs);color:var(--muted);line-height:1.8;margin:var(--sp-2) 0 0}
.cc-note2.warn{color:var(--warn)}
/* 待辦 */
.unk-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-2) 0;border-bottom:1px solid var(--line2)}
.unk-row:last-child{border-bottom:0}
.unk-row b{flex:1;min-width:140px}
.unk-row select{border:1px solid var(--line);border-radius:var(--r-sm);height:30px;padding:0 8px;font-size:var(--fs-xs)}
/* 揀保單 */
/* 09-12 精簡 3：保單一覽就地展開嘅明細行 */
.pr-detbox{padding:var(--sp-3) var(--sp-3h);border-top:2px solid var(--line)}
.pr-detbox .hd{display:flex;align-items:center;gap:var(--sp-2h);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted)}
.pr-detbox .hd b{color:var(--ink)}
.pr-detbox .hd .x{margin-left:auto;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);font-size:var(--fs-2xs);padding:3px var(--sp-2h);cursor:pointer}
.pr-detbox .cc-det{margin-top:var(--sp-3)}
/* 多選 + 刪除 */
/* 保單刪除掣：平時淡，hover 先明顯 —— 唔想成版都係紅色刪除掣 */
/* 回收桶 */
.tr-sec{border-top:1px solid var(--line2);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.tr-sec>h4{font-size:var(--fs-xs);font-weight:700;color:var(--ink2);margin-bottom:var(--sp-2)}
.tr-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2h) 0;border-bottom:1px solid var(--line2);font-size:var(--fs-xs)}
.tr-row:last-child{border-bottom:0}
.tr-row>div{flex:1;min-width:0}
.tr-row s{display:block;text-decoration:none;font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-card>h3 .btn{margin-left:auto;font-size:var(--fs-xs);padding:5px 10px}

/* 全選列（常駐） */
/* 附加保障子列：縮入少少，同基本計劃分開 */
/* 投資組合 section */
.cc-inv .cc-invhd{display:flex;align-items:baseline;gap:var(--sp-2h);flex-wrap:wrap;margin:var(--sp-3h) 0 2px;padding-top:var(--sp-3);border-top:1px solid var(--line2)}
.cc-inv .cc-invhd:first-of-type{margin-top:var(--sp-2);padding-top:0;border-top:0}
.cc-inv .cc-invhd b{font-size:var(--fs-sm)}
.cc-inv .cc-invhd .pn{font-size:var(--fs-2xs);color:var(--muted)}
.cc-inv .cc-invhd .nf{font-size:var(--fs-2xs);color:var(--muted)}
.cc-inv .cc-invhd .v{margin-left:auto;font-family:var(--mono);font-size:var(--fs-sm);font-weight:700}
.cc-inv details.cc-det{border:0;box-shadow:none;background:transparent;padding:0;margin:var(--sp-1) 0 0}
/* 保單一覽：撳行可以切換下面詳情 */
/* 揀咗嗰行（展開明細）：成行淡金底，只喺第一格左邊一條線 —— 以前每一格都有條綠線，睇落似一格格隔開（用戶 09-12） */
/* 保單之間嘅分隔行：一條淡底粗線，唔係另一層資料 */
.cc-inv .cc-invwarn{font-size:var(--fs-2xs);line-height:1.6;color:var(--warn);background:var(--warn-soft);border-radius:var(--r-sm);padding:var(--sp-1h) var(--sp-2h);margin:var(--sp-1h) 0 0}
.cc-inv .cc-invnote{font-size:var(--fs-2xs);line-height:1.6;color:var(--muted);background:var(--bg2);border-radius:var(--r-sm);padding:var(--sp-1h) var(--sp-2h);margin:var(--sp-1h) 0 0}

.cc-back{display:inline-flex;align-items:center;gap:var(--sp-1h);font-size:var(--fs-sm);color:var(--link);margin-bottom:2px}

/* ── 通用彈窗（同 calendar.css .cal-mo 一樣規格）── */
.cc-mo{position:fixed;inset:0;z-index:50;display:none}
.cc-mo.on{display:block}
.cc-mo .scrim{position:absolute;inset:0;background:rgba(20,33,27,.4)}
.cc-mo .box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(600px,94vw);max-height:88vh;overflow:auto;background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--sp-5)}
.cc-mo h3{font-size:var(--fs-lg);margin-bottom:var(--sp-3h)}
.cc-mo .f{display:flex;flex-direction:column;gap:var(--sp-1h);margin-bottom:var(--sp-3)}
.cc-mo .f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.cc-mo label{font-size:var(--fs-xs);color:var(--muted)}
.cc-mo input,.cc-mo select,.cc-mo textarea{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;font-size:var(--fs-sm);font-family:var(--sans);background:var(--card)}
.cc-mo .hint{font-size:var(--fs-2xs);color:var(--muted);line-height:1.6}
.cc-mo .hint .warn{color:var(--warn);font-weight:600}
.cc-mo .hint a{color:var(--info);text-decoration:underline}
.cc-mo .mact{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4)}
/* ── 客戶檔案卡 ── */
/* 09-16 終審 ⚪：表格內「＋ 加一行／加一項」（#mpRidAdd／#ypSurrAdd）用 .lnk 但以前冇一條規則套到 .cc-mo，出咗瀏覽器預設掣 */
.cc-mo .lnk{background:none;border:0;padding:0;color:var(--info);cursor:pointer;font-size:var(--fs-xs);text-decoration:underline}
/* 09-12 第四期：家庭關係圖（第三版：圖像化）—— 每層等寬 grid；卡＝頭像＋四格保障燈＋三個數＋資產條；細節喺彈窗 */
/* 本人做核心，其他人向外擴展：上父母／中（其他｜本人｜配偶）／下子女；連線由 ::before 畫 */
.fc-hub{display:flex;flex-direction:column;align-items:stretch;gap:0;position:relative}
/* 10-07「係咪即係佢」比較框（family-chart compareHtml）：兩掣（保單／計算機）長字要摺行、撳範圍 ≥44px（前端總監 🔵I） */
.fc-cmp .seg.wrap{flex-wrap:wrap;height:auto}
.fc-cmp .seg.wrap button{min-height:44px;white-space:normal;text-align:left;line-height:1.4;flex:1 1 200px}
.fc-ring{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1h);position:relative;padding:var(--sp-2) 0}
.fc-ring.empty{display:none}
.fc-ring .fc-lb{font-size:var(--fs-2xs);color:var(--muted);display:flex;gap:4px;align-items:baseline}
.fc-ring .fc-lb i{font-style:normal;font-family:var(--mono);color:var(--faint)}
.fc-ring .fc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2h);width:100%}
.fc-ring .fc-node{flex:0 1 250px;min-width:220px}
/* 上下連線：父母 → 本人、本人 → 子女 */
.fc-hub.has-top .fc-ring.top::after,.fc-hub.has-bottom .fc-ring.bottom::before{content:"";display:block;width:2px;height:18px;background:var(--line);margin:0 auto}
.fc-hub.has-top .fc-ring.top::after{margin-top:var(--sp-1h)}
.fc-hub.has-bottom .fc-ring.bottom::before{margin-bottom:var(--sp-1h)}
.fc-mid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0}
.fc-mid .fc-ring.left,.fc-mid .fc-ring.right{padding:0}
.fc-mid .fc-ring.left .fc-grid{justify-content:flex-end}
.fc-mid .fc-ring.right .fc-grid{justify-content:flex-start}
.fc-mid .fc-ring.empty{display:block}
/* 左右連線：配偶 ↔ 本人、其他 ↔ 本人 */
.fc-mid.has-right .fc-ring.right::before,.fc-mid.has-left .fc-ring.left::after{content:"";display:block;height:2px;width:18px;background:var(--line);flex:none}
.fc-mid .fc-ring.left,.fc-mid .fc-ring.right{flex-direction:row;align-items:center;gap:0}
.fc-mid .fc-ring.right{justify-content:flex-start}
.fc-mid .fc-ring.left{justify-content:flex-end}
.fc-mid .fc-ring .fc-lb{display:none}
.fc-core{flex:none;width:320px;max-width:100%}
.fc-core .fc-node{width:100%}
.fc-core .fc-node.me{box-shadow:0 0 0 2px var(--accent) inset;background:linear-gradient(180deg,var(--accent-soft),var(--card) 40%)}
.fc-core .fc-av{width:42px;height:42px;font-size:var(--fs-md)}
@media (max-width:820px){.fc-mid{grid-template-columns:1fr}.fc-mid .fc-ring.left::after,.fc-mid .fc-ring.right::before{display:none}.fc-mid .fc-ring .fc-lb{display:flex}.fc-mid .fc-ring.left,.fc-mid .fc-ring.right{flex-direction:column;justify-content:center}.fc-core{width:100%}}
.fc-key{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;font-size:var(--fs-2xs);color:var(--muted);padding-bottom:var(--sp-2)}
.fc-key .sp{flex:1}
.fc-key .k{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.fc-key .k.ok,.fc-lamp.ok i{background:var(--ok)}
.fc-key .k.gap,.fc-lamp.gap i{background:var(--bad)}
.fc-key .k.na,.fc-lamp.na i{background:var(--line)}
.fc-key .k.part,.fc-lamp.part i{background:var(--warn)}   /* 09-27：醫療未充足（淨係癌症治療／住院現金）＝黃，唔當有、亦唔當冇 */
.fc-node{min-width:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:var(--sp-2h) var(--sp-3) calc(var(--sp-2h) + 12px);display:flex;flex-direction:column;gap:var(--sp-2h);cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
.fc-node:hover{border-color:var(--ink2);box-shadow:var(--shadow)}
.fc-node.me{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fc-node .fc-more{position:absolute;right:var(--sp-3);bottom:var(--sp-1h);font-size:var(--fs-3xs);color:var(--faint)}
.fc-node:hover .fc-more{color:var(--info)}
.fc-hd{display:flex;align-items:center;gap:var(--sp-2h);min-width:0}
.fc-av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-sm);color:var(--ink2)}
.fc-av.f{background:rgba(180,35,35,.08);border-color:rgba(180,35,35,.25)}
.fc-av.m{background:rgba(31,122,69,.08);border-color:rgba(31,122,69,.25)}
.fc-node.me .fc-av{background:var(--accent-soft);border-color:var(--accent)}
.fc-who{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.fc-who b{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-meta{display:flex;flex-wrap:wrap;gap:var(--sp-1h);align-items:center}
.fc-meta .fc-unv{white-space:normal;max-width:100%}   /* 10-07：未核實 tag（英文好長）—— 自己摺落一行，唔准撐爆卡 */
.fc-rel{font-size:var(--fs-2xs);color:var(--accent-ink);background:var(--accent-soft);border-radius:var(--r-pill);padding:1px 7px;white-space:nowrap}
.fc-age{font-size:var(--fs-2xs);color:var(--muted);font-family:var(--mono);white-space:nowrap}
.fc-link{font-size:var(--fs-2xs);color:var(--ok);white-space:nowrap;text-decoration:none;align-self:flex-start}
.fc-lamps{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}   /* 09-15：加儲蓄／投資兩粒 → 三粒一行、兩行（卡 220–250px 闊，六粒一行塞唔落個數） */
.fc-lamp{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 3px;border-radius:var(--r-sm);background:var(--card2);min-width:0}
.fc-lamp i{display:block;width:100%;height:6px;border-radius:3px}
.fc-lamp .l{font-size:var(--fs-3xs);color:var(--muted);white-space:nowrap}
.fc-lamp b{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:500;white-space:nowrap;min-height:13px}
.fc-lamp.ok b{color:var(--ok)}
.fc-lamp.gap b{color:var(--bad)}
.fc-lamp.part b{color:var(--warn)}
.fc-lnote{margin:4px 0 0;font-size:var(--fs-3xs);line-height:1.35;color:var(--muted)}   /* 09-27：唔計入人壽嘅身故賠償（儲蓄型／同危疾共用）細字 */
.fc-from{font-size:var(--fs-3xs);color:var(--muted);white-space:nowrap}   /* 10-15：家人自己客戶檔嘅單（撳開佢份檔，唔係本記錄） */
.fc-lamp.na b{color:var(--faint)}
/* 09-25 用戶（PW）：冇保障嗰條紅 bar「閃吓閃吓」提醒係商機 —— 慢速淡出淡返（1.6 秒一轉，最淡 .3），唔係硬閃；
   只郁 bar 本身，數字／圖例唔郁；系統開咗「減少動態」就唔郁（無障礙） */
@keyframes fcGapPulse{0%,100%{opacity:1}50%{opacity:.3}}
.fc-lamp.gap i,.fc-lamp.part i{animation:fcGapPulse 1.6s ease-in-out infinite}   /* 09-27 用戶：未充足（黃）同冇（紅）一樣閃 —— 兩樣都係要跟進嘅缺口 */
@media (prefers-reduced-motion:reduce){.fc-lamp.gap i,.fc-lamp.part i{animation:none}}
.fc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.fc-stats .st{display:flex;flex-direction:column;gap:1px;min-width:0;color:var(--ink2);padding:4px 6px;border-radius:var(--r-sm);background:var(--card2)}
.fc-stats .st .lab{display:flex;align-items:center;gap:4px;font-size:var(--fs-3xs);color:var(--muted);white-space:nowrap}
.fc-stats .st svg{flex:none;color:var(--muted)}
.fc-stats .st b{font-family:var(--mono);font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.fc-stats .st.none b{color:var(--faint)}
.fc-bar{width:100%}
.fc-bar .track{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line2)}
.fc-bar i,.fc-legend i{display:inline-block}
.fc-bar i{height:100%}
.fc-bar i.savings,.fc-legend i.savings{background:var(--accent)}
.fc-bar i.annuity,.fc-legend i.annuity{background:var(--accent-ink)}
.fc-bar i.ilas,.fc-legend i.ilas{background:var(--info)}
.fc-bar i.other,.fc-legend i.other{background:var(--muted)}
.fc-legend{display:flex;gap:var(--sp-2h);flex-wrap:wrap;font-size:var(--fs-3xs);color:var(--muted);margin-top:3px}
.fc-legend i{width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:-1px}
/* 10-21 成員詳情彈窗新版（family-chart.js detailHtml；宏利＋萬通共用）：頂總結一句 → 四類保障逐行（來源保單擺埋金額）→ 作為受益人 → 名下資產 */
.fd2-hd{display:flex;gap:var(--sp-2h);align-items:flex-start;padding-bottom:var(--sp-2h);border-bottom:1px solid var(--line2)}
.fd2-who{flex:1;min-width:0}
.fd2-who h3{margin:0;font-size:var(--fs-lg);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--sp-2h)}
.fd2-who h3 .fc-rel{font-size:var(--fs-xs)}
.fd2-who h3 .fc-age{font-size:var(--fs-sm);color:var(--ink2)}
.fd2-dob{font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.fd2-open{font-size:var(--fs-xs);color:var(--accent-ink);white-space:nowrap}
.fd2-say{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-3h);background:var(--card2);border-radius:var(--r-md);font-size:var(--fs-md);line-height:1.6;color:var(--ink)}
.fd2-say b.ok{color:var(--ok)}.fd2-say b.gap{color:var(--bad)}.fd2-say b.part{color:var(--warn)}.fd2-say b.unc{color:var(--muted)}
.fd2-prem{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.fd2-prem b{color:var(--ink);font-variant-numeric:tabular-nums}
.fd2-meetonly{display:none}.cc-mo.meet .fd2-meetonly,.ccy-mo.meet .fd2-meetonly{display:block}
.fd2-sec{margin-top:var(--sp-3h)}
.fd2-sec h4{margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:700;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2)}
.fd2-sec h4 small{font-weight:400;color:var(--muted);font-size:var(--fs-2xs)}
.fd2-cov{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.fd2-row{display:grid;grid-template-columns:88px minmax(0,1fr) 140px;gap:4px var(--sp-3);padding:var(--sp-2h) var(--sp-3h);align-items:center;border-top:1px solid var(--line2)}
.fd2-row:first-child{border-top:0}
.fd2-cat{font-weight:700;font-size:var(--fs-sm);display:flex;align-items:center;gap:var(--sp-2)}
.fd2-cat i{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}
.fd2-row.no{background:var(--bad-soft)}
.fd2-row.no .fd2-cat i{background:none;border:2px solid var(--bad)}
.fd2-row.part .fd2-cat i{background:var(--warn)}
.fd2-row.unc .fd2-cat i{background:var(--faint)}
.fd2-row.oth .fd2-cat{font-weight:500;color:var(--ink2)}
.fd2-pols{display:flex;flex-direction:column;gap:2px;min-width:0}
/* 一張保單＝一粒掣（10-21 用戶：撳得嘅要一眼睇到）：框＋右邊「›」，成粒撳；撳唔到＝淡底冇箭咀。高度至少 44px（iPad 手指） */
.fd2-pols,.fd2-list{display:flex;flex-direction:column;gap:var(--sp-1h);min-width:0}
.fd2-pol{display:flex;align-items:center;gap:var(--sp-2h);min-height:44px;padding:6px var(--sp-2h) 6px var(--sp-3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);text-decoration:none;min-width:0}
a.fd2-pol:hover{border-color:var(--accent);background:var(--card2)}
a.fd2-pol:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fd2-pol.static{background:var(--card2);border-style:dashed}
.fd2-pl{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fd2-nmr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--sp-2)}
.fd2-nm{font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.fd2-sub{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--sp-2h);font-size:var(--fs-2xs)}
.fd2-tag{font-size:var(--fs-3xs);color:var(--muted);background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-pill);padding:0 7px;white-space:nowrap}
.fd2-pv{flex:none;font-size:var(--fs-xs);color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.fd2-pv em{font-style:normal;font-size:var(--fs-2xs);font-weight:600}.fd2-pv em.up{color:var(--ok)}.fd2-pv em.down{color:var(--bad)}
.fd2-pv .unk{color:var(--faint)}
.fd2-chev{flex:none;font-size:20px;line-height:1;color:var(--muted)}
a.fd2-pol:hover .fd2-chev{color:var(--accent-ink)}
.fd2-meta{color:var(--muted);font-variant-numeric:tabular-nums}
.fd2-lnote{margin:2px 0 0;font-size:var(--fs-2xs);color:var(--muted)}
.fd2-amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fd2-amt b{font-size:var(--fs-md)}
.fd2-amt small{display:block;font-size:var(--fs-3xs);font-weight:400;color:var(--muted)}
.fd2-amt b.fd2-no{color:var(--bad);font-weight:500;font-size:var(--fs-sm)}
.fd2-amt b.fd2-part{color:var(--warn);font-size:var(--fs-sm)}
.fd2-amt b.fd2-unc{color:var(--muted);font-weight:500;font-size:var(--fs-sm)}
.fd2-note{margin:var(--sp-1h) 0 0;font-size:var(--fs-2xs);color:var(--muted)}
.fd2-bens{display:flex;flex-direction:column;gap:var(--sp-2h)}
.fd2-bc,.fd2-own{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2h) var(--sp-3h)}
.fd2-tot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px var(--sp-3);align-items:baseline;margin-bottom:var(--sp-2)}
.fd2-if{font-size:var(--fs-sm);color:var(--ink2);margin-bottom:var(--sp-2)}
.fd2-ft{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-2);margin:var(--sp-3h) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--line2)}
/* 呼叫方喺彈窗內容後面接 .cd2-fdfoot（宏利 clients.js／萬通 client-detail-tabs.js）：box 變 flex，「關閉」同編輯／移除一排，移除靠左紅字。
   外殼 display:contents（見客模式 .cd2-private display:none !important 照收埋成排）；唔使改兩個舊檔（家庭舊程式棘輪閘） */
.cc-mo .box:has(> .fd2),.ccy-mo .box:has(> .fd2){width:min(920px,96vw)}   /* 家人彈窗闊度（10-21 由 JS 搬嚟） */
.box:has(> .fd2){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;column-gap:var(--sp-2)}
.box > .fd2{flex:1 0 100%;min-width:0;padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);border-bottom:1px solid var(--line2)}
.box > .mact.fd2-ft{order:3;margin:0;padding:0;border:0}   /* 要贏 .ccy-mo .mact／.cc-mo .mact 嘅 margin-top（10-21 真站量：關閉低咗 6px） */
.box > .fd2 ~ .cd2-fdfoot{display:contents}
.box > .fd2 ~ .cd2-fdfoot > *{order:2}
/* 底部三粒掣（10-21 用戶：「按鈕唔係絕對整齊」）：一律 44px 高、同一條中線；移除靠左紅字（margin-right:auto 推其餘去右），編輯同關閉並排喺右 */
.box > .fd2 ~ .cd2-fdfoot > .btn,.box > .mact.fd2-ft > .btn{min-height:44px;height:44px;margin:0;padding:0 var(--sp-3h);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.box > .fd2 ~ .cd2-fdfoot > [data-hubact^="delPerson:"],.box > .fd2 ~ .cd2-fdfoot > [data-famact^="remove:"]{order:1;margin-right:auto;border:0;background:none;color:var(--bad);padding:0 4px}
@media (max-width:560px){.fd2-row{grid-template-columns:minmax(0,1fr) auto}.fd2-pols{grid-column:1/-1;grid-row:2}.fd2-amt{grid-column:2;grid-row:1}}
.fc-node.me{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fc-hd{display:flex;align-items:baseline;gap:var(--sp-2);min-width:0;padding-bottom:var(--sp-1h);border-bottom:1px solid var(--line2);flex-wrap:wrap}
.fc-hd b{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fc-rel{font-size:var(--fs-2xs);color:var(--accent-ink);background:var(--accent-soft);border-radius:var(--r-pill);padding:1px 7px;white-space:nowrap}
.fc-age{font-size:var(--fs-2xs);color:var(--muted);font-family:var(--mono);white-space:nowrap}
.fc-link{font-size:var(--fs-2xs);color:var(--ok);white-space:nowrap;text-decoration:none}
/* 09-12：投資組合 —— 最新基金價估算 */
.fu-row .live em{font-style:normal;font-family:var(--mono)}
.fu-row .live em.up{color:var(--ok)}
.fu-row .live em.down{color:var(--bad)}
.fu-row .live{display:block;font-size:var(--fs-2xs);color:var(--muted);margin-top:2px}
.fu-row .live b{font-family:var(--mono);color:var(--ink)}
.fu-row .live.div{color:var(--ok)}
.fu-row .live.div b{color:var(--ok)}
/* 09-12：助理清單（要跟進／商機） */
/* 09-14：商機（綠）喺上、跟進（琥珀）喺下，兩組各自一個色框 */
/* 09-12：建議家庭成員 */
.fs-box{margin-top:var(--sp-3);padding:var(--sp-2h) var(--sp-3);border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--card2)}
.fs-box h4{margin:0 0 var(--sp-2)}
.fs-row{display:flex;align-items:center;gap:var(--sp-2h);flex-wrap:wrap;padding:var(--sp-2) 0;border-top:1px solid var(--line2)}
.fs-row .fs-who{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-xs)}
.fs-row .fs-who .dim{font-size:var(--fs-2xs)}
.fs-row .fs-role{display:flex;align-items:center;gap:var(--sp-1h);font-size:var(--fs-2xs);color:var(--muted);flex-wrap:wrap}
.fs-row .fs-role select{border:1px solid var(--line);border-radius:var(--r-sm);height:28px;padding:0 6px;font-size:var(--fs-xs)}
.cc-needs{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-xs);background:var(--card2);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:8px}
.cc-needs.cc-nlist{flex-direction:column;align-items:stretch;gap:4px}   /* 09-29 列晒每次分析 */
.cc-nlist .h{font-size:var(--fs-xs)}
.cc-nrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0;border-top:1px dashed var(--line)}
.cc-nrow .d{min-width:118px;color:var(--ink2)}
.cc-nrow .g{flex:1 1 260px;color:var(--ink2)}
.cc-nrow .tag.on{background:var(--brand-green-deep);color:#fff}
.cc-nlist .btn.link{align-self:flex-start}
.hub-ppl tr.ph td{background:var(--warn-soft)}   /* 09-29 待補名假人 */
.hub-ppl .ph-sel{min-height:28px;font:inherit;font-size:var(--fs-2xs)}

/* ═══════════════════════════════════════════════════════════════════════
   v2（2026-09-07）：列表由「左欄卡片＋右欄詳情」改成「今週要做 ＋ 全寬表格」，詳情整頁顯示。
   設計依據＝agent 打開客戶管理中心嘅動機（錢會走／聽日見客／客戶問嘢／機會到期）。
   舊 .cc-wrap／.cc-side／.cc-row 樣式保留俾回收桶等舊區塊，新區塊一律用下面嘅 class。 */
.cc-view.hidden{display:none}
.cc-drop.strip .sp{flex:1 1 auto}
/* 顯示設定面板 */
/* 匯入條：由側欄大方格收細成一條，成頁都收 drop */
.cc-drop.strip{display:flex;align-items:center;gap:var(--sp-3);text-align:left;padding:var(--sp-2h) var(--sp-3);margin-bottom:var(--sp-3);background:var(--card2)}
.cc-drop.strip .t{font-size:var(--fs-md)}
.cc-drop.strip .s{margin-top:2px}
.cc-drop.strip .h{margin-top:2px}
.cc-drop.strip .btn{pointer-events:none}
/* 今週要做 */
.cc-tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:var(--sp-2h) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);cursor:pointer;font-family:inherit;color:var(--ink);min-width:0}
.cc-tile:hover{background:var(--bg2)}
.cc-tile.on{border-color:var(--brand-deep);box-shadow:inset 0 0 0 1px var(--brand-deep)}
.cc-tile.zero{opacity:.5;cursor:default}
.cc-tile .t{font-size:var(--fs-2xs);color:var(--muted);display:flex;align-items:center;gap:var(--sp-1h)}
.cc-tile .t i{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--line2)}
.cc-tile .n{font-size:var(--fs-2xl);font-weight:700;line-height:1.1;margin:2px 0;font-variant-numeric:tabular-nums}
.cc-tile .n small{font-size:var(--fs-sm);font-weight:400;color:var(--muted);margin-left:2px}
.cc-tile .w{font-size:var(--fs-2xs);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cc-tile.bad .n{color:var(--bad)}.cc-tile.bad .t i{background:var(--bad)}
.cc-tile.warn .n{color:var(--warn)}.cc-tile.warn .t i{background:var(--warn)}
.cc-tile.info .t i{background:var(--info)}
.cc-tile.gold .t i{background:var(--brand-gold)}
.cc-tile.grey .t i{background:var(--faint)}
/* 搜尋＋更多篩選 */
/* 用戶 09-15：篩選掣改實色主色＋漏斗圖示＋開合箭嘴（舊嗰粒淺色細字冇人見到）；生效緊嘅篩選數用金色圓點 */
/* 選取列（v2：唔再貼住 .cc-rows）*/
/* 客戶表格 */
.cc-list2{margin-top:var(--sp-2)}
/* 09-15：客戶名下面一行 —— 同一份檔案入面嘅其他人（受保人／第三者持有人），逐個帶標籤 */
.cc-tag{font-size:var(--fs-2xs);padding:2px var(--sp-1h);border-radius:var(--r-pill);white-space:nowrap}
.cc-tag.bad{background:var(--bad-soft);color:var(--bad)}
.cc-tag.warn{background:var(--warn-soft);color:var(--warn)}
.cc-tag.ok{background:var(--ok-soft);color:var(--ok)}
.cc-tag.info{background:var(--info-soft);color:var(--info)}
.cc-tag.gold{background:var(--accent-soft);color:var(--brand-gold-deep)}
.cc-tag.grey{background:var(--neutral-soft);color:var(--muted)}
   /* 09-27：未充足 ≠ 冇 */
/* 詳情視圖：頂欄（返回／上一位／下一位）*/
/* 最急一件事提示條 */
/* 重要日子 */
/* 保單表：現值格（粗體退保價值＋細字拆解）*/
.tbl td.cv b{display:block;font-weight:600}
.tbl td.cv .sub{display:block;font-size:var(--fs-2xs);color:var(--ink2);white-space:nowrap}
/* 診斷紀錄（用戶 2026-09-08 要求）—— 平時摺埋，出事時自動展開。
   刻意做到唔使開 console 都攞得到：手機上開唔到 console。 */
.ccy-diag { margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); }
.ccy-diag > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; color: var(--dim); }
.ccy-diag > pre { margin: 0; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; background: rgba(0,0,0,.03); }
.ccy-diag > .btn { margin: 8px 12px 12px; }
.ccy-err-sub { font-size: 13px; color: var(--dim); margin: 4px 0 10px; }

/* 手動保單嘅附加保障（09-11）：一行一項，名／類型／保額／每期保費 ＋ 刪掣；醫療多一行兩個選單 */
.cc-mo .mp-rid-wrap{display:flex;flex-direction:column;gap:4px}
/* 09-11：rider 改用同主計劃一樣嘅 .f／.f2（label 喺上），唔再逼窄成一行 grid。
   一項一張細卡，睇得出邊幾格屬同一項附加保障。 */
.cc-mo .mp-rid{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3);margin-bottom:var(--sp-3);background:var(--card)}
.cc-mo .mp-rid-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}
.cc-mo .mp-rid-head b{font-size:var(--fs-xs);color:var(--ink2)}

.cc-mo .mp-rid .rx{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);cursor:pointer;padding:2px 10px;color:var(--muted);font-size:var(--fs-2xs)}
.cc-mo .mp-rid .rx:hover{color:var(--bad);border-color:var(--bad)}

/* 09-11：手動保單表格嘅「公司 → 類型 → 計劃名稱」三層 ＋ 受益人列 */
.cc-mo .mp-plan{position:relative}
.cc-mo .mp-sug{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.cc-mo .mp-sug .mp-sug-h{font-size:var(--fs-2xs);color:var(--muted);font-weight:700;margin:2px 0}
.cc-mo .mp-sug .mp-sug-i{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:6px 10px;cursor:pointer;font:inherit;font-size:var(--fs-2xs);color:var(--ink)}
.cc-mo .mp-sug .mp-sug-i:hover{border-color:var(--ink2);background:var(--bg2)}
/* 09-11：未打字嗰陣個框係「清單」（可以捲），打咗字先變「最接近」——  兩個狀態同一個框。 */
.cc-mo .mp-sug.browse{max-height:220px;overflow-y:auto}
.cc-mo .mp-sug .mp-sug-f{font-size:var(--fs-2xs);padding:4px 2px 0}
/* 附加保障「詳細」（生效日期／保障期）—— 唔塞入同一行，展開先出 */
.cc-mo .mp-bnf-box{display:flex;flex-direction:column;gap:4px}
.cc-mo .mp-bnf-box .bh{font-size:var(--fs-2xs);color:var(--muted);font-weight:700}
.cc-mo .mp-bnf{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr) 28px;gap:6px;align-items:center;margin-bottom:6px}
.cc-mo .mp-bnf.bnf-act{grid-template-columns:auto 1fr}
.cc-mo .mp-bnf .rx{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);cursor:pointer;height:34px;color:var(--muted);font-size:16px;line-height:1}
.cc-mo .mp-bnf .rx:hover{color:var(--bad);border-color:var(--bad)}
.cc-mo .mp-bnf .bs{font-size:var(--fs-2xs);color:var(--muted)}
.cc-mo .mp-bnf .bs.bad{color:var(--bad);font-weight:700}
.cc-mo .mp-rid select.rg.bad{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)}   /* 10-20：附加保障未揀類型 */
@media (max-width: 640px){ .cc-mo .mp-bnf{grid-template-columns:1fr 1fr} .cc-mo .mp-bnf .bn{grid-column:1 / -1} .cc-mo .mp-bnf .rx{justify-self:end;width:34px} }

/* 手動保單分段（09-11 用戶：主計劃同附加保障之間冇明顯分隔）。
   唔用粗線／底色，用一條幼線加一個標題就夠 —— 表單本身已經好長，重手嘅分隔會令佢更散。 */
.cc-mo .mp-sec{border-top:1px solid var(--line);margin:var(--sp-4) 0 var(--sp-3);padding-top:var(--sp-3)}
.cc-mo .mp-sec.first{border-top:0;margin-top:0;padding-top:0}
.cc-mo .mp-sec h4{margin:0 0 2px;font-size:var(--fs-sm);color:var(--ink)}
.cc-mo .mp-sec small{display:block;font-size:var(--fs-2xs)}
/* 醫療計劃五層級聯（公司→計劃名稱→計價貨幣→計劃類型→保障類別）—— 主計劃同附加保障共用 */
.cc-mo .mp-med{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cc-mo .mp-med-f{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-2xs);color:var(--muted);min-width:0}
.cc-mo .mp-med-f .mo{margin-top:2px}
.cc-mo .mp-med-n{margin-top:4px}
@media (max-width: 640px){ .cc-mo .mp-med{grid-template-columns:1fr} }
/* 附加保障入面嗰個級聯要佔成行（rider 一行係 grid） */
.cc-mo .mp-rid .rmedpick{grid-column:1 / -1}
.cc-mo .mp-rid .rmedpick:empty{display:none}
/* rider 嘅計劃建議：同主計劃嗰個 .mp-sug 同款，但要佔成行（rider 一行係 grid） */

.cc-mo .mp-rid .rsug:empty{display:none}

/* 醫療計劃建議：右邊標「非可扣稅自願醫保」—— 唔標嘅話顧問會以為全部都可扣稅（09-11 用戶） */
/* 「由產品目錄帶入」嘅標示 —— 要分得出邊啲係系統填、邊啲係用戶自己揀（09-12） */
/* 09-16：「由匯入檔帶入」嘅欄位標記（富衛 CSV）—— 同 mp-med-src 一樣係細字標籤，唔搶眼但睇得到。
   本來喺 yf-policy-form.js 嘅 inline CSS（.yfpol-form .cat）；表格合併之後規則一律入呢度。 */
.cc-mo .cat{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--r-sm);background:var(--info-soft,var(--bg2));color:var(--info,var(--ink2));font-size:var(--fs-3xs);font-weight:700;font-style:normal;vertical-align:middle}

/* ── 09-16：萬通手動保單專有嘅兩樣嘢（同宏利同一張表，所以規則入呢度，唔准再開第二個彈窗殼）──
   ① 逐年退保價值列（年齡／金額／刪）—— 同受益人列（.mp-bnf）同一種視覺語言
   ② 多行文字欄（不保事項／顧問備注）—— .cc-mo 本來冇 textarea 嘅闊度規則 */
.cc-mo .yp-surr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 28px;gap:6px;align-items:center;margin-bottom:6px}
.cc-mo .yp-surr .rx{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);cursor:pointer;height:34px;color:var(--muted);font-size:16px;line-height:1}
.cc-mo .yp-surr .rx:hover{color:var(--bad);border-color:var(--bad)}
.cc-mo textarea{width:100%;resize:vertical;line-height:1.6}
@media (max-width: 640px){ .cc-mo .yp-surr{grid-template-columns:1fr 1fr} .cc-mo .yp-surr .sv{grid-column:1 / -1} .cc-mo .yp-surr .rx{justify-self:end;width:34px} }
/* 09-16 Trinity WP-A：自訂欄位行（.yp-cf 借用 .yp-surr 格式）；保單目標多選用現成 .pill 做 checkbox 標籤，唔另起爐灶 */
@media (max-width: 640px){ .cc-mo .yp-cf .cv{grid-column:1 / -1} }
.cc-mo .yp-purp{display:flex;flex-wrap:wrap;gap:var(--sp-1h)}
.cc-mo .yp-purp .pill{cursor:pointer;background:var(--neutral-soft);color:var(--ink2);font-weight:500}
.cc-mo .yp-purp .pill input{margin:0 4px 0 0;vertical-align:middle}

/* ── 09-12 估算現值入資產現值格／關係圖／成員詳情（同投資組合同一個比例）── */
.fc-stats .st .lab .est,.fc-lamp .l .est,.fc-cov .l .est{display:inline-block;margin-left:4px;padding:0 4px;border-radius:3px;font-size:10px;line-height:15px;font-weight:700;background:var(--accent-soft);color:var(--brand-gold-deep)}

/* 09-14：家庭關係圖「年繳」下面出繳費方式＋每期（用戶：要知呢張單本身係年繳定月繳） */

/* 09-14：保單一覽「繳費方式」下面出每期實付（月繳 HK$527） */
/* 09-14：三格 KPI 入 hero（要跟嘅事／今年應繳／資產現值）—— 深底上嘅半透明磚，撳落去照樣出明細 */
.cc-hero-kpi{flex:1 1 100%;margin-top:var(--sp-2)}
.cc-hero-kpi .cc-drill{margin-top:var(--sp-2h);color:var(--ink)}

/* 用戶 09-15：列表頁 hero（同詳情頁 cc-head 同一套）；「要即刻跟嘅客」三格搬入 hero，改半透明白底 */
.cc-lhero{margin-bottom:var(--sp-3)}
.cc-lhero h1{font-size:var(--fs-2xl);font-weight:700;line-height:1.2;margin:0}
.cc-lhero .cc-hero-kpi .hl{font-size:var(--fs-xs);font-weight:700;margin-bottom:var(--sp-1h);display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.cc-lhero .cc-hero-kpi .hl span{font-weight:400;font-size:var(--fs-2xs);opacity:.72}
.cc-lhero .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-2)}
.cc-lhero .cc-tile{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--primary-ink)}
.cc-lhero .cc-tile:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.cc-lhero .cc-tile.on{background:rgba(255,255,255,.16);border-color:var(--brand-gold);box-shadow:inset 0 0 0 1px var(--brand-gold)}
.cc-lhero .cc-tile.zero{opacity:.45}
.cc-lhero .cc-tile .t,.cc-lhero .cc-tile .w,.cc-lhero .cc-tile .n small{color:var(--primary-ink);opacity:.78}
.cc-lhero .cc-tile.bad .n{color:#FF9B9B}.cc-lhero .cc-tile.warn .n{color:var(--brand-gold)}
@media (max-width:760px){.cc-lhero h1{font-size:var(--fs-xl)}.cc-lhero .tiles{grid-template-columns:repeat(2,1fr)}}

/* 09-14：hero 四塊磚（商機／要跟進／今年應繳／資產現值） */
/* 09-14：撳 hero「商機／要跟進」磚 → 助理清單對應組閃兩下（唔用 emoji、唔用彈窗，靠動畫引視線） */
@keyframes ai-flash{0%,100%{box-shadow:0 0 0 0 transparent}25%,75%{box-shadow:0 0 0 4px var(--accent-soft),0 0 0 6px var(--accent)}50%{box-shadow:0 0 0 0 transparent}}
/* ══ 客戶管理中心重新設計（2026-10-03 樣板 v2，用戶已批）══════════════════════
   範圍：只限宏利 hub 簿客戶中心（clients.js —— PW／JS／SIMA）。全部規則掛喺 .cx（clients.js shell() 先加落 #ccBody），
   或者 cx- 開頭嘅浮層（⋯ 選單／篩選面板／拖放覆蓋，掛喺 body）—— 萬通兩隊（clients-yf.js）、Trinity 三欄、理財需要分析頁（都載呢個檔）一個 byte 都唔中。
   闊度一律睇 .cx 自己（@container ccx），唔睇視窗；字 ≥12px、正文 ≥14px、撳得嘅嘢 ≥44px；字級全部經 token（跟「文字大細」縮放）。 */
.cx{container-type:inline-size;container-name:ccx ccybody;   /* ccybody：10-14 宏利新列表／詳細頁共用萬通骨架（client-list-v2.css／client-detail-tabs.css 嘅 @container ccybody）*/
  /* 客戶中心入面舊零件（投連表、計劃明細、資料待補…）仲用緊 10／11px token → 喺呢個範圍一律升到 12px（跟「文字大細」縮放） */
  --fs-3xs:var(--fs-xs);--fs-2xs:var(--fs-xs);
  --cx-gold-hover:color-mix(in srgb,var(--accent) 86%,#fff);
  --cx-hl:color-mix(in srgb,var(--bad) 9%,var(--card));--cx-hlx:color-mix(in srgb,var(--bad) 4%,var(--card));
  --cx-hlf:color-mix(in srgb,var(--brand-gold) 16%,var(--card));
  --cx-c-age:72px;--cx-c-cov:212px;--cx-c-n:76px;--cx-c-due:150px;--cx-c-go:36px;--cx-c-ck:52px;
  --cx-c-ins:132px;--cx-c-amt:136px;--cx-c-pr:132px;--cx-c-val:128px;--cx-c-st:100px}
html[data-lang="en"] .cx{--cx-c-cov:240px;--cx-c-st:116px;--cx-c-pr:140px}
.cx .cx-i,.cx-float .cx-i,.cx-dropov .cx-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx .cx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx .btn{min-height:44px;font-size:var(--fs-sm);padding-top:0;padding-bottom:0}
.cx .btn.sm{min-height:44px;font-size:var(--fs-sm);padding:0 var(--sp-3)}
.cx .seg button{min-height:44px;font-size:var(--fs-sm);display:inline-flex;align-items:center}
.cx .seg button .n{font-family:var(--mono);font-weight:500;font-size:var(--fs-xs);margin-left:5px;opacity:.75}
.cx .pill{font-size:var(--fs-xs)}
.cx .dim{color:var(--muted)}
.cx .mono{font-family:var(--mono)}
.cx .cx-note{margin:var(--sp-1h) 0;font-size:var(--fs-md);color:var(--ink2);line-height:1.55}
.cx .cx-clr{border:0;background:transparent;color:var(--link);font-weight:700;font-size:var(--fs-sm);min-height:44px;cursor:pointer;padding:0 var(--sp-1h)}
/* 深色 hero 上嘅掣：金（主）／線（次）／圓形圖示 */
.cx .btn.cx-gold,.cx-dropov .btn.cx-gold{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.cx .btn.cx-gold:hover,.cx-dropov .btn.cx-gold:hover{background:var(--cx-gold-hover);border-color:var(--cx-gold-hover);color:var(--accent-ink)}
.cx .hero .btn.cx-line,.cx-dropov .btn.cx-line{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.cx .hero .btn.cx-line:hover,.cx-dropov .btn.cx-line:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);color:#fff}
.cx .hero .btn.cx-icon{width:44px;padding:0}
.cx .btn.cx-danger{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:700}
.cx .btn.cx-danger:hover{background:color-mix(in srgb,var(--bad) 85%,#000);color:#fff}
.cx .btn.cx-danger:disabled{opacity:.42;cursor:not-allowed}
.cx .hero{padding:var(--sp-5) var(--sp-5)}
.cx .hero h1{margin:0;font-size:var(--fs-2xl);line-height:1.2;color:#fff}
.cx .hero .meta{color:rgba(255,255,255,.72);font-size:var(--fs-sm);margin-top:var(--sp-1)}
.cx .hero .meta b{font-family:var(--mono);font-weight:500;color:#fff}

/* ── 列表 ── */
.cx .cx-lhero{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.cx .cx-lhero .t{flex:1;min-width:0}
.cx .cx-lhero .acts{display:flex;align-items:center;gap:var(--sp-2h);flex:none}
.cx .cx-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-2h);margin-top:var(--sp-3h)}
.cx .cx-tile{position:relative;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);padding:var(--sp-2h) var(--sp-3) var(--sp-2h) var(--sp-3h);cursor:pointer;min-height:92px;box-shadow:var(--shadow);min-width:0;overflow:hidden;font:inherit;color:inherit;transition:border-color .14s,background .14s,opacity .14s}
.cx .cx-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.cx .cx-tile.bad::before{background:var(--bad)}
.cx .cx-tile.warn::before{background:var(--warn)}
.cx .cx-tile.gold::before{background:var(--brand-gold)}
.cx .cx-tile.info::before{background:var(--info)}
.cx .cx-tile:hover{border-color:var(--ink2)}
.cx .cx-tile.on{border-color:var(--brand-gold-deep);background:var(--accent-soft);box-shadow:0 0 0 1.5px var(--brand-gold-deep) inset}
.cx .cx-tile.zero{opacity:.38;cursor:not-allowed;box-shadow:none}
.cx .cx-tile.zero:hover{border-color:var(--line)}
.cx .cx-tile .l{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx .cx-tile .v{display:flex;align-items:baseline;gap:4px;margin-top:2px}
.cx .cx-tile .v b{font-family:var(--mono);font-size:var(--fs-3xl);font-weight:500;line-height:1.05;color:var(--ink)}
.cx .cx-tile .v span{font-size:var(--fs-sm);color:var(--muted)}
.cx .cx-tile .n{display:block;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cx .cx-tile .x{position:absolute;right:var(--sp-2);top:var(--sp-2);font-size:var(--fs-xs);font-weight:700;color:var(--brand-gold-deep);display:none}
.cx .cx-tile.on .x{display:block}
.cx .cx-selbar{display:flex;align-items:center;gap:var(--sp-2h);flex-wrap:wrap;background:var(--primary);color:#fff;border-radius:var(--r-md);padding:var(--sp-1h) var(--sp-2) var(--sp-1h) var(--sp-4);margin:var(--sp-3h) 0 0}
.cx .cx-selbar b{font-size:var(--fs-md)}
.cx .cx-selbar .sp{flex:1}
.cx .cx-selbar .btn{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.cx .cx-selbar .btn:hover{background:rgba(255,255,255,.12);color:#fff}
.cx .cx-sbar{display:flex;align-items:center;gap:var(--sp-2h);margin:var(--sp-3h) 0 var(--sp-2h);flex-wrap:wrap}
.cx .cx-sbox{flex:1 1 280px;max-width:420px}
.cx .cx-sbox input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--sp-3) 0 38px;font-size:var(--fs-md);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236E7873' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") no-repeat 12px center;color:var(--ink)}
.cx .cx-fbtn{display:inline-flex;align-items:center;gap:var(--sp-1h);min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:0 var(--sp-3h);font-weight:700;font-size:var(--fs-md);cursor:pointer;color:var(--ink)}
.cx .cx-fbtn:hover{border-color:var(--ink2)}
.cx .cx-fbtn.on{border-color:var(--brand-gold-deep);background:var(--accent-soft)}
.cx .cx-fbtn .c{font-family:var(--mono);font-size:var(--fs-xs);background:var(--primary);color:#fff;border-radius:var(--r-pill);padding:0 7px}
.cx .cx-fchip{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);background:var(--card2);border-radius:var(--r-pill);padding:0 0 0 var(--sp-3);min-height:44px;font-size:var(--fs-sm);font-weight:600}
.cx .cx-fchip button{border:0;background:transparent;width:40px;height:44px;border-radius:50%;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center}
.cx .cx-fchip button:hover{color:var(--bad)}
.cx .cx-cnt{margin-left:auto;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.cx .cx-cnt b{font-family:var(--mono);color:var(--ink)}
/* 表卡：唔包 overflow 容器（表頭 sticky 要貼住頁面捲動） */
.cx .cx-tblcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
.cx .cx-tblcard>table{width:100%;border-collapse:separate;border-spacing:0}
.cx .cx-tblcard thead th{position:sticky;top:var(--topbar-h,0px);z-index:3;background:var(--card2);height:44px;font-size:var(--fs-xs);box-shadow:inset 0 -1px 0 var(--line)}
.cx .cx-tblcard thead tr:first-child th:first-child{border-top-left-radius:var(--r-md)}
.cx .cx-tblcard thead tr:first-child th:last-child{border-top-right-radius:var(--r-md)}
.cx .cx-tblcard tbody tr:last-child td{border-bottom:0}
.cx .tbl th.sortable{cursor:pointer;user-select:none}
.cx .tbl th.sorted{color:var(--brand-green-deep)}
.cx .tbl th.sorted::after{content:" ▾";font-size:var(--fs-xs)}
.cx .tbl th.sorted.asc::after{content:" ▴"}
.cx .cx-ctbl{table-layout:fixed}
.cx .cx-ctbl col.c-ck{width:var(--cx-c-ck)}
.cx .cx-ctbl col.c-age{width:var(--cx-c-age)}
.cx .cx-ctbl col.c-cov{width:var(--cx-c-cov)}
.cx .cx-ctbl col.c-n{width:var(--cx-c-n)}
.cx .cx-ctbl col.c-due{width:var(--cx-c-due)}
.cx .cx-ctbl col.c-go{width:var(--cx-c-go)}
.cx .cx-ctbl th,.cx .cx-ctbl td{padding:var(--sp-2) var(--sp-2h)}
.cx .cx-ctbl td{height:64px;font-size:var(--fs-md)}
.cx .cx-ctbl td.num{font-family:var(--mono)}
.cx .cx-ctbl td.nm{white-space:normal}
.cx .cx-ctbl tr.link{cursor:pointer}
.cx .cx-ctbl tr.link:hover td{background:var(--accent-soft)}
.cx .cx-ctbl tr.picked td{background:var(--accent-soft)}
.cx .cx-ctbl td.go{color:var(--faint);padding:0 var(--sp-2) 0 0;text-align:right}
.cx .cx-ctbl tr.link:hover td.go{color:var(--brand-green-deep)}
.cx .cx-ctbl td.ck,.cx .cx-ctbl th.ck{padding:0}
.cx .cx-ck{display:flex;align-items:center;justify-content:center;width:100%;min-height:62px;cursor:pointer}
.cx .cx-ck i{width:22px;height:22px;border:1.5px solid var(--faint);border-radius:var(--r-sm);background:var(--card);display:flex;align-items:center;justify-content:center}
.cx .cx-ck.on i{background:var(--primary);border-color:var(--primary)}
.cx .cx-ck.on i::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.cx .cx-who{display:flex;align-items:flex-start;gap:var(--sp-2);min-width:0}
.cx .cx-sd{width:10px;height:10px;border-radius:50%;flex:none;margin-top:6px;background:transparent}
.cx .cx-sd.r{background:var(--bad)}
.cx .cx-sd.g{background:var(--brand-gold)}
.cx .cx-who .tx{min-width:0}
.cx .cx-who .r1{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.cx .cx-who .r1 b{font-size:var(--fs-md);line-height:1.3}
.cx .cx-sub{font-size:var(--fs-xs);color:var(--muted);line-height:1.35;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx .pill.cx-own{background:var(--info-soft);color:var(--info)}
.cx .pill.cx-ins{background:var(--ok-soft);color:var(--ok)}
.cx .pill.cx-bd{background:var(--accent-soft);color:var(--brand-gold-deep)}
.cx .hero .pill.cx-bd{background:rgba(255,255,255,.14);color:#F3D9A8}
.cx .cx-lps{display:inline-flex;gap:4px}
.cx .cx-lp,.cx-fpan .cx-lp{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 4px;border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:700;line-height:1}
.cx .cx-lp.ok,.cx-fpan .cx-lp.ok{background:var(--ok-soft);color:var(--ok)}
.cx .cx-lp.gap,.cx-fpan .cx-lp.gap{background:var(--bad-soft);color:var(--bad)}
.cx .cx-lp.part{background:var(--warn-soft);color:var(--warn)}
.cx-fpan .cx-lp.na{background:var(--neutral-soft);color:var(--faint)}
.cx .cx-key{font-weight:500;color:var(--muted);margin-left:var(--sp-1h);white-space:nowrap}
.cx .cx-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 3px 0 var(--sp-1h)}
.cx .cx-key i.ok{background:var(--ok)}
.cx .cx-key i.gap{background:var(--bad)}
.cx .cx-due b{display:block;font-family:var(--mono);font-weight:500;font-size:var(--fs-md)}
.cx .cx-due small{display:block;font-size:var(--fs-xs);color:var(--muted)}
.cx .cx-due.over small{color:var(--bad);font-weight:700}
.cx .cx-due.soon small{color:var(--warn);font-weight:700}
.cx .cx-norow td{height:120px;text-align:center;color:var(--muted);white-space:normal}
.cx .cx-emptybox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
/* 底部刪除盤（選擇多位先出）：貼住視窗底（sticky） */
.cx .cx-dtray{position:sticky;bottom:var(--sp-3h);z-index:6;display:none;align-items:center;gap:var(--sp-2h);margin-top:var(--sp-3h);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 10px 30px rgba(10,22,40,.18);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4)}
.cx .cx-dtray.on{display:flex}
.cx .cx-dtray .msg{flex:1;font-size:var(--fs-md);color:var(--ink2)}
.cx .cx-dtray .msg b{font-family:var(--mono)}

/* ── 浮層：⋯ 選單／篩選面板（掛 body） ── */
.cx-float{position:absolute;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(10,22,40,.24)}
.cx-menu{width:min(260px,calc(100vw - 32px));padding:var(--sp-1h)}
.cx-menu button{display:flex;align-items:center;gap:var(--sp-2h);width:100%;min-height:48px;border:0;background:transparent;border-radius:var(--r-sm);padding:0 var(--sp-3);font-size:var(--fs-md);font-weight:600;cursor:pointer;text-align:left;color:var(--ink)}
.cx-menu button:hover{background:var(--bg2)}
.cx-menu button small{margin-left:auto;font-size:var(--fs-xs);color:var(--muted);font-weight:500}
.cx-menu .sep{height:1px;background:var(--line2);margin:var(--sp-1) var(--sp-1h)}
.cx-fpan{width:min(640px,calc(100vw - 32px));padding:var(--sp-1h) var(--sp-4) var(--sp-3h);max-height:calc(100vh - 140px);overflow:auto}
.cx-fpan h4{margin:var(--sp-3h) 0 var(--sp-2);font-size:var(--fs-sm);color:var(--ink2)}
.cx-tg{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.cx-tg button{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);min-height:44px;padding:0 var(--sp-3h);font-size:var(--fs-md);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-1h);color:var(--ink)}
.cx-tg button:hover{border-color:var(--ink2)}
.cx-tg button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cx-tg button .c{font-size:var(--fs-xs);color:var(--muted);font-weight:500}
.cx-tg button.gapb{border-style:dashed}
.cx-tg button.gapb.on{background:var(--bad);border-color:var(--bad);color:#fff;border-style:solid}
.cx-tg button.gapb.on .c{color:#fff}
.cx-cvg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-2h)}
.cx-cvg .cvr{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.cx-cvg .cvr b{font-size:var(--fs-md);white-space:nowrap}
.cx-cvg .cvr b small{font-size:var(--fs-xs);font-weight:700;color:var(--bad);margin-left:4px}
.cx-cvg .seg{margin-left:auto}
.cx-cvg .seg button{min-height:44px;font-size:var(--fs-sm);padding:0 var(--sp-3)}
.cx-cvs button.on[data-v="has"]{background:var(--ok);color:#fff}
.cx-cvs button.on[data-v="no"]{background:var(--bad);color:#fff}
.cx-fpan .cx-fp2{display:grid;grid-template-columns:auto 1fr;gap:0 var(--sp-5)}
.cx-fpan .ft{display:flex;align-items:center;gap:var(--sp-2h);margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line2)}
.cx-fpan .ft .sp{flex:1}
.cx-fpan .cx-clr{border:0;background:transparent;color:var(--link);font-weight:700;font-size:var(--fs-sm);min-height:44px;cursor:pointer;padding:0 var(--sp-1h)}
.cx-fpan .btn{min-height:44px}
/* 10-31 手機 v2 底片統一：手機篩選面板擺入 shell 共用 .th-sheet 殼（clients.js openSheetFloat；位置／動畫／z 由 shell.css 管）——
   面板自己唔再定闊／高／捲（由 .box 管），兩欄分組／保障格收做一欄 */
html[data-dev="phone"] .cx-fsheet .cx-fpan{width:auto;max-height:none;overflow:visible;padding:0}
html[data-dev="phone"] .cx-fsheet .cx-fpan .cx-fp2,html[data-dev="phone"] .cx-fsheet .cx-cvg{grid-template-columns:1fr}
html[data-dev="phone"] .cx-fsheet .cx-clr{white-space:nowrap}
html[data-dev="phone"] .cx-fsheet .grab{width:36px;height:5px;border-radius:3px;background:var(--line);margin:0 auto var(--sp-2)}
@container ccx (max-width:620px){.cx .cx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 拖放覆蓋（全頁） */
.cx-dropov{position:fixed;inset:0;z-index:80;background:rgba(10,22,40,.84);display:none;align-items:center;justify-content:center;padding:var(--sp-4)}
.cx-dropov.on{display:flex}
.cx-dropov .dbox{width:min(640px,100%);border:3px dashed rgba(255,255,255,.8);border-radius:22px;padding:var(--sp-7) var(--sp-6) var(--sp-6);text-align:center;color:#fff;background:var(--primary)}
.cx-dropov .ic{width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-3h)}
.cx-dropov .ic .cx-i{width:36px;height:36px;stroke-width:2.2}
.cx-dropov h2{margin:0;font-size:var(--fs-2xl)}
.cx-dropov p{margin:var(--sp-2) 0 0;color:rgba(255,255,255,.85);font-size:var(--fs-md);line-height:1.55}
.cx-dropov p.types{font-size:var(--fs-sm);color:rgba(255,255,255,.7)}
.cx-dropov .b{display:flex;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-5)}
.cx-dropov .btn{min-height:44px;font-size:var(--fs-md)}

/* ── 詳細頁 ── */
.cx .cx-dtop{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2h);margin:0 0 var(--sp-2);flex-wrap:wrap}
.cx .cx-back{display:inline-flex;align-items:center;gap:4px;color:var(--link);background:none;border:0;padding:0 var(--sp-2) 0 0;cursor:pointer;font-size:var(--fs-md);min-height:44px;font-weight:600}
.cx .cx-dtop .nav{display:flex;gap:var(--sp-2);align-items:center}
.cx-v2fail{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3);padding:var(--sp-2h) var(--sp-3);border:1px solid var(--bad);border-radius:var(--r-md);background:var(--bad-soft,var(--card));color:var(--ink);font-size:var(--fs-sm)}   /* 10-29：新版客戶頁冇起到 → 講原因＋重新載入（唔靜默退舊版） */
.cx .cx-dtop .pos{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono)}
.cx .cc-main{gap:0}
.cx .cc-back{min-height:44px}
.cx .cx-dhero{padding:var(--sp-4) var(--sp-5)}
.cx .cx-dhero .dh1{display:flex;align-items:flex-start;gap:var(--sp-4)}
.cx .cx-dhero .dh1 .t{flex:1;min-width:0}
.cx .cx-dhero h1{font-size:var(--fs-hero);letter-spacing:.01em}
.cx .cx-dhero .meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:var(--sp-1h)}
.cx .cx-dhero .meta>span+span::before{content:"·";margin:0 var(--sp-2);opacity:.6}
.cx .cx-dhero .ct{display:flex;gap:var(--sp-2h);flex:none}
.cx .cx-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff}
.cx .cx-ic:hover{background:rgba(255,255,255,.18)}
.cx .cx-ic.wa{background:#1FA855;border-color:#1FA855}
.cx .cx-ic.wa:hover{background:#178E47}
.cx .cx-dhero .dh2{display:flex;align-items:center;gap:var(--sp-2h);margin-top:var(--sp-3h);flex-wrap:wrap}
.cx .cx-dhero .dh2 .sp{flex:1}
.cx .cx-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:var(--sp-3h) var(--sp-4) var(--sp-2h);min-width:0}
.cx .cx-box h2{margin:0 0 var(--sp-1h);font-size:var(--fs-lg);display:flex;align-items:baseline;gap:var(--sp-2)}
.cx .cx-box h2 small,.cx .cx-box h3 small{font-size:var(--fs-xs);font-weight:400;color:var(--muted)}
.cx .cx-box h3{margin:0 0 var(--sp-2);font-size:var(--fs-md);display:flex;align-items:center;gap:var(--sp-2)}
.cx .cx-box h3 .sp{flex:1}
.cx .cx-first{display:grid;grid-template-columns:55fr 45fr;gap:var(--sp-3h);margin-top:var(--sp-3h);align-items:stretch}
/* 要做 */
.cx .cx-todolist{list-style:none;margin:0;padding:0}
.cx .cx-todoit{display:flex;align-items:center;gap:var(--sp-2h);min-height:56px;border-top:1px solid var(--line2);padding:var(--sp-1h) 0}
.cx .cx-todoit:first-child{border-top:0}
.cx .cx-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--faint)}
.cx .cx-dot.high{background:var(--bad)}
.cx .cx-dot.mid{background:var(--brand-gold)}
.cx .cx-todoit .tx{flex:1;min-width:0}
.cx .cx-todoit .tx b{display:block;font-size:var(--fs-md);line-height:1.35}
.cx .cx-todoit .tx span{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.4}
.cx .cx-todoit .btn{flex:none}
.cx .cx-todolist li.more{display:flex;justify-content:center;min-height:44px;border-top:1px solid var(--line2)}
.cx .cx-morebtn{border:0;background:transparent;color:var(--link);font-weight:700;font-size:var(--fs-md);min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.cx .cx-morebtn[aria-expanded="true"] .cx-i{transform:rotate(180deg)}
/* 上次傾過 */
.cx .cx-talkrow{display:flex;align-items:center;gap:var(--sp-2h);min-height:60px;border-top:1px solid var(--line2);padding:var(--sp-1h) 0}
.cx .cx-talk>div:first-of-type .cx-talkrow{border-top:0}
.cx .cx-talkrow .tx{flex:1;min-width:0}
.cx .cx-talkrow .tx small{display:block;font-size:var(--fs-xs);color:var(--muted)}
.cx .cx-talkrow .tx b{display:block;font-size:var(--fs-md);line-height:1.35;font-weight:500}
.cx .cx-talkrow .tx b.none{color:var(--muted);font-weight:400}
.cx .cx-talkrow .tx span{display:block;font-size:var(--fs-sm);color:var(--ink2);line-height:1.4}
.cx .cx-nall{padding:0 0 var(--sp-1h)}
.cx .cx-link{border:0;background:transparent;color:var(--link);font-weight:700;font-size:var(--fs-sm);min-height:44px;cursor:pointer;padding:0}
.cx .cx-talk .cc-nrow{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-1h) 0;border-top:1px dashed var(--line2);font-size:var(--fs-xs)}
.cx .cx-talk .cc-nrow .g{flex:1;min-width:0;color:var(--ink2)}
.cx .cx-talk .cc-nrow .tag{font-size:var(--fs-xs);border-radius:var(--r-pill);padding:0 var(--sp-2);background:var(--neutral-soft)}
.cx .cx-talk .cc-nrow .tag.on{background:var(--ok-soft);color:var(--ok)}
.cx .cx-talk #ccMpf:empty{display:none}
.cx .cx-talk #ccMpf .cc-needs{border-top:1px solid var(--line2);padding:var(--sp-2) 0;font-size:var(--fs-sm)}
.cx .cx-src{font-size:var(--fs-sm);color:var(--ink2);border-top:1px solid var(--line2);padding:var(--sp-2) 0;min-height:44px;display:flex;align-items:center;gap:var(--sp-1h)}
.cx .cx-src small{font-size:var(--fs-xs);color:var(--muted)}
.cx .cx-memo{border-top:1px solid var(--line2);padding-top:var(--sp-2)}
.cx .cx-memo .hd{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-xs);color:var(--muted);gap:var(--sp-2)}
.cx .cx-memo .saved{color:var(--ok);font-weight:700;opacity:0;transition:opacity .2s;display:inline-flex;align-items:center;gap:4px}
.cx .cx-memo .saved .cx-i{width:14px;height:14px}
.cx .cx-memo .saved.on{opacity:1}
.cx .cx-memo .txt{font-size:var(--fs-md);color:var(--ink2);line-height:1.5;white-space:pre-wrap;cursor:text;min-height:66px;max-height:66px;overflow:hidden;border-radius:var(--r-sm);padding:2px 4px;margin:2px -4px 4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.cx .cx-memo .txt.ph{color:var(--muted)}
.cx .cx-memo .txt:hover,.cx .cx-memo .txt:focus-visible{background:var(--bg2);outline:none}
.cx .cx-memo textarea{width:100%;min-height:96px;border:1px solid var(--brand-gold-deep);border-radius:var(--r-sm);padding:var(--sp-1h) var(--sp-2);font:inherit;font-size:var(--fs-md);line-height:1.5;resize:vertical;margin:2px 0 var(--sp-1h);color:var(--ink);box-sizing:border-box}
/* 全家保障（FamilyChart 共用畫面層 —— 呢頁自己嘅樣式只喺 .cx .cx-fam 入面） */
.cx .cx-fam{margin-top:var(--sp-3h)}
.cx .cx-fhd{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-1h)}
.cx .cx-fhd h2{margin:0;font-size:var(--fs-lg)}
.cx .cx-fhd .cx-fkey{margin-left:auto}
.cx .cx-fhd .cx-fhint{font-size:var(--fs-xs);color:var(--muted)}
.cx .cx-fam .fc-key{padding:0;font-size:var(--fs-xs);gap:var(--sp-3)}
.cx .cx-fam .fc-key .sp,.cx .cx-fam .fc-key .sp~span{display:none}
.cx .cx-fam .fc-node{padding:var(--sp-2h) var(--sp-3);gap:var(--sp-2)}
.cx .cx-fam .fc-node .fc-stats,.cx .cx-fam .fc-node .fc-bar,.cx .cx-fam .fc-node .fc-legend,.cx .cx-fam .fc-node .fc-more{display:none}
.cx .cx-fam .fc-node:focus-visible{outline:2px solid var(--brand-green-deep);outline-offset:2px}
.cx .cx-fam .fc-ring .fc-node{flex:0 1 210px;min-width:200px}
.cx .cx-fam .fc-core{width:300px}
.cx .cx-fam .fc-who b{font-size:var(--fs-md)}
.cx .cx-fam .fc-rel,.cx .cx-fam .fc-age,.cx .cx-fam .fc-ring .fc-lb,.cx .cx-fam .fc-link{font-size:var(--fs-xs)}
.cx .cx-fam .cx-pc{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink2);white-space:nowrap}
.cx .cx-fam .cx-pc::before{content:"· "}
.cx .cx-fam .fc-lamp .l,.cx .cx-fam .fc-lamp b,.cx .cx-fam .fc-lnote{font-size:var(--fs-xs)}
.cx .cx-fam .fc-lamp b{min-height:15px}
.cx .cx-fam .fc-mid{grid-template-columns:1fr auto 1fr}
.cx .cx-fadd{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1h);min-width:180px;min-height:96px;border:1.5px dashed var(--brand-green-deep);border-radius:var(--r-md);background:var(--card);color:var(--brand-green-deep);font:inherit;font-weight:700;font-size:var(--fs-md);cursor:pointer;padding:0 var(--sp-3)}
.cx .cx-fadd:hover{background:var(--ok-soft)}
.cx .cx-fsug{flex:0 1 220px;min-width:200px;align-items:stretch;align-self:stretch;border:1.5px dashed var(--brand-gold-deep);border-radius:var(--r-md);background:color-mix(in srgb,var(--brand-gold) 5%,var(--card));padding:var(--sp-2h) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1h);text-align:left;border-top:1.5px dashed var(--brand-gold-deep)}
.cx .cx-fsug .tag{font-size:var(--fs-xs);font-weight:700;color:var(--brand-gold-deep)}
.cx .cx-fsug .who b{font-size:var(--fs-md)}
.cx .cx-fsug .why{font-size:var(--fs-xs);color:var(--ink2);line-height:1.4}
.cx .cx-fsug .fs-role{display:flex;align-items:center;justify-content:flex-start;gap:var(--sp-1h);font-size:var(--fs-xs);color:var(--muted);width:100%}
.cx .cx-fsug .fs-role select{flex:1;min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--sp-2);font-size:var(--fs-sm);background:var(--card)}
.cx .cx-fsug .hint{font-size:var(--fs-xs);color:var(--muted)}
.cx .cx-fsug .bb{display:flex;gap:var(--sp-2)}
.cx .cx-fsug .bb .btn{flex:1}
.cx .cx-fsug .cx-claim{width:100%}
.cx .cx-fam .cx-flash{animation:cxFlash 1.4s ease 2}
@keyframes cxFlash{50%{box-shadow:0 0 0 4px var(--accent)}}
@media (prefers-reduced-motion:reduce){.cx .cx-fam .cx-flash{animation:none;box-shadow:0 0 0 3px var(--accent)}}
.cx .cx-skel{height:160px;border-radius:var(--r-md)}
.cx .cx-covold{margin-top:var(--sp-2)}
.cx .cx-covold .cc-cvt{min-height:44px}
/* 分頁條（sticky）；保單表表頭貼住佢下面（--cx-stick 由 JS 量） */
.cx .cx-dtabs{position:sticky;top:var(--topbar-h,0px);z-index:8;background:var(--bg);padding:var(--sp-3) 0 var(--sp-2h);margin-top:var(--sp-3h);display:flex;align-items:center;gap:var(--sp-2h);box-shadow:0 1px 0 var(--line2)}
.cx .cx-dtabs .seg button{min-width:110px;justify-content:center}
.cx .cx-pane{padding-top:var(--sp-2h)}
.cx .cx-pane .cx-tblcard thead th{top:calc(var(--topbar-h,0px) + var(--cx-stick,0px))}
.cx .cx-sec{margin-top:var(--sp-3h)}
.cx .cx-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3h);margin-top:var(--sp-3h)}
.cx .cx-rowi,.cc-mo .cx-rowi{display:flex;align-items:center;gap:var(--sp-3);min-height:60px;border-top:1px solid var(--line2);padding:var(--sp-1h) 0}
.cx .cx-rowi:first-of-type,.cc-mo .cx-rowi:first-of-type{border-top:0}
.cx .cx-rowi .tx,.cc-mo .cx-rowi .tx{flex:1;min-width:0}
.cx .cx-rowi .tx b,.cc-mo .cx-rowi .tx b{display:block;font-size:var(--fs-md)}
.cx .cx-rowi .tx small,.cc-mo .cx-rowi .tx small{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
.cc-mo .cx-rowi .seg button{min-height:44px}
.cx .cx-badge{font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:1px var(--sp-2);white-space:nowrap}
.cx .cx-badge.w{background:var(--warn-soft);color:var(--warn)}
.cx .cx-badge.b{background:var(--bad-soft);color:var(--bad)}
/* 保單分頁：摘要＋表 */
.cx .cx-psum{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1h) 0;margin:0 0 var(--sp-2h);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-1h) var(--sp-2) var(--sp-1h) var(--sp-2)}
.cx .cx-psit{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:52px;padding:0 var(--sp-4) 0 var(--sp-2);margin-right:var(--sp-2);border:0;border-right:1px solid var(--line2);background:transparent;font:inherit;color:inherit;text-align:left;border-radius:0;cursor:pointer;max-width:340px}
.cx button.cx-psit:hover .v{color:var(--brand-green-deep)}
.cx .cx-psit.open{background:var(--ok-soft)}
.cx .cx-psit.lap{cursor:default}
.cx .cx-psit .l{font-size:var(--fs-xs);color:var(--muted)}
.cx .cx-psit .v{font-family:var(--mono);font-size:var(--fs-lg);font-weight:500;white-space:nowrap}
.cx .cx-psit.lap .v{color:var(--bad)}
.cx .cx-psit .s{font-size:var(--fs-xs);color:var(--muted);line-height:1.35}
.cx .cx-psit.warn .s{color:var(--warn)}
.cx .cx-psum .sp{flex:1}
.cx .cx-psum .cx-ccy button{min-width:0;padding:0 var(--sp-3)}
.cx .cx-ptbl{table-layout:fixed}
.cx .cx-ptbl col.c-ins{width:var(--cx-c-ins)}
.cx .cx-ptbl col.c-amt{width:var(--cx-c-amt)}
.cx .cx-ptbl col.c-pr{width:var(--cx-c-pr)}
.cx .cx-ptbl col.c-val{width:var(--cx-c-val)}
.cx .cx-ptbl col.c-st{width:var(--cx-c-st)}
.cx .cx-ptbl th,.cx .cx-ptbl td{padding:var(--sp-2) var(--sp-2h)}
.cx .cx-ptbl tr.pr td{height:60px;font-size:var(--fs-md);color:var(--ink);vertical-align:middle}
.cx .cx-ptbl tr.pr.link{cursor:pointer}
.cx .cx-ptbl tr.pr.link:hover td{background:var(--accent-soft)}
.cx .cx-ptbl td.nm{white-space:normal}
.cx .cx-ptbl .pn{display:flex;align-items:flex-start;gap:var(--sp-2)}
.cx .cx-ptbl .pn>.cx-i{margin-top:2px;color:var(--muted);transition:transform .15s}
.cx .cx-ptbl tr.open .pn>.cx-i{transform:rotate(90deg)}
.cx .cx-ptbl .pn b{display:block;font-size:var(--fs-md);line-height:1.3}
.cx .cx-ptbl .pn small{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.4;margin-top:1px}
.cx .cx-ptbl .pn small .mono{font-family:var(--mono)}
.cx .cx-ptbl .pr-type.unk{color:var(--warn);font-weight:700}
.cx .cx-ptbl td.num{font-family:var(--mono);font-size:var(--fs-md);white-space:normal;line-height:1.3}
.cx .cx-ptbl td.num small{display:block;font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.cx .cx-ptbl td.ins{white-space:normal;font-size:var(--fs-sm);line-height:1.3}
.cx .cx-ptbl td.st{white-space:normal}
.cx .cx-ptbl td.st .pill{white-space:normal}
.cx .cx-ptbl tr.pr.sub td{height:44px;background:var(--card2);font-size:var(--fs-sm)}
.cx .cx-ptbl tr.pr.sub .pn{padding-left:26px;position:relative}
.cx .cx-ptbl tr.pr.sub .pn::before{content:"";position:absolute;left:10px;top:3px;width:10px;height:10px;border-left:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint)}
.cx .cx-ptbl tr.pr.sub .pn b{font-weight:600;font-size:var(--fs-md)}
.cx .cx-ptbl tr.pr.lap td{color:var(--muted)}
.cx .cx-ptbl tr.pr.lap td b{color:var(--ink2)}
.cx .cx-ptbl tr.pr.hl td{background:var(--cx-hl)}
.cx .cx-ptbl tr.pr.hl td:first-child{box-shadow:inset 4px 0 0 var(--bad)}
.cx .cx-ptbl tr.pr.hlf td{background:var(--cx-hlf)}
.cx .cx-ptbl tr.pr.hlf td:first-child{box-shadow:inset 4px 0 0 var(--brand-gold-deep)}
.cx .cx-hltag{display:inline-block;font-size:var(--fs-xs);font-weight:700;color:#fff;background:var(--bad);border-radius:var(--r-pill);padding:0 var(--sp-2);margin-bottom:3px}
.cx .cx-hltag.f{background:var(--brand-gold-deep)}
.cx .cx-ptbl tr.pr-det>td{padding:var(--sp-1) var(--sp-3) var(--sp-3h);background:var(--card2);white-space:normal}
.cx .cx-ptbl tr.pr-det.hlx>td{background:var(--cx-hlx)}
.cx .pr-detbox{padding:var(--sp-2) 0 0;border-top:0}
.cx .pr-detbox .fgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2h);margin-top:0}
.cx .pr-detbox .fg{border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card);padding:var(--sp-2) var(--sp-2h);min-width:0}
.cx .pr-detbox .fg>h4{margin:0 0 var(--sp-1);font-size:var(--fs-xs);color:var(--brand-gold-deep);border-bottom:0;padding-bottom:0}
.cx .pr-detbox .fr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 var(--sp-2);align-items:baseline;padding:3px 0;font-size:var(--fs-xs);border-bottom:0}
.cx .pr-detbox .fr .fl{color:var(--muted)}
.cx .pr-detbox .fr .fv{text-align:right;color:var(--ink);font-family:var(--mono);font-size:var(--fs-sm);overflow-wrap:anywhere;min-width:0}
.cx .pr-detbox .fr .fv.na{color:var(--muted)}
.cx .pr-detbox .fr .src{justify-self:end;font-size:var(--fs-xs);white-space:nowrap}
.cx .pr-detbox .cc-det{margin-top:var(--sp-2h)}
.cx .cx-pexp-ft{display:flex;align-items:center;gap:var(--sp-2h);margin-top:var(--sp-2h);flex-wrap:wrap}
.cx .cx-pexp-ft .sp{flex:1}
.cx .cx-pexp-ft small{font-size:var(--fs-xs);color:var(--muted)}
.cx .cx-pexp-ft .cx-del{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.cx .cx-pexp-ft .cx-del:hover{background:var(--bad-soft)}
.cx .cc-note2{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-2) 0 0;line-height:1.5}
.cx .cc-drill{margin:0 0 var(--sp-2h)}
.cx .cc-drill .x{min-height:44px}
/* 家庭成員分頁 */
.cx .cx-mtbl td{height:52px;font-size:var(--fs-md);white-space:normal}
.cx .cx-mtbl td.mono{white-space:nowrap}
.cx .cx-mtbl tr.link{cursor:pointer}
.cx .cx-mtbl tr.link:hover td{background:var(--accent-soft)}
.cx .cx-rel{font-size:var(--fs-xs);color:var(--accent-ink);background:var(--accent-soft);border-radius:var(--r-pill);padding:1px 7px;white-space:nowrap}
.cx .cx-mtbl td.act{white-space:normal;text-align:right}
.cx .cx-mtbl .lnk{background:none;border:0;color:var(--link);cursor:pointer;font-size:var(--fs-sm);font-weight:600;min-height:44px;padding:0 var(--sp-1h)}
.cx .cx-mtbl .ph-sel{min-height:44px;max-width:9em;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.cx .cx-mtbl .warn{color:var(--warn);font-size:var(--fs-xs)}
.cx #ccPend .td-sec{display:block;padding:var(--sp-2) 0;border-top:1px solid var(--line2);font-size:var(--fs-sm);line-height:1.5}
.cx #ccPend .td-sec:first-of-type{border-top:0}
.cx #ccPend .td-sec .dim{display:block;font-size:var(--fs-xs)}
.cx #ccPend .unk-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-2) 0;border-top:1px solid var(--line2)}
.cx #ccPend .unk-row b{flex:1;min-width:160px;font-size:var(--fs-md)}
.cx #ccPend .unk-row select{min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--sp-2);font-size:var(--fs-sm);background:var(--card)}
.cx .fs-match{margin-top:var(--sp-3h);padding:var(--sp-2h) var(--sp-4);border:1px dashed var(--line);border-radius:var(--r-md);background:var(--card2)}
.cx .fs-match h4{margin:0 0 var(--sp-2);font-size:var(--fs-md)}
.cx .fs-match .fs-row{display:flex;align-items:center;gap:var(--sp-2h);flex-wrap:wrap;padding:var(--sp-2) 0;border-top:1px solid var(--line2)}
.cx .fs-match .fs-who{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-md)}
.cx .fs-match .fs-who .dim{font-size:var(--fs-xs)}
/* 投資組合／文件 */
.cx .cx-pane .cc-inv{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:var(--sp-3h) var(--sp-4)}
.cx .cx-pane .cc-inv>h3{margin:0 0 var(--sp-2);font-size:var(--fs-lg)}
.cx .cx-pane .cc-invtiles .l,.cx .cx-pane .fu-tbl td,.cx .cx-pane .fu-tbl th,.cx .cx-pane .fu-row{font-size:var(--fs-xs)}
.cx .cx-pane .fu-tbl td.n b{font-size:var(--fs-sm)}
.cx .cx-pane .fu-tbl td{white-space:normal}
.cx .cx-pane .cc-det>summary{min-height:44px}
.cx .cx-warnbox{border:1px solid color-mix(in srgb,var(--warn) 30%,var(--line));background:color-mix(in srgb,var(--warn) 4%,var(--card));border-radius:var(--r-md);padding:var(--sp-1) var(--sp-4)}
.cx .cx-doc{display:flex;align-items:center;gap:var(--sp-3);min-height:56px;border-top:1px solid var(--line2);padding:var(--sp-1) 0}
.cx .cx-doc:first-of-type{border-top:0}
.cx .cx-doc .di{width:36px;height:36px;border-radius:var(--r-sm);background:var(--bad-soft);color:var(--bad);display:flex;align-items:center;justify-content:center;flex:none;font-size:var(--fs-xs);font-weight:700}
.cx .cx-doc .tx{flex:1;min-width:0}
.cx .cx-doc .tx b{display:block;font-size:var(--fs-md)}
.cx .cx-doc .tx small{display:block;font-size:var(--fs-xs);color:var(--muted);overflow-wrap:anywhere}
/* ── 窄（≤ 760：手機／分屏）── 第一屏兩欄疊、保單表收「受保人」入計劃格、兩格盒疊 */
@container ccx (max-width:760px){
  .cx .cx-first,.cx .cx-two{grid-template-columns:minmax(0,1fr)}
  .cx .cx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx .cx-lhero .acts{width:100%}
  .cx .cx-dtabs .seg{overflow-x:auto;max-width:100%}
  .cx .cx-dtabs .seg button{min-width:0}
  .cx .cx-ctbl{--cx-c-age:52px;--cx-c-cov:132px;--cx-c-due:112px;--cx-c-n:52px;--cx-c-go:28px}
  .cx .cx-ctbl .cx-lps{flex-wrap:wrap;width:100%}
  .cx .cx-ctbl .cx-lp{min-width:20px}
  .cx .cx-ptbl{--cx-c-ins:84px;--cx-c-amt:104px;--cx-c-pr:104px;--cx-c-val:100px;--cx-c-st:84px}
  .cx .cx-ptbl th,.cx .cx-ptbl td{padding-left:var(--sp-1h);padding-right:var(--sp-1h)}
  .cx .pr-detbox .fgs{grid-template-columns:minmax(0,1fr)}
  .cx .cx-fam .fc-mid{grid-template-columns:minmax(0,1fr)}
  .cx .cx-fam .fc-core{width:100%}
  .cx .cx-psit{max-width:none}
}
@container ccx (max-width:1100px) and (min-width:761px){
  .cx .pr-detbox .fgs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{body:has(.cc-mo.on) .cx,.cx-float,.cx-dropov{display:none!important}}
.cx .cx-fam .cx-fbody>.cc-note2{display:none}   /* 未對到成員嘅保單：喺「家庭成員」分頁「未歸屬保單」講（同一畫面唔講兩次；FamilyChart 嗰句指住舊「建議家庭成員」表） */
.cx .cx-fam .cx-fadd{align-self:flex-start}
.cx .cx-fam .cx-fallback{display:flex;flex-wrap:wrap;gap:var(--sp-2h);align-items:flex-start;margin-top:var(--sp-2)}   /* 檢視讀唔到：圖畫唔到，入口（加成員／建議成員）照出 */
/* 10-29 用戶 1A：頂欄已經寫住頁名 → 頁面大標題手機唔再出（同 calendar.css .cal-head h1／team-phone.css 頁題一樣做法）；副題／meta 照出 */
html[data-dev="phone"] .cl2-head:not(:has([data-cl2back])) .cl2-ttl>h1{display:none}   /* 客戶列表；回收桶／已歸檔（有返回掣）個標題唔係頁名，照出 */
/* 10-29 手機唔出比較橫條（副總監答 ② A）：家庭關係圖資產條＝一條分幾色嘅比例條（照留），但條長度跟「呢個家庭最高」—— 嗰部分係比大細 →
   手機一律全闊（inline width 由 family-chart.js 出，iPad／電腦照舊），淨睇比例；圖例「資產條長度＝相對呢個家庭最高」（.fc-key 入面 .sp 後面嗰格）手機唔出 */
html[data-dev="phone"] .fc-bar .track{width:100%!important}
html[data-dev="phone"] .fc-key .sp,html[data-dev="phone"] .fc-key .sp+span{display:none}