/* ZenStock Live — 暗色科技終端主題(dark trading-terminal),保留金色品牌強調;手機優先、自足不依賴 Bootstrap。 */
:root {
  --zs-bg: #090b11; --zs-surface: #171d2a; --zs-surface-2: #232c3e;
  --zs-line: rgba(165,190,235,.24); --zs-line-soft: rgba(165,190,235,.12);
  --zs-text: #f2f5fb; --zs-text-dim: #bcc7dc; --zs-text-faint: #8a97b0;
  --zs-accent: #f6b846; --zs-accent-soft: #ffcc66; --zs-accent-dim: rgba(246,184,70,.6);
  --zs-up: #ff6055; --zs-down: #2ddc94;                 /* 台股:漲紅、跌綠(暗底加亮) */
  --zs-radius: 13px;
  --zs-shadow: 0 6px 22px rgba(0,0,0,.6), 0 0 0 1px rgba(165,190,235,.05);
  --zs-glow: 0 0 20px rgba(246,184,70,.32);
  --zs-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--zs-text);
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(246,184,70,.06), transparent 55%),
    radial-gradient(rgba(165,190,235,.035) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--zs-bg);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
a { color: var(--zs-accent); text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--zs-text-dim); }
.faint { color: var(--zs-text-faint); }
.up { color: var(--zs-up); } .down { color: var(--zs-down); }
.mono { font-family: var(--zs-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* 版面:手機優先單欄,桌機置中 */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; }
header.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10,13,19,.72); backdrop-filter: blur(10px) saturate(1.3);
  border-bottom: 1px solid var(--zs-line); box-shadow: 0 1px 0 rgba(242,178,60,.12);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; margin-bottom: 18px;
}
header.topbar .brand { font-weight: 800; color: var(--zs-accent); letter-spacing: .5px; text-shadow: 0 0 16px rgba(242,178,60,.45); }
header.topbar .brand small { color: var(--zs-text-faint); font-weight: 400; margin-left: 6px; text-shadow: none; }
.userchip { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--zs-text-dim); }
.icon-btn { line-height: 0; }
.icon-btn svg { display: block; }

/* 卡片 */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--zs-surface);
  border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius); box-shadow: var(--zs-shadow);
  padding: 16px; margin-bottom: 14px;
}
.card.click { cursor: pointer; transition: transform .1s, box-shadow .18s, border-color .18s; }
.card.click:hover { transform: translateY(-1px); border-color: var(--zs-accent-dim); box-shadow: var(--zs-glow), var(--zs-shadow); }

/* 按鈕 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--zs-line); background: var(--zs-surface-2); color: var(--zs-text);
  padding: 10px 16px; border-radius: 10px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: .12s;
}
.btn:hover { background: #232a3a; border-color: var(--zs-accent-dim); }
.btn.primary { background: linear-gradient(180deg, var(--zs-accent-soft), var(--zs-accent)); border-color: var(--zs-accent); color: #14100a; box-shadow: var(--zs-glow); }
.btn.primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, var(--zs-accent-soft), var(--zs-accent)); }
.btn.block { width: 100%; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--zs-text-dim); }
.btn.ghost:hover { background: var(--zs-surface-2); color: var(--zs-text); }
.btn.google { background: #fff; border-color: transparent; color: #3c4043; font-weight: 600; }
.btn.google svg { width: 18px; height: 18px; }

/* 徽章 */
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.badge.buy { background: rgba(255,83,71,.16); color: var(--zs-up); }
.badge.sell { background: rgba(35,209,139,.16); color: var(--zs-down); }
.badge.st { background: var(--zs-surface-2); color: var(--zs-text-dim); border: 1px solid var(--zs-line); }
.badge.accent { background: rgba(242,178,60,.16); color: var(--zs-accent); }

/* 總覽數字 */
.totals { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 6px; }
.stat { padding: 4px 2px; }
.stat .k { font-size: 12px; color: var(--zs-text-faint); }
.stat .v { font-size: 22px; font-weight: 700; font-family: var(--zs-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rowline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pending-banner {
  background: linear-gradient(180deg, rgba(242,178,60,.12), rgba(242,178,60,.04));
  border: 1px solid var(--zs-accent-dim);
  border-radius: var(--zs-radius); padding: 12px 16px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* 表單 */
label.fld { display: block; margin-bottom: 14px; }
label.fld .lab { font-size: 13px; color: var(--zs-text-dim); margin-bottom: 5px; display: block; }
input.inp, select.sel {
  width: 100%; padding: 11px 12px; border: 1px solid var(--zs-line); border-radius: 10px;
  background: #0c0f16; color: var(--zs-text); font-size: 15px;
}
input.inp:focus, select.sel:focus { outline: 2px solid var(--zs-accent-dim); border-color: var(--zs-accent); }
select.sel option { background: var(--zs-surface); }

/* Modal */
.overlay { position: fixed; inset: 0; background: rgba(3,5,9,.66); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; overflow-y: auto; }
/* 手機/矮螢幕:內容過長時 modal 自身捲動,底部按鈕(取消/確認)才不會被推出畫面外點不到 */
.modal { background: var(--zs-surface); border: 1px solid var(--zs-line); border-radius: var(--zs-radius); box-shadow: var(--zs-shadow); width: 100%; max-width: 460px; padding: 22px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal h3 { margin: 0 0 16px; }

.center-screen { min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
h1.hero { color: var(--zs-accent); margin: 0 0 4px; text-shadow: var(--zs-glow); letter-spacing: .5px; }
.section-title { font-size: 12px; color: var(--zs-text-faint); margin: 22px 0 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.empty { color: var(--zs-text-faint); text-align: center; padding: 20px; }
.spinner { color: var(--zs-text-faint); text-align: center; padding: 30px; }
hr.soft { border: none; border-top: 1px solid var(--zs-line-soft); margin: 14px 0; }

/* ── 首頁儀表板:KPI 磚 + 圖表 ─────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 14px; }
.kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%), var(--zs-surface);
  border: 1px solid var(--zs-line); border-radius: var(--zs-radius); padding: 12px 14px 12px 16px;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--zs-accent); box-shadow: var(--zs-glow); opacity: .8; }
.kpi.up::before { background: var(--zs-up); box-shadow: 0 0 18px rgba(255,83,71,.35); }
.kpi.down::before { background: var(--zs-down); box-shadow: 0 0 18px rgba(35,209,139,.35); }
.kpi .k { font-size: 10px; color: var(--zs-text-faint); letter-spacing: .1em; text-transform: uppercase; }
.kpi .v { font-family: var(--zs-mono); font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.kpi .v.sm { font-size: 18px; }

.chart-card { background: var(--zs-surface); border: 1px solid var(--zs-line); border-radius: var(--zs-radius); box-shadow: var(--zs-shadow); padding: 14px 16px; margin-bottom: 12px; }
.chart-title { font-size: 11px; color: var(--zs-text-faint); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; font-weight: 700; }
.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut-wrap svg { flex: none; }
.legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.legend .lg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.legend .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; box-shadow: 0 0 8px currentColor; }
.legend .lg .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zs-text-dim); }
.legend .lg .pc { font-family: var(--zs-mono); color: var(--zs-text); font-weight: 700; }

.barrow { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12px; }
.barrow:last-child { margin-bottom: 0; }
.barrow .nm { width: 92px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zs-text-dim); }
.bartrack { flex: 1; height: 9px; background: var(--zs-surface-2); border-radius: 5px; overflow: hidden; }
.barfill { height: 100%; border-radius: 5px; }
.barrow .pct { width: 62px; flex: none; text-align: right; font-family: var(--zs-mono); font-weight: 700; }

/* 計畫卡(資料更豐富) */
.plan-card { display: block; }
.plan-card .plan-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-card .plan-head strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-eq { font-family: var(--zs-mono); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.plan-ret { font-family: var(--zs-mono); font-size: 17px; font-weight: 800; }
.retbar { height: 6px; background: var(--zs-surface-2); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.retbar .f { height: 100%; border-radius: 3px; }
.plan-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 10px; }
.plan-metrics .m .k { font-size: 10px; color: var(--zs-text-faint); }
.plan-metrics .m .v { font-family: var(--zs-mono); font-size: 13px; font-weight: 700; margin-top: 1px; }
.plan-chips { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }

/* 儀表板動作列(一鍵買/賣,兩顆等寬) */
.dash-actions { display: flex; gap: 8px; margin: 12px 0; }
.dash-actions .btn { flex: 1; }
.btn.sell { background: linear-gradient(180deg, #33e6a0, var(--zs-down)); border-color: var(--zs-down); color: #06251a; box-shadow: 0 0 18px rgba(35,209,139,.3); }
.btn.sell:hover { filter: brightness(1.06); background: linear-gradient(180deg, #33e6a0, var(--zs-down)); }

/* 一鍵執行:確認清單 */
.exec-list { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; margin-bottom: 4px; }
/* 矮螢幕:取消清單自身上限,交給 modal 單一捲動(避免內外雙層捲動、按鈕仍被夾在畫面外) */
@media (max-height: 820px) { .exec-list { max-height: none; overflow-y: visible; } }
.exec-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--zs-line); border-radius: 10px; background: var(--zs-surface-2); }
.exec-in { display: flex; flex-direction: column; gap: 2px; flex: none; }
.exec-in span { font-size: 10px; color: var(--zs-text-faint); }
.exec-in input.inp { width: 76px; padding: 6px 8px; font-size: 14px; }

/* 計畫分頁(segmented control,手機好點) */
.ptabs { display: flex; margin: 12px 0 14px; border: 1px solid var(--zs-line); border-radius: 12px; overflow: hidden; background: var(--zs-surface); }
.ptabs .ptab { flex: 1; text-align: center; padding: 11px 6px; font-size: 14px; font-weight: 600; color: var(--zs-text-dim); border-right: 1px solid var(--zs-line); }
.ptabs .ptab:last-child { border-right: none; }
.ptabs .ptab:hover { background: var(--zs-surface-2); }
.ptabs .ptab.on { background: linear-gradient(180deg, var(--zs-accent-soft), var(--zs-accent)); color: #14100a; }

/* 建立計劃:篩選列 + 策略卡片挑選器 */
.fbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.fgroup { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--zs-line);
  background: var(--zs-surface); color: var(--zs-text-dim);
}
.fchip:hover { background: var(--zs-surface-2); }
.fchip.on { background: linear-gradient(180deg, var(--zs-accent-soft), var(--zs-accent)); border-color: var(--zs-accent); color: #14100a; font-weight: 700; }

.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pf-card {
  font: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--zs-surface);
  border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius); box-shadow: var(--zs-shadow);
  padding: 9px 12px 8px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pf-card:hover { border-color: var(--zs-accent-dim); box-shadow: var(--zs-glow), var(--zs-shadow); }
.pf-card.sel { border-color: var(--zs-accent); box-shadow: 0 0 0 1px var(--zs-accent), var(--zs-glow); }
.pf-top { display: flex; align-items: center; gap: 6px; }
.pf-lvl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--zs-text); }
.pf-lvl i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; box-shadow: 0 0 8px var(--c); }
.pf-kind { font-size: 11px; color: var(--zs-text-dim); background: var(--zs-surface-2); border-radius: 5px; padding: 1px 6px; }
.pf-kind.single { color: var(--zs-text-faint); }
.pf-star { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--zs-accent); border: 1px solid var(--zs-accent); border-radius: 5px; padding: 1px 6px; }
.pf-row { display: flex; align-items: baseline; gap: 14px; }
.pf-cell { display: flex; flex-direction: column; line-height: 1.1; }
.pf-cell b { font-size: 15px; font-weight: 700; font-family: var(--zs-mono); font-variant-numeric: tabular-nums; }
.pf-cell b.up { color: var(--zs-up); }
.pf-cell span { font-size: 10px; color: var(--zs-text-faint); }
.pf-cell.oss { margin-right: 2px; }
.pf-cell.oss b { font-size: 21px; font-weight: 800; color: var(--zs-accent); }

/* ── 逐K回測實驗室(B4/B6)──────────────────────────── */
.bt-tablewrap { overflow-x: auto; border: 1px solid var(--zs-line); border-radius: var(--zs-radius); box-shadow: var(--zs-shadow); }
.bt-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.bt-table thead th { font-size: 11px; color: var(--zs-text-faint); font-weight: 700; text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--zs-line); background: var(--zs-surface-2); position: sticky; top: 0; }
.bt-table thead th:first-child, .bt-table tbody td.nm { text-align: left; }
.bt-table tbody td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--zs-line-soft); font-family: var(--zs-mono); font-variant-numeric: tabular-nums; }
.bt-table tbody td.nm { font-family: inherit; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.bt-table tbody td.faint { color: var(--zs-text-faint); }
.bt-table tbody tr.bt-row { cursor: pointer; }
.bt-table tbody tr.bt-row:hover td { background: var(--zs-surface-2); }
.bt-table tbody tr:last-child td { border-bottom: none; }

/* 逐筆交易卡(手機優先:進/出兩腿可換行、時間長也不擠) */
.bt-trade { padding: 9px 12px; }
.bt-legs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; }
.bt-leg { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12.5px; font-family: var(--zs-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--zs-text-dim); }
.bt-leg .lg { font-family: inherit; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--zs-surface-2); color: var(--zs-up); }
.bt-leg .lg.out { color: var(--zs-down); }
.bt-leg .at { color: var(--zs-text-faint); margin: 0 1px; }
.bt-tmeta { font-size: 11.5px; color: var(--zs-text-faint); margin-top: 4px; line-height: 1.4; word-break: break-word; }

/* 回測列表:依資金分組 + 卡片式(手機不用左右滑) */
.bt-capgroup { margin-bottom: 18px; }
.bt-caphead { display: flex; align-items: baseline; gap: 8px; padding: 6px 2px; margin-bottom: 8px; border-bottom: 2px solid var(--zs-accent); }
.bt-caphead .cap { font-size: 16px; font-weight: 700; color: var(--zs-accent); }
.bt-caphead .faint { font-size: 12px; }
.bt-acards { display: grid; grid-template-columns: 1fr; gap: 8px; }
.bt-acard { padding: 10px 12px; border: 1px solid var(--zs-line); border-radius: var(--zs-radius); background: var(--zs-surface); box-shadow: var(--zs-shadow); cursor: pointer; transition: border-color .15s, transform .1s; }
.bt-acard:hover { border-color: var(--zs-accent-dim); transform: translateY(-1px); }
.bt-acard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bt-acard-top .nm { font-size: 13.5px; line-height: 1.35; word-break: break-word; }
.bt-acard-sub { font-size: 11.5px; margin: 3px 0 7px; }
.bt-acard-stats { display: flex; flex-wrap: wrap; gap: 7px 16px; }
.bt-st { display: inline-flex; flex-direction: column; line-height: 1.2; }
.bt-st i { font-size: 10px; color: var(--zs-text-faint); font-style: normal; }
.bt-st b { font-size: 15px; font-family: var(--zs-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* 桌機:卡片排成多欄,善用寬度 */
@media (min-width: 720px) { .bt-acards { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (min-width: 1040px) { .bt-acards { grid-template-columns: repeat(3, 1fr); } }

.bt-prog { display: inline-block; width: 58px; height: 7px; background: var(--zs-surface-2); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 5px; }
.bt-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--zs-accent-soft), var(--zs-accent)); box-shadow: var(--zs-glow); transition: width .4s; }
.bt-prog.big { display: block; width: 100%; height: 10px; margin: 8px 0 0; }

.persona-pick { display: flex; gap: 6px; margin: 2px 0; }
.persona-pick .pp { flex: 1; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 6px; border-radius: 9px; border: 1px solid var(--zs-line); background: var(--zs-surface); color: var(--zs-text-dim); }
.persona-pick .pp:hover { background: var(--zs-surface-2); }
.persona-pick .pp.on { background: linear-gradient(180deg, var(--zs-accent-soft), var(--zs-accent)); border-color: var(--zs-accent); color: #14100a; font-weight: 700; }
.chkline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--zs-text-dim); margin-bottom: 14px; cursor: pointer; }
.chkline input { width: 17px; height: 17px; accent-color: var(--zs-accent); }

.cmp-picklist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.cmp-pk { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: 13px; }
.cmp-pk:hover { background: var(--zs-surface-2); }
.cmp-pk input { width: 16px; height: 16px; accent-color: var(--zs-accent); flex: none; }
.cmp-pk .dot, .bt-table .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; box-shadow: 0 0 7px currentColor; margin-right: 5px; vertical-align: middle; }
.cmp-pk .cmp-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zs-text-dim); }