/* 组合回测沙盘 —— 对齐平台令牌（主色 #27548c · 赭石 #b45309 · 边框 #e3e4e6 · 底 #f3f5f9） */

/* 顶部合规声明条：位置显著、克制，不抢主体 */
.sb-notice { background: #fbf7ef; border: 1px solid #eadfc9; border-radius: 10px;
  color: #7a6a4f; font-size: 12px; line-height: 1.8; padding: 9px 14px; margin-bottom: 14px; }

/* 图 1 上方的标的选择条：让「这张图画的是谁」一眼可见、一点即换 */
.sb-pick-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -2px 0 12px; padding: 8px 12px; background: #f7f9fc; border: 1px solid #eef1f6; border-radius: 10px; }
.sb-pick-lb { font-size: 12px; color: #8a93a5; white-space: nowrap; }
.sb-pick-list { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sb-mtab { border: 1px solid #dde4ee; background: #fff; color: #3d4657; font-size: 12.5px;
  padding: 4px 12px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.sb-mtab i { font-style: normal; font-size: 10.5px; color: #9aa3b2; font-variant-numeric: tabular-nums; }
.sb-mtab:hover { border-color: #b3c7e2; color: #27548c; }
.sb-mtab.on { background: #27548c; border-color: #27548c; color: #fff; }
.sb-mtab.on i { color: rgba(255,255,255,.7); }
.sb-note-inline { display: block; margin: -6px 0 10px; font-size: 12px; color: #8a93a5; }

.sb-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--gl-line, #e3e4e6); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.sb-grp { display: inline-flex; align-items: center; gap: 6px; }
.sb-lb { font-size: 12.5px; color: #3d4657; font-weight: 500; }
.sb-unit { font-size: 12px; color: #6b7688; }
.sb-win { display: inline-flex; gap: 4px; }
.sb-tab { border: 1px solid #d5dbe4; background: #fff; color: #3d4657; font-size: 12.5px;
  padding: 4px 12px; border-radius: 99px; cursor: pointer; }
.sb-tab:hover { border-color: #27548c; color: #27548c; }
.sb-tab.on { background: var(--gl-blue, #27548c); border-color: var(--gl-blue, #27548c); color: #fff; }
.sb-in { border: 1.5px solid #d5dbe4; border-radius: 8px; padding: 5px 10px; font-size: 13px;
  color: #0a0a0a; background: #fff; font-variant-numeric: tabular-nums; }
.sb-in:hover { border-color: #b9c4d4; }
.sb-in:focus { outline: none; border-color: var(--gl-blue, #27548c);
  box-shadow: 0 0 0 3px rgba(39, 84, 140, .12); }
.sb-in-sm { width: 82px; }
.sb-in-lg { width: 320px; }
/* 自定义回测区间（起止日期），[hidden] 兜底防 display 覆盖 */
.sb-custom { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.sb-custom[hidden] { display: none; }
.sb-date { width: 132px; padding: 4px 8px; font-size: 12.5px; color: #0a0a0a; }
.sb-go { border: 1px solid var(--gl-blue, #27548c); background: var(--gl-blue, #27548c); color: #fff; font-size: 13px;
  padding: 6px 18px; border-radius: 8px; cursor: pointer; }
.sb-go:hover { opacity: .92; }
.sb-go:disabled { opacity: .55; cursor: default; }
.sb-hint { font-size: 12px; color: #8a93a5; }

/* ===== 观察对象：逐个添加的标签 + 截图识别 ===== */
.sb-grp-pool { flex: 1 1 auto; min-width: 260px; position: relative; }
/* 联想下拉：中文名 / 拼音首字母 */
.sb-sug { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid #dde4ee; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20,40,80,.10); padding: 4px; max-height: 280px; overflow-y: auto; }
.sb-sug-i { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: #3d4657; text-align: left; }
.sb-sug-i b { font-weight: 600; }
.sb-sug-i i { font-style: normal; font-size: 11.5px; color: #9aa3b2; font-variant-numeric: tabular-nums; }
.sb-sug-i i:last-child { margin-left: auto; }
.sb-sug-i:hover, .sb-sug-i.on { background: #eef3fb; color: #27548c; }
.sb-grp-note { flex-basis: 100%; }
.sb-icobtn { border: 1px solid #d5dbe4; background: #fff; color: var(--gl-blue, #27548c); font-size: 12.5px;
  padding: 5px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.sb-icobtn:hover { border-color: var(--gl-blue, #27548c); background: #f5f8fd; }

.sb-poolbar { margin-bottom: 14px; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-chips-empty { font-size: 12.5px; color: #9aa3b2; padding: 6px 0; }
.sb-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid #dde4ee; border-radius: 99px; padding: 4px 6px 4px 12px;
  font-size: 12.5px; color: #3d4657; cursor: pointer; }
.sb-chip:hover { border-color: #b3c7e2; }
.sb-chip b { font-weight: 600; }
.sb-chip i { font-style: normal; font-size: 11px; color: #9aa3b2; font-variant-numeric: tabular-nums; }
.sb-chip-x { border: none; background: #f0f3f8; color: #7a8496; width: 18px; height: 18px;
  line-height: 1; border-radius: 50%; cursor: pointer; font-size: 13px; padding: 0; }
.sb-chip-x:hover { background: #e6ebf4; color: #27548c; }

.sb-ocr { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f7f9fc; border: 1px dashed #dde4ee; border-radius: 10px; padding: 9px 12px; }
.sb-ocr-t { font-size: 12.5px; color: #5a6478; }
.sb-ocr-t.dn { color: #b45309; }
.sb-ocr-c, .sb-ocr-all { border: 1px solid #dde4ee; background: #fff; color: #3d4657;
  font-size: 12px; padding: 3px 10px; border-radius: 99px; cursor: pointer; font-variant-numeric: tabular-nums; }
.sb-ocr-c:hover, .sb-ocr-all:hover { border-color: #27548c; color: #27548c; }
.sb-ocr-c.on { background: #eef3fb; border-color: #b3c7e2; color: #27548c; }
.sb-ocr-all { margin-left: 4px; background: #27548c; border-color: #27548c; color: #fff; }
.sb-ocr-all:hover { color: #fff; opacity: .92; }

.sb-body { display: flex; flex-direction: column; gap: 14px; }
.sb-card { background: #fff; border: 1px solid #e3e4e6; border-radius: 12px;
  padding: 16px 18px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.sb-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sb-hd h2 { font-size: 15px; margin: 0; color: #0a0a0a; font-weight: 700; }
.sb-sub { font-size: 12px; color: #8a93a5; }

.sb-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.sb-plan { border: 1px solid #eef1f6; background: #f9fafc; border-radius: 10px; padding: 10px 12px; position: relative; }
.sb-plan-t { font-size: 12.5px; color: #5a6478; margin-bottom: 5px; }
.sb-plan-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 7px; }
.sb-plan-row { display: flex; justify-content: space-between; font-size: 11.5px; color: #8a93a5; padding: 2px 0; }
.sb-plan-row b { color: #3d4657; font-variant-numeric: tabular-nums; }
.sb-plan-d { font-size: 11px; color: #9aa3b2; margin-top: 6px; padding-top: 6px; border-top: 1px solid #eef1f6; }

.sb-chart { width: 100%; height: 330px; }
.sb-chart-sm { height: 280px; }
.sb-tbl-wrap { overflow-x: auto; }
.sb-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sb-tbl th { text-align: left; font-weight: 600; color: #5a6478; font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid #e3e4e6; white-space: nowrap; background: #fafbfd; }
.sb-tbl td { padding: 8px 10px; border-bottom: 1px solid #f2f4f7; color: #3d4657;
  font-variant-numeric: tabular-nums; }
.sb-tbl tbody tr:hover td { background: #f7f9fc; }
.sb-tbl tr[data-code] { cursor: pointer; }
.sb-tbl tr.sb-main td { background: #eef3fb; }
.sb-tbl tr.sb-main td:first-child { position: relative; }
.sb-tbl tr.sb-main td:first-child::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: #27548c; border-radius: 0 2px 2px 0; }
.sb-tbl .nw { white-space: nowrap; }
.sb-tbl .mon { color: #9aa3b2; font-size: 11.5px; }
.sb-tbl .up { color: #d33; font-weight: 600; }
.sb-tbl .dn { color: #087f5b; font-weight: 600; }
.sb-empty { color: #9aa3b2; font-size: 12.5px; padding: 20px 10px; text-align: center; }

.sb-pick { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.sb-chk { font-size: 12.5px; color: #3d4657; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.sb-chk input { accent-color: #27548c; }
.sb-note { font-size: 11.5px; color: #8a93a5; line-height: 1.85; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid #f0f2f6; }
.sb-note b { color: #5a6478; font-weight: 600; }
[hidden] { display: none !important; }

@media (max-width: 900px) {
  .sb-plans { grid-template-columns: repeat(2, 1fr); }
  .sb-in-lg { width: 100%; }
}