/* ════════ 今日主流族群面板 共用樣式 tflow_widget.css ════════
   給「策略工作台 /studio」用（studio 為深色主題、未載 style.css）。
   面板本身為淺色設計：用 .tflow-surface 包成一張白卡，深底頁面上也乾淨一致。
   主頁 index.html 仍用 style.css 內既有的 tf-* 規則、不載本檔（兩頁長一樣、各自上色）。 */

/* 深底頁面上的淺色卡面（讓 ①大盤/②③ 區段標題等深色字有白底可讀） */
.tflow-surface { background: #fff; color: #16202b; border-radius: 10px; padding: 12px 14px; }
.tflow-surface .loading { color: #5b6876; padding: 18px; text-align: center; }

.scr-prog { text-align: center; color: #888; padding: 22px; font-size: 13px; line-height: 1.7; }
.scr-mut { color: #999; font-size: 11px; }

.tf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 2px 0 8px; font-size: 13px; }
.tf-mkt b, .tf-head b { color: #16202b; }
.tf-srcwrap { color: #5b6876; }
.tf-srcbtn { display: inline-block; font-size: 12px; padding: 2px 9px; margin-left: 4px; border: 1px solid #cfd6df; border-radius: 14px; background: #fff; color: #5b6876; cursor: pointer; }
.tf-srcbtn.on { background: #2e9e6b; border-color: #2e9e6b; color: #fff; }
.tf-sec { font-weight: 800; color: #16202b; font-size: 14px; margin: 13px 0 7px; }
.tf-setpool { font-size: 12px; font-weight: 700; padding: 3px 11px; margin-left: 8px; border: 1px solid #d4380d; border-radius: 14px; background: #fff4f0; color: #d4380d; cursor: pointer; vertical-align: middle; }
.tf-setpool:hover { background: #d4380d; color: #fff; }
.tf-rank { display: inline-flex; gap: 0; margin-left: 8px; vertical-align: middle; }
.tf-rkbtn { font-size: 12px; font-weight: 700; padding: 2px 11px; border: 1px solid #cfd6df; background: #fff; color: #5b6876; cursor: pointer; }
.tf-rkbtn:first-child { border-radius: 14px 0 0 14px; }
.tf-rkbtn:last-child { border-radius: 0 14px 14px 0; border-left: 0; }
.tf-rkbtn.on { background: #d4380d; border-color: #d4380d; color: #fff; }
.tf-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tf-gcard { border: 1px solid #e4e9f0; border-left: 4px solid #2e9e6b; border-radius: 11px; background: #fff; padding: 10px 13px; cursor: pointer; box-shadow: 0 1px 2px rgba(27, 38, 56, .05); transition: transform .14s, box-shadow .14s; }
.tf-gcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27, 38, 56, .10); }
.tf-gcard.on { border-left-color: #2f6fed; background: #f4f8ff; }
.tf-gtop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tf-gtop b { font-size: 14.5px; }
.tf-gtag { font-size: 12px; font-weight: 800; color: #2e6fb5; }
.tf-gmet { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 12.5px; }
.tf-gm { font-weight: 700; }
.tf-gm.up { color: #d83a34; }
.tf-gm.down { color: #15936b; }
.tf-gm.flat { color: #9aa6b2; }
.tf-glive { font-weight: 800; border: 1px solid currentColor; border-radius: 7px; padding: 0 6px; }
.tf-dist { margin-top: 9px; font-size: 12.5px; color: #a06000; background: #fff8ec; border: 1px solid #f0e0c0; border-radius: 8px; padding: 6px 11px; }
.tf-stag { font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 12px; white-space: nowrap; }
.tf-stag.lead { background: #fdeeee; color: #c0392b; }
.tf-stag.lag { background: #eef6ee; color: #1f8a4c; }
.tf-name { font-weight: 700; cursor: pointer; color: #1f4e78; }
.tf-name .wcode { color: #8a96a2; font-weight: 600; font-size: 12px; }

.tf-stbl { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tf-sthead, .tf-srow { display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(9, minmax(58px, 1fr)) 28px; align-items: center; gap: 6px; padding: 7px 10px; }
.tf-sthead { font-size: 12px; color: #8a96a2; font-weight: 700; padding: 4px 10px; border-bottom: 1px solid #e7edf3; }
.tf-sh { text-align: right; cursor: pointer; user-select: none; white-space: nowrap; }
.tf-sh:hover { color: #2e6fb5; }
.tf-sh.on { color: #1f4e78; font-weight: 800; }
.tf-sthead .tf-snm { text-align: left; }
.tf-srow { border: 1px solid #eef1f4; border-radius: 9px; background: #fafbfd; }
.tf-srow:hover { background: #f4f7fb; }
.tf-snm { text-align: left; display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.tf-snm .tf-name { font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-c { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; color: #46535f; }
.tf-c.up { color: #d83a34; }
.tf-c.down { color: #15936b; }
.tf-c.flat { color: #9aa6b2; }
.tf-c.hot { color: #b8860b; font-weight: 800; }
.tf-srow .wstar { justify-self: center; cursor: pointer; font-size: 16px; color: #c9a227; }

@media (max-width: 680px) {
  .tf-sthead, .tf-srow { min-width: 700px; }
}