/* ==========================================================================
   brand.css — 品牌视觉层（DESIGN.md / Action Blue 系统）
   只改视觉，不碰结构与逻辑：原站全部业务在 upload/script/11/*.js 里，
   本文件在其之上接管颜色、字体、圆角、间距、交互态。
   回滚方式：移除各页 <link> 即可回到原站外观。
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  /* color */
  --blue: #0066cc;
  --blue-focus: #0071e3;
  --blue-dark: #2997ff;
  --ink: #1d1d1f;
  --ink-80: #333333;
  --ink-48: #7a7a7a;
  --paper: #ffffff;
  --paper-pearl: #fafafc;
  --parchment: #f5f5f7;
  --tile-1: #272729;
  --tile-2: #2a2a2c;
  --tile-3: #252527;
  --black: #000000;
  --divider: #f0f0f0;
  --hairline: #e0e0e0;
  --on-dark: #ffffff;
  --on-dark-muted: #cccccc;
  --steel: #3a3a3c;

  /* radius */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* spacing */
  --sp-2xs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 17px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-section: 80px;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Helvetica Neue", Helvetica, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* elevation — 仅产品图可用 */
  --shadow-product: 3px 5px 30px rgba(0, 0, 0, 0.22);

  /* layout */
  --shell: 980px;
  --navh: 44px;
  --subnavh: 52px;
  --footh: 64px;
}

/* ---------- 2. base ---------- */
html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 原站 body 带 430KB 重复背景图，与规范「无装饰背景」冲突 */
body {
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  min-height: 100vh;
}

a {
  color: var(--blue) !important;
  text-decoration: none;
}

/* 规范：不使用文字阴影 */
* {
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.cgi-body {
  max-width: var(--shell) !important;
  margin: 0 auto;
  background: transparent !important;
  overflow: visible !important;
}

/* ---------- 3. 品牌外壳：global-nav ---------- */
/* 原站页头是一格绿底 double 边框 table，视觉接管为 44px 纯黑导航条 */
.cgi-body > table[bgcolor] {
  width: 100% !important;
  background: var(--black) !important;
  border: 0 !important;
  border-collapse: collapse;
}

.cgi-body > table[bgcolor] td {
  background: var(--black) !important;
  border: 0 !important;
  height: var(--navh) !important;
  padding: 0 var(--sp-md) !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.cgi-body > table[bgcolor] td b {
  font-weight: 400 !important;
}

.cgi-body > table[bgcolor] font {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: var(--on-dark) !important;
}

/* sub-nav：羊皮纸磨砂 52px，5 栏等分 */
.btn_list10 {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 245, 247, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.btn_list10 ul {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  width: 100% !important;
  height: var(--subnavh) !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
}

.btn_list10 ul li,
.btn_list10 .liStyle {
  width: auto !important;
  float: none !important;
  display: flex !important;
  height: var(--subnavh) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.btn_list10 ul li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color 0.2s ease;
}

.btn_list10 ul li a p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* 原站用 inline background-color:#fff500 标记当前栏目 */
.btn_list10 ul li[style*="fff500"] a,
.btn_list10 ul li[style*="FFF500"] a {
  color: var(--blue) !important;
}

.btn_list10 ul li[style*="#fff500"] {
  background: transparent !important;
}

/* ---------- 4. 品牌外壳：footer（brand.js 注入） ---------- */
.brand-footer {
  background: var(--parchment);
  color: var(--ink-48);
  padding: var(--sp-lg) var(--sp-md) calc(var(--sp-xl) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 2.41;
  letter-spacing: -0.01em;
}

.brand-footer .foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-lg);
  margin-bottom: var(--sp-sm);
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
}

.brand-footer .foot-links a {
  color: var(--ink-80) !important;
  font-size: 12px;
  line-height: 2.41;
}

.brand-footer .foot-note {
  max-width: var(--shell);
  margin: 0 auto;
  color: var(--ink-48);
}

/* ---------- 5. 组件：pill 按钮 / text-link ---------- */
.brand-pill,
.jxBtn,
.sub.yes,
.btn div {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  background: var(--blue) !important;
  color: var(--on-dark) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.374px;
  text-align: center;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.2s ease;
}

.jxBtn,
.sub.yes {
  width: 100% !important;
  height: 48px !important;
  margin: var(--sp-lg) 0 !important;
  font-size: 17px !important;
}

/* ---------- 6. 覆盖：原站通用件 ---------- */
/* 表格骨架：绿底格 + 1px 灰线 → 发丝线分隔 */
.tmTab,
.tmTab[style] {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.tmTab tr {
  border: 0 !important;
  border-bottom: 1px solid var(--divider) !important;
}

.tmTab tr:last-child {
  border-bottom: 0 !important;
}

.tmTab td,
.tmTab tr td[style] {
  background: transparent !important;
  border: 0 !important;
  padding: 14px 0 !important;
  vertical-align: top;
}

.tmTab tr td:first-child {
  width: 88px;
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-48) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.224px;
}

/* 属性 chip：灰底方角 → pill，选中 Action Blue */
.tdBox {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.tdBox div {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 var(--sp-md) !important;
  background: var(--parchment) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-pill) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.374px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
    transform 0.12s ease;
}

.tdBox div.act {
  background: var(--blue) !important;
  color: var(--on-dark) !important;
}

/* iconfont 字体缺失，勾用 CSS 画 */
.tdBox i,
.tdBox i.iconfont,
.tdBox i.icon-gou {
  display: none !important;
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: 10px;
  height: 6px;
  margin: 0;
  padding: 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: none !important;
  font-size: 0 !important;
  line-height: 0;
  transform: rotate(-45deg);
}

.tdBox div.act i,
.tdBox div.act i.iconfont,
.tdBox div.act i.icon-gou,
.act i {
  display: block !important;
}

/* ---------- 7. 覆盖：固定底栏（320294） ---------- */
.tmInfo {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-around;
  max-width: var(--shell) !important;
  margin: 0 auto !important;
  height: var(--footh) !important;
  line-height: var(--footh) !important;
  background: rgba(245, 245, 247, 0.8) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--hairline) !important;
}

.tmInfo div {
  flex: 1 1 0;
  width: auto !important;
  text-align: center;
  color: var(--blue) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: var(--footh) !important;
  letter-spacing: -0.224px;
  cursor: pointer;
  border: 0 !important;
}

.tmInfo div:nth-child(1),
.tmInfo div:nth-child(2) {
  border-right: 1px solid var(--divider) !important;
}

.tmInfo div:active {
  background: rgba(0, 102, 204, 0.08);
}

.tmInfo div i,
.tmInfo div i[style] {
  color: var(--blue) !important;
  font-style: normal;
  font-family: var(--font-num) !important;
  font-weight: 600 !important;
}

.ret {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: var(--footh) !important;
  width: 100% !important;
  max-width: var(--shell) !important;
  margin: 0 auto !important;
  z-index: 65;
}

.ret .yixuan,
.ret .jiaoji {
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-bottom: 0 !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  padding: var(--sp-md) !important;
  padding-bottom: var(--sp-md) !important;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ret .yixuan p {
  margin: 0 0 var(--sp-sm) !important;
  color: var(--ink-48) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.ret .retList {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}

/* 号码球：保留原站波色图，尺寸放大到触控友好 */
.ret .retList div {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  line-height: 34px !important;
  border-radius: var(--r-pill);
  background-size: cover;
  background-position: center;
  font-family: var(--font-num) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center;
  color: var(--ink);
}

/* 复制成功 toast：黑遮罩条 → 磨砂胶囊 */
.cgi-body div[style*="position: fixed"],
.cgi-body div[style*="position:fixed"] {
  position: fixed !important;
  top: auto !important;
  bottom: calc(var(--footh) + 28px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: auto !important;
  max-width: 80vw !important;
  background: rgba(29, 29, 31, 0.86) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--on-dark) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 12px 22px !important;
  border-radius: var(--r-pill) !important;
  text-align: center !important;
  z-index: 90;
}

/* 底部留白，避免固定栏压住最后一行 */
.tmTab + div[style*="10rem"],
div[style*="height: 10rem"],
div[style*="height:10rem"] {
  height: calc(var(--footh) + 120px) !important;
}

/* ---------- 8. 320292 复试速查 ---------- */
#app {
  background: var(--paper) !important;
}

#app[style] {
  padding: 0 !important;
}

#vue[style*="padding"] {
  padding: 0 !important;
}

/* 号码格：49 格 7 列触控栅格 */
.retList {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px;
  justify-content: stretch !important;
  margin-bottom: var(--sp-sm);
}

.retList > div {
  margin: 0 !important;
}

.retList div span {
  display: grid !important;
  place-items: center;
  width: 100% !important;
  height: 44px !important;
  line-height: 1 !important;
  margin: 0 !important;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
  font-family: var(--font-num) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink);
  user-select: none;
  transition: transform 0.12s ease;
}

.retList div span:active {
  transform: scale(0.95);
}

/* 灰色号码（原站引用了缺失的 g-gray.png） */
.c1 {
  background: var(--parchment) !important;
}

.question,
#vue > p {
  color: var(--ink-48);
  font-size: 12px;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-sm) !important;
}

.num {
  height: auto !important;
  min-height: 48px;
  margin: var(--sp-sm) 0 !important;
  padding: var(--sp-sm) var(--sp-md) !important;
  background: var(--paper-pearl);
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md);
  font-family: var(--font-num) !important;
  font-size: 14px !important;
  line-height: 1.47;
  color: var(--ink);
  overflow: visible !important;
}

.btn {
  display: flex !important;
  justify-content: flex-start !important;
  gap: var(--sp-sm);
  margin: var(--sp-md) 0 !important;
}

.btn div {
  margin: 0 !important;
  flex: 0 0 auto;
}

.btn div.ghost {
  background: transparent !important;
  color: var(--blue) !important;
  padding-left: var(--sp-md) !important;
  padding-right: var(--sp-md) !important;
}

/* 组数卡：橙字白块 → utility card */
.blank {
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--sp-lg) !important;
  margin: var(--sp-sm) 0 !important;
  line-height: 1.47 !important;
}

.blank p,
.blank p[style] {
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.19 !important;
  letter-spacing: -0.374px;
  margin: 0 0 var(--sp-sm) !important;
}

.blank ul {
  margin: 0 0 var(--sp-md) !important;
  list-style: none;
}

.blank ul:last-child {
  margin-bottom: 0 !important;
}

.blank li,
.blank li[style] {
  border-bottom: 1px solid var(--divider) !important;
  padding: 10px 0 !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  line-height: 1.47 !important;
}

.blank li:last-child {
  border-bottom: 0 !important;
}

.blank li span,
.blank li span[style] {
  font-family: var(--font-num) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--blue) !important;
  float: none !important;
}

.blank li span[style*="rgb(255, 87, 34)"],
.blank li span[style*="rgb(255,87,34)"] {
  color: var(--blue) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  float: right !important;
  cursor: pointer;
}

/* 展开箭头：橙色三角 → 灰发丝三角 */
.ico,
span.ico {
  width: 0;
  height: 0;
  border: 5px solid transparent !important;
  border-top-color: var(--ink-48) !important;
  border-bottom-width: 0 !important;
  border-left-width: 1px !important;
  border-right-width: 1px !important;
  margin-top: 6px !important;
  margin-right: 0 !important;
}

.ico.down {
  border-top-color: transparent !important;
  border-bottom: 5px solid var(--ink-48) !important;
  border-top-width: 0 !important;
  margin-top: 0 !important;
}

.zj {
  display: flex !important;
  justify-content: space-between !important;
  text-align: center;
  padding: var(--sp-sm) 0 !important;
}

.zj li {
  flex: 1 1 0;
  padding: 0 var(--sp-2xs) !important;
  border: 0 !important;
  font-size: 12px !important;
  color: var(--ink-48) !important;
  line-height: 1.8 !important;
}

.zj li div,
.zj li div[style] {
  font-family: var(--font-num) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.zj li div[style*="red"],
.zj li div[style*="rgb(255, 0, 0)"] {
  color: var(--blue) !important;
}

/* ---------- 9. 320291 机选号码 ---------- */
.list {
  display: block !important;
  margin-top: 0 !important;
}

.jxTab {
  width: 100% !important;
  margin: var(--sp-md) 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
}

.jxTab thead {
  background: transparent !important;
  color: var(--ink-48) !important;
}

.jxTab th,
.jxTab tbody th {
  border: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  background: transparent !important;
  padding: var(--sp-sm) 0 !important;
  color: var(--ink-48) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em;
}

.numTr th {
  border-bottom: 0 !important;
  padding: var(--sp-xs) 0 !important;
}

.numTr div {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  margin: 0 auto !important;
  border-radius: var(--r-pill);
  background-size: cover;
  background-position: center;
  font-family: var(--font-num) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.numTr div.pending {
  background: var(--parchment) !important;
  color: var(--ink-48) !important;
}

/* ---------- 10. 320293 波肖转盘 ---------- */
.tools-zhuanpan,
#app.tools-zhuanpan {
  background: var(--tile-1) !important;
  background-image: none !important;
  min-height: 0 !important;
  color: var(--on-dark) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
}

.tools-zhuanpan #vue,
.tools-zhuanpan #vue[style] {
  padding: var(--sp-lg) var(--sp-md) var(--sp-xl) !important;
}

.tools-zhuanpan .info,
.zhuanpan .info {
  background: transparent !important;
  color: var(--on-dark-muted) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.47 !important;
  letter-spacing: -0.374px;
  padding: 0 !important;
}

.tools-zhuanpan .info p {
  margin: 0 0 var(--sp-sm) !important;
  color: var(--on-dark-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.tools-zhuanpan select,
.tools-zhuanpan input[type="range"] {
  font-family: var(--font) !important;
  font-size: 17px !important;
  min-height: 44px;
  padding: 8px var(--sp-md) !important;
  background: var(--tile-2) !important;
  color: var(--on-dark) !important;
  border: 1px solid var(--steel) !important;
  border-radius: var(--r-md) !important;
  -webkit-appearance: none;
  appearance: none;
}

.tools-zhuanpan input[type="range"] {
  width: 100% !important;
  max-width: 260px;
  padding: 0 !important;
  accent-color: var(--blue);
  background: transparent !important;
  border: 0 !important;
}

.wheel-wrapper {
  width: min(78vw, 300px) !important;
  height: min(78vw, 300px) !important;
  transform: translate(-50%, var(--sp-xl)) !important;
  margin-bottom: calc(var(--sp-xl) + 40px);
}

.wheel-bg {
  background: var(--paper-pearl) !important;
  background-image: none !important;
  box-shadow: var(--shadow-product) !important;
  border: 0 !important;
}

.wheel-pointer {
  background: var(--blue) !important;
  color: var(--on-dark) !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 60px !important;
  width: 60px !important;
  height: 60px !important;
}

.wheel-pointer::after {
  border-color: transparent transparent var(--blue) !important;
}

.prize-item-wrapper {
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.prize-name {
  padding: 22px 0 !important;
}

/* ---------- 11. 320290 幸运生肖 ---------- */
#app {
  background: var(--parchment) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  line-height: 1.47 !important;
}

#vue[style*="padding: 1rem"] {
  padding: var(--sp-lg) var(--sp-md) var(--sp-xxl) !important;
}

.info {
  background: var(--paper) !important;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-lg) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.47 !important;
  letter-spacing: -0.374px;
}

.info p {
  margin: 0 0 var(--sp-sm) !important;
  color: var(--ink-80) !important;
  font-size: 14px !important;
  line-height: 1.47 !important;
}

.info p:first-child {
  color: var(--ink) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.19 !important;
  letter-spacing: 0.231px;
}

input[type="date"],
input[type="text"],
input:not([type]) {
  min-height: 44px;
  padding: 10px var(--sp-md) !important;
  background: var(--paper-pearl) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
}

.sub {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 48px;
  margin: var(--sp-md) 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  background: var(--blue) !important;
  color: var(--on-dark) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  box-shadow: none !important;
}

.sub.yes {
  margin-top: var(--sp-lg) !important;
}

.sub.no {
  background: transparent !important;
  color: var(--blue) !important;
  border: 1px solid var(--hairline) !important;
}

/* 生肖牌阵：原站引用缺失的 sx.jpg 底图，改纯色栅格 */
.sxarr {
  background: none !important;
  background-image: none !important;
  height: auto !important;
  padding: 0 !important;
  margin-top: var(--sp-lg);
  overflow: visible !important;
}

.sxarr ul {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--sp-sm);
}

.sxarr li {
  width: auto !important;
  margin: 0 !important;
  display: block !important;
}

.sxarr li span,
.sxarr li span.show {
  display: grid !important;
  place-items: center;
  width: 100% !important;
  height: 72px !important;
  line-height: 1 !important;
  margin: 0 !important;
  background: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--hairline) !important;
  border-style: solid !important;
  border-radius: var(--r-lg) !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  user-select: none;
  transition: transform 0.35s ease, background-color 0.3s ease,
    color 0.3s ease;
}

.sxarr li .hide,
.sxarr li span.hide {
  background: var(--tile-1) !important;
  background-image: none !important;
  border-color: var(--tile-1) !important;
  color: transparent !important;
  transform: rotateY(180deg);
}

.xingyun {
  text-align: center;
  margin-top: var(--sp-lg);
}

.xingyun span,
.xingyun span[style] {
  font-family: var(--font-display) !important;
  font-size: 56px !important;
  font-weight: 600 !important;
  line-height: 1.07 !important;
  letter-spacing: -0.28px;
  color: var(--blue) !important;
  text-shadow: none !important;
}

/* ---------- 12. 交互态 ---------- */
a:active,
button:active,
.btn div:active,
.jxBtn:active,
.sub:active,
.tdBox div:active,
.tmInfo div:active,
.retList div span:active {
  transform: scale(0.95);
}

:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---------- 13. 响应式 ---------- */
@media (max-width: 480px) {
  html,
  body {
    font-size: 17px;
  }

  .tmTab tr td:first-child {
    width: 72px;
    font-size: 12px !important;
  }

  .tdBox div {
    min-height: 40px;
    padding: 0 var(--sp-sm) !important;
    font-size: 14px !important;
  }

  .retList {
    gap: 4px;
  }

  .retList div span {
    height: 40px !important;
    font-size: 14px !important;
  }

  .sxarr ul {
    gap: var(--sp-xs);
  }

  .sxarr li span,
  .sxarr li span.show {
    height: 64px !important;
    font-size: 21px !important;
  }

  .xingyun span,
  .xingyun span[style] {
    font-size: 40px !important;
  }

  .blank {
    padding: var(--sp-md) !important;
  }
}

@media (min-width: 834px) {
  .tmTab tr td:first-child {
    width: 112px;
  }

  .tdBox {
    gap: var(--sp-sm);
  }

  .blank {
    padding: var(--sp-xl) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===== audit pass 1: contrast + touch target corrections ===== */
/* 12px 辅助文字不低于 4.5:1，改用 ink-80（#333）而不是 48% 灰 */
.tmTab tr td:first-child { color: var(--ink-80) !important; font-size: 14px !important; }
.jxTab th { color: var(--ink-80) !important; }
.brand-footer, .brand-footer .foot-note { color: var(--ink-80) !important; }
.cgi-body > table, .cgi-body > table b { color: #fff !important; }

/* 触控目标一律 >= 44px */
.tdBox > div { min-height: 44px !important; font-size: 17px !important; }
.retList > div span { height: 44px !important; min-height: 44px !important; }
.btn_list10 a { display: flex !important; width: 100% !important; min-height: 44px !important;
  align-items: center !important; justify-content: center !important; }

/* 转盘页深色底上的说明文字 */
.tools-zhuanpan .info, .tools-zhuanpan .info p, .tools-zhuanpan .info span { color: #f5f5f7 !important; }

/* ===== audit pass 2: footer link touch targets ===== */
.brand-footer .foot-links { gap: 0 8px; }
.brand-footer .foot-links a { display: inline-flex !important; align-items: center !important;
  justify-content: center !important; min-height: 44px !important; min-width: 44px !important;
  padding: 0 6px !important; }