/* pages.css — 三页专属样式补充 */

/* ===== index.html — 监控页 ===== */

/* 筛选工具栏 */
.filter-bar {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3) var(--space-5);
  align-items: end;
}
.filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
}
.filter-checks label {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-primary);
}
.filter-checks input[type=checkbox] { width: 15px; height: 15px; }
.filter-stats { font-size: var(--text-xs); color: var(--fg-secondary); margin-left: auto; }
.filter-stats b { color: var(--color-accent); }

/* 机会卡片 */
.opp-list { display: flex; flex-direction: column; gap: var(--space-3); }
.opp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  transition: border-color var(--duration-fast) var(--ease);
}
.opp-card:hover { border-color: var(--border-strong); }
.opp-card.long { border-left: 3px solid var(--color-long); }
.opp-card.short { border-left: 3px solid var(--color-short); }
.opp-card.urgent { border-color: var(--color-warn); }
.opp-symbol { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.opp-dev {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.opp-dev.pos { color: var(--color-short); }
.opp-dev.neg { color: var(--color-long); }
.opp-meta { font-size: var(--text-xs); color: var(--fg-secondary); line-height: 1.6; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.opp-action {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  white-space: nowrap;
}
.opp-tag { font-size: var(--text-xs); padding: 1px 6px; border-radius: var(--radius-sm); font-weight: var(--fw-semibold); }
.opp-tag.warn { background: var(--bg-warn); color: var(--color-warn); }

/* 信号流 */
.signal-list { display: flex; flex-direction: column; }
.signal {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  align-items: center;
}
.signal:last-child { border-bottom: none; }
.signal .time { color: var(--fg-tertiary); font-variant-numeric: tabular-nums; }
.signal .sym { font-weight: var(--fw-medium); }
.signal .val { font-variant-numeric: tabular-nums; }

/* 基差网格 */
.basis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.basis-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.basis-card .b-sym { font-weight: var(--fw-semibold); margin-bottom: var(--space-1); }
.basis-card .b-basis { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.basis-card .b-meta { font-size: var(--text-xs); color: var(--fg-secondary); margin-top: var(--space-1); }

/* 折溢价表标的列副标签 */
.sym-perp { color: var(--fg-tertiary); font-size: var(--text-xs); margin-left: var(--space-1); }

/* ===== live.html — 实盘看板 ===== */

/* 配置面板内的方向/策略固定展示 */
.field-display {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}
.config-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); flex-wrap: wrap; }
.config-msg { font-size: var(--text-xs); color: var(--fg-tertiary); }

/* 表格内 hint（副信息） */
.cell-hint { font-size: var(--text-xs); color: var(--fg-tertiary); margin-top: 2px; }

/* 两列布局（操作流水 / 策略活动） */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 980px) { .grid-2col { grid-template-columns: 1fr; } }

/* 策略活动 / 操作流水 的 tag */
.act-tag { font-size: var(--text-xs); padding: 1px 8px; border-radius: var(--radius-sm); font-weight: var(--fw-semibold); }
.act-tag.eval { background: var(--bg-warn); color: var(--color-warn); }
.act-tag.open { background: var(--bg-long); color: var(--color-long); }
.act-tag.close { background: var(--bg-neutral); color: var(--color-neutral); }
.act-tag.rej { background: var(--bg-short); color: var(--color-short); }
.act-tag.hold { background: var(--bg-hold); color: var(--color-hold); }

/* 操作流水/策略活动 时间列小字 */
.col-time { font-size: var(--text-xs); color: var(--fg-tertiary); white-space: nowrap; }

/* ===== backtest.html — 回测页 ===== */

/* 运行按钮行 */
.run-row { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); flex-wrap: wrap; }
.status-msg { font-size: var(--text-sm); color: var(--fg-secondary); }
.status-msg .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-default); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: var(--space-2); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 进度条 */
.progress-bar { width: 200px; height: 6px; background: var(--bg-surface); border-radius: var(--radius-full); overflow: hidden; display: inline-block; vertical-align: middle; margin: 0 var(--space-2); }
.progress-bar > div { height: 100%; background: var(--color-accent); border-radius: var(--radius-full); transition: width var(--duration-normal) var(--ease); }

/* 多空对比卡片 */
.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 780px) { .side-grid { grid-template-columns: 1fr; } }
.side-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.side-card.long { border-left: 3px solid var(--color-long); }
.side-card.short { border-left: 3px solid var(--color-short); }
.side-card h3 { font-size: var(--text-md); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.side-card .row { display: flex; justify-content: space-between; padding: var(--space-1) 0; font-size: var(--text-sm); border-bottom: 1px solid var(--border-subtle); }
.side-card .row:last-child { border-bottom: none; }
.side-card .row > span:first-child { color: var(--fg-secondary); }

/* 回测参数表单的复选框行 */
.check-field { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); padding-top: 22px; }
.check-field label { font-size: var(--text-sm); color: var(--fg-primary); text-transform: none; letter-spacing: 0; }

/* 爆仓警告 */
.liquidation-warn {
  background: var(--bg-short);
  border: 1px solid var(--color-short);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--color-short);
  font-weight: var(--fw-semibold);
  display: flex; align-items: center; gap: var(--space-2);
}

/* 明细表内说明子行 */
.detail-sub { font-size: var(--text-xs); color: var(--fg-tertiary); padding-top: 0; border-top: none; }
/* ===== backtest_hk.html — 港A回测页 ===== */

/* US-Beta 高跟随标的行高亮（|beta|≥1 提示跟随美股风险） */
tr.beta-high td { background: var(--bg-warn); }
.beta-badge {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
}
.beta-badge.high { background: var(--bg-short); color: var(--color-short); }
.beta-badge.low { background: var(--bg-long); color: var(--color-long); }
.beta-badge.mid { background: var(--bg-info); color: var(--color-info); }

/* 被筛除标的提示块 */
.excluded-box {
  background: var(--bg-surface);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-secondary);
}

/* 市场分段切换（港股 / A股）复用 .segmented，仅补宽度 */
.market-seg { margin-bottom: var(--space-3); }