.referral-promo-strip {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 12px;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: left;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
}

.referral-promo-strip--success {
  background: linear-gradient(90deg, #ecfdf5, #d1fae5);
  border: 1px solid #86efac;
  color: #14532d;
}

.referral-promo-strip--error {
  background: #fff5f5;
  border: 1px solid #e8a0a0;
  color: #8b0000;
}

.referral-promo-strip-icon {
  flex: 0 0 auto;
  line-height: 1.45;
}

.referral-promo-strip-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Shared panel selectors for flush-top placement. */
:is(
  #index-page-wrapper.form-page-panel,
  #index-page-wrapper.compat-form-page-panel,
  body.wgt-zhanguatai-page .panel,
  body.zrg-intake-page .panel,
  body.zrg-pay-page .panel,
  #preview-page-wrapper.price-preview-panel,
  body.preview-page #preview-page-wrapper.price-preview-panel,
  #preview-page-wrapper.progress-page-panel,
  body.progress-page #preview-page-wrapper.progress-page-panel,
  #preview-page-wrapper.result-page-panel,
  body.result-page #preview-page-wrapper.result-page-panel,
  #preview-page-wrapper.wgt-result-panel,
  #zrg-preview-page-wrapper.zrg-result-panel,
  #compat-preview-wrapper.compat-price-preview-panel,
  body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel,
  #compat-preview-wrapper.compat-progress-page-panel,
  body.compat-progress-page #compat-preview-wrapper.compat-progress-page-panel,
  #preview-page-wrapper,
  .wgt-pay-panel,
  body.wgt-guaxiang-page .page
) > .referral-promo-strip {
  margin-top: calc(-1 * min(2.5vh, 26px));
  margin-bottom: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: var(--zh-outer-r, var(--guaxiang-outer-r, 20px));
  border-top-right-radius: var(--zh-outer-r, var(--guaxiang-outer-r, 20px));
}

/* When account bar is above, it owns the flush top; referral stacks beneath. */
:is(
  #index-page-wrapper.form-page-panel,
  #index-page-wrapper.compat-form-page-panel,
  body.wgt-zhanguatai-page .panel,
  body.zrg-intake-page .panel,
  body.zrg-pay-page .panel,
  #preview-page-wrapper.price-preview-panel,
  body.preview-page #preview-page-wrapper.price-preview-panel,
  #preview-page-wrapper.progress-page-panel,
  body.progress-page #preview-page-wrapper.progress-page-panel,
  #preview-page-wrapper.result-page-panel,
  body.result-page #preview-page-wrapper.result-page-panel,
  #preview-page-wrapper.wgt-result-panel,
  #zrg-preview-page-wrapper.zrg-result-panel,
  #compat-preview-wrapper.compat-price-preview-panel,
  body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel,
  #compat-preview-wrapper.compat-progress-page-panel,
  body.compat-progress-page #compat-preview-wrapper.compat-progress-page-panel,
  #preview-page-wrapper,
  .wgt-pay-panel,
  body.wgt-guaxiang-page .page
) > .account-status-bar ~ .referral-promo-strip {
  margin-top: 0;
  border-top: 1px solid #86efac;
  border-left: none;
  border-right: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

:is(
  #index-page-wrapper.form-page-panel,
  #index-page-wrapper.compat-form-page-panel,
  body.wgt-zhanguatai-page .panel,
  body.zrg-intake-page .panel,
  body.zrg-pay-page .panel
) > .account-status-bar:has(~ .referral-promo-strip) {
  margin-bottom: 0;
}

.funnel-top-strips > .referral-promo-strip:first-child:last-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

@media (max-width: 768px) {
  :is(
    #index-page-wrapper.form-page-panel,
    #index-page-wrapper.compat-form-page-panel,
    body.wgt-zhanguatai-page .panel,
    body.zrg-intake-page .panel,
    body.zrg-pay-page .panel,
    #preview-page-wrapper.price-preview-panel,
    body.preview-page #preview-page-wrapper.price-preview-panel,
    #preview-page-wrapper.progress-page-panel,
    body.progress-page #preview-page-wrapper.progress-page-panel,
    #preview-page-wrapper.result-page-panel,
    body.result-page #preview-page-wrapper.result-page-panel,
    #preview-page-wrapper.wgt-result-panel,
    #zrg-preview-page-wrapper.zrg-result-panel,
    #compat-preview-wrapper.compat-price-preview-panel,
    body.compat-price-page #compat-preview-wrapper.compat-price-preview-panel,
    #compat-preview-wrapper.compat-progress-page-panel,
    body.compat-progress-page #compat-preview-wrapper.compat-progress-page-panel,
    #preview-page-wrapper,
    .wgt-pay-panel,
    body.wgt-guaxiang-page .page
  ) > .referral-promo-strip {
    margin-top: calc(-1 * 2.5dvh);
  }
}

:is(.bzf-shell, .wgt-shell, .zrg-shell) > .referral-promo-strip {
  border-top-left-radius: clamp(18px, 5.5cqw, 24px);
  border-top-right-radius: clamp(18px, 5.5cqw, 24px);
}

:is(.bzf-shell, .wgt-shell, .zrg-shell) > .account-status-bar ~ .referral-promo-strip {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#account-portal-wrapper > .referral-promo-strip {
  margin-top: 0;
  border-top-left-radius: clamp(14px, 3.2vw, 24px);
  border-top-right-radius: clamp(14px, 3.2vw, 24px);
}

@media (max-width: 420px) {
  .referral-promo-strip {
    font-size: 0.82rem;
    padding: 7px 10px;
  }
}

/* Inside .funnel-top-strips — must win over standalone strip rules above */
.funnel-top-strips > .referral-promo-strip {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

.funnel-top-strips > .account-status-bar + .referral-promo-strip {
  margin-top: 0;
  border-top: 1px solid #86efac;
}

.funnel-top-strips > .referral-promo-strip:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}