/* 期货模拟交易 — 仿交易软件六板块布局（无构建链，原生 CSS） */
:root {
  --bg: #0f1418; --panel: #161d24; --panel2: #1b242d;
  --line: #26313c; --text: #cdd6df; --dim: #6b7a88;
  --up: #e5484d; --down: #2fbf71;          /* 国内习惯：红涨绿跌 */
  --buy: #c8453f; --sell: #2f9e63; --accent: #3d8bd4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 13px/1.5 "Microsoft YaHei", "Segoe UI", sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}
.hidden { display: none !important; }

.banner {
  background: #7a2e2e; color: #ffd9d9; text-align: center; padding: 4px 0; font-size: 12px;
}

/* 顶栏 + 资金条 */
.topbar {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel); border-bottom: 1px solid var(--line); padding: 6px 12px;
}
.brand { font-size: 15px; font-weight: 600; white-space: nowrap; }
.brand .sub { font-size: 11px; color: var(--dim); font-weight: 400; margin-left: 6px; }
.money-bar { flex: 1; display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
.money-bar b { color: var(--text); font-family: Consolas, monospace; margin-left: 4px; }
#m-float.up, #m-equity.up { color: var(--up); }
#m-float.down, #m-equity.down { color: var(--down); }
.feed { font-size: 11px; color: var(--dim); border: 1px solid var(--line); padding: 1px 8px; border-radius: 3px; }
.feed.ok { color: var(--down); border-color: var(--down); }
.ver { font-size: 10px; color: var(--dim); opacity: .7; white-space: nowrap; }

/* ---- v2.4：页签式导航（文华式）——行情页 / 合约页 / 记录页 三页互斥，单源 body 类驱动 ---- */
main.pages { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page { flex: 1; min-height: 0; }
body.page-quotes #chart-page, body.page-quotes #records-view { display: none; }
body.page-chart #quotes-page, body.page-chart #records-view { display: none; }
body.page-records #quotes-page, body.page-records #chart-page { display: none; }

/* 行情页：纯行情表独占整页（全宽全高，一屏行数最大化） */
#quotes-page { display: flex; flex-direction: column; padding: 6px; }
#quotes-page .quotes-panel { flex: 1; }
.quotes-panel, .chart-panel { min-height: 0; }

/* 合约页：左大K线 + 右下单/持仓（v2.4 下单入口；空格收右栏纯看图） */
#chart-page { display: grid; gap: 6px; padding: 6px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
.right-col { display: grid; gap: 6px; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.panel-head {
  padding: 5px 10px; font-weight: 600; font-size: 12px; color: var(--dim);
  border-bottom: 1px solid var(--line); background: var(--panel2);
  border-radius: 4px 4px 0 0; display: flex; align-items: center; gap: 8px;
}
.panel-body { flex: 1; overflow: auto; min-height: 0; }

/* 表格 */
.grid { width: 100%; border-collapse: collapse; font-family: Consolas, monospace; font-size: 12px; }
.grid th {
  position: sticky; top: 0; background: var(--panel2); color: var(--dim);
  font-weight: 500; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.grid td { padding: 3px 8px; border-bottom: 1px solid #1e2831; white-space: nowrap; }
.grid .r { text-align: right; }
.grid tr.clickable { cursor: pointer; }
.grid tr.clickable:hover { background: #1f2a35; }
.grid tr.selected { background: #233242; }
.grid tr.empty td { color: var(--dim); text-align: center; padding: 18px 0; }
.up { color: var(--up); } .down { color: var(--down); }
.long-tag { color: var(--up); } .short-tag { color: var(--down); }

/* 下单表单 */
.order-form { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.order-form label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.order-form input, .order-form select {
  flex: 1; background: #0c1116; color: var(--text); border: 1px solid var(--line);
  border-radius: 3px; padding: 5px 8px; font: 13px Consolas, monospace; min-width: 0;
}
.order-form input:focus, .order-form select:focus { outline: none; border-color: var(--accent); }
.offset-row { display: flex; gap: 14px; flex-wrap: wrap; }
.offset-row label { display: flex; align-items: center; gap: 4px; color: var(--text); }
.btn-row { display: flex; gap: 10px; }
.btn {
  flex: 1; padding: 8px 0; border: none; border-radius: 4px; cursor: pointer;
  color: #fff; font: 600 14px "Microsoft YaHei";
}
.btn.buy { background: var(--buy); } .btn.buy:hover { background: #d95851; }
.btn.sell { background: var(--sell); } .btn.sell:hover { background: #3cb577; }
.btn.flat { background: #46586b; } .btn.flat:hover { background: #55708a; }   /* 平仓快捷键：中性蓝灰，区别于开仓红绿 */
.btn:disabled { opacity: .5; cursor: not-allowed; }
.hint { font-size: 11px; color: var(--dim); }
.hint.err { color: var(--up); }
.mini-money { display: flex; gap: 18px; font-size: 11px; color: var(--dim); }
.mini-money b { color: var(--text); font-family: Consolas, monospace; }

/* 撤单/平仓小按钮 */
.mini-btn {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 3px; padding: 1px 8px; cursor: pointer; font-size: 11px;
}
.mini-btn:hover { background: var(--accent); color: #fff; }
.mini-btn.on-count { color: #d8b350; border-color: #d8b350; }
.mini-btn.on-count:hover { background: #d8b350; color: #fff; }

/* 底部 tab */
.tabs { gap: 0; }
.tab {
  background: transparent; border: none; color: var(--dim); cursor: pointer;
  font: 600 12px "Microsoft YaHei"; padding: 4px 14px; border-radius: 3px 3px 0 0;
}
.tab.active { color: var(--text); background: var(--panel); }

/* 行情面板：筛选/排序 */
#q-filter {
  margin-left: auto; width: 130px; background: #0c1116; color: var(--text);
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 8px; font: 12px Consolas, monospace;
}
#q-filter:focus { outline: none; border-color: var(--accent); }
.sort-btn {
  background: transparent; color: var(--accent); border: 1px solid var(--line);
  border-radius: 3px; padding: 2px 8px; cursor: pointer; font: 11px "Microsoft YaHei"; white-space: nowrap;
}
.sort-btn:hover { border-color: var(--accent); }
.sort-btn.on { color: #fff; background: var(--accent); }

/* K线面板 */
.chart-body { position: relative; padding: 0; }
.chart-body canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.freq-btns { margin-left: auto; display: flex; gap: 4px; }
.freq {
  background: transparent; color: var(--dim); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 8px; cursor: pointer; font: 11px "Microsoft YaHei";
}
.freq:hover { border-color: var(--accent); color: var(--text); }
.freq.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* 条件单表单行 */
.cond-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.cond-row .chk { display: flex; align-items: center; gap: 4px; color: var(--text); white-space: nowrap; }
.cond-row select {
  background: #0c1116; color: var(--text); border: 1px solid var(--line);
  border-radius: 3px; padding: 3px 4px; font: 12px Consolas, monospace;
}
.cond-row input {
  flex: 1; background: #0c1116; color: var(--text); border: 1px solid var(--line);
  border-radius: 3px; padding: 4px 8px; font: 13px Consolas, monospace; min-width: 60px;
}
.cond-row input:focus, .cond-row select:focus { outline: none; border-color: var(--accent); }

/* 委托筛选 / 全撤 */
.tab-select {
  margin-left: auto; background: #0c1116; color: var(--text); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 6px; font: 11px "Microsoft YaHei";
}
.panel-head .sort-btn { margin-left: 0; }
#btn-cancel-all { color: var(--up); }
#btn-cancel-all:hover { border-color: var(--up); background: rgba(229, 72, 77, .12); }

/* 名称小字 / 操作列 */
.dim.nm { font-size: 11px; margin-left: 3px; }
td.ops { white-space: nowrap; }
td.ops .mini-btn { margin-right: 4px; }

/* 明细流 / 权益曲线 */
.tickflow .pad { padding: 4px 10px; }
.tickflow table { margin-top: 2px; }
.equity-tab { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.eq-stats { display: flex; gap: 20px; flex-wrap: wrap; padding: 6px 10px; font-size: 12px; color: var(--dim); }
.eq-stats b { color: var(--text); font-family: Consolas, monospace; }
.eq-canvas-wrap { flex: 1; min-height: 0; position: relative; }
.eq-canvas-wrap canvas { display: block; width: 100%; height: 100%; }

/* ---- v1.6：登录层 / 弹窗 / 用户栏 / 快捷价格组 / 流水 ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(5, 8, 11, .78);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  width: min(760px, 92vw); max-height: 86vh; display: flex; flex-direction: column;
}
.modal.small { width: min(380px, 92vw); }
.modal-head {
  padding: 8px 12px; font-weight: 600; font-size: 13px; color: var(--dim);
  border-bottom: 1px solid var(--line); background: var(--panel2);
  border-radius: 6px 6px 0 0; display: flex; align-items: center; gap: 8px;
}
.modal-head .mini-btn { margin-left: auto; }
.modal-body { padding: 10px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }

.auth-box { width: min(340px, 92vw); }
.auth-brand { text-align: center; font-size: 16px; font-weight: 600; padding: 14px 0 8px; }
.auth-brand .sub { display: block; font-size: 11px; color: var(--dim); font-weight: 400; margin-top: 2px; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); }
.auth-tabs .tab { flex: 1; }
.auth-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); }
.auth-form input {
  background: #0c1116; color: var(--text); border: 1px solid var(--line);
  border-radius: 3px; padding: 6px 8px; font: 13px Consolas, monospace;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
#auth-msg { text-align: center; padding: 0 14px 12px; color: var(--dim); }
#auth-msg.err { color: var(--up); }
.btn.wide { width: 100%; background: var(--accent); }
.btn.wide:hover { background: #4f9ae0; }

.user-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.user-bar #u-name { color: var(--text); font-weight: 600; margin-right: 2px; }

.stops-form, .transfer-form { display: flex; flex-direction: column; gap: 8px; }
.stops-form label, .transfer-form label {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim);
}
.stops-form input, .stops-form select, .transfer-form input, .transfer-form select {
  flex: 1; background: #0c1116; color: var(--text); border: 1px solid var(--line);
  border-radius: 3px; padding: 5px 8px; font: 13px Consolas, monospace; min-width: 0;
}
.stops-form input:focus, .stops-form select:focus,
.transfer-form input:focus, .transfer-form select:focus { outline: none; border-color: var(--accent); }
.hint.pad { padding: 2px 4px; }

.ptype-row { display: flex; gap: 4px; }
.ptype-row .freq { flex: 1; }
#o-price.ptype-locked { color: var(--dim); border-style: dashed; }

/* ---- v2.4：顶级页签栏（行情 | 各合约 | 记录）——取代 v1.7 图表工具栏内合约页签 ---- */
.page-tabs {
  display: flex; align-items: flex-end; gap: 4px; flex: none;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 4px 8px 0; overflow-x: auto; scrollbar-width: thin;
}
.ptab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #0c1116; color: var(--dim); border: 1px solid var(--line); border-bottom: none;
  border-radius: 4px 4px 0 0; padding: 3px 10px; cursor: pointer;
  font: 600 12px "Microsoft YaHei";
}
.ptab:hover { color: var(--text); border-color: var(--accent); }
.ptab.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.ptab i {
  font-style: normal; font-size: 13px; line-height: 1; padding: 0 1px;
  color: inherit; opacity: .65; border-radius: 2px;
}
.ptab i:hover { opacity: 1; background: rgba(255, 255, 255, .18); }

/* 确认弹窗摘要行 */
.c-rows { display: flex; flex-direction: column; gap: 6px; }
.c-rows > div {
  display: flex; justify-content: space-between; gap: 12px; font-size: 12px;
  color: var(--dim); border-bottom: 1px dashed #223040; padding-bottom: 4px;
}
.c-rows > div:last-child { border-bottom: none; }
.c-rows b { color: var(--text); font-family: Consolas, monospace; text-align: right; }
.c-rows b.long-tag, .c-rows b.up { color: var(--up); }
.c-rows b.short-tag, .c-rows b.down { color: var(--down); }

/* 结算 tab */
.settle-tab { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.st-date-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
#st-bar { gap: 16px; border-bottom: 1px solid var(--line); }
#st-summary { flex: 1; }
#st-summary b { color: var(--text); font-family: Consolas, monospace; }
.st-detail { flex: 1; overflow: auto; min-height: 0; }

/* 分析 tab 品种表 */
.sym-stats-table { margin-top: 2px; }
#stat-tiles { min-height: 24px; }
#stat-tiles b.plr { color: #d8b350; }

/* ---- v1.8：图表工具栏（v2.4 起只余指标组——合约页签升格顶级页签栏） ---- */
.chart-toolbar {
  display: flex; align-items: center; gap: 8px; flex: none;
  border-bottom: 1px solid var(--line); background: var(--panel2);
}
.ind-group { display: flex; align-items: center; gap: 4px; padding: 3px 8px; flex: none; }
.ind-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 0; }
#kchart { cursor: grab; }          /* 拖拽平移提示（拖拽中 JS 置 grabbing） */

/* ---- v1.9：全局 toast / 交易时段芯片 / CSV 导出 ---- */
#toasts {
  position: fixed; top: 46px; right: 14px; z-index: 90;    /* 低于 modal(100) */
  display: flex; flex-direction: column; gap: 6px; pointer-events: none; max-width: 340px;
}
.toast {
  background: rgba(22, 29, 36, .96); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  color: var(--text); font-size: 12px; padding: 6px 10px; border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  animation: toast-in .18s ease-out;
}
.toast.ok { border-left-color: var(--down); }
.toast.err { border-left-color: var(--up); }
.toast.warn { border-left-color: #d8b350; }
.toast.out { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

#o-session-chip {
  flex: none; font-size: 10px; padding: 1px 6px; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--dim);
}
#o-session-chip.ok { color: var(--down); border-color: var(--down); }
#o-session-chip.off { color: var(--dim); opacity: .8; }

#btn-export { color: var(--accent); }
#btn-export:hover { border-color: var(--accent); background: rgba(61, 139, 212, .12); }

/* ---- v2.0：闪电图（明细页签）/ 日净盈亏柱图（分析页签） ---- */
.flash-wrap { height: 120px; position: relative; margin: 4px 10px 2px; flex: none; }
.flash-wrap canvas { display: block; width: 100%; height: 100%; }
.dpnl-wrap { height: 130px; position: relative; margin: 4px 10px 2px; flex: none; }
.dpnl-wrap canvas { display: block; width: 100%; height: 100%; }

/* ---- v2.1：平仓交互（持仓面板 = 平仓主入口） ---- */
#positions-body tr.clickable { cursor: pointer; }        /* 行可点（selected 复用 .grid tr.selected） */
.pos-close {                                              /* 行内一键平腿：方向色实心（红买绿卖） */
  border: none; border-radius: 3px; padding: 2px 8px; cursor: pointer;
  font: 600 11px "Microsoft YaHei"; color: #fff;
}
.pos-close.long { background: var(--sell); }              /* 平多 = 卖出 → 绿 */
.pos-close.long:hover { background: #3cb577; }
.pos-close.short { background: var(--buy); }              /* 平空 = 买入 → 红 */
.pos-close.short:hover { background: #d95851; }
.panel-head .head-hint { font-weight: 400; font-size: 11px; color: var(--dim); }

/* ---- v2.2→v2.4：记录页（七张报表独占；入口从顶栏交易|记录改为页签栏「记录」） ---- */
#records-view { padding: 6px; display: flex; flex-direction: column; }
#records-view .bottom-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
#records-view .panel-body { flex: 1; overflow: auto; }

#quotes-table .star {                                         /* 自选星标列（点击切换，不触发行选中） */
  cursor: pointer; user-select: none; text-align: center; width: 24px;
  color: var(--dim); font-size: 13px;
}
#quotes-table .star:hover { color: #f5c518; }
#quotes-table .star.on { color: #f5c518; }
th.star-col { width: 24px; text-align: center; color: var(--dim); font-size: 11px; }
.q-mode { margin-left: auto; }                                /* 全部|自选 模式组（复用 .freq） */
.q-mode ~ #q-filter { margin-left: 0; }

.order-pill {                                                 /* 看图模式唤回胶囊（空格或点击；合约页内收起右栏） */
  display: none; border: 1px dashed var(--dim); background: transparent; color: var(--dim);
  border-radius: 4px; padding: 5px 10px; cursor: pointer;
  font: 12px "Microsoft YaHei"; text-align: center;
}
.order-pill:hover { color: var(--text); border-color: var(--accent); }
body.order-hidden .order-pill { display: block; position: fixed; right: 14px; bottom: 14px; z-index: 40; }
/* v2.4 看图模式：合约页内空格收起右侧整列（下单+持仓），K线占满全宽 */
body.order-hidden #chart-page { grid-template-columns: minmax(0, 1fr); }
body.order-hidden .right-col { display: none; }

/* ---- v2.3.3：行情行拖拽排序视觉态（源行半透明 + 落点行上下沿指示线） ---- */
body.q-dragging { cursor: grabbing; user-select: none; }
#quotes-body tr.drag-src td { opacity: .35; }
#quotes-body tr.drag-over-top td { border-top: 2px solid var(--accent); }
#quotes-body tr.drag-over-bottom td { border-bottom: 2px solid var(--accent); }

/* ---- v2.3：模拟股票（期货|股票 市场态） ---- */
.market-switch { display: flex; gap: 3px; flex: none; }        /* 顶栏 期货|股票 切换段（复用 .freq） */
.market-switch .freq { padding: 3px 12px; font-weight: 600; }
.market-switch .freq[data-market="stk"].active {
  background: var(--accent); color: #fff;                     /* 股票态用强调色区分市场 */
}
body.stk-market [data-fut-only] { display: none !important; }  /* 股票态隐藏期货专属元素 */
body:not(.stk-market) [data-stk-only] { display: none !important; }
body.stk-market .fut-col { display: none; }                    /* 行情表持仓量列（股票无持仓量） */
#stk-add-row { display: inline-flex; gap: 4px; align-items: center; margin-left: 8px; }
#stk-add-row input {
  width: 76px; padding: 2px 6px; border: 1px solid var(--line);
  border-radius: 3px; background: var(--panel2, #161a22); color: var(--text);
  font: 12px "Consolas", monospace;
}
button.pos-close:disabled {                                    /* 股票可卖为 0 的卖出钮（T+1 锁定） */
  opacity: .4; cursor: not-allowed;
}
#pos-head th:nth-child(2) { min-width: 64px; }                 /* 股票持仓名称列 */