/* ========== Base reset ========== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/**
 * Mobile rem scaling based on a 375px design width.
 * 1rem = 10px at 375px viewport; rem sizes scale proportionally on other widths.
 */
html {
  font-size: calc(100vw / 37.5);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  color: #000;
  line-height: 1.4;
  min-height: 100vh;
  background: #f4f5f7;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 0;
}

/* ========== Page shell (fluid full-width) ========== */
.app-frame {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding-bottom: 7.2rem; /* leave space for bottom nav */
}

.page-bg-light {
  background: #f4f5f7;
}
.page-bg-light .app-frame {
  background: #f4f5f7;
}

/* Header gradient decoration: #fdfdfe -> #f4f5f7 */
.page-bg-light .app-frame::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 19.1rem;
  background: linear-gradient(180deg, #fdfdfe 0%, #f4f5f7 100%);
  pointer-events: none;
  z-index: 0;
}

/* Hero decoration: two Gaussian-blurred ellipses */
.hero-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 37.5rem;        /* 375px */
  height: 19.1rem;       /* 191px */
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-decor-ellipse {
  position: absolute;
  display: block;
  transform-origin: center;
}
/* Warm ellipse (top-left) */
.hero-decor-ellipse-warm {
  left: -11.008rem;
  top: -9.938rem;
  width: 27.9906rem;
  height: 31.1507rem;
  transform: rotate(-67.06deg);
}
/* Cool ellipse (top-right) */
.hero-decor-ellipse-cool {
  left: 24.9rem;
  top: -8.8rem;
  width: 23.2345rem;
  height: 25.6501rem;
  transform: rotate(-31.55deg);
}

/* Card application page red background */
.page-bg-red {
  background: #bd190e;
}
.page-bg-red .app-frame {
  background: #bd190e;
}

/* ========== Top logo bar ========== */
.top-bar {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  position: relative;
  z-index: 5;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.2rem;
}

.logo-icbc {
  height: 2.2rem;
  width: auto;
  aspect-ratio: 66.8901 / 22;
  flex-shrink: 0;
}

.logo-text {
  position: relative;
  display: flex;
  align-items: center;
}

.logo-text span {
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.112rem;
  color: #231815;
  line-height: 1.6rem;
  white-space: nowrap;
}

.logo-underline {
  position: absolute;
  bottom: -0.2rem;
  left: 0;
  width: 100%;
  height: 1px;
}

/* ========== Main content container ========== */
.main-content {
  position: relative;
  z-index: 2;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* ========== Generic card ========== */
.card {
  background: #fff;
  border-radius: 1.2rem;
  width: 100%;
  overflow: hidden;
}

/* ========== Hero banner + play button ========== */
.banner {
  position: relative;
  width: 100%;
  height: 16.9rem;
  border-radius: 1.2rem;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.2rem;
}

.banner-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.4rem;
  height: 4.4rem;
}

.banner-play-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.banner-play-icon {
  position: absolute;
  top: 26%;
  left: 26%;
  width: 48%;
  height: 48%;
}

/* ========== Quick actions ========== */
.quick-actions {
  background: #fff;
  border-radius: 1.2rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 2rem;
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 5.6rem;
}

.quick-action-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}

.quick-action-img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}

.quick-action-underline {
  width: 2.6rem;
  height: 0.2rem;
}

.quick-action-label {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.8rem;
  background: linear-gradient(180deg, #b9550f 0%, #0e0702 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ========== My team ========== */
.team-card {
  background: #fff;
  border-radius: 1.2rem;
  width: 100%;
  padding-bottom: 1.2rem;
}

.team-title {
  padding: 1.2rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #000;
}

.team-stats {
  display: flex;
  gap: 0.8rem;
  padding: 0 1.2rem;
}

.team-stat-box {
  position: relative;
  flex: 1;
  height: 8.8rem;
  border-radius: 0.8rem;
  overflow: hidden;
}

.team-stat-box.blue  { background: #eef9ff; }
.team-stat-box.gold  { background: #fff9f2; }

.team-stat-info {
  position: absolute;
  top: 2rem;
  left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.team-stat-label {
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: rgba(0, 0, 0, 0.6);
}

.team-stat-value {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 2.8rem;
  color: #000;
}

.team-stat-ellipse {
  position: absolute;
  right: 0.8rem;
  top: 4.4rem;
  width: 4.2rem;
  height: 4.2rem;
}

.team-stat-vector {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  width: 7rem;
  height: 5rem;
  pointer-events: none;
}

/* ========== News ========== */
.news-card {
  background: #fff;
  border-radius: 1.2rem;
  width: 100%;
  padding-top: 0.8rem;
}

.news-card-title {
  padding: 0.4rem 1.2rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.1rem;
  color: rgba(0, 0, 0, 0.85);
}

.news-item {
  padding: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.news-item:first-of-type {
  border-top: none;
}

.news-item-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}

.news-arrow {
  width: 0.5rem;
  height: 0.8rem;
  flex-shrink: 0;
}

.news-title {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-date {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #000;
  flex-shrink: 0;
  margin-left: 0.8rem;
}

/* ========== Partners ========== */
.partners-card {
  padding: 1.2rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.partners-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.partners-title-text {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: #000;
}

.partners-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.partners-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.partner-img {
  height: 1.8rem;
  width: auto;
  flex-shrink: 0;
}

.partner-box {
  background: #fff;
  border: 0.33px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.4rem;
  padding: 0.2rem 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.partner-box img {
  height: 1.4rem;
  width: auto;
  flex-shrink: 0;
}

/* Default to preserving aspect ratio for all images (SVG safety) */
img {
  object-fit: contain;
}

/* ========== ICP / Copyright ========== */
.page-copyright {
  width: calc(100% + 2.4rem);
  margin-left: -1.2rem;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.9;
  box-shadow: 0 -0.33px 0.33px 0 rgba(0, 0, 0, 0.2);
  background: transparent;
}

.icp-text,
.copyright-text {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 1rem;
  line-height: 1.4rem;
  color: #000;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.copyright-c {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

.copyright-c img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.copyright-c em {
  position: absolute;
  inset: 0;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1rem;
  text-align: center;
  color: #000;
}

/* ========== Bottom nav (fluid full-width, pinned to bottom) ========== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  box-shadow: inset 0 0.33px 0 0 rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.tab-options {
  display: flex;
  padding: 0 .8rem;
  align-items: stretch;
}

.tab-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 5.6rem;
  gap: 0;
  text-decoration: none;
  min-width: 0;
}

.tab-icon {
  width: 2.4rem;
  height: 2.4rem;
  position: relative;
  margin-bottom: 0.2rem;
}

.tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tab-icon .card-strike {
  position: absolute;
  left: 1.45rem;
  top: 1.682rem;
  width: 0.38rem;
  height: 1px;
}

.tab-label {
  font-size: 1rem;
  line-height: 1.4rem;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
  white-space: nowrap;
}

.tab-option.is-active .tab-label {
  color: #cf0000;
  font-weight: 500;
}

/* "福利大奖" tab — same shape as other tabs, no raised/animated effects */
.tab-option-lottery .tab-label { color: rgba(0, 0, 0, 0.85); }
.tab-option-lottery.is-active .tab-label { color: #cf0000; }

.home-indicator {
  height: 1.6rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-indicator-bar {
  width: 12rem;
  height: 0.3rem;
  border-radius: 0.3rem;
  background: rgba(0, 0, 0, 0.4);
  display: block;
}

/* ========== Empty page stub ========== */
.empty-stub {
  min-height: calc(100vh - 16rem);
}

/* ========== Overrides for red-background pages ========== */
.page-bg-red .logo-text span {
  color: #fff;
}

.page-bg-red .logo-icbc {
  filter: brightness(0) invert(1);
}

/* ==========================================================
   Licai (wealth management) page (Figma node 10:4143)
   ========================================================== */
.licai-page {
  padding: 0 1.2rem 1.2rem;
  gap: 1.2rem;
}

.licai-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.licai-card {
  background: #fff;
  border: 0.33px solid rgba(0, 0, 0, 0.12);
  border-radius: 1.2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Top cover */
.licai-card-cover {
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  overflow: hidden;
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
}
.licai-card-cover-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Top-left ribbon label */
.licai-card-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 1.8rem;
  pointer-events: none;
}
.licai-card-ribbon-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.licai-card-ribbon-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 4.6rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: 500;
  color: #fff6c6;
  white-space: nowrap;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Product title area */
.licai-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.8rem 1.2rem 1.2rem;
}
.licai-card-label {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 500;
  color: #cf0000;
}
.licai-card-name {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 500;
  color: #000;
}

/* Price + Daily earn highlight band */
.licai-card-highlight {
  display: flex;
  margin: 0 1.2rem 1rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe4e4 100%);
  border: 1px solid rgba(207, 0, 0, 0.12);
  overflow: hidden;
}
.licai-highlight-item {
  flex: 1;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.licai-highlight-item + .licai-highlight-item {
  border-left: 1px dashed rgba(207, 0, 0, 0.18);
}
.licai-highlight-label {
  font-size: 0.88rem;
  color: #8a4040;
  opacity: 0.85;
  line-height: 1;
}
.licai-highlight-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #cf0000;
  line-height: 1.1;
  font-family: -apple-system, "SF Pro Display", "PingFang SC", sans-serif;
}
.licai-highlight-value small {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 0.15rem;
}
.licai-highlight-earn {
  color: #059669;
}
.licai-highlight-original {
  display: block;
  margin-top: .22rem;
  font-size: 1.05rem;
  color: #9a9a9a;
  line-height: 1.2;
}

/* Divider */
.licai-card-divider {
  height: 0;
  border-top: 0.33px solid rgba(0, 0, 0, 0.12);
}

/* Three meta info items */
.licai-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem;
  gap: 0.4rem;
}
.licai-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: 500;
  white-space: nowrap;
}
.licai-meta-label {
  color: #000;
  opacity: 0.4;
}
.licai-meta-value {
  color: #cf0000;
  opacity: 0.9;
}

/* "Apply now" button */
.licai-card-action {
  padding: 0.4rem 1.2rem 1.2rem;
  display: flex;
  align-items: center;
}
.licai-card-btn {
  flex: 1;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.6rem;
  border-radius: 3rem;
  background: #cf0000;
  color: #fff;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.8rem;
  transition: background 0.2s, transform 0.1s;
}
.licai-card-btn:active {
  background: #a30000;
  transform: scale(0.995);
}
.licai-card-btn-soldout {
  background: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  pointer-events: none;
  border: none;
  width: 100%;
}
.licai-card-btn-soldout:active { background: #e0e0e0; transform: none; }

/* ==========================================================
   Card application page (Figma node 37:2587)
   ========================================================== */
/* Page body: red background, no horizontal padding (full-width hero),
   pulled up under the top bar so the hero background extends behind the
   top logo bar (matches the design). */
.main-content.card-page {
  padding: 0;
  gap: 0;
  margin-top: -5rem;
}

/* Red-background page: keep the ICBC logo color, render the title text in white. */
.page-bg-red .logo-icbc      { filter: none; }
.page-bg-red .logo-underline { filter: none; }
.page-bg-red .logo-text span { color: #ffffff; }

/* ---------- Top hero visual ---------- */
.card-hero {
  position: relative;
  width: 100%;
  /* Figma: form starts at y=452; minus 32px status bar = 42rem here (includes 5rem top logo bar) */
  height: 42rem;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-color: #bd190e;
  flex-shrink: 0;
}
/* Red gradient bridging hero into the form area (matches Figma gradient at 89.342%) */
.card-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6rem;
  background: linear-gradient(180deg, rgba(189,25,14,0) 0%, #bd190e 100%);
  pointer-events: none;
}

/* Stylized "Refugee Card application" title */
.card-hero-title {
  position: absolute;
  top: 6.7rem;        /* design y=99 minus 32px status bar */
  left: 50%;
  transform: translateX(-50%);
  width: 28.1rem;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 0.4rem 0.6rem rgba(109, 12, 3, 0.35));
}

/* ICBC card hero image */
.card-hero-visual {
  position: absolute;
  top: 13.8rem;       /* design y=170 minus 32px status bar */
  left: 2.4rem;
  width: calc(100% - 4.8rem);
  aspect-ratio: 327 / 207;
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: 0 1.2rem 2.8rem rgba(109, 12, 3, 0.45);
  z-index: 3;
  background: #f7e8c8;
}
.card-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Application form container (orange-red gradient bordered card) ---------- */
.card-apply {
  position: relative;
  margin: -2rem 1.6rem 2.4rem;      /* slight upward overlap with the hero */
  padding: 3.4rem 1rem 1.6rem;      /* leave room at the top for the "Fill in info" ribbon */
  background: linear-gradient(180deg, #fba56b 0%, #cc200f 100%);
  border: 0.33px solid #ffeca7;
  border-radius: 1.2rem;
  z-index: 4;
}

/* "Fill in info" ribbon header */
.card-apply-tab {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 11.9rem;
  height: 3.2rem;
  background-image: linear-gradient(178.21deg, #ec995b 7%, #df482e 97%);
  border: 0.33px solid #ffeca7;
  border-top: 0;
  border-radius: 0 0 0.8rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.card-apply-tab-text {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffeca7;
  letter-spacing: 0.09rem;
  line-height: 2.4rem;
  text-shadow: 0 1px 1px #6d0c03;
  white-space: nowrap;
}
/* Small triangular ribbon "tails" on each side */
.card-apply-tab::before,
.card-apply-tab::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.7rem;
  height: 1.2rem;
  background: #C32516;
  z-index: -1;
}
.card-apply-tab::before {
  left: -0.7rem;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.card-apply-tab::after {
  right: -0.7rem;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* White inner card */
.card-apply-card {
  background: #ffffff;
  border-radius: 1.2rem;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);
  padding: 2rem 1.2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Each field row */
.card-apply-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 1.2rem;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #000;
  gap: 1.2rem;
}
.card-apply-label {
  flex-shrink: 0;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}
.card-apply-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: right;
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 500;
  color: #000;
  font-family: inherit;
  padding: 0;
}
.card-apply-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
  font-weight: 400;
}

/* Divider line */
.card-apply-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 0;
}

/* Confirm submit button */
.card-apply-submit {
  margin: 2rem auto 0.6rem;
  width: 24.3rem;
  max-width: 100%;
  height: 4.2rem;
  border: 0;
  border-radius: 3rem;
  background: #cf0000;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.2rem;
  letter-spacing: 0.05rem;
  cursor: pointer;
  box-shadow: 0 0.4rem 1rem rgba(140, 10, 4, 0.35);
  transition: transform 0.1s ease, background 0.2s ease, opacity 0.2s ease;
}
.card-apply-submit:active {
  background: #a30000;
  transform: scale(0.985);
}
.card-apply-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ------- Hint text below submit / 被驳回提示条 ------- */
.card-apply-tip {
  margin: 1.4rem 0 0;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1.8rem;
}
.card-apply-tip a { color: #cf0000; text-decoration: none; }

.card-reject-bar {
  margin: 0 1.2rem 1rem;
  padding: 1rem 1.4rem;
  background: #fff4e5;
  border: 1px solid #ffcc80;
  border-radius: 0.8rem;
  color: #9a4d00;
  font-size: 1.3rem;
  line-height: 1.9rem;
}

/* ------- 状态卡（审核中 / 已通过 / 已发卡） ------- */
.card-apply-card-status { padding: 2.4rem 1.6rem; }

.card-status {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem;
  border-radius: 1rem;
  color: #2a2018;
  margin-bottom: 1.6rem;
  /* licai 同款渐变：米白底 + 左上暖色 + 右上冷色 */
  background:
    radial-gradient(circle at 8% -20%, rgba(255, 239, 216, 0.95) 0%, rgba(255, 239, 216, 0) 60%),
    radial-gradient(circle at 92% -20%, rgba(170, 203, 255, 0.9) 0%, rgba(170, 203, 255, 0) 60%),
    linear-gradient(180deg, #faf4e8 0%, #ffffff 100%);
  border: 1px solid rgba(201, 161, 78, 0.28);
  box-shadow: 0 0.4rem 1.2rem rgba(40, 30, 20, 0.06);
}

/* 四种状态：只换图标色 + 标题色；底色全部共享 */
.card-status-pending  .card-status-icon { background: linear-gradient(135deg, #f6b72b 0%, #d68900 100%); }
.card-status-pending  .card-status-label { color: #b37800; }
.card-status-approved .card-status-icon { background: linear-gradient(135deg, #1677ff 0%, #0b52c7 100%); }
.card-status-approved .card-status-label { color: #0b52c7; }
.card-status-shipped  .card-status-icon { background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%); }
.card-status-shipped  .card-status-label { color: #1b5e20; }
.card-status-rejected .card-status-icon { background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%); }
.card-status-rejected .card-status-label { color: #b71c1c; }

.card-status-icon {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #c9a14e 0%, #8a6628 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 700;
  box-shadow: 0 0.3rem 0.8rem rgba(40, 30, 20, 0.15);
}
.card-status-text { flex: 1; min-width: 0; }
.card-status-label { font-size: 2rem; font-weight: 700; line-height: 2.6rem; color: #2a2018; }
.card-status-sub   { font-size: 1.25rem; color: rgba(42, 32, 24, 0.7); margin-top: 0.3rem; }

.card-status-spinner {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: card-spin 0.9s linear infinite;
}
@keyframes card-spin { to { transform: rotate(360deg); } }

/* 信息明细 */
.card-info {
  background: #fafafa;
  border-radius: 0.8rem;
  padding: 0.4rem 1.2rem;
}
.card-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 1.4rem;
  gap: 1rem;
}
.card-info-row:first-child { border-top: 0; }
.card-info-k { color: rgba(0, 0, 0, 0.5); flex-shrink: 0; }
.card-info-v { color: #231815; font-weight: 500; text-align: right; word-break: break-all; }

/* 进度步骤 */
.card-steps {
  display: flex;
  align-items: center;
  margin: 2rem 0 0;
  padding: 0 0.6rem;
}
.card-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.card-step-node {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  font-family: "Inter", -apple-system, sans-serif;
}
.card-step.is-done .card-step-node { background: #2e7d32; color: #fff; }
.card-step.is-cur  .card-step-node {
  background: #cf0000;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(207, 0, 0, 0.18);
}
.card-step-label {
  font-size: 1.1rem;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.card-step.is-cur  .card-step-label { color: #cf0000; font-weight: 600; }
.card-step.is-done .card-step-label { color: #231815; }

.card-step-line {
  flex: 1;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  margin: -1.8rem 0 0;
  align-self: flex-start;
  min-width: 1rem;
}
.card-step-line.is-done { background: #2e7d32; }

/* Toast */
.card-toast {
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(35, 24, 21, 0.92);
  color: #fff;
  padding: 1rem 1.6rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: 80%;
  text-align: center;
}
.card-toast.is-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card-toast.is-ok   { background: rgba(46, 125, 50, 0.95); }

/* ========================================================================
 * 新闻正文页
 * ====================================================================== */
.news-main { padding-bottom: 3rem; }

.news-article {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem 1.6rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.news-article-title {
  font-size: 2rem;
  line-height: 2.9rem;
  font-weight: 700;
  color: #231815;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
}
.news-article-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(0, 0, 0, 0.5);
  font-size: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.news-article-dot { opacity: 0.4; }
.news-article-source { font-weight: 500; }

.news-article-summary {
  margin: 1.4rem 0 0.4rem;
  padding: 1.2rem 1.4rem;
  background: #fff8ef;
  border-left: 3px solid #cf0000;
  border-radius: 0 0.6rem 0.6rem 0;
  font-size: 1.35rem;
  line-height: 2rem;
  color: rgba(0, 0, 0, 0.75);
}

/* 数据高亮条 */
.news-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin: 1.4rem 0 0.6rem;
}
.news-highlight {
  background: linear-gradient(135deg, rgba(207, 0, 0, 0.06) 0%, rgba(207, 0, 0, 0.02) 100%);
  border: 1px solid rgba(207, 0, 0, 0.12);
  border-radius: 0.8rem;
  padding: 1rem 1.2rem;
}
.news-highlight-v {
  font-size: 1.8rem;
  font-weight: 700;
  color: #cf0000;
  line-height: 2.4rem;
  font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
}
.news-highlight-k {
  font-size: 1.15rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 0.2rem;
}

/* 红头文件 / 宣传视频 */
.news-media-group {
  margin: 1.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.4rem;
  background: linear-gradient(180deg, #fff8ef 0%, #fff 100%);
  border: 1px solid rgba(207, 0, 0, 0.12);
  border-radius: 0.8rem;
}
.news-media-group .news-media { margin: 0; }
.news-media {
  margin: 1.6rem 0 0;
  padding: 0;
}
.news-media-doc {
  display: block;
  overflow: hidden;
  border-radius: 0.8rem;
  background: #f4f4f4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
}
.news-media-doc img {
  display: block;
  width: 100%;
  height: auto;
}
.news-media-doc::after {
  content: "🔍";
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.4rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-media-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  border-radius: 0.8rem;
  background: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.news-media-caption {
  margin-top: 0.8rem;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.8rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.news-media-tag {
  background: #cf0000;
  color: #fff;
  font-size: 1.05rem;
  padding: 0.15rem 0.6rem;
  border-radius: 0.3rem;
  font-weight: 600;
}
.news-media-tag-video { background: #1677ff; }
.news-media-hint { color: rgba(0, 0, 0, 0.35); }

/* 官方联系方式块 */
.news-contact {
  margin-top: 1.6rem;
  border: 1px dashed rgba(207, 0, 0, 0.3);
  background: linear-gradient(180deg, #fff8ef 0%, #fff 100%);
  border-radius: 0.8rem;
  padding: 1.4rem 1.4rem 1rem;
}
.news-contact-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #231815;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.news-contact-title::before {
  content: "";
  width: 0.3rem;
  height: 1.4rem;
  background: #cf0000;
  border-radius: 2px;
  margin-right: 0.6rem;
}
.news-contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.news-contact-row:first-of-type { border-top: 0; }
.news-contact-icon {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 0.8rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-contact-icon-assistant { background: linear-gradient(135deg, #cf0000 0%, #a11506 100%); }
.news-contact-icon-group     { background: linear-gradient(135deg, #1677ff 0%, #0b52c7 100%); }
.news-contact-main { flex: 1; min-width: 0; }
.news-contact-k {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0.2rem;
}
.news-contact-v {
  font-size: 1.45rem;
  color: #231815;
  font-weight: 600;
  word-break: break-all;
  line-height: 2rem;
}
.news-contact-link { color: #1677ff; text-decoration: none; }
.news-contact-note {
  font-size: 1.1rem;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 0.2rem;
}
.news-contact-btn {
  flex-shrink: 0;
  border: 1px solid #cf0000;
  background: #fff;
  color: #cf0000;
  font-size: 1.25rem;
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.news-contact-btn:active { opacity: 0.8; }
.news-contact-btn-primary {
  background: #cf0000;
  color: #fff;
}

.news-article-body { margin-top: 1rem; }
.news-article-body p {
  margin: 0;
  padding: 0.9rem 0;
  font-size: 1.45rem;
  line-height: 2.4rem;
  color: #231815;
  text-indent: 2em;
  text-align: justify;
}

.news-article-foot {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.15rem;
  color: rgba(0, 0, 0, 0.4);
  flex-wrap: wrap;
}

/* 上一篇 / 下一篇 */
.news-pager {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.4rem;
}
.news-pager-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  padding: 1.2rem 1.4rem;
  border-radius: 0.8rem;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.news-pager-item.is-off { opacity: 0.45; }
.news-pager-k {
  flex-shrink: 0;
  font-size: 1.15rem;
  color: #cf0000;
  background: rgba(207, 0, 0, 0.08);
  padding: 0.25rem 0.6rem;
  border-radius: 0.4rem;
  font-weight: 600;
}
.news-pager-item.is-off .news-pager-k {
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.05);
}
.news-pager-v {
  flex: 1;
  font-size: 1.35rem;
  color: #231815;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 更多新闻 */
.news-more {
  margin-top: 1.6rem;
  background: #fff;
  border-radius: 1rem;
  padding: 1.6rem 1.4rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.news-more-title {
  margin: 0 0 0.6rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #231815;
}
.news-more-list { display: flex; flex-direction: column; }
.news-more-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: #231815;
  font-size: 1.3rem;
  line-height: 1.9rem;
}
.news-more-item:first-child { border-top: 0; }
.news-more-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-more-item-date {
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.45);
  font-size: 1.2rem;
}

/* ==========================================================
   Profile page (Figma node 10:4431)
   ========================================================== */
.profile-page {
  gap: 1.2rem;
}

/* ---------- User info card ---------- */
.profile-user {
  position: relative;
  width: 100%;
  height: 12.2rem;
  border-radius: 1.2rem;
  overflow: hidden;
  flex-shrink: 0;
}
/* 114px-tall Figma background SVG + extra 0.8rem at the top for the avatar */
.profile-user-bg {
  position: absolute;
  top: 0.8rem;
  left: 0;
  width: 100%;
  height: 11.4rem;
  object-fit: fill;
  z-index: 0;
}
/* Avatar: light grey circle, 10px from the top-left, 60x60 */
.profile-user-avatar {
  position: absolute;
  top: 0;
  left: 1rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: #fff url('/assets/images/icbc-avatar.png') center/82% no-repeat;
  border: 1px solid rgba(207, 0, 0, 0.15);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);
  z-index: 2;
}
/* Name + phone: to the right of the avatar */
.profile-user-meta {
  position: absolute;
  top: 2rem;
  left: 7.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 2;
  color: #000;
}
.profile-user-name {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2rem;
}
.profile-user-name.is-unverified {
  color: rgba(0, 0, 0, 0.45);
  font-weight: 500;
}
.profile-user-phone {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.6rem;
}
/* Bottom: real-name auth status / bank membership */
.profile-user-status {
  position: absolute;
  top: 8.8rem;
  left: 2.4rem;
  right: 2.4rem;
  display: flex;
  align-items: center;
  z-index: 2;
  color: #000;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.6rem;
}
.profile-user-status-item {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

/* ---------- Wallet / dividend cards ---------- */
.wallet-card {
  width: 100%;
  border-radius: 1.2rem;
  padding: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
/* Refugee card - gold gradient */
.wallet-card-gold {
  background: linear-gradient(to top, #fefdfb 0%, #fefdfb 68.174%, #f9eede 100%);
}
/* Plain dividend - white background */
.wallet-card-plain {
  background: #fff;
}

.wallet-card-title {
  width: 100%;
  height: 4.1rem;
  padding: 1.2rem 1.2rem 0.8rem;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #000;
}
.wallet-card-gold .wallet-card-title {
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: #76502f;
}

/* Amount + buttons row */
.wallet-card-body {
  width: 32.7rem;
  max-width: calc(100% - 2.4rem);
  border-radius: 0.8rem;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.wallet-card-gold .wallet-card-body {
  background: #fff;
  border: 0.33px solid rgba(0, 0, 0, 0.12);
}
.wallet-card-plain .wallet-card-body {
  background: linear-gradient(to bottom, rgba(246, 246, 246, 0) 0%, #f6f6f6 38.462%, #f6f6f6 100%);
}

.wallet-card-amount {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}
.wallet-card-label {
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: rgba(0, 0, 0, 0.6);
}
.wallet-card-value {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 2.8rem;
  color: #000;
  font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
}
/* 难民卡额度数字可能很长（例如 3500000.00元），改为纵向布局让数字占整行 */
.wallet-card-gold .wallet-card-body {
  flex-direction: column;
  align-items: stretch;
  gap: 1.2rem;
}
.wallet-card-gold .wallet-card-value {
  font-size: 2.2rem;
  word-break: break-all;
  color: #cf0000;
}
.wallet-card-gold .wallet-card-actions {
  justify-content: flex-end;
}

.wallet-card-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.wallet-btn {
  height: 2.4rem;
  padding: 0.4rem 1.2rem;
  border-radius: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.8rem;
  white-space: nowrap;
  transition: transform 0.1s, opacity 0.15s;
}
.wallet-btn:active {
  transform: scale(0.96);
  opacity: 0.85;
}
.wallet-btn-primary {
  background: #cf0000;
  color: #fff;
}
.wallet-btn-ghost {
  background: transparent;
  color: #cf0000;
  border: 1px solid #cf0000;
}

/* ---------- System functions ---------- */
.fn-card {
  width: 100%;
  background: #fff;
  border: 0.33px solid rgba(0, 0, 0, 0.12);
  border-radius: 1.2rem;
  padding: 0.4rem 0 1.2rem;
  box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
}
.fn-card-title {
  padding: 1.2rem 1.2rem 0.8rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.1rem;
  color: #000;
}

.fn-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1.2rem;
  padding: 0 2.4rem;
}
.fn-grid-item {
  display: flex;
  justify-content: center;
}
.fn-grid-link {
  width: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  border-radius: 0.6rem;
}
.fn-grid-link:active {
  background: rgba(0, 0, 0, 0.04);
}
.fn-grid-icon {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: contain;
  flex-shrink: 0;
}
.fn-grid-label {
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: rgba(0, 0, 0, 0.85);
  white-space: nowrap;
}

/* ---------- Sign out ---------- */
.profile-logout-wrap {
  margin-top: 0.4rem;
  display: flex;
  justify-content: center;
  padding: 0.4rem 0;
}
.profile-logout {
  width: 14.6rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 10rem;
  background: #cf0000;
  color: #fff;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.6rem;
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.1s, opacity 0.15s;
}
.profile-logout:active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* ========================================================================
 * 登录 / 注册 页面 (Figma node 10:3615 登录, 10:3689 注册)
 * ====================================================================== */
.page-auth {
  background: #f5f5f5;
}
.page-auth .app-frame {
  background: #f5f5f5;
  padding-bottom: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-auth .app-frame::before { display: none; }

/* 底部「合作伙伴 + ICP」推到页面底部 */
.auth-footer {
  margin-top: auto;
  padding-top: 4rem; /* 与卡片之间至少留出 40px */
}

/* 中间居中的 ICBC 方形 Logo + 标题 */
.auth-logo {
  margin: 5.2rem auto 0;
  width: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  position: relative;
  z-index: 1;
}
.auth-logo-img {
  width: 10rem;
  height: 10rem;
  border-radius: 1.2rem;
  border: 0.66px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
  object-fit: cover;
  display: block;
}
.auth-logo-title {
  margin: 0;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 3rem;
  color: #a11506;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

/* 白色卡片容器 */
.auth-card {
  margin: 2rem 1.6rem 0;
  padding: 2.4rem 1.2rem;
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  position: relative;
  z-index: 1;
}

.auth-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.6rem;
}

.auth-header {
  width: 100%;
  padding: 0 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.auth-greeting {
  margin: 0;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 2.8rem;
  color: #cf0000;
}
.auth-subtitle {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: rgba(0, 0, 0, 0.6);
}

/* 表单 + 字段 */
.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0;
}
.auth-error {
  display: none;
  width: 100%;
  padding: 0.8rem 1.2rem;
  background: rgba(207, 0, 0, 0.08);
  color: #cf0000;
  border-radius: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.8rem;
  border: 0.5px solid rgba(207, 0, 0, 0.3);
}

.auth-field {
  width: 100%;
  min-height: 5.4rem;
  padding: 0.3rem 0.8rem 0.3rem 1.2rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.auth-field-label {
  flex-shrink: 0;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #000;
}
.auth-field-input {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  appearance: none;
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: #000;
  padding: 1.2rem 0;
  font-family: inherit;
}
.auth-field-input::placeholder {
  color: rgba(0, 0, 0, 0.6);
  opacity: 1;
}

/* 验证码字段：右侧贴一张服务端生成的 4 位数字验证码图 */
.auth-field-captcha {
  flex-shrink: 0;
  display: block;
  width: 11.4667rem;   /* 114.667px @375 */
  height: 4.3rem;      /* 43px      @375 */
  border: 0;
  padding: 0;
  border-radius: 0.4rem;
  cursor: pointer;
  user-select: none;
  background: #f0f0f0 center/cover no-repeat;
  transition: opacity 0.15s;
}
.auth-field-captcha:active { opacity: 0.8; }

/* 操作区：提交按钮 + 切换链接 */
.auth-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.auth-submit {
  width: 24.8rem;
  height: 4.4rem;
  border: 0;
  border-radius: 10rem;
  background: #cf0000;
  color: #fff;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, opacity 0.15s;
}
.auth-submit:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.auth-switch {
  margin: 0;
  font-size: 1.4rem;
  line-height: 2.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.auth-switch-muted {
  color: rgba(0, 0, 0, 0.5);
}
.auth-switch-link {
  color: #cf0000;
}
.auth-switch-link:active {
  opacity: 0.75;
}

/* ========================================================================
 * 二级页面通用：sub-header / sub-page / form / list / hint
 * ====================================================================== */
.page-sub .app-frame::before { display: none; }
.page-sub .app-frame {
  background: #f4f5f7;
  padding-bottom: 4rem;
}

.sub-header {
  position: relative;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  background: #fff;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.sub-back {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.sub-back svg { width: 2.4rem; height: 2.4rem; }
.sub-back-placeholder { pointer-events: none; }
.sub-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 2.4rem;
  color: #231815;
  letter-spacing: 0.02em;
}

/* 内容区 */
.sp-main {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.sp-card {
  background: #fff;
  border-radius: 1.2rem;
  padding: 1.6rem 1.4rem;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.sp-card-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #231815;
  line-height: 2rem;
}
.sp-card-hint {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: rgba(0, 0, 0, 0.5);
}

/* 表单字段（label 在上，输入框在下） */
.sp-form { display: flex; flex-direction: column; gap: 1.2rem; }
.sp-field { display: flex; flex-direction: column; gap: 0.6rem; }
.sp-field-label {
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 500;
  color: #231815;
}
.sp-field-label .req { color: #cf0000; margin-left: 0.2rem; }
.sp-field-input,
.sp-field-textarea {
  width: 100%;
  border: 0;
  outline: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.8rem;
  padding: 1.1rem 1.2rem;
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #000;
  appearance: none;
}
.sp-field-textarea {
  min-height: 8rem;
  resize: vertical;
}
.sp-field-input::placeholder,
.sp-field-textarea::placeholder { color: rgba(0, 0, 0, 0.4); }
.sp-field-input:disabled,
.sp-field-textarea:disabled { color: rgba(0, 0, 0, 0.55); }

/* 提交按钮（满宽 / 固定宽两种） */
.sp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  border: 0;
  border-radius: 10rem;
  background: #cf0000;
  color: #fff;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, opacity 0.15s;
  width: 100%;
}
.sp-submit:active { transform: scale(0.98); opacity: 0.9; }
.sp-submit[disabled] { opacity: 0.6; cursor: not-allowed; }

/* 提示条（成功 / 失败） */
.sp-toast {
  display: none;
  margin: 0 1.2rem;
  padding: 0.8rem 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.sp-toast.is-show { display: block; }
.sp-toast-ok { background: rgba(46, 125, 50, 0.08); color: #2e7d32; border: 0.5px solid rgba(46, 125, 50, 0.3); }
.sp-toast-err { background: rgba(207, 0, 0, 0.08); color: #cf0000; border: 0.5px solid rgba(207, 0, 0, 0.3); }

/* 状态徽标（已认证 / 未认证 / 已绑定 等） */
.sp-badge {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 500;
}
.sp-badge-ok { color: #2e7d32; background: rgba(46, 125, 50, 0.12); }
.sp-badge-no { color: rgba(0, 0, 0, 0.55); background: rgba(0, 0, 0, 0.06); }
.sp-badge-gray { color: rgba(0, 0, 0, 0.55); background: rgba(0, 0, 0, 0.06); }
.sp-badge-warn { color: #cf0000; background: rgba(207, 0, 0, 0.1); }

/* 数据数字大块 */
.sp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.sp-stat {
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.8rem;
  padding: 1.2rem 0.4rem;
  text-align: center;
}
.sp-stat-value {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 2.6rem;
  color: #cf0000;
  font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
}
.sp-stat-label {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: rgba(0, 0, 0, 0.6);
}

/* 列表行 */
.sp-list { display: flex; flex-direction: column; }
.sp-list-empty {
  padding: 4rem 1.2rem;
  text-align: center;
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.4);
}
.sp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  gap: 1.2rem;
}
.sp-row:first-child { border-top: 0; }
.sp-row-main { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; }
.sp-row-title { font-size: 1.4rem; font-weight: 500; color: #231815; }
.sp-row-sub { font-size: 1.2rem; color: rgba(0, 0, 0, 0.55); }
.sp-row-extra { font-size: 1.2rem; color: rgba(0, 0, 0, 0.4); flex-shrink: 0; }

/* 「邀请码」展示块 */
.invite-hero {
  background: linear-gradient(135deg, #cf0000 0%, #a11506 100%);
  color: #fff;
  border-radius: 1.4rem;
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  box-shadow: 0 0.6rem 1.6rem rgba(207, 0, 0, 0.18);
}
.invite-hero-label { font-size: 1.3rem; opacity: 0.85; }
.invite-hero-code {
  font-family: "Inter", "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 4.4rem;
  line-height: 1.1;
  letter-spacing: 0.4rem;
}
.invite-hero-tip { font-size: 1.2rem; opacity: 0.75; text-align: center; }
.invite-copy {
  margin-top: 0.8rem;
  display: inline-flex;
  align-items: center;
  height: 3.2rem;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 10rem;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.3rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.invite-copy:active { background: rgba(255, 255, 255, 0.28); }

/* 邀请二维码卡片 */
.invite-qr-card { align-items: stretch; }
.invite-qr-wrap {
  align-self: center;
  width: 24rem;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 1.2rem;
  padding: 1.6rem 1.6rem 1.2rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.invite-qr-canvas, .invite-qr-img {
  width: 20.8rem;
  height: 20.8rem;
  display: block;
  background: #fff;
  -webkit-touch-callout: default;     /* iOS 允许长按保存 */
}
.invite-qr-img { user-select: none; }
.invite-qr-foot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.55);
  border-top: 0.5px dashed rgba(0, 0, 0, 0.1);
  padding-top: 0.8rem;
}
.invite-qr-foot strong {
  color: #cf0000;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.05em;
}
.invite-qr-tip {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.7rem;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
.invite-qr-tip strong { color: #cf0000; }
.invite-qr-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.invite-qr-share {
  height: 4rem;
  border: 1px solid rgba(207, 0, 0, 0.4);
  background: #fff;
  color: #cf0000;
  border-radius: 10rem;
  font-size: 1.4rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.invite-qr-share:active { background: rgba(207, 0, 0, 0.06); }

/* ========================================================================
 * 邀请奖励档位（时间线样式）
 * ====================================================================== */
.reward-card { gap: 1rem; }
.reward-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.reward-current-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 2.4rem;
  padding: 0 1rem;
  border-radius: 10rem;
  background: rgba(207, 0, 0, 0.08);
  color: #cf0000;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.reward-tiers {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.reward-tier {
  position: relative;
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 1.2rem;
  padding: 0.4rem 0 1.6rem;
}
.reward-tier:last-child { padding-bottom: 0.2rem; }

/* 左侧时间线竖线 */
.reward-tier-line {
  position: absolute;
  left: 1.7rem;
  top: 3.6rem;
  bottom: -0.4rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.04));
}
.reward-tier:last-child .reward-tier-line { display: none; }
.reward-tier-done .reward-tier-line { background: linear-gradient(to bottom, #2e7d32, rgba(46,125,50,.2)); }

/* 圆形节点 */
.reward-tier-node {
  position: relative;
  z-index: 2;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  background: #c8c9cc;
  box-shadow: 0 0 0 4px #fff, 0 0.2rem 0.6rem rgba(0,0,0,.05);
  transition: all .25s;
}
.reward-tier-node-num { line-height: 1; }
.reward-tier-lock .reward-tier-node {
  background: #fff;
  color: #8a6628;
  border: 1.5px dashed #c9a14e;
  box-shadow: 0 0 0 4px #fff, 0 0.2rem 0.5rem rgba(201, 161, 78, .12);
}
.reward-tier-next .reward-tier-node {
  background: linear-gradient(135deg, #cf0000 0%, #a11506 100%);
  color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(207, 0, 0, .15), 0 0.4rem 0.8rem rgba(207, 0, 0, .25);
  animation: rewardPulse 1.8s ease-in-out infinite;
}
.reward-tier-done .reward-tier-node {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  box-shadow: 0 0 0 4px #fff, 0 0.2rem 0.6rem rgba(46,125,50,.25);
}
.reward-tier-node-vip {
  background: linear-gradient(135deg, #ffd75e 0%, #f0a800 100%) !important;
  color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(240,168,0,.18) !important;
}
.reward-tier-vip.reward-tier-done .reward-tier-node-vip {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
  box-shadow: 0 0 0 4px #fff, 0 0.2rem 0.6rem rgba(46,125,50,.25) !important;
}

@keyframes rewardPulse {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(207, 0, 0, .15), 0 0.4rem 0.8rem rgba(207, 0, 0, .25); }
  50%      { box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(207, 0, 0, .08), 0 0.4rem 1rem rgba(207, 0, 0, .35); }
}

/* 右侧主体卡 */
.reward-tier-body {
  background: #fafafa;
  border-radius: 1rem;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.reward-tier-lock .reward-tier-body {
  background: linear-gradient(135deg, #fbfbfc 0%, #f4f5f7 100%);
  border: 1px solid rgba(0, 0, 0, .06);
}
.reward-tier-next .reward-tier-body {
  background: linear-gradient(135deg, #fff5f5 0%, #ffeaea 100%);
  box-shadow: 0 0.3rem 1rem rgba(207, 0, 0, .08);
  border: 1px solid rgba(207, 0, 0, .12);
}
.reward-tier-done .reward-tier-body {
  background: linear-gradient(135deg, #f3faf3 0%, #e9f5ea 100%);
  border: 1px solid rgba(46, 125, 50, .12);
}
.reward-tier-vip .reward-tier-body {
  background: linear-gradient(135deg, #fffaee 0%, #fff1cf 100%);
  border: 1px solid rgba(240, 168, 0, .25);
}

.reward-tier-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.reward-tier-goal {
  font-size: 1.3rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
}
.reward-tier-goal strong { color: #231815; font-weight: 700; }
.reward-tier-done .reward-tier-goal { color: rgba(0, 0, 0, 0.5); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.2); }
.reward-tier-done .reward-tier-goal strong { text-decoration: none; }

/* 状态标签 */
.reward-state {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 10rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.reward-state-done { color: #2e7d32; background: rgba(46, 125, 50, .12); }
.reward-state-next {
  color: #fff;
  background: linear-gradient(135deg, #cf0000 0%, #a11506 100%);
  box-shadow: 0 0.2rem 0.4rem rgba(207, 0, 0, .25);
}
.reward-state-lock {
  color: #8a6628;
  background: rgba(201, 161, 78, .08);
  border: 1px solid rgba(201, 161, 78, .25);
}
.reward-state-vip {
  color: #fff;
  background: linear-gradient(135deg, #f0a800 0%, #d68900 100%);
  text-decoration: none;
  box-shadow: 0 0.2rem 0.4rem rgba(240, 168, 0, .35);
}

/* 奖励 chip */
.reward-tier-prizes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.reward-prize {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 0.6rem;
  font-size: 1.2rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
}
.reward-prize-key { color: rgba(0, 0, 0, .55); font-size: 1.15rem; }
.reward-prize-val {
  font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
}
.reward-prize-credit .reward-prize-val { color: #cf0000; }
.reward-prize-cash .reward-prize-val { color: #d68900; }
.reward-prize-bind {
  align-items: center;
  color: #cf0000;
  font-weight: 600;
  font-size: 1.3rem;
  border-color: rgba(207, 0, 0, .25);
  background: rgba(207, 0, 0, .04);
}
.reward-prize-vip {
  font-size: 1.2rem;
  color: #8a5a00;
  background: rgba(255, 255, 255, .7);
  border-color: rgba(240, 168, 0, .25);
}
/* 未解锁档位：保留奖励金额的颜色重点，让用户一眼看见奖励诱惑 */
.reward-tier-lock .reward-prize { background: #fff; }
.reward-tier-lock .reward-prize-credit {
  border-color: rgba(207, 0, 0, .22);
  background: rgba(207, 0, 0, .04);
}
.reward-tier-lock .reward-prize-credit .reward-prize-val { color: #cf0000; }
.reward-tier-lock .reward-prize-cash {
  border-color: rgba(214, 137, 0, .25);
  background: rgba(214, 137, 0, .05);
}
.reward-tier-lock .reward-prize-cash .reward-prize-val { color: #d68900; }
.reward-tier-lock .reward-tier-goal { color: rgba(0, 0, 0, .7); }
.reward-tier-lock .reward-tier-goal strong { color: #231815; }
.reward-tier-done .reward-prize {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(46, 125, 50, .15);
}

/* 进度条（仅"下一档"） */
.reward-tier-progress {
  height: 0.5rem;
  background: rgba(207, 0, 0, .08);
  border-radius: 10rem;
  overflow: hidden;
  margin-top: 0.2rem;
}
.reward-tier-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #cf0000 0%, #ff5252 100%);
  border-radius: 10rem;
  transition: width 0.4s ease;
}

/* ========================================================================
 * 提现 / 交易明细
 * ====================================================================== */
.wd-balance {
  position: relative;
  overflow: hidden;
  border-radius: 1.4rem;
  padding: 2.2rem 1.6rem 1.8rem;
  color: #2a2018;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 0.4rem 1.2rem rgba(40, 30, 20, 0.05);
}
/* 三种变体只改大数字的点睛色，其余完全共用 */
.wd-balance-gold  .wd-balance-value { color: #b37800; }
.wd-balance-red   .wd-balance-value { color: #cf0000; }
.wd-balance-plain .wd-balance-value { color: #1f2a44; }

.wd-balance-label {
  font-size: 1.3rem;
  color: rgba(42, 32, 24, 0.68);
}
.wd-balance-value {
  font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: #cf0000;
}
.wd-balance-symbol {
  font-size: 2rem;
  opacity: 0.75;
}
.wd-balance-foot {
  margin-top: 0.6rem;
  font-size: 1.2rem;
  color: rgba(42, 32, 24, 0.7);
}
.wd-balance-link {
  color: #8a6628;
  text-decoration: none;
  border-bottom: 1px dashed rgba(138, 102, 40, 0.5);
  padding-bottom: 0.1rem;
}

/* 通用：[hidden] 属性必须真的隐藏，不受后续 display 规则影响 */
[hidden] { display: none !important; }

/* 收款方式 tab（保留给可能的其他复用场景） */
.wd-channel {
  display: flex;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.8rem;
  padding: 0.3rem;
  gap: 0.3rem;
  margin-bottom: 1.4rem;
}
.wd-channel-tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.9rem 0;
  border-radius: 0.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.wd-channel-tab.is-active {
  background: #fff;
  color: #231815;
  font-weight: 600;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
}
.wd-channel-tab:disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

/* 添加新账户链接 */
.wd-add-link {
  display: inline-block;
  font-size: 1.3rem;
  color: #cf0000;
  text-decoration: none;
  cursor: pointer;
}
/* 两个"+ 添加"并排显示 */
.wd-add-row {
  display: flex;
  gap: 1.6rem;
  margin-top: 1rem;
  padding-left: 0.2rem;
}

/* ============ 提现汇总条：一眼看懂提去哪 ============ */
.wd-summary {
  margin-top: 0.4rem;
  margin-bottom: 1.2rem;
  padding: 1.2rem 1.4rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 8% -30%, rgba(255, 239, 216, 0.9) 0%, rgba(255, 239, 216, 0) 55%),
    radial-gradient(circle at 92% -30%, rgba(170, 203, 255, 0.85) 0%, rgba(170, 203, 255, 0) 55%),
    linear-gradient(180deg, #faf4e8 0%, #ffffff 100%);
  border: 1px solid rgba(201, 161, 78, 0.3);
  box-shadow: 0 0.2rem 0.8rem rgba(40, 30, 20, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wd-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.3rem;
}
.wd-summary-k { color: rgba(42, 32, 24, 0.6); flex-shrink: 0; }
.wd-summary-v {
  color: #2a2018;
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}
#wd-summary-amount { color: #cf0000; font-size: 1.6rem; }
.wd-summary-chip {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
}
.wd-summary-chip-bank   { background: #ffe5e5; color: #cf0000; }
.wd-summary-chip-alipay { background: #e6f0ff; color: #1677ff; }

/* ============ 提现页内绑定弹窗 ============ */
.wd-bind-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 12, 10, 0.55);
  backdrop-filter: blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);
  display: none;
  align-items: flex-end;
  justify-content: center;
  animation: wdBindFade 0.22s ease-out;
}
.wd-bind-modal.show { display: flex; }
@keyframes wdBindFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wd-bind-dialog {
  position: relative;
  width: 100%;
  max-width: 48rem;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #faf4e8 0%, #ffffff 100%);
  border-top-left-radius: 1.6rem;
  border-top-right-radius: 1.6rem;
  padding: 2.4rem 1.8rem 2rem;
  box-shadow: 0 -0.8rem 2.4rem rgba(40, 30, 20, 0.18);
  animation: wdBindSlide 0.28s cubic-bezier(.2,.8,.2,1);
}
@keyframes wdBindSlide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.wd-bind-close {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  background: transparent;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(42, 32, 24, 0.6);
  cursor: pointer;
}
.wd-bind-close:active { color: #2a2018; }
.wd-bind-title {
  margin: 0 0 1.4rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #2a2018;
  text-align: center;
}
.wd-bind-tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem;
  border-radius: 0.8rem;
  background: rgba(42, 32, 24, 0.06);
  margin-bottom: 1.6rem;
}
.wd-bind-tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.9rem 0;
  border-radius: 0.6rem;
  font-size: 1.4rem;
  color: rgba(42, 32, 24, 0.65);
  cursor: pointer;
}
.wd-bind-tab.is-active {
  background: #fff;
  color: #2a2018;
  font-weight: 600;
  box-shadow: 0 0.2rem 0.6rem rgba(138, 102, 40, 0.14);
}
.wd-bind-pane .sp-field { margin-bottom: 1.2rem; }
.wd-bind-pane .sp-submit { margin-top: 0.6rem; }
.wd-bind-notice {
  font-size: 1.3rem;
  line-height: 2rem;
  margin: 0;
  padding: 1.2rem;
  border-radius: 0.8rem;
  background: rgba(207, 0, 0, 0.06);
  color: #cf0000;
  text-align: center;
}
.wd-bind-hint {
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: rgba(42, 32, 24, 0.55);
  margin: 0 0 1rem;
}

/* 卡片角标 */
.wd-card-mark {
  display: inline-block;
  font-size: 1.05rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  margin-right: 0.5rem;
  font-weight: 600;
  vertical-align: 1px;
}
.wd-card-mark-bank   { background: #ffe5e5; color: #cf0000; }
.wd-card-mark-alipay { background: #e6f0ff; color: #1677ff; }

/* 通用 sub-row 图标 */
.sp-row-icon {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-right: 1rem;
}
.sp-row-icon-alipay { background: #1677ff; }

/* 银行卡选择 */
.wd-cards { display: flex; flex-direction: column; gap: 0.8rem; }
.wd-card-radio {
  display: block;
  cursor: pointer;
  position: relative;
}
.wd-card-radio input { position: absolute; opacity: 0; pointer-events: none; }
.wd-card-radio-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.2rem 1.4rem;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  background: #fff;
  transition: all 0.15s;
  position: relative;
}
.wd-card-radio input:checked + .wd-card-radio-body {
  border-color: #cf0000;
  background: rgba(207, 0, 0, 0.04);
  box-shadow: 0 0.2rem 0.6rem rgba(207, 0, 0, 0.08);
}
.wd-card-radio input:checked + .wd-card-radio-body::after {
  content: "✓";
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #cf0000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
}
.wd-card-bank { font-size: 1.4rem; font-weight: 600; color: #231815; }
.wd-card-no   { font-size: 1.3rem; color: rgba(0,0,0,.6); font-family: "Inter", sans-serif; }
.wd-card-holder { font-size: 1.2rem; color: rgba(0,0,0,.45); }

/* 金额输入 */
.wd-amount-wrap {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.8rem;
  padding: 0 1.2rem;
  gap: 0.6rem;
}
.wd-amount-symbol {
  font-size: 2.4rem;
  font-weight: 600;
  color: #231815;
  line-height: 1;
}
.wd-amount-input {
  flex: 1;
  background: transparent !important;
  border-radius: 0;
  padding: 1.4rem 0;
  font-size: 2.2rem;
  font-weight: 600;
  font-family: "Inter", -apple-system, sans-serif;
}
.wd-amount-input::-webkit-outer-spin-button,
.wd-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wd-amount-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.wd-amount-all {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #cf0000;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0.6rem 0.4rem;
}
.wd-amount-all:active { opacity: 0.7; }
.wd-amount-tip {
  margin-top: 0.2rem;
  font-size: 1.2rem;
  line-height: 1.7rem;
  color: rgba(0, 0, 0, 0.5);
}
.wd-amount-tip strong { color: #cf0000; font-weight: 600; }

/* Fixed-denomination chip selector */
.wd-amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-top: .4rem;
}
.wd-amount-chip {
  position: relative;
  display: block;
  cursor: pointer;
}
.wd-amount-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wd-amount-chip-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  border-radius: .8rem;
  background: #f5f6f8;
  border: .1rem solid transparent;
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
  transition: all .15s ease;
}
.wd-amount-chip:hover .wd-amount-chip-body { background: #fff5f5; }
.wd-amount-chip input:checked + .wd-amount-chip-body {
  background: #fff1f0;
  border-color: #cf0000;
  color: #cf0000;
}
.wd-amount-chip.is-disabled { cursor: not-allowed; }
.wd-amount-chip.is-disabled .wd-amount-chip-body {
  background: #f0f0f0;
  color: #c0c0c0;
  text-decoration: line-through;
}

/* 步骤列表（难民卡发卡引导） */
.wd-steps {
  margin: 0;
  padding-left: 1.6rem;
  font-size: 1.3rem;
  line-height: 2.2rem;
  color: rgba(0, 0, 0, 0.7);
}
.wd-steps li { margin: 0.2rem 0; }
.wd-steps strong { color: #231815; }
.wd-steps a { color: #cf0000; text-decoration: underline; }

/* 交易明细 */
.txn-list { display: flex; flex-direction: column; }
.txn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  gap: 1.2rem;
}
.txn-row:first-child { border-top: 0; }
.txn-row.is-locked { opacity: 0.55; }
.txn-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.txn-row-title { font-size: 1.4rem; font-weight: 600; color: #231815; }
.txn-row-sub   { font-size: 1.2rem; color: rgba(0, 0, 0, 0.55); }
.txn-row-time  { font-size: 1.1rem; color: rgba(0, 0, 0, 0.35); }
.txn-row-amount {
  flex-shrink: 0;
  font-family: "Inter", -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}
.txn-row-amount-in       { color: #2e7d32; }
.txn-row-amount-out      { color: #cf0000; }
.txn-row-amount-pending  { color: rgba(0, 0, 0, 0.35); }

.txn-next-tip {
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(135deg, rgba(207, 0, 0, 0.04) 0%, rgba(207, 0, 0, 0.08) 100%);
  border: 1px dashed rgba(207, 0, 0, 0.25);
  border-radius: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.txn-next-tip strong { color: #cf0000; font-weight: 600; }
.txn-next-link {
  margin-left: auto;
  color: #cf0000;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.3rem;
}

/* 客服联系卡 */
.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.service-row:first-child { border-top: 0; }
.service-row-key { font-size: 1.4rem; color: #231815; font-weight: 500; }
.service-row-val { font-size: 1.4rem; color: #cf0000; font-family: "Inter", sans-serif; }
.service-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 1.4rem;
  font-weight: 500;
  color: #231815;
  position: relative;
  padding-right: 2.4rem;
}
.service-faq summary::-webkit-details-marker { display: none; }
.service-faq summary::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 0.8rem; height: 0.8rem;
  border-right: 1.5px solid rgba(0,0,0,.4);
  border-bottom: 1.5px solid rgba(0,0,0,.4);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s;
}
.service-faq[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.service-faq:first-of-type summary { border-top: 0; }
.service-faq-body {
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: rgba(0, 0, 0, 0.6);
  padding: 0 0 1.2rem;
}

/* ============================================================
 * 实名认证 - 身份证上传 /pages/realname.php
 * ============================================================ */
.rn-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 1rem;
}
.rn-slot { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.rn-slot-label {
  font-size: 1.2rem;
  color: #666;
  font-weight: 500;
}
.rn-slot-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f8f9fa;
  border: 1px dashed #d0d0d0;
  border-radius: .8rem;
  cursor: pointer;
  overflow: hidden;
}
.rn-slot-box.has-img {
  background: #fff;
  border-style: solid;
  border-color: #e5e7eb;
}
.rn-slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rn-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: #888;
  font-size: 1.2rem;
}
.rn-slot-plus {
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  color: #c8222a;
}
.rn-slot-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.rn-slot-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .8);
  font-size: 1.2rem;
  color: #c8222a;
}
.rn-slot.is-loading .rn-slot-spinner { display: flex; }
.rn-slot.is-loading .rn-slot-input  { pointer-events: none; }
.rn-slot-replace {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #666;
  font-size: 1.15rem;
  padding: .4rem .8rem;
  border-radius: .4rem;
  align-self: flex-start;
  cursor: pointer;
}
.rn-slot-replace:active { background: #f5f5f7; }

/* ============================================================
 * 在线客服聊天 /pages/service.php
 * Bank-style chat: simple, restrained colors, no decorative icons.
 * ============================================================ */
.chat-page.sp-main {
  padding: 0;
  gap: 0;
  background: #f4f5f7;
  min-height: calc(100vh - 4.8rem);
  display: flex;
  flex-direction: column;
}
.page-sub .app-frame:has(.chat-page) {
  padding-bottom: 0;
}
.chat-tip {
  flex: 0 0 auto;
  padding: .8rem 1.4rem;
  background: #fff8e8;
  color: #8a6d43;
  font-size: 1.15rem;
  text-align: center;
  border-bottom: 1px solid #f4e6c5;
}
.chat-window {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.2rem 1.2rem 7rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.chat-empty {
  margin: 4rem auto 0;
  font-size: 1.25rem;
  color: #999;
  text-align: center;
  max-width: 28rem;
  line-height: 1.6;
}
.chat-day {
  align-self: center;
  margin: 1rem 0 .4rem;
  padding: .25rem .8rem;
  font-size: 1.1rem;
  color: #888;
  background: rgba(0,0,0,.04);
  border-radius: 1rem;
}
.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  gap: .3rem;
}
.chat-msg-mine  { align-self: flex-end;   align-items: flex-end; }
.chat-msg-other { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: .9rem 1.2rem;
  border-radius: 1rem;
  font-size: 1.35rem;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-msg-mine .chat-bubble {
  background: #c8222a;
  color: #fff;
  border-top-right-radius: .3rem;
}
.chat-msg-other .chat-bubble {
  background: #fff;
  color: #222;
  border: 1px solid #ececec;
  border-top-left-radius: .3rem;
}
.chat-time {
  font-size: 1rem;
  color: #999;
  padding: 0 .4rem;
}
.chat-input {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: .8rem;
  padding: .8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom, 0));
  background: #fff;
  border-top: 1px solid #e8e8e8;
  z-index: 50;
}
.chat-input-area {
  flex: 1 1 auto;
  min-height: 3.6rem;
  max-height: 12rem;
  padding: .8rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: .6rem;
  background: #f8f9fa;
  font-size: 1.35rem;
  line-height: 1.5;
  color: #222;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
.chat-input-area:focus {
  outline: none;
  border-color: #c8222a;
  background: #fff;
}
.chat-send {
  flex: 0 0 auto;
  height: 3.6rem;
  padding: 0 1.6rem;
  border: none;
  border-radius: .6rem;
  background: #c8222a;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  cursor: pointer;
}
.chat-send:disabled {
  background: #d6acaf;
  cursor: not-allowed;
}

/* ============================================================
 * 我的理财 /pages/my_licai.php
 * ============================================================ */
.my-licai-page { padding-bottom: 3rem; }

/* --- 顶部汇总卡 .mlc-overview --- */
.mlc-overview {
  background: linear-gradient(135deg, #b70000 0%, #8a0000 100%) !important;
  color: #fff;
  box-shadow: 0 .4rem 1rem rgba(183,0,0,.25) !important;
}
.mlc-ov-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: .4rem;
}
.mlc-ov-item {
  display: flex; flex-direction: column; gap: .3rem;
  text-align: center;
  padding: .3rem .2rem;
}
.mlc-ov-item + .mlc-ov-item { border-left: 1px solid rgba(255,255,255,.22); }
.mlc-ov-label {
  font-size: 1.15rem; opacity: .85; letter-spacing: .05em;
}
.mlc-ov-value {
  font-size: 1.8rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
  line-height: 1.3;
}
.mlc-ov-earn { color: #ffd166; }
.mlc-ov-link {
  display: block;
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px dashed rgba(255,255,255,.25);
  text-align: center;
  color: #fff; opacity: .9;
  text-decoration: none;
  font-size: 1.3rem;
  letter-spacing: .04em;
}
.mlc-ov-link:hover { opacity: 1; }

/* --- 持仓列表 .mlc-list --- */
.mlc-list { display: flex; flex-direction: column; gap: .9rem; margin-top: .2rem; }
.mlc-item {
  background: #fff; border-radius: .6rem;
  border: 1px solid #ededed;
  padding: .9rem 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.mlc-item-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: .6rem; margin-bottom: .7rem;
  padding-bottom: .6rem; border-bottom: 1px dashed #efefef;
}
.mlc-item-name {
  font-size: 1.45rem; font-weight: 600; color: #231815;
  line-height: 1.35;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 两列的 "label : value" 信息表：4 栏网格 [dt][dd][dt][dd] */
.mlc-item-desc {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  column-gap: .9rem;
  row-gap: .6rem;
  align-items: baseline;
  margin: 0;
}
.mlc-item-desc > dt {
  font-size: 1.2rem;
  color: #8a8a8a;
  line-height: 1.2;
  white-space: nowrap;
}
.mlc-item-desc > dd {
  margin: 0;
  font-size: 1.4rem;
  color: #231815; font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  word-break: break-all;
}

.mlc-earn { color: #b70000 !important; font-weight: 700 !important; }

/* --- 最近订单 --- */
.mlc-order-list { display: flex; flex-direction: column; gap: .6rem; }
.mlc-order {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem;
  background: #fff;
  border: 1px solid #ededed; border-radius: .5rem;
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.mlc-order:hover { border-color: #b70000; box-shadow: 0 0 0 1px rgba(183,0,0,.05); }
.mlc-order-main { flex: 1; min-width: 0; }
.mlc-order-name {
  font-size: 1.4rem; font-weight: 600; color: #231815;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: .22rem;
}
.mlc-order-meta { font-size: 1.15rem; color: #8a8a8a; }
.mlc-order-right { text-align: right; display: flex; flex-direction: column; gap: .25rem; align-items: flex-end; }
.mlc-order-amount { font-size: 1.55rem; font-weight: 700; color: #b70000; font-variant-numeric: tabular-nums; }

/* ============================================================
 * 支付方式选择 底部弹窗 .pay-sheet（licai.php 使用）
 * ============================================================ */
.pay-sheet {
  position: fixed; inset: 0; z-index: 9800;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none; visibility: hidden;
  transition: visibility 0s linear .3s;
}
.pay-sheet.is-open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.pay-sheet-mask {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.5);
  opacity: 0; transition: opacity .3s ease;
}
.pay-sheet.is-open .pay-sheet-mask { opacity: 1; }
.pay-sheet-panel {
  position: relative;
  width: 100%; max-width: 480px;
  background: #fff;
  border-top-left-radius: 1.6rem; border-top-right-radius: 1.6rem;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 -.2rem 1rem rgba(0,0,0,.08);
  max-height: 86vh; display: flex; flex-direction: column;
}
.pay-sheet.is-open .pay-sheet-panel { transform: translateY(0); }
.pay-sheet-handle {
  display: none;
}
.pay-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.4rem; border-bottom: 1px solid #f0f0f0;
  flex: 0 0 auto;
}
.pay-sheet-eyebrow { display: flex; flex-direction: column; gap: .2rem; }
.pay-sheet-eyebrow > span:first-child { font-size: 1.2rem; color: #666; }
.pay-sheet-title { font-size: 1.8rem; font-weight: 600; color: #333; }
.pay-sheet-close {
  width: 2.4rem; height: 2.4rem; border: 0; background: transparent;
  color: #999; font-size: 2.4rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pay-sheet-form { flex: 1 1 auto; overflow-y: auto; padding: 1.5rem 1.4rem; }
.pay-sheet-sec { margin-bottom: 2rem; }
.pay-sheet-sec-title {
  font-size: 1.5rem; color: #333; font-weight: 600; margin-bottom: 1.2rem;
  position: relative; padding-left: .8rem;
}
.pay-sheet-sec-title::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1.4rem; background: #c8222a; border-radius: 2px;
}
.pay-sheet-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.2rem 0 1.5rem;
}
.pay-sheet-total-label { font-size: 1.4rem; color: #333; font-weight: 500; }
.pay-sheet-total-value {
  font-size: 2.6rem; font-weight: 700; color: #c8222a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 支付方式选项 */
.pay-sheet-opts { display: flex; flex-direction: column; gap: .6rem; }
.pay-sheet-opt {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.2rem 0;
  background: #fff; border-bottom: 1px solid #f0f0f0;
  cursor: pointer; position: relative;
}
.pay-sheet-opt:last-child { border-bottom: none; }
.pay-sheet-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-sheet-opt-icon {
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.pay-sheet-opt-icon img { width: 100%; height: 100%; object-fit: contain; }
.pay-sheet-opt-body { flex: 1; min-width: 0; }
.pay-sheet-opt-name { font-size: 1.5rem; font-weight: 500; color: #333; }
.pay-sheet-opt-desc { font-size: 1.2rem; color: #999; margin-top: .2rem; }
.pay-sheet-opt-radio {
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  border: 1px solid #ccc; flex: 0 0 auto; position: relative;
}
.pay-sheet-opt:has(input:checked) .pay-sheet-opt-radio,
.pay-sheet-opt.is-checked .pay-sheet-opt-radio {
  border-color: #c8222a; background: #c8222a;
}
.pay-sheet-opt:has(input:checked) .pay-sheet-opt-radio::after,
.pay-sheet-opt.is-checked .pay-sheet-opt-radio::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: .4rem; height: .8rem;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.pay-sheet-footer {
  flex: 0 0 auto; padding: .5rem 1.4rem 1.5rem;
  background: #fff;
}
.pay-sheet-submit {
  width: 100%; height: 3.6rem; border: 0; border-radius: .4rem;
  background: #c8222a;
  color: #fff; font-size: 1.6rem; font-weight: 500;
  cursor: pointer;
}
.pay-sheet-submit:active { opacity: .9; }
.pay-sheet-disclaim {
  margin: 1rem 0 0; text-align: center; font-size: 1.1rem; color: #999;
}

/* ============================================================
 * 支付检测浮层 .pay-waiter
 * ============================================================ */
.pay-waiter {
  position: fixed; inset: 0; z-index: 9900;
  background: rgba(15,23,42,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.pay-waiter.is-open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .25s ease;
}
.pay-waiter-card {
  background: #fff; border-radius: 1rem;
  width: 100%; max-width: 32rem;
  padding: 2.4rem 1.8rem 1.8rem; text-align: center;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.25);
}
.pay-waiter-spinner {
  width: 4rem; height: 4rem; margin: 0 auto 1.4rem; color: #c8222a;
  animation: pay-waiter-rotate 1s linear infinite;
}
.pay-waiter-spinner svg { width: 100%; height: 100%; }
.pay-waiter-spinner circle {
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-dasharray: 90 150;
}
@keyframes pay-waiter-rotate { to { transform: rotate(360deg); } }
.pay-waiter-title { margin: 0 0 .6rem; font-size: 1.8rem; font-weight: 600; color: #333; }
.pay-waiter-tip { margin: 0 0 1.6rem; font-size: 1.3rem; color: #888; line-height: 1.5; }
.pay-waiter-desc {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1rem 1rem; padding: 1.4rem;
  background: #f8f9fa; border-radius: .6rem;
  margin: 0 0 1.8rem; font-size: 1.3rem; text-align: left;
  align-items: center;
}
.pay-waiter-desc dt { color: #666; margin: 0; }
.pay-waiter-desc dd { margin: 0; color: #333; font-weight: 600; text-align: right; word-break: break-word; }
.pay-waiter-mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 1.25rem; color: #555 !important; }
.pay-waiter-amt { color: #c8222a !important; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.pay-waiter-actions { display: flex; flex-direction: column; gap: 1rem; }
.pay-waiter-btn {
  height: 3.8rem; border: 0; border-radius: .6rem;
  font-size: 1.5rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pay-waiter-btn-primary {
  background: #c8222a;
  color: #fff;
}
.pay-waiter-btn-ghost { background: #fff; color: #666; border: 1px solid #e5e7eb; }
.pay-waiter-btn-danger { background: #fff; color: #c8222a; border: 1px solid #f8d7da; }
.pay-waiter-note { margin: 1.4rem 0 0; font-size: 1.1rem; color: #999; line-height: 1.4; }

/* ============================================================
 * 支付方式选项 .pay-method-*（licai.php pay-sheet 内）
 * 关键：用固定尺寸的图标框，避免原图被 CSS reset 撑满全宽
 * ============================================================ */
.pay-methods { display: flex; flex-direction: column; }
.pay-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 0;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.pay-method:last-child { border-bottom: none; }
.pay-method:active { opacity: 0.8; }
.pay-method input[type=radio] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.pay-method-icon {
  flex: 0 0 2.4rem;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
}
.pay-method-icon img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
.pay-method-bd {
  display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0;
}
.pay-method-name {
  font-size: 1.5rem; font-weight: 500; color: #333; line-height: 1.2;
}
.pay-method-desc {
  font-size: 1.2rem; color: #999; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pay-method-check {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid #ddd; background: #fff;
  position: relative; flex: 0 0 auto;
}
.pay-method:has(input:checked) .pay-method-check {
  border-color: #c8222a;
  background: #c8222a;
}
.pay-method:has(input:checked) .pay-method-check::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: .45rem; height: .9rem;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* ============================================================
 * Share selector .pay-share-* inside the licai.php pay sheet
 * ============================================================ */
.pay-share {
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: .4rem;
  padding: 0;
  margin-bottom: 1rem;
  height: 4.4rem;
}
.pay-share-btn {
  flex: 0 0 4.4rem;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #f8f8f8;
  border: none;
  font-size: 2rem; font-weight: 400; color: #666;
  cursor: pointer;
  user-select: none;
}
.pay-share-btn[data-pay-act="dec"] { border-right: 1px solid #e0e0e0; border-top-left-radius: .4rem; border-bottom-left-radius: .4rem; }
.pay-share-btn[data-pay-act="inc"] { border-left: 1px solid #e0e0e0; border-top-right-radius: .4rem; border-bottom-right-radius: .4rem; }
.pay-share-btn:active { background: #eee; }
.pay-share-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0; outline: 0;
  background: transparent;
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: #333;
  appearance: textfield;
  -moz-appearance: textfield;
}
.pay-share-input::-webkit-outer-spin-button,
.pay-share-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.pay-share-suffix {
  flex: 0 0 auto;
  padding-right: 1.2rem;
  font-size: 1.4rem; color: #333;
}
.pay-share-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-bottom: 1.2rem;
}
.pay-share-q {
  padding: .6rem 0;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 2rem;
  font-size: 1.3rem;
  color: #666;
  cursor: pointer;
  text-align: center;
}
.pay-share-q:active,
.pay-share-q.is-active {
  border-color: #c8222a;
  color: #c8222a;
  background: #fff5f5;
  font-weight: 500;
}
.pay-share-hint {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.3rem;
  color: #888;
  padding: 0 .2rem;
}
.pay-share-hint strong { font-weight: 600; color: #333; }
.pay-share-earn { color: #c8222a !important; }
.pay-share-limit {
  margin-top: .45rem;
  font-size: 1.15rem;
  color: #999;
}

/* ============================================================
 * 投保成功回执 /pages/licai_pay_return.php
 * 1:1 复刻工行投保成功回执（移动端 H5）
 * ============================================================ */
.lcr-page {
  padding: 1rem 1rem 2.4rem;
  background: #f4f5f7;
  min-height: 100vh;
}

.lcr-receipt {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .06);
  border: 1px solid #eee;
  position: relative;
}

/* ---------- 顶部品牌条 ---------- */
.lcr-receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 1.4rem;
  background: linear-gradient(135deg, #c8222a 0%, #a2181d 100%);
  color: #fff;
  position: relative;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  overflow: hidden;
}
.lcr-receipt-head::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f0cf77 0%, #d8b35a 50%, #f0cf77 100%);
}
.lcr-brand { display: flex; align-items: center; gap: .75rem; }
.lcr-brand-logo {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.lcr-brand-logo svg { width: 1.8rem; height: 1.8rem; }
.lcr-brand-txt {
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.lcr-brand-txt strong {
  font-size: 1.6rem; font-weight: 700;
  letter-spacing: .05em;
}
.lcr-brand-txt span {
  font-size: 1.05rem;
  opacity: .9;
  margin-top: .2rem;
  letter-spacing: .02em;
}
.lcr-stamp {
  background: #fff;
  color: #c8222a;
  font-size: 1.1rem;
  font-weight: 600;
  padding: .45rem 1rem;
  border-radius: 2rem;
  letter-spacing: .1em;
  line-height: 1;
}

/* ---------- 勾号 + 标题（水平布局） ---------- */
.lcr-receipt-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
  padding: 2rem 1.6rem 1.4rem;
  background: #fff;
}
.lcr-check {
  flex-shrink: 0;
  width: 3.8rem; height: 3.8rem;
  border-radius: 50%;
  background: #e9f8ed;
  color: #2ea84e;
  display: flex; align-items: center; justify-content: center;
}
.lcr-check svg { width: 2.2rem; height: 2.2rem; }
.lcr-receipt-title { display: flex; flex-direction: column; gap: .2rem; }
.lcr-receipt-title h1 {
  font-size: 1.9rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 0;
}
.lcr-receipt-title p {
  font-size: 1.25rem;
  color: #888;
  margin: 0;
}

/* ---------- 正文敬语 ---------- */
.lcr-receipt-body {
  padding: 0 1.6rem;
  color: #333;
}
.lcr-greet {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 .8rem;
}
.lcr-greet strong { font-weight: 700; }
.lcr-letter {
  font-size: 1.3rem;
  line-height: 1.8;
  margin: 0 0 1.6rem;
  color: #444;
  text-indent: 2em;
  word-break: break-word;
}
.lcr-hl-product {
  color: #c8222a;
  font-weight: 700;
}
.lcr-hl-time {
  color: #c8222a;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #c8222a;
  text-underline-offset: .25rem;
}
.lcr-hl-wallet {
  color: #c8222a;
  font-weight: 700;
}
.lcr-hl-after {
  color: #c8222a;
  font-weight: 700;
}
.lcr-hi { color: #c8222a; }

/* ---------- 关键金额条 ---------- */
.lcr-key-amt {
  display: flex;
  align-items: stretch;
  margin: 0 1.6rem 1.8rem;
  padding: 1.6rem 0;
  background: linear-gradient(180deg, #fdf2e4 0%, #fae4c9 100%);
  border-radius: .8rem;
}
.lcr-key-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.lcr-key-divider {
  width: 1px;
  background: #e2c38f;
  margin: .4rem 0;
  opacity: .7;
}
.lcr-key-label {
  font-size: 1.25rem;
  color: #8a6d43;
  letter-spacing: .02em;
}
.lcr-key-value {
  font-size: 2.4rem;
  font-weight: 700;
  color: #1a1a1a;
  font-family: -apple-system, "PingFang SC", Roboto, sans-serif;
  letter-spacing: .01em;
  line-height: 1.1;
}
.lcr-key-value-accent { color: #c8222a; }

/* ---------- 保单明细 ---------- */
.lcr-receipt-detail {
  padding: 0 1.6rem 1.6rem;
}
.lcr-detail-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.45rem;
  font-weight: 700;
  color: #1a1a1a;
  padding: .2rem 0 1rem;
}
.lcr-detail-bar {
  display: inline-block;
  width: .35rem;
  height: 1.45rem;
  background: #c8222a;
  border-radius: .2rem;
}
.lcr-desc {
  margin: 0;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  column-gap: 1.2rem;
  row-gap: 1.1rem;
  font-size: 1.3rem;
  align-items: baseline;
}
.lcr-desc dt {
  color: #888;
  font-weight: 400;
  white-space: nowrap;
}
.lcr-desc dd {
  margin: 0;
  color: #222;
  text-align: left;
  word-break: break-all;
  line-height: 1.4;
}
.lcr-desc-inline { display: inline-flex; align-items: center; gap: .4rem; }
.lcr-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.3rem;
  color: #222;
  letter-spacing: .01em;
}

/* ---------- 底部说明 + 印章 ---------- */
.lcr-receipt-foot {
  position: relative;
  padding: 1.4rem 1.6rem 1.8rem;
  border-top: 1px dashed #e6e6e9;
  background: #fff;
  min-height: 8rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.lcr-foot-note {
  font-size: 1.1rem;
  color: #999;
  line-height: 1.7;
  margin: 0;
  padding-right: 8rem; /* 给印章让位 */
  text-align: left;
}
.lcr-seal {
  position: absolute;
  right: 1.6rem;
  bottom: 1.2rem;
  width: 7.2rem;
  height: 6.8rem;
  transform: rotate(-14deg);
  opacity: .88;
  pointer-events: none;
}
.lcr-seal-svg { width: 100%; height: 100%; display: block; }
.lcr-seal-text-top {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.lcr-seal-text-bot {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.lcr-seal-text-star {
  font-size: 14px;
  font-weight: 700;
}

/* ---------- 待处理 / 失败 通知块 ---------- */
.lcr-notice {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem 1.4rem 1.8rem;
  text-align: center;
  border: 1px solid #eee;
  box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .06);
}
.lcr-notice-wait { border-color: #fadaaf; background: linear-gradient(180deg, #fffaf1 0%, #fff 40%); }
.lcr-notice-fail { border-color: #f3d0d0; background: linear-gradient(180deg, #fff3f3 0%, #fff 40%); }
.lcr-notice-icon {
  width: 4rem; height: 4rem;
  margin: 0 auto .8rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.lcr-notice-icon svg { width: 2.4rem; height: 2.4rem; }
.lcr-notice-wait .lcr-notice-icon { background: #ffecd1; color: #b87a2a; }
.lcr-notice-fail .lcr-notice-icon { background: #ffe2e2; color: #c8222a; }
.lcr-notice-title {
  font-size: 1.7rem; font-weight: 700;
  color: #1a1a1a; margin: 0 0 .4rem;
}
.lcr-notice-sub {
  font-size: 1.3rem; color: #6c757d;
  margin: 0 0 1rem; line-height: 1.7;
}
.lcr-notice .lcr-desc {
  text-align: left;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #eee;
}

/* ---------- 底部双按钮 ---------- */
.lcr-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.6rem 0 0;
}
.lcr-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: .35rem;
  height: 4.6rem;
  border-radius: .6rem;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, opacity .15s;
  user-select: none;
}
.lcr-btn-primary {
  background: linear-gradient(180deg, #c8222a 0%, #a2181d 100%);
  color: #fff;
  box-shadow: 0 .2rem .5rem rgba(200, 34, 42, .25);
}
.lcr-btn-primary:active { opacity: .9; }
.lcr-btn-ghost {
  background: #fff;
  color: #333;
  border-color: #e0e0e0;
}
.lcr-btn-ghost:active { background: #f5f5f7; }

/* ============================================================
 * 收银台 /pages/licai_pay.php  .lcp-*
 * ============================================================ */
.lcp-page { padding: .9rem; padding-bottom: 2.5rem; }
.lcp-hero {
  background: linear-gradient(135deg, #b70000 0%, #8a0000 100%);
  border-radius: .8rem; padding: 1.1rem 1.2rem;
  color: #fff;
  box-shadow: 0 .3rem 1.2rem rgba(183,0,0,.15);
  margin-bottom: .8rem;
}
.lcp-amount { display: flex; flex-direction: column; gap: .25rem; }
.lcp-amount-label { font-size: 1.2rem; opacity: .85; letter-spacing: .05em; }
.lcp-amount-value { font-size: 2.8rem; font-weight: 700; font-family: -apple-system, Roboto, sans-serif; }
.lcp-desc { margin-top: .6rem; font-size: 1.2rem; opacity: .92; line-height: 1.6; }
.lcp-channel {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .55rem;
  background: rgba(255,255,255,.15);
  padding: .3rem .6rem;
  border-radius: 999px;
  font-size: 1.1rem;
}
.lcp-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.3rem;
}
.lcp-tips {
  background: #fffaf1;
  border: 1px solid #fadaaf;
  border-radius: .7rem;
  padding: .8rem 1rem;
  margin-top: .8rem;
}
.lcp-tip-title {
  font-size: 1.3rem; font-weight: 700; color: #b87a2a;
  margin: 0 0 .4rem;
}
.lcp-tip-list {
  margin: 0; padding-left: 1.1rem;
  font-size: 1.2rem; color: #7a5a33; line-height: 1.7;
}
.lcp-tip-list li { margin-bottom: .1rem; }
.lcp-actions { display: flex; gap: .7rem; margin-top: 1rem; }
.lcp-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  height: 2.8rem;
  border-radius: .55rem;
  font-size: 1.45rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.lcp-btn-primary {
  background: linear-gradient(180deg, #b70000 0%, #8a0000 100%);
  color: #fff;
  box-shadow: 0 .15rem .4rem rgba(183,0,0,.2);
}
.lcp-btn-primary:active { opacity: .92; }
.lcp-btn-ghost { background: #fff; color: #4b5563; border-color: #dcdcdc; }
.lcp-btn-ghost:active { background: #f5f5f7; }

/* ============================================================
 * 投保下单页 /pages/licai_buy.php  .lcb-*（与 pay-sheet 同族样式）
 * ============================================================ */
.licai-buy-page { padding-bottom: 3rem; }
.lcb-product {
  display: grid; grid-template-columns: 4rem 1fr; gap: .8rem;
  padding: .7rem;
  background: #fff;
  border: 1px solid #ececee;
  border-radius: .7rem;
  margin-bottom: .8rem;
}
.lcb-product-cover {
  width: 4rem; height: 4rem;
  object-fit: cover; border-radius: .5rem;
  background: #f5f5f7;
}
.lcb-product-info { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.lcb-product-label { font-size: 1.1rem; color: #888; }
.lcb-product-name {
  font-size: 1.45rem; font-weight: 600; color: #1a1a1a;
  line-height: 1.35;
  display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lcb-product-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .15rem; }
.lcb-tag {
  font-size: 1.05rem;
  padding: .1rem .45rem;
  background: #fff5f5;
  color: #b70000;
  border: 1px solid #f3d0d0;
  border-radius: .3rem;
}
.lcb-tag-forever { background: #fff8ec; color: #b87a2a; border-color: #fadaaf; }
.lcb-share-row {
  display: flex; align-items: center;
  background: #f7f7f9;
  border: 1px solid #e6e6e9;
  border-radius: .65rem;
  padding: .2rem;
}
.lcb-share-btn {
  flex: 0 0 2.4rem; height: 2.4rem;
  background: #fff; border: 1px solid #e6e6e9; border-radius: .5rem;
  font-size: 1.85rem; color: #333; cursor: pointer;
}
.lcb-share-btn:active { background: #f0f0f2; }
.lcb-share-input {
  flex: 1; min-width: 0; height: 2.4rem;
  border: 0; outline: 0; background: transparent;
  text-align: center; font-size: 1.7rem; font-weight: 600; color: #1a1a1a;
}
.lcb-share-suffix { padding-right: .8rem; font-size: 1.3rem; color: #888; }
.lcb-quick-rows {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem;
  margin-top: .55rem;
}
.lcb-quick-btn {
  padding: .45rem .2rem;
  background: #fff; border: 1px solid #e6e6e9; border-radius: .55rem;
  font-size: 1.2rem; color: #555; cursor: pointer;
}
.lcb-quick-btn:active,
.lcb-quick-btn.is-active {
  border-color: #b70000; color: #b70000; background: #fff5f5;
}
.lcb-price-hint {
  display: flex; justify-content: space-between;
  font-size: 1.2rem; color: #888;
  margin-top: .55rem;
}
.lcb-price-hint strong { color: #1a1a1a; }
.lcb-pay-list { display: flex; flex-direction: column; gap: .55rem; }
.lcb-pay-item {
  position: relative;
  display: grid; grid-template-columns: 2.8rem 1fr 1.2rem;
  align-items: center; gap: .85rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid #e6e6e9;
  border-radius: .7rem;
  cursor: pointer;
}
.lcb-pay-item input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.lcb-pay-item img {
  width: 2rem; height: 2rem; object-fit: contain; justify-self: center;
}
.lcb-pay-bd { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.lcb-pay-name { font-size: 1.45rem; font-weight: 600; color: #1a1a1a; }
.lcb-pay-desc { font-size: 1.1rem; color: #8b8b91; }
.lcb-pay-check {
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1.5px solid #cfcfd3; background: #fff;
  position: relative;
}
.lcb-pay-item:has(input:checked) {
  border-color: #b70000;
  background: #fffafa;
  box-shadow: 0 0 0 2px rgba(183,0,0,.08);
}
.lcb-pay-item:has(input:checked) .lcb-pay-check { background: #b70000; border-color: #b70000; }
.lcb-pay-item:has(input:checked) .lcb-pay-check::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: .38rem; height: .62rem;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(45deg);
}
.lcb-pay-hint { font-size: 1.1rem; color: #888; margin: .5rem 0 0; }
.lcb-summary-card {
  background: linear-gradient(135deg, #fff8f0 0%, #fff4e8 100%);
  border: 1px solid #f3d8bc;
  border-radius: .7rem;
  padding: .85rem 1rem;
  margin: .8rem 0;
}
.lcb-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.3rem; color: #7a5a33;
  padding: .2rem 0;
}
.lcb-summary-row strong { color: #1a1a1a; font-weight: 600; }
.lcb-summary-total {
  margin-top: .3rem; padding-top: .55rem;
  border-top: 1px dashed #f3d8bc;
  display: flex; justify-content: space-between; align-items: baseline;
}
.lcb-sum-total { font-size: 1.3rem; color: #b87a2a; font-weight: 600; }
.lcb-sum-earn { font-size: 1.65rem; color: #b70000; font-weight: 700; }
.lcb-action { margin-top: 1rem; }
.lcb-submit {
  width: 100%;
  height: 2.9rem;
  background: linear-gradient(180deg, #b70000 0%, #8a0000 100%);
  color: #fff;
  border: 0;
  border-radius: .6rem;
  font-size: 1.55rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 .2rem .55rem rgba(183,0,0,.22);
}
.lcb-submit:active { opacity: .93; }
.lcb-disclaim {
  font-size: 1.1rem; color: #888; text-align: center;
  margin: .6rem 0 0; line-height: 1.6;
}
.lcb-disclaim a { color: #b70000; text-decoration: none; }

/* ============================================================
 * 通用跳转/二维码支付页 /pages/go.php  .go-*
 * ============================================================ */
.go-page { padding: 0; background: #f5f5f7; min-height: 100vh; }
.go-main { padding: .9rem .9rem 3rem; }
.go-card {
  background: #fff;
  border: 1px solid #ececee;
  border-radius: .8rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 .3rem 1.2rem rgba(0,0,0,.04);
  margin-bottom: .8rem;
}
.go-head {
  display: flex; align-items: center; gap: .75rem;
  padding-bottom: .8rem;
  border-bottom: 1px dashed #ececee;
  margin-bottom: .8rem;
}
.go-head-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.go-icon {
  width: 2.8rem; height: 2.8rem;
  border-radius: .65rem;
  background: #f7f7f9;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 2.8rem;
}
.go-icon img { width: 2rem; height: 2rem; object-fit: contain; }
.go-title { font-size: 1.55rem; font-weight: 700; color: #1a1a1a; margin: 0; }
.go-sub { font-size: 1.2rem; color: #888; }
.go-display {
  padding: .8rem 0;
  text-align: center;
}
.go-display .lcp-amount-value { color: #b70000; }
.go-status {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 0;
  font-size: 1.3rem; color: #b87a2a;
}
.go-status-spin {
  width: 1rem; height: 1rem;
  border: 2px solid #f3d8bc;
  border-top-color: #b87a2a;
  border-radius: 50%;
  animation: goSpin 1s linear infinite;
}
@keyframes goSpin { to { transform: rotate(360deg); } }
.go-status-text { color: #7a5a33; }
.go-qr {
  margin: 0 auto;
  width: 11rem; height: 11rem;
  padding: .5rem;
  background: #fff;
  border: 1px solid #ececee;
  border-radius: .7rem;
  display: flex; align-items: center; justify-content: center;
}
.go-qr img { width: 100%; height: 100%; object-fit: contain; }
.go-qr-hint {
  font-size: 1.2rem; color: #888; text-align: center; margin: .55rem 0 0;
}
.go-aux {
  display: flex; flex-direction: column; gap: .55rem;
  margin: .8rem 0 0;
  padding-top: .8rem;
  border-top: 1px dashed #ececee;
}
.go-aux-qr, .go-aux-copy {
  background: #fafafa;
  border: 1px solid #ececee;
  border-radius: .55rem;
  padding: .6rem .75rem;
}
.go-copy-row { display: flex; align-items: center; gap: .5rem; }
.go-copy-k { font-size: 1.1rem; color: #888; flex: 0 0 auto; }
.go-copy-input {
  flex: 1; min-width: 0; height: 1.9rem;
  background: #fff; border: 1px solid #e6e6e9; border-radius: .35rem;
  padding: 0 .5rem; font-size: 1.2rem; color: #333;
  font-family: ui-monospace, Menlo, monospace;
}
.go-copy-btn {
  flex: 0 0 auto;
  height: 1.9rem; padding: 0 .7rem;
  background: #fff; border: 1px solid #cfcfd3; border-radius: .35rem;
  color: #b70000; font-size: 1.15rem; cursor: pointer;
}
.go-copy-btn:active { background: #fff5f5; }
.go-copy-tip { font-size: 1.1rem; color: #aaa; margin: .3rem 0 0; }
.go-actions { display: flex; gap: .6rem; margin-top: .9rem; }
.go-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  height: 2.6rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  font-size: 1.35rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.go-btn-primary {
  background: linear-gradient(180deg, #b70000 0%, #8a0000 100%);
  color: #fff;
  box-shadow: 0 .15rem .4rem rgba(183,0,0,.2);
}
.go-btn-secondary {
  background: #fff; color: #b70000; border-color: #f3d0d0;
}
.go-btn-ghost { background: #fff; color: #4b5563; border-color: #dcdcdc; }
.go-btn-k { font-weight: 600; }
.go-btn-v { font-size: 1.25rem; opacity: .9; font-weight: 400; }
.go-tips {
  background: #fffaf1;
  border: 1px solid #fadaaf;
  border-radius: .6rem;
  padding: .7rem .9rem;
  margin-top: .8rem;
}
.go-tips-title { font-size: 1.3rem; font-weight: 700; color: #b87a2a; margin: 0 0 .3rem; }
.go-tips-list { margin: 0; padding-left: 1.1rem; font-size: 1.2rem; color: #7a5a33; line-height: 1.65; }
/* 微信浏览器外层蒙层引导 */
.go-wx-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 2000;
  display: flex; flex-direction: column; align-items: flex-end; padding: 1rem;
  color: #fff;
}
.go-wx-mask-arrow {
  width: 3.5rem; height: 3.5rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'><path d='M6 4v16'/><path d='M12 10l-6-6-6 6' transform='translate(12 0)'/></svg>") no-repeat center/contain;
  margin-right: .5rem;
}
.go-wx-mask-title { font-size: 1.65rem; font-weight: 700; margin: .5rem 1rem 0 0; text-align: right; max-width: 12rem; }
.go-wx-mask-desc { font-size: 1.25rem; opacity: .85; margin: .4rem 1rem 0 0; text-align: right; max-width: 14rem; line-height: 1.55; }

/* ============================================================
 * 邀请好友 /pages/invite.php
 * ============================================================ */
.invite-main { padding: .9rem .9rem 3rem; background: #f5f5f7; min-height: 100vh; }

/* ---------- Hero 大横幅（红金渐变 + 光晕） ---------- */
.invite-hero2 {
  position: relative;
  border-radius: .9rem;
  padding: 1.2rem 1.2rem 1.1rem;
  background: linear-gradient(135deg, #b70000 0%, #8a0000 55%, #6d0000 100%);
  color: #fff;
  box-shadow: 0 .5rem 1.5rem rgba(138, 0, 0, .25);
  overflow: hidden;
  margin-bottom: .8rem;
}
.invite-hero2-bg {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; border-radius: inherit;
}
.invite-hero2-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  opacity: .45;
}
.invite-hero2-orb-1 {
  width: 14rem; height: 14rem;
  top: -4rem; right: -3rem;
  background: radial-gradient(circle, #ffe7a8 0%, transparent 70%);
}
.invite-hero2-orb-2 {
  width: 10rem; height: 10rem;
  bottom: -3rem; left: -2rem;
  background: radial-gradient(circle, #ffc38a 0%, transparent 65%);
  opacity: .35;
}
.invite-hero2-orb-3 {
  width: 8rem; height: 8rem;
  top: 40%; left: 60%;
  background: radial-gradient(circle, #ff9e9e 0%, transparent 65%);
  opacity: .25;
}
.invite-hero2-top { position: relative; z-index: 1; }
.invite-hero2-badge {
  display: inline-block;
  padding: .25rem .65rem;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 230, 170, .45);
  color: #ffe7a8;
  border-radius: 999px;
  letter-spacing: .04em;
  margin-bottom: .65rem;
}
.invite-hero2-title {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .02em;
}
.invite-hero2-title span {
  background: linear-gradient(135deg, #ffe7a8 0%, #ffc873 60%, #e8b366 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 .15rem;
}
.invite-hero2-sub {
  margin: .5rem 0 0;
  font-size: 1.3rem;
  opacity: .9;
  line-height: 1.5;
}

/* 邀请码块 */
.invite-hero2-code {
  position: relative; z-index: 1;
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 230, 170, .3);
  border-radius: .7rem;
  backdrop-filter: blur(8px);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: .15rem .8rem;
  align-items: center;
}
.invite-hero2-code-k {
  grid-column: 1; grid-row: 1;
  font-size: 1.1rem; opacity: .85;
  letter-spacing: .05em;
}
.invite-hero2-code-v {
  grid-column: 1; grid-row: 2;
  font-size: 2.35rem; font-weight: 700;
  font-family: -apple-system, Roboto, "SF Mono", sans-serif;
  letter-spacing: .08em;
  color: #ffe7a8;
}
.invite-hero2-copy {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .45rem .7rem;
  font-size: 1.15rem;
  color: #b70000;
  background: linear-gradient(135deg, #fff5d8 0%, #ffe7a8 100%);
  border: 1px solid #e8c06a;
  border-radius: .45rem;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .1s, box-shadow .15s;
  box-shadow: 0 .15rem .35rem rgba(0, 0, 0, .12);
}
.invite-hero2-copy:active { transform: scale(.96); }
.invite-hero2-copy svg { flex: 0 0 auto; }

/* 双联奖励 */
.invite-hero2-prizes {
  position: relative; z-index: 1;
  margin-top: .85rem;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: .4rem .8rem;
  padding: .65rem .4rem;
  background: rgba(0, 0, 0, .12);
  border-radius: .6rem;
  border: 1px solid rgba(255, 230, 170, .2);
}
.invite-hero2-prize { text-align: center; }
.invite-hero2-prize-v {
  font-size: 1.8rem; font-weight: 700;
  color: #ffe7a8;
  line-height: 1.2;
  margin-bottom: .15rem;
}
.invite-hero2-prize-k {
  font-size: 1.05rem;
  opacity: .78;
}
.invite-hero2-prize-sep {
  width: 1px; height: 1.8rem;
  background: linear-gradient(180deg, transparent, rgba(255, 230, 170, .45), transparent);
}

/* ---------- 下一档进度 动力卡 ---------- */
.invite-progress {
  background: #fff;
  border: 1px solid #ececee;
  border-radius: .8rem;
  padding: .9rem 1rem;
  margin-bottom: .8rem;
  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .03);
}
.invite-progress-head {
  display: flex; justify-content: space-between;
  align-items: center; gap: .8rem;
}
.invite-progress-head > div:first-child {
  flex: 1; min-width: 0;
}
.invite-progress-title {
  font-size: 1.45rem; font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
}
.invite-progress-title strong { color: #b70000; font-size: 1.8rem; }
.invite-progress-sub {
  margin-top: .3rem;
  font-size: 1.15rem;
  color: #888;
  line-height: 1.7;
}
.invite-progress-sub strong { color: #b70000; }
.invite-progress-chip {
  display: inline-block;
  margin: .15rem .2rem .15rem 0;
  padding: .12rem .5rem;
  font-size: 1.05rem;
  border-radius: .3rem;
  border: 1px solid transparent;
}
.invite-progress-chip-credit { color: #b70000; background: #fff5f5; border-color: #f3d0d0; }
.invite-progress-chip-cash   { color: #b87a2a; background: #fffaf1; border-color: #fadaaf; }
.invite-progress-chip-bind   { color: #1e5fa8; background: #f0f6ff; border-color: #c4d9f5; }
.invite-progress-link { color: #b70000; text-decoration: none; }

/* 圆环进度（纯 CSS conic） */
.invite-progress-ring {
  flex: 0 0 auto;
  width: 3.8rem; height: 3.8rem;
  border-radius: 50%;
  background:
    conic-gradient(#b70000 calc(var(--p, 0) * 1%), #f0f0f2 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.invite-progress-ring::before {
  content: "";
  position: absolute; inset: .35rem;
  background: #fff;
  border-radius: 50%;
}
.invite-progress-ring-v {
  position: relative;
  font-size: 1.1rem; font-weight: 700; color: #1a1a1a;
  font-family: -apple-system, Roboto, sans-serif;
}

/* 长条进度 */
.invite-progress-bar {
  margin-top: .8rem;
  height: .4rem;
  background: #f0f0f2;
  border-radius: 999px;
  overflow: hidden;
}
.invite-progress-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #e8c06a 0%, #b70000 100%);
  border-radius: 999px;
  transition: width .5s ease;
}
.invite-progress-done {
  background: linear-gradient(135deg, #fff8f0 0%, #fff4e8 100%);
  border-color: #f3d8bc;
}

/* ---------- 战绩 Mini Stats ---------- */
.invite-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-bottom: .8rem;
}
.invite-stat {
  background: #fff;
  border: 1px solid #ececee;
  border-radius: .7rem;
  padding: .75rem .5rem;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: transform .1s, box-shadow .15s;
}
.invite-stat:active { transform: translateY(1px); }
.invite-stat-v {
  font-size: 2.1rem; font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: .15rem;
}
.invite-stat-v-ok { color: #2ea84e; }
.invite-stat-k {
  font-size: 1.1rem;
  color: #888;
}

/* ---------- 快速分享 ---------- */
.invite-share-card { padding: 1rem 1.1rem; }
.invite-share-k {
  font-size: 1.4rem; font-weight: 600;
  color: #1a1a1a;
  margin-bottom: .65rem;
}
.invite-share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: .65rem;
}
.invite-share-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .3rem;
  padding: .7rem .3rem;
  background: #fafafa;
  border: 1px solid #ececee;
  border-radius: .6rem;
  font-size: 1.1rem;
  color: #333;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.invite-share-btn:active { transform: scale(.97); background: #f0f0f2; }
.invite-share-icon {
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: .45rem;
  background: #fff;
}
.invite-share-icon-share  { color: #1e5fa8; background: #f0f6ff; }
.invite-share-icon-link   { color: #b87a2a; background: #fffaf1; }
.invite-share-icon-code   { color: #2ea84e; background: #f0faf3; }
.invite-share-icon-poster { color: #fff; background: linear-gradient(135deg, #b70000 0%, #8a0000 100%); }
.invite-share-t { white-space: nowrap; }
.invite-share-btn-primary { border-color: #f3d0d0; background: #fff5f5; color: #b70000; font-weight: 600; }
.invite-share-link {
  display: flex;
  padding: .4rem .6rem;
  background: #f7f7f9;
  border: 1px solid #e6e6e9;
  border-radius: .5rem;
}
.invite-share-input {
  flex: 1;
  border: 0; outline: 0;
  background: transparent;
  font-size: 1.15rem;
  color: #555;
  font-family: ui-monospace, Menlo, monospace;
}

/* ---------- 最近邀请 ---------- */
.invite-recent-card { padding: 1rem 1.1rem; }
.invite-recent-head {
  display: flex; justify-content: space-between;
  align-items: center;
  margin-bottom: .7rem;
}
.invite-recent-head .sp-card-title { margin: 0; font-size: 1.4rem; font-weight: 600; }
.invite-recent-more {
  font-size: 1.2rem; color: #b70000;
  text-decoration: none;
}
.invite-recent-empty {
  padding: 1.4rem 0;
  text-align: center;
}
.invite-recent-empty-icon {
  margin: 0 auto .5rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.invite-recent-empty-t {
  font-size: 1.4rem; color: #1a1a1a; font-weight: 600;
  margin-bottom: .3rem;
}
.invite-recent-empty-s {
  font-size: 1.15rem; color: #888;
  line-height: 1.6;
  padding: 0 1rem;
}
.invite-recent-list { list-style: none; margin: 0; padding: 0; }
.invite-recent-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: center; gap: .7rem;
  padding: .65rem 0;
  border-bottom: 1px solid #f5f5f7;
}
.invite-recent-row:last-child { border-bottom: 0; }
.invite-recent-avatar {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe7a8 0%, #b87a2a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
}
.invite-recent-main { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.invite-recent-name { font-size: 1.3rem; color: #1a1a1a; font-weight: 500; }
.invite-recent-when { font-size: 1.1rem; color: #888; }
.invite-recent-tag {
  padding: .15rem .5rem;
  font-size: 1.05rem;
  border-radius: .3rem;
  border: 1px solid transparent;
  white-space: nowrap;
}
.invite-recent-tag-ok   { color: #2ea84e; background: #f0faf3; border-color: #c8e8d2; }
.invite-recent-tag-wait { color: #b87a2a; background: #fffaf1; border-color: #fadaaf; }

/* ---------- 海报弹窗 ---------- */
.invite-poster-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .72);
  z-index: 2000;
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
}
.invite-poster-modal.show { display: flex; }
.invite-poster-modal[hidden] { display: none !important; }
.invite-poster-dialog {
  position: relative;
  background: #fff;
  border-radius: .8rem;
  padding: 1rem .9rem;
  max-width: 22rem; width: 100%;
  max-height: 95vh;
  overflow: auto;
  display: flex; flex-direction: column; gap: .7rem;
}
.invite-poster-close {
  position: absolute; top: .5rem; right: .5rem;
  width: 1.8rem; height: 1.8rem;
  border: 0;
  background: #f0f0f2;
  border-radius: 50%;
  font-size: 1.7rem; color: #555;
  cursor: pointer;
  line-height: 1;
}
.invite-poster-close:active { background: #e0e0e3; }
.invite-poster-stage {
  position: relative;
  background: #f5f5f7;
  border-radius: .6rem;
  overflow: hidden;
  min-height: 16rem;
  display: flex; align-items: center; justify-content: center;
}
.invite-poster-stage canvas,
.invite-poster-img {
  max-width: 100%;
  max-height: 70vh;
  display: block;
  border-radius: .5rem;
}
.invite-poster-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .88);
  color: #888;
  font-size: 1.3rem;
}
.invite-poster-tip {
  margin: 0;
  font-size: 1.15rem;
  color: #888;
  text-align: center;
}
.invite-poster-actions {
  display: flex; gap: .55rem;
}
.invite-poster-btn {
  flex: 1;
  height: 2.5rem;
  border: 1px solid #dcdcdc;
  background: #fff;
  color: #4b5563;
  border-radius: .5rem;
  font-size: 1.3rem; font-weight: 600;
  cursor: pointer;
}
.invite-poster-btn:active { background: #f5f5f7; }
.invite-poster-btn:disabled { opacity: .55; cursor: not-allowed; }
.invite-poster-btn-primary {
  background: linear-gradient(180deg, #b70000 0%, #8a0000 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 .15rem .4rem rgba(183, 0, 0, .2);
}

/* ============================================================
 * 「福利大奖」首页入口 banner — 极简银行风
 * ============================================================ */
.lot-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: .9rem .2rem 1rem;
  padding: 1rem 1.1rem;
  border-radius: .75rem;
  background: #fff;
  border: 1px solid #ecd7ae;
  color: #8a0000;
  text-decoration: none;
  box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .04);
}
.lot-entry-icon {
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: .6rem;
  background: #fff5e6;
  color: #c8222a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lot-entry-icon svg {
  width: 1.9rem;
  height: 1.9rem;
}
.lot-entry-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.lot-entry-title {
  font-size: 1.55rem;
  font-weight: 600;
  color: #333;
  letter-spacing: .02em;
}
.lot-entry-sub {
  font-size: 1.15rem;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lot-entry-cta {
  flex: 0 0 auto;
  padding: .4rem .9rem;
  background: #c8222a;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: .35rem;
  white-space: nowrap;
}

/* ============================================================
 * 福利大奖 — 九宫格抽奖页 /pages/lottery.php
 * 极简银行风：克制的红金色、无花哨装饰、仅保留跑马灯与跑格动画
 * ============================================================ */
.lottery-page {
  padding: 0 1rem 2rem;
  background: #f4f5f7;
  min-height: 100vh;
}

/* ---------- Hero ---------- */
.lot-hero {
  margin: 1rem 0 .8rem;
  padding: 1.4rem 1.2rem;
  background: linear-gradient(135deg, #c8222a 0%, #a2181d 100%);
  border-radius: .8rem;
  color: #fff;
  text-align: center;
  box-shadow: 0 .25rem .6rem rgba(162, 24, 29, .18);
}
.lot-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.lot-hero-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
}
.lot-hero-sub {
  margin: 0;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, .85);
}
.lot-hero-chip {
  margin-top: .55rem;
  padding: .3rem .9rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  font-size: 1.2rem;
  color: #fff;
}
.lot-hero-chip strong {
  color: #ffd86e;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 .15rem;
}

/* ---------- Figma campaign poster ---------- */
.lot-poster {
  position: relative;
  margin: 1rem 0 .9rem;
  width: 100%;
  aspect-ratio: 1200 / 675;
  overflow: hidden;
  border-radius: .9rem;
  background: #e8300e;
  box-shadow: 0 .25rem .75rem rgba(184, 35, 11, .18);
}
.lot-poster-bg,
.lot-poster-gifts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.lot-poster-bg { z-index: 1; }
.lot-poster-gifts { z-index: 2; }
.lot-poster-logo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 9%;
  width: 25%;
  height: 9%;
  transform: translateX(-50%);
  object-fit: contain;
}
.lot-poster-title {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 32.7%;
  width: 92%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff8e8;
  font-size: clamp(2.8rem, 8.8vw, 5.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .03em;
  text-align: center;
  text-shadow: 0 .12rem 0 #e87b23, 0 .22rem .2rem rgba(207, 25, 15, .7);
  white-space: nowrap;
}
.lot-poster-copy {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 70.8%;
  width: 63%;
  min-height: 27%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: 0;
}
.lot-poster-copy p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
  text-align: center;
  text-shadow:
    0 .12rem .25rem rgba(168, 35, 0, .85),
    0 0 .15rem rgba(168, 35, 0, .55);
  white-space: nowrap;
}
.lot-sr-counter {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------- Lottery reward balance card (above marquee) ---------- */
.lot-balance {
  margin: 1.2rem 1.2rem 0;
  padding: 1.4rem 1.6rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #cf0000 0%, #a30000 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  box-shadow: 0 .4rem 1.6rem rgba(207, 0, 0, .25);
}
.lot-balance-info { flex: 1; min-width: 0; }
.lot-balance-label {
  font-size: 1.2rem;
  opacity: .85;
  margin-bottom: .2rem;
}
.lot-balance-value {
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
}
.lot-balance-symbol {
  font-size: 1.8rem;
  margin-right: .2rem;
  font-weight: 600;
}
.lot-balance-tip {
  margin-top: .3rem;
  font-size: 1.1rem;
  opacity: .8;
}
.lot-balance-actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex-shrink: 0;
}
.lot-balance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.2rem;
  height: 3.2rem;
  padding: 0 1.4rem;
  border-radius: 1.6rem;
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.lot-balance-btn-primary {
  background: #fff;
  color: #cf0000;
}
.lot-balance-btn-primary:active { transform: scale(.96); }
.lot-balance-btn-ghost {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: .1rem solid rgba(255, 255, 255, .35);
}

/* ---------- Scrolling marquee ---------- */
.lot-marquee {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  padding: .45rem .6rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: .55rem;
  overflow: hidden;
}
.lot-marquee-flag {
  flex: 0 0 auto;
  padding: .15rem .55rem;
  background: #fdecec;
  color: #c8222a;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: .3rem;
}
.lot-marquee-track {
  flex: 1 1 auto;
  overflow: hidden;
}
.lot-marquee-inner {
  display: inline-flex;
  gap: 2.2rem;
  white-space: nowrap;
  animation: lot-marquee-slide 40s linear infinite;
}
.lot-marquee-item {
  flex: 0 0 auto;
  color: #666;
  font-size: 1.2rem;
}
.lot-marquee-item em {
  color: #999;
  font-style: normal;
  margin-right: .35rem;
}
.lot-marquee-item strong {
  color: #c8222a;
  font-weight: 500;
  margin-left: .25rem;
}
@keyframes lot-marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Stage / 9-grid ---------- */
.lot-stage {
  padding: 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: .8rem;
  box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .04);
}
.lot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(3, 1fr);
  gap: .5rem;
  aspect-ratio: 1 / 1;
}

.lot-cell {
  position: relative;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: .55rem;
  padding: .4rem .3rem .3rem;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.lot-cell.is-lit {
  background: #fff4e1;
  border-color: #c8222a;
  box-shadow: 0 0 0 1px #c8222a inset;
}

.lot-cell-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 100%;
  height: 100%;
}
.lot-cell-img {
  width: 72%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .4rem;
  background: #fff;
  pointer-events: none;
  flex: 0 0 auto;
}
.lot-cell-name {
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96%;
}

/* Center cell: grand-prize poster (10万 difficult-card balance) */
.lot-cell-center {
  background: linear-gradient(135deg, #c8222a 0%, #a2181d 100%);
  border: 0;
  border-radius: .55rem;
  padding: .35rem .25rem;
  overflow: hidden;
  color: #fff;
}
.lot-cell-center-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  width: 100%;
  height: 100%;
}
.lot-cell-center-ribbon {
  position: absolute;
  top: -.1rem;
  padding: .05rem .45rem;
  font-size: .95rem;
  font-weight: 500;
  color: #c8222a;
  background: #ffd86e;
  border-radius: .2rem;
  letter-spacing: .04em;
}
.lot-cell-center-img {
  width: 56%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .3rem;
  background: #fff;
  margin-top: .8rem;
}
.lot-cell-center-name {
  font-size: 1rem;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .04em;
}
.lot-cell-center-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffd86e;
  letter-spacing: .04em;
}

/* Primary draw button (under the grid); red pill wraps label only */
.lot-action {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}
.lot-action-btn {
  padding: .85rem 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: .6rem;
  background: #c8222a;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  box-shadow: 0 .25rem .7rem rgba(200, 34, 42, .3);
  transition: opacity .15s;
}
.lot-action-btn:active { opacity: .88; }
.lot-action-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.lot-action-btn-label {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: .15em;
  white-space: nowrap;
}
.lot-action-hint {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
  color: #c8222a;
  letter-spacing: .02em;
  line-height: 1.3;
}

.lot-invite-more {
  margin-top: .85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .95rem 1.05rem;
  background: #fff;
  border: 1px solid #f0d4d6;
  border-radius: .75rem;
  color: #333;
  text-decoration: none;
  box-shadow: 0 .2rem .55rem rgba(0, 0, 0, .035);
}
.lot-invite-more-text {
  font-size: 1.35rem;
  font-weight: 500;
  color: #333;
  line-height: 1.35;
}
.lot-invite-more-cta {
  flex: 0 0 auto;
  padding: .32rem .75rem;
  border-radius: 999px;
  background: #fdecec;
  color: #c8222a;
  font-size: 1.1rem;
  font-weight: 500;
  white-space: nowrap;
}
.lot-invite-more:active {
  background: #fff8f8;
}

/* ---------- My records ---------- */
.lot-records {
  margin-top: .9rem;
  background: #fff;
  border-radius: .8rem;
  padding: 1rem 1.1rem;
  border: 1px solid #eee;
}
.lot-records-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.lot-records-head h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: .7rem;
}
.lot-records-head h2::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 1.2rem;
  background: #c8222a;
  border-radius: 2px;
}
.lot-records-tip { font-size: 1.1rem; color: #999; }
.lot-records-list {
  list-style: none;
  margin: 0; padding: 0;
}
.lot-records-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .7rem;
  padding: .7rem 0;
  border-top: 1px solid #f2f2f2;
  font-size: 1.2rem;
}
.lot-records-item:first-child { border-top: 0; }
.lot-records-name {
  color: #333;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lot-records-time { color: #999; font-size: 1.1rem; }
.lot-records-status {
  padding: .1rem .55rem;
  border-radius: .25rem;
  font-size: 1.05rem;
  font-weight: 500;
}
.lot-records-status-ok   { background: #fdecec; color: #c8222a; }
.lot-records-status-warn { background: #fff7e0; color: #b88510; }
.lot-records-status-no   { background: #f1f1f1; color: #888; }
.lot-records-empty {
  margin: 0;
  padding: 1.2rem 0;
  color: #999;
  font-size: 1.2rem;
  text-align: center;
}

/* ---------- Rules ---------- */
.lot-rules {
  margin-top: .9rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: .8rem;
  padding: 1rem 1.1rem 1.1rem;
  color: #666;
}
.lot-rules-title {
  margin: 0 0 .5rem;
  color: #333;
  font-size: 1.4rem;
  font-weight: 600;
  position: relative;
  padding-left: .7rem;
}
.lot-rules-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 1.2rem;
  background: #c8222a;
  border-radius: 2px;
}
.lot-rules-list {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #666;
}
.lot-rules-list li + li { margin-top: .1rem; }
.lot-rules-list strong { color: #c8222a; font-weight: 600; }

/* ---------- Winning modal ---------- */
.lot-modal {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear .2s;
}
.lot-modal.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.lot-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .2s ease;
}
.lot-modal.is-open .lot-modal-mask { opacity: 1; }
.lot-modal-card {
  position: relative;
  width: 100%;
  max-width: 20rem;
  background: #fff;
  border-radius: .8rem;
  padding: 2rem 1.3rem 1.4rem;
  text-align: center;
  box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .2);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.lot-modal.is-open .lot-modal-card {
  transform: translateY(0);
  opacity: 1;
}
.lot-modal-close {
  position: absolute;
  top: .5rem; right: .5rem;
  width: 2.2rem; height: 2.2rem;
  border: 0;
  background: transparent;
  color: #999;
  font-size: 2rem; line-height: 1;
  cursor: pointer;
}
.lot-modal-eyebrow {
  margin: 0 0 .8rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: #c8222a;
  letter-spacing: .08em;
}
.lot-modal-prize {
  width: 8rem; height: 8rem;
  margin: 0 auto .7rem;
  border-radius: .6rem;
  background: #f8f8f8;
  padding: .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lot-modal-prize img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .4rem;
  background: #fff;
}
.lot-modal-name {
  margin: .2rem 0 .4rem;
  font-size: 1.55rem;
  font-weight: 600;
  color: #333;
}
.lot-modal-desc {
  margin: 0 0 1.2rem;
  font-size: 1.2rem;
  color: #888;
  line-height: 1.5;
}
.lot-modal-actions {
  display: flex;
  gap: .6rem;
}
.lot-modal-btn {
  flex: 1;
  height: 2.8rem;
  border: 0;
  border-radius: .4rem;
  font-size: 1.3rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.lot-modal-btn-ghost {
  background: #fff;
  color: #666;
  border: 1px solid #ddd;
}
.lot-modal-btn-ghost:active { background: #f7f7f7; }
.lot-modal-btn-primary {
  background: #c8222a;
  color: #fff;
}
.lot-modal-btn-primary:active { opacity: .9; }

/* ---------- Toast ---------- */
.lot-toast {
  position: fixed;
  left: 50%;
  bottom: 6rem;
  transform: translateX(-50%);
  padding: .55rem 1.3rem;
  background: rgba(20, 20, 20, .85);
  color: #fff;
  font-size: 1.3rem;
  border-radius: 999px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  visibility: hidden;
}
.lot-toast.is-open {
  opacity: 1;
  visibility: visible;
}

/* Small-screen adjustments */
@media (max-width: 360px) {
  .lot-hero-title { font-size: 3rem; }
  .lot-cell-name { font-size: 1.05rem; }
  .lot-go-top { font-size: 1.55rem; }
  .lot-go-bottom { font-size: 2.1rem; }
}

/* ============================================================
   Home popup announcements
   ------------------------------------------------------------
   NOTE: root font-size = calc(100vw / 37.5) ≈ 10 px @ 375 px.
   All font/spacing values are sized accordingly (×1 rem ≈ 10 px).
   ============================================================ */
.home-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.home-popup[hidden] { display: none; }

.home-popup-mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: saturate(140%) blur(3px);
}

.home-popup-card {
  position: relative;
  width: min(92vw, 36rem);
  max-height: 88vh;
  background: #fff;
  border-radius: 1.6rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hpPop .22s ease-out;
}
@keyframes hpPop {
  from { transform: translateY(2rem) scale(.95); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Close button — larger tap target */
.home-popup-close {
  position: absolute;
  top: .6rem;
  right: .8rem;
  width: 3.6rem;
  height: 3.6rem;
  border: 0;
  background: transparent;
  font-size: 2.8rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.home-popup-close:hover { color: #cf0000; }

.home-popup-body {
  padding: 2.4rem 2rem 1rem;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

/* Title */
.home-popup-title {
  margin: 0 3rem 1.4rem 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}

/* Images */
.home-popup-images {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1.4rem;
}
.home-popup-image {
  width: 100%;
  display: block;
  border-radius: .8rem;
  object-fit: contain;
  background: #f3f4f6;
}

/* Rich-text content */
.home-popup-content {
  font-size: 1.5rem;
  line-height: 1.7;
  color: #374151;
  word-break: break-word;
}
.home-popup-content p { margin: 0 0 .8rem; }
.home-popup-content p:last-child { margin-bottom: 0; }
.home-popup-content a {
  color: #cf0000;
  text-decoration: underline;
  font-weight: 600;
  word-break: break-all;
}
.home-popup-content img { max-width: 100%; border-radius: .6rem; }

/* Footer — centered by default; space-between when pager is visible */
.home-popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1.2rem 2rem 2rem;
  border-top: 1px solid #f1f5f9;
  background: #fff;
}
.home-popup-footer.has-pager { justify-content: space-between; }
.home-popup-pager {
  font-size: 1.3rem;
  color: #94a3b8;
}
/* Primary action button */
.home-popup-next {
  flex: none;
  min-width: 60%;
  border: 0;
  background: linear-gradient(180deg, #ef3a3a 0%, #cf0000 100%);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  padding: 1.2rem 2rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 .4rem 1.2rem rgba(207, 0, 0, .3);
  letter-spacing: .04em;
}
.home-popup-next:hover { filter: brightness(1.06); }
/* Shrink button when pager is beside it */
.home-popup-footer.has-pager .home-popup-next { min-width: auto; }

/* Prevent background scroll while a popup is visible. */
body.has-home-popup { overflow: hidden; }

/* ============================================================
   Official APP download page (/pages/app.php)
   Style: bank-grade clean, no animations, white cards, 工行红 accents.
   ============================================================ */
.app-page { padding-bottom: 2.4rem; }

/* ----- Brand card ----- */
.app-brand {
  position: relative;
  background: #fff;
  border-radius: 1.2rem;
  padding: 1.8rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}
.app-brand-icon {
  flex: 0 0 7.2rem;
  width: 7.2rem;
  height: 7.2rem;
  background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
  border: 1px solid #ffe2e2;
  border-radius: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
}
.app-brand-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.app-brand-meta { flex: 1 1 auto; min-width: 0; }
.app-brand-name {
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
  font-weight: 700;
  color: #231815;
  line-height: 1.3;
}
.app-brand-sub {
  margin: 0 0 0.9rem;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.55);
}
.app-brand-tags {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.app-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1.05rem;
  color: #cf0000;
  background: #fff1f0;
  border: 1px solid #ffd6d3;
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  white-space: nowrap;
}
.app-brand-tag svg { width: 1.4rem; height: 1.4rem; }

/* ----- Download buttons ----- */
.app-download .sp-card-hint { margin-bottom: 0.4rem; }

.app-dl-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.2rem 1.4rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  text-decoration: none;
  transition: filter .15s ease;
  font-size: 1.5rem;
}
.app-dl-btn:active { filter: brightness(.95); }

.app-dl-btn-primary {
  background: linear-gradient(180deg, #ef3a3a 0%, #cf0000 100%);
  color: #fff;
  box-shadow: 0 0.4rem 1rem rgba(207, 0, 0, 0.22);
}
.app-dl-btn-secondary {
  background: #f8fafc;
  color: #1f2937;
  border-color: #e5e7eb;
}

.app-dl-ico {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  color: currentColor;
}
.app-dl-main {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.app-dl-sub {
  flex: 1 1 auto;
  font-size: 1.2rem;
  opacity: 0.8;
  margin-left: 0.4rem;
  line-height: 1;
}
.app-dl-arrow {
  font-size: 2rem;
  font-weight: 400;
  opacity: 0.7;
  line-height: 1;
}

/* ----- QR divider + box ----- */
.app-dl-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #9ca3af;
  font-size: 1.1rem;
  margin: 0.4rem 0 0.2rem;
}
.app-dl-divider::before,
.app-dl-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #e5e7eb;
}

.app-dl-qr {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.4rem 0.2rem 0.2rem;
}
.app-dl-qr-box {
  width: 9.6rem;
  height: 9.6rem;
  flex: 0 0 9.6rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.8rem;
  padding: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-dl-qr-hint {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.7rem;
  color: rgba(0, 0, 0, 0.6);
}

/* ----- Steps ----- */
.app-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.app-step {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}
.app-step-num {
  flex: 0 0 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: #fff1f0;
  color: #cf0000;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffd6d3;
}
.app-step-text { flex: 1 1 auto; }
.app-step-text strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  color: #231815;
  margin-bottom: 0.3rem;
}
.app-step-text p {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.7rem;
  color: rgba(0, 0, 0, 0.65);
}

/* ----- Safety notice ----- */
.app-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 1.2rem;
  padding: 1.4rem 1.4rem 1.2rem;
}
.app-notice-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 0.8rem;
}
.app-notice-head svg { width: 1.8rem; height: 1.8rem; flex: 0 0 1.8rem; }
.app-notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.7rem;
  color: rgba(120, 53, 15, 0.92);
}
.app-notice-list li::before {
  content: '·';
  display: inline-block;
  width: 0.8rem;
  margin-right: 0.4rem;
  color: #92400e;
  font-weight: 700;
}
.app-notice-link {
  color: #cf0000;
  font-weight: 600;
  text-decoration: underline;
}