/* ========== 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%;
  --app-top-extra: 3rem;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --top-bar-height: calc(5rem + var(--app-top-extra) + var(--app-safe-top));
  --sub-header-height: calc(4.8rem + var(--app-top-extra) + var(--app-safe-top));
}

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;
}

a,
button,
[role="button"] {
  touch-action: manipulation;
}

a[href],
button,
[role="button"] {
  -webkit-tap-highlight-color: rgba(207, 0, 0, 0.08);
}

a.is-tapping,
button.is-tapping,
[role="button"].is-tapping {
  opacity: 0.86;
}

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

/* ========== Page transition (ICBC-tone, restrained) ==========
   - Enter:  body fades in (`pageEnter`)
   - Leave:  body fades out via `html.is-page-leaving`
   - A 2px ICBC-red progress bar pinned to the very top, driven by JS.

   IMPORTANT: the animation must NOT use `transform`, `filter`,
   `will-change: transform`, or any property that turns the animated element
   into a containing block — otherwise descendants with `position: fixed`
   (e.g. the bottom nav bar, the popup mask) would be anchored to it
   instead of the viewport. opacity is safe.
*/
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: pageEnter 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    transition: opacity 0.18s ease;
  }

  html.is-page-leaving body {
    opacity: 0;
  }
}

/* ========== Update notifier (shown after a fresh deploy) ==========
   Floats above the bottom nav. Restrained card with an ICBC-red primary
   action and a neutral dismiss button. Auto-honors prefers-reduced-motion.
*/
.app-update-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8.4rem);
  transform: translate(-50%, 1.6rem);
  width: min(33.5rem, calc(100% - 2.4rem));
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 .8rem 2.4rem rgba(15, 23, 42, .18),
              0 0 0 1px rgba(15, 23, 42, .04);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.app-update-prompt.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.app-update-prompt-text {
  flex: 1 1 auto;
  min-width: 0;
}
.app-update-prompt-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}
.app-update-prompt-desc {
  margin-top: .2rem;
  font-size: 1.2rem;
  color: #6b7280;
  line-height: 1.4;
}
.app-update-prompt-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.app-update-btn {
  appearance: none;
  border: 0;
  font-size: 1.3rem;
  line-height: 1;
  padding: .9rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.app-update-btn-primary {
  background: linear-gradient(180deg, #ef3a3a 0%, #cf0000 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 .3rem .8rem rgba(207, 0, 0, .25);
}
.app-update-btn-primary:hover { filter: brightness(1.06); }
.app-update-btn-ghost {
  background: transparent;
  color: #6b7280;
  padding: .9rem .8rem;
}
.app-update-btn-ghost:hover { color: #111827; }

@media (prefers-reduced-motion: reduce) {
  .app-update-prompt { transition: none; }
}

/* Top progress bar — fixed-position thin gradient pinned across viewport */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 0.2rem;
  width: 0;
  z-index: 99999;
  pointer-events: none;
  background: linear-gradient(90deg, #ef3a3a 0%, #cf0000 100%);
  box-shadow: 0 0 0.6rem rgba(207, 0, 0, 0.55);
  border-bottom-right-radius: 0.2rem;
  opacity: 0;
  transition: width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.2s ease;
}
.page-progress.is-active { opacity: 1; }
.page-progress.is-done   { opacity: 0; transition: opacity 0.18s ease; }

@media (prefers-reduced-motion: reduce) {
  .page-progress { display: none; }
}

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: var(--top-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--app-safe-top) + var(--app-top-extra)) 1.2rem 0;
  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;
}

@supports (content-visibility: auto) {
  .licai-card,
  .news-card,
  .partners-card,
  .wallet-card,
  .fn-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 28rem;
  }
}

/* ========== Hero banner + play button ========== */
.banner {
  position: relative;
  width: 100%;
  /* Lock aspect ratio to the source image (1024×576 = 16:9) so the whole
     creative is visible on every viewport without cropping the headline / CTA. */
  aspect-ratio: 16 / 9;
  border-radius: 1.2rem;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}

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

/* ========== Certificate application entry ========== */
.cert-apply-entry {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 1.2rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 .45rem 1.2rem rgba(138, 0, 0, .14);
  isolation: isolate;
}

.cert-apply-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(104, 0, 0, .82) 0%, rgba(150, 0, 0, .5) 52%, rgba(164, 0, 0, .04) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .05));
  pointer-events: none;
}

.cert-apply-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.cert-apply-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.3rem 1.4rem;
  max-width: 24rem;
}

.cert-apply-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

.cert-apply-title {
  font-size: 2.05rem;
  line-height: 2.35rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 .15rem .3rem rgba(92, 0, 0, .3);
}

.cert-apply-tag {
  display: inline-flex;
  align-items: center;
  height: 1.85rem;
  padding: 0 .65rem;
  border-radius: 999px;
  background: rgba(255, 246, 222, .16);
  border: 1px solid rgba(255, 228, 169, .55);
  color: #ffe7a6;
  font-size: .95rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .02em;
}

.cert-apply-sub {
  font-size: 1.1rem;
  line-height: 1.55rem;
  color: rgba(255, 255, 255, .92);
}

.cert-apply-bonus {
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: 600;
  color: #ffe7a6;
}

.cert-apply-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .8rem;
  margin-top: .25rem;
}

.cert-apply-price {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: .55rem;
  background: rgba(255, 245, 220, .96);
  color: #8a0000;
  font-size: 1.1rem;
  line-height: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
}

.cert-apply-price strong {
  font-size: 1.4rem;
  line-height: 1;
}

.cert-apply-cta {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  height: 2.7rem;
  padding: 0 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff3c8 0%, #e9b45d 100%);
  color: #8a0000;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 .25rem .65rem rgba(92, 0, 0, .22);
}

.cert-apply-cta > span {
  font-size: 1.45rem;
  line-height: 1;
  margin-left: .15rem;
}

.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;
}

.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: calc(var(--top-bar-height) * -1);
}

/* 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 / rejected notice bar ------- */
.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; }

/* ============================================================
 * Rush shipment task (only on approved cards)
 * ========================================================== */
.card-rush {
  margin: 1.4rem 0 0.6rem;
  padding: 1.4rem 1.4rem 1.5rem;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 60%, #fde68a 100%);
  border: 1.5px solid #fbbf24;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.18);
  position: relative;
  overflow: hidden;
}
.card-rush::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
  pointer-events: none;
}
.card-rush-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  position: relative;
}
.card-rush-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
}
.card-rush-title { flex: 1; }
.card-rush-title strong {
  display: block;
  font-size: 1.15rem;
  color: #78350f;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.card-rush-title small {
  display: block;
  font-size: 0.88rem;
  color: #92400e;
  line-height: 1.5;
  font-weight: 500;
}
.card-rush-progress {
  height: 14px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  position: relative;
}
.card-rush-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 50%, #ef4444 100%);
  border-radius: 7px;
  transition: width 0.5s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}
.card-rush-progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: rushShimmer 2s linear infinite;
}
@keyframes rushShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.card-rush-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  color: #78350f;
  font-weight: 500;
  position: relative;
}
.card-rush-meta strong {
  color: #cf0000;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 2px;
}
.card-rush-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  background: #fff;
  color: #d97706;
  border: 2px solid #f59e0b;
  border-radius: 24px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.18);
  letter-spacing: 0.5px;
}
.card-rush-btn:active { transform: scale(0.95); }
.card-rush-btn.is-ready {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
  animation: rushPulse 1.6s ease-in-out infinite;
}
@keyframes rushPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45); }
  50%      { box-shadow: 0 4px 22px rgba(239, 68, 68, 0.7); }
}
.card-rush-btn[disabled] { opacity: 0.6; cursor: not-allowed; animation: none; }

.card-rush-done {
  margin: 1.2rem 0 0.4rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1.5px solid #34d399;
  border-radius: 12px;
  color: #065f46;
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.card-rush-done span { font-size: 1.4rem; }

/* ============================================================
 * Card-apply finalize form (avatar upload + shipping address + CTA)
 *
 * NOTE on units: this project uses the 375-design rem scaling
 * (`html { font-size: calc(100vw / 37.5) }`) so 1rem ≈ 10px on a
 * 375px viewport. Sizes below are picked to read at 12-22px on
 * mobile, matching siblings like .card-status-label (2rem) and
 * .card-paysheet-tip (1.25rem).
 * ========================================================== */
.card-final {
  margin: 1.6rem 0 0.6rem;
  padding: 1.6rem 1.4rem 1.3rem;
  background: linear-gradient(180deg, #fff8ec 0%, #ffffff 70%);
  border: 1.5px solid #f6c97a;
  border-radius: 1.4rem;
  box-shadow: 0 0.6rem 2rem rgba(193, 39, 45, 0.10);
  position: relative;
  overflow: hidden;
}
.card-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(212, 175, 55, 0.18) 0, transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(193, 39, 45, 0.06) 0, transparent 45%);
  pointer-events: none;
}
.card-final-head {
  position: relative;
  text-align: center;
  margin-bottom: 1.4rem;
}
.card-final-tag {
  display: inline-block;
  padding: 0.3rem 1.2rem;
  background: linear-gradient(135deg, #c1272d 0%, #8b1a20 100%);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.5px;
  box-shadow: 0 0.2rem 0.6rem rgba(193, 39, 45, 0.25);
}
.card-final-title {
  margin: 0.7rem 0 0.3rem;
  font-size: 1.9rem;
  font-weight: 800;
  color: #7a3208;
  letter-spacing: 0.5px;
}
.card-final-sub {
  margin: 0;
  font-size: 1.3rem;
  color: #a25c1c;
  font-weight: 500;
  line-height: 1.5;
}
.card-final-avatar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem;
  background: #fff;
  border: 1px solid #f1c98a;
  border-radius: 1.2rem;
  cursor: pointer;
  margin-bottom: 1.2rem;
}
.card-final-avatar-preview {
  flex: none;
  width: 8.4rem;
  height: 8.4rem;
  border-radius: 1rem;
  background: #fff5e6 center/cover no-repeat;
  border: 1.5px dashed #d4af37;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: #b8860b;
  font-size: 1.15rem;
  font-weight: 600;
  transition: all 0.2s ease;
  overflow: hidden;
}
.card-final-avatar-preview[data-has-image="1"] {
  border-style: solid;
  border-color: #c1272d;
}
.card-final-avatar-plus {
  font-size: 2.6rem;
  font-weight: 300;
  color: #d4af37;
  line-height: 1;
}
.card-final-avatar-empty {
  font-size: 1.15rem;
}
.card-final-avatar-hint {
  flex: 1;
  font-size: 1.25rem;
  color: #7a4a14;
  line-height: 1.6;
}
.card-final-avatar-hint strong {
  display: block;
  color: #5b3309;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}
.card-final-field {
  position: relative;
  display: block;
  margin-bottom: 1.2rem;
}
.card-final-label {
  display: block;
  font-size: 1.4rem;
  color: #5b3309;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.card-final-field textarea {
  width: 100%;
  min-height: 7rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid #f1c98a;
  border-radius: 1rem;
  font-size: 1.4rem;
  color: #5b3309;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
  line-height: 1.5;
}
.card-final-field textarea:focus {
  border-color: #c1272d;
  box-shadow: 0 0 0 3px rgba(193, 39, 45, 0.08);
}
.card-final-btn {
  position: relative;
  width: 100%;
  height: 5.4rem;
  border: none;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #c1272d 0%, #8b1a20 100%);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 0.6rem 1.6rem rgba(193, 39, 45, 0.35);
  transition: transform 0.15s ease;
}
.card-final-btn:active { transform: scale(0.98); }
.card-final-btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}
.card-final-note {
  margin: 1rem 0 0;
  font-size: 1.2rem;
  color: #8b5a2b;
  text-align: center;
  line-height: 1.55;
  position: relative;
}

/* Pay step (after data submission). Slightly more emphatic to invite the click. */
.card-final.card-final--pay {
  margin-top: 1.2rem;
  background: linear-gradient(180deg, #fff5dd 0%, #fff 75%);
  border-color: #d4af37;
  box-shadow: 0 0.8rem 2.4rem rgba(193, 39, 45, 0.18);
}
.card-final.card-final--pay .card-final-tag {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  box-shadow: 0 0.2rem 0.6rem rgba(184, 134, 11, 0.25);
}
.card-final.card-final--pay .card-final-btn {
  height: 6.2rem;
  font-size: 2.2rem;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #c1272d 0%, #8b1a20 100%);
  box-shadow: 0 0.8rem 2.2rem rgba(193, 39, 45, 0.45);
}

/* Recap of submitted production details. */
.card-final-recap {
  margin: 1.2rem 0 0;
  padding: 1rem 1.2rem;
  background: #fffaf0;
  border: 1px solid #f1d49b;
  border-radius: 1.2rem;
  font-size: 1.3rem;
  color: #7a4a14;
}
.card-final-recap > summary {
  cursor: pointer;
  font-weight: 700;
  color: #5b3309;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.4rem;
}
.card-final-recap > summary::-webkit-details-marker { display: none; }
.card-final-recap > summary::after {
  content: "▾";
  color: #b8860b;
  transition: transform 0.2s ease;
}
.card-final-recap[open] > summary::after { transform: rotate(180deg); }
.card-final-recap-body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}
.card-final-recap-avatar {
  flex: none;
  width: 7rem;
  height: 7rem;
  border-radius: 0.8rem;
  background: #fff5e6 center/cover no-repeat;
  border: 1px solid #f1c98a;
}
.card-final-recap-address {
  flex: 1;
  min-width: 18rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  line-height: 1.5;
}
.card-final-recap-label {
  font-size: 1.15rem;
  color: #a25c1c;
  font-weight: 700;
}
.card-final-recap-value {
  font-size: 1.3rem;
  color: #5b3309;
  word-break: break-all;
}
.card-final-recap-edit {
  flex-basis: 100%;
  text-align: right;
  font-size: 1.25rem;
  color: #c1272d;
  font-weight: 600;
  text-decoration: none;
}
.card-final-recap-edit:hover { text-decoration: underline; }

/* Pay-sheet specific bits used by card.php */
.card-paysheet-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.9rem 1rem;
  background: #fff7e6;
  border: 1px solid #f6c97a;
  border-radius: 0.6rem;
  font-size: 1.25rem;
  color: #7a3208;
  line-height: 1.5;
}
.card-paysheet-tip strong { color: #c1272d; font-weight: 700; }
.card-paysheet-dot {
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card-pay-sheet.is-preparing .pay-sheet-form {
  padding: 2rem 1.4rem;
}
.card-pay-sheet.is-preparing .pay-sheet-footer {
  display: none;
}
.card-pay-sheet.is-preparing .pay-sheet-close {
  opacity: 0.45;
}
.card-paysheet-ready[hidden],
.card-paysheet-preparing[hidden] {
  display: none !important;
}
.card-paysheet-preparing {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: center;
  color: #5b3309;
}
.card-paysheet-preparing strong {
  font-size: 1.65rem;
  color: #c1272d;
}
.card-paysheet-preparing p {
  margin: 0;
  max-width: 18rem;
  font-size: 1.25rem;
  line-height: 1.55;
  color: #8b5a2b;
}
.card-paysheet-spinner {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 4px solid #f1c98a;
  border-top-color: #c1272d;
  animation: card-paysheet-spin 0.85s linear infinite;
}
@keyframes card-paysheet-spin {
  to { transform: rotate(360deg); }
}

body.pay-sheet-locked { overflow: hidden; }

.card-paybox-done {
  position: relative;
  margin: 1.4rem 0 0.6rem;
  padding: 1.6rem 1.4rem;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 60%, #a7f3d0 100%);
  border: 2px solid #34d399;
  border-radius: 18px;
  color: #064e3b;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.22);
  overflow: hidden;
}
.card-paybox-done::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.55), transparent 45%),
    radial-gradient(circle at 92% 88%, rgba(16, 185, 129, 0.18), transparent 55%);
  pointer-events: none;
}
.card-paybox-done > * { position: relative; z-index: 1; }
.card-paybox-done-icon {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.45), inset 0 0 0 4px rgba(255, 255, 255, 0.25);
  animation: cardPayDonePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.card-paybox-done-icon svg { display: block; }
.card-paybox-done-text { flex: 1; min-width: 0; }
.card-paybox-done-text strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #064e3b;
  line-height: 1.2;
}
.card-paybox-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin: 0.55rem 0 0.45rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: #fff;
  color: #047857;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1.5px solid #6ee7b7;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.18);
}
.card-paybox-done-badge svg { flex: none; }
.card-paybox-done-text small {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: #047857;
  line-height: 1.45;
}
@keyframes cardPayDonePop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (max-width: 380px) {
  .card-paybox-done { padding: 1.3rem 1.1rem; gap: 0.9rem; }
  .card-paybox-done-icon { width: 54px; height: 54px; padding: 12px; }
  .card-paybox-done-text strong { font-size: 1.3rem; }
  .card-paybox-done-badge { font-size: 0.88rem; }
  .card-paybox-done-text small { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card-paybox-done-icon { animation: none; }
}

.card-cert-preview {
  margin: 1.2rem 0 0.6rem;
  padding: 1rem;
  border-radius: 1.2rem;
  background:
    linear-gradient(180deg, rgba(255, 247, 237, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 1px solid rgba(215, 173, 80, 0.42);
  box-shadow: 0 0.7rem 1.8rem rgba(133, 36, 20, 0.12);
}
.card-cert-preview-head {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
  color: #5b1b14;
}
.card-cert-preview-head strong {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
}
.card-cert-preview-head small {
  color: #9b4a2e;
  font-size: 0.84rem;
  line-height: 1.45;
}
.card-cert-preview-tag {
  justify-self: start;
  padding: 0.18rem 0.58rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #c1272d 0%, #8f151b 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.card-cert-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 682;
  border-radius: 0.9rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  box-shadow:
    0 0.35rem 1rem rgba(82, 16, 10, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-cert-board:active { transform: scale(0.995); }
.card-cert-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-cert-zoom-hint {
  position: absolute;
  right: 0.6rem;
  top: 0.55rem;
  z-index: 5;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
  backdrop-filter: blur(5px);
  box-shadow: 0 0.18rem 0.5rem rgba(0, 0, 0, 0.2);
}
.card-cert-field {
  position: absolute;
  color: #fff7ef;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: clamp(0.64rem, 2.72vw, 1.45rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0.08rem 0.18rem rgba(0, 0, 0, 0.35);
}
.card-cert-name { left: 15.8%; top: 37.2%; }
.card-cert-sex { left: 15.8%; top: 45.5%; }
.card-cert-birth { left: 41.2%; top: 45.5%; }
.card-cert-nationality { left: 15.8%; top: 53.7%; }
.card-cert-type { left: 18.9%; top: 61.8%; }
.card-cert-docno { left: 43.1%; top: 61.8%; }
.card-cert-issue { left: 18.9%; top: 70.0%; }
.card-cert-expiry { left: 18.9%; top: 78.2%; }
.card-cert-issuer {
  left: 20.4%;
  top: 87.6%;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-cert-photo {
  position: absolute;
  left: 73.6%;
  top: 22.5%;
  width: 18.2%;
  height: 36.8%;
  object-fit: cover;
  background: #f5f5f5;
  box-shadow: 0 0.18rem 0.45rem rgba(0, 0, 0, 0.22);
}
.card-cert-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.85rem;
}
.card-cert-save {
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.05rem;
  background: linear-gradient(135deg, #c1272d 0%, #8f151b 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  box-shadow: 0 0.35rem 0.9rem rgba(193, 39, 45, 0.28);
  text-decoration: none;
}
.card-cert-save:visited { color: #fff; }
.card-cert-save:disabled {
  opacity: 0.68;
  box-shadow: none;
}
.card-cert-save-hint {
  min-width: 0;
  color: #9b4a2e;
  font-size: 0.78rem;
  line-height: 1.35;
}
.card-cert-modal-board {
  position: fixed !important;
  width: 1024px !important;
  height: 682px !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 16px !important;
  cursor: default !important;
  box-shadow: 0 0 36px rgba(0, 0, 0, 0.46) !important;
  transform-origin: center center;
}
.card-cert-modal-board:active { transform: none; }
.card-cert-modal-board .card-cert-zoom-hint { display: none; }
@media (max-width: 380px) {
  .card-cert-preview { padding: 0.75rem; }
  .card-cert-preview-head strong { font-size: 1rem; }
  .card-cert-preview-head small { font-size: 0.78rem; }
  .card-cert-board { border-radius: 0.72rem; }
  .card-cert-field { font-size: clamp(0.58rem, 2.55vw, 1rem); }
  .card-cert-actions { align-items: stretch; flex-direction: column; gap: 0.45rem; }
  .card-cert-save { width: 100%; }
  .card-cert-save-hint { text-align: center; }
}

/* ============================================================
 * Card-apply important notice (add-assistant CTA)
 * ========================================================== */
.card-notice {
  position: relative;
  margin: 1.6rem 0 0.6rem;
  padding: 1.4rem 1.6rem 1.6rem;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,210,210,.55) 0%, rgba(255,210,210,0) 60%),
    linear-gradient(180deg, #fff8f4 0%, #fff1ec 100%);
  border: 1px solid #ffd2c6;
  border-radius: 1.2rem;
  box-shadow: 0 0.6rem 1.6rem -0.8rem rgba(207, 0, 0, 0.18);
  overflow: hidden;
}
.card-notice::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.4rem;
  background: linear-gradient(180deg, #cf0000 0%, #ff5a4a 100%);
  border-radius: 0.4rem 0 0 0.4rem;
}
.card-notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.card-notice-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #cf0000;
  background: #fff;
  border: 1px solid rgba(207, 0, 0, 0.25);
  border-radius: 9999px;
  letter-spacing: 0.04em;
  box-shadow: 0 0.2rem 0.4rem rgba(207, 0, 0, 0.08);
}
.card-notice-badge svg { flex-shrink: 0; transform: translateY(-0.05em); }
.card-notice-time {
  font-size: 1.05rem;
  color: #b48a7a;
  letter-spacing: 0.02em;
}
.card-notice-body { padding-left: 0.2rem; }
.card-notice-text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #4a1a0c;
  font-weight: 500;
  letter-spacing: 0.01em;
  word-break: break-word;
}
.card-notice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding: 1rem 2.4rem;
  background: linear-gradient(180deg, #ff3a2a 0%, #cf0000 100%);
  color: #fff;
  border-radius: 9999px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 0.6rem 1.2rem -0.4rem rgba(207, 0, 0, 0.45),
              inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.card-notice-btn:active {
  transform: translateY(0.1rem);
  box-shadow: 0 0.3rem 0.6rem -0.2rem rgba(207, 0, 0, 0.4);
  background: linear-gradient(180deg, #cf0000 0%, #a50000 100%);
}
.card-notice-btn-arrow { transition: transform 0.2s ease; }
.card-notice-btn:hover .card-notice-btn-arrow { transform: translateX(0.25rem); }

@keyframes card-notice-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.06); opacity: .85; }
}
.card-notice-badge { animation: card-notice-pulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .card-notice-badge { animation: none; }
}

/* ============================================================
 * Bank receipt (shown when card application is approved)
 * Rendered as a centered A4 paper with html2canvas-export support.
 * ========================================================== */
.bank-receipt-wrap {
  margin: 1.6rem 0 1rem;
  background: #ececec;
  border-radius: 0.6rem;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  /* subtle page-edge fade so the paper feels like it's sitting on a desk */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 60%, rgba(0,0,0,0.06) 100%);
  transition: all 0.2s ease;
}
.bank-receipt-wrap:active {
  transform: scale(0.995);
}
.bank-receipt-zoom-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.bank-receipt-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(0, 0, 0, 0.92);
  overflow: hidden;
  touch-action: none;
}
body.bank-receipt-modal-open {
  overflow: hidden !important;
}
.bank-receipt-modal-paper {
  position: fixed !important;
  margin: 0 !important;
  box-shadow: 0 0 36px rgba(0, 0, 0, 0.42) !important;
  max-width: none !important;
}
.bank-receipt-modal-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 9999px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-size: 30px;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.bank-receipt-modal-tip {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2;
  padding: 7px 12px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.bank-receipt-scaler {
  width: 1024px;
  transform-origin: top left;
}
.bank-receipt {
  /* Strictly fixed width (Horizontal Bank Slip proportion) */
  width: 1024px;
  margin: 0 auto;
  padding: 36px 44px 32px;
  background: #fff;
  border: 1px solid #d8d2cf;
  border-radius: 2px;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.08),
    0 8px 18px -4px rgba(0,0,0,0.18),
    0 24px 48px -16px rgba(0,0,0,0.22);
  font-size: 13px;
  line-height: 1.7;
  color: #2c2c2c;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.bank-receipt-a4::after {
  /* faint corner shading so the page feels like printed paper */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0) 60%, rgba(0,0,0,0.025) 100%);
}
.bank-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bank-receipt-brand { display: inline-flex; align-items: center; gap: 8px; }
.bank-receipt-logo { width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0; object-fit: cover; }
.bank-receipt-brand-text { font-size: 13px; font-weight: 600; color: #cf0000; letter-spacing: 0.02em; }
.bank-receipt-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1f1f1f;
  letter-spacing: 0.08em;
  flex: 1 1 auto;
  text-align: right;
}

.bank-receipt-rule {
  height: 0;
  border-top: 2px solid #cf0000;
  border-bottom: 1px solid #cf0000;
  margin: 8px 0 14px;
}
.bank-receipt-rule-thin { height: 0; border-top: 1px dashed #d8c8c4; margin: 10px 0; }

.bank-receipt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 6px;
  margin: 0;
}
.bank-receipt-grid > div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  align-items: baseline;
  gap: 4px;
}
.bank-receipt-grid dt { margin: 0; color: #6c6c6c; font-weight: 400; white-space: nowrap; }
.bank-receipt-grid dd { margin: 0; color: #1f1f1f; word-break: break-all; }
.bank-receipt-grid dd.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.01em;
  font-size: 12px;
}
.bank-receipt-name { font-weight: 700; color: #cf0000; }
.bank-receipt-amount { font-weight: 700; color: #cf0000; font-size: 16px; }

/* Seal floats inline at the right edge of the receipt body, so it
 * always lands over the bottom-right of the content (not in empty
 * whitespace) regardless of how tall the receipt is. */
.bank-receipt-seal-anchor {
  position: relative;
  height: 0;
}
.bank-receipt-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 24px;
  bottom: -52px;
  width: 130px;
  height: 130px;
  border: 2.5px solid #cf0000;
  border-radius: 50%;
  color: #cf0000;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.04em;
  transform: rotate(-12deg);
  pointer-events: none;
  background: transparent;
  opacity: 0.88;
  z-index: 2;
}
.bank-receipt-seal::before {
  content: "★";
  position: absolute;
  font-size: 14px;
  top: 12px;
  color: #cf0000;
}

.bank-receipt-warning {
  margin: 14px 0 12px;
  color: #cf0000;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  line-height: 1.7;
}
.bank-receipt-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-size: 11.5px;
  color: #555;
  padding-top: 6px;
  border-top: 1px solid #efe6e3;
}
.bank-receipt-foot:first-of-type { border-top: none; padding-top: 0; }

/* Save-as-image button below the paper. Hidden during canvas capture. */
.bank-receipt-actions {
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.bank-receipt-save {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 2rem;
  background: linear-gradient(180deg, #ff3a2a 0%, #cf0000 100%);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 0.4rem 0.8rem -0.2rem rgba(207, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bank-receipt-save:active {
  transform: translateY(1px);
  box-shadow: 0 0.2rem 0.4rem -0.1rem rgba(207, 0, 0, 0.45);
}
  .bank-receipt-save-hint {
    font-size: 1.1rem;
    color: #999;
  }
  
  .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;
}

/* ------- Status cards (reviewing / approved / shipped) ------- */
.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-style gradient: cream base + warm top-left + cool top-right */
  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);
}

/* Four states: only icon and title colors change; background is shared */
.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); } }

/* Detail rows */
.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; }

/* Progress steps */
.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 article page
 * ====================================================================== */
.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);
}

/* Highlight stats bar */
.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;
}

/* Red-header document / promo video */
.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); }

/* Official contact block */
.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;
}

/* Previous / next article */
.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;
}

/* More news */
.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;
}

/* ---------- Honor badge next to the user name ---------- */
/* Wraps the name + medallion so the badge can sit inline next to the name
 * regardless of name length, and gracefully wraps to a new line on tiny screens. */
.profile-user-namebar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  max-width: 100%;
}
.profile-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.7rem 0.15rem 0.35rem;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--badge-bg-1, #fff) 0%, var(--badge-bg-2, #eee) 100%);
  color: var(--badge-fg, #333);
  box-shadow:
    inset 0 0 0 1px var(--badge-border, rgba(0, 0, 0, 0.1)),
    0 1px 2px rgba(0, 0, 0, 0.08);
  user-select: none;
  position: relative;
  isolation: isolate;
}
.profile-user-badge-icon {
  width: 1.7rem;
  height: 2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0.05rem 0.1rem rgba(0, 0, 0, 0.18));
  overflow: visible;
}
.profile-user-badge-ribbon {
  fill: var(--badge-ribbon, #c0392b);
}
.profile-user-badge-coin {
  fill: var(--badge-coin, #f5c042);
  stroke: var(--badge-coin-stroke, #b07a14);
  stroke-width: 0.8;
}
.profile-user-badge-coin-inner {
  fill: none;
  stroke: var(--badge-coin-stroke, #b07a14);
  stroke-width: 0.5;
  opacity: 0.55;
}
.profile-user-badge-star {
  fill: var(--badge-star, #fff8e1);
}
/* Subtle highlight arc on the upper half of the coin */
.profile-user-badge-shine {
  fill: rgba(255, 255, 255, 0.4);
  mix-blend-mode: screen;
}
.profile-user-badge-text {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Gold (card holder) - paid card holder */
.profile-user-badge--gold {
  --badge-bg-1: #fff5d6;
  --badge-bg-2: #ffd87a;
  --badge-fg: #7a3d02;
  --badge-border: rgba(180, 110, 0, 0.45);
  --badge-ribbon: #c1272d;
  --badge-coin: #f7c545;
  --badge-coin-stroke: #8a4b00;
  --badge-star: #fff8e1;
  animation: profile-user-badge-pulse 2.6s ease-in-out infinite;
}
/* Silver (awaiting production) - approved, awaiting card production */
.profile-user-badge--silver {
  --badge-bg-1: #f4f8ff;
  --badge-bg-2: #cfd9e8;
  --badge-fg: #344b6b;
  --badge-border: rgba(80, 105, 145, 0.35);
  --badge-ribbon: #5b7aa8;
  --badge-coin: #d8dee8;
  --badge-coin-stroke: #5b6b85;
  --badge-star: #ffffff;
}
/* Bronze (applicant) - pending review */
.profile-user-badge--bronze {
  --badge-bg-1: #fff1de;
  --badge-bg-2: #f3c89a;
  --badge-fg: #6b3a0a;
  --badge-border: rgba(155, 90, 30, 0.35);
  --badge-ribbon: #a3552b;
  --badge-coin: #d28848;
  --badge-coin-stroke: #6b3a0a;
  --badge-star: #fff5e6;
}

@keyframes profile-user-badge-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px var(--badge-border),
      0 1px 2px rgba(0, 0, 0, 0.08),
      0 0 0 0 rgba(247, 197, 69, 0);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px var(--badge-border),
      0 1px 2px rgba(0, 0, 0, 0.08),
      0 0 0 0.4rem rgba(247, 197, 69, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-user-badge--gold { animation: none; }
}

/* ---------- 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: auto;
  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: 2.8rem;
  font-weight: 800;
  line-height: 3.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;
}
/* Card balance can be long, so stack vertically and let the number take a full row */
.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;
}

/* ========================================================================
 * Login / register pages (Figma nodes 10:3615 login, 10:3689 register)
 * ====================================================================== */
.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; }

/* Push the partners + ICP footer to the bottom */
.auth-footer {
  margin-top: auto;
  padding-top: 4rem; /* Keep at least 40px between the footer and the card */
}

/* Centered ICBC square logo and title */
.auth-logo {
  margin: calc(5.2rem + var(--app-safe-top) + var(--app-top-extra)) 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;
}

/* White card container */
.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);
}

/* Form and fields */
.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;
}

/* Captcha field: attach a server-generated 4-digit captcha image on the right */
.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; }

/* Actions: submit button and switch link */
.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;
}

/* ========================================================================
 * Shared secondary pages: sub-header / sub-page / form / list / hint
 * ====================================================================== */
.page-sub .app-frame::before { display: none; }
.page-sub .app-frame {
  background: #f4f5f7;
  padding-bottom: 4rem;
}
.page-sub-clean .app-frame {
  padding-top: calc(var(--app-safe-top) + var(--app-top-extra));
}

.sub-header {
  position: relative;
  height: var(--sub-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--app-safe-top) + var(--app-top-extra)) 1.2rem 0;
  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;
}

/* Content area */
.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);
}

/* Form fields (label above, input below) */
.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); }

/* Inline validation error state */
.sp-field-input.is-invalid,
.sp-field-textarea.is-invalid {
  background: #fef2f2;
  box-shadow: inset 0 0 0 1px #cf0000;
}
.sp-field-err {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #cf0000;
}

/* Submit buttons (full-width and fixed-width variants) */
.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; }

/* Alert messages (success / failure) */
.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); }

/* Status badges (verified / unverified / bound, etc.) */
.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); }

/* Large metric blocks */
.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);
}

/* List rows */
.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 code display block */
.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 */
.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;     /* Allow long-press save on 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); }

/* ========================================================================
 * Invite reward tiers (timeline style)
 * ====================================================================== */
.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; }

/* Left timeline vertical line */
.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)); }

/* Circular node */
.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); }
}

/* Right content card */
.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; }

/* Status tag */
.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);
}

/* Reward 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);
}
/* Locked tiers: keep the reward amount prominent so users notice the incentive */
.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);
}

/* Progress bar (next tier only) */
.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;
}

/* ========================================================================
 * Withdrawals / transaction details
 * ====================================================================== */
.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);
}
/* The three variants only change the large-number accent color; all other styles are shared */
.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;
}

/* Global: [hidden] must stay hidden regardless of later display rules */
[hidden] { display: none !important; }

/* Payment account tabs (reserved for possible reuse) */
.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;
}

/* Add new account link */
.wd-add-link {
  display: inline-block;
  font-size: 1.3rem;
  color: #cf0000;
  text-decoration: none;
  cursor: pointer;
}
/* Show the two "+ Add" actions side by side */
.wd-add-row {
  display: flex;
  gap: 1.6rem;
  margin-top: 1rem;
  padding-left: 0.2rem;
}

/* ============ Withdrawal summary bar: make the destination obvious ============ */
.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; }

/* ============ Binding modal inside the withdrawal page ============ */
.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;
}

/* Card corner badge */
.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; }

/* Shared sub-row icon */
.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; }

/* Bank card selector */
.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); }

/* Amount input */
.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;
}

/* Step list (card issuing guide) */
.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; }

/* Transaction details */
.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;
}

/* Support contact card */
.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;
}

/* ============================================================
 * Real-name verification - ID upload /pages/realname.php
 * ============================================================ */
.rn-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 1rem;
}
/* Variant: single column when there are 3 slots so each image stays large
   enough to inspect on mobile (front + back + selfie). */
.rn-upload-grid-3 {
  grid-template-columns: 1fr;
}

/* Withdrawal page: ID-doc checklist shown when project-wallet payouts are
   blocked by missing document uploads. Restrained, ICBC-tone. */
.wd-doc-checklist {
  list-style: none;
  margin: 1rem 0 1.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.wd-doc-checklist li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(0, 0, 0, .03);
  border-radius: .8rem;
  font-size: 1.4rem;
}
.wd-doc-checklist li.is-done  { background: rgba(34, 197, 94, .08); }
.wd-doc-checklist li.is-todo  { background: rgba(207, 0, 0, .06); }
.wd-doc-step {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #94a3b8;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wd-doc-checklist .is-done .wd-doc-step { background: #22c55e; }
.wd-doc-checklist .is-todo .wd-doc-step { background: #cf0000; }
.wd-doc-label {
  flex: 1 1 auto;
  color: #111827;
}
.wd-doc-state {
  flex: none;
  font-size: 1.2rem;
  font-weight: 500;
  color: #94a3b8;
}
.wd-doc-checklist .is-done .wd-doc-state { color: #16a34a; }
.wd-doc-checklist .is-todo .wd-doc-state { color: #cf0000; }
.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; }

/* ============================================================
 * Online support chat /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;
}

/* ============================================================
 * My licai /pages/my_licai.php
 * ============================================================ */
.my-licai-page { padding-bottom: 3rem; }

/* --- Top summary card .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; }

/* --- Holdings list .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;
}

/* Two-column "label : value" info table: four-column grid [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; }

/* --- Recent orders --- */
.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; }

/* ============================================================
 * Bottom payment method sheet .pay-sheet (used by 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-help {
  margin: -0.6rem 0 0.8rem;
  font-size: 1.2rem;
  line-height: 1.45;
  color: #8b5a2b;
}
.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;
}

/* Payment method options */
.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-submit[disabled] { opacity: .65; cursor: not-allowed; }
.pay-sheet-disclaim {
  margin: 1rem 0 0; text-align: center; font-size: 1.1rem; color: #999;
}

/* ============================================================
 * Payment status overlay .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; }

/* ============================================================
 * Payment method options .pay-method-* (inside the licai.php pay-sheet)
 * Important: use a fixed-size icon box so reset CSS cannot stretch source images full width
 * ============================================================ */
.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.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.pay-method input[type=radio] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.pay-method-icon {
  flex: 0 0 3.6rem;
  width: 3.6rem; height: 3.6rem;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: .6rem;
}
.pay-method-icon img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
.pay-method-icon--wallet {
  background: linear-gradient(135deg, #fff7e0, #ffd874);
  color: #8a3b00;
  font-size: 2rem;
  font-weight: 800;
}
.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,
.pay-method.is-checked .pay-method-check {
  border-color: #c8222a;
  background: #c8222a;
}
.pay-method:has(input:checked) .pay-method-check::after,
.pay-method.is-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;
}

/* ============================================================
 * Insurance success receipt /pages/licai_pay_return.php
 * 1:1 recreation of the ICBC insurance success receipt (mobile 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;
}

/* ---------- Top brand bar ---------- */
.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;
}

/* ---------- Checkmark + title (horizontal layout) ---------- */
.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;
}

/* ---------- Body greeting ---------- */
.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; }

/* ---------- Key amount bar ---------- */
.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; }

/* ---------- Policy details ---------- */
.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;
}

/* ---------- Bottom note + stamp ---------- */
.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; /* Leave room for the stamp */
  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;
}

/* ---------- Pending / failed notice block ---------- */
.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;
}

/* ---------- Bottom dual buttons ---------- */
.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; }

/* ============================================================
 * Cashier /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; }

/* ============================================================
 * Purchase order page /pages/licai_buy.php .lcb-* (same style family as 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; }

/* ============================================================
 * Shared redirect / QR payment page /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; }
/* WeChat browser outer overlay guide */
.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; }

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

/* ---------- Hero wide banner (red-gold gradient + glow) ---------- */
.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 code block */
.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; }

/* Dual reward */
.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);
}

/* ---------- Next-tier progress power card ---------- */
.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; }

/* Ring progress (pure 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;
}

/* Bar progress */
.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;
}

/* ---------- Quick share ---------- */
.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;
}

/* ---------- Recent invites ---------- */
.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; }

/* ---------- Poster modal ---------- */
.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);
}

/* ============================================================
 * Lottery home entry banner - minimal bank style
 * ============================================================ */
.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;
}

/* ============================================================
 * Profile center · daily check-in banner (immediately below the user card)
 * ============================================================ */
.profile-checkin-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: .9rem .2rem 1rem;
  padding: 1rem 1.1rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, #fff7e6 0%, #fff 60%);
  border: 1px solid #ecd7ae;
  text-decoration: none;
  box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .04);
  overflow: hidden;
}
.profile-checkin-banner::after {
  content: "";
  position: absolute;
  right: -2.4rem;
  top: -2.4rem;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 0, 0, .08), transparent 70%);
  pointer-events: none;
}
.profile-checkin-banner-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: .7rem;
  background: #fff5e6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 .1rem .4rem rgba(207, 0, 0, .08);
}
.profile-checkin-banner-icon img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}
.profile-checkin-banner-copy {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.profile-checkin-banner-title {
  font-size: 1.55rem;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: .02em;
}
.profile-checkin-banner-sub {
  font-size: 1.15rem;
  color: #8a6d3b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-checkin-banner-cta {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: .45rem 1rem;
  background: linear-gradient(135deg, #cf0000, #8a0000);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 .15rem .35rem rgba(207, 0, 0, .25);
}

/* ============================================================
 * Lottery - nine-grid draw page /pages/lottery.php
 * Minimal bank style: restrained red-gold color, no decorative clutter, only marquee and grid-step animations
 * ============================================================ */
.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 (100k 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-head-actions {
  display: flex;
  align-items: baseline;
  gap: .8rem;
}
.lot-records-link {
  font-size: 1.2rem;
  color: #c8222a;
  text-decoration: none;
  font-weight: 500;
}
.lot-records-link:active { opacity: .7; }

/* ---------- My prizes (claim) page ---------- */
.my-prizes-page .mp-prize-card { padding-bottom: 1.4rem; }
.mp-prize-head {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed rgba(0, 0, 0, .08);
}
.mp-prize-img {
  width: 7.6rem;
  height: 7.6rem;
  border-radius: .8rem;
  object-fit: cover;
  background: #f6f6f6;
  flex-shrink: 0;
}
.mp-prize-meta {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  flex: 1;
}
.mp-prize-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #231815;
}
.mp-prize-time {
  font-size: 1.1rem;
  color: rgba(0, 0, 0, .55);
}
.mp-shipinfo {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  font-size: 1.3rem;
}
.mp-shipinfo-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.mp-shipinfo-row span {
  color: rgba(0, 0, 0, .55);
  flex-shrink: 0;
}
.mp-shipinfo-row strong {
  color: #231815;
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}
.mp-rules {
  list-style: decimal;
  padding-left: 2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  font-size: 1.3rem;
  color: rgba(0, 0, 0, .7);
  line-height: 1.6;
}
.mp-rules strong { color: #c8222a; font-weight: 600; }

/* Photo upload widget */
.mp-upload-wrap {
  position: relative;
  margin-top: .4rem;
}
.mp-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.mp-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 1.1rem .8rem;
  background: #f9fafb;
  border: 1.5px dashed #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: center;
}
.mp-upload-btn:active,
.mp-upload-btn:focus-within {
  border-color: #cf0000;
  background: #fff5f5;
}
.mp-upload-icon { font-size: 1.6rem; line-height: 1; }
.mp-upload-text { font-size: .875rem; font-weight: 600; color: #111; }
.mp-upload-hint { font-size: .75rem; color: rgba(0,0,0,.45); line-height: 1.4; }
.mp-upload-preview {
  margin-top: .5rem;
  display: none;
}
.mp-upload-preview img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.mp-upload-preview.has-file { display: block; }
.mp-upload-preview .mp-upload-fname {
  font-size: .75rem;
  color: rgba(0,0,0,.5);
  margin-top: .3rem;
  text-align: center;
}

/* Reject banner — shown above the re-submit form when admin has rejected */
.mp-reject-banner {
  margin-top: .8rem;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: .8rem;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.mp-reject-title {
  color: #991b1b;
  font-weight: 600;
  font-size: 1.4rem;
}
.mp-reject-reason {
  color: #7f1d1d;
  font-size: 1.3rem;
  line-height: 1.6;
  background: #fff;
  border: 1px dashed #fecaca;
  border-radius: .5rem;
  padding: .6rem .8rem;
  word-break: break-word;
}
.mp-reject-time {
  color: #9b6363;
  font-size: 1.2rem;
}
.mp-reject-cta {
  color: #555;
  font-size: 1.3rem;
  margin-top: .2rem;
}

.mp-tracking {
  margin-top: 1rem;
  background: linear-gradient(180deg, #fff7e6 0%, #fff 100%);
  border: 1px solid #f1d28b;
  border-radius: .8rem;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.mp-tracking-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.4rem;
  color: #231815;
}
.mp-tracking-flag {
  background: #2e7d32;
  color: #fff;
  font-size: 1.1rem;
  padding: .15rem .55rem;
  border-radius: .25rem;
  font-weight: 500;
}
.mp-tracking-body {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: 1.3rem;
}
.mp-tracking-label { color: rgba(0, 0, 0, .55); flex-shrink: 0; }
.mp-tracking-no {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: #231815;
  word-break: break-all;
  user-select: all;
}
.mp-tracking-copy {
  border: 1px solid #c8222a;
  background: #fff;
  color: #c8222a;
  border-radius: .35rem;
  padding: .25rem .8rem;
  font-size: 1.15rem;
  cursor: pointer;
}
.mp-tracking-copy:active { opacity: .7; }
.mp-tracking-time {
  font-size: 1.15rem;
  color: rgba(0, 0, 0, .55);
}
.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;
  text-decoration: none;
}
a.lot-records-status:active { opacity: .7; }
.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;
}

/* Optional MP4 announcement clip (sits between title and images). */
.home-popup-video {
  margin: 0 0 1.4rem;
}
.home-popup-video-el {
  width: 100%;
  max-height: 56vh;
  display: block;
  border-radius: .8rem;
  background: #000;
  outline: none;
}

/* 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 — buttons stacked vertically; pager sits above on its own row */
.home-popup-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .8rem;
  padding: 1.2rem 2rem 2rem;
  border-top: 1px solid #f1f5f9;
  background: #fff;
}
.home-popup-pager {
  align-self: flex-start;
  font-size: 1.3rem;
  color: #94a3b8;
  margin-bottom: .2rem;
}
/* Primary action button */
.home-popup-next {
  width: 100%;
  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); }
/* Join action link — shown above the dismiss button when item has an href */
.home-popup-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(180deg, #ef3a3a 0%, #cf0000 100%);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  padding: 1.2rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 .4rem 1.2rem rgba(207, 0, 0, .3);
  letter-spacing: .04em;
}
.home-popup-action:hover { filter: brightness(1.06); color: #fff; }
/* When both action + next are visible, render next as a ghost outlined button */
.home-popup-action:not([hidden]) ~ .home-popup-next {
  background: transparent;
  color: #64748b;
  box-shadow: none;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1rem 2rem;
  border: 1px solid #e2e8f0;
}

/* 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;
}

/* ============================================================
   In-app browser overlay (app.php)
   Shown when the page is opened inside WeChat / QQ / Potato /
   similar WebViews that cannot trigger APK downloads.
   ============================================================ */
.inapp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.inapp-overlay[hidden] { display: none; }
.inapp-overlay-box {
  margin: 1.2rem 1.2rem 0 0;
  background: #fff;
  border-radius: 1.2rem;
  padding: 2rem 2rem 2.4rem;
  max-width: 28rem;
  position: relative;
  box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.3);
  text-align: center;
}
/* Arrow pointing up-right toward the "⋯" menu button */
.inapp-overlay-arrow {
  position: absolute;
  top: -1.4rem;
  right: 1.6rem;
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1.4rem solid #fff;
}
.inapp-overlay-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem;
}
.inapp-overlay-desc {
  font-size: 1.5rem;
  color: #475569;
  line-height: 1.7;
  margin: 0;
}
.inapp-overlay-desc strong {
  color: #cf0000;
}

/* ============================================================ */
/* Refugee virtual card — entry on /card.php + bind page         */
/* ============================================================ */

/* Entry block under the "Payment success" notice on /card.php */
.card-vcard-entry {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
  padding: 1.4rem 1.4rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #b21515 0%, #7a0a0a 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0.6rem 1.2rem rgba(178, 21, 21, 0.18);
  position: relative;
  overflow: hidden;
}
.card-vcard-entry::after {
  content: '';
  position: absolute;
  inset: auto -2rem -3rem auto;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 130, 0.22), transparent 60%);
  pointer-events: none;
}
.card-vcard-entry-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.card-vcard-entry-icon svg { width: 2.4rem; height: 2.4rem; }
.card-vcard-entry-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.card-vcard-entry-title {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.card-vcard-entry-sub {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}
.card-vcard-entry-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ---------- Virtual card hero on /pages/card_bind.php ---------- */
.vcard-page { padding-bottom: 3rem; }

.vcard-hero {
  position: relative;
  border-radius: 1.6rem;
  padding: 1.8rem 1.8rem 1.6rem;
  color: #fff7e1;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 230, 170, 0.22), transparent 55%),
    linear-gradient(135deg, #1e1f2a 0%, #2d2235 45%, #5a1c20 100%);
  box-shadow: 0 1rem 1.6rem rgba(20, 20, 30, 0.22);
  overflow: hidden;
  isolation: isolate;
}
.vcard-hero::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 197, 69, 0.25), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.vcard-hero > * { position: relative; z-index: 1; }

.vcard-hero-bank {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 247, 225, 0.18);
}
.vcard-hero-bank-mark {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.25rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.18);
}
.vcard-hero-bank-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.vcard-hero-bank-text {
  display: flex;
  flex-direction: column;
  line-height: 1.16;
  min-width: 0;
  flex: 1 1 auto;
}
.vcard-hero-bank-text strong {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.vcard-hero-bank-text small {
  display: block;
  max-width: 100%;
  font-size: 0.72rem;
  color: rgba(255, 247, 225, 0.62);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcard-hero-tag {
  flex: 0 0 auto;
  margin-left: 0.2rem;
  min-width: 5.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1e1f2a;
  background: linear-gradient(135deg, #f7d774 0%, #c79a36 100%);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

.vcard-hero-chip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  width: 4.2rem;
  height: 3rem;
  margin: 1.6rem 0 1.2rem;
  padding: 0.4rem;
  background: linear-gradient(135deg, #f7d774, #b8862d);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.vcard-hero-chip span {
  display: block;
  border-radius: 0.15rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.18));
}

.vcard-hero-num {
  display: flex;
  gap: clamp(0.55rem, 2.2vw, 1.2rem);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: clamp(1.55rem, 5vw, 1.85rem);
  letter-spacing: clamp(0.08em, 0.8vw, 0.16em);
  color: #fff;
  text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4);
  margin-bottom: 1.4rem;
}
.vcard-hero-num span { flex: 1; text-align: center; }
.vcard-hero-num span:first-child { text-align: left; }
.vcard-hero-num span:last-child { text-align: right; }

.vcard-hero-meta {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 1.2rem;
}
.vcard-hero-meta-block { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.vcard-hero-meta-block--exp { margin-left: auto; text-align: right; }
.vcard-hero-meta-k {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: rgba(255, 247, 225, 0.55);
  text-transform: uppercase;
}
.vcard-hero-meta-v {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vcard-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255, 247, 225, 0.2);
}
.vcard-hero-foot-tag {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f7d774;
  text-transform: uppercase;
}
.vcard-hero-foot-issued { font-size: 1.1rem; color: rgba(255, 247, 225, 0.55); }

@media (max-width: 380px) {
  .vcard-hero { padding: 1.5rem 1.4rem 1.4rem; }
  .vcard-hero-bank-mark {
    width: 2.9rem;
    height: 2.9rem;
  }
  .vcard-hero-bank-text strong { font-size: 1.22rem; }
  .vcard-hero-bank-text small { font-size: 0.65rem; }
  .vcard-hero-tag {
    min-width: 4.8rem;
    padding-inline: 0.7rem;
    font-size: 1rem;
  }
}

/* ---------- Detail rows ---------- */
.vcard-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.vcard-detail-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.vcard-detail-row:first-child { border-top: 0; }
.vcard-detail-k {
  flex: 0 0 8rem;
  font-size: 1.25rem;
  color: rgba(0, 0, 0, 0.55);
}
.vcard-detail-v {
  flex: 1;
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #1f1f1f;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcard-cvv-value { letter-spacing: 0.2em; }
.vcard-copy {
  flex-shrink: 0;
  border: 1px solid rgba(207, 0, 0, 0.4);
  background: transparent;
  color: #cf0000;
  font-size: 1.15rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.vcard-copy.is-copied {
  background: #cf0000;
  color: #fff;
  border-color: #cf0000;
}

/* ---------- Tutorial tabs + steps ---------- */
.vcard-tab {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.vcard-tab-btn {
  flex: 1;
  border: 0;
  background: transparent;
  height: 3.6rem;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.vcard-tab-btn.is-active {
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
}
.vcard-tab-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  display: inline-block;
}
.vcard-tab-dot--alipay { background: #1677ff; }
.vcard-tab-dot--wechat { background: #07c160; }

.vcard-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.vcard-steps li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.vcard-step-no {
  flex: 0 0 2.6rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff1f0;
  color: #cf0000;
  font-weight: 700;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffd6d3;
}
.vcard-step-bd { flex: 1 1 auto; min-width: 0; }
.vcard-step-bd strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  color: #1f1f1f;
  margin-bottom: 0.2rem;
}
.vcard-step-bd p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.6);
}
.vcard-step-bd code {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  background: rgba(207, 0, 0, 0.06);
  color: #cf0000;
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 1.15rem;
}

/* ---------- Notes ---------- */
.vcard-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.vcard-notes-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
}
.vcard-notes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #cf0000;
}
.vcard-notes-list a {
  color: #cf0000;
  text-decoration: none;
  border-bottom: 1px dashed rgba(207, 0, 0, 0.4);
}

/* CVV pending state: admin has not imported the security code yet */
.vcard-pending-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  border-radius: 0.8rem;
  background: #fff7e6;
  color: #8a4b00;
  font-size: 1.2rem;
  line-height: 1.5;
  border: 1px solid #f1c98a;
}
.vcard-pending-bar svg { flex-shrink: 0; }
.vcard-detail-v--pending {
  font-family: inherit !important;
  letter-spacing: 0 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  font-weight: 500 !important;
}
.vcard-cvv-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(207, 0, 0, 0.06);
  color: #cf0000;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}
.vcard-cvv-pending-hint {
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.45);
  font-size: 1.1rem;
}

/* Poster-style entry for the electronic refugee card */
.card-vcard-poster-link {
  display: block;
  margin: 1.4rem -0.2rem 0;
  border-radius: 1.2rem;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 0.6rem 1.4rem rgba(139, 0, 0, 0.12);
  background: #8b0000;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.card-vcard-poster-link:active {
  transform: scale(0.985);
  opacity: 0.92;
}
.card-vcard-poster {
  display: block;
  width: 100%;
  height: 13.6rem;
  object-fit: cover;
  object-position: center center;
}

/* Placeholder hero shown when admin has not imported real card data yet */
.vcard-hero--pending .vcard-hero-tag {
  background: linear-gradient(135deg, #f1c98a 0%, #c79a36 100%);
  opacity: 0.95;
}
.vcard-pending-wrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 2.4rem 0 2.2rem;
}
.vcard-pending-spinner {
  flex: 0 0 auto;
  width: 4.4rem;
  height: 4.4rem;
  color: #f7d774;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: vcard-pending-spin 1.4s linear infinite;
}
.vcard-pending-spinner svg { width: 100%; height: 100%; }
.vcard-pending-msg {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: #fff;
}
.vcard-pending-msg strong {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffe9a8;
}
.vcard-pending-msg span {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 247, 225, 0.78);
}
@keyframes vcard-pending-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vcard-pending-spinner { animation: none; }
}