/* Static site extras + performance (no Vue runtime) */
:root {
  --brand: #744400;
  --danger: #e03333;
  --ball-red: #e90000;
  --ball-blue: #0022aa;
  --ball-green: #008800;
  --bg: #f5f5f5;
  --card: #fff;
  --text: #333;
  --muted: #757575;
  --border: #e8e8e8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
}

.app-shell {
  max-width: 960px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  contain: layout style;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.site-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.site-title {
  font-size: clamp(12px, 3.8vw, 18px);
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.build-ver {
  font-size: 10px;
  color: #bbb;
  line-height: 1;
  min-width: 22px;
  text-align: center;
}

.view-switch-btns {
  display: flex;
  gap: 2px;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 2px;
}

.view-switch-btns button,
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #888;
  display: grid;
  place-items: center;
}

.view-switch-btns button.active {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.theme-toggle {
  background: #f5f5f5;
}

/* Ads — 对齐 yuce777 / PCDD */
.ads-display {
  width: 100%;
}

.image-ads-section-top,
.image-ads-section,
.middle-banner,
.side-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 0;
  text-align: center;
}

.image-ad {
  display: block;
  width: 100%;
  max-width: 960px;
  cursor: pointer;
}

.image-ad img {
  width: 100%;
  max-width: 960px;
  border-radius: 4px;
  margin: 0 auto;
}

.image-ad.ad-align-center {
  max-width: 480px;
}

.text-ads-container {
  padding: 8px 12px 0;
}

.text-ads-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 960px;
  margin: 0 auto;
}

.text-ad-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dedede;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  background: #fff;
}

.text-ad-item .ad-icon {
  color: inherit;
  flex-shrink: 0;
}

.text-ad-item .ad-content {
  flex: 1;
  min-width: 0;
}

.random-bottom-ad {
  display: none;
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
}

.random-bottom-ad.show {
  display: block;
}

.random-bottom-ad img {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  border-radius: 4px;
}

/* 左右悬浮广告 */
#bottombox .leftbox,
#bottombox .rightbox {
  position: fixed;
  bottom: 80px;
  z-index: 999;
  width: 60px;
  height: 60px;
  display: block;
}

#bottombox .leftbox {
  left: 10px;
}

#bottombox .rightbox {
  right: 10px;
}

#bottombox img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border: 2px solid #fff;
  border-radius: 20%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  background: #fff;
}

@media (min-width: 1100px) {
  #bottombox .leftbox {
    left: calc(50% - 490px - 70px);
  }
  #bottombox .rightbox {
    right: calc(50% - 490px - 70px);
  }
}

.footer-mail {
  display: none;
}

.fly-footer {
  border-top: none;
  background: transparent;
  border-radius: 0;
}

/* Main */
.main-content {
  flex: 1;
  padding: 8px 12px 80px;
}

.container {
  width: 100%;
}

/* Compact cards */
.compact-game-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

.game-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  contain: content;
  will-change: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.game-logo {
  width: 42px;
  height: 28px;
  object-fit: contain;
}

.game-logo-wide {
  width: 56px;
}

.game-title-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.game-name {
  font-weight: 700;
  font-size: 14px;
}

.game-period {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.countdown-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid #ffe0b2;
  background: linear-gradient(135deg, #fff9f0, #fff3e0);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.countdown-pill.urgent {
  border-color: #ffcdd2;
  background: linear-gradient(135deg, #fff5f5, #ffebee);
  color: var(--danger);
}

.countdown-pill.daily .cd-text {
  font-variant-numeric: normal;
  letter-spacing: 0;
}

.card-body {
  padding: 10px;
}

.card-numbers {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 42px;
}

.operator {
  color: #999;
  font-weight: 700;
  margin: 0 2px;
}

.num-ball,
.sum-ball,
.ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: var(--brand);
}

.num-ball {
  background: #5c4033;
}

.sum-ball {
  background: var(--ball-red);
}

.sum-ball.is-big {
  background: var(--ball-red);
}

.sum-ball.is-small {
  background: var(--ball-blue);
}

.pk-ball {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.pk-1 { background: #f4c430; color: #333; }
.pk-2 { background: #1e90ff; }
.pk-3 { background: #333; }
.pk-4 { background: #ff8c00; }
.pk-5 { background: #20b2aa; }
.pk-6 { background: #6a5acd; }
.pk-7 { background: #808080; }
.pk-8 { background: #ff1493; }
.pk-9 { background: #8b4513; }
.pk-10 { background: #2e8b57; }

.lhc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.lhc-ball-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lhc-ball {
  width: 30px;
  height: 30px;
}

.ball-red,
.wave-red { background: var(--ball-red); }
.ball-blue,
.wave-blue { background: var(--ball-blue); }
.ball-green,
.wave-green { background: var(--ball-green); }

.zodiac-label {
  font-size: 11px;
  color: #666;
  line-height: 1;
}

.plus-sign {
  font-weight: 700;
  color: #999;
  margin: 0 2px 14px;
}

.ssc-row .ball {
  background: #c62828;
}

/* Detail tabs */
.pcdd-games-section {
  margin-bottom: 16px;
}

.lottery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}

.tab-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fafafa;
  font-size: 12px;
  color: #555;
  transition: border-color 0.15s, background 0.15s;
}

.tab-btn.active {
  border-color: var(--brand);
  background: #fffaf0;
  color: var(--brand);
  font-weight: 700;
}

.tab-logo {
  width: 36px;
  height: 24px;
  object-fit: contain;
}

.tab-logo-wide {
  width: 48px;
}

.tab-panels {
  position: relative;
}

.tab-panel {
  display: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.tab-panel.active {
  display: block;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.t-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.t-logo img {
  width: 48px;
  height: 32px;
  object-fit: contain;
}

.t-logo-name {
  font-weight: 700;
  font-size: 16px;
}

.sub-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sub-tab {
  padding: 6px 12px;
  border-radius: 16px;
  background: #f0f0f0;
  font-size: 13px;
  color: #666;
}

.sub-tab.active {
  background: var(--brand);
  color: #fff;
}

.sub-pane {
  display: none;
}

.sub-pane.active {
  display: block;
}

.current-draw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: #fafafa;
  border-radius: 8px;
  margin-bottom: 10px;
}

.current-meta {
  font-size: 13px;
  color: #888;
}

.hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.hist-table th,
.hist-table td {
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 4px;
  text-align: center;
  vertical-align: middle;
}

.hist-table th {
  background: #fafafa;
  color: #888;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.hist-scroll {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}

.pred-ok {
  color: #e60012;
  font-style: normal;
  font-weight: 600;
}

.pred-fail {
  color: #00a0e9;
  font-style: normal;
  font-weight: 600;
}

.pred-wait {
  color: #e60012;
  font-style: normal;
  font-weight: 600;
}

.pred-wait-gray {
  color: #999;
  font-style: normal;
}

.pred-none {
  color: #ccc;
}

.pred-plus {
  margin: 0 4px;
  color: #666;
  font-weight: 600;
}

.pred-value-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}

.pred-td-time {
  color: #717171;
  white-space: nowrap;
}

.pred-td-num {
  font-weight: 500;
  color: #333;
  font-size: 1rem;
}

.pred-table .pred-td-num {
  color: #717171;
}

.pred-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  font-family: "Microsoft YaHei", "Open Sans", Arial, sans-serif;
}

.pred-table th {
  color: #717171;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 1px;
  text-align: center;
  border-bottom: 1px solid #eee;
  background: #f5f5f5;
}

.pred-table td {
  padding: 8px 0;
  text-align: center;
  color: #717171;
  border-bottom: 1px solid #f1f1f1;
  line-height: 1.63rem;
}

.pred-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.pred-td-result {
  text-align: center;
}

.pred-td-result .fa {
  font-size: 1rem;
}

.pred-hit {
  color: #2e7d32;
  font-weight: 700;
}

.pred-miss {
  color: #c62828;
  font-weight: 700;
}

.mini-balls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
}

.mini-balls .ball,
.mini-balls .num-ball,
.mini-balls .pk-ball {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

/* Footer — 对齐 yuce777 */
.page-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 30px 12px;
  margin-top: 40px;
  text-align: center;
  color: #999;
  font-size: 12px;
}

.fly-footer {
  border-top: none;
  background: transparent;
  border-radius: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #757575;
  text-decoration: none;
  padding: 8px 16px;
  background: #fafafa;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.3s;
}

.footer-links a:hover {
  background: #744400;
  color: #fff;
  transform: translateY(-2px);
}

.footer-links a i {
  margin-right: 2px;
}

.footer-contact {
  text-align: center;
  margin-bottom: 16px;
  font-size: 13px;
}

.footer-contact a {
  color: #333;
  text-decoration: none;
}

.footer-contact a i {
  margin-right: 6px;
  color: #757575;
}

.footer-feedback {
  text-align: center;
  margin-bottom: 20px;
}

.footer-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  background: #744400;
  color: #fff !important;
  font-size: 13px;
  text-decoration: none;
}

.footer-feedback-btn:hover {
  opacity: 0.9;
}

.footer-disclaimer p {
  margin: 4px 0;
  line-height: 1.6;
  color: #999;
  font-size: 12px;
}

/* Notice */
.notice-popup {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: min(385px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.18);
  padding: 20px;
  z-index: 9999;
  transform: translateZ(0);
}

.notice-popup.hidden {
  display: none;
}

.notice-title {
  color: #4d3d3d;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.notice-body {
  color: #666;
  font-size: 15px;
  line-height: 1.8;
}

.notice-body p {
  margin: 0;
}

.notice-warn,
.notice-tip {
  color: #e53e3e;
}

.notice-warn {
  font-weight: 600;
}

.notice-sep {
  border-top: 1px solid #e0e0e0;
  margin-top: 8px !important;
  padding-top: 8px;
}

.notice-chrome a {
  color: var(--brand);
}

.notice-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

.customer-service-btn {
  display: none !important;
}

/* View modes */
.view-compact .detail-only,
.view-detail .compact-only {
  display: none !important;
}

/* Dark theme */
html[data-theme="dark"] {
  --bg: #121212;
  --card: #1f1f1f;
  --text: #e0e0e0;
  --muted: #aaa;
  --border: #333;
}

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .game-card,
html[data-theme="dark"] .lottery-tabs,
html[data-theme="dark"] .tab-panel,
html[data-theme="dark"] .page-footer,
html[data-theme="dark"] .notice-popup {
  background: var(--card);
  border-color: var(--border);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .current-draw,
html[data-theme="dark"] .hist-table th,
html[data-theme="dark"] .tab-btn {
  background: #262626;
}

html[data-theme="dark"] .tab-btn.active {
  background: #3a2e1a;
}

/* Motion / perf */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 420px) {
  .notice-popup {
    left: 5px;
    right: 5px;
    bottom: 5px;
    width: auto;
  }

  .tab-btn {
    font-size: 11px;
    padding: 6px 2px;
  }
}

/* 选码助手 + 回到顶部 */
.picker-fab {
  position: fixed;
  right: 12px;
  bottom: 88px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-size: 11px;
  line-height: 1.1;
  padding-top: 8px;
}
.picker-fab .fa {
  font-size: 14px;
}

.number-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.number-picker-overlay[hidden] {
  display: none !important;
}
.number-picker-modal {
  width: 100%;
  max-width: 480px;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  margin: auto;
  flex-shrink: 0;
}
.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.picker-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.picker-close {
  font-size: 24px;
  line-height: 1;
  color: #999;
  padding: 4px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.picker-tabs {
  display: flex;
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
}
.picker-tab {
  flex: 1;
  min-width: 56px;
  padding: 10px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #666;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.picker-tab.active {
  color: #744400;
  border-bottom-color: #744400;
  font-weight: 700;
}
.picker-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.picker-filters[hidden] {
  display: none !important;
}
.filter-btn {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  color: #666;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn:hover {
  border-color: #744400;
  color: #744400;
}
.filter-btn.active {
  background: #744400;
  color: #fff;
  border-color: #744400;
}
.filter-btn.active.filter-红,
.filter-btn.active.filter-红单,
.filter-btn.active.filter-红双 {
  background: #cf1322;
  border-color: #cf1322;
}
.filter-btn.active.filter-蓝,
.filter-btn.active.filter-蓝单,
.filter-btn.active.filter-蓝双 {
  background: #096dd9;
  border-color: #096dd9;
}
.filter-btn.active.filter-绿,
.filter-btn.active.filter-绿单,
.filter-btn.active.filter-绿双 {
  background: #389e0d;
  border-color: #389e0d;
}
.picker-grid-area {
  overflow: visible;
  flex: none;
  padding: 0 0 12px;
}
.grid-group {
  border-bottom: 1px solid #eee;
}
.grid-group:last-child {
  border-bottom: none;
}
.grid-group-label {
  padding: 8px 16px 0;
  font-size: 13px;
  font-weight: 600;
  color: #744400;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 8px 12px 0;
}
.picker-ball {
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.picker-ball.ball-red {
  background: linear-gradient(135deg, #ff4d4f, #cf1322);
}
.picker-ball.ball-blue {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}
.picker-ball.ball-green {
  background: linear-gradient(135deg, #52c41a, #389e0d);
}
.picker-ball .ball-num {
  font-size: 15px;
  line-height: 1;
}
.picker-ball.selected {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #744400;
}
.ball-check {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: #744400;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.picker-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #eee;
  background: #f9f9f9;
}
.selected-info {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.selected-text.empty {
  font-size: 13px;
  color: #999;
  line-height: 1.6;
}
.selected-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 2;
  font-size: 13px;
}
.selected-group .group-label {
  color: #744400;
  font-weight: 600;
  flex-shrink: 0;
}
.selected-group .group-nums {
  color: #333;
  word-break: break-all;
}
.selected-total {
  margin-top: 4px;
  font-size: 13px;
  color: #888;
  line-height: 1.6;
}
.selected-total .total-num {
  color: #744400;
  font-weight: 700;
}
.footer-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}
.copy-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid #1890ff;
  background: transparent;
  color: #1890ff;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.copy-btn:hover {
  background: #1890ff;
  color: #fff;
}
.clear-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid #ff4d4f;
  background: transparent;
  color: #ff4d4f;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.clear-btn:hover {
  background: #ff4d4f;
  color: #fff;
}

.back-to-top {
  position: fixed;
  right: 12px;
  bottom: 28px;
  z-index: 120;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(116, 68, 0, 0.9);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.back-to-top[hidden] {
  display: none !important;
}

[data-theme="dark"] .number-picker-modal {
  background: #1e1e1e;
}
[data-theme="dark"] .picker-title {
  color: #eee;
}
[data-theme="dark"] .picker-footer {
  background: #262626;
}

/* ========== yuce777 1:1 号码/倒计时覆盖 ========== */
.card-header {
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.period-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.period-nav .period-num {
  font-size: 13px;
  color: #666;
  min-width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.period-arrow {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  color: #666;
  font-size: 18px;
  line-height: 1;
}

.open-cutdown {
  margin: 4px 8px 0;
  height: 68px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.opentime {
  display: inline-block;
  font-size: 16px;
  color: var(--text);
  padding: 10px 0 0;
  height: 58px;
  line-height: 48px;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.opentime span { float: left; display: block; }
.opentime b {
  float: left;
  display: block;
  width: 48px;
  height: 48px;
  font-weight: 400;
  font-size: 36px;
  color: #fff;
  margin: 0 10px;
  background-color: #e03333;
  background-image: url("../images/lot_icon.png");
  background-position: 0 -112px;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 48px;
  border-radius: 4px;
}
.open-cutdown.urgent .opentime b {
  animation: urgent-flash 0.5s ease-in-out infinite;
}
@keyframes urgent-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.opentime .cd-daily-text {
  float: none;
  display: inline;
  margin-left: 8px;
  color: var(--brand);
  font-weight: 700;
}

.countdown-pill { display: none !important; }

.pc28-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* 方块！不是圆 */
.num-ball,
.sum-ball {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  border-radius: 6px !important;
  color: #fff;
  font-size: 20px !important;
  font-weight: 700;
  background: #13b5b1;
}
.num-ball.cyan { background: #13b5b1 !important; }
.sum-ball.sum-green { background: #10b981 !important; }
.sum-ball.sum-blue { background: #3b82f6 !important; }
.sum-ball.sum-red { background: #ef4444 !important; }
.sum-ball.sum-black { background: #333 !important; }
.sum-ball.is-big,
.sum-ball.is-small { /* legacy */ }

.pc28-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.badge-red { background: #ef4444; }
.badge-blue { background: #3b82f6; }
.badge-green { background: #10b981; }

.operator {
  color: #999;
  font-weight: 700;
  font-size: 18px;
  margin: 0 2px;
}

.pc28-numbers.mini .num-ball,
.pc28-numbers.mini .sum-ball,
.pc28-numbers.mini .pc28-tag {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  font-size: 12px !important;
  border-radius: 4px !important;
}
.pc28-numbers.mini .operator { font-size: 12px; }

.pk10-numbers,
.lucky5-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}
.pk-ball {
  width: 33px !important;
  height: 33px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 700;
  color: #fff;
}
.pk-1 { background: #f9d423 !important; color: #333; }
.pk-2 { background: #1e90ff !important; }
.pk-3 { background: #4a4a4a !important; }
.pk-4 { background: #ff8c00 !important; }
.pk-5 { background: #00ced1 !important; }
.pk-6 { background: #0000cd !important; }
.pk-7 { background: #a9a9a9 !important; }
.pk-8 { background: #ff4500 !important; }
.pk-9 { background: #8b0000 !important; }
.pk-10 { background: #2e8b57 !important; }

.lucky5-ball {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  font-weight: 700;
  color: #fff;
}
.ssc-c-0 { background: #a9a9a9 !important; }
.ssc-c-1 { background: #f9d423 !important; color: #333; }
.ssc-c-2 { background: #1e90ff !important; }
.ssc-c-3 { background: #4a4a4a !important; }
.ssc-c-4 { background: #ff8c00 !important; }
.ssc-c-5 { background: #00ced1 !important; }
.ssc-c-6 { background: #0000cd !important; }
.ssc-c-7 { background: sienna !important; }
.ssc-c-8 { background: #ff4500 !important; }
.ssc-c-9 { background: #8b0000 !important; }

.lhc-balls {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.lhc-ball {
  width: 45px !important;
  height: 45px !important;
  font-size: 18px !important;
  border-radius: 50% !important;
}
.zodiac-text {
  font-size: 13px;
  color: #717171;
  margin-top: 6px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.panel-title {
  font-size: 16px;
  font-weight: 700;
}
.tab-panel .open-cutdown { margin: 8px 10px 0; }
.tab-panel .current-draw { padding: 14px 10px 8px; background: #fff; }
.tab-panel .card-numbers { min-height: 52px; }

.lottery-tabs .tab-btn.active {
  background: #744400;
  color: #fff;
  border-color: #744400;
  box-shadow: 0 2px 6px rgba(116, 68, 0, 0.25);
}

html[data-theme="dark"] .open-cutdown {
  background: #1e1e1e;
  border-color: #333;
}
html[data-theme="dark"] .opentime { color: #ddd; }
html[data-theme="dark"] .panel-head,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .tab-panel .current-draw {
  background: #1e1e1e;
  border-color: #333;
}

/* 顶栏彩种页签：横向图标+文字，激活棕底白字 */
.lottery-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0;
  margin-bottom: 0;
}
.lottery-tabs .tab-btn {
  flex: 1 0 auto;
  flex-direction: row;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #555;
  font-size: 13px;
  white-space: nowrap;
}
.lottery-tabs .tab-btn.active {
  background: #744400 !important;
  border-color: #744400 !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(116, 68, 0, 0.28);
}
.lottery-tabs .tab-logo {
  width: 22px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

/* —— 澳5 / 澳10 分析条 + 期号 —— */
.result-period {
  text-align: center;
  margin: 6px 0 12px;
  font-size: 15px;
  color: #666;
}
.result-period b {
  font-size: 20px;
  color: #744400;
  margin: 0 4px;
}

.result-analysis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 12px;
  padding: 10px 8px;
  background: #f5f5f5;
  border-radius: 6px;
}
.ana-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ana-label {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}
.dt-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.dt-tag.dragon { background: #ff4d4f; }
.dt-tag.tiger { background: #1890ff; }

.gyh-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 3px;
  font-weight: 700;
  color: #fff !important;
}
.gyh-sum-0 { background: #39a214; }
.gyh-sum-1 { background: #f60000; }
.gyh-sum-2 { background: #ea2ee5; }
.gyh-sum-3 { background: #09f; }
.gyh-sum-4 { background: #f60000; }

.gyh-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  font-weight: 700;
  color: #fff;
}
.gyh-big { background: #f60000; }
.gyh-small { background: #09f; }
.gyh-odd { background: #09f; }
.gyh-even { background: #f60000; }

.shapes .pat-dz { color: #e91e63; font-weight: 600; }
.shapes .pat-bs { color: #ff9800; font-weight: 600; }
.shapes .pat-sz { color: #4caf50; font-weight: 600; }
.shapes .pat-bz { color: #9c27b0; font-weight: 600; }
.shapes .pat-zl { color: #999; }

.pk10-numbers .pk-ball,
.lucky5-numbers .lucky5-ball {
  border-radius: 50% !important; /* 澳系号码对方是圆球 */
}

/* —— 港彩独立区块（顶部，对齐 yuce777） —— */
.hk-section {
  margin-bottom: 12px;
}
.hk-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}
.hk-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 8px;
}
.hk-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px 8px;
}
.hk-period-tag {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}
.hk-next-countdown {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}
.hk-next-countdown .fa {
  margin: 0 2px;
  color: #999;
}
.hk-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
}
.hk-picker-wrap {
  position: relative;
  flex-shrink: 0;
}
.picker-trigger-btn {
  background: #1890ff;
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
}
.picker-new-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
}
.hk-draw-body {
  padding: 12px 10px 16px;
  text-align: center;
}
.hk-draw-body .lhc-balls {
  justify-content: center;
}
.hk-next-draw-time {
  margin: 10px 0 0;
  font-size: 13px;
  color: #888;
}
.hk-trend-toggle-wrap {
  text-align: center;
  padding: 12px 10px 4px;
  border-top: 1px solid #f0f0f0;
  margin-top: 10px;
}
.hk-trend-panel {
  margin-top: 0;
  text-align: left;
  padding-top: 0;
  border-top: none;
}
.hk-trend-panel .hk-bar {
  padding: 4px 6px 8px;
}
.hk-bar.sub-tabs {
  gap: 4px;
  padding: 8px 6px 6px;
}
.hk-bar .sub-tab {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  color: #333;
  font-size: 13px;
}
.hk-bar .sub-tab.active {
  background: #744400;
  color: #fff;
  font-weight: 600;
}
.hk-trend-panel .hist-scroll {
  max-height: none;
  overflow: visible;
}

/* —— 港彩开奖列表（参考站「开奖」页签） —— */
.lhc-draw-list-wrap {
  padding: 0 4px;
}
.lhc-draw-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lhc-draw-item {
  padding: 14px 8px;
  border-bottom: 1px solid #f0f0f0;
}
.lhc-draw-item:last-child {
  border-bottom: none;
}
.lhc-draw-meta {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
  font-weight: 500;
}
.lhc-draw-balls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 6px 4px;
}
.bmnum-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bmnum {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.bmnum.ball-red {
  background: linear-gradient(135deg, #ff4d4f, #cf1322);
}
.bmnum.ball-blue {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}
.bmnum.ball-green {
  background: linear-gradient(135deg, #52c41a, #389e0d);
}
.bmnum.bmplus {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  color: #333;
  font-size: 22px;
  font-weight: 700;
  align-self: center;
  margin: 0 2px;
  padding-top: 6px;
}
.bmnum-zodiac {
  font-size: 12px;
  color: #666;
  line-height: 1.2;
  white-space: nowrap;
}
.lhc-draw-empty {
  padding: 24px;
  text-align: center;
  color: #999;
}

/* —— 港彩：圆形号码球（参考站） —— */
.lhc-balls.hk-rounds {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 6px 8px;
}
.hk-rounds .lhc-ball.hk-round,
.lhc-ball.hk-round {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 42px;
  background-image: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.hk-rounds .ball-red,
.hk-rounds .ball-red.hk-round {
  background: linear-gradient(135deg, #ff4d4f, #cf1322) !important;
}
.hk-rounds .ball-blue,
.hk-rounds .ball-blue.hk-round {
  background: linear-gradient(135deg, #1890ff, #096dd9) !important;
}
.hk-rounds .ball-green,
.hk-rounds .ball-green.hk-round {
  background: linear-gradient(135deg, #52c41a, #389e0d) !important;
}
.hk-rounds .lhc-ball-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hk-rounds .zodiac-text {
  font-size: 12px;
  color: #666;
  line-height: 1.2;
  white-space: nowrap;
}
.hk-plus {
  align-self: center;
  margin: 0 2px;
  font-size: 20px;
  color: #333;
  font-weight: 700;
}
.hk-head {
  padding: 12px 14px;
}
.hk-head .panel-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.picker-inline {
  position: relative;
  background: #1e88e5;
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}
.picker-inline .new-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
}
.hk-draw {
  padding: 16px 10px 18px !important;
}
.hk-next-hint {
  text-align: center;
  margin: 14px 0 12px;
  font-size: 13px;
  color: #666;
}
.hk-trend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 16px;
  background: #744400;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.hk-trend-btn .fa {
  font-size: 14px;
}

/* —— 绿色预测折叠条 —— */
.prediction-panel {
  margin: 10px 12px;
  overflow: hidden;
}
.prediction-toggle-wrapper {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 0;
}
.prediction-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.prediction-toggle:active {
  opacity: 0.9;
}
.prediction-toggle .toggle-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prediction-toggle .toggle-title {
  font-size: 14px;
  font-weight: 600;
}
.prediction-toggle .pred-chevron,
.prediction-toggle .pred-arrow {
  font-size: 12px;
}
.prediction-content {
  margin-top: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.prediction-panel.is-expanded .prediction-toggle-wrapper {
  margin-bottom: 0;
}

.panel-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-logo {
  width: 36px;
  height: 24px;
  object-fit: contain;
}

/* ========== yuce777 对齐：子页签 / 历史表 / 统计 / 走势 ========== */
.pcdd-bar.sub-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 10px;
  margin-bottom: 0;
  background: transparent;
}
.pcdd-bar .sub-tab {
  flex: 1;
  min-width: 80px;
  padding: 8px 15px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #757575;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.pcdd-bar .sub-tab:hover {
  background: #f5f5f5;
}
.pcdd-bar .sub-tab.active {
  background: #744400;
  border-color: #744400;
  color: #fff;
  font-weight: 700;
}

.history-table-wrapper {
  margin-top: 10px;
  overflow-x: auto;
}
.history-table,
.hist-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e8e8e8;
  font-size: 13px;
}
.history-table thead,
.hist-table thead {
  background: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;
}
.history-table th,
.hist-table th {
  padding: 12px 8px;
  text-align: center;
  color: #717171;
  font-weight: 700;
  font-size: 14px;
}
.history-table td,
.hist-table td {
  padding: 10px 6px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}
.history-table tbody tr:nth-child(even),
.hist-table tbody tr:nth-child(even) {
  background: #fafafa;
}
.time-cell {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}
.result-cell .open-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  margin: 0 2px;
  border-radius: 4px;
  background: #13b5b1;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.sum-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.sum-block.sum-black { background: #333; }
.sum-block.sum-green { background: #10b981; }
.sum-block.sum-blue { background: #3b82f6; }
.sum-block.sum-red { background: #ef4444; }

.pcdd-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pcdd-result .r1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pcdd-result .r2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.red-info,
.blue-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.red-info { background-color: #e60012; }
.blue-info { background-color: #00a0e9; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.badge-big, .badge-even, .badge-big-even, .badge-small-even, .badge-extreme-big {
  background-color: #ef4444;
}
.badge-small, .badge-odd, .badge-big-odd, .badge-small-odd, .badge-extreme-small {
  background-color: #3b82f6;
}
.badge-normal { background-color: #868e96; }

.trend-table th,
.trend-table td {
  border-right: 1px solid #f1f1f1;
}
.trend-table th:last-child,
.trend-table td:last-child {
  border-right: none;
}
.trend-table .interval-row {
  background: #fafafa;
}
.trend-table .interval-row td {
  color: #744400;
  font-weight: 700;
  font-size: 14px;
}
.numbers-table28 .result-expr {
  font-weight: 600;
  color: #333;
  letter-spacing: 0.5px;
}
.trend-value-cell {
  font-weight: 700;
  color: #333;
}

.statistics-wrapper {
  margin-top: 4px;
}
.stats-date-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.stats-date-picker .date-input {
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 14px;
  text-align: center;
}
.stats-date-picker .btn {
  min-width: 32px;
  padding: 6px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #f5f5f5;
  color: #333;
  font-weight: 700;
}
.stats-date-picker .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.stats-summary-bar {
  text-align: center;
  padding: 10px 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
  background: #f5f5f5;
  border-radius: 6px;
}
.stats-summary-bar b {
  color: #744400;
  font-size: 20px;
  font-weight: 700;
}
.stats28-wrap {
  padding: 12px 14px 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
}
.stats28-section {
  margin-bottom: 16px;
}
.stats28-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #757575;
  margin-bottom: 8px;
  padding: 4px 10px;
  background: #f5f5f5;
  border-left: 3px solid #744400;
  border-radius: 0 4px 4px 0;
}
.stats28-num-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.stats28-cat-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
.stats28-ext-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
.stats28-num-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 6px;
  background: #f5f5f5;
}
.stats28-cat-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.stats28-num-count {
  font-size: 20px;
  font-weight: 700;
  color: #555;
}
.stats28-num-label {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.stats28-num-label.bs-red { background: #ef4444; }
.stats28-num-label.bs-green { background: #10b981; }
.stats28-num-label.bs-blue { background: #3b82f6; }
.stats28-num-label.bs-gray { background: #6b7280; }

.no-history {
  text-align: center;
  padding: 24px 12px;
  color: #999;
}

@media (min-width: 500px) {
  .stats28-section-title { font-size: 15px; }
  .stats28-cat-label { font-size: 14px; padding: 6px 16px; }
  .stats28-num-count { font-size: 22px; }
}

html[data-theme="dark"] .history-table,
html[data-theme="dark"] .stats28-wrap,
html[data-theme="dark"] .stats-date-picker .date-input {
  background: #1e1e1e;
  border-color: #333;
  color: #ddd;
}
html[data-theme="dark"] .history-table thead,
html[data-theme="dark"] .stats-summary-bar,
html[data-theme="dark"] .stats28-num-item,
html[data-theme="dark"] .stats28-section-title {
  background: #262626;
}
html[data-theme="dark"] .pcdd-bar .sub-tab {
  background: #1e1e1e;
  border-color: #333;
  color: #aaa;
}
html[data-theme="dark"] .pcdd-bar .sub-tab.active {
  background: #744400;
  color: #fff;
}

/* ========== 澳洲5 / 澳洲10 走势表格 ========== */
.ssc-tball,
.pk10-tball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.ssc-tball.ssc-muted,
.pk10-tball.pk10-muted {
  opacity: 0.25;
}
.pk10-tball.pk10-c-1, .pk-ball.pk-1 { background: #f9d423 !important; color: #333; }
.pk10-tball.pk10-c-2, .pk-ball.pk-2 { background: #1e90ff !important; }
.pk10-tball.pk10-c-3, .pk-ball.pk-3 { background: #4a4a4a !important; }
.pk10-tball.pk10-c-4, .pk-ball.pk-4 { background: #ff8c00 !important; }
.pk10-tball.pk10-c-5, .pk-ball.pk-5 { background: #00ced1 !important; }
.pk10-tball.pk10-c-6, .pk-ball.pk-6 { background: #0000cd !important; }
.pk10-tball.pk10-c-7, .pk-ball.pk-7 { background: #a9a9a9 !important; }
.pk10-tball.pk10-c-8, .pk-ball.pk-8 { background: #ff4500 !important; }
.pk10-tball.pk10-c-9, .pk-ball.pk-9 { background: #8b0000 !important; }
.pk10-tball.pk10-c-10, .pk-ball.pk-10 { background: #2e8b57 !important; }

.dx-badge,
.ds-badge,
.lh-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.dx-big, .ds-even, .lh-1 { background-color: #e60012; }
.dx-small, .ds-odd, .lh-0 { background-color: #00a0e9; }
.lh-2 { background-color: #868e96; }

.ssc-compact .num-cell,
.pk10-compact .num-cell {
  padding: 6px 2px;
}
.ssc-compact .pattern-cell,
.pk10-compact .pattern-cell {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pattern-cell.pat-bz { background: #fce4ec; color: #c2185b; padding: 2px 8px; border-radius: 4px; display: inline-block; font-size: 12px; }
.pattern-cell.pat-dz { background: #fce4ec; color: #e91e63; padding: 2px 8px; border-radius: 4px; display: inline-block; font-size: 12px; }
.pattern-cell.pat-sz { background: #e8f5e9; color: #2e7d32; padding: 2px 8px; border-radius: 4px; display: inline-block; font-size: 12px; }
.pattern-cell.pat-bs { background: #fff3e0; color: #ef6c00; padding: 2px 8px; border-radius: 4px; display: inline-block; font-size: 12px; }
.pattern-cell.pat-zl { background: #f3e5f5; color: #7b1fa2; padding: 2px 8px; border-radius: 4px; display: inline-block; font-size: 12px; }
.gyh-cell { text-align: center; }
.gyh-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #7c4dff;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.zh-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.zh-card-period { font-weight: 700; color: #744400; }
.zh-card-time { font-size: 12px; color: #999; }
.zh-gyh-tag {
  font-size: 12px;
  color: #888;
  margin: 0 4px;
}
.pk10-compact.dz-table {
  border-collapse: collapse;
}
.pk10-compact.dz-table th,
.pk10-compact.dz-table td {
  padding: 8px 4px;
  border: none;
  border-bottom: 1px solid #f5f5f5;
}
.pk10-compact.dz-table thead th {
  border-bottom: 1px solid #eee;
  font-weight: 600;
  color: #666;
}
.pk10-tball.pk10-muted {
  opacity: 0.25;
}
.pk10-tball:not(.pk10-muted) {
  opacity: 1;
}
.ssc-compact .num-cell,
.pk10-compact .num-cell {
  padding: 6px 2px;
  white-space: nowrap;
}
.ssc-compact .ssc-tball,
.pk10-compact .pk10-tball {
  margin: 0 1px;
}

.period-col {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 综合卡片 */
.zh-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zh-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 12px;
}
.zh-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: #888;
}
.zh-period {
  font-weight: 700;
  color: #744400;
}
.zh-card-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.zh-card-label {
  flex-shrink: 0;
  font-size: 12px;
  color: #888;
  min-width: 36px;
  padding-top: 4px;
}
.zh-card-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

html[data-theme="dark"] .zh-card {
  background: #1e1e1e;
  border-color: #333;
}
html[data-theme="dark"] .zh-period {
  color: #c9a875;
}

/* ========== 港彩走势表格（对齐 yuce777） ========== */
.lhc-trend-table {
  border: 1px solid #e8e8e8;
}
.lhc-trend-table th,
.lhc-trend-table td {
  border: 1px solid #eee;
  padding: 10px 6px;
  text-align: center;
  font-size: 14px;
}
.lhc-trend-table .period-cell {
  color: #666;
  font-size: 13px;
  white-space: nowrap;
}
.lhc-trend-table .lhc-num-plain {
  font-size: 15px;
  font-weight: 500;
  color: #444;
}
.lhc-trend-table .lhc-te-ball {
  width: 30px;
  height: 30px;
  font-size: 14px;
}
.lhc-trend-table .period-cell,
.sx-trend-table .sx-td-period {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}
.lhc-th-te,
.lhc-td-te {
  border-left: 2px solid #e0e0e0 !important;
}
.lhc-num-plain {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}
.lhc-c-red { color: #dc2626; }
.lhc-c-blue { color: #2563eb; }
.lhc-c-green { color: #16a34a; }
.lhc-te-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.lhc-te-ball.ball-red { background: linear-gradient(135deg, #ff4d4f, #cf1322); }
.lhc-te-ball.ball-blue { background: linear-gradient(135deg, #1890ff, #096dd9); }
.lhc-te-ball.ball-green { background: linear-gradient(135deg, #52c41a, #389e0d); }
.bose-text {
  font-size: 13px;
  font-weight: 500;
}
.bose-c-红 { color: #dc2626; }
.bose-c-蓝 { color: #2563eb; }
.bose-c-绿 { color: #16a34a; }
.bose-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.bose-bg-红 { background: linear-gradient(135deg, #ff4d4f, #cf1322); }
.bose-bg-蓝 { background: linear-gradient(135deg, #1890ff, #096dd9); }
.bose-bg-绿 { background: linear-gradient(135deg, #52c41a, #389e0d); }
.wx-text {
  font-size: 13px;
  font-weight: 500;
  color: #666;
}
.wx-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
}
.wx-金 { background: #fffbeb; color: #d97706; }
.wx-木 { background: #f0fdf4; color: #16a34a; }
.wx-水 { background: #eff6ff; color: #2563eb; }
.wx-火 { background: #fef2f2; color: #dc2626; }
.wx-土 { background: #faf5ff; color: #9333ea; }
.sx-trend-table {
  font-size: 12px;
}
.sx-trend-table .th-sx,
.sx-trend-table .td-sx {
  padding: 8px 4px;
  min-width: 28px;
}
.sx-interval {
  color: #999;
  font-size: 12px;
}
.sx-hit-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.sx-hit-ball.ball-red { background: #dc2626; }
.sx-hit-ball.ball-blue { background: #2563eb; }
.sx-hit-ball.ball-green { background: #16a34a; }
.hk-load-more-wrap,
.compact-load-more-wrap {
  text-align: center;
  padding: 14px 10px 6px;
}
.hk-no-more {
  font-size: 13px;
  color: #999;
}
.load-more-btn {
  padding: 10px 30px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  min-width: 120px;
  transition: all 0.3s ease;
}
.load-more-btn:hover:not(:disabled) {
  background: #744400;
  color: #fff;
  border-color: #744400;
}
.load-more-btn:disabled {
  opacity: 0.7;
  cursor: default;
}
.loading-state,
.stats-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: #888;
  font-size: 14px;
}

.stats-outdated-warn {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  font-size: 12px;
  line-height: 1.5;
}

  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.loading-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #744400;
  animation: hk-dot-pulse 1s infinite ease-in-out;
}
.loading-dots .dot:nth-child(2) { animation-delay: 0.15s; }
.loading-dots .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes hk-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.hk-trend-panel .hist-scroll {
  max-height: none;
  overflow: visible;
}

/* ========== yuce777 1:1 补充样式 v30 ========== */
.site-slogan {
  font-size: 13px;
  font-weight: 400;
  color: #666;
}
.header-old-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  margin-right: 8px;
  border-radius: 4px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: #744400;
  font-size: 12px;
  text-decoration: none;
}
.header-old-btn:hover { background: #eee; }
.floating-old-btn {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 10px 14px;
  font-size: 12px;
  color: #744400;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.floating-old-close {
  margin-left: 6px;
  border: none;
  background: transparent;
  color: #999;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.lhc-omit-table th,
.lhc-omit-table td {
  border: 1px solid #eee;
  padding: 8px 4px;
  text-align: center;
  font-size: 13px;
}
.lhc-omit-period .lhc-omit-short { display: none; }
@media (max-width: 480px) {
  .lhc-omit-period .lhc-omit-full { display: none; }
  .lhc-omit-period .lhc-omit-short { display: inline; }
}
.lhc-omit-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.lhc-omit-hit.ball-red { background: linear-gradient(135deg, #ff4d4f, #cf1322); }
.lhc-omit-hit.ball-blue { background: linear-gradient(135deg, #1890ff, #096dd9); }
.lhc-omit-hit.ball-green { background: linear-gradient(135deg, #52c41a, #389e0d); }
.lhc-omit-gap { color: #999; font-size: 13px; }
.ball-pending {
  background: #f0f0f0 !important;
  color: #bbb !important;
  box-shadow: none !important;
}
.pending-q { font-size: 18px; font-weight: 700; }
.hk-drawing-status {
  margin-top: 10px;
  font-size: 13px;
  color: #744400;
}
.compact-expand-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  color: #744400;
  font-size: 13px;
  cursor: pointer;
}
.compact-expand-panel {
  margin-top: 10px;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}
.compact-bar .sub-tab.active {
  background: #744400;
  color: #fff;
}
.game-card.is-expanded { border-color: #744400; }
.compact-ad-slot { margin: 10px 0; }
.notice-popup { padding: 25px; }
html[data-theme="dark"] .header-old-btn,
html[data-theme="dark"] .floating-old-btn {
  background: #1e1e1e;
  border-color: #333;
  color: #c9a875;
}
html[data-theme="dark"] .lhc-omit-table,
html[data-theme="dark"] .lhc-omit-table th,
html[data-theme="dark"] .lhc-omit-table td {
  border-color: #333;
}
html[data-theme="dark"] .compact-expand-btn {
  background: #1e1e1e;
  border-color: #333;
  color: #c9a875;
}