/* =========================================================
   运程解析 H5 · 页面增强 & 交互组件
   基础/原站样式见 base.css、vendor.css
   ========================================================= */

:root {
  --brand-deep: #82401c;
  --brand-red: #b64323;
  --brand-red-dark: #8d1f12;
  --brand-red-light: #e2573b;
  --gold: #ffedb0;
  --gold-deep: #f6c96b;
  --ink: #451608;
  --cream: #fff8e9;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  font-size: 10vw !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
@media (min-width: 480px) {
  html { font-size: 48px !important; }
}
html, body {
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  background: #2b1009;
}
body {
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    "Segoe UI", Arial, Roboto, "PingFang SC", miui, "Hiragino Sans GB",
    "Microsoft Yahei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100vh; }
#sxystfa {
  width: 10rem;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,.25);
}
@media (max-width: 479px) {
  #sxystfa { box-shadow: none; }
}
[hidden] { display: none !important; }
img { -webkit-user-drag: none; user-select: none; }
button, input { font-family: inherit; }
a { -webkit-tap-highlight-color: transparent; }
.clickno, .cursor { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* 顶部投诉按钮在部分窄屏下会挤压，保持原站样式即可 */
.complain-top { background: #fff; }
.complain-content { font-size: .36rem; }
.complain-btn { white-space: nowrap; font-size: .36rem; }

/* 首页固定的“立即解析” */
.footer_fixed {
  display: flex;
  justify-content: center;
  padding: .06667rem 0 calc(.06667rem + var(--safe-bottom));
  pointer-events: none;
}
.footer_fixed .cesuanBtn {
  margin: 0;
  pointer-events: auto;
}
.footer_fixed .cesuanBtn p {
  animation: btnScale .9s ease-in-out infinite alternate;
}
.footer_fixed .cesuanBtn p::selection { background: transparent; }

/* 首页生肖卡片轻触效果 */
.shengxiao { cursor: pointer; }
.shengxiao img { transition: transform .18s ease; }
.shengxiao img:active { transform: scale(.985); }
.index .agree-top { letter-spacing: .01em; }
.index .server-history .server { color: #fff; }

/* =========================================================
   表单
   ========================================================= */
#home .home-cont .form .form-item .inp::placeholder { color: #b58f7c; }
#home .home-cont .form .form-item .radio .radio_list .iconfont { line-height: 1; }
#home .home-cont .form .form-item .radio .radio_list span { font-size: .45333rem; }
#home .home-cont .form .form-item .birInput { flex: 1; }
#home .home-cont .form .form-item .birInput[data-empty="true"] { color: #b58f7c; }
#home .home-cont .form .form-item .birInputText { flex: 1; color: #c72e2e; }

#home .home-cont .server-history .server .agreeRadio.loaded { color: #be0e0e; }
#home .home-cont .server-history .agreeRadio .iconfont { line-height: 1; }

#home .home-cont .form .form-item.has-focus {
  box-shadow: 0 0 0 .0533rem rgba(199,46,46,.20);
}

.home-under-text { padding: 0 .34rem; }

/* =========================================================
   日期选择器（复刻 4 列滚轮样式）
   ========================================================= */
.xy-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
  background: rgba(0,0,0,.5);
  animation: xyFadeIn .2s ease both;
  -webkit-tap-highlight-color: transparent;
}
.xy-picker {
  width: 8.95rem;
  max-width: 100%;
  max-height: 88vh;
  background: #fff;
  border-radius: .17rem;
  overflow: hidden;
  box-shadow: 0 .2rem .8rem rgba(0,0,0,.2);
  transform: translateZ(0);
  animation: xyPopIn .22s ease both;
}
.xy-picker__head {
  padding: .44rem .4rem .22rem;
  text-align: center;
  font-size: .48rem;
  font-weight: 700;
  color: #8f0d09;
  letter-spacing: .02em;
}
.xy-picker__tabs {
  display: flex;
  margin: 0 .44rem .22rem;
  height: 1.19rem;
  border: .0133rem solid #ad231c;
  border-radius: .03rem;
  overflow: hidden;
}
.xy-picker__tab {
  flex: 1;
  border: 0;
  background: #fff;
  color: #9a1a13;
  font-size: .48rem;
  line-height: 1.1;
  cursor: pointer;
}
.xy-picker__tab.is-active {
  background: #a51c14;
  color: #fff;
}
.xy-picker__cols {
  position: relative;
  display: flex;
  height: 3.46rem;
  margin-top: .1rem;
  padding: 0 .3rem;
}
.xy-picker__cols::before,
.xy-picker__cols::after {
  content: "";
  position: absolute;
  left: .3rem;
  right: .3rem;
  height: 1px;
  background: #f0e7df;
  pointer-events: none;
  z-index: 3;
}
.xy-picker__cols::before { top: 33.333%; }
.xy-picker__cols::after { top: 66.666%; }
.xy-picker__col {
  flex: 1;
  min-width: 0;
  height: 3.46rem;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-y;
  overscroll-behavior: contain;
  position: relative;
}
.xy-picker__col::-webkit-scrollbar { display: none; }
.xy-picker__spacer { height: 1.155rem; }
.xy-picker__item {
  height: 1.155rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .455rem;
  color: #b9b5b2;
  scroll-snap-align: center;
  white-space: nowrap;
  transition: color .15s, font-size .15s;
}
.xy-picker__col[data-col="hour"] .xy-picker__item { font-size: .39rem; }
.xy-picker__col[data-col="hour"] .xy-picker__item.is-selected { font-size: .43rem; }
.xy-picker__item.is-selected {
  color: #8f1914;
  font-weight: 700;
}
.xy-picker__actions {
  display: flex;
  margin-top: .18rem;
  border-top: .0133rem solid #f0ebe7;
}
.xy-picker__btn {
  flex: 1;
  height: 1.56rem;
  border: 0;
  font-size: .48rem;
  cursor: pointer;
}
.xy-picker__btn--cancel { background: #fff; color: #333; }
.xy-picker__btn--ok { background: #a51c14; color: #fff; }

/* =========================================================
   测试/揭秘页
   ========================================================= */
#test .animation-cont { padding-bottom: .8rem; }
#test .animation-cont .info-cont,
#test .animation-cont .main-progress {
  position: relative;
}
#test .animation-cont .info-cont .bg-center {
  min-height: 2.25rem;
  position: relative;
  overflow: hidden;
}
#test .animation-cont .main-progress .bg-center {
  min-height: 4.1rem;
  overflow: hidden;
}
.test-basic-info {
  color: #451608;
  font-size: .42rem;
  line-height: .74rem;
  padding: .16rem .1rem;
}
.test-basic-info p {
  opacity: 0;
  transform: translateY(.12rem);
  animation: testInfoIn .35s ease forwards;
}
.test-basic-info p:nth-child(2) { animation-delay: .16s; }
.test-basic-info p:nth-child(3) { animation-delay: .32s; }
.bazi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .18rem;
  padding: .22rem .12rem .1rem;
  min-height: 2.1rem;
  color: #8f1914;
  position: relative;
  z-index: 2;
}
.bazi-cell { text-align: center; }
.bazi-cell .bazi-name {
  font-size: .46rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.bazi-cell .bazi-star {
  display: block;
  margin-top: .38rem;
  font-size: .42rem;
  line-height: .58rem;
  color: #b6312a;
}
.bazi-cell:nth-child(2) .bazi-star { animation-delay: .08s; }
.bazi-cell:nth-child(3) .bazi-star { animation-delay: .16s; }
.bazi-cell:nth-child(4) .bazi-star { animation-delay: .24s; }

.test-progress-lines {
  padding: .1rem .1rem .3rem;
  color: #451608;
}
.test-progress-line { margin-bottom: .36rem; }
.test-progress-line:last-child { margin-bottom: 0; }
.test-progress-line .line-title { font-size: .4rem; line-height: .6rem; }
.test-progress-line .line-track {
  margin-top: .16rem;
  height: .34rem;
  border-radius: 1rem;
  background: #e3e1df;
  padding: .05rem;
  overflow: hidden;
}
.test-progress-line .line-fill {
  height: 100%;
  width: 0;
  border-radius: 1rem;
  background: linear-gradient(90deg, #c12e2b, #dd5045);
  transition: width 1s cubic-bezier(.25,.75,.4,1);
}
.test-progress-line.is-full .line-fill { width: 100%; }
.test-progress-line.is-part .line-fill { width: 48%; }
.test-progress-line.is-empty .line-fill { width: 0; }

#test .main-progress { overflow: visible; }
.pro-box { position: relative; z-index: 4; }
.pro-menu { position: relative; z-index: 4; }
#test .pan-round {
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
  z-index: 6;
  pointer-events: none;
}
#test .pan-round.is-visible { opacity: 1 !important; visibility: visible; }
#test .pan-round .tiangan-cont { animation: wheelOuterSpin 6s linear infinite !important; }
#test .pan-round .dizhi-cont { animation: wheelInnerSpin 4.5s linear infinite !important; }
#test .pan-round .year-cont { animation: wheelLabelSpin 9s linear infinite; }
@keyframes wheelOuterSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes wheelInnerSpin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes wheelLabelSpin { from { transform: rotate(-270deg); } to { transform: rotate(90deg); } }
@keyframes testInfoIn {
  from { opacity: 0; transform: translateY(.12rem); }
  to { opacity: 1; transform: translateY(0); }
}
.test-tip {
  padding: 0 .36rem .4rem;
  text-align: center;
  color: rgba(255,255,255,.58);
  font-size: .32rem;
  letter-spacing: .03em;
}

/* 进度条 */
#test .pro-list .list-pro p {
  animation: none !important;
  width: 0;
  transition: width 1.1s linear;
}
#test .pro-list .list-pro p.is-running { width: 100% !important; }
#test .pro-list .list-pro p.is-part { width: 48% !important; }

/* =========================================================
   支付确认弹层
   ========================================================= */
#payTips .payTips_cont_tl {
  font-size: .48rem;
  line-height: 1.35rem;
  color: #333;
}
#payTips .payTips_cont {
  width: 9.06667rem;
  border-radius: .08rem;
  box-shadow: 0 .12rem .8rem rgba(0,0,0,.16);
}
#payTips .payTips_cont_text {
  padding: .4rem .5rem .32rem;
}
#payTips .payTips_cont_text span {
  font-size: .4rem;
  line-height: .64rem;
  color: #333;
}
#payTips .payTipsBtn {
  padding: 0 .4rem calc(.36rem + var(--safe-bottom));
}
#payTips .payTipsBtn button {
  height: 1.1rem;
  font-size: .44rem;
  border-radius: .09rem;
}
#payTips .payTips_cont_tl .iconfont {
  color: #666;
  font-size: .44rem;
  padding: .3rem;
  top: 50%;
  transform: translateY(-50%);
}
#payTips .fadeIn { animation: xyFadeIn .18s ease both; }
#payTips .fadeOut { animation: xyFadeOut .15s ease both; }

/* =========================================================
   模拟支付安全页（原图为外部支付域名）
   ========================================================= */
.gateway-page {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  color: #333;
  font-size: .4rem;
}
.gateway-hero {
  position: relative;
  height: 43vh;
  min-height: 3.9rem;
  background: linear-gradient(145deg, #58bf60 0%, #4caf50 46%, #41a447 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}
.gateway-hero::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -.08rem;
  height: 1.2rem;
  background: #fff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.gateway-emblem {
  width: 2.84rem;
  height: 2.84rem;
  border-radius: 50%;
  background: rgba(255,255,255,.11);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
  position: relative;
  z-index: 2;
}
.gateway-emblem::before,
.gateway-emblem::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.gateway-emblem::before { inset: .2rem; }
.gateway-emblem::after { inset: .43rem; }
.gateway-shield {
  width: 1.55rem;
  height: 1.8rem;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 .06rem .08rem rgba(0,0,0,.08));
}
.gateway-hero h1 {
  font-size: .57rem;
  font-weight: 400;
  letter-spacing: .06em;
  position: relative;
  z-index: 2;
}
.gateway-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .72rem .8rem 0;
  position: relative;
  z-index: 2;
}
.gateway-rules {
  width: 100%;
  color: #999;
  font-size: .4rem;
  line-height: .78rem;
  margin-bottom: .75rem;
}
.gateway-rules p { color: #999; }
.gateway-btn {
  width: 100%;
  max-width: 7.6rem;
  height: 1.32rem;
  border-radius: 2rem;
  border: 1px solid #4caf50;
  font-size: .46rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  color: #4caf50;
  transition: opacity .15s;
}
.gateway-btn + .gateway-btn { margin-top: .36rem; }
.gateway-btn--primary { background: #4caf50; color: #fff; }
.gateway-btn:active { opacity: .8; }
.gateway-footer {
  text-align: center;
  color: #bbb;
  font-size: .35rem;
  padding: 1.2rem 0 calc(1rem + var(--safe-bottom));
}
.gateway-note {
  width: 100%;
  margin-top: .55rem;
  text-align: center;
  color: #b7b7b7;
  font-size: .31rem;
  line-height: .55rem;
}

/* =========================================================
   通用弹层 / Toast / Loading
   ========================================================= */
.xy-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0,0,0,.52);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .45rem;
  animation: xyFadeIn .18s ease both;
}
.xy-modal {
  width: 100%;
  max-width: 8.55rem;
  max-height: 78vh;
  background: #fff;
  border-radius: .22rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 .2rem 1rem rgba(0,0,0,.2);
  animation: xyPopIn .2s ease both;
}
.xy-modal__head {
  position: relative;
  height: 1.34rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .46rem;
  font-weight: 700;
  color: #6f1710;
  border-bottom: .0133rem solid #f0e7de;
  background: linear-gradient(#fffdf6, #fff8e9);
}
.xy-modal__close {
  position: absolute;
  right: .18rem;
  top: .28rem;
  width: .8rem;
  height: .8rem;
  border: 0;
  background: transparent;
  color: #999;
  font-size: .6rem;
  line-height: .8rem;
  padding: 0;
  cursor: pointer;
}
.xy-modal__body {
  padding: .42rem .46rem;
  overflow-y: auto;
  color: #4d3d34;
  font-size: .38rem;
  line-height: .68rem;
  -webkit-overflow-scrolling: touch;
}
.xy-modal__body p { margin-bottom: .25rem; }
.xy-modal__body h3 {
  color: #8d1f12;
  font-size: .42rem;
  font-weight: 700;
  margin: .3rem 0 .12rem;
}
.xy-modal__actions {
  flex: 0 0 auto;
  display: flex;
  gap: .25rem;
  padding: .28rem .4rem calc(.34rem + var(--safe-bottom));
  border-top: .0133rem solid #f4eee8;
}
.xy-modal__actions button {
  flex: 1;
  height: 1.05rem;
  border: .0133rem solid #b52a20;
  border-radius: .1rem;
  font-size: .42rem;
  background: #fff;
  color: #b52a20;
  cursor: pointer;
}
.xy-modal__actions button.primary {
  background: #b52a20;
  color: #fff;
}
.history-empty {
  padding: .8rem .2rem;
  text-align: center;
  color: #b6a89d;
}
.history-list { display: flex; flex-direction: column; gap: .24rem; }
.history-item {
  border: .0133rem solid #f1e6da;
  border-radius: .14rem;
  background: #fffdf7;
  padding: .28rem .3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2rem;
  cursor: pointer;
}
.history-item .history-main { min-width: 0; }
.history-item .history-name {
  font-size: .4rem;
  color: #5f3521;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-item .history-meta {
  margin-top: .09rem;
  font-size: .31rem;
  color: #aa9b90;
}
.history-item .history-state {
  flex: 0 0 auto;
  color: #b52a20;
  font-size: .32rem;
  border: .0133rem solid rgba(181,42,32,.3);
  border-radius: 1rem;
  padding: .08rem .18rem;
}
/* 轻提示 */
.xy-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11000;
  max-width: 7.4rem;
  padding: .25rem .4rem;
  border-radius: .12rem;
  background: rgba(15, 15, 15, .8);
  color: #fff;
  text-align: center;
  font-size: .39rem;
  line-height: .6rem;
  pointer-events: none;
  animation: xyFadeIn .16s ease both;
}
.xy-toast.is-hiding { animation: xyFadeOut .2s ease both; }

/* Loading 遮罩 */
.xy-loading-mask {
  position: fixed;
  inset: 0;
  z-index: 11010;
  background: rgba(0,0,0,.34);
  display: flex;
  align-items: center;
  justify-content: center;
}
.xy-loading-box {
  min-width: 2.7rem;
  padding: .38rem .4rem .32rem;
  border-radius: .16rem;
  background: rgba(20,14,11,.78);
  color: #fff;
  text-align: center;
  font-size: .37rem;
}
.xy-spinner {
  width: .68rem;
  height: .68rem;
  margin: 0 auto .2rem;
  border-radius: 50%;
  border: .06rem solid rgba(255,255,255,.24);
  border-top-color: #ffd998;
  animation: xySpin .7s linear infinite;
}

/* =========================================================
   结果页（本地示例报告）
   ========================================================= */
.result-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 4%, rgba(255,208,119,.25), transparent 30%),
    linear-gradient(#a9301a 0, #8d2416 18%, #721b10 100%);
  padding-bottom: 1.2rem;
}
.result-hero {
  position: relative;
  padding: 1.05rem .65rem .58rem;
  color: #ffe9ae;
  overflow: hidden;
}
.result-hero::before {
  content: "";
  position: absolute;
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 50%;
  right: -2.8rem;
  top: -3.2rem;
  background: radial-gradient(circle, rgba(255,203,97,.4), transparent 62%);
}
.result-hero .result-kicker {
  color: rgba(255,238,190,.68);
  font-size: .34rem;
  letter-spacing: .22em;
  margin-bottom: .26rem;
}
.result-hero h1 {
  position: relative;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .04em;
  text-shadow: 0 2px 8px rgba(76,15,3,.38);
}
.result-hero .result-sub {
  margin-top: .28rem;
  color: rgba(255,246,220,.7);
  font-size: .32rem;
}
.result-main {
  padding: 0 .4rem;
  position: relative;
  z-index: 2;
}
.result-card {
  background: #fffdf7;
  border-radius: .2rem;
  box-shadow: 0 .15rem .6rem rgba(70,15,7,.2);
  padding: .5rem .44rem;
  margin-bottom: .32rem;
  border: .0133rem solid rgba(255,228,173,.4);
}
.result-summary {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.result-avatar {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffe2a8, #e4a640);
  color: #7c2b0c;
  font-size: .64rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 .05rem rgba(255,255,255,.5);
}
.result-who { flex: 1; min-width: 0; color: #7b4b2a; }
.result-who h2 {
  font-size: .56rem;
  color: #6e2411;
  line-height: 1.3;
  margin-bottom: .14rem;
}
.result-who p { font-size: .34rem; line-height: .56rem; color: #a5826a; }
.result-scorebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .42rem;
  padding-top: .38rem;
  border-top: .0133rem dashed #e8d9c8;
}
.result-score-main { display: flex; align-items: baseline; gap: .12rem; }
.result-score-main strong {
  font-size: 1.3rem;
  line-height: 1;
  color: #b52a1c;
  font-weight: 700;
  letter-spacing: -.03em;
}
.result-score-main span { color: #b69a82; font-size: .34rem; }
.result-score-title { color: #5f3521; font-size: .34rem; text-align: right; line-height: .55rem; }
.result-score-title em { font-style: normal; color: #bd5b37; }
.score-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: .16rem; margin-top: .4rem; }
.score-pill {
  background: #fdf5e8;
  border-radius: .12rem;
  text-align: center;
  padding: .24rem .04rem .2rem;
  border: .0133rem solid #f4e5cf;
}
.score-pill strong { display: block; color: #b52a1c; font-size: .5rem; line-height: 1.15; }
.score-pill span { color: #a08570; font-size: .28rem; }
.result-section-title {
  display: flex;
  align-items: center;
  gap: .18rem;
  margin-bottom: .25rem;
  color: #7d2a15;
  font-size: .47rem;
  font-weight: 700;
}
.result-section-title::before {
  content: "";
  width: .1rem;
  height: .5rem;
  border-radius: .1rem;
  background: linear-gradient(#cf6242, #992a17);
  display: inline-block;
}
.result-section-title .section-badge {
  margin-left: auto;
  font-size: .27rem;
  color: #aa8c75;
  border: .0133rem solid #e5d5c2;
  border-radius: 1rem;
  padding: .05rem .18rem;
  font-weight: 400;
}
.result-text {
  color: #6d5a4c;
  font-size: .38rem;
  line-height: .72rem;
}
.result-text p + p { margin-top: .12rem; }
.result-highlight {
  margin-top: .32rem;
  padding: .28rem .3rem;
  border-radius: .12rem;
  color: #8b5d3e;
  font-size: .34rem;
  line-height: .6rem;
  background: #fbf2df;
}
.result-highlight strong { color: #a3321e; }
.result-luck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem;
}
.result-luck-item {
  border-radius: .13rem;
  background: #fdf7ed;
  padding: .24rem .26rem;
  border: .0133rem solid #f2e4d2;
}
.result-luck-item span { display: block; color: #ad9481; font-size: .3rem; margin-bottom: .09rem; }
.result-luck-item strong { color: #7b3b24; font-size: .4rem; }
.result-disclaimer {
  text-align: center;
  color: rgba(255,245,222,.65);
  font-size: .28rem;
  line-height: .5rem;
  padding: .1rem .6rem .2rem;
}
.result-actions {
  display: flex;
  gap: .24rem;
  margin: .2rem .4rem 0;
}
.result-actions button {
  flex: 1;
  height: 1.08rem;
  border-radius: 2rem;
  border: .0133rem solid rgba(255,232,185,.55);
  background: transparent;
  color: #ffe9b8;
  font-size: .4rem;
  cursor: pointer;
}
.result-actions button.primary {
  background: linear-gradient(180deg, #ffe1a2, #e2ab51);
  color: #75290e;
  border-color: transparent;
  font-weight: 700;
}

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes xyFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes xyFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes xyPopIn {
  from { opacity: 0; transform: translateY(.18rem) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes xySpin { to { transform: rotate(360deg); } }

/* =========================================================
   细节修正 & 复刻补充
   ========================================================= */
/* 固定按钮在桌面预览时也跟随 10rem 画布居中 */
.footer_fixed {
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
}

/* 支付/揭秘页画布背景 */
body[data-route="test"] #sxystfa,
body[data-route="pay"] #sxystfa,
body[data-route="result"] #sxystfa { background: #b64323; }
body[data-route="gateway"] { background: #4caf50; }
body[data-route="gateway"] #sxystfa { box-shadow: none; }

/* 生肖罗盘的分区色块：参考设计稿中橙红相间的扇面 */
#test .pan-round .tiangan { position: relative; }
#test .pan-round .tiangan::before {
  content: "";
  position: absolute;
  width: 8.18667rem;
  height: 8.18667rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.14), transparent 46%),
    repeating-conic-gradient(from -15deg, #f49542 0deg 30deg, #d05132 30deg 60deg);
  box-shadow: inset 0 0 .24rem rgba(108, 25, 6, .22);
}
#test .pan-round .tiangan-cont { position: relative; z-index: 2; }
#test .pan-round .dizhi {
  background: repeating-conic-gradient(from -15deg, #fbe0a0 0deg 30deg, #f4c369 30deg 60deg) !important;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .0133rem rgba(255,246,214,.7);
}
#test .pan-round .dizhi-cont { position: relative; z-index: 2; }

/* 八字四列依次出现 */
.bazi-cell {
  opacity: 0;
  animation: testInfoIn .35s ease forwards;
}
.bazi-cell:nth-child(1) { animation-delay: .08s; }
.bazi-cell:nth-child(2) { animation-delay: .28s; }
.bazi-cell:nth-child(3) { animation-delay: .48s; }
.bazi-cell:nth-child(4) { animation-delay: .68s; }

/* 日期滚轮的列宽：时辰文字稍长 */
.xy-picker__col[data-col="year"] { flex: 1.2; }
.xy-picker__col[data-col="month"],
.xy-picker__col[data-col="day"] { flex: 1; }
.xy-picker__col[data-col="hour"] { flex: 1.95; }
.xy-picker__col[data-col="hour"] .xy-picker__item { font-size: .33rem; }
.xy-picker__col[data-col="hour"] .xy-picker__item.is-selected { font-size: .37rem; }

/* 避免原生输入框的自动填充蓝色背景破坏视觉 */
#username:-webkit-autofill,
#username:-webkit-autofill:hover,
#username:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: #c72e2e !important;
}

/* 窄屏下底部固定按钮与安全区 */
.footer_fixed { padding-bottom: calc(.2rem + var(--safe-bottom)); }

/* 协议链接颜色 */
.index .server-history .server a,
#home .home-cont .server-history .server a {
  text-decoration: underline;
}
.index .server-history .server a { color: #e05539; }
#home .home-cont .server-history .server a { color: #be0e0e; }

/* 固定按钮在 10rem 画布中的定位（覆盖原组件 left:unset） */
#sxystfa #home .footer_fixed {
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
  max-width: 100vw;
}

/* =========================================================
   报告生成进度 / 命盘 / 流月（LLM 报告）
   ========================================================= */
.report-progress-card {
  text-align: center;
  padding: .8rem .55rem .7rem;
}
.report-progress-orbit {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0 auto .35rem;
  border-radius: 50%;
  border: .05rem solid #f2dfc3;
  border-top-color: #b52a1c;
  animation: reportOrbit 1s linear infinite;
  position: relative;
}
.report-progress-orbit i {
  position: absolute;
  inset: .32rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe6ad, #d99a3a);
  opacity: .7;
}
@keyframes reportOrbit { to { transform: rotate(360deg); } }
.report-progress-text {
  color: #7d2a15;
  font-size: .42rem;
  font-weight: 700;
  line-height: 1.5;
}
.report-progress-sub {
  color: #a08570;
  font-size: .3rem;
  line-height: .52rem;
  margin-top: .16rem;
}
.report-progress-track {
  height: .1rem;
  margin: .32rem .3rem 0;
  border-radius: 1rem;
  background: #f4e7d6;
  overflow: hidden;
}
.report-progress-track i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 1rem;
  background: linear-gradient(90deg, #e9b45a, #b52a1c);
  animation: reportTrack 1.4s ease-in-out infinite;
}
@keyframes reportTrack {
  0% { transform: translateX(-110%); }
  50% { transform: translateX(90%); }
  100% { transform: translateX(240%); }
}
.report-state-card {
  text-align: center;
  padding: .7rem .5rem;
}
.report-state-card h2 {
  color: #7d2a15;
  font-size: .48rem;
  margin-bottom: .2rem;
}
.report-state-card p {
  color: #8f735f;
  font-size: .34rem;
  line-height: .6rem;
}
.report-state-card .result-actions { margin: .35rem .1rem 0; }

.chart-card .chart-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .12rem;
  margin: .18rem 0 .24rem;
}
.chart-pillar {
  text-align: center;
  border-radius: .12rem;
  background: #fdf5e8;
  border: .0133rem solid #f0dec8;
  padding: .22rem .04rem .18rem;
  min-width: 0;
}
.chart-pillar.is-empty { opacity: .62; }
.chart-pillar span { display: block; color: #ab907b; font-size: .25rem; }
.chart-pillar strong {
  display: block;
  color: #7d2a15;
  font-size: .48rem;
  line-height: 1.35;
  margin-top: .04rem;
}
.chart-pillar em { display: block; color: #b26a42; font-size: .26rem; font-style: normal; }
.chart-pillar small {
  display: block;
  color: #a58c78;
  font-size: .22rem;
  line-height: 1.4;
  margin-top: .06rem;
  word-break: break-all;
}
.chart-meta {
  color: #7b4b2a;
  font-size: .3rem;
  line-height: .55rem;
  text-align: center;
  margin-bottom: .18rem;
}
.element-chart {
  border-top: .0133rem dashed #eadbc8;
  padding-top: .2rem;
}
.element-row {
  display: flex;
  align-items: center;
  gap: .18rem;
  margin: .1rem 0;
}
.element-row > span {
  width: .48rem;
  color: #9b7e69;
  font-size: .28rem;
  flex: 0 0 auto;
}
.element-track {
  flex: 1;
  height: .12rem;
  border-radius: 1rem;
  background: #f2e6d6;
  overflow: hidden;
}
.element-track i {
  display: block;
  height: 100%;
  border-radius: 1rem;
  background: linear-gradient(90deg, #e7b05a, #b54124);
}
.element-row b { color: #a08570; font-size: .24rem; font-weight: 400; width: .6rem; text-align: right; }
.chart-note {
  margin-top: .22rem;
  color: #a58c78;
  font-size: .27rem;
  line-height: .5rem;
  background: #fbf2df;
  border-radius: .1rem;
  padding: .16rem .2rem;
}

.months-card .months-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .16rem;
}
.month-item {
  border-radius: .12rem;
  background: #fdf7ed;
  border: .0133rem solid #f2e4d2;
  padding: .2rem .2rem .18rem;
}
.month-head {
  display: flex;
  align-items: baseline;
  gap: .12rem;
  border-bottom: .0133rem dashed #eddfcd;
  padding-bottom: .12rem;
  margin-bottom: .12rem;
}
.month-head strong { color: #7d2a15; font-size: .34rem; }
.month-head span { color: #a58c78; font-size: .25rem; }
.month-head em {
  margin-left: auto;
  color: #b52a1c;
  font-size: .34rem;
  font-style: normal;
  font-weight: 700;
}
.month-theme {
  color: #8b5d3e;
  font-size: .27rem;
  margin-bottom: .08rem;
}
.month-note {
  color: #9b8270;
  font-size: .25rem;
  line-height: .46rem;
}