:root{
  --bg: #0b1020;
  --fg: #e6f0ff;
  --muted: #8aa0c2;
  --card: #141b2e;
}

*{ box-sizing: border-box; }
body{ margin:0; background: var(--bg); color: var(--fg); font: 16px/1.4 system-ui; }
.container{ max-width: 1100px; margin: 24px auto; padding: 0 16px; }

/* 卡片 & 排版 */
.card{ background: var(--card); padding: 16px; border-radius: 12px; margin: 12px 0; }
label{ display:block; margin: 8px 0; }
input, select{ width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #344; background:#0e1526; color: var(--fg); }

.mt-12{ margin-top:12px; } .mt-16{ margin-top:16px; }
.mt-8{ margin-top:8px; } .mt-6{ margin-top:6px; }
.m0{ margin:0; }

.row{ display:flex; gap: 8px; }
.ai-center{ align-items: center; }
.spacer{ flex:1; }
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }

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

/* 按鈕樣式（字體繼承、手指游標、hover/active） */
.btn{
  font: inherit;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: #22314d;
  color: #cfe3ff;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  user-select: none;
}
.btn:hover{ box-shadow: 0 4px 10px rgba(0,0,0,.25); background:#2a3d61; }
.btn:active{ transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.btn-primary{ background: #4aa3ff; color:#001; }
.btn-primary:hover{ background:#5eb0ff; }
.btn-ghost{ background: transparent; color: var(--fg); border:1px solid #334; }

/* 狀態膠囊 */
.pill{ padding:4px 8px; border-radius:999px; background:#2a3552; color:#cfe; }
.pill.ok{ background:#1e7a46; color:#eafff2; }
.pill.warn{ background:#7a3a1e; color:#ffeedd; }
.muted{ color: var(--muted); }

/* 進度條 */
.progress{ background:#1a2336; height:10px; border-radius:6px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:#4aa3ff; width:0%; }

/* 大數字 */
.big{ font-size: 28px; font-weight: 700; }

/* 槓桿控件 */
.lev-row{ display:flex; align-items:center; gap:8px; }
.lev-btn{
  width:32px; height:32px; border-radius:8px; border:1px solid #334;
  background:#1a2336; color:#cfe; cursor:pointer;
  transition: transform .05s ease, background .15s ease;
}
.lev-btn:hover{ background:#22314d; }
.lev-btn:active{ transform: translateY(1px); }
.lev-range{ flex: 1; }
.lev-num{ width: 90px; }

/* 進階風控標題與勾選距離 */
.adv-head { gap: 12px; }
#useAdv { margin-right: 6px; }

/* Modal */
.modal-mask{
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display:none; align-items: center; justify-content: center; z-index: 999;
}
.modal{
  background: var(--card); padding: 20px; border-radius: 12px; width: min(560px, 92vw);
}
.modal h3{ margin-top: 0; }
.actions{ gap: 16px; } /* 確認/取消按鈕間距加大 */

/* 交易統計（三卡） */
.stat-grid{ grid-template-columns: repeat(3, 1fr); }
.stat-card{ display:flex; flex-direction:column; gap:8px; }
.stat-title{ font-size:14px; color: var(--muted); }
.stat-num{ font-size: 30px; font-weight: 800; line-height: 1.1; }

/* 小徽章樣式 */
.badge {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  cursor: default;
}
.badge.ok   { background: #2ecc71; } /* 綠色 */
.badge.warn { background: #f39c12; } /* 黃色 */
.badge.crit { background: #e74c3c; } /* 紅色 */


/* === Performance cards responsive grid === */
.perf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 768px) {
  .perf-grid {
    grid-template-columns: 1fr; /* 手機改為直向一欄 */
  }
}

/* === 獲利金額顏色 === */
.big.pos  { color:#e74c3c; } /* 正：紅 */
.big.neg  { color:#2ecc71; } /* 負：綠*/
.big.zero { opacity:.85;   } /* 0：灰 */

/* ====== 新增：策略模板 / 7日演化 區塊的樣式 ====== */

/* 兩欄排版（手機改一欄） */
.metrics-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 768px){
  .metrics-grid{ grid-template-columns: 1fr; }
}

/* KPI 三欄並齊、置中顯示 */
.kpi-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.kpi{ 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  padding:12px; 
  background:#101729; 
  border:1px solid #24324d; 
  border-radius:10px; 
}
.kpi-label{ font-size:13px; color:var(--muted); }
.kpi-number{ font-size:24px; font-weight:800; line-height:1.1; }

/* 小圓點徽章：不縮、不換行（避免被擠壓） */
.badge{
  display:inline-block;
  width:12px; height:12px;
  border-radius:50%;
  margin-left:8px;
  vertical-align:middle;
  cursor:default;
  white-space:nowrap;
  flex:0 0 auto;
}
.badge.ok   { background:#2ecc71; }
.badge.warn { background:#f39c12; }
.badge.crit { background:#e74c3c; }

/* 圖例 */
.legend{
  display:flex; gap:12px; align-items:center;
  font-size:12px; color:var(--muted);
}
.legend-item{ display:flex; align-items:center; gap:6px; }
.legend-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:#888;
}
.legend-dot.mutate{ background:#6fa8dc; } /* 藍 */
.legend-dot.cross { background:#a3d977; } /* 綠 */
.legend-dot.freeze{ background:#ffb366; } /* 橘 */

/* 讓 canvas 不會模糊（搭配 JS 裡的 DPR 調整） */
canvas{ width:100%; height:auto; display:block; }

/* === 交易紀錄表格：貼齊卡片左右邊 === */
#tradesBlock .mt-12 {
  overflow: hidden;              /* 避免出現底部橫向卷軸 */
}

#tradesTable {
  border-collapse: collapse;
  width: calc(100% + 32px);      /* 原寬 + 左右各 16px */
  transform: translateX(-16px);  /* 向左位移 16px，剛好貼齊卡片左邊 */
}

#tradesTable th,
#tradesTable td {
  padding: 8px;
  text-align: center;
}

/* 交易統計三卡：內容水平置中 */
.stat-grid .stat-card{
  align-items: center;     /* 水平置中（因為是 flex、直向排列） */
  justify-content: center; /* 垂直置中（可選） */
  text-align: center;      /* 文字置中 */
}

/* 標題與數字都置中保險 */
.stat-grid .stat-card .stat-title,
.stat-grid .stat-card .stat-num{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 讓三卡高度更一致（可選） */
.stat-grid .stat-card{ min-height: 100px; }

/* === 績效三卡：內容水平置中（不影響其他卡片） === */
.perf-grid > .card{
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 垂直置中，可留可拿掉 */
  align-items: center;       /* 水平置中 */
  text-align: center;        /* 文字置中 */
  min-height: 140px;         /* 視覺一致（可調） */
}

/* 標題、數字、補充文字的間距微調（可選） */
.perf-grid > .card h3{ margin: 0 0 8px; }
.perf-grid > .card .big{ margin: 4px 0; }
.perf-grid > .card .muted{ margin-top: 6px; }

/* 手機：交易紀錄表格改成橫向捲動，避免內容被擠壓 */
@media (max-width: 768px){
  /* 外層容器允許水平捲動，左右邊界收斂一點 */
  #tradesBlock .mt-12{
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: -12px;   /* 手機邊距較窄，別用 -16 */
    margin-right: -12px;
  }

  /* 表格不要再用位移撐滿，回歸自然寬度並設定最小寬 */
  #tradesTable{
    transform: none;
    width: auto;
    min-width: 720px;     /* 可改 640~760 視情況 */
    border-collapse: collapse;
  }

  /* 儲存格不換行，保留單行數字與時間 */
  #tradesTable th,
  #tradesTable td{
    white-space: nowrap;
    padding: 10px 8px;    /* 手機稍微加高行距便於點選 */
    text-align: center;
  }
}

/* 買多 / 買空 標籤底色（半透明柔化版） */
.trade-side{
  display:inline-block;
  padding:2px 8px;
  border-radius:6px;
  font-weight:600;
  min-width:42px;
  text-align:center;
  color:#fff;
}

/* 粉紅底（買多） */
.trade-long{
  background: rgba(252, 162, 190, 0.3);  /* 原 #fca2be，加透明度 30% */
  color: rgb(255, 170, 185);             /* 字色偏亮粉，搭配深背景 */
}

/* 粉綠底（買空） */
.trade-short{
  background: rgba(196, 248, 217, 0.3);  /* 原 #c4f8d9，加透明度 30% */
  color: rgb(170, 255, 200);             /* 字色偏亮綠，柔和對比 */
}

/* 表格版：目前動作 */
.now-table {
  width: 100%;
  border-collapse: collapse;
}
.now-table th,
.now-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #24324d;
}
.now-table th {
  width: 120px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.now-table td {
  text-align: left; /* 與交易紀錄一致 */
}

/* 等寬數字（價格/金額更漂亮） */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* 動作徽章：買多 / 買空 / 觀望（沿用你 JS 的 badgeAction 輸出） */
.badge-act{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.02em;
}
.badge-act.long  { background: rgba(252,162,190,.25); color:#ffb7c7; } /* 買多：粉紅 */
.badge-act.short { background: rgba(196,248,217,.25); color:#b8ffd6; } /* 買空：粉綠 */
.badge-act.hold  { background: rgba(155,166,190,.20); color:#cbd6ee; } /* 觀望：灰藍 */

/* PnL 顏色（正紅負綠，0 灰）－對應你 JS 的 pnl-pos/neg/zero */
.pnl-pos  { color:#e74c3c; }
.pnl-neg  { color:#2ecc71; }
.pnl-zero { opacity:.85; }

/* 讓大字在表格裡也不突兀 */
.now-table .big { font-size: 20px; }
@media (max-width: 560px){
  .now-table th { width: 90px; }
  .now-table .big { font-size: 18px; }
}