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

/* Secure Airwallex payment */
.payment-page{min-height:calc(100vh - 190px);display:grid;place-items:center;padding:64px 20px;background:#f2eadc}.payment-card{width:min(680px,100%);padding:50px;background:rgba(255,253,248,.96);border:1px solid #dfcba7;box-shadow:0 20px 55px rgba(43,57,45,.09);text-align:center}.payment-card h1{margin:17px 0 16px;color:#173126;font-size:clamp(28px,5vw,42px);font-weight:500}.payment-lead,.payment-help{color:#746c60;line-height:1.8}.payment-price{margin:25px 0;color:#173126;font-size:42px}.payment-price span{margin-right:7px;color:#b48742;font-size:15px;letter-spacing:2px}.payment-steps{margin:0 0 28px;padding:18px 22px;background:#f7f1e6;color:#5f594f;text-align:left;line-height:1.7}.payment-link{display:block;box-sizing:border-box;text-decoration:none}.payment-check-button{width:100%;margin-top:12px;padding:15px 20px;border:1px solid #92713d;background:transparent;color:#173126;cursor:pointer;font:inherit}.payment-check-button:disabled{opacity:.55;cursor:wait}.payment-status{min-height:24px;margin:18px 0 0;color:#746c60}.payment-status.is-success{color:#17653a}.payment-status.is-error{color:#a33b32}.payment-help{margin-top:24px;font-size:13px}.payment-help a{color:#8d682f}@media(max-width:600px){.payment-page{padding:34px 14px}.payment-card{padding:34px 22px}}

body {
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  background: #f5f0e6;
  color: #18251f;
}


/* ===== HEADER ===== */

.topbar {
  height: 90px;
  background: #18251f;
  display: flex;
  align-items: center;
  padding: 0 7%;
  border-bottom: 1px solid rgba(198, 164, 94, 0.5);
}

.brand-main {
  color: #f4ead7;
  letter-spacing: 3px;
  font-size: 17px;
  font-weight: 600;
}

.brand-sub {
  color: #c6a45e;
  margin-top: 5px;
  font-size: 13px;
  letter-spacing: 4px;
}


/* ===== HERO ===== */

.hero {
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 25px;

  background:
    radial-gradient(
      circle at center,
      #faf6ed 0%,
      #f3ecdf 65%,
      #ebe2d3 100%
    );
}

.hero-content {
  max-width: 800px;
}

.eyebrow {
  color: #a68342;
  letter-spacing: 5px;
  font-size: 13px;
  margin-bottom: 25px;
}

.hero h1 {
  font-size: 55px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 4px;
  margin-bottom: 25px;
}

.hero-description {
  max-width: 600px;
  margin: auto;
  font-size: 17px;
  line-height: 2;
  color: #5c625e;
}


/* ===== PRICE ===== */

.price-box {
  max-width: 480px;
  margin: 40px auto 30px;
  padding: 22px 25px;

  border-top: 1px solid #cdbb96;
  border-bottom: 1px solid #cdbb96;

  display: flex;
  justify-content: space-between;
  align-items: center;

  text-align: left;
}

.price-label {
  display: block;
  font-size: 13px;
  color: #777;
  margin-bottom: 5px;
}

.price-box strong {
  font-size: 25px;
  color: #18251f;
}

.free-tag {
  background: #e9dfc8;
  color: #86682f;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 20px;
}


/* ===== BUTTON ===== */

.primary-button {
  display: inline-block;
  background: #18251f;
  color: #f4ead7;

  text-decoration: none;

  padding: 17px 42px;

  border: 1px solid #b89450;

  letter-spacing: 2px;

  transition: 0.25s;
}

.primary-button:hover {
  background: #263a30;
  transform: translateY(-2px);
}

.small-note {
  margin-top: 15px;
  color: #888;
  font-size: 12px;
}


/* ===== FEATURES ===== */

.features {
  padding: 100px 7%;
  background: #faf7f0;
}

.section-heading {
  text-align: center;
  margin-bottom: 55px;
}

.section-heading span {
  color: #a68342;
  font-size: 12px;
  letter-spacing: 5px;
}

.section-heading h2 {
  font-size: 35px;
  font-weight: 500;
  margin-top: 15px;
}

.feature-grid {
  max-width: 1100px;
  margin: auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.feature-card {
  min-height: 230px;
  padding: 32px 25px;

  background: #f3ede1;

  border: 1px solid #ddd1ba;
}

.feature-number {
  color: #b18b48;
  font-size: 13px;
  margin-bottom: 35px;
}

.feature-card h3 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 15px;
}

.feature-card p {
  color: #6c6c65;
  font-size: 14px;
  line-height: 1.8;
}


/* ===== FOOTER ===== */

footer {
  background: #18251f;
  color: #bdb7a8;

  text-align: center;

  padding: 30px;

  font-size: 12px;
  letter-spacing: 1px;
}


/* =========================================================
   手机版
   保持与电脑版同样结构，只整体缩小
========================================================= */

@media (max-width: 650px) {

  .western-section {
    overflow-x: auto;
  }


  .western-chart {
    width: 700px;
    max-width: none;

    transform: scale(0.78);
    transform-origin: top center;

    margin-left: auto;
    margin-right: auto;

    margin-bottom: -70px;
  }


  .western-summary-table {
    width: 700px;
    max-width: none;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    transform: scale(0.78);
    transform-origin: top center;

    margin-left: auto;
    margin-right: auto;

    margin-bottom: -20px;
  }


  .western-analysis {
    width: 700px;
    max-width: none;

    transform: scale(0.78);
    transform-origin: top center;

    margin-left: auto;
    margin-right: auto;
  }

}

/* ========================================
   BAZI FORM
======================================== */

.form-page {
  min-height: 100vh;
  padding: 80px 20px 100px;

  background:
    radial-gradient(
      circle at top,
      #faf6ed 0%,
      #f3ecdf 60%,
      #eee5d7 100%
    );
}


.form-container {
  width: 100%;
  max-width: 720px;

  margin: auto;

  background: rgba(255, 253, 248, 0.88);

  border: 1px solid #d9c9aa;

  padding: 60px 65px;

  box-shadow:
    0 20px 60px rgba(40, 35, 25, 0.08);
}


.form-heading {
  text-align: center;
  margin-bottom: 55px;
}


.form-heading h1 {
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 4px;

  margin-bottom: 15px;
}


.form-heading p {
  color: #77736b;

  font-size: 14px;

  line-height: 1.8;
}


/* FIELD */

.form-group {
  margin-bottom: 30px;
}


.form-group > label {
  display: block;

  margin-bottom: 10px;

  font-size: 14px;

  letter-spacing: 1px;

  color: #27352e;
}


.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="tel"],
.form-group select {

  width: 100%;

  min-height: 52px;

  padding: 12px 15px;

  border: 1px solid #d4c7af;

  background: #fffdf8;

  color: #18251f;

  font-family: inherit;

  font-size: 15px;

  outline: none;

  border-radius: 0;

  transition: 0.2s;
}


.form-group input:focus,
.form-group select:focus {

  border-color: #a68342;

  box-shadow:
    0 0 0 2px rgba(166, 131, 66, 0.08);
}


.field-note {
  margin-top: 8px;

  font-size: 11px;

  color: #999184;
}


.optional {
  color: #aaa296;

  font-size: 11px;
}


/* MALE / FEMALE */

.choice-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;
}


.choice-card {

  min-height: 52px;

  border: 1px solid #d4c7af;

  background: #fffdf8;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  position: relative;
}


.choice-card input {

  position: absolute;

  opacity: 0;
}


.choice-card span {

  width: 100%;

  min-height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.2s;
}


.choice-card input:checked + span {

  background: #18251f;

  color: #f4ead7;

  box-shadow:
    inset 0 0 0 1px #b89450;
}


/* DIVIDER */

.form-divider {

  height: 1px;

  background: #dfd3bd;

  margin: 45px 0 30px;
}


/* PRIVACY */

.privacy-note {

  padding: 20px;

  background: #f4eee2;

  border-left: 2px solid #ad8b4e;

  margin-bottom: 30px;
}


.privacy-note strong {

  display: block;

  font-size: 13px;

  margin-bottom: 6px;
}


.privacy-note p {

  color: #77736b;

  font-size: 12px;

  line-height: 1.7;
}

.privacy-note a,
footer a {
  color: #b28b43;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-note a:hover {
  color: #183c2e;
}

footer a:hover {
  color: #ead5a8;
}

.footer-separator {
  margin: 0 6px;
}


/* SUBMIT */

.submit-button {

  width: 100%;

  min-height: 58px;

  background: #18251f;

  color: #f4ead7;

  border: 1px solid #b89450;

  font-family: inherit;

  font-size: 15px;

  letter-spacing: 3px;

  cursor: pointer;

  transition: 0.25s;
}


.submit-button:hover {

  background: #263a30;

  transform: translateY(-1px);
}


/* MOBILE FORM */

@media (max-width: 700px) {

  .form-page {
    padding: 35px 15px 60px;
  }

  .form-container {
    padding: 40px 22px;
  }

  .form-heading h1 {
    font-size: 32px;
  }

}

/* ========================================
   BAZI REPORT
======================================== */

.report-page {
  min-height: 100vh;
  padding: 60px 20px 100px;
  background: #eee8dc;
}

.report-wrapper {
  max-width: 1180px;
  margin: auto;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  margin-bottom: 35px;
}

.report-header h1 {
  font-size: 46px;
  font-weight: 500;
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.report-header p {
  color: #787269;
  font-size: 13px;
  letter-spacing: 2px;
}

.report-actions button {
  background: transparent;
  border: 1px solid #9d814d;
  padding: 12px 20px;
  cursor: pointer;
  font-family: inherit;
  color: #18251f;
}


/* CARD */

.report-card {
  background: #faf7ef;
  border: 1px solid #d4c6aa;
  margin-bottom: 20px;
  padding: 35px;
}

.section-title {
  color: #18251f;
  font-size: 20px;
  letter-spacing: 3px;

  padding-bottom: 15px;
  margin-bottom: 25px;

  border-bottom: 1px solid #d8c9ab;
}


/* CUSTOMER */

.customer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.customer-grid div {
  padding-right: 20px;
}

.customer-grid span {
  display: block;
  color: #8c8579;
  font-size: 11px;
  margin-bottom: 7px;
}

.customer-grid strong {
  font-size: 16px;
  font-weight: 500;
}


/* FOUR PILLARS */

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.pillar-card {
  position: relative;

  text-align: center;

  min-height: 270px;

  padding: 24px 15px;

  background: #f1eadb;

  border: 1px solid #d5c6a7;
}

.pillar-card > span {
  display: block;
  font-size: 14px;
  letter-spacing: 2px;
}

.pillar-card small {
  display: block;
  color: #999184;
  margin-top: 3px;
}

.stem,
.branch {
  font-size: 58px;
  line-height: 1;
}

.stem {
  margin-top: 8px;
}

.branch {
  margin-top: 15px;
  color: #18251f;
}

.day-master {
  border: 1px solid #9f814b;
  box-shadow: inset 0 0 0 1px #c6a45e;
}

.master-tag {
  display: inline-block;
  margin-top: 18px;

  background: #18251f;
  color: #f4ead7;

  font-size: 10px;
  letter-spacing: 2px;

  padding: 6px 10px;
}

.demo-warning {
  margin-top: 18px;
  color: #9c865f;
  font-size: 11px;
  text-align: center;
}


/* FIVE ELEMENTS */

.elements-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.element-item {
  background: #f3eddf;
  padding: 22px;
  border: 1px solid #ddd0b8;
}

.element-item span {
  font-size: 23px;
}

.element-item strong {
  float: right;
  font-weight: 500;
}

.element-bar {
  clear: both;
  height: 4px;
  background: #ded5c5;
  margin-top: 25px;
}

.element-bar i {
  display: block;
  height: 100%;
  background: #887346;
}


/* TEN GODS */

.ten-gods {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #d6c8ac;
}

.ten-gods div {
  padding: 25px;
  text-align: center;
  border-right: 1px solid #d6c8ac;
}

.ten-gods div:last-child {
  border-right: none;
}

.ten-gods span {
  display: block;
  font-size: 13px;
  color: #787268;
  margin-bottom: 8px;
}

.ten-gods strong {
  font-size: 24px;
  font-weight: 500;
}


/* LUCK */

.luck-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.luck-card {
  position: relative;

  min-width: 170px;

  padding: 25px 20px;

  text-align: center;

  background: #f2ebdd;
  border: 1px solid #d7c9ad;
}

.luck-card span {
  display: block;
  color: #8b8478;
  font-size: 11px;
}

.luck-card strong {
  display: block;
  font-size: 32px;
  font-weight: 500;
  margin: 18px 0 8px;
}

.luck-card small {
  color: #756e63;
}

.current-luck {
  background: #18251f;
  color: #f4ead7;
  border-color: #b89450;
}

.current-luck span,
.current-luck small {
  color: #d9cfbd;
}

.current-luck em {
  display: block;

  color: #c6a45e;

  font-size: 9px;
  font-style: normal;

  margin-top: 18px;

  letter-spacing: 1px;
}


/* UPSELL */

.upsell-box {
  margin-top: 45px;

  padding: 70px 40px;

  text-align: center;

  background: #18251f;

  border: 1px solid #ad8b4e;

  color: #f3ead8;
}

.upsell-box h2 {
  font-size: 34px;
  font-weight: 500;
  margin-bottom: 20px;
}

.upsell-box p {
  max-width: 650px;
  margin: auto;

  line-height: 2;
  color: #c9c1b2;

  font-size: 14px;
}

.upsell-box button {
  margin-top: 30px;

  padding: 15px 35px;

  background: #c4a15c;

  border: 1px solid #dfc47f;

  color: #18251f;

  font-family: inherit;

  cursor: pointer;

  letter-spacing: 2px;
}

/* =========================================================
   REPORT COMPONENTS
   RESTORED BASE STYLES
========================================================= */


/* =========================================================
   四柱十神
========================================================= */

.pillar-ten-god {
  min-height: 20px;

  margin-top: 16px;
  margin-bottom: 12px;

  font-size: 13px;
  letter-spacing: 2px;

  color: #9a7540;
}


/* =========================================================
   四柱藏干
========================================================= */

.hidden-stems {
  margin-top: 20px;
  padding-top: 15px;

  border-top: 1px solid #d8c9ab;
}


.hidden-item {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 8px;

  margin: 6px 0;

  font-size: 11px;
}


.hidden-item strong {
  color: #18251f;

  font-weight: 500;
}


.hidden-item span {
  color: #8d8373;
}



/* =========================================================
   命局分析
========================================================= */

.chart-analysis {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 26px;
}


.analysis-item {
  min-height: 110px;

  padding: 24px 26px;

  border: 1px solid #d8c8a7;

  background: #f7f1e5;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.analysis-item span {
  margin-bottom: 12px;

  font-size: 13px;

  color: #8c8375;
}


.analysis-item strong {
  font-size: 24px;

  font-weight: 500;

  letter-spacing: 2px;

  color: #15281f;
}


.favorable-analysis {
  border-left: 3px solid #17392c;
}


.favorable-analysis strong {
  color: #17392c;
}


.unfavorable-analysis {
  border-left: 3px solid #a64b38;
}


.unfavorable-analysis strong {
  color: #8f3f31;
}



/* =========================================================
   十神结构
========================================================= */

.ten-gods-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 14px;

  margin-top: 24px;
}


.ten-god-item {
  padding: 20px 14px;

  text-align: center;

  border: 1px solid #d8c8a7;

  background: #f7f1e5;
}


.ten-god-item span {
  display: block;

  margin-bottom: 10px;

  font-size: 14px;

  color: #7f7567;
}


.ten-god-item strong {
  font-size: 24px;

  font-weight: 500;

  color: #15281f;
}



/* =========================================================
   日元特性
========================================================= */

.day-master-personality {
  padding-bottom: 38px;
}


.personality-heading {
  margin-top: 24px;
  margin-bottom: 24px;

  padding: 22px 24px;

  display: flex;

  align-items: center;

  gap: 18px;

  background: #f3ecde;

  border: 1px solid #d8c8a7;
}


.personality-heading strong {
  font-size: 28px;

  font-weight: 500;

  color: #15281f;
}


.personality-heading span {
  font-size: 14px;

  letter-spacing: 1px;

  color: #a58349;
}


.personality-content {
  font-size: 15px;

  line-height: 2;

  color: #37352f;
}


.personality-content p {
  margin: 0 0 18px;
}


.personality-content p:last-child {
  margin-bottom: 0;
}



/* =========================================================
   大运
========================================================= */

.luck-scroll {
  display: flex;

  gap: 12px;

  overflow-x: auto;

  padding-bottom: 10px;
}


.luck-card {
  position: relative;

  flex: 0 0 180px;

  min-width: 180px;
  min-height: 310px;

  padding: 22px 18px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  text-align: center;

  background: #f2ebdd;

  border: 1px solid #d7c9ad;
}


.luck-age,
.luck-card > span {
  display: block;

  min-height: 18px;

  font-size: 11px;

  color: #8b8478;
}


.luck-stem-god {
  min-height: 20px;

  margin-top: 11px;
  margin-bottom: 8px;

  font-size: 13px;

  color: #a58349;
}


.luck-stem {
  display: block;

  font-size: 31px;

  font-weight: 500;

  line-height: 1.05;

  color: #a94f39;
}


.luck-branch {
  display: block;

  margin-top: 6px;

  font-size: 31px;

  font-weight: 500;

  line-height: 1.05;

  color: #15281f;
}


.luck-hidden {
  width: 100%;

  min-height: 82px;

  margin-top: 15px;

  padding-top: 11px;

  border-top: 1px solid #d8c8a7;

  display: flex;

  flex-direction: column;
}


.luck-hidden-item {
  display: grid;

  grid-template-columns:
    25px auto;

  justify-content: center;

  align-items: center;

  column-gap: 8px;

  min-height: 21px;

  font-size: 12px;
}


.luck-hidden-item span {
  text-align: right;

  color: #15281f;
}


.luck-hidden-item small {
  text-align: left;

  font-size: 12px;

  color: #887761;
}


.current-luck {
  background: #18251f;

  color: #f4ead7;

  border-color: #b89450;
}


.current-luck .luck-age,
.current-luck > span {
  color: #d9cfbd;
}


.current-luck .luck-stem-god {
  color: #c6a45e;
}


.current-luck .luck-stem,
.current-luck .luck-branch {
  color: #f4ead7;
}


.current-luck .luck-hidden {
  border-top-color:
    rgba(244, 234, 215, 0.25);
}


.current-luck .luck-hidden-item span {
  color: #f4ead7;
}


.current-luck .luck-hidden-item small {
  color: #d9cfbd;
}


.current-luck em {
  display: block;

  margin-top: auto;

  padding-top: 13px;

  font-size: 9px;

  font-style: normal;

  letter-spacing: 1px;

  color: #c6a45e;
}



/* =========================================================
   流年
========================================================= */

.liu-nian-header {
  margin-top: 24px;
}


.liu-nian-main {
  padding: 28px 30px;

  display: flex;

  align-items: center;

  gap: 28px;

  border: 1px solid #d8c8a7;

  background: #f7f1e5;
}


.liu-nian-main > span {
  font-size: 15px;

  color: #8a7d6b;
}


.liu-nian-main > strong {
  font-size: 38px;

  font-weight: 500;

  letter-spacing: 4px;

  color: #15281f;
}


.liu-nian-main > small {
  font-size: 14px;

  color: #9a7b3f;
}


.liu-nian-hidden {
  display: flex;

  flex-direction: column;

  gap: 3px;

  margin-left: 20px;

  padding-left: 20px;

  border-left: 1px solid #d8c8a7;
}


.liu-hidden-item {
  display: grid;

  grid-template-columns:
    25px auto;

  align-items: center;

  column-gap: 8px;

  font-size: 12px;

  line-height: 1.7;
}


.liu-hidden-item span {
  text-align: right;

  color: #15281f;
}


.liu-hidden-item small {
  text-align: left;

  font-size: 12px;

  color: #887761;
}


.section-subtitle {
  margin-top: 30px;
  margin-bottom: 16px;

  font-size: 16px;

  letter-spacing: 1px;

  color: #5f574b;
}



/* =========================================================
   十二流月
========================================================= */

.liu-yue-grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 12px;

  align-items: stretch;
}


.liu-yue-card {
  width: 100%;

  min-width: 0;
  min-height: 285px;

  padding: 20px 12px;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  justify-content: flex-start;

  text-align: center;

  border: 1px solid #d8c8a7;

  background: #f7f1e5;
}


.liu-yue-top {
  width: 100%;

  min-height: 154px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;
}


.liu-yue-number {
  display: block;

  min-height: 18px;

  margin-bottom: 10px;

  font-size: 12px;

  line-height: 18px;

  color: #8a8175;
}


.liu-yue-stem-god {
  min-height: 20px;

  margin-bottom: 8px;

  font-size: 13px;

  line-height: 20px;

  color: #a58349;
}


.liu-yue-stem {
  display: block;

  font-size: 30px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 2px;

  color: #a94f39;
}


.liu-yue-branch {
  display: block;

  margin-top: 7px;

  font-size: 30px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 2px;

  color: #15281f;
}


.liu-yue-hidden {
  width: 100%;

  min-height: 88px;

  margin-top: 15px;

  padding-top: 11px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  border-top: 1px solid #d8c8a7;
}


.liu-yue-hidden-item {
  display: grid;

  grid-template-columns:
    28px auto;

  justify-content: center;

  align-items: center;

  column-gap: 8px;

  min-height: 22px;

  font-size: 12px;

  line-height: 22px;
}


.liu-yue-hidden-item .hidden-stem {
  margin: 0;

  text-align: right;

  color: #15281f;
}


.liu-yue-hidden-item small {
  margin: 0;

  text-align: left;

  font-size: 12px;

  line-height: 22px;

  color: #887761;
}



/* =========================================================
   西方命理摘要
========================================================= */

.western-summary-table {
  width: 100%;

  max-width: 760px;

  margin: 35px auto 55px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;
}


.western-summary-row {
  min-height: 82px;

  padding: 16px 20px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border: 1px solid #d8c8a7;

  background: #f7f1e5;
}


.western-summary-row span {
  display: block;

  margin-bottom: 9px;

  font-size: 13px;

  color: #8a8175;
}


.western-summary-row strong {
  display: block;

  font-size: 19px;

  line-height: 1.5;

  font-weight: 500;

  color: #15281f;
}


.western-summary-row:last-child {
  grid-column: span 2;
}



/* =========================================================
   西方命理倒三角
========================================================= */

.western-chart {
  position: relative;

  width: 700px;

  max-width: 100%;

  height: 400px;

  margin: 35px auto 10px;
}


.western-raw-row {
  position: absolute;

  top: 0;

  left: 50%;

  width: 280px;

  transform: translateX(-50%);

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  text-align: center;

  font-size: 18px;

  line-height: 1;

  color: #172b22;
}


.western-triangle {
  position: absolute;

  top: 38px;

  left: 50%;

  width: 280px;

  height: 215px;

  transform: translateX(-50%);

  overflow: visible;

  background:

    linear-gradient(
      56.5deg,
      transparent 49.35%,
      #173228 49.55%,
      #173228 50.45%,
      transparent 50.65%
    )
    left top / 50% 100% no-repeat,

    linear-gradient(
      -56.5deg,
      transparent 49.35%,
      #173228 49.55%,
      #173228 50.45%,
      transparent 50.65%
    )
    right top / 50% 100% no-repeat;
}


.western-triangle::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 280px;

  border-top:
    2.5px solid #173228;
}


.western-first-row {
  position: absolute;

  z-index: 3;

  top: 21px;

  left: 31px;

  width: 218px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  text-align: center;

  font-size: 19px;

  color: #172b22;
}


.western-first-row::after {
  content: "";

  position: absolute;

  top: -21px;

  left: 50%;

  height: 79px;

  border-left:
    2px solid #173228;
}


.western-first-row::before {
  content: "";

  position: absolute;

  top: 53px;

  left: 13px;

  width: 192px;

  border-top:
    2px solid #173228;
}


.western-second-row {
  position: absolute;

  z-index: 4;

  top: 92px;

  left: 81px;

  width: 118px;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  text-align: center;

  font-size: 20px;

  color: #172b22;
}


.western-second-row::after {
  content: "";

  position: absolute;

  top: -18px;

  left: 50%;

  height: 62px;

  border-left:
    2px solid #173228;
}


.western-second-row::before {
  content: "";

  position: absolute;

  top: 40px;

  left: 9px;

  width: 100px;

  border-top:
    2px solid #173228;
}


.western-center-number {
  position: absolute;

  z-index: 5;

  top: 153px;

  left: 50%;

  transform: translateX(-50%);

  font-size: 22px;

  font-weight: 500;

  color: #172b22;
}


.western-side {
  position: absolute;

  top: 198px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 19px;

  line-height: 1;

  white-space: nowrap;

  color: #172b22;
}


.western-side strong {
  font-weight: 500;
}


.western-side span {
  color: #756e63;
}


.western-side-left {
  left: 165px;
}


.western-side-right {
  right: 165px;
}


.western-bottom-numbers {
  position: absolute;

  top: 290px;

  left: 50%;

  width: 110px;

  transform: translateX(-50%);

  text-align: center;

  color: #172b22;
}


.western-bottom-top {
  width: 100%;

  display: flex;

  justify-content: space-between;

  font-size: 19px;
}


.western-bottom-result {
  display: block;

  margin-top: 18px;

  font-size: 21px;

  font-weight: 500;
}



/* =========================================================
   西方主性格
========================================================= */

.western-analysis {
  margin-top: 55px;
}


.western-analysis-heading {
  display: flex;

  align-items: baseline;

  gap: 12px;

  margin-bottom: 22px;
}


.western-analysis-heading span {
  font-size: 15px;

  color: #766e63;
}


.western-analysis-heading strong {
  font-size: 28px;

  font-weight: 500;

  color: #15281f;
}


.western-positive,
.western-negative {
  padding: 20px 22px;

  margin-bottom: 12px;

  border: 1px solid #d8c8a7;

  background: #faf7ef;
}


.western-positive {
  border-left:
    3px solid #295f4d;
}


.western-negative {
  border-left:
    3px solid #a94f39;
}


.western-positive span,
.western-negative span {
  display: block;

  margin-bottom: 8px;

  font-size: 13px;

  color: #8a8175;
}


.western-positive p,
.western-negative p {
  margin: 0;

  line-height: 1.9;

  color: #37352f;
}


.western-personality-report h3 {
  margin:
    32px
    0
    18px;

  font-size: 24px;

  font-weight: 500;

  color: #15281f;
}


.western-personality-content p {
  margin:
    0
    0
    18px;

  line-height: 2;

  color: #37352f;
}

/* =========================================================
   SW DESTINY BAZI REPORT
   FINAL CLEAN OVERRIDE
   2026-08-12
========================================================= */


/* =========================================================
   1. WEBSITE HEADER
   保持目前已经满意的 Logo / 文字设计
========================================================= */

.topbar,
.bazi-top-header {
  width: 100% !important;
  max-width: none !important;

  min-height: 82px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #10261e !important;

  border-bottom: 1px solid rgba(198, 164, 94, 0.45);

  box-sizing: border-box !important;
}


.bazi-top-inner {
  width: 100% !important;
  max-width: none !important;

  min-height: 82px !important;

  margin: 0 !important;

  padding:
    10px
    40px
    10px
    58px !important;

  display: flex !important;
  align-items: center !important;

  box-sizing: border-box !important;
}

.bazi-back-archive {
  margin-left: auto;
  color: #d9bd84;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
}

.bazi-back-archive:hover {
  color: #fff8e8;
}


.bazi-top-brand {
  display: flex !important;
  align-items: center !important;

  gap: 12px !important;
}


.bazi-top-logo {
  display: block !important;

  width: 58px !important;
  height: 58px !important;

  flex: 0 0 58px !important;

  object-fit: contain !important;

  margin: 0 !important;
}


.bazi-top-text {
  display: flex !important;

  flex-direction: column !important;
  justify-content: center !important;
}


.bazi-top-en {
  color: #f4ead7 !important;

  font-size: 16px !important;
  font-weight: 600 !important;

  letter-spacing: 3px !important;

  line-height: 1.2 !important;
}


.bazi-top-cn {
  margin-top: 6px !important;

  color: #c6a45e !important;

  font-size: 12px !important;

  letter-spacing: 4px !important;

  line-height: 1.3 !important;
}


/* 首页 / Form 的旧 topbar */

.topbar {
  display: flex !important;
  align-items: center !important;

  padding-left: 7% !important;
  padding-right: 7% !important;
}


.topbar .brand-main {
  color: #f4ead7 !important;

  font-size: 17px !important;
  font-weight: 600 !important;

  letter-spacing: 3px !important;
}


.topbar .brand-sub {
  margin-top: 5px !important;

  color: #c6a45e !important;

  font-size: 13px !important;

  letter-spacing: 4px !important;
}



/* =========================================================
   2. DESKTOP REPORT ALIGNMENT
========================================================= */

.report-page {
  width: 100%;

  overflow-x: hidden;
}


.report-wrapper {
  width: calc(100% - 110px) !important;

  max-width: 1225px !important;

  margin-left: 86px !important;
  margin-right: auto !important;

  transform: none !important;

  box-sizing: border-box !important;
}


.report-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


.report-card {
  width: 100% !important;

  box-sizing: border-box !important;
}



/* =========================================================
   3. 十二流月
   Desktop：固定 6 + 6
========================================================= */

.liu-yue-grid {
  display: grid !important;

  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;

  gap: 12px !important;

  width: 100% !important;

  align-items: stretch !important;

  box-sizing: border-box !important;
}


.liu-yue-card {
  width: 100% !important;

  min-width: 0 !important;
  min-height: 285px !important;

  padding: 18px 10px !important;

  box-sizing: border-box !important;
}



/* =========================================================
   4. MOBILE REPORT
========================================================= */

@media screen and (max-width: 768px) {

  html,
  body {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
  }


  /* Header */

  .topbar,
  .bazi-top-header {
    min-height: 68px !important;
  }


  .bazi-top-inner {
    min-height: 68px !important;

    padding:
      8px
      14px !important;
  }


  .bazi-top-logo {
    width: 46px !important;
    height: 46px !important;

    flex-basis: 46px !important;
  }


  .bazi-top-brand {
    gap: 9px !important;
  }


  .bazi-top-en {
    font-size: 12px !important;

    letter-spacing: 2px !important;
  }


  .bazi-top-cn {
    margin-top: 4px !important;

    font-size: 10px !important;

    letter-spacing: 2px !important;
  }


  /* Report */

  .report-page {
    width: 100% !important;

    padding: 0 !important;

    overflow-x: hidden !important;
  }


  .report-wrapper {
    width: calc(100% - 20px) !important;

    max-width: none !important;

    margin-left: 10px !important;
    margin-right: 10px !important;

    padding: 0 !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  .report-card {
    width: 100% !important;

    margin-bottom: 14px !important;

    padding: 16px 12px !important;

    overflow: visible !important;
  }


  .section-title {
    font-size: 20px !important;

    margin-bottom: 14px !important;
  }


  /* 客户资料 */

  .customer-grid {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;
  }


  /* =====================================================
     四柱：
     手机仍然一定 4 柱一排
  ===================================================== */

  .pillars-grid {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 5px !important;

    width: 100% !important;
  }


  .pillar-card {
    width: 100% !important;

    min-width: 0 !important;
    min-height: 225px !important;

    padding: 12px 3px !important;

    overflow: hidden !important;
  }


  .pillar-card > span {
    font-size: 10px !important;

    letter-spacing: 0 !important;

    white-space: nowrap !important;
  }


  .pillar-card small {
    font-size: 8px !important;
  }


  .pillar-ten-god {
    min-height: 0 !important;

    margin-top: 8px !important;
    margin-bottom: 6px !important;

    font-size: 9px !important;

    letter-spacing: 0 !important;

    white-space: nowrap !important;
  }


  .stem,
  .branch {
    font-size: 31px !important;

    line-height: 1.1 !important;
  }


  .branch {
    margin-top: 8px !important;
  }


  .hidden-stems {
    margin-top: 10px !important;

    padding-top: 8px !important;
  }


  .hidden-item {
    gap: 2px !important;

    margin: 3px 0 !important;

    font-size: 7.5px !important;

    white-space: nowrap !important;
  }


  /* 五行：保持 5 个 */

  .elements-grid {
    display: grid !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    gap: 5px !important;
  }


  .element-item {
    min-width: 0 !important;

    padding: 10px 4px !important;
  }


  /* 命局分析 */

  .chart-analysis {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 10px !important;
  }


  .analysis-item {
    min-height: 0 !important;

    padding: 13px !important;
  }


  /* 日元 */

  .personality-heading {
    padding: 14px !important;
  }


  .personality-heading strong {
    font-size: 24px !important;
  }


  .personality-content {
    font-size: 14px !important;

    line-height: 1.7 !important;
  }


  /* 十神 */

  .ten-gods-grid {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
  }


  /* 大运 */

  .luck-scroll {
    display: flex !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
  }


  .luck-card {
    flex: 0 0 120px !important;

    width: 120px !important;
    min-width: 120px !important;

    padding: 12px 8px !important;
  }


  /* 流年 */

  .liu-nian-main {
    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 12px !important;

    padding: 14px !important;
  }


  .liu-nian-hidden {
    margin-left: 0 !important;

    padding-left: 0 !important;
    padding-top: 12px !important;

    border-left: none !important;

    border-top:
      1px solid #d8c8a7 !important;
  }


  /* =====================================================
     十二流月：
     手机仍然固定 6 + 6
  ===================================================== */

  .liu-yue-grid {
    display: grid !important;

    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;

    gap: 4px !important;

    width: 100% !important;
  }


  .liu-yue-card {
    width: 100% !important;

    min-width: 0 !important;
    min-height: 170px !important;

    padding: 8px 2px !important;
  }


  .liu-yue-number {
    font-size: 8px !important;
  }


  .liu-yue-stem-god {
    font-size: 8px !important;
  }


  .liu-yue-stem,
  .liu-yue-branch {
    font-size: 22px !important;
  }


  .liu-yue-top {
    min-height: 90px !important;
  }


  .liu-yue-hidden {
    min-height: 58px !important;

    margin-top: 7px !important;

    padding-top: 6px !important;
  }


  .liu-yue-hidden-item {
    grid-template-columns:
      15px auto !important;

    column-gap: 2px !important;

    min-height: 15px !important;

    font-size: 7px !important;

    line-height: 15px !important;
  }


  .liu-yue-hidden-item small {
    font-size: 7px !important;

    line-height: 15px !important;
  }


  /* 西方命理 */

  .western-section {
    width: 100% !important;

    overflow: hidden !important;
  }


  .western-chart {
    position: relative !important;

    width: 700px !important;
    max-width: none !important;

    height: 400px !important;

    left: 50% !important;

    transform:
      translateX(-50%)
      scale(0.47) !important;

    transform-origin:
      top center !important;

    margin-top: 20px !important;
    margin-bottom: -195px !important;
  }


  .western-summary-table {
    display: grid !important;

    width: 100% !important;
    max-width: 100% !important;

    grid-template-columns: 1fr !important;

    gap: 8px !important;

    margin:
      10px
      0
      18px !important;

    transform: none !important;
  }


  .western-summary-row:last-child {
    grid-column: auto !important;
  }


  .western-analysis {
    width: 100% !important;

    margin: 0 !important;

    transform: none !important;
  }


  .western-personality-content {
    font-size: 14px !important;

    line-height: 1.7 !important;
  }

}



/* =========================================================
   5. VERY SMALL PHONE
========================================================= */

@media screen and (max-width: 390px) {

  .report-wrapper {
    width: calc(100% - 12px) !important;

    margin-left: 6px !important;
    margin-right: 6px !important;
  }


  .report-card {
    padding:
      14px
      8px !important;
  }


  .pillars-grid {
    gap: 3px !important;
  }


  .pillar-card {
    min-height: 215px !important;

    padding-left: 2px !important;
    padding-right: 2px !important;
  }


  .stem,
  .branch {
    font-size: 28px !important;
  }


  .pillar-ten-god {
    font-size: 8px !important;
  }


  .hidden-item {
    font-size: 7px !important;
  }


  .western-chart {
    transform:
      translateX(-50%)
      scale(0.43) !important;

    margin-bottom:
      -210px !important;
  }

}



/* =========================================================
   6. PRINT / SAVE AS PDF
========================================================= */

@media print {

  @page {
    size: A4 portrait;

    margin: 8mm;
  }


  html,
  body {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: #fff !important;

    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }


  /* =====================================================
     上方学院 Logo 保持
     只隐藏按钮 / Footer
  ===================================================== */

  .report-actions,
  footer,
  .upsell-box,
  .demo-warning {
    display: none !important;
  }


  .bazi-top-header {
    width: 100% !important;

    margin: 0 !important;

    transform: none !important;
  }


  /*
     不重新定义 bazi-top-logo /
     bazi-top-brand /
     bazi-top-en
     所以 Logo 设计保持原样
  */


  /* =====================================================
     A4 中央主体
  ===================================================== */

  .report-page {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: #fff !important;
  }


  .report-wrapper {
    width: 190mm !important;
    max-width: 190mm !important;

    margin:
      0
      auto !important;

    padding: 0 !important;

    transform: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  .report-header,
  .report-card {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  .report-card {
    margin-bottom: 4mm !important;

    padding: 5mm !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    break-inside: auto !important;
    page-break-inside: auto !important;
  }


  /* 客户 */

  .customer-grid {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap:
      4mm
      6mm !important;
  }


  /* 四柱 */

  .pillars-grid {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 3mm !important;
  }


  .pillar-card {
    min-height: 62mm !important;

    padding: 3mm !important;

    break-inside: avoid !important;
  }


  .stem,
  .branch {
    font-size: 27pt !important;
  }


  /* 五行 */

  .elements-grid {
    display: grid !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    gap: 2mm !important;
  }


  /* =====================================================
     命局分析：新页
  ===================================================== */

  .report-card:has(.chart-analysis) {
    break-before: page !important;
    page-break-before: always !important;
  }


  .chart-analysis {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 3mm !important;

    margin-top: 3mm !important;
  }


  .analysis-item {
    min-height: 17mm !important;

    padding: 3mm !important;
  }


  /* 日元特性 */

  .day-master-personality,
  .personality-section {
    break-before: auto !important;

    height: auto !important;

    overflow: visible !important;
  }


  .personality-heading {
    margin:
      2.5mm
      0 !important;

    padding: 3mm !important;
  }


  .personality-heading strong {
    font-size: 16pt !important;
  }


  .personality-heading span {
    font-size: 7.5pt !important;
  }


  .personality-content {
    font-size: 7.4pt !important;

    line-height: 1.36 !important;

    overflow: visible !important;
  }


  .personality-content p {
    margin-bottom: 1.8mm !important;
  }


  /* 十神 */

  .ten-gods-grid {
    display: grid !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    gap: 2mm !important;

    margin-top: 3mm !important;
  }


  .ten-god-item {
    min-height: 16mm !important;

    padding: 2mm !important;
  }


/* =====================================================
   大运：标题 + 卡片整体新页
===================================================== */

.report-card:has(.luck-scroll) {
  break-before: page !important;
  page-break-before: always !important;

  break-after: auto !important;
  page-break-after: auto !important;

  break-inside: avoid !important;
  page-break-inside: avoid !important;

  margin-top: 0 !important;
  margin-bottom: 4mm !important;

  padding: 5mm !important;

  height: auto !important;
  min-height: 0 !important;

  overflow: visible !important;

  transform: none !important;
}


.luck-section {
  break-before: auto !important;
  page-break-before: auto !important;

  overflow: visible !important;
}


  .luck-scroll {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 2mm !important;

  overflow: visible !important;

  break-inside: avoid !important;
  page-break-inside: avoid !important;
}


  .luck-card {
  width: 100% !important;

  min-width: 0 !important;
  max-width: none !important;

  height: 53mm !important;
  min-height: 53mm !important;

  padding:
    3mm
    2mm !important;

  break-inside: avoid !important;
  page-break-inside: avoid !important;

  overflow: hidden !important;
}


  /* =====================================================
     流年 + 十二流月：同一页开始
  ===================================================== */

  .liu-nian-section {
    break-before: page !important;
    page-break-before: always !important;

    overflow: visible !important;
  }


  .liu-nian-main {
    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    margin-bottom: 3mm !important;

    padding:
      3mm
      4mm !important;
  }


  .liu-nian-hidden {
    margin-left: 5mm !important;

    padding-left: 5mm !important;
    padding-top: 0 !important;

    border-left:
      1px solid #d8c8a7 !important;

    border-top: none !important;
  }


  .section-subtitle {
    margin-top: 3mm !important;
    margin-bottom: 2mm !important;
  }


  /* =====================================================
     Print：
     十二个月也是 6 + 6
  ===================================================== */

  .liu-yue-grid {
    display: grid !important;

    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;

    gap: 1.5mm !important;

    width: 100% !important;

    margin: 0 auto !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }


  .liu-yue-card {
    min-height: 40mm !important;

    padding: 2mm !important;
  }


  .liu-yue-top {
    min-height: 20mm !important;
  }


  .liu-yue-hidden {
    min-height: 10mm !important;

    margin-top: 2mm !important;

    padding-top: 2mm !important;
  }


  /* =====================================================
     西方命理：新页
  ===================================================== */

  .western-section {
    break-before: page !important;
    page-break-before: always !important;

    overflow: visible !important;
  }


  .western-chart {
    position: relative !important;

    width: 175mm !important;
    max-width: 175mm !important;

    height: 106mm !important;

    margin:
      5mm
      auto
      2mm !important;

    transform: none !important;

    overflow: visible !important;

    break-inside: avoid !important;
  }


  .western-raw-row {
    position: absolute !important;

    top: 0 !important;
    left: 50% !important;

    width: 280px !important;

    transform:
      translateX(-50%) !important;
  }


  .western-triangle {
    position: absolute !important;

    top: 38px !important;
    left: 50% !important;

    width: 280px !important;
    height: 215px !important;

    margin: 0 !important;

    transform:
      translateX(-50%) !important;
  }


  .western-first-row {
    top: 21px !important;
    left: 31px !important;

    width: 218px !important;
  }


  .western-second-row {
    top: 92px !important;
    left: 81px !important;

    width: 118px !important;
  }


  .western-center-number {
    top: 153px !important;
    left: 50% !important;

    transform:
      translateX(-50%) !important;
  }


  .western-side {
    top: 198px !important;

    font-size: 19px !important;
  }


  .western-side-left {
    left: 165px !important;
  }


  .western-side-right {
    right: 165px !important;
  }


  .western-bottom-numbers {
    top: 290px !important;
    left: 50% !important;

    width: 110px !important;

    transform:
      translateX(-50%) !important;
  }


  /* 西方数字资料 */

  .western-summary-table {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    width: 160mm !important;
    max-width: 160mm !important;

    margin:
      2mm
      auto
      4mm !important;

    gap: 2mm !important;

    transform: none !important;
  }


  .western-summary-row {
    min-height: 12mm !important;

    padding:
      2.5mm
      4mm !important;
  }


  /* =====================================================
     主性格分析：下一页
  ===================================================== */

  .western-analysis {
    break-before: page !important;
    page-break-before: always !important;

    width: 100% !important;

    margin: 0 !important;

    padding-top: 3mm !important;

    transform: none !important;

    overflow: visible !important;
  }


  .western-analysis-heading {
    margin-bottom: 3mm !important;
  }


  .western-positive,
  .western-negative {
    margin-bottom: 3mm !important;

    padding:
      3mm
      4mm !important;

    break-inside: avoid !important;
  }


  #westernPersonalityTitle {
    break-before: auto !important;
    page-break-before: auto !important;

    margin-top: 4mm !important;
    margin-bottom: 2mm !important;
  }


  .western-personality-content {
    font-size: 8pt !important;

    line-height: 1.42 !important;

    overflow: visible !important;
  }


  .western-personality-content p {
    margin-bottom: 2.3mm !important;

    break-inside: auto !important;
  }


  /* 防止某些旧 inline overflow */

  [style*="overflow: hidden"],
  [style*="overflow:hidden"] {
    overflow: visible !important;
  }

}

/* =====================================================
   五行分配
   标题 + 5个五行必须保持在一起
   不主动换页
===================================================== */

.report-card:has(.elements-grid) {
  break-before: auto !important;
  page-break-before: auto !important;

  break-after: auto !important;
  page-break-after: auto !important;

  break-inside: avoid !important;
  page-break-inside: avoid !important;

  margin-top: 0 !important;
  margin-bottom: 4mm !important;

  padding: 4mm 5mm !important;

  height: auto !important;
  min-height: 0 !important;

  overflow: visible !important;

  transform: none !important;

  box-sizing: border-box !important;
}


.report-card:has(.elements-grid) .section-title {
  margin-top: 0 !important;
  margin-bottom: 3mm !important;

  padding-bottom: 2mm !important;

  break-after: avoid !important;
  page-break-after: avoid !important;
}


.elements-grid {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 2mm !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  break-before: avoid !important;
  page-break-before: avoid !important;

  break-inside: avoid !important;
  page-break-inside: avoid !important;
}


.element-item {
  width: 100% !important;
  min-width: 0 !important;

  padding: 3mm 2.5mm !important;

  break-inside: avoid !important;
  page-break-inside: avoid !important;

  box-sizing: border-box !important;
}


.element-bar {
  margin-top: 4mm !important;
}

/* =========================================================
   TURNSTILE
========================================================= */

.turnstile-wrap {
  display: flex;

  justify-content: center;
  align-items: center;

  margin:
    28px
    0
    24px;
}

/* =========================================================
   MONTHLY DESTINY MEMBERSHIP CTA
========================================================= */

.monthly-membership-cta {
  width: min(100% - 48px, 1270px);
  margin: 26px auto 55px;
  border: 1px solid #c9b17f;
  background: linear-gradient(
    135deg,
    #f8f1e5 0%,
    #eee2cd 100%
  );
}

.monthly-membership-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 62px 42px;
  text-align: center;
}

.monthly-membership-eyebrow {
  margin-bottom: 18px;
  color: #a87d39;
  font-size: 11px;
  letter-spacing: 6px;
}

.monthly-membership-cta h2 {
  margin: 0 0 18px;
  color: #173126;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.5;
}

.monthly-membership-cta p {
  max-width: 690px;
  margin: 0 auto;
  color: #70695e;
  font-size: 15px;
  line-height: 2;
}

.monthly-membership-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.monthly-membership-tags span {
  padding: 8px 14px;
  border: 1px solid #ccb789;
  background: rgba(255,255,255,.36);
  color: #765f36;
  font-size: 12px;
  letter-spacing: 1px;
}

.monthly-membership-price {
  margin-top: 31px;
  color: #173126;
}

.monthly-membership-price strong {
  font-size: 31px;
  font-weight: 500;
}

.monthly-membership-price span {
  margin-left: 5px;
  color: #81796d;
  font-size: 14px;
}

.monthly-membership-button {
  display: inline-block;
  margin-top: 24px;
  padding: 16px 35px;
  background: #153126;
  border: 1px solid #b78b43;
  color: #fff7e7;
  text-decoration: none;
  letter-spacing: 2px;
  transition: .25s ease;
}

.monthly-membership-button:hover {
  background: #244638;
  transform: translateY(-2px);
}

.monthly-membership-note {
  margin-top: 15px;
  color: #91887b;
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 600px) {

  .monthly-membership-cta {
    width: calc(100% - 28px);
  }

  .monthly-membership-inner {
    padding: 44px 22px;
  }

  .monthly-membership-cta h2 {
    font-size: 27px;
  }

  .monthly-membership-price strong {
    font-size: 28px;
  }
}
.twin-order-group[hidden] { display: none !important; }
.twin-order-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-note { margin: 10px 0 0; color: #766f64; font-size: 12px; line-height: 1.7; }
@media (max-width: 560px) { .twin-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================
   FIVE-ELEMENT REPORT VISUAL + STEM/BRANCH COLOURS
========================================================= */

.report-page {
  --element-wood: #17863c;
  --element-fire: #d8342c;
  --element-earth: #c08713;
  --element-metal: #767b82;
  --element-water: #2458c6;
}

.report-page [data-element="Wood"] { color: var(--element-wood) !important; }
.report-page [data-element="Fire"] { color: var(--element-fire) !important; }
.report-page [data-element="Earth"] { color: var(--element-earth) !important; }
.report-page [data-element="Metal"] { color: var(--element-metal) !important; }
.report-page [data-element="Water"] { color: var(--element-water) !important; }

.liu-nian-main > strong span {
  display: inline-block;
}

.five-element-report-card {
  position: relative;
  break-inside: avoid;
  page-break-inside: avoid;
}

.five-element-strength {
  position: absolute;
  top: 92px;
  left: 38px;
  display: grid;
  gap: 2px;
  color: #18251f;
  text-align: left;
}

.five-element-strength strong {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
}

.five-element-strength span {
  color: #766f64;
  font-size: 18px;
}

.five-element-orbit.elements-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, auto);
  align-items: start;
  align-content: start;
  justify-items: center;
  gap: 18px 14px !important;
  width: min(100%, 720px) !important;
  min-height: 520px;
  margin: 6px auto 0 !important;
  padding: 0 !important;
}

.five-element-orbit .element-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
}

.five-element-orbit .element-position-top {
  grid-area: auto !important;
  grid-column: 4;
  grid-row: 1;
}

.five-element-orbit .element-position-right {
  grid-area: auto !important;
  grid-column: 6;
  grid-row: 2;
}

.five-element-orbit .element-position-bottom-right {
  grid-area: auto !important;
  grid-column: 5;
  grid-row: 3;
}

.five-element-orbit .element-position-bottom-left {
  grid-area: auto !important;
  grid-column: 3;
  grid-row: 3;
}

.five-element-orbit .element-position-left {
  grid-area: auto !important;
  grid-column: 2;
  grid-row: 2;
}

/*
 * CSS-only day-master positioning fallback.
 * The day stem already receives data-element when the chart is rendered.
 * These selectors force the five circles into the generating cycle even if
 * an older cached script prevents arrangeFiveElements() from running.
 */
.five-element-orbit .element-item {
  grid-area: auto !important;
}

/* 木日元：木 → 火 → 土 → 金 → 水 */
body:has(#dayStem[data-element="Wood"]) .five-element-orbit .element-wood,
body:not(:has(#dayStem[data-element])) .five-element-orbit .element-wood {
  grid-column: 4 !important;
  grid-row: 1 !important;
}
body:has(#dayStem[data-element="Wood"]) .five-element-orbit .element-fire,
body:not(:has(#dayStem[data-element])) .five-element-orbit .element-fire {
  grid-column: 6 !important;
  grid-row: 2 !important;
}
body:has(#dayStem[data-element="Wood"]) .five-element-orbit .element-earth,
body:not(:has(#dayStem[data-element])) .five-element-orbit .element-earth {
  grid-column: 5 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Wood"]) .five-element-orbit .element-metal,
body:not(:has(#dayStem[data-element])) .five-element-orbit .element-metal {
  grid-column: 3 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Wood"]) .five-element-orbit .element-water,
body:not(:has(#dayStem[data-element])) .five-element-orbit .element-water {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* 火日元：火 → 土 → 金 → 水 → 木 */
body:has(#dayStem[data-element="Fire"]) .five-element-orbit .element-fire {
  grid-column: 4 !important;
  grid-row: 1 !important;
}
body:has(#dayStem[data-element="Fire"]) .five-element-orbit .element-earth {
  grid-column: 6 !important;
  grid-row: 2 !important;
}
body:has(#dayStem[data-element="Fire"]) .five-element-orbit .element-metal {
  grid-column: 5 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Fire"]) .five-element-orbit .element-water {
  grid-column: 3 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Fire"]) .five-element-orbit .element-wood {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* 土日元：土 → 金 → 水 → 木 → 火 */
body:has(#dayStem[data-element="Earth"]) .five-element-orbit .element-earth {
  grid-column: 4 !important;
  grid-row: 1 !important;
}
body:has(#dayStem[data-element="Earth"]) .five-element-orbit .element-metal {
  grid-column: 6 !important;
  grid-row: 2 !important;
}
body:has(#dayStem[data-element="Earth"]) .five-element-orbit .element-water {
  grid-column: 5 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Earth"]) .five-element-orbit .element-wood {
  grid-column: 3 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Earth"]) .five-element-orbit .element-fire {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* 金日元：金 → 水 → 木 → 火 → 土 */
body:has(#dayStem[data-element="Metal"]) .five-element-orbit .element-metal {
  grid-column: 4 !important;
  grid-row: 1 !important;
}
body:has(#dayStem[data-element="Metal"]) .five-element-orbit .element-water {
  grid-column: 6 !important;
  grid-row: 2 !important;
}
body:has(#dayStem[data-element="Metal"]) .five-element-orbit .element-wood {
  grid-column: 5 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Metal"]) .five-element-orbit .element-fire {
  grid-column: 3 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Metal"]) .five-element-orbit .element-earth {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* 水日元：水 → 木 → 火 → 土 → 金 */
body:has(#dayStem[data-element="Water"]) .five-element-orbit .element-water {
  grid-column: 4 !important;
  grid-row: 1 !important;
}
body:has(#dayStem[data-element="Water"]) .five-element-orbit .element-wood {
  grid-column: 6 !important;
  grid-row: 2 !important;
}
body:has(#dayStem[data-element="Water"]) .five-element-orbit .element-fire {
  grid-column: 5 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Water"]) .five-element-orbit .element-earth {
  grid-column: 3 !important;
  grid-row: 3 !important;
}
body:has(#dayStem[data-element="Water"]) .five-element-orbit .element-metal {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.element-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #fffdf8;
  box-shadow: 0 7px 22px rgba(43, 43, 32, 0.07);
  box-sizing: border-box;
}

.five-element-orbit .element-cn,
.five-element-orbit .element-en,
.five-element-orbit .element-circle strong {
  display: block;
  float: none;
  color: inherit;
  font-weight: 600;
  line-height: 1.12;
}

.five-element-orbit .element-cn {
  font-size: 27px;
}

.five-element-orbit .element-en {
  margin-top: 3px;
  font-family: Arial, sans-serif;
  font-size: 18px;
}

.five-element-orbit .element-circle strong {
  margin-top: 6px;
  font-family: Arial, sans-serif;
  font-size: 25px;
}

.element-favorability {
  margin-top: 9px;
  color: #263a31 !important;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  line-height: 1.35;
  white-space: nowrap;
}

.element-favorability[data-status="favorable"] {
  font-weight: 600;
}

/* USD 0.99 basic-personality gate */
.premium-report-section {
  position: relative;
  overflow: hidden;
}

.premium-report-section.is-locked {
  min-height: 360px;
}

.premium-report-section.is-locked > :not(.report-paywall-overlay) {
  filter: blur(5px);
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
}

.report-paywall-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 46px 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(250, 246, 237, 0.12), rgba(250, 246, 237, 0.28));
  pointer-events: none;
}

.report-paywall-card {
  width: min(520px, calc(100% - 28px));
  box-sizing: border-box;
  padding: 24px 26px 20px;
  border: 1px solid rgba(177, 137, 66, 0.5);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 16px 45px rgba(41, 58, 49, 0.18);
  pointer-events: auto;
}

.report-paywall-lock {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border: 1px solid rgba(177, 137, 66, 0.6);
  border-radius: 50%;
  color: #b18942;
  background: #fffdf8;
  box-shadow: 0 9px 28px rgba(41, 58, 49, 0.1);
  font-size: 20px;
}

.report-paywall-overlay h2 {
  margin: 0 0 12px;
  color: #18392c;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 500;
}

.report-paywall-overlay p {
  max-width: 630px;
  margin: 0 auto 18px;
  color: #56635c;
  font-size: 16px;
  line-height: 1.8;
}

.report-paywall-pay,
.report-paywall-check {
  min-width: 250px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.report-paywall-pay {
  padding: 13px 24px;
  border: 1px solid #b89550;
  color: #fffdf8;
  background: #18392c;
  box-shadow: 0 9px 24px rgba(24, 57, 44, 0.18);
  font-weight: 600;
}

.report-paywall-check {
  margin-top: 10px;
  padding: 8px 18px;
  border: 0;
  color: #79633b;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.report-paywall-pay:hover,
.report-paywall-check:hover {
  transform: translateY(-1px);
}

.report-paywall-pay:disabled,
.report-paywall-check:disabled {
  cursor: wait;
  opacity: 0.58;
}

.report-paywall-status {
  min-height: 24px;
  max-width: 620px;
  margin-top: 12px;
  color: #6d675c;
  font-size: 14px;
  line-height: 1.6;
}

.report-paywall-status.is-success { color: #17633f; }
.report-paywall-status.is-error { color: #a54036; }

@media screen and (max-width: 768px) {
  .premium-report-section.is-locked { min-height: 410px; }
  .report-paywall-overlay { padding: 28px 12px; }
  .report-paywall-card { padding: 20px 16px 16px; }
  .report-paywall-overlay p { font-size: 15px; }
  .report-paywall-pay,
  .report-paywall-check { min-width: min(260px, 90%); }

  .five-element-strength {
    position: static;
    margin: 0 0 15px 4px;
    text-align: center;
  }

  .five-element-strength strong { font-size: 22px; }
  .five-element-strength span { font-size: 14px; }

  .five-element-orbit.elements-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 15px 0 !important;
    min-height: 0;
    width: 100% !important;
  }

  .element-circle {
    width: 86px;
    height: 86px;
    border-width: 1.5px;
  }

  .five-element-orbit .element-cn { font-size: 19px; }
  .five-element-orbit .element-en { margin-top: 1px; font-size: 11px; }
  .five-element-orbit .element-circle strong { margin-top: 3px; font-size: 17px; }
  .element-favorability { margin-top: 5px; font-size: 10px; }
}

@media screen and (max-width: 390px) {
  .element-circle {
    width: 72px;
    height: 72px;
  }

  .five-element-orbit .element-cn { font-size: 17px; }
  .five-element-orbit .element-circle strong { font-size: 15px; }
  .element-favorability { font-size: 9px; }
}

@media print {
  .premium-report-section.is-locked {
    display: none !important;
  }

  .five-element-report-card {
    padding: 4mm 5mm !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .five-element-strength {
    top: 19mm;
    left: 7mm;
  }

  .five-element-strength strong { font-size: 15pt; }
  .five-element-strength span { font-size: 9pt; }

  .five-element-orbit.elements-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, auto);
    gap: 3mm 1mm !important;
    min-height: 91mm;
    width: 160mm !important;
    margin: 0 auto !important;
  }

  .element-circle {
    width: 27mm;
    height: 27mm;
    border-width: 0.45mm;
    box-shadow: none;
  }

  .five-element-orbit .element-cn { font-size: 13pt; }
  .five-element-orbit .element-en { margin-top: 0.5mm; font-size: 8pt; }
  .five-element-orbit .element-circle strong { margin-top: 1mm; font-size: 12pt; }
  .element-favorability { margin-top: 1.2mm; font-size: 8pt; }
}


/* SW_REPORT_PRINT_HIDE_MONTHLY_DESTINY_V1 */
@media print {
  .monthly-membership-cta,
  .print-hide-monthly-destiny {
    display: none !important;
  }
}