/* PM audit pass: keep mobile H5 pages inside the viewport and make navigation states clearer. */
.site,
.phone-shell,
.app-shell,
.page {
  max-width: 100vw;
  overflow-x: hidden;
}

.page-scenes,
.page-scenes .ritual-stage,
.page-scenes .ritual-hero,
.page-scenes .ritual-entry-grid {
  min-width: 0;
}

.page-scenes .ritual-stage {
  width: 100%;
  max-width: 100%;
}

.page-scenes .ritual-hero,
.page-scenes .ritual-entry-grid {
  width: 100%;
  max-width: min(100%, calc(560 * var(--rpx)));
}

.hero-copy-stack,
.hero-copy-stack span,
.landing-lead-stack,
.landing-lead-stack span {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-scenes .ritual-hero .hero-copy {
  width: 100%;
  max-width: min(100%, calc(520 * var(--rpx)));
}

.page-scenes .ritual-entry-card {
  min-width: 0;
}

.moments-profile {
  right: max(calc(16 * var(--rpx)), 10px);
  max-width: calc(100% - max(calc(32 * var(--rpx)), 20px));
}

.moments-profile-name {
  max-width: calc(100vw - calc(170 * var(--rpx)));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moments-profile .avatar {
  width: clamp(52px, calc(88 * var(--rpx)), 62px);
  height: clamp(52px, calc(88 * var(--rpx)), 62px);
}

.moments-profile .agent-avatar-img {
  object-fit: cover;
  object-position: center;
}

.dialogue-top-actions {
  min-width: 0;
}

.dialogue-icon-button {
  font-family: var(--font-cn-body);
}

.delivery-progress-card,
.pending-payment-card {
  border-color: var(--ui-line);
  background:
    radial-gradient(circle at 84% 0%, rgba(255, 255, 255, 0.68), transparent 34%),
    linear-gradient(135deg, var(--ui-panel-strong), rgba(240, 238, 233, 0.72));
  color: var(--ui-ink);
  box-shadow:
    0 calc(18 * var(--rpx)) calc(44 * var(--rpx)) rgba(43, 45, 48, 0.09),
    inset 0 calc(1 * var(--rpx)) 0 rgba(255, 255, 255, 0.7);
}

.delivery-step {
  background: rgba(43, 45, 48, 0.055);
}

.delivery-step b {
  color: var(--ui-ink);
}

.delivery-step p {
  color: var(--ui-muted);
}

.pending-payment-card code {
  background: rgba(43, 45, 48, 0.06);
  color: var(--ui-muted);
}

@media (max-width: 430px) {
  html,
  body {
    min-height: 100dvh;
    overflow-x: hidden;
    background:
      linear-gradient(rgba(43, 45, 48, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(43, 45, 48, 0.045) 1px, transparent 1px),
      radial-gradient(ellipse at 82% 4%, rgba(201, 106, 43, 0.1), transparent 34%),
      radial-gradient(ellipse at 14% 36%, rgba(158, 182, 196, 0.26), transparent 36%),
      linear-gradient(180deg, #f7f5ef 0%, #ebe7dd 100%);
    background-size:
      calc(72 * var(--rpx)) calc(72 * var(--rpx)),
      calc(72 * var(--rpx)) calc(72 * var(--rpx)),
      auto,
      auto,
      auto;
  }

  .site {
    display: block;
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .phone-shell,
  .app-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh;
  }

  .tabbar {
    position: fixed;
    bottom: 0;
    transform: translateZ(0);
  }

  .page-membership {
    padding-inline: 16px;
  }

  .page-membership > .login-only-card,
  .page-membership > .journey-card,
  .page-membership > .my-home-card,
  .page-membership > .invite-card,
  .page-membership > .pending-payment-card,
  .page-membership > .membership-active-card,
  .page-membership > .delivery-progress-card,
  .page-membership > .renewal-card,
  .page-membership > .price-card,
  .page-membership > .wecom-card {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    min-width: 0;
    margin-inline: auto;
    overflow: hidden;
  }

  .page-membership .primary-button,
  .page-membership .secondary-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .login-only-card .wechat-login-primary,
  .login-only-card .dev-login-button,
  .login-only-card .login-note {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  .login-only-card .login-note {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .page-scenes {
    padding-inline: clamp(18px, calc(34 * var(--rpx)), 22px);
  }

  .page-scenes .h1 {
    font-size: clamp(32px, calc(54 * var(--rpx)), 38px);
  }

  .page-scenes .ritual-hero .hero-copy {
    font-size: clamp(14px, calc(23 * var(--rpx)), 17px);
    line-height: 1.7;
  }

  .page-scenes .ritual-entry-grid {
    margin-top: calc(30 * var(--rpx));
  }
}