@charset "UTF-8";
/**
 * 全局样式：tokens 装载 + 基础排版 + 通用工具类
 */
/* @use（Dart Sass 2.0+ 规范）：tokens 为纯 CSS 变量副作用块，语义与 @import 等价 */
/**
 * Design Tokens V1.0 —— 《微商城设计系统V1.0》附录 Token 清单原样落地
 *
 * 双写口径（设计系统 §1/§7 降级策略）：每 token 先声明 hex 回退值，再声明 oklch 主值；
 * 支持 oklch 的环境（Skyline/新 WebView）自动取后者，旧 WebView 保留 hex，视觉一致。
 *
 * 尺寸注：Taro designWidth=750，样式书写一律 rpx（= 设计 px × 2，390px 基准）。
 */
:root, page {
  /* ===== 品牌 · 青屿 Isle Teal ===== */
  --teal-50: #EFF8F9;
  --teal-50: oklch(97.3% 0.010 204.9);
  --teal-100: #D8EEF2;
  --teal-100: oklch(93.4% 0.024 209.8);
  --teal-200: #A8DAE1;
  --teal-200: oklch(85.6% 0.053 206.8);
  --teal-400: #2E97A6;
  --teal-400: oklch(62.4% 0.095 208.9);
  --teal-500: #127A88;
  --teal-500: oklch(53.2% 0.088 209.4);
  --teal-600: #0D6270; /* ★ 主色 */
  --teal-600: oklch(45.7% 0.076 212.4);
  --teal-700: #0A4C58;
  --teal-700: oklch(38.4% 0.064 213.7);
  --teal-800: #073B44;
  --teal-800: oklch(32.5% 0.053 212.5);
  /* ===== 信任 · 鎏金 Gilded Gold（资金安全专用，禁入促销语境） ===== */
  --gold-50: #FCF7EA;
  --gold-50: oklch(97.6% 0.018 89.4);
  --gold-100: #F6EBD2;
  --gold-100: oklch(94.2% 0.035 87.1);
  --gold-600: #A87B1C;
  --gold-600: oklch(61.2% 0.118 80.6);
  --gold-700: #8A6512;
  --gold-700: oklch(53.1% 0.103 81.6);
  /* ===== 营销 · 日出橙 Sunrise Flare（限面积 <5%） ===== */
  --flare-100: #FCE6DA;
  --flare-100: oklch(93.9% 0.029 50.6);
  --flare-500: #ED7440;
  --flare-500: oklch(69.2% 0.164 42.5);
  --flare-600: #D95D2B;
  --flare-600: oklch(62.8% 0.168 40.6);
  /* ===== 语义色 ===== */
  --success: #1E8A5A;
  --success: oklch(56.3% 0.120 158.5);
  --warning: #C2790D;
  --warning: oklch(63.9% 0.138 67.5);
  --danger: #D24848;
  --danger: oklch(59.4% 0.174 24.1);
  --info: #3873C8;
  --info: oklch(56.0% 0.146 257.8);
  /* ===== 中性 · 墨岩 Ink ===== */
  --ink-900: #14262E;
  --ink-700: #3C525C;
  --ink-500: #6B818C;
  --ink-300: #AFC0C8;
  --ink-200: #D5E0E4;
  --ink-100: #E9F0F2;
  --ink-50: #F5F8F9;
  /* ===== 间距（4px 网格，rpx = px × 2） ===== */
  --sp-1: 0.2rem;
  --sp-2: 0.4rem;
  --sp-3: 0.6rem;
  --sp-4: 0.8rem;
  --sp-5: 1rem;
  --sp-6: 1.2rem;
  --sp-8: 1.6rem;
  --sp-10: 2rem;
  /* ===== 圆角 ===== */
  --r-xs: 0.2rem;
  --r-sm: 0.4rem;
  --r-md: 0.6rem;
  --r-lg: 0.8rem;
  --r-xl: 1rem;
  --r-full: 24.975rem;
  /* ===== 阴影（e1–e4，青屿色相同光源；hex 回退基于 ink-900） ===== */
  --e1: 0 0.05rem 0.1rem rgba(20, 38, 46, 0.06);
  --e1: 0 0.05rem 0.1rem oklch(25.7% 0.028 228.1 / 0.06);
  --e2: 0 0.2rem 0.6rem rgba(20, 38, 46, 0.08);
  --e2: 0 0.2rem 0.6rem oklch(25.7% 0.028 228.1 / 0.08);
  --e3: 0 0.4rem 1.2rem rgba(20, 38, 46, 0.12);
  --e3: 0 0.4rem 1.2rem oklch(25.7% 0.028 228.1 / 0.12);
  --e4: 0 -0.2rem 0.8rem rgba(20, 38, 46, 0.07);
  --e4: 0 -0.2rem 0.8rem oklch(25.7% 0.028 228.1 / 0.07);
  /* ===== 字号阶梯（rpx = px × 2；行高同步） ===== */
  --fs-display: 1.7rem; /* 券码大数字/支付成功金额 */
  --lh-display: 2.1rem;
  --fs-h1: 1.4rem;
  --lh-h1: 1.8rem;
  --fs-h2: 1.1rem;
  --lh-h2: 1.5rem;
  --fs-h3: 0.9rem;
  --lh-h3: 1.3rem;
  --fs-body: 0.8rem;
  --lh-body: 1.2rem;
  --fs-body-sm: 0.7rem;
  --lh-body-sm: 1.05rem;
  --fs-caption: 0.6rem;
  --lh-caption: 0.85rem;
  --fs-micro: 0.55rem; /* 最小字号，禁止再小 */
  --lh-micro: 0.75rem;
  /* ===== 数字字体（价格/余位/券码：圆润 + 等宽数字对齐） ===== */
  --font-num: 'DIN Alternate', 'SF Pro Rounded', ui-rounded, sans-serif;
  /* ===== 语义别名（组件常用） ===== */
  --canvas: var(--ink-50);
  --card: #FFFFFF;
  --price: var(--flare-600);
  --trust: var(--gold-600);
  /* ===== 20260822 首页视觉重做 V2 增补（唯一新增位，全工程色值/阴影集中于此） ===== */
  --canvas-mall: #F5F6F8; /* 商城页面背景（设计单指定 #f5f6f8） */
  --e-card: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06); /* 卡片统一轻阴影（0 2px 8px rgba(0,0,0,.06)） */
}

:root, page {
  background: var(--canvas);
  color: var(--ink-900);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Source Han Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ===== 通用工具类 ===== */
/* 卡片（e1 静止阴影，md 圆角） */
.card {
  background: var(--card);
  border-radius: var(--r-md);
  -webkit-box-shadow: var(--e1);
          box-shadow: var(--e1);
  padding: var(--sp-4);
  margin: 0 var(--sp-4) var(--sp-3);
}

/* 区块标题（h2 · 22px 粗体） */
.block-title {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  color: var(--ink-900);
  margin: var(--sp-4) var(--sp-4) var(--sp-3);
}
.block-title .block-title__en {
  margin-left: var(--sp-2);
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--ink-300);
}

/* 等宽数字（价格/余位/券码对齐不跳动） */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* hairline 分隔线（0.5px） */
.hairline-top {
  border-top: 0.025rem solid var(--ink-200);
}

/* 安全区吸底（毛玻璃） */
.safe-bottom {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

/* 鎏金信任卡（固定出现，不可运营位替换 —— 设计系统 §4.8） */
.trust-card {
  background: var(--gold-50);
  border: 0.05rem solid var(--gold-100);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: var(--sp-2);
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.trust-card .trust-card__text {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--gold-700);
}

/* 状态标签（色 + 文字双通道 —— 设计系统 §1.3 禁止纯色表达） */
.tag {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 500;
}
.tag.tag--teal {
  background: var(--teal-50);
  color: var(--teal-600);
}
.tag.tag--gold {
  background: var(--gold-50);
  color: var(--gold-700);
  border: 0.025rem solid var(--gold-100);
}
.tag.tag--flare {
  background: var(--flare-100);
  color: var(--flare-600);
}
.tag.tag--success {
  background: rgba(30, 138, 90, 0.1);
  color: var(--success);
}
.tag.tag--danger {
  background: rgba(210, 72, 72, 0.08);
  color: var(--danger);
}
.tag.tag--warning {
  background: rgba(194, 121, 13, 0.1);
  color: var(--warning);
}
.tag.tag--info {
  background: rgba(56, 115, 200, 0.08);
  color: var(--info);
}
.tag.tag--ink {
  background: var(--ink-100);
  color: var(--ink-500);
}

/* 文本溢出省略（2 行） */
.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ellipsis-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* 骨架屏流光（prefers-reduced-motion 降级） */
.skeleton {
  background: var(--ink-100);
  border-radius: var(--r-xs);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, 0.65)), to(transparent));
  background: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.65), transparent);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  -webkit-animation: skeleton-flow 1.3s infinite;
          animation: skeleton-flow 1.3s infinite;
}

@-webkit-keyframes skeleton-flow {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes skeleton-flow {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
/* ===== H5 挂载校验失败提示态（app 入口 · 先于页面挂载） ===== */
.app-invalid-link {
  min-height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 var(--sp-8);
  background: var(--canvas);
  text-align: center;
}
.app-invalid-link__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--sp-2);
}
.app-invalid-link__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-500);
}

/* ===== 20260822 H5 桌面端适配：>768px 视口手机壳居中 + 页面外灰底 =====
 * （大厂 H5 标准做法；max-width 480px；Px 大写单位绕开 pxtransform 转 rem，
 * 媒体查询声明不参与转换；小程序 ≤750px 视口不命中查询，零影响）
 * —— 与 20260820 dist 手补「桌面端限宽止损」同口径，本次收编进源码随构建产出 */
/* #ifdef H5 */
/* #endif */