/* Member pages follow the compact blue member layout. Admin styles stay in styles.css. */
body.reference-member {
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #eff6ff;
  --green: #2e7d32;
  --ink: #333;
  --muted: #666;
  --border: #ddd;
  --surface: #fff;
  --bg: #f5f5f5;
  --radius: 3px;
  --shadow: none;
  margin: 0;
  max-width: 100%;
  background: #f5f5f5;
  color: #333;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}
.reference-member h1,
.reference-member h2,
.reference-member h3,
.reference-member h4 { letter-spacing: 0; color: #333; }
.reference-member h1 { font-size: 20px; }
.reference-member h2 { font-size: 16px; }
.reference-member h3 { font-size: 16px; }
.reference-member p { font-size: 15px; line-height: 1.8; }
.reference-member a:focus-visible,
.reference-member button:focus-visible { outline-color: #83a9ed; }
.reference-member ::selection { background: #dbeafe; color: #1e40af; }

.reference-member .ref-header {
  width: 100%;
  min-height: 52px;
  background: #2563eb;
  color: #fff;
  border: 0;
  position: relative;
  z-index: 20;
}
.reference-member .ref-header-inner {
  min-height: 52px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.reference-member .ref-site-name {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.reference-member .ref-account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  text-align: right;
  flex-shrink: 0;
}
.reference-member .ref-account a,
.reference-member .ref-account button {
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.8;
}
.reference-member .ref-account a:hover,
.reference-member .ref-account button:hover { text-decoration: underline; }
.reference-member .ref-page,
.reference-member .page {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 15px 40px;
  min-height: calc(100vh - 130px);
}
.reference-member .ref-page > *,
.reference-member .page > * { min-width: 0; max-width: 100%; }
.reference-member .ref-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 10px 20px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #666;
  font-size: 13px;
}
.reference-member .ref-notice > strong {
  color: #b52020;
  font-size: 15px;
  white-space: nowrap;
  font-weight: 700;
}
.reference-member .ref-notice > span { flex: 1; text-align: right; overflow-wrap: anywhere; }
.reference-member .ref-notice p { margin: 0; font-size: 13px; }
.reference-member .ref-tabs,
.reference-member .tabs,
.reference-member .auth-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 15px;
  border-bottom: 2px solid #2563eb;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.reference-member .ref-tab,
.reference-member .tab,
.reference-member .auth-tabs > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 26px;
  border: 1px solid #ccc;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  color: #666;
  background: #e9e9e9;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.reference-member .ref-tab:hover,
.reference-member .tab:hover,
.reference-member .auth-tabs > a:hover { color: #2563eb; background: #e8effb; }
.reference-member .ref-tab.active,
.reference-member .tab.active,
.reference-member .auth-tabs > a.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.reference-member .tab.active::after,
.reference-member .auth-tabs > a.active::after { display: none; }

.reference-member .ref-section,
.reference-member .card,
.reference-member .ref-product-panel {
  padding: 20px;
  margin-bottom: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: none;
  min-width: 0;
}
.reference-member .ref-intro { border-color: #94b4e4; }
.reference-member .ref-section-title,
.reference-member .card-header h2,
.reference-member .card-header h3 {
  border-left: 4px solid #2563eb;
  padding-left: 8px;
  margin: 0 0 13px;
  color: #1e56b0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.reference-member .ref-section-title svg { display: none; }
.reference-member .ref-guide { padding: 0; margin: 0; list-style: none; }
.reference-member .ref-guide li { margin: 3px 0; line-height: 1.85; }
.reference-member .ref-guide strong { color: #2563eb; }
.reference-member .ref-intro > p:last-child { margin-bottom: 0; }
.reference-member .ref-intro hr { margin: 12px 0; }
.reference-member .ref-price,
.reference-member .price,
.reference-member .detail-price .price { color: #bd2525; font-weight: 700; }
.reference-member .ref-price { font-size: 15px; white-space: nowrap; }
.reference-member .ref-price small { color: #666; font-size: 13px; font-weight: 400; }
.reference-member .ref-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.reference-member .ref-filter-row .search-input { flex: 1; min-width: 190px; }
.reference-member .ref-filter-row > .input,
.reference-member .ref-filter-row > select { width: auto; min-width: 120px; }
.reference-member .ref-filter-row .input { font-size: 15px; }
.reference-member .ref-product-list { min-width: 0; max-width: 100%; }
.reference-member .ref-product-panel { padding: 20px; }
.reference-member .ref-product-panel > .card-header { margin-bottom: 0; }
.reference-member .ref-table,
.reference-member .data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  color: #333;
  font-size: 15px;
  text-align: left;
  line-height: 1.6;
}
.reference-member .ref-table th,
.reference-member .data-table th {
  padding: 9px 10px;
  background: #eff6ff;
  color: #2859a5;
  border: 1px solid #ddd;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.reference-member .ref-table td,
.reference-member .data-table td {
  padding: 12px 10px;
  border: 1px solid #e2e2e2;
  color: #666;
  vertical-align: middle;
}
.reference-member .ref-table tbody tr:hover,
.reference-member .data-table tbody tr:hover { background: #f6f9ff; }
.reference-member .ref-table td strong,
.reference-member .data-table td strong { color: #333; }
.reference-member .ref-table td a:not(.btn) { color: #2563eb; }
.reference-member .ref-table td a:not(.btn):hover { text-decoration: underline; }
.reference-member .ref-table .product-summary { margin: 3px 0 0; color: #666; font-size: 13px; }
.reference-member .table-wrap { overflow-x: auto; max-width: 100%; border-radius: 0; }
.reference-member .ref-order-state { text-align: center; padding: 17px 10px; color: #666; }
.reference-member .ref-order-state p:last-child { margin-bottom: 0; }
.reference-member .ref-section-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.reference-member .ref-section-actions .ref-section-title { margin: 0; }
.reference-member .ref-section-actions > .small { font-size: 13px; }
.reference-member .ref-steps p { margin: 3px 0; font-size: 15px; line-height: 1.85; }
.reference-member .ref-step-label { color: #1e56b0; }
.reference-member .ref-demo-line { border-top: 1px solid #eee; padding-top: 10px; margin: 11px 0 0; color: #666; font-size: 13px; }
.reference-member .ref-filter-row .search-input input {
  display: block;
  width: 100%;
  min-height: 37px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: #fff;
  padding: 8px 10px 8px 36px;
  font-size: 15px;
  color: #333;
}
.reference-member .ref-filter-row .search-input input:focus { border-color: #7da4e5; outline: 2px solid #2563eb10; }
.reference-member .ref-filter-row .search-input > svg { top: 11px; left: 11px; width: 16px; height: 16px; color: #666; }
.reference-member .ref-table th,
.reference-member .ref-table td { text-align: center; }
.reference-member .ref-table .ref-program-name { text-align: left; }
.reference-member .ref-product-list td:not(:nth-child(2)) { white-space: nowrap; }
.reference-member .ref-table td .ref-price { color: #bd2525; font-size: 14px; }
.reference-member .ref-table-meta { display: block; color: #666; font-size: 13px; line-height: 1.6; margin-top: 2px; font-weight: 400; }
.reference-member .ref-order-mini { font-size: 13px; white-space: nowrap; }
.reference-member .ref-order-mini th { font-size: 13px; padding: 8px; }
.reference-member .ref-order-mini td { padding: 10px 7px; }
.reference-member .ref-order-mini code { font-size: 13px; }
.reference-member .ref-order-mini .ref-table-meta { max-width: 115px; white-space: normal; font-size: 13px; }
.reference-member .ref-order-mini .badge { font-size: 13px; }
.reference-member .ref-order-mini .text-link { font-size: 13px; }
.reference-member .ref-order-note { font-size: 13px; margin: 10px 0 0; color: #666; }
.reference-member .ref-pagination { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 16px; }
.reference-member .ref-pagination > .small { font-size: 13px; }
.reference-member .ref-pagination > div { display: flex; align-items: center; gap: 4px; }
.reference-member .ref-pagination .btn { min-height: 26px; padding: 3px 10px; border-radius: 2px; font-size: 14px; }
.reference-member .ref-page-number { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; background: #2563eb; color: #fff; border-radius: 2px; font-size: 13px; }
.reference-member .ref-header-demo { opacity: .8; }
.reference-member .demo-ribbon { background: #edf3fc; color: #586c8e; border-color: #d9e4f5; font-size: 13px; }
.reference-member .demo-ribbon-inner { padding: 4px 15px; line-height: 1.6; gap: 12px; letter-spacing: 0; }
.reference-member .demo-ribbon a { font-size: 13px; color: #325d9c; }
.reference-member .demo-dot { background: #5b85c9; }

.reference-member .btn {
  min-height: 36px;
  padding: 8px 15px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none;
  transition: background .15s, border-color .15s;
}
.reference-member .btn:hover { transform: none; box-shadow: none; }
.reference-member .btn-primary { color: #fff; background: #2563eb; border-color: #2563eb; }
.reference-member .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.reference-member .btn-secondary { color: #333; background: #fff; border-color: #ccc; }
.reference-member .btn-secondary:hover { color: #2563eb; background: #f2f6ff; border-color: #9ab7e7; }
.reference-member .btn-ghost { color: #666; background: transparent; }
.reference-member .btn-ghost:hover { color: #2563eb; background: #eff6ff; }
.reference-member .btn-success { color: #2563eb; background: #eff6ff; border-color: #c7d8f3; }
.reference-member .btn-sm { min-height: 30px; padding: 5px 11px; font-size: 14px; border-radius: 3px; }
.reference-member .btn svg { width: 15px; height: 15px; }
.reference-member .icon-button { border-radius: 3px; color: #666; border-color: #d6d6d6; }
.reference-member .icon-button:hover { color: #2563eb; background: #eff6ff; border-color: #9ab7e7; }
.reference-member .input {
  min-height: 37px;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 8px 11px;
  background: #fff;
  color: #333;
  font-size: 15px;
  box-shadow: none;
}
.reference-member .input:focus { border-color: #7da4e5; box-shadow: 0 0 0 2px #2563eb10; }
.reference-member .input:hover { border-color: #666; }
.reference-member .input:disabled { background: #f5f5f5; color: #666; }
.reference-member .field { margin-bottom: 15px; font-size: 15px; }
.reference-member .field > label,
.reference-member .field > span:first-child { color: #333; font-size: 15px; font-weight: 400; }
.reference-member .field small { font-size: 13px; }
.reference-member .badge { font-size: 13px; padding: 2px 6px; border-radius: 2px; font-weight: 400; }
.reference-member .badge.blue,
.reference-member .badge-blue { background: #eff6ff; color: #1e56b0; }
.reference-member .badge.green,
.reference-member .badge-green { background: #edf5e9; color: #3b7d35; }
.reference-member .badge.amber { background: #fff6e3; color: #9e7628; }
.reference-member .badge.red { background: #fcecec; color: #b54a4a; }
.reference-member .tag { background: #f3f3f3; color: #666; border-color: #ddd; border-radius: 2px; font-size: 13px; }
.reference-member .text-link { color: #2563eb; font-size: 13px; }
.reference-member .text-link:hover { color: #1d4ed8; }
.reference-member .notice { border-radius: 3px; background: #f1f6fd; border-color: #d4e2f7; color: #47658b; font-size: 13px; }
.reference-member .notice svg { color: #4c76b2; }
.reference-member .notice.warning { background: #fffbef; border-color: #ede3c3; color: #9b814b; }
.reference-member .card-header { margin-bottom: 12px; gap: 12px; }
.reference-member .card-header h2,
.reference-member .card-header h3 { margin-bottom: 0; }
.reference-member .section-stack { gap: 0; }
.reference-member .separator { margin: 15px 0; background: #eee; }
.reference-member .form-actions { margin-top: 16px; padding-top: 16px; border-color: #eee; }
.reference-member .form-grid { gap: 0 14px; }
.reference-member .grid-2,
.reference-member .grid-3 { gap: 14px; }
.reference-member .page-heading { gap: 16px; margin-bottom: 16px; }
.reference-member .page-heading h1 { margin-bottom: 4px; font-size: 20px; }
.reference-member .page-heading p { font-size: 13px; }
.reference-member .eyebrow { display: none; }
.reference-member .breadcrumb { font-size: 13px; margin-bottom: 15px; }
.reference-member .breadcrumb span:last-child { color: #666; }
.reference-member .empty-state { padding: 28px 15px; color: #666; }
.reference-member .empty-state h3 { color: #666; font-size: 14px; }
.reference-member .empty-state p { font-size: 13px; }
.reference-member .empty-state > svg,
.reference-member .empty-icon { display: none; }

.reference-member .ref-auth { width: 100%; max-width: 440px; margin: 25px auto; }
.reference-member .ref-auth-form { margin-top: 16px; }
.reference-member .ref-auth .card { padding: 24px; }
.reference-member .ref-auth .auth-tabs { margin-bottom: 20px; }
.reference-member .ref-auth .auth-tabs a { flex: 1; padding: 9px 12px; }
.reference-member .ref-auth .auth-heading h2 { font-size: 18px; margin-bottom: 6px; }
.reference-member .ref-auth .auth-heading p { font-size: 13px; margin-bottom: 17px; }
.reference-member .ref-auth .auth-demo { margin-top: 18px; padding-top: 15px; border-top: 1px solid #eee; }
.reference-member .ref-auth .auth-demo > span { color: #666; font-size: 13px; margin-bottom: 8px; }
.reference-member .ref-auth .auth-demo small { font-size: 13px; }
.reference-member .ref-auth .auth-note { font-size: 13px; margin: 15px 0 0; }
.reference-member .ref-auth .back-link { display: block; text-align: center; color: #666; font-size: 13px; }
.reference-member .ref-auth-card { padding: 24px; }
.reference-member .ref-auth-title { color: #1e56b0; font-size: 19px; text-align: center; margin: 0 0 7px; }
.reference-member .ref-auth-sub { font-size: 13px; text-align: center; margin: 0 0 20px; }
.reference-member .ref-auth-tabs { display: flex; gap: 0; border-bottom: 1px solid #ddd; margin-bottom: 18px; }
.reference-member .ref-auth-tabs > a { flex: 1; text-align: center; padding: 9px 12px; color: #666; font-size: 14px; border-bottom: 2px solid transparent; }
.reference-member .ref-auth-tabs > a.active { color: #2563eb; border-color: #2563eb; font-weight: 700; }
.reference-member .ref-auth-foot { font-size: 13px; margin: 15px 0 0; text-align: center; }
.reference-member .ref-auth-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; font-size: 13px; color: #666; }
.reference-member .ref-auth-links a:hover { color: #2563eb; text-decoration: underline; }
.reference-member .ref-login-brand { display: block; font-size: 18px; font-weight: 700; color: #1e56b0; text-align: center; }
.reference-member .ref-auth .auth-demo { display: block; text-align: center; }
.reference-member .ref-auth .auth-demo > small { display: block; margin-top: 7px; color: #666; font-size: 13px; }
.reference-member .login-layout { max-width: 440px; display: block; margin: 20px auto; background: transparent; border: 0; box-shadow: none; }
.reference-member .login-story { display: none; }
.reference-member .login-panel { padding: 0; }
.reference-member .auth-card { width: 100%; max-width: none; }
.reference-member .auth-heading h2 { font-size: 18px; }
.reference-member .auth-form .btn { min-height: 38px; font-size: 14px; }

.reference-member .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 15px; }
.reference-member .detail-layout > *,
.reference-member .checkout-layout > *,
.reference-member .profile-layout > * { min-width: 0; }
.reference-member .detail-preview { border-radius: 3px; border-color: #ddd; box-shadow: none; }
.reference-member .detail-preview .product-cover { min-height: 75px; height: 75px; background: #eff6ff; color: #5374a8; }
.reference-member .product-cover::before,
.reference-member .product-cover::after { display: none; }
.reference-member .detail-preview .product-symbol svg { width: 32px; height: 32px; }
.reference-member .detail-preview .cover-label,
.reference-member .detail-preview .cover-code-label,
.reference-member .detail-preview .cover-dots { display: none; }
.reference-member .product-detail,
.reference-member .detail-description { padding: 20px; }
.reference-member .detail-description h2,
.reference-member .detail-description h3 { font-size: 14px; color: #1e56b0; }
.reference-member .detail-description p { color: #666; font-size: 15px; }
.reference-member .detail-description .feature-list { grid-template-columns: 1fr; gap: 9px; }
.reference-member .detail-description .feature-list > div { font-size: 13px; }
.reference-member .detail-description .feature-list svg { width: 16px; height: 16px; color: #4272bf; }
.reference-member .detail-title { font-size: 19px; color: #333; }
.reference-member .detail-aside .card { padding: 20px; }
.reference-member .detail-aside,
.reference-member .checkout-aside { position: static; }
.reference-member .detail-price .price { font-size: 29px; }
.reference-member .detail-price .price-unit { font-size: 13px; }
.reference-member .purchase-card > p,
.reference-member .detail-help p { font-size: 13px; }
.reference-member .purchase-trust { font-size: 13px; }
.reference-member .detail-help strong { font-size: 15px; }
.reference-member .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 15px; }
.reference-member .checkout-main { display: block; min-width: 0; }
.reference-member .checkout-aside { display: block; min-width: 0; }
.reference-member .checkout-main .card,
.reference-member .checkout-aside .card { padding: 20px; }
.reference-member .payment-card { text-align: center; }
.reference-member .payment-network { font-size: 15px; gap: 7px; }
.reference-member .payment-card > p { font-size: 13px; }
.reference-member .payment-amount { font-size: 34px; color: #bd2525; }
.reference-member .payment-amount > span { font-size: 15px; }
.reference-member .qr-demo { width: 180px; height: 180px; border-radius: 2px; box-shadow: none; }
.reference-member .qr-caption { font-size: 13px; }
.reference-member .copy-row { border-color: #ddd; border-radius: 3px; background: #fafafa; padding: 12px; text-align: left; }
.reference-member .copy-row > div { min-width: 0; }
.reference-member .wallet-address,
.reference-member .delivery-value { color: #333; overflow-wrap: anywhere; word-break: break-word; font-size: 13px; }
.reference-member .countdown { font-size: 13px; margin-top: 17px; flex-wrap: wrap; }
.reference-member .countdown strong { font-size: 14px; color: #b34e36; }
.reference-member .payment-listening { margin-top: 15px; font-size: 13px; flex-wrap: wrap; }
.reference-member .payment-listening .small { font-size: 13px; }
.reference-member .payment-buttons { gap: 8px; flex-wrap: wrap; margin-top: 17px; }
.reference-member .payment-buttons .btn { font-size: 14px; padding: 8px 11px; }
.reference-member .simulation-options { display: flex; flex-direction: column; gap: 8px; }
.reference-member .simulation-options .btn { font-size: 14px; justify-content: flex-start; }
.reference-member .payment-instructions ol { padding-left: 18px; font-size: 13px; line-height: 1.9; }
.reference-member .stepper { margin: 5px 0 20px; gap: 8px; flex-wrap: wrap; }
.reference-member .step { gap: 6px; font-size: 13px; }
.reference-member .stepper > i { width: 25px; background: #ccc; }
.reference-member .step.active { color: #2563eb; }
.reference-member .step.active > b,
.reference-member .step.active > span:first-child { background: #2563eb; box-shadow: none; }
.reference-member .step.done { color: #5c8e51; }
.reference-member .step.done > svg { background: #edf5e9; color: #3d7836; }
.reference-member .summary-product .product-cover { width: 44px; height: 44px; min-height: 44px; border-radius: 2px; background: #eff6ff; color: #5877a8; }
.reference-member .summary-product .product-symbol svg { width: 23px; height: 23px; }
.reference-member .summary-product strong { font-size: 15px; }
.reference-member .summary-product p { font-size: 13px; }
.reference-member .summary-row { margin: 11px 0; font-size: 13px; gap: 10px; }
.reference-member .summary-row strong { font-size: 13px; color: #333; }
.reference-member .summary-row.total { border-color: #eee; }
.reference-member .summary-row.total strong { font-size: 20px; color: #bd2525; }
.reference-member .summary-row.vertical code { white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
.reference-member .usdt-symbol { width: 25px; height: 25px; font-size: 18px; background: #2e7d32; }
.reference-member .pulse-dot { background: #5a9c48; box-shadow: none; }
.reference-member .success-header { border: 1px solid #d5e3cf; background: #f1f7ec; border-radius: 3px; padding: 17px 20px; gap: 12px; margin-bottom: 15px; }
.reference-member .success-header h2 { font-size: 16px; }
.reference-member .success-header p { font-size: 13px; }
.reference-member .success-header .success-icon { width: 34px; height: 34px; min-width: 34px; background: #dfecd7; color: #3d7f33; border-radius: 50%; }
.reference-member .delivery-card .card-header h2 { font-size: 16px; }
.reference-member .delivery-row { padding: 13px 0; border-color: #eee; gap: 12px; }
.reference-member .delivery-row > div { min-width: 0; }
.reference-member .delivery-actions { flex-wrap: wrap; gap: 12px; }
.reference-member .download-note { background: #f5f8fd; color: #62748e; font-size: 13px; border-radius: 3px; }
.reference-member .activity-item { border-color: #eee; padding: 12px 0; gap: 10px; }
.reference-member .activity-item > svg { color: #6c89b4; }
.reference-member .activity-item strong { font-size: 13px; }
.reference-member .activity-item p,
.reference-member .activity-item code { font-size: 13px; overflow-wrap: anywhere; }

.reference-member .member-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.reference-member .stat-card { border-color: #ddd; border-radius: 3px; box-shadow: none; padding: 15px 18px; }
.reference-member .member-stats .stat-card > strong { font-size: 24px; color: #1e56b0; }
.reference-member .member-stats .stat-card > span { font-size: 13px; }
.reference-member .member-stats .stat-card > svg { display: none; }
.reference-member .order-card { padding: 0; border-radius: 3px; overflow: hidden; }
.reference-member .order-top { background: #f0f4fb; padding: 10px 15px; color: #666; font-size: 13px; border-color: #ddd; }
.reference-member .order-top code { font-size: 13px; }
.reference-member .order-main { padding: 15px; gap: 12px; }
.reference-member .order-main .product-cover { width: 45px; height: 45px; min-height: 45px; background: #eff6ff; color: #5b78a5; border-radius: 2px; }
.reference-member .order-main .product-symbol svg { width: 25px; height: 25px; }
.reference-member .order-main .cover-label,
.reference-member .order-main .cover-code-label,
.reference-member .order-main .cover-dots,
.reference-member .summary-product .cover-label,
.reference-member .summary-product .cover-code-label,
.reference-member .summary-product .cover-dots { display: none; }
.reference-member .order-product h3 { font-size: 14px; }
.reference-member .order-product p { font-size: 13px; margin: 3px 0; }
.reference-member .order-product .small { font-size: 13px; }
.reference-member .order-amount strong { font-size: 20px; color: #b82b2b; }
.reference-member .order-amount small { font-size: 13px; }
.reference-member .order-amount > span { font-size: 13px; }
.reference-member .order-main > .btn { font-size: 14px; padding: 8px 11px; }
.reference-member .profile-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 15px; }
.reference-member .profile-avatar { background: #eff6ff; color: #2e61b2; border-radius: 50%; width: 55px; height: 55px; font-size: 21px; }
.reference-member .profile-card h2 { font-size: 16px; }
.reference-member .guide-card { border-radius: 3px; padding: 20px 20px 20px 62px; }
.reference-member .guide-number { color: #829cc4; left: 20px; top: 22px; font-size: 24px; }
.reference-member .guide-card h2 { font-size: 16px; }
.reference-member .guide-card p,
.reference-member .guide-steps li { font-size: 13px; }
.reference-member .reset-card { border-radius: 3px; padding: 20px; gap: 15px; }
.reference-member .reset-card h3 { font-size: 14px; }
.reference-member .reset-card p { font-size: 13px; }
.reference-member .site-footer { background: transparent; border: 0; padding: 0 20px 25px; color: #666; font-size: 13px; text-align: center; }
.reference-member .site-footer > div { max-width: 770px; margin: 0 auto 5px; justify-content: center; gap: 12px; font-size: 13px; }
.reference-member .site-footer > span,
.reference-member .site-footer > a { font-size: 13px; margin: 0 5px; }
.reference-member .toast { border-radius: 3px; box-shadow: 0 3px 14px #00000015; border-color: #d4dfce; color: #55704a; font-size: 15px; }
.reference-member .modal { border-radius: 4px; color: #333; box-shadow: 0 10px 40px #0002; }
.reference-member .modal-header { padding: 17px 20px; border-color: #ddd; }
.reference-member .modal-header h2 { font-size: 18px; }
.reference-member .modal-body { padding: 20px; }
.reference-member .modal-footer { padding: 14px 20px; background: #f8f8f8; border-color: #ddd; }

@media (max-width: 700px) {
  .reference-member .detail-layout,
  .reference-member .checkout-layout,
  .reference-member .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .reference-member .detail-aside .card,
  .reference-member .checkout-main .card,
  .reference-member .checkout-aside .card { padding: 18px; }
  .reference-member .detail-aside { display: block; }
  .reference-member .ref-table { min-width: 630px; }
  .reference-member .ref-table.ref-orders-table { min-width: 560px; }
  .reference-member .ref-table th,
  .reference-member .ref-table td { padding: 10px; }
  .reference-member .order-main { flex-wrap: wrap; }
  .reference-member .order-product { min-width: 0; flex: 1; }
  .reference-member .order-amount { flex-basis: auto; margin-left: 57px; text-align: left; }
  .reference-member .order-main > .btn { margin-left: auto; }
  .reference-member .success-header { flex-wrap: wrap; }
  .reference-member .success-header > .badge { margin-left: 46px; }
}
@media (max-width: 480px) {
  .reference-member .ref-header-inner { padding: 10px 12px; gap: 10px; align-items: center; }
  .reference-member .ref-site-name { font-size: 15px; }
  .reference-member .ref-account { gap: 4px 10px; font-size: 13px; max-width: 40%; }
  .reference-member .ref-account a,
  .reference-member .ref-account button { font-size: 14px; }
  .reference-member .ref-page,
  .reference-member .page { padding: 15px 12px 30px; }
  .reference-member .ref-notice { padding: 10px 12px; gap: 10px; align-items: flex-start; font-size: 13px; }
  .reference-member .ref-notice > span { text-align: left; }
  .reference-member .ref-tabs { gap: 3px; }
  .reference-member .ref-tab,
  .reference-member .tab { min-height: 38px; padding: 8px 18px; font-size: 15px; }
  .reference-member .ref-section,
  .reference-member .card,
  .reference-member .ref-product-panel { padding: 16px; margin-bottom: 13px; }
  .reference-member .ref-section-title { margin-bottom: 12px; font-size: 14px; }
  .reference-member .ref-guide li { font-size: 13px; margin: 4px 0; }
  .reference-member .ref-filter-row { gap: 8px; }
  .reference-member .ref-filter-row .search-input { min-width: 0; flex-basis: 100%; }
  .reference-member .ref-filter-row > .input,
  .reference-member .ref-filter-row > select { flex: 1; min-width: 0; }
  .reference-member .search-input .input { min-height: 37px; font-size: 15px; }
  .reference-member .search-input > svg { top: 11px; }
  .reference-member .form-grid,
  .reference-member .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .reference-member .form-grid .full,
  .reference-member .form-grid .full-width { grid-column: auto; }
  .reference-member .form-actions { justify-content: flex-start; flex-wrap: wrap; }
  .reference-member .ref-auth { margin: 10px auto; }
  .reference-member .ref-auth .card { padding: 20px; }
  .reference-member .ref-auth .auth-heading h2 { font-size: 18px; }
  .reference-member .auth-form .input { font-size: 14px !important; }
  .reference-member .page-heading { align-items: flex-start; gap: 12px; }
  .reference-member .page-heading h1 { font-size: 19px; }
  .reference-member .page-heading .btn { min-height: 33px; padding: 7px 10px; font-size: 14px; }
  .reference-member .page-heading p { font-size: 13px; overflow-wrap: anywhere; }
  .reference-member .detail-title { font-size: 19px !important; }
  .reference-member .detail-description { padding: 17px; }
  .reference-member .detail-description .feature-list > div { font-size: 13px; }
  .reference-member .detail-preview .product-cover { height: 65px; min-height: 65px; }
  .reference-member .payment-card > .payment-amount { font-size: 32px; }
  .reference-member .payment-network { flex-wrap: wrap; font-size: 13px; }
  .reference-member .payment-card > .copy-row { padding: 11px; }
  .reference-member .payment-card > .copy-row .wallet-address { font-size: 13px; }
  .reference-member .payment-listening > .small { display: block; width: 100%; font-size: 13px; }
  .reference-member .payment-buttons .btn { min-height: 36px; font-size: 14px; }
  .reference-member .delivery-card .delivery-row { flex-wrap: wrap; }
  .reference-member .delivery-card .delivery-row > div { min-width: 0; flex: 1; }
  .reference-member .delivery-card .card-header h2 { font-size: 16px !important; }
  .reference-member .delivery-card .delivery-value { font-size: 13px; }
  .reference-member .delivery-actions .btn { min-height: 36px; font-size: 14px; }
  .reference-member .delivery-card .grid-2 { gap: 0; }
  .reference-member .member-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .reference-member .member-stats > .stat-card { display: block; padding: 12px; min-height: 0; }
  .reference-member .member-stats > .stat-card > span { font-size: 13px; }
  .reference-member .member-stats > .stat-card > strong { font-size: 23px; padding: 0; margin: 2px 0 0; }
  .reference-member .order-card { padding: 0; }
  .reference-member .order-top { padding: 10px 12px; gap: 6px; }
  .reference-member .order-top code { font-size: 13px; }
  .reference-member .order-main { padding: 14px 12px; }
  .reference-member .order-main .product-cover { width: 40px; height: 40px; min-height: 40px; }
  .reference-member .order-product h3 { font-size: 15px; }
  .reference-member .order-product p { font-size: 13px !important; }
  .reference-member .order-amount { margin-left: 52px; padding-top: 2px; }
  .reference-member .order-amount strong { font-size: 19px; }
  .reference-member .order-main > .btn { margin-top: 0; min-height: 34px; font-size: 14px; }
  .reference-member .stepper { gap: 5px; margin-bottom: 16px; }
  .reference-member .stepper > i { width: 13px; }
  .reference-member .stepper > .step { font-size: 13px; gap: 5px; }
  .reference-member .success-header { padding: 16px; }
  .reference-member .success-header h2 { font-size: 15px !important; }
  .reference-member .success-header p { font-size: 13px !important; }
  .reference-member .summary-row strong { font-size: 13px; }
  .reference-member .summary-row.total strong { font-size: 20px; }
  .reference-member .guide-card { padding: 18px 16px 18px 51px; }
  .reference-member .guide-number { left: 16px; top: 20px; font-size: 22px; }
  .reference-member .guide-card h2 { font-size: 15px !important; }
  .reference-member .guide-card p,
  .reference-member .guide-steps li { font-size: 13px !important; }
  .reference-member .reset-card { padding: 16px; }
  .reference-member .site-footer { padding: 0 12px 20px; }
  .reference-member .site-footer > div { font-size: 13px; gap: 8px; flex-wrap: wrap; }
  .reference-member .modal-header h2 { font-size: 17px; }
  .reference-member .modal-body,
  .reference-member .modal-header { padding: 17px; }
  .reference-member .modal-footer { padding: 13px 17px; }
}

/* Readable member typography, matching the reference site's YaHei text. */
.reference-member { font-weight: 400; }
.reference-member *,
.reference-member *::before,
.reference-member *::after { letter-spacing: normal; }
.reference-member h1,
.reference-member h2,
.reference-member h3,
.reference-member h4,
.reference-member strong,
.reference-member b { font-weight: 700; }
.reference-member button,
.reference-member .btn,
.reference-member .icon-button {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-weight: 400;
}
.reference-member input,
.reference-member select,
.reference-member textarea { font-family: "Microsoft YaHei", sans-serif; }
.reference-member .small,
.reference-member small,
.reference-member .help-text { font-size: 13px; color: #666; }
.reference-member .text-link,
.reference-member .demo-ribbon a,
.reference-member .step.active,
.reference-member .step-number { font-weight: 400; }
.reference-member .stat-card strong,
.reference-member .stat-card .stat-value { font-weight: 700; }
.reference-member .ref-tab,
.reference-member .tab,
.reference-member .auth-tabs > a,
.reference-member .ref-auth-tabs > a { font-size: 16px; font-weight: 700; }
.reference-member .ref-section-title,
.reference-member .card-header h2,
.reference-member .card-header h3,
.reference-member .detail-description h2,
.reference-member .detail-description h3 { font-size: 16px; font-weight: 700; line-height: 1.5; }
.reference-member .ref-table,
.reference-member .data-table,
.reference-member .ref-table th,
.reference-member .data-table th,
.reference-member .ref-order-mini,
.reference-member .ref-order-mini th { font-size: 14px; }
.reference-member .ref-table td,
.reference-member .data-table td { color: #333; }
.reference-member .ref-table td strong,
.reference-member .data-table td strong { font-weight: 700; }
.reference-member .ref-table-meta,
.reference-member .ref-table .product-summary,
.reference-member .ref-order-mini .ref-table-meta,
.reference-member .ref-order-mini code,
.reference-member .ref-order-mini .badge,
.reference-member .ref-order-mini .text-link { font-size: 13px; color: #666; }
.reference-member .ref-table td .ref-price,
.reference-member .ref-order-mini .text-link { color: #2563eb; }
.reference-member .ref-table td .ref-price { color: #bd2525; }
.reference-member .ref-guide li,
.reference-member .ref-steps p,
.reference-member .detail-description p,
.reference-member .ref-auth-sub { font-size: 15px; }
.reference-member .table-wrap { width: 100%; min-width: 0; overflow-x: auto; }
.reference-member .ref-table .ref-program-name { min-width: 170px; }
.reference-member .ref-account { max-width: 52%; }
.reference-member .ref-account a,
.reference-member .ref-account button { font-size: 14px; }
.reference-member .ref-notice { color: #666; font-size: 14px; }
.reference-member .ref-notice p { font-size: 14px; }
.reference-member .ref-notice > strong { font-size: 14px; }
.reference-member .ref-price small { font-size: 13px; }
.reference-member .ref-demo-line { font-size: 13px; color: #666; }
.reference-member .eyebrow,
.reference-member .brand-sub,
.reference-member .hero-kicker { display: none; }

/* Membership uses the same plain sections and blue accents as the catalog. */
.reference-member .ref-membership-status {
  padding: 14px 18px;
  margin-bottom: 15px;
  background: #fff;
  border: 1px solid #8caede;
  border-radius: 3px;
  color: #333;
}
.reference-member .ref-member-state-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  min-width: 0;
  font-size: 15px;
}
.reference-member .ref-member-state-row strong { color: #2563eb; }
.reference-member .ref-member-state-row a { color: #2563eb; text-decoration: underline; }
.reference-member .ref-member-state-row span,
.reference-member .ref-member-state-row p { margin: 0; overflow-wrap: anywhere; }
.reference-member .ref-plan-list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 20px;
}
.reference-member .ref-plan-option {
  display: flex;
  position: relative;
  flex: 0 1 180px;
  min-width: 0;
  padding: 14px 13px;
  gap: 6px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  color: #333;
  cursor: pointer;
  line-height: 1.7;
}
.reference-member .ref-plan-option:hover { border-color: #8caede; }
.reference-member .ref-plan-option.selected,
.reference-member .ref-plan-option:has(input:checked) { border-color: #2563eb; background: #f3f7fe; }
.reference-member .ref-plan-option input[type="radio"] {
  position: absolute;
  top: 16px;
  right: 12px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
}
.reference-member .ref-plan-name { padding-right: 22px; font-size: 16px; font-weight: 700; }
.reference-member .ref-plan-price { font-size: 20px; font-weight: 700; color: #bd2525; line-height: 1.5; }
.reference-member .ref-plan-price small { font-size: 13px; font-weight: 400; color: #666; }
.reference-member .ref-plan-description { font-size: 13px; font-weight: 400; color: #666; overflow-wrap: anywhere; }
.reference-member .ref-plan-form { max-width: 100%; min-width: 0; }
.reference-member .ref-tg-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.reference-member .ref-tg-fields .ref-plan-field { display: block; margin: 0; }
.reference-member .ref-tg-fields em { color: #bd2525; font-style: normal; }
.reference-member .ref-tg-error { margin: 0 0 14px; color: #bd2525; font-size: 14px; }
@media (max-width: 600px) {
  .reference-member .ref-tg-fields { grid-template-columns: 1fr; gap: 12px; }
}
.reference-member .ref-plan-form > .btn,
.reference-member .ref-plan-form .btn-primary,
.reference-member .ref-plan-form button[type="submit"] { width: 100%; min-height: 40px; font-size: 14px; }
.reference-member .ref-plan-notice {
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 2px;
  background: #fafafa;
  color: #666;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.reference-member .ref-plan-notice p { margin: 0; font-size: 14px; }
.reference-member .ref-member-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  color: #333;
}
.reference-member .ref-member-summary p { margin: 0; }
.reference-member .ref-membership-table { min-width: 540px; font-size: 14px; }
.reference-member .ref-membership-table th,
.reference-member .ref-membership-table td { font-size: 14px; }
.reference-member .ref-plan-field { min-width: 0; margin: 0 0 15px; }
.reference-member .ref-plan-field > label,
.reference-member .ref-plan-field > span:first-child { display: block; margin-bottom: 6px; color: #333; font-size: 15px; font-weight: 400; }
.reference-member .ref-plan-field .input { width: 100%; min-width: 0; font-size: 15px; }
.reference-member .ref-plan-field small { display: block; margin-top: 5px; color: #666; font-size: 13px; }
.reference-member .ref-purchase-note { margin: 12px 0 0; color: #666; font-size: 13px; overflow-wrap: anywhere; }

.reference-member .ref-step-help { display: block; color: #666; font-size: 14px; line-height: 1.8; padding-left: 62px; }
.reference-member .ref-steps p + p { margin-top: 12px; }
.reference-member .ref-tg-link { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.reference-member .ref-support-note { box-sizing: border-box; max-width: 770px; width: calc(100% - 32px); margin: 16px auto 22px; padding: 12px 16px; border: 1px solid #d6e2f5; background: #f4f7fc; color: #555; font-size: 14px; line-height: 1.8; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.reference-member .ref-support-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.reference-member .ref-delivery-missing { color: #9a4326; font-weight: 700; }
.reference-member .delivery-actions { flex-wrap: wrap; }
@media (max-width: 600px) {
  .reference-member .ref-step-help { padding-left: 0; margin-top: 3px; }
  .reference-member .ref-support-note { width: calc(100% - 24px); padding: 12px; }
}
.reference-member .ref-purchase-note a { color: #2563eb; text-decoration: underline; }

@media (max-width: 480px) {
  .reference-member .ref-header-inner { align-items: flex-start; }
  .reference-member .ref-site-name { max-width: 48%; font-size: 16px; }
  .reference-member .ref-account { max-width: 52%; font-size: 13px; }
  .reference-member .ref-account a,
  .reference-member .ref-account button { font-size: 13px; }
  .reference-member .ref-tab,
  .reference-member .tab,
  .reference-member .auth-tabs > a { padding: 9px 20px; font-size: 16px; }
  .reference-member .ref-section-title { font-size: 16px; }
  .reference-member .ref-guide li,
  .reference-member .ref-steps p,
  .reference-member .page-heading p { font-size: 14px; }
  .reference-member .ref-notice { flex-wrap: wrap; }
  .reference-member .ref-notice > span { flex-basis: 100%; }
  .reference-member .ref-plan-list { gap: 10px; }
  .reference-member .ref-plan-option { flex: 1 1 145px; padding: 13px 11px; }
  .reference-member .ref-plan-name { font-size: 15px; }
  .reference-member .ref-plan-description { font-size: 14px; }
  .reference-member .ref-member-state-row { align-items: flex-start; flex-direction: column; gap: 6px; font-size: 14px; }
  .reference-member .ref-member-summary { gap: 8px 14px; font-size: 14px; }
  .reference-member .ref-plan-field > label,
  .reference-member .ref-plan-field > span:first-child { font-size: 14px; }
  .reference-member .ref-membership-status { padding: 13px 14px; }
  .reference-member .ref-membership-table { min-width: 540px; }
  .reference-member .ref-plan-form .btn { min-height: 40px; font-size: 14px; }
  .reference-member .ref-purchase-note { font-size: 14px; }
}