/*
 * Modernist design system - dark theme build for Fluxit.
 * 來源: docs/fe/design-system/styles.css, token 定義維持一致,
 * 依 docs/fe/README.md 的深色主題規格於 :root 直接覆寫 (本站僅深色主題,
 * 故不採用 docs 原型逐頁 inline override 的做法, 改在共用樣式表一次覆寫).
 * 全站共用樣式來源, 頁面專屬樣式放在 static/css/pages/<頁面>.css.
 *
 * RWD 斷點 (CSS 變數無法用於 media query, 各處請使用相同數值):
 *   - 桌機/筆電 >= 1024px: 側邊導覽 + 表格式清單 (筆電常見 1280~1440px)
 *   - 平板   <  1024px: 導覽收合為頂部選單, 清單改為卡片
 *   - 手機   <   640px: 表單單欄, 對話框全螢幕
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #2d2b2b;
  --color-surface: #444141;
  --color-text: #f8f4f4;
  --color-accent: #ff9783;
  --color-accent-2: #ff9784;
  --color-divider: color-mix(in srgb, #f8f4f4 25%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  /* 金融語意色: 設計系統為單色 (紅) 配色, 但持倉/交易紀錄需明確區分損益,
     避免使用者誤讀盈虧方向造成資金風險, 故額外定義語意色 (非設計系統 token). */
  --color-gain: #4ade80;
  --color-loss: #ff9783;
  --color-muted: color-mix(in srgb, var(--color-text) 55%, transparent);

  /* 圖表的類別色 (依固定順序指派給系列, 顏色跟著系列走): 已以色覺辨識
     驗證工具在 --color-surface 上檢查過相鄰兩色的辨識度, 調整前須重新驗證;
     前兩色依使用者指定為綠 (USD) / 紅 (USDt), 圖例與提示框一律附上名稱,
     顏色不是唯一的辨識方式 */
  --chart-series-0: #199e70;
  --chart-series-1: #d95926;
  --chart-series-2: #3987e5;
  --chart-series-3: #c98500;
  --chart-series-4: #d55181;
  --chart-series-5: #9085e9;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 30%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #000000 34%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #000000 45%, transparent);

  /* 內容區左右留白, 隨斷點縮小, 讓手機保有足夠的可視寬度 */
  --page-gutter: var(--space-8);
}

*, *::before, *::after { box-sizing: border-box; }
/* 顯示/隱藏一律透過 hidden 屬性切換; 元件本身帶有 display 設定時
   (例如 grid/flex), 瀏覽器預設的 hidden 樣式會被蓋掉, 因此強制隱藏 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
.text-muted { color: var(--color-muted); }
.text-strong { font-weight: 600; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); }

/* 輔助說明小字: 取代各頁散落的 inline font-size:12px 設定 */
.hint { margin: 0; font-size: 12px; color: var(--color-muted); }

/* - rules - */
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* - buttons - */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-300); }
.btn-primary:active { background: var(--color-accent-200); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 18%, transparent); }
.btn-danger { border-color: var(--color-accent-700); color: var(--color-accent-300); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-accent-700) 35%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-sm { font-size: 12px; padding: 4px 10px; }
.btn-lg { font-size: 16px; padding: var(--space-3) var(--space-6); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* - forms - */
/* 表單直向排列一律交給 gap 控制, 不再以 .field + .field 的 margin 疊加,
   避免 grid 內相鄰欄位誤中直向間距而讓左右欄高低不齊 */
.form-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label {
  display: block; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input, select.input, textarea.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input.invalid { border-color: var(--color-loss); }
textarea.input { min-height: 70px; resize: vertical; }
/* 檔案上傳欄位: 原生外觀與深色主題落差過大, 統一為與 .input 一致的方正風格 */
.input[type="file"] { padding: 6px 10px; line-height: 22px; cursor: pointer; }
.input[type="file"]::file-selector-button {
  margin-right: var(--space-2); padding: 2px 10px; font: inherit; font-size: 13px;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm); cursor: pointer;
}
.input[type="file"]::file-selector-button:hover { border-color: var(--color-accent); }
.field-error { margin: 0; color: var(--color-loss); font-size: 12px; }
/* 必填標示: 星號置於標籤文字之前, 與一般表單慣例一致.
   僅供辨識用, 真正的必填判斷仍由欄位的 required 與後端驗證負責,
   因此對輔助技術隱藏, 避免把一個裝飾字元唸出來 */
.required-mark { color: var(--color-loss); margin-right: 4px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.message { margin: 0; font-size: 13px; min-height: 18px; }
.message.error { color: var(--color-loss); }
.message.success { color: var(--color-gain); }
.checkbox-row { display: flex; align-items: center; gap: var(--space-2); }
.checkbox-row label { font-size: 13px; }
/* 百分比輸入框: 右側固定顯示 % 單位 */
.pct-field { position: relative; }
.pct-field .input { padding-right: 32px; }
.pct-field .pct-suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; pointer-events: none; color: var(--color-muted);
}
.seg { display: inline-flex; max-width: 100%; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* 後端不開放的選項 (例如槓桿部位不可保留): 仍列出讓使用者知道有這個選項, 但不可點選 */
.seg-opt:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.seg-opt:has(input:disabled):hover { background: transparent; }
/* 以連結組成的分段控制 (各選項是不同頁面), 目前頁面以 aria-current 標示 */
a.seg-opt { color: inherit; text-decoration: none; }
a.seg-opt[aria-current="page"] { background: var(--color-accent); color: var(--color-bg); }
a.seg-opt[aria-current="page"]:hover { background: var(--color-accent); }
a.seg-opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
/* 撐滿整行的分段控制, 各選項平均分配寬度 */
.seg-block { display: flex; width: 100%; }
.seg-block .seg-opt { flex: 1; justify-content: center; }
/* 交易中心的頁籤 (一般交易 _general_trade_tabs.html、網格交易 grid.html):
   位於頁面最上方, 標示目前是哪一種交易的哪個功能 */
.hub-tabs { margin-bottom: var(--space-4); }

/* - cards - */
.card {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }

/* - tags - */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; white-space: nowrap; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-accent-300); }
.tag-accent-2 { background: color-mix(in srgb, var(--color-accent-2) 22%, transparent); color: var(--color-accent-2-300); }
.tag-neutral { background: var(--color-neutral-700); color: var(--color-neutral-200); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.tag-gain { background: color-mix(in srgb, var(--color-gain) 20%, transparent); color: var(--color-gain); }
.tag-loss { background: color-mix(in srgb, var(--color-loss) 22%, transparent); color: var(--color-loss); }
/* 區塊標題後方的金額單位 (例如「委託紀錄（金額單位：USD）」):
   同一區塊內金額幣別相同時標在標題即可, 不必每列重複 */
.section-unit { margin-left: var(--space-2); font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--color-muted); }
.pnl-gain { color: var(--color-gain); }
.pnl-loss { color: var(--color-loss); }
.text-danger { color: var(--color-accent-300); }
.tag-warn { background: color-mix(in srgb, var(--color-accent-500) 22%, transparent); color: var(--color-accent-300); }

/* 狀態徽章: 標題列右側用來表示整個區塊目前的狀態 */
.status-pill {
  display: inline-flex; align-items: center; padding: 4px 12px;
  font-size: 12px; letter-spacing: 0.02em;
  background: var(--color-neutral-700); color: var(--color-neutral-200);
}
.status-pill-ok { background: color-mix(in srgb, var(--color-gain) 20%, transparent); color: var(--color-gain); }
.status-pill-warn { background: color-mix(in srgb, var(--color-accent-500) 22%, transparent); color: var(--color-accent-300); }
.status-pill-danger { background: color-mix(in srgb, var(--color-loss) 22%, transparent); color: var(--color-loss); }

/* 需要使用者特別留意的說明區塊 (無法保證的要求、樣本不足的績效) */
.warning-block {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent-500);
  background: color-mix(in srgb, var(--color-accent-500) 10%, transparent);
}
.warning-block p { margin: 0; font-size: 13px; }
.warning-block h4 { margin: 0 0 var(--space-2); font-size: 14px; }
/* 破產警示: 使用者最需要看到的一件事, 視覺上與一般提醒明確區隔 */
.danger-block {
  border-left-color: var(--color-loss);
  background: color-mix(in srgb, var(--color-loss) 14%, transparent);
}

/* 條列式說明: 風控調整、系統預設值、拒絕原因共用 */
/* 策略白話說明: 保留換行與縮排, 但字型沿用內文而非等寬.
   策略頁與持倉的進場記錄都用同一段文字, 樣式只維護一份 */
.narrative {
  margin: 0; padding: var(--space-4);
  font-family: var(--font-body); font-size: 14px; line-height: 1.9;
  white-space: pre-wrap; word-break: break-word;
  background: var(--color-neutral-900);
  border-left: 3px solid var(--color-accent);
}

.reason-list { margin: 0; padding-left: var(--space-4); font-size: 13px; line-height: 1.7; }
.reason-list li { margin-bottom: var(--space-1); }

/* 原始描述: 以引用的樣子呈現使用者自己說過的話, 與系統產生的白話
   說明 (.narrative) 區隔開, 免得兩段文字看起來像同一個來源
   (交易策略與網格策略共用) */
.source-description {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: 13px; line-height: 1.8;
  white-space: pre-wrap; word-break: break-word;
  color: var(--color-neutral-200);
  background: var(--color-neutral-900);
  border-left: 3px solid var(--color-divider);
}
/* 定投設定的即時範例: 交易策略、手動進場與持倉明細共用 (_dca_fields.html) */
.dca-example {
  padding: var(--space-3) var(--space-4);
  font-size: 13px; line-height: 1.8;
  background: var(--color-neutral-900);
  border-left: 3px solid var(--color-accent);
  word-break: break-word;
}
.dca-example p { margin: 0 0 var(--space-2); }
.dca-example p:last-child { margin-bottom: 0; }
.dca-example .reason-list { margin-bottom: var(--space-2); }

/* 合約風險試算: 手動進場與交易策略頁共用 (_futures_risk_panel.html);
   以虧損色標示左緣, 提醒這一區談的是「可能賠多少」 */
.futures-risk {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-900);
  border-left: 3px solid var(--color-loss);
}
.futures-risk-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.futures-risk-summary li { color: var(--color-text); }

/* 指標方塊: 回測績效與自動交易額度共用 */
.stat-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.stat-box {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3); background: var(--color-neutral-900);
  border: 1px solid var(--color-divider);
}
.stat-label { font-size: 11px; color: var(--color-muted); letter-spacing: 0.04em; }
.stat-value { font-size: 18px; font-weight: 700; font-family: var(--font-heading); }
.stat-good { color: var(--color-gain); }
.stat-bad { color: var(--color-loss); }

/* 清單操作欄位裡的小型下拉, 高度需與 .btn-sm 對齊 */
.input-sm { width: auto; min-width: 104px; padding: var(--space-1) var(--space-2); font-size: 12px; }

/* 兩欄表單: 桌機並排, 平板以下自動收成單欄 */
.form-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ══════════════════════════════════════════════════════════════════════
   Data table - 以 CSS Grid 取代 <table> 的清單元件.
   結構: .data-scroll > .data-table > (.data-head | .data-body > .data-row)
   - 欄數由各頁以 --data-columns 宣告, 列使用 subgrid 共用同一組欄寬.
   - 版面由 JS 依實際寬度決定 (refreshDataTable): 表格放得下就維持表格
     對齊, 放不下 (會需要橫向捲動而藏住欄位) 就加上 .is-card 轉為卡片;
     以內容寬度判斷而非固定斷點, 欄位多的清單在筆電也不會被截斷.
     卡片的欄位標籤由 JS 依表頭帶入, 表頭文字只需維護一份.
   - .data-cell-primary: 卡片標題 (不顯示標籤, 獨佔整行)
   - .data-cell-actions: 操作按鈕 (不顯示標籤, 獨佔整行, 無內容時隱藏)
   - .data-table-numeric: 除第一欄外靠右對齊, 適合第一欄之後全是數字的清單
   - .data-cell-num: 單一欄靠右對齊 (表頭與資料格都要加), 適合文字與數字
     混排的清單, 例如以「交易所 / 市場 / 標的」開頭的交易清單
   ══════════════════════════════════════════════════════════════════════ */
.data-scroll { overflow-x: auto; min-width: 0; }
.data-table {
  --data-columns: 1;
  display: grid; font-size: 14px;
  grid-template-columns: repeat(var(--data-columns), minmax(max-content, 1fr));
}
.data-body { display: contents; }
.data-head, .data-row {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
}
.data-head > *, .data-row > * { padding: var(--space-2); white-space: nowrap; }
.data-head { border-bottom: 2px solid var(--color-divider); }
.data-head > * {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.data-row { border-bottom: 1px solid var(--color-divider); }
.data-row:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.data-row.is-clickable { cursor: pointer; }
.data-cell-primary { font-weight: 600; }
.data-cell-wrap { white-space: normal !important; overflow-wrap: anywhere; }
.data-table-numeric .data-head > *:not(:first-child),
.data-table-numeric .data-row > *:not(:first-child) { text-align: right; }
.data-head > .data-cell-num, .data-row > .data-cell-num { text-align: right; }

/* 狀態列 (載入中 / 沒有資料): 接在表頭下方跨滿整行, 讓使用者在等待
   與空清單時仍看得到這份清單有哪些欄位 (見 utils.js renderDataRows) */
.data-body > .data-status {
  grid-column: 1 / -1; padding: var(--space-8) var(--space-2);
  text-align: center; color: var(--color-muted);
}

.data-table.is-card { display: flex; flex-direction: column; gap: var(--space-3); }
.data-table.is-card .data-head { display: none; }
.data-table.is-card .data-row {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  align-items: start; gap: var(--space-3) var(--space-4); padding: var(--space-3);
  background: var(--color-bg); border: 1px solid var(--color-divider);
}
.data-table.is-card .data-row > * {
  padding: 0; min-width: 0; text-align: left; white-space: normal; overflow-wrap: anywhere;
}
.data-table.is-card .data-row > *::before {
  content: attr(data-label); display: block; margin-bottom: 2px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted);
}
.data-table.is-card .data-row > .data-cell-primary,
.data-table.is-card .data-row > .data-cell-actions { grid-column: 1 / -1; }
/* 卡片標題一律排在最前面: 標題欄不一定是第一欄 (交易清單以交易所開頭,
   標的才是標題), 只調整顯示順序, 欄位標籤仍依 DOM 順序對應表頭 */
.data-table.is-card .data-row > .data-cell-primary { font-size: 16px; order: -1; }
.data-table.is-card .data-row > .data-cell-primary::before,
.data-table.is-card .data-row > .data-cell-actions::before { display: none; }
.data-table.is-card .data-row > .data-cell-actions:empty { display: none; }
/* 手機寬度固定雙欄, 避免 auto-fill 退化成單欄讓卡片變得過長 */
@media (max-width: 639.98px) {
  .data-table.is-card .data-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

/* - dialog - */
.dialog-backdrop {
  position: fixed; inset: 0; display: none; place-items: center; z-index: 50;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 65%, transparent);
}
.dialog-backdrop.open { display: grid; }
.dialog {
  width: min(560px, 100%); max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border: 2px solid var(--color-divider);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog.dialog-lg { width: min(900px, 100%); }
/* 對話框本身負責捲動, 內容一律維持原高度: flex 欄位的子層預設可被壓縮,
   帶 overflow 的清單 (.data-scroll) 會被壓成只剩幾列高、還得各自捲動的小框 */
.dialog > * { flex-shrink: 0; }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; margin: 0; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.dialog-actions-start { justify-content: flex-start; }
.dialog-section {
  display: flex; flex-direction: column; gap: var(--space-3);
  border-top: 2px solid var(--color-divider); padding-top: var(--space-4); margin-top: var(--space-4);
}
.dialog-section > h6 { margin: 0; }

/* 共用提示 / 確認視窗 (static/js/common/dialog.js 動態建立).
   會疊在頁面既有的對話框之上 (例如策略編輯視窗內的二次確認),
   因此 z-index 必須高於一般 .dialog-backdrop */
.dialog-backdrop-alert { z-index: 60; }
.dialog-alert { width: min(420px, 100%); }
.dialog-message { font-size: 14px; line-height: 1.7; white-space: pre-line; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Shell - 側邊導覽 (220px) + 主內容區, 取自 docs/fe 原型的共用畫面結構.
   平板以下側邊導覽收合為頂部列, 由漢堡按鈕展開選單 (static/js/common/nav.js).
   ══════════════════════════════════════════════════════════════════════ */
.shell { min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0, 1fr); font-size: 14px; }
.shell-nav {
  position: sticky; top: 0; align-self: start; height: 100vh;
  border-right: 2px solid var(--color-divider); display: flex; flex-direction: column; padding: var(--space-4) 0;
}
.shell-nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-4) var(--space-4); border-bottom: 2px solid var(--color-divider); margin-bottom: var(--space-2);
}
.shell-nav-brand {
  display: block; min-width: 0; font-family: var(--font-heading);
  font-weight: var(--font-heading-weight); font-size: 16px;
  color: var(--color-text); text-decoration: none;
}
/* 品牌標誌為透明底向量圖 (符號 + 字樣), 寬度跟著導覽欄縮放, 高度自動維持比例 */
.shell-nav-logo { display: block; width: 168px; max-width: 100%; height: auto; }
.shell-nav-toggle {
  display: none; width: 40px; height: 40px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-divider); color: var(--color-text);
}
/* 漢堡圖示: 中線 + 前後兩條偽元素, 展開時轉為 X, 讓使用者知道再點一次可關閉 */
.shell-nav-toggle-icon, .shell-nav-toggle-icon::before, .shell-nav-toggle-icon::after {
  display: block; width: 18px; height: 2px; background: currentColor; transition: transform 0.15s ease;
}
.shell-nav-toggle-icon { position: relative; }
.shell-nav-toggle-icon::before, .shell-nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.shell-nav-toggle-icon::before { top: -6px; }
.shell-nav-toggle-icon::after { top: 6px; }
.shell-nav.open .shell-nav-toggle-icon { background: transparent; }
.shell-nav.open .shell-nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.shell-nav.open .shell-nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }
.shell-nav-list { display: flex; flex-direction: column; flex: 1; }
/* 管理功能固定在導覽最下方, 與一般會員功能區隔 */
.shell-nav-group { display: flex; flex-direction: column; margin-top: auto; padding-top: var(--space-3); border-top: 2px solid var(--color-divider); }
.shell-nav-group-title { padding: var(--space-2) var(--space-4); font-size: 11px; letter-spacing: 0.1em; color: var(--color-muted); }
.shell-nav-item {
  display: block; padding: var(--space-3) var(--space-4); font-size: 14px;
  color: var(--color-text); text-decoration: none; border-left: 3px solid transparent;
}
.shell-nav-item:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.shell-nav-item.active {
  border-left-color: var(--color-accent); background: var(--color-surface); color: var(--color-accent);
}
.shell-main { display: flex; flex-direction: column; min-width: 0; }
.shell-header {
  padding: var(--space-4) var(--page-gutter); border-bottom: 2px solid var(--color-divider);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.shell-header h2 { margin: 0; }
.shell-header-right { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.shell-content { padding: var(--page-gutter); flex: 1; min-width: 0; }
.shell-section + .shell-section { margin-top: var(--space-8); }
.shell-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.shell-toolbar h3 { margin: 0; }
/* 工具列中的下拉選單 (例如交易所切換) 依內容決定寬度, 不撐滿整行 */
.toolbar-select { width: auto; min-width: 150px; }
.shell-pagination { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-size: 13px; }
.shell-note { margin: var(--space-3) 0 0; font-size: 12px; color: var(--color-muted); }
.shell-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.shell-summary-item { min-width: 0; padding: var(--space-2) var(--space-3); background: var(--color-bg); border: 1px solid var(--color-divider); }
.shell-summary-item .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-1); color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.shell-summary-item .value { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
/* 摘要欄位一多就必須分區: 十幾格數字平鋪成一片時, 使用者得逐格掃讀
   才找得到要看的那一個. 標題跨滿整行, 讓同性質的數字自成一個閱讀單位 */
.shell-summary-section { grid-column: 1 / -1; margin-top: var(--space-3); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-divider); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.shell-summary-section:first-child { margin-top: 0; }
/* 長文字欄位 (如備註) 不受三欄切分, 獨佔整行才不會被截斷得難以閱讀 */
.shell-summary-item.is-wide { grid-column: 1 / -1; }

/* - 右上角使用者選單: 頭像圖示點擊後展開錢包資訊與登出 -
   trigger 刻意做成有邊框的膠囊按鈕 (而非純文字), 讓使用者一眼就能
   認出這是可點擊的選單入口, 並與左側內容之間用邊框做視覺分隔. */
.user-menu { position: relative; padding-left: var(--space-4); border-left: 1px solid var(--color-divider); }
.user-menu-trigger {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: 2px solid var(--color-divider);
  padding: 4px var(--space-3) 4px 4px; cursor: pointer;
  font-family: inherit; color: var(--color-text);
  box-shadow: var(--shadow-lg);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.user-menu-trigger:hover { background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface)); }
.user-menu-trigger[aria-expanded="true"] { border-color: var(--color-accent); }
.user-menu-name { font-size: 13px; font-weight: 600; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--color-accent); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px;
}
.user-menu-caret { font-size: 10px; opacity: 0.6; transition: transform 0.15s ease; }
.user-menu-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }
.user-menu-dropdown {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 40;
  display: none; flex-direction: column; min-width: 180px; padding: var(--space-1) 0;
  border: 2px solid var(--color-divider); background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.user-menu-dropdown.open { display: flex; }
.user-menu-link {
  display: block; width: 100%; padding: var(--space-3) var(--space-4); font-size: 13px; text-align: left;
  color: var(--color-text); text-decoration: none;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.user-menu-link:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.user-menu-link-danger { color: var(--color-accent-300); }
.user-menu-divider { height: 1px; margin: var(--space-1) 0; background: var(--color-divider); }

/* ══════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  :root { --page-gutter: var(--space-6); }

  /* 導覽列只佔自身高度, 剩下的給內容: 未指定列高時內容較短的頁面會把
     min-height 多出的空間平分給導覽列, 在頂部列與標題之間留下一段空白 */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .shell-nav {
    z-index: 30; height: auto; padding: 0;
    border-right: 0; border-bottom: 2px solid var(--color-divider); background: var(--color-bg);
  }
  .shell-nav-bar { padding: var(--space-2) var(--page-gutter); border-bottom: 0; margin-bottom: 0; }
  /* 頂部列高度有限, 標誌縮小才不會把漢堡按鈕擠出畫面 */
  .shell-nav-logo { width: 124px; }
  .shell-nav-toggle { display: inline-flex; }
  /* 選單以浮層展開, 不推擠下方內容, 關閉後頁面位置不會跳動 */
  .shell-nav-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding: var(--space-2) 0; background: var(--color-bg);
    border-bottom: 2px solid var(--color-divider); box-shadow: var(--shadow-lg);
  }
  .shell-nav.open .shell-nav-list { display: flex; }
  .shell-nav-item { padding: var(--space-3) var(--page-gutter); }
  .shell-nav-group { margin-top: var(--space-2); }
  .shell-nav-group-title { padding-inline: var(--page-gutter); }
}

@media (max-width: 639.98px) {
  :root { --page-gutter: var(--space-4); }

  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }

  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .narrative { padding: var(--space-3); font-size: 13px; }
  .shell-header { padding-block: var(--space-3); }
  .shell-header-right { gap: var(--space-3); }
  .shell-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell-pagination { justify-content: space-between; }
  .shell-pagination > span { flex-basis: 100%; }

  /* 手機只保留頭像, 名稱改在下拉選單中辨識, 讓標題有足夠空間 */
  .user-menu { padding-left: 0; border-left: 0; }
  .user-menu-name { display: none; }
  .user-menu-trigger { padding-right: var(--space-2); }

  /* 頁籤獨佔整行, 各選項平均分配寬度 */
  .hub-tabs { display: flex; width: 100%; }
  .hub-tabs .seg-opt { flex: 1; justify-content: center; padding: 7px 6px; }

  .dialog-backdrop { padding: 0; }
  .dialog, .dialog.dialog-lg {
    width: 100%; height: 100%; max-height: 100vh; max-height: 100dvh;
    padding: var(--space-4); border: 0;
  }
  .dialog-actions .btn { flex: 1; }
  /* 提示視窗只有一兩行字, 不跟著一般對話框變全螢幕:
     為了一句話佔滿整個畫面, 反而看不出這只是一則提示 */
  .dialog-backdrop-alert { padding: var(--space-4); }
  .dialog.dialog-alert {
    width: 100%; height: auto; max-height: 88dvh;
    padding: var(--space-5); border: 2px solid var(--color-divider);
  }
  /* 全螢幕對話框內容很長, 底部操作列固定在畫面下緣, 不必捲到最後才能關閉 */
  .dialog:not(.dialog-alert) > .dialog-actions:last-child,
  .dialog > form > .dialog-actions:last-child {
    position: sticky; bottom: calc(-1 * var(--space-4)); z-index: 1;
    margin: var(--space-2) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface); border-top: 2px solid var(--color-divider);
  }
  .shell-pagination .btn { flex: 1; padding-block: var(--space-2); }

  /* 指標方塊在手機維持兩欄: 單欄會讓整段績效需要捲很久才看完 */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: 16px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .input-sm { width: 100%; }
}

/* 進場條件 (common/condition_editor.js, 策略與網格策略共用):
   每一條是一張獨立的小卡, 讓使用者一眼看出由幾個條件組成,
   而不是一長串攤平的欄位 */
.condition-list {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-4);
}
.condition-item {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-neutral-900);
  border: 1px solid var(--color-divider);
}
.condition-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-3);
}
.condition-title { font-size: 13px; font-weight: 600; }

/* 單欄表單的分區 (交易策略、網格交易共用): 各區塊之間以分隔線
   區隔, 讓使用者由上而下一段一段填完、讀完再決定 */
.preview-block { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.preview-block:last-of-type { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
/* 區塊標題: 放大並加上強調色左緣, 讓使用者捲動時一眼分辨目前在
   哪一個區塊; 維持 Modernist 的方正線條, 不用圓角或底色 */
.preview-block h4 {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  font-size: 18px;
  border-left: 3px solid var(--color-accent);
}
/* 區塊內相鄰元素的留白.
   一律限定為直接子層: 用後代選擇器會連 .form-grid 裡的欄位一起加上
   外距, 讓同一列的欄位上緣對不齊 */
.preview-block > .field + .field,
.preview-block > .form-grid + .field,
.preview-block > .field + .form-stack { margin-top: var(--space-3); }
.preview-block > .checkbox-row { margin-top: var(--space-3); }

/* 策略檢視 (交易策略、網格策略共用): 每個設定區塊的唯讀呈現以
   .shell-summary-grid 列出「項目: 數值」, 不出現任何輸入框, 與編輯
   畫面一眼就能區分. 區塊內接在數值後面的說明與清單要留出間距 */
.preview-block > .view-grid ~ .hint,
.view-list { margin-top: var(--space-3); }