/* =====================================================================
   设计 Token — 抖音送礼轻量原型 v1.2（视觉升级：粉色 + 银色 · 少女精致感）
   锁定规范（Spec §8）：
     - 主色：樱花粉 #F289AE ~ #ED7BA6（每屏 ≤2 处可见使用，实而不刺）
     - 辅助色：银色 #C6CBD4 ~ #A4ABB8（冷调金属·微珠光，仅礼物卡「品牌仪式时刻」使用，绝不与其余做渐变）
     - 中性：冷调粉白（bg/surface/border/fg/muted）
     - 字体：PingFang SC（中文）/ Inter（拉丁）/ DIN（数字）/ Noto Serif SC（礼物卡标题，仅卡面）
     - 图标：Lucide SVG 描边（见 icons.js），禁止 emoji
   P0 红线：禁紫→粉渐变 · 禁 emoji 图标 · 禁硬编码颜色（全部走变量）· 禁空洞占位
   ===================================================================== */

:root {
  /* 主色：淡樱花粉（更糯、更轻盈） */
  --coral: #F289AE;
  --coral-strong: #ED7BA6;
  --coral-soft: #FCEAF1;       /* 樱花粉极浅底，用于选中/轻提示 */
  /* 仪式淡银色（替代烫金，冷调金属光泽，仅礼物卡「品牌仪式时刻」使用） */
  --gold: #C6CBD4;
  --gold-strong: #A4ABB8;
  --gold-soft: #EEF0F4;
  /* 粉缎信封（收礼方专属仪式视觉，替代红丝绒，整体调淡） */
  --velvet: #E89BBB;
  --velvet-deep: #D77CA6;
  --velvet-bright: #F4B6D2;
  --ribbon: #E89BBB;
  --ribbon-hi: #F6C6DC;
  --cream: #FCEFF4;
  --cream-soft: rgba(252, 239, 244, 0.8);
  /* 中性（更淡的冷调粉白） */
  --bg: #FCFAFB;
  --surface: #FFFFFF;
  --surface-warm: #F8F3F7;
  --border: #F1EBF0;
  --fg: #443D49;
  --muted: #A099A4;
  --meta: #C9C0C8;
  /* 语义色 */
  --success: #2E9E5B;
  --success-soft: #E6F4EC;
  --warn: #9AA3B2;
  --warn-soft: #EEF1F5;
  --danger: #E56A93;
  --danger-soft: #FBE9F1;

  /* 圆角 */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* 阴影 */
  --shadow-sm: 0 1px 4px rgba(43, 38, 34, 0.05);
  --shadow-md: 0 6px 22px rgba(43, 38, 34, 0.08);
  --shadow-lg: 0 18px 50px rgba(43, 38, 34, 0.14);
  --shadow-coral: 0 10px 30px rgba(237, 123, 166, 0.26);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --num: "DIN Alternate", "DIN", "Inter", "PingFang SC", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;

  /* 间距网格（4px 基准） */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* 粉色氛围背景：顶部粉光晕 + 右上角银晕（无紫粉渐变） */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(110% 70% at 50% -8%, rgba(247, 183, 203, 0.10), transparent 58%),
    radial-gradient(70% 50% at 100% 0%, rgba(198, 203, 212, 0.11), transparent 55%),
    radial-gradient(60% 40% at 0% 100%, rgba(247, 183, 203, 0.05), transparent 60%);
}

/* 移动优先容器（手机视图） */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: transparent;
  padding: var(--s-4);
  padding-top: max(var(--s-4), env(safe-area-inset-top));
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* 顶部标题栏 */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0 var(--s-1);
}
.topbar .brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: 16px; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 14px 6px 6px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.topbar .brand .logo {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--coral-strong), var(--coral));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-coral);
}
.topbar .spacer { flex: 1; }

/* 排版层级 */
h1 { font-size: 23px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.005em; }
h3 { font-size: 15px; font-weight: 600; }
.lead { color: var(--muted); font-size: 14px; line-height: 1.7; }
.muted { color: var(--muted); }
.meta { color: var(--meta); font-size: 12px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 50px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 15px; font-weight: 600; font-family: var(--font);
  cursor: pointer; user-select: none;
  transition: transform .1s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.btn-primary {
  background: linear-gradient(135deg, var(--coral-strong), var(--coral));
  color: #fff; box-shadow: var(--shadow-coral);
}
.btn-primary:hover { box-shadow: 0 12px 34px rgba(236, 106, 152, 0.34); }
.btn-ghost { background: var(--surface); color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-warm); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn .ic { display: inline-flex; }

/* 卡片 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-md);
}
.card + .card { margin-top: var(--s-4); }

/* 表单字段 */
.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field > label {
  font-size: 13px; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: 6px;
}
.field .hint { font-size: 12px; color: var(--meta); font-weight: 400; }
.input, .textarea, .select {
  width: 100%; min-height: 48px;
  padding: 13px 14px;
  font-size: 15px; font-family: var(--font); color: var(--fg);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--meta); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-soft);
}
.textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.field-row { display: flex; gap: var(--s-3); }
.field-row > .field { flex: 1; }

/* 商品图片上传器 */
.uploader { display: flex; flex-direction: column; gap: var(--s-2); }
.uploader .btn-ghost { align-self: flex-start; }
.upload-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; background: var(--surface-warm);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.upload-preview img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--gold-soft); flex: none;
  background: var(--surface);
}
.upload-preview .up-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.upload-preview .up-name {
  font-size: 13px; color: var(--fg); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.link-btn {
  align-self: flex-start; background: none; border: none; padding: 0;
  color: var(--coral); font-size: 13px; cursor: pointer; font-family: var(--font);
}
.link-btn:hover { text-decoration: underline; }

/* 隐私信任条 */
.trust-bar {
  display: flex; align-items: flex-start; gap: var(--s-2);
  background: var(--surface-warm); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.trust-bar .ic { color: var(--success); flex-shrink: 0; margin-top: 1px; }

/* ===== 礼物卡（粉缎礼盒 · 收礼方仪式中心） ===== */
.gift-card {
  position: relative;
  background:
    /* 盒盖内侧高光 */
    linear-gradient(180deg, rgba(255,255,255,0.13) 0%, transparent 16%),
    /* 左上受光 */
    radial-gradient(150% 100% at 14% 8%, rgba(255,255,255,0.16), transparent 50%),
    /* 右下投影 */
    radial-gradient(140% 110% at 92% 96%, rgba(0,0,0,0.42), transparent 58%),
    /* 细绒纹 */
    repeating-linear-gradient(122deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 8px),
    /* 丝绒主体 */
    linear-gradient(168deg, var(--velvet-bright) 0%, var(--velvet) 40%, var(--velvet-deep) 100%);
  border: 2.5px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 70px var(--s-5) var(--s-5);
  /* 真实礼盒投影：悬空 + 落地阴影 */
  box-shadow:
    0 28px 70px rgba(0,0,0,0.30),
    0 10px 22px rgba(0,0,0,0.20),
    inset 0 0 0 4px rgba(0,0,0,0.14),
    inset 0 0 0 5px rgba(201,205,214,0.5),
    inset 0 0 0 11px rgba(201,205,214,0.16);
  overflow: visible;
  animation: cardIn .55s cubic-bezier(.2,.7,.2,1) both;
}
/* 盒盖与盒身分界线（银色） */
.gift-card::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 54px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,205,214,0.7), transparent);
  border-radius: 2px; pointer-events: none; z-index: 2;
}
/* 竖向缠绕缎带（贯穿盒盖与盒身，丝光质感，被内容窗打断） */
.gift-card .ribbon-v {
  position: absolute; inset: 0; border-radius: var(--r-lg);
  background:
    linear-gradient(90deg,
      transparent calc(50% - 34px),
      rgba(0,0,0,0.20) calc(50% - 34px),
      rgba(248,200,221,0.6) calc(50% - 20px),
      rgba(255,255,255,0.22) calc(50% - 2px),
      rgba(248,200,221,0.6) calc(50% + 2px),
      rgba(255,255,255,0.16) calc(50% + 20px),
      rgba(0,0,0,0.20) calc(50% + 34px),
      transparent calc(50% + 34px));
  pointer-events: none; z-index: 3;
}
/* 横向缠绕缎带（绕盒盖缝，两端渐隐到盒背，压在竖向之上） */
.gift-card .ribbon-h {
  position: absolute; left: -3px; right: -3px; top: 54px; height: 30px;
  transform: translateY(-50%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24) 0%, transparent 24%, rgba(0,0,0,0.22) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--ribbon) 5%, var(--ribbon-hi) 50%, var(--ribbon) 95%, rgba(0,0,0,0) 100%);
  box-shadow: 0 3px 7px rgba(0,0,0,0.32), inset 0 1px 2px rgba(255,255,255,0.35);
  border-radius: 3px; pointer-events: none; z-index: 3;
}
/* 银色系结（丝带缠绕的交叉点，非蝴蝶结，纯系扣） */
.gift-card .ribbon-knot {
  position: absolute; top: 54px; left: 50%; width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 30%, var(--gold) 0%, var(--gold-strong) 72%);
  box-shadow: 0 4px 9px rgba(0,0,0,0.40), inset 0 -2px 4px rgba(0,0,0,0.20), inset 0 2px 5px rgba(255,255,255,0.45);
  pointer-events: none; z-index: 5;
}
.gift-card .ribbon-knot::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.18), inset 0 1px 2px rgba(255,255,255,0.4);
}
.gift-card > * { position: relative; z-index: 2; }

/* （已移除蝴蝶结，改用丝带缠绕：ribbon-v 竖向 / ribbon-h 横向 / ribbon-knot 银色系结） */

/* 礼盒内容托盘（像嵌在盒盖上的展示窗） */
.gift-card .card-tray {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 12%),
    linear-gradient(165deg, rgba(228,143,176,0.85) 0%, rgba(199,106,147,0.65) 100%);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.12),
    inset 0 -2px 8px rgba(0,0,0,0.28),
    0 8px 22px rgba(0,0,0,0.25);
  border: 1px solid rgba(201,205,214,0.5);
}

/* 银色封缄标签 */
.gift-card .seal {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--gold-strong);
  letter-spacing: .04em;
}
.gift-card .seal .ic { color: var(--gold-strong); }

/* 真实商品图（嵌于礼盒展示窗中的金框窗口） */
.gift-card .present-img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); margin: var(--s-3) 0 0;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 22px rgba(0,0,0,0.40), inset 0 0 0 1px rgba(255,255,255,0.14);
}
/* 盲盒占位：神秘礼盒 + 火漆「?」封印 */
.gift-card .present-img.placeholder {
  display: flex; align-items: center; justify-content: center;
  margin: var(--s-3) 0 0;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(160deg, var(--velvet-bright), var(--velvet));
  border: 2px dashed rgba(201,205,214,0.6);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,0.10);
}
.gift-card .present-img.placeholder.blind {
  position: relative; flex-direction: column; gap: 8px;
  min-height: 180px;
}
.gift-card .present-img.placeholder.blind .wax-seal {
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 35% 30%, var(--gold), var(--gold-strong));
  color: #fff; font-family: var(--serif); font-weight: 700; font-size: 34px;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.35),
    inset 0 -3px 5px rgba(0,0,0,0.18),
    inset 0 3px 5px rgba(255,255,255,0.30);
  border: 2px solid rgba(255,255,255,0.25);
}
.gift-card .present-img.placeholder.blind .ptxt {
  font-size: 13px; line-height: 1.45; color: var(--cream-soft); text-align: center;
}

/* 祝福语（象牙白衬线，温润优雅，居中） */
.gift-card .blessing {
  font-family: var(--serif); font-size: 23px; line-height: 1.6;
  color: var(--cream); margin: var(--s-4) 0 var(--s-2);
  font-weight: 600; letter-spacing: .02em; text-align: center;
}
.gift-card .blessing::after {
  content: ""; display: block; width: 46px; height: 2px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gift-card .sender { font-size: 13px; color: var(--cream-soft); margin-top: var(--s-1); text-align: center; }
.gift-card .sender b { color: var(--cream); font-weight: 600; }

/* 银色蜡封印（右下角品牌印记） */
.gift-card .stamp {
  position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 30%, var(--gold-strong), var(--gold));
  color: #fff; box-shadow: var(--shadow-md); transform: rotate(-8deg); z-index: 3;
}

/* 星屑（装饰，轻微闪烁） */
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sparkles .sp { position: absolute; color: var(--gold); opacity: 0; }
.sparkles .sp:nth-child(1) { top: 12%; left: 10%; animation: twinkle 3.2s ease-in-out infinite; }
.sparkles .sp:nth-child(2) { top: 22%; right: 12%; animation: twinkle 3.8s ease-in-out .4s infinite; }
.sparkles .sp:nth-child(3) { bottom: 26%; left: 8%; animation: twinkle 3.4s ease-in-out .8s infinite; }
.sparkles .sp:nth-child(4) { bottom: 16%; right: 10%; animation: twinkle 3.0s ease-in-out 1.2s infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.6) rotate(0deg); }
  50% { opacity: .85; transform: scale(1) rotate(12deg); }
}

/* 揭卡动画（点「打开收下」触发：开盒弹跳 + 金色光环 + 星屑喷发 + 纸屑） */
.gift-card.opening { animation: cardReveal .9s cubic-bezier(.2,.8,.2,1) both; }
.gift-card.opening::before {
  /* 盒盖缝光晕 */
  animation: seamGlow .9s ease-out both;
}
.gift-card.opening::after {
  content: ""; position: absolute; inset: -12px; border-radius: 30px;
  border: 3px solid var(--gold); opacity: 0; pointer-events: none; z-index: 5;
  animation: ringFlash .9s ease-out both;
}
@keyframes seamGlow {
  0%, 100% { opacity: 1; box-shadow: none; }
  40% { opacity: 1; box-shadow: 0 0 24px rgba(201,205,214,0.55); }
}
@keyframes ringFlash {
  0% { opacity: 0; transform: scale(.90); }
  30% { opacity: .95; }
  100% { opacity: 0; transform: scale(1.10); }
}
@keyframes cardReveal {
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.07) rotate(-1.8deg) translateY(-6px); box-shadow: 0 34px 90px rgba(245,80,62,.36); }
  50% { transform: scale(.98) rotate(.8deg) translateY(2px); }
  100% { transform: scale(1) rotate(0); }
}
.gift-card.opening .sparkles .sp { animation: burst .9s ease-out both; }
@keyframes burst {
  0% { opacity: 0; transform: translateY(8px) scale(.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.2); }
}

/* 惊喜喷发：五彩纸屑（樱花粉/银色/象牙白/缎带粉）从礼盒迸出 */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.confetti { position: absolute; width: 9px; height: 14px; border-radius: 2px; opacity: 0; }
.confetti.i0 { background: var(--coral); }
.confetti.i1 { background: var(--gold); }
.confetti.i2 { background: var(--cream); }
.confetti.i3 { background: var(--ribbon-hi); }
@keyframes confettiPop {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.4); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================================
   礼物信封（替代礼盒 · 收礼方仪式中心）
   拆信封动效：翻盖 rotateX 上翻 → 火漆淡出 → 信纸上滑显现
   ===================================================================== */
.gift-card.envelope {
  padding: 0;
  overflow: hidden;
  perspective: 1100px;
  background: linear-gradient(180deg, var(--surface), var(--surface-warm));
  box-shadow:
    0 22px 50px rgba(68, 61, 73, 0.13),
    0 6px 16px rgba(68, 61, 73, 0.08),
    inset 0 0 0 1px rgba(198, 203, 212, 0.5);
}
.gift-card.envelope::before { display: none; } /* 取消盒盖分界线 */

/* 内部信纸（拆封后上滑显现） */
.gift-card.envelope .env-letter {
  position: relative; z-index: 2;
  padding: 22px var(--s-5) var(--s-5);
  opacity: 0; transform: translateY(20px) scale(.985);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2, .8, .2, 1);
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(135deg, rgba(120, 110, 120, 0.022) 0 1px, transparent 1px 4px),
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}
.gift-card.envelope.open .env-letter { opacity: 1; transform: translateY(0) scale(1); }

/* 信封正面（闭合时覆盖信纸，拆封后淡出） */
.gift-card.envelope .env-front {
  position: absolute; inset: 0; z-index: 3;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 38%),
    linear-gradient(165deg, var(--velvet-bright), var(--velvet-deep));
  overflow: hidden;
  transition: opacity .5s ease .12s;
}
.gift-card.envelope.open .env-front { opacity: 0; pointer-events: none; }

/* 口袋 V 形封口 + 寄件人提示 */
.gift-card.envelope .env-pocket {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.13));
  clip-path: polygon(0 36%, 50% 0, 100% 36%, 100% 100%, 0 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 18px;
}
.gift-card.envelope .env-pocket::before,
.gift-card.envelope .env-pocket::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}
.gift-card.envelope .env-pocket::before { left: 0; }
.gift-card.envelope .env-pocket::after { right: 0; }
.gift-card.envelope .env-from {
  font-size: 13px; color: rgba(255, 255, 255, 0.92); letter-spacing: .03em;
}
.gift-card.envelope .env-from b { color: #fff; font-weight: 600; }

/* 翻盖（顶部三角，拆封时绕顶边向上翻起） */
.gift-card.envelope .env-flap {
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, var(--ribbon-hi), var(--velvet));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform .6s cubic-bezier(.4, .05, .2, 1);
  z-index: 4;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}
.gift-card.envelope.open .env-flap { transform: rotateX(168deg); }

/* 火漆封缄（贴于翻盖，拆封后淡出） */
.gift-card.envelope .env-waxseal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 5; transition: opacity .35s ease; pointer-events: none;
}
.gift-card.envelope.open .env-waxseal { opacity: 0; }
.gift-card.envelope .env-waxseal .wax-seal {
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 35% 30%, var(--gold), var(--gold-strong));
  color: #7C8390; font-family: var(--serif); font-weight: 700; font-size: 30px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6), 0 -1px 1px rgba(0, 0, 0, 0.2);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(198, 203, 212, 0.55),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -3px 5px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(198, 203, 212, 0.85);
}

/* 信纸在浅底上的文字色（替代原礼盒深色面上的奶油色） */
.gift-card.envelope .blessing { color: var(--fg); }
.gift-card.envelope .blessing::after { background: linear-gradient(90deg, transparent, var(--coral-strong), transparent); }
.gift-card.envelope .sender { color: var(--muted); }
.gift-card.envelope .sender b { color: var(--fg); }
.gift-card.envelope .seal { color: var(--coral-strong); }
.gift-card.envelope .seal .ic { color: var(--coral-strong); }
.gift-card.envelope .present-img.placeholder.blind .ptxt { color: var(--muted); }
.gift-card.envelope .stamp { z-index: 6; }

/* 拆封时：去掉礼盒弹跳，保留银色光环 + 星屑喷发 */
.gift-card.envelope.opening { animation: none; }

/* 状态步骤 */
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: var(--s-3); padding: var(--s-3) 0; position: relative; }
.step .dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--meta);
}
.step.done .dot { background: var(--success); border-color: var(--success); color: #fff; }
.step.active .dot { background: var(--coral); border-color: var(--coral); color: #fff; box-shadow: var(--shadow-coral); }
.step .body { padding-top: 3px; }
.step .body .t { font-size: 14px; font-weight: 600; }
.step .body .d { font-size: 12px; color: var(--muted); }
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 36px; bottom: -6px;
  width: 1.5px; background: var(--border);
}
.step.done:not(:last-child)::after { background: var(--success); }

/* 状态标签 */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
}
.tag.ok { background: var(--success-soft); color: var(--success); }
.tag.wait { background: var(--warn-soft); color: var(--warn); }
.tag.ship { background: var(--coral-soft); color: var(--coral); }

/* 列表信息行 */
.info-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.info-row .v { color: var(--fg); font-size: 14px; text-align: right; font-weight: 500; word-break: break-all; }

/* 复制行 */
.copy-row {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--surface-warm); border: 1px dashed var(--border);
  border-radius: var(--r-sm); padding: var(--s-3);
}
.copy-row .url { flex: 1; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-row .btn { min-height: 38px; padding: 0 var(--s-3); font-size: 13px; }

/* 提示框 */
.notice {
  display: flex; gap: var(--s-2); align-items: flex-start;
  background: var(--warn-soft); border: 1px solid #DCE0E7;
  color: #6E7686; border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  font-size: 12.5px; line-height: 1.5;
}
.notice.info { background: var(--coral-soft); border-color: #F6D7E3; color: #B85C82; }
.notice .ic { flex-shrink: 0; margin-top: 1px; }

/* 空态 / 加载 */
.empty { text-align: center; padding: var(--s-10) var(--s-4); color: var(--muted); }
.empty .ic { color: var(--meta); margin-bottom: var(--s-3); }
.center { text-align: center; }
.spinner {
  width: 26px; height: 26px; border: 3px solid var(--border);
  border-top-color: var(--coral); border-radius: 50%;
  animation: spin .8s linear infinite; margin: var(--s-6) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  background: var(--fg); color: #fff; padding: 12px 18px; border-radius: var(--r-pill);
  font-size: 13.5px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 99; max-width: 90%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 页脚说明 */
.footer-note { font-size: 11.5px; color: var(--meta); line-height: 1.6; text-align: center; margin-top: auto; padding-top: var(--s-4); }

/* 段落间距工具 */
.gap-sm { display: flex; flex-direction: column; gap: var(--s-3); }
.gap-md { display: flex; flex-direction: column; gap: var(--s-4); }

/* 发起页：实时预览区 */
.preview-wrap { margin-top: var(--s-2); }
.preview-label {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--muted); margin-bottom: var(--s-3);
}
.preview-label .ic { color: var(--gold-strong); }

/* 分享到抖音 CTA */
.share-cta {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: linear-gradient(180deg, #FEFCFE, var(--surface));
  border: 1.5px solid var(--gold); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--shadow-md);
}
.share-cta .title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.share-cta .title .ic { color: var(--coral); }
.share-cta .sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: -4px; }

/* 收下成功庆祝 */
.celebrate { text-align: center; padding: var(--s-4) 0; }
.celebrate .ring {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--s-3);
  display: flex; align-items: center; justify-content: center;
  background: var(--success-soft); color: var(--success);
  animation: pop .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .gift-card, .gift-card.opening { animation: none; }
  .gift-card.opening::after, .confetti { animation: none !important; display: none; }
  .sparkles .sp, .gift-card.opening .sparkles .sp { animation: none; opacity: .6; }
  .spinner, .celebrate .ring { animation: none; }
  * { transition: none !important; }
}

/* 物流实时轨迹 */
.track-result:empty { display: none; }
.trace-list {
  margin: 0; padding: 0; list-style: none;
  border-left: 2px solid var(--border);
  padding-left: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.trace { position: relative; }
.trace::before {
  content: ""; position: absolute; left: calc(-1 * var(--s-4) - 5px); top: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft);
}
.trace:first-child::before { background: var(--gold-strong); box-shadow: 0 0 0 3px var(--gold-soft); }
.trace-time { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.trace-ctx { display: block; font-size: 13.5px; color: var(--fg); line-height: 1.5; }

/* 微信小程序 web-view 内：隐藏 H5 自带顶部栏，避免与小程序导航栏重复 */
.in-mini .topbar { display: none; }

/* ===== 底部导航 tabbar（统一 H5 常驻） ===== */
.tabbar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 480px;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: rgba(255, 252, 250, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  z-index: 70;
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--meta); text-decoration: none; font-size: 11px;
  transition: color .15s ease;
}
.tabbar a .ic, .tabbar a svg { width: 22px; height: 22px; }
.tabbar a.active { color: var(--coral-strong); font-weight: 600; }

/* ===== 联系客服：浮动按钮 + 底部面板（复用拾光礼匣 Token） ===== */
.support-fab {
  position: fixed;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--coral-strong), var(--coral));
  color: #fff; border: none; cursor: pointer; z-index: 80;
  box-shadow: var(--shadow-coral);
  transition: transform .12s ease, box-shadow .15s ease;
}
.support-fab:active { transform: scale(.94); }
.support-fab .ic, .support-fab svg { width: 24px; height: 24px; }

.support-mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(43, 38, 34, 0.42);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.support-mask.show { opacity: 1; visibility: visible; }

.support-sheet {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-4) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  max-height: 82vh; overflow-y: auto;
}
.support-mask.show .support-sheet { transform: translateY(0); }

.support-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto var(--s-4); flex-shrink: 0; }
.support-head { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: 17px; }
.support-head .ic { color: var(--coral); display: inline-flex; }
.support-close { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: inline-flex; }
.support-close:active { color: var(--fg); }
.support-sub { color: var(--muted); font-size: 13px; line-height: 1.55; margin: var(--s-2) 0 var(--s-4); }

.support-list { display: flex; flex-direction: column; gap: var(--s-3); }
.support-item {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface-warm); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
}
.support-ic { color: var(--coral); display: inline-flex; flex-shrink: 0; }
.support-meta { flex: 1; min-width: 0; }
.support-label { font-size: 12.5px; color: var(--muted); }
.support-value { font-size: 15px; font-weight: 600; color: var(--fg); word-break: break-all; margin-top: 2px; }
.support-copy {
  flex-shrink: 0; background: var(--surface); border: 1px solid var(--border);
  color: var(--coral); width: 38px; height: 38px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.support-copy:active { background: var(--coral-soft); }

body.no-scroll { overflow: hidden; }