/* ============================================================
   籌碼小宇 ETF 行動版 Phase 1 — 設計 tokens
   ★ 配色＝【正式站 web/index.html 原本的兩套主題，逐值照搬】
     （使用者 2026-08-03 指示：「我是要我正式站原本的那兩種配色」，
      故不採用原指令 §5 的自訂色票；版型仍照參考圖，只有顏色回正式站。）
     淺色＝正式站預設（台紙米色感）；深色＝正式站 data-theme="dark"。
     品牌色是【青綠 teal】不是藍色；動作色跟著漲跌走：
     新進/加碼＝紅系、減碼/出清＝綠系（正式站 .pill-new/.pill-add/.pill-cut/.pill-exit 口徑）。
   ============================================================ */
:root{
  /* ---- 正式站淺色（:root） ---- */
  --bg:#f5f0e3; --card:#fffdf7; --card2:#f8f2e6; --head:#f6f0e2;
  --panel:#fffdf7;
  --line:#e6ddc9; --line2:#efe8d7; --line-strong:#d6cbb3;
  --tx:#0f172a; --tx2:#3a3527; --tx3:#655e4f; --tx4:#a99f8a;
  --brand:#0f766e; --brand-bg:#e4f1ee; --brand-line:#bfe0da; --brand-hover:#115e59;
  --brand-solid:#0f766e;   /* 實心按鈕底（配白字）＝正式站 --teal-d */
  --up:#d92d20; --up-bg:#fbe9e3; --dn:#15803d; --down-bg:#e6f3e6;
  --gold:#b45309; --gold-bg:#fbf1dd; --gold-line:#eed9ac;
  --danger-ink:#b42318; --pos-ink:#166534; --warn-ink:#92400e;
  --danger-line:#f5b3ad; --pos-line:#b7e2c6;
  /* 動作色（正式站 pill 口徑：新進/加碼紅、減碼/出清綠） */
  --act-add:#b42318; --act-up:#d92d20; --act-down:#15803d; --act-exit:#166534;
  --act-add-bg:#fbe9e3; --act-up-bg:#fbe9e3; --act-down-bg:#e6f3e6; --act-exit-bg:#e6f3e6;
  /* 圓環色盤（正式站 --dv*） */
  --dv1:#2a78d6; --dv2:#1baf7a; --dv3:#4a3aa7; --dv4:#e87ba4; --dv5:#eb6834;
  --dv-oth:#b8ae94; --dv-cash:#b45309; --dv-fut:#0e7c86; --dv-opt:#a03a8c; --dv-fx:#5b6b8c;
  --sh-md:0 2px 8px rgba(60,50,30,.07),0 1px 2px rgba(60,50,30,.04);
  --r-card:18px; --r-box:12px; --r-chip:999px;
  --pad-page:16px; --pad-card:15px;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --sans:'Noto Sans TC',system-ui,-apple-system,'PingFang TC','Microsoft JhengHei',sans-serif;
  color-scheme:light;
}
/* ---- 正式站深色（:root[data-theme="dark"]），逐值照搬 ---- */
:root[data-theme="dark"]{
  --bg:#0b1220; --card:#152238; --card2:#0e1a2e; --head:#0e1a2e;
  --panel:#111c30;
  --line:#22324d; --line2:#1a2740; --line-strong:#2a3a52;
  --tx:#e6edf6; --tx2:#c3ccd7; --tx3:#8aa0bd; --tx4:#6a7a92;
  --brand:#2dd4bf; --brand-bg:#0e3b38; --brand-line:#1f4a44; --brand-hover:#14b8a6;
  --brand-solid:#0d9488;   /* 深色下 #2dd4bf 配白字對比不足，實心底改用正式站 --teal-d */
  --up:#ef4444; --up-bg:#2b1416; --dn:#22c55e; --down-bg:#0f2b1e;
  --gold:#fbbf24; --gold-bg:#2a2110; --gold-line:#4d3c17;
  --danger-ink:#f87171; --pos-ink:#4ade80; --warn-ink:#fcd34d;
  --danger-line:#6d2822; --pos-line:#2f6b43;
  --act-add:#f87171; --act-up:#ef4444; --act-down:#22c55e; --act-exit:#4ade80;
  --act-add-bg:#2b1416; --act-up-bg:#2b1416; --act-down-bg:#0f2b1e; --act-exit-bg:#0f2b1e;
  --dv1:#3987e5; --dv2:#199e70; --dv3:#9085e9; --dv4:#d55181; --dv5:#d95926;
  --dv-oth:#4b5a72; --dv-cash:#c98500; --dv-fut:#2bb3c0; --dv-opt:#d268bf; --dv-fx:#8fa3c9;
  --sh-md:0 2px 8px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}
/* 深色下的陰影/遮罩需要加重（正式站 --sh-* 同款做法） */
:root[data-theme="dark"] .m-modal-scrim{background:rgba(0,0,0,.6)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--tx); font-family:var(--sans);
  font-size:15px; line-height:1.55; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit}
[hidden]{display:none!important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)} .dn{color:var(--dn)} .flat{color:var(--tx3)}

/* ---------- 頁首 ---------- */
.m-header{
  position:sticky;top:0;z-index:40;background:var(--head);
  border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) var(--pad-page) 10px;
}
.mh-row{display:flex;align-items:center;gap:10px;min-height:44px}
.mh-brand{
  width:34px;height:34px;border-radius:10px;background:var(--brand-solid);
  color:#fff;font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none;
}
.mh-title{flex:1;min-width:0}
.mh-title b{font-size:16px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-title span{font-size:12px;color:var(--tx3);display:block}
.mh-freshness{margin-top:5px;color:var(--tx3);font-size:12px;line-height:1.6;white-space:normal;overflow-wrap:anywhere}
.mh-badge{
  flex:none;font-size:11px;color:var(--tx2);border:1px solid var(--line);
  background:var(--card2);border-radius:var(--r-chip);padding:3px 9px;
}
.mh-search,.mh-back{
  flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--tx2);border-radius:12px;
}
.mh-search:active,.mh-back:active{background:var(--card2)}

/* ---------- 廣告條（沿用正式站規則） ---------- */
/* ---------- 廣告：一條小公告跑馬燈（沿用正式站規則：股票反查頁自動隱藏、CTR 文案不動） ---------- */
.m-promo{
  display:flex;align-items:center;gap:9px;margin:8px var(--pad-page) 0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:5px 12px 5px 6px;cursor:pointer;min-height:38px;overflow:hidden;
}
.m-promo img,.m-promo-avatar-fallback{width:24px;height:24px;border-radius:50%;flex:none;object-fit:cover}
.m-promo-avatar-fallback{background:var(--brand-solid);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.m-promo-mq{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.m-promo-track{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;animation:promoMq 22s linear infinite}
.m-promo:hover .m-promo-track,.m-promo:active .m-promo-track{animation-play-state:paused}
.m-promo-track b{font-size:12.5px;font-weight:700;flex:none}
.m-promo-track i{font-size:12px;color:var(--tx3);font-style:normal;flex:none;margin-right:26px}
@keyframes promoMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .m-promo-track{animation:none}
  .m-promo-mq{overflow-x:auto;scrollbar-width:none}
}
.m-promo-cta{flex:none;font-size:12px;color:var(--brand);font-weight:700}

.m-banner{
  margin:10px var(--pad-page) 0;padding:9px 12px;border-radius:var(--r-box);
  background:var(--up-bg);color:var(--danger-ink);font-size:12.5px;border:1px solid var(--danger-line);
}

/* ---------- 主內容 ---------- */
.m-main{flex:1;padding:12px var(--pad-page) calc(96px + env(safe-area-inset-bottom))}
.m-main:focus{outline:none}

/* ---------- 底部分頁 ---------- */
.m-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-width:560px;margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--head);border-top:1px solid var(--line);
  padding:6px 4px max(26px, env(safe-area-inset-bottom));
}
.m-tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-height:44px;justify-content:center;border-radius:10px;
}
.m-tabbar .tb-ico{font-size:19px;filter:grayscale(1);opacity:.55;transition:.15s}
.m-tabbar .tb-txt{font-size:10.5px;color:var(--tx3)}
.m-tabbar a.on .tb-ico{filter:none;opacity:1}
.m-tabbar a.on .tb-txt{color:var(--brand);font-weight:700}

/* ---------- 卡片/區塊 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--pad-card);margin-bottom:12px}
.card2{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-box);padding:12px}
.card.dim{opacity:.62}
.sec-title{font-size:13px;color:var(--tx2);font-weight:700;margin:16px 2px 8px;display:flex;align-items:center;gap:6px}
.sec-title small{font-weight:400;color:var(--tx3)}

/* ---------- chips / seg ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;border:1px solid var(--line);background:var(--card);color:var(--tx2);
  border-radius:var(--r-chip);padding:7px 14px;font-size:13px;min-height:34px;
}
.chip.on{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff;font-weight:700}
.chip .cnt{font-family:var(--mono);font-size:11.5px;opacity:.8;margin-left:3px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:3px;margin-bottom:10px}
.seg button{min-height:38px;border-radius:9px;font-size:13.5px;color:var(--tx2)}
.seg button.on{background:var(--brand-solid);color:#fff;font-weight:700}

/* ---------- 動作膠囊（底色=動作色 15%、文字=動作色） ---------- */
.pill{display:inline-flex;align-items:center;border-radius:var(--r-chip);padding:2px 8px;font-size:11px;font-weight:700;line-height:1.5}
.pill-add {background:var(--act-add-bg); color:var(--act-add)}
.pill-up  {background:var(--act-up-bg);  color:var(--act-up)}
.pill-down{background:var(--act-down-bg); color:var(--act-down)}
.pill-exit{background:var(--act-exit-bg);color:var(--act-exit)}
.pill-gray{background:var(--line2);color:var(--tx3)}
.pill-gold{background:var(--gold-bg);color:var(--gold)}

/* ---------- KPI 四宮格 / 網格 ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-box);padding:9px 6px;text-align:center;min-width:0}
.kpi .k{font-size:11px;color:var(--tx3);display:block;white-space:nowrap}
.kpi .v{font-family:var(--mono);font-size:16px;font-weight:600;display:block;margin-top:1px}
.kpi .v.zero{color:var(--tx4)}
.kpi .v small{font-size:11px;font-weight:400;color:var(--tx3)}

/* ---------- 列表列 ---------- */
.rowitem{
  display:flex;align-items:center;gap:10px;padding:11px 2px;min-height:44px;
  border-bottom:1px solid var(--line);position:relative;
}
.rowitem:last-child{border-bottom:0}
.rowitem .bar{position:absolute;left:-8px;top:10px;bottom:10px;width:3px;border-radius:2px}
.rowitem .mid{flex:1;min-width:0}
.rowitem .mid .t1{font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rowitem .mid .t2{font-size:12px;color:var(--tx3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowitem .right{flex:none;text-align:right}
.rowitem .right .r1{font-family:var(--mono);font-size:14.5px;font-weight:600}
.rowitem .right .r2{font-family:var(--mono);font-size:11.5px;color:var(--tx3)}
.code{font-family:var(--mono);font-size:12px;color:var(--tx3)}

/* ---------- 表格（窄幅可橫捲） ---------- */
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
table.t{width:100%;border-collapse:collapse;font-size:12.5px;min-width:100%}
table.t th{
  color:var(--tx3);font-weight:500;text-align:right;padding:7px 6px;white-space:nowrap;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);
}
table.t th:first-child,table.t td:first-child{text-align:left}
table.t th.sortable{cursor:pointer}
table.t th.sorted{color:var(--brand)}
table.t td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td.name{text-align:left;max-width:150px;overflow:hidden;text-overflow:ellipsis}
table.t tr:last-child td{border-bottom:0}
table.t td .num,table.t td.num{font-family:var(--mono)}

/* ============================================================
   固定左欄 × 橫捲數值欄 的資料表（stx）
   參考使用者提供的 App 版型：左側標的欄釘住，右側數值可橫捲，
   每欄標題可排序。配色仍照指令 §5 深色規格（不換色）。
   結構：
   <div class="stx"><table>
     <thead><tr><th class="stx-k">股票</th><th class="stx-v sortable">…</th>…</tr></thead>
     <tbody><tr><td class="stx-k">…</td><td class="stx-v">…</td>…</tr></tbody>
   </table></div>
   ============================================================ */
.stx{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  margin-bottom:12px;position:relative;scrollbar-width:thin;
}
.stx::-webkit-scrollbar{height:5px}
.stx::-webkit-scrollbar-thumb{background:var(--tx4);border-radius:3px}
.stx table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}

/* 表頭 */
.stx thead th{
  position:sticky;top:0;z-index:3;background:var(--card2);
  color:var(--tx3);font-weight:500;font-size:11.5px;line-height:1.35;
  padding:9px 10px;white-space:nowrap;text-align:right;
  border-bottom:1px solid var(--line);vertical-align:bottom;
}
.stx thead th small{display:block;font-size:10px;color:var(--tx4);font-weight:400}
.stx thead th.sortable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.stx thead th .sar{color:var(--tx4);margin-left:2px;font-size:9px}
.stx thead th.sorted{color:var(--brand)}
.stx thead th.sorted .sar{color:var(--brand)}

/* 序號欄（成分股明細表最左） */
.stx .stx-no{
  position:sticky;left:0;z-index:2;background:var(--card);
  text-align:center;width:34px;min-width:34px;padding-left:8px;padding-right:4px;
  color:var(--tx3);font-family:var(--mono);font-size:11.5px;
}
.stx thead .stx-no{z-index:4;background:var(--card2)}
.stx tbody tr:nth-child(even) .stx-no{background:var(--card2)}
/* 有序號欄時，標的欄要往右讓開，陰影也移到標的欄右緣 */
.stx .stx-no + .stx-k{left:34px}

/* 釘住的左欄（標的） */
.stx .stx-k{
  position:sticky;left:0;z-index:2;background:var(--card);
  text-align:left;min-width:132px;max-width:158px;
  box-shadow:1px 0 0 var(--line);
}
.stx thead .stx-k{z-index:4;background:var(--card2)}
.stx tbody tr:nth-child(even) .stx-k{background:var(--card2)}
.stx tbody tr:nth-child(even) td{background:var(--card2)}

/* 資料格 */
.stx tbody td{
  padding:11px 10px;text-align:right;white-space:nowrap;font-size:13px;
  border-bottom:1px solid var(--line);vertical-align:middle;background:var(--card);
}
.stx tbody tr:last-child td{border-bottom:0}
.stx tbody td.stx-v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stx tbody tr[data-go]{cursor:pointer}
.stx tbody tr[data-go]:active td{background:var(--brand-bg)}

/* 左欄內容：色條 + 代號 + 名稱 */
.stx-name{display:flex;align-items:center;gap:8px;min-width:0}
.stx-tick{width:3px;align-self:stretch;min-height:30px;border-radius:2px;flex:none}
.stx-nm{min-width:0}
.stx-nm b{
  display:block;font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--tx);
  letter-spacing:.2px;
}
.stx-nm span{
  display:block;font-size:11px;color:var(--tx3);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;
}
/* 兩行數值格（主值 + 副值，如 漲跌 +0.31 / 3.07%） */
.stx-2{line-height:1.3}
.stx-2 b{display:block;font-weight:600;font-size:13px}
.stx-2 span{display:block;font-size:11px;opacity:.85}
.stx-sub{font-size:11px;color:var(--tx3);display:block;line-height:1.3}

/* ============================================================
   .hlist — 成分股持股明細的 App 式單行列表
   2026-08-31：原本用 .stx 橫捲表，標的欄佔掉一半寬度，市值以後的欄位
   要橫捲才看得到（實測表 559px、可視 341px）。改成一列一行：
     # / 色條 / 標的(名+代號+動作pill 或 連買賣徽章) / 市值(億) / 權重 / 張數
   當日有異動的列才多一行小字（增減張數・買賣金額・權重變動・連買賣）。
   欄寬由 .hl-mv/.hl-wt/.hl-sh 同時套在表頭與資料列 → 表頭與數字永遠對齊。
   ★ .stx 仍被 home.js 及本頁其他表格使用，不要動它
   ============================================================ */
/* overflow 必須是 clip 不能是 hidden：hidden 會讓 .hlist 變成捲動容器，
   表頭的 position:sticky 就會黏在這個永遠不捲的容器上（＝完全失效，230 列的 ETF
   捲下去就看不到欄名與「億」這個單位）。clip 不建立捲動容器，圓角照樣裁。 */
.hlist{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  margin-bottom:12px;overflow:clip;
}
.hl-head,.hl-row{display:flex;align-items:center;gap:5px;padding:0 10px}
/* --hl-top＝App 頁首實高，由 applyColWidths() 量出來寫進來（頁首會因標題折行／
   瀏海機 safe-area 而變高，寫死會讓表頭卡在錯的位置）。z-index 要低於頁首的 40。 */
.hl-head{
  position:sticky;top:var(--hl-top,0px);z-index:6;background:var(--card2);
  color:var(--tx3);font-size:11.5px;font-weight:500;line-height:1.35;
  min-height:34px;border-bottom:1px solid var(--line);
}
/* 整個表頭高度都要可點：只有文字可點的話，34px 的列只有一半會有反應 */
.hl-head button{
  font-size:11.5px;font-weight:500;color:inherit;white-space:nowrap;
  min-height:34px;display:inline-flex;align-items:center;justify-content:flex-end;
  -webkit-tap-highlight-color:transparent;
}
.hl-head button.hl-nm{justify-content:flex-start}
.hl-head .sar{color:var(--tx3);margin-left:2px;font-size:9px;font-style:normal}
.hl-head u{font-size:9px;text-decoration:none;opacity:.85;margin-left:1px}  /* 單位「億」 */
.hl-head button.on{color:var(--brand);font-weight:700}
.hl-head button.on .sar{color:var(--brand)}
.hl-head button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:4px}

.hl-row{
  min-height:46px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;background:var(--card);
}
.hl-row:last-child{border-bottom:0}
.hl-row[data-go]{cursor:pointer}
.hl-row[data-go]:active{background:var(--brand-bg)}
.hl-row[data-go]:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.hl-rk{
  min-width:18px;flex:none;text-align:center;   /* min-width：列號到三位數才不會被擠掉 */
  font-family:var(--mono);font-size:11.5px;color:var(--tx3);
}
.hl-bar{width:3px;height:22px;border-radius:2px;flex:none}

.hl-nm{
  flex:1;min-width:0;display:flex;align-items:baseline;gap:5px;
  white-space:nowrap;overflow:hidden;text-align:left;
}
/* 擠不下時的讓位順序＝連買賣小標 → 代號 → 股名（股名是辨識主體、代號次之，
   連買賣只是加分資訊，且排序選單裡排得到）。靠 flex-shrink 權重達成：收縮量按
   「shrink × 基準寬」分配，權重差距拉大就會依序被吃掉。 */
.hl-nm b{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--mono);font-size:13.5px;font-weight:600;
  letter-spacing:.2px;color:var(--tx);
}
.hl-nm .c{
  flex:0 8 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  font-size:11px;color:var(--tx3);
}
/* 動作膠囊固定放在小字行開頭（放名稱後會吃掉 39px，把股名擠成「台積…」）；比別處緊一點 */
.hl-sub .pill{padding:2px 6px;font-size:10.5px;margin-right:5px}
.hl-nm .pill{flex:none;align-self:center;padding:2px 6px;font-size:10.5px}

/* 連買賣小標：沒有動作 pill 的列掛在名稱後，有動作的列改掛小字行末（避免同列兩個標籤擠爆）。
   38/52 列都有連買賣，做成色塊會整頁花掉、也吃掉代號的寬度 → 只用小號彩色字。 */
.hl-stk{
  flex:0 999 auto;min-width:0;overflow:hidden;text-overflow:clip;
  align-self:center;font-style:normal;
  font-size:10px;font-weight:700;line-height:1.5;color:var(--tx3);
}
.hl-sub .hl-stk{flex:none}   /* 小字行可換行，不必讓位 */
.hl-stk.up{color:var(--up)}
.hl-stk.dn{color:var(--dn)}
/* 深色主題的 --up(#ef4444) 對 --card 只有 4.23:1，而這裡的字只有 9.5~11px →
   小字改用亮一階的 --act-add(#f87171，約 5.4:1)；綠色兩個主題都達標不用動。 */
:root[data-theme="dark"] .hl-stk.up,
:root[data-theme="dark"] .hl-sub .up{color:var(--act-add)}

.hl-mv,.hl-wt,.hl-sh{
  flex:none;text-align:right;white-space:nowrap;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
/* 寬度由 JS 的 applyColWidths() 依該檔 ETF 的實際最長值設定（--w-*），這裡只給退場預設值 */
.hl-mv{width:var(--w-mv,58px);font-size:13px;font-weight:700;color:var(--tx)}
.hl-wt{width:var(--w-wt,47px);font-size:13px;font-weight:600;color:var(--tx)}
.hl-sh{width:var(--w-sh,50px);font-size:13px;font-weight:400;color:var(--tx2)}

/* 小字行：左緣＝#(18)+gap(5)+色條(3)+gap(5)＝31px，與股名切齊。
   底色中性，每個數值各自上色（權重變動要跟自己的正負走，不能被張數的紅綠帶著跑）。 */
.hl-sub{
  flex-basis:100%;padding:0 0 7px 31px;margin-top:-5px;color:var(--tx3);
  font-size:11px;line-height:1.4;font-family:var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hl-sub .hl-stk{font-size:9.5px;padding:0 4px}

/* 排序下拉（表頭只放得下 4 欄，買賣金額／連買賣改由這裡排序） */
.sec-title.hl-sec{flex-wrap:wrap}   /* 窄螢幕塞不下時，下拉自己換行，不擠壞標題 */
.hl-sortwrap{margin-left:auto;flex:none}
.hl-sortsel{
  font-size:11.5px;color:var(--tx3);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-chip);
  padding:3px 6px;min-height:30px;max-width:140px;
}

/* 窄機（iPhone SE 等 ≤360px）：標的欄只剩 70px 左右，股名會被壓到只剩代號。
   → 字級各降一級（欄寬是 JS 量出來的，字變小欄就跟著變窄）＋動作膠囊改掛小字行。
   小字行改成可換行：這種寬度一行放不下，若維持 nowrap+ellipsis，被切掉的正好是
   行末的連買賣（實測 0050 在 320px 下 48/50 列被截），等於把資料藏起來。 */
@media (max-width:360px){
  .hl-head,.hl-row{gap:4px;padding:0 8px}
  .hl-sub{padding-left:29px;white-space:normal;text-overflow:clip;line-height:1.35}
  .hl-mv,.hl-wt,.hl-sh{font-size:11.5px}
  .hl-head,.hl-head button{font-size:10.5px}
  .hl-nm b{font-size:12.5px}
  .hl-nm .c{font-size:10px}
}

/* ============================================================
   App 版型：頁籤 sticky → 表格佔滿主畫面 → 條件列釘底部
   （參考使用者提供的「分點K線」App：頂部頁籤橫滑、底部統計區間列）
   ============================================================ */

/* 主頁籤：橫滑、底線指示 */
.htabs{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line);margin:0 calc(var(--pad-page) * -1) 0;
  padding:0 var(--pad-page);position:sticky;top:0;z-index:20;background:var(--bg);
}
.htabs::-webkit-scrollbar{display:none}
.htabs button{
  flex:none;position:relative;padding:12px 16px 10px;min-height:44px;
  font-size:15px;font-weight:500;color:var(--tx3);white-space:nowrap;
}
.htabs button.on{color:var(--tx);font-weight:700}
.htabs button.on::after{
  content:'';position:absolute;left:14px;right:14px;bottom:0;height:2.5px;
  background:var(--brand);border-radius:2px;
}

/* 次篩選列：橫滑 chips，貼在主頁籤下 */
.hfilter{
  display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:9px 0 8px;position:sticky;top:44px;z-index:19;background:var(--bg);
}
.hfilter::-webkit-scrollbar{display:none}
.hfilter .chip{padding:6px 10px;min-height:32px;font-size:12.5px}
.hfilter .chip .cnt{margin-left:2px}
/* 摘要下方固定露出的兩個捷徑小鈕 */
.hgo{display:flex;gap:8px;margin:0 0 10px}
.hgo .btn{flex:1;min-height:38px;font-size:12.5px;padding:0 10px;font-weight:700;border:0}
.hgo .btn.go-active{background:var(--brand-solid);color:#fff}
.hgo .btn.go-market{background:var(--gold);color:#fff}
/* 深色的 --gold(#fbbf24) 是亮黃，配白字對比不足 → 改用同色系深橘（正式站 --dv5） */
:root[data-theme="dark"] .hgo .btn.go-market{background:#c2410c}

/* 收成一顆的篩選下拉（取代原本三顆 chips） */
.fsel{
  flex:none;min-height:32px;padding:5px 25px 5px 11px;border-radius:var(--r-chip);
  border:1px solid var(--line);background:var(--card);color:var(--tx2);font-size:12.5px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),linear-gradient(135deg,var(--tx3) 50%,transparent 50%);
  background-position:calc(100% - 13px) 14px,calc(100% - 9px) 14px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.fsel:focus{outline:none;border-color:var(--brand)}

/* 依個股看：聚合列的「N 檔 ETF」膠囊 + 展開的 ETF 明細 */
.rowitem.sgrp{cursor:pointer}
.etfcnt{
  display:inline-flex;align-items:center;gap:3px;background:var(--brand-bg);color:var(--brand);
  border:1px solid var(--brand-line);border-radius:var(--r-chip);
  padding:1px 8px;font-size:11px;font-weight:700;margin-left:2px;
}
.etfcnt i{font-style:normal;font-size:9px;transition:transform .15s;display:inline-block}
.sgrp-sub{background:var(--card2);border-radius:var(--r-box);margin:0 0 8px;padding:3px 10px}
.sgrp-sub .subrow{
  display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 2px;
  border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer;
}
.sgrp-sub .subrow:last-child{border-bottom:0}
.sgrp-sub .sr-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}
.sgrp-sub .sr-lots{flex:none;font-weight:600;min-width:62px;text-align:right}
.sgrp-sub .sr-w{flex:none;color:var(--tx3);min-width:56px;text-align:right;font-size:11.5px}

/* 第二列 chips（排序＋檢視）：沿用正式站手機版的平鋪樣式 */
.hfilter2{padding-top:0;top:84px}
.hfilter .hf-sp{flex:1;min-width:8px}

/* 摘要條：沿用正式站 .akpi.tone-up/down 的「有顏色的框」——左側 4px 粗色條＋淺色底 */
.sumbar{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card2);border:1px solid var(--line);border-radius:var(--r-box);
  padding:11px 14px;margin-bottom:9px;min-height:56px;
}
.sumbar.tone-up  {background:var(--up-bg);  border-color:var(--danger-line);box-shadow:inset 4px 0 0 var(--up)}
.sumbar.tone-down{background:var(--down-bg);border-color:var(--pos-line);  box-shadow:inset 4px 0 0 var(--dn)}
.sumbar .sb-t{flex:1;min-width:0;font-size:11.5px;color:var(--tx3);line-height:1.4}
.sumbar .sb-t b{display:block;font-size:12.5px;font-weight:700;color:var(--tx2);margin-bottom:1px}
.sumbar .sb-r{flex:none;text-align:right;line-height:1.15}
.sumbar .sb-k{display:block;font-size:11px;color:var(--tx3);margin-bottom:2px}
.sumbar .sb-v{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.3px}
.sumbar .sb-u{font-size:12px;font-weight:400;color:var(--tx3);margin-left:2px}
.sumbar .sb-ar{flex:none;color:var(--tx3);font-size:11px;transition:transform .15s;align-self:center}
.sumbar[aria-expanded="true"] .sb-ar{transform:rotate(180deg)}

/* 異動欄：數字 + 四色比例條 */
.mvcell{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:52px}
.mvcell b{font-family:var(--mono);font-size:13.5px;font-weight:600;line-height:1.1}
.mvcell .mvbar{display:flex;width:100%;height:4px;border-radius:2px;overflow:hidden;background:var(--card2)}
.mvcell .mvbar i{display:block;height:100%}
.mvcell .mvtx{font-size:10px;color:var(--tx3);font-family:var(--mono);letter-spacing:-.2px;white-space:nowrap}
.mvcell .mvtx u{text-decoration:none}

/* ---------- 內頁子分頁（橫滑，Q1-A） ---------- */
.subtabs{
  display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;position:sticky;top:0;z-index:5;
  background:var(--bg);scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{
  flex:none;padding:8px 15px;min-height:38px;border-radius:var(--r-chip);
  border:1px solid var(--line);background:var(--card);color:var(--tx2);font-size:13.5px;
}
.subtabs button.on{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff;font-weight:700}

/* ---------- 空狀態 / 載入 ---------- */
.empty{padding:28px 14px;text-align:center;color:var(--tx3);font-size:13px}
.empty b{color:var(--tx2)}
.loading{padding:24px;text-align:center;color:var(--tx3);font-size:13px}
.skel{background:linear-gradient(90deg,var(--card2) 25%,var(--card) 50%,var(--card2) 75%);background-size:200% 100%;animation:skel 1.2s infinite;border-radius:var(--r-box);min-height:64px;margin-bottom:10px}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- 搜尋 overlay ---------- */
.m-search-overlay{position:fixed;inset:0;z-index:80;background:var(--bg);max-width:560px;margin:0 auto;display:flex;flex-direction:column}
.mso-head{display:flex;gap:10px;align-items:center;padding:calc(10px + env(safe-area-inset-top)) var(--pad-page) 10px;background:var(--head);border-bottom:1px solid var(--line)}
.mso-head input{
  flex:1;background:var(--card2);border:1px solid var(--line);border-radius:12px;
  color:var(--tx);padding:11px 14px;font-size:15px;min-height:44px;outline:none;
}
.mso-head input:focus{border-color:var(--brand)}
.mso-cancel{flex:none;color:var(--brand);font-size:14px;min-height:44px;padding:0 4px}
.mso-body{flex:1;overflow-y:auto;padding:10px var(--pad-page) 30px}
.mso-group{font-size:12px;color:var(--tx3);margin:12px 2px 4px}

/* ---------- modal ---------- */
.m-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.m-modal-scrim{position:absolute;inset:0;background:rgba(30,25,15,.42)}
.m-modal-card{
  position:relative;width:100%;max-width:560px;max-height:86dvh;overflow-y:auto;
  background:var(--card);border-radius:20px 20px 0 0;border:1px solid var(--line);
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
}
.m-modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.m-modal-hd b{font-size:16px}
.m-modal-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--tx3);margin:-10px -10px -10px 0}

/* ---------- 雜項 ---------- */
.legend{font-size:11.5px;color:var(--tx3);line-height:1.7;margin-top:10px}

/* ============================================================
   持股績效（win）：籌碼K線式精簡列表 ＋ myinvestdesk 式展開卡
   主表只留 標的/庫存/買均價/總報酬 四欄（無橫捲），其餘欄位全數
   收進點列展開的個股卡，資訊零刪減。
   ============================================================ */
.wrx-head,.wrx-row{
  display:grid;grid-template-columns:minmax(0,1fr) 58px 76px 78px 14px;
  gap:6px;align-items:center;
}
.wrx-head{
  padding:8px 2px;border-bottom:1px solid var(--line);
  font-size:11.5px;color:var(--tx3);
}
.wrx-head .h{text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.wrx-head .h:first-child{text-align:left}
.wrx-head .h.sorted{color:var(--brand);font-weight:700}
.wrx-head .sar{font-size:9px;margin-left:1px;color:inherit}
.wrx-row{
  padding:11px 2px;border-bottom:1px solid var(--line);min-height:52px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.wrx-row:last-child{border-bottom:0}
.wrx-row:active{background:var(--card2)}
.wrx-nm{min-width:0}
.wrx-nm b{display:block;font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrx-nm span{font-family:var(--mono);font-size:11px;color:var(--tx3)}
.wrx-cell{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;font-size:14px;font-weight:600;white-space:nowrap}
.wrx-cell small{display:block;font-size:10px;color:var(--tx4);font-weight:400}
.wrx-ar{color:var(--tx4);font-size:12px;text-align:right;transition:transform .15s}
.wrx-row[aria-expanded="true"] .wrx-ar{transform:rotate(90deg)}

/* 展開卡（myinvestdesk 式：狀態 pills → 邊框資訊面板 → 交易明細） */
.wrx-card{border-bottom:1px solid var(--line);padding:2px 2px 14px;background:transparent}
.wrx-card .wx-pills{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:4px 0 10px}
.wrx-panel{
  border:1px solid var(--brand-line);background:var(--brand-bg);
  border-radius:var(--r-box);padding:11px 13px;margin-bottom:10px;
}
.wrx-panel .wp-title{font-size:11.5px;font-weight:700;color:var(--brand);margin-bottom:8px}
.wrx-panel .wp-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.wrx-panel .wp-it span{display:block;font-size:10.5px;color:var(--tx3)}
.wrx-panel .wp-it b{font-family:var(--mono);font-size:13.5px;font-weight:600}
.wrx-sec{font-size:11.5px;font-weight:700;color:var(--tx3);margin:2px 0 6px}

/* ---------- 相似度比較卡（參考圖版型，配色照規格） ---------- */
.simcard{
  background:var(--brand-bg);
  border:1px solid var(--brand-line);border-radius:var(--r-card);
  padding:0;margin-bottom:12px;overflow:hidden;
}
.simcard-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 0}
.simcard-tag{
  background:var(--brand-solid);color:#fff;font-size:12px;font-weight:700;
  border-radius:8px;padding:4px 10px;
}
.simcard-more{font-size:12.5px;color:var(--brand);font-weight:500;min-height:44px;display:flex;align-items:center}
.simcard-body{padding:8px 14px 14px}
.simcard-body b{font-size:15px;font-weight:700;display:block;line-height:1.5}
.simcard-body b i{font-style:normal;color:var(--brand);font-family:var(--mono)}
.simcard-body span{font-size:12px;color:var(--tx3);display:block;margin-top:2px}

/* ---------- 摺疊摘要列（持股異動：新增 N 檔 ⌄） ---------- */
.foldbar{
  display:flex;align-items:center;gap:8px;width:100%;min-height:44px;
  padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-box);margin-bottom:10px;font-size:13.5px;text-align:left;
}
.foldbar .fb-k{color:var(--tx2);flex:none}
.foldbar .fb-v{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foldbar .fb-ar{flex:none;color:var(--tx3);font-size:12px;transition:transform .15s}
.foldbar[aria-expanded="true"] .fb-ar{transform:rotate(180deg)}

/* ---------- 圓環＋圖例（參考圖佈局：圖左、圖例右、權重右對齊） ---------- */
.donut2{display:flex;align-items:center;gap:16px;padding:4px 0 2px}
.donut2-ring{width:124px;height:124px;flex:none;position:relative;border-radius:50%}
.donut2-ring i{position:absolute;inset:26px;border-radius:50%;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-style:normal}
.donut2-ring i b{font-family:var(--mono);font-size:17px;font-weight:600;line-height:1.1}
.donut2-ring i span{font-size:10.5px;color:var(--tx3)}
.donut2-lg{flex:1;min-width:0}
.donut2-lg div{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:12.5px}
.donut2-lg div u{width:9px;height:9px;border-radius:2px;flex:none;text-decoration:none}
.donut2-lg div em{flex:1;min-width:0;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut2-lg div b{font-family:var(--mono);font-weight:600;color:var(--tx2);flex:none}
.warnbox{background:var(--gold-bg);border:1px solid var(--gold-line);color:var(--gold);border-radius:var(--r-box);padding:10px 12px;font-size:12.5px;margin:10px 0}
.hintline{font-size:12px;color:var(--tx3);margin:6px 2px 10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 18px;border-radius:12px;background:var(--brand-solid);color:#fff;font-weight:700;font-size:14px;
}
.btn.ghost{background:var(--card2);color:var(--tx2);border:1px solid var(--line)}
.btn.small{min-height:36px;padding:0 13px;font-size:13px;border-radius:10px}
.divider{height:1px;background:var(--line);margin:12px 0}
.bignum{font-family:var(--mono);font-weight:600;font-size:30px;letter-spacing:-.5px}
.mini-donut{display:flex;align-items:center;gap:14px}
.spark{width:100%;height:56px;display:block}
.bar-h{height:8px;border-radius:4px;background:var(--card2);overflow:hidden;position:relative}
.bar-h i{position:absolute;top:0;bottom:0;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* 資料日期選擇器：◀ ｜ 下拉 ｜ ▶ 黏成一顆（與正式站 .datenav 同款；日期新→舊，左＝前一天、右＝後一天） */
.datenav{display:flex;align-items:stretch;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--card2);overflow:hidden}
.datenav button{flex:none;min-width:48px;min-height:44px;border:none;background:transparent;color:var(--tx2);font:inherit;font-size:14px;display:flex;align-items:center;justify-content:center}
.datenav button:active:not(:disabled){background:var(--brand-bg);color:var(--brand)}
.datenav button:disabled{opacity:.35}
.datenav select{flex:1;min-width:0;min-height:44px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;background:transparent;color:var(--tx);padding:0 10px;font-size:14px;font-weight:600}
.datenav:focus-within{border-color:var(--brand)}