* { margin:0; padding:0; box-sizing:border-box; }
html, body { background:#000000; font-family:Arial,sans-serif; height:100%; overflow:hidden; }
body { display:flex; }

/* ── 重播起點對話框(仿 TradingView Select date;標題 20px / 600、左右留 20px)── */
#replay-dlg, #goto-dlg { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; pointer-events:none; }
#replay-dlg[hidden], #goto-dlg[hidden] { display:none; }
/* ── Go to 對話框(仿 TradingView Go to;沿用 .rd-box / .rd-head / .rd-foot,尺寸照 TV 截圖實測)── */
.rd-box.gt-box { width:316px; }   /* 蓋過 .rd-box 的 280 */
.gt-tabs { display:flex; gap:28px; padding:0 20px; }
.gt-tab { padding:4px 0 10px; background:none; border:none; color:#dbdbdb; font:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.gt-tab:not(.on) { color:#b8b8b8; }
.gt-tab:not(.on):hover { color:#ffffff; }
.gt-track { position:relative; height:4px; margin:0 20px 22px; background:#4a4a4a; border-radius:2px; }
.gt-ind { position:absolute; top:0; height:4px; background:#ffffff; border-radius:2px; transition:left .15s, width .15s; }
.gt-rows { display:flex; flex-direction:column; gap:10px; padding:0 20px; }
.gt-row { display:flex; gap:14px; }
.gt-row[hidden] { display:none; }
.gt-field { flex:1; min-width:0; display:flex; align-items:center; height:38px; padding:0 8px 0 9px; border:1px solid #4a4a4a; border-radius:8px; cursor:text; color:#b8b8b8; }
.gt-field.focus { border-color:#2962ff; box-shadow:0 0 0 1px #2962ff inset; }
.gt-field input { flex:1; min-width:0; background:none; border:none; outline:none; color:#dbdbdb; font:inherit; font-size:15px; }
.gt-field input::placeholder { color:#6a6a6a; }
.gt-tfield { flex:0 0 108px; }
.gt-field.off { background:#2a2a2a; border-color:#3a3a3a; color:#6a6a6a; cursor:default; }
.gt-field svg { flex-shrink:0; }
.gt-cal { padding:22px 12px 18px; }
.gt-mon { display:flex; align-items:center; justify-content:space-between; padding:0 8px; height:34px; margin-bottom:14px; font-size:16px; }
.gt-mon button { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:8px; color:#dbdbdb; cursor:pointer; }
.gt-mon button:hover:not(:disabled) { background:#2e2e2e; }
.gt-mon button:disabled { color:#5c5c5c; cursor:default; }
.gt-wd { display:grid; grid-template-columns:repeat(7, 1fr); height:24px; align-items:center; background:#2e2e2e; border-radius:6px; color:#8c8c8c; font-size:14px; text-align:center; }
.gt-days { display:grid; grid-template-columns:repeat(7, 1fr); grid-auto-rows:42px; min-height:252px; padding-top:12px; }   /* 固定 6 列高,換月不跳(同 TV) */
.gt-day { margin:3px 4px; background:none; border:none; border-radius:6px; color:#dbdbdb; font:inherit; font-size:15px; cursor:pointer; position:relative; }
.gt-day:hover:not(:disabled):not(.sel) { background:#2e2e2e; }
.gt-day:disabled { color:#5c5c5c; cursor:default; }
.gt-day.sel { background:#f2f2f2; color:#0f0f0f; }
.gt-day.today::after { content:''; position:absolute; left:50%; bottom:5px; width:18px; height:2px; margin-left:-9px; background:currentColor; border-radius:1px; }
.rd-box { pointer-events:auto; width:280px; background:#1e1e1e; border-radius:6px; box-shadow:0 8px 32px rgba(0,0,0,.6);
  color:#dbdbdb; font-size:14px; font-family:-apple-system, system-ui, "Trebuchet MS", Roboto, sans-serif; }
.rd-head { display:flex; justify-content:space-between; align-items:center; padding:17px 20px; font-size:20px; font-weight:600; line-height:28px; }
.rd-close { width:34px; height:34px; margin-right:-8px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:8px; color:inherit; cursor:pointer; }
.rd-close:hover { background:#2e2e2e; }
.rd-fields { display:flex; gap:8px; padding:4px 20px 4px; }
.rd-fields input { height:32px; padding:0 8px; background:transparent; border:1px solid #4a4a4a; border-radius:8px;
  color:inherit; font:inherit; outline:none; color-scheme:dark; }
.rd-fields input:focus { border-color:#2962ff; }
#rd-date { flex:1; min-width:0; }
#rd-time { width:92px; }
.rd-tz { padding:0 20px 14px; font-size:12px; color:#8c8c8c; }
.rd-first { display:block; margin:0 auto 16px; padding:8px 16px; background:#2e2e2e; border:none; border-radius:8px;
  color:inherit; font:inherit; cursor:pointer; }
.rd-first:hover { background:#3d3d3d; }
.rd-foot { display:flex; justify-content:flex-end; gap:12px; padding:16px 20px; border-top:1px solid #2e2e2e; }
.rd-foot button { height:32px; padding:0 14px; border-radius:8px; font:inherit; cursor:pointer; }
.rd-cancel { background:transparent; border:1px solid #dbdbdb; color:#dbdbdb; }
.rd-cancel:hover { background:#2e2e2e; }
.rd-ok { background:#dbdbdb; border:1px solid #dbdbdb; color:#0f0f0f; }
.rd-ok:hover { background:#ffffff; }

/* ── 底部重播列:尺寸 / 顏色照 TradingView replay-bottom-toolbar 實測值 ── */
#main { flex:1; min-width:0; height:100vh; display:flex; flex-direction:column; }
#replay-bar { display:grid; grid-template-columns:70px 1fr 70px; align-items:center; height:49px; flex-shrink:0;
  background:#0f0f0f; border-top:1px solid #2e2e2e; color:#dbdbdb; font-size:14px;
  font-family:-apple-system, system-ui, "Trebuchet MS", Roboto, sans-serif; }
#replay-bar[hidden] { display:none; }
#replay-bar button { background:none; border:none; color:inherit; font:inherit; cursor:pointer; border-radius:4px;
  display:flex; align-items:center; justify-content:center; }
#replay-bar button:hover:not(:disabled) { background:#2e2e2e; }
#replay-bar button:disabled { opacity:.5; cursor:default; }
#replay-bar svg { display:block; }
.rb-center { display:flex; justify-content:center; align-items:center; }
.rb-right { display:flex; justify-content:center; }
.rb-date { height:38px; padding:5px; }
.rb-date span { padding:0 3px 0 4px; }
.rb-arrow { width:24px; height:38px; }
.rb-sep { width:1px; height:22px; margin:0 4px; background:#4a4a4a; }
.rb-btn { width:38px; height:38px; padding:0; }
.rb-speed { position:relative; }
#replay-speed-menu { position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column;
  padding:4px; background:#1e1e1e; border:1px solid #3a3a3a; border-radius:6px; z-index:20; }
#replay-speed-menu[hidden] { display:none; }
#replay-speed-menu button { width:48px; height:30px; }
#replay-speed-menu button.on { color:#2962ff; }

/* ── 指標 / Pine 彈窗(仿 TradingView)── */
#ind-modal, #pine-modal { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.55);
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
#ind-modal[hidden], #pine-modal[hidden] { display:none; }
#pine-src { height:46vh; margin:0 20px; padding:10px; resize:vertical; background:#131722; color:#d1d4dc; border:1px solid #2a2e39;
  border-radius:4px; font:12px/1.5 ui-monospace, Menlo, monospace; tab-size:4; }
.pine-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px 16px; }
#pine-msg { color:#f23645; font-size:12px; white-space:pre-wrap; max-height:8em; overflow:auto; }
#pine-src:focus { outline:none; border-color:#2962ff; box-shadow:0 0 0 3px rgba(41, 98, 255, .2); }
#pine-add { background:#2962ff; color:#fff; border:none; border-radius:4px; padding:7px 16px; cursor:pointer; flex-shrink:0; }
#pine-add:disabled { opacity:.5; cursor:default; }
.sm-box { width:min(760px, calc(100vw - 32px)); max-height:76vh; background:#1e222d; border:1px solid #2a2e39;
  border-radius:6px; display:flex; flex-direction:column; overflow:hidden; }
.sm-title { display:flex; justify-content:space-between; align-items:center; color:#d1d4dc;
  font-size:20px; font-weight:600; padding:16px 20px 12px; }
.sm-close { background:none; border:none; color:#787b86; font-size:16px; cursor:pointer; padding:4px 8px; border-radius:4px; }
.sm-close:hover { background:#2a2e39; color:#d1d4dc; }
.sm-input { display:flex; align-items:center; gap:10px; padding:4px 20px 10px; border-bottom:1px solid #2a2e39; }
.sm-input svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:#787b86; stroke-width:1.6; }
#ind-search { flex:1; min-width:0; background:none; border:none; color:#d1d4dc; font-size:20px; padding:6px 0; outline:none; }
#ind-list { overflow-y:auto; }
#ind-list .sr-sym { min-width:150px; }   /* 名稱含參數(MACD 12, 26, 9)較長,描述欄才對齊 */
#ind-list:not(:has(button)) { color:#787b86; font-size:14px; padding:12px 20px; }
/* 結果列(仿 TradingView):代號粗體 | 描述 | 右側類型 */
.sr-row { display:flex; align-items:center; gap:16px; width:100%; background:none; border:none;
  border-bottom:1px solid #2a2e39; color:#d1d4dc; font-size:15px; text-align:left; padding:12px 20px; cursor:pointer; }
.sr-row:hover { background:#2a2e39; }
.sr-sym { font-weight:700; min-width:90px; }
.sr-desc { flex:1; min-width:0; color:#b2b5be; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-tag { color:#787b86; font-size:12px; }
/* ── Chart groups ── */
#groups { flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; }
.group { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; background:#000000; }

/* 頂部工具列:尺寸 / 顏色照 TradingView 實測值(高 38、按鈕 38×38、字 14px #dbdbdb、分隔線 1×22) */
.chart-header {
  display:flex; align-items:center; height:38px; padding:0 4px; flex-shrink:0;
  background:#0f0f0f; border-bottom:1px solid #2e2e2e; color:#dbdbdb; font-size:14px;
  font-family:-apple-system, system-ui, "Trebuchet MS", Roboto, sans-serif;
}
.hd-btn { display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 5px;
  background:none; border:none; border-radius:4px; color:inherit; font:inherit; cursor:pointer; }
.hd-btn:hover { background:#2e2e2e; }
.hd-btn svg { display:block; flex-shrink:0; }
.hd-text { padding:0 10px 0 5px; }
.hd-sep { width:1px; height:22px; margin:0 4px; background:#4a4a4a; flex-shrink:0; }
.replay-btn.on { background:#dbdbdb; color:#0f0f0f; }   /* 開啟中:反白(同 TV pressed) */
/* ── 圖組本體(左側畫線工具列是 Vela 自帶的)── */
.group-body { flex:1; display:flex; min-height:0; }
.group-body .panes { min-width:0; }

/* ── Panes ── */
.panes { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; position:relative; }
.vela-host { position:absolute; inset:0; }
.vela-cell.hide-time::after { content:''; position:absolute; left:var(--vela-toolbar-gutter, 0px); right:0; bottom:0; height:var(--vela-bottom-gutter, 22px);
                              background:#151619; z-index:7; }   /* 蓋住 Vela 的時間軸與十字線時間標籤(workspace-shell 的 updateTimeAxis) */
.pane { position:relative; }
/* Go to 鈕(bottom-bar.js):workspace-shell 搬進 workspace 底部列的範圍鈕後面,樣式同 Vela 的 .vela-bb-range */
.vela-widget-bottombar .bb-sep { width:1px; height:18px; margin:0 4px; background:var(--vela-border-strong, #34353b); flex:none; }
.bb-goto { all:unset; width:28px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; cursor:pointer; }
.bb-goto:hover { background:var(--vela-hover, rgba(255,255,255,.06)); color:var(--vela-fg-bright, #f0f3fa); }
.bb-goto svg { width:22px; height:22px; display:block; }

/* ── 短暫提示(畫線存檔失敗;toast.js)── */
.toast { position:fixed; top:48px; left:50%; transform:translateX(-50%); z-index:300; max-width:calc(100vw - 32px); padding:10px 16px;
  background:#1f1f1f; border-left:4px solid #f23645; border-radius:6px; box-shadow:0 2px 4px 0 #0006; color:#dbdbdb; font-size:14px; line-height:20px; cursor:pointer; }
.toast[hidden] { display:none; }

.uq-dlg { position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
.uq-dlg[hidden] { display:none; }
.uq-box { width:560px; max-width:calc(100vw - 32px); max-height:calc(100vh - 64px); display:flex; flex-direction:column; background:#1f1f1f; border-radius:6px;
          color:#dbdbdb; font-family:-apple-system, "system-ui", "Trebuchet MS", Roboto, Ubuntu, sans-serif; font-size:15px; }
.uq-head { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 8px 20px; }
.uq-title { font-size:20px; font-weight:600; }
.uq-close { width:34px; height:34px; background:none; border:none; border-radius:6px; color:#dbdbdb; font-size:18px; cursor:pointer; }
.uq-close:hover { background:#2e2e2e; }
.uq-tabs { display:flex; gap:24px; padding:0 20px; border-bottom:3px solid #3a3a3a; }
.uq-tabs button { position:relative; padding:8px 0 10px; background:none; border:none; color:#dbdbdb; font:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.uq-tabs button.on::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:3px; border-radius:2px; background:#f2f2f2; }
.uq-body { overflow-y:auto; padding:12px 20px 16px; }
.uq-sec { margin:16px 0 8px; color:#8a8a8a; font-size:13px; }
.uq-row { display:flex; align-items:center; gap:10px; min-height:44px; }
.uq-row .uq-check { flex:1; min-width:0; }
.uq-check { position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; }
.uq-check.dis { cursor:default; }
.uq-check input { position:absolute; opacity:0; pointer-events:none; }
.uq-mark { flex:none; width:18px; height:18px; border:1px solid #f2f2f2; border-radius:3px; display:flex; align-items:center; justify-content:center; }
.uq-check input:checked + .uq-mark { background:#f2f2f2; }
.uq-check input:checked + .uq-mark::after { content:''; width:5px; height:9px; margin-top:-2px; border:solid #0f0f0f; border-width:0 2px 2px 0; transform:rotate(45deg); }
.uq-name { display:flex; flex-direction:column; min-width:0; }
.uq-note { color:#8a8a8a; font-size:12px; }
.uq-row.dis .uq-mark, .uq-row.dis .uq-name > span:first-child { opacity:.45; }
.uq-swatch, .uq-shape { flex:none; width:34px; height:34px; border:1px solid #4a4a4a; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.uq-swatch span { width:24px; height:24px; border-radius:4px; }
.uq-loc { flex:none; width:104px; height:34px; padding:0 10px; border:1px solid #4a4a4a; border-radius:8px; display:flex; align-items:center; font-size:14px; }
.uq-row.off .uq-shape, .uq-row.off .uq-loc, .uq-row.dis .uq-shape, .uq-row.dis .uq-loc { opacity:.4; }
.uq-foot { display:flex; align-items:center; gap:12px; padding:14px 20px; border-top:1px solid #3a3a3a; }
.uq-gap { flex:1; }
.uq-foot button { height:38px; padding:0 14px; border-radius:8px; font:inherit; font-size:16px; cursor:pointer; }
.uq-defwrap { position:relative; }
.uq-def { display:flex; align-items:center; gap:10px; background:none; border:1px solid #4a4a4a; color:#dbdbdb; }
.uq-defmenu { position:absolute; left:0; bottom:44px; min-width:140px; padding:4px 0; background:#2a2a2a; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.uq-defmenu[hidden] { display:none; }
.uq-defmenu button { width:100%; height:34px; border:none; border-radius:0; background:none; color:#dbdbdb; text-align:left; }
.uq-defmenu button:hover { background:#3a3a3a; }
.uq-cancel { background:none; border:1px solid #f2f2f2; color:#f2f2f2; }
.uq-cancel:hover, .uq-def:hover { background:#2e2e2e; }
.uq-ok { background:#f2f2f2; border:1px solid #f2f2f2; color:#0f0f0f; }

/* ── Training 面板(training.js):body 的 flex 右側整欄(仿 kking 訓練器),#main 跟著縮;欄內捲動,動作列黏在底部 ── */
#training-panel { --tr-card:#1a1a1b; --tr-line:#262628; --tr-well:#0e0e0f; --tr-mute:#8c8c8c; --tr-dim:#5c5c5c;
  --tr-blue:#2962ff; --tr-blue-soft:#1c2b52; --tr-win:#22ab94; --tr-loss:#f23645; --tr-ease:cubic-bezier(.2, .7, .2, 1);
  flex:0 0 340px; height:100vh; overflow:auto; display:flex; flex-direction:column; padding:14px 14px 0; background:#131313; border-left:1px solid #2e2e2e;
  color:#dbdbdb; font-size:13px; font-family:-apple-system, system-ui, "Trebuchet MS", Roboto, sans-serif; }
#training-panel[hidden] { display:none; }
.tr-head { margin-bottom:4px; font-size:15px; font-weight:600; }   /* 三個面板共用;Training 自己的在下面 */
#training-panel .tr-head { display:flex; align-items:center; gap:9px; margin-bottom:10px; font-size:16px; font-weight:700; letter-spacing:-.01em; }
#training-panel .tr-head::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--tr-dim); transition:background .3s; }
#training-panel:has(.tr-play:not([hidden])) .tr-head::before { background:var(--tr-blue); animation:tr-live 2.4s ease-out infinite; }   /* 作答中:呼吸燈 */
@keyframes tr-live { 0% { box-shadow:0 0 0 0 rgba(41, 98, 255, .55); } 70%, 100% { box-shadow:0 0 0 7px rgba(41, 98, 255, 0); } }
.tr-play, #tr-reveal { flex:1; display:flex; flex-direction:column; gap:6px; counter-reset:tr-step; }
.tr-play[hidden], #tr-reveal[hidden] { display:none; }

/* 作答區:每段一張卡,標題前面是步驟號,該段填了東西號碼就變藍 */
.tr-sec { padding:10px 12px; background:var(--tr-card); border:1px solid var(--tr-line); border-radius:10px; transition:border-color .2s; }
.tr-sec:focus-within { border-color:#34343a; }
.tr-lbl { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--tr-mute); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.tr-sec .tr-lbl::before { counter-increment:tr-step; content:counter(tr-step); display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border:1px solid #3a3a3e; border-radius:50%; color:var(--tr-mute); font-size:10px; letter-spacing:0; transition:background .2s, border-color .2s, color .2s; }
.tr-sec:has(.tr-pills button.on, .tr-box:not([hidden]), #tr-reason:not(:placeholder-shown)) .tr-lbl::before { background:var(--tr-blue-soft); border-color:var(--tr-blue); color:#fff; }
.tr-sec:has(.tr-pills button.on, .tr-box:not([hidden]), #tr-reason:not(:placeholder-shown)) .tr-lbl { color:#cfcfcf; }
.tr-hint { margin-left:6px; color:var(--tr-dim); }
#training-panel button { flex:1; height:30px; padding:0 8px; background:#2a2a2a; border:1px solid #4a4a4a; border-radius:6px;
  color:#dbdbdb; font:inherit; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .1s; }
#training-panel button:hover:not(:disabled) { background:#3d3d3d; }
#training-panel button:active:not(:disabled) { transform:scale(.97); }
#training-panel button:disabled { opacity:.4; cursor:default; }
#training-panel button:focus-visible { outline:2px solid var(--tr-blue); outline-offset:1px; }
/* pills = 分段選擇器:深色凹槽裡一排按鈕;已選淡藍底 + 藍框,實心藍留給主要動作 */
.tr-pills { display:flex; gap:3px; margin-bottom:6px; padding:3px; background:var(--tr-well); border:1px solid var(--tr-line); border-radius:8px; }
#training-panel .tr-pills button { height:26px; padding:0 4px; background:transparent; border-color:transparent; color:#a6a6a6; font-weight:500; }
#training-panel .tr-pills button:hover:not(:disabled) { background:#222225; color:#fff; }
#training-panel .tr-pills button.on, #training-panel .tr-pills button.on:hover:not(:disabled) { background:var(--tr-blue-soft); border-color:var(--tr-blue); color:#fff; }
#training-panel .tr-bias button.on[data-v="long"], #training-panel .tr-bias button.on[data-v="long"]:hover:not(:disabled) { background:rgba(34, 171, 148, .16); border-color:var(--tr-win); }    /* 方向:Long 綠 / Short 紅 */
#training-panel .tr-bias button.on[data-v="short"], #training-panel .tr-bias button.on[data-v="short"]:hover:not(:disabled) { background:rgba(242, 54, 69, .14); border-color:var(--tr-loss); }
.tr-row { display:flex; align-items:center; gap:8px; margin:0 0 6px; }
.tr-row:last-child { margin-bottom:0; }
.tr-row[hidden] { display:none; }
.tr-key { flex:0 0 64px; color:var(--tr-mute); font-size:12px; }
.tr-mini { flex:1; margin:0; }
/* 價位鈕:虛線框 + 圖上同色的點(框灰 / TP 綠 / SL 紅);右邊結果框按過才出現 */
.tr-btns { display:flex; gap:6px; margin:8px 0; }
.tr-pickbar { margin:0 0 6px; }
#training-panel .tr-pickbar button, .tr-pickbar .tr-box { height:28px; line-height:26px; }
#training-panel .tr-pick { flex:0 0 112px; display:flex; align-items:center; gap:7px; white-space:nowrap; background:transparent; border:1px dashed #4a4a4e; }
#training-panel .tr-pick::before { content:''; flex:0 0 8px; height:8px; border-radius:2px; background:#c8c8c8; }
#training-panel .tr-pick[data-pick="tp"]::before { border-radius:50%; background:#22ab94; }
#training-panel .tr-pick[data-pick="inval"]::before { border-radius:50%; background:#d4545e; }
#training-panel .tr-pick:hover:not(:disabled) { background:#222225; border-style:solid; border-color:#6a6a6e; }
#training-panel .tr-pick.armed, #training-panel .tr-pick.armed:hover:not(:disabled) { background:var(--tr-blue-soft); border:1px solid var(--tr-blue); color:#fff; animation:tr-armed 1.6s ease-in-out infinite; }   /* 等你在圖上畫 */
@keyframes tr-armed { 50% { box-shadow:0 0 0 3px rgba(41, 98, 255, .25); } }
.tr-val { flex:1; font-variant-numeric:tabular-nums; color:#e6e6e6; }
.tr-box { min-width:0; height:30px; line-height:28px; padding:0 10px; border:1px solid var(--tr-line); border-radius:6px; background:var(--tr-well); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; animation:tr-in .25s var(--tr-ease) both; }
.tr-box[hidden] { display:none; }
#tr-why, #tr-reason { display:block; width:100%; padding:7px 9px; background:var(--tr-well); border:1px solid var(--tr-line); border-radius:6px;
  color:inherit; font:inherit; outline:none; transition:border-color .15s, box-shadow .15s; }
#tr-why::placeholder, #tr-reason::placeholder { color:var(--tr-dim); }
#tr-why { height:30px; }
#tr-reason { height:52px; resize:vertical; }
#tr-why:focus, #tr-reason:focus { border-color:var(--tr-blue); box-shadow:0 0 0 3px rgba(41, 98, 255, .18); }

/* 底部動作列:黏在欄底,上緣淡出;狀態列前面的點 = 狀態(灰 沒 Setup / 黃 未下單 / 紅 TP SL 放反 / 綠 已下單) */
.tr-foot { position:sticky; bottom:0; z-index:1; margin:auto -14px 0; padding:10px 14px 10px; background:linear-gradient(to bottom, rgba(19, 19, 19, 0), #131313 14px); }
.tr-foot .tr-main { margin:0; }
#training-panel .tr-main button { height:36px; border-radius:8px; }
#training-panel .tr-primary { background:var(--tr-blue); border-color:var(--tr-blue); color:#fff; font-weight:600; box-shadow:0 4px 14px rgba(41, 98, 255, .28); }   /* 一個畫面一顆:Place order / Next round */
#training-panel .tr-primary:hover:not(:disabled) { background:#1e53e5; box-shadow:0 6px 18px rgba(41, 98, 255, .38); }
#training-panel .tr-primary:disabled { box-shadow:none; }
#tr-status { display:flex; align-items:center; gap:7px; min-height:18px; margin-bottom:10px; color:#b8b8b8; font-size:12px; font-variant-numeric:tabular-nums; }
#tr-status::before { content:''; flex:0 0 6px; height:6px; border-radius:50%; background:var(--tr-dim); transition:background .2s; }
#tr-status[data-state="draft"]::before { background:#f0b90b; }
#tr-status[data-state="warn"]::before { background:var(--tr-loss); }
#tr-status[data-state="warn"] { color:#f08a93; }
#tr-status[data-state="live"]::before { background:var(--tr-win); box-shadow:0 0 0 3px rgba(34, 171, 148, .2); }
#training-panel .tr-quiet { margin:6px 0 0; }
#training-panel .tr-quiet button { height:26px; background:transparent; border-color:transparent; color:var(--tr-mute); font-size:12px; }   /* Skip / Exit:次要,不搶眼 */
#training-panel .tr-quiet button:hover:not(:disabled) { background:#222225; color:#dbdbdb; }

/* 揭露:標的 → 成績(大字 R) → 我的卡(鍵值格) → 理由 → 作者原文(時間軸);逐張淡入 */
#tr-reveal > * { animation:tr-in .4s var(--tr-ease) both; }
#tr-reveal > :nth-child(2) { animation-delay:.05s; } #tr-reveal > :nth-child(3) { animation-delay:.1s; }
#tr-reveal > :nth-child(4) { animation-delay:.15s; } #tr-reveal > :nth-child(n+5) { animation-delay:.2s; }
@keyframes tr-in { from { opacity:0; transform:translateY(6px); } }
#tr-reveal > :empty:not(.tr-foot) { display:none; }
.tr-msym { font-size:18px; font-weight:700; letter-spacing:-.01em; }
.tr-mwhen { margin-top:3px; color:var(--tr-mute); font-size:12px; font-variant-numeric:tabular-nums; }
.tr-rcard { padding:12px; background:var(--tr-card); border:1px solid var(--tr-line); border-radius:10px; }
.tr-rcard .tr-lbl { margin-bottom:8px; }
.tr-result { position:relative; overflow:hidden; }
.tr-result.win { border-color:rgba(34, 171, 148, .45); background:linear-gradient(135deg, rgba(34, 171, 148, .16), var(--tr-card) 60%); }
.tr-result.loss { border-color:rgba(242, 54, 69, .4); background:linear-gradient(135deg, rgba(242, 54, 69, .14), var(--tr-card) 60%); }
.tr-big { font-size:34px; font-weight:700; line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.tr-big small { margin-left:4px; font-size:15px; font-weight:600; letter-spacing:0; color:var(--tr-mute); }
.tr-result.win .tr-big { color:var(--tr-win); } .tr-result.loss .tr-big { color:var(--tr-loss); }
.tr-result.flat .tr-big { color:#6a6a6e; font-size:22px; }
.tr-bsub { margin-top:4px; color:var(--tr-mute); font-size:12px; }
.tr-trade { margin-top:10px; padding-top:10px; border-top:1px solid var(--tr-line); }
.tr-tline { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.tr-tside { font-weight:600; }
.tr-tside .long { color:var(--tr-win); } .tr-tside .short { color:var(--tr-loss); }
.tr-tr { font-weight:700; font-variant-numeric:tabular-nums; }
.tr-tr.win { color:var(--tr-win); } .tr-tr.loss { color:var(--tr-loss); }
.tr-tsub { margin-top:3px; color:var(--tr-mute); font-size:12px; font-variant-numeric:tabular-nums; }
.tr-kv { display:grid; grid-template-columns:64px 1fr; gap:8px 10px; align-items:baseline; }
.tr-kv dt { color:var(--tr-mute); font-size:12px; }
.tr-kv dd { color:#e6e6e6; word-break:break-word; }
.tr-kv .tr-none { color:var(--tr-dim); }
.tr-chip { display:inline-block; margin:0 4px 3px 0; padding:1px 7px; background:#232326; border:1px solid #303034; border-radius:5px; font-size:12px; }
.tr-chip.long { color:var(--tr-win); border-color:rgba(34, 171, 148, .45); } .tr-chip.short { color:var(--tr-loss); border-color:rgba(242, 54, 69, .4); }
.tr-quote { color:#c4c4c4; white-space:pre-wrap; word-break:break-word; line-height:1.5; }
.tr-quote.tr-none { color:var(--tr-dim); }
.tr-morebar { margin:0; }
#training-panel .tr-morebar button { background:transparent; border:1px dashed #4a4a4e; color:#b8b8b8; }
#training-panel .tr-morebar button:hover:not(:disabled) { background:#222225; border-style:solid; color:#fff; }
#tr-blocks { padding-left:14px; border-left:1px solid var(--tr-line); margin-left:4px; }
#tr-blocks > .tr-lbl { margin:4px 0 8px -14px; padding-left:14px; background:#131313; }   /* 蓋住時間軸線頭 */
.tr-block { position:relative; padding:4px 0 14px; }
.tr-block::before { content:''; position:absolute; left:-18px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--tr-blue); box-shadow:0 0 0 3px #131313; }
.tr-btime { margin-bottom:4px; font-size:12px; color:var(--tr-mute); font-variant-numeric:tabular-nums; }
.tr-btext { white-space:pre-wrap; word-break:break-word; line-height:1.5; }
.tr-block img { display:block; max-width:100%; margin-top:8px; border:1px solid var(--tr-line); border-radius:6px; transition:border-color .15s; }
.tr-block a:hover img { border-color:#4a4a4e; }
@media (prefers-reduced-motion: reduce) { #training-panel *, #training-panel *::before { animation:none !important; transition:none !important; } }
/* ── Journal 面板(journal.js):版型同 Training 面板 ── */
#journal-panel, #setups-panel { flex:0 0 340px; height:100vh; overflow:auto; padding:12px 14px; background:#131313; border-left:1px solid #2e2e2e;
  color:#dbdbdb; font-size:13px; font-family:-apple-system, system-ui, "Trebuchet MS", Roboto, sans-serif; }
#journal-panel[hidden], #setups-panel[hidden] { display:none; }
#journal-panel .tr-head, #setups-panel .tr-head { display:flex; justify-content:space-between; align-items:center; }
#jn-close, #su-close { background:none; border:none; color:#8c8c8c; font-size:18px; cursor:pointer; }
#jn-close:hover, #su-close:hover { color:#fff; }
#jn-import { margin-top:8px; display:flex; gap:6px; }
#jn-import[hidden] { display:none; }
#jn-import-btn { flex:1; height:30px; background:#1a2340; border:1px solid #2962ff; border-radius:6px; color:#fff; font:inherit; cursor:pointer; }
#jn-import-btn:hover { background:#22306a; }
#jn-clear-btn { height:30px; padding:0 12px; background:none; border:1px solid #4a4a4a; border-radius:6px; color:#b8b8b8; font:inherit; cursor:pointer; }
#jn-clear-btn:hover { border-color:#f23645; color:#f23645; }
#jn-account { width:100%; height:30px; margin:8px 0; padding:0 6px; background:#0d0d0d; border:1px solid #4a4a4a; border-radius:6px; color:inherit; font:inherit; }
#jn-status { margin:4px 0 8px; color:#b8b8b8; white-space:pre-wrap; }
.jn-row { display:grid; grid-template-columns:92px 1fr auto; gap:2px 8px; padding:6px 4px; border-top:1px solid #2a2a2a; cursor:pointer; }
.jn-row:hover { background:#1e1e1e; }
.jn-row.on { background:#1a2340; }
.jn-row.unmapped { opacity:.5; }
.jn-date { color:#8c8c8c; font-variant-numeric:tabular-nums; }
.jn-sym { font-weight:600; }
.jn-pnl { text-align:right; font-variant-numeric:tabular-nums; }
.jn-pnl.win { color:#089981; } .jn-pnl.loss { color:#f23645; }
.jn-sub { grid-column:2 / 4; color:#8c8c8c; font-size:12px; }
/* ── Setups 面板(setups.js):版型同 Journal 面板 ── */
#su-bar { margin:8px 0; display:flex; gap:6px; }
#su-bar button, #su-mine { height:30px; padding:0 12px; background:none; border:1px solid #4a4a4a; border-radius:6px; color:#b8b8b8; font:inherit; cursor:pointer; }
#su-bar button:hover, #su-mine:hover { border-color:#8c8c8c; color:#fff; }
#su-bar button[hidden], #su-view[hidden] { display:none; }
#su-token { margin-left:auto; }
#su-who { margin-top:8px; color:#8c8c8c; font-size:12px; }
.su-del { margin-left:8px; padding:0 4px; background:none; border:none; color:#8c8c8c; font-size:16px; line-height:1; cursor:pointer; }
.su-del:hover { color:#f23645; }
.su-row.on { background:#1a2340; }
#su-view { margin-top:8px; padding:8px; display:flex; flex-direction:column; gap:6px; background:#1a2340; border:1px solid #2962ff; border-radius:6px; }
#su-status { margin:4px 0 8px; color:#b8b8b8; white-space:pre-wrap; }
.training-btn:disabled { opacity:.5; cursor:default; }
body.public:not(.static) .training-btn[data-source="pro"] { display:none; }   /* 本機公開模式沒有 Pro；靜態站走 Worker（Cloudflare Access 擋） */
.pro-join { display:none; text-decoration:none; padding:0 10px; }   /* Training Pro 的 Whop 入口：只在靜態站（Access 免費版的拒絕頁不能放連結） */
body.static .pro-join { display:flex; }
body.static .setups-btn { display:none; }   /* 靜態站沒有後端：Setups 要驗 token、存 setups.db，先不開（#44 用 Worker） */
/* 回合中藏掉能跳出重播 / 跳時間的按鈕(盲圖鎖另在 JS 守門);Training 鈕也藏,誤按會直接換題、不揭露 */
body.training .replay-btn, body.training .training-btn, body.training .pro-join, body.training .setups-btn, body.training #replay-realtime, body.training #replay-exit,
body.training #replay-bar .rb-date, body.training #replay-bar .rb-arrow { display:none; }   /* 要蓋過 #replay-bar button 的 display:flex */

/* Training 鎖定 workspace 自帶控制項（依賴 Vela 內部 class，升級後跑 tests/headless/lockcheck.mjs）：標的鈕不能點（會換標的）、Data window（露日期）、截圖（不含 DOM 時間軸遮罩）、YTD / ALL、
   Go to（跳日期）、畫線設定對話框 Points 摺疊區的錨點日期（.vela-dsp-pt-t；價格欄留著可改） */
body.training .vela-widget-symbol { pointer-events:none; }
body.training .vela-widget-panel-dataWindow, body.training .vela-dw, body.training .vela-widget-screenshot,
body.training .vela-bb-range[data-training-hide], body.training .bb-goto, body.training .vela-widget-bottombar .bb-sep,
body.training .vela-dsp-pt-t { display:none !important; }

/* Vela 下拉選單（週期 / 樣式 / 時區）：滑鼠移進選單後，承載層 .vela-ui-layer 的 inline z-index 會被清掉，週期 / 樣式選單就沉到圖表 canvas 底下（看似消失、點了變點圖）→ 固定在選單層級 */
.vela-ui-layer:has(> .vela-menu) { z-index:50 !important; }
/* 重播 / Training 不給 3D：週期選單的 3D 項目藏掉（依賴 Vela 選單項目的 data-value；replay.js 切 body.replay-mode） */
body.replay-mode .vela-menu-item[data-value="3D"] { display:none; }

/* ── 手機（≤ 760px）：側欄改成底部抽屜、圖表在上；頂部列橫向捲動；重播列縮成只有圖示；按鈕放大到手指點得準 ── */
#main, #training-panel, #journal-panel, #setups-panel { height:100dvh; }   /* 手機瀏覽器網址列會吃掉 100vh 的底部（舊瀏覽器沿用上面的 100vh） */
.pro-join { color:#7aa2ff; }
.pro-join:hover { color:#b6cbff; }
@media (max-width: 760px) {
  html, body { height:100dvh; }
  body { flex-direction:column; }
  #main { flex:1; min-height:0; height:auto; }
  #training-panel, #journal-panel, #setups-panel { flex:0 0 auto; width:100%; height:min(46dvh, 440px); border-left:none; border-top:1px solid #2e2e2e;
    border-radius:14px 14px 0 0; box-shadow:0 -10px 30px rgba(0, 0, 0, .55); padding-bottom:env(safe-area-inset-bottom); animation:sheet-up .28s cubic-bezier(.2, .7, .2, 1) both; }
  #training-panel { padding-bottom:0; }
  #training-panel .tr-foot { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .chart-header { height:44px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .chart-header::-webkit-scrollbar { display:none; }
  .chart-header:not(.at-end) { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); }   /* 右緣淡出：提示還能往右滑 */
  .chart-header > * { flex-shrink:0; }
  .hd-btn { height:44px; }
  #replay-bar { grid-template-columns:0 1fr 44px; height:calc(49px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); }
  .rb-date span { display:none; }
  .rb-btn { width:40px; height:44px; }
  .sm-title { font-size:17px; padding:14px 16px 10px; }
  #ind-modal, #pine-modal { padding-top:8dvh; }
  #pine-src { height:38dvh; margin:0 16px; }
  #training-panel button, #training-panel .tr-pills button { min-height:34px; }
  .jn-row { padding:10px 4px; }
}
@keyframes sheet-up { from { transform:translateY(24px); opacity:0; } }
@media (prefers-reduced-motion: reduce) { #training-panel, #journal-panel, #setups-panel { animation:none; } }