/* ==========================================================================
   app-chrome.css — 2026-07-26
   PerformancePage / OrdersPage / EquityCurvePage 這三頁走設計系統 token，
   但原本 styles.css 裡 @import 的 components/*.css（forms/data-display…）
   從來沒被複製進 site/_ds，全部 404 —— 於是 <select>、表格、頁面外框
   全部退回瀏覽器預設，跟其餘暗色終端機頁面格格不入。
   這支補回那些缺掉的元件樣式，並統一頁面外框與導覽列。
   ========================================================================== */

/* ---- 頁面外框：內容置中、留白，不要整頁滿版貼邊 ---- */
/* support.js 會把 <x-dc> 換成一個普通 div，所以需要 target body 的第一個 div。 */
body{background:var(--bg-page);color:var(--text-primary);margin:0}
body > div:first-of-type{max-width:1180px;margin:0 auto;padding:0 28px 64px}

/* ---- 導覽列：與其餘 14 頁完全相同的 .nav / .navtabs / .navtab 結構。
   這三頁走設計系統 token，所以把對應的 token 映回同一組視覺值。 ---- */
:root{--or:var(--accent);--tx:var(--text-primary);--tx-dim:var(--text-tertiary);--bg-hover:var(--bg-surface-sunken);--pix:var(--font-mono)}
.nav{display:flex;align-items:center;gap:18px;padding:0 28px;height:70px;border-bottom:1px solid var(--border-subtle);background:var(--bg-page);margin:0 -28px 4px}
.nav .brand{font-family:var(--pix);font-weight:700;color:var(--or);font-size:21.1px;letter-spacing:1px;display:flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap}
.nav .brand .cn{color:var(--tx);font-size:19.8px;font-weight:700;letter-spacing:1px;white-space:nowrap}
.navtabs{display:flex;gap:1px;overflow-x:auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none}
.navtabs::-webkit-scrollbar{display:none;width:0;height:0}
.navtab{font-family:var(--pix);font-size:15.2px;letter-spacing:.8px;color:var(--tx-dim);padding:5px 8px;cursor:pointer;position:relative;border-radius:2px;text-decoration:none;white-space:nowrap}
.navtab:hover{color:var(--tx);background:var(--bg-hover)}
.navtab.on{color:var(--or)}
.navtab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--or)}
@keyframes radarsweep{to{transform:rotate(360deg)}}

/* ---- 表單元件（補 forms.css）---- */
/* DS 的 Select 自己會畫一個 chevron svg，靠 wrapper 的 position:relative 疊在框內；
   forms.css 不見後 wrapper 變 static，箭頭就掉到框下面。這裡補回定位。 */
.blave-select-wrap{position:relative;display:block;width:100%}
.blave-select-wrap > svg{position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-tertiary);width:14px;height:14px}
select,
.blv-select{appearance:none;-webkit-appearance:none;width:100%;height:38px;padding:0 32px 0 12px;border-radius:6px;border:1px solid var(--border-default);background-color:var(--bg-surface);color:var(--text-primary);font:var(--text-body-sm);cursor:pointer}
select:hover,.blv-select:hover{border-color:var(--border-strong)}
select:focus,.blv-select:focus{outline:none;border-color:var(--accent)}
select option{background:var(--bg-surface);color:var(--text-primary)}
input[type=text],input[type=search],input[type=number]{height:38px;padding:0 12px;border-radius:6px;border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-primary);font:var(--text-body-sm)}
input:focus{outline:none;border-color:var(--accent)}

/* ---- 捲軸：原生灰色捲軸在暗底上很突兀 ---- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}
*{scrollbar-width:thin;scrollbar-color:var(--border-default) transparent}

/* ---- 連結 ---- */
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-300)}

@media(max-width:900px){
  body > div:first-of-type{padding:0 16px 48px}
  .nav{flex-wrap:wrap;height:auto;padding:8px 16px;gap:8px 14px;margin:0 -16px 4px}
  .navtabs{order:3;width:100%;padding-bottom:2px}
}