/* 慧緣堂 landing / mega-tile theme — matches pre-brand-pack home_unified :root */
:root {
  --mega-bg: #211c18;
  --mega-bg-active: #161310;
  --mega-text: #fff8e8;
  --mega-sub: rgba(255, 248, 232, 0.92);
  --page-bg: #ece5d8;
  --portal-bazi-accent: #5a0c0c;
  --landing-footer-text: #1c1917;
  --portal-bazi-red-mid: #b90000;
  --portal-bazi-red-hi: #b22222;
  --portal-bazi-bottom-accent: #6b1414;
  --brand-font-stack: "Noto Serif TC", "PMingLiU", "Songti TC", serif;
  /* Placeholder behind flow panel header art (matches gen2 near-black tops). */
  --flow-panel-underlay: #140e06;
}

body {
  font-family: var(--brand-font-stack);
}

/* Square check badges on payment benefit lists (matches prior ✅ look). */
.brand-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.28em;
  border-radius: 0.22em;
  background: #22a84a;
  color: #fff;
  font-size: 0.92em;
  font-weight: 900;
  line-height: 1;
  vertical-align: -0.08em;
  flex-shrink: 0;
}
.brand-check::before {
  content: "✓";
  font-size: 0.78em;
  transform: translateY(0.02em);
}

/*
 * Standardized top clearance for HYT gen2 lotus-header flow art across
 * BZF · WGT · ZRG · CPT · GRT · 問事齋. Spacer tracks panel width (cqw)
 * because art uses background-size: 100% auto — fixed px under-clears on
 * wider panels (BZF/CPT payment were 620px). Reference: WGT progress
 * (149px at 439px panel ≈ short gap below the tagline, with the account
 * strip sitting on the art above it).
 */
:root {
  --hyt-flow-panel-max: 439px;
  --hyt-flow-heading-spacer: 34cqw;
  --hyt-flow-heading-spacer-min: 108px;
}

body.preview-page #preview-page-wrapper.price-preview-panel,
body.price-page #preview-page-wrapper.price-preview-panel,
body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel,
body.form-step1 #index-page-wrapper.form-page-panel,
body.form-tabs-page #index-page-wrapper.form-page-panel,
body.form-step2 #index-page-wrapper.form-page-panel,
body.compat-input-page #index-page-wrapper.compat-form-page-panel,
body.progress-page #preview-page-wrapper,
body.compat-progress-page #compat-preview-wrapper.compat-progress-page-panel,
body.result-page #preview-page-wrapper,
body.zrg-intake-page .panel,
body.zrg-progress-page #preview-page-wrapper,
body.zrg-result-page #zrg-preview-page-wrapper,
body.wgt-zhanguatai-page .panel,
body.wgt-guaxiang-page .page,
body.wgt-progress-page #preview-page-wrapper,
body.wgt-result-page #preview-page-wrapper,
.wgt-pay-panel,
body.xiaoliuren-page .panel,
body.fb-page .fb-panel {
  container-type: inline-size;
  container-name: hyt-flow-panel;
}

/* BZF + CPT payment were 620px; match WGT so gen2 art clears the same. */
body.preview-page #preview-page-wrapper.price-preview-panel,
body.price-page #preview-page-wrapper.price-preview-panel,
body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel {
  width: min(95vw, var(--hyt-flow-panel-max)) !important;
  max-width: var(--hyt-flow-panel-max) !important;
  min-width: 0 !important;
}

body.form-step1 .form-heading-spacer,
body.form-tabs-page .form-heading-spacer,
body.form-step2 .form-heading-spacer,
body.compat-input-page .form-heading-spacer,
body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel .price-heading-spacer,
body.compat-progress-page .progress-heading-spacer,
body.preview-page .price-heading-spacer,
body.price-page .price-heading-spacer,
body.progress-page .progress-heading-spacer,
body.result-page .result-heading-spacer,
body.zrg-intake-page .zrg-heading-spacer,
body.zrg-intake-page.zrg-pay-page .zrg-heading-spacer,
body.zrg-progress-page .progress-heading-spacer,
body.zrg-result-page .zrg-result-heading-spacer,
body.wgt-zhanguatai-page .wgt-zhanguatai-heading-spacer,
body.wgt-guaxiang-page .wgt-guaxiang-heading-spacer,
body.wgt-progress-page .progress-heading-spacer,
body.wgt-result-page .wgt-result-heading-spacer,
.wgt-pay-heading-spacer,
body.xiaoliuren-page .xlr-heading-spacer {
  height: 149px; /* fallback when cqw unsupported — match WGT progress */
  min-height: var(--hyt-flow-heading-spacer-min);
  height: max(var(--hyt-flow-heading-spacer-min), var(--hyt-flow-heading-spacer));
}

/*
 * 問事齋: same landing-chrome clearance as /guest · 緣主帳戶 (188px), not the
 * narrower product-flow cqw spacer — header art needs the taller gap.
 */
body.fb-page .fb-heading-spacer {
  height: 188px;
  min-height: 172px;
}
@media (max-width: 768px) {
  body.fb-page .fb-heading-spacer {
    height: 22.5vh;
    min-height: 130px;
  }
}

/*
 * Frameless funnel panels: the gen2 art already carries its own gold frame
 * (calligraphy, bamboo, seal), so a 3px CSS hairline double-frames it. Panels
 * now read like /guest and 緣主帳戶中心 — radius plus soft shadow, no border.
 * Inner radii stay smaller than the panel's own radius (the templates' default);
 * matching them would put two identical curves on top of each other and the
 * dark layer behind would fringe through at every corner.
 */
body.preview-page #preview-page-wrapper.price-preview-panel,
body.price-page #preview-page-wrapper.price-preview-panel,
body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel,
body.form-step1 #index-page-wrapper.form-page-panel,
body.form-tabs-page #index-page-wrapper.form-page-panel,
body.form-step2 #index-page-wrapper.form-page-panel,
body.compat-input-page #index-page-wrapper.compat-form-page-panel,
body.progress-page #preview-page-wrapper.progress-page-panel,
body.compat-progress-page #compat-preview-wrapper.compat-progress-page-panel,
body.result-page #preview-page-wrapper.result-page-panel,
body.zrg-intake-page .panel,
body.zrg-progress-page #preview-page-wrapper,
body.zrg-result-page #zrg-preview-page-wrapper,
body.wgt-zhanguatai-page .panel,
body.wgt-guaxiang-page .page,
body.wgt-progress-page #preview-page-wrapper,
body.wgt-result-page #preview-page-wrapper,
.wgt-pay-panel,
body.xiaoliuren-page .panel,
body.fb-page .fb-panel {
  border: 0 !important;
  /* Warm-tinted and a touch stronger than the stock 0 20px 40px/0.08: the
     frameless panel leans on the shadow alone to lift off the stone. */
  box-shadow: 0 16px 36px rgba(62, 42, 18, 0.18);
  --hyt-flow-bar-bg: #f7f3ea;
}

/*
 * Only the panel draws a curve; its overflow: hidden rounds whatever runs into
 * it. The sheet's own 17px top radius ended ~1px short of that clip, leaving a
 * notch on the side edges. WGT/ZRG progress, ZRG intake, and 問事齋 already ship
 * square here, which is why they read clean.
 */
body.form-step1 #index-page-wrapper.form-page-panel .form-main-sheet,
body.form-tabs-page #index-page-wrapper.form-page-panel .form-main-sheet,
body.form-step2 #index-page-wrapper.form-page-panel .form-main-sheet,
body.compat-input-page #index-page-wrapper.compat-form-page-panel .form-main-sheet,
body.preview-page #preview-page-wrapper.price-preview-panel .price-main-sheet,
body.price-page #preview-page-wrapper.price-preview-panel .price-main-sheet,
body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel .price-main-sheet,
body.progress-page #preview-page-wrapper .loading-content,
body.compat-progress-page #compat-preview-wrapper .loading-content,
body.zrg-progress-page #preview-page-wrapper .loading-content,
body.wgt-progress-page #preview-page-wrapper .loading-content,
body.result-page #preview-page-wrapper.result-page-panel #final-report-actions,
body.wgt-result-page #preview-page-wrapper #wgt-final-report-actions,
body.zrg-result-page #zrg-preview-page-wrapper #zrg-final-report-actions,
body.zrg-intake-page .panel .workspace,
body.zrg-intake-page.zrg-pay-page .panel #zrg-pay-root > .hero,
body.wgt-zhanguatai-page .panel .workspace,
body.wgt-guaxiang-page .page > .hero,
body.xiaoliuren-page .panel .workspace,
.wgt-pay-panel .wgt-pay-sheet {
  border-radius: 0 !important;
}

/*
 * 問事齋: opaque white card over header art (same landing chrome as /guest).
 * Art uses cover on a 460px panel; black canvas fill keeps uncovered areas dark.
 */
body.fb-page .fb-panel::after {
  background-color: #000 !important;
  background-size: cover !important;
  background-position: center top !important;
}

body.fb-page .fb-panel .fb-hero,
body.fb-page .fb-panel .fb-body {
  background: rgba(255, 255, 255, 0.98) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Square top against the header art; match panel bottom radius so Chrome AA
   does not fringe white points outside the clip (same as /guest #guest-card). */
body.fb-page .fb-panel .fb-body {
  border-radius: 0 0 clamp(14px, 3.2vw, 24px) clamp(14px, 3.2vw, 24px) !important;
  margin-bottom: 0;
  padding-bottom: 0;
}

/*
 * Bottom arcs use the same treatment as 問事齋: keep each translucent sheet
 * unchanged through most of its height, then fade an opaque copy of its actual
 * flattened colour over the final 22%. The opaque end prevents the sheet from
 * compositing against the stone inside Chrome's antialiased panel clip, while
 * leaving the background watermark visible above the ramp.
 *
 * 八字坊 / 合婚合夥 use 98% white over #8b0000, which resolves to #fdfafa.
 */
:is(
  body.form-step1 #index-page-wrapper.form-page-panel .form-main-sheet,
  body.form-tabs-page #index-page-wrapper.form-page-panel .form-main-sheet,
  body.form-step2 #index-page-wrapper.form-page-panel .form-main-sheet,
  body.compat-input-page #index-page-wrapper.compat-form-page-panel .form-main-sheet,
  body.preview-page #preview-page-wrapper.price-preview-panel .price-main-sheet,
  body.price-page #preview-page-wrapper.price-preview-panel .price-main-sheet,
  body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel .price-main-sheet,
  body.progress-page #preview-page-wrapper .loading-content,
  body.compat-progress-page #compat-preview-wrapper .loading-content,
  body.result-page #preview-page-wrapper.result-page-panel #final-report-actions
) {
  background-image: linear-gradient(
    to bottom,
    transparent 0 55%,
    #fdfafa 78% 100%
  ) !important;
}

/* 問卦台 progress uses 98% white over its gold canvas. */
body.wgt-progress-page #preview-page-wrapper .loading-content {
  background-image: linear-gradient(
    to bottom,
    transparent 0 55%,
    #fefdfb 78% 100%
  ) !important;
}

/*
 * 問卦台 潤金 already uses a translucent cream gradient rather than a background
 * colour. Keep that original layer beneath the opaque corner ramp.
 */
.wgt-pay-panel .wgt-pay-sheet {
  background-image:
    linear-gradient(to bottom, transparent 0 55%, #fdf5e3 78% 100%),
    linear-gradient(rgba(255, 248, 232, 0.97), rgba(255, 248, 232, 0.97)) !important;
}

/* Result sheets sit over the warm-gold lower canvas. */
:is(
  body.wgt-result-page #preview-page-wrapper #wgt-final-report-actions,
  body.zrg-result-page #zrg-preview-page-wrapper #zrg-final-report-actions
) {
  background-image: linear-gradient(
    to bottom,
    transparent 0 55%,
    #fefefc 78% 100%
  ) !important;
}

/* 擇日閣 progress uses 98% white over its green canvas. */
body.zrg-progress-page #preview-page-wrapper .loading-content {
  background-image: linear-gradient(
    to bottom,
    transparent 0 55%,
    #fbfcfb 78% 100%
  ) !important;
}

/*
 * Same for 緣主帳戶中心, which carried a 17px top radius inside a panel clipping
 * at 20px — exactly how .account-hero-panel (square) sits in
 * .account-portal-wrapper.
 */
:is(
  body.preview-page #preview-page-wrapper.price-preview-panel,
  body.price-page #preview-page-wrapper.price-preview-panel,
  body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel,
  body.form-step1 #index-page-wrapper.form-page-panel,
  body.form-tabs-page #index-page-wrapper.form-page-panel,
  body.form-step2 #index-page-wrapper.form-page-panel,
  body.compat-input-page #index-page-wrapper.compat-form-page-panel,
  body.progress-page #preview-page-wrapper,
  body.compat-progress-page #compat-preview-wrapper,
  body.result-page #preview-page-wrapper,
  body.zrg-intake-page .panel,
  body.zrg-progress-page #preview-page-wrapper,
  body.zrg-result-page #zrg-preview-page-wrapper,
  body.wgt-zhanguatai-page .panel,
  body.wgt-guaxiang-page .page,
  body.wgt-progress-page #preview-page-wrapper,
  body.wgt-result-page #preview-page-wrapper,
  .wgt-pay-panel,
  body.xiaoliuren-page .panel,
  body.fb-page .fb-panel
) :is(.funnel-top-strips, .account-status-bar) {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/*
 * Top arc: 緣主帳戶中心 ships rgba(255, 255, 255, 0.9), and with the art held out
 * of the arc (see below) the translucent bar mixes with the stone there instead
 * of the art — a ~250 hairline, the same 1px mismatch as the dark thread it
 * replaced, only bright. It has to be opaque for the arc to read as a plain fade
 * from bar to stone; the warm cream is chosen to sit with the frameless panels'
 * near-white sheets rather than the cool #e6e6e6 that 0.9 white over the black
 * art used to flatten to. The variable lives on the funnel panels only, so
 * landing shells and 帳戶中心 — where the bar really does sit over live art —
 * keep the frosted version through the fallback.
 */
.account-status-bar {
  background: var(--hyt-flow-bar-bg, rgba(255, 255, 255, 0.9)) !important;
}

/*
 * Root cause of the dark hairline on every corner arc: Chrome antialiases the
 * rounded clip per painted layer, so two stacked opaque layers composite as
 *   c·front + (1 − c)·c·rear + (1 − c)²·backdrop
 * and that middle term paints ~25% of the rear layer along the arc. Here the
 * rear layers are the header art (near-black) and the #8b0000 fill, hence a
 * dark thread the front sheet/status bar can never cover — no radius on the
 * front layer removes it, only keeping the rear layer out of the arc does.
 * Panels clip at 20px, so 24px pulls both pseudo layers clear of the arc while
 * staying hidden behind the sheet and the status bar. Keep it close to 20px:
 * on 問事齋 and 卦象, where no status bar covers the top, the art's own arc is
 * what the eye reads as the panel corner.
 */
:is(
  body.preview-page #preview-page-wrapper.price-preview-panel,
  body.price-page #preview-page-wrapper.price-preview-panel,
  body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel,
  body.form-step1 #index-page-wrapper.form-page-panel,
  body.form-tabs-page #index-page-wrapper.form-page-panel,
  body.form-step2 #index-page-wrapper.form-page-panel,
  body.compat-input-page #index-page-wrapper.compat-form-page-panel,
  body.progress-page #preview-page-wrapper,
  body.compat-progress-page #compat-preview-wrapper,
  body.result-page #preview-page-wrapper,
  body.zrg-intake-page .panel,
  body.zrg-progress-page #preview-page-wrapper,
  body.zrg-result-page #zrg-preview-page-wrapper,
  body.wgt-zhanguatai-page .panel,
  body.wgt-guaxiang-page .page,
  body.wgt-progress-page #preview-page-wrapper,
  body.wgt-result-page #preview-page-wrapper,
  .wgt-pay-panel,
  body.xiaoliuren-page .panel,
  body.fb-page .fb-panel
)::before,
:is(
  body.preview-page #preview-page-wrapper.price-preview-panel,
  body.price-page #preview-page-wrapper.price-preview-panel,
  body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel,
  body.form-step1 #index-page-wrapper.form-page-panel,
  body.form-tabs-page #index-page-wrapper.form-page-panel,
  body.form-step2 #index-page-wrapper.form-page-panel,
  body.compat-input-page #index-page-wrapper.compat-form-page-panel,
  body.progress-page #preview-page-wrapper,
  body.compat-progress-page #compat-preview-wrapper,
  body.result-page #preview-page-wrapper,
  body.zrg-intake-page .panel,
  body.zrg-progress-page #preview-page-wrapper,
  body.zrg-result-page #zrg-preview-page-wrapper,
  body.wgt-zhanguatai-page .panel,
  body.wgt-guaxiang-page .page,
  body.wgt-progress-page #preview-page-wrapper,
  body.wgt-result-page #preview-page-wrapper,
  .wgt-pay-panel,
  body.xiaoliuren-page .panel,
  body.fb-page .fb-panel
)::after {
  border-radius: 24px !important;
}

/*
 * 問卦台 潤金 is the one panel that fills with its own background-color instead of
 * a ::before, so the gold sat inside the arc no matter what the pseudos did and
 * threaded the corners dark. Its ::before is unused — move the fill there so it
 * can be held back with the art. Both layers keep z-index 0 and paint in order,
 * which leaves the .wgt-pay-sheet (z-index 1) on top as before.
 */
.wgt-pay-panel {
  background-color: transparent !important;
}

.wgt-pay-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #b8963d;
  pointer-events: none;
}

/*
 * Bottom padding on these panels existed to show the border's gold edge under
 * the sheet; without a border it reads as a stray strip.
 */
body.wgt-guaxiang-page .page {
  padding-bottom: 0;
}

/*
 * One window surround for every HYT page. Funnel pages shipped white, which
 * left almost no separation between the near-black art panel and the window;
 * the landing, /guest, and 緣主帳戶中心 already use this warm stone.
 */
body.form-tabs-page,
body.form-step1,
body.form-step2,
body.preview-page,
body.price-page,
body.progress-page,
body.result-page,
body.compat-input-page,
body.compat-price-page,
body.compat-progress-page,
body.zrg-intake-page,
body.zrg-progress-page,
body.zrg-result-page,
body.wgt-zhanguatai-page,
body.wgt-guaxiang-page,
body.wgt-progress-page,
body.wgt-result-page,
body.xiaoliuren-page,
body.xlr-gate-page,
body.fb-page,
body:has(.wgt-pay-panel) {
  background-color: var(--page-bg, #f5f2eb) !important;
}