/* 法人個股買賣超 v2 — 豐利資本共用樣式(index / screener 共享,利於快取) */
:root{
  --navy:#0B1F3A; --royal:#1D4E9E; --royal-deep:#123060;
  --blue-soft:#E8EEF7; --paper:#F3F5F9; --card:#FFFFFF;
  --ink:#16233B; --muted:#66738A; --line:#DCE3EC; --gold:#B98A1C;
  --up:#C00000; --down:#1A7A4A; --up-bg:#FBEAEA; --down-bg:#E7F2EC;
  --shadow:0 2px 10px rgba(11,31,58,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Microsoft JhengHei","Noto Sans TC","PingFang TC",sans-serif;
  font-size:14px;line-height:1.55}
.num{font-family:Arial,Helvetica,sans-serif;font-style:italic;
  font-variant-numeric:tabular-nums;letter-spacing:.2px}
a{color:var(--royal)}
.ta-r{text-align:right}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--muted)}
:focus-visible{outline:2px solid var(--royal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 版頭 ---------- */
.hdr{background:linear-gradient(135deg,var(--navy) 0%,var(--royal-deep) 60%,var(--royal) 100%);
  color:#fff;padding:13px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.logo img{height:46px;width:46px;background:#fff;border-radius:10px;padding:4px}
.brand{display:flex;flex-direction:column;line-height:1.25}
.brand b{font-size:12.5px;letter-spacing:4px;color:#C9D6EC;font-weight:600;
  font-family:Arial,Helvetica,sans-serif;font-style:italic}
.brand i{font-style:normal;font-size:21px;font-weight:700;letter-spacing:1px}
.hdrR{text-align:right}
.hdrR .big{font-size:15px}
.hdrR .big b{color:#FFD98A;font-size:18px;margin:0 2px}
.hdrsub{font-size:12px;color:#AEBDD6;margin-top:3px}

/* ---------- 兩大分頁 ---------- */
.nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
  padding:8px 24px;display:flex;gap:12px;align-items:center;
  box-shadow:0 1px 6px rgba(11,31,58,.07)}
.ptab{position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:10px 34px;border-radius:10px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font-weight:700;font-size:16px;
  text-decoration:none;letter-spacing:1.5px}
.ptab::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--line);flex:none}
.ptab:hover{border-color:var(--royal);color:var(--royal)}
.ptab.on{background:var(--royal);border-color:var(--royal);color:#fff;
  box-shadow:0 2px 10px rgba(29,78,158,.35)}
.ptab.on::before{background:var(--gold)}
.navHint{margin-left:auto;font-size:12px;color:var(--muted)}
@media(max-width:640px){.navHint{display:none}.ptab{padding:9px 18px}}

/* ---------- 版面 ---------- */
main{max-width:1340px;margin:0 auto;padding:20px 20px 46px}
.sec{margin-bottom:24px}
.hint{font-size:12px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:15px 17px 13px;margin-bottom:18px}
.shooting{box-shadow:none}
.cardHd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:9px}
.cardHd h2{margin:0;font-size:17px;color:var(--navy);display:flex;align-items:center;gap:10px}
.cardHd h2::before{content:"";display:inline-block;width:5px;height:18px;
  background:var(--gold);border-radius:2px}
.echo{font-size:12.5px;color:var(--royal);font-weight:600;
  background:var(--blue-soft);padding:2px 9px;border-radius:6px}
.controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:#fff}
.seg button{font:inherit;font-size:12.5px;padding:5px 11px;border:0;background:#fff;
  color:var(--muted);cursor:pointer;line-height:1.3}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:var(--royal);color:#fff;font-weight:600}
.seg button small{display:block;font-size:10px;opacity:.85;
  font-family:Arial,Helvetica,sans-serif;font-style:italic}
.shotBtn{font:inherit;font-size:12.5px;padding:5px 12px;border:1px solid var(--royal);
  border-radius:8px;background:#fff;color:var(--royal);cursor:pointer;
  font-weight:600;white-space:nowrap}
.shotBtn:hover{background:var(--blue-soft)}
.shotBtn::before{content:"\1F4F7  "}
.shotBtn[disabled]{opacity:.55;cursor:wait}
.ghostBtn{font:inherit;font-size:13px;padding:7px 20px;border:1px dashed var(--line);
  border-radius:8px;background:#fff;color:var(--muted);cursor:pointer}
.ghostBtn:hover{color:var(--royal);border-color:var(--royal)}
.ctr{text-align:center;margin-top:10px}
footer{max-width:1340px;margin:0 auto;padding:0 22px 30px;font-size:11.5px;color:var(--muted)}

/* ============ 市場總覽 ============ */
.duo{display:grid;grid-template-columns:1fr 1.25fr;gap:18px}
@media(max-width:1020px){.duo{grid-template-columns:1fr}}
.duo .card{margin-bottom:0}

/* 區塊1:資金流向矩陣(期間×機構;整列可點=全頁期間選擇器) */
.fmx{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.fmx col.cP{width:86px}
.fmx col.cSum{width:26%}
.fmx th{font-size:12.5px;color:var(--muted);font-weight:700;padding:3px 8px 6px;
  text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.fmx th:first-child{text-align:left}
.fmx td{padding:7px 8px;border-bottom:1px solid #F0F3F8;vertical-align:middle}
.fmx tr.rowP{cursor:pointer}
.fmx tr.rowP:hover td{background:#FAFCFF}
.fmx tr.rowP.on td{background:var(--blue-soft)}
.fmx tr.rowP:last-child td{border-bottom:0}
.fmx .pl{font-weight:700;color:var(--navy);white-space:nowrap}
.fmx .pl small{display:block;font-size:10.5px;color:var(--muted);font-weight:400;
  font-family:Arial,Helvetica,sans-serif;font-style:italic}
.fmx tr.rowP.on .pl{color:var(--royal)}
.fcell{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.fcell .v{font-size:16px;font-weight:700;white-space:nowrap;line-height:1.1}
.fcell.big .v{font-size:18px}
.fbarT{position:relative;width:100%;max-width:150px;height:6px;
  background:#EFF2F7;border-radius:3px;overflow:hidden}
.fbarT::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#C9D2DF}
.fbar{position:absolute;top:0;bottom:0;border-radius:3px}
.fmxNote{margin-top:8px;font-size:12px;color:var(--muted);
  border-top:1px dashed var(--line);padding-top:7px}

/* 區塊2:漲跌幅分布(自繪,無外部圖表庫) */
.dstats{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:2px 2px 10px;font-size:13.5px;color:var(--muted)}
.dstats .it b{font-size:17.5px;margin:0 1px}
.dbarT{flex:1;min-width:150px;height:10px;border-radius:5px;overflow:hidden;
  display:flex;border:1px solid var(--line);background:#fff}
.dbarT i{display:block;height:100%}
.dchart{position:relative;height:272px;margin:4px 2px 0;
  border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(to top,transparent 0 66.5px,#EDF1F6 66.5px 67.5px)}
.dcols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0 1px}
.dcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%;cursor:default}
.dcol .lbl{font-family:Arial,Helvetica,sans-serif;font-style:italic;font-size:10.5px;
  color:var(--ink);line-height:1;margin-bottom:2px;white-space:nowrap}
.dcol .bar{width:100%;max-width:38px;border-radius:3px 3px 0 0;min-height:1px}
.dcol:hover .bar{outline:1.5px solid var(--navy);outline-offset:-1.5px}
.daxis{display:flex;gap:2px;padding:3px 1px 0;margin:0 2px}
.daxis span{flex:1 1 0;min-width:0;text-align:center;
  font-family:Arial,Helvetica,sans-serif;font-style:italic;
  font-size:10px;color:var(--muted);white-space:nowrap;overflow:visible}
.dxtitle{text-align:center;font-size:11px;color:var(--muted);margin-top:4px}
.dtip{position:fixed;z-index:90;pointer-events:none;background:var(--navy);color:#fff;
  font-size:12px;padding:6px 10px;border-radius:7px;box-shadow:0 4px 14px rgba(11,31,58,.35);
  white-space:nowrap;transform:translate(-50%,-115%);display:none}
.dtip b{color:#FFD98A}

/* 區塊3:排行 */
.rkWrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1020px){.rkWrap{grid-template-columns:1fr}}
.rkPanel{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.rkHd{padding:7px 12px;background:var(--blue-soft);border-bottom:2px solid var(--royal);
  font-weight:700;color:var(--navy);font-size:16px;
  display:flex;justify-content:space-between;align-items:center}
.rkCols{display:grid;grid-template-columns:1fr 1fr}
.rkCols > div + div{border-left:1px solid var(--line)}
.rtb{width:100%;border-collapse:collapse;font-size:16px}
.rtb th{background:#F2F5FA;color:var(--muted);font-weight:700;padding:5px 8px;
  font-size:13.5px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.rtb th.ta-r{text-align:right}
.rtb td{padding:4.5px 8px;border-bottom:1px solid #F0F3F8;
  white-space:nowrap;vertical-align:baseline}
.rtb tr:last-child td{border-bottom:0}
.rtb .rk{color:#A6AFBC;font-size:13px;width:26px;padding-right:2px}
.rtb a{text-decoration:none;font-weight:700}
.rtb .nm{color:var(--ink);font-size:14.5px;margin-left:5px;font-weight:400}
.rtb td.val{text-align:right;font-weight:700}
.rtb td.pc{text-align:right;font-size:13.5px;width:64px}

/* ============ 個股篩選 · 自選 ============ */
.fwrap{position:sticky;top:58px;z-index:50;background:var(--paper);
  padding:2px 0 8px;margin:-2px 0 8px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 2px 10px rgba(11,31,58,.07);padding:11px 16px 9px}
.frow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:4px 0}
.flb{font-size:13px;color:var(--muted);font-weight:700;width:52px;letter-spacing:3px}
.fsum{font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line);
  margin-top:7px;padding-top:6px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:8px}
.fsum b{color:var(--royal)}
input[type=text]{font:inherit;font-size:13.5px;padding:6px 11px;
  border:1px solid var(--line);border-radius:8px;width:200px}
input[type=text]:focus{outline:none;border-color:var(--royal)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{background:var(--blue-soft);color:var(--navy);font-weight:700;padding:7px 8px;
  border-bottom:1.5px solid var(--royal);text-align:right;font-size:13.5px;
  white-space:nowrap;cursor:pointer;user-select:none}
.tbl th.ta-l{text-align:left}
.tbl th:hover{color:var(--royal)}
.tbl.stickyHd thead th{position:sticky;top:var(--thead-top,120px);z-index:5}
.tbl td{padding:5px 8px;border-bottom:1px solid #EDF1F6;white-space:nowrap;text-align:right}
.tbl td.ta-l{text-align:left}
.tbl tbody tr:hover{background:#FAFCFF}
.tbl a{text-decoration:none;font-weight:700}
.tbl .nm{color:var(--ink);margin-left:5px;font-weight:400;font-size:13.5px}
.delBtn{border:0;background:none;color:#C2475C;cursor:pointer;font-size:13px;padding:0 4px}
.empty{text-align:center;color:var(--muted);padding:16px !important}
.twrap{overflow-x:auto}
@media(min-width:1001px){.twrap{overflow:visible}} /* 桌面取消捲動容器,thead sticky 才能貼齊視窗 */
@media(max-width:900px){.tbl{font-size:13px} input[type=text]{width:140px}}