@charset "utf-8";

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

:root {
  --m-blue: #1a4594;
  --m-blue-dark: #153a7d;
  --m-red: #e60012;
  --m-red-ball: #e62117;
  --m-blue-ball: #0000ff;
  --m-green-ball: #218a21;
  /* 开奖球：clamp 适配 320~720px，比例参照 macaujc 1.2×1.28 */
  --ball-hist-w: clamp(26px, 7.47vw, 36px);
  --ball-hist-h: clamp(28px, 7.98vw, 38px);
  --ball-hist-fs: clamp(10px, 2.93vw, 14px);
  --ball-main-w: clamp(32px, 9.6vw, 44px);
  --ball-main-h: clamp(34px, 10.24vw, 47px);
  --ball-main-fs: clamp(13px, 3.73vw, 18px);
  --ball-sx-fs: clamp(10px, 2.67vw, 12px);
  --ball-gap: clamp(3px, 1.07vw, 5px);
  --m-gray-tab: #efefef;
  --m-gray-panel: #f5f5f5;
}

body.m-macaujc {
  background: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 14px;
  color: #333;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.m-app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* ===== 顶部 ===== */
.m-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.m-logo-slot {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.m-logo-slot img {
  display: block;
  max-height: 48px;
  max-width: 70%;
  object-fit: contain;
}

.m-logo-slot:not(.has-image):empty::after {
  content: "LOGO";
  font-size: 11px;
  color: #ccc;
  padding: 6px 10px;
  border: 1px dashed #ddd;
  border-radius: 4px;
}

.m-style-btn {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  background: var(--m-blue);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

/* ===== 彩种 Tab 3×2 ===== */
.m-lottery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  background: #fff;
}

.m-lottery-grid button {
  height: 36px;
  border: none;
  border-radius: 6px;
  background: var(--m-gray-tab);
  color: #333;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
}

.m-lottery-grid button.is-active {
  background: var(--m-blue-dark);
  color: #fff;
  font-weight: 600;
}

.m-lottery-grid--6,
.m-lottery-grid--7 {
  grid-template-columns: repeat(3, 1fr);
}

.m-lottery-grid button.is-more {
  font-size: 22px;
  font-weight: 300;
  color: #666;
}

/* ===== 视图切换 ===== */
.m-view--hidden {
  display: none !important;
}

/* ===== 开奖历史页 ===== */
.m-hist-latest {
  padding: 14px 12px 12px;
  background: #fff;
}

.m-hist-latest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.m-hist-latest-title {
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.m-hist-latest-title em {
  font-style: normal;
  color: var(--m-red);
  font-weight: 700;
}

.m-hist-sim {
  flex-shrink: 0;
  padding: 3px 10px;
  border: none;
  border-radius: 4px;
  background: var(--m-blue);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.m-hist-sim:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.m-ball.is-drawing,
.m-h-ball.is-drawing {
  font-size: 13px;
  font-weight: 600;
  color: #888;
}

.m-balls--hist {
  padding: 2px 0 0;
  text-align: center;
}

.m-hist-countdown {
  padding: 14px 12px 16px;
  background: #fff;
  border-top: 1px solid #eee;
  text-align: center;
}

.m-hist-next-line {
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
}

.m-hist-next-line em {
  font-style: normal;
  color: var(--m-red);
  font-weight: 700;
}

.m-countdown--hist {
  justify-content: center;
}

.m-countdown--hist .m-cd-digit {
  min-width: 30px;
  height: 42px;
  font-size: 26px;
}

.m-hist-filters {
  padding: 12px 10px;
  background: #fff;
  border-top: 1px solid #eee;
}

.m-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 10px;
}

.m-filter-row:last-child {
  margin-bottom: 0;
}

.m-filter-label {
  flex-shrink: 0;
  width: 32px;
  font-size: 13px;
  color: #333;
  font-weight: 600;
  line-height: 26px;
}

.m-filter-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}

.m-filter-btns button {
  height: 26px;
  padding: 0 8px;
  border: none;
  border-radius: 3px;
  background: var(--m-gray-tab);
  color: #333;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.m-filter-btns button.is-active {
  background: var(--m-blue);
  color: #fff;
}

.m-filter-btns button.is-reset {
  background: var(--m-blue);
  color: #fff;
}

/* 历史页列表 */
.m-history-wrap--page {
  border-top: 1px solid #eee;
}

.m-history-wrap--page .m-history-item {
  padding: 14px 12px 16px;
  border-top: 1px solid #eee;
  background: #fff;
}

.m-history-wrap--page .m-history-item:first-child {
  background: #fff;
}

.m-history-wrap--page .m-h-row {
  font-size: 15px;
  margin-bottom: 6px;
}

.m-history-wrap--page .m-h-label {
  color: var(--m-blue);
  font-weight: 700;
}

.m-history-wrap--page .m-h-row:first-child .m-h-val {
  color: var(--m-blue);
  font-weight: 700;
}

.m-history-wrap--page .m-h-row:nth-child(2) .m-h-val {
  color: #888;
  font-weight: 400;
}

.m-history-wrap--page .m-h-live {
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  margin-left: 6px;
}

.m-history-wrap--page .m-h-ball-cell {
  position: relative;
  width: var(--ball-hist-w);
  flex: 0 0 var(--ball-hist-w);
}

.m-history-wrap--page .m-h-ball {
  width: var(--ball-hist-w);
  height: var(--ball-hist-h);
  font-size: var(--ball-hist-fs);
  border-radius: 0;
}

.m-history-wrap--page .m-h-balls.is-ball-filter .m-h-ball-cell.is-dim,
.m-history-wrap--page .m-h-balls.is-ball-filter .m-h-plus.is-dim {
  opacity: 0.22;
}

.m-history-wrap--page .m-h-balls.is-ball-filter .m-h-ball-cell.is-highlight {
  opacity: 1;
}

.m-history-wrap--page .m-h-sx {
  font-size: var(--ball-sx-fs);
  color: #333;
  margin-top: 2px;
  line-height: 1.1;
}

.m-history-wrap--page .m-h-row--balls {
  margin-top: 4px;
}

.m-history-wrap--page .m-h-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ball-hist-h);
  min-height: var(--ball-hist-h);
  font-size: clamp(12px, 3.47vw, 16px);
  margin-bottom: calc(var(--ball-sx-fs) + 2px);
}

/* ===== Banner ===== */
.m-banner-slot {
  line-height: 0;
  background: #fff;
}

.m-banner-slot:not(.has-image):empty {
  display: none;
}

.m-banner-slot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== 开奖蓝框卡片（对齐 macaujc 图二） ===== */
.m-draw-panel {
  margin: 8px 10px 0;
  padding: 0 0 14px;
  background: #fff;
  border: none;
  overflow: hidden;
  --ball-main-w: clamp(36px, 10.8vw, 48px);
  --ball-main-h: clamp(36px, 10.8vw, 48px);
  --ball-main-fs: clamp(15px, 4.5vw, 20px);
  --ball-sx-fs: clamp(11px, 2.93vw, 13px);
  --ball-gap: clamp(4px, 1.07vw, 5px);
}

.m-draw-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0;
  border: none;
  border-radius: 0;
}

.m-draw-name {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  max-width: 42%;
  padding: 10px 10px;
  border: 1px solid var(--m-blue);
  border-radius: 4px;
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  color: var(--m-blue);
  white-space: nowrap;
  line-height: 1.3;
}

.m-draw-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid var(--m-blue);
  border-radius: 4px;
  background: #fff;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.m-draw-meta-line {
  color: var(--m-blue);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-draw-meta-line em,
.m-draw-meta-line #drawWeekday {
  font-style: normal;
  font-weight: 700;
  color: var(--m-blue);
}

.m-countdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 14px;
  min-height: 46px;
  padding: 0 10px;
}

.m-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
}

.m-draw-panel .m-cd-digit {
  min-width: 30px;
  width: 30px;
  height: 44px;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  background: #fff;
  font-size: 28px;
  font-weight: 700;
  color: #000;
  line-height: 1;
}

.m-draw-panel .m-cd-sep {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  padding: 0 2px;
  line-height: 1;
}

.m-draw-panel .m-balls {
  position: relative;
  padding: 0 6px 4px;
}

.m-draw-panel .m-balls.is-scratch-active .m-balls-inner {
  pointer-events: none;
}

.m-scratch-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

.m-scratch.is-active {
  font-weight: 700;
  text-decoration: underline;
}

.m-draw-panel .m-balls-inner {
  align-items: flex-end;
  gap: var(--ball-gap);
}

.m-draw-panel .m-ball {
  border-radius: 2px;
}

.m-draw-panel .m-ball-sx {
  margin-top: 4px;
  font-size: var(--ball-sx-fs);
  color: #111;
  font-weight: 400;
  text-align: center;
}

.m-draw-panel .m-ball-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: auto;
  height: var(--ball-main-h);
  min-width: 0;
  min-height: var(--ball-main-h);
  background: transparent;
  color: var(--m-red);
  border: none;
  box-shadow: none;
  font-size: clamp(15px, 4.5vw, 20px);
  font-weight: 700;
  line-height: 1;
  padding: 0 3px;
  margin: 0 1px calc(var(--ball-sx-fs) + 4px);
  flex-shrink: 0;
}

body.m-macaujc.ball-style-image .m-draw-panel .m-ball-plus {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--m-red);
  font-size: clamp(14px, 4vw, 18px);
  margin-bottom: calc(var(--ball-sx-fs) + 3px);
}

.m-scratch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--m-blue);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.m-ball-macau,
.m-h-macau {
  flex: 0 0 auto;
  align-self: flex-end;
  color: var(--m-red);
  font-weight: 700;
  line-height: 1;
  margin-bottom: calc(var(--ball-sx-fs) + 3px);
  padding: 0 1px;
}

.m-draw-panel .m-ball-macau {
  font-size: calc(var(--ball-main-fs) * 0.88);
  margin-bottom: calc(var(--ball-sx-fs) + 4px);
}

.m-h-macau {
  font-size: var(--ball-hist-fs);
  margin-bottom: calc(var(--ball-sx-fs) + 2px);
}

.m-h-balls.is-ball-filter .m-h-macau.is-dim {
  opacity: 0.22;
}

.m-cd-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 38px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  font-size: 24px;
  font-weight: 700;
  color: #111;
  line-height: 1;
}

.m-cd-sep {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  padding: 0 2px;
}

.m-scratch-eye {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a4594'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5C21.3 7.6 17 4.5 12 4.5zm0 12.5a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== 开奖球：macaujc open_code_zone 实心竖条（默认） ===== */
.m-balls {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 2px 2px;
}

.m-balls-inner {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--ball-gap);
  vertical-align: top;
  max-width: 100%;
}

.m-balls::-webkit-scrollbar,
.m-h-balls::-webkit-scrollbar {
  display: none;
}

.m-ball-item {
  text-align: center;
  width: var(--ball-main-w);
  min-width: var(--ball-main-w);
  flex: 0 0 var(--ball-main-w);
}

.m-ball {
  width: var(--ball-main-w);
  height: var(--ball-main-h);
  min-width: var(--ball-main-w);
  min-height: var(--ball-main-h);
  border: none;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ball-main-fs);
  font-weight: 700;
  color: #fff;
  background-image: none;
  margin: 0 auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  flex-shrink: 0;
}

.m-ball span,
.m-h-ball span {
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.m-ball.is-red,
.m-h-ball.is-red { background: var(--m-red-ball); }
.m-ball.is-blue,
.m-h-ball.is-blue { background: var(--m-blue-ball); }
.m-ball.is-green,
.m-h-ball.is-green { background: var(--m-green-ball); }

.m-ball.is-gray,
.m-h-ball.is-gray {
  background: #bbb;
  color: #fff;
}

.m-ball.is-drawing,
.m-h-ball.is-drawing {
  background: #ddd !important;
  color: #888 !important;
  font-size: clamp(9px, 2.4vw, 11px);
  font-weight: 600;
}

.m-ball-sx {
  margin-top: 3px;
  font-size: var(--ball-sx-fs);
  color: #333;
  line-height: 1.1;
  white-space: nowrap;
}

.m-ball-plus {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ball-main-h);
  min-height: var(--ball-main-h);
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 700;
  color: var(--m-red);
  line-height: 1;
  margin-bottom: calc(var(--ball-sx-fs) + 3px);
  padding: 0 2px;
}

/* 切换风格：图片球 */
body.m-macaujc.ball-style-image .m-ball,
body.m-macaujc.ball-style-image .m-h-ball {
  border-radius: 0;
  color: #333;
  background-color: transparent;
  background-image: none;
  width: var(--ball-main-w);
  height: var(--ball-main-h);
  min-width: var(--ball-main-w);
  min-height: var(--ball-main-h);
  padding-bottom: 0;
}

body.m-macaujc.ball-style-image .m-h-ball {
  width: var(--ball-hist-w);
  height: var(--ball-hist-h);
  min-width: var(--ball-hist-w);
  min-height: var(--ball-hist-h);
}

body.m-macaujc.ball-style-image .m-ball.is-red,
body.m-macaujc.ball-style-image .m-h-ball.is-red {
  background-color: transparent;
  background-image: url('/static/index/images/balls/ball-red.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

body.m-macaujc.ball-style-image .m-ball.is-blue,
body.m-macaujc.ball-style-image .m-h-ball.is-blue {
  background-color: transparent;
  background-image: url('/static/index/images/balls/ball-blue.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

body.m-macaujc.ball-style-image .m-ball.is-green,
body.m-macaujc.ball-style-image .m-h-ball.is-green {
  background-color: transparent;
  background-image: url('/static/index/images/balls/ball-green.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

body.m-macaujc.ball-style-image .m-ball.is-gray,
body.m-macaujc.ball-style-image .m-h-ball.is-gray {
  border-radius: 50%;
  background-color: #ddd;
  background-image: none;
  color: #999;
}

/* ===== 历史列表 ===== */
.m-history-wrap {
  background: #fff;
}

.m-history-item {
  padding: 12px 10px 14px;
  border-top: 1px solid #e8e8e8;
  background: #fff;
}

.m-history-wrap--home {
  margin: 0 10px;
  padding-top: 4px;
}

.m-history-official-block {
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.m-history-official {
  background: #0066b3;
  color: #ffff00;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 2px;
}

.m-history-official-body {
  padding: 10px;
  background: #eee;
}

.m-history-load-more {
  padding: 14px 10px 8px;
  text-align: center;
  font-size: 14px;
  color: #888;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.m-history-load-more:active {
  color: var(--m-blue);
}

.m-history-wrap--home .m-history-item--card {
  padding: 12px 10px 14px;
  margin-bottom: 10px;
  border: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.m-history-wrap--home .m-history-item--card:last-child {
  margin-bottom: 0;
}

.m-history-wrap--home .m-history-item--card .m-h-label {
  color: var(--m-red);
  font-weight: 700;
}

.m-history-wrap--home .m-history-item--card .m-h-row:first-child .m-h-val {
  color: #222;
  font-weight: 400;
}

.m-history-wrap--home .m-history-item--card .m-h-row:nth-child(2) .m-h-val {
  color: #333;
  font-weight: 400;
}

.m-history-wrap--home .m-history-item--card .m-h-live {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--m-red);
  padding: 0 7px;
  border-radius: 10px;
  line-height: 20px;
  font-size: 11px;
}

.m-h-live-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent #fff;
  flex-shrink: 0;
}

.m-history-official-body .m-h-ball {
  border-radius: 50%;
  color: #333;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.m-history-official-body .m-h-ball.is-red {
  background-image: url('/static/index/images/balls/ball-red.png');
}

.m-history-official-body .m-h-ball.is-blue {
  background-image: url('/static/index/images/balls/ball-blue.png');
}

.m-history-official-body .m-h-ball.is-green {
  background-image: url('/static/index/images/balls/ball-green.png');
}

.m-history-wrap--home .m-h-balls {
  justify-content: flex-start;
}

.m-history-wrap--home .m-h-row--balls .m-h-label {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 4px;
  vertical-align: top;
  line-height: var(--ball-hist-h);
}

.m-history-wrap--home .m-h-row--balls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.m-history-wrap--home .m-h-row--balls .m-h-balls {
  flex: 1;
  min-width: 0;
}

.m-h-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 1.6;
}

.m-h-row:last-child {
  margin-bottom: 0;
}

.m-h-label {
  font-weight: 700;
  flex-shrink: 0;
}

.m-history-wrap--home .m-h-label {
  color: var(--m-red);
}

.m-h-val {
  color: #333;
}

.m-h-live,
.m-h-video {
  display: inline-block;
  padding: 0 6px;
  border-radius: 2px;
  background: var(--m-blue);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
}

.m-h-row--balls {
  display: block;
  overflow: visible;
}

.m-h-row--balls .m-h-label {
  display: block;
  margin-bottom: 6px;
}

.m-h-balls {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--ball-gap);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.m-h-ball-cell {
  text-align: center;
  width: var(--ball-hist-w);
  min-width: var(--ball-hist-w);
  flex: 0 0 var(--ball-hist-w);
}

.m-h-ball {
  width: var(--ball-hist-w);
  height: var(--ball-hist-h);
  min-width: var(--ball-hist-w);
  min-height: var(--ball-hist-h);
  border: none;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ball-hist-fs);
  font-weight: 700;
  color: #fff;
  background-image: none;
  margin: 0 auto;
  line-height: 1;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
}

.m-h-sx {
  font-size: var(--ball-sx-fs);
  color: #333;
  margin-top: 2px;
  line-height: 1.1;
  white-space: nowrap;
}

.m-h-plus {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ball-hist-h);
  min-height: var(--ball-hist-h);
  color: var(--m-red);
  font-weight: 700;
  font-size: clamp(12px, 3.47vw, 15px);
  line-height: 1;
  margin-bottom: calc(var(--ball-sx-fs) + 2px);
  padding: 0 2px;
}

/* ===== 底部导航 ===== */
.m-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff;
  border-top: 1px solid #ddd;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.m-tabbar--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.m-tabbar--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.m-tabbar a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 0 3px;
  font-size: 11px;
  color: #999;
  text-decoration: none;
  gap: 2px;
}

.m-tabbar a.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  background: var(--m-blue);
  border-radius: 0 0 2px 2px;
}

.m-tabbar a.is-active {
  color: var(--m-blue);
}

.m-tabbar a.m-tab-nav.is-active {
  color: var(--m-blue);
}

.m-tab-icon {
  width: 26px;
  height: 26px;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
}

.m-tab-icon--home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71 74'%3E%3Cpath fill='%231a4594' d='M25.5438246,9.57902571e-14 C29.3280436,9.57902571e-14 32.1662079,0.94605475 34.0583174,2.83816425 C36.8964816,5.6763285 34.0583174,5.6763285 36.8964816,11.352657 C45.4109744,11.352657 48.8973051,19.8475617 51.0873029,28.3816425 C54.7101672,42.4993811 48.2491386,65.2777778 53.9254671,73.7922705 C53.9254671,73.7922705 17.1307822,74.6686177 17.0293319,73.7922705 C19.9689465,60.4777964 25.5438246,51.0869565 29.3613999,42.5354514 C31.2201531,39.7342995 26.3690146,36.8966077 22.7056604,36.8961353 C16.2881447,36.8953077 7.48345977,41.5410844 5.67667487,39.7342995 C3.28070542,38.7018768 0.0145645857,33.9230409 0,31.2198068 C0,25.5434783 12.3662261,17.8480932 19.8674961,11.352657 C23.498354,8.20865535 28.3819889,11.352657 25.5438246,9.57902571e-14 Z M47.1214792,9.87089689 L48.2491386,11.352657 C68.1162884,19.8671498 70.9544526,51.0869565 70.9544526,73.7922705 L70.9544526,73.7922705 L59.6017956,73.7922705 C53.9254671,70.9541063 56.7636314,53.9251208 56.7636314,36.8961353 C56.7636314,26.9697148 51.3421201,16.1309313 47.1214792,9.87089689 L47.1214792,9.87089689 Z'/%3E%3C/svg%3E");
  background-size: contain;
}

.m-tabbar a:not(.is-active) .m-tab-icon--home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71 74'%3E%3Cpath fill='%23bbb' d='M25.5438246,9.57902571e-14 C29.3280436,9.57902571e-14 32.1662079,0.94605475 34.0583174,2.83816425 C36.8964816,5.6763285 34.0583174,5.6763285 36.8964816,11.352657 C45.4109744,11.352657 48.8973051,19.8475617 51.0873029,28.3816425 C54.7101672,42.4993811 48.2491386,65.2777778 53.9254671,73.7922705 C53.9254671,73.7922705 17.1307822,74.6686177 17.0293319,73.7922705 C19.9689465,60.4777964 25.5438246,51.0869565 29.3613999,42.5354514 C31.2201531,39.7342995 26.3690146,36.8966077 22.7056604,36.8961353 C16.2881447,36.8953077 7.48345977,41.5410844 5.67667487,39.7342995 C3.28070542,38.7018768 0.0145645857,33.9230409 0,31.2198068 C0,25.5434783 12.3662261,17.8480932 19.8674961,11.352657 C23.498354,8.20865535 28.3819889,11.352657 25.5438246,9.57902571e-14 Z M47.1214792,9.87089689 L48.2491386,11.352657 C68.1162884,19.8671498 70.9544526,51.0869565 70.9544526,73.7922705 L70.9544526,73.7922705 L59.6017956,73.7922705 C53.9254671,70.9541063 56.7636314,53.9251208 56.7636314,36.8961353 C56.7636314,26.9697148 51.3421201,16.1309313 47.1214792,9.87089689 L47.1214792,9.87089689 Z'/%3E%3C/svg%3E");
  background-size: contain;
}

.m-tab-icon--history {
  background-image: url('/static/index/images/icons/history.svg');
  background-size: contain;
}

.m-tabbar a.is-active .m-tab-icon--history {
  background-image: url('/static/index/images/icons/history-active.svg');
  background-size: contain;
}

.m-tab-icon--chart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath fill='%23191919' d='M9,10 L9,16 C9,19.2383969 11.5655749,21.8775718 14.7750617,21.9958615 L15,22 C18.2383969,22 20.8775718,19.4344251 20.9958615,16.2249383 L21,16 L21,10 L51,10 L51,16 C51,19.2383969 53.5655749,21.8775718 56.7750617,21.9958615 L57,22 C60.2383969,22 62.8775718,19.4344251 62.9958615,16.2249383 L63,16 L63,10 L69,10 C70.6568542,10 72,11.3431458 72,13 L72,69 C72,70.6568542 70.6568542,72 69,72 L3,72 C1.34314575,72 0,70.6568542 0,69 L0,13 C0,11.3431458 1.34314575,10 3,10 L9,10 Z M66,26 L7,26 L7,66 L66,66 L66,26 Z M46.5,52 C48.4329966,52 50,53.5670034 50,55.5 C50,57.4329966 48.4329966,59 46.5,59 C44.5670034,59 43,57.4329966 43,55.5 C43,53.5670034 44.5670034,52 46.5,52 Z M56.5,52 C58.4329966,52 60,53.5670034 60,55.5 C60,57.4329966 58.4329966,59 56.5,59 C54.5670034,59 53,57.4329966 53,55.5 C53,53.5670034 54.5670034,52 56.5,52 Z M36.5,42 C38.4329966,42 40,43.5670034 40,45.5 C40,47.4329966 38.4329966,49 36.5,49 C34.5670034,49 33,47.4329966 33,45.5 C33,43.5670034 34.5670034,42 36.5,42 Z M26.5,42 C28.4329966,42 30,43.5670034 30,45.5 C30,47.4329966 28.4329966,49 26.5,49 C24.5670034,49 23,47.4329966 23,45.5 C23,43.5670034 24.5670034,42 26.5,42 Z M46.5,42 C48.4329966,42 50,43.5670034 50,45.5 C50,47.4329966 48.4329966,49 46.5,49 C44.5670034,49 43,47.4329966 43,45.5 C43,43.5670034 44.5670034,42 46.5,42 Z M56.5,42 C58.4329966,42 60,43.5670034 60,45.5 C60,47.4329966 58.4329966,49 56.5,49 C54.5670034,49 53,47.4329966 53,45.5 C53,43.5670034 54.5670034,42 56.5,42 Z M26.5,32 C28.4329966,32 30,33.5670034 30,35.5 C30,37.4329966 28.4329966,39 26.5,39 C24.5670034,39 23,37.4329966 23,35.5 C23,33.5670034 24.5670034,32 26.5,32 Z M16.5,32 C18.4329966,32 20,33.5670034 20,35.5 C20,37.4329966 18.4329966,39 16.5,39 C14.5670034,39 13,37.4329966 13,35.5 C13,33.5670034 14.5670034,32 16.5,32 Z M36.5,32 C38.4329966,32 40,33.5670034 40,35.5 C40,37.4329966 38.4329966,39 36.5,39 C34.5670034,39 33,37.4329966 33,35.5 C33,33.5670034 34.5670034,32 36.5,32 Z M15,0 C16.6568542,0 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 C13.3431458,18 12,16.6568542 12,15 L12,3 C12,1.34314575 13.3431458,0 15,0 Z M57,0 C58.6568542,0 60,1.34314575 60,3 L60,15 C60,16.6568542 58.6568542,18 57,18 C55.3431458,18 54,16.6568542 54,15 L54,3 C54,1.34314575 55.3431458,0 57,0 Z'/%3E%3C/svg%3E");
  background-size: contain;
}

.m-tabbar a.is-active .m-tab-icon--chart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath fill='%231a4594' d='M9,10 L9,16 C9,19.2383969 11.5655749,21.8775718 14.7750617,21.9958615 L15,22 C18.2383969,22 20.8775718,19.4344251 20.9958615,16.2249383 L21,16 L21,10 L51,10 L51,16 C51,19.2383969 53.5655749,21.8775718 56.7750617,21.9958615 L57,22 C60.2383969,22 62.8775718,19.4344251 62.9958615,16.2249383 L63,16 L63,10 L69,10 C70.6568542,10 72,11.3431458 72,13 L72,69 C72,70.6568542 70.6568542,72 69,72 L3,72 C1.34314575,72 0,70.6568542 0,69 L0,13 C0,11.3431458 1.34314575,10 3,10 L9,10 Z M66,26 L7,26 L7,66 L66,66 L66,26 Z M46.5,52 C48.4329966,52 50,53.5670034 50,55.5 C50,57.4329966 48.4329966,59 46.5,59 C44.5670034,59 43,57.4329966 43,55.5 C43,53.5670034 44.5670034,52 46.5,52 Z M56.5,52 C58.4329966,52 60,53.5670034 60,55.5 C60,57.4329966 58.4329966,59 56.5,59 C54.5670034,59 53,57.4329966 53,55.5 C53,53.5670034 54.5670034,52 56.5,52 Z M36.5,42 C38.4329966,42 40,43.5670034 40,45.5 C40,47.4329966 38.4329966,49 36.5,49 C34.5670034,49 33,47.4329966 33,45.5 C33,43.5670034 34.5670034,42 36.5,42 Z M26.5,42 C28.4329966,42 30,43.5670034 30,45.5 C30,47.4329966 28.4329966,49 26.5,49 C24.5670034,49 23,47.4329966 23,45.5 C23,43.5670034 24.5670034,42 26.5,42 Z M46.5,42 C48.4329966,42 50,43.5670034 50,45.5 C50,47.4329966 48.4329966,49 46.5,49 C44.5670034,49 43,47.4329966 43,45.5 C43,43.5670034 44.5670034,42 46.5,42 Z M56.5,42 C58.4329966,42 60,43.5670034 60,45.5 C60,47.4329966 58.4329966,49 56.5,49 C54.5670034,49 53,47.4329966 53,45.5 C53,43.5670034 54.5670034,42 56.5,42 Z M26.5,32 C28.4329966,32 30,33.5670034 30,35.5 C30,37.4329966 28.4329966,39 26.5,39 C24.5670034,39 23,37.4329966 23,35.5 C23,33.5670034 24.5670034,32 26.5,32 Z M16.5,32 C18.4329966,32 20,33.5670034 20,35.5 C20,37.4329966 18.4329966,39 16.5,39 C14.5670034,39 13,37.4329966 13,35.5 C13,33.5670034 14.5670034,32 16.5,32 Z M36.5,32 C38.4329966,32 40,33.5670034 40,35.5 C40,37.4329966 38.4329966,39 36.5,39 C34.5670034,39 33,37.4329966 33,35.5 C33,33.5670034 34.5670034,32 36.5,32 Z M15,0 C16.6568542,0 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 C13.3431458,18 12,16.6568542 12,15 L12,3 C12,1.34314575 13.3431458,0 15,0 Z M57,0 C58.6568542,0 60,1.34314575 60,3 L60,15 C60,16.6568542 58.6568542,18 57,18 C55.3431458,18 54,16.6568542 54,15 L54,3 C54,1.34314575 55.3431458,0 57,0 Z'/%3E%3C/svg%3E");
  background-size: contain;
}

.m-tab-icon--more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 20'%3E%3Cpath fill='%23191919' d='M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 Z'/%3E%3Cpath fill='%23191919' d='M36,0 C41.5228475,0 46,4.4771525 46,10 C46,15.5228475 41.5228475,20 36,20 C30.4771525,20 26,15.5228475 26,10 C26,4.4771525 30.4771525,0 36,0 Z M36,6 C33.790861,6 32,7.790861 32,10 C32,12.209139 33.790861,14 36,14 C38.209139,14 40,12.209139 40,10 C40,7.790861 38.209139,6 36,6 Z'/%3E%3Cpath fill='%23191919' d='M64,0 C69.5228475,0 74,4.4771525 74,10 C74,15.5228475 69.5228475,20 64,20 C58.4771525,20 54,15.5228475 54,10 C54,4.4771525 58.4771525,0 64,0 Z M64,6 C61.790861,6 60,7.790861 60,10 C60,12.209139 61.790861,14 64,14 C66.209139,14 68,12.209139 68,10 C68,7.790861 66.209139,6 64,6 Z'/%3E%3C/svg%3E");
  background-size: contain;
}

.m-tabbar a.is-active .m-tab-icon--more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 20'%3E%3Cpath fill='%231a4594' d='M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 Z'/%3E%3Cpath fill='%231a4594' d='M36,0 C41.5228475,0 46,4.4771525 46,10 C46,15.5228475 41.5228475,20 36,20 C30.4771525,20 26,15.5228475 26,10 C26,4.4771525 30.4771525,0 36,0 Z M36,6 C33.790861,6 32,7.790861 32,10 C32,12.209139 33.790861,14 36,14 C38.209139,14 40,12.209139 40,10 C40,7.790861 38.209139,6 36,6 Z'/%3E%3Cpath fill='%231a4594' d='M64,0 C69.5228475,0 74,4.4771525 74,10 C74,15.5228475 69.5228475,20 64,20 C58.4771525,20 54,15.5228475 54,10 C54,4.4771525 58.4771525,0 64,0 Z M64,6 C61.790861,6 60,7.790861 60,10 C60,12.209139 61.790861,14 64,14 C66.209139,14 68,12.209139 68,10 C68,7.790861 66.209139,6 64,6 Z'/%3E%3C/svg%3E");
  background-size: contain;
}

.m-tab-icon--live {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='%23bbb' stroke-width='3'/%3E%3Ctext x='24' y='30' text-anchor='middle' font-size='20' font-weight='700' fill='%23bbb' font-family='Arial,sans-serif'%3E6%3C/text%3E%3C/svg%3E");
  background-size: contain;
}

.m-tabbar a.is-active .m-tab-icon--live {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='%231a4594' stroke-width='3'/%3E%3Ctext x='24' y='30' text-anchor='middle' font-size='20' font-weight='700' fill='%231a4594' font-family='Arial,sans-serif'%3E6%3C/text%3E%3C/svg%3E");
  background-size: contain;
}

@media (max-width: 360px) {
  :root {
    --ball-gap: 3px;
  }
  .m-cd-digit { min-width: 22px; height: 34px; font-size: 20px; }
  .m-lottery-grid button { font-size: 12px; height: 34px; }
}

@media (min-width: 721px) {
  :root {
    --ball-hist-w: 36px;
    --ball-hist-h: 38px;
    --ball-hist-fs: 14px;
    --ball-main-w: 44px;
    --ball-main-h: 47px;
    --ball-main-fs: 18px;
    --ball-sx-fs: 12px;
    --ball-gap: 5px;
  }
}