/* Trader Desk v2 样式：单用户双交易对（每面板一张 5m K 线图，纯展示）。
   布局：顶栏 + 双面板（K 线图/持仓条/操作）+ 联动浮动条；H5 一屏为目标。 */
:root {
  --line: #e6e8eb;
  --dim: #848e9c;
  --text: #1e2329;
  --up: #0ecb81;
  --down: #f6465d;
  --warn-bg: #fef6d8;
  --warn-text: #8a6d00;
  --acid: #127a52;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --panel-radius: 12px;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: #f7f8fa;
  color: var(--text);
  font-size: 14px;
}
button { font: inherit; }
/* 作者样式的 display（如 .login-view 的 flex）会压过 UA 的 [hidden] 规则，
   导致 JS 置 hidden 后元素视觉不消失（v2 重写曾丢此守卫——登录后登录框
   残留在屏幕上）。全局显式补回。 */
[hidden] { display: none !important; }
.is-up { color: var(--up); }
.is-down { color: var(--down); }

/* ===== 登录页 ===== */
.login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: min(380px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  padding: 28px 24px;
  box-shadow: 0 12px 40px rgba(30, 35, 41, 0.08);
}
.login-card h2 { margin-bottom: 18px; }
.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  color: var(--dim);
  font-size: 12px;
  margin-bottom: 4px;
}
.field input,
.field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}
/* 登录页输入框去掉浏览器默认的聚焦描边（选中时的蓝/黑色框）。 */
.login-view .field input { outline: none; }
.field.checkbox { display: flex; align-items: center; gap: 8px; }
.field.checkbox input { width: auto; }
.field.checkbox > span { margin: 0; color: var(--text); font-size: 13px; }
.form-error { color: var(--down); font-size: 12px; min-height: 16px; }
.primary-action {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: var(--acid);
  color: #fff;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.login-footnote {
  margin-top: 14px;
  color: var(--dim);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--up);
  display: inline-block;
}

/* ===== 顶栏 ===== */
.desk-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
}
.desk-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text);
}
.brand-sigil {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--acid); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.header-spacer { flex: 1; }
.connection-state, .account-button {
  display: flex; align-items: center; gap: 6px;
}
.connection-state small, .account-button small {
  display: block; color: var(--dim); font-size: 11px;
}
.connection-state strong, .account-button strong {
  display: block; font-size: 13px;
}
.connection-light {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
}
.connection-light.is-on { background: var(--up); }
.connection-light.is-off { background: var(--down); }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 12px; color: var(--text); cursor: pointer;
}
.icon-button svg { display: block; color: var(--dim); }

/* ===== 双交易对工作区 ===== */
.workspace-hint {
  margin: 12px 12px 0; padding: 12px 16px;
  background: #fff; border: 1px dashed var(--line);
  border-radius: var(--panel-radius); color: var(--dim);
  max-width: 1920px; box-sizing: border-box;
}
.workspace-hint.is-error { color: var(--down); border-color: var(--down); }
.dual-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px; padding: 12px;
  max-width: 1920px; margin: 0 auto;
  align-items: start;
}
@media (max-width: 1050px) {
  .dual-workspace { grid-template-columns: minmax(0, 1fr); }
  .connection-state > span:last-child { display: none; }
  .account-button > span:last-child { display: none; }
}
.symbol-panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--panel-radius); overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
}
.signal-chart { width: 100%; background: #fff; }
.chart-stage { position: relative; height: 300px; overflow: hidden; }
.chart-container { position: absolute; inset: 0; }
.chart-price-tag {
  align-items: center;
  background: var(--up);
  border-radius: 3px;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  gap: 0;
  padding: 3px 4px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 4px;
  z-index: 4;
}
.chart-price-tag.is-down { background: var(--down); }
.chart-price-tag strong { font-size: 10px; font-weight: 600; line-height: 1.3; }
.chart-price-tag span { font-size: 9px; line-height: 1.3; opacity: .92; }
.chart-legends {
  position: absolute; z-index: 3; top: 7px; left: 9px;
  display: flex; flex-direction: column; gap: 3px;
  color: var(--dim); font-size: 11px; pointer-events: none;
}
.chart-legends-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chart-legends-row > span { display: inline-flex; align-items: baseline; gap: 4px; }
.chart-legends em { color: var(--dim); font-style: normal; }
.legend-value { font-variant-numeric: tabular-nums; font-weight: 500; }
.legend-value.ema20 { color: #f0b90b; }
.legend-value.ema50 { color: #9c27b0; }
.legend-value.ema200 { color: #2196f3; }
.legend-value.donchian { color: #7c858f; }
.legend-value.supertrend-up { color: var(--up); }
.legend-value.supertrend-down { color: var(--down); }
.chart-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  width: max-content; max-width: min(320px, calc(100% - 8px));
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: rgba(255, 255, 255, .97); color: var(--text);
  box-shadow: 0 4px 14px rgba(24, 26, 32, .12);
  font-size: 11px; line-height: 1.5; overflow-wrap: anywhere;
}
.chart-tooltip-time, .chart-tooltip-context { color: var(--dim); }
.chart-tooltip-signal { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px; }
.chart-tooltip-signal.is-long strong { color: var(--up); }
.chart-tooltip-signal.is-short strong { color: var(--down); }

/* ===== 交易记录（在途挂单 + 最近成交/撤销历史） =====
   PC 展示在各自面板下方；≤1050px 单列时面板内列表隐藏，合并到工作区
   最下方的 #open-orders-mobile（静态骨架在 main 外，防重建抹掉）。 */
.open-orders { padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.open-orders-header { color: var(--dim); font-size: 11px; margin-bottom: 4px; }
.open-orders ul, .open-orders-mobile ul {
  display: grid; gap: 3px; list-style: none;
  margin: 0; max-height: 132px; overflow-y: auto; padding: 0;
}
.open-orders li, .open-orders-mobile li {
  background: #fafbfc; border-radius: 7px;
  font-family: var(--mono); font-size: 11px;
  overflow-wrap: anywhere; padding: 5px 8px; white-space: normal;
}
.open-orders li.is-long, .open-orders-mobile li.is-long { color: var(--acid); }
.open-orders li.is-short, .open-orders-mobile li.is-short { color: var(--down); }
.open-orders li.is-empty, .open-orders-mobile li.is-empty { color: var(--dim); }
.open-orders li.is-done, .open-orders-mobile li.is-done { opacity: 0.65; }
.open-orders .order-realized-pnl.is-up,
.open-orders-mobile .order-realized-pnl.is-up { color: var(--up); }
.open-orders .order-realized-pnl.is-down,
.open-orders-mobile .order-realized-pnl.is-down { color: var(--down); }
.open-orders-mobile {
  margin: 0 auto; max-width: 1920px;
  padding: 10px 14px 12px;
}
.open-orders-mobile-symbol {
  color: var(--dim); font-size: 11px; font-weight: 700;
  margin: 6px 0 3px;
}
/* PC（>1050px）：H5 合并区隐藏；≤1050px：面板内列表隐藏、合并区显示。 */
#open-orders-mobile { display: none; }
@media (max-width: 1050px) {
  .symbol-panel .open-orders { display: none; }
  #open-orders-mobile { display: block; margin: 0 6px; }
}

@media (max-width: 760px) {
  .desk-header { gap: 8px; padding: 8px 10px; }
  .dual-workspace { gap: 8px; padding: 8px 6px; }
  .signal-chart { height: 240px; }
  .chart-legends { font-size: 10px; }
  .chart-legends-row { gap: 7px; }
  .panel-head.chart-head { gap: 6px; padding: 7px 9px; }
  .panel-head.chart-head .sym { font-size: 15px; }
  .panel-head.chart-head .last { font-size: 14px; }
  .panel-head.chart-head .badge { font-size: 11px; }
  .sync-bar { gap: 6px; padding: 7px 8px; }
}

/* 面板头：标的（今日涨跌）最新价 ……徽标右置 */
.panel-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.panel-head .sym { font-size: 17px; font-weight: 800; letter-spacing: 0.2px; }
.panel-head .chart-period { color: var(--dim); font-size: 12px; }
.panel-head .day-inline { color: var(--dim); font-size: 12px; }
.panel-head .last { font-size: 16px; font-weight: 800; }
.panel-head .badge { font-weight: 700; margin-left: auto; white-space: nowrap; }

/* 持仓条 */
.position-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.position-strip span { display: block; color: var(--dim); font-size: 11px; }
.position-strip strong { font-size: 13px; }
.position-strip small { display: block; color: var(--dim); font-size: 11px; }
/* 空仓占位同高：空仓时计时（pos-timer）/回报率（pos-pnl-pct）小字为空，
   行高坍塌会让持仓条矮一截；:empty 渲染不可见 nbsp 占位（纯空白，非伪造
   数值，AGENTS.md §6），与有持仓时严格同高。 */
.position-strip small:empty::after { content: "\00a0"; }

.compound-metrics {
  padding: 7px 12px; border-bottom: 1px solid var(--line);
  color: var(--dim); background: #fafbfc; font-size: 12px;
}

/* 面板内独立下单区 */
.order-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 12px;
}
.btn {
  border: none; border-radius: 8px; padding: 8px 14px;
  font-weight: 700; cursor: pointer; color: #fff;
}
/* 反向持仓置灰：保持可点击（点击弹提示），视觉与 disabled 一致。 */
.btn:disabled, .btn.is-unavailable { opacity: 0.55; cursor: not-allowed; }
.btn.long { background: var(--up); }
.btn.short { background: var(--down); }
.btn.close { background: var(--warn-bg); color: var(--warn-text); }
.btn.cancel { background: #fff; border: 1px solid var(--line); color: var(--dim); }
/* 手动快捷行：面板内「手动」按钮展开的一行（价格输入 / 做多 / 做空 /
   全平 / 关闭），文档流内展开，PC/H5 同一交互；指定价挂单为单张 GTX
   原地等成交、不追价（RESTING），价格按 symbol 记忆在 localStorage。 */
.btn.manual-toggle { background: #fff; border: 1px solid var(--line); color: var(--dim); }
/* 「半平」按钮（1/2 平仓）：order-row 文档流 flex 成员，DOM 序紧邻「全平」
   右侧；配色复用 .btn.close。 */
.btn.close-half { white-space: nowrap; }
.manual-toggle[aria-expanded="true"] { color: var(--text); border-color: var(--dim); }
.manual-row {
  display: flex; gap: 8px; align-items: center;
  padding: 0 12px 8px;
  animation: manual-row-in 150ms ease-out;
  transform-origin: right center;
}
@keyframes manual-row-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
.manual-row input {
  flex: 0 0 96px; width: 96px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.manual-row .btn { flex: 1 1 0; padding: 8px 6px; white-space: nowrap; }

/* ===== 联动操作条（固定贴底居中） ===== */
.sync-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(30, 35, 41, 0.12);
  user-select: none;
}
.sync-bar .sync-label { font-weight: 800; font-size: 13px; margin-right: 4px; }
.sync-bar .icon-button { padding: 6px 10px; line-height: 1; }
/* 桌面端按钮组不参与布局（子按钮直接挂在联动条 flex 上），H5 下独占一行 */
.sync-actions { display: contents; }
.sync-fields { display: flex; gap: 8px; align-items: center; }
.sync-field {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; padding: 6px 8px;
}
.sync-field .prefix { color: var(--dim); font-size: 12px; white-space: nowrap; }
/* outline:none 去掉移动端 select 聚焦时浏览器默认的黑色描边（字段框本身已有边框）。 */
.sync-field select { border: none; padding: 0; background: transparent; flex: 1; font: inherit; outline: none; }
body.has-sync-bar { padding-bottom: 72px; }

/* ===== 弹窗 ===== */
.profile-dialog {
  /* margin:auto 恢复原生 dialog 的水平垂直居中：全局 * 重置把 margin 清 0
     会顶掉 UA 样式表给 modal dialog 的 margin:auto，弹窗因此锚在左上角。 */
  margin: auto;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  padding: 0;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(30, 35, 41, 0.18);
}
.profile-dialog::backdrop { background: rgba(30, 35, 41, 0.32); }
.dialog-body { padding: 20px; }
.dialog-header h2 { font-size: 16px; }
.dialog-header { margin-bottom: 14px; }
.profile-subtitle { color: var(--dim); font-size: 12px; }
.profile-toggles { margin: 6px 0 10px; }
.p4-settings {
  margin: 8px 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f8fa;
}
.p4-settings .field.checkbox label { color: var(--text); font-size: 13px; font-weight: 600; }
.p4-settings .field-help { margin: -2px 0 2px; color: var(--dim); font-size: 11px; line-height: 1.45; }
.p4-settings input:disabled { color: var(--dim); background: #eef0f2; }
.trade-mode-field {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f8fa;
}
.trade-mode-field > span:first-child {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.trade-mode-select-wrap { display: block; position: relative; }
.trade-mode-select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--dim);
  border-bottom: 2px solid var(--dim);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.trade-mode-field .trade-mode-select-wrap select {
  height: 40px;
  padding: 8px 38px 8px 12px;
  border-color: #d5d9df;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  appearance: none;
  outline: none;
}
.trade-mode-field .trade-mode-select-wrap select:focus {
  border-color: var(--acid);
  box-shadow: 0 0 0 3px rgba(18, 122, 82, 0.1);
}
.trade-mode-field > small {
  display: block;
  margin-top: 7px;
  color: var(--dim);
  font-size: 11px;
  line-height: 1.45;
}
.profile-security {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px 12px 4px;
  margin-bottom: 8px;
}
.profile-security legend { color: var(--dim); font-size: 12px; padding: 0 4px; }
/* 弹窗底部按钮区：显式「保存 / 取消」，Esc/点遮罩一律丢弃修改。 */
.dialog-actions { display: flex; gap: 8px; margin-top: 12px; }
.dialog-actions .primary-action { width: auto; flex: 1; }
.dialog-actions .btn.cancel { flex: 1; }

/* ===== Toast ===== */
.toast-region {
  position: fixed;
  right: 14px;
  top: 60px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, 90vw);
}
.toast {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--up);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(30, 35, 41, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.toast.is-error { border-left-color: var(--down); }
.toast.is-warning { border-left-color: #f0b90b; }
.toast.is-info { border-left-color: #3861fb; }
.toast.is-persistent { box-shadow: 0 6px 18px rgba(30, 35, 41, 0.1); }
.toast strong { font-size: 13px; }
.toast span { color: var(--dim); }