/* ============================================================
 *  大湾区开奖网 · 干净中性版样式
 *  移动端优先，居中卡片，模仿样板视觉（蓝头 + 彩色号码球）
 * ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --blue: #2f8bff;
  --blue-dark: #1f6fe0;
  --red: #e93b3b;
  --blue-ball: #2f7be0;
  --green: #1faa5a;
  --bg: #eef1f6;
  --card: #ffffff;
  --line: #eceff3;
  --text: #222;
  --muted: #8a93a2;
}

html { scroll-behavior: smooth; scroll-padding-top: 12px; }

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: 24px;
}

/* ---------- 顶部头部 ---------- */
.header {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
  padding: 16px;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 4px 14px rgba(47, 139, 255, .25);
}
.logo { display: flex; align-items: center; gap: 12px; }
/* 站标是图片 logo.png（深蓝底旋涡，由 scripts/make_assets.py 生成，不透明），圆角在这里裁 */
.logo-mark {
  width: 44px; height: 44px; border-radius: 12px;
  flex: none; display: block; background: #fff;
}
.logo-text strong { font-size: 20px; letter-spacing: 1px; }
.logo-text small { display: block; font-size: 11px; opacity: .85; margin-top: 2px; }

/* ---------- 彩种切换 ---------- */
.tabs {
  display: flex; gap: 8px;
  padding: 12px 12px 0;
}
.tab-item {
  flex: 1; text-align: center;
  padding: 12px 0; font-size: 15px; font-weight: 700;
  background: #fff; color: var(--muted);
  border-radius: 12px 12px 0 0;
  cursor: pointer; transition: .2s;
  border-bottom: 3px solid transparent;
}
.tab-item.active {
  color: var(--blue); border-bottom-color: var(--blue);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .04);
}

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--card);
  margin: 12px;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(20, 40, 80, .05);
}
.tabs + .card { margin-top: 0; border-radius: 0 0 14px 14px; }
.card-title {
  font-size: 15px; font-weight: 700; color: #333;
  padding-left: 10px; position: relative; margin-bottom: 14px;
}
.card-title::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 4px; border-radius: 4px; background: var(--blue);
}
.card-title .sub { font-weight: 500; color: var(--muted); font-size: 12px; }

/* ---------- 开奖结果 ----------
 * 首页两个彩种各占一张 .draw-card，卡内自带倒计时与统计页入口，
 * 故标题行左侧竖排期号/日期，右侧固定一颗按钮。
 */
.draw-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 16px;
}
.draw-head-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kj-title { font-size: 16px; font-weight: 800; color: #222; line-height: 1.3; }
.kj-date { font-size: 11px; color: var(--muted); }

.stats-btn {
  flex: none; margin-top: 1px;
  padding: 6px 11px; border-radius: 999px;
  background: #eef4ff; color: var(--blue);
  font-size: 12px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.stats-btn:active { background: #dde8ff; }

/* 球内只放数字，生肖单独排在球的下方——两者挤在同一颗球里时字号都被压得看不清 */
.ball {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .12);
  position: relative;
}
.ball .ball-num { font-size: 24px; font-weight: 800; line-height: 1; }

/* 一颗球 + 它下方的生肖，作为一列整体参与排版 */
.ball-item { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.ball-sx { font-size: 13px; font-weight: 700; color: #333; line-height: 1; }

.ball-plus { font-size: 24px; font-weight: 800; color: #c2c9d4; padding: 0 2px; }

/* 一期是 6 正码 + 加号 + 特码，共 8 列，必须挤在一行——
 * 换行会让两个彩种的卡片高度翻倍。故每列宽改为按容器等分（flex:1 + 球 aspect-ratio），
 * 窄屏自动缩小、桌面由 max-width 封在原来的 52px。
 * 字号跟着视口缩放：移动端视口宽≈容器宽，clamp 的上下限兜住极端屏。
 * 只作用于 .balls 内——号码查询结果里的单颗球不能被拉伸。 */
.balls {
  display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center;
  gap: 4px;
}
.balls .ball-item { flex: 1 1 0; min-width: 0; max-width: 52px; gap: 4px; }
.balls .ball { width: 100%; height: auto; aspect-ratio: 1; }
/* 号码字号只受球内可用宽度限制，与球径解耦：球维持 52px，数字尽量占满 */
.balls .ball .ball-num { font-size: clamp(17px, 6vw, 32px); }
.balls .ball-sx { font-size: clamp(10px, 2.7vw, 13px); }

/* 加号自成一列：撑满球所在那段高度再居中，才能跟球心对齐；
 * 它下方的空 .ball-sx 占位让这一列和球列底部齐平 */
.balls .ball-item-plus { flex: 0 0 auto; max-width: none; }
.balls .ball-plus {
  flex: 1 1 auto; display: flex; align-items: center;
  font-size: clamp(13px, 3.4vw, 22px); padding: 0;
}

/* ---------- 正在等待摇珠 ----------
 * 到点了、号码还没出来的那几分钟：空球 + 呼吸动画，明确表示「在等」，
 * 而不是把上一期的号码留在屏幕上冒充本期。见 lottery.js awaitingDraw()
 */
.balls.is-waiting { flex-wrap: wrap; }
.ball-wait {
  background: radial-gradient(circle at 35% 30%, #e8edf5, #cdd6e4);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .06);
  animation: ball-breathe 1.25s ease-in-out infinite;
}
/* 依次错开，形成从左到右的滚动感——同步闪烁看着像页面卡住了 */
.balls.is-waiting .ball-item:nth-child(2) .ball-wait { animation-delay: .1s; }
.balls.is-waiting .ball-item:nth-child(3) .ball-wait { animation-delay: .2s; }
.balls.is-waiting .ball-item:nth-child(4) .ball-wait { animation-delay: .3s; }
.balls.is-waiting .ball-item:nth-child(5) .ball-wait { animation-delay: .4s; }
.balls.is-waiting .ball-item:nth-child(6) .ball-wait { animation-delay: .5s; }
.balls.is-waiting .ball-item:last-child  .ball-wait { animation-delay: .6s; }

@keyframes ball-breathe {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* ---------- 摇珠动画：下一颗球的落点 ----------
 * 空球齐刷刷呼吸只表达「在等」，说不出等到第几颗了。真正在摇的那一格
 * 换成这个：球仓轻轻左右晃（摇），三颗彩珠在里面绕圈翻滚（珠），外圈一道
 * 蓝弧转动。它一路往右移，本身就是进度条。见 lottery.js 的 ROLL_BALL。
 *
 * 尺寸全用百分比：球径随视口在 36~52px 之间伸缩（见上面 .balls .ball），
 * 写死 px 会让窄屏上的珠子挤成一团。
 */
.ball-roll {
  background: radial-gradient(circle at 35% 30%, #f4f7fc, #d7e0ee);
  /* 外圈淡蓝描边把「就是这一格」点出来，不靠闪烁 */
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .06), 0 0 0 2px rgba(47, 139, 255, .16);
  /* 不跟其它空球一起呼吸——缩放会带着里面的珠子一起抖 */
  animation: roll-shake 1.1s ease-in-out infinite;
}

.ball-roll .roll-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(47, 139, 255, .16);
  border-top-color: var(--blue);
  animation: roll-spin .75s linear infinite;
}

/* 两条转速不同、方向相反的轨道：同速同向会像刚体一起转，
 * 错开才有「珠子在仓里乱翻」的感觉 */
.ball-roll .roll-orbit { position: absolute; inset: 0; }
.ball-roll .roll-o1 { animation: roll-spin .95s linear infinite; }
.ball-roll .roll-o2 { animation: roll-spin 1.5s linear infinite reverse; }

/* 珠子按「圆心坐标 - 半径」定位：直径 26%，故 left/top 各减 13% */
.ball-roll .rd {
  position: absolute; width: 26%; height: 26%; border-radius: 50%;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .22);
}
.ball-roll .roll-o1 .rd:nth-child(1) { left: 37%; top: 11%; }   /* 圆心 50%,24% */
.ball-roll .roll-o1 .rd:nth-child(2) { left: 37%; top: 63%; }   /* 圆心 50%,76% */
.ball-roll .roll-o2 .rd              { left: 13%; top: 45%; }   /* 圆心 26%,58% */

.ball-roll .rd-red   { background: radial-gradient(circle at 35% 30%, #ff8a8a, var(--red)); }
.ball-roll .rd-blue  { background: radial-gradient(circle at 35% 30%, #7fb2f7, var(--blue-ball)); }
.ball-roll .rd-green { background: radial-gradient(circle at 35% 30%, #6ad9a1, var(--green)); }

@keyframes roll-spin  { to { transform: rotate(360deg); } }
@keyframes roll-shake {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* 提示语独占一行：.balls 是 nowrap 的单行 flex，
 * 靠 flex-basis:100% 把它挤到球的下一行（配合上面的 wrap） */
.drawing-tip {
  flex: 1 0 100%; text-align: center;
  margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--blue);
}

/* 用户开了「减少动态效果」就别闪——前庭敏感人群会不适。
 * 摇珠球只停动作、不撤掉：它标着「下一颗落这儿」，是进度信息不是装饰，
 * 静止状态下靠满不透明度 + 蓝描边照样看得出是哪一格。 */
@media (prefers-reduced-motion: reduce) {
  .ball-wait { animation: none; opacity: .6; }
  .ball-roll,
  .ball-roll .roll-ring,
  .ball-roll .roll-orbit { animation: none; }
  .ball-roll { opacity: 1; }
}

.wave-red   { background: radial-gradient(circle at 35% 30%, #ff6b6b, var(--red)); }
.wave-blue  { background: radial-gradient(circle at 35% 30%, #5a9bf2, var(--blue-ball)); }
.wave-green { background: radial-gradient(circle at 35% 30%, #46c884, var(--green)); }

.summary {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #555;
}
.summary b { font-weight: 700; }
.t-red { color: var(--red); }
.t-blue { color: var(--blue-ball); }
.t-green { color: var(--green); }

/* ---------- 数据来源标注 ---------- */
.src-note {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 11px; color: var(--muted);
}
.src-note.is-sample { color: #c47b0a; }

/* ---------- 加载中 ---------- */
.loading { color: var(--muted); font-size: 13px; padding: 18px 0; }

/* ---------- 历史计数 / 加载更多 ---------- */
.his-count { font-size: 12px; color: var(--muted); margin: -6px 0 10px; }
.his-more {
  display: block; width: 100%; margin-top: 12px; padding: 11px 0;
  border: 1px solid #dfe4ec; border-radius: 10px; background: #f7f9fc;
  color: var(--blue); font-size: 14px; font-weight: 600; cursor: pointer;
}
.his-more:active { background: #eef3fa; }

/* ---------- 倒计时（嵌在各自的开奖卡片内） ----------
 * 曾经是张深色卡片，光它自己就吃掉 75px——两个彩种并列后实在放不下。
 * 现在压成号码球下面的一行：左倒计时、右下期时间，靠虚线与号码分隔。
 */
.draw-cd {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--muted);
}
.cd-time {
  font-size: 13px; font-weight: 800; color: #2b3b63; white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* 数字等宽，秒数跳动时整行不抖 */
}
.cd-next { white-space: nowrap; }

/* ---------- 首页开奖卡片的紧凑化 ---------- */
.draw-card { padding: 12px 14px; }
.draw-card .draw-head { margin-bottom: 10px; }

/* 页脚的数据来源标注（各彩种合成一句，见 lottery.js renderSourceLine） */
.src-line { font-size: 11px; opacity: .8; }
/* 仅示例数据的那一段标橙，别把整行染色连累真实彩种 */
.src-line .is-sample { color: #c47b0a; font-weight: 700; }

/* ---------- 每期资料（iframe 嵌入 embed.dawan6.com） ----------
 * 高度由 js/embed-host.js 根据资料站上报的值设置，这里只给个初始值，
 * 免得内容到位前页面整块塌陷。资料站页面背景是透明的、自带卡片样式，
 * 所以 iframe 不放在 .card 里，直接作为独立一块。
 */
.tz-note {
  font-size: 12px; color: var(--muted); line-height: 1.8;
  padding: 10px 12px; background: #f7f9fc; border-radius: 10px;
  margin-bottom: 16px;
}
.tz-note:last-child { margin-bottom: 0; }

.embed-wrap { margin: 12px; }
#tz-frame {
  display: block; width: 100%; border: 0;
  height: 420px;                 /* 初始占位，收到 embed-height 后被覆盖 */
  background: transparent;
}

/* ---------- 快捷导航 ---------- */
.quicknav {
  display: flex; gap: 8px; margin: 12px; flex-wrap: wrap;
}
/* 五个入口要并成一行：min-width 留 70px 会在 390px 屏挤掉最后一个，
 * 让它单独占一行很难看，所以放开最小宽度、由 flex 等分。 */
.quicknav a {
  flex: 1; min-width: 0; text-align: center; white-space: nowrap;
  padding: 10px 2px; background: #fff; border-radius: 10px;
  color: #444; text-decoration: none; font-size: 12px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(20, 40, 80, .05);
}
.quicknav a:active { background: #f0f4fb; }

/* ---------- 号码查询 ---------- */
.query-box { display: flex; gap: 10px; }
.query-box input {
  flex: 1; height: 42px; border: 1px solid #dfe4ec; border-radius: 10px;
  padding: 0 14px; font-size: 15px; outline: none;
}
.query-box input:focus { border-color: var(--blue); }
.query-box button {
  width: 84px; height: 42px; border: none; border-radius: 10px;
  background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.query-result {
  margin-top: 14px; min-height: 56px;
  display: flex; align-items: center;
}
.query-result .q-tip { color: var(--muted); font-size: 13px; }
.q-attrs { font-size: 13px; line-height: 1.9; color: #555; }
.q-attrs b { font-weight: 700; color: #222; }
.q-more {
  display: inline-block; margin-top: 4px;
  color: var(--blue); text-decoration: none; font-size: 12px; font-weight: 600;
}

/* ---------- 历史记录 ---------- */
.his-list { display: flex; flex-direction: column; }
.his-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.his-row:last-child { border-bottom: none; }
.his-meta { display: flex; flex-direction: column; min-width: 92px; }
.his-qi { font-weight: 700; color: #333; }
.his-date { font-size: 11px; color: var(--muted); }
/* 球顶部对齐，加号靠 line-height 落在球心那一行 */
.his-balls { display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap; }

/* 小号码球（历史/对照表）。球内只放数字；历史行另在球下方排一行生肖 */
.mini-ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .18);
}
.mini-ball i { font-style: normal; font-size: 15px; font-weight: 700; line-height: 1; }
.mini-ball-item { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.mini-sx { font-style: normal; font-size: 11px; font-weight: 700; color: #555; line-height: 1; }
.mini-plus { color: #c2c9d4; font-weight: 800; padding: 0 2px; line-height: 30px; }

/* ---------- 生肖对照 ---------- */
.sx-table { display: flex; flex-direction: column; gap: 8px; }
.sx-row { display: flex; align-items: center; gap: 10px; }
.sx-name {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: #f0f4fb; color: var(--blue-dark); font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.sx-nums { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- 波色对照 ---------- */
.wave-table { display: flex; flex-direction: column; gap: 12px; }
.wave-row { display: flex; align-items: flex-start; gap: 10px; }
.wave-tag {
  flex: none; width: 40px; padding: 4px 0; text-align: center;
  border-radius: 8px; font-weight: 700; font-size: 12px; color: #fff;
}
.wave-tag.t-red { background: var(--red); }
.wave-tag.t-blue { background: var(--blue-ball); }
.wave-tag.t-green { background: var(--green); }
.wave-nums { display: flex; flex-wrap: wrap; gap: 5px; }

/* ============================================================
 *  历史开奖统计
 * ============================================================ */

/* 分段切换按钮 */
.stats-ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.seg {
  display: flex; background: #f2f5fa; border-radius: 10px; padding: 3px; gap: 2px;
}
.seg-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 7px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  font-family: inherit; white-space: nowrap;
}
.seg-btn.active { background: #fff; color: var(--blue); box-shadow: 0 1px 4px rgba(20, 40, 80, .1); }

.stats-meta { font-size: 11px; color: var(--muted); margin-bottom: 14px; }

/* 统计口径（彩种）切换：香港与新澳门是独立彩种，不能混着算 */
.src-switch {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 8px;
}
.src-switch-k { font-size: 12px; color: var(--muted); }

.stat-sec { margin-top: 18px; }
.stat-sec:first-child { margin-top: 0; }
.stat-sec-t {
  font-size: 13px; font-weight: 700; color: #444; margin-bottom: 10px;
}
.stat-sec-t .sub { font-weight: 500; color: var(--muted); font-size: 11px; }

/* ---------- 热力图（气泡球：颜色=波色，球大小=热度） ---------- */
.heat-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px 6px;
  align-items: center; justify-items: center;
}
.heat-cell {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.heat-ball {
  aspect-ratio: 1 / 1; border-radius: 50%; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .12);
}
.heat-ball .hbn { font-weight: 800; }
.heat-ball .hbx {
  font-size: 9px; opacity: .92; margin-top: 2px;
  background: rgba(255, 255, 255, .26); border-radius: 6px; padding: 0 4px;
}
.heat-cnt { font-size: 11px; color: #667; font-weight: 700; }

/* 球内号码字号按热度分档；最冷两档球太小则隐藏生肖标签 */
.hbz0 .hbn { font-size: 11px; }
.hbz0 .hbx { display: none; }
.hbz1 .hbn { font-size: 12px; }
.hbz1 .hbx { display: none; }
.hbz2 .hbn { font-size: 14px; }
.hbz3 .hbn { font-size: 16px; }
.hbz4 .hbn { font-size: 18px; }

/* 图例 */
.heat-legend { margin-top: 14px; }
.heat-lg-balls { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.heat-lg-txt { font-size: 11px; color: var(--muted); margin-left: 4px; }
.heat-lg-hint { font-size: 11px; color: var(--muted); }
.heat-lg-hint b { font-weight: 700; }

/* ---------- 排行列表 ---------- */
.rank-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rank-item {
  display: flex; align-items: center; gap: 5px;
  background: #f7f9fc; border: 1px solid #eef2f8;
  border-radius: 20px; padding: 3px 10px 3px 3px;
}
.rank-val { font-size: 13px; font-weight: 700; color: #333; }
.rank-val small { font-size: 10px; font-weight: 500; color: var(--muted); margin-left: 1px; }

/* ---------- 频率条 ---------- */
.bar-list { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: flex; align-items: center; gap: 8px; }
.bar-name {
  width: 26px; flex: none; font-size: 13px; font-weight: 700; color: #444; text-align: center;
}
.bar-track { flex: 1; height: 14px; background: #f0f3f8; border-radius: 7px; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, #7fb4f5, var(--blue));
}
.bar-val { width: 74px; flex: none; text-align: right; font-size: 12px; font-weight: 700; color: #333; }
.bar-val small { font-weight: 500; color: var(--muted); font-size: 10px; }

/* ---------- 属性占比 ---------- */
.ratio-block { margin-bottom: 16px; }
.ratio-block:last-child { margin-bottom: 0; }
.ratio-title { font-size: 12px; color: #555; margin-bottom: 7px; }
.ratio-bar {
  display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #f0f3f8;
}
.ratio-seg { height: 100%; }
.bg-red { background: var(--red); }
.bg-blue { background: var(--blue-ball); }
.bg-green { background: var(--green); }
.bg-dark { background: #5b7a9e; }
.bg-light { background: #b9c7d8; }

.ratio-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ratio-tag { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #555; }
.ratio-tag .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ratio-tag b { font-weight: 700; color: #222; }
.ratio-tag small { color: var(--muted); font-size: 10px; }

/* ---------- 统计说明 ---------- */
.stat-note {
  margin-top: 18px; padding: 11px 12px;
  background: #f7f9fc; border: 1px dashed #dfe6f0; border-radius: 10px;
  font-size: 11px; color: var(--muted); line-height: 1.8;
}
.stat-note b { color: #667; font-weight: 700; }

/* ============================================================
 *  内容栏目入口（首页）
 * ============================================================ */
.feature-nav { display: flex; gap: 8px; margin: 0 12px 12px; }
.feat-card {
  flex: 1; text-align: center; text-decoration: none;
  background: #fff; border-radius: 12px; padding: 14px 6px;
  box-shadow: 0 2px 8px rgba(20, 40, 80, .05);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.feat-card:active { background: #f0f4fb; }
.feat-ico { font-size: 24px; line-height: 1; }
.feat-card b { font-size: 14px; color: #333; }
.feat-card small { font-size: 10px; color: var(--muted); }

/* ============================================================
 *  内容页通用（面包屑 / 返回 / 说明）
 * ============================================================ */
.logo-back {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35);
  color: #fff; text-decoration: none; font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-right: 4px;
}
.crumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 12px 12px 0; font-size: 12px; color: var(--muted);
}
.crumb a { color: var(--blue); text-decoration: none; }
.crumb b { color: #333; }
.crumb-links { margin-left: auto; display: flex; gap: 12px; }

.note-card { }
.note-p { font-size: 12px; color: #666; line-height: 1.9; margin-bottom: 8px; }
.note-p:last-child { margin-bottom: 0; }
.note-p b { color: #444; font-weight: 700; }

/* ============================================================
 *  老黄历
 * ============================================================ */
.hl-datebar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.hl-nav {
  border: 1px solid #dfe4ec; background: #f7f9fc; color: var(--blue);
  border-radius: 9px; padding: 8px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.hl-date-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hl-date-mid input {
  border: 1px solid #dfe4ec; border-radius: 9px; padding: 6px 8px;
  font-size: 13px; font-family: inherit; color: #333;
}
.hl-today {
  border: none; background: none; color: var(--muted);
  font-size: 11px; cursor: pointer; text-decoration: underline; font-family: inherit;
}

.hl-main { background: linear-gradient(160deg, #fff, #f7faff); }
.hl-top { display: flex; }
.hl-solar, .hl-lunar {
  flex: 1; text-align: center; padding: 6px 4px;
}
.hl-solar { border-right: 1px dashed var(--line); }
.hl-big { font-size: 28px; font-weight: 800; color: var(--blue-dark); line-height: 1.2; }
.hl-lunar .hl-big { color: #c0392b; }
.hl-sub { font-size: 12px; color: #667; margin-top: 4px; }

.hl-yiji { margin: 18px 0; display: flex; flex-direction: column; gap: 10px; }
.yiji-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border-radius: 10px;
}
.yiji-yi { background: #f0f9f2; }
.yiji-ji { background: #fdf1f0; }
.yiji-tag {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
}
.tag-yi { background: var(--green); }
.tag-ji { background: var(--red); }
.yiji-txt { font-size: 14px; color: #444; line-height: 1.7; padding-top: 3px; }

.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hl-cell {
  background: #f7f9fc; border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.hl-cell span { font-size: 11px; color: var(--muted); }
.hl-cell b { font-size: 15px; color: #333; font-weight: 700; }

/* ============================================================
 *  生肖百科
 * ============================================================ */
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #f0f4fb; color: var(--blue-dark); font-weight: 800; font-size: 16px;
  text-decoration: none;
}
.sx-chip.cur { background: var(--blue); color: #fff; }

.sx-detail { scroll-margin-top: 12px; }
.sx-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sx-detail-name {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800;
}
.sx-detail-title { flex: 1; }
.sx-detail-title b { font-size: 17px; color: #222; display: block; }
.sx-detail-title small { font-size: 12px; color: var(--muted); }
.sx-cur-badge {
  flex: none; background: #fff3e0; color: #c47b0a;
  font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 8px;
}

.sx-attr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sx-attr {
  background: #f7f9fc; border-radius: 9px; padding: 9px; text-align: center;
}
.sx-attr span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.sx-attr b { font-size: 15px; color: #333; }

.sx-rel { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.sx-rel-row { font-size: 13px; color: #555; display: flex; align-items: center; gap: 8px; }
.sx-rel-k {
  flex: none; width: 40px; text-align: center; padding: 3px 0; border-radius: 6px;
  font-size: 11px; font-weight: 700; color: #fff;
}
.sx-rel-k.he { background: var(--green); }
.sx-rel-k.chong { background: var(--red); }

.sx-trait {
  background: #f7f9fc; border-radius: 9px; padding: 10px 12px; font-size: 13px;
  color: #444; margin-bottom: 10px;
}
.sx-trait-k { color: var(--blue); font-weight: 700; margin-right: 8px; }
.sx-note { font-size: 12px; color: #777; line-height: 1.9; }

.sx-nums-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sx-nums-t { font-size: 12px; color: #555; margin-bottom: 10px; }
.sx-nums-t .sub { color: var(--muted); font-size: 11px; }
.sx-num-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sx-num-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sx-num-cnt { font-style: normal; font-size: 10px; color: var(--muted); }

/* ============================================================
 *  号码档案
 *  这页文字量大、以阅读为主，字号整体比站内其它页面大一档；
 *  桌面端再放大一档（读者多为中老年人，小字看不清）。
 * ============================================================ */
.hm-filter { margin-bottom: 12px; }
.hm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hm-cell {
  aspect-ratio: 3 / 4; border: none; cursor: pointer; color: #fff;
  border-radius: 10px; padding: 4px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: inherit;
  /* 字号放大后行高按 1.5 算会把格子撑高，这里收紧行高保持 3:4 比例 */
  line-height: 1.2;
  /* ⚠ 必须显式写 min-width:0：网格项的 min-width 默认是 auto，配合 aspect-ratio
     会把「内容撑出的高度」按 3:4 反推成最小宽度（如 56.8→42.6px），7 列压不下去，
     窄屏上整行会顶出卡片、把页面撑宽。2026-08-07 实测 375px 下溢出 15px。 */
  min-width: 0;
}
.hm-cell i { font-style: normal; font-size: 18px; font-weight: 800; }
.hm-cell .hm-sx {
  font-style: normal; font-size: 11px;
  background: rgba(255, 255, 255, .28); border-radius: 6px; padding: 0 5px;
}
.hm-cell .hm-cnt { font-style: normal; font-size: 10px; opacity: .9; }
.hm-cell:active { transform: scale(.94); }

.hm-d-head { display: flex; align-items: center; margin-bottom: 14px; }
.hm-d-attrs { font-size: 15px; line-height: 1.95; color: #4a4a4a; }
.hm-d-attrs b { color: #222; font-weight: 700; }
.hm-d-src { color: var(--muted); font-size: 13px; margin-left: 2px; }
.hm-d-sec {
  padding: 12px 0; border-top: 1px dashed var(--line); font-size: 15px; color: #4a4a4a;
}
.hm-d-k {
  display: inline-block; color: var(--blue); font-weight: 700;
  margin-right: 10px; min-width: 68px;
}
.hm-d-digit { display: inline-block; vertical-align: top; }
.hm-d-digit > div { margin-bottom: 6px; line-height: 1.85; }

/* 极窄屏（320–359px）：靠压缩间距而不是缩小数字来腾地方，字号是这页的重点 */
@media (max-width: 359px) {
  .hm-grid { gap: 4px; }
  .hm-cell { border-radius: 8px; }
  .hm-cell .hm-sx { padding: 0 3px; }
}

/* 本页共用组件（标题 / 分段按钮 / 说明文字）也跟着放大，只作用于号码档案页 */
.page-haoma .card-title { font-size: 17px; }
.page-haoma .card-title .sub { font-size: 14px; }
.page-haoma .crumb { font-size: 14px; }
.page-haoma .seg-btn { font-size: 14px; padding: 8px 14px; }
.page-haoma .src-switch-k { font-size: 14px; }
.page-haoma .stats-meta { font-size: 13px; }
.page-haoma .note-p { font-size: 14px; line-height: 1.95; color: #555; }
.page-haoma .footer { font-size: 13px; line-height: 1.9; }

@media (min-width: 600px) {
  .hm-grid { gap: 10px; }
  .hm-cell { border-radius: 12px; gap: 3px; }
  .hm-cell i { font-size: 26px; }
  .hm-cell .hm-sx { font-size: 14px; padding: 1px 8px; border-radius: 7px; }
  .hm-cell .hm-cnt { font-size: 13px; }

  .hm-d-attrs { font-size: 18px; line-height: 2; }
  .hm-d-src { font-size: 15px; }
  .hm-d-sec { font-size: 18px; padding: 14px 0; }
  .hm-d-k { min-width: 88px; margin-right: 12px; }
  .hm-d-digit > div { margin-bottom: 8px; }

  .page-haoma .card-title { font-size: 20px; }
  .page-haoma .card-title .sub { font-size: 16px; }
  .page-haoma .crumb { font-size: 16px; }
  .page-haoma .seg-btn { font-size: 16px; padding: 10px 18px; }
  .page-haoma .src-switch-k { font-size: 16px; }
  .page-haoma .stats-meta { font-size: 15px; }
  .page-haoma .note-p { font-size: 16px; line-height: 2; }
  .page-haoma .footer { font-size: 15px; }
  .page-haoma .logo-text strong { font-size: 24px; }
  .page-haoma .logo-text small { font-size: 14px; }
}

/* ============================================================
 *  阴阳历转换
 * ============================================================ */
.conv-input { margin-bottom: 14px; }
.conv-input > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.conv-input input[type="date"] {
  width: 100%; height: 44px; border: 1px solid #dfe4ec; border-radius: 10px;
  padding: 0 14px; font-size: 15px; font-family: inherit; color: #333;
}
.lunar-picker { display: flex; gap: 8px; }
.lunar-picker select {
  flex: 1; height: 44px; border: 1px solid #dfe4ec; border-radius: 10px;
  padding: 0 8px; font-size: 14px; font-family: inherit; color: #333; background: #fff;
}
.leap-check {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 13px; color: #555;
}
.leap-check small { color: var(--muted); }

.conv-hero {
  text-align: center; padding: 16px; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff;
  margin-bottom: 10px;
}
.conv-hero-lunar { background: linear-gradient(135deg, #c0392b, #922b21); }
.conv-hero-main { font-size: 22px; font-weight: 800; }
.conv-hero-sub { font-size: 13px; opacity: .9; margin-top: 4px; }
.conv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.conv-cell {
  background: #f7f9fc; border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.conv-cell span { font-size: 11px; color: var(--muted); }
.conv-cell b { font-size: 16px; color: #333; }
.conv-eq {
  text-align: center; font-size: 13px; color: #555; font-weight: 600;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line);
}
.conv-warn {
  text-align: center; padding: 20px; color: #c47b0a; font-size: 13px;
  background: #fff8ec; border-radius: 10px;
}

/* ============================================================
 *  生辰八字
 * ============================================================ */
.bz-form { display: flex; flex-direction: column; gap: 12px; }
.bz-row { display: flex; align-items: center; gap: 12px; }
.bz-row label { width: 64px; flex: none; font-size: 13px; color: #555; }
.bz-row input, .bz-row select {
  flex: 1; height: 44px; border: 1px solid #dfe4ec; border-radius: 10px;
  padding: 0 12px; font-size: 15px; font-family: inherit; color: #333; background: #fff;
}
.bz-btn {
  height: 46px; border: none; border-radius: 10px; margin-top: 4px;
  background: var(--blue); color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; font-family: inherit; letter-spacing: 4px;
}
.bz-btn:active { background: var(--blue-dark); }

.bz-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bz-pillar {
  background: linear-gradient(160deg, #f7faff, #eef3fb);
  border: 1px solid #e6eef8; border-radius: 12px;
  padding: 14px 4px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.bz-pl { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.bz-gan { font-size: 26px; font-weight: 800; color: var(--blue-dark); line-height: 1.1; }
.bz-zhi { font-size: 26px; font-weight: 800; color: #c0392b; line-height: 1.1; }
.bz-pillar-empty { background: #f4f6fa; }
.bz-pillar-empty b { font-size: 24px; color: #c2c9d4; }
.bz-pillar-empty small { font-size: 10px; color: var(--muted); }

.bz-sub-title { font-size: 13px; font-weight: 700; color: #444; margin: 18px 0 10px; }
.bz-basic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bz-b-item {
  background: #f7f9fc; border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.bz-b-item span { font-size: 11px; color: var(--muted); }
.bz-b-item b { font-size: 14px; color: #333; }

.bz-wuxing { display: flex; flex-direction: column; gap: 8px; }
.bz-wx-row { display: flex; align-items: center; gap: 10px; }
.bz-wx-name {
  width: 26px; height: 26px; flex: none; border-radius: 8px; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
}
.bz-wx-track { flex: 1; height: 14px; background: #f0f3f8; border-radius: 7px; overflow: hidden; }
.bz-wx-fill { height: 100%; border-radius: 7px; min-width: 2px; }
.bz-wx-val { width: 20px; text-align: right; font-size: 13px; font-weight: 700; color: #333; }
.bz-wx-note { font-size: 12px; color: var(--muted); margin-top: 10px; }
.bz-wx-note b { color: #c0392b; font-weight: 700; }

/* ============================================================
 *  号码走势图
 * ============================================================ */
.zs-ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.trend-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid #eef2f8; border-radius: 10px;
}
.trend-table { border-collapse: collapse; font-size: 11px; }
.trend-table th, .trend-table td {
  width: 26px; min-width: 26px; height: 26px; text-align: center;
  border-right: 1px solid #f0f3f8; border-bottom: 1px solid #f0f3f8;
}
.trend-table thead th {
  background: #f2f5fa; color: #667; font-weight: 700; position: sticky; top: 0;
  font-size: 10px;
}
.trend-table tbody tr:nth-child(even) td { background: #fafbfd; }

/* 期号列固定在左侧 */
.zs-qi {
  position: sticky; left: 0; z-index: 2;
  background: #fff !important; width: 52px; min-width: 52px;
  font-size: 10px; color: #555; font-weight: 700;
  border-right: 1px solid #e6eaf0;
}
.trend-table thead .zs-qi { z-index: 3; background: #eef2f8 !important; }

/* 开出的号码球 */
.zs-on { padding: 1px; }
.zs-ball {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin: 0 auto; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 10px;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .18);
}

/* 汇总行 */
.zs-foot td { background: #f7f9fc !important; font-weight: 700; color: #444; font-size: 10px; }
.zs-foot .zs-qi { color: var(--blue); }
.zs-miss td { color: var(--muted); font-weight: 600; }
.zs-miss td.zs-hot { color: var(--red); font-weight: 800; }

.trend-tip { font-size: 11px; color: var(--muted); line-height: 1.8; margin-top: 10px; }

/* ============================================================
 *  404 页
 * ============================================================ */
.nf-card { text-align: center; padding: 28px 16px; }
.nf-code {
  font-size: 64px; font-weight: 800; line-height: 1;
  color: #dfe6f0; letter-spacing: 4px;
}
.nf-msg { font-size: 14px; color: #666; margin: 14px 0 20px; }
.nf-home {
  display: inline-block; padding: 11px 22px; border-radius: 10px;
  background: var(--blue); color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700;
}
.nf-home:active { background: var(--blue-dark); }

/* ---------- 页脚 ---------- */
.footer {
  margin: 20px 12px 0; padding: 16px; text-align: center;
  font-size: 11px; color: var(--muted); line-height: 1.8;
}

/* ---------- 回顶部 ---------- */
.to-top {
  position: fixed; right: 16px; bottom: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: 0 4px 12px rgba(47, 139, 255, .4);
  opacity: .9;
  transition: opacity .18s, transform .18s;
}
/* 还在页首时藏起来：那时它没有用途，却正好压在右下角的内容上——
   号码盘（选号页 49 格、号码档案页）最后一格就在它底下，点不到。
   由 js/common.js 按滚动位置切换。 */
.to-top.is-hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
  .to-top.is-hidden { transform: none; }
}
.app { position: relative; }

@media (min-width: 560px) {
  .ball { width: 58px; height: 58px; }
  .ball .ball-num { font-size: 26px; }
}

/* ============================================================
 *  万年历日期条
 *  ------------------------------------------------------------
 *  「按公历选」和「按农历选」共用同一条 ‹前一天 / 后一天›——
 *  切换的只是中间的输入控件，日期本身是同一个状态。
 * ============================================================ */
.wnl-mode { margin-bottom: 12px; }
.wnl-picker {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.wnl-mid {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.wnl-pick { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.wnl-pick input[type="date"],
.wnl-pick select {
  border: 1px solid #dfe4ec; border-radius: 9px; padding: 6px 8px;
  font-size: 13px; font-family: inherit; color: #333; background: #fff;
}
.wnl-pick select { padding-right: 4px; }

.hl-term {
  margin-top: 12px; text-align: center;
  background: #fff7e6; color: #b07a12; border-radius: 9px;
  padding: 7px; font-size: 13px; font-weight: 700;
}

/* ============================================================
 *  号码组合工具
 * ============================================================ */

/* ---------- 快捷批量选 ----------
 * 展开后有 4 组共约 200px 高，会把 49 格号码盘整个挤出首屏，
 * 所以默认收起。收起时那行小字要写清楚里面有什么，否则没人会去点开。
 */
.xh-quick-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  border: 1px solid #dfe4ec; background: #f7f9fc; border-radius: 9px;
  padding: 8px 10px; margin-bottom: 10px;
  font-family: inherit; cursor: pointer; text-align: left;
}
.xh-quick-toggle b { font-size: 13px; font-weight: 700; color: #444; flex: none; }
.xh-quick-toggle small { font-size: 11px; color: var(--muted); flex: 1; min-width: 0; line-height: 1.4; }
.xh-quick-toggle em {
  font-style: normal; color: var(--blue); font-size: 11px; flex: none;
  transition: transform .2s;
}
.xh-quick-toggle.open em { transform: rotate(180deg); }

.xh-quick { margin-bottom: 14px; }
.xh-chip-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.xh-chip-row:last-child { margin-bottom: 0; }
.xh-chip-k {
  flex: none; width: 30px; padding-top: 5px;
  font-size: 11px; color: var(--muted); line-height: 1.4;
}
.xh-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.xh-chip {
  border: 1px solid #dfe4ec; background: #f7f9fc; color: #555;
  border-radius: 8px; padding: 5px 9px;
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
}
/* 高亮＝这一组号码当前**全部**在选中集里，一眼看出选择由哪些完整组构成 */
.xh-chip.on {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.xh-chip.on.t-red   { background: var(--red);       border-color: var(--red);       color: #fff; }
.xh-chip.on.t-blue  { background: var(--blue-ball); border-color: var(--blue-ball); color: #fff; }
.xh-chip.on.t-green { background: var(--green);     border-color: var(--green);     color: #fff; }

/* ---------- 号码网格（复用号码档案的 .hm-grid/.hm-cell，但压紧一档） ----------
 * 号码档案页的格子是 3:4 竖长格 + 生肖胶囊，那页是给人**读**的、字号刻意放大过。
 * 选号盘是给人**点**的：49 格一屏看不全就没法用（原来底部落在 854px，
 * 比 375×667 的一屏多出近 190px）。所以这里压成正方形、生肖去掉胶囊底，
 * 号码字号只从 18 降到 17 —— 省下的高度全部来自留白，不是来自数字。
 */
.xh-numgrid { gap: 5px; margin-bottom: 12px; }
.xh-numgrid .hm-cell {
  position: relative; transition: background .12s;
  aspect-ratio: 1 / 1; padding: 2px 0; gap: 0; border-radius: 9px;
}
.xh-numgrid .hm-cell i { font-size: 17px; }
.xh-numgrid .hm-cell .hm-sx {
  font-size: 10px; background: none; padding: 0; border-radius: 0; opacity: .95;
}
/* 未选中的号码退成灰色：选中态就是号码本来的波色，对比最直接，
   不需要额外的勾选标记去挤那个小格子。 */
/* 灰底上的字色取 #6b7480 而不是更浅的灰：读者多为中老年人，
   未选中的号码也得看得清楚（这个组合对比度约 4.6:1，过 WCAG AA） */
.xh-numgrid .hm-cell:not(.is-on) {
  background: #e9edf4; color: #6b7480; box-shadow: none;
}
.xh-numgrid .hm-cell:not(.is-on) .hm-sx { background: none; }
.hm-cell.is-dan::after, .xh-big.is-dan::after {
  /* 角标浮在格子外沿，网格 gap 只有 6px，不抬 z-index 会被后面的格子盖住 */
  content: "胆"; position: absolute; top: -5px; right: -4px; z-index: 2;
  width: 17px; height: 17px; border-radius: 50%;
  background: #f5a623; color: #fff;
  font-size: 10px; font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.xh-numgrid .hm-cell.is-dan { box-shadow: 0 0 0 2px #f5a623; }

/* ---------- 生肖 / 尾数格 ---------- */
.xh-bigrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px;
}
.xh-big {
  position: relative; border: 1px solid #dfe4ec; background: #f7f9fc;
  border-radius: 10px; padding: 8px 4px 7px; cursor: pointer;
  font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.xh-big b { font-size: 17px; color: #444; font-weight: 800; }
.xh-big.is-on { background: #eaf3ff; border-color: var(--blue); }
.xh-big.is-on b { color: var(--blue-dark); }
.xh-big.is-dan { border-color: #f5a623; }
.xh-big-nums {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 5px;
}
.xh-big-nums i {
  font-style: normal; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- 已选与胆码 ---------- */
.xh-selbar { border-top: 1px dashed var(--line); padding-top: 12px; }
.xh-selbar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.xh-selinfo { font-size: 13px; font-weight: 700; color: #444; }
.xh-selbtns { display: flex; gap: 6px; }
.xh-mini {
  border: 1px solid #dfe4ec; background: #fff; color: var(--blue);
  border-radius: 7px; padding: 4px 9px;
  font-size: 11px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.xh-mini:active { background: #eef4ff; }

.xh-sellist { display: flex; flex-wrap: wrap; gap: 6px; }
.xh-selchip {
  position: relative; border: 1px solid #dfe4ec; background: #f7f9fc; color: #444;
  border-radius: 8px; padding: 5px 10px;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.xh-selchip.is-dan { background: #fff5e2; border-color: #f5a623; color: #a5670a; }
.xh-selchip em {
  font-style: normal; font-size: 10px; margin-left: 3px;
  background: #f5a623; color: #fff; border-radius: 4px; padding: 0 3px;
}
.xh-hint { font-size: 11px; color: var(--muted); margin-top: 9px; line-height: 1.7; }
.xh-hint b { color: #a5670a; }

/* ---------- 单式：一组一组手工点 ----------
 * 复式是「勾一堆自动展开」，单式是「一组一组点」，两者做不出对方的结果。
 * 当前正在组的那一组用虚线框，跟已经组好的组区分开。
 */
.xh-entry-hint {
  font-size: 11px; color: var(--muted); line-height: 1.6;
  margin: -4px 0 12px; padding-left: 62px;
}
.xh-selchip.is-cur { border-style: dashed; border-color: var(--blue); color: var(--blue-dark); }
.xh-selchip-tip {
  font-size: 11px; color: var(--muted); align-self: center; margin-left: 2px;
}

/* 已选好的组：横着排、排满换行。一组一行竖着堆下去太占地方，
   打十几组的时候整个页面全被它占满。 */
.xh-groups {
  margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 12px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.xh-group {
  display: inline-flex; align-items: center;
  border: 1px solid #dfe4ec; background: #f7f9fc; border-radius: 10px;
  padding: 5px 6px 5px 9px;
}
/* 序号是次要信息，但不能贴着号码——用一条淡竖线隔开，比单纯拉间距更利落 */
.xh-group-i {
  flex: none; font-size: 11px; font-weight: 700; color: #a8b0bd;
  font-variant-numeric: tabular-nums;
  padding-right: 8px; margin-right: 9px;
  border-right: 1px solid #e2e7ef;
  align-self: stretch; display: flex; align-items: center;
}
.xh-group-body i {
  font-style: normal; font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.xh-group-body u { text-decoration: none; color: #c8cfd9; }
/* 删除键：和号码之间留足 10px，否则看着像压在最后一个号码上 */
.xh-group-del {
  flex: none; width: 24px; height: 24px; margin-left: 10px;
  border-radius: 7px; border: none; background: #eaeef4; color: #8a93a2;
  font-size: 12px; font-family: inherit; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.xh-group-del:active { background: #fdd9d6; color: var(--red); }

/* 单式一行里的组间分隔 */
.xh-line .gsep { color: #9aa6b6; font-weight: 700; }

@media (max-width: 400px) {
  .xh-entry-hint { padding-left: 2px; }
}

/* ---------- ① 玩法 ----------
 * 玩法决定了「选号码还是选生肖」「每组几个」「一行怎么写」，所以排在第一步。
 * 三组 chip 摊开要占 180px 上下，会把号码盘顶出首屏 —— 选中后收起成一行。
 */
.xh-plays { display: flex; flex-direction: column; gap: 9px; }
.xh-play-row { display: flex; align-items: flex-start; gap: 8px; }
.xh-play-k {
  flex: none; width: 30px; padding-top: 6px;
  font-size: 11px; color: var(--muted); line-height: 1.4;
}
.xh-play-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.xh-play {
  border: 1px solid #dfe4ec; background: #f7f9fc; color: #444;
  border-radius: 8px; padding: 6px 9px;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.xh-play.on {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 2px 6px rgba(47, 139, 255, .3);
}

/* 收起态：当前玩法这一行本身就是「点我换玩法」的入口 */
.xh-play-cur {
  width: 100%; display: flex; align-items: baseline; gap: 9px;
  border: 1px solid var(--blue); background: #eef4ff; border-radius: 10px;
  padding: 11px 12px; font-family: inherit; cursor: pointer; text-align: left;
}
.xh-play-cur b { font-size: 17px; font-weight: 800; color: var(--blue-dark); flex: none; }
.xh-play-cur small { font-size: 12px; color: #6b7480; flex: 1; min-width: 0; }
/* 「换玩法 ▾」必须是明说的：玩法区默认收起，只留一个箭头没人知道能点 */
.xh-play-cur em {
  font-style: normal; color: var(--blue); font-size: 11px; font-weight: 700;
  flex: none; white-space: nowrap;
}

/* ---------- ③ 一行结果 ----------
 * 这一行是整个工具的产出，字号和留白都按「一眼看清、方便截图发出去」来定。
 */
/* 结果区显示的**就是**要复制的那一行，一字不差。
   所以这里只给颜色，不加任何额外字符：加粗/上色纯属视觉强调。 */
.xh-line {
  background: linear-gradient(160deg, #f7faff, #eef4ff);
  border: 1px solid #dce7fa; border-radius: 12px;
  padding: 14px; margin-bottom: 14px;
  font-size: 15px; line-height: 1.95; color: #555;
  /* 号码串是逗号连的、没有空格，靠 renderLine 在逗号后插 <wbr> 给断点 */
  overflow-wrap: break-word;
}
.xh-line i { font-style: normal; }
.xh-line .head { font-size: 16px; font-weight: 800; color: var(--blue-dark); }
.xh-line .n {
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* ⚠ 号码的红/蓝/绿是波色，是数据的一部分 —— 胆码也**不能**改字色，
   否则红波的 12 会被读成别的波。胆与拖靠「胆」「拖」两个字和先后位置区分，
   而它们本身就在复制文本里，所以只能是普通文字，不能做成彩色标签。 */
.xh-line .tag { font-weight: 800; }
.xh-line .tag-dan { color: #c07a10; }
.xh-line .tag-tuo { color: #8a93a2; }
.xh-line .sep { color: #b9c4d4; }
/* 「每组10元」「共10组」「合计100元」是完整词组，断在中间读不通 */
.xh-line .nw { white-space: nowrap; }
.xh-line .money {
  font-size: 17px; font-weight: 800; color: var(--blue-dark);
  font-variant-numeric: tabular-nums;
}
.xh-line-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 10px 4px; }

/* ---------- 金额与合计 ---------- */
.xh-money { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.xh-money label { flex: none; font-size: 12px; color: var(--muted); }
.xh-money input {
  width: 100px; border: 1px solid #dfe4ec; border-radius: 9px;
  padding: 8px 10px; font-size: 15px; font-family: inherit; color: #333;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.xh-money input:focus { outline: none; border-color: var(--blue); }
.xh-money span { font-size: 13px; color: #666; }

/* ---------- 结果工具条 ---------- */
.xh-tools { margin-bottom: 12px; }
.xh-tool-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.xh-tool-k { flex: none; width: 52px; font-size: 12px; color: var(--muted); }
.xh-tool-row .seg { flex: 1; }
.xh-tool-row .seg-btn { font-variant-numeric: tabular-nums; }
.xh-switch { font-size: 12px; color: #555; display: flex; align-items: center; gap: 5px; }
.xh-copy {
  width: 100%; border: none; border-radius: 10px; padding: 11px;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.xh-copy:active { background: var(--blue-dark); }

/* ---------- 结果列表 ---------- */
.xh-list { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.xh-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 2px; border-bottom: 1px dashed var(--line);
}
.xh-row:last-child { border-bottom: none; }
.xh-row-i {
  flex: none; width: 40px; text-align: right; padding-top: 2px;
  font-size: 11px; color: #b9c0cc; font-variant-numeric: tabular-nums;
}
.xh-row-body { flex: 1; min-width: 0; }
.xh-row-main i {
  font-style: normal; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* 分隔符用 <u> 只为让它跟号码分开着色；空格分隔时不能被 HTML 折叠掉 */
.xh-row-main u { text-decoration: none; color: #c8cfd9; white-space: pre; }
.xh-row-nums {
  margin-top: 3px; display: flex; flex-wrap: wrap; gap: 1px 7px;
}
.xh-row-nums i {
  font-style: normal; font-size: 11px; font-weight: 700; opacity: .85;
  font-variant-numeric: tabular-nums;
}
.xh-empty {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 26px 10px; line-height: 1.9;
}
.xh-more {
  width: 100%; margin-top: 10px;
  border: 1px solid #dfe4ec; background: #f7f9fc; color: var(--blue);
  border-radius: 10px; padding: 10px;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.xh-more:active { background: #eef4ff; }
.xh-more:disabled { color: var(--muted); background: #f4f6fa; cursor: default; }
#xh-list-toggle { margin-top: 0; }
.xh-list { margin-top: 10px; }

@media (max-width: 374px) {
  .xh-numgrid { gap: 4px; }
  .xh-play-cur { padding: 9px 10px; }
}
/* 矮屏（640~667 高的机器）把号码格压扁一档，7 行能省下 25~30px，正好让
   整个号码盘落进首屏。注意**不能靠调 gap 省高度**：格子是 1:1 的，
   gap 一小格子就变宽、跟着也变高，两边正好抵消。 */
@media (max-height: 700px) {
  .xh-numgrid .hm-cell { aspect-ratio: 1 / 0.9; padding: 1px 0; }
}
@media (max-width: 359px) {
  .xh-bigrid { grid-template-columns: repeat(3, 1fr); }
  .xh-chip { padding: 5px 7px; }
}
@media (min-width: 600px) {
  .xh-bigrid { grid-template-columns: repeat(6, 1fr); }
  .xh-chip-k { width: 34px; font-size: 12px; }
  .xh-row-main i { font-size: 16px; }
  /* 容器宽 720px 时 1:1 的格子会涨到 90px、七行就是 630px，桌面端一屏照样装不下。
     给号码盘单独封顶并居中，格子稳定在 60px 上下。 */
  .xh-numgrid { max-width: 460px; margin-left: auto; margin-right: auto; gap: 7px; }
  .xh-numgrid .hm-cell i { font-size: 21px; }
  .xh-numgrid .hm-cell .hm-sx { font-size: 12px; }
}