/* 历史开奖号码比对页 */
.compare-page .cmp-grid {
  display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 14px; align-items: start;
}
@media (max-width: 1020px) { .compare-page .cmp-grid { grid-template-columns: 1fr; } }

.cmp-lottery { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cmp-lottery label { font-size: 13px; font-weight: 700; }

.cmp-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.cmp-tab {
  flex: 1; padding: 8px 0; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.cmp-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.cmp-playtabs { display: flex; gap: 6px; margin-bottom: 10px; }
.cmp-playtabs .chip { flex: 1; justify-content: center; }

.cmp-zone { margin-bottom: 10px; }
.cmp-zone-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.cmp-zone-head span { font-size: 12px; font-weight: 700; color: var(--muted); }
.cmp-zone-head b { color: var(--brand); }
.cmp-zone-head small { font-size: 11px; color: var(--muted); }

.cmp-ballgrid { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-ball {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; justify-content: center;
}
.cmp-ball:hover { border-color: var(--brand); color: var(--brand); }
.cmp-ball.on {
  background: radial-gradient(circle at 32% 28%, #f47a68, #d33a3a 58%, #b52c2c);
  border-color: transparent; color: #fff; box-shadow: 0 2px 5px rgba(211, 58, 58, .35);
}
.cmp-ball.blue.on {
  background: radial-gradient(circle at 32% 28%, #6d9cf2, #2f6bd8 58%, #2456b4);
  box-shadow: 0 2px 5px rgba(47, 107, 216, .35);
}
.cmp-ball.on.dan { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }
.cmp-ball.sm { width: 26px; height: 26px; font-size: 11px; }
.cmp-ball.blue.on, .cmp-ballgrid.blues .cmp-ball.on, .cmp-ballgrid .cmp-ball.blue.on {
  background: radial-gradient(circle at 32% 28%, #6d9cf2, #2f6bd8 58%, #2456b4);
  box-shadow: 0 2px 5px rgba(47, 107, 216, .35);
}

/* 七星彩按位列 */
.cmp-qxc { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.cmp-qxc-col { display: flex; flex-direction: column; gap: 3px; align-items: center; flex: none; }
.cmp-qxc-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 2px; white-space: nowrap; }

/* 快乐8 大网格 */
.cmp-ballgrid.kl8 { max-height: 190px; overflow: auto; }

.cmp-hint { font-size: 12px; color: var(--muted); margin: 8px 0; }
.cmp-clear { margin-top: 8px; }
.cmp-run { margin-top: 12px; }

.cmp-lines { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 2px; max-height: 168px; overflow: auto; }
.cmp-line {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.cmp-line-remove {
  border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px;
  display: inline-flex; border-radius: 5px;
}
.cmp-line-remove:hover { color: var(--danger, #d33a3a); background: var(--surface-2); }

.cmp-paste-head { font-size: 12px; color: var(--muted); margin-bottom: 6px; line-height: 1.7; }
.cmp-paste-head b { color: var(--brand); }
.cmp-paste {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-family: var(--mono, monospace); font-size: 13px; line-height: 1.9; resize: vertical;
  background: var(--surface-2); color: var(--text, inherit);
}
.cmp-paste:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

/* 右侧结果 */
.cmp-output { min-height: 320px; }
.cmp-stats-head { margin-bottom: 10px; }
.cmp-stats-head small { color: var(--gold); font-weight: 800; letter-spacing: .12em; }
.cmp-stats-head h2 { margin: 3px 0 4px; }

.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-table th, .cmp-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.cmp-table th { font-size: 12px; color: var(--muted); font-weight: 700; }
.cmp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-table td.cond { color: var(--muted); }
.cmp-table tr.zero td { color: var(--muted); }
.cmp-table tr.zero b { color: var(--muted); }

.cmp-note { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.7; }

/* 详情 */
.cmp-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cmp-detail-head h2 { font-size: 17px; margin: 0; }
.cmp-years { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cmp-year {
  padding: 3px 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: 12px; font-weight: 700;
}
.cmp-context { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cmp-context label { font-size: 12px; font-weight: 700; color: var(--muted); }
.cmp-context small { width: 100%; }

.cmp-rows { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; padding-right: 2px; }
.cmp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap;
}
.cmp-row.hit { border-color: rgba(211, 58, 58, .35); background: rgba(211, 58, 58, .04); }
.cmp-row.pre, .cmp-row.post { opacity: .82; }
.cmp-row-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 216px; }
.cmp-badge {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; flex: none;
  background: var(--brand); color: #fff;
}
.cmp-badge.pre, .cmp-badge.post { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.cmp-wins { color: var(--brand); font-weight: 800; }
.cmp-row-balls { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.cmp-draw-ball { width: 28px; height: 28px; font-size: 12px; }
.cmp-draw-ball.off {
  background: var(--surface); color: var(--text, #14181f); border: 1px solid var(--line-strong, #9aa1ad);
  box-shadow: none; opacity: .88;
}