/* 六合预测 · 对齐小白预测一页结构 */

:root {
  --db-bg: #f0f2f5;
  --db-card: #fff;
  --db-border: #e5e6eb;
  --db-text: #1d2129;
  --db-muted: #86909c;
  --db-blue: #165dff;
  --db-red: #f53f3f;
  --db-green: #00b42a;
  --db-radius: 8px;
  --db-max: 1000px;
  --hit-bg: #d9534f;
  --miss-bg: #337ab7;
  --wait-bg: #86909c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scrollbar-gutter: stable; overflow-y: scroll; }

body.l6-skin {
  background: var(--db-bg);
  color: var(--db-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height: 1.45;
  min-height: 100vh;
}

a { color: var(--db-blue); text-decoration: none; }
button { font-family: inherit; }

.l6-page-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: var(--db-bg);
}
html.l6-pending .l6-page-loader { display: flex; }
html.l6-pending .main-p { visibility: hidden; }

.l6-page-loader__inner { text-align: center; color: var(--db-muted); font-size: 14px; }
.l6-page-loader__dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.l6-page-loader__dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--db-blue);
  animation: l6-bounce 0.9s infinite ease-in-out;
}
.l6-page-loader__dots span:nth-child(2) { animation-delay: 0.15s; }
.l6-page-loader__dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes l6-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.main.container {
  max-width: var(--db-max);
  width: 100%;
  margin: 0 auto;
  padding: 10px 12px 28px;
}

/* 顶部升级提示 */
.site-upgrade-bar {
  position: sticky;
  top: 0;
  z-index: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #fff7e6, #fff1f0);
  border-bottom: 1px solid #ffd591;
  color: #ad6800;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}
.site-upgrade-bar strong {
  color: #d46b08;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.site-upgrade-bar span {
  color: #876800;
}

/* 品牌条 */
.db-brandbar {
  position: sticky;
  top: 42px;
  z-index: 300;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.db-brandbar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  min-width: 0;
}
.db-brandbar-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #165dff, #0e42c3);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-brandbar-name {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}
.db-brandbar-domain {
  font-size: 14px;
  font-weight: 700;
  color: var(--db-blue);
  padding-left: 10px;
  border-left: 1px solid #dbe3f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 开奖壳 */
.db-shell {
  background: var(--db-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  overflow: hidden;
  margin-bottom: 10px;
}

.db-lottery-slot { background: #1a1a1a; }
#nav-lottery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#nav-lottery .nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: #1a1a1a;
  color: #c9cdd4;
  font-weight: 600;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  width: 100%;
}
#nav-lottery .nav-item.nav-active {
  background: #fff;
  color: #1d2129;
  font-weight: 700;
}
#nav-lottery .nav-item:hover:not(.nav-active) {
  color: #fff;
  background: #2a2a2a;
}

.db-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 16px;
  text-align: center;
}
.db-head-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  position: relative;
  font-size: 13px;
  color: #4e5969;
}
.db-head-issue strong { color: var(--db-text); font-weight: 700; }
.db-head-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.db-set-link {
  appearance: none;
  border: 0;
  background: none;
  color: var(--db-blue);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.db-head-mid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
}
.db-head-cd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
}
.db-head-cd b {
  display: inline-block;
  min-width: 22px;
  padding: 2px 4px;
  background: #1d2129;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
}
.db-head-cd.drawing b { background: var(--hit-bg); }
.db-cd-label { color: var(--db-muted); }
.muted { color: var(--db-muted); font-weight: 400; }

#latest-draw {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
#latest-draw .draw-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.ball.red { background: #e53935; }
.ball.blue { background: #1e88e5; }
.ball.green { background: #43a047; }
.ball.special { outline: 2px solid #f9a825; outline-offset: 1px; }
.ball-pending {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px dashed #c9cdd4;
  background: transparent;
  vertical-align: middle;
}
.plus { color: var(--db-muted); font-weight: 700; margin: 0 2px; }
#cd-drawing { display: none; }
.db-head-cd.drawing #times { display: none; }
.db-head-cd.drawing #cd-drawing {
  display: inline-block;
  color: #fff;
  background: var(--hit-bg);
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 700;
}

#draw-attrs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.db-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  background: #e8f3ff;
  color: #165dff;
}
.db-chip.wave-red { background: #ffece8; color: #f53f3f; }
.db-chip.wave-blue { background: #e8f3ff; color: #165dff; }
.db-chip.wave-green { background: #e8ffea; color: #00b42a; }

/* 主面板 */
.db-panel {
  background: var(--db-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  overflow: hidden;
  margin-bottom: 10px;
}

.result-nav {
  display: flex;
  border-bottom: 1px solid var(--db-border);
}
.result-nav span {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 600;
  color: #4e5969;
  cursor: pointer;
}
.result-nav span.result-active {
  color: var(--db-blue);
  box-shadow: inset 0 -2px 0 var(--db-blue);
}

.types-box { padding: 8px; }
.nav-section {
  background: #f7f8fa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 6px;
}
.nav-section:last-child { margin-bottom: 0; }

#nav-play,
#nav-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
#nav-play .nav-item,
#nav-line .nav-item {
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #4e5969;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  width: 100%;
  line-height: 1.25;
}
#nav-line .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 12px;
  padding: 5px 2px 4px;
  min-height: 40px;
  box-sizing: border-box;
}
.db-line-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  height: 16px;
  line-height: 16px;
}
#nav-line .db-line-name {
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.db-jian {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  padding: 0 4px;
  border-radius: 99px;
  background: #ffece8;
  color: var(--db-red);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
#nav-play .nav-item.nav-active,
#nav-line .nav-item.nav-active {
  background: #fff;
  border-color: #e5e6eb;
  color: var(--db-blue);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.db-rate {
  display: block;
  color: var(--db-muted);
  font-size: 11px;
  font-weight: 500;
}
.nav-item.nav-active .db-rate { color: var(--db-blue); }

.accuracy-bar {
  text-align: center;
  padding: 8px 10px;
  font-size: 13px;
  color: #4e5969;
  border-bottom: 1px solid #f2f3f5;
}
.accuracy-bar b { color: var(--db-text); }
.accuracy-bar .hit { color: var(--hit-bg); }
.accuracy-bar .miss { color: var(--miss-bg); }

.trend-embed-frame {
  display: block;
  width: 100%;
  min-height: 85vh;
  height: 1100px;
  border: 0;
  background: #d6ebf7;
}
body.l6-skin.is-chart-tab .types-box,
body.l6-skin.is-chart-tab .accuracy-bar { display: none; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.result-thead,
.result-tr {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f3f5;
  font-size: 13px;
}
.result-thead {
  background: #f2f3f5;
  font-weight: 700;
  font-size: 12px;
  color: var(--db-text);
}
.result-thead > span,
.result-tr > span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 3px;
  min-width: 0;
  flex: 1 1 0;
}
.th-period, .col-period {
  flex: 0 0 42px !important;
  max-width: 42px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.th-time, .col-time {
  flex: 0 0 46px !important;
  max-width: 46px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--db-muted);
}
.th-nums, .col-nums { flex: 1.5 1 0 !important; }
.th-pred, .col-pred { flex: 1.4 1 0 !important; }
.th-status, .col-status {
  flex: 0 0 48px !important;
  max-width: 48px;
}
.th-hist-attr, .col-hist-attr {
  flex: 0 0 auto !important;
  max-width: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  gap: 4px;
  color: var(--db-text);
}
.col-hist-attr b { font-weight: 800; }

.result-tr { min-height: 36px; align-items: stretch; }
.result-tr.row-pending { background: #f7fbff; }
.col-nums { gap: 2px; flex-wrap: wrap; }
.col-nums .ball { width: 22px; height: 22px; font-size: 11px; }
.col-nums .ball.special { outline-width: 1px; }
.tema-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}
.ball-empty {
  background: transparent !important;
  border: 1.5px dashed #c9cdd4;
  color: transparent;
  box-shadow: none;
}
.ball-empty.special {
  outline: 1.5px dashed #f9a825;
  outline-offset: 0;
}
.tema-zx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  margin-left: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--db-text);
  line-height: 1;
  white-space: nowrap;
}
#latest-draw .tema-zx { font-size: 16px; }
.col-pred { flex-wrap: wrap; gap: 2px; font-size: 12px; font-weight: 600; }
.pred-label {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--db-text);
  white-space: nowrap;
}

.status-hit, .status-miss, .status-wait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.status-hit { background: var(--hit-bg); }
.status-miss { background: var(--miss-bg); }
.status-wait { background: var(--wait-bg); }

.zx-row { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-start; overflow: visible; }
.zx-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.zx-tag.hit { color: #fff; background: #00b42a; }
.zx-tag.miss { color: #fff; background: #86909c; text-decoration: line-through; }
.zx-tag.wait { color: #165dff; background: #e8f3ff; border-color: #165dff; border-style: dashed; }

.predict-num-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: 2px 0;
  width: 100%;
}
.predict-num-grid.cols-15 { grid-template-columns: repeat(15, minmax(0, 1fr)); }
.predict-num-grid.cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.predict-num-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  color: var(--db-text);
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.predict-num-chip.hit {
  color: var(--hit-bg);
  font-weight: 800;
}

.db-hint {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--db-muted);
  background: #fffbe6;
  border-bottom: 1px solid #ffe58f;
}
.db-hint a { font-weight: 700; }

/* 露珠 */
.luzhu-block { padding: 10px 8px 14px; }
.luzhu-title {
  font-size: 13px;
  font-weight: 700;
  margin: 10px 4px 6px;
  color: #4e5969;
}
.luzhu-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}
.luzhu-road {
  display: flex;
  flex-direction: row;
  gap: 2px;
  min-height: 120px;
}
.luzhu-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}
.luzhu-cell {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.luzhu-cell.big, .luzhu-cell.odd { background: #d9534f; }
.luzhu-cell.small, .luzhu-cell.even { background: #337ab7; }
.luzhu-cell.wave-red { background: #e53935; }
.luzhu-cell.wave-blue { background: #1e88e5; }
.luzhu-cell.wave-green { background: #43a047; }
.luzhu-cell.zx { background: #4e5969; font-size: 10px; }

/* 间隔 */
.interval-block { padding: 10px 8px 14px; }
.interval-grid {
  display: grid;
  gap: 6px;
}
.interval-grid--nums { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.interval-grid--cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.interval-item {
  background: #f7f8fa;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
}
.interval-item .k { display: block; font-size: 12px; font-weight: 700; color: var(--db-text); }
.interval-item .v { display: block; font-size: 11px; color: var(--db-muted); margin-top: 2px; }
.interval-item.hot .v { color: var(--hit-bg); font-weight: 700; }

.site-foot {
  background: var(--db-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 14px 16px;
  font-size: 12px;
  color: var(--db-muted);
  line-height: 1.7;
}
.site-foot a { font-weight: 600; }
.site-foot-links { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 6px; }

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

@media (max-width: 640px) {
  .main.container { padding: 8px 6px 24px; }
  .db-brandbar { padding: 8px 10px; }
  .db-brandbar-name { font-size: 16px; }
  .db-brandbar-domain { font-size: 13px; }
  .db-head { padding: 10px; }
  .db-head-top { justify-content: space-between; }
  .db-head-issue { font-size: 12px; }
  .db-head-actions { position: static; transform: none; }
  .ball { width: 26px; height: 26px; font-size: 12px; }
  #nav-play { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #nav-line { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #forecast { overflow-x: visible; }
  #forecast .result-thead,
  #forecast .result-tr {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 48px;
    grid-template-areas:
      "period time status"
      "nums nums status"
      "pred pred status";
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    padding: 6px 10px;
    box-sizing: border-box;
    width: 100%;
  }
  #forecast .result-thead {
    font-size: 11px;
    padding-top: 6px;
    padding-bottom: 6px;
    grid-template-areas: "period time status";
    grid-template-rows: auto;
  }
  #forecast .result-thead .th-nums,
  #forecast .result-thead .th-pred {
    display: none !important;
  }
  #history .result-thead,
  #history .result-tr {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "period time attr"
      "nums nums attr";
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    padding: 6px 10px;
    box-sizing: border-box;
    width: 100%;
  }
  #history .result-thead {
    font-size: 11px;
    grid-template-areas: "period time attr";
    grid-template-rows: auto;
  }
  #history .result-thead .th-nums { display: none !important; }
  #history .th-hist-attr,
  #history .col-hist-attr {
    grid-area: attr;
    flex: none !important;
    align-self: stretch;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    font-size: 12px;
  }
  .th-period, .col-period {
    grid-area: period;
    flex: none !important;
    max-width: none;
    font-size: 13px;
    justify-content: flex-start;
  }
  .th-time, .col-time {
    grid-area: time;
    display: flex !important;
    flex: none !important;
    max-width: none;
    justify-content: flex-start;
    font-size: 12px;
  }
  .th-nums, .col-nums {
    grid-area: nums;
    display: grid !important;
    grid-template-columns: repeat(7, 26px);
    justify-content: start;
    justify-items: center;
    align-items: center;
    flex: none !important;
    width: max-content;
    max-width: 100%;
    padding: 0;
    gap: 3px;
    overflow: visible;
  }
  .th-pred, .col-pred {
    grid-area: pred;
    display: block !important;
    flex: none !important;
    padding: 0;
    width: max-content;
    max-width: 100%;
    overflow: visible;
  }
  .th-status, .col-status {
    grid-area: status;
    flex: none !important;
    max-width: none;
    align-self: stretch;
    justify-content: flex-end;
    align-items: center;
    overflow: visible;
    padding: 0;
  }
  .col-nums .ball { width: 24px; height: 24px; font-size: 11px; }
  .col-nums .plus { margin: 0; font-size: 12px; }
  .col-nums .tema-zx { font-size: 12px; margin-left: 0; min-width: 14px; }
  .tema-slot {
    display: flex;
    width: auto;
    gap: 1px;
  }
  #forecast .zx-row {
    display: grid;
    grid-template-columns: repeat(7, 26px);
    justify-content: start;
    justify-items: center;
    align-items: center;
    width: max-content;
    max-width: 100%;
    gap: 3px;
    overflow: visible;
  }
  .zx-tag {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 12px;
    padding: 0;
    flex: none;
  }
  .predict-num-grid {
    grid-template-columns: repeat(13, minmax(0, 1fr));
    width: 100%;
    gap: 2px 0;
  }
  .predict-num-grid.cols-15 { grid-template-columns: repeat(15, minmax(0, 1fr)); }
  .predict-num-grid.cols-10 { grid-template-columns: repeat(13, minmax(0, 1fr)); }
  .predict-num-chip { font-size: 12px; }
  #forecast.play-numset .result-tr {
    grid-template-areas:
      "period time status"
      "nums nums status"
      "pred pred pred";
    row-gap: 4px;
  }
  #forecast.play-numset .col-pred {
    display: block !important;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    padding-left: 0;
  }
  .status-hit, .status-miss, .status-wait {
    min-width: 40px;
    width: 40px;
    height: 22px;
    padding: 0;
    font-size: 12px;
  }
  #forecast.play-side-label .result-thead,
  #forecast.play-side-label .result-tr {
    grid-template-columns: 40px minmax(0, 1fr) auto 48px;
    grid-template-areas:
      "period time pred status"
      "nums nums pred status";
  }
  #forecast.play-side-label .result-thead {
    grid-template-areas: "period time . status";
    grid-template-rows: auto;
  }
  #forecast.play-side-label .col-pred {
    display: flex !important;
    width: auto;
    max-width: none;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
    padding: 0 4px 0 0;
  }
  #forecast.play-side-label .pred-label {
    font-size: 15px;
  }
  .interval-grid--nums { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .interval-grid--cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  #nav-line { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}