/*
 * Shared mobile visual contract.
 * Covers both phone (390 CSS px) and tablet (768 CSS px) on the mobile path.
 * Load after family styles while those families migrate to the public classes.
 */

:root {
  --ui-font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  --ui-font-size-body: 12.48px;
  --ui-font-size-card-title: 16.64px;
  --ui-color-text: #333;
  --ui-color-muted: #666;
  --ui-color-active: #fb8e19;
  --ui-color-surface: #fff;
  --ui-color-surface-subtle: #f5f5f5;
  --ui-color-page: #efeff4;
  --ui-color-line: #e6e6e6;
  --ui-color-hit: #0092e0;
  --ui-line-width: 1px;
  --ui-line: var(--ui-line-width) solid var(--ui-color-line);
  --ui-page-gutter: 10.398px;
  --ui-card-radius: 4.16px;
  --ui-card-shadow: 0 4.16px 6.24px rgb(0 0 0 / 9%);
  --ui-stat-title-height: 37.438px;
  --ui-stat-cell-height: 37.438px;
  --ui-date-toolbar-height: 38.438px;
  --ui-date-arrow-size: 8px;
  --ui-date-arrow-offset: 9px;
  --ui-hit-size: 20.8px;
  --ui-choice-color: #fb8e19;
  --ui-choice-corner-width: 20.2734375px;
  --ui-choice-corner-height: 21.8359375px;
  --ui-mobile-nav-content-height: 60px;
  --ui-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-mobile-nav-height: calc(var(--ui-mobile-nav-content-height) + var(--ui-mobile-safe-bottom));
  --ui-ssc-road-column-width: 30px;
  --ui-ssc-road-cell-height: 15px;
  --ui-analysis-primary-height: 47.789px;
  --ui-analysis-primary-control-height: 36.398px;
  --ui-analysis-secondary-height: 46.758px;
  --ui-analysis-secondary-control-height: 45.758px;
  --ui-analysis-primary-font-size: 12.48px;
  --ui-analysis-secondary-font-size: 13.52px;
  --ui-analysis-nav-color: #333;
  --ui-analysis-secondary-color: #666;
  --ui-analysis-nav-active: #fb8e19;
  --ui-analysis-primary-underline-width: 57.898px;
  --ui-analysis-primary-underline-height: 2px;
}

/* 20260916 source-backed sports time profile.
 * One owner for date text/chevron and countdown geometry. Values are from the
 * live source (Actions35056214122); the 390px phone canvas already has zoom.
 * Keep non-sport defaults and every lottery's schedule/progress logic unchanged.
 */
@media (max-width: 1020px) {
  body[data-detail-type="sport"] #mobileDetail {
    --ui-sport-unit: 1.04px;
    --ui-sport-fixed-px: 1px;
    --ui-countdown-font-family: "Microsoft YaHei";
    --ui-countdown-font-size: calc(14 * var(--ui-sport-unit));
    --ui-countdown-line-size: calc(15 * var(--ui-sport-unit));
    --ui-countdown-track-flex: 4 1 0px;
    --ui-countdown-clock-min: calc(.1 * var(--ui-sport-unit));
    --ui-countdown-end-padding: calc(7.1 * var(--ui-sport-unit));
  }

  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-current .detail-progress-line {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--ui-countdown-line-size) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: calc(7.8 * var(--ui-sport-unit)) 0 0 !important;
    padding-block: 0 !important;
    padding-inline-start: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    color: #666 !important;
  }

  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-current .detail-progress-line > span {
    box-sizing: border-box !important;
    flex: 1 0 calc(69 * var(--ui-sport-unit)) !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--ui-countdown-line-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #666 !important;
    font: 400 var(--ui-countdown-font-size)/var(--ui-countdown-line-size) "Microsoft YaHei" !important;
    white-space: nowrap !important;
  }

  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-current .detail-progress-line > b {
    display: block !important;
    box-sizing: border-box !important;
    flex: var(--ui-countdown-track-flex) !important;
    width: auto !important;
    min-width: 0 !important;
    height: calc(4 * var(--ui-sport-unit)) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #c5c5c5 !important;
  }

  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-current [data-countdown-progress-fill] {
    display: block !important;
    height: 100% !important;
    border-radius: inherit;
    background: #ff2600 !important;
  }

  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-current [data-mobile-countdown] {
    padding-inline: calc(7 * var(--ui-sport-unit)) 0 !important;
    margin: 0 !important;
    color: #ff2600 !important;
  }

  body.mobile-detail-open[data-detail-type="sport"] #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"]) .mobile-sport-datebar {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: calc(36 * var(--ui-sport-unit) + var(--ui-sport-fixed-px)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 calc(10 * var(--ui-sport-unit)) !important;
    border: 0 !important;
    border-bottom: var(--ui-sport-fixed-px) solid #dbdbdb !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: calc(13 * var(--ui-sport-unit)) !important;
    background: #f5f5f5 !important;
  }

  body.mobile-detail-open[data-detail-type="sport"] #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"]) .mobile-sport-datebar > button {
    display: inline-flex !important;
    position: static !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(22 * var(--ui-sport-unit)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: transparent !important;
    color: #000 !important;
    font: 400 calc(12 * var(--ui-sport-unit))/calc(18 * var(--ui-sport-unit)) "Microsoft YaHei" !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  body.mobile-detail-open[data-detail-type="sport"] #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"]) .mobile-sport-datebar > button.active {
    color: #fb8e19 !important;
  }

  body.mobile-detail-open[data-detail-type="sport"] #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"]) .mobile-sport-datebar > [data-ui-date-trigger="dom"] {
    gap: calc(5 * var(--ui-sport-unit)) !important;
    font-family: "Microsoft YaHei" !important;
  }

  body.mobile-detail-open[data-detail-type="sport"] #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"]) .mobile-sport-datebar > [data-ui-date-trigger="dom"]::after,
  body.mobile-detail-open[data-detail-type="sport"] #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"]) .mobile-sport-datebar > [data-ui-date-trigger="dom"]::before {
    display: none !important;
    content: none !important;
  }

  body.mobile-detail-open[data-detail-type="sport"] #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"]) .mobile-sport-datebar .ui-date-trigger-label {
    display: inline-flex !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: center !important;
    line-height: inherit !important;
    font: inherit !important;
  }

  body.mobile-detail-open[data-detail-type="sport"] #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"]) .mobile-sport-datebar [data-ui-date-trigger="dom"] > .ui-date-trigger-chevron[data-ui-date-arrow] {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: calc(15 * var(--ui-sport-unit)) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(10 * var(--ui-sport-unit)) !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 calc(15 * var(--ui-sport-unit)) !important;
    align-self: center !important;
    margin: 0 calc(-5 * var(--ui-sport-unit)) 0 0 !important;
    color: #aaa !important;
    transform: none !important;
    pointer-events: none;
  }
}

@media (max-width: 440px) {
  body[data-detail-type="sport"] #mobileDetail {
    --ui-sport-fixed-px: calc(1px * 390px / 100vw);
  }
}

@media (min-width: 441px) and (max-width: 568px) {
  body[data-detail-type="sport"] #mobileDetail {
    --ui-sport-unit: calc(100vw / 375);
  }
}

@media (min-width: 569px) and (max-width: 1020px) {
  body[data-detail-type="sport"] #mobileDetail {
    --ui-sport-unit: .16vw;
  }

  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-current {
    padding-inline: calc(10 * var(--ui-sport-unit)) !important;
  }
}



/* Public StatCard and StatsGrid primitives. */
.StatCard,
.ui-stat-card,
[data-ui-stat-card] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--ui-card-radius) var(--ui-card-radius) 0 0;
  background: var(--ui-color-surface);
  box-shadow: var(--ui-card-shadow);
  color: var(--ui-color-muted);
  font-family: var(--ui-font-family);
}

.StatCard-title,
.ui-stat-card__title,
[data-ui-stat-title] {
  box-sizing: border-box;
  display: grid;
  min-height: var(--ui-stat-title-height);
  margin: 0;
  padding: 0 var(--ui-page-gutter);
  place-items: center;
  color: #fff;
  font-size: var(--ui-font-size-card-title);
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.StatsGrid,
.ui-stats-grid,
[data-ui-stats-grid] {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(var(--ui-stats-columns, 4), minmax(0, 1fr));
  gap: var(--ui-line-width);
  width: 100%;
  padding: var(--ui-line-width);
  background: var(--ui-color-line);
}

.StatsGrid > *,
.ui-stats-grid > *,
[data-ui-stats-grid] > * {
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  min-height: var(--ui-stat-cell-height);
  margin: 0;
  padding: 0;
  place-items: center;
  background: var(--ui-color-surface);
  color: var(--ui-color-muted);
  font-size: var(--ui-font-size-body);
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

/* Public HorizontalRail primitive. Scroll position is owned by the renderer. */
.HorizontalRail,
.ui-horizontal-rail,
[data-ui-horizontal-rail] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.HorizontalRail::-webkit-scrollbar,
.ui-horizontal-rail::-webkit-scrollbar,
[data-ui-horizontal-rail]::-webkit-scrollbar {
  display: none;
}

/* Public DateToolbar primitive and one shared down-arrow geometry. */
.DateToolbar,
.ui-date-toolbar,
[data-ui-date-toolbar] {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: var(--ui-date-toolbar-height);
  align-items: center;
  background: var(--ui-color-surface-subtle);
  color: var(--ui-color-text);
  font-family: var(--ui-font-family);
  font-size: var(--ui-font-size-body);
}

.DateToolbar > button,
.DateToolbar > label,
.ui-date-toolbar > button,
.ui-date-toolbar > label,
[data-ui-date-toolbar] > button,
[data-ui-date-toolbar] > label {
  box-sizing: border-box;
  min-height: var(--ui-date-toolbar-height);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.DateToolbar .active,
.ui-date-toolbar .active,
[data-ui-date-toolbar] .active {
  color: var(--ui-color-active);
}

.DateToolbar-trigger,
.ui-date-toolbar__trigger,
[data-ui-date-trigger] {
  position: relative;
  min-width: var(--ui-date-toolbar-height);
  min-height: var(--ui-date-toolbar-height);
  padding-right: calc(var(--ui-date-arrow-offset) + var(--ui-date-arrow-size) + 4px);
}

.DateToolbar-trigger::after,
.ui-date-toolbar__trigger::after,
[data-ui-date-trigger]::after {
  position: absolute;
  top: 50%;
  right: var(--ui-date-arrow-offset);
  box-sizing: border-box;
  width: var(--ui-date-arrow-size);
  height: var(--ui-date-arrow-size);
  border: 0;
  border-right: 1.5px solid #aaa;
  border-bottom: 1.5px solid #aaa;
  content: "";
  pointer-events: none;
  transform: translateY(-50%) rotate(45deg);
}

/* A hit marker always lives inside a white cell; the marker itself has no halo. */
.HitCell,
.ui-hit-cell,
[data-ui-hit-cell] {
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  background: var(--ui-color-surface);
}

.HitMarker,
.ui-hit-marker,
[data-ui-hit-marker] {
  box-sizing: border-box;
  display: inline-grid;
  width: var(--ui-hit-size);
  height: var(--ui-hit-size);
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: var(--ui-color-hit);
  box-shadow: none;
  color: #fff;
  line-height: 1;
}

/*
 * Compatibility adapters for the confirmed family class names.
 * They intentionally avoid family-specific data geometry and state.
 */
@media (max-width: 1020px) {
  .MobileSurface,
  .ui-mobile-surface,
  [data-ui-mobile-surface],
  #mobileDetail[data-mobile-ssc],
  #mobileDetail[data-mobile-eleven],
  #mobileDetail[data-mobile-k3] .mk3-shell,
  body[data-detail-type="happy"] #mobileDetail,
  body[data-detail-type="sport"] #mobileDetail {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
  }

  #mobileDetail[data-mobile-ssc] .source-stats .ssc-source-stat,
  #mobileDetail[data-mobile-eleven] .m11-double-stats .m11-stat-cards article,
  body[data-detail-type="happy"] #mobileDetail .mh-stat-cards .mh-stat-card,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-stat-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--ui-stat-title-height) + var(--ui-stat-cell-height) + var(--ui-stat-cell-height));
    overflow: hidden;
    border-radius: var(--ui-card-radius) var(--ui-card-radius) 0 0;
    background: var(--ui-color-surface);
    box-shadow: var(--ui-card-shadow);
  }

  #mobileDetail[data-mobile-ssc] .source-stats .ssc-source-stat h3,
  #mobileDetail[data-mobile-eleven] .m11-double-stats .m11-stat-cards h3,
  body[data-detail-type="happy"] #mobileDetail .mh-stat-cards .mh-stat-card h3,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-stat-card h3 {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-height: var(--ui-stat-title-height);
    margin: 0;
    padding: 0;
    place-items: center;
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-size-card-title);
    font-weight: 400;
    line-height: 1;
    text-align: center;
  }

  #mobileDetail[data-mobile-eleven] .m11-double-stats .m11-stat-cards table,
  body[data-detail-type="happy"] #mobileDetail .mh-stat-cards .mh-stat-card table,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-stat-card table {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: calc(var(--ui-stat-cell-height) + var(--ui-stat-cell-height));
    border: var(--ui-line);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: var(--ui-color-surface);
  }

  #mobileDetail[data-mobile-eleven] .m11-double-stats .m11-stat-cards tr > :not(:last-child),
  body[data-detail-type="happy"] #mobileDetail .mh-stat-cards .mh-stat-card tr > :not(:last-child),
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-stat-card tr > :not(:last-child) {
    border-right: var(--ui-line);
  }

  #mobileDetail[data-mobile-eleven] .m11-double-stats .m11-stat-cards tr + tr > *,
  body[data-detail-type="happy"] #mobileDetail .mh-stat-cards .mh-stat-card tr + tr > *,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-stat-card tr + tr > * {
    border-top: var(--ui-line);
  }

  #mobileDetail[data-mobile-ssc] .source-stats .ssc-source-stat > :is(
    .number-head,
    .number-values,
    .four-head,
    .four-values
  ) {
    box-sizing: border-box;
    border-right: var(--ui-line);
    border-left: var(--ui-line);
  }

  #mobileDetail[data-mobile-ssc] .source-stats .ssc-source-stat > :is(
    .number-head,
    .four-head
  ) {
    border-top: var(--ui-line);
  }

  body[data-detail-type="sport"] #mobileDetail .mobile-sport-stat-cards,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-heat-cards {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  #mobileDetail[data-mobile-ssc] .ssc-road-grid,
  #mobileDetail[data-mobile-eleven] .m11-simple-road,
  #mobileDetail[data-mobile-eleven] .m11-analysis-host .e11-road-panel,
  #mobileDetail[data-mobile-k3] .mk3-road-scroll,
  body[data-detail-type="happy"] #mobileDetail .mh-road-track,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-source-page .pc8473-sport-road-viewport {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #mobileDetail[data-mobile-ssc] .ssc-road-grid::-webkit-scrollbar,
  #mobileDetail[data-mobile-eleven] .m11-simple-road::-webkit-scrollbar,
  #mobileDetail[data-mobile-eleven] .m11-analysis-host .e11-road-panel::-webkit-scrollbar,
  #mobileDetail[data-mobile-k3] .mk3-road-scroll::-webkit-scrollbar,
  body[data-detail-type="happy"] #mobileDetail .mh-road-track::-webkit-scrollbar,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-source-page .pc8473-sport-road-viewport::-webkit-scrollbar {
    display: none;
  }

  #mobileDetail[data-mobile-ssc] .mobile-ssc-datebar,
  #mobileDetail[data-mobile-eleven] .m11-date-tools,
  #mobileDetail[data-mobile-k3] .mk3-toolbar,
  body[data-detail-type="happy"] #mobileDetail .mh-datebar,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-datebar,
  body[data-detail-type="pk10"] #mobileDetail .pk10-analysis-datebar,
  body[data-detail-type="pk10"] #mobileDetail .pk10-analysis-range {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--ui-date-toolbar-height);
    background-color: var(--ui-color-surface-subtle);
    color: var(--ui-color-text);
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-size-body);
  }

  #mobileDetail[data-mobile-ssc] .mobile-ssc-datebar .active,
  #mobileDetail[data-mobile-eleven] .m11-date-tools .active,
  #mobileDetail[data-mobile-k3] .mk3-toolbar .active,
  body[data-detail-type="happy"] #mobileDetail .mh-datebar .active,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-datebar .active,
  body[data-detail-type="pk10"] #mobileDetail .pk10-analysis-datebar .active,
  body[data-detail-type="pk10"] #mobileDetail .pk10-analysis-range .active {
    color: var(--ui-color-active);
  }

  #mobileDetail[data-mobile-ssc] .mobile-ssc-datebar button:last-child,
  #mobileDetail[data-mobile-ssc] .ssc-trend-tools > [data-ssc-action="period-open"],
  #mobileDetail[data-mobile-ssc] .ssc-trend-tools > [data-ssc-action="date-open"],
  #mobileDetail[data-mobile-eleven] .m11-date-tools label,
  #mobileDetail[data-mobile-eleven] .m11-date-current,
  #mobileDetail[data-mobile-k3] .mk3-tool,
  #mobileDetail[data-mobile-k3] [data-k3-open="date"],
  body[data-detail-type="happy"] #mobileDetail .mh-datebar > :last-child,
  body[data-detail-type="happy"] #mobileDetail .mh-date-open,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-datebar > label,
  body[data-detail-type="sport"] #mobileDetail [data-mobile-sport-date-open],
  body[data-detail-type="pk10"] #mobileDetail [data-pk10-open-picker] {
    position: relative;
    min-height: var(--ui-date-toolbar-height);
    padding-right: calc(var(--ui-date-arrow-offset) + var(--ui-date-arrow-size) + 4px);
  }

  body[data-detail-type="pk10"] #mobileDetail [data-pk10-open-picker] i[data-lucide],
  body[data-detail-type="pk10"] #mobileDetail [data-pk10-open-picker] svg[data-lucide],
  body[data-detail-type="pk10"] #mobileDetail [data-pk10-open-picker] svg.lucide {
    display: none;
  }

  #mobileDetail[data-mobile-ssc] .mobile-ssc-datebar button:last-child::after,
  #mobileDetail[data-mobile-ssc] .ssc-trend-tools > [data-ssc-action="period-open"]::after,
  #mobileDetail[data-mobile-ssc] .ssc-trend-tools > [data-ssc-action="date-open"]::after,
  #mobileDetail[data-mobile-eleven] .m11-date-tools label::after,
  #mobileDetail[data-mobile-eleven] .m11-date-current::after,
  #mobileDetail[data-mobile-k3] .mk3-tool::after,
  #mobileDetail[data-mobile-k3] [data-k3-open="date"]::after,
  body[data-detail-type="happy"] #mobileDetail .mh-datebar > :last-child::after,
  body[data-detail-type="happy"] #mobileDetail .mh-date-open::after,
  body[data-detail-type="sport"] #mobileDetail .mobile-sport-datebar > label::after,
  body[data-detail-type="sport"] #mobileDetail [data-mobile-sport-date-open]::after,
  body[data-detail-type="pk10"] #mobileDetail [data-pk10-open-picker]::after {
    position: absolute;
    top: 50%;
    right: var(--ui-date-arrow-offset);
    box-sizing: border-box;
    width: var(--ui-date-arrow-size);
    height: var(--ui-date-arrow-size);
    border: 0;
    border-right: 1.5px solid #aaa;
    border-bottom: 1.5px solid #aaa;
    content: "";
    pointer-events: none;
    transform: translateY(-50%) rotate(45deg);
  }

  /* The real SSC grid row is the white hit-cell backing behind its smaller marker. */
  #mobileDetail[data-mobile-ssc] .ssc-trend-matrix-row {
    background: var(--ui-color-surface);
  }

  #mobileDetail[data-mobile-ssc] :is(
    .ssc-trend-matrix-row > .hit,
    .ssc-position-table .position-hit,
    .ssc-position-table .feature-hit
  ),
  body[data-detail-type="happy"] #mobileDetail .mh-data-grid .mh-grid-row > .hit,
  body[data-detail-type="sport"] #mobileDetail :is(
    .mobile-sport-number-trend-table,
    .mobile-sport-sum-trend-table
  ) td.hit,
  body[data-detail-type="pk10"] #mobileDetail .pk10-trend-table .hit {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
  }
}


/* 20260831-shared-choice-check-r804: family files supply only layout;
 * the marker itself is rendered exclusively by the public attribute contract. */
@media (max-width: 1020px) {
  #mobileDetail[data-mobile-ssc] .ssc-distribution-types button {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-right: 1px solid var(--ui-color-active);
    border-radius: 0;
    background: var(--ui-color-surface);
    color: var(--ui-color-active);
    font: inherit;
    font-size: clamp(13.44px, 3.733333vw, 16.053px);
  }

  #mobileDetail[data-mobile-ssc] .ssc-distribution-types button:last-child {
    border-right: 0;
  }

  #mobileDetail[data-mobile-ssc] .ssc-distribution-types button[data-ui-choice-check][data-ui-choice-selected="true"] {
    background: var(--ui-color-active);
    color: #fff;
  }
}


/* 20260831-desktop-shared-date-picker-r801:
 * one desktop date toolbar and calendar contract for records and every analysis family.
 */
@media (min-width: 1021px) {
  .pc8473-shared-date-toolbar {
    position: relative;
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    color: #333;
    font-family: var(--ui-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
  }

  .pc8473-shared-date-shortcuts {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0;
  }

  .pc8473-shared-date-shortcuts > button {
    box-sizing: border-box;
    min-width: 54px;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #333;
    cursor: pointer;
    font: inherit;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
  }

  .pc8473-shared-date-shortcuts > button.active,
  .pc8473-shared-date-shortcuts > button.checked {
    color: #ff7800;
  }

  .pc8473-shared-date-label {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }

  .pc8473-shared-date-field {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    width: 190px;
    height: 40px;
    align-items: center;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    background: #fff;
  }

  .pc8473-shared-date-field > i {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAABxElEQVR4nO3Uy4uOYRjH8ddCcshpHEoslJSFklKKHJKyUcyQMcj502AcSv4H/gBRxA6hhGzkEJFY2E9jZjaDFQty3Ly66/fWm9Xz1CiLeevXe1/X8zzX97l/1/XcjWaz2fjXaoxBmqNlF+bjKc5jQnLjitrW5/AGi2pBsAT7sQ8jeIxd6MMpnMTx5B7gM3rzzLKqkIdo4jr6A3mWXLve4lFe5GZyr6tCPuIbruI+LqfY35CXuJRr5d4v+FQV0p8iIylyLdC/Ib+zg4sYSm6oKmQQ97AH29GDEziGg9HR5EpfurAXN+pAhnEaZT05akTjo1Y8CVOyLo0frAoZyvQsjB1PsB7LcQt3sBorMiR3sRS78a6OXb0p/B2/EvdkXL/iCHbgJ36gGzsxUGcnxa6J2JI3XIBZ2IptmIc5KVziaThQx67SkzPxu9iyEbMxHWuwDh2YgQ1Yi6k4VHe6ym9V27j2ZdJa8eHY1Yo7Ew/UgZSii3N2lbNpc3ZV4ufYlF29wgusrNv44XwDjVgyt21kO6JWXGycmXVPHch73E6Tu/LfnSZ3Ru1x654r5UiqCjkb0GAmrYoG8QEXKkFGW40xSPN/s+sPTAgPTiu53hoAAAAASUVORK5CYII=") no-repeat 0 0;
    background-size: 25px 25px;
  }

  .pc8473-shared-date-field > i::before,
  .pc8473-shared-date-field > i::after {
    display: none;
  }

  .pc8473-shared-date-input {
    box-sizing: border-box;
    min-width: 0;
    height: 38px;
    flex: 1 1 auto;
    padding: 0 28px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #222;
    cursor: pointer;
    font: inherit;
    line-height: 38px;
  }

  .pc8473-shared-date-field > b {
    position: absolute;
    top: 9px;
    right: 5px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 0;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFklEQVR4nGP4ukn9PzGYYVThV7oGDwBsCBgkdR/lGQAAAABJRU5ErkJggg==") no-repeat 0 0;
    background-size: 10px 10px;
    pointer-events: none;
  }

  .pc8473-shared-date-picker {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2600;
    box-sizing: border-box;
    width: 274px;
    max-width: calc(100vw - 16px);
    min-height: 278px;
    overflow: hidden;
    border: 1px solid #d6d6d6;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
    color: #555;
    font-family: var(--ui-font-family);
    font-size: 15px;
  }

  .pc8473-shared-date-picker > header {
    box-sizing: border-box;
    display: grid;
    height: 46px;
    padding: 0 12px;
    grid-template-columns: 1fr 34px 34px;
    align-items: center;
    border-bottom: 1px solid #e2e2e2;
  }

  .pc8473-shared-date-picker > header button {
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #666;
    cursor: pointer;
    font: inherit;
  }

  .pc8473-shared-date-picker > header .pc8473-history-picker-view {
    text-align: left;
  }

  .pc8473-shared-date-picker-body {
    box-sizing: border-box;
    padding: 10px 12px;
  }

  .pc8473-shared-date-picker .pc8473-history-weekdays,
  .pc8473-shared-date-picker .pc8473-history-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    text-align: center;
  }

  .pc8473-shared-date-picker .pc8473-history-weekdays {
    height: 30px;
    color: #333;
  }

  .pc8473-shared-date-picker .pc8473-history-days button {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    margin: 1px auto;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #555;
    cursor: pointer;
    font: inherit;
  }

  .pc8473-shared-date-picker .pc8473-history-days button.adjacent {
    color: #ccc;
  }

  .pc8473-shared-date-picker .pc8473-history-days button.active,
  .pc8473-shared-date-picker .pc8473-history-months button.active,
  .pc8473-shared-date-picker .pc8473-history-years button.active {
    background: #ff7800;
    color: #fff;
  }

  .pc8473-shared-date-picker button:disabled {
    color: #d4d4d4;
    cursor: default;
  }

  .pc8473-shared-date-picker .pc8473-history-months,
  .pc8473-shared-date-picker .pc8473-history-years {
    display: grid;
    min-height: 210px;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
  }

  .pc8473-shared-date-picker .pc8473-history-months button,
  .pc8473-shared-date-picker .pc8473-history-years button {
    width: 54px;
    height: 44px;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    cursor: pointer;
    font: inherit;
  }

  .pc8473-shared-date-picker-footer {
    box-sizing: border-box;
    display: flex;
    height: 46px;
    padding: 8px 12px;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid #e2e2e2;
  }

  .pc8473-shared-date-picker-footer button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d2d2d2;
    background: #fff;
    color: #555;
    font: inherit;
  }

  .pc8473-analysis-title > .pc8473-shared-date-toolbar,
  .pc8473-pk10-road-modebar > .pc8473-shared-date-toolbar,
  .pc8473-pk10-dedicated-head > .pc8473-shared-date-toolbar {
    margin-left: auto;
  }

  .pc8473-analysis-title-dates .pc8473-shared-date-field,
  .pc8473-pk10-road-dates .pc8473-shared-date-field,
  .pc8473-sport-road-dates .pc8473-shared-date-field {
    width: 176px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"] {
    width: 100%;
  }

  /* 20261008-shared-history-date-picker-r2:
   * All desktop history consumers use the same 54px toolbar. The old source
   * shortcut variant is compact (221x271) and has no confirmation footer;
   * the 274x324 footer variant remains reserved for the single-date profile. */
  .pc8473-history-archive .pc8473-history-head {
    height: 54px;
    min-height: 54px;
    padding: 0 20px;
  }

  /* 20261009-shared-history-state-layer-r4:
   * A slow date request must not insert a row above the archive head. Keep
   * the shared loading/error message above the existing panel so the title,
   * date controls, filters and table retain one stable geometry. */
  .pc8473-history-archive {
    position: relative;
  }

  .pc8473-history-archive > .pc8473-history-request-status {
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    margin: 0 !important;
    transform: translateY(-100%);
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"] {
    width: auto;
    min-height: 54px;
    height: 54px;
    flex: 0 0 auto;
    background: #fff;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"] {
    gap: 0;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-shortcuts > button {
    width: 44px;
    min-width: 44px;
    height: 28px;
    padding: 0;
    font-size: 12px;
    line-height: 28px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-shortcuts > button:not(.active) {
    color: #555;
    background: transparent;
    border-radius: 0;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-shortcuts > button.active {
    color: #fff;
    background: #fa8e19;
    border-radius: 4px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-label {
    height: 28px;
    min-height: 28px;
    gap: 0;
    font-size: 12px;
    line-height: 28px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-label > span:first-child {
    margin-left: 16px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-field {
    width: 220px;
    height: 28px;
    margin-left: 16px;
    border-radius: 0;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-field > i {
    width: 25px;
    height: 25px;
    margin: 0;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-field .pc8473-history-date-input {
    width: auto;
    height: 26px;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 0 28px 0 0;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    line-height: 26px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-field > .pc8473-shared-date-chevron {
    top: 9px !important;
    right: 5px !important;
    width: 10px !important;
    height: 10px !important;
    transform: none !important;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFklEQVR4nGP4ukn9PzGYYVThV7oGDwBsCBgkdR/lGQAAAABJRU5ErkJggg==") no-repeat 0 0;
    background-size: 10px 10px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-shared-date-field > .pc8473-shared-date-chevron > svg {
    display: none !important;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts {
    top: calc(100% + 6px);
    right: 0;
    width: 221px;
    height: 271px;
    min-height: 271px;
    overflow: hidden;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts > header {
    height: 66px;
    padding: 0 10px;
    grid-template-columns: 1fr 34px 34px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts > header button {
    width: 34px;
    height: 38px;
    color: #d4d4d4 !important;
    font-size: 26px;
    line-height: 38px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts > header
    .pc8473-history-picker-view {
    width: auto;
    height: 42px;
    color: #333;
    font-size: 28px;
    font-weight: 600;
    line-height: 42px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts > header
    .pc8473-history-picker-view .pc8473-history-picker-year {
    color: #333;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts > header
    .pc8473-history-picker-view .pc8473-history-picker-month {
    color: #999;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts .pc8473-shared-date-picker-body {
    padding: 4px 0 3px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts .pc8473-history-weekdays,
  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts .pc8473-history-days {
    padding: 0 7px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts .pc8473-history-weekdays {
    height: 28px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts .pc8473-history-weekdays span {
    color: #777 !important;
    font-size: 13px;
    line-height: 28px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts .pc8473-history-days {
    grid-auto-rows: 28px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts .pc8473-history-days button {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    color: #555 !important;
    background: #fff;
    font-size: 12px;
    line-height: 27px;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts .pc8473-history-days button.adjacent {
    color: #999 !important;
  }

  .pc8473-history-date-controls[data-pc-history-date-layout="shortcuts"]
    .pc8473-history-date-picker-shortcuts .pc8473-history-days button.active {
    color: #fff !important;
    background: #8f90a5 !important;
  }

  .pc8473-ssc-date-toolbar {
    width: 100%;
    justify-content: space-between;
  }

  .pc8473-pk10-exact-dates {
    width: 100%;
  }

  .pc8473-twenty-road-date {
    justify-content: flex-end;
  }
}


/* 20260831-shared-interaction-and-responsive-contract-r802:
 * one ChoiceCheck, date trigger, mobile navigation, SSC chart/grid and desktop
 * countdown/header contract for every consumer.
 */
[data-ui-choice-check] {
  position: relative;
  box-sizing: border-box;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

#mobileDetail#mobileDetail [data-ui-choice-check][data-ui-choice-selected]:not([data-ui-choice-selected="true"])::after,
[data-ui-choice-check][data-ui-choice-selected]:not([data-ui-choice-selected="true"])::after {
  display: none !important;
  border: 0 !important;
  content: none !important;
}

#mobileDetail#mobileDetail [data-ui-choice-check][data-ui-choice-selected="true"]::after,
[data-ui-choice-check][data-ui-choice-selected="true"]::after {
  position: absolute !important;
  right: -1px !important;
  bottom: -1px !important;
  top: auto !important;
  left: auto !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: var(--ui-choice-corner-width) !important;
  height: var(--ui-choice-corner-height) !important;
  margin: 0 !important;
  padding: 0 1px 1px 0 !important;
  place-items: end !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, transparent 0 48%, var(--ui-choice-color) 49% 100%) !important;
  color: #fff !important;
  content: "✓" !important;
  font-family: Arial, sans-serif !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

#mobileDetail#mobileDetail [data-ui-choice-check][data-ui-choice-selected="true"],
[data-ui-choice-check][data-ui-choice-selected="true"] {
  border-color: var(--ui-choice-color);
  color: var(--ui-choice-color);
}

/* 20260902-shared-choice-check-legacy-icon-r833:
 * PK10 keeps legacy empty circle and pseudo marker renderers in its templates;
 * the shared bottom-right ChoiceCheck is the only visible selected marker. */
#mobileDetail#mobileDetail
  .pk10-picker-checks [data-ui-choice-check] > i {
  display: none !important;
}

#mobileDetail#mobileDetail
  .pk10-picker-checks [data-ui-choice-check]::before {
  display: none !important;
  content: none !important;
}

[data-ui-date-trigger="dom"] {
  position: static;
  display: inline-flex;
  min-width: 0;
  min-height: inherit;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: normal;
  vertical-align: middle;
  white-space: nowrap;
}

[data-ui-date-trigger="dom"]::after {
  display: none !important;
  content: none !important;
}

[data-ui-date-arrow],
.ui-date-trigger-chevron {
  box-sizing: border-box;
  display: block;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
  flex: 0 0 12px !important;
  align-self: center;
  overflow: visible;
  fill: none;
  stroke: #aaa;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5px;
}

@media (max-width: 1020px) {
  body > .bottom-nav.mobile-only,
  body[data-detail-type] > .bottom-nav.mobile-only,
  body.mobile-detail-open:has(#mobileDetail[data-mobile-ssc]) > .bottom-nav.mobile-only {
    position: fixed;
    z-index: 2147483640;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid !important;
    box-sizing: border-box;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    height: var(--ui-mobile-nav-height);
    min-height: var(--ui-mobile-nav-height);
    padding: 0 0 var(--ui-mobile-safe-bottom);
    border-top: 1px solid #eee;
    background: rgb(255 255 255 / 98%);
  }

  body > .bottom-nav.mobile-only > a {
    display: flex;
    min-width: 0;
    height: var(--ui-mobile-nav-content-height);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #aaa;
    font-family: var(--ui-font-family);
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
  }

  body > .bottom-nav.mobile-only > a > svg,
  body > .bottom-nav.mobile-only > a > i {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  body > .bottom-nav.mobile-only > a > span {
    display: block;
    min-height: 11px;
    line-height: 11px;
  }

  body > .bottom-nav.mobile-only > a.active {
    color: var(--ui-color-active);
  }

  #mobileDetail:not([hidden]) {
    box-sizing: border-box;
    min-height: 100dvh;
    padding-bottom: calc(var(--ui-mobile-nav-height) + 8px) !important;
  }

  #mobileDetail[data-mobile-ssc] .mobile-ssc-bottom {
    display: none !important;
  }

  #mobileDetail[data-mobile-ssc] .mobile-ssc-datebar,
  #mobileDetail[data-mobile-ssc] .ssc-source-date-row,
  #mobileDetail[data-mobile-ssc] .ssc-trend-tools {
    box-sizing: border-box;
    align-items: center !important;
  }

  #mobileDetail[data-mobile-ssc] .mobile-ssc-datebar [data-ui-date-trigger="dom"],
  #mobileDetail[data-mobile-ssc] .ssc-source-date-row [data-ui-date-trigger="dom"],
  #mobileDetail[data-mobile-ssc] .ssc-trend-tools [data-ui-date-trigger="dom"] {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-block: 0 !important;
    align-items: center !important;
    line-height: normal !important;
  }

  #mobileDetail[data-mobile-ssc] .mobile-ssc-datebar [data-ssc-action="date-open"],
  #mobileDetail[data-mobile-ssc] .ssc-source-date-row [data-ssc-action="date-open"] {
    margin-left: auto !important;
  }

  #mobileDetail[data-mobile-ssc] .ssc-road-grid {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(6 * var(--ui-ssc-road-cell-height) + 15px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-inline: 0 !important;
    background: #fff !important;
    background-image: none !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  #mobileDetail[data-mobile-ssc] .ssc-road-column,
  #mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="大龙大虎路珠"] .ssc-road-column {
    box-sizing: border-box !important;
    display: flex !important;
    width: var(--ui-ssc-road-column-width) !important;
    min-width: var(--ui-ssc-road-column-width) !important;
    min-height: calc(6 * var(--ui-ssc-road-cell-height) + 13px) !important;
    flex: 0 0 var(--ui-ssc-road-column-width) !important;
    padding: 5px 0 8px !important;
    flex-direction: column !important;
    border: 0 !important;
    border-inline-start: 1px solid #e5e5e5 !important;
  }

  #mobileDetail[data-mobile-ssc] .ssc-road-grid .ssc-road-column > span,
  #mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="大龙大虎路珠"] .ssc-road-grid .ssc-road-column > span {
    box-sizing: border-box !important;
    width: calc(var(--ui-ssc-road-column-width) - 1px) !important;
    min-width: 0 !important;
    height: var(--ui-ssc-road-cell-height) !important;
    min-height: var(--ui-ssc-road-cell-height) !important;
    flex: 0 0 var(--ui-ssc-road-cell-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: var(--ui-ssc-road-cell-height) !important;
    text-align: center !important;
  }

  #mobileDetail[data-mobile-ssc] .ssc-road-column:nth-child(odd) {
    background: #f5f5f5 !important;
  }

  #mobileDetail[data-mobile-ssc] .ssc-road-column:nth-child(even) {
    background: #fff !important;
  }

  #mobileDetail[data-mobile-ssc] .ssc-trend-matrix,
  #mobileDetail[data-mobile-ssc] .ssc-position-table,
  #mobileDetail[data-mobile-ssc] .ssc-shape-table,
  #mobileDetail[data-mobile-ssc] .ssc-sum-trend,
  #mobileDetail[data-mobile-ssc] .ssc-dragon-trend {
    position: relative;
    isolation: isolate;
  }

  #mobileDetail[data-mobile-ssc] .ssc-trend-matrix-row,
  #mobileDetail[data-mobile-ssc] .position-row,
  #mobileDetail[data-mobile-ssc] .shape-row,
  #mobileDetail[data-mobile-ssc] .sum-trend-row,
  #mobileDetail[data-mobile-ssc] .dragon-row {
    position: relative;
    z-index: auto;
  }

  #mobileDetail[data-mobile-ssc] .ssc-trend-lines,
  #mobileDetail[data-mobile-ssc] .dragon-lines,
  #mobileDetail[data-mobile-ssc] .ssc-sum-trend-lines {
    z-index: 2 !important;
    pointer-events: none;
  }

  #mobileDetail[data-mobile-ssc] .hit,
  #mobileDetail[data-mobile-ssc] .feature-hit,
  #mobileDetail[data-mobile-ssc] .position-hit,
  #mobileDetail[data-mobile-ssc] .type-hit,
  #mobileDetail[data-mobile-ssc] .sum-hit,
  #mobileDetail[data-mobile-ssc] .circle-hit {
    position: relative !important;
    z-index: 3 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  #mobileDetail[data-mobile-ssc] .ssc-trend-matrix .hit,
  #mobileDetail[data-mobile-ssc] .ssc-position-table .position-hit,
  #mobileDetail[data-mobile-ssc] .ssc-dragon-trend.regular .dragon-row > .ssc-hit-cell > .circle-hit {
    background: var(--ui-color-hit) !important;
    color: #fff !important;
  }

  #mobileDetail[data-mobile-ssc] [data-ssc-mark-layered="true"] .omission-layer-current {
    position: relative;
    z-index: 1 !important;
    background-color: #9595c5 !important;
    color: #fff !important;
    animation: ui-ssc-omission-layer-in 140ms ease-out both;
  }
}

@keyframes ui-ssc-omission-layer-in {
  from { background-color: rgb(149 149 197 / 0%); }
  to { background-color: #9595c5; }
}

@media (min-width: 1021px) {
  [data-pc-countdown] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    font-family: Tahoma, "Microsoft YaHei", "微软雅黑", sans-serif !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  #desktopDetail .pc8473-next [data-pc-countdown]:not(.pc8473-segmented-time) {
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
  }

  .pc8473-segmented-time {
    --pc-countdown-block-size: 40px;
    align-content: center !important;
  }

  .pc8473-card-countdown .pc8473-segmented-time,
  .pc8473-card-timing .pc8473-segmented-time {
    --pc-countdown-block-size: 36px;
  }

  .pc8473-segmented-time[data-pc-countdown-mode] > [data-pc-time-unit] {
    box-sizing: border-box;
    display: inline-flex;
    height: var(--pc-countdown-block-size);
    min-height: var(--pc-countdown-block-size);
    align-items: center;
    justify-content: center;
    font-family: inherit !important;
    font-weight: 400 !important;
    line-height: var(--pc-countdown-block-size) !important;
    text-align: center;
  }

  .pc8473-segmented-time[data-pc-countdown-mode] > [data-pc-time-label] {
    box-sizing: border-box;
    display: inline-flex;
    height: var(--pc-countdown-block-size);
    min-height: var(--pc-countdown-block-size);
    align-items: center;
    justify-content: center;
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--pc-countdown-block-size) !important;
  }

  #desktopDetail .pc8473-next > p,
  #desktopDetail .pc8473-current-countdown,
  .pc8473-card-countdown,
  .pc8473-card-timing {
    font-family: Tahoma, "Microsoft YaHei", "微软雅黑", sans-serif !important;
    font-weight: 400 !important;
  }

  #desktopDetail .pc8473-next {
    display: grid !important;
    padding: 0 !important;
    grid-template-rows: 24px 40px !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    row-gap: 12px;
  }

  #desktopDetail .pc8473-next > p {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 24px !important;
  }

  #desktopDetail .pc8473-next > div {
    position: relative;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  #desktopDetail .pc8473-next .pc8473-segmented-time.pc8473-current-time[data-pc-countdown-mode] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    width: max-content !important;
    max-width: 100%;
    min-width: 0;
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    background: transparent !important;
  }

  #desktopDetail .pc8473-next .pc8473-segmented-time.pc8473-current-time[data-pc-countdown-mode] > [data-pc-time-unit] {
    box-sizing: border-box !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    flex: 0 0 40px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 2px !important;
    color: #ffd200 !important;
    background: #444553 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    text-align: center !important;
  }

  #desktopDetail .pc8473-next .pc8473-segmented-time.pc8473-current-time[data-pc-countdown-mode] > [data-pc-time-label] {
    box-sizing: border-box !important;
    width: 14px !important;
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    flex: 0 0 14px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #666 !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    text-align: center !important;
  }

  .pc8473-card-countdown,
  .pc8473-card-timing {
    align-self: stretch !important;
    display: flex !important;
    min-height: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .pc8473-card-lhc .pc8473-segmented-time[data-pc-countdown-mode="total-ms"] {
    width: 112px;
    margin-left: auto;
  }

  .pc8473-card-pk10 .pc8473-segmented-time[data-pc-countdown-mode="total-hms"] {
    width: 175px;
    margin-left: auto;
  }

  .pc8473-history-number-pill,
  .pc8473-number-mode-buttons > button,
  .pc8473-taiwan-order-buttons:not(.compact) > button {
    box-sizing: border-box;
    display: inline-flex;
    width: 80px;
    height: 26px;
    min-height: 26px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: #b9b9b9 !important;
    color: #fff !important;
    cursor: pointer;
    font-family: var(--ui-font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .pc8473-history-number-pill:hover,
  .pc8473-history-number-pill:focus-visible,
  .pc8473-history-number-pill.active,
  .pc8473-number-mode-buttons > button:hover,
  .pc8473-number-mode-buttons > button:focus-visible,
  .pc8473-number-mode-buttons > button.active,
  .pc8473-taiwan-order-buttons:not(.compact) > button:hover,
  .pc8473-taiwan-order-buttons:not(.compact) > button:focus-visible,
  .pc8473-taiwan-order-buttons:not(.compact) > button.active {
    background: #50515f !important;
    color: #fff !important;
  }
  /* Historical 10053 selectors use !important with extra specificity.
   * Keep every result-table mode button on the shared hover/active contract. */
  html body #desktopDetail .pc8473-history-number-pill:hover:not(:disabled):not([aria-disabled="true"]),
  html body #desktopDetail .pc8473-history-number-pill:focus-visible:not(:disabled):not([aria-disabled="true"]),
  html body #desktopDetail .pc8473-history-number-pill.active:not(:disabled):not([aria-disabled="true"]),
  html body #desktopDetail .pc8473-number-mode-buttons > button:hover:not(:disabled):not([aria-disabled="true"]),
  html body #desktopDetail .pc8473-number-mode-buttons > button:focus-visible:not(:disabled):not([aria-disabled="true"]),
  html body #desktopDetail .pc8473-number-mode-buttons > button.active:not(:disabled):not([aria-disabled="true"]),
  html body #desktopDetail .pc8473-taiwan-order-buttons:not(.compact) > button:hover:not(:disabled):not([aria-disabled="true"]),
  html body #desktopDetail .pc8473-taiwan-order-buttons:not(.compact) > button:focus-visible:not(:disabled):not([aria-disabled="true"]),
  html body #desktopDetail .pc8473-taiwan-order-buttons:not(.compact) > button.active:not(:disabled):not([aria-disabled="true"]) {
    background: #50515f !important;
    color: #fff !important;
  }
}

/* 20260831 shared road-filter interaction feedback */
@media (min-width: 1021px) {
  #desktopDetail .pc8473-road-filter > button {
    appearance: none;
    margin: 0 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #666;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
  }

  #desktopDetail .pc8473-road-filter > button:hover,
  #desktopDetail .pc8473-road-filter > button:focus-visible {
    color: var(--ui-color-active);
    text-decoration: underline;
  }

  #desktopDetail .pc8473-road-page article header em {
    color: #f33;
    font-style: normal;
    font-weight: 400;
  }

  #desktopDetail .pc8473-road-run-match,
  #desktopDetail .pc8473-twenty-road-run-match {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--ui-color-active);
    outline-offset: -2px;
    background: rgb(255 143 31 / 12%);
    animation: ui-road-run-match-in 180ms ease-out both;
  }

  #desktopDetail .pc8473-road-empty {
    margin: 24px;
    color: #888;
    text-align: center;
  }
}

@keyframes ui-road-run-match-in {
  from {
    opacity: .45;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 569px) and (max-width: 1020px) {
  #mobileDetail[data-mobile-k3] .mk3-toolbar-days {
    position: absolute !important;
    inset: 0 0 auto auto !important;
    display: block !important;
    width: 168.547px !important;
    height: 37.437px !important;
    margin: 0 !important;
  }

  #mobileDetail[data-mobile-k3] .mk3-toolbar.days-only .mk3-toolbar-days {
    width: 257.297px !important;
  }

  #mobileDetail[data-mobile-k3] .mk3-toolbar-days > button {
    position: absolute !important;
    flex: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-choice-check],
  .pc8473-history-number-pill,
  .pc8473-number-mode-buttons > button,
  .pc8473-taiwan-order-buttons:not(.compact) > button {
    transition: none !important;
  }

  #mobileDetail[data-mobile-ssc] [data-ssc-mark-layered="true"] *,
  #mobileDetail[data-mobile-k3] .omission-layer-current,
  #desktopDetail .pc8473-road-run-match,
  #desktopDetail .pc8473-twenty-road-run-match {
    animation: none !important;
  }
}


/* 20260831 shared countdown boundary recovery */
#desktopDetail .pc8473-current-time[data-pc-boundary-active="true"],
.pc8473-current-time[data-pc-boundary-active="true"] {
  display: inline-flex;
  min-width: 88px;
  align-items: center;
  justify-content: center;
}

#desktopDetail .pc8473-current-time[data-pc-boundary-active="true"] > *,
.pc8473-current-time[data-pc-boundary-active="true"] > * {
  display: none !important;
}

#desktopDetail .pc8473-current-time[data-pc-boundary-active="true"]::after,
.pc8473-current-time[data-pc-boundary-active="true"]::after {
  content: attr(data-boundary-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pc-countdown-block-size, 40px);
  font-family: Tahoma, "Microsoft YaHei", "微软雅黑", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #666;
  white-space: nowrap;
}


/* The confirmed 40px unit contract above deliberately has high specificity.
 * Boundary ticks must outrank it so their status text is the only visible
 * content. Stale trusted countdowns keep their valid units visible. */
#desktopDetail .pc8473-next
  .pc8473-segmented-time.pc8473-current-time[data-pc-countdown-mode]:is(
    [data-pc-boundary-active="true"],
    [data-countdown-state="boundary"]
  ) > :is([data-pc-time-unit], [data-pc-time-label]) {
  display: none !important;
}

/* 20260831-mark-six-sound-rail-overflow-r812: the shared 55px sound control must own a 55px grid track.
 * The former 54px track produced a real one-pixel document overflow at tablet width. */
@media (max-width: 1020px) {
  body[data-detail-type="bingo6"] #mobileDetail .six-header {
    grid-template-columns: 128px minmax(0, 1fr) 55px !important;
  }

  body[data-detail-type="bingo6"] #mobileDetail .six-header .detail-sound {
    width: 55px !important;
    max-width: 55px !important;
  }
}
/* 20260831-responsive-shared-detail-contract-r812:
 * final mobile/tablet ownership for date arrows, footer clearance and fluid
 * family shells. Family files keep intrinsic data-rail geometry only. */
@media (max-width: 1020px) {
  html body #mobileDetail#mobileDetail .pc8473-shared-date-field {
    position: relative !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail [data-ui-date-trigger="dom"][data-pk10-open-picker="date"] {
    position: static !important;
    inset: auto !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    min-width: 0 !important;
    margin-block: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: normal !important;
    vertical-align: middle !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail [data-ui-date-trigger="dom"][data-pk10-open-picker="date"] > [data-ui-date-arrow] {
    position: static !important;
    inset: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    flex: 0 0 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body[data-mobile-single-results] #mobileDetail#mobileDetail:not([hidden]),
  html body[data-detail-type="happy"] #mobileDetail#mobileDetail:not([hidden]),
  html body #mobileDetail#mobileDetail[data-mobile-k3]:not([hidden]) {
    box-sizing: border-box !important;
    min-height: 100dvh;
    padding-bottom: calc(var(--ui-mobile-nav-height) + 8px) !important;
  }

  html body[data-mobile-single-results],
  html body.mobile-detail-open:has(#mobileDetail[data-mobile-k3]) {
    padding-bottom: 0 !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-history-positions {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--ui-page-gutter) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: var(--ui-page-gutter);
  }

  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-history-positions > button:last-child {
    margin-right: 0 !important;
  }

  #mobileDetail#mobileDetail[data-mobile-ssc] .ssc-dragon-trend.big {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #mobileDetail#mobileDetail[data-mobile-ssc] .ssc-dragon-trend.big::-webkit-scrollbar {
    display: none;
  }
}

@media (min-width: 569px) and (max-width: 1020px) {
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-analysis-datebar.cheDate,
    .pk10-analysis-datebar.cheDate .checkday
  ) {
    box-sizing: border-box !important;
    height: var(--ui-date-toolbar-height) !important;
    min-height: var(--ui-date-toolbar-height) !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: var(--ui-date-toolbar-height) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail [data-ui-date-trigger="dom"][data-pk10-open-picker="date"] {
    height: var(--ui-date-toolbar-height) !important;
    min-height: var(--ui-date-toolbar-height) !important;
    max-height: var(--ui-date-toolbar-height) !important;
    margin: 0 !important;
    padding-inline: var(--ui-page-gutter) !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: var(--ui-date-toolbar-height) !important;
  }

  body[data-mobile-single-results] #mobileDetail,
  body[data-detail-type="pc28"] #mobileDetail,
  body[data-detail-type="happy"] #mobileDetail,
  #mobileDetail[data-mobile-k3],
  #mobileDetail[data-mobile-eleven] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-font-size-body) !important;
  }

  body[data-detail-type="happy"] #mobileDetail {
    --mh-source-rem: 104px !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-date-wheel-panel {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-date-wheel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-road-modal:not(.m11-road-single-select) .m11-road-options,
  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-trend-annotation-modal .m11-trend-options {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: var(--ui-page-gutter) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10.398px !important;
    align-content: start !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-road-modal:not(.m11-road-single-select) .m11-road-options > label,
  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-road-modal:not(.m11-road-single-select) .m11-road-options > label:nth-child(4n + 1),
  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-trend-annotation-modal .m11-trend-options > button,
  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-trend-annotation-modal .m11-trend-options > button:nth-child(4n + 1) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    flex: none !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-titlebar {
    height: 52px !important;
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-titlebar h1 {
    top: 0 !important;
    left: 0 !important;
    font-size: 18.72px !important;
    line-height: 52px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) :is(.detail-back, .detail-sound) {
    width: 52px !important;
    height: 52px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-back {
    width: 24px !important;
    height: 24px !important;
    margin-left: 10.4px !important;
    top: 0 !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-back svg {
    width: 24px !important;
    height: 24px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-current {
    height: auto !important;
    min-height: 129px !important;
    margin-top: 10.4px !important;
    padding: 10.4px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-current p {
    height: 18px !important;
    font-size: 16.64px !important;
    line-height: 18px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-current p > :is(strong, span) {
    top: 0 !important;
    left: 0 !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-current p > span {
    font-size: var(--ui-font-size-body) !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-equation {
    width: calc(100% - 20.8px) !important;
    height: 26px !important;
    margin-top: 12.48px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-equation .detail-ball {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
    font-size: 17.68px !important;
    line-height: 26px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) :is(
    .detail-result-line,
    .detail-progress-line
  ) {
    width: calc(100% - 20.8px) !important;
    min-height: 0 !important;
    font-family: var(--ui-font-family) !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-result-line {
    height: 26px !important;
    gap: 10.4px !important;
    margin-top: 6.24px !important;
    padding-left: 7.28px !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: 26px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-progress-line {
    height: 29.12px !important;
    gap: 8.112px !important;
    font-size: 14.56px !important;
    line-height: 29.12px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-progress-line > strong {
    font-size: 14.56px !important;
    line-height: 29.12px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-tabs {
    height: 46.8px !important;
    margin-top: 11.44px !important;
    padding-left: 10.4px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-tabs button {
    height: 45.76px !important;
    font-size: 13.52px !important;
    line-height: 45.76px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-datebar {
    height: var(--ui-date-toolbar-height) !important;
    margin-top: 1px !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: var(--ui-date-toolbar-height) !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-datebar > :is(
    [data-mobile-pc28-date],
    .mobile-pc28-date-trigger
  ) {
    height: 22.88px !important;
    margin-right: 10.4px !important;
    gap: 7.28px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-equation em {
    width: 20.8px !important;
    height: 26px !important;
    flex-basis: 20.8px !important;
    margin-right: 4.16px !important;
    background-size: 368.16px auto !important;
    background-position: -263.536px -34.32px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-equation em:nth-of-type(2) {
    left: 1.04px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-equation em:nth-last-of-type(1) {
    left: .328px !important;
    background-position: -280.8px -34.32px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-progress-line b,
  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .detail-progress-line b i {
    height: 4.16px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .pc-table .detail-table-head {
    height: 45.76px !important;
    grid-template-columns: 53.94px 31.2px minmax(0, 1fr) !important;
    margin-bottom: 2px !important;
    padding-inline: 10.4px !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: 45.76px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .pc-table .detail-table-row {
    height: 44.68px !important;
    grid-template-columns: 40.3px 44.83px minmax(0, 1fr) !important;
    padding-inline: 10.4px !important;
    font-size: 11.44px !important;
    line-height: 43.68px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .pc-table .detail-table-head > span:nth-child(3) {
    padding-left: 20.8px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .pc-table .pc-cell {
    height: 27.04px !important;
    gap: .728px !important;
    padding-left: 58.906px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .pc-table .pc-cell .detail-ball {
    width: 26.825px !important;
    height: 27.04px !important;
    flex-basis: 26.825px !important;
    background-size: 368.16px auto !important;
    background-position: -165.152px -122.72px !important;
    font-size: 16.64px !important;
    line-height: 27.04px !important;
  }

  body[data-detail-type="pc28"] #mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) .pc-table .pc-cell em {
    width: 20.8px !important;
    height: 27.04px !important;
    flex-basis: 20.8px !important;
    background-size: 368.16px auto !important;
    background-position: -263.536px -34.32px !important;
  }

  .mobile-pc28-picker-sheet {
    height: 265px !important;
    font-size: 15px !important;
  }

  .mobile-pc28-picker-sheet header {
    height: 65px !important;
  }

  .mobile-pc28-picker-sheet header button {
    width: 55px !important;
    height: 45px !important;
    font-size: 15px !important;
    line-height: 45px !important;
  }

  .mobile-pc28-picker-sheet header strong {
    height: 68.4px !important;
    padding-top: 23.4px !important;
    font-size: 15px !important;
    line-height: 45px !important;
  }

  .mobile-pc28-picker-wheels,
  .mobile-pc28-picker-wheel {
    height: 200px !important;
  }

  .mobile-pc28-picker-wheels::before {
    top: 80px !important;
  }

  .mobile-pc28-picker-wheels::after {
    top: 120px !important;
  }

  .mobile-pc28-picker-wheel::before,
  .mobile-pc28-picker-wheel::after {
    height: 80px !important;
  }

  .mobile-pc28-picker-wheel button {
    height: 40px !important;
    font-size: 15px !important;
    line-height: 40px !important;
  }
}

/* Shared request-state visual contract. */
body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) [data-mobile-pc28-date-feedback],
body[data-mobile-single-results] #mobileDetail#mobileDetail [data-mobile-single-date-feedback]:not([hidden]),
.pc8473-history-request-status,
.pc8473-sport-data-status,
.mh-request-state,
.mh-request-state.mh-source-state,
.m11-loading,
.ssc-request-status,
.pk10-source-status:is(
  [data-pk10-data-status="loading"],
  [data-pk10-data-status="unavailable"],
  [data-pk10-data-status="stale"]
),
[data-pk10-data-status="loading"] > .pk10-source-status,
[data-pk10-data-status="unavailable"] > .pk10-source-status,
[data-pk10-data-status="stale"] > .pk10-source-status,
.pk10-analysis-empty.pk10-mobile-data-loading:is(
  [data-pk10-data-status="loading"],
  [data-pk10-data-status="unavailable"],
  [data-pk10-data-status="stale"]
) {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  color: var(--ui-color-muted) !important;
  font-family: var(--ui-font-family) !important;
  font-size: var(--ui-font-size-body) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  white-space: normal !important;
}


body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) [data-mobile-pc28-date-feedback],
body[data-mobile-single-results] #mobileDetail#mobileDetail [data-mobile-single-date-feedback]:not([hidden]) {
  border-bottom: var(--ui-line) !important;
  background: var(--ui-color-surface) !important;
}

body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) [data-mobile-pc28-date-status="loading"] [data-mobile-pc28-date-feedback],
body[data-mobile-single-results] #mobileDetail#mobileDetail [data-mobile-single-date-feedback][data-status="loading"],
.pc8473-history-request-status.loading,
.pc8473-sport-data-status.pc8473-sport-data-loading,
.mh-request-state:not(.error, .stale),
.m11-loading:not(.m11-load-error, [data-m11-source-stale="true"]),
.ssc-request-status.loading,
.ssc-request-status[data-ssc-request-state="loading"],
.pk10-source-status[data-pk10-data-status="loading"],
[data-pk10-data-status="loading"] > .pk10-source-status,
.pk10-analysis-empty.pk10-mobile-data-loading[data-pk10-data-status="loading"] {
  color: var(--ui-color-muted) !important;
}

body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) [data-mobile-pc28-date-status="error"] [data-mobile-pc28-date-feedback],
body[data-mobile-single-results] #mobileDetail#mobileDetail [data-mobile-single-date-feedback][data-status="error"],
.pc8473-history-request-status.error,
.pc8473-sport-data-status.pc8473-sport-data-error,
.mh-request-state.error,
.m11-loading.m11-load-error,
.ssc-request-status.error,
.ssc-request-status[data-ssc-request-state="error"],
.pk10-source-status[data-pk10-data-status="unavailable"],
[data-pk10-data-status="unavailable"] > .pk10-source-status,
.pk10-analysis-empty.pk10-mobile-data-loading[data-pk10-data-status="unavailable"] {
  color: #d93025 !important;
}

.pc8473-sport-data-status.pc8473-sport-data-stale,
.mh-request-state.stale,
.m11-loading[data-m11-source-stale="true"],
.ssc-request-status.stale,
.ssc-request-status[data-ssc-request-state="stale"],
.pk10-source-status[data-pk10-data-status="stale"],
[data-pk10-data-status="stale"] > .pk10-source-status,
.pk10-analysis-empty.pk10-mobile-data-loading[data-pk10-data-status="stale"] {
  color: #b36200 !important;
}

body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) [data-mobile-pc28-date-feedback] button[type="button"][data-mobile-pc28-date-retry],
body[data-mobile-single-results] #mobileDetail#mobileDetail [data-mobile-single-date-feedback] button[type="button"][data-mobile-single-date-retry],
.pc8473-history-request-status button[type="button"][data-pc-history-retry],
.pc8473-sport-data-status button[type="button"][data-sport-retry],
.mh-request-state button[type="button"][data-mh-retry],
.mh-request-state button[type="button"][data-mh-source-retry],
.m11-loading button[type="button"][data-m11-retry],
.m11-loading button[type="button"][data-m11-special-retry],
.ssc-request-status button[type="button"],
.pk10-source-status button[type="button"][data-pk10-source-retry] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  min-width: 64px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border: 1px solid var(--ui-color-active) !important;
  border-radius: 3px !important;
  outline: 0;
  background: var(--ui-color-active) !important;
  color: #fff !important;
  cursor: pointer;
  font: inherit !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) [data-mobile-pc28-date-feedback] button[type="button"][data-mobile-pc28-date-retry]:hover,
body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) [data-mobile-pc28-date-feedback] button[type="button"][data-mobile-pc28-date-retry]:active,
body[data-mobile-single-results] #mobileDetail#mobileDetail [data-mobile-single-date-feedback] button[type="button"][data-mobile-single-date-retry]:hover,
body[data-mobile-single-results] #mobileDetail#mobileDetail [data-mobile-single-date-feedback] button[type="button"][data-mobile-single-date-retry]:active,
.pc8473-history-request-status button[type="button"][data-pc-history-retry]:hover,
.pc8473-sport-data-status button[type="button"][data-sport-retry]:hover,
.mh-request-state button[type="button"][data-mh-retry]:hover,
.mh-request-state button[type="button"][data-mh-source-retry]:hover,
.m11-loading button[type="button"][data-m11-retry]:hover,
.m11-loading button[type="button"][data-m11-special-retry]:hover,
.ssc-request-status button[type="button"]:hover,
.pk10-source-status button[type="button"][data-pk10-source-retry]:hover {
  border-color: #e67808 !important;
  background: #e67808 !important;
}

body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) [data-mobile-pc28-date-feedback] button[type="button"][data-mobile-pc28-date-retry]:focus-visible,
body[data-mobile-single-results] #mobileDetail#mobileDetail [data-mobile-single-date-feedback] button[type="button"][data-mobile-single-date-retry]:focus-visible,
.pc8473-history-request-status button[type="button"][data-pc-history-retry]:focus-visible,
.pc8473-sport-data-status button[type="button"][data-sport-retry]:focus-visible,
.mh-request-state button[type="button"][data-mh-retry]:focus-visible,
.mh-request-state button[type="button"][data-mh-source-retry]:focus-visible,
.m11-loading button[type="button"][data-m11-retry]:focus-visible,
.m11-loading button[type="button"][data-m11-special-retry]:focus-visible,
.ssc-request-status button[type="button"]:focus-visible,
.pk10-source-status button[type="button"][data-pk10-source-retry]:focus-visible {
  outline: 2px solid var(--ui-color-active) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1020px) {
  body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is([data-lot-code="10074"], [data-lot-code="10081"]) [data-mobile-pc28-date-feedback],
  body[data-mobile-single-results] #mobileDetail#mobileDetail [data-mobile-single-date-feedback]:not([hidden]),
  .pc8473-history-request-status,
  .pc8473-sport-data-status,
  .mh-request-state,
  .mh-request-state.mh-source-state,
  .m11-loading,
  .ssc-request-status,
  .pk10-source-status:is(
    [data-pk10-data-status="loading"],
    [data-pk10-data-status="unavailable"],
    [data-pk10-data-status="stale"]
  ),
  [data-pk10-data-status="loading"] > .pk10-source-status,
  [data-pk10-data-status="unavailable"] > .pk10-source-status,
  [data-pk10-data-status="stale"] > .pk10-source-status,
  .pk10-analysis-empty.pk10-mobile-data-loading:is(
    [data-pk10-data-status="loading"],
    [data-pk10-data-status="unavailable"],
    [data-pk10-data-status="stale"]
  ) {
    padding: 8px var(--ui-page-gutter) !important;
  }
}


/* Shared countdown presentation state: every mobile consumer uses one metric. */
[data-mobile-countdown],
.ui-countdown-status[data-countdown-state] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  min-width: 0;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  font-family: Tahoma, "Microsoft YaHei", "微软雅黑", sans-serif !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 1020px) {
  [data-mobile-countdown],
  .ui-countdown-status[data-countdown-state] {
    min-height: 18px !important;
    padding-block: 0 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  .ui-countdown-status[data-countdown-state="loading"],
  .ui-countdown-status[data-countdown-state="unavailable"],
  .ui-countdown-status[data-countdown-state="stale"] {
    color: #999 !important;
  }

  [data-mobile-countdown][data-countdown-state="boundary"] {
    color: #e60012 !important;
  }
}

@media (min-width: 1021px) {
  .pc8473-segmented-time.ui-countdown-status[data-countdown-state],
  .pc8473-current-time.ui-countdown-status[data-countdown-state] {
    min-height: var(--pc-countdown-block-size, 40px);
    align-items: center !important;
    justify-content: center !important;
    color: #666;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: var(--pc-countdown-block-size, 40px) !important;
    text-align: center !important;
  }
}

/* 20260831-shared-visual-token-contract-r815
 * Final cascade owner for shared header, stat, date, grid and footer geometry.
 */
@media (min-width: 569px) and (max-width: 1020px) {
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-titlebar.pk10,
  html #mobileDetail#mobileDetail[data-mobile-ssc] .mobile-ssc-titlebar {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-titlebar.pk10 h1,
  html #mobileDetail#mobileDetail[data-mobile-ssc] .mobile-ssc-titlebar h1 {
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-family: var(--ui-font-family) !important;
    font-size: 18.72px !important;
    font-weight: 400 !important;
    line-height: 52px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-titlebar.pk10 :is(.detail-back, .detail-sound),
  html #mobileDetail#mobileDetail[data-mobile-ssc] .mobile-ssc-titlebar button,
  html #mobileDetail#mobileDetail[data-mobile-ssc] .mobile-ssc-titlebar > span {
    box-sizing: border-box !important;
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-double-stats .m11-stat-cards article,
  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-stat-card,
  #mobileDetail#mobileDetail[data-mobile-ssc] .source-stats .ssc-source-stat {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(
      var(--ui-stat-title-height)
      + var(--ui-stat-cell-height)
      + var(--ui-stat-cell-height)
    ) !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-double-stats .m11-stat-cards h3,
  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-stat-card h3,
  #mobileDetail#mobileDetail[data-mobile-ssc] .source-stats .ssc-source-stat h3 {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--ui-stat-title-height) !important;
    min-height: var(--ui-stat-title-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-font-size-card-title) !important;
    font-weight: 400 !important;
    line-height: var(--ui-stat-title-height) !important;
    text-align: center !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-double-stats .m11-stat-cards table,
  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-stat-card table {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(var(--ui-stat-cell-height) + var(--ui-stat-cell-height)) !important;
  }

  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-stat-card td,
  body[data-detail-type="sport"] #mobileDetail#mobileDetail .mobile-sport-stat-card tr.values td,
  #mobileDetail#mobileDetail[data-mobile-ssc] .source-stats .ssc-source-stat span {
    box-sizing: border-box !important;
    height: var(--ui-stat-cell-height) !important;
    min-height: var(--ui-stat-cell-height) !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-font-size-body) !important;
    font-weight: 400 !important;
    line-height: var(--ui-stat-cell-height) !important;
    text-align: center !important;
  }
}

@media (max-width: 1020px) {
  #mobileDetail#mobileDetail[data-mobile-eleven] .m11-date-tools,
  body.mobile-detail-open[data-detail-type="sport"]
    #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"])
    .mobile-sport-datebar {
    align-items: center !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven]
    .m11-date-tools
    [data-ui-date-trigger="dom"],
  body.mobile-detail-open[data-detail-type="sport"]
    #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"])
    .mobile-sport-datebar
    [data-ui-date-trigger="dom"] {
    top: auto !important;
    bottom: auto !important;
    align-self: center !important;
    margin-block: 0 !important;
  }

  #mobileDetail#mobileDetail[data-mobile-eleven]
    .m11-date-tools
    [data-ui-date-trigger="dom"]
    > [data-ui-date-arrow],
  body.mobile-detail-open[data-detail-type="sport"]
    #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"])
    .mobile-sport-datebar
    [data-ui-date-trigger="dom"]
    > [data-ui-date-arrow] {
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
  }

  body[data-detail-type="happy"] #mobileDetail#mobileDetail .mh-groups button.active {
    color: var(--ui-color-active) !important;
  }

  body[data-detail-type="happy"] #mobileDetail#mobileDetail .mh-groups button.active::after {
    right: 20% !important;
    left: 20% !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: var(--ui-color-active) !important;
  }

  html body > .bottom-nav.mobile-only {
    box-sizing: border-box !important;
    grid-template-rows: var(--ui-mobile-nav-content-height) !important;
    height: var(--ui-mobile-nav-height) !important;
    min-height: var(--ui-mobile-nav-height) !important;
    max-height: var(--ui-mobile-nav-height) !important;
    padding: 0 0 var(--ui-mobile-safe-bottom) !important;
    overflow: hidden !important;
  }

  html body > .bottom-nav.mobile-only > a {
    box-sizing: border-box !important;
    height: var(--ui-mobile-nav-content-height) !important;
    min-height: var(--ui-mobile-nav-content-height) !important;
    max-height: var(--ui-mobile-nav-content-height) !important;
    align-self: start !important;
  }
}

@media (max-width: 440px) {
  body.mobile-detail-open[data-detail-type="sport"]
    #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"])
    [data-mobile-sport-page="位置走势"]
    .mobile-sport-position-table.position-distribution
    :is(
      th:nth-child(1),
      tbody tr:not(.summary):not(.summary-head) > td:nth-child(1)
    ) {
    width: 140.4453125px !important;
  }

  body.mobile-detail-open[data-detail-type="sport"]
    #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"])
    [data-mobile-sport-page="位置走势"]
    .mobile-sport-position-table.position-distribution
    :is(
      th:nth-child(2),
      tbody tr:not(.summary):not(.summary-head) > td:nth-child(2)
    ) {
    width: 45.515625px !important;
  }

  body.mobile-detail-open[data-detail-type="sport"]
    #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"])
    [data-mobile-sport-page="位置走势"]
    .mobile-sport-position-table.position-distribution
    :is(
      th:nth-child(n + 3):nth-child(-n + 7),
      tbody tr:not(.summary):not(.summary-head)
        > td:nth-child(n + 3):nth-child(-n + 7)
    ) {
    width: 32.5px !important;
  }

  body.mobile-detail-open[data-detail-type="sport"]
    #mobileDetail#mobileDetail:is([data-lot-code="10086"], [data-lot-code="10087"])
    [data-mobile-sport-page="位置走势"]
    .mobile-sport-position-table.position-distribution
    :is(
      th:nth-child(8),
      tbody tr:not(.summary):not(.summary-head) > td:nth-child(8)
    ) {
    width: 32.5390625px !important;
  }
}

@media (min-width: 1021px) {
  body.desktop-detail-open
    #desktopDetail#desktopDetail
    .pc8473-detail-family-pc28:is(
      [data-detail-lot-code="10074"],
      [data-detail-lot-code="10081"]
    )
    .pc8473-pc28-current-title {
    display: flex !important;
    height: 18px !important;
    align-items: baseline !important;
    gap: 0 !important;
    color: #555 !important;
    font: 400 14px/18px Tahoma, "微软雅黑", "\5FAE软雅黑", sans-serif !important;
  }

  body.desktop-detail-open
    #desktopDetail#desktopDetail
    .pc8473-detail-family-pc28:is(
      [data-detail-lot-code="10074"],
      [data-detail-lot-code="10081"]
    )
    .pc8473-pc28-current-title
    :is(span, b, strong) {
    display: inline !important;
    height: 18px !important;
    padding: 0 !important;
    line-height: 18px !important;
  }

  body.desktop-detail-open
    #desktopDetail#desktopDetail
    .pc8473-detail-family-pc28:is(
      [data-detail-lot-code="10074"],
      [data-detail-lot-code="10081"]
    )
    .pc8473-pc28-current-title
    strong {
    margin: 0 4px 0 0 !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  body.desktop-detail-open
    #desktopDetail#desktopDetail
    .pc8473-detail-family-pc28:is(
      [data-detail-lot-code="10074"],
      [data-detail-lot-code="10081"]
    )
    .pc8473-pc28-current-title
    b {
    margin: 0 3px !important;
    color: #ff8a00 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }
}

/* 20260902-shared-focus-visible-contract-r813
 * ui-contract.css loads after every legacy family stylesheet. Restore one
 * keyboard-only focus indicator without changing mouse focus or control geometry.
 * The source-faithful fixed bottom navigation is the deliberate exception:
 * its selected state is icon/text color only and never draws a surrounding frame.
 */
:is(
  #mobileDetail#mobileDetail#mobileDetail[data-mobile-ssc] button,
  #mobileDetail#mobileDetail#mobileDetail[data-mobile-ssc] select,
  body.mobile-detail-open[data-detail-type="sport"]
    #mobileDetail#mobileDetail#mobileDetail
    button,
  #desktopDetail#desktopDetail#desktopDetail
    .pc8473-simple-side
    > button,
  #desktopDetail#desktopDetail#desktopDetail
    .pc8473-detail-family-pk10
    button,
  html body > .bottom-nav.mobile-only a[href],
  button,
  a[href],
  input:not([type="hidden"]),
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible:not(:where(.bottom-nav.mobile-only > a)):not(:where([data-ui-modal-root] [role="dialog"] > header > button)):not(:where(#mobileDetail[data-mobile-ssc] .ssc-trend-selectors > button[data-ssc-action="filter-open"])):not(:disabled):not([disabled]):not([aria-disabled="true"]):not([hidden]):not([inert]):not(:where([hidden], [inert]) *) {
  outline: 2px solid var(--ui-color-active) !important;
  outline-offset: 2px !important;
}


/* 20260902-tablet-pc28-pk10-single-contract-r816
 * Final 569-1020 contract for the remaining mobile families. Phone geometry
 * stays owned by the source-faithful <=568 rules; tablet shells use fixed
 * source metrics and explicit intrinsic rails instead of enlarging phone vw.
 */
@media (min-width: 569px) and (max-width: 1020px) {
  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ),
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail,
  html body[data-mobile-single-results] #mobileDetail#mobileDetail {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
    font-family: var(--ui-font-family) !important;
  }

  /* PC28: one component contract shared by both verified consumers. */
  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-titlebar {
    box-sizing: border-box !important;
    height: 52px !important;
    min-height: 52px !important;
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-titlebar h1 {
    height: 52px !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-family: var(--ui-font-family) !important;
    font-size: 18.72px !important;
    font-weight: 400 !important;
    line-height: 52px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    inset: auto !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-titlebar :is(.detail-back, .detail-sound) {
    box-sizing: border-box !important;
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-titlebar .detail-back {
    width: 24px !important;
    height: 24px !important;
    margin: 0 0 0 var(--ui-page-gutter) !important;
    top: auto !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-titlebar .detail-back svg {
    width: 24px !important;
    height: 24px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-current {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 129px !important;
    margin-top: var(--ui-page-gutter) !important;
    padding: var(--ui-page-gutter) !important;
    overflow: hidden !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-current p {
    height: 18px !important;
    margin: 0 !important;
    overflow: hidden !important;
    font: 400 16.64px/18px var(--ui-font-family) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-current p > :is(strong, span) {
    position: static !important;
    font-size: var(--ui-font-size-body) !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-equation {
    width: 100% !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 12.48px 0 0 !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-equation .detail-ball {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    font: 400 17.68px/26px var(--ui-font-family) !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-equation .detail-ball.blue {
    margin-right: 2.08px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-equation em {
    width: 20.8px !important;
    height: 26px !important;
    flex: 0 0 20.8px !important;
    margin: 0 4.16px 0 0 !important;
    background-size: 368.16px auto !important;
    background-position: -263.536px -34.32px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-equation em:nth-of-type(2) {
    left: 1.04px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-equation em:nth-last-of-type(1) {
    left: 0 !important;
    background-position: -280.8px -34.32px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) :is(.detail-result-line, .detail-progress-line) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    font-family: var(--ui-font-family) !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-result-line {
    height: 26px !important;
    gap: var(--ui-page-gutter) !important;
    margin-top: 6.24px !important;
    padding-left: 7.28px !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: 26px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-progress-line {
    height: 29.12px !important;
    gap: 8.112px !important;
    font-size: 14.56px !important;
    line-height: 29.12px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-progress-line b {
    height: 4.16px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-progress-line > strong {
    font: 400 14.56px/29.12px var(--ui-font-family) !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-tabs {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 46.26px !important;
    margin-top: 11.44px !important;
    padding-left: var(--ui-page-gutter) !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-tabs button {
    height: 45.76px !important;
    font: 400 13.52px/45.76px var(--ui-font-family) !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-datebar {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--ui-date-toolbar-height) !important;
    min-height: var(--ui-date-toolbar-height) !important;
    margin-top: 1px !important;
    padding: 0 !important;
    align-items: center !important;
    font: 400 var(--ui-font-size-body)/var(--ui-date-toolbar-height) var(--ui-font-family) !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .detail-datebar > :is([data-mobile-pc28-date], .mobile-pc28-date-trigger) {
    height: 22.88px !important;
    min-height: 22.88px !important;
    margin: 0 var(--ui-page-gutter) 0 0 !important;
    gap: 7.28px !important;
    line-height: 22.88px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .pc-table {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .pc-table :is(.detail-table-head, .detail-table-row) {
    box-sizing: border-box !important;
    min-width: 485px !important;
    grid-template-columns: minmax(92px, 1fr) minmax(92px, 1fr) minmax(280px, 2fr) !important;
    padding: 0 var(--ui-page-gutter) !important;
    font-family: var(--ui-font-family) !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .pc-table .detail-table-head {
    height: 45.76px !important;
    margin-bottom: 2px !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: 45.76px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .pc-table .detail-table-row {
    height: 44.68px !important;
    min-height: 44.68px !important;
    font-size: 11.44px !important;
    line-height: 43.68px !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .pc-table .detail-table-head > span:nth-child(3) {
    padding-left: 0 !important;
    text-align: center !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .pc-table .pc-cell {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 27.04px !important;
    gap: 0.728px !important;
    justify-content: center !important;
    padding-left: 0 !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .pc-table .pc-cell .detail-ball {
    width: 26.82px !important;
    height: 27.04px !important;
    flex: 0 0 26.82px !important;
    background-size: 368.16px auto !important;
    background-position: -165.152px -122.72px !important;
    font: 400 16.64px/27.04px var(--ui-font-family) !important;
  }

  html body[data-detail-type="pc28"] #mobileDetail#mobileDetail:is(
    [data-lot-code="10074"],
    [data-lot-code="10081"]
  ) .pc-table .pc-cell em {
    width: 20.8px !important;
    height: 27.04px !important;
    flex: 0 0 20.8px !important;
    background-size: 368.16px auto !important;
    background-position: -263.536px -34.32px !important;
  }

  html body[data-detail-type="pc28"] .mobile-pc28-picker-sheet {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 265px !important;
    bottom: var(--ui-mobile-nav-height) !important;
  }

  html body[data-detail-type="pc28"] .mobile-pc28-picker-sheet header {
    height: 65px !important;
  }

  html body[data-detail-type="pc28"] .mobile-pc28-picker-sheet header button {
    width: 55px !important;
    height: 45px !important;
    font: 400 15px/45px var(--ui-font-family) !important;
  }

  html body[data-detail-type="pc28"] .mobile-pc28-picker-sheet header strong {
    height: 68.4px !important;
    padding-top: 23.4px !important;
    font: 400 15px/45px var(--ui-font-family) !important;
  }

  html body[data-detail-type="pc28"] :is(
    .mobile-pc28-picker-wheels,
    .mobile-pc28-picker-wheel
  ) {
    height: 200px !important;
  }

  html body[data-detail-type="pc28"] .mobile-pc28-picker-wheels::before {
    top: 80px !important;
  }

  html body[data-detail-type="pc28"] .mobile-pc28-picker-wheels::after {
    top: 120px !important;
  }

  html body[data-detail-type="pc28"] .mobile-pc28-picker-wheel::before,
  html body[data-detail-type="pc28"] .mobile-pc28-picker-wheel::after {
    height: 80px !important;
  }

  html body[data-detail-type="pc28"] .mobile-pc28-picker-wheel button {
    height: 40px !important;
    font: 400 15px/40px var(--ui-font-family) !important;
  }

  /* PK10: one tablet shell for every configured PK10 lotCode. */
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-titlebar.pk10,
  html body[data-mobile-single-results] #mobileDetail#mobileDetail :is(
    .detail-titlebar,
    .mobile-single-titlebar
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-titlebar.pk10 h1,
  html body[data-mobile-single-results] #mobileDetail#mobileDetail :is(
    .detail-titlebar,
    .mobile-single-titlebar
  ) h1 {
    box-sizing: border-box !important;
    width: auto !important;
    height: 52px !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-family: var(--ui-font-family) !important;
    font-size: 18.72px !important;
    font-weight: 400 !important;
    line-height: 52px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-titlebar.pk10 :is(
    .detail-back,
    .detail-sound
  ) {
    box-sizing: border-box !important;
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail {
    overflow-x: visible !important;
    --pk10-tablet-row-height: 44.68px;
    --pk10-tablet-control-height: var(--ui-date-toolbar-height);
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-current.generic-current {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 154px !important;
    min-height: 154px !important;
    padding: 11.4px var(--ui-page-gutter) 0 !important;
    border-top-width: 11.77px !important;
    overflow: hidden !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-current.generic-current p {
    height: 19px !important;
    margin: 0 0 var(--ui-page-gutter) !important;
    overflow: hidden !important;
    font: 400 16.64px/19px var(--ui-font-family) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-current.generic-current p span {
    font-size: var(--ui-font-size-body) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-current.generic-current .detail-square-row {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 26px !important;
    margin: 0 0 6.24px !important;
    gap: 12.06px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .sq {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    background-size: 416px auto !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-10 {
    background-position: -329.472px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-10 {
    background-position: -292.2387px -7.176px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-01 {
    background-position: -10.4013px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-01 {
    background-position: -8.3187px -7.176px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-02 {
    background-position: -45.552px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-02 {
    background-position: -40.56px -7.176px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-03 {
    background-position: -80.9133px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-03 {
    background-position: -71.5533px -7.176px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-04 {
    background-position: -116.2707px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-04 {
    background-position: -102.7533px -7.176px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-05 {
    background-position: -152.6733px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-05 {
    background-position: -134.472px -7.176px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-06 {
    background-position: -187.0947px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-06 {
    background-position: -165.984px -7.176px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-07 {
    background-position: -223.392px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-07 {
    background-position: -197.184px -7.176px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-08 {
    background-position: -257.9187px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-08 {
    background-position: -228.8013px -7.176px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-square-row .pk10-mobile-nub-09 {
    background-position: -294.1107px -7.8px !important;
  }
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(.pk10-table .detail-square-cell, .pk10-distribution-row) .pk10-mobile-nub-09 {
    background-position: -261.0387px -7.176px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-current-tiger {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    font: 400 var(--ui-font-size-body)/26px var(--ui-font-family) !important;
    white-space: nowrap !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-current-tiger > :is(span, strong, i) {
    float: none !important;
    display: inline-flex !important;
    height: 26px !important;
    margin: 0 !important;
    align-items: center !important;
    line-height: 26px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-progress-line,
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .detail-progress-line > strong {
    font-size: 14.56px !important;
    line-height: 18px !important;
  }

  /* Shared analysis navigation owns height, typography and active underline.
   * PK10 keeps only its legitimate secondary item width/profile difference.
   */
  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-analysis-nav-track {
    padding-right: 45px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-analysis-nav button {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 92px !important;
    margin: 0 !important;
    padding: 0 14px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-analysis-datebar,
    .pk10-distribution-datebar,
    .pk10-history-datebar,
    .pk10-trend-toolbar,
    .pk10-road-controlbar,
    .pk10-front-back-controlbar,
    .pk10-dedicated-road-toolbar,
    .pk10-sum-trend-mobile-controls,
    .pk10-two-sided-toolbar,
    .pk10-number-law-toolbar,
    .pk10-position-trend-toolbar,
    .pk10-big-dragon-statistics-toolbar
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: var(--pk10-tablet-control-height) !important;
    margin-top: 0 !important;
    padding: 0 var(--ui-page-gutter) !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    font: 400 var(--ui-font-size-body)/var(--pk10-tablet-control-height) var(--ui-font-family) !important;
    white-space: nowrap !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-analysis-datebar,
    .pk10-distribution-datebar,
    .pk10-history-datebar,
    .pk10-trend-dates,
    .pk10-big-dragon-dates
  ) :is(button, .checkday, .checkday > span, .pk10-date-trigger) {
    box-sizing: border-box !important;
    height: var(--pk10-tablet-control-height) !important;
    min-height: var(--pk10-tablet-control-height) !important;
    margin-block: 0 !important;
    padding-block: 0 !important;
    font: 400 var(--ui-font-size-body)/var(--pk10-tablet-control-height) var(--ui-font-family) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-trend-toolbar,
    .pk10-road-controlbar,
    .pk10-front-back-controlbar,
    .pk10-dedicated-road-toolbar,
    .pk10-sum-trend-mobile-controls
  ) > :is(button, .pk10-analysis-datebar) {
    box-sizing: border-box !important;
    min-height: var(--pk10-tablet-control-height) !important;
    margin-block: 0 !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: var(--pk10-tablet-control-height) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-trend-dates,
    .pk10-big-dragon-dates
  ) {
    box-sizing: border-box !important;
    display: flex !important;
    width: auto !important;
    min-width: max-content !important;
    height: var(--pk10-tablet-control-height) !important;
    margin-left: auto !important;
    align-items: center !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-road-filter,
    .pk10-trend-toolbar > button,
    .pk10-trend-dates > button:last-child
  )::after {
    box-sizing: border-box !important;
    top: 50% !important;
    right: 4px !important;
    width: var(--ui-date-arrow-size) !important;
    height: var(--ui-date-arrow-size) !important;
    border: 0 !important;
    border-right: 1.5px solid #aaa !important;
    border-bottom: 1.5px solid #aaa !important;
    background: transparent !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-number-filter {
    grid-template-columns: repeat(10, minmax(36px, 1fr)) !important;
    gap: 5px !important;
    overflow-x: auto !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-number-filter button {
    height: 37.44px !important;
    min-height: 37.44px !important;
    border-radius: var(--ui-card-radius) !important;
    font-size: 14px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-group-filter button {
    height: 29.12px !important;
    min-height: 29.12px !important;
    font-size: 16px !important;
    line-height: 29.12px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-table {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-table :is(
    .detail-table-head,
    .detail-table-row
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 565px !important;
    min-height: var(--pk10-tablet-row-height) !important;
    grid-template-columns: minmax(92px, 1fr) minmax(92px, 1fr) minmax(360px, 3fr) !important;
    padding: 0 var(--ui-page-gutter) !important;
    align-items: center !important;
    font-family: var(--ui-font-family) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-table .detail-table-head {
    display: grid !important;
    height: 45.76px !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: 45.76px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-table .detail-table-row {
    height: var(--pk10-tablet-row-height) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-table .detail-table-row > span:nth-child(-n + 2) {
    font-size: 11.44px !important;
    line-height: var(--pk10-tablet-row-height) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-table .detail-square-cell,
    .pk10-distribution-row > div
  ) {
    min-width: max-content !important;
    gap: 5px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-table .detail-square-cell,
    .pk10-distribution-row
  ) .sq {
    width: 22.88px !important;
    height: 22.88px !important;
    flex: 0 0 22.88px !important;
    background-size: 368.16px auto !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-distribution-row {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 560px !important;
    height: var(--pk10-tablet-row-height) !important;
    min-height: var(--pk10-tablet-row-height) !important;
    grid-template-columns: minmax(92px, 1fr) minmax(92px, 1fr) minmax(360px, 3fr) !important;
    padding: 0 var(--ui-page-gutter) !important;
    font-size: var(--ui-font-size-body) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-analysis-host:has(.pk10-distribution-row) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-double-stats {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
    width: 100% !important;
    padding: 14px var(--ui-page-gutter) 28px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-stat-card {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(
      var(--ui-stat-title-height)
      + var(--ui-stat-cell-height)
      + var(--ui-stat-cell-height)
    ) !important;
    margin-top: 0 !important;
    border-radius: var(--ui-card-radius) !important;
    box-shadow: var(--ui-card-shadow) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-stat-card h2 {
    box-sizing: border-box !important;
    height: var(--ui-stat-title-height) !important;
    min-height: var(--ui-stat-title-height) !important;
    border-radius: var(--ui-card-radius) var(--ui-card-radius) 0 0 !important;
    font: 400 var(--ui-font-size-card-title)/var(--ui-stat-title-height) var(--ui-font-family) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-stat-pairs {
    width: 100% !important;
    height: calc(var(--ui-stat-cell-height) * 2 + 1px) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-stat-pairs :is(
    td,
    span,
    strong
  ) {
    box-sizing: border-box !important;
    height: var(--ui-stat-cell-height) !important;
    min-height: var(--ui-stat-cell-height) !important;
    font: 400 var(--ui-font-size-body)/var(--ui-stat-cell-height) var(--ui-font-family) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-long-dragon {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--ui-page-gutter) !important;
    width: 100% !important;
    padding: var(--ui-page-gutter) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-long-dragon article {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 5px !important;
    border-radius: var(--ui-card-radius) !important;
    box-shadow: var(--ui-card-shadow) !important;
    font: 400 14px/20px var(--ui-font-family) !important;
    white-space: normal !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-mobile-table-scroll,
    .pk10-dragon-statistics-scroll,
    .pk10-champion-sum-statistics-scroll,
    .pk10-sum-trend-mobile-scroll,
    .pk10-position-trend,
    .pk10-big-dragon-trend-box,
    .pk10-number-law-data,
    .pk10-road-scroll,
    .pk10-trend-table
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-dragon-statistics-scroll,
    .pk10-champion-sum-statistics-scroll,
    .pk10-sum-trend-mobile-scroll,
    .pk10-position-trend,
    .pk10-big-dragon-trend-box,
    .pk10-number-law-data
  ) table {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 720px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-road-panel,
    .pk10-dedicated-road-mobile,
    .pk10-road-panels
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-road-panel > header {
    box-sizing: border-box !important;
    height: 36.4px !important;
    min-height: 36.4px !important;
    font: 400 var(--ui-font-size-body)/36.4px var(--ui-font-family) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-road-columns {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 100% !important;
    min-height: 88px !important;
    font-size: var(--ui-font-size-body) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-road-columns > div {
    width: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-road-columns span {
    width: 29.5px !important;
    height: 14.56px !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: 14.56px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-trend-table header,
    .pk10-trend-row,
    .pk10-trend-stat-row
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 390px !important;
    min-height: 37.44px !important;
    font-size: var(--ui-font-size-body) !important;
    line-height: 37.44px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-today-number-grid,
    .pk10-hot-cold-grid
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--ui-page-gutter) !important;
    padding: var(--ui-page-gutter) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-today-number-grid article,
    .pk10-hot-cold-card
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: calc(
      var(--ui-stat-title-height)
      + var(--ui-stat-cell-height)
      + var(--ui-stat-cell-height)
    ) !important;
    border-radius: var(--ui-card-radius) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail :is(
    .pk10-today-number-grid h2,
    .pk10-hot-cold-title
  ) {
    box-sizing: border-box !important;
    height: var(--ui-stat-title-height) !important;
    min-height: var(--ui-stat-title-height) !important;
    font: 400 var(--ui-font-size-card-title)/var(--ui-stat-title-height) var(--ui-font-family) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-picker-backdrop {
    box-sizing: border-box !important;
    padding-bottom: var(--ui-mobile-nav-height) !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-picker-sheet {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 265px !important;
    max-height: 265px !important;
  }

  html body[data-detail-type="pk10"] #mobileDetail#mobileDetail .pk10-picker-checks {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }

  /* Low-frequency single-result family already uses fixed source pixels.
   * Keep the tablet shell fluid and reserve exactly one shared footer.
   */
  html body[data-mobile-single-results] {
    padding-bottom: calc(var(--ui-mobile-nav-height) + 24px) !important;
  }
  html body[data-mobile-single-results] #mobileDetail#mobileDetail .mobile-single-result-tail,
  html body[data-mobile-single-results] #mobileDetail#mobileDetail .single-number-list,
  html body[data-mobile-single-results] #mobileDetail#mobileDetail .single-history-row {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body[data-mobile-single-results] #mobileDetail#mobileDetail .single-history-row {
    height: 44.68px !important;
    min-height: 44.68px !important;
    grid-template-columns: 51.84px 46.96px minmax(0, 1fr) !important;
  }

  html body[data-mobile-single-results] #mobileDetail#mobileDetail .single-result {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 280.8px !important;
    max-width: none !important;
    height: 43.68px !important;
  }

  html body[data-mobile-single-results] .single-picker-panel {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 265px !important;
    right: 0 !important;
    bottom: var(--ui-mobile-nav-height) !important;
    left: 0 !important;
  }

  html body[data-mobile-single-results] :is(
    .single-picker-wheels,
    .single-picker-wheel
  ) {
    height: 200px !important;
  }
}


/* 20260902-shared-analysis-navigation-r839
 * One visual/accessibility shell for PK10, SSC, Happy, K3, 11选5 and Sport.
 * Family adapters keep their labels, route transitions, item widths and data.
 * Doubled detail-root specificity keeps this final contract above legacy family !important locks.
 */
@media (max-width: 1020px) {
  html body #mobileDetail#mobileDetail [data-ui-analysis-nav] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ui-color-line) !important;
    border-radius: 0 !important;
    background: var(--ui-color-surface) !important;
    font-family: var(--ui-font-family) !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav="primary"] {
    height: var(--ui-analysis-primary-height) !important;
    min-height: var(--ui-analysis-primary-height) !important;
    padding: 5.195px 0 6.196px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav="primary"] [data-ui-analysis-tab] {
    position: relative !important;
    box-sizing: border-box !important;
    height: var(--ui-analysis-primary-control-height) !important;
    min-height: var(--ui-analysis-primary-control-height) !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-right: 1px solid var(--ui-color-line) !important;
    border-radius: 0 !important;
    outline: 0;
    background: var(--ui-color-surface) !important;
    box-shadow: none !important;
    color: var(--ui-analysis-nav-color) !important;
    font: 400 var(--ui-analysis-primary-font-size)/var(--ui-analysis-primary-control-height) var(--ui-font-family) !important;
    white-space: nowrap !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav="primary"] [data-ui-analysis-tab]:last-child {
    border-right: 0 !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav="primary"] [data-ui-analysis-tab]::after {
    display: none !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav="primary"] [data-ui-analysis-tab]:is(.active, [aria-current="page"]) {
    color: var(--ui-analysis-nav-active) !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav="primary"] [data-ui-analysis-tab]:is(.active, [aria-current="page"])::after {
    position: absolute !important;
    right: auto !important;
    bottom: -3.633px !important;
    left: 50% !important;
    display: block !important;
    box-sizing: border-box !important;
    width: var(--ui-analysis-primary-underline-width) !important;
    height: var(--ui-analysis-primary-underline-height) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ui-analysis-nav-active) !important;
    content: "" !important;
    transform: translateX(-50%) !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav^="secondary"] {
    height: var(--ui-analysis-secondary-height) !important;
    min-height: var(--ui-analysis-secondary-height) !important;
    padding-block: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav^="secondary"]::-webkit-scrollbar,
  html body #mobileDetail#mobileDetail [data-ui-analysis-track]::-webkit-scrollbar {
    display: none !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-track] {
    box-sizing: content-box !important;
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    height: var(--ui-analysis-secondary-control-height) !important;
    overflow: visible !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav="secondary-direct"] [data-ui-analysis-track] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav^="secondary"] [data-ui-analysis-tab] {
    box-sizing: border-box !important;
    height: var(--ui-analysis-secondary-control-height) !important;
    min-height: var(--ui-analysis-secondary-control-height) !important;
    margin-block: 0 !important;
    padding-block: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: var(--ui-color-surface) !important;
    box-shadow: none !important;
    color: var(--ui-analysis-secondary-color) !important;
    font: 400 var(--ui-analysis-secondary-font-size)/var(--ui-analysis-secondary-control-height) var(--ui-font-family) !important;
    white-space: nowrap !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav^="secondary"] [data-ui-analysis-tab] > span {
    height: var(--ui-analysis-secondary-control-height) !important;
    color: inherit !important;
    font: inherit !important;
    line-height: var(--ui-analysis-secondary-control-height) !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav^="secondary"] [data-ui-analysis-tab]::after {
    display: none !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-nav^="secondary"] [data-ui-analysis-tab]:is(.active, [aria-current="page"]) {
    border-bottom: 0 !important;
    background: var(--ui-color-surface) !important;
    box-shadow: none !important;
    color: var(--ui-analysis-nav-active) !important;
  }

  html body #mobileDetail#mobileDetail [data-ui-analysis-tab]:focus-visible {
    outline: 2px solid var(--ui-analysis-nav-active) !important;
    outline-offset: -3px !important;
  }
}

@media (hover: hover) and (max-width: 1020px) {
  html body #mobileDetail#mobileDetail [data-ui-analysis-tab]:not(.active):not([aria-current="page"]):not(:disabled):hover {
    background: var(--ui-color-surface) !important;
    color: var(--ui-analysis-nav-active) !important;
  }
}

@media (min-width: 1021px) {
  html body .pc8473-detail-main > .pc8473-analysis[data-ui-analysis-nav="desktop"] {
    box-sizing: border-box !important;
    display: flex !important;
    height: auto !important;
    min-height: 50px !important;
    padding: 10px 20px !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    overflow: visible !important;
    background: var(--pc-surface, #fff) !important;
  }

  html body .pc8473-detail-main > .pc8473-analysis[data-ui-analysis-nav="desktop"] [data-pc-analysis] {
    box-sizing: border-box !important;
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--pc-surface, #fff) !important;
    box-shadow: none !important;
    color: #333 !important;
    font: 400 14px/30px var(--pc-font-family, var(--ui-font-family)) !important;
    white-space: nowrap !important;
  }

  html body .pc8473-detail-main > .pc8473-analysis[data-ui-analysis-nav="desktop"] [data-pc-analysis]:is(.active, [aria-current="page"]) {
    border-radius: 4px !important;
    background: var(--pc-active, #fa8e19) !important;
    color: #fff !important;
  }

  html body .pc8473-detail-main > .pc8473-analysis[data-ui-analysis-nav="desktop"] [data-pc-analysis]:focus-visible {
    outline: 2px solid var(--pc-active, #fa8e19) !important;
    outline-offset: 2px !important;
  }
}

@media (hover: hover) and (min-width: 1021px) {
  html body .pc8473-detail-main > .pc8473-analysis[data-ui-analysis-nav="desktop"] [data-pc-analysis]:not(.active):not([aria-current="page"]):not(:disabled):hover {
    background: var(--pc-surface, #fff) !important;
    color: var(--pc-active, #fa8e19) !important;
  }
}

/* 20260902-shared-mobile-countdown-visual-metric-r840:
 * Family renderers keep schedule/ticker ownership; the shared shell owns only
 * mobile countdown typography and vertical geometry. */
@media (max-width: 1020px) {
  html body[data-detail-type] #mobileDetail#mobileDetail .detail-progress-line > strong[data-mobile-countdown],
  html body[data-detail-type] #mobileDetail#mobileDetail .detail-progress-line > .ui-countdown-status[data-countdown-state],
  html body[data-mobile-single-results] #mobileDetail#mobileDetail .mobile-single-countdown-value > strong[data-mobile-countdown],
  html body[data-detail-type="ssc"] #mobileDetail#mobileDetail[data-mobile-ssc] .ssc-current-countdown > strong[data-mobile-countdown],
  html body[data-detail-type="ssc"] #mobileDetail#mobileDetail[data-mobile-ssc] .ssc-current-countdown > .ui-countdown-status[data-countdown-state],
  html body[data-detail-type="sgk3"] #mobileDetail#mobileDetail[data-mobile-k3] .mk3-progress > em[data-k3-countdown] {
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: var(--ui-countdown-line-size, 18px) !important;
    min-height: var(--ui-countdown-line-size, 18px) !important;
    max-height: var(--ui-countdown-line-size, 18px) !important;
    margin-block: 0 !important;
    padding-block: 0 !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    color: inherit;
    font-family: var(--ui-countdown-font-family, Tahoma, "Microsoft YaHei", "微软雅黑", sans-serif) !important;
    font-size: var(--ui-countdown-font-size, 14px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--ui-countdown-line-size, 18px) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body[data-mobile-single-results] #mobileDetail#mobileDetail .mobile-single-countdown-line {
    box-sizing: border-box !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    align-items: center !important;
    line-height: 18px !important;
  }

  html body[data-mobile-single-results] #mobileDetail#mobileDetail .mobile-single-countdown-value {
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin-block: 0 !important;
    padding-block: 0 !important;
    align-self: center !important;
    align-items: center !important;
    line-height: 18px !important;
  }

  html body[data-detail-type="sgk3"] #mobileDetail#mobileDetail[data-mobile-k3] .mk3-progress > :is(span, b, em) {
    margin-block: 0 !important;
  }

  html body[data-detail-type="sgk3"] #mobileDetail#mobileDetail[data-mobile-k3] .mk3-progress.mk3-drawing {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
}



/* 20260902-shared-mobile-bottom-nav-metric-r842:
   fixed mobile/tablet navigation is one 60px border-box component in every family. */
@media (max-width: 1020px) {
  html body.mobile-detail-open[data-detail-type] > nav.bottom-nav,
  html body[data-detail-type] > nav.bottom-nav,
  html body > nav.bottom-nav {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--ui-mobile-nav-height) !important;
    min-height: var(--ui-mobile-nav-height) !important;
    max-height: var(--ui-mobile-nav-height) !important;
  }

  html body.mobile-detail-open[data-detail-type] > nav.bottom-nav > a,
  html body[data-detail-type] > nav.bottom-nav > a,
  html body > nav.bottom-nav > a {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }
}


@media (min-width: 1021px) {
  html body > nav.bottom-nav.mobile-only {
    display: none !important;
  }
}

/* 20260902-r850: one touch-scroll contract for every intrinsic-wide mobile analysis rail. */
@media (max-width: 1020px) {
  #mobileDetail :is(
    .pk10-mobile-table-scroll,
    .ssc-history-ranks,
    .ssc-sum-trend-scroll,
    .mobile-ssc-table.wide,
    .mh-table-scroll,
    .mh-split-scroll,
    .mh-data-grid-scroll,
    .mk3-trend-wrap,
    .mk3-history-stats,
    .m11-table-wrap,
    .m11-source-table-wrap,
    .m11-source-distribution-right,
    .m11-history-table-wrap,
    .e11-table-wrap,
    .mobile-sport-opening-scroll,
    .pc8473-sport-table-wrap,
    .pc8473-sport-road-viewport,
    .pc-table
  ) {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* 20260902-r851: 11选5 keeps one bottom-nav clearance outside its phone zoom layer. */
@media (max-width: 568px) {
  html body #mobileDetail#mobileDetail[data-mobile-eleven]:not([hidden]) {
    padding-bottom: 0 !important;
  }

  html body.mobile-detail-open:has(#mobileDetail[data-mobile-eleven]:not([hidden])) {
    box-sizing: border-box !important;
    padding-bottom: calc(var(--ui-mobile-nav-height) + 8px) !important;
  }
}
@media (min-width: 569px) and (max-width: 1020px) {
  html body.mobile-detail-open:has(#mobileDetail[data-mobile-eleven]:not([hidden])) {
    padding-bottom: 0 !important;
  }

  html body #mobileDetail#mobileDetail[data-mobile-eleven]:not([hidden]) {
    box-sizing: border-box !important;
    min-height: 100dvh;
    padding-bottom: calc(var(--ui-mobile-nav-height) + 8px) !important;
  }
}



/* 20260903-r852: a visible non-11x5 detail root exclusively owns the shared
 * bottom-nav clearance. The home body reservation remains unchanged. */
@media (max-width: 1020px) {
  html body.mobile-detail-open:not(:has(#mobileDetail[data-mobile-eleven]:not([hidden]))) {
    box-sizing: border-box !important;
    padding-bottom: 0 !important;
  }
}

@media (min-width: 569px) and (max-width: 1020px) {
  html body[data-mobile-single-results] #mobileDetail#mobileDetail:not([hidden]) {
    padding-bottom: calc(var(--ui-mobile-nav-height) + 24px) !important;
  }
}

/* 20260903-r854: the mobile lottery catalog owns its one footer clearance.
 * The page shell stays neutral so the final catalog row cannot slide beneath
 * the fixed bottom navigation at phone or tablet widths. */
@media (max-width: 1020px) {
  html body.mobile-detail-open[data-detail-type="page"]:has(
    #mobileDetail#mobileDetail:not([hidden]) .mobile168-catalog
  ) {
    box-sizing: border-box !important;
    padding-bottom: 0 !important;
  }

  html body.mobile-detail-open[data-detail-type="page"]:has(
    #mobileDetail#mobileDetail:not([hidden]) .mobile168-catalog
  ) #mobileDetail#mobileDetail:not([hidden]) {
    box-sizing: border-box !important;
    padding-bottom: 0 !important;
  }

  html body.mobile-detail-open[data-detail-type="page"]:has(
    #mobileDetail#mobileDetail:not([hidden]) .mobile168-catalog
  ) #mobileDetail#mobileDetail:not([hidden]) .mobile168-catalog {
    box-sizing: border-box !important;
    padding-bottom: calc(var(--ui-mobile-nav-height) + 8px) !important;
    scroll-padding-bottom: calc(var(--ui-mobile-nav-height) + 8px) !important;
  }
}

/*
 * 20260903-all-parity-r900
 * Final shared section of ui-contract.css. Family renderers own data only;
 * identical controls and grids share these rules.
 */

:root {
  --ui-grid-line: #d9d9d9;
  --ui-source-mode-active: #50515f;
  --ui-source-layer: #9595c5;
}

/* One date-chevron implementation only: the 12x8 SVG emitted by UIContract. */
.DateToolbar-trigger::after,
.ui-date-toolbar__trigger::after,
[data-ui-date-trigger]::after,
#mobileDetail [data-ui-date-trigger]::after {
  display: none !important;
  content: none !important;
}

[data-ui-date-trigger] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  min-width: 0;
  align-items: center !important;
  justify-content: center;
  gap: 7px !important;
  line-height: normal !important;
  white-space: nowrap;
}

[data-ui-date-trigger] > [data-ui-date-arrow],
[data-ui-date-arrow].ui-date-trigger-chevron {
  position: static !important;
  inset: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
  flex: 0 0 12px !important;
  align-self: center !important;
  margin: 0 !important;
  overflow: visible !important;
  fill: none !important;
  stroke: #aaa !important;
  transform: none !important;
}

/* One orange bottom-right selected check across every family. */
[data-ui-choice-check]::before {
  display: none !important;
  content: none !important;
}

#mobileDetail [data-ui-choice-check][data-ui-choice-selected="true"]::after,
[data-ui-choice-check][data-ui-choice-selected="true"]::after {
  position: absolute !important;
  inset: auto -1px -1px auto !important;
  z-index: 6 !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: var(--ui-choice-corner-width, 20.2734375px) !important;
  height: var(--ui-choice-corner-height, 21.8359375px) !important;
  margin: 0 !important;
  padding: 0 1px 1px 0 !important;
  place-items: end !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, transparent 0 48%, var(--ui-choice-color, #fb8e19) 49% 100%) !important;
  color: #fff !important;
  content: "✓" !important;
  font: 700 9px/1 Arial, sans-serif !important;
  pointer-events: none !important;
  transform: none !important;
}

#mobileDetail [data-ui-choice-check][data-ui-choice-selected="true"],
[data-ui-choice-check][data-ui-choice-selected="true"] {
  border-color: var(--ui-choice-color, #fb8e19) !important;
  color: var(--ui-choice-color, #fb8e19);
}

@keyframes ui-omission-layer-in {
  from { opacity: .15; }
  to { opacity: 1; }
}

[data-ui-omission-layered="true"] .omission-layer-current,
[data-ssc-layered="true"] .omission-layer-current,
[data-sport-layered="true"] .omission-layer-current,
[data-mh-layered="true"] .omission-layer-current,
.layer.omission-layer-current {
  background: var(--ui-source-layer) !important;
  animation: ui-omission-layer-in 180ms ease-out both;
}

/* Shared no-gap mode header. Rank/filter pills are intentionally excluded. */
[data-ui-segmented="seamless"],
#mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="历史号码统计"] > .mobile-ssc-segmented:first-child,
#mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="单双大小历史"] > .mobile-ssc-segmented:first-child,
body[data-detail-type="happy"] #mobileDetail .mh-history-stats > .mh-mode-tabs:first-child,
body[data-detail-type="happy"] #mobileDetail .mh-history-modes,
body[data-detail-type="sport"] #mobileDetail .mobile-sport-history-modes {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  gap: 0 !important;
  column-gap: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f5f5f5 !important;
}

[data-ui-segmented="seamless"] > button,
#mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="历史号码统计"] > .mobile-ssc-segmented:first-child > button,
#mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="单双大小历史"] > .mobile-ssc-segmented:first-child > button,
body[data-detail-type="happy"] #mobileDetail .mh-history-stats > .mh-mode-tabs:first-child > button,
body[data-detail-type="happy"] #mobileDetail .mh-history-modes > button,
body[data-detail-type="sport"] #mobileDetail .mobile-sport-history-modes > button {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1px solid #ddd !important;
  border-radius: 0 !important;
  background: #f5f5f5 !important;
  color: #666 !important;
  line-height: 46px !important;
}

[data-ui-segmented="seamless"] > button:last-child,
#mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="历史号码统计"] > .mobile-ssc-segmented:first-child > button:last-child,
#mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="单双大小历史"] > .mobile-ssc-segmented:first-child > button:last-child,
body[data-detail-type="happy"] #mobileDetail .mh-history-stats > .mh-mode-tabs:first-child > button:last-child,
body[data-detail-type="happy"] #mobileDetail .mh-history-modes > button:last-child,
body[data-detail-type="sport"] #mobileDetail .mobile-sport-history-modes > button:last-child {
  border-right: 0 !important;
}

[data-ui-segmented="seamless"] > button.active,
#mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="历史号码统计"] > .mobile-ssc-segmented:first-child > button.active,
#mobileDetail[data-mobile-ssc] [data-mobile-ssc-page="单双大小历史"] > .mobile-ssc-segmented:first-child > button.active,
body[data-detail-type="happy"] #mobileDetail .mh-history-stats > .mh-mode-tabs:first-child > button.active,
body[data-detail-type="happy"] #mobileDetail .mh-history-modes > button.active,
body[data-detail-type="sport"] #mobileDetail .mobile-sport-history-modes > button.active {
  background: var(--ui-source-mode-active) !important;
  color: #fff !important;
}

/* SSC opening header and rows must share exactly one column template. */
#mobileDetail[data-mobile-ssc] .mobile-ssc-table.opening .opening-head,
#mobileDetail[data-mobile-ssc] .mobile-ssc-table.opening .opening-row {
  grid-template-columns:
    clamp(36.115px, 10.032051%, 43.138px)
    clamp(45.482px, 12.634215%, 54.327px)
    minmax(0, 1fr) !important;
}

#mobileDetail[data-mobile-ssc] .mobile-ssc-table.opening :is(.opening-head, .opening-row) > span {
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Complete grid borders for SSC trend/shape/position/sum/dragon tables. */
#mobileDetail[data-mobile-ssc] :is(
  .ssc-trend-matrix,
  .ssc-shape-table,
  .ssc-position-table,
  .ssc-sum-trend,
  .ssc-dragon-trend.regular
) {
  position: relative !important;
  isolation: isolate;
  box-sizing: border-box !important;
  padding: 0 !important;
  gap: 0 !important;
  border-top: 1px solid var(--ui-grid-line) !important;
  border-left: 1px solid var(--ui-grid-line) !important;
  background: #fff !important;
}

#mobileDetail[data-mobile-ssc] :is(
  .ssc-trend-matrix-row,
  .shape-row,
  .position-row,
  .sum-trend-head,
  .sum-trend-subhead,
  .sum-trend-row,
  .dragon-head,
  .dragon-row
) {
  position: relative !important;
  /*
   * r916: rows must not create stacking contexts. Line SVGs live at z=2 and
   * hit balls at z=4 in the shared table isolate, so balls stay above lines.
   */
  z-index: auto !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

#mobileDetail[data-mobile-ssc] .sum-trend-row {
  border-bottom: 0 !important;
}

#mobileDetail[data-mobile-ssc] :is(
  .ssc-trend-matrix-row,
  .shape-row,
  .position-row,
  .sum-trend-head,
  .sum-trend-subhead,
  .sum-trend-row,
  .dragon-head,
  .dragon-row
) > * {
  box-sizing: border-box !important;
  border-right: 1px solid var(--ui-grid-line) !important;
  border-bottom: 1px solid var(--ui-grid-line) !important;
}

#mobileDetail[data-mobile-ssc] :is(
  .ssc-trend-matrix-row,
  .shape-row,
  .position-row,
  .sum-trend-row,
  .dragon-row
) > .ssc-hit-cell {
  position: relative !important;
  z-index: auto !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  align-items: center !important;
  justify-content: center !important;
  border-right: 1px solid var(--ui-grid-line) !important;
  border-bottom: 1px solid var(--ui-grid-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#mobileDetail[data-mobile-ssc] .ssc-hit-cell > :is(
  .hit,
  .type-hit,
  .feature-hit,
  .position-hit,
  .sum-hit,
  .circle-hit
) {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  margin: auto !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
}

#mobileDetail[data-mobile-ssc] :is(
  .ssc-trend-lines,
  .dragon-lines,
  .ssc-sum-trend-lines,
  .shape-trend-lines,
  .position-trend-lines
) {
  z-index: 2 !important;
  pointer-events: none !important;
}

#mobileDetail[data-mobile-ssc] :is(
  .hit,
  .type-hit,
  .feature-hit,
  .position-hit,
  .circle-hit,
  .chosen,
  .tie,
  .sum-hit
) {
  position: relative !important;
  z-index: 4 !important;
  background-clip: padding-box !important;
}

/* Complete source table lines and ball-over-line ordering for other families. */
body[data-detail-type="sport"] #mobileDetail :is(
  .mobile-sport-number-trend-table,
  .mobile-sport-position-table,
  .mobile-sport-sum-trend-table,
  .mobile-sport-history-table
),
body[data-detail-type="happy"] #mobileDetail :is(
  .mh-history-stats-table,
  .mh-twoface-table,
  .mh-number-road-table
),
#mobileDetail[data-mobile-k3] table,
#mobileDetail[data-mobile-eleven] table {
  box-sizing: border-box !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

body[data-detail-type="sport"] #mobileDetail :is(
  .mobile-sport-number-trend-table,
  .mobile-sport-position-table,
  .mobile-sport-sum-trend-table,
  .mobile-sport-history-table
) :is(th, td),
body[data-detail-type="happy"] #mobileDetail :is(
  .mh-history-stats-table,
  .mh-twoface-table,
  .mh-number-road-table
) :is(th, td),
#mobileDetail[data-mobile-k3] table :is(th, td),
#mobileDetail[data-mobile-eleven] table :is(th, td) {
  box-sizing: border-box !important;
  border: 1px solid var(--ui-grid-line) !important;
}

body[data-detail-type="sport"] #mobileDetail svg[class*="trend-lines"],
body[data-detail-type="sport"] #mobileDetail svg[class*="road-lines"],
body[data-detail-type="happy"] #mobileDetail svg[class*="trend-lines"],
body[data-detail-type="happy"] #mobileDetail svg[class*="road-lines"],
#mobileDetail[data-mobile-k3] svg[class*="line"],
#mobileDetail[data-mobile-eleven] svg[class*="line"] {
  z-index: 2 !important;
  pointer-events: none !important;
}

body[data-detail-type="sport"] #mobileDetail :is(.hit, [class*="-hit"], [class*="-ball"]),
body[data-detail-type="happy"] #mobileDetail :is(.hit, [class*="-hit"], [class*="-ball"]),
#mobileDetail[data-mobile-k3] :is(.hit, [class*="-hit"], [class*="-ball"]),
#mobileDetail[data-mobile-eleven] :is(.hit, [class*="-hit"], [class*="-ball"]) {
  position: relative !important;
  z-index: 4 !important;
  background-clip: padding-box !important;
}

/* One shared width allocator; lottery schedules and progress ratios are unchanged.
 * Keep the label and full clock visible before allocating the remaining track.
 * Sports' source geometry supplies trailing space through its visual profile. */
@media (max-width: 1020px) {
  html body[data-detail-type] #mobileDetail#mobileDetail .detail-progress-line {
    padding-inline-end: var(--ui-countdown-end-padding, 0px) !important;
  }

  #mobileDetail[data-mobile-ssc] .ssc-current-countdown > .ssc-countdown-track,
  body[data-detail-type]:not([data-detail-type="mark-six"]) #mobileDetail .detail-progress-line > b[data-countdown-progress-total] {
    flex: var(--ui-countdown-track-flex, 1 1 auto) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body[data-detail-type] #mobileDetail#mobileDetail .detail-progress-line > strong[data-mobile-countdown] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: var(--ui-countdown-clock-min, 43.1796875px) !important;
  }
}

/* Every long table can scroll clear of the fixed source footer. */
@media (max-width: 1020px) {
  #mobileDetail:not([hidden]) {
    box-sizing: border-box !important;
    min-height: 100dvh;
    overflow-x: clip;
  }

  #mobileDetail :is(
    .mobile-ssc-table,
    .ssc-trend-matrix,
    .ssc-shape-table,
    .ssc-position-table,
    .ssc-dragon-trend,
    .mobile-sport-analysis-content,
    .mh-page,
    .mk3-page,
    .m11-page
  ) {
    scroll-padding-bottom: calc(var(--ui-mobile-nav-height, 60px) + 8px);
  }

  /* Today/yesterday/day-before stay grouped immediately before the date trigger. */
  #mobileDetail[data-mobile-ssc] .mobile-ssc-datebar,
  #mobileDetail[data-mobile-ssc] .ssc-source-date-row,
  #mobileDetail[data-mobile-eleven] .m11-date-tools,
  body[data-detail-type="pc28"] #mobileDetail .detail-datebar,
  body[data-detail-type="pk10"] #mobileDetail .pk10-analysis-datebar .checkday {
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  #mobileDetail[data-mobile-ssc] .mobile-ssc-datebar > button:not([data-ui-date-trigger]),
  #mobileDetail[data-mobile-ssc] .ssc-source-date-row > button:not([data-ui-date-trigger]),
  #mobileDetail[data-mobile-eleven] .m11-date-tools > button,
  body[data-detail-type="pc28"] #mobileDetail .detail-datebar > button:not([data-ui-date-trigger]),
  body[data-detail-type="pk10"] #mobileDetail .pk10-analysis-datebar .checkday > button:not([data-ui-date-trigger]) {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  #mobileDetail[data-mobile-ssc] :is(.mobile-ssc-datebar, .ssc-source-date-row) > [data-ui-date-trigger],
  #mobileDetail[data-mobile-eleven] .m11-date-tools > [data-ui-date-trigger],
  body[data-detail-type="pc28"] #mobileDetail .detail-datebar > [data-ui-date-trigger],
  body[data-detail-type="pk10"] #mobileDetail .pk10-analysis-datebar [data-ui-date-trigger] {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    margin: 0 !important;
    padding: 0 8px !important;
  }

  #mobileDetail[data-mobile-k3] .mk3-toolbar:not(.days-only) .mk3-toolbar-days > [data-ui-date-trigger] {
    display: none !important;
  }

  #mobileDetail[data-mobile-ssc] .ssc-source-toolbar > .ssc-source-date-row {
    flex: 0 0 230px !important;
    width: 230px !important;
    margin-left: auto !important;
    padding: 0 !important;
  }

  #mobileDetail[data-mobile-ssc] .ssc-trend-tools > [data-ssc-shortcut="today"] {
    margin-left: auto !important;
  }

  /* Tablet source catalog uses five cards per row, while phones remain three. */
  @media (min-width: 768px) {
    .mobile168-catalog-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .mobile168-catalog-grid > button {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }

    /* Keep long day countdowns centered at the source font size. The grid gap
     * provides room for the text beyond each card without touching its neighbor. */
    .mobile168-catalog-grid > button > span {
      max-width: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-choice-check],
  .omission-layer-current {
    transition: none !important;
    animation: none !important;
  }
}