/* ════════════════════════════════════════════════
   證券交易所 /dashboard/market/ 與 銀行 /dashboard/bank/ 共用樣式。
   基礎（導覽列、卡片、HUD 配色變數）沿用 /dashboard/dashboard.css，這裡只疊金融頁專屬元件。
   漲跌配色：預設繁中／日文「紅漲綠跌」、英文「綠漲紅跌」，頁面右上角可切換（存 localStorage）。
   漲跌一律同時用 ▲▼ 符號，不只靠顏色辨識。
   ════════════════════════════════════════════════ */
:root { --fin-up: #ff5468; --fin-down: #39ff8e; --fin-flat: #8fa3b6; }
html[data-fin-colors="us"] { --fin-up: #39ff8e; --fin-down: #ff5468; }
.fin-up { color: var(--fin-up); }
.fin-down { color: var(--fin-down); }
.fin-flat { color: var(--fin-flat); }
.fin-warn { color: var(--hud-amber); }
.fin-bad { color: var(--hud-red); }
.fin-num { font-variant-numeric: tabular-nums; font-family: 'Rajdhani', sans-serif; font-weight: 600; }

.fin-wrap { max-width: 1180px; margin: 0 auto; }
.fin-subnav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 1rem; }
.fin-subnav a {
  padding: 0.35rem 0.9rem; border: 1px solid var(--glass-border); color: #9fb3c8; text-decoration: none;
  font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 0.04em;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.fin-subnav a:hover, .fin-subnav a[aria-current="page"] { border-color: var(--hud-blue); color: #fff; background: rgba(0,207,255,0.12); }
.fin-idx-link { cursor: pointer; }
.fin-idx-link:hover, .fin-idx-link:focus-visible { text-decoration: underline; }
.fin-subnav .fin-back { border-color: transparent; color: var(--hud-amber); margin-right: 0.4rem; }

/* 狀態列 */
.fin-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.6rem; margin-bottom: 1rem;
  padding: 0.7rem 1rem; border: 1px solid var(--glass-border); background: var(--panel-dark);
}
.fin-status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.fin-dot { width: 10px; height: 10px; border-radius: 50%; background: #5a6b7c; }
.fin-dot.is-open { background: var(--hud-green); box-shadow: 0 0 8px var(--hud-green); animation: fin-pulse 2s infinite; }
@keyframes fin-pulse { 50% { opacity: 0.45; } }
.fin-bar-sep { flex: 1; }
.fin-mini { font-size: 0.82rem; color: #7f93a7; }
.fin-mini b { color: #dbe8f4; font-weight: 600; }
.fin-toggle {
  background: transparent; border: 1px solid var(--glass-border); color: #9fb3c8; cursor: pointer;
  padding: 0.25rem 0.7rem; font: 600 0.82rem 'Rajdhani', sans-serif;
}
.fin-toggle:hover { border-color: var(--hud-blue); color: #fff; }

/* 版面 */
.fin-cols { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 1rem; align-items: start; }
.fin-cols.is-market { grid-template-areas: "list detail" "ticket detail"; grid-template-rows: auto 1fr; }
.fin-cols.is-market > .a-list { grid-area: list; }
.fin-cols.is-market > .a-detail { grid-area: detail; }
.fin-cols.is-market > .a-ticket { grid-area: ticket; }
.fin-cols > * { min-width: 0; }
.fin-stack { display: grid; gap: 1rem; min-width: 0; }
.fin-sticky { position: sticky; top: 76px; }
.fin-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.fin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; }
.fin-stat { border: 1px solid var(--glass-border); background: var(--panel-dark); padding: 0.6rem 0.8rem; }
.fin-stat small { display: block; color: #7f93a7; font-size: 0.74rem; letter-spacing: 0.04em; }
.fin-stat .v { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.25rem; color: #e6f1fa; }
.fin-stat .v.big { font-size: 1.7rem; color: var(--hud-amber); }
@media (max-width: 960px) {
  .fin-cols, .fin-cols.is-market { grid-template-columns: 1fr; grid-template-areas: none; grid-template-rows: none; }
  .fin-cols.is-market > .a-list, .fin-cols.is-market > .a-detail, .fin-cols.is-market > .a-ticket { grid-area: auto; }
  .fin-sticky { position: static; }
}

/* 表格 */
.fin-scroll { overflow-x: auto; }
table.fin-table { width: 100%; border-collapse: collapse; font-family: 'Rajdhani', 'Noto Sans TC', sans-serif; font-size: 0.92rem; }
.fin-table th { text-align: left; color: #6f8296; font-weight: 600; font-size: 0.76rem; letter-spacing: 0.05em; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
.fin-table td { padding: 0.5rem; border-bottom: 1px solid rgba(0,207,255,0.08); vertical-align: middle; }
.fin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-table th.num { text-align: right; }
.fin-table tbody tr[data-sym] { cursor: pointer; }
.fin-table tbody tr[data-sym]:hover { background: rgba(0,207,255,0.07); }
.fin-table tbody tr.is-sel { background: rgba(0,207,255,0.14); box-shadow: inset 3px 0 0 var(--hud-blue); }
.fin-sym { display: block; line-height: 1.2; }
.fin-sym b { color: #e6f1fa; font-weight: 700; }
.fin-sym small { color: #6f8296; margin-left: 0.4rem; }
.fin-spark { width: 78px; height: 24px; display: block; }
.fin-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.fin-empty { color: #6f8296; padding: 1.2rem 0.4rem; text-align: center; font-size: 0.9rem; }

/* 標籤 */
.fin-badge { display: inline-block; padding: 0 0.4rem; margin-left: 0.3rem; font: 700 0.68rem 'Rajdhani', sans-serif; border: 1px solid; letter-spacing: 0.04em; vertical-align: 1px; white-space: nowrap; }
.b-warn { color: var(--hud-amber); border-color: rgba(245,166,35,0.6); }
.b-danger { color: #ff7d8c; border-color: rgba(232,19,44,0.7); background: rgba(232,19,44,0.12); }
.b-info { color: var(--hud-blue); border-color: rgba(0,207,255,0.5); }
.b-mute { color: #8fa3b6; border-color: rgba(143,163,182,0.4); }

/* 分頁 */
.fin-tabs { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--glass-border); overflow-x: auto; margin-bottom: 0.8rem; }
.fin-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: #8fa3b6; cursor: pointer; padding: 0.5rem 0.9rem; font: 600 0.95rem 'Rajdhani', 'Noto Sans TC', sans-serif; white-space: nowrap; }
.fin-tab:hover { color: #fff; }
.fin-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--hud-blue); }

/* 表單 */
.fin-field { display: block; margin-bottom: 0.7rem; }
.fin-field > span { display: block; color: #8fa3b6; font-size: 0.8rem; margin-bottom: 0.2rem; }
.fin-input, .fin-select {
  width: 100%; background: #050b12; border: 1px solid var(--glass-border); color: #e6f1fa;
  padding: 0.5rem 0.7rem; font: 600 1rem 'Rajdhani', 'Noto Sans TC', sans-serif;
}
.fin-input:focus-visible, .fin-select:focus-visible, .fin-btn:focus-visible, .fin-tab:focus-visible, .fin-seg button:focus-visible, .fin-toggle:focus-visible {
  outline: 2px solid var(--hud-blue); outline-offset: 1px;
}
.fin-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fin-row > .fin-input { flex: 1; min-width: 90px; }
.fin-quick { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: -0.3rem 0 0.7rem; }
.fin-quick button { background: transparent; border: 1px solid var(--glass-border); color: #9fb3c8; cursor: pointer; padding: 0.15rem 0.6rem; font: 600 0.8rem 'Rajdhani', sans-serif; }
.fin-quick button:hover { border-color: var(--hud-blue); color: #fff; }
.fin-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: 0.8rem; border: 1px solid var(--glass-border); }
.fin-seg button { background: transparent; border: 0; color: #9fb3c8; cursor: pointer; padding: 0.5rem; font: 700 0.95rem 'Rajdhani', 'Noto Sans TC', sans-serif; }
.fin-seg button[aria-pressed="true"] { color: #05080c; background: var(--hud-blue); }
.fin-seg button.is-buy[aria-pressed="true"] { background: var(--fin-up); }
.fin-seg button.is-sell[aria-pressed="true"] { background: var(--fin-down); }

.fin-btn {
  display: inline-block; cursor: pointer; padding: 0.55rem 1.1rem; border: 1px solid var(--hud-blue); background: rgba(0,207,255,0.14);
  color: #fff; font: 700 0.95rem 'Rajdhani', 'Noto Sans TC', sans-serif; letter-spacing: 0.04em; text-decoration: none; text-align: center;
  transition: background 0.2s;
}
.fin-btn:hover:not(:disabled) { background: rgba(0,207,255,0.3); }
.fin-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fin-btn.is-block { display: block; width: 100%; }
.fin-btn.is-buy { border-color: var(--fin-up); background: color-mix(in srgb, var(--fin-up) 22%, transparent); }
.fin-btn.is-sell { border-color: var(--fin-down); background: color-mix(in srgb, var(--fin-down) 22%, transparent); }
.fin-btn.is-danger { border-color: var(--hud-red); background: rgba(232,19,44,0.2); }
.fin-btn.is-ghost { border-color: var(--glass-border); background: transparent; color: #c8d8e8; }
.fin-btn.is-small { padding: 0.2rem 0.65rem; font-size: 0.82rem; }

/* 試算 */
.fin-est { border: 1px dashed var(--glass-border); padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; font-family: 'Rajdhani', sans-serif; font-size: 0.9rem; }
.fin-est div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.1rem 0; color: #9fb3c8; }
.fin-est div b { color: #e6f1fa; font-weight: 600; }
.fin-est div.total { border-top: 1px solid var(--glass-border); margin-top: 0.3rem; padding-top: 0.35rem; color: #fff; font-weight: 700; }
.fin-note { font-size: 0.8rem; color: #7f93a7; line-height: 1.6; margin: 0.5rem 0; }

/* 橫幅 */
.fin-banner { padding: 0.7rem 1rem; margin-bottom: 1rem; border-left: 4px solid; font-size: 0.92rem; line-height: 1.6; }
.fin-banner.is-info { border-color: var(--hud-blue); background: rgba(0,207,255,0.08); }
.fin-banner.is-warn { border-color: var(--hud-amber); background: rgba(245,166,35,0.1); }
.fin-banner.is-danger { border-color: var(--hud-red); background: rgba(232,19,44,0.12); }
.fin-banner .fin-btn { margin-top: 0.5rem; }

/* 個股 */
.fin-quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 0.6rem; }
.fin-quote .px { font: 700 2.2rem 'Rajdhani', sans-serif; line-height: 1; }
.fin-quote .chg { font: 700 1.1rem 'Rajdhani', sans-serif; }
.fin-chart { position: relative; height: 260px; }
.fin-chart canvas { width: 100% !important; height: 100% !important; }
.fin-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.4rem 1rem; margin: 0.8rem 0; }
.fin-kv small { display: block; color: #6f8296; font-size: 0.72rem; }
.fin-kv span { font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.fin-news { list-style: none; margin: 0; padding: 0; }
.fin-news li { padding: 0.55rem 0; border-bottom: 1px solid rgba(0,207,255,0.08); font-size: 0.9rem; line-height: 1.6; }
.fin-news time { display: block; color: #6f8296; font-size: 0.74rem; font-family: 'Rajdhani', sans-serif; }
.fin-news li.is-recap { border-left: 3px solid var(--hud-blue); padding-left: 0.7rem; background: rgba(0,207,255,0.05); }
.fin-news .sym { color: var(--hud-blue); font-weight: 700; margin-right: 0.4rem; }
/* 垂直跑馬燈：內容複製兩份，整塊由上往下捲、無縫循環；滑過去暫停 */
.fin-ticker { height: 10rem; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.fin-ticker.is-run .fin-news { animation: fin-ticker var(--dur, 40s) linear infinite; }
.fin-ticker:hover .fin-news { animation-play-state: paused; }
@keyframes fin-ticker { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* 進度與儀表 */
.fin-meter { height: 8px; background: #0b1520; border: 1px solid var(--glass-border); position: relative; margin: 0.3rem 0; }
.fin-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hud-blue); }
.fin-meter i.is-warn { background: var(--hud-amber); }
.fin-meter i.is-bad { background: var(--hud-red); }
.fin-meter u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; opacity: 0.55; }
.fin-gauge { width: 100%; max-width: 230px; display: block; margin: 0 auto; }
.fin-gauge text { font-family: 'Rajdhani', sans-serif; fill: #e6f1fa; }
.fin-donut { height: 190px; position: relative; }

/* 項目卡片（定存、貸款） */
.fin-item { border: 1px solid var(--glass-border); background: var(--panel-dark); padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; }
.fin-item-head { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.fin-item dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.2rem 1rem; margin: 0.5rem 0; }
.fin-item dt { color: #6f8296; font-size: 0.72rem; }
.fin-item dd { margin: 0; font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.fin-item.is-overdue { border-color: var(--hud-red); }
.fin-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.5rem; margin-bottom: 0.8rem; }
.fin-radio { border: 1px solid var(--glass-border); padding: 0.5rem; cursor: pointer; text-align: center; background: transparent; color: #c8d8e8; font: 600 0.9rem 'Rajdhani', 'Noto Sans TC', sans-serif; }
.fin-radio[aria-pressed="true"] { border-color: var(--hud-blue); background: rgba(0,207,255,0.14); color: #fff; }
.fin-radio small { display: block; color: var(--hud-amber); font-size: 0.8rem; }

/* 提示與對話框 */
#fin-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 9100; display: grid; gap: 0.5rem; max-width: min(380px, calc(100vw - 32px)); }
.fin-toast { padding: 0.7rem 1rem; border: 1px solid var(--glass-border); border-left: 4px solid var(--hud-blue); background: #0b1520; color: #e6f1fa; font-size: 0.9rem; box-shadow: 0 4px 18px rgba(0,0,0,0.5); }
.fin-toast.is-ok { border-left-color: var(--hud-green); }
.fin-toast.is-err { border-left-color: var(--hud-red); }
.fin-modal { position: fixed; inset: 0; z-index: 9200; display: grid; place-items: center; background: rgba(2,5,9,0.78); padding: 1rem; }
.fin-modal-box { width: min(440px, 100%); background: #0a131d; border: 1px solid var(--glass-border); padding: 1.2rem 1.3rem; max-height: 90vh; overflow: auto; }
.fin-modal-box h3 { margin: 0 0 0.6rem; font-family: 'Rajdhani', 'Noto Sans TC', sans-serif; color: #fff; }
.fin-modal-box .fin-est { margin-top: 0.6rem; }
.fin-modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }

@media (max-width: 560px) {
  .fin-quote .px { font-size: 1.8rem; }
  .fin-chart { height: 210px; }
  .fin-bar { gap: 0.4rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .fin-dot.is-open { animation: none; } }