:root {
  --bg: #0b0e11;        /* 币安主背景 */
  --panel: #181a20;
  --panel-2: #1e2329;   /* 输入框/按钮底 */
  --panel-3: #252930;
  --border: #2b3139;
  --text: #eaecef;
  --muted: #848e9c;
  --accent: #f0b90b;    /* 币安黄 */
  --up: #f6465d;        /* 涨=红（国内惯例） */
  --down: #0ecb81;      /* 跌=绿 */
  --warn: #f0a020;
  --ok: #0ecb81;
  --danger: #f6465d;
  --radius: 8px;
  /* 下方表格区（持仓/委托/流水）高度：由「高度预设下拉」或分隔条写成固定 px，
     这里的 clamp 只是 JS 没生效前的兜底。默认压得比原来矮一档，把高度让给 K 线 + MACD。 */
  --tab-h: clamp(112px, 18vh, 240px);
  /* 右侧面板宽度：可拖边缘调节（存 localStorage） */
  --right-w: 344px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.55 -apple-system, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
}

/* ---------------- 登录页（保持独立氛围） ---------------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 10%, #16283f 0%, #0b0e11 55%);
  padding: 20px;
  overflow: auto;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}

.auth-card h1 { margin: 0 0 4px; font-size: 21px; letter-spacing: .5px; }
.auth-card .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 22px; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }

input, select, textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
input:focus, select:focus { border-color: var(--accent); }
input:disabled { opacity: .55; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

button {
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 8px 14px;
  transition: filter .15s;
}
button:hover { filter: brightness(1.2); }
button:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
  font-weight: 700;
  width: 100%;
  padding: 10px;
}
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: 4px 9px; font-size: 11.5px; border-radius: 5px; }

.msg { margin-top: 10px; font-size: 12px; min-height: 16px; white-space: pre-wrap; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--ok); }

/* ---- 登录页：显示口令 / 记住口令 / 本机重置口令 ---- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 38px; }
.eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 5px;
  color: var(--muted);
}
.eye:hover { color: var(--text); background: rgba(255, 255, 255, .06); filter: none; }
.eye .i-off { display: none; }
.eye.on .i-on { display: none; }
.eye.on .i-off { display: block; }
.eye.on { color: var(--accent); }

.row-between {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 14px; font-size: 12px;
}
.chk { display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; user-select: none; }
.chk input[type="checkbox"] {
  width: 14px; height: 14px; padding: 0; margin: 0; flex: 0 0 auto;
  background: none; border: none; accent-color: var(--accent); cursor: pointer;
}
.chk:hover span { color: var(--text); }
.lnk { color: var(--muted); text-decoration: none; cursor: pointer; }
.lnk:hover { color: var(--accent); text-decoration: underline; }

.reset-box {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--border); text-align: left;
}
.reset-t {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; font-size: 13px;
}
.reset-x { color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1; padding: 0 3px; }
.reset-x:hover { color: var(--danger); }
.reset-hint {
  font-size: 11.5px; color: var(--muted); line-height: 1.7;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 12px;
}
.reset-hint b { color: var(--warn); font-weight: 600; }

/* ================= 整体骨架 ================= */
/* 只钉死顶栏/底栏；.main 必须保持 flex:1 占满剩余视口——
   若让它「按内容自适应高」，K 线容器会越撑越高，把下方交易区顶出屏幕 */
body > .topbar, body > .botbar { flex: 0 0 auto; }

body {
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  height: 46px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 30;
}

.logo { font-weight: 700; letter-spacing: .5px; font-size: 14.5px; }
.logo em { color: var(--accent); font-style: normal; }
.spacer { flex: 1; }

.tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.tag.live { border-color: var(--danger); color: var(--danger); }
.tag.dry { border-color: var(--warn); color: var(--warn); }
.tag.ok { border-color: var(--ok); color: var(--ok); cursor: default; }

/* ================= 主区：左图表 + 右面板 ================= */
.main {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 1px;
  background: var(--border);      /* 用来当分隔线 */
}

.left {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;              /* 矮窗口下宁可内部收缩，也绝不能把下方交易区顶出屏幕 */
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* 右侧面板：宽度可拖（左缘有一条 5px 的拖拽条） */
.right {
  width: var(--right-w);
  flex: 0 0 var(--right-w);
  position: relative;
  overflow-y: auto;
  background: var(--bg);
  padding: 8px 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.r-split {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 25; touch-action: none;
}
.r-split:hover { background: rgba(240, 185, 11, .18); }
.r-split.dragging { background: rgba(240, 185, 11, .35); }
.right::-webkit-scrollbar { width: 6px; }
.right::-webkit-scrollbar-thumb { background: #333a44; border-radius: 3px; }

@media (max-width: 1080px) {
  html, body { overflow: auto; }
  .main { flex-direction: column; }
  .right { width: auto; flex: none; }
  .r-split { display: none; }          /* 窄屏上下堆叠，不用拖宽 */
  .chart-wrap { height: 420px; flex: none !important; }
  .h-split { display: none; }          /* 窄屏不拖，按窗口滚动 */
}

/* ---------- 行情条（K 线上方） ---------- */
.quote-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 14px 6px;
  flex-wrap: wrap;
}

/* hidden 属性必须真正隐藏（.sym-pop/.xhair 设了 display:flex 会压过 hidden 的 UA 样式） */
.sym-pop[hidden], .m-pop[hidden], .xhair[hidden] { display: none !important; }

/* ---------- 选币：带图标的可搜索下拉 ---------- */
.sym-pick { position: relative; flex: none; }

.sym-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px 4px 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .4px;
  min-width: 160px; max-width: 220px;
}
.sym-btn:hover { border-color: var(--accent); }
.sym-btn em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 10px; }
.sym-btn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sym-ico { width: 21px; height: 21px; border-radius: 50%; flex: none; background: var(--panel-3); }
.sym-q { color: var(--muted); font-weight: 500; font-size: 11.5px; flex: none; }

.sym-pop {
  position: absolute; left: 0; top: calc(100% + 6px);
  width: 546px; max-width: 86vw; z-index: 80;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 18px 52px rgba(0, 0, 0, .65);
  display: flex; flex-direction: column; overflow: hidden;
}
.sym-srow {
  display: flex; gap: 6px; padding: 8px;
  border-bottom: 1px solid var(--border); flex: none;
}
.sym-srow input { flex: 1; padding: 6px 9px; font-size: 12.5px; }
.sym-list { max-height: 380px; overflow-y: auto; }
.sym-list::-webkit-scrollbar { width: 6px; }
.sym-list::-webkit-scrollbar-thumb { background: #333a44; border-radius: 3px; }
.sym-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; cursor: pointer; font-size: 12.5px;
}
.sym-item:hover, .sym-item.hi { background: var(--panel-2); }
.sym-item.on { background: rgba(240, 185, 11, .10); }
.sym-item img { width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--panel-3); }
.sym-item .si-b { font-weight: 700; min-width: 78px; }
.sym-item .si-q { color: var(--muted); font-size: 10.5px; }
.sym-item .si-mc, .sym-item .si-v {
  color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;
  width: 66px; text-align: right; flex: none;
}
.sym-item .si-mc { margin-left: auto; }
.sym-item .si-p { width: 96px; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.sym-item .si-c { width: 76px; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.sym-foot {
  padding: 6px 10px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 11px; flex: none;
}

/* 表格里可点击跳 K 线的合约名 */
.pick-sym { cursor: pointer; }
.pick-sym:hover { color: var(--accent); }
.pick-sym .ps-in { display: inline-flex; align-items: center; gap: 6px; }
.pick-sym img { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--panel-3); }

/* 图例数值颜色（涨红跌绿要能压过默认的 --text） */
.c-legend b.up, .m-legend b.up { color: var(--up); }
.c-legend b.down, .m-legend b.down { color: var(--down); }

.q-price { display: flex; align-items: baseline; gap: 10px; }
.last { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chg { font-size: 13px; font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }

.qitem { display: flex; flex-direction: column; line-height: 1.35; }
.qitem i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.qitem b { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }

.itv-btns { display: flex; gap: 2px; }
.itv-btns button {
  border: none; background: transparent;
  color: var(--muted); font-size: 12px; padding: 5px 9px; border-radius: 5px;
}
.itv-btns button:hover { color: var(--text); background: var(--panel-2); }
.itv-btns button.on { color: var(--accent); background: var(--panel-2); }

/* ---------- 图表区（K 线主图 + MACD 副图，装在同一个框里） ---------- */
.chart-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 250px;             /* 矮窗口先压 K 线，保住下方持仓/流水 */
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}
/* 一个外框把主图和副图包在一起，中间只留一条发丝分隔线（两个框看起来是断开的、还会各自加边框） */
.c-frame {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.c-box { position: relative; display: block; min-height: 0; }
/* 图表画布绝对定位铺满自己的盒子：高度完全由 flex 布局决定，
   图表库设置的像素高度再也影响不到布局（断掉越撑越高的反馈循环） */
.c-box > div:first-child {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* 主图吃剩余高度；MACD 副图必须有硬性最小高度，
   否则矮窗口算出 0 高，柱形（hist）整条被挤没 —— 这就是「柱形都挤没了」的根因。 */
.c-main { flex: 3 1 0; min-height: 150px; }
.c-sub {
  flex: 1 1 0; min-height: 124px; max-height: 240px;
  border-top: 1px solid var(--border);
}
/* TV 换装模式（2026-10-12）：K 线由 TV 组件直供，本地 MACD 画布废弃，
   副图压成一条细参数条（H/武装线数值 + MACD 参数按钮还在这里）。 */
.c-frame.tv-mode .c-main { flex: 1 1 0; }
.c-frame.tv-mode .c-sub { flex: 0 0 auto; min-height: 0; max-height: none; padding: 2px 4px; }
.c-frame.tv-mode .c-sub > div:first-child { display: none; }
.c-frame.tv-mode .m-legend { position: static; max-width: none; }

/* 图内浮层文字（OHLC / MACD 数值）—— 不挡鼠标 */
.c-legend {
  position: absolute; left: 10px; top: 3px; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
  font-size: 11.5px; line-height: 1.7; color: var(--muted);
  font-variant-numeric: tabular-nums; pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  max-width: calc(100% - 70px);
}
.c-legend b { font-weight: 700; color: var(--text); }
.c-legend .lg-sym { color: var(--text); font-weight: 700; font-size: 12.5px; }
.c-legend .lg-t { color: var(--muted); }
.m-legend .ml-set { pointer-events: auto; margin-left: 2px; }

/* 十字架浮标：时间 / 价格 */
.xhair {
  position: absolute; z-index: 12; pointer-events: none;
  display: flex; align-items: baseline; gap: 9px;
  background: rgba(24, 26, 32, .96); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 8px; font-size: 11.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.xhair .xt { color: var(--muted); }
.xhair .xp { font-weight: 700; }

/* ---------- 持仓行：每币「自动交易」开关 + 部分平仓/止盈止损弹层 ---------- */
.pos-ops { white-space: nowrap; }
.pos-ops .btn-sm { margin-right: 4px; }
.pc-sw {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; user-select: none; font-size: 11px; color: var(--muted);
}
.pc-sw input { display: none; }
.pc-sw i {
  width: 26px; height: 15px; border-radius: 999px;
  background: #2e3a2e; border: 1px solid #3f513f; position: relative; flex: none;
  transition: background .15s, border-color .15s;
}
.pc-sw i::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #8a938c; transition: left .15s, background .15s;
}
.pc-sw input:checked + i { background: #3d2f12; border-color: rgba(240, 185, 11, .55); }
.pc-sw input:checked + i::after { left: 12px; background: var(--accent); }
.pc-sw.off span { color: #e05252; }
.pos-pop {
  position: fixed; z-index: 60; width: 302px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; box-shadow: 0 16px 44px rgba(0, 0, 0, .65);
}
.pp-title { font-weight: 700; font-size: 12.5px; margin-bottom: 8px; }
.pp-row { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.pp-row label { font-size: 11.5px; color: var(--muted); width: 62px; flex: none; }
.pp-row input { padding: 4px 7px; font-size: 12px; min-width: 0; flex: 1; }
.pp-row .mini { flex: none; }
.pp-btns { gap: 5px; }
.pp-btns button {
  flex: 1; padding: 5px 0; font-size: 11.5px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--fg);
  border-radius: 6px; cursor: pointer;
}
.pp-btns button:hover { border-color: var(--accent); }

/* 「止盈/止损平仓量」下拉：全平 or 部分比例 or 自定义数量 */
.pp-frac select {
  flex: 1; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--fg);
  border-radius: 6px; padding: 4px 6px; font-size: 11.5px;
}
.pp-frac select:focus { border-color: var(--accent); outline: none; }
.pp-row .pp-qty-c { flex: 0 0 74px; }
.pp-sec .btn-primary { width: 100%; padding: 6px; font-size: 12px; }
.pp-sec[hidden], .pos-pop[hidden] { display: none !important; }

/* MACD 参数手动修改 */
.m-pop {
  position: absolute; right: 10px; top: 46%; z-index: 30; width: 240px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; box-shadow: 0 16px 44px rgba(0, 0, 0, .65);
}
.mp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.mp-row label { font-size: 11.5px; color: var(--muted); width: 66px; flex: none; }
.mp-row input { padding: 4px 7px; font-size: 12px; }
.mp-btns { display: flex; gap: 6px; margin-top: 2px; }
.mp-btns .btn-primary { width: auto; flex: 1; padding: 6px; font-size: 12px; }

/* 「跟随该币预设」开关 */
.mp-follow {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text); cursor: pointer;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.mp-follow input[type="checkbox"] { width: auto; margin: 0; padding: 0; accent-color: var(--accent); }

/* MACD 图例里的线值（颜色与图上线条一一对应，2026-10-15 重排） */
#ml-thr { color: #22c55e; }    /* 进场H 绿虚线 */
#ml-arm { color: #c084fc; }    /* 武装线 紫虚线 */
#ml-exit { color: #fb923c; }   /* 出场线 橙虚线 */
#ml-dif { color: #f0b90b; }    /* DIF 黄曲线 */
#ml-dea { color: #4aa3ff; }    /* DEA 蓝曲线 */
.c-dif { color: #f0b90b !important; }
.c-dea { color: #4aa3ff !important; }

/* ---------- 可拖拽分隔条（图表 ⇄ 持仓区） ---------- */
.h-split {
  flex: 0 0 8px;
  height: 8px;
  cursor: row-resize;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  position: relative;
  z-index: 5;
}
.h-split::after {
  content: "";
  width: 52px; height: 3px; border-radius: 2px;
  background: #2b3139;
  transition: background .15s, width .15s;
}
.h-split:hover::after, .h-split.dragging::after {
  background: var(--accent);
  width: 86px;
}
.h-split.dragging { background: rgba(240, 185, 11, .06); }

/* ---------- Tabs + 表格区（K 线下方） ---------- */
.tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;               /* 窄窗口放不下时换行，绝不把右侧的 收起/高度/刷新 挤出视野 */
  gap: 4px;
  padding: 2px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  min-height: 36px;
  flex: none;
}

.tab {
  border: none; background: transparent;
  color: var(--muted); font-size: 12.5px; padding: 0 12px; height: 30px;
  border-radius: 0; position: relative;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); font-weight: 600; }
.tab.on::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 2px; background: var(--accent);
}
.tab span { margin-left: 4px; font-size: 11px; }

.tab-body {
  height: var(--tab-h);
  min-height: 96px;
  overflow: auto;
  flex: 0 1 var(--tab-h);        /* 允许被压缩：极矮窗口下宁可表格矮点也别消失 */
  background: var(--bg);
}

/* 交易记录区「高度预设下拉」（与上方拖拽条共用同一套 --tab-h） */
.tab-h-pick { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.tab-h-pick select {
  width: auto; height: 24px;
  padding: 1px 4px 1px 6px;
  font-size: 11.5px; border-radius: 5px;
  background: var(--panel-2);
  color: var(--accent); font-weight: 600;
}
.tab-h-pick select:hover { border-color: var(--accent); }

/* 上拉收起：整个表格区（含分隔条）藏起来，K 线 + MACD 占满剩余高度 */
.left.collapsed .tab-body, .left.collapsed .h-split { display: none !important; }
.tab-col { min-width: 64px; flex: none; }
.tab-body::-webkit-scrollbar { width: 6px; height: 6px; }
.tab-body::-webkit-scrollbar-thumb { background: #333a44; border-radius: 3px; }

/* ---------- 通用表格 ---------- */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 7px 10px; text-align: right; white-space: nowrap; }
th {
  color: var(--muted); font-weight: 500; font-size: 11px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 2;
}
td { border-bottom: 1px solid #1c2127; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover { background: #16191f; }

.empty { color: var(--muted); font-size: 12px; padding: 20px 14px; text-align: center; }

/* ---------- 右列面板 ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
}
.p-head {
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1b1e24;
}
.p-body { padding: 11px 12px; }
#keys-box.p-body.empty, .p-body.empty { text-align: center; color: var(--muted); }

.kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.5px; }
.kv span:first-child { color: var(--muted); }
.kv b { font-variant-numeric: tabular-nums; font-weight: 600; }

.hint { color: var(--muted); font-size: 11px; line-height: 1.6; }
.hint.warn { color: var(--warn); }

.side-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-btns button { padding: 9px; font-weight: 700; font-size: 13px; line-height: 1.35; }
.side-btns button i { font-style: normal; font-weight: 400; font-size: 11px; opacity: .85; }
.side-btns .long.on { background: var(--up); border-color: var(--up); color: #fff; }
.side-btns .short.on { background: var(--down); border-color: var(--down); color: #fff; }
.side-btns .long:not(.on) { color: var(--up); }
.side-btns .short:not(.on) { color: var(--down); }

.pct-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.pct-btns button { padding: 5px 0; font-size: 11.5px; color: var(--accent); border-color: var(--border); background: transparent; }

.mini { font-size: 11.5px; color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 7px; }
.grow { flex: 1; min-width: 0; }

tr.act td { background: #1a1f27; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.dot.on { background: var(--ok); }
.dot.off { background: #3a424d; }
.dot.bad { background: var(--danger); }

/* ================= 底部：与币安同步的热门榜 ================= */
.botbar {
  flex: 0 0 auto;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.bb-tabs {
  display: flex; align-items: center; gap: 2px;
  padding: 3px 10px 0; height: 27px;
}
.bb-tabs button {
  border: none; background: transparent; color: var(--muted);
  font-size: 12px; padding: 3px 10px; border-radius: 5px; height: 22px;
}
.bb-tabs button:hover { color: var(--text); background: var(--panel-2); }
.bb-tabs button.on { color: var(--accent); background: var(--panel-2); font-weight: 600; }
.bb-tabs .mini { margin-right: 8px; }

.hotbar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 14px;
  overflow-x: auto;
  white-space: nowrap;
  flex: 0 0 36px;
}
.hotbar::-webkit-scrollbar { height: 0; }
.hitem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  flex: none;
}
.hitem:hover { filter: brightness(1.3); }
.hitem.on { background: rgba(240, 185, 11, .12); border-radius: 5px; padding: 1px 6px; margin: 0 -6px; }
.hitem img { width: 17px; height: 17px; border-radius: 50%; flex: none; background: var(--panel-3); }
.hitem .hs { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.hitem .hp { font-variant-numeric: tabular-nums; font-weight: 600; }
.hitem .hc { font-variant-numeric: tabular-nums; }

/* 顶栏里的链接型按钮（策略实盘入口） */
a.btn-sm { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
a.btn-sm:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 平仓盈亏面板（Tab 4） ---------- */
.pnl-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; position: sticky; top: 0; z-index: 2;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.pnl-head .btn-sm.on {
  background: var(--accent); border-color: var(--accent); color: #111;
  font-weight: 700;
}
/* 汇总压成一条（原 4 张大卡会把下面的逐笔明细顶出可视区） */
.pnl-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.pnl-strip .ps { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; }
.pnl-strip .ps i { font-style: normal; color: var(--muted); font-size: 11px; }
.pnl-strip .ps b { font-weight: 700; font-size: 13.5px; }
.pnl-strip .ps em { font-style: normal; color: var(--muted); font-size: 10px; }
.pnl-filter {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; position: sticky; top: 37px; z-index: 2;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.pnl-filter .btn-sm.on,
.pnl-head .btn-sm.on {
  background: var(--accent); border-color: var(--accent); color: #111; font-weight: 700;
}
.pnl-chip { cursor: pointer; }
.pnl-chip.on { border-color: var(--accent); background: rgba(240, 185, 11, .12); }
.pnl-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 10px;
}
.pnl-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 11px; min-width: 0;
}
.pnl-card .k { color: var(--muted); font-size: 11px; }
.pnl-card .v { font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: .3px; }
.pnl-card .s { color: var(--muted); font-size: 10.5px; margin-top: 1px; }
.pnl-chips {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px;
}
.pnl-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px;
}
.pnl-chip b { font-weight: 700; }
.pnl-chip em { font-style: normal; font-weight: 700; }
.pnl-chip i { font-style: normal; color: var(--muted); font-size: 10px; }
@media (max-width: 720px) {
  .pnl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 入池币条（热币策略池） ---------- */
.poolbar {
  display: flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 14px;
  border-bottom: 1px solid #1c2127;
  background: var(--bg);
}
.poolbar .pb-l {
  flex: none; font-size: 11px; color: var(--accent);
  border: 1px solid rgba(240, 185, 11, .4); border-radius: 999px;
  padding: 1px 8px; user-select: none;
}
.poolbar .pb-l i { font-style: normal; color: var(--muted); margin-left: 4px; }
.pb-list {
  display: flex; align-items: center;
  overflow: hidden; white-space: nowrap;
  scrollbar-width: none; min-width: 0; flex: 1;
}
.pb-list::-webkit-scrollbar { height: 0; }
/* 跑马灯：内容两份接龙，translateX(-50%) 正好一屏无缝循环 */
.pb-track {
  display: inline-flex; flex: none;
  animation: pb-marquee linear infinite;
  will-change: transform;
}
.poolbar:hover .pb-track { animation-play-state: paused; }
@keyframes pb-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.pb-half {
  display: inline-flex; align-items: center; gap: 16px;
  padding-right: 16px; flex: none;
}
.pb-it {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; font-size: 11.5px; flex: none; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pb-it:hover { color: var(--text); filter: brightness(1.25); }
.pb-it img { width: 15px; height: 15px; border-radius: 50%; background: var(--panel-3); }
.pb-it b { font-weight: 600; }
.pb-it.on { color: var(--accent); }
.pb-it .pd { color: var(--warn); font-size: 9px; margin-left: -2px; }
/* 三策略池 chip（趋势/网格/马丁）排在热币池后面，小方块标区分来源 */
.p3tag {
  display: inline-block; font-size: 9.5px; font-weight: 700; line-height: 1;
  padding: 2px 3.5px; border-radius: 3px; color: #0b0e11;
}
.p3tag.t3 { background: #f6465d; }   /* 趋势池 · 红 */
.p3tag.g3 { background: #fcd535; }   /* 网格池 · 黄 */
.p3tag.m3 { background: #378ADD; }   /* 马丁池 · 蓝 */
.p3cg { font-size: 10.5px; }
/* 顶栏三策略入口：色点区分，一眼对上入池条里的趋/网/马标 */
.nav-s { font-weight: 600; }
.nav-s::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 5px; vertical-align: 1px;
}
.nav-trend::before { background: #f6465d; }
.nav-grid::before { background: #fcd535; }
.nav-martin::before { background: #378ADD; }
.nav-s:hover { color: var(--accent, #fcd535); }

/* ---------- 右侧面板：市场列表 · 池内币 ---------- */
.mkt-tabs {
  display: flex; gap: 2px; padding: 6px 8px 0;
  border-bottom: 1px solid var(--border);
}
.mkt-tabs button {
  border: none; background: transparent; color: var(--muted);
  font-size: 11.5px; padding: 3px 9px; border-radius: 5px;
}
.mkt-tabs button:hover { color: var(--text); }
.mkt-tabs button.on { color: var(--accent); background: var(--panel-2); font-weight: 600; }
.mkt-list { max-height: clamp(260px, 40vh, 680px); overflow-y: auto; }
.mkt-list::-webkit-scrollbar { width: 6px; }
.mkt-list::-webkit-scrollbar-thumb { background: #333a44; border-radius: 3px; }
.mkt-it {
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 10px; cursor: pointer;
  border-bottom: 1px solid #1c2127; font-size: 12px;
}
.mkt-it:hover { background: var(--panel-2); }
.mkt-it .m1 { display: flex; align-items: center; gap: 6px; }
.mkt-it .m1 img { width: 16px; height: 16px; border-radius: 50%; background: var(--panel-3); }
.mkt-it .m1 b { font-weight: 700; }
.mkt-it .m1 .rk { color: var(--muted); font-size: 10px; }
.mkt-it .m1 .pd { color: var(--warn); font-size: 9px; }
.mkt-it .m1 .st { margin-left: auto; font-size: 10px; border-radius: 4px; padding: 0 5px; }
.mkt-it .m1 .st.act { color: var(--ok); border: 1px solid rgba(14, 203, 129, .45); }
.mkt-it .m1 .st.hold { color: var(--accent); border: 1px solid rgba(240, 185, 11, .5); }
/* 账面仓·未开出（引擎账面有仓、交易所没开出）—— 警示橙 */
.mkt-it .m1 .st.frz { color: #f97316; border: 1px solid rgba(249, 115, 22, .55); }
.mkt-it .m1 .st.cool { color: var(--muted); border: 1px solid var(--border); }
.mkt-it .m2 { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.mkt-it .m2 .mp { font-weight: 700; }
.mkt-it .m2 .dot { letter-spacing: 1px; font-size: 10.5px; }
.mkt-it .m2 .ent { margin-left: auto; font-size: 10.5px; }
.mkt-it .m3 { display: flex; gap: 8px; color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mkt-it .m3 b { color: var(--text); font-weight: 600; }