/* 強積金頁：列表 + 基金頁。全部顏色跟 token。 */
.mpf-loading{max-width:100%}
.mpf-head{display:flex;align-items:baseline;gap:var(--sp-3h);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.mpf-head h1{font-size:var(--fs-2xl)}
.mpf-head .meta{color:var(--muted);font-size:var(--fs-sm)}
.mpf-head .meta b{font-family:var(--mono);font-weight:500;color:var(--ink2)}

/* 09-13：標題＋篩選器落 hero（深底），每個篩選器有標題 —— 用戶先知可以揀計劃／類別 */
.mpf-head.hero{display:block;background:var(--primary);color:#fff;border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-4)}
.mpf-head.hero .hd{display:flex;align-items:baseline;gap:var(--sp-3h);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.mpf-head.hero h1{color:#fff}
.mpf-head.hero .meta{color:rgba(255,255,255,.65)}
.mpf-head.hero .meta b{color:#fff}
.mpf-tools{display:grid;grid-template-columns:1.4fr 1.6fr 1.4fr 1fr 1fr;gap:var(--sp-3);align-items:end}
.mpf-tools.six{grid-template-columns:1.3fr 1.2fr 1.6fr .7fr 1.2fr 1fr}   /* 投連：多一個公司、貨幣 */
.mpf-tbl col.c-cur{width:60px}
@media (max-width:1000px){.mpf-tools,.mpf-tools.six{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mpf-tools{grid-template-columns:1fr}}
.mpf-tools .fld{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.mpf-tools .fld>span:first-child{font-size:var(--fs-xs);font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.02em}
.mpf-tools .fld select,.mpf-tools .fld .in{width:100%;max-width:none}
.mpf-tools select,.mpf-tools input[type=search]{color:var(--ink)}
.mpf-tools select.set{color:var(--brand-green-deep)}
.mpf-tools .search .in{position:relative;display:block}
.mpf-tools input[type=search]{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:9px 12px 9px 34px;width:100%;font-size:var(--fs-md);box-sizing:border-box}
.mpf-tools .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)}
.mpf-toggles{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;margin-top:var(--sp-3h)}
.mpf-toggles label.chk{color:#fff}.mpf-toggles .pinchk{color:#fff}
.mpf-toggles .pinchk{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.mpf-toggles .pinchk.on{background:var(--accent);color:var(--accent-ink)}
.mpf-toggles .clear{color:#fff;text-decoration:underline}
.mpf-toggles .cta{margin-left:auto;font-size:var(--fs-sm);color:var(--brand-hero-ink);font-weight:600}
/* 列表每行尾有「詳情 ›」CTA（用戶 09-13：唔知可以撳入去） */
.mpf-tbl col.c-go{width:58px}
.mpf-tbl td.go{text-align:right;padding-left:var(--sp-1);padding-right:var(--sp-2)}
.mpf-tbl td.go .btn{padding:3px 8px;font-size:var(--fs-xs);white-space:nowrap}
.mpf-tbl tbody tr.link:hover td.go .btn{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.fundcell .nm{color:var(--link)}
.mpf-tbl tbody tr.link:hover .fundcell .nm{text-decoration:underline}
.mpf-tools select{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:9px 30px 9px 12px;font-size:var(--fs-md);font-weight:500;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7873' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;max-width:320px}
.mpf-tools select.set{border-color:var(--brand-green-deep);color:var(--brand-green-deep)}
.mpf-toggles label.chk{display:inline-flex;align-items:center;gap:var(--sp-1h);font-size:var(--fs-sm);color:#fff;white-space:nowrap;cursor:pointer}
.mpf-toggles label.chk input{accent-color:var(--brand-green-deep)}
.mpf-toggles .clear{font-size:var(--fs-sm);color:var(--link);background:none;border:0;cursor:pointer;white-space:nowrap}
.mpf-bar{display:flex;align-items:center;gap:var(--sp-3h);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.mpf-bar .cnt{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.mpf-bar .cnt b{font-family:var(--mono);font-weight:500;color:var(--ink2)}
.mpf-bar .lg{margin-left:auto;display:flex;gap:var(--sp-2h);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.mpf-bar .lg i{display:inline-block;width:14px;height:12px;border-radius:var(--r-xs);vertical-align:-1px;margin-right:var(--sp-1)}

/* 列表表：容器自己捲動，表頭 sticky；基金欄釘住左邊（用戶 09-12：橫捲時基金名要固定）
   欄闊：基金／類別固定，多出嚟嘅闊度落數字欄（之前基金欄食晒多出嘅闊度，中間一大片空白）。
   窄過 min-width 就橫捲，基金欄跟住釘住。 */
.mpf-tablewrap{max-height:calc(100vh - var(--topbar-h) - 190px);min-height:320px;overflow:auto}
.mpf-tbl{table-layout:fixed;width:100%}   /* 固定欄用 col 闊度，其餘（數字欄）平均分剩餘闊度 —— 闊窗自然攤開，窄窗跟 min-width 橫捲 */
.mpf-tbl col.c-fund{width:280px}.mpf-tbl col.c-cat{width:136px}.mpf-tbl col.c-risk{width:48px}.mpf-tbl col.c-price{width:84px}
.mpf-tbl td.price,.mpf-tbl td.num,.mpf-tbl td.mono{overflow:hidden;text-overflow:ellipsis}
.mpf-tbl th:first-child,.mpf-tbl td.fund{position:sticky;left:0;z-index:2;background:var(--card);box-shadow:inset -1px 0 0 var(--line2)}
.mpf-tbl thead th:first-child{z-index:3;background:var(--card2)}
.mpf-tbl tbody tr.link:hover td.fund{background:var(--accent-soft)}
.mpf-tbl td.fund{white-space:normal;max-width:280px}
.fundcell{display:flex;align-items:center;gap:var(--sp-2h);min-width:0}
.fundcell .txt{min-width:0}
.fundcell .logo{width:28px;height:28px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line2);object-fit:contain;padding:2px;flex:none}
.fundcell .logo.txt{display:flex;align-items:center;justify-content:center;font-size:var(--fs-3xs);font-weight:700;color:var(--ink2);background:var(--card2)}
/* 基金名一律一行，過長「…」（用戶 09-13：行數要統一）；title 有全文 */
.fundcell .nm{font-weight:700;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fundcell .sub{font-size:var(--fs-xs);color:var(--muted);line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpf-tbl td.sub2{font-size:var(--fs-xs);color:var(--muted);max-width:136px;overflow:hidden;text-overflow:ellipsis}
.mpf-tbl th.num,.mpf-tbl td.num{padding-left:var(--sp-2);padding-right:var(--sp-2)}
.mpf-tbl td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mpf-tbl td.mono .d{display:block;font-size:var(--fs-2xs);color:var(--muted)}
.mpf-tbl td.q1{background:var(--q1)}.mpf-tbl td.q2{background:var(--q2)}.mpf-tbl td.q3{background:var(--q3)}.mpf-tbl td.q4{background:var(--q4)}
.risk{display:inline-block;min-width:22px;text-align:center;border-radius:var(--r-sm);font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;padding:1px var(--sp-1h);color:#fff}
.risk.r1,.risk.r2{background:#2D8B52}.risk.r3{background:#5FA34A}.risk.r4{background:#B59A2A}.risk.r5{background:#C77A1E}.risk.r6{background:#C4502A}.risk.r7{background:#A82323}
.risk.r0{background:var(--neutral-soft);color:var(--muted)}
.mpf-tbl .price{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.mpf-tbl .price .d{font-size:var(--fs-2xs);display:block}
.mpf-empty{padding:var(--sp-7) var(--sp-4);text-align:center;color:var(--muted)}
.mpf-err{padding:var(--sp-5);text-align:center;color:var(--bad)}

/* 基金頁 */
.f-back{display:inline-flex;align-items:center;gap:var(--sp-1h);color:var(--link);background:none;border:0;padding:0;cursor:pointer;font-size:var(--fs-md);margin-bottom:var(--sp-3)}
.f-head{display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6)}
/* 詳情頁 header ＝ 呢一版嘅 Hero（用戶 2026-09-02 指定：資料庫列表係「做嘢」冇 hero，
   但點入去單一基金嘅詳情係「睇狀況」，要 hero）。
   ⚠️ mpf.css 比 shell.css 後載入，所以 .hero 嘅底色會輸畀 .f-head，要喺呢度覆寫。
   ilas.js 共用同一個 .f-head，所以呢段一改兩版都生效。 */
.f-head.hero{background:var(--primary);border-color:transparent;color:#fff}
.f-head.hero .m{color:rgba(255,255,255,.55)}
.f-head.hero .p .c{color:rgba(255,255,255,.88)}
.f-head.hero .p .dt{color:rgba(255,255,255,.5)}
.f-head.hero .logo{border-color:rgba(255,255,255,.16)}
.f-head .logo{width:52px;height:52px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line2);object-fit:contain;padding:var(--sp-1);flex:none}
.f-head .t{flex:1;min-width:260px}
.f-head h1{font-size:var(--fs-hero);line-height:1.2}
.f-head .m{margin-top:var(--sp-1h);color:var(--muted);font-size:var(--fs-sm)}
.f-head .m span+span::before{content:" · ";opacity:.6}
.f-head .p{text-align:right;white-space:nowrap}
.f-head .p .v{font-family:var(--mono);font-size:var(--fs-3xl);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1}
.f-head .p .c{font-family:var(--mono);font-size:var(--fs-md);margin-top:var(--sp-1)}
.f-head .p .dt{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
/* 09-13：六格濃縮入 hero（深底）—— hero 變兩行：頭一行 logo／名／價，第二行六格 */
.f-head.hero{flex-wrap:wrap}
.f-hkpis{flex:0 0 100%;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.14)}
.f-hkpis .hk .l{font-size:var(--fs-xs);color:rgba(255,255,255,.6);white-space:nowrap}
.f-hkpis .hk .v{font-family:var(--mono);font-size:var(--fs-xl);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3;margin-top:2px;color:#fff}
.f-hkpis .hk .v .pos{color:#7FE0A8}.f-hkpis .hk .v .neg{color:#FF9A8C}.f-hkpis .hk .v .flat{color:rgba(255,255,255,.5)}
.f-hkpis .hk .s{font-size:var(--fs-xs);color:rgba(255,255,255,.6);margin-top:2px;line-height:1.4}
.f-hkpis .riskscale{margin-top:6px}
.f-hkpis .riskscale i:not(.on){background:rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
@media (max-width:1100px){.f-hkpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.f-hkpis{grid-template-columns:repeat(2,1fr)}}
.f-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp-3);margin:var(--sp-4) 0}
.f-meta .kpi .v{font-size:var(--fs-xl)}
/* 09-12 基金頁重點（用戶：撳入去要即刻知特點）：六格答四條問題 ＋ 賣點／要留意兩欄 */
.f-meta.six{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.f-meta .kpi .s{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1);line-height:1.4}
/* 賣點／要留意（用戶 09-13：字體要吸引明顯）：字大一級、行距鬆、數字加粗上色、每欄有色標題 */
.f-hl{display:grid;grid-template-columns:1fr;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);margin:var(--sp-4) 0}
@media (min-width:900px){.f-hl{grid-template-columns:1fr 1fr}}
.f-hl h2{font-size:var(--fs-lg);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2h);letter-spacing:.02em}
.f-hl .col:first-child h2{color:var(--ok)}.f-hl .col:nth-child(2) h2{color:var(--warn)}
.f-hl h2 .c{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center}
.f-hl .col:first-child h2 .c{background:var(--ok-soft);color:var(--ok)}.f-hl .col:nth-child(2) h2 .c{background:var(--warn-soft);color:var(--warn)}
.f-hl ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.f-hl li{display:flex;gap:var(--sp-2h);align-items:flex-start;font-size:var(--fs-lg);line-height:1.5;color:var(--ink2)}
.f-hl li b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.f-hl li.good b{color:var(--ok)}.f-hl li.warn b{color:var(--warn)}
.f-hl li i{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:3px}
.f-hl li.good i{background:var(--ok-soft);color:var(--ok)}
.f-hl li.warn i{background:var(--warn-soft);color:var(--warn)}
.f-hl .dim{color:var(--muted);font-size:var(--fs-sm)}
.f-peers td.pn{white-space:normal}
.f-peers th,.f-peers td{padding-left:var(--sp-1h);padding-right:var(--sp-1h)}
.f-peers tr.me td{background:var(--accent-soft);font-weight:600}
/* 09-12：同類比較全部列出，容器自己上下捲（表頭 sticky 由 .tbl thead th 已有），撳欄名排序 */
/* 右欄放兩張表：欄闊要慳（tickbox 34／# 30／回報 66／風險 44／星級 78），表頭一行唔准摺；表頭同格全部垂直置中（用戶 09-12） */
.f-peerwrap{max-height:520px;overflow:auto;border:1px solid var(--line2);border-radius:var(--r-sm)}
.f-peers th,.f-peers td{vertical-align:middle;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.f-peers thead th{white-space:nowrap;line-height:1.2}
.f-peers th.num,.f-peers td.num{white-space:nowrap}
.f-peers td.pn{width:auto;min-width:200px}
.f-peers td.pn .pnwrap{align-items:center}
.f-peers td.sub2{white-space:normal;font-size:var(--fs-2xs);max-width:110px}
.f-peers td .risk{vertical-align:middle}
.f-peerwrap .tbl th:nth-child(2),.f-peerwrap .tbl td:nth-child(2){color:var(--muted);font-family:var(--mono);font-size:var(--fs-xs);width:30px;padding-left:var(--sp-1);padding-right:var(--sp-1)}
.f-card td small.win{display:block;font-size:var(--fs-2xs);color:var(--muted);font-family:var(--mono)}
.kpis .kpi .s{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono);margin-top:var(--sp-1)}
/* 09-12：同類比較最左 tickbox ＝ 加入比較；撳名入基金頁 */
.f-peers th.ck,.f-peers td.ck{width:34px;text-align:center;padding-left:var(--sp-1h);padding-right:var(--sp-1h)}
.f-peers td.ck input{accent-color:var(--brand-green-deep);width:16px;height:16px;cursor:pointer;vertical-align:middle}
.f-peers tbody tr{cursor:pointer}
.f-peers td.pn .pnwrap{display:flex;align-items:center;gap:var(--sp-2)}
.f-peers td.pn .pnwrap>div{min-width:0}
.f-peers td.pn .logo.sm{width:22px;height:22px;border-radius:var(--r-xs);background:#fff;border:1px solid var(--line2);object-fit:contain;padding:1px;flex:none}
.f-peers td.pn .logo.txt.sm{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--ink2);background:var(--card2)}
.f-peers td.pn small{display:block;font-size:var(--fs-2xs);color:var(--muted)}
.f-peers td.pn a.pnlink{display:block;font-weight:600;color:var(--link);text-decoration:none}
.f-peers td.pn a.pnlink:hover{text-decoration:underline}
.f-peers tr.cmp td{background:var(--card2)}
/* 基金格排名賽：本基金同比較基金同一款；order 排位＋ transform 動畫掉位 */
.f-stat.f-race{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-5);align-items:flex-start}
.f-stat .f-stamp{flex:0 0 100%;order:0;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--muted)}
.f-stat .f-cost{order:-1}
.f-stat .f-fund{min-width:150px;will-change:transform}
.f-stat .f-fund .l{display:flex;align-items:center;gap:var(--sp-1h);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.f-stat .f-fund .s .ann{color:var(--ink2)}
.cmpdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:var(--sp-1h);vertical-align:-1px}
.f-cmpbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-2h);font-size:var(--fs-xs)}
.f-cmpbar:empty{display:none}
.f-cmpbar .l{color:var(--muted)}
.f-cmpbar .chip{display:inline-flex;align-items:center;gap:var(--sp-1h);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px var(--sp-2) 2px var(--sp-2h);background:var(--card)}
.f-cmpbar .chip i{width:10px;height:10px;border-radius:50%}
.f-cmpbar .chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-md);line-height:1;padding:0 2px}
.f-cmpbar .dim{color:var(--muted)}
.f-stat .l .cmpdot{margin-right:var(--sp-1)}
.f-how{grid-column:1 / -1;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--ink2)}
.f-how summary{cursor:pointer;color:var(--link);font-weight:600}
.f-how ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);display:grid;gap:var(--sp-1)}
.f-how li b{color:var(--ink)}
.riskscale{display:inline-flex;gap:2px;margin-top:var(--sp-1)}
.riskscale i{width:18px;height:18px;border-radius:var(--r-xs);background:var(--card2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--muted);font-style:normal}
.riskscale i.on{color:#fff;font-weight:700}
.f-tabs{margin:var(--sp-4) 0 var(--sp-3);display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.f-sec{display:none}.f-sec.on{display:block}
.f-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.f-grid>*{min-width:0}   /* 唔准表格撐爆格欄，寬表要喺 .scroll 入面自己捲 */
@media (min-width:1100px){.f-grid.two{grid-template-columns:3fr 2fr}.f-grid.two.ov{grid-template-columns:11fr 9fr}}
/* 概覽 2×2：卡係 grid 子項，同一行等高；右邊表卡用 flex 填滿（表容器 flex-basis 0 → 行高由左邊圖卡決定，唔會被長表撐高） */
.f-grid.ov>.f-card{display:flex;flex-direction:column;min-height:0}
.f-grid.ov>.f-card .f-peerwrap{flex:1 1 0;min-height:240px;max-height:none}
.f-grid.ov>.f-card>.note{margin-top:auto;padding-top:var(--sp-2)}
@media (max-width:1099px){.f-grid.ov>.f-card .f-peerwrap{flex:none;max-height:480px}}
.f-card{padding:var(--sp-4) var(--sp-5)}
.f-card h2{font-size:var(--fs-lg);margin-bottom:var(--sp-2h);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.f-card h2 .seg{margin-left:auto}
.f-card h2 .sub{font-size:var(--fs-xs);font-weight:400;color:var(--muted);white-space:nowrap}
.f-stat{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin:0 0 var(--sp-3)}
.f-stat .l{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.f-stat .v{font-family:var(--mono);font-size:var(--fs-xl);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.3;white-space:nowrap}
.f-stat .s{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;margin-top:1px}
.f-stat .up{color:var(--ok)}.f-stat .dn{color:var(--bad)}
.f-card h2 .seg button{padding:5px 11px;font-size:var(--fs-sm)}
.f-card .note{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-2) 0 0}
.cmp.better{color:var(--ok)}.cmp.worse{color:var(--bad)}
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;height:auto}
.chart-tick{font-family:var(--mono);font-size:var(--fs-2xs);fill:var(--muted)}
.chart-val{font-family:var(--mono);font-size:var(--fs-3xs);fill:var(--ink2)}
.chart-empty{padding:var(--sp-7);text-align:center;color:var(--muted)}
.chart-tip{display:none;position:absolute;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:var(--sp-2) var(--sp-2h);font-size:var(--fs-xs);pointer-events:none;z-index:2;white-space:nowrap}
.chart-tip .d{font-family:var(--mono);color:var(--muted);margin-bottom:var(--sp-1)}
.chart-tip div i{display:inline-block;width:10px;height:10px;border-radius:var(--r-xs);margin-right:var(--sp-1h);vertical-align:-1px}
.chart-tip div b{font-family:var(--mono);font-weight:500;margin-left:var(--sp-2h)}
.chart-legend{display:flex;gap:var(--sp-4);font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1h)}
.chart-legend i{display:inline-block;width:12px;height:12px;border-radius:var(--r-xs);margin-right:var(--sp-1h);vertical-align:-1px}
.spark{display:block}
@media (max-width:760px){.mpf-tablewrap{max-height:none}.f-head .p{text-align:left}.f-head .p .v{font-size:28px}}
/* 09-13 投連：增長圖「不含派息／含派息」細分段掣（同年期掣並排） */
.f-card h2 .seg.sm{margin-left:auto}
.f-card h2 .seg.sm+.seg{margin-left:var(--sp-2)}

/* 09-13：比較基金格 —— 色點唔准被壓扁；× 喺格右上 */
.f-stat .f-fund .l{max-width:240px}
.f-stat .f-fund .l .cmpdot{flex:none}
.f-stat .f-fund .l .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-stat .f-fund .l .rm{flex:none;margin-left:auto;width:18px;height:18px;border:0;border-radius:50%;background:var(--neutral-soft);color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.f-stat .f-fund .l .rm:hover{background:var(--bad-soft);color:var(--bad)}

/* ── 答案模式（09-15）：預設入口 —— 一個問題三個模式；全表變「進階」。元件全部沿用：.hero／.seg／.btn／.tbl.mpf-tbl／.kpis／.f-hl ── */
.mpf-ans-hero .hd{align-items:flex-start;justify-content:space-between}
.mpf-ans-hero .hlabel{font-size:var(--fs-xs);color:rgba(255,255,255,.62);font-weight:500;letter-spacing:.04em}
.mpf-ans-hero h1{font-size:var(--fs-2xl);margin-top:2px}
.mpf-ans-hero .acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.mpf-ans-hero .acts .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.mpf-ans-hero .acts .btn:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.45)}
.mpf-ans-hero .acts .btn.ghost{background:transparent;border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.85)}
/* 三個模式係一組互斥選項 → .seg（鐵律 #1），喺深底上放大一級 */
.mpf-modes{margin-top:var(--sp-2)}
.mpf-modes .seg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.mpf-modes .seg button{color:#fff;padding:10px 18px;font-size:var(--fs-md)}
.mpf-modes .seg button:hover{background:rgba(255,255,255,.12)}
.mpf-modes .seg button.on{background:var(--accent);color:var(--accent-ink)}
@media (max-width:640px){.mpf-modes .seg{display:grid;grid-template-columns:1fr}.mpf-modes .seg button{text-align:left}}
.ans-card{margin-bottom:var(--sp-4)}
.ans-pick{display:flex;gap:var(--sp-4);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.ans-pick.two>.fld{flex:1 1 320px}
.ans-pick .fld{display:flex;flex-direction:column;gap:var(--sp-1);min-width:260px}
.ans-pick .fld>span:first-child{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.ans-pick .fld select{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:9px 12px;font-size:var(--fs-md);font-weight:500;color:var(--ink);max-width:100%}
.ans-pick .fld small{font-size:var(--fs-xs);margin-top:var(--sp-1)}
.ans-pick .cnt{font-size:var(--fs-xs);color:var(--muted);padding-bottom:10px}
.ans-tablewrap{max-height:none}
.ans-tbl{table-layout:fixed;min-width:860px}
.ans-tbl col.c-fund{width:320px}
.ans-tbl td.fund{white-space:normal}
.ans-tbl tbody tr.ans-row.open td{background:var(--accent-soft)}
.ans-tbl tbody tr.ans-row .fundcell .nm::before{content:"▸ ";color:var(--muted);font-family:var(--mono);font-size:var(--fs-2xs)}
.ans-tbl tbody tr.ans-row.open .fundcell .nm::before{content:"▾ "}
.ans-tbl tr.ans-ev td{white-space:normal;background:var(--card2);padding:var(--sp-4) var(--sp-4) var(--sp-4);cursor:default;position:static}
.ans-tbl tr.ans-ev td:first-child{position:static}
.ans-evg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
@media (max-width:1000px){.ans-evg{grid-template-columns:1fr}}
.evb{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-3h)}
.evb h3{font-size:var(--fs-sm);font-weight:700;margin:0 0 var(--sp-2);display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
.evb h3 .sub{font-size:var(--fs-2xs);font-weight:400;color:var(--muted)}
.evb ul{margin:0;padding-left:var(--sp-4);display:grid;gap:var(--sp-1h);font-size:var(--fs-sm);color:var(--ink2);line-height:1.5}
.evb li b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.evb .dim{color:var(--muted);font-size:var(--fs-xs);margin:0}
.ans-cal{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-top:var(--sp-3)}
@media (max-width:640px){.ans-cal{grid-template-columns:repeat(2,1fr)}}
.ans-cal .c{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-2h);text-align:center}
.ans-cal .c .l{font-size:var(--fs-2xs);color:var(--muted);font-weight:600}
.ans-cal .c .v{font-family:var(--mono);font-weight:600;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.ans-cal .c .v2{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--muted)}
.ans-evacts{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
/* 對比 */
.ans-cmp{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin:var(--sp-3) 0 var(--sp-4)}
@media (max-width:900px){.ans-cmp{grid-template-columns:1fr}}
.ans-side{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3h) var(--sp-4);background:var(--card2)}
.ans-side.mine{border-color:var(--brand-green-deep)}
.ans-side .who{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ans-side .name{font-weight:700;font-size:var(--fs-lg);margin-top:2px;display:flex;align-items:center;gap:var(--sp-2)}
.ans-side .name .logo{width:22px;height:22px;border-radius:var(--r-xs);background:#fff;border:1px solid var(--line2);object-fit:contain;padding:1px}
.ans-side .scheme{font-size:var(--fs-xs);color:var(--muted)}
.ans-side .kpis{margin-top:var(--sp-3);grid-template-columns:repeat(3,1fr)}
.ans-side .kpi .v{font-size:var(--fs-lg)}
.ans-cmpgrid{margin-bottom:var(--sp-4)}
.ans-cmpgrid .f-card .scroll{max-height:520px;overflow:auto}
.ans-memo pre{white-space:pre-wrap;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:var(--sp-3h);margin:0;color:var(--ink2)}
.ans-memo h2 .btn{margin-left:auto}
/* 平台對照 */
.ans-plattbl tr.me td{background:var(--accent-soft);font-weight:600}
.ans-plattbl td.q1{background:var(--q1)}.ans-plattbl td.q4{background:var(--q4)}
.ans-plat{margin-bottom:var(--sp-4)}
.ans-plat.home{border-color:var(--brand-green-deep)}
.ans-plat>h2 .logo{width:24px;height:24px;border-radius:var(--r-xs);background:#fff;border:1px solid var(--line2);object-fit:contain;padding:1px}
.ans-plat .ans-hl{margin:0 0 var(--sp-3);padding:var(--sp-3) 0 0;border:0;box-shadow:none;background:transparent}
.ans-plat .ans-hl li{font-size:var(--fs-md)}
.ans-plat .ans-hl li.man::before{content:"團隊";font-size:var(--fs-3xs);font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-xs);padding:0 4px;margin-right:var(--sp-1h);align-self:center}
.ans-plat .ans-hl ul{list-style:none;padding:0}
.ans-plat .ans-hl li{display:flex;gap:var(--sp-2);align-items:flex-start}
.ans-plat .ans-hl li::before{content:"·";flex:none}
.ans-plat .ans-hl li.man::before{content:"團隊"}
.ans-objs h3{font-size:var(--fs-md);margin:var(--sp-2) 0 var(--sp-2h);display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
.ans-objs h3 .sub{font-size:var(--fs-2xs);font-weight:400;color:var(--muted)}
.ans-objs .obj{border:1px solid var(--line2);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-3h);margin-bottom:var(--sp-2h);background:var(--card2)}
.ans-objs .obj .q{font-weight:700;margin-bottom:var(--sp-2)}
.ans-objs .obj .fact,.ans-objs .obj .talk{font-size:var(--fs-sm);line-height:1.55;color:var(--ink2);display:flex;gap:var(--sp-2);align-items:flex-start;margin-top:var(--sp-1h)}
.ans-objs .obj .k{flex:none;font-size:var(--fs-3xs);font-weight:700;border-radius:var(--r-xs);padding:1px 6px;margin-top:3px}
.ans-objs .obj .fact .k{background:var(--info-soft);color:var(--info)}
.ans-objs .obj .talk .k{background:var(--accent-soft);color:var(--brand-gold-deep)}
/* 手機：基金欄收窄，數字欄先露到出嚟（基金欄照舊釘住左邊，橫捲睇其餘） */
@media (max-width:640px){.ans-tbl col.c-fund{width:190px}.ans-tbl{min-width:760px}.ans-side .kpis{grid-template-columns:1fr 1fr 1fr}}
/* 09-15 第二輪：對比版要整齊 —— 揀選兩欄等闊、並排兩格等高、圖＋備忘一行兩卡等高、逐項對照最尾 */
.ans-pick.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:start}
.ans-pick.two>.fld{min-width:0}
@media (max-width:760px){.ans-pick.two{grid-template-columns:1fr}}
.ans-cmp{margin-bottom:0}
.ans-side .name span{min-width:0}
.ans-side .kpi{min-height:78px}
.ans-cmpgrid{margin-top:var(--sp-4)}
@media (min-width:1100px){.ans-cmpgrid.f-grid.two{grid-template-columns:1fr 1fr}}
.ans-cmpgrid>.f-card{display:flex;flex-direction:column}
.ans-memo pre{flex:1 1 auto;margin-top:var(--sp-3)}
.ans-memo #ansMemoChart{min-height:180px}
.ans-cmptbl th:first-child,.ans-cmptbl td:first-child{white-space:normal}
/* 09-15 第三輪：對比兩邊對等揀選（計劃→基金）；平台優勢先揀計劃再出三張圖 */
.ans-picker{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3h);background:var(--card2);display:grid;gap:var(--sp-2)}
.ans-picker .who{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ans-picker .fld{min-width:0}
.ans-pick.two .ans-picker{min-width:0}
.ans-platcharts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-3)}
@media (max-width:1000px){.ans-platcharts{grid-template-columns:1fr}}
.ans-platcharts .evb .chart{margin-top:var(--sp-2)}
.ans-plattbl-wrap{margin-top:var(--sp-3)}
.ans-plattbl-wrap .scroll{margin-top:var(--sp-2)}
.ans-plat .ans-hl li>span{flex:1 1 auto;min-width:0}
/* 09-15 第四輪：hero 右上固定「答案模式／進階模式」；hero 入面計劃選單；對比 2–4 隻；表頭基金名 */
.mpf-head.hero{position:relative}
.mpf-viewseg{position:absolute;top:var(--sp-4);right:var(--sp-5);z-index:2;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.mpf-viewseg button{color:#fff;padding:6px 12px;font-size:var(--fs-sm)}
.mpf-viewseg button:hover{background:rgba(255,255,255,.12)}
.mpf-viewseg button.on{background:var(--accent);color:var(--accent-ink)}
.mpf-head.hero .hd{padding-right:200px}
@media (max-width:640px){.mpf-viewseg{position:static;margin-bottom:var(--sp-3)}.mpf-head.hero .hd{padding-right:0}}
.mpf-modes{display:flex;gap:var(--sp-4);align-items:flex-end;flex-wrap:wrap}
.mpf-modes .fld{display:flex;flex-direction:column;gap:var(--sp-1);min-width:280px;flex:1 1 320px;max-width:560px}
.mpf-modes .fld>span:first-child{font-size:var(--fs-xs);font-weight:600;color:rgba(255,255,255,.7)}
.mpf-modes .fld select{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:9px 12px;font-size:var(--fs-md);font-weight:500;color:var(--ink);width:100%}
.ans-card h2 .btn{margin-left:auto}
.ans-pick.n2,.ans-pick.n3,.ans-pick.n4{display:grid;gap:var(--sp-3);align-items:start}
.ans-pick.n2{grid-template-columns:1fr 1fr}.ans-pick.n3{grid-template-columns:repeat(3,1fr)}.ans-pick.n4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.ans-pick.n3,.ans-pick.n4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ans-pick.n2,.ans-pick.n3,.ans-pick.n4{grid-template-columns:1fr}}
.ans-picker .who{display:flex;align-items:center;gap:var(--sp-1h)}
.ans-picker .who .rm{margin-left:auto;border:0;background:none;color:var(--muted);font-size:var(--fs-xs);cursor:pointer;text-decoration:underline;padding:0}
.ans-picker .who .rm:hover{color:var(--bad)}
.ans-cmp.n2{grid-template-columns:1fr 1fr}.ans-cmp.n3{grid-template-columns:repeat(3,1fr)}.ans-cmp.n4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.ans-cmp.n3,.ans-cmp.n4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ans-cmp.n2,.ans-cmp.n3,.ans-cmp.n4{grid-template-columns:1fr}}
.ans-cmp.n3 .ans-side .kpis,.ans-cmp.n4 .ans-side .kpis{grid-template-columns:1fr}
.ans-cmptbl th .cmpdot,.ans-cmptbl .pill .cmpdot{margin-right:var(--sp-1)}
.ans-cmptbl th{white-space:normal;max-width:220px}
.ans-objs .obj .fact>span:last-child,.ans-objs .obj .talk>span:last-child{flex:1 1 auto;min-width:0}
/* 09-15 第四輪：12 欄 → 表最少 1240px，唔夠闊就橫捲（基金欄釘住），數字唔准截斷 */
.ans-tbl{min-width:1240px}
.ans-tbl col.c-fund{width:280px}
@media (max-width:640px){.ans-tbl{min-width:1140px}.ans-tbl col.c-fund{width:190px}}
/* 09-15 用戶：進階模式嘅分組掣／隻數／圖例擺入 hero */
.mpf-head.hero .mpf-bar.in-hero{margin:var(--sp-3h) 0 0;padding-top:var(--sp-3h);border-top:1px solid rgba(255,255,255,.14)}
.mpf-head.hero .mpf-bar.in-hero .seg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.mpf-head.hero .mpf-bar.in-hero .seg button{color:#fff}
.mpf-head.hero .mpf-bar.in-hero .seg button:hover{background:rgba(255,255,255,.12)}
.mpf-head.hero .mpf-bar.in-hero .seg button.on{background:var(--accent);color:var(--accent-ink)}
.mpf-head.hero .mpf-bar.in-hero .cnt{color:rgba(255,255,255,.7)}
.mpf-head.hero .mpf-bar.in-hero .cnt b{color:#fff}
.mpf-head.hero .mpf-bar.in-hero .lg{color:rgba(255,255,255,.7)}
/* 09-15 用戶：圖例色塊喺深底 hero 睇唔到 —— 色塊底鋪白，再疊同一個淡色（同表格格仔喺白底上一模一樣），加白邊 */
.mpf-bar .lg i.sw{background-color:#fff;border:1px solid rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.mpf-bar .lg i.sw.q1{background-image:linear-gradient(var(--q1),var(--q1)),linear-gradient(var(--q1),var(--q1))}
.mpf-bar .lg i.sw.q2{background-image:linear-gradient(var(--q2),var(--q2)),linear-gradient(var(--q2),var(--q2))}
.mpf-bar .lg i.sw.q3{background-image:linear-gradient(var(--q3),var(--q3)),linear-gradient(var(--q3),var(--q3))}
.mpf-bar .lg i.sw.q4{background-image:linear-gradient(var(--q4),var(--q4)),linear-gradient(var(--q4),var(--q4))}
.mpf-head.hero .mpf-bar.in-hero .lg i.sw{width:16px;height:14px}
/* 09-15 用戶：逐項對照表頭／較佳基金帶計劃名（同名基金分得開） */
.ans-cmptbl .ans-sch{display:block;font-size:var(--fs-2xs);color:var(--muted);font-weight:400;white-space:normal;margin-top:2px}
.ans-cmptbl td .ans-sch{margin-left:0}
/* 10-01：賣點／要留意預設摺埋（details.f-hlbox），撳摘要先打開；入面 .f-hl 唔再自己做一張卡 */
.f-hlbox{margin:var(--sp-4) 0;padding:0}
.f-hlbox>summary{cursor:pointer;list-style:none;padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm);font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:var(--sp-2)}
.f-hlbox>summary::-webkit-details-marker{display:none}
.f-hlbox>summary::before{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.f-hlbox[open]>summary::before{transform:rotate(45deg)}
.f-hlbox>.f-hl{margin:0;border:0;box-shadow:none;border-top:1px solid var(--line);border-radius:0}
/* 10-01：同計劃可轉換分組（同類／非同類）組名行 */
.f-peers tr.grp td{background:var(--bg2,var(--line2));font-size:var(--fs-xs);font-weight:700;color:var(--ink2);letter-spacing:.02em;cursor:default;padding-top:var(--sp-1h);padding-bottom:var(--sp-1h)}
.f-peers tr.grp .n{margin-left:var(--sp-2);font-family:var(--mono);color:var(--muted);font-weight:600}
/* 10-01：累積回報表橫向（期間做欄）；基金名欄釘左，一筆過／月供兩行一組 */
.f-cum{min-width:860px}
.f-cum th,.f-cum td{white-space:nowrap;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.f-cum th.fund,.f-cum td.fund{position:sticky;left:0;z-index:1;background:var(--card);min-width:150px;max-width:220px;white-space:normal;font-weight:600;vertical-align:middle}
.f-cum td.fund .cmpdot{margin-right:var(--sp-1h)}
.f-cum td.how{color:var(--muted);font-size:var(--fs-xs)}
.f-cum tr.dca td{border-top:0}
.f-cum tr:not(.dca) td{border-top:1px solid var(--line)}
.f-cum tr.me td.num{font-weight:600}
/* 10-01：基金對比 —— 基金 1 未揀，其他格灰；對比卡同類／非同類標籤 */
.ans-picker.locked{opacity:.55}
.ans-side .name .pill{margin-left:var(--sp-2);flex:none}
/* 10-01：十大持股 —— 「截至」一粒章緊貼標題（用戶親講：一定要寫明截至幾時，唔准收埋） */
.f-holdcard h2 .asof{display:inline-flex;align-items:center;margin-left:var(--sp-2);padding:2px 10px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--ink);font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;white-space:nowrap}
.f-holdcard h2 .seg{margin-left:auto}
.f-hold{min-width:520px}
.f-hold td.hn{white-space:normal;min-width:220px}
.f-hold td.hw{position:relative;min-width:150px}
.f-hold td.hw .bar{position:absolute;right:var(--sp-2);top:50%;transform:translateY(-50%);height:60%;background:var(--accent-soft);border-radius:var(--r-xs);max-width:calc(100% - var(--sp-4))}
.f-hold td.hw b{position:relative;font-variant-numeric:tabular-nums}
.f-hold tr.sum td{border-top:2px solid var(--line);font-weight:600}
/* 10-01：概覽 2×3 —— 第三行累積回報（左）｜十大持股（右），同上兩行一樣等高；冇十大 → 累積回報佔成行 */
.f-grid.ov>#holdWrap{display:flex;min-width:0}
.f-grid.ov>#holdWrap>.f-holdcard{flex:1;display:flex;flex-direction:column;min-width:0}
.f-grid.ov>#holdWrap:empty{display:none}
.f-grid.ov>#cumCard:has(+ #holdWrap:empty){grid-column:1 / -1}
.f-grid.ov>#cumCard .f-cum{min-width:640px}
.f-grid.ov>#cumCard .f-cum th,.f-grid.ov>#cumCard .f-cum td{padding-left:var(--sp-1h);padding-right:var(--sp-1h)}
.f-grid.ov>#cumCard .f-cum th.fund,.f-grid.ov>#cumCard .f-cum td.fund{min-width:110px}
.f-holdcard .f-hold{min-width:0}
.f-holdcard h2{flex-wrap:wrap;row-gap:var(--sp-1h)}
/* 10-01：2×3 修正 —— 累積回報表半闊度放得晒（窄欄）；表下柱圖；十大期數掣自己一行、放唔落就換行 */
.f-grid.ov>#cumCard .f-cum{min-width:0;width:100%;font-size:var(--fs-xs)}
.f-grid.ov>#cumCard .f-cum th.fund,.f-grid.ov>#cumCard .f-cum td.fund{min-width:84px;max-width:140px}
.f-grid.ov>#cumCard #cumChart{margin-top:var(--sp-4);flex:1 1 auto;min-height:220px}
.f-holdcard .hold-seg{display:flex;flex-wrap:wrap;width:max-content;max-width:100%;margin:0 0 var(--sp-3)}
/* 10-01：2×3 修正 —— 累積回報表半闊度放得晒（窄欄）；表下柱圖；十大期數掣自己一行、放唔落就換行 */
.f-grid.ov>#cumCard .f-cum{min-width:0;width:100%;font-size:var(--fs-xs)}
.f-grid.ov>#cumCard .f-cum th.fund,.f-grid.ov>#cumCard .f-cum td.fund{min-width:84px;max-width:140px}
.f-grid.ov>#cumCard #cumChart{margin-top:var(--sp-4);flex:1 1 auto;min-height:220px}
.f-holdcard .hold-seg{display:flex;flex-wrap:wrap;width:max-content;max-width:100%;margin:0 0 var(--sp-3)}
/* 10-01 第二輪：一筆過／月供分兩張表 */
.cum-h{font-size:var(--fs-sm);font-weight:700;color:var(--ink2);margin:var(--sp-3) 0 var(--sp-1h)}
.cum-h:first-child{margin-top:0}
.f-cum tr td{border-top:1px solid var(--line)}
/* 10-01 第三輪：累積回報名格出全名＋「本基金」細標籤；表頭可排序 */
.f-cum td.fund .me-tag{margin-left:var(--sp-1h);font-size:var(--fs-2xs);padding:0 6px;background:var(--accent-soft);color:var(--ink2);vertical-align:middle}
.f-cum th.sortable{cursor:pointer;user-select:none;white-space:nowrap}

/* ── iPad 1180：funddetail ── 基金詳情頁（強積金 #f=<代號>／投連 #f=<公司>/<計劃>/<基金>）：10-03 iPad 橫向 1180×820 版面。
   全部 selector 以 #mpfFund 開頭（只有 mpf.html／ilas.html 嘅詳情 section 有呢個 id）—— 列表、答案模式、RADAR、模擬器零影響。
   閘：tools/headless/run.sh mpf-fund-ipad mpf-fund-ipad-en ilas-fund-ipad ilas-fund-ipad-en（fund-ipad.spec.js 量橫捲／字級／撳範圍／首屏／鐵律 7）。
   ① 鐵律 7：圖表卡同明細卡一律上下疊、各佔全闊（取代上面 .f-grid.two／.f-grid.ov 嘅 3fr 2fr／11fr 9fr 並排 —— 並排令同類表 436–489px 塞 352px 要橫捲、
      iPad 只見到「1 年」一欄）。全闊之後同類比較／同計劃可轉換／累積回報表一眼見齊所有欄。表內直向仍可捲（長同類表唔撐長頁面）。 */
#mpfFund .f-grid.two,#mpfFund .f-grid.two.ov{grid-template-columns:minmax(0,1fr)}
#mpfFund .f-grid.ov>.f-card .f-peerwrap{flex:none;min-height:0;max-height:480px}
#mpfFund .f-grid.ov>#cumCard .f-cum{font-size:var(--fs-md)}
#mpfFund .f-grid.ov>#cumCard .f-cum th.fund,#mpfFund .f-grid.ov>#cumCard .f-cum td.fund{min-width:150px;max-width:240px}
#mpfFund .f-grid.ov>#cumCard #cumChart{min-height:0}
/* ② 字級：可見文字最少 12px（--fs-xs，跟文字大細縮放）；風險級別格跟住字放大 */
#mpfFund .riskscale{display:flex;max-width:100%}
#mpfFund .riskscale i{flex:0 1 20px;min-width:0;width:auto;height:20px;font-size:var(--fs-xs)}
/* hero 六格：內容區夠闊（≥800，以 #mpfFund 自己闊度計，唔睇 viewport）先用一行六格，「3 年最大跌幅」格多啲位（佢個副題有兩段日期，最長），
   其餘五格等分；風險級別七格跟格闊縮（唔撐闊條欄）。窄過 800 照用上面 @media 嘅 3／2 格。 */
#mpfFund{container-type:inline-size;container-name:fdetail}
@container fdetail (min-width:800px){#mpfFund .f-hkpis{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr) minmax(0,1fr)}}
#mpfFund .chart-tick,#mpfFund .chart-val{font-size:var(--fs-xs)}
#mpfFund .f-stat .f-stamp,#mpfFund .f-card td small.win,#mpfFund .f-peers td.pn small,#mpfFund .f-peers td.sub2,#mpfFund .f-cum td.fund .me-tag{font-size:var(--fs-xs)}
#mpfFund .f-peers td.pn .logo.sm{width:26px;height:26px}
/* ③ 撳範圍最少 44px：返回列表（借 .th-main 頂內距，唔推低 hero）、tab／期間／派息模式 .seg、摘要行、「呢啲數點計」、可排序表頭 */
#mpfFund .f-back{min-height:44px;margin:calc(var(--sp-3) * -1) 0 0;padding:0 var(--sp-3) 0 0}
#mpfFund .seg button{min-height:44px}
#mpfFund .f-card h2 .seg button{padding:0 var(--sp-3);font-size:var(--fs-md)}
#mpfFund .f-hlbox>summary{min-height:44px}
#mpfFund .f-how>summary{min-height:44px;padding:var(--sp-3) 0;box-sizing:border-box;font-size:var(--fs-sm)}
#mpfFund .tbl th.sortable{height:44px}
/* 比較格嘅 ×（移除比較）：撳範圍 44×44，畫出嚟嘅圓仍然 18px（破壞性動作唔搶眼）；負 margin 唔撐高格名行 */
#mpfFund .f-stat .f-fund .l{overflow:visible}
#mpfFund .f-stat .f-fund .l .rm{position:relative;width:44px;height:44px;margin:-13px -13px -13px auto;background:transparent}
#mpfFund .f-stat .f-fund .l .rm::before{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--neutral-soft)}
#mpfFund .f-stat .f-fund .l .rm:hover{background:transparent}
#mpfFund .f-stat .f-fund .l .rm:hover::before{background:var(--bad-soft)}
#mpfFund .f-stat .f-fund .l .rm svg{position:relative}
/* 圖軸字放大到 12px 之後，單位價 4 位小數（14.0000）闊過 charts.js 左邊預留位 —— 准佢出少少落卡內距，唔好裁走頭一個字 */
#mpfFund .chart svg{overflow:visible}
/* ── iPad 1180：mpflist ── */
/* 10-03 任務書（iPad 11 吋橫向 1180×820，側欄 232 → 內容區約 900px）：強積金資料庫（簡易模式三分頁＋進階模式列表）同投連資料庫列表。
   範圍只限呢兩頁嘅列表（body[data-page="mpf-db"|"ilas-db"] 嘅 #mpfList／#mpfHome；基金詳情 #mpfFund 唔郁）。
   闊窄一律睇列表區自己闊度（@container mpfl，DESIGN 09-21「絕對整齊」：唔准 @media 判欄數、唔准 JS 量闊度）：
     ≥1400：同以前一模一樣（進階／投連全表）；<1400：累積回報收 1／3／6 個月去「短期回報」組、風險組收重複「風險級別」、欄闊按內容（table-layout:auto）；
     <1290：簡易模式欄分兩組（.seg 切換）；<1000：收「類別」欄（寫喺基金名下面）、投連收「貨幣」欄（寫喺最新價頂）。
   字級全部用 token（跟「文字大細」）；撳得嘅嘢 ≥44px；select 選中項唔截斷；基金副題可以摺行唔「…」。 */
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList,body[data-page="mpf-db"] #mpfHome{container-type:inline-size;container-name:mpfl}
/* 表最少闊（以前 JS 寫 inline；而家 JS 傳欄數 --nv，算式一樣） */
body[data-page="mpf-db"] #mpfList .mpf-tbl{min-width:calc(686px + var(--nv,9) * 80px)}
body[data-page="ilas-db"] #mpfList .mpf-tbl{min-width:calc(666px + var(--nv,9) * 100px)}
/* 窄位先出嘅嘢：闊位一律收埋 */
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .g-nar{display:none}
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-more{display:none}
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .fundcell .sub.cat2{display:none}
body[data-page="ilas-db"] #mpfList .mpf-tbl .cur2{display:none}
body[data-page="mpf-db"] #mpfHome .ans-cgseg{display:none}
/* 開關行入咗篩選 grid：闊位佔成行（同以前一樣喺篩選下面，間距 12+2＝以前 14） */
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tools>.mpf-toggles{grid-column:1 / -1;margin-top:2px}
.ilas-divnote{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2)}

/* 字級：11px／10px 嘅細字升 12px，表頭／副題／篩選標題升 13px（所有闊度） */
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) :is(#mpfList,#mpfHome) :is(.fundcell .sub,.mpf-tbl td.sub2,.tbl thead th,.mpf-tools .fld>span:first-child,.mpf-modes .fld>span:first-child,.f-card h2 .sub){font-size:var(--fs-sm)}
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) :is(#mpfList,#mpfHome) :is(.mpf-tbl td.mono .d,.mpf-tbl .price .d,.fundcell .logo.txt,.cur2){font-size:var(--fs-xs)}
body[data-page="mpf-db"] #mpfHome :is(.evb h3 .sub,.ans-cal .c .l,.ans-cal .c .v2,.ans-side .who,.ans-picker .who,.ans-cmptbl .ans-sch,.ans-objs h3 .sub,.ans-objs .obj .k,.f-stat .f-stamp,.ans-plat .ans-hl li.man::before){font-size:var(--fs-xs)}

/* 撳得嘅嘢 ≥44px（所有闊度）：.seg 掣／select／搜尋格／checkbox 整個 label／置頂／清除篩選／可排序表頭／顯示更多／小掣／摺埋行 */
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) :is(#mpfList,#mpfHome) .seg button{min-height:44px}
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) :is(#mpfList,#mpfHome) :is(select,input[type=search]){min-height:44px;box-sizing:border-box}
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-toggles :is(label.chk,.pinchk,.clear,.mpf-more){min-height:44px;box-sizing:border-box}
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-toggles .clear{padding:0 var(--sp-2)}
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) :is(#mpfList,#mpfHome) .tbl thead th.sortable{height:44px}
:is(body[data-page="mpf-db"],body[data-page="ilas-db"]) :is(#mpfList,#mpfHome) .tbl tr.th-more td .btn{min-height:44px}
body[data-page="mpf-db"] #mpfHome :is(.ans-card h2 .btn.sm,.ans-evacts .btn.sm){min-height:44px}
body[data-page="mpf-db"] #mpfHome .ans-picker .who .rm{min-height:44px;padding:0 var(--sp-2);margin-right:calc(-1 * var(--sp-2))}   /* 破壞性：撳範圍夠大但視覺照舊細字灰色，靠右遠離揀選格 */
body[data-page="mpf-db"] #mpfHome .ans-plattbl-wrap>summary{min-height:44px;display:flex;align-items:center}
/* 投連「篩選」掣（窄位先見）：深底 hero 上嘅次要掣，揀咗幾多個次要篩選寫喺金色圓點 */
body[data-page="ilas-db"] #mpfList .mpf-more{align-items:center;gap:var(--sp-1h);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;font-size:var(--fs-sm)}
body[data-page="ilas-db"] #mpfList .mpf-more:hover{background:rgba(255,255,255,.18);color:#fff}
body[data-page="ilas-db"] #mpfList .mpf-more svg{width:16px;height:16px}
body[data-page="ilas-db"] #mpfList .mpf-more .n{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center}
body[data-page="ilas-db"] #mpfList .mpf-more .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-3px 2px 0 2px;transition:transform .15s}
body[data-page="ilas-db"] #mpfList .more-open .mpf-more .chev{transform:rotate(-135deg);margin-top:3px}

/* 平台對照表喺 <details class="f-how"> 入面（f-how 12px）：表內數據返 14px、表頭可以摺行（英文長表頭唔撐爆卡） */
body[data-page="mpf-db"] #mpfHome .ans-plattbl-wrap .scroll{font-size:var(--fs-md)}
body[data-page="mpf-db"] #mpfHome .ans-plattbl thead th{white-space:normal;line-height:1.25;vertical-align:bottom}
body[data-page="mpf-db"] #mpfHome .ans-plattbl .fundcell .nm{white-space:normal}

/* 鐵律 7：基金對比嘅增長圖卡同回報柱圖卡上下疊、各佔全闊（所有闊度；取代 09-15 ≥1100 兩卡並排） */
body[data-page="mpf-db"] #mpfHome .ans-cmpgrid.f-grid.two{grid-template-columns:minmax(0,1fr)}

/* 簡易模式 hero：計劃選單最少 400px（中文同模式掣並排；英文長名自己落一行，唔截斷） */
@container mpfl (min-width:641px){body[data-page="mpf-db"] #mpfHome .mpf-modes .fld{flex:1 1 400px;min-width:400px}}

/* ── 窄位表（列表區 <1400）：進階模式／投連 ── */
@container mpfl (max-width:1399.98px){
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList #mgroup button.g-nar{display:inline-block}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl .cx{display:none}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl{table-layout:auto;min-width:0}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl col{width:auto}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl col.c-fund{width:24%}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl :is(thead th:first-child,td.fund){width:226px;min-width:226px;box-sizing:border-box}   /* auto 版面下基金欄唔准被數字欄擠細（手機要橫捲就橫捲，基金欄照釘住） */
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl thead th{white-space:normal;line-height:1.25}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl :is(th.num,td.num,td.price){padding-left:var(--sp-1h);padding-right:var(--sp-1h)}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl td.sub2{white-space:normal;max-width:none;overflow:visible}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl :is(td.go,th.go){padding-left:var(--sp-1);padding-right:var(--sp-1)}
}
/* ── 簡易模式表（簡易模式區 <1290）：欄分兩組，卡頭 .seg 切換 ── */
@container mpfl (max-width:1289.98px){
  body[data-page="mpf-db"] #mpfHome .ans-cgseg{display:inline-flex}
  body[data-page="mpf-db"] #mpfHome :is(.ans-tbl[data-cg="ret"] .cg-more,.ans-tbl[data-cg="more"] .cg-ret){display:none}
  body[data-page="mpf-db"] #mpfHome .ans-tbl{table-layout:auto;min-width:0}
  body[data-page="mpf-db"] #mpfHome .ans-tbl col{width:auto}
  body[data-page="mpf-db"] #mpfHome .ans-tbl col.c-fund{width:28%}
  body[data-page="mpf-db"] #mpfHome .ans-tbl :is(thead th:first-child,td.fund){width:260px;min-width:260px;box-sizing:border-box}
  body[data-page="mpf-db"] #mpfHome .ans-tbl thead th{white-space:normal;line-height:1.25}
  body[data-page="mpf-db"] #mpfHome .ans-pick:is(.n3,.n4),body[data-page="mpf-db"] #mpfHome .ans-cmp:is(.n3,.n4){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 基金名／副題：窄位可以摺行（iPad 冇 hover，「…」之後睇唔到全名）；名最多三行 */
@container mpfl (max-width:1399.98px){
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl .fundcell .nm{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .fundcell .sub{white-space:normal;overflow:visible}
}
@container mpfl (max-width:1289.98px){
  body[data-page="mpf-db"] #mpfHome .ans-tbl .fundcell .nm{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  body[data-page="mpf-db"] #mpfHome .ans-tbl .fundcell .sub{white-space:normal;overflow:visible}
}
/* ── 列表區 <1000：收「類別」欄（寫喺基金名下面）；投連收「貨幣」欄（寫喺最新價頂） ── */
@container mpfl (max-width:999.98px){
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl .cx2{display:none}
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl .fundcell .sub.cat2{display:block}
  body[data-page="ilas-db"] #mpfList .mpf-tbl td.price .cur2{display:block;color:var(--muted);line-height:1.2}
  /* 表只有一個計劃（進階模式揀咗計劃／投連按計劃）：每行嘅「計劃」副題全部一樣 → 收起，淨係留類別（計劃名已經喺 hero 選單同卡頭） */
  :is(body[data-page="mpf-db"],body[data-page="ilas-db"]) #mpfList .mpf-tbl.one-scheme .fundcell .sub:not(.cat2){display:none}
}

/* ── hero 篩選（列表區 760–1399）：select 一律唔截斷 ── */
/* 進階模式：計劃（最長，兩格）｜類別｜風險級別 一行；搜尋｜開關（置頂／停止報價／清除，三格）一行 */
@container mpfl (min-width:760px) and (max-width:1399.98px){
  body[data-page="mpf-db"] #mpfList .mpf-tools{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"sch sch cat rsk" "srch tog tog tog"}
  body[data-page="mpf-db"] #mpfList .mpf-tools>.f-sch{grid-area:sch}
  body[data-page="mpf-db"] #mpfList .mpf-tools>.f-cat{grid-area:cat}
  body[data-page="mpf-db"] #mpfList .mpf-tools>.f-rsk{grid-area:rsk}
  body[data-page="mpf-db"] #mpfList .mpf-tools>.search{grid-area:srch}
  body[data-page="mpf-db"] #mpfList .mpf-tools>.mpf-toggles{grid-area:tog;margin-top:0;align-self:end;flex-wrap:wrap;row-gap:0}
  body[data-page="mpf-db"] #mpfList .mpf-tools select{max-width:none}
}
/* 投連 1100–1399：公司｜計劃（兩格）｜搜尋 ／ 貨幣｜類別｜風險級別 ／ 開關（全部見到，唔使「篩選」掣） */
@container mpfl (min-width:1100px) and (max-width:1399.98px){
  body[data-page="ilas-db"] #mpfList .mpf-tools.six{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"prov plan plan srch" "cur cat rsk ." "tog tog tog tog"}
}
/* 投連 760–1099（iPad）：主篩選（公司｜計劃兩格 ／ 搜尋｜置頂＋「篩選」掣＋清除）留 hero；次要（貨幣／類別／風險級別／派息／停止報價）收入「篩選」掣，撳開原位展開 */
@container mpfl (min-width:760px) and (max-width:1099.98px){
  body[data-page="ilas-db"] #mpfList .mpf-tools.six{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"prov plan plan" "srch tog tog"}
  body[data-page="ilas-db"] #mpfList .more-open .mpf-tools.six{grid-template-areas:"prov plan plan" "srch tog tog" "cur cat rsk"}
  body[data-page="ilas-db"] #mpfList .mpf-tools.six .sec{display:none}
  body[data-page="ilas-db"] #mpfList .more-open .mpf-tools.six .fld.sec{display:flex}
  body[data-page="ilas-db"] #mpfList .more-open .mpf-tools.six label.chk.sec{display:inline-flex}
  body[data-page="ilas-db"] #mpfList .mpf-tools.six .mpf-more{display:inline-flex}
  body[data-page="ilas-db"] #mpfList .mpf-tools.six>.mpf-toggles{grid-area:tog;margin-top:0;align-self:end;flex-wrap:wrap;row-gap:0}
}
@container mpfl (min-width:760px) and (max-width:1399.98px){
  body[data-page="ilas-db"] #mpfList .mpf-tools.six>.f-prov{grid-area:prov}
  body[data-page="ilas-db"] #mpfList .mpf-tools.six>.f-plan{grid-area:plan}
  body[data-page="ilas-db"] #mpfList .mpf-tools.six>.search{grid-area:srch}
  body[data-page="ilas-db"] #mpfList .mpf-tools.six>.f-cur{grid-area:cur}
  body[data-page="ilas-db"] #mpfList .mpf-tools.six>.f-cat{grid-area:cat}
  body[data-page="ilas-db"] #mpfList .mpf-tools.six>.f-rsk{grid-area:rsk}
  body[data-page="ilas-db"] #mpfList .mpf-tools.six select{max-width:none}
}
@container mpfl (min-width:1100px) and (max-width:1399.98px){
  body[data-page="ilas-db"] #mpfList .mpf-tools.six>.mpf-toggles{grid-area:tog;margin-top:2px}
}