/* One geometry source for the 887 px reference design, capped at a 540 px canvas. */
.reference-ui {
  --ref-unit: min(1vw, 5.4px);
  --ref-canvas: min(100vw, 540px);
  --ref-primary: var(--primary-color, #3b82f6);
  --ref-secondary: var(--secondary-color, #13b38c);
  --ref-gradient: linear-gradient(115deg, var(--ref-primary), var(--ref-secondary));
  --ref-backdrop: linear-gradient(0deg, #f5f5f5 0, rgba(245,245,245,.95) 6%, transparent 38%), radial-gradient(ellipse at 73% 23%, var(--ref-secondary), transparent 56%), linear-gradient(110deg, var(--ref-primary), #3099d2);
  --ref-bg: #f5f5f5; --ref-card: #fff; --ref-ink: #303030; --ref-copy: #555; --ref-muted: #999; --ref-line: #ededed; --ref-soft: #f7f7f7; --ref-tint: #eef9f5;
  --ref-gutter: calc(var(--ref-unit) * 4.17);
  --ref-card-inset: calc(var(--ref-unit) * 3.95);
  --ref-section-gap: calc(var(--ref-unit) * 3.95);
  --ref-row-gap: calc(var(--ref-unit) * 3.15);
  --ref-small-gap: calc(var(--ref-unit) * 1.2);
  --ref-card-radius: calc(var(--ref-unit) * 1.2);
  --ref-banner-radius: calc(var(--ref-unit) * 2.25);
  --ref-pill-radius: calc(var(--ref-unit) * 8);
  --ref-title-size: calc(var(--ref-unit) * 4.74);
  --ref-heading-size: calc(var(--ref-unit) * 4.28);
  --ref-body-size: calc(var(--ref-unit) * 3.58);
  --ref-caption-size: calc(var(--ref-unit) * 3.15);
  --ref-fine-size: calc(var(--ref-unit) * 2.8);
  --ref-input-size: calc(var(--ref-unit) * 3.6);
  --ref-button-size: calc(var(--ref-unit) * 4.05);
  --ref-amount-size: calc(var(--ref-unit) * 6.75);
  --ref-amount-large: calc(var(--ref-unit) * 9.2);
  --ref-input-height: calc(var(--ref-unit) * 13.64);
  --ref-small-button-height: calc(var(--ref-unit) * 10.5);
  --ref-header-height: calc(var(--ref-unit) * 27.06);
  --ref-header-title-top: calc(var(--ref-unit) * 13.5);
  --ref-nav-height: calc(var(--ref-unit) * 20.18);
  --ref-top-height: var(--ref-header-height); --ref-bottom-height: var(--ref-nav-height);
  --ref-nav-top: calc(var(--ref-unit) * 1.8);
  --ref-nav-icon-width: calc(var(--ref-unit) * 5.97);
  --ref-nav-icon-height: calc(var(--ref-unit) * 6.2);
  --ref-nav-gap: calc(var(--ref-unit) * .5);
  --ref-nav-size: calc(var(--ref-unit) * 3.16);
  --ref-nav-min-item: calc(var(--ref-unit) * 12);
  --ref-action-height: calc(var(--ref-input-height) + var(--ref-card-inset) * 2);
  --ref-overlay: rgba(20,35,55,.48);
  --ref-font: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --flow-primary: var(--ref-primary); --flow-secondary: var(--ref-secondary); --flow-gradient: var(--ref-gradient);
  color: var(--ref-ink); font-family: var(--ref-font); font-size: var(--ref-body-size); font-weight: 400;
}
.reference-ui *, .reference-ui *:before, .reference-ui *:after { box-sizing: border-box; }
.reference-ui :is(button,input,select,textarea) { font-family: var(--ref-font); }
.reference-ui :is(.reference-search-button,.verify-btn,.submit-btn,.pay-btn,.btn-pay,.btn-primary,.profile-btn,.submit,.small-btn,.msg-btn,.kefu-btn-call,.auth-btn-confirm,.contact-action,.flow-primary,.btn) {
  background: var(--ref-gradient)!important; color: #fff!important; border: 0!important; border-radius: var(--ref-pill-radius)!important; box-shadow: none!important;
  font-family: var(--ref-font)!important; font-size: var(--ref-button-size)!important; font-weight: 600!important; text-align: center; text-decoration: none; cursor: pointer;
}
.reference-ui :is(.modern-input,.profile-input,.input,.select,.textarea,.auth-input-box) {
  width: 100%; min-width: 0; min-height: var(--ref-input-height)!important; height: var(--ref-input-height)!important; margin-bottom: var(--ref-row-gap);
  padding: 0 var(--ref-card-inset)!important; border: 1px solid #d5d5d5!important; border-radius: var(--ref-pill-radius)!important; background: #fff!important;
  color: var(--ref-ink)!important; font-size: var(--ref-input-size)!important; font-weight: 400!important; box-shadow: none!important; outline: none;
}
.reference-ui :is(.modern-input,.profile-input,.input,.select,.textarea,.auth-input):focus { border-color: var(--ref-secondary)!important; box-shadow: none!important; }
.reference-ui :is(input,textarea)::placeholder { color: #888!important; font-size: var(--ref-input-size)!important; font-weight: 350!important; opacity: 1; }
.reference-ui .textarea { height: calc(var(--ref-input-height) * 2.5)!important; padding-top: var(--ref-card-inset)!important; border-radius: var(--ref-card-radius)!important; line-height: 1.9; resize: vertical; }
.reference-ui :is(.input-label,.field-label,.form-item>.label) { color: var(--ref-copy)!important; font-size: var(--ref-body-size)!important; font-weight: 500!important; margin-bottom: var(--ref-small-gap)!important; line-height: 1.6; }
.reference-ui :is(.total-price,.total-amount,.amount-num) { color: var(--ref-secondary)!important; font-size: var(--ref-amount-size)!important; font-weight: 600!important; font-family: var(--ref-font)!important; letter-spacing: 0!important; transform: none!important; }
.reference-ui :is(.total-symbol,.total-currency,.currency) { color: var(--ref-secondary)!important; font-size: var(--ref-heading-size)!important; font-weight: 500!important; }
.reference-ui :is(.auth-modal,.kefu-modal-mask,.msg-modal-mask,.template-announcement-mask,.preview-modal) { padding: var(--ref-gutter)!important; background: var(--ref-overlay)!important; backdrop-filter: none!important; -webkit-backdrop-filter: none!important; }
.reference-ui :is(.auth-dialog,.kefu-dialog,.msg-dialog,.template-announcement-dialog) {
  width: calc(var(--ref-canvas) - var(--ref-gutter) * 2)!important; max-width: none!important; max-height: calc(100dvh - var(--ref-gutter) * 2); overflow: auto;
  background: var(--ref-card)!important; border-radius: var(--ref-card-radius)!important; box-shadow: none!important; color: var(--ref-ink)!important;
}
.reference-ui :is(.kefu-dialog,.msg-dialog,.template-announcement-dialog) { padding: calc(var(--ref-card-inset) * 1.5) var(--ref-card-inset)!important; }
.reference-ui :is(.auth-title,.kefu-title,.msg-title,.template-announcement-dialog h2) { color: var(--ref-ink)!important; font-size: var(--ref-heading-size)!important; line-height: 1.6!important; font-weight: 600!important; letter-spacing: 0!important; margin-bottom: var(--ref-row-gap)!important; }
.reference-ui :is(.auth-subtitle,.auth-agree-text,.kefu-desc,.msg-desc,.template-dialog-copy,.template-dialog-list) { font-size: var(--ref-body-size)!important; color: var(--ref-muted)!important; line-height: 1.9!important; font-weight: 400!important; }
.reference-ui :is(.auth-header,.auth-body) { padding: var(--ref-card-inset)!important; }
.reference-ui .auth-header { padding-top: calc(var(--ref-card-inset) * 1.5)!important; padding-bottom: var(--ref-small-gap)!important; }
.reference-ui .auth-input-box { display: flex; align-items: center; }
.reference-ui .auth-input { height: 100%!important; min-width: 0; border: 0!important; background: transparent!important; color: var(--ref-ink)!important; font-size: var(--ref-input-size)!important; }
.reference-ui .auth-agree { margin-top: var(--ref-row-gap)!important; gap: var(--ref-small-gap); align-items: flex-start!important; }
.reference-ui .auth-radio { accent-color: var(--ref-secondary)!important; width: var(--ref-body-size)!important; height: var(--ref-body-size)!important; flex: none; margin-top: calc(var(--ref-unit) * 1)!important; }
.reference-ui .auth-link { color: var(--ref-secondary)!important; font-weight: 500!important; }
.reference-ui .auth-footer { border-top: 1px solid var(--ref-line)!important; padding: var(--ref-card-inset); gap: var(--ref-small-gap); }
.reference-ui :is(.auth-btn-confirm,.auth-btn-cancel) { height: var(--ref-input-height)!important; line-height: var(--ref-input-height)!important; font-size: var(--ref-button-size)!important; border-radius: var(--ref-pill-radius)!important; }
.reference-ui :is(.auth-btn-cancel,.kefu-btn-cancel,.btn-outline,.btn-view,.btn-profile,.btn-go-home) { border: 1px solid #d5d5d5!important; background: #fff!important; color: var(--ref-muted)!important; border-radius: var(--ref-pill-radius)!important; box-shadow: none!important; font-size: var(--ref-body-size)!important; font-weight: 400!important; }
.reference-ui :is(.kefu-btn-call,.kefu-btn-cancel,.msg-btn) { height: var(--ref-input-height)!important; line-height: var(--ref-input-height)!important; min-height: 0!important; margin: var(--ref-row-gap) 0 0!important; padding: 0 var(--ref-card-inset)!important; }
.reference-ui .kefu-phone-num { color: var(--ref-secondary)!important; font-size: var(--ref-amount-size)!important; font-weight: 600!important; margin-bottom: var(--ref-row-gap)!important; letter-spacing: 0!important; }
.reference-ui :is(.kefu-icon-circle,.msg-icon) { width: calc(var(--ref-unit) * 12)!important; height: calc(var(--ref-unit) * 12)!important; background: var(--ref-tint)!important; color: var(--ref-secondary)!important; border-radius: 50%!important; margin-bottom: var(--ref-row-gap)!important; }
.reference-ui .template-dialog-date { color: var(--ref-muted)!important; font-size: var(--ref-caption-size)!important; margin-bottom: var(--ref-row-gap)!important; }
.reference-ui .template-dialog-list { padding: var(--ref-row-gap) 0!important; border-color: var(--ref-line)!important; }
.reference-ui .template-dialog-list time { font-size: var(--ref-caption-size)!important; }
.reference-ui .template-dialog-close { top: var(--ref-small-gap)!important; right: var(--ref-small-gap)!important; color: var(--ref-muted)!important; font-size: var(--ref-amount-size)!important; width: calc(var(--ref-unit) * 8)!important; height: calc(var(--ref-unit) * 8)!important; line-height: 1!important; background: transparent!important; }
.reference-ui .preview-img { max-width: calc(var(--ref-canvas) - var(--ref-gutter) * 2)!important; max-height: 75dvh!important; object-fit: contain; border-radius: var(--ref-card-radius)!important; }
.reference-ui .close-tip { color: #fff!important; font-size: var(--ref-caption-size)!important; line-height: 1.9; padding: var(--ref-card-inset); }
.reference-ui :is(.disabled,button:disabled) { cursor: default!important; }
.reference-ui :is(.submit-btn.disabled,.pay-btn.disabled,.profile-btn.disabled,.submit.disabled) { background: #c9d4d2!important; }
.reference-ui .btn-outline.disabled { color: #b6b6b6!important; border-color: #e5e5e5!important; background: var(--ref-soft)!important; }
@media (prefers-reduced-motion: reduce) { .reference-ui * { animation: none!important; transition: none!important; } }

/* Page shell: the same 887 reference canvas, not an independent desktop card system. */
html.flow-reference { --ref-top-height: calc(var(--ref-unit) * 27.06); --ref-bottom-height: calc(var(--ref-unit) * 20.18); }
html.flow-reference body { padding-top: calc(var(--ref-top-height) + env(safe-area-inset-top)); padding-bottom: calc(var(--ref-bottom-height) + env(safe-area-inset-bottom)); }
html.flow-reference .flow-topbar { height: calc(var(--ref-top-height) + env(safe-area-inset-top)); align-items: flex-start; padding-top: calc(var(--ref-header-title-top) + env(safe-area-inset-top)); }
html.flow-reference .flow-topbar h1 { font-size: var(--ref-title-size); line-height: 1.3; font-weight: 600; letter-spacing: .25vw; padding: 0 var(--ref-gutter); }
html.flow-reference .flow-back { left: var(--ref-gutter); bottom: calc(var(--ref-unit) * 2.2); font-size: var(--ref-caption-size); }
html.flow-reference .flow-back>span { font-size: calc(var(--ref-unit) * 7); }
html.flow-reference .flow-nav { height: calc(var(--ref-bottom-height) + env(safe-area-inset-bottom)); padding: var(--ref-nav-top) 0 env(safe-area-inset-bottom); gap: 0; }
html.flow-reference .flow-nav-item { gap: var(--ref-nav-gap); font-size: var(--ref-nav-size); min-height: var(--ref-nav-min-item); }
html.flow-reference .flow-nav-item>img { display: block; width: var(--ref-nav-icon-width); height: var(--ref-nav-icon-height); object-fit: contain; }
html.flow-reference .flow-nav-item>svg { display: none; }
html.flow-reference :is(.premium-query-container,.premium-page,.premium-pay-container,.premium-detail-page,.page,.page-container) { min-height: calc(100vh - var(--ref-top-height) - var(--ref-bottom-height)); padding-bottom: var(--ref-section-gap)!important; }
html.flow-reference :is(.query-header,.header-bg,.pay-header,.status-header,.page>.header) { background: var(--ref-backdrop)!important; border-radius: 0!important; }
html.flow-reference .query-header { padding: var(--ref-section-gap) var(--ref-gutter) calc(var(--ref-section-gap) * 2.4)!important; }
html.flow-reference .result-list { margin-top: calc(var(--ref-unit) * -4); padding: 0 var(--ref-gutter) var(--ref-section-gap)!important; }
html.flow-reference :is(.company-card,.content-card,.vip-card,.info-card,.form-card,.order-item,.receipt-card,.progress-card,.profile-card,.page>.card,.empty-state) { border-radius: var(--ref-card-radius)!important; box-shadow: 0 0 calc(var(--ref-unit) * 1.2) #16303a0a!important; }
html.flow-reference :is(.company-card,.content-card,.info-card,.form-card,.order-item,.receipt-card,.progress-card,.profile-card,.page>.card) { margin-left: var(--ref-gutter)!important; margin-right: var(--ref-gutter)!important; padding: var(--ref-card-inset)!important; }
html.flow-reference .vip-card { margin: calc(var(--ref-unit) * -4) var(--ref-gutter) var(--ref-section-gap)!important; }
html.flow-reference :is(.company-name,.vip-card .company-name) { font-size: calc(var(--ref-unit) * 4.28)!important; line-height: 1.5!important; font-weight: 600!important; }
html.flow-reference :is(.info-label,.label) { font-size: var(--ref-caption-size)!important; color: var(--ref-muted)!important; font-weight: 400!important; }
html.flow-reference :is(.info-value,.value) { font-size: var(--ref-body-size)!important; color: var(--ref-copy)!important; font-weight: 400!important; line-height: 1.6!important; }
html.flow-reference .order-item .value.highlight-price { color: var(--ref-secondary)!important; font-size: calc(var(--ref-unit) * 4.2)!important; font-weight: 600!important; }
html.flow-reference :is(.total-price,.total-amount,.amount-num,.pay-amount) { font-family: var(--ref-font)!important; font-size: var(--ref-amount-size)!important; font-weight: 600!important; letter-spacing: 0!important; }
html.flow-reference .pay-amount { font-size: var(--ref-amount-large)!important; }
html.flow-reference :is(.action-bar,.bottom-pay-bar) { position: fixed!important; left: 50%!important; right: auto!important; transform: translateX(-50%)!important; bottom: calc(var(--ref-bottom-height) + env(safe-area-inset-bottom))!important; width: 100%!important; max-width: 540px!important; min-height: var(--ref-action-height)!important; padding: var(--ref-card-inset) var(--ref-gutter)!important; z-index: 1050!important; }
html.flow-reference .premium-page, html.flow-reference .premium-pay-container, html.flow-reference .premium-detail-page { padding-bottom: calc(var(--ref-action-height) + var(--ref-section-gap))!important; }
html.flow-reference .item-page .action-bar { position: fixed!important; }
html.flow-reference :is(.status-header,.pay-header,.header-bg) { padding-left: var(--ref-gutter)!important; padding-right: var(--ref-gutter)!important; }
html.flow-reference :is(.header-title,.status-text,.pay-status-text) { font-size: var(--ref-title-size)!important; font-weight: 600!important; }
html.flow-reference :is(.header-subtitle,.status-desc,.pay-countdown) { font-size: var(--ref-caption-size)!important; line-height: 1.8!important; }
html.flow-reference :is(.kefu-modal-mask,.auth-modal,.msg-modal-mask,.preview-modal,.template-announcement-mask) { z-index: 2000!important; }
html.flow-reference :is(.kefu-dialog,.auth-dialog,.msg-dialog,.template-announcement-dialog) { border-radius: var(--ref-card-radius)!important; }
html.flow-reference :is(.profile-card,.profile-input,.profile-btn) { max-width: none!important; }
html.flow-reference .profile-input { margin-top: var(--ref-small-gap)!important; }
html.flow-reference :is(.profile-btn,.submit-btn,.pay-btn,.btn-primary,.btn-outline) { min-height: var(--ref-input-height)!important; line-height: var(--ref-input-height)!important; padding: 0 var(--ref-card-inset)!important; font-size: var(--ref-button-size)!important; }
html.flow-reference .contact-profile { padding: var(--ref-section-gap) var(--ref-gutter) calc(var(--ref-section-gap) * 2)!important; background: var(--ref-backdrop)!important; border-radius: 0!important; }
html.flow-reference .contact-main { margin: calc(var(--ref-unit) * -4) var(--ref-gutter) var(--ref-section-gap)!important; padding-bottom: var(--ref-bottom-height)!important; }
html.flow-reference :is(.contact-card,.contact-row) { border-radius: var(--ref-card-radius)!important; }
html.flow-reference .contact-card { padding: var(--ref-card-inset)!important; margin-bottom: var(--ref-section-gap)!important; box-shadow: 0 0 calc(var(--ref-unit) * 1.2) #16303a0a!important; }
html.flow-reference .contact-card h2 { font-size: var(--ref-heading-size)!important; font-weight: 600!important; }
html.flow-reference .contact-card p, html.flow-reference .contact-state { font-size: var(--ref-caption-size)!important; line-height: 1.9!important; color: var(--ref-muted)!important; }
html.flow-reference .contact-row { padding: var(--ref-row-gap) var(--ref-small-gap)!important; border-color: var(--ref-line)!important; background: var(--ref-soft)!important; }
html.flow-reference .contact-action { min-height: var(--ref-input-height)!important; padding: 0 var(--ref-card-inset)!important; font-size: var(--ref-button-size)!important; }
html.flow-reference :is(.hero,.card,.share-preview) { border-radius: var(--ref-card-radius)!important; box-shadow: 0 0 calc(var(--ref-unit) * 1.2) #16303a0a!important; }
html.flow-reference .page { padding: var(--ref-section-gap) var(--ref-gutter) calc(var(--ref-bottom-height) + var(--ref-section-gap))!important; }
html.flow-reference .hero { padding: calc(var(--ref-card-inset) * 1.5) var(--ref-card-inset)!important; background: var(--ref-gradient)!important; }
html.flow-reference .hero h1 { font-size: var(--ref-heading-size)!important; font-weight: 600!important; }
html.flow-reference .hero p,.flow-reference .share-desc { font-size: var(--ref-caption-size)!important; line-height: 1.9!important; }
html.flow-reference .card { margin-top: var(--ref-section-gap)!important; padding: var(--ref-card-inset)!important; }
html.flow-reference .share-preview { padding: var(--ref-row-gap)!important; background: var(--ref-soft)!important; border-color: var(--ref-line)!important; }
html.flow-reference .share-title { font-size: var(--ref-body-size)!important; font-weight: 600!important; }
html.flow-reference .btn { min-height: var(--ref-input-height)!important; margin-top: var(--ref-row-gap)!important; }