/* ==================================================================
   策略鏈平台 — 全站視覺框架（暗色）

   設計語言沿用既有 S:\GITCode\STII\Web\StrategyChainPlatform
   （css\phone.css、Scripts\trading.js、Scripts\strategy.js）：色相、字體、
   表格密度、元件語彙一致，但明度整體翻為暗色。

   為什麼改暗色：參考專案的 chrome（#141C29）與交易圖表底色本來就是深色，
   原本亮色版面等於在深色框裡塞白卡片，K 線區與其他區塊看起來像兩套系統。
   整站轉暗之後，行情圖表反而是唯一不用改的部分。

   本檔是全站色票的單一來源；JS 端（圖表 SVG 不吃 CSS 變數）以
   PageBase.css('--token') 讀取，不得在頁面裡另外寫死色碼。

   對比度：主文字 #E6ECF3 對 #0B1119 約 15:1、次要文字 #93A3B8 約 7:1，
   投影機色溫偏移後仍讀得到。
   ================================================================== */

:root {
    /* chrome：頁首與導覽列。導覽列比頁首更暗一階，兩條深色才有層次而非一整塊 */
    --sc-chrome:         #141C29;
    --sc-chrome-soft:    #101823;

    /* 強調色：沿用 strategy.js 的 summary-header #4287f5、圖表輔色 #8ED9FA / #81cad6 */
    --sc-primary:        #4287f5;
    --sc-primary-dark:   #2b62c4;
    --sc-primary-light:  #1c2f4d;
    --sc-cyan:           #8ED9FA;
    --sc-cyan-deep:      #81cad6;

    /* 狀態色：台股慣例漲紅跌綠。暗底上略提亮度，維持色相不變 */
    --sc-accent:         #02B071;
    --sc-danger:         #B13450;
    --sc-warn:           #F16E33;

    /* 中性色（暗色階）：底 → 卡片 → 次層，三階遞亮 */
    --sc-bg:             #0B1119;
    --sc-surface:        #18212E;
    --sc-surface-2:      #1F2A39;
    --sc-border:         #2A3648;
    --sc-text:           #E6ECF3;
    --sc-text-muted:     #93A3B8;
    --sc-chip:           #263243;
    --sc-chip-active:    #4287f5;

    /* 圖表系列識別色（Page A / Page B）。Portfolio 原為 #141C29，在暗底上等於隱形，
       改為暖金色——與藍、橘皆有明確色相距離，投影時三條線仍分得開 */
    --sc-series-a:       #4287f5;
    --sc-series-b:       #F16E33;
    --sc-series-c:       #C9A227;

    --sc-radius:         4px;
    /* 暗底下投影陰影不成立（黑影疊黑底看不出來），層次改由 1px 亮邊表現 */
    --sc-shadow:         0 1px 0 rgba(255, 255, 255, 0.04);
    --sc-gap:            12px;
    --sc-header-h:       56px;
}

html, body {
    margin: 0;
    padding: 0;
    color: var(--sc-text);
    background: var(--sc-bg);
    /* Roboto 是 Material 主題自帶的字型（lib\...\css\fonts），DevExtreme 的 widget 內部本來
       就指定它——全站跟著用，widget 內外才不會一邊 Roboto 一邊 Arial。
       Roboto 無中日韓字，中文一定得靠後面的 fallback，故繁中字體不可省。 */
    font-family: Roboto, Arial, "DejaVu Sans", "Liberation Sans", Freesans,
                 "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
    /* 參考專案 body 為 16px；表格另以 12px 壓縮密度（見下方 .dx-datagrid） */
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* 系統預設捲軸是白色的，在暗色版面上是最顯眼的破綻 */
#pageContainer::-webkit-scrollbar,
.dx-scrollable-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#pageContainer::-webkit-scrollbar-track,
.dx-scrollable-container::-webkit-scrollbar-track {
    background: var(--sc-bg);
}

#pageContainer::-webkit-scrollbar-thumb,
.dx-scrollable-container::-webkit-scrollbar-thumb {
    background: var(--sc-border);
    border-radius: 5px;
}

#pageContainer::-webkit-scrollbar-thumb:hover,
.dx-scrollable-container::-webkit-scrollbar-thumb:hover {
    background: #3A4A61;
}

#app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── 頁首 ───────────────────────────────────────────────────────── */

#appHeader {
    flex: 0 0 auto;
    height: var(--sc-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    /* 參考專案的 chrome 為單一深色 #141C29，不使用漸層 */
    background: var(--sc-chrome);
    color: #fff;
    box-shadow: var(--sc-shadow);
    z-index: 10;
}

.hd-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hd-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--sc-radius);
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 內容為自繪 SVG，stroke 走 currentColor */
    color: #fff;
}

.hd-titles {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hd-title {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

/* 授權版本 + 登入者名稱，緊接產品名。
   放在品牌區而非右側：手機版的右半邊放不下整組（帳戶三個數字 + 環境 + 登出），
   而客戶在手機上最需要確認的就是「我是誰、什麼版本」。 */
.hd-user-name {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-user {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    /* 帳戶數字進來後右半邊變長，須讓得出空間給品牌區 */
    min-width: 0;
}

/* ── 頁首帳戶概況（權益／當日損益／保證金使用率）───────────────── */

.hd-account {
    display: flex;
    align-items: center;
    gap: 16px;
    /* 數字與登入者名稱之間拉一條分隔，否則整排讀起來像同一組字 */
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.hd-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    white-space: nowrap;
}

.hd-metric-label {
    font-size: 10px;
    /* 深色 chrome 上不用 --sc-text-muted：那是為面板底色挑的，在這裡會太暗 */
    color: rgba(255, 255, 255, 0.62);
}

.hd-metric-value {
    font-size: 14px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

/* 頁首上的登出鈕：白色外框，與深色底對比 */
.hd-user .dx-button.dx-button-mode-outlined {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.hd-user .dx-button.dx-button-mode-outlined .dx-button-text {
    color: #fff;
}

/* 未登入時整條頁首的使用者區塊隱藏。
   授權版本與名稱已移到品牌區（見 .hd-user-name），不在 .hd-user 之內，
   因此要另外點名——漏了它，登入頁的產品名旁邊會掛著上一個人的版本與名字。 */
#appHeader.anonymous .hd-user,
#appHeader.anonymous .hd-user-name {
    display: none;
}

/* Material 主題把頁籤文字轉成大寫，"#4201 STRATEGY_SMA" 讀起來像在喊人，
   中英混排時尤其突兀。分頁標題一律保留原始大小寫。 */
.dx-tabpanel .dx-tab,
.dx-tabs .dx-tab-text {
    text-transform: none;
}

/* ══════════════════════════════════════════════════════════════════
   導覽：電腦版左側可摺疊軌道 ｜ 手機版底部懸浮列

   為何不是上方分頁：頁數會從 6 增到 9–10（下單／帳戶／監控／觀察清單），
   1280 寬度下橫向排不完；側軌可摺疊成純圖示，且縱向空間本來就是浪費的。
   ══════════════════════════════════════════════════════════════════ */

#appBody {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;   /* 沒有這行，內層的 overflow:auto 不會生效而是把外層撐高 */
}

#navRail {
    flex: 0 0 auto;
    width: 168px;
    display: flex;
    flex-direction: column;
    background: var(--sc-chrome-soft);
    border-right: 1px solid var(--sc-border);
    padding: 8px 0;
    overflow: hidden;
    transition: width 0.18s ease;
}

#app.nav-collapsed #navRail {
    width: 56px;
}

.nav-rail-list {
    flex: 1 1 auto;
    overflow-y: auto;
}

.nav-rail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 8px 0 16px;
    color: var(--sc-text-muted);
    cursor: pointer;
    white-space: nowrap;
    /* 選中時左緣一條亮邊；用 border 而非 box-shadow，摺疊時才不會被 overflow 切掉 */
    border-left: 3px solid transparent;
}

.nav-rail-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--sc-text);
}

.nav-rail-item.is-active {
    background: rgba(66, 135, 245, 0.14);
    border-left-color: var(--sc-primary);
    color: #7FE3E8;
}

.nav-rail-text {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.3px;
}

/* 摺疊後只留圖示：文字用 display:none 而非 opacity，否則仍佔寬度而被裁切成半個字 */
#app.nav-collapsed .nav-rail-text {
    display: none;
}

#app.nav-collapsed .nav-rail-item {
    padding-left: 13px;   /* 16 - 3px 的 border，讓圖示在 56px 內置中 */
    gap: 0;
}

.nav-rail-toggle {
    flex: 0 0 auto;
    border-top: 1px solid var(--sc-border);
    padding-top: 6px;
    margin-top: 6px;
}

.nav-rail-toggle .dx-button {
    width: 100%;
    border-radius: 0;
}

.nav-rail-toggle .dx-button-content {
    padding: 6px 8px 6px 16px;
}

.nav-toggle-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sc-text-muted);
}

#app.nav-collapsed .nav-toggle-content {
    gap: 0;
}

/* 手機版才出現的底部懸浮列 */
#navBottom {
    display: none;
}

/* 未登入時兩種導覽都不存在。以 class 控制而非 JS 寫 inline display——
   inline 樣式會蓋掉下方的 media query，手機版側軌會因此被強制顯示出來。 */
#app.is-anonymous #navRail,
#app.is-anonymous #navBottom {
    display: none;
}

/* ── 內容區 ─────────────────────────────────────────────────────── */

#pageContainer {
    flex: 1 1 auto;
    overflow: auto;
    padding: var(--sc-gap);
    min-width: 0;   /* grid/flex 子項預設 min-width:auto，會被寬表格撐破而出現整頁橫捲 */
}

/* ── 圖示（inline SVG，components\icons.js）────────────────────── */

.sc-icon-wrap {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* stroke 用 currentColor ⇒ 顏色由所在容器的 color 決定，選中／hover 不必換圖 */
.sc-icon {
    display: block;
}

/* ══════════════════════════════════════════════════════════════════
   RWD：手機版（含直立平板）

   斷點取 820px：iPad 直立為 768、多數手機橫放在 740 以下，
   1024 的投影機與筆電仍走側軌版面。
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {
    /* 側軌完全退場，改為底部懸浮列 */
    #navRail {
        display: none;
    }

    #navBottom {
        display: flex;
        position: fixed;
        z-index: 20;
        left: 8px;
        right: 8px;
        bottom: 8px;
        /* 懸浮而非貼齊底緣：iOS Safari 的下方手勢區會蓋住貼底的元件 */
        border-radius: 14px;
        background: var(--sc-chrome);
        border: 1px solid var(--sc-border);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
        padding: 4px 2px;

        /* 導覽已達九項。等寬分格會把每格壓到 38px，圖示下方的文字只剩一個字寬，
           於是九個看起來一模一樣的圖示排成一列——改為固定格寬 + 橫向捲動。
           一次看得到約四項，其餘用滑的。 */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    /* 捲軸本身隱藏：懸浮列只有 60px 高，一條捲軸會佔掉文字的位置。
       可捲動這件事由「最後一格露出一半」來暗示（見 .nav-bottom-item 的固定寬度）。 */
    #navBottom::-webkit-scrollbar {
        display: none;
    }

    .nav-bottom-item {
        flex: 0 0 78px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 5px 2px 4px;
        border-radius: 10px;
        color: var(--sc-text-muted);
        cursor: pointer;
    }

    .nav-bottom-item.is-active {
        background: rgba(66, 135, 245, 0.18);
        color: #7FE3E8;
    }

    .nav-bottom-text {
        font-size: 10px;
        font-weight: bold;
        white-space: nowrap;
        /* 字太長就讓它裁掉而不是換行把列高撐成兩倍 */
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* 內容需讓出底部導覽的高度，否則最後一列表格永遠被蓋住 */
    #pageContainer {
        padding: 8px 8px 76px;
    }

    #appHeader {
        padding: 0 12px;
    }

    /* 頁首在手機寬度放不下「標誌 + 產品名 + 版本 + 三組數字 + 環境 + 登出」。
       捨棄順序依重要性由低而高：產品名（標誌已足以識別）、環境標示、保證金使用率。

       **環境標示改為手機版隱藏**（原本是最後才捨棄的一項）：它是給自己人看的
       ——別把測試機當正式機用——不是給客戶看的。而授權版本與名稱相反，
       那是客戶自己的身分，手機版必須看得到，因此移到產品名旁邊留著。 */
    .hd-title {
        display: none;
    }

    /* 選擇器要比後面那條 .hd-env-badge 的 display 更明確。
       兩者同權重時，位在檔案後方的那條會贏——手機版就藏不掉了 */
    .hd-user .hd-env-badge {
        display: none;
    }

    .hd-user-name {
        padding-left: 0;
        border-left: none;
    }

    .hd-account {
        gap: 12px;
        padding-left: 0;
        border-left: none;
    }

    .hd-metric:nth-child(3) {
        display: none;
    }

    .hd-metric-value {
        font-size: 13px;
    }

    /* 卡片在手機上不需要左右各 14px 的內距，讓表格多一點寬度 */
    .sc-card-body {
        padding: 10px 8px;
    }
}

/* ── 卡片 ───────────────────────────────────────────────────────── */

.sc-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
    margin-bottom: var(--sc-gap);
    overflow: hidden;
}

/* 標題色沿用 strategy.js 的 .summary-header（#4287f5）；標題列比卡片底再亮一階做區隔 */
.sc-card-title {
    margin: 0;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: bold;
    color: var(--sc-primary);
    background: var(--sc-surface-2);
    border-bottom: 1px solid var(--sc-border);
}

.sc-card-body {
    padding: 12px 14px;
}

/* ── 工具列（篩選 / 操作） ───────────────────────────────────────── */

.sc-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.sc-toolbar-label {
    color: var(--sc-text-muted);
    font-size: 13px;
}

/* 篩選列的標籤與它右邊的下拉／輸入框並排，兩者字級差太多會像沒對齊。
   DevExtreme 的 .dx-texteditor-input 是 16px（Material 主題），標籤跟上同一級，
   層次改由顏色（muted）表達。窄欄裡的 .sc-toolbar-label（首頁右欄設定分頁）
   不在 .sc-toolbar 內，維持 13px 不受影響。 */
.sc-toolbar .sc-toolbar-label {
    font-size: 16px;
}

/* 操作提示（例如「點圖例可顯示／隱藏曲線」）。
   刻意比 .sc-toolbar-label 更小更淡：它說明的是圖上的互動方式，不是要填的欄位，
   跟標籤同一級的話會被當成又一個篩選條件。 */
.sc-toolbar-hint {
    color: var(--sc-text-muted);
    font-size: 12px;
    margin-left: 2px;
}

/* 手機上圖例整個收掉（見 PageBase.chartLegend），提示也得跟著走——
   留著它就是叫人去點一個畫面上不存在的東西。
   用 media query 而非 JS：轉向時它會自己跟上，圖例則要重新載入才回來。
   門檻與 PageBase.NARROW_WIDTH 同為 720。 */
@media (max-width: 719px) {
    .sc-toolbar-hint {
        display: none;
    }
}

.sc-spacer {
    flex: 1 1 auto;
}

/* ── 按鈕（PageBase.button 產生的容器） ──────────────────────────── */

/* PageBase.button() 是對 .sc-btn 這個 div 本身呼叫 dxButton，因此 dx-button 與 sc-btn
   在**同一個元素**上。以往寫成 `.sc-btn .dx-button`（後代選擇器）永遠選不到任何東西——
   M28 的膠囊樣式從來沒有生效過。一律用複合選擇器 `.sc-btn.dx-button`。 */
.sc-btn {
    display: inline-block;
}

/* 按鈕採手機版 strategy.js setTypeBoxColor 的膠囊語彙：
   圓角 50px、次要動作深灰底淺字、主要動作藍底白字 */
.sc-btn.dx-button {
    border-radius: 50px;
    border-color: transparent;
    font-size: 12px;
    font-weight: bold;
}

.sc-btn.dx-button .dx-button-content {
    padding: 5px 14px;
}

.sc-btn.dx-button.dx-button-mode-outlined {
    background: var(--sc-chip);
    color: var(--sc-text);
}

.sc-btn.dx-button.dx-button-mode-outlined .dx-button-text {
    color: var(--sc-text);
}

.sc-btn.dx-button.dx-button-mode-contained.dx-button-default {
    background: var(--sc-chip-active);
}

.sc-btn.dx-button.dx-button-mode-contained.dx-button-default .dx-button-text {
    color: #ffffff;
}

.sc-btn.dx-button.dx-button-mode-contained.dx-button-danger {
    background: var(--sc-danger);
}

.sc-btn.dx-button.dx-state-hover {
    filter: brightness(1.15);
}

.sc-btn + .sc-btn {
    margin-left: 6px;
}

/* Material 的強調色是自己的青藍，與本站沿用參考專案的 #4287f5（卡片標題、圖表主線）
   是兩種藍。主要動作鈕與分頁指示線統一走本站色，避免同一畫面出現兩個「主色」。
   這裡不含 dxCheckBox / 輸入框聚焦線——那些的青色與 K 線輔色 #8ED9FA 同一色系，維持原樣。 */
.dx-button-mode-contained.dx-button-default {
    background-color: var(--sc-primary);
}

.dx-button-mode-contained.dx-button-default.dx-state-hover {
    background-color: var(--sc-primary-dark);
}

.dx-tabpanel .dx-tabs .dx-tab-selected::after {
    background-color: var(--sc-primary);
}

/* Material 的浮層底色是中性深灰，與本站的深藍面板放在同一畫面會看起來像兩套系統的視窗 */
.dx-popup-wrapper > .dx-overlay-content,
.dx-loadpanel-content {
    background-color: var(--sc-surface);
    border: 1px solid var(--sc-border);
}

/* 任何浮層都不得超出視窗——溢出時標題列右端的關閉 X 會被推到畫面外，
   使用者只剩重整頁面一途。各處呼叫端也會自行夾寬度，這裡是最後一道防線。 */
.dx-popup-wrapper > .dx-overlay-content {
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
}

/* 內容高於浮層時要捲得動。dxPopup 預設不給內容區捲軸，
   於是超出的部分（例如報表最底下的月度熱力圖）會被直接切掉。 */
.dx-popup-content {
    overflow: auto;
}

.dx-popup-title {
    background-color: var(--sc-surface-2);
    border-bottom: 1px solid var(--sc-border);
}

.dx-popup-content,
.dx-loadpanel-content .dx-loadpanel-message {
    background-color: var(--sc-surface);
    color: var(--sc-text);
}

/* 表格內操作欄的按鈕縮小，避免撐高列高 */
.dx-datagrid .sc-btn.dx-button {
    min-width: 0;
    height: 26px;
    line-height: 24px;
}

.dx-datagrid .sc-btn.dx-button .dx-button-content {
    padding: 0 8px;
}

/* ── 統計摘要卡片列 ─────────────────────────────────────────────── */

/* 統計卡樣式集中於下方「績效統計摘要」一處定義，此處不重複 */

/* ── 登入頁 ─────────────────────────────────────────────────────── */

/* 導覽的隱藏由 #app.is-anonymous 統一處理（見「導覽」一節），此處只管頁首的使用者區塊 */
body.login-mode #appHeader .hd-user-name,
body.login-mode #appHeader .hd-user {
    display: none;
}

.sc-login-bg {
    min-height: calc(100vh - var(--sc-header-h) - 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 暗底上的光暈需比亮底更強才看得出來，否則整片是死黑 */
    background:
        radial-gradient(circle at 20% 20%, rgba(66, 135, 245, 0.18), transparent 48%),
        radial-gradient(circle at 80% 70%, rgba(129, 202, 214, 0.12), transparent 48%);
}

.sc-login-card {
    width: 360px;
    max-width: 92vw;
    padding: 28px 30px 24px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    /* 暗底：外陰影看不見，改以內側亮邊把卡片從背景抬起來 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 12px 32px rgba(0, 0, 0, 0.45);
}

.sc-login-brand {
    text-align: center;
    margin-bottom: 22px;
}

.sc-login-logo {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-dark) 100%);
    /* 內容為自繪 SVG，stroke 走 currentColor */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-login-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.sc-login-error {
    min-height: 18px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--sc-danger);
    text-align: center;
}

/* ── 圖表 / 分欄版面 ────────────────────────────────────────────── */

.sc-chart {
    width: 100%;
    height: 360px;
}

.sc-chart-tall {
    width: 100%;
    height: 460px;
}

/* 投資組合的累積損益圖：排在權益圖下方，矮一截以免分頁高度（TAB_HEIGHT）再往上加 */
.sc-chart-mid {
    width: 100%;
    height: 320px;
}

/* 月損益表的「互補」標記：有成員虧、合併仍賺的月份。
   用青色而非紅綠——紅綠在本站代表漲跌，這一格不是漲跌，是一個事實 */
.sc-pf-offset {
    color: var(--sc-cyan);
    font-weight: bold;
}

/* 權益曲線下方的區間選擇器（dxRangeSelector）。
   高度給滿：低於 100px 時 DevExtreme 會把刻度標籤擠掉，只剩兩個看不出日期的滑桿。 */
.sc-range {
    width: 100%;
    height: 120px;
}

.sc-split {
    display: flex;
    gap: var(--sc-gap);
    align-items: flex-start;
}

/* 左欄需容納五欄清單與編輯命令欄（合計約 566px）；過窄會出現水平捲軸並把最右欄
   推出視野——§14.9 的「看不到查看按鈕」就是這樣來的。留一點餘裕給字體差異。 */
.sc-split-left {
    flex: 0 1 620px;
    min-width: 420px;
}

.sc-split-right {
    flex: 1 1 520px;
    min-width: 0;
}

/* 窄螢幕（投影機常見 1024/1280）改為上下堆疊，避免右側被擠壓 */
@media (max-width: 1200px) {
    .sc-split { flex-wrap: wrap; }
    .sc-split-left, .sc-split-right { flex: 1 1 100%; }
}

.sc-empty {
    padding: 24px;
    text-align: center;
    color: var(--sc-text-muted);
}

/* ── 表格密度與字級（對齊 phone.css 的 #gridWidget 規則） ─────────── */

/* 參考專案的表格為 12px、儲存格 padding 5px、表頭置中且允許換行 */
.dx-datagrid {
    font-size: 12px;
    background: var(--sc-surface);
    color: var(--sc-text);
}

.dx-datagrid .dx-row > td {
    padding: 5px 8px;
    vertical-align: middle;
    /* 損益、價格等數字需等寬才能上下對齊，否則整欄看起來是歪的 */
    font-variant-numeric: tabular-nums;
}

.dx-datagrid .dx-datagrid-headers,
.dx-datagrid .dx-datagrid-filter-row,
.dx-datagrid .dx-datagrid-header-panel,
.dx-datagrid .dx-datagrid-pager {
    background: var(--sc-surface-2);
}

.dx-datagrid .dx-header-row > td > .dx-datagrid-text-content {
    white-space: normal;
    text-align: center;
    font-weight: bold;
    color: var(--sc-text);
}

.dx-datagrid .dx-row > td.dx-datagrid-nowrap-cell,
.dx-datagrid .dx-data-row > td {
    color: var(--sc-text);
}

/* Material Dark 的交替列與 hover 對比偏弱，逐列掃讀時容易跳行 */
.dx-datagrid .dx-data-row:nth-child(even) > td {
    background: rgba(255, 255, 255, 0.02);
}

.dx-datagrid .dx-data-row.dx-state-hover > td {
    background: rgba(66, 135, 245, 0.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   K 線與交易明細 — 配色沿用既有 StrategyChainPlatform（Scripts\trading.js、
   css\phone.css），讓兩套系統在客戶眼中是同一個產品。
   台股慣例：漲紅跌綠，與歐美相反，不可自行對調。
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* 台港陸股傳統習慣：紅漲綠跌。
       原值是純紅 #ff0000 配淺藍 #8ED9FA（沿用前一代 trading.js 的 reduction color）——
       純紅在深色底上過飽和而刺眼，淺藍的「跌」則不是華人市場的語彙。
       改用胭脂紅／深翠綠，兩色在深色底上的明度接近，不會有一邊特別跳。 */
    --sc-k-up:       #f23645;   /* 陽線（漲）：胭脂紅 */
    --sc-k-down:     #089981;   /* 陰線（跌）：深翠綠 */

    /* 圖表底盤（TradingView 質感）。漲跌色維持台股慣例不動，改的是「盤面」：
       更深的底、幾乎看不見的網格、柔和的軸文字——讓 K 棒成為畫面上唯一搶眼的東西。
       SVG 不吃 CSS 變數，這組值由 JS 端以 PageBase.css('--token') 讀出後傳給 dxChart。 */
    --sc-chart-bg:        #131722;
    --sc-chart-grid:      #2a2e39;
    --sc-chart-axis:      #787b86;
    --sc-chart-crosshair: #787b86;
    /* 準星軸標籤與 tooltip 的底：半透明深色，蓋住 K 棒時仍讀得到底下的形狀 */
    --sc-chart-label-bg:  #2a2e39;
    --sc-chart-tooltip:   rgba(19, 23, 34, 0.94);

    /* 損益底色沿用主色票，避免兩處各自定義而日後走鐘 */
    --sc-profit-bg:  var(--sc-danger);  /* 獲利：紅底白字 */
    --sc-loss-bg:    var(--sc-accent);  /* 虧損：綠底白字 */

    /* 明細表的漲跌文字色。原值 #f00 / #2ab71b 是為白底挑的，直接放到暗底上偏暗且刺眼；
       這裡只提亮度、不動色相——台股漲紅跌綠的語意不可更動 */
    --sc-inc:        #FF5A5A;
    --sc-dec:        #35D06A;
}

.sc-kchart-wrap {
    background: var(--sc-chart-bg);
    border: 1px solid var(--sc-chart-grid);
    border-radius: var(--sc-radius);
    padding: 10px;
}

.sc-kchart {
    width: 100%;
    height: 420px;
}

/* 圖表工具列：左側商品／週期選單，其後指標列，最右縮放鈕。
   回測任務頁只放縮放鈕，靠 flex-end 維持原本的靠右對齊 */
.sc-kchart-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding-bottom: 6px;
}

/* 商品／週期（交易監控頁）。唯讀標示，實際調整在右欄「設定」分頁 */
.sc-kchart-picks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.sc-kchart-picks-text {
    font-size: 13px;
    font-weight: bold;
    color: var(--sc-text);
    letter-spacing: 0.3px;
}

/* 每次重繪時被清空的部分。flex-grow 讓它吃下剩餘寬度，
   內部的指標列才推得動縮放鈕到最右側 */
.sc-kchart-tools-dyn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
}

/* 指標列，取代 dxChart 內建圖例（看盤軟體的慣例位置）。
   內建圖例會橫佔一整條版面，把 K 棒往下擠。 */
.sc-kchart-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-right: auto;
    font-size: 11px;
    color: var(--sc-chart-axis);
}

.sc-kchart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sc-kchart-legend-dot {
    width: 10px;
    height: 2px;
    border-radius: 1px;
}

/* 圖示鈕（K 線圖的放大／縮小／還原）。
   同 .sc-btn，dxButton 建在同一個元素上，須用複合選擇器。

   dxButton 的預設尺寸是為文字鈕設計的（有 min-width、內距左右不對稱），
   裡面只放一個 18px 圖示時就會留下一個明顯偏寬的外框，圖示看起來沒有置中。
   固定成正方形並把內容改為 flex 置中。 */
.sc-icon-btn.dx-button {
    background: transparent;
    border-color: #3c4a5e;
    width: 32px;
    height: 32px;
    min-width: 0;
}

.sc-icon-btn.dx-button .dx-button-content {
    /* SVG 是行內元素，交給預設的行內排版會坐在文字基線上，下方多出一條
       基線間隙——那正是「圖案沒有置中」的來源，補 padding 治不好 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 100%;
}

.sc-icon-btn .sc-icon-wrap {
    line-height: 0;
}

/* 深色 tooltip（trading.js customizeChartTooltip 的樣式） */
.tooltip-wrapper-li {
    list-style: none;
    margin: 2px 0;
    white-space: nowrap;
}

/* 明細表：方向與損益的著色，沿用 phone.css 的 grid-* 語彙 */
.grid-center-inc { color: var(--sc-inc); font-weight: bold; }
.grid-center-dec { color: var(--sc-dec); font-weight: bold; }

.sc-pnl-chip {
    display: inline-block;
    min-width: 74px;
    padding: 2px 8px;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

.sc-pnl-profit { background: var(--sc-profit-bg); }
.sc-pnl-loss   { background: var(--sc-loss-bg); }
.sc-pnl-flat   { background: transparent; color: var(--sc-text-muted); }

/* ══════════════════════════════════════════════════════════════════
   首頁交易監控 Dashboard（UIUX 規格 §2.1）
   Header 帳戶 → 左策略清單 ｜ 中 商品/週期 + K 線 ｜ 右狀態持倉 → 下交易明細
   ══════════════════════════════════════════════════════════════════ */

.sc-dash-toolbar .sc-card-body {
    padding: 8px 12px;
}

/* 帳戶列改為靠左：商品／週期／模式移走後若仍靠右，整條列左半會空一大片 */
.sc-dash-toolbar .sc-toolbar {
    margin-bottom: 0;
}

/* 三欄：左右固定、中間吃剩餘空間。中央 K 線是主視覺，兩側不得壓縮它 */
.sc-dash {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    gap: var(--sc-gap);
    align-items: stretch;
    margin-bottom: var(--sc-gap);
}

.sc-dash > .sc-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 中央欄**不隨列高伸展**：它的高度是固定的（圖表高度 + 卡片邊框），
   而 DashboardPage.syncDashHeights 量的就是這個自然高度，寫進 --sc-dash-h。
   若讓它跟著列高一起長，量到的會是「被側欄撐大之後」的值，上限就形同虛設。 */
.sc-dash-center {
    align-self: start;
}

/* 側欄的高度上限＝中央 K 線欄的高度。內容超出時在欄內自己捲（四個分頁都是），
   整列不再被側欄撐高——否則 K 線下方會留一大片白，交易明細被推到摺線以下。
   量不到時（--sc-dash-h 尚未寫入）退回 none，維持舊行為而非塌成 0 */
.sc-dash-left,
.sc-dash-right {
    max-height: var(--sc-dash-h, none);
}

.sc-dash-center .sc-card-body {
    padding: 8px 10px 10px;
}

.sc-kchart-dash {
    height: 460px;
}

/* 投影機常見 1280×720：三欄仍放得下（兩側各 220，中央約 780），
   但若在此就拆成上下排，持倉與 PnL 會掉到摺線以下——那是 demo 最需要被看見的兩個數字。
   因此只縮側欄、不拆版面；真的窄到 1080 以下才堆疊。 */
@media (max-width: 1500px) {
    .sc-dash {
        grid-template-columns: 220px minmax(0, 1fr) 220px;
    }
}

@media (max-width: 1080px) {
    .sc-dash {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .sc-dash-center {
        grid-column: 1 / -1;
        order: -1;
    }
}

/* 720p 投影：圖表適度壓低，但不能低於這個高度——再低 K 棒就被壓成一條線 */
@media (max-height: 820px) {
    .sc-kchart-dash { height: 385px; }
    .sc-dash-trades .dx-datagrid { font-size: 11px; }
}

/* 帳戶資訊已移至頁首（見「頁首帳戶概況」一節），此處不再有對應版面 */

/* ── 左欄：訂閱策略 ──────────────────────────────────────────────── */

.sc-dash-left .sc-card-body {
    padding: 6px;
    /* 分頁列固定、內容自己捲：見 .sc-dash-strats／.sc-dash-position。
       卡片高度由 --sc-dash-h 限住（見 .sc-dash-left 的 max-height） */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* 訂閱清單：訂閱多起來時只捲這一段 */
.sc-dash-strats {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* 策略部位自成一個分頁：與訂閱清單搶同一段高度的話，訂閱一多就誰都看不完整 */
.sc-dash-position {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* 左欄與右欄一樣窄，dxTabs 預設的內距會讓兩個分頁標籤各佔一半還換行 */
.sc-dash-left .dx-tabs {
    margin-bottom: 8px;
    background: transparent;
}

.sc-dash-left .dx-tabs .dx-tab {
    padding: 6px 4px;
}

.sc-strat-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--sc-radius);
    border: 1px solid transparent;
    cursor: pointer;
}

.sc-strat-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sc-strat-item.is-active {
    background: rgba(66, 135, 245, 0.14);
    border-color: var(--sc-primary);
}

.sc-strat-name {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 自有策略：來源**一律不標字**，改用名稱顏色。交易監控的策略清單與下單設定同一套。
   青色在本站已是「自有／已加入」的語意（見 .sc-lab-state.is-active）。
   `.sc-name-self` 給下單設定的 Grid 儲存格用——那裡不套 .sc-strat-name 的粗體與省略號。 */
.sc-strat-name.is-self,
.sc-name-self {
    color: var(--sc-cyan);
}

/* 策略前面的啟停鈕：它決定**後端要不要跑這支策略**。
   狀態燈號併進這顆鈕——同一件事不必佔兩個位置，而一顆純顯示的燈旁邊
   擺一顆可按的鈕，客戶會不知道該按哪一個。配色沿用下方 .sc-dot
   （綠=執行中、黃=已停止，與紅漲綠跌無關，此處是運行狀態語意）。 */
/* 中央卡片的標題列＝啟停鈕 + 策略名稱 + 執行狀態，三者同一行對齊 */
.sc-dash-center .sc-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-strat-run {
    /* 圖案是自繪 SVG（Icons.play / Icons.stop）而非 ■／▶ 兩個字元：
       那兩個字貼著基線畫，在圓框裡必定偏下，而基線位置由字型決定、line-height 調不動。
       SVG 是區塊元素，這裡的 flex 置中負責把它擺在圓框正中（同 .sc-icon-btn）。 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--sc-border);
    border-radius: 50%;
    background: transparent;
    color: var(--sc-text-muted);
    cursor: pointer;
}

.sc-strat-run:hover {
    border-color: var(--sc-primary);
    color: var(--sc-text);
}

.sc-strat-run.is-running {
    border-color: #35D06A;
    color: #35D06A;
}

.sc-strat-run.is-paused {
    border-color: #F6C453;
    color: #F6C453;
}

.sc-strat-run.is-alert {
    border-color: #FF5A5A;
    color: #FF5A5A;
}

/* 中央卡片標題後面的執行狀態，例如「strategy_sma v1.1（監控中）」。
   刻意比策略名稱淡一階：標題要回答的第一件事仍是「圖上畫的是哪一支」。
   避開紅綠——紅綠在本站已被漲跌佔用。 */
.sc-dash-runtag {
    margin-left: -4px;
    font-size: 12px;
    font-weight: normal;
    color: var(--sc-text-muted);
}

.sc-strat-meta {
    font-size: 11px;
    color: var(--sc-text-muted);
}

.sc-strat-tag {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--sc-chip);
    color: var(--sc-text-muted);
    font-size: 10px;
}

/* 狀態燈：綠=Running、黃=Paused、紅=Alert（與紅漲綠跌無關，此處是運行狀態語意） */
.sc-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--sc-text-muted);
}

.sc-dot-running { background: #35D06A; box-shadow: 0 0 6px rgba(53, 208, 106, 0.8); }
.sc-dot-paused  { background: #F6C453; }
.sc-dot-alert   { background: #FF5A5A; box-shadow: 0 0 6px rgba(255, 90, 90, 0.8); }

/* ── 右欄：狀態 / 設定 兩分頁 ─────────────────────────────────────── */

/* 捲軸給分頁內容而非卡片本體：分頁列要固定在上方，捲的只有它下面那一段。
   參數欄位數量隨策略而異、風控有六個模組，兩者都會長過中央圖表——
   卡片高度已由 --sc-dash-h 限住，這裡負責讓超出的部分捲得起來。 */
.sc-dash-right .sc-card-body {
    min-height: 0;
    overflow: hidden;
    /* 卡片被 max-height 限住之後，分頁內容要能被壓縮才捲得起來——
       區塊排版下 .sc-dash-settings 的高度是內容高，不會縮，只會被 overflow 切掉 */
    display: flex;
    flex-direction: column;
}

.sc-dash-settings {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* 右欄只有 220–260px，dxTabs 預設的內距會讓兩個分頁標籤各佔一半還換行 */
.sc-dash-right .dx-tabs {
    margin-bottom: 8px;
    background: transparent;
}

.sc-dash-right .dx-tabs .dx-tab {
    padding: 6px 4px;
}

/* 開關與說明文字（取代原本唯讀的 RUNNING 文字）。
   說明是誠信要求，字級可小但不可拿掉（規格 §5.2） */
/* 目前無人使用：交易監控的啟停開關與其說明已於 2026-08-19 移除
   （啟停歸下單設定管，這一頁只監控）。樣式保留待其他頁面需要同款註記時沿用。 */
.sc-run-note {
    margin: 4px 0 10px;
    text-align: left;
    line-height: 1.5;
}

.sc-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sc-border);
}

.sc-status-text {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.sc-status-running { color: #35D06A; }
.sc-status-paused  { color: #F6C453; }
.sc-status-alert   { color: #FF5A5A; }

.sc-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
}

.sc-kv-label { color: var(--sc-text-muted); }

.sc-kv-value {
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.sc-pnl-big {
    font-size: 17px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

/* ── 下方交易明細 ────────────────────────────────────────────────── */

.sc-dash-trades .dx-datagrid .dx-data-row {
    cursor: pointer;
}

.sc-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
}

.sc-tag-filled {
    background: rgba(53, 208, 106, 0.18);
    color: #35D06A;
}

.sc-tag-muted {
    background: var(--sc-chip);
    color: var(--sc-text-muted);
}

/* ── 紀錄與通知中心（規格 §3.2）─────────────────────────────────────
   等級標籤**刻意避開漲跌紅綠**：本站紅代表上漲、綠代表下跌（規格 §5.4 差異 A），
   用綠色標「成交」、紅色標「委託失敗」會讓同一個畫面上的綠色一下是跌、一下是成功。
   改用藍（一般）／青（完成）／琥珀（注意）／紅（重大）。
   紅只留給 critical——那一層本來就是要打斷閱讀的。 */

.sc-log-info {
    background: rgba(66, 135, 245, 0.18);
    color: #7FB2FF;
}

.sc-log-success {
    background: rgba(142, 217, 250, 0.18);
    color: #8ED9FA;
}

.sc-log-warning {
    background: rgba(241, 110, 51, 0.20);
    color: #F6A96C;
}

.sc-log-critical {
    background: rgba(255, 90, 90, 0.22);
    border: 1px solid rgba(255, 90, 90, 0.85);
    color: #FF8A8A;
}

/* 訊息常常是一整句：截成單行讓表格維持可掃視，全文交給展開列。
   max-width 是必要的——表格是 columnAutoWidth，不設限的話這一欄會比其餘欄加起來還寬。 */
.sc-log-message {
    display: inline-block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* 展開列的訊息全文。
   原本包一層有底色與邊框的方塊——訊息多半只有一句話，於是展開後最顯眼的東西
   變成那個大半是空白的框，而不是字。改以左側色條標示範圍，不再畫框。 */
.sc-log-detail-body {
    padding-left: 8px;
    border-left: 3px solid var(--sc-primary);
    font-size: 13px;
    line-height: 1.5;
    /* 展開列的重點就是「看得到全文」，此處不可再截斷 */
    white-space: pre-wrap;
    word-break: break-word;
}

/* DevExtreme 給展開列的內縮很大（Material 主題四邊各 20px 起跳），
   裡面只有一兩行字時，上下留白比內容本身還高。

   選擇器帶上 .dx-datagrid（.sc-records-grid 就是 dxDataGrid 的根元素，兩個 class
   在同一個元素上）湊到三個 class——DevExtreme 自己那條也是複合選擇器，
   只寫兩個 class 未必蓋得過去。 */
.sc-records-grid.dx-datagrid .dx-master-detail-cell {
    padding: 4px 10px;
}

/* ── 手機版：卡片動態牆（取代表格）─────────────────────────────────
   日誌要看的是那句話本身，沒有人在比對「第 3 列的事件 vs 第 7 列的事件」。
   而 360px 扣掉展開鈕只剩約 330px，訊息欄會被截到剩幾個字，於是每一列都得點開，
   展開後又是與表格不同的視覺語言，一開一合畫面就破碎。
   訊息直接完整攤開，展開鈕、篩選列、分頁器、水平捲軸就都不需要了。 */

.sc-log-feed {
    display: grid;
    gap: 8px;
}

/* 外觀與策略卡同一規格，全站卡片長一樣 */
.sc-log-card {
    padding: 10px 12px;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
}

.sc-log-card-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.sc-log-card-event {
    font-size: 13px;
    font-weight: bold;
}

/* 時間推到最右：等級與事件是這張卡的重點，時間只是定位用 */
.sc-log-card-ts {
    margin-left: auto;
    color: var(--sc-text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* 卡片牆存在的理由就是這一段看得到全文，**不可截斷** */
.sc-log-card-msg {
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 只在訊息本身沒提到策略名時才出現（見 records.js 的 buildLogCard） */
.sc-log-card-strategy {
    margin-top: 6px;
    color: var(--sc-text-muted);
    font-size: 12px;
}

/* ── 警示列 ────────────────────────────────────────────────────────
   目前無人使用：下單設定頁的「不會送單」聲明已於 2026-08-18 移除，
   改由「立即補買／立即補賣」按下時的提示承擔（見 order.js）。
   樣式保留待日後其他頁面需要常駐警示時沿用。 */

.sc-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    margin-bottom: var(--sc-gap);
    border: 1px solid var(--sc-warn);
    border-left-width: 4px;
    border-radius: var(--sc-radius);
    background: rgba(241, 110, 51, 0.12);
    color: var(--sc-text);
    font-size: 13px;
}

.sc-notice-icon {
    color: var(--sc-warn);
    font-size: 15px;
}

/* ══════════════════════════════════════════════════════════════════
   策略中心（UIUX 規格 §2.2）
   搜尋篩選列 → 卡片式策略清單 → 綜合分析報表 Modal（曲線 + 月度熱力圖）
   ══════════════════════════════════════════════════════════════════ */

/* 卡片最小寬度需容納四格指標並排；再窄一格數字就會換行而讀不出對應關係 */
.sc-strat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: var(--sc-gap);
}

.sc-strat-card {
    padding: 12px 14px;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
}

.sc-strat-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.sc-strat-card-name {
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 卡片內的指標格比回測結果頁的統計卡小一階，四格才排得進一張卡。
   用 grid 而非 flex：flex 的百分比基準值要自己扣掉內距與框線才算得準，
   算錯就會多出幾個 px 而擠成一格一列（手機版原本就是這樣壞的）。 */
.sc-strat-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 12px;
}

.sc-strat-metrics .sc-stat {
    /* grid 由容器分配寬度，flex 的基準值與下限會與它打架 */
    flex: none;
    min-width: 0;
    padding: 6px 8px;
    background: var(--sc-surface);
}

.sc-strat-metrics .sc-stat-value {
    font-size: 16px;
}

.sc-strat-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Modal 內的可捲區（綜合分析報表 / 提交回測）────────────────────
   捲動本身由 dxScrollView 負責（見 strategies.js 的 attachScrollView：
   dxPopup 的遮罩層會攔截滑鼠滾輪，純 CSS 的 overflow 區塊滾不動）。
   此處只負責「填滿 Popup 剩下的高度」與內距。

   min-height: 0 不可省——flex 子項的預設 min-height 是 auto，內容一多就會把
   容器撐開而不是產生捲動，於是 Popup 自己捲了起來（就是那條多出來的外層捲軸）。 */

.sc-analytics-body,
.sc-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    /* 右側多留 6px，捲動時內容不會貼著捲軸 */
    padding: 4px 6px 4px 2px;
}

/* 捲軸配色。
   頁面層級的捲軸（#pageContainer）早已改過色，但 Modal 內是另外開的捲動容器，
   不在那條選擇器的涵蓋範圍——於是報表一長就冒出一條系統預設的淺色捲軸，
   在深色 Modal 上是整個畫面最亮的東西。

   Firefox 不支援 ::-webkit-scrollbar，必須另外給 scrollbar-color，
   只寫 webkit 的話 Firefox 仍是預設淺色。

   **另開 overflow 的容器一律加進這一組。**漏掉的那一個不會報錯，
   它只是自己長出一條比背景亮的淺色捲軸，而那正是全站唯一一條長那樣的東西。 */
.sc-analytics-body,
.sc-dialog-body,
.sc-heatmap-wrap,
.sc-dash-strats,
.sc-dash-position,
.sc-lab-chat,
.sc-lab-list,
.sc-dash-settings {
    scrollbar-width: thin;
    scrollbar-color: var(--sc-border) transparent;
}

.sc-analytics-body::-webkit-scrollbar,
.sc-dialog-body::-webkit-scrollbar,
.sc-heatmap-wrap::-webkit-scrollbar,
.sc-dash-strats::-webkit-scrollbar,
.sc-dash-position::-webkit-scrollbar,
.sc-lab-chat::-webkit-scrollbar,
.sc-lab-list::-webkit-scrollbar,
.sc-dash-settings::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sc-analytics-body::-webkit-scrollbar-track,
.sc-dialog-body::-webkit-scrollbar-track,
.sc-heatmap-wrap::-webkit-scrollbar-track,
.sc-dash-strats::-webkit-scrollbar-track,
.sc-dash-position::-webkit-scrollbar-track,
.sc-lab-chat::-webkit-scrollbar-track,
.sc-lab-list::-webkit-scrollbar-track,
.sc-dash-settings::-webkit-scrollbar-track {
    /* Modal 與卡片底色本身就是 surface，軌道透明才不會多出一條比背景更亮的直線 */
    background: transparent;
}

.sc-analytics-body::-webkit-scrollbar-thumb,
.sc-dialog-body::-webkit-scrollbar-thumb,
.sc-heatmap-wrap::-webkit-scrollbar-thumb,
.sc-dash-strats::-webkit-scrollbar-thumb,
.sc-dash-position::-webkit-scrollbar-thumb,
.sc-lab-chat::-webkit-scrollbar-thumb,
.sc-lab-list::-webkit-scrollbar-thumb,
.sc-dash-settings::-webkit-scrollbar-thumb {
    background: var(--sc-border);
    border-radius: 4px;
}

.sc-analytics-body::-webkit-scrollbar-thumb:hover,
.sc-dialog-body::-webkit-scrollbar-thumb:hover,
.sc-heatmap-wrap::-webkit-scrollbar-thumb:hover,
.sc-dash-strats::-webkit-scrollbar-thumb:hover,
.sc-dash-position::-webkit-scrollbar-thumb:hover,
.sc-lab-chat::-webkit-scrollbar-thumb:hover,
.sc-lab-list::-webkit-scrollbar-thumb:hover,
.sc-dash-settings::-webkit-scrollbar-thumb:hover {
    background: #3A4A61;
}

/* ── 月度收益熱力圖 ─────────────────────────────────────────────── */

.sc-heatmap-wrap {
    overflow-x: auto;
}

.sc-heatmap {
    width: 100%;
    /* 14 欄（年 + 12 月 + 年度）在手機寬度下會被壓到讀不出數字。
       給下限讓它改為橫向捲動——擠成一團的表格等於沒有這張表。 */
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.sc-heatmap th {
    padding: 3px 4px;
    color: var(--sc-text-muted);
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
}

.sc-heatmap-cell,
.sc-heatmap-total {
    padding: 5px 4px;
    text-align: center;
    border-radius: 2px;
    white-space: nowrap;
}

.sc-heatmap-total {
    font-weight: bold;
    border-left: 1px solid var(--sc-border);
}

/* 分四級而非連續漸層：投影機下連續色階只看得出「有顏色」，分不出強弱。
   台股慣例：正報酬紅、負報酬綠，與 K 線及損益欄同一套語意。 */
.sc-heat-empty    { background: transparent; }
.sc-heat-up-1     { background: rgba(255, 90, 90, 0.14); }
.sc-heat-up-2     { background: rgba(255, 90, 90, 0.30); }
.sc-heat-up-3     { background: rgba(255, 90, 90, 0.50); }
.sc-heat-up-4     { background: rgba(255, 90, 90, 0.72); color: #fff; }
.sc-heat-down-1   { background: rgba(53, 208, 106, 0.14); }
.sc-heat-down-2   { background: rgba(53, 208, 106, 0.30); }
.sc-heat-down-3   { background: rgba(53, 208, 106, 0.50); }
.sc-heat-down-4   { background: rgba(53, 208, 106, 0.72); color: #fff; }

/* 綜合分析報表的八格統計：固定欄數，不用 flex-wrap。
   自動換行會隨視窗寬度讓某一格自己孤零零留在最後一排。
   8 同時是 4 與 2 的倍數，桌機 4×2、手機 2×4，兩種都排得滿。

   ⚠ 此類**不與 .sc-stats 並用**，自帶 gap 與 margin。
   兩者都是單一類別（權重相同），而 .sc-stats 在本檔後面才宣告——並用時它的
   `display: flex` 會蓋掉這裡的 `display: grid`，格線根本沒生效，八格又退回
   自動換行。這種「後面那條贏」的覆蓋在瀏覽器上只看得到版面歪掉，看不出原因。 */
.sc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sc-gap);
    margin-bottom: var(--sc-gap);
}

.sc-stats-grid .sc-stat {
    /* grid 由容器分配寬度，flex 的基準值與下限會與它打架 */
    flex: none;
    min-width: 0;
}

@media (max-width: 700px) {
    .sc-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ══════════════════════════════════════════════════════════════════
   我的積分（UIUX 規格 §3.3）
   上方兩格核心資訊 → 下方三欄變動清單。刻意不放第三個數字。
   ══════════════════════════════════════════════════════════════════ */

.sc-credit-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-gap);
    margin-bottom: 4px;
}

.sc-credit-tile {
    padding: 16px 18px;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
}

/* 這一頁只有兩個數字，就讓它們大到隔著會議桌也看得見 */
.sc-credit-value {
    margin: 6px 0 4px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.1;
}

/* 加點與扣點左右並排：混在同一張表時，「本期進帳多少、花掉多少」
   得自己一列一列挑出來加 */
.sc-credit-ledgers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-gap);
    margin-top: 16px;
}

/* min-width:0 是這個 class 存在的全部理由。
   grid 軌道的自動最小值是 min-content，而 dxDataGrid 的自然寬度（三欄合計約
   400px）就是它的 min-content——手機上軌道因此被撐到比畫面還寬，整頁橫向溢出
   （表格自己的左右滑動也就用不上了）。壓成 0 之後軌道回到容器寬度，
   表格改在自己的捲動區內左右滑動。 */
.sc-ledger-pane {
    min-width: 0;
}

.sc-ledger-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sc-ledger-total {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    /* 兩張表並排時每張只剩約 320px，三欄擠不下——改為上下排。
       單欄一律寫 minmax(0, 1fr) 而非 1fr：後者的軌道最小值是 min-content，
       表格會把它撐開（見 .sc-ledger-pane） */
    .sc-credit-ledgers {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .sc-credit-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-credit-value {
        font-size: 24px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   投資組合（旗艦版）
   六個分頁：投組總覽／相關性矩陣／資金配置／再平衡／投組層級風控／投組回測
   ══════════════════════════════════════════════════════════════════ */

/* 分頁內的說明文字。每一段都在解釋畫面上那組數字為什麼值得看——
   字級小於內文但不到註腳，讀得完又不搶戲。 */
.sc-pf-note {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--sc-text-muted);
}

/* 相關性矩陣：沿用月度熱力圖的表格骨架（.sc-heatmap），只換色階。

   **不套紅綠**：本站紅代表上漲、綠代表下跌，相關性套上這組語意會被讀成「好／壞」，
   但相關性本身沒有好壞、只有高低。改用單色深淺，愈深代表愈相關；
   0.7 以上另加一圈警示邊框——那是這張表唯一需要客戶當場看懂的門檻。 */
.sc-corr-name {
    text-align: right;
    white-space: nowrap;
    padding-right: 8px;
    color: var(--sc-text);
}

/* 對角線恆為 1，資訊量是零，因此刻意壓暗不讓它搶走視線 */
.sc-corr-self {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sc-text-muted);
}

.sc-corr-1 { background: rgba(66, 135, 245, 0.10); }
.sc-corr-2 { background: rgba(66, 135, 245, 0.26); }
.sc-corr-3 { background: rgba(66, 135, 245, 0.44); }

.sc-corr-4 {
    background: rgba(66, 135, 245, 0.62);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--sc-warn);
}

/* 權重微調與風控門檻的輸入格。

   固定欄寬的格線而非 flex 百分比：欄位標題長短不一（「同時虧損天數警戒」對上
   「總曝險上限」差了四個字），交給內容自己撐寬度必然參差（同六大風控的處理）。 */
.sc-weight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sc-gap);
    margin-top: 10px;
}

.sc-weight-item {
    padding: 10px 12px;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
}

.sc-weight-item .sc-stat-label {
    margin-bottom: 6px;
}

.sc-weight-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}

/* 六個分頁在 360px 寬度下放不進一列，交給 dxTabPanel 自己橫向捲動；
   這裡只確保它不會把整頁撐開（同手機版底部導覽的處理）。 */
.sc-card-body .dx-tabpanel .dx-tabs {
    max-width: 100%;
}

/* ── 確認對話框（套用回測設定至交易監控 / 訂閱策略 / 積分消耗）───────── */

/* 金額自成一列且放大：那是客戶在訂閱畫面上唯一真正要決定的事 */
.sc-fee {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
}

.sc-fee-value {
    font-size: 20px;
    font-weight: bold;
    color: var(--sc-text);
    font-variant-numeric: tabular-nums;
}

/* 訂閱方案（按月／按季／按年）：dxRadioGroup 的 itemTemplate 內容 */

.sc-plan {
    min-width: 92px;
    padding: 2px 4px;
    line-height: 1.5;
}

.sc-plan-title {
    font-size: 13px;
    color: var(--sc-text);
}

.sc-plan-price {
    font-size: 15px;
    font-weight: bold;
    color: var(--sc-text);
    font-variant-numeric: tabular-nums;
}

/* 折扣標記用青色而非紅綠：本站紅代表上漲、綠代表下跌，
   用綠色標「省 20%」會與價格語意撞在一起 */
.sc-plan-save {
    font-size: 11px;
    color: #8ED9FA;
    /* 無折扣的那一格放等高空行，三格才不會高低不齊 */
    min-height: 16px;
}

.sc-confirm-lead {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--sc-text);
}

.sc-confirm-heading {
    margin: 10px 0 2px;
    padding-top: 8px;
    border-top: 1px solid var(--sc-border);
    font-size: 12px;
    color: var(--sc-text-muted);
}

/* .sc-kv 的 12px 是為交易監控右欄（220–260px 寬）挑的；
   對話框裡要確認的是即將被覆寫的值，不該比正文還小 */
.sc-confirm .sc-kv {
    font-size: 14px;
}

/* ── 六大風控模組（規格 §2.3.1）─────────────────────────────────────
   三層式矩陣：價格與部位 / 時間與跨夜 / 帳戶與系統。
   每個模組一列：開關 + 名稱 + 該模組自己的參數欄。 */

/* 風控模組面板＝一張 dxDataGrid（同下單設定的策略清單）。
   一列一個參數、依模組分組，因此「參數／數值／單位」三欄形狀一致，
   對齊由 grid 的欄寬保證——先前那套固定欄寬 + 占位格的 CSS 已不需要。 */
.sc-risk {
    margin-top: 14px;
}

/* 分組列：開關 + 模組名稱 + 層級標籤（+ 停損法 radio）。
   flex-wrap：帶 radio 的模組在窄畫面下要能落到第二行，硬擠成一行會把名稱截掉 */
.sc-risk-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sc-risk-name {
    font-size: 14px;
    font-weight: bold;
}

/* 層級（價格與部位／時間與跨夜／帳戶與系統）退到名稱右側的小標籤：
   六個開關平舖成一排時，客戶看到的只是六個名詞，看不出這是一套三層防護 */
.sc-risk-tier-tag {
    font-weight: normal;
}

/* 參數名。可各自啟用的參數（停損／停利、K 棒／時間）在名稱前多一個勾選框——
   模組開關管的是「這個模組要不要用」，這裡管的是「模組裡的哪幾項要用」。 */
.sc-risk-param {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 提交回測對話框的底部：分析方式 + 說明 + 按鈕列。
   在 dxScrollView 之外，因此切到哪一個分頁都看得到——那個選項決定的是金額。 */
.sc-dialog-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--sc-border);
}

.sc-dialog-foot .sc-toolbar {
    margin-bottom: 6px;
}

/* 關閉的模組把整組參數淡出：一眼看得出哪幾項現在真的生效 */
.dx-datagrid .dx-row.sc-risk-off {
    opacity: 0.45;
}

/* 目前這個停損法用不到的參數。與 sc-risk-off 分開兩個 class：共用的話，
   關掉模組再打開會把「這個方法用不到」的列一起亮回來 */
.dx-datagrid .dx-row.sc-risk-unused {
    opacity: 0.45;
}

/* 未啟用的項目整列淡出（套用確認畫面的風控清單） */
.sc-kv-off {
    opacity: 0.5;
}

/* 交易監控右欄的風控摘要。右欄只有 220–260px，名稱與參數分兩行排，
   一行排的話參數會被截成半句。 */
.sc-risk-mini {
    padding: 6px 0;
    border-bottom: 1px solid var(--sc-border);
}

.sc-risk-mini-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

/* 模組名稱本身就是收合鈕（點名稱展開／收起參數）。
   用 <button> 是為了鍵盤與朗讀器——外觀則全部退回純文字，
   不然這一列會冒出一顆與旁邊 dxSwitch 打架的原生按鈕。 */
.sc-risk-mini-name {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--sc-text);
    cursor: pointer;
}

.sc-risk-mini-caret {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--sc-text-muted);
}

/* 參數名（含可選的勾選框） */
.sc-risk-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 13px;
    color: var(--sc-text-muted);
}

/* 數值與單位並排。右欄只有 220–260px：數值撐滿剩餘寬度，單位固定 76px */
.sc-risk-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-risk-field-unit {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--sc-text-muted);
}

.sc-risk-mini-detail {
    font-size: 12px;
    color: var(--sc-text-muted);
    line-height: 1.5;
}

/* 未啟用的模組整列淡出（同風控表格的 sc-risk-off） */
.sc-risk-mini-off {
    opacity: 0.5;
}

/* 「套用／還原」按鈕列。交易監控的參數設定、風控設定，與提交回測對話框的風控頁
   共用同一組（見 PageBase.applyBar），因此樣式也只有這一份。 */
.sc-apply-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.sc-apply-dirty {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--sc-warn);
}

/* 交易監控右欄只有 220–260px：兩顆按鈕就佔滿一列，
   提示文字與它們並排會被壓成半句，因此自己獨佔一行 */
.sc-dash-right .sc-apply-dirty {
    flex: 1 0 100%;
}

/* 按鈕列固定在卡片底部（分頁外面），捲的是它上面的分頁內容。
   不寫 flex-basis auto 的話，卡片被 --sc-dash-h 限高時它會跟著被壓扁 */
.sc-dash-right .sc-apply-bar {
    flex: 0 0 auto;
}

/* 停損法的說明文字。**必須與表格拉開距離**：dxDataGrid 的高度是它自己算的，
   貼著放時只要它算矮了一點點，這行字就會被最後一列蓋住。 */
.sc-risk-note {
    margin-top: 12px;
    line-height: 1.6;
}

/* 停損法下拉。放在分組列上，寬度夠放「波動率通道停損」 */
.sc-risk-method {
    width: 160px;
}

/* radio 項目內的文字 + 標籤 */
.sc-radio-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 旗艦版標籤。刻意不用漲跌紅綠（本站紅代表上漲），改用與圖表第三序列同一個金色 */
.sc-tag-flagship {
    background: rgba(201, 162, 39, 0.18);
    color: var(--sc-series-c);
}

/* 綜合分析報表在窄畫面下的收斂：六格統計、460px 高的圖表與 dxPopup 的內距
   三者相加會把內容推出 Modal 邊界 */
@media (max-width: 560px) {
    .sc-analytics-body .sc-stat {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        padding: 8px 6px;
    }

    .sc-analytics-body .sc-stat-value {
        font-size: 17px;
    }

    .sc-analytics-body .sc-chart-tall {
        height: 300px;
    }

    .dx-popup-content {
        padding: 10px;
    }
}

/* 策略中心的手機版：卡片最小寬 420px 在 360px 的畫面上會撐出整頁橫捲，
   單欄排列並讓四格指標排成 2×2（而非一格一列——四列數字看不出彼此是同一組）。
   單欄一律寫 minmax(0, 1fr)：1fr 的軌道最小值是 min-content，只要卡片裡有一個
   不肯縮的東西（表格、長字串）軌道就會被撐開，又是同一種整頁橫捲 */
@media (max-width: 820px) {
    .sc-strat-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-strat-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── 績效統計摘要（M36）──────────────────────────────────────────── */

.sc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-gap);
    margin-bottom: var(--sc-gap);
}

.sc-stat {
    flex: 1 1 130px;
    min-width: 120px;
    padding: 10px 14px;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    text-align: center;
}

.sc-stat-label {
    font-size: 12px;
    color: var(--sc-text-muted);
}

.sc-stat-value {
    margin-top: 4px;
    font-size: 20px;
    font-weight: bold;
    color: var(--sc-text);
    font-variant-numeric: tabular-nums;
}

/* 台股慣例：獲利紅、虧損綠 */
.sc-stat-up   { color: var(--sc-inc); }
.sc-stat-down { color: var(--sc-dec); }

.sc-stat-hint {
    margin-top: 2px;
    font-size: 11px;
    color: var(--sc-text-muted);
}

/* 環境標示（開發／測試／正式）：存在感足夠讓人看見，但不搶頁首的品牌視覺 */
/* 環境標示。緊接登出鈕右側，因此**照著登出鈕長**：同樣 36px 高、同樣 4px 圓角、
   同樣的外框色（見 dx.material 的 .dx-button 與上方的 .hd-user .dx-button）。
   原本是 11px 的膠囊，擺在方框鈕旁邊像是掉了一半，兩者並排時特別明顯。 */
.hd-env-badge {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--sc-radius);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    cursor: help;
    white-space: nowrap;
}

/* display 一給就蓋掉 [hidden] 的 UA 樣式——取不到 /mt/health 時，
   那個「還沒填內容」的空框就會一直掛在登出鈕旁邊 */
.hd-env-badge[hidden] {
    display: none;
}

/* 正式環境改為警示色：在正式站上以為自己還在測試環境而隨手操作，代價最高 */
.hd-env-badge.is-production {
    border-color: rgba(255, 90, 90, 0.85);
    background: rgba(255, 90, 90, 0.22);
}

.sc-stat-source {
    margin: -4px 0 var(--sc-gap);
    font-size: 11px;
    color: var(--sc-text-muted);
    text-align: right;
}

/* ── 策略開發（旗艦版）──────────────────────────────────────────────
   左：我的策略（我做的）　右：對談 + 摘要卡 + 回測報告
   交易監控左欄那份叫「策略清單」（我在用的），兩份清單各有所指，樣式也各自獨立。 */
.sc-lab {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--sc-gap);
    align-items: start;
}

.sc-lab-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 52vh;
    overflow-y: auto;
    margin-bottom: 8px;
}

.sc-lab-item {
    padding: 8px 10px;
    border-radius: var(--sc-radius);
    border: 1px solid transparent;
    cursor: pointer;
}

.sc-lab-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sc-lab-item.is-active {
    background: rgba(66, 135, 245, 0.14);
    border-color: var(--sc-primary);
}

/* 刪除鈕：平時很淡，游標移到該張卡片才明顯起來。
   刪除不可復原，但它也不是這一欄的主要動作——一直亮著會搶掉策略名稱的注意力。
   **底色不可用 transparent**：觸控裝置沒有 hover，那等於這顆鈕根本不存在。 */
.sc-lab-del {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--sc-border);
    font-size: 14px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
}

.sc-lab-item:hover .sc-lab-del {
    color: var(--sc-text-muted);
}

.sc-lab-del:hover {
    background: var(--sc-chip);
    color: var(--sc-text);
}

/* 狀態標籤一律避開紅綠：紅綠在本站已被漲跌佔用（規格 §6 技術約束） */
.sc-lab-state {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--sc-chip);
    color: var(--sc-text-muted);
    font-size: 10px;
}

.sc-lab-state.is-confirmed { color: var(--sc-cyan); }
.sc-lab-state.is-backtested { color: var(--sc-primary); }
.sc-lab-state.is-active {
    background: var(--sc-primary-light);
    color: var(--sc-cyan);
}

/* 右欄是一根**定高**的 flex 欄：對談區吃掉剩下的高度，輸入列貼在底部。
   不給定高的話，訊息少的時候對談區照 min-height 撐開 320px，輸入列被頂到半空中，
   下面一大片空白——而訊息多的時候輸入列又會被推到摺線以下。 */
.sc-lab-main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--sc-header-h) - 118px);
    min-height: 420px;
    margin-bottom: 0;
}

.sc-lab-main > .sc-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* flex 子項的預設 min-height:auto 會讓它被內容撐大而不捲，捲的就變成整頁 */
    min-height: 0;
}

/* 對談區：泡泡用純 DOM，不用 dxList——列高與捲動都要自己控，widget 幫不上忙 */
.sc-lab-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.sc-lab-msg {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.sc-lab-msg.is-bot {
    align-self: flex-start;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
}

.sc-lab-msg.is-user {
    align-self: flex-end;
    background: var(--sc-primary-light);
    border: 1px solid var(--sc-primary);
}

.sc-lab-msg.is-thinking { color: var(--sc-text-muted); }

/* 範例提示：第一句話最難開口，給三個現成的說法比放一行說明有用 */
.sc-lab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sc-lab-chip {
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--sc-border);
    background: transparent;
    color: var(--sc-text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.sc-lab-chip:hover {
    border-color: var(--sc-primary);
    color: var(--sc-text);
}

/* 輸入列固定在底部，不隨對談內容多寡上下跑 */
.sc-lab-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    margin-top: var(--sc-gap);
}

/* 摘要卡：用戶看不到程式碼，他按下「邏輯相符」確認的就是這張卡的內容 */
.sc-lab-summary,
.sc-lab-report {
    align-self: stretch;
    max-width: 100%;
    padding: 12px 14px;
    border-radius: var(--sc-radius);
    border: 1px solid var(--sc-border);
    background: var(--sc-surface-2);
}

.sc-lab-rules {
    margin-top: 8px;
    font-size: 13px;
}

.sc-lab-rules ul {
    margin: 2px 0 0;
    padding-left: 18px;
    line-height: 1.7;
}

.sc-lab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--sc-gap);
}

/* 原本這裡有一條 `.sc-strat-tag.is-self`（下單設定的「自有」膠囊）。
   來源改為一律以名稱顏色表示、全站不標字之後無人使用，已移除，
   見上方 `.sc-strat-name.is-self, .sc-name-self`。 */

@media (max-width: 820px) {
    .sc-lab {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 單欄時清單在上、對談在下，右欄不再獨佔一個視窗高——
       再減去清單那一段就只剩一條縫，改回讓它照內容長 */
    .sc-lab-main {
        height: auto;
        min-height: 60vh;
    }

    /* 窄螢幕改為橫向捲動的策略膠囊：直列清單會把對談區推到螢幕外 */
    .sc-lab-list {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .sc-lab-item {
        flex: 0 0 auto;
        min-width: 150px;
    }

    .sc-lab-msg { max-width: 92%; }
}

/* ── 參數最佳化掃描（旗艦版，提交回測對話框的「策略參數」頁）──────────── */

/* 參數範圍表：勾選／名稱／起／迄／間距／組數。
   名稱欄吃掉剩餘寬度，數字欄固定寬——三個輸入框寬度不一的話，
   一欄一欄對不齊，看起來像三張不同的表 */
.sc-opt-range {
    display: grid;
    grid-template-columns: 28px minmax(90px, 1fr) repeat(3, 96px) 48px;
    gap: 6px 8px;
    align-items: center;
    font-size: 13px;
    /* dxScrollView 的捲軸疊在內容上方而非另佔寬度，不留這段最右欄（組數）會被它蓋住 */
    padding-right: 12px;
}

.sc-opt-range-head {
    color: var(--sc-text-muted);
    font-size: 12px;
}

.sc-opt-count {
    color: var(--sc-text-muted);
    text-align: right;
}

.sc-opt-off {
    opacity: 0.45;
}

/* 三種風險偏好各一張卡。**卡片本身不套紅綠**：保守／積極是偏好不是好壞，
   紅綠在本站代表漲跌 */
.sc-opt-picks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sc-gap);
    margin-top: 10px;
}

.sc-opt-pick {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    background: var(--sc-surface-2);
}

.sc-opt-pick-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sc-opt-pick-label {
    font-size: 15px;
    font-weight: bold;
    color: var(--sc-cyan);
}

.sc-opt-pick-rule {
    font-size: 12px;
    color: var(--sc-text-muted);
}

.sc-opt-pick-params {
    font-size: 13px;
    color: var(--sc-text);
}

.sc-opt-pick-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    font-size: 12px;
    color: var(--sc-text-muted);
}

/* 數值不套漲跌紅綠：這裡比較的是參數組合，不是行情漲跌 */
.sc-opt-pick-value {
    font-size: 14px;
    font-weight: bold;
    color: var(--sc-text);
}

.sc-opt-pick .sc-btn {
    margin-top: auto;
    align-self: flex-start;
}

@media (max-width: 560px) {
    .sc-opt-range {
        grid-template-columns: 24px minmax(70px, 1fr) repeat(3, 72px);
    }

    /* 窄螢幕收掉組數欄：總組數在下方另有一行，逐列的組數讓位給輸入框 */
    .sc-opt-count { display: none; }

    .sc-opt-picks {
        grid-template-columns: minmax(0, 1fr);
    }
}