:root {
  --trend-gold: #d19b45;
  --trend-gold-soft: #fff0bf;
  --trend-grid: #eadfca;
  --trend-text: #3f372b;
  --trend-muted: #b9b2a8;
  /* 默认皮肤：分位矩阵使用低饱和底色，颜色集中在 token 供后续皮肤覆盖。 */
  --trend-panel-1: #fff8e8;
  --trend-panel-2: #eef9ff;
  --trend-panel-3: #f1fae7;
  --trend-panel-4: #fff1f5;
  --trend-panel-5: #f2f5f7;
  /* 七星彩 F、G 位复用 E 位冷灰蓝，避免末位区域颜色过多。 */
  --trend-panel-6: #f2f5f7;
  --trend-panel-7: #f2f5f7;
  --trend-panel-1-alt: #fffcef;
  --trend-panel-2-alt: #f7fcff;
  --trend-panel-3-alt: #f8fdf3;
  --trend-panel-4-alt: #fff8fa;
  --trend-panel-5-alt: #f8fafb;
  --trend-panel-6-alt: #f8fafb;
  --trend-panel-7-alt: #f8fafb;
  --trend-row-odd: #fffdf7;
  --trend-row-even: #faf8f1;
}

.trend-page { max-width: 1440px; margin: 0 auto; padding: 28px 20px 48px; }
.trend-breadcrumb { margin-top: 18px; color: #687386; font-size: 14px; }
.trend-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.trend-breadcrumb li + li::before { margin-right: 7px; color: #a2a9b3; content: "/"; }
.trend-breadcrumb a { color: #126dcc; text-decoration: none; }
.trend-breadcrumb a:hover, .trend-breadcrumb a:focus-visible { text-decoration: underline; }
.trend-page-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 28px 0 20px; }
.trend-page-header h1 { margin: 2px 0 6px; color: #25201b; font-size: clamp(28px, 4vw, 42px); }
.trend-page-header p { margin: 0; color: #737987; }
.trend-heading-line { display: flex; align-items: center; gap: 8px; }
.trend-help { position: relative; z-index: 10; flex: 0 0 auto; }
.trend-help summary { display: grid; width: 24px; height: 24px; place-items: center; color: #536071; font-weight: 700; line-height: 1; list-style: none; border: 1px solid #aab4c2; border-radius: 50%; cursor: pointer; }
.trend-help summary::-webkit-details-marker { display: none; }
.trend-help summary:hover, .trend-help summary:focus-visible { color: #fff; background: #126dcc; border-color: #126dcc; outline: none; }
.trend-help-popover { position: absolute; top: 32px; left: 0; width: min(320px, calc(100vw - 56px)); padding: 13px 15px; color: #4d5561; background: #fff; border: 1px solid #dce4ef; border-radius: 10px; box-shadow: 0 10px 24px rgb(40 53 70 / 18%); font-size: 14px; line-height: 1.6; }
.trend-help-popover strong { display: block; color: #25201b; }
.trend-help-popover p { margin: 4px 0 0; color: inherit; }
.trend-help-more { display: inline-block; margin-top: 10px; color: #126dcc; font-weight: 700; text-decoration: none; }
.trend-help-more:hover, .trend-help-more:focus-visible { text-decoration: underline; outline: none; }
.trend-help-page-link { color: #126dcc; font-size: 14px; font-weight: 700; text-decoration: none; }
.trend-help-page-link:hover, .trend-help-page-link:focus-visible { text-decoration: underline; outline: none; }
.trend-page-eyebrow { color: #126dcc !important; font-weight: 700; }
.trend-periods { display: flex; border: 1px solid #d7dce4; border-radius: 10px; overflow: hidden; }
.trend-periods a { padding: 9px 12px; color: #536071; text-decoration: none; border-left: 1px solid #d7dce4; }
.trend-periods a:first-child { border-left: 0; }
.trend-periods a[aria-current="page"] { color: #fff; background: #126dcc; }
.trend-save-button { padding: 9px 13px; color: #126dcc; font: inherit; font-weight: 700; background: #fff; border: 1px solid #126dcc; border-radius: 10px; cursor: pointer; }
.trend-save-button:hover, .trend-save-button:focus-visible { color: #fff; background: #126dcc; }
.trend-save-button:disabled { cursor: wait; opacity: .7; }
.trend-warning, .trend-scroll-hint { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.trend-warning { color: #7a4e00; background: #fff7df; border: 1px solid #e7c878; }
.trend-scroll-hint { color: #656d79; background: #f5f8fc; }

.number-trend-scroll { max-height: min(72dvh, 780px); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--trend-gold); background: #fffdf7; box-shadow: 0 8px 24px rgb(70 48 14 / 8%); }
.number-trend-canvas { position: relative; width: max-content; }
.number-trend-links { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* 表格不能建立独立堆叠上下文，否则命中球无法压过同级 SVG 连线。 */
.number-trend-table { position: relative; min-width: max-content; border-collapse: collapse; color: var(--trend-text); font-variant-numeric: tabular-nums; }
.trend-sequence-column { width: 50px; transition: width 180ms ease; }
.trend-period-column { width: 72px; transition: width 180ms ease; }
.trend-draw-column { width: 108px; }
.number-trend-table th, .number-trend-table td { box-sizing: border-box; height: 42px; padding: 0; text-align: center; border-right: 1px solid var(--trend-grid); border-bottom: 1px solid var(--trend-grid); }
.number-trend-table thead th { color: #8d642a; background: var(--trend-gold-soft); font-weight: 700; }
.number-trend-table thead th { position: sticky; z-index: 6; }
.number-trend-table thead tr:first-child th { top: 0; }
.number-trend-table thead tr:nth-child(2) th { top: 44px; }
.number-trend-table thead tr:nth-child(2) th,
.number-trend-table thead tr:first-child th[rowspan] { border-bottom: 3px solid var(--trend-gold); }
.number-trend-table td { width: 38px; min-width: 38px; font-size: 15px; }
.trend-position-heading { height: 44px !important; border-right: 2px solid var(--trend-gold) !important; font-size: 18px; }
.trend-number-heading { width: 38px; min-width: 38px; color: #9b7138 !important; }
.trend-panel-boundary { border-right: 3px solid var(--trend-gold) !important; }
.comprehensive-metric-column { width: 100px; }
.comprehensive-trend-table .comprehensive-heading { min-width: 100px; padding: 0 10px; color: #8d642a; background: var(--trend-gold-soft); font-size: 17px; font-weight: 700; white-space: nowrap; }
.comprehensive-trend-table thead tr:first-child th { border-bottom: 3px solid var(--trend-gold); }
.comprehensive-trend-table .comprehensive-metric { width: 100px; min-width: 100px; color: #936b30; font-size: 16px; white-space: nowrap; }
.sum-partition-sum-column { width: 64px; }
.sum-partition-sum { width: 64px; min-width: 64px; color: #936b30; border-right: 3px solid var(--trend-gold) !important; font-size: 16px; font-weight: 700; }
.sum-partition-attributes-heading, .span-attributes-heading, .maximum-attributes-heading { border-right: 3px solid var(--trend-gold) !important; }
.trend-sticky { position: sticky; z-index: 5; background: #fffdf7; }
.number-trend-table thead .trend-sticky { z-index: 7; background: var(--trend-gold-soft); }
.trend-sequence, .trend-period { min-width: 0; overflow: hidden; white-space: nowrap; transition: opacity 120ms ease, padding 180ms ease; }
.trend-sequence { width: 50px; }
.trend-period { width: 72px; }
.trend-draw { left: 122px; width: 108px; min-width: 108px; border-right: 2px solid var(--trend-gold) !important; white-space: nowrap; transition: left 180ms ease; }
.trend-draw .lottery-draw-numbers { justify-content: center; font-size: 15px; font-weight: 650; line-height: 1; }
.trend-pending-draw { color: #e83b32; }
.trend-matrix-cell { color: var(--trend-muted); }
.number-trend-table tbody tr:nth-child(odd) > td:not(.trend-matrix-cell) { background: var(--trend-row-odd); }
.number-trend-table tbody tr:nth-child(even) > td:not(.trend-matrix-cell) { background: var(--trend-row-even); }
.number-trend-table td.trend-panel-1 { background: var(--trend-panel-1); }
.number-trend-table td.trend-panel-2 { background: var(--trend-panel-2); }
.number-trend-table td.trend-panel-3 { background: var(--trend-panel-3); }
.number-trend-table td.trend-panel-4 { background: var(--trend-panel-4); }
.number-trend-table td.trend-panel-5 { background: var(--trend-panel-5); }
.number-trend-table td.trend-panel-6 { background: var(--trend-panel-6); }
.number-trend-table td.trend-panel-7 { background: var(--trend-panel-7); }
.number-trend-table tbody tr:nth-child(even) td.trend-panel-1 { background: var(--trend-panel-1-alt); }
.number-trend-table tbody tr:nth-child(even) td.trend-panel-2 { background: var(--trend-panel-2-alt); }
.number-trend-table tbody tr:nth-child(even) td.trend-panel-3 { background: var(--trend-panel-3-alt); }
.number-trend-table tbody tr:nth-child(even) td.trend-panel-4 { background: var(--trend-panel-4-alt); }
.number-trend-table tbody tr:nth-child(even) td.trend-panel-5 { background: var(--trend-panel-5-alt); }
.number-trend-table tbody tr:nth-child(even) td.trend-panel-6 { background: var(--trend-panel-6-alt); }
.number-trend-table tbody tr:nth-child(even) td.trend-panel-7 { background: var(--trend-panel-7-alt); }
.trend-omission { color: var(--trend-muted); }
/* 012 路比由服务端直接给出，保持为普通文本，不能误绘成遗漏或命中圆点。 */
.modulo-ratio-value { color: #8d642a; font-weight: 700; }
.trend-hit { position: relative; z-index: 4; display: inline-grid; width: 27px; height: 27px; place-items: center; color: #fff; border-radius: 50%; font-weight: 700; box-shadow: 0 2px 4px rgb(0 0 0 / 15%); }
.size-trend-hit { display: inline-grid; width: 100%; height: 100%; place-items: center; color: #fff; font-weight: 700; }
.size-trend-table .trend-position-heading { border-right: 3px solid var(--trend-gold) !important; }
.trend-position-1 { background-color: #fc9636; }
.trend-position-2 { background-color: #2e8ee8; }
.trend-position-3 { background-color: #08b8a4; }
.trend-position-4 { background-color: #f04b57; }
.trend-position-5 { background-color: #ed922c; }
.trend-position-6 { background-color: #8168d9; }
.trend-position-7 { background-color: #4777d1; }
.trend-position-heading.trend-position-1, .trend-position-heading.trend-position-2, .trend-position-heading.trend-position-3, .trend-position-heading.trend-position-4, .trend-position-heading.trend-position-5, .trend-position-heading.trend-position-6, .trend-position-heading.trend-position-7 { color: #8d642a; background: var(--trend-gold-soft); }
/* group_start_label=1 标记当前记录自身的分隔；粗线必须位于这一行顶部，不能借用相邻记录推导。 */
.trend-group-start td { border-top: 3px solid var(--trend-gold); }
.number-trend-table tfoot th, .number-trend-table tfoot td { height: 38px; background: #fffbf2; color: #936b30; font-size: 14px; }
.number-trend-table tfoot .trend-stat-heading th { color: #8d642a; background: var(--trend-gold-soft); font-weight: 700; }
.number-trend-table tfoot .trend-stat-heading .trend-position-heading { height: 44px !important; font-size: 18px; }
.number-trend-table tfoot .trend-stat-heading .trend-number-heading { height: 42px; font-size: 15px; }
.number-trend-table tfoot tr:nth-child(2) th,
.number-trend-table tfoot tr:first-child th[rowspan] { border-bottom: 3px solid var(--trend-gold); }
.number-trend-table tfoot .trend-stat-label { text-align: right; padding-right: 14px; border-right: 2px solid var(--trend-gold) !important; }
/* 用户向右横向浏览时，脚本才加入 compact 类：隐藏序号、期号，仅固定开奖号码。 */
.number-trend-scroll--compact .trend-sequence-column,
.number-trend-scroll--compact .trend-period-column { width: 0; }
.number-trend-scroll--compact .trend-sequence,
.number-trend-scroll--compact .trend-period { padding-inline: 0; opacity: 0; border-right-width: 0; }
.number-trend-scroll--compact .trend-draw { left: 0; }
.number-trend-scroll--compact .trend-stat-label { left: 0; z-index: 4; }
/* 导出时冻结列必须立即还原，避免过渡中的 SVG 坐标被写进完整画布。 */
.number-trend-scroll--exporting .trend-sequence-column,
.number-trend-scroll--exporting .trend-period-column,
.number-trend-scroll--exporting .trend-sequence,
.number-trend-scroll--exporting .trend-period,
.number-trend-scroll--exporting .trend-draw { transition: none !important; }
/* PNG foreignObject 以完整画布宽度排版；此类固定手机端原始网格，避免连线坐标错位。 */
.number-trend-canvas--mobile-export .trend-sequence-column { width: 42px; }
.number-trend-canvas--mobile-export .trend-period-column { width: 64px; }
.number-trend-canvas--mobile-export .trend-draw-column { width: 96px; }
.number-trend-canvas--mobile-export .trend-sequence { width: 42px; }
.number-trend-canvas--mobile-export .trend-period { width: 64px; }
.number-trend-canvas--mobile-export .trend-draw { left: 106px; width: 96px; min-width: 96px; font-size: 13px; }
.number-trend-canvas--mobile-export .trend-draw .lottery-draw-numbers { font-size: 13px; }
.number-trend-canvas--mobile-export .number-trend-table td,
.number-trend-canvas--mobile-export .trend-number-heading { width: 34px; min-width: 34px; }

@media (max-width: 640px) {
  .trend-page { padding: 16px 0 36px; }
  .trend-page > .site-navigation, .trend-breadcrumb, .trend-page-header, .trend-warning, .trend-scroll-hint { margin-left: 16px; margin-right: 16px; }
  .trend-page-header { display: grid; grid-template-areas: "summary save" "periods periods"; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; margin-top: 18px; margin-bottom: 10px; }
  .trend-page-header > div { grid-area: summary; min-width: 0; }
  .trend-page-header h1 { margin: 0 0 2px; font-size: 24px; line-height: 1.2; }
  .trend-heading-line { align-items: flex-start; }
  .trend-help { position: static; margin-top: 2px; }
  .trend-help-popover { position: fixed; right: 16px; bottom: 16px; left: 16px; box-sizing: border-box; width: auto; height: fit-content; min-height: 0; max-height: min(220px, calc(100dvh - 32px)); overflow: auto; }
  .trend-page-header .trend-help-popover p { overflow: visible; color: inherit; line-height: 1.6; text-overflow: clip; white-space: normal; }
  .trend-page-header p { overflow: hidden; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .trend-page-eyebrow { display: none; }
  .trend-periods { grid-area: periods; width: 100%; border-radius: 8px; }
  .trend-periods a { flex: 1; padding: 8px 4px; text-align: center; }
  .trend-save-button { grid-area: save; min-width: 58px; padding: 9px 11px; border-radius: 8px; }
  .trend-scroll-hint { margin-top: 0; margin-bottom: 8px; padding: 0; color: #687386; background: transparent; font-size: 12px; text-align: center; }
  /* 小屏保留双向滚动，但高度扣除紧凑控制区，避免表格底部落到首屏外。 */
  .number-trend-scroll { height: clamp(320px, calc(100dvh - 238px), 680px); max-height: none; overflow: auto; border-right: 0; border-left: 0; box-shadow: none; }
  .trend-sequence-column { width: 42px; }
  .trend-period-column { width: 64px; }
  .trend-draw-column { width: 96px; }
  .trend-sequence { width: 42px; }
  .trend-period { width: 64px; }
  .trend-draw { left: 106px; width: 96px; min-width: 96px; font-size: 13px; }
  .trend-draw .lottery-draw-numbers { font-size: 13px; }
  .number-trend-table td, .trend-number-heading { width: 34px; min-width: 34px; }
}