/* pages.css — 主動頁、排行頁、treemap（頻道頁 Phase 5 退役）
   從 index.html 行 318–516 原樣搬出（2026-10-03 拆檔，未改內容）*/
  /* ── Check page ── */
  .check-section { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:22px; }
  .check-title { font-size:16px; font-weight:700; margin-bottom:16px; color:var(--brand); }
  .check-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:8px; }
  .check-lbl { font-size:16px; color:var(--bright); flex-shrink:0; }
  .input-prefix { display:flex; align-items:center; background:var(--card2); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .input-prefix span { padding:12px 10px; font-size:16px; color:var(--dim); border-right:1px solid var(--border); white-space:nowrap; }
  .input-prefix input { background:transparent; border:none; padding:12px 12px; font-size:16px; color:var(--bright); width:130px; text-align:right; font-family:var(--mono); }
  .input-prefix input:focus { outline:none; }
  .dca-toggle { display:flex; gap:8px; }
  .dca-btn { padding:12px 28px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--dim); font-size:16px; font-weight:600; cursor:pointer; }
  .dca-btn.active { background:rgba(var(--rgb-cheap),.12); border-color:var(--cheap); color:var(--cheap); }
  .dca-tip { font-size:16px; color:var(--dim); line-height:1.7; padding:14px 16px; background:rgba(var(--rgb-veil),.03); border-radius:8px; margin-bottom:16px; }
  .rate-presets { display:flex; gap:8px; margin-bottom:14px; }
  .rate-btn { flex:1; padding:14px 4px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--dim); font-size:16px; font-weight:600; cursor:pointer; text-align:center; line-height:1.4; }
  .rate-btn small { display:block; font-size:14px; font-weight:400; margin-top:4px; }
  .rate-btn.active { background:rgba(var(--rgb-link),.12); border-color:var(--link); color:var(--link); }
  .rate-btn.active small { color:var(--link); }
  .rate-slider-row { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .rate-slider-row input[type=range] { flex:1; height:6px; }
  .rate-num { font-family:var(--mono); font-size:16px; font-weight:700; color:var(--link); min-width:54px; text-align:right; }
  .check-calc-btn { width:100%; padding:18px; background:linear-gradient(90deg,rgba(var(--rgb-link),.15),rgba(var(--rgb-cheap),.15)); border:1px solid rgba(var(--rgb-link),.3); border-radius:10px; color:var(--bright); font-size:14px; font-weight:700; cursor:pointer; margin-top:8px; }
  .check-calc-btn:active { opacity:.8; }
  .proj-table { width:100%; border-collapse:collapse; margin-top:16px; }
  .proj-table th { font-size:16px; color:var(--dim); padding:12px 4px; text-align:center; border-bottom:1px solid var(--border); }
  .proj-table td { font-size:16px; font-family:var(--mono); padding:14px 4px; text-align:center; border-bottom:1px solid rgba(var(--rgb-veil),.05); color:var(--bright); }
  .proj-table tr:last-child td { border-bottom:none; }
  .proj-table td.year-col { color:var(--dim); font-size:16px; }
  .risk-badge { display:inline-block; padding:10px 20px; border-radius:20px; font-size:16px; font-weight:700; margin:14px 0 10px; }
  .risk-C { background:rgba(var(--rgb-cheap),.12); color:var(--cheap); border:1px solid rgba(var(--rgb-cheap),.3); }
  .risk-M { background:rgba(var(--rgb-fair),.12); color:var(--fair); border:1px solid rgba(var(--rgb-fair),.3); }
  .risk-A { background:rgba(var(--rgb-up),.12); color:var(--dear); border:1px solid rgba(var(--rgb-up),.3); }
  .suggest-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
  .suggest-chip { padding:10px 18px; border-radius:20px; font-size:16px; font-weight:700; background:rgba(var(--rgb-link),.1); color:var(--link); border:1px solid rgba(var(--rgb-link),.25); }
  .etf-inputs { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
  .etf-code-inp { background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:16px 18px; font-size:16px; color:var(--bright); font-family:var(--mono); text-align:center; letter-spacing:.08em; }
  .etf-code-inp:focus { outline:none; border-color:rgba(var(--rgb-link),.5); }
  .etf-code-inp::placeholder { font-size:16px; letter-spacing:0; color:var(--dim); }
  .health-card { background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:18px; margin-bottom:14px; }
  .health-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
  .health-code { font-size:16px; font-weight:700; font-family:var(--mono); color:var(--bright); }
  .health-name { font-size:16px; color:var(--dim); margin-top:4px; }
  .health-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .health-kv .k { font-size:14px; color:var(--dim); }
  .health-kv .v { font-size:16px; font-family:var(--mono); font-weight:700; color:var(--bright); }
  .health-miss { font-size:16px; color:var(--dim); text-align:center; padding:16px 0; }

  /* ── Rank page ── */
  /* top 必須讓開上面那塊 sticky 表頭，否則會整塊躲到它後面（z-index 10 < 50）。
     表頭高度會隨狀態列字數變動，所以由 search.js 的 _syncHdrH() 量完寫進
     --hdr-h；fallback 的 104px 是 JS 還沒跑到時的近似值 */
  .rank-sticky   { position:sticky; top:var(--hdr-h, 104px); z-index:10; background:var(--bg); padding-bottom:4px; }
  /* 矮螢幕（手機橫向約 350px 高）不要黏。真機實測：全站搜尋表頭 ~100px
     ＋ 這塊 ~140px ＋ 底部導覽 62px ≈ 300px，整個排行清單一列都看不到。
     寧可讓這塊捲走，也要讓使用者看得到排行內容。 */
  @media (max-height: 520px) {
    .rank-sticky { position:static; }
  }
  /* PO Change #2：標題列（44px）＋🔍／ⓘ；收起的搜尋與說明 display:none，sticky 只剩標題列＋欄位名稱（≤120px） */
  .rank-top      { display:flex; align-items:center; gap:8px; min-height:44px; margin-bottom:4px; }
  .rank-title    { flex:1; min-width:0; font-size:17px; font-weight:700; color:var(--gold); }
  .rank-ic       { flex:0 0 auto; width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center;
                   background:none; border:1px solid var(--border); border-radius:10px; color:var(--bright);
                   font:inherit; font-size:18px; line-height:1; cursor:pointer; }
  .rank-ic.on    { border-color:var(--link); background:rgba(var(--rgb-link),.10); }
  .rank-findbox[hidden], .rank-info[hidden] { display:none; }
  .rank-info     { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-bottom:6px; }
  .rank-info-total { font-size:14px; color:var(--dim); margin-bottom:4px; }
  .rank-caveat   { font-size:13px; color:var(--dim); margin-bottom:8px; line-height:1.5; }
  .rank-info .rank-caveat { margin-bottom:0; font-size:14px; }
  .rank-caveat b { color:var(--fair); }
  .rank-find     { position:relative; margin-bottom:6px; }
  .rank-find input {
    width:100%; box-sizing:border-box; background:var(--card); color:var(--bright);
    border:1px solid var(--border); border-radius:8px; padding:10px 34px 10px 12px;
    font-size:16px; font-family:var(--sans); outline:none;
  }
  .rank-find input:focus { border-color:var(--link); }
  .rank-find input::-webkit-search-cancel-button { display:none; }
  .rank-find button {
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--dim); font-size:17px; cursor:pointer;
    padding:4px 8px; line-height:1;
  }
  .rank-find-msg { font-size:14px; margin-bottom:8px; min-height:0; line-height:1.5; }
  .rank-find-msg.hit  { color:var(--fair); }
  .rank-find-msg.miss { color:var(--dim); }
  /* 找到的那一列用靜態底色 + 整圈金框標出來（卡片化後不再用左側標線，
     那會讓左邊圓角對不齊）。不用閃爍動畫——這個 App 明確不要閃框/閃光。 */
  .rank-row.found { background:rgba(var(--rgb-fair),.14);
                    border-color:var(--fair); }
  .rank-hdr      { font-size:15px; color:var(--violet); background:rgba(var(--rgb-violet),.13); border-radius:8px; margin-bottom:6px; padding:6px 10px; }
  .rank-hdr-main { display:flex; align-items:center; margin-bottom:3px; }
  .rank-hdr-sub  { display:flex; align-items:center; gap:0; padding-left:36px; }
  /* 每個排名一張圓角卡：一列有兩行（代碼名稱 / 配息報酬），原本只靠
     4% 白的底線分隔，在深色底幾乎看不見，兩行會跟下一名黏成一團。
     卡片把兩行綁成一組，比單純加分隔線有效。圓角 10px 沿用 .rank-hdr 的語彙。 */
  .rank-row      { padding:12px 10px; margin-bottom:8px;
                   background:var(--card2); border:1px solid var(--border);   /* PO Visual Polish：與首頁 TOP10 .hot-item 同一套底牌（--card2＋--border） */
                   border-radius:10px; }
  /* CP6c：.rank-hit 覆蓋整列（→ Detail）；列內容不攔截點擊；「持股異動 ›」是疊在上面的獨立按鈕 */
  .rank-row      { position:relative; }
  .rank-hit      { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
                   background:none; border:0; border-radius:10px; cursor:pointer; z-index:0; }
  .rank-hit:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
  .rank-row:active { background:var(--card2); }
  .rank-main, .rank-sub { position:relative; pointer-events:none; }
  /* CP6c fix：近 3 月小柱狀圖要能接收指標，hover 才看得到 format.js 每根柱子的 title 報酬提示；
     點擊在 #rankRows handler 中與整列一樣開 Detail（一次只走一條） */
  .rank-sub .mini-bars { position:relative; z-index:1; pointer-events:auto; cursor:pointer; }
  /* 用金色而非紅綠——這個標記是「可點」的提示，不是漲跌方向，
     擺在報酬率（紅正綠負）旁邊用紅綠會被讀成方向。
     觸控高度 44px，以負 margin 抵銷，不撐高排名卡片（RK-1 不變） */
  .rank-flow     { position:relative; z-index:1; pointer-events:auto; min-height:44px; margin:-14px 0 -14px 8px; padding:0 6px;
                   background:none; border:0; font:inherit; font-size:11px; font-weight:700; color:var(--fair);
                   white-space:nowrap; flex-shrink:0; cursor:pointer; }
  :root[data-theme="light"] .rank-flow { color:#D97706; }   /* CP7 Visual Gate（PO）：light 持股異動字色；dark 不變 */
  .rank-flow:focus-visible { outline:2px solid var(--link); outline-offset:-2px; border-radius:6px; }
  .rank-main     { display:flex; align-items:center; }
  .rank-sub      { display:flex; align-items:center; padding-left:36px; margin-top:10px; }
  .rank-no       { width:36px; text-align:center; font-size:18px; font-weight:700; color:var(--dim); flex-shrink:0; }
  /* CP7 Visual Gate（PO）：TOP100 前三名與首頁 TOP10 同一組金／銀／銅底牌（兩主題相同）；4～100 維持一般名次字 */
  .rank-no.gold, .rank-no.silver, .rank-no.bronze { width:28px; height:28px; line-height:28px; margin:0 4px; border-radius:7px; }
  .rank-no.gold  { background:var(--rank1-bg); color:var(--rank1-fg); }
  .rank-no.silver{ background:var(--rank2-bg); color:var(--rank2-fg); }
  .rank-no.bronze{ background:var(--rank3-bg); color:var(--rank3-fg); }
  .rank-etf      { flex:1; min-width:0; padding-right:6px; }
  .rank-name     { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rank-price    { font-family:var(--mono); font-size:16px; font-weight:700; color:var(--bright); flex-shrink:0; text-align:right; margin-right:8px; min-width:44px; }
  .rank-sig      { flex-shrink:0; white-space:nowrap; }   /* PO Visual Polish 2：外觀＝首頁 TOP10 的 .sig-* 方框標籤（class 由 rank.js 加上） */
  .rank-freq     { width:68px; font-size:18px; color:var(--dim); flex-shrink:0; }
  .rank-num      { width:82px; font-size:18px; font-family:var(--mono); font-weight:600; flex-shrink:0; text-align:right; }
  .rank-yld      { width:72px; font-size:18px; font-family:var(--mono); font-weight:700; flex-shrink:0; text-align:right; }
  /* CP7 Visual Gate（PO）：排行漲跌柱用鮮明紅綠（只限排行頁；長度／排序／資料不變） */
  .rank-sub .mb[data-k="up"] .mb-bar { background:var(--vivid-up-fill) !important; }
  .rank-sub .mb[data-k="dn"] .mb-bar { background:var(--vivid-dn-fill) !important; }
  .mini-bars     { display:flex; align-items:center; gap:2px; height:26px; padding-left:6px; flex-shrink:0; }
  .rank-tag      { font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; border:1px solid; white-space:nowrap; margin-left:8px; flex-shrink:0; letter-spacing:.02em; }

  /* ── 逆向計算機 ── */

  /* ── 月月領息組合 ── */

  /* ── 主動式 ETF 買賣超 treemap ── */
  .flow-head   { padding:14px 14px 6px; display:flex; align-items:center; gap:8px; }
  .flow-head .flow-title { flex:1; min-width:0; }
  /* PO Change #3：🔍 快速找 ETF（≥ 44px）；搜尋區在 #flowChips 外，renderFlow 重繪不會清掉 */
  .flow-q-btn  { flex:0 0 auto; width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center;
                 background:none; border:1px solid var(--border); border-radius:10px; color:var(--bright); font:inherit; font-size:18px; cursor:pointer; }
  .flow-q-btn[aria-expanded="true"] { border-color:var(--link); background:rgba(var(--rgb-link),.12); }
  .flow-q-btn:disabled { opacity:.4; cursor:default; }
  .flow-q[hidden] { display:none; }
  .flow-q      { padding:0 14px 8px; }
  .flow-q input { width:100%; box-sizing:border-box; background:var(--card); color:var(--bright); border:1px solid var(--border);
                  border-radius:8px; padding:10px 12px; font-size:16px; font-family:var(--sans); outline:none; }
  .flow-q input:focus { border-color:var(--link); }
  .flow-q-list { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
  .flow-q-item { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; text-align:left;
                 background:var(--card); color:var(--bright); border:1px solid var(--border); border-radius:8px; font:inherit; cursor:pointer; }
  .flow-q-item b { font-family:var(--mono); font-size:16px; flex:0 0 auto; }
  .flow-q-item span { font-size:15px; color:var(--dim); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .flow-q-empty { font-size:14px; color:var(--dim); padding:6px 2px; }
  .flow-title  { font-size:19px; font-weight:700; letter-spacing:.02em; }
  .flow-meta   { font-size:15px; color:var(--dim); margin-top:4px; line-height:1.5; }
  .flow-totals { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px 14px 10px; }
  .flow-tot    { background:var(--card); border:1px solid var(--border); border-radius:8px;
                 padding:8px 10px; display:flex; align-items:baseline; justify-content:space-between; }
  .flow-tot span { font-size:15px; color:var(--dim); }
  /* PO Visual Polish：加碼／減碼底框＝紅／綠淡 tint（與 treemap、加減碼數字同一組 --rgb-vivid-*）；數值與內容不變 */
  .flow-tot.ft-buy  { background:rgba(var(--rgb-vivid-up),.14); border-color:rgba(var(--rgb-vivid-up),.40); }
  .flow-tot.ft-sell { background:rgba(var(--rgb-vivid-dn),.14); border-color:rgba(var(--rgb-vivid-dn),.40); }
  :root[data-theme="light"] .flow-tot.ft-buy  { background:#FFECEE; border-color:#FBC6CB; }
  :root[data-theme="light"] .flow-tot.ft-sell { background:#E6F8EE; border-color:#B7E8CB; }
  .flow-tot b    { font-size:20px; font-family:var(--mono); font-weight:700; }
  .flow-tot b.buy  { color:var(--vivid-up); }   /* 加碼＝紅（台股慣例） */
  .flow-tot b.sell { color:var(--vivid-dn); }   /* 減碼＝綠 */
  /* F2（PHASE5_PLAN §8.3）：單列橫向捲動選擇器，取代 4 欄多列換行，讓紅綠方塊早點進第一屏。
     選取色刻意用中性藍：本頁紅＝加碼、綠＝減碼，選取狀態不能借用這兩色。 */
  .flow-chips  { position:relative; display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; overflow-y:hidden;
                 padding:2px 14px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
                 scrollbar-width:none; overscroll-behavior-x:contain;
                 -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
                         mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
  .flow-chips::-webkit-scrollbar { display:none; }
  .flow-chip   { flex:0 0 auto; min-height:44px; background:var(--card); border:1px solid var(--border);
                 border-radius:22px; padding:0 16px; font:inherit; font-size:16px; color:var(--dim);
                 font-family:var(--mono); font-weight:700; cursor:pointer; white-space:nowrap;
                 scroll-snap-align:center; }
  .flow-chip.active { background:rgba(var(--rgb-link),.18); border:2px solid var(--link); color:var(--bright); }
  .flow-sel      { padding:0 14px 6px; }
  .flow-sel-name { font-size:17px; font-weight:700; color:var(--bright); line-height:1.4; }
  .flow-sel .flow-meta { margin-top:2px; }

  /* Source-aware Flow 層（§3.4.2）：與 Detail 面板同位置的覆蓋層；疊放順序依 stack（.over-detail） */
  .flow-layer { position:fixed; left:50%; transform:translateX(-50%);
                top:var(--hdr-h, 104px); bottom:var(--nav-h); width:100%; max-width:430px;
                z-index:39; background:var(--bg); overflow-y:auto; border-top:1px solid var(--border); }
  .flow-layer.over-detail { z-index:41; }
  .flow-layer[hidden] { display:none; }
  body.dt-collapsed .flow-layer.over-detail { top:0; }
  body.gs-ckm .flow-layer { display:none; }
  .flow-layer-hd { position:sticky; top:0; z-index:2; background:var(--bg); padding:8px 10px;
                   border-bottom:1px solid var(--border); }
  .flow-layer-hd button { min-height:44px; padding:0 14px; background:none; color:var(--bright);
                          border:1px solid var(--border); border-radius:10px; font:inherit; font-size:16px; cursor:pointer; }

  .treemap     { position:relative; width:100%; height:520px; margin:0 auto;
                 background:var(--card); border-top:1px solid var(--border);
                 border-bottom:1px solid var(--border); overflow:hidden; }
  .tm-cell     { position:absolute; overflow:hidden; border:1px solid var(--tm-border);
                 display:flex; flex-direction:column; align-items:center; justify-content:center;
                 text-align:center; padding:2px; cursor:pointer; }
  .tm-name     { font-weight:700; line-height:1.15; word-break:break-all; }
  /* CP7 fix：格內文字色由 flow.js 依實際混色背景選黑／白（對比 ≥ 4.5），不再用 opacity 淡化 */
  .tm-amt      { font-family:var(--mono); line-height:1.2; }
  .tm-etf      { font-family:var(--mono); line-height:1.2; }
  /* 中間調格子：黑白字都不足 4.5 時，小字加淡底襯補足對比（格子本身的顏色與透明度不變） */
  /* CP7 Visual Gate（PO：不要羽化光暈）：對比改由 flow.js _flowFill 調整格子明度保證（黑／白字 ≥ 4.6），正常不會出現弱格；
     以下只是保險，萬一出現也只是無陰影、無羽化的淡底 */
  .tm-weak .tm-amt, .tm-weak .tm-etf { padding:0 3px; border-radius:4px; }
  .tm-weak-l .tm-amt, .tm-weak-l .tm-etf { background:rgba(0,0,0,.28); }
  .tm-weak-d .tm-amt, .tm-weak-d .tm-etf { background:rgba(255,255,255,.4); }
  /* 畫不出 treemap 時框框縮成文字高度——520px 的空框裡浮一行字很難看，
     而且會把下方的海外持股清單整個推出畫面外 */
  .treemap.tm-slim { height:auto; }
  .treemap.tm-slim .tm-empty { height:auto; padding:30px 24px; }
  .tm-empty.sea { background:var(--sea); color:var(--on-strong); }
  .tm-empty    { display:flex; align-items:center; justify-content:center; height:100%;
                 color:var(--dim); font-size:15px; text-align:center; padding:0 24px; }

  .flow-tip    { min-height:24px; padding:10px 14px 0; font-size:15px; color:var(--bright);
                 font-family:var(--mono); }
  .flow-note   { margin:10px 14px; padding:11px 13px; background:var(--card2);
                 border:1px solid var(--border); border-left:3px solid var(--fair);
                 border-radius:6px; font-size:14px; color:var(--dim); line-height:1.65; }
  .flow-note b { color:var(--bright); }
  .flow-cover  { margin:0 14px 18px; font-size:13px; color:var(--dim); line-height:1.7; }

  /* 海外持股異動條列：這些標的查不到台股收盤價算不出金額，畫不進 treemap，
     但「買賣了什麼、幾股」PCF 有給，用清單補上。長度可能到 3、40 檔，給捲軸。 */
  .np-wrap  { margin:10px 14px 0; border:1px solid var(--border); border-radius:8px;
              background:var(--card); overflow:hidden; }
  /* 藍底白字＝海外。全海外與混合兩種情況都會出現這塊，標示掛在這裡才蓋得全
     （上面那個空狀態框只有「全海外」那 3 檔才看得到） */
  .np-hd    { padding:9px 12px; font-size:13px; color:var(--on-strong);
              background:var(--sea); }
  .np-hd b  { color:var(--on-strong); }
  .np-wrap  { border-color:var(--sea); }
  .np-list  { max-height:290px; overflow-y:auto; }
  .np-row   { display:flex; align-items:center; gap:9px; padding:9px 12px;
              border-bottom:1px solid var(--border); font-size:14px; }
  .np-row:last-child { border-bottom:0; }
  .np-id    { flex:0 0 auto; min-width:62px; font-family:var(--mono);
              color:var(--bright); font-size:13px; }
  .np-mkt   { margin-left:5px; padding:1px 4px; border-radius:3px; font-size:11px;
              background:var(--card2); color:var(--dim); border:1px solid var(--border); }
  .np-name  { flex:1 1 auto; min-width:0; color:var(--dim); font-size:13px;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .np-d     { flex:0 0 auto; font-family:var(--mono); font-size:13px; text-align:right; }
  /* CP7 Visual Gate（PO）：360px 排行第二行（頻率／報酬／殖利率／柱／持股異動）原本超出畫面右緣；
     只在窄螢幕收窄欄寬與按鈕內距，觸控高度 44px 與功能不變 */
  @media (max-width:380px) {
    .rank-freq { width:56px; }
    .rank-num  { width:70px; }
    .rank-yld  { width:68px; white-space:nowrap; }
    .rank-flow { margin-left:2px; padding:0 1px; }
  }

  /* 殖利率排行（工具頁）：卡片沿用 .rank-row，第二層改四欄 */
  .yr-cols       { display:grid; grid-template-columns:62px 92px 72px minmax(62px,1fr); align-items:center; padding-left:36px; gap:0; }
  .rank-hdr-sub.yr-cols { padding-left:36px; font-size:12px; }
  .yr-c          { text-align:center; }
  .yr-r          { text-align:right; }
  .yr-state      { margin:6px 12px; font-size:12px; color:var(--dim); }
  .yr-freq       { font-size:15px; color:var(--num-accent); }
  .yr-rate       { font-size:18px; font-weight:700; color:var(--num-accent); text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .yr-vol        { font-size:16px; color:var(--bright); text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .yr-basis-cell { text-align:right; }
  .yr-label      { display:inline-block; border-radius:4px; padding:2px 5px; font-size:11px; line-height:1.5; border:1px solid var(--border); color:var(--dim); white-space:nowrap; }
  .yr-label.estimate { color:var(--warn); border-color:rgba(var(--rgb-warn),.4); background:rgba(var(--rgb-warn),.06); }
  .yr-label.trailing { color:var(--cheap); border-color:rgba(var(--rgb-cheap),.35); }
  .yr-basis      { margin-top:8px; }
  .yr-events     { margin:6px 0; padding-left:18px; font-size:13px; color:var(--dim); line-height:1.5; }
  @media (max-width:360px) { .yr-cols { grid-template-columns:54px 82px 62px minmax(56px,1fr); padding-left:8px; } .rank-hdr-sub.yr-cols { padding-left:8px; } }