.material-span-table {
  --material-period-color: #c8d8e2;
  --material-period-text-color: #24485f;
}

.material-span-table col.span-draw-column,
.chart3-dialog.is-digit-game .material-span-table .traditional-draw {
  width: calc(var(--chart3-open-digit-count) * 30px);
  min-width: calc(var(--chart3-open-digit-count) * 30px);
}

.material-span-table .traditional-draw {
  padding-right: 0;
  padding-left: 0;
}

.material-span-table .traditional-draw .chart3-open-grid {
  display: grid;
  grid-template-columns: repeat(var(--chart3-open-digit-count), minmax(30px, 1fr));
  width: 100%;
  min-width: 100%;
}

.chart3-dialog.is-digit-game .material-span-table .traditional-draw .chart3-open-digit {
  box-sizing: border-box;
  width: 23px;
  min-width: 23px;
  height: 23px;
  justify-self: center;
  flex: 0 0 23px;
  border-radius: 50%;
}

.material-span-table tfoot .traditional-stat-row > th,
.material-span-table tfoot .traditional-stat-row > td {
  background: var(--material-period-color) !important;
  color: var(--material-period-text-color) !important;
}

.material-kl8-shape thead .traditional-date,
.material-kl8-shape tbody .traditional-date,
.material-kl8-shape tfoot .traditional-stat-row > th,
.material-kl8-shape tfoot .traditional-stat-row > td {
  background: #c8d8e2 !important;
  color: #24485f !important;
}

.material-kl8-shape tbody .traditional-kl8-draw,
.chart3-dialog.is-lotto #chart3Table tbody tr[data-chart3-data-row] > .chart3-sticky-draw {
  background: #dce3df !important;
  color: #28342f !important;
}

/* 批DEV183：数字彩开奖格保持整格底色，号码只显示为居中的圆球。 */
.chart3-dialog.is-digit-game .material-span-table .traditional-draw .chart3-open-grid {
  display: grid;
  grid-template-columns: repeat(var(--chart3-open-digit-count), minmax(30px, 1fr));
  width: 100%;
  min-width: 100%;
  justify-content: stretch;
  gap: 0;
}

.chart3-dialog.is-digit-game .material-span-table .traditional-draw .chart3-open-digit {
  box-sizing: border-box;
  width: 23px;
  min-width: 23px;
  height: 23px;
  justify-self: center;
  border-radius: 50%;
}

#chart3Table tr.chart3-prediction-row > td {
  height: 31px !important;
}

#chart3Table .chart3-dlt-prediction-summary {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  min-height: 0;
  max-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
  overflow: hidden;
}

#chart3Table .chart3-dlt-prediction-summary strong,
#chart3Table .chart3-dlt-prediction-summary span,
#chart3Table .chart3-dlt-prediction-summary small {
  flex: 0 0 auto;
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}

#chart3Table .chart3-dlt-prediction-summary strong {
  font-size: 10px;
}

#chart3Table .chart3-dlt-prediction-summary span {
  font-size: 9px;
}

#chart3Table .chart3-dlt-prediction-summary small {
  font-size: 8px;
}

#chart3Table .chart3-dlt-prediction-summary small + small {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 批DEV186：跨度次数的开奖号码复用综合走势开奖号码列的视觉契约。
   传统表格仍保留自己的列宽，但单元格、圆球和圆球间距必须使用同一套参数。 */
.chart3-dialog.is-digit-game .material-span-table tbody tr[data-draw-date] > .traditional-draw {
  background: #e4efec !important;
  color: #365b60 !important;
  box-shadow: 1px 0 0 #b7ccc8;
  font-family: "Microsoft YaHei", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  padding: 0 1px !important;
}

.chart3-dialog.is-digit-game .material-span-table .traditional-draw .chart3-open-grid {
  display: inline-flex !important;
  grid-template-columns: none !important;
  width: calc(100% + 2px) !important;
  min-width: calc(100% + 2px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.chart3-dialog.is-digit-game .material-span-table .traditional-draw .chart3-open-digit {
  box-sizing: border-box !important;
  display: inline-flex !important;
  width: 23px !important;
  min-width: 23px !important;
  height: 23px !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 23px !important;
  border-radius: 50% !important;
  font-family: "Microsoft YaHei", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 12px !important;
}

/* 批DEV197补十七（用户裁定）：跨度形态统计表开奖号列与综合走势统一——
   浅底、30px 球距、定宽（旧版继承 material-span-table 深底行且五列表
   格被拉伸到整行宽，号码球漂在 706px 深灰格中与综合走势完全不像）。 */
.material-span-shape-table {
  table-layout: fixed;
  width: auto !important;
}
.material-span-shape-table col.span-period-column { width: 76px; }
.material-span-shape-table col.span-draw-column { width: calc(var(--chart3-open-digit-count, 3) * 30px); }
.material-span-shape-table col.span-metric-column { width: 96px; }
.material-span-shape-table tbody .traditional-draw {
  background: #e4efec !important;
}
.material-span-shape-table .traditional-draw .chart3-open-grid {
  display: grid;
  grid-template-columns: repeat(var(--chart3-open-digit-count, 3), minmax(30px, 1fr));
  width: 100%;
}
.material-span-shape-table .traditional-draw .chart3-open-digit {
  justify-self: center;
}
.material-span-shape-table .traditional-shape-title,
.material-span-shape-table .material-shape-hit {
  min-width: 72px;
}
