/* 強積金頁：列表 + 基金頁。全部顏色跟 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-star{width:80px}.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)}
.stars{display:inline-flex;gap:1px;vertical-align:middle}
.stars svg{width:12px;height:12px;fill:var(--brand-gold)}
.stars svg.off{fill:var(--line)}
.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)}
.f-hkpis .stars svg.off{fill:rgba(255,255,255,.22)}
@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 .stars{vertical-align:middle}
.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}.ans-tbl col.c-star{width:84px}
@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}