/* 台股資金地圖 r43 — 街頭大螢幕（showcase.js）：螢幕上的點擊區、城市視距的小燈號、回測成績小卡、產業分頁推廣卡的數字。
   字級一律 calc(N px * var(--fz, 1))（r34）；顏色：族群連動 #f43f5e、VCP #4f8ff7（官網首頁同一組色相，深色底驗過）、加權灰色對照線；數字紅漲綠跌。 */
.bb-hit { position: absolute; left: 0; top: 0; z-index: 3; background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 4px; }
.bb-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bb-hit:hover { box-shadow: 0 0 0 1px rgba(243,198,94,.45); }

/* 城市視距：沒有字的小 LED 燈號（三格輪流亮），點了拉近 */
.bb-ico { position: relative; display: inline-flex; gap: 2px; padding: 3px; width: 26px; height: 16px; border-radius: 3px; background: #0B1220; border: 1px solid rgba(243,198,94,.75); box-shadow: 0 0 10px rgba(255,214,160,.45); cursor: pointer; }
.bb-ico i { flex: 1; border-radius: 1px; background: #FF5A5A; opacity: .35; animation: bb-led 2.4s infinite; }
.bb-ico i:nth-child(2) { background: #F3C65E; animation-delay: .8s; } .bb-ico i:nth-child(3) { background: #4f8ff7; animation-delay: 1.6s; }
.bb-ico::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 2px; height: 5px; margin-left: -1px; background: rgba(243,198,94,.75); }
.bb-ico:hover, .bb-ico:focus-visible { border-color: #fff; outline: none; }
@keyframes bb-led { 0%, 100% { opacity: .35; } 30% { opacity: 1; } 60% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .bb-ico i { animation: none; opacity: .85; } }

/* r49 遠距露出：全台視距角落的一條 LED 列（跟街頭大螢幕同一份數字、同一個輪播；點了開同一張小卡）。
   位置由 showcase.js farFit() 每秒算（translate），一定避開畫面上的資料標籤；這裡只管長相。 */
#bb-far { position: absolute; left: 0; top: 0; z-index: 10; display: flex; align-items: center; gap: 9px; max-width: calc(100% - 16px); padding: 7px 11px 7px 9px; border: 1px solid rgba(243,198,94,.5); border-radius: 10px; background: linear-gradient(to bottom, rgba(12,21,35,.95), rgba(5,8,13,.95)); box-shadow: 0 8px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(243,198,94,.75); color: var(--fg-2); text-align: left; cursor: pointer; }
#bb-far[hidden] { display: none; }
#bb-far:hover, #bb-far:focus-visible { border-color: rgba(243,198,94,.9); outline: none; box-shadow: 0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(243,198,94,.95), 0 0 16px rgba(255,214,160,.28); }
#bb-far .bf-led { display: inline-flex; gap: 2px; padding: 3px; width: 22px; height: 14px; flex: none; border-radius: 3px; background: #0B1220; border: 1px solid rgba(243,198,94,.6); }
#bb-far .bf-led i { flex: 1; border-radius: 1px; background: #FF5A5A; opacity: .35; animation: bb-led 2.4s infinite; }
#bb-far .bf-led i:nth-child(2) { background: #F3C65E; animation-delay: .8s; } #bb-far .bf-led i:nth-child(3) { background: #4f8ff7; animation-delay: 1.6s; }
#bb-far .bf-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#bb-far .bf-1 { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
#bb-far .bf-1 em { font-style: normal; color: #E6C79A; font-size: calc(10.5px * var(--fz, 1)); letter-spacing: .04em; }
#bb-far .bf-1 b { color: var(--fg); font-weight: 600; font-size: calc(12.5px * var(--fz, 1)); }
#bb-far .bf-1 strong { font: 600 calc(17px * var(--fz, 1))/1.15 var(--font-mono); }
#bb-far .bf-1 strong.up { color: var(--up); } #bb-far .bf-1 strong.down { color: var(--down); } #bb-far .bf-1 strong.gold { color: #F3C65E; }
#bb-far .bf-2, #bb-far .bf-2s { color: var(--fg-3); font-size: calc(10.5px * var(--fz, 1)); line-height: 1.4; white-space: normal; overflow-wrap: anywhere; } /* 不用 ellipsis：免責與期間不能被切掉（窄螢幕就換行） */
#bb-far .bf-2s { display: none; }
#bb-far .bf-go { flex: none; color: #E6C79A; font-size: calc(15px * var(--fz, 1)); line-height: 1; }
@media (max-width: 860px) { /* 手機更克制：短的那一行附註、字小一級、留白收窄（390／360 都在 300 px 以內） */
  #bb-far { gap: 6px; padding: 5px 8px 5px 7px; border-radius: 9px; }
  #bb-far .bf-led { width: 18px; height: 12px; padding: 2px; }
  #bb-far .bf-1 { gap: 5px; } #bb-far .bf-1 em { font-size: calc(9.5px * var(--fz, 1)); }
  #bb-far .bf-1 b { font-size: calc(11px * var(--fz, 1)); } #bb-far .bf-1 strong { font-size: calc(14px * var(--fz, 1)); }
  #bb-far .bf-2 { display: none; } #bb-far .bf-2s { display: block; font-size: calc(9.5px * var(--fz, 1)); }
  #bb-far .bf-go { font-size: calc(13px * var(--fz, 1)); }
}
@media (prefers-reduced-motion: reduce) { #bb-far .bf-led i { animation: none; opacity: .85; } }

/* 回測成績小卡（點螢幕）：桌機在螢幕旁邊，手機是底部的半張 */
#bb-card { position: absolute; z-index: 33; width: 360px; max-width: calc(100% - 16px); max-height: 78vh; overflow-y: auto; background: rgba(15,21,29,.97); border: 1px solid rgba(243,198,94,.5); border-radius: 12px; padding: 10px 12px 11px; box-shadow: 0 14px 36px rgba(0,0,0,.5); font-size: calc(12.5px * var(--fz, 1)); color: var(--fg-2); }
#bb-card[hidden] { display: none; }
#bb-card.sheet { position: fixed; left: 8px; right: 8px; top: auto; width: auto; bottom: calc(var(--nav-h, 56px) + 10px + env(safe-area-inset-bottom, 0px)); max-height: 64vh; }
#bb-card .bb-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
#bb-card .bb-h b { color: #E6C79A; font-size: calc(13.5px * var(--fz, 1)); white-space: nowrap; }
#bb-card .bb-h span { color: var(--fg-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(11.5px * var(--fz, 1)); }
#bb-card .bb-x { width: 26px; height: 26px; border-radius: 6px; color: var(--fg-3); flex: none; } #bb-card .bb-x:hover { background: var(--bg-3); color: var(--fg); }
#bb-card .bb-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#bb-card .bb-k { background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; min-width: 0; }
#bb-card .bb-k span { display: flex; align-items: center; gap: 6px; color: var(--fg); font-weight: 600; font-size: calc(12.5px * var(--fz, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bb-card .bb-k b { display: block; margin: 1px 0 0; font: 600 calc(22px * var(--fz, 1))/1.2 var(--font-mono); }
#bb-card .bb-k small { display: block; color: var(--fg-3); font-size: calc(10.5px * var(--fz, 1)); }
#bb-card i, .promo.has-perf i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; flex: none; }
#bb-card .bb-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 9px 0 2px; color: var(--fg-2); font-size: calc(11px * var(--fz, 1)); }
#bb-card .bb-leg span { display: inline-flex; align-items: center; gap: 5px; }
#bb-card .bb-cw { position: relative; }
.bb-chart { display: block; overflow: visible; touch-action: pan-y; }
.bb-chart .bb-g { stroke: rgba(148,163,184,.28); stroke-width: 1; }
.bb-chart .bb-ax { fill: var(--fg-3); font: calc(9.5px * var(--fz, 1)) var(--font-ui); }
.bb-chart .bb-end { fill: var(--fg); font: 600 calc(10.5px * var(--fz, 1)) var(--font-mono); }
.bb-chart .bb-cross { stroke: rgba(231,236,242,.5); stroke-width: 1; }
#bb-card .bb-tip { position: absolute; right: 2px; top: 0; display: flex; flex-direction: column; gap: 1px; padding: 4px 7px; border-radius: 7px; background: rgba(10,14,20,.94); border: 1px solid var(--line-2); font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-2); pointer-events: none; }
#bb-card .bb-tip em { font-style: normal; color: var(--fg-3); } #bb-card .bb-tip span { display: inline-flex; align-items: center; gap: 5px; } #bb-card .bb-tip b { color: var(--fg); font-family: var(--font-mono); font-weight: 600; margin-left: auto; padding-left: 8px; }
#bb-card .bb-tip[hidden] { display: none; }
#bb-card .bb-sr, .bb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#bb-card .bb-bench, #bb-card .bb-per { margin: 6px 0 0; font-size: calc(11.5px * var(--fz, 1)); line-height: 1.5; color: var(--fg-2); }
#bb-card .bb-per { margin-top: 2px; color: var(--fg-3); }
#bb-card .bb-f { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; padding-top: 7px; border-top: 1px solid var(--line); font-size: calc(11px * var(--fz, 1)); color: var(--fg-3); }
#bb-card .bb-help { margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); font-size: calc(11px * var(--fz, 1)); line-height: 1.55; color: var(--fg-2); }
#bb-card .bb-help[hidden] { display: none; }
#bb-card .bb-help p { margin: 0 0 6px; } #bb-card .bb-help b { color: var(--fg); }
#bb-card .bb-hl { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 0 !important; } #bb-card .bb-hl a { color: #8DB6FF; text-decoration: none; } #bb-card .bb-hl a:hover { text-decoration: underline; }
#bb-card .bb-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#bb-card .up, .promo.has-perf .up { color: var(--up); } #bb-card .down, .promo.has-perf .down { color: var(--down); }

/* 產業分頁推廣卡：兩個「今年」數字＋一條迷你曲線（族群連動對照加權） */
.promo.has-perf .pp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.promo.has-perf .pp-k { background: rgba(15,21,29,.55); border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; min-width: 0; }
.promo.has-perf .pp-k span { display: flex; align-items: center; gap: 6px; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo.has-perf .pp-k b { display: block; margin: 1px 0 0; font: 600 calc(19px * var(--fz, 1))/1.2 var(--font-mono); }
.promo.has-perf .pp-c { margin-top: 6px; }
.promo.has-perf .pp-l { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); }
.promo.has-perf .pp-l i + i { margin-left: 8px; }
.promo.has-perf .pp-n { margin-top: 4px !important; color: var(--fg-2) !important; }