/**
 * H5 客户中心视觉 Token（仅作用于 /h5 壳，不改 PC 全局主题）
 */
.h5-center-layout {
  --h5-bg: #f5f6f8;
  --h5-bg-hero: #f5f6f8;
  --h5-surface: #ffffff;
  --h5-text: #1d2129;
  --h5-text-2: #4e5969;
  --h5-text-3: #86909c;
  --h5-border: #e5e6eb;
  --h5-border-soft: #f2f3f5;
  --h5-radius: 16px;
  --h5-radius-sm: 12px;
  --h5-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  --h5-shadow-lift: 0 8px 24px rgba(15, 23, 42, 0.08);
  --h5-warning: #ff7d00;
  --h5-warning-bg: #fff7e8;
  --h5-danger: #f53f3f;
  --h5-danger-bg: #ffece8;
  --h5-success: #00b42a;
  --h5-success-bg: #e8ffea;
  --h5-primary-soft: color-mix(in srgb, var(--app-primary-color) 12%, #fff);
  --h5-primary-softer: color-mix(in srgb, var(--app-primary-color) 8%, #fff);
  --h5-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* 底部 dock：侧边 inset + 胶囊半径与 iPhone 连续圆角同心 */
  --h5-dock-bottom-inset: max(8px, calc(var(--h5-safe-bottom) - 12px));
  --h5-dock-side-inset: 16px;
  --h5-dock-height: 68px;
  --h5-dock-radius: calc(var(--h5-dock-height) / 2);
  --h5-dock-offset: calc(var(--h5-dock-height) + var(--h5-dock-bottom-inset));

  background: var(--h5-bg);
  color: var(--h5-text);
}

.h5-enter {
  animation: h5-rise-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes h5-rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}