/* 燈號比較頁：紅＝佳、黃＝中、綠＝弱（和個股頁四燈號健診同色） */
.sp-hr { --good: #f0443a; --mid: #f5c542; --bad: #16b36b; }
.sp-hr .hr-bar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-hr .hr-bar small { margin-left: auto; color: var(--mute); font-size: 12px; }
.sp-hr .hr-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sp-hr .hr-seg button { background: transparent; color: var(--mute); border: 0; border-right: 1px solid var(--line); padding: 6px 18px; font: inherit; font-size: 14px; cursor: pointer; border-radius: 0; box-shadow: none; }
.sp-hr .hr-seg button:last-child { border-right: 0; }
.sp-hr .hr-seg button.on { background: var(--acc); color: #fff; }
.sp-hr .hr-seg button[disabled] { opacity: .4; cursor: default; }
.sp-hr .hr-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; color: var(--mute); }
.sp-hr .hr-sort span { margin-right: 2px; }
.sp-hr .hr-sort button { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; box-shadow: none; white-space: nowrap; }
.sp-hr .hr-sort button.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.sp-hr .hr-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.sp-hr .hr-filter select, .sp-hr .hr-filter input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; max-width: 100%; }
.sp-hr .hr-filter input { width: 180px; }
.sp-hr .hr-n { color: var(--mute); }
.sp-hr .hr-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-hr .hr-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sp-hr .hr-tbl th, .sp-hr .hr-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--grid, var(--line)); text-align: right; white-space: nowrap; }
.sp-hr .hr-tbl th { color: var(--mute); font-weight: 600; font-size: 12.5px; }
.sp-hr .hr-tbl th[data-sort] { cursor: pointer; }
.sp-hr .hr-tbl th.on { color: var(--text); }
.sp-hr .hr-tbl .l { text-align: left; }
.sp-hr .hr-tbl td.l a { color: var(--text); text-decoration: none; }
.sp-hr .hr-tbl td.l a span { color: var(--mute); }
.sp-hr .hr-tbl td.l a:hover b { text-decoration: underline; }
.sp-hr .hr-tbl td.l a span { display: inline-block; max-width: 16em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.sp-hr .hr-g { color: var(--mute); max-width: 10em; overflow: hidden; text-overflow: ellipsis; }
.sp-hr .hr-i { color: var(--mute); }
.sp-hr .up { color: var(--up); } .sp-hr .dn { color: var(--dn); }
.sp-hr .hr-s b { display: inline-block; min-width: 2.4em; text-align: center; border-radius: 4px; padding: 1px 4px; font-weight: 700; }
.sp-hr .hr-s b.good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.sp-hr .hr-s b.mid { background: color-mix(in srgb, var(--mid) 20%, transparent); color: #b8860b; }
.sp-hr .hr-s b.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.sp-hr .hr-s b.na { color: var(--mute); font-weight: 400; }
.sp-hr .hr-more { display: block; margin: 12px auto 0; background: transparent; color: var(--acc); border: 1px solid var(--line); border-radius: 6px; padding: 6px 16px; font: inherit; font-size: 13px; cursor: pointer; box-shadow: none; }
.sp-hr .hr-note { margin: 12px 0 0; font-size: 12px; color: var(--mute); line-height: 1.6; }
@media (max-width: 600px) {
  .sp-hr .hr-filter input { width: 100%; }
  .sp-hr .hr-tbl td.l a span { max-width: 8em; }
}
.sp-hr .hr-g button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; box-shadow: none; text-align: left; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-hr .hr-g button:hover { color: var(--acc); text-decoration: underline; }
.sp-hr .hr-me { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--acc); background: color-mix(in srgb, var(--acc) 7%, transparent); font-size: 13.5px; }
.sp-hr .hr-me button { margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; font: inherit; font-size: 12px; color: var(--mute); cursor: pointer; box-shadow: none; }
.sp-hr .hr-tbl tr.hr-hl td { background: color-mix(in srgb, var(--acc) 10%, transparent); }