/* 個股頁：基本資料卡、三訊號紀錄、同產業比較（深色、紅漲綠跌） */
.sp-sp { --bg: #131722; --card: #1c2030; --line: #2f354b; --grid: #272d42; --text: #e6e8ee; --mute: #848e9c; --up: #f0443a; --dn: #16b36b; --acc: #4e8cff;
	color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif; margin: 0 0 20px; }
.sp-sp *, .sp-sp *::before, .sp-sp *::after { box-sizing: border-box; }
.sp-sp:empty { display: none; }
.sp-sp-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.sp-sp-loading { color: var(--mute); font-size: 14px; }
.sp-sp .hd { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.sp-sp h2 { margin: 0; font-size: 20px; color: #fff; font-weight: 700; line-height: 1.35; }
.sp-sp h2 small { display: block; font-size: 12px; font-weight: 400; color: var(--mute); margin-top: 2px; }
.sp-sp .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-sp .chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: #262c40; color: #c9cfdb; border: 1px solid var(--line); }
.sp-sp .chip.dim { color: var(--mute); }
.sp-sp .chip.mk-TW { background: rgba(240, 68, 58, .15); color: #ff8a80; border-color: transparent; }
.sp-sp .chip.mk-JP { background: rgba(224, 86, 155, .15); color: #f08cbf; border-color: transparent; }
.sp-sp .chip.mk-KR { background: rgba(46, 197, 211, .15); color: #6fdde6; border-color: transparent; }
.sp-sp .chip.mk-US { background: rgba(78, 140, 255, .15); color: #8db4ff; border-color: transparent; }
.sp-sp .desc { font-size: 14px; line-height: 1.75; color: #d5d9e2; margin-bottom: 14px; }
.sp-sp .desc p { margin: 0 0 6px; }
.sp-sp .desc b { color: #fff; }
.sp-sp .desc details.en { margin-top: 4px; }
.sp-sp .desc details.en summary { cursor: pointer; color: var(--mute); font-size: 12px; }
.sp-sp .desc details.en p { color: #b7bdc8; font-size: 13px; margin-top: 6px; }
.sp-sp .dim { color: var(--mute); }
.sp-sp .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.sp-sp .grid > div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; min-width: 0; }
.sp-sp .grid span { display: block; color: var(--mute); font-size: 12px; margin-bottom: 3px; }
.sp-sp .grid b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-sp .rng { margin-top: 14px; }
.sp-sp .rng > span { color: var(--mute); font-size: 12px; }
.sp-sp .rng .bar { position: relative; height: 6px; border-radius: 3px; margin: 8px 0 6px; background: linear-gradient(90deg, var(--dn), #f5c542, var(--up)); }
.sp-sp .rng .bar i { position: absolute; top: -4px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px var(--card); }
.sp-sp .rng .lh { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #b7bdc8; flex-wrap: wrap; }
.sp-sp .rng em { font-style: normal; font-variant-numeric: tabular-nums; }
.sp-sp .foot { color: var(--mute); font-size: 12px; margin: 12px 0 0; line-height: 1.6; }
.sp-sp .foot a { color: #6ea2ff; }
.sp-sp .up { color: var(--up) !important; }
.sp-sp .dn { color: var(--dn) !important; }

/* 三訊號紀錄 */
.sp-sp .stat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.sp-sp .stat > div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }
.sp-sp .stat span { display: block; color: var(--mute); font-size: 12px; }
.sp-sp .stat b { display: block; font-size: 18px; margin: 2px 0; font-variant-numeric: tabular-nums; }
.sp-sp .stat em { font-style: normal; color: #b7bdc8; font-size: 12px; }
.sp-sp .scroll { overflow-x: auto; }
.sp-sp .tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0; }
.sp-sp .tbl th, .sp-sp .tbl td { padding: 7px 9px; border: 0; border-bottom: 1px solid var(--grid); text-align: right; background: transparent; }
.sp-sp .tbl th { color: var(--mute); font-weight: 600; font-size: 12px; }
.sp-sp .tbl th[data-k] { cursor: pointer; user-select: none; }
.sp-sp .tbl th[data-k]:hover, .sp-sp .tbl th.on { color: #fff; }
.sp-sp .tbl .l { text-align: left; }
.sp-sp .tbl tr.me td { background: rgba(78, 140, 255, .12); }
.sp-sp .tbl td a { color: #fff; text-decoration: none; }
.sp-sp .tbl td a:hover { text-decoration: underline; }
.sp-sp .tbl td small { color: var(--mute); margin-left: 6px; }
.sp-sp .more, .sp-sp .seg button { background: #2a3150; color: #dfe3ec; border: 0; border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; margin-top: 10px; }
.sp-sp .more:hover { background: #343c5f; }
.sp-sp .seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sp-sp .seg button { margin: 0; padding: 4px 10px; font-size: 12px; background: transparent; border: 1px solid var(--line); color: var(--mute); }
.sp-sp .seg button.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.sp-sp .rank { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sp-sp .rank > div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #b7bdc8; }
.sp-sp .rank b { color: #fff; font-size: 16px; }

@media (max-width: 900px) { .sp-sp .stat { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
	.sp-sp-card { padding: 14px; }
	.sp-sp h2 { font-size: 17px; }
	.sp-sp .stat { grid-template-columns: repeat(2, 1fr); }
	.sp-sp .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 版面順序：技術分析 → 技術訊號紀錄 → 回測 → 同產業比較 → 基本資料（搜尋用技術分析圖上方的查詢框） */
.sp-page { display: flex; flex-direction: column; }
.sp-page > * { order: 10; min-width: 0; }
.sp-page > #sp_info { order: 1; }
.sp-page > #sp_ta { order: 2; }
.sp-page > #sp_sig { order: 3; }
.sp-page > #sp_tech { order: 4; }
.sp-page > .stockapy-container { order: 5; }
.sp-page > #sp_peers { order: 6; }
.sp-page > #sp_info { margin-bottom: 16px; }
.sp-page .stockapy-container .search-box { display: none; }

/* 技術訊號分頁（與首頁「美國／大宗商品」相同樣式） */
.sp-sp .sp-sig-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: -4px 0 14px; }
.sp-sp .sp-sig-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--mute); padding: 8px 14px; margin-bottom: -1px; font: inherit; font-size: 14px; cursor: pointer; border-radius: 0; }
.sp-sp .sp-sig-tabs button:hover { color: #fff; background: none; }
.sp-sp .sp-sig-tabs button.on { color: #fff; border-bottom-color: var(--acc); }
.sp-sp .sp-sig-tabs i { font-style: normal; font-size: 12px; color: var(--mute); margin-left: 2px; }
.sp-sp .sp-sig-tabs button.on i { color: #8db4ff; }
.sp-sp .bench { font-size: 13px; color: #b7bdc8; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; line-height: 1.6; }
.sp-sp .tbl td.tg { color: #b7bdc8; font-size: 12px; white-space: normal; min-width: 160px; }
@media (max-width: 600px) { .sp-sp .sp-sig-tabs button { padding: 7px 9px; font-size: 13px; } }

/* 52 週區間（技術分析圖內） */
.sp-sp.sp-ta-rng { margin: 4px 0 12px; }
.sp-sp.sp-ta-rng .rng { margin: 0; max-width: 560px; }
/* 技術訊號徽章（熱門推薦另外 5 類） */
.sp-sp td.tfc { white-space: nowrap; text-align: left !important; }
.sp-sp .tf { display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 0 5px; border-radius: 4px; margin: 1px 3px 1px 0; font-weight: 600; cursor: help; white-space: nowrap; }
.sp-sp .tf-mom { color: #ff9f43; background: rgba(255, 159, 67, .15); }
.sp-sp .tf-mr { color: #4e8cff; background: rgba(78, 140, 255, .15); }
.sp-sp .tf-trend { color: #b07cff; background: rgba(176, 124, 255, .15); }
.sp-sp .tf-gx { color: #1fc2a8; background: rgba(31, 194, 168, .15); }
.sp-sp .tf-risk { color: #ff8a3d; background: rgba(255, 138, 61, .13); }
.sp-sp .tf-risk.lv2 { color: #ff5a4e; background: rgba(255, 90, 78, .15); }
.sp-sp .tf-s3 { color: #5ec8ff; background: rgba(94, 200, 255, .15); }
.sp-sp .combo-h { font-size: 14px; margin: 14px 0 6px; color: #fff; }
.sp-sp .tbl.combo { margin-bottom: 14px; }
.sp-sp .tbl.combo td small { display: block; margin-left: 0; font-size: 11px; }

/* 技術分析卡片分頁 */
#sp_ta .sp-ta-tabs { display: flex; gap: 2px; margin: -6px 0 14px; border-bottom: 1px solid #2f354b; }
#sp_ta .sp-ta-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: #848e9c; padding: 6px 14px 8px; margin-bottom: -1px; font-size: 15px; font-weight: 600; cursor: pointer; }
#sp_ta .sp-ta-tabs button:hover { color: #fff; background: none; }
#sp_ta .sp-ta-tabs button.on { color: #fff; border-bottom-color: #4e8cff; }
#sp_ta:not(.tab-bt) > .stockapy-container { height: 0 !important; overflow: hidden !important; visibility: hidden; margin: 0 !important; }
#sp_ta.tab-bt > :not(.sp-ta-tabs):not(.sp-ta-head):not(.stockapy-container) { display: none !important; }
#sp_ta.tab-bt .sp-ta-ranges { display: none !important; }
#sp_ta > .stockapy-container { padding: 0 !important; margin: 10px 0 0 !important; background: transparent !important; }
#sp_ta .stockapy-container .chart-box h3 { color: #fff !important; }

/* ETF 費率級距說明 */
#sp_info .fee-note { margin-top: 12px; padding: 10px 12px; background: #131722; border: 1px solid #2f354b; border-radius: 8px; font-size: 13px; line-height: 1.7; color: #c9ced9; }
#sp_info .fee-note p { margin: 0 0 6px; }
#sp_info .fee-note p:last-child { margin-bottom: 0; }
#sp_info .fee-note mark.fee-on { background: rgba(245, 197, 66, .22); color: #ffd666; padding: 1px 3px; border-radius: 3px; font-weight: 600; }
#sp_info .grid b small { display: block; font-size: 11px; font-weight: 400; color: #8a93a6; margin-top: 2px; }
#sp_info .grid .fee-on-t { background:rgba(245,197,66,.22); color:#ffd666; padding:1px 4px; border-radius:3px; }