/* ============================================================
     Design tokens（淺色專業主題）
     命名沿用舊版變數（--teal / --gold / --panel…），值全面換為淺色系，
     讓既有元件與 JS 模板的 var() 引用不需改名即可套用。
     ============================================================ */
  :root{
    /* 底色與文字（暖米黃報紙色調） */
    --bg:#f5f0e3;            /* 頁面背景：暖米黃 newsprint */
    --panel:#fffdf7;         /* 面板／表格底：暖白 */
    --card:#fffdf7;          /* 卡片底 */
    --inset:#f8f2e6;         /* 內嵌區塊（KPI、展開列、表頭） */
    --ink:#0f172a;           /* 主要文字 */
    --ink2:#3a3527;          /* 次強調文字（暖深） */
    --sub:#655e4f;           /* 次要文字（暖灰） */
    --line:#e6ddc9;          /* 邊框（暖淺） */
    --line2:#efe8d7;         /* 更淡的分隔線 */
    --head:#f6f0e2;          /* 表頭底 */
    /* 品牌色（沉穩藍綠） */
    --teal:#0f766e;          /* 品牌文字／連結／選中 */
    --teal-d:#0f766e;        /* 主要按鈕底 */
    --teal-hover:#115e59;    /* 主要按鈕 hover */
    --teal-bg:#e4f1ee;       /* 品牌淡底（選中、hover） */
    --teal-line:#bfe0da;     /* 品牌淡邊框 */
    /* 台股漲跌（紅漲綠跌，避免螢光） */
    --up:#d92d20;            /* 上漲／買超文字 */
    --up-bg:#fbe9e3;
    --down:#15803d;          /* 下跌／賣超文字 */
    --down-bg:#e6f3e6;
    /* 警示／強調（金→琥珀） */
    --gold:#b45309;          /* 琥珀文字（警示、金額強調） */
    --gold-bg:#fbf1dd;
    --gold-line:#eed9ac;
    /* 語意色（pill／警示／邊框強調／捲軸，雙主題翻轉） */
    --danger-ink:#b42318;    /* 深紅字（淡紅底標籤） */
    --pos-ink:#166534;       /* 深綠字（淡綠底標籤） */
    --warn-ink:#92400e;      /* 琥珀警示字 */
    --danger-line:#f5b3ad;   /* 紅標籤邊框 */
    --pos-line:#b7e2c6;      /* 綠標籤邊框 */
    --line-strong:#d6cbb3;   /* hover 邊框／較深分隔 */
    --scroll:#d6cbb3;        /* 捲軸把手 */
    --placeholder:#a99f8a;   /* 輸入框提示字 */
    /* 字體與陰影 */
    --font:"Inter","Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei","PingFang TC",sans-serif;
    --sh-sm:0 1px 2px rgba(60,50,30,.05);
    --sh-md:0 2px 8px rgba(60,50,30,.07),0 1px 2px rgba(60,50,30,.04);
    --sh-lg:0 12px 32px rgba(40,32,18,.16);
  }
  /* ============ 暗色主題（＝使用者原本的深藍配色；亮色為預設） ============ */
  :root[data-theme="dark"]{
    --bg:#0b1220;            /* 原始深藍底 */
    --panel:#111c30;         /* 面板／表格底 */
    --card:#152238;          /* 卡片底（比面板略亮） */
    --inset:#0e1a2e;         /* 內嵌區塊／表頭 */
    --ink:#e6edf6;           /* 主要文字 */
    --ink2:#c3ccd7;          /* 次強調文字 */
    --sub:#8aa0bd;           /* 次要文字（藍灰） */
    --line:#22324d;          /* 邊框 */
    --line2:#1a2740;         /* 更淡的分隔線／格線 */
    --head:#0e1a2e;          /* 表頭底 */
    --teal:#2dd4bf;          /* 品牌青綠 */
    --teal-d:#0d9488;        /* 主要按鈕底 */
    --teal-hover:#14b8a6;
    --teal-bg:#0e3b38;       /* 品牌淡底 */
    --teal-line:#1f4a44;
    --up:#ef4444;            /* 上漲／買超（原始紅） */
    --up-bg:#2b1416;
    --down:#22c55e;          /* 下跌／賣超（原始綠） */
    --down-bg:#0f2b1e;
    --gold:#fbbf24;          /* 原始琥珀金 */
    --gold-bg:#2a2110;
    --gold-line:#4d3c17;
    --danger-ink:#f87171;    /* 原始 pill 紅字 */
    --pos-ink:#4ade80;       /* 原始 pill 綠字 */
    --warn-ink:#fcd34d;
    --danger-line:#6d2822;
    --pos-line:#2f6b43;
    --line-strong:#2a3a52;   /* 原始輸入框邊框 */
    --scroll:#2a3a52;
    --placeholder:#6a7a92;
    --sh-sm:0 1px 2px rgba(0,0,0,.35);
    --sh-md:0 2px 8px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
    --sh-lg:0 12px 32px rgba(0,0,0,.55);
    color-scheme:dark;
  }
  :root{color-scheme:light}
  *{box-sizing:border-box;margin:0;padding:0}
  html{background:var(--bg)}
  body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;
    -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
  .wrap,main{max-width:1240px;margin:0 auto}
  ::selection{background:var(--teal-bg);color:var(--ink)}
  /* 鍵盤焦點：清楚但不刺眼 */
  :focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
  input:not([type="checkbox"]):focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
  input[type="checkbox"]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  #xInput:focus,#cmpAddInput:focus{border-color:var(--teal)!important;box-shadow:0 0 0 3px var(--teal-bg)}
  /* 區塊內橫向捲動的細捲軸 */
  ::-webkit-scrollbar{height:8px;width:10px}
  ::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}
  ::-webkit-scrollbar-thumb:hover{background:var(--sub)}
  ::-webkit-scrollbar-track{background:transparent}

  /* ============ Header／導覽 ============ */
  header{background:var(--panel);padding:14px 20px 0;border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .brand img{width:30px;height:30px;border-radius:8px;flex:none}
  .brand h1{font-size:17px;font-weight:700;letter-spacing:-.01em}
  .sub{color:var(--sub);font-size:12.5px;margin-top:4px}
  .tabs{display:flex;gap:2px;margin-top:10px;flex-wrap:wrap;align-items:center}
  .tab{padding:10px 13px;font-size:14px;font-weight:600;color:var(--sub);cursor:pointer;
    border-radius:8px 8px 0 0;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,background .15s}
  .tab:hover{color:var(--ink);background:var(--inset)}
  .tab.on{color:var(--teal);border-bottom-color:var(--teal);background:none}
  main{padding:20px 20px 60px}

  /* ============ 全站搜尋（側欄固定位置；每頁都在同一格） ============ */
  .gsearch{position:relative;margin:0 6px 10px}
  .gsearch input{width:100%;height:42px;padding:0 30px 0 34px;border:1.5px solid var(--teal-line);border-radius:10px;
    background:var(--panel);color:var(--ink);font-size:13.5px;-webkit-appearance:none}
  .gsearch input::placeholder{color:var(--placeholder)}
  .gsearch input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-bg);outline:none}
  .gsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
  .gsearch-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--teal);font-size:14px;pointer-events:none}
  .gsearch-kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--sub);
    border:1px solid var(--line);background:var(--inset);border-radius:5px;padding:1px 6px;pointer-events:none}
  .gsearch input:focus~.gsearch-kbd{display:none}
  .gac{display:none;position:absolute;left:0;right:0;top:46px;z-index:60;background:var(--panel);
    border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-lg);max-height:320px;overflow:auto}
  .gac.on{display:block}
  .gac .gr{padding:8px 11px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line2)}
  .gac .gr:last-child{border-bottom:0}
  .gac .gr:hover,.gac .gr.sel{background:var(--teal-bg)}
  .gac .gc{color:var(--teal);font-weight:700;font-variant-numeric:tabular-nums;margin-right:6px}
  .gac .gn{color:var(--ink)}
  .gac .gt{display:block;margin-top:2px;font-size:11px;color:var(--sub)}
  /* 主動式 ETF 分頁：搜尋框移到工具列最前面並加大 */
  .pgsearch{position:relative;flex:1 1 300px;min-width:210px;max-width:430px}
  .pgsearch input{width:100%;height:46px;padding:0 12px 0 40px;border:1.5px solid var(--teal-line);border-radius:11px;
    background:var(--panel);color:var(--ink);font-size:14.5px}
  .pgsearch input::placeholder{color:var(--placeholder)}
  .pgsearch input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-bg);outline:none}
  .pgsearch .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--teal);font-size:16px;pointer-events:none}
  /* ============ 搜尋／自動完成 ============ */
  .searchbar{margin-bottom:14px;position:relative;flex:1;min-width:220px}
  .searchbar input{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:9px;font-size:14.5px;
    background:var(--panel);color:var(--ink);box-shadow:var(--sh-sm);transition:border-color .15s,box-shadow .15s}
  .searchbar input::placeholder{color:var(--placeholder)}
  .searchbar input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-bg)}
  .ac{position:absolute;left:0;right:0;top:48px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
    z-index:30;overflow:hidden;display:none;box-shadow:var(--sh-lg)}
  .ac div{padding:10px 14px;font-size:14px;cursor:pointer}
  .ac div:hover,.ac div.sel{background:var(--teal-bg);color:var(--teal)}

  /* ============ ETF 卡片 ============ */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;
    transition:border-color .15s,box-shadow .15s,transform .15s;position:relative;box-shadow:var(--sh-sm)}
  .card:hover{transform:translateY(-1px);border-color:var(--teal-line);box-shadow:var(--sh-md)}
  .ct{display:flex;justify-content:space-between;align-items:baseline}
  .code{font-size:19px;font-weight:800;color:var(--teal);letter-spacing:.01em}
  .name{font-size:14px;font-weight:600;margin:4px 0 2px}
  .meta{font-size:12px;color:var(--sub)}
  .netflow{font-size:13px;font-weight:700;text-align:right}
  .top3{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
  .top3 .row{display:flex;justify-content:space-between;font-size:13px;padding:2px 0}
  .top3 .w{color:var(--teal);font-weight:700}
  .top3lab{font-size:11.5px;color:var(--sub);margin:10px 0 2px}
  .more{margin-top:10px;font-size:12px;color:var(--sub);text-align:right}
  .more-cta{margin-top:12px;display:block;text-align:center;font-size:13px;font-weight:600;color:var(--teal);
    background:var(--teal-bg);border:none;border-radius:8px;padding:9px 12px;transition:background .15s,color .15s}
  .card:hover .more-cta{background:var(--teal);color:#fff}

  /* ============ 配息行事曆卡片（依除息日分組） ============ */
  .dgroup{margin-bottom:22px}
  .dgroup-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0 0 9px;border-bottom:2px solid var(--line);margin-bottom:12px}
  .dgroup-date{font-size:20px;font-weight:800;color:var(--teal);line-height:1}
  .dgroup-wd{font-size:13px;color:var(--sub)}
  .dgroup-diff{font-size:13px;font-weight:700;color:var(--sub)}
  .dgroup-diff.near{color:#fff;background:var(--up);padding:2px 11px;border-radius:20px}
  .dgroup-diff.soon{color:var(--gold)}
  .dgroup-n{font-size:12px;color:var(--sub);margin-left:auto}
  .dgroup-near .dgroup-h{border-bottom-color:var(--up)}
  .dgroup-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
  .dcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:var(--sh-sm)}
  .dcard.clk{cursor:pointer;transition:border-color .15s,box-shadow .15s}
  .dcard.clk:hover{border-color:var(--teal-line);box-shadow:var(--sh-md)}
  .dcard-n{font-size:13.5px;margin-bottom:10px;line-height:1.5;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .dcard-n b{color:var(--teal);font-size:15px}
  .dpill{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--teal-bg);color:var(--teal);white-space:nowrap}
  .dcard-g{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-top:1px dashed var(--line);padding-top:9px}
  .dcard-g>div{text-align:center}
  .dcard-g span{display:block;font-size:10.5px;color:var(--sub);margin-bottom:3px}
  .dcard-g b{font-size:14px}
  /* 配息行事曆卡：「現金股利」數字加紅色膠囊底，一眼抓到重點（2026-08-06 上線）；null(—) 不上底 */
  .dcard-g b.dcash{display:inline-block;background:var(--up-bg);color:var(--danger-ink);border:1px solid var(--danger-line);border-radius:999px;padding:1px 11px;font-weight:800;line-height:1.5}
  .lag{font-size:11px;color:var(--gold)}
  .up{color:var(--up)} .down{color:var(--down)} .mut{color:var(--sub)}

  /* ============ 資料表格 ============ */
  table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--line);
    border-radius:10px;overflow:hidden;font-size:13.5px;box-shadow:var(--sh-sm)}
  th,td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line2);white-space:nowrap}
  th{background:var(--head);color:var(--sub);font-size:12px;font-weight:600;border-bottom:1px solid var(--line)}
  th.l,td.l{text-align:left} th.c,td.c{text-align:center}
  th[data-k]{cursor:pointer;user-select:none} th[data-k]:hover{color:var(--teal)}
  tr:last-child td{border-bottom:none}
  .rank{color:var(--sub);font-size:12px} .fundname{font-size:11.5px;color:var(--sub)}
  tr.rk,tr.erow,tr.thRow,tr.xrow,tr.exrow{cursor:pointer}
  tr.rk:hover td,tr.erow:hover td,tr.thRow:hover td,tr.xrow:hover td,tr.exrow:hover td{background:var(--inset)}
  .exp{color:var(--teal);font-weight:600}
  .subwrap{background:var(--inset);padding:8px 16px!important;text-align:left}
  .subli{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px}
  .subli:last-child{border-bottom:none}
  .subli.clk{cursor:pointer} .subli.clk:hover{color:var(--teal)}
  .legend{font-size:12px;color:var(--sub);margin-top:8px;text-align:left;line-height:1.7}
  .back{display:inline-block;color:var(--teal);font-weight:600;font-size:14px;cursor:pointer;margin-bottom:12px;
    padding:6px 10px;margin-left:-10px;border-radius:8px}
  .back:hover{background:var(--teal-bg)}

  /* ============ 摘要頭（ETF／個股內頁） ============ */
  .phead{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--sh-sm)}
  .phead .code{font-size:23px}
  .summ{display:flex;gap:14px 36px;flex-wrap:wrap;margin-top:14px}
  .summ div{font-size:12.5px;color:var(--sub);min-width:90px}
  .summ b{display:block;font-size:17px;color:var(--ink);font-weight:700;margin-top:4px}
  .summ b.up{color:var(--up)} .summ b.down{color:var(--down)} .summ b.mut{color:var(--sub)}

  /* ============ 控制列：Segmented / Chips / 選單 ============ */
  .ctrls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
  .seg{display:inline-flex;background:var(--line2);border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px}
  .seg button{padding:6px 12px;background:transparent;color:var(--sub);border:none;font-size:13px;font-weight:600;
    cursor:pointer;border-radius:7px;transition:color .15s,background .15s;white-space:nowrap}
  .seg button:hover{color:var(--ink)}
  .seg button.on{background:var(--panel);color:var(--ink);box-shadow:var(--sh-sm);font-weight:700}
  .seg.big button{padding:9px 18px;font-size:14px}
  #segDir button.on[data-d="buy"],#segIDir button.on[data-d="buy"]{background:var(--up);color:#fff}
  #segDir button.on[data-d="sell"],#segIDir button.on[data-d="sell"]{background:var(--down);color:#fff}
  .rangeline{color:var(--sub);font-size:13px;margin-bottom:12px}
  .rangeline b{color:var(--ink)}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
  .chip{background:var(--panel);border:1px solid var(--line);color:var(--ink2);padding:6px 12px;border-radius:8px;
    font-size:13px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
  .chip:hover{border-color:var(--teal-line);color:var(--teal)}
  .chip.on{background:var(--teal-bg);border-color:var(--teal-line);color:var(--teal);font-weight:600}
  .hint{color:var(--sub);font-size:13px;margin-bottom:10px}
  /* 反查「查無結果」說明條：安靜白卡細線，不用色塊強調 */
  .notice{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    font-size:13px;color:var(--ink2);line-height:1.75;box-shadow:var(--sh-sm);overflow-wrap:anywhere}
  .notice b{color:var(--ink)}
  .notice .nsub{color:var(--sub);font-size:12px;margin-top:6px}
  .notice .nlist{margin:6px 0 0;padding:0;list-style:none}
  .notice .nlist li{padding:3px 0;color:var(--ink2)}
  .notice .nact{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap}
  h3.sec{font-size:17px;font-weight:700;margin:0 0 10px;color:var(--ink);letter-spacing:-.01em}
  /* 下拉選單（含 JS 動態產生的日期選單） */
  select,.sel{padding:8px 30px 8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
    color:var(--ink);font-size:13px;font-family:var(--font);cursor:pointer;appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23655e4f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;box-shadow:var(--sh-sm)}
  :root[data-theme="dark"] select,:root[data-theme="dark"] .sel{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238aa0bd' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
  select:hover,.sel:hover{border-color:var(--line-strong)}
  select:focus,.sel:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-bg);outline:none}
  /* 資料日期選擇器：◀ ｜ 下拉 ｜ ▶ 黏成一顆（class .datenav，.dgroup 已被別處用掉；下拉為新→舊，左＝前一天、右＝後一天） */
  .datenav{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;
    background:var(--panel);box-shadow:var(--sh-sm);overflow:hidden}
  .datenav button{border:none;background:transparent;color:var(--ink2);font-family:var(--font);font-size:13px;
    padding:0 11px;cursor:pointer;display:flex;align-items:center;transition:background .15s,color .15s}
  .datenav button:hover:not(:disabled){background:var(--teal-bg);color:var(--teal)}
  .datenav button:disabled{opacity:.35;cursor:default}
  .datenav select{border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
    border-radius:0;box-shadow:none;background-color:transparent;font-weight:600}
  .datenav select:hover{border-color:var(--line)}
  .datenav select:focus{box-shadow:none;border-color:var(--line)}
  .datenav:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-bg)}

  /* ============ 頁尾／狀態 ============ */
  footer{text-align:center;color:var(--sub);font-size:12px;padding:24px 16px 40px;line-height:1.9}
  .warnline{color:var(--danger-ink);font-weight:600}
  .empty{color:var(--sub);text-align:center;padding:36px 0}
  .soon{color:var(--sub);font-size:13px;padding:20px 0;text-align:center}
  .soon::before{content:"";display:inline-block;width:14px;height:14px;margin:0 8px -2px 0;border-radius:50%;
    border:2px solid var(--line);border-top-color:var(--teal);animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ============ 每日焦點面板 ============ */
  .focus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--sh-sm)}
  .panel h4{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;gap:8px}
  .panel h4 .mut{font-weight:400;font-size:12px}
  .li{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line2);font-size:13px}
  .li:last-child{border-bottom:none} .li .l{display:flex;gap:8px;align-items:center}

  /* ============ 標籤 Pills ============ */
  .pill{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--teal-bg);color:var(--teal);font-weight:600}
  .pill-add{background:var(--up-bg);color:var(--danger-ink)}
  .pill-cut{background:var(--down-bg);color:var(--pos-ink)}
  .pill-clear{background:var(--up-bg);color:var(--danger-ink)}
  .pill-new{background:var(--up-bg);color:var(--danger-ink);border:1px solid var(--danger-line)}
  .pill-exit{background:var(--down-bg);color:var(--pos-ink);border:1px solid var(--pos-line)}
  .pill-mut{background:var(--line2);color:var(--sub)}
  .pill-gold{background:var(--gold-bg);color:var(--gold)}
  .morebtn{display:block;width:100%;text-align:center;color:var(--teal);font-size:12.5px;font-weight:600;cursor:pointer;
    padding:8px 0 0;background:none;border:none}
  .morebtn:hover{text-decoration:underline}

  /* ============ 表單元件 ============ */
  .cmp{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  input.num{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);
    font-size:14px;max-width:100%;width:160px;text-align:right;font-family:var(--font);box-shadow:var(--sh-sm)}
  input.num:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-bg);outline:none}
  .rfield{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  input[type="checkbox"]{accent-color:var(--teal)}
  textarea{width:100%;min-height:110px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
    color:var(--ink);font-size:14px;resize:vertical;font-family:var(--font)}
  textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-bg);outline:none}

  /* ============ Modal ============ */
  .modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
  .modal.on{display:flex}
  .sharecard{width:400px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:22px;position:relative;box-shadow:var(--sh-lg)}
  .sharecard .x{position:absolute;top:8px;right:8px;color:var(--sub);cursor:pointer;font-size:16px;line-height:1;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px}
  .sharecard .x:hover{background:var(--inset);color:var(--ink)}
  .note{font-size:11.5px;color:var(--sub);margin-top:12px;text-align:center}

  /* ============ 按鈕 ============ */
  .btn{background:var(--teal-d);color:#fff;border:1px solid transparent;padding:8px 16px;border-radius:8px;
    font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:background .15s,box-shadow .15s}
  .btn:hover{background:var(--teal-hover)}
  .btn:disabled{opacity:.55;cursor:default}
  .btn.gray{background:var(--panel);border:1px solid var(--line);color:var(--ink2);box-shadow:var(--sh-sm)}
  .btn.gray:hover{background:var(--inset);border-color:var(--line-strong)}
  /* 篩選切換鈕（未選＝白底描邊、選中＝品牌淡底） */
  .fbtn{background:var(--panel);border:1px solid var(--line);color:var(--ink2);font-size:13px;font-weight:600;
    padding:8px 14px;border-radius:8px;cursor:pointer;font-family:var(--font);box-shadow:var(--sh-sm);
    transition:border-color .15s,background .15s,color .15s}
  .fbtn:not(.fbtn-on):not(.fbtn-gold-on):hover{border-color:var(--teal-line);color:var(--teal)}
  .fbtn-on{background:var(--teal-bg);color:var(--teal);border-color:var(--teal-line);font-weight:700}
  .fbtn-gold:not(.fbtn-gold-on):hover{border-color:var(--gold-line);color:var(--gold)}
  .fbtn-gold-on{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-line);font-weight:700}
  .fbtn:disabled{opacity:.5;cursor:default}

  /* ============ 訂閱橫幅／跑馬燈／浮動鈕 ============ */
  .promo-mq{flex:1;min-width:0;overflow:hidden;white-space:nowrap;margin:0 10px;align-self:center}
  .promo-mq>span{display:inline-block;padding-left:100%;color:var(--gold);font-weight:700;font-size:13.5px;animation:mq 13s linear infinite}
  @keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
  /* 公告跑馬燈（資料異常等臨時公告） */
  .promo{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;background:var(--panel);
    border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:16px;box-shadow:var(--sh-sm);
    transition:border-color .15s,box-shadow .15s}
  .promo:hover{border-color:var(--teal-line);box-shadow:var(--sh-md)}
  .promo-l{display:flex;align-items:center;gap:12px;min-width:0}
  .promo-ava{width:42px;height:42px;border-radius:50%;background:var(--teal);display:flex;align-items:center;
    justify-content:center;font-size:17px;color:#fff;flex-shrink:0}
  img.promo-ava{border:1px solid var(--line)}
  .promo-t{font-size:14.5px;font-weight:700;color:var(--ink)}
  .promo-s{font-size:12px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .promo-btn{background:var(--gold);color:#fff;font-weight:700;font-size:13px;padding:9px 16px;border-radius:8px;white-space:nowrap;flex-shrink:0}
  .promo:hover .promo-btn{background:#92400e}
  .fab{position:fixed;right:18px;bottom:18px;z-index:40;background:var(--gold);color:#fff;font-weight:700;font-size:13.5px;
    padding:11px 18px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(180,83,9,.32);transition:transform .15s,box-shadow .15s}
  .fab:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(180,83,9,.38)}
  #foot a{text-decoration:none}

  /* ============ 計算結果卡 ============ */
  .toolrow{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap}
  .res-card{background:var(--teal-bg);border:1px solid var(--teal-line);border-radius:12px;padding:18px;margin-top:14px}
  .res-big{font-size:28px;font-weight:800;color:var(--teal)}
  .res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:10px}
  .res-grid .mut{font-size:12px}
  .res-grid b{font-size:19px;display:block}
  #chartBox svg{display:block;width:100%;height:auto}
  .leg{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin-top:8px}
  .leg span i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}

  /* ============ 績效柱狀圖（HTML 版水平長條） ============ */
  .pbar{display:flex;flex-direction:column;gap:10px;margin:2px 0 2px}
  .pbar-row{display:grid;grid-template-columns:minmax(104px,196px) 1fr max-content;align-items:center;gap:10px}
  .pbar-lab{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
  .pbar-rk{color:var(--sub);font-size:12px;font-weight:600;margin-right:2px}
  .pbar-lab i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 6px;vertical-align:0}
  .pbar-track{position:relative;height:26px;background:var(--inset);border:1px solid var(--line);border-radius:7px;overflow:hidden}
  .pbar-track::before{content:"";position:absolute;top:0;bottom:0;left:var(--zero,0%);width:1px;background:var(--sub);opacity:.5}
  .pbar-fill{position:absolute;top:3px;bottom:3px;border-radius:4px;min-width:2px}
  .pbar-val{font-size:14px;font-weight:700;white-space:nowrap;text-align:right;min-width:62px}
  @media(max-width:560px){.pbar-row{grid-template-columns:minmax(88px,150px) 1fr max-content;gap:7px}.pbar-lab{font-size:12px}.pbar-val{font-size:13px;min-width:56px}}

  /* ============ 主動式 ETF 總覽 ============ */
  .active-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:14px;
    background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--sh-sm)}
  .active-kpis{display:grid;grid-template-columns:repeat(4,minmax(88px,1fr));gap:8px;min-width:420px}
  .akpi{background:var(--inset);border:1px solid var(--line2);border-radius:10px;padding:9px 12px;text-align:right}
  .akpi span{display:block;font-size:11.5px;color:var(--sub);margin-bottom:4px}
  .akpi b{font-size:16px;font-weight:700}
  .kpis-xl .akpi{padding:12px 14px}
  .kpis-xl .akpi span{font-size:12.5px}
  .kpis-xl .akpi b{font-size:21px}
  /* 買賣摘要卡上色：買=紅底、賣=綠底、淨額隨正負著色（0 維持中性），淺色主題下重點才跳得出來 */
  .akpi.tone-up{background:var(--up-bg);border-color:var(--danger-line);box-shadow:inset 4px 0 0 var(--up)}
  .akpi.tone-down{background:var(--down-bg);border-color:var(--pos-line);box-shadow:inset 4px 0 0 var(--down)}
  .akpi.tone-up span{color:var(--danger-ink)}
  .akpi.tone-down span{color:var(--pos-ink)}
  /* 配息子分頁的數字條：不用色塊，沿用上方 .phead／.summ 那種「白卡＋細分隔線」的安靜寫法 */
  .divstat{display:flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 6px;margin:8px 0 18px;box-shadow:var(--sh-sm)}
  .divstat>div{flex:1 1 150px;padding:1px 20px;border-left:1px solid var(--line2)}
  .divstat>div:first-child{border-left:none}
  .divstat span{display:block;font-size:12.5px;color:var(--sub);margin-bottom:6px}
  .divstat b{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
  .divstat b i{font-style:normal;font-size:13px;font-weight:500;color:var(--sub)}
  .divstat b.mut{color:var(--sub);font-weight:600}
  /* 🍩 成份股「持股分佈」圓環（前5大＋其他＋現金）。亮暗主題各自通過色盲安全檢核；
     順序固定 藍→青→紫→洋紅→橘，紅／綠保留給漲跌語意故刻意不用；其他=灰(降調)、現金=琥珀 */
  :root{--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}
  :root[data-theme="dark"]{--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}
  .hdonut{display:flex;gap:14px 30px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px 16px;margin:0 0 14px;box-shadow:var(--sh-sm)}
  .hdonut .dn-head{flex:1 1 100%;font-size:13px;font-weight:700;color:var(--sub)}
  .hdonut svg{flex:0 0 auto}
  .hdonut .dn-c{font-size:27px;font-weight:800;fill:var(--ink)}
  .hdonut .dn-t{font-size:11.5px;fill:var(--sub)}
  .hdonut path{transition:opacity .15s}
  .hdonut.hov path{opacity:.35}
  .hdonut.hov path.on{opacity:1}
  .dn-leg{flex:1 1 250px;min-width:230px;max-width:440px;display:flex;flex-direction:column;gap:2px}
  .dn-leg .row{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:5px 10px;border-radius:8px}
  .dn-leg .row.on{background:var(--inset)}
  .dn-leg i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
  .dn-leg .cd{color:var(--sub);font-size:12px}
  .dn-leg b{margin-left:auto;font-weight:700}
  /* 衍生性部位：正權重＝斜紋弧（與真實持股區隔）；負權重（賣出/放空）＝虛線空心圖例、不畫弧 */
  .dn-leg i.dv-hatch{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 2px,transparent 2px 5px)}
  .dn-leg .row.dnoff i{background:transparent!important;border:1.5px dashed var(--dv-opt);border-radius:3px}
  .hdonut .dn-foot{flex:1 1 100%;font-size:11.5px;line-height:1.6;color:var(--sub);border-top:1px dashed var(--line);padding-top:9px;margin-top:2px}
  @media(max-width:560px){.hdonut{justify-content:center}}
  .stat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
  @media(max-width:860px){.stat-grid{grid-template-columns:1fr}}
  .stat-col-head{min-height:40px;display:flex;align-items:center;margin-bottom:10px;font-size:13px;color:var(--sub)}
  .info-i{cursor:pointer;color:var(--teal);font-weight:400;font-size:13px;padding:2px 3px;border-radius:4px}
  .info-i:hover{background:var(--teal-bg)}
  #tipPop{position:fixed;z-index:60;max-width:280px;background:var(--panel);border:1px solid var(--line);color:var(--ink);
    font-size:13px;line-height:1.55;padding:11px 13px;border-radius:10px;box-shadow:var(--sh-lg);display:none}
  .dtl thead th{background:var(--inset);color:var(--ink2);font-size:12px;font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
  table.dtl{font-size:12px}   /* 桌機明細表 12px（原 inline 等值）；手機卡片可見字級由 media 內 td{13.5px}/td.l{15px} 直接規則決定 */
  .acq-who{max-width:300px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
  /* 估算警示框（持股績效等） */
  .warnbox{background:var(--gold-bg);border:1px solid var(--gold-line);color:var(--warn-ink);font-weight:600;font-size:13.5px;
    padding:11px 14px;border-radius:8px;margin:0 0 10px;line-height:1.6}

  /* ============ 主動式 ETF 卡片（aclean） ============ */
  .aclean-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(500px,1fr));gap:16px}
  .aclean{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--sh-sm)}
  .aclean-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;border-bottom:1px solid var(--line2);padding-bottom:12px;margin-bottom:12px}
  .aclean-head .code{font-size:21px;font-weight:800;color:var(--teal)}
  .aclean-sub{font-size:12px;color:var(--sub);margin-top:4px}
  .move-score{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .move-score span{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 9px;background:var(--inset)}
  .flow-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
  .flowbox{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:var(--inset)}
  .flowbox span{display:block;font-size:11.5px;color:var(--sub);margin-bottom:5px}
  .flowbox b{font-size:16px;font-weight:700}
  .move-groups{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .move-panel{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
  .move-panel h4{margin:0;padding:9px 12px;font-size:13px;font-weight:700;background:var(--head);border-bottom:1px solid var(--line)}
  .move-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line2)}
  .move-row:last-child{border-bottom:none}
  .move-stock{min-width:0}
  .move-stock b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .move-stock span{font-size:12px;color:var(--sub)}
  .move-qty{text-align:right;white-space:nowrap;font-size:13px;font-weight:700}
  .move-money{display:block;font-size:11px;font-weight:600;margin-top:3px}

  /* ============ 主動式 ETF 列表（alist） ============ */
  .alist{display:grid;gap:10px}
  .alist-head,.alist-row{display:grid;grid-template-columns:38px minmax(140px,1.2fr) 92px 96px 86px minmax(130px,1fr) minmax(130px,1fr) 74px;gap:8px;align-items:center}
  .alist-head{color:var(--sub);font-size:12px;font-weight:600;padding:0 14px}
  .alist-head [data-k]{cursor:pointer;user-select:none}
  .alist-head [data-k]:hover{color:var(--teal)}
  .alist-row{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:var(--sh-sm)}
  .alist-rank{font-size:17px;font-weight:700;color:var(--sub)}
  .alist-code{font-size:17px;font-weight:800;color:var(--teal)}
  .alist-name{font-size:13px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .alist-sub{font-size:12px;color:var(--sub);margin-top:3px}
  .alist-num span,.alist-flow span{display:block;color:var(--sub);font-size:11px;margin-bottom:4px}
  .alist-num b,.alist-flow b{font-size:15px;font-weight:700}
  .alist-flow small{display:block;color:var(--sub);font-size:11px;margin-top:3px;white-space:nowrap}
  .alist-chips{display:flex;gap:5px;flex-wrap:wrap}
  .alist-chip{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:3px 8px;background:var(--inset)}
  .alist-focus{min-width:0;font-size:12px;line-height:1.55}
  .alist-focus b{font-size:13px}
  .alist-focus div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .alist-focus small{display:block;color:var(--sub);font-size:11px;overflow:hidden;text-overflow:ellipsis}
  .alist-action{text-align:right}

  /* ============ 基本資料清單 ============ */
  .info-list{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--sh-sm)}
  .info-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line2)}
  .info-row:last-child{border-bottom:none}
  .info-row span{color:var(--sub);font-size:13px}
  .info-row b{font-size:14.5px;color:var(--ink);font-weight:600;word-break:break-word}
  .active-empty{padding:22px;text-align:center;color:var(--sub)}
  @media(max-width:1100px){.alist-head{display:none}.alist-row{grid-template-columns:44px 1fr 105px;align-items:start}.alist-row>*:nth-child(n+4){grid-column:2/4}.alist-action{text-align:left}.alist-focus div{white-space:normal}}
  @media(max-width:620px){.info-row{grid-template-columns:1fr;gap:4px}}
  @media(max-width:820px){.active-hero{grid-template-columns:1fr}.active-kpis{min-width:0;grid-template-columns:repeat(2,1fr)}.aclean-grid{grid-template-columns:1fr}.move-groups{grid-template-columns:1fr}.flow-strip{grid-template-columns:1fr}}

  /* 手機(≤560px)：導覽列改單行可橫向滑動 */
  @media(max-width:560px){
    .tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:0}
    .tabs::-webkit-scrollbar{display:none}
    .tab{flex:0 0 auto}
  }
  .more.clk{cursor:pointer} .more.clk:hover{color:var(--teal)}
  /* 寬表格在窄螢幕改為區域內橫向捲動，避免整頁被撐寬 */
  #instResult,#instSummary,#dtsResult,#rankResult,#perfResult,#etfList,#stockResult,#detSub,#divResult,#otherResult,#xResult,#cmpResult{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .subnav button{font-size:14px!important;padding:8px 16px!important}

  /* ============ 手機優化（≤560px）：字級／觸控／篩選鈕／表格 ============ */
  @media(max-width:560px){
    /* — 字級與資訊層級 — */
    .brand h1{font-size:17px;line-height:1.3}
    h3.sec{font-size:16.5px;margin-bottom:12px}
    .sub{font-size:12.5px}
    th{font-size:12.5px}
    td{font-size:13.5px}
    .legend{font-size:12px;line-height:1.6}
    .meta{font-size:12.5px;line-height:1.5}
    .hint{font-size:12.5px}
    .rangeline{line-height:1.55}
    /* — 導覽列：加高觸控、出血滿版滑動 — */
    header{padding:12px 16px 0}
    main{padding:16px 16px 84px}
    .tab{padding:12px 13px;font-size:13.5px}
    .tabs{margin:10px -16px 0;padding:0 16px}
    /* — 篩選鈕群：每組獨立可橫滑、按鈕≥44px — */
    .seg{max-width:100%;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .seg::-webkit-scrollbar{display:none}
    .seg button{flex:0 0 auto;padding:11px 13px;min-height:42px}
    .seg.big button,.subnav button{padding:11px 13px!important;font-size:13.5px!important}
    .ctrls{gap:8px 10px}
    .chips{gap:10px}
    .chip{padding:10px 14px;min-height:40px}
    .fbtn{padding:11px 13px;min-height:44px;font-size:13px}
    select,.sel,input.num{padding-top:11px;padding-bottom:11px;min-height:44px}
    .datenav button{min-height:44px;padding:0 14px}
    .btn{padding:11px 16px;min-height:44px}
    .morebtn,.morebtn.clk{padding:12px 0;min-height:44px}
    /* — 搜尋框獨佔一行 — */
    .searchbar{min-width:100%;flex:1 0 100%}
    .searchbar input{min-height:44px}
    /* — 首屏精簡：訂閱橫幅／跑馬燈縮量 — */
    .promo{flex-wrap:wrap;padding:10px 12px;margin-bottom:12px}
    .promo-t{font-size:13.5px}
    .promo-btn{padding:9px 13px;font-size:12px}
    .promo-mq{flex:1 1 100%;order:3;margin:8px 0 0;padding-top:7px;border-top:1px solid var(--line2)}
    .promo-mq>span{font-size:13px}
    /* — 績效比較表欄位多：橫滑＋首欄固定 — */
    #perfResult table td:first-child,#perfResult table th:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
    #perfResult table th:first-child{background:var(--head)}
    /* — 寬資料表卡片化：一列一張卡，每格自動帶欄名 — */
    #etfList table,#rankResult table,#instResult table,#stockResult table,#dtsResult table{border:none;background:none;font-size:14px;box-shadow:none}
    #etfList thead,#rankResult thead,#instResult thead,#stockResult thead,#dtsResult thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
    #etfList tbody tr,#rankResult tbody tr,#instResult tbody tr,#stockResult tbody tr,#dtsResult tbody tr{display:block;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--card);padding:5px 13px;box-shadow:var(--sh-sm)}
    #etfList tbody td,#rankResult tbody td,#instResult tbody td,#stockResult tbody td,#dtsResult tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right;border:none!important;padding:9px 0;white-space:normal}
    #etfList tbody td+td,#rankResult tbody td+td,#instResult tbody td+td,#stockResult tbody td+td,#dtsResult tbody td+td{border-top:1px solid var(--line2)!important}
    #etfList tbody td::before,#rankResult tbody td::before,#instResult tbody td::before,#stockResult tbody td::before,#dtsResult tbody td::before{content:attr(data-label);color:var(--sub);font-weight:500;text-align:left;flex:0 0 42%;white-space:normal}
    #etfList tbody td.l,#rankResult tbody td.l,#instResult tbody td.l,#stockResult tbody td.l,#dtsResult tbody td.l{justify-content:flex-start;text-align:left;font-weight:600;font-size:15px;border-top:none!important}
    #etfList tbody td.l::before,#rankResult tbody td.l::before,#instResult tbody td.l::before,#stockResult tbody td.l::before,#dtsResult tbody td.l::before{content:none}
    #etfList tbody td.rank,#rankResult tbody td.rank,#instResult tbody td.rank,#stockResult tbody td.rank,#dtsResult tbody td.rank{justify-content:flex-start;color:var(--sub);font-size:12px;padding:2px 0 0;border-top:none!important}
    #etfList tbody td.rank::before,#rankResult tbody td.rank::before,#instResult tbody td.rank::before,#stockResult tbody td.rank::before,#dtsResult tbody td.rank::before{content:"#";flex:0 0 auto;margin-right:1px}
    #etfList tbody tr.subr,#rankResult tbody tr.subr,#instResult tbody tr.subr,#stockResult tbody tr.subr,#dtsResult tbody tr.subr{border:none;background:none;margin:-6px 0 10px;padding:0;box-shadow:none}
    /* 配息行事曆／其他ETF／ETF內頁子頁／多檔交集 同款手機卡片化 */
    #divResult table,#otherResult table,#detSub table,#xResult table{border:none;background:none;font-size:14px;box-shadow:none}
    #divResult thead,#otherResult thead,#detSub thead,#xResult thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
    #divResult tbody tr,#otherResult tbody tr,#detSub tbody tr,#xResult tbody tr{display:block;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--card);padding:5px 13px;box-shadow:var(--sh-sm)}
    #divResult tbody td,#otherResult tbody td,#detSub tbody td,#xResult tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right;border:none!important;padding:9px 0;white-space:normal}
    #divResult tbody td+td,#otherResult tbody td+td,#detSub tbody td+td,#xResult tbody td+td{border-top:1px solid var(--line2)!important}
    #divResult tbody td::before,#otherResult tbody td::before,#detSub tbody td::before,#xResult tbody td::before{content:attr(data-label);color:var(--sub);font-weight:500;text-align:left;flex:0 0 42%;white-space:normal}
    #divResult tbody td.l,#otherResult tbody td.l,#detSub tbody td.l,#xResult tbody td.l{justify-content:flex-start;text-align:left;font-weight:600;font-size:15px;border-top:none!important}
    #divResult tbody td.l::before,#otherResult tbody td.l::before,#detSub tbody td.l::before,#xResult tbody td.l::before{content:none}
    #divResult tbody td.rank,#otherResult tbody td.rank,#detSub tbody td.rank,#xResult tbody td.rank{justify-content:flex-start;color:var(--sub);font-size:12px;padding:2px 0 0;border-top:none!important}
    #divResult tbody td.rank::before,#otherResult tbody td.rank::before,#detSub tbody td.rank::before,#xResult tbody td.rank::before{content:"#";flex:0 0 auto;margin-right:1px}
    /* 展開的「明細」列（td 有 colspan）：不做左右 label 版，改整塊直排全寬（比照 #etfList 等做法），內層表格再各自卡片化 */
    #divResult tbody tr.subr,#otherResult tbody tr.subr,#detSub tbody tr.subr,#xResult tbody tr.subr{border:none;background:none;margin:-6px 0 10px;padding:0 2px;box-shadow:none}
    #divResult tbody td[colspan],#otherResult tbody td[colspan],#detSub tbody td[colspan],#xResult tbody td[colspan]{display:block;text-align:left;border:none!important}
    #divResult tbody td[colspan]::before,#otherResult tbody td[colspan]::before,#detSub tbody td[colspan]::before,#xResult tbody td[colspan]::before{content:none}
    #detSub tbody tr.subr td:empty{display:none}
    /* 今日異動 買超/賣超 兩表在手機改單欄堆疊 */
    #detSub div[style*="minmax(440px"]{grid-template-columns:1fr!important}
    #etfList tbody td[colspan],#rankResult tbody td[colspan],#instResult tbody td[colspan],#stockResult tbody td[colspan],#dtsResult tbody td[colspan]{display:block;text-align:left;padding:0;border:none!important}
    #etfList tbody td[colspan]::before,#rankResult tbody td[colspan]::before,#instResult tbody td[colspan]::before,#stockResult tbody td[colspan]::before,#dtsResult tbody td[colspan]::before{content:none}
    /* — 比較／相似度輸入框自適應 — */
    #cmpA,#cmpB,#cmpAddInput{width:100%!important}
    .cmp{flex-direction:column;align-items:stretch}
    /* — summary 摘要塊 2 欄 — */
    .summ{gap:12px 16px}
    .summ div{min-width:calc(50% - 8px)}
    /* — 配息數字條：2 欄，直向分隔線改成橫向 — */
    .divstat{padding:6px 4px}
    .divstat>div{flex:1 1 50%;border-left:none;padding:11px 14px}
    .divstat>div:nth-child(even){border-left:1px solid var(--line2)}
    .divstat>div:nth-child(n+3){border-top:1px solid var(--line2)}
    .divstat b{font-size:18px}
    /* — 可展開列內容改直式 — */
    .subli{flex-direction:column;align-items:flex-start;gap:3px}
    /* — 事件等篩選列改左對齊自然折行 — */
    #dtsHead .ctrls,.ctrls[style*="space-between"]{justify-content:flex-start!important}
    /* — 明細頭標題列可換行 — */
    .ct{flex-wrap:wrap;gap:8px}
    /* — 退休計算機輸入列 — */
    .ctrls .rfield{width:100%;justify-content:space-between}
    #retireBody .btn{width:100%;margin-top:2px}
    /* — fab 略縮 — */
    .fab{right:14px;bottom:14px;padding:11px 16px;font-size:13px}
  }

  /* ============ 動態偏好：尊重減少動態 ============ */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }
  /* 切換日/夜主題的瞬間關閉所有過渡，避免整頁跨色閃爍 */
  :root.theme-switching *{transition:none!important}

  /* ============ 排行長條圖檢視（投信買賣超） ============ */
  .rankbar{display:flex;flex-direction:column;gap:7px;margin-top:4px}
  .rankbar-row{display:grid;grid-template-columns:26px minmax(84px,140px) minmax(0,1fr) max-content;align-items:center;
    gap:12px;cursor:pointer;padding:4px 6px;border-radius:8px;transition:background .15s}
  .rankbar-row:hover{background:var(--inset)}
  .rankbar-rk{font-size:14px;font-weight:800;color:var(--sub);text-align:center}
  .rankbar-nm{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rankbar-nm .rc{color:var(--sub);font-weight:400;font-size:11.5px;margin-left:4px}
  .rankbar-track{position:relative;height:20px;background:var(--inset);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
  .rankbar-fill{position:absolute;top:0;bottom:0;left:0;border-radius:6px;min-width:3px}
  .rankbar-val{font-size:14.5px;font-weight:800;white-space:nowrap;min-width:74px;text-align:right;font-variant-numeric:tabular-nums}
  .rankbar-sub{grid-column:1/-1;margin:2px 0 4px}
  /* 前三名略放大，強化排行直覺 */
  .rankbar-row:nth-child(-n+3) .rankbar-rk{font-size:16px;color:var(--ink)}
  .rankbar-row:nth-child(-n+3) .rankbar-nm{font-size:16px}
  .rankbar-row:nth-child(-n+3) .rankbar-track{height:24px}
  .rankbar-row:nth-child(-n+3) .rankbar-val{font-size:16px}
  @media(max-width:560px){
    .rankbar-row{grid-template-columns:20px minmax(70px,96px) minmax(0,1fr) max-content;gap:8px;padding:6px 4px}
    .rankbar-nm{font-size:13.5px}.rankbar-val{font-size:13.5px;min-width:64px}
    .rankbar-row:nth-child(-n+3) .rankbar-nm,.rankbar-row:nth-child(-n+3) .rankbar-val{font-size:14.5px}
  }
  /* 其他ETF 成分明細（展開列，資訊型清單） */
  .ocon{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px;background:var(--panel)}
  .ocon-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 66px;gap:10px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--line2);font-size:13px}
  .ocon-row:last-child{border-bottom:none}
  .ocon-th{background:var(--head);color:var(--sub);font-size:12px;font-weight:600}
  .ocon-th span:nth-child(2),.ocon-th span:nth-child(3){text-align:right}
  .ocon-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ocon-n small{font-size:11px}
  .ocon-k{text-align:right;font-size:12px;white-space:nowrap}
  .ocon-w{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
  .ocon-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
  @media(max-width:560px){
    #otherResult tbody tr.osub{display:block;border:0;background:none;box-shadow:none;margin:-4px 0 10px;padding:0}
    #otherResult tbody tr.osub td{display:block;padding:0;border:0!important}
    #otherResult tbody tr.osub td::before{content:none!important}
    .ocon-row{grid-template-columns:minmax(0,1fr) 72px 56px;gap:8px;padding:7px 10px}
  }
  /* 多檔交集表在手機保留「表格＋可點排序表頭」（改橫向捲動，不轉卡片），維持排序操作一致 */
  @media(max-width:560px){
    #stockResult #xTbl{display:table;width:auto;min-width:520px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--sh-sm);font-size:13px}
    #stockResult #xTbl thead{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
    #stockResult #xTbl tbody tr{display:table-row;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
    #stockResult #xTbl th,#stockResult #xTbl td{white-space:nowrap}
    #stockResult #xTbl tbody td{display:table-cell;text-align:right;padding:9px 10px;border:none;border-bottom:1px solid var(--line2)!important}
    #stockResult #xTbl tbody td.l{text-align:left}
    #stockResult #xTbl tbody td::before{content:none!important}
  }
  /* ============ 日/夜切換按鈕 ============ */
  .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
    border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--sub);cursor:pointer;
    box-shadow:var(--sh-sm);transition:color .15s,background .15s,border-color .15s}
  .theme-toggle:hover{color:var(--ink);border-color:var(--line-strong);background:var(--inset)}
  .theme-toggle svg{width:19px;height:19px;display:block}
  .theme-toggle .ico-moon{display:none}
  :root[data-theme="dark"] .theme-toggle .ico-sun{display:none}
  :root[data-theme="dark"] .theme-toggle .ico-moon{display:block}

/* ── 品牌區可點回首頁（2026-08-21 使用者要求）──
   ⚠ ui-shell.css 的 .brand 是 grid（38px | minmax(0,1fr) | auto），
   本連結必須「橫跨前兩欄＋內部重建同樣兩欄」，切換鈕才會留在第三欄；
   用 flex 會被塞進 38px 首欄把文字擠爆（2026-08-21 上線後實測翻車，勿回退）。 */
.brand-link{grid-column:1/3;display:grid;grid-template-columns:38px minmax(0,1fr);
  align-items:center;gap:10px;min-width:0;
  color:inherit;text-decoration:none;border-radius:10px}
.brand-link:hover{text-decoration:none}
.brand-link:hover .brand-mark{filter:brightness(1.08)}
.brand-link:focus-visible{outline:2px solid var(--teal);outline-offset:3px}