/* ============================================================
 * 食用香猪 H5 · 移动端样式 v2（重设计）
 * 设计基调：暖纸底 + 朱砂红 + 金；大字号价格层级；克制的光泽与呼吸动效
 * 适配：rem（1rem = 屏宽/10，封顶 750px），禁止横向滚动，安全区避让
 * ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 品牌 */
  --brand: #ef4523;
  --brand-2: #ff7a45;
  --brand-deep: #c22c0e;
  --brand-soft: #fff2ec;
  --gold: #f7b733;
  --gold-2: #ffd977;
  --red: #e02a2a;
  --green: #12a06a;

  /* 中性（偏暖，不用冷灰） */
  --ink: #1d1512;
  --ink-2: #4b403a;
  --ink-3: #8a7d75;
  --ink-4: #b7aaa1;
  --line: rgba(45, 30, 20, .09);
  --line-2: rgba(45, 30, 20, .05);

  /* 面 */
  --paper: #f6f1e9;
  --card: #ffffff;

  /* 圆角 / 阴影 */
  --r-s: .2rem;
  --r-m: .32rem;
  --r-l: .5rem;
  --r-xl: .64rem;
  --sh-1: 0 .04rem .16rem rgba(85, 52, 32, .05);
  --sh-2: 0 .12rem .48rem rgba(85, 52, 32, .09);
  --sh-3: 0 .24rem .8rem rgba(85, 52, 32, .14);
  --sh-brand: 0 .14rem .44rem rgba(239, 69, 35, .34);

  /* 曲线 */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 37.5px; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #ded5c9;
  color: var(--ink);
  font-size: .36rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; }
b, strong { font-weight: 800; }

/* ---------- 外壳 ---------- */
#app {
  max-width: 750px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  position: relative;
  overflow-x: hidden;
  padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
}
.page { min-height: 100vh; position: relative; }

/* ---------- 页面切换（View Transitions，自动降级） ---------- */
::view-transition-old(root) {
  animation: vtOut .18s ease both;
}
::view-transition-new(root) {
  animation: vtIn .34s var(--ease-out) both;
}
@keyframes vtOut { to { opacity: 0; transform: translateY(-.18rem) scale(.995); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(.34rem) scale(.995); } }

/* 降级：无 View Transitions 时给新页面一个上浮入场 */
.page.enter { animation: pageIn .34s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(.34rem); } to { opacity: 1; transform: none; } }

/* ---------- 滚动入场 ---------- */
.rv { opacity: 0; transform: translateY(.5rem); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .06s; }
.rv-d2 { transition-delay: .12s; }
.rv-d3 { transition-delay: .18s; }

/* ---------- 顶部品牌条 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .22rem .32rem;
  background: rgba(255, 252, 248, .92);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; z-index: 60;
}
.topbar .brand-mini { display: flex; align-items: center; gap: .18rem; font-weight: 800; font-size: .4rem; letter-spacing: -.01em; }
.topbar .brand-mini .dot {
  width: .56rem; height: .56rem; border-radius: .18rem;
  background: linear-gradient(140deg, #ff7a45, var(--brand));
  display: grid; place-items: center; color: #fff; font-size: .28rem; font-weight: 800;
  box-shadow: 0 .04rem .16rem rgba(239, 69, 35, .35);
}
.qual-toggle {
  display: flex; align-items: center; gap: .08rem;
  font-size: .3rem; color: var(--ink-2); font-weight: 600;
  background: #fff; border-radius: 999px; padding: .1rem .3rem;
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: transform .18s var(--ease);
}
.qual-toggle:active { transform: scale(.96); }
.qual-toggle .chev { transition: transform .28s var(--ease); font-size: .22rem; color: var(--ink-3); }
.qual-toggle.open .chev { transform: rotate(180deg); }
.qual-panel {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  background: #fff; transition: grid-template-rows .34s var(--ease);
}
.qual-panel > div { overflow: hidden; }
.qual-panel.open { grid-template-rows: 1fr; border-bottom: 1px solid var(--line-2); }
.qual-panel .inner { padding: .32rem; }
.qual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .24rem; }
.qual-item { border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); background: #fbf8f4; }
.qual-item .ph { height: 2.2rem; }
.qual-item .cap { font-size: .28rem; color: var(--ink-2); padding: .16rem .2rem; }
.qual-tip { margin-top: .2rem; font-size: .28rem; color: var(--ink-3); }

/* ---------- 实时动态条（社会证明） ---------- */
.livebar {
  display: flex; align-items: center; gap: .16rem;
  padding: .18rem .32rem;
  background: linear-gradient(90deg, #fff4ec, #fffaf5 45%, #fff4ec);
  border-bottom: 1px solid rgba(239, 69, 35, .1);
  overflow: hidden;
}
.livebar .pulse {
  flex: 0 0 auto; position: relative; width: .16rem; height: .16rem; border-radius: 50%;
  background: var(--brand);
}
.livebar .pulse::after {
  content: ''; position: absolute; inset: -.08rem; border-radius: 50%;
  background: rgba(239, 69, 35, .35); animation: pulseRing 1.8s var(--ease-out) infinite;
}
@keyframes pulseRing { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.livebar .cnt { flex: 0 0 auto; font-size: .28rem; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.livebar .cnt b { color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.livebar .divi { flex: 0 0 auto; width: 1px; height: .26rem; background: var(--line); }
.marquee { flex: 1; overflow: hidden; position: relative; height: .44rem; }
.marquee-track {
  position: absolute; white-space: nowrap; will-change: transform;
  animation: marquee 34s linear infinite; font-size: .28rem; color: var(--ink-3);
  line-height: .44rem;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 保障标签 ---------- */
.guarantee {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .14rem .16rem;
  overflow: hidden; padding: .26rem .32rem .04rem;
  background: transparent; white-space: nowrap;
}
.g-tag {
  display: flex; align-items: center; justify-content: center; gap: .06rem;
  font-size: .26rem; color: var(--brand-deep);
  background: #fff; border: 1px solid rgba(239, 69, 35, .18); border-radius: 999px;
  padding: .1rem .1rem; font-weight: 700;
  box-shadow: 0 .02rem .1rem rgba(239, 69, 35, .06);
}

/* ---------- 主视觉 ---------- */
.hero { position: relative; background: transparent; padding: 0 .24rem; }
.hero .poster {
  width: 100%; height: 4.7rem; position: relative; overflow: hidden;
  border-radius: var(--r-l);
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 214, 176, .85) 0%, transparent 52%),
    radial-gradient(circle at 78% 76%, rgba(255, 168, 110, .55) 0%, transparent 58%),
    linear-gradient(150deg, #3a2016, #6b3a22 55%, #a2603a);
  box-shadow: var(--sh-3);
}
.hero .poster .grain {
  position: absolute; inset: 0; opacity: .22;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 1px, transparent 1px);
  background-size: 9px 9px;
}
.hero .poster .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 6, .18) 0%, transparent 34%, rgba(24, 12, 6, .58) 100%);
}
.hero .poster .play {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 1.04rem; height: 1.04rem; border-radius: 50%;
  background: rgba(255, 255, 255, .94); display: grid; place-items: center;
  box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3);
  animation: playPulse 2.6s var(--ease-out) infinite;
}
.hero .poster .play::after {
  content: ''; border-left: .26rem solid var(--brand-deep);
  border-top: .16rem solid transparent; border-bottom: .16rem solid transparent; margin-left: .06rem;
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 255, 255, .5); }
  50% { box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3), 0 0 0 .22rem rgba(255, 255, 255, 0); }
}
.hero .poster .hero-tags {
  position: absolute; left: .32rem; top: .3rem; display: flex; flex-wrap: wrap; gap: .1rem;
}
.hero .poster .hero-tags span {
  font-size: .24rem; font-weight: 700; color: #fff;
  background: rgba(20, 10, 6, .42); border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(6px); border-radius: 999px; padding: .06rem .18rem;
}
.hero .poster .poster-tag {
  position: absolute; left: .32rem; bottom: .3rem;
  background: rgba(10, 6, 4, .5); color: rgba(255, 255, 255, .9); font-size: .24rem;
  padding: .08rem .2rem; border-radius: 999px; backdrop-filter: blur(6px);
}
.hero .poster .mute {
  position: absolute; right: .28rem; bottom: .28rem;
  background: rgba(10, 6, 4, .45); color: #fff; border-radius: 50%;
  width: .56rem; height: .56rem; display: grid; place-items: center; font-size: .26rem;
}

/* 主信息卡（压在主视觉上，形成层级） */
.head-block {
  position: relative;
  margin: -.72rem .16rem 0;
  background: #fff;
  border-radius: var(--r-l);
  padding: .36rem .32rem .34rem;
  box-shadow: var(--sh-2);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: .1rem;
  font-size: .26rem; font-weight: 800; color: var(--brand-deep);
  background: linear-gradient(120deg, #fff1e8, #ffe4d6);
  border-radius: 999px; padding: .06rem .22rem; margin-bottom: .18rem;
  letter-spacing: .02em;
}
.hero-kicker::before { content: ''; width: .1rem; height: .1rem; border-radius: 50%; background: var(--brand); }
.title-main {
  font-size: .56rem; line-height: 1.34; font-weight: 900; letter-spacing: -.03em;
}
.title-main em {
  font-style: normal; color: var(--brand);
  font-size: 1.02em; font-variant-numeric: tabular-nums;
}
.price-row { display: flex; align-items: flex-end; gap: .14rem; margin-top: .24rem; }
.price { color: var(--brand); font-weight: 900; font-size: .96rem; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.price small { font-size: .4rem; font-weight: 700; margin-right: .02rem; }
.price-old { color: var(--ink-4); text-decoration: line-through; font-size: .3rem; margin-bottom: .14rem; }
.price-badge {
  margin-left: auto; align-self: center;
  background: linear-gradient(135deg, #ffe083, var(--gold));
  color: #6b3a00; font-size: .3rem; font-weight: 900;
  border-radius: .14rem; padding: .1rem .2rem;
  box-shadow: 0 .06rem .2rem rgba(247, 183, 51, .4);
  transform: rotate(-2deg);
}
.subline { margin-top: .18rem; font-size: .3rem; color: var(--ink-3); }
.promise {
  display: flex; align-items: center; gap: .12rem; margin-top: .24rem;
  padding: .2rem .24rem; border-radius: var(--r-m);
  background: linear-gradient(120deg, #fff8ef, #fff2e6);
  border: 1px solid rgba(239, 69, 35, .1);
  font-size: .28rem; color: var(--ink-2); font-weight: 600;
}
.promise .ico { font-size: .34rem; }

/* ---------- 免单公式 ---------- */
.formula {
  margin: .26rem .24rem 0;
  background: linear-gradient(165deg, #ffffff, #fff7f0);
  border: 1px solid rgba(239, 69, 35, .14);
  border-radius: var(--r-l); padding: .36rem .24rem;
  display: flex; align-items: center; justify-content: space-between; gap: .1rem;
  text-align: center; box-shadow: var(--sh-1); position: relative; overflow: hidden;
}
.formula::before {
  content: ''; position: absolute; left: -30%; top: -80%; width: 60%; height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: rotate(16deg); animation: sweep 4.6s ease-in-out infinite;
}
@keyframes sweep { 0%, 62% { transform: translateX(-40%) rotate(16deg); } 100% { transform: translateX(280%) rotate(16deg); } }
.f-cell { flex: 1; position: relative; z-index: 1; }
.f-cell b { display: block; font-size: .62rem; font-weight: 900; color: var(--brand-deep); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.f-cell span { display: block; font-size: .26rem; color: var(--ink-3); margin-top: .04rem; white-space: nowrap; }
.f-cell.res b {
  color: var(--brand); font-size: .72rem;
  text-shadow: 0 .06rem .18rem rgba(239, 69, 35, .22);
}
.f-op { position: relative; z-index: 1; color: var(--ink-4); font-size: .36rem; font-weight: 800; padding-bottom: .28rem; }

/* ---------- 通用卡片 / 段落 ---------- */
.sec {
  background: #fff; margin: .26rem .24rem 0; padding: .38rem .32rem;
  border-radius: var(--r-l); box-shadow: var(--sh-1);
}
.sec.flush { padding: 0; overflow: hidden; }
.sec-hd { display: flex; align-items: center; gap: .16rem; margin-bottom: .3rem; }
.sec-hd h3 { font-size: .44rem; font-weight: 900; letter-spacing: -.02em; }
.sec-hd .bar {
  width: .12rem; height: .34rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 .04rem .14rem rgba(239, 69, 35, .35);
}
.sec-hd .more { margin-left: auto; font-size: .28rem; color: var(--ink-3); font-weight: 600; }
.sec-hd .pill-num {
  margin-left: auto; font-size: .26rem; font-weight: 800; color: var(--brand-deep);
  background: var(--brand-soft); border-radius: 999px; padding: .04rem .18rem;
}

/* 键值表 */
.kv { display: grid; grid-template-columns: 1.5rem 1fr; row-gap: .26rem; font-size: .34rem; }
.kv dt { color: var(--ink-3); }
.kv dd { color: var(--ink); }
.kv dd b { color: var(--brand); }

/* 步骤卡 */
.steps { display: grid; gap: .18rem; }
.step {
  display: flex; gap: .24rem; align-items: flex-start;
  padding: .26rem .26rem; border-radius: var(--r-m);
  background: linear-gradient(140deg, #fffaf5, #fff);
  border: 1px solid var(--line-2);
}
.step .n {
  flex: 0 0 auto; width: .56rem; height: .56rem; border-radius: .18rem;
  background: linear-gradient(140deg, var(--brand-2), var(--brand)); color: #fff;
  font-size: .3rem; font-weight: 900; display: grid; place-items: center;
  box-shadow: 0 .06rem .18rem rgba(239, 69, 35, .3);
  font-variant-numeric: tabular-nums;
}
.step .c { flex: 1; min-width: 0; }
.step .c h4 { font-size: .36rem; font-weight: 800; line-height: 1.4; }
.step .c p { font-size: .3rem; color: var(--ink-3); margin-top: .06rem; line-height: 1.65; }
.step .c p b { color: var(--brand-deep); }

/* 风险提示 */
.risk {
  margin: .26rem .24rem 0; background: #fff7f6; border: 1px solid rgba(224, 42, 42, .16);
  border-radius: var(--r-l); padding: .3rem .32rem;
  font-size: .3rem; color: #9c2b22; line-height: 1.75;
}
.risk b { color: var(--red); }

/* ---------- 晒单评论 ---------- */
.cmt { display: flex; gap: .24rem; padding: .3rem 0; border-bottom: 1px solid var(--line-2); }
.cmt:last-child { border-bottom: 0; padding-bottom: .06rem; }
.cmt .ava {
  flex: 0 0 auto; width: .8rem; height: .8rem; border-radius: 50%;
  background: linear-gradient(140deg, #ffd0ae, #ffa06a); color: #7a3a00;
  display: grid; place-items: center; font-weight: 800; font-size: .3rem;
  box-shadow: 0 .04rem .14rem rgba(255, 160, 106, .35);
}
.cmt .body { flex: 1; min-width: 0; }
.cmt .who { display: flex; align-items: center; gap: .12rem; font-size: .3rem; }
.cmt .who .name { font-weight: 800; }
.cmt .who .tag {
  font-size: .22rem; font-weight: 700; color: var(--green);
  background: rgba(18, 160, 106, .1); border-radius: .06rem; padding: .02rem .1rem;
}
.cmt .who .time { color: var(--ink-4); font-size: .24rem; margin-left: auto; }
.cmt .txt { margin-top: .1rem; font-size: .32rem; color: var(--ink-2); line-height: 1.7; }
.cmt .imgs { display: flex; gap: .14rem; margin-top: .16rem; }
.cmt .imgs .ph { width: 1.5rem; height: 1.5rem; border-radius: var(--r-s); }

/* 图片占位（渐变 + 纹理，接入实拍图后替换 background-image） */
.ph {
  background:
    radial-gradient(circle at 34% 28%, #ffe4cd, transparent 62%),
    linear-gradient(140deg, #8d5a34, #b87333 55%, #d99a5b);
  position: relative; overflow: hidden;
}
.ph::after {
  content: attr(data-label); position: absolute; inset: auto 0 0 0;
  font-size: .22rem; color: rgba(255, 255, 255, .92); text-align: center;
  background: rgba(0, 0, 0, .26); padding: .04rem 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph.plain::after { display: none; }

/* ---------- 底部下单条 ---------- */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  max-width: 750px; margin: 0 auto;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(16px) saturate(1.5);
  border-top: 1px solid var(--line-2);
  padding: .2rem .3rem calc(.2rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .24rem;
  box-shadow: 0 -.16rem .6rem rgba(85, 52, 32, .1);
}
.buy-bar .info { flex: 0 0 auto; min-width: 0; }
.buy-bar .info .p { font-size: .52rem; font-weight: 900; color: var(--brand); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.buy-bar .info .p small { font-size: .3rem; }
.buy-bar .info .t { font-size: .24rem; color: var(--ink-3); margin-top: .04rem; white-space: nowrap; }
.buy-bar .btn-main { flex: 1; }

/* 主按钮：渐变 + 流光 + 呼吸 */
.btn-main {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .1rem;
  min-height: 1.1rem; padding: 0 .56rem; border-radius: 999px;
  background: linear-gradient(135deg, #ff6a3d 0%, var(--brand) 46%, #cf2f0d 100%);
  color: #fff; font-size: .4rem; font-weight: 900; letter-spacing: .02em;
  box-shadow: var(--sh-brand);
  transition: transform .16s var(--ease), box-shadow .2s;
  isolation: isolate;
}
.btn-main::after {
  content: ''; position: absolute; top: -60%; left: -30%; width: 44%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(18deg); animation: shine 3.4s ease-in-out infinite;
}
@keyframes shine { 0%, 58% { transform: translateX(-120%) rotate(18deg); } 100% { transform: translateX(420%) rotate(18deg); } }
.btn-main:active { transform: scale(.975); box-shadow: 0 .08rem .28rem rgba(239, 69, 35, .3); }
.btn-main.block { width: 100%; }
.btn-main:disabled { background: #d5cec7; box-shadow: none; color: #fff; }
.btn-main.gold {
  background: linear-gradient(135deg, #ffcf5c, var(--gold) 55%, #e8a010);
  color: #6b3a00; box-shadow: 0 .14rem .44rem rgba(247, 183, 51, .4);
}

/* 水波纹 */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .55); transform: scale(0);
  animation: rippleGo .6s var(--ease-out) forwards; z-index: 2;
}
@keyframes rippleGo { to { transform: scale(2.6); opacity: 0; } }
.btn-ghost, .tab, .list-item { position: relative; overflow: hidden; }
.btn-ghost .ripple, .tab .ripple, .list-item .ripple { background: rgba(239, 69, 35, .1); }

/* 首页同时有 导航 + 下单条 */
.buy-bar.above-tab { bottom: calc(1.12rem + env(safe-area-inset-bottom)); }
.page.has-tabbar.has-buybar { padding-bottom: calc(2.86rem + env(safe-area-inset-bottom)); }
.page.has-buybar.has-tabbar .float-btn { bottom: calc(2.9rem + env(safe-area-inset-bottom)); }
.page.has-buybar.has-tabbar .service-fab { bottom: calc(4.05rem + env(safe-area-inset-bottom)); }

/* 悬浮开团按钮 */
.float-btn {
  position: fixed; right: .3rem; bottom: calc(2.5rem + env(safe-area-inset-bottom)); z-index: 68;
  max-width: 750px;
  display: none; align-items: center; gap: .1rem;
  background: linear-gradient(135deg, #ff8a3d, var(--brand)); color: #fff;
  font-size: .3rem; font-weight: 800; padding: .22rem .32rem; border-radius: 999px;
  box-shadow: 0 .14rem .44rem rgba(239, 69, 35, .42);
  animation: floatIn .4s var(--ease) both;
}
.float-btn.show { display: flex; }
@keyframes floatIn { from { opacity: 0; transform: translateY(.24rem) scale(.9); } to { opacity: 1; transform: none; } }

/* 客服 */
.service-fab {
  position: fixed; right: .3rem; bottom: calc(3.5rem + env(safe-area-inset-bottom)); z-index: 66;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: rgba(255, 255, 255, .97); box-shadow: 0 .1rem .36rem rgba(85, 52, 32, .16);
  display: grid; place-items: center; font-size: .38rem;
  border: 1px solid var(--line-2);
}
.service-fab span { display: block; }
.service-fab .lbl { font-size: .2rem; color: var(--brand-deep); font-weight: 800; line-height: 1; }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 72;
  max-width: 750px; margin: 0 auto;
  background: rgba(255, 253, 250, .94); backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--line-2);
  display: flex; padding: .1rem 0 calc(.1rem + env(safe-area-inset-bottom));
}
.tabbar .tab {
  flex: 1; text-align: center; font-size: .24rem; color: var(--ink-3); font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: .02rem;
  padding: .1rem 0; min-height: .96rem; transition: color .2s;
}
.tabbar .tab .i { font-size: .44rem; line-height: 1.1; filter: grayscale(1); opacity: .45; transition: all .24s var(--ease); }
.tabbar .tab.active { color: var(--brand-deep); font-weight: 800; }
.tabbar .tab.active .i { filter: none; opacity: 1; transform: translateY(-.04rem) scale(1.06); }
.page.has-tabbar { padding-bottom: calc(1.24rem + env(safe-area-inset-bottom)); }
.page.has-buybar { padding-bottom: calc(1.66rem + env(safe-area-inset-bottom)); }

/* ---------- 弹窗 ---------- */
.mask {
  position: fixed; inset: 0; z-index: 200; background: rgba(24, 14, 10, .58);
  display: none; align-items: center; justify-content: center; padding: .4rem;
  backdrop-filter: blur(4px);
}
.mask.show { display: flex; animation: fadeIn .22s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 660px; background: #fff; border-radius: var(--r-xl);
  padding: .56rem .44rem .44rem; position: relative;
  animation: popIn .4s var(--ease) both; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 .4rem 1.2rem rgba(30, 16, 8, .3);
}
@keyframes popIn { from { opacity: 0; transform: scale(.9) translateY(.32rem); } to { opacity: 1; transform: none; } }
.modal h2 { font-size: .52rem; line-height: 1.4; font-weight: 900; text-align: center; letter-spacing: -.02em; }
.modal .sub { text-align: center; font-size: .3rem; color: var(--ink-3); margin-top: .1rem; }
.modal .body { margin-top: .34rem; font-size: .36rem; color: var(--ink-2); line-height: 1.8; }
.modal .body b { color: var(--brand); }
.modal .body .pw-list { margin-top: .2rem; display: grid; gap: .1rem; }
.modal .body .pw-s { display: flex; align-items: flex-start; gap: .16rem; line-height: 1.62; }
.modal .body .pw-s .n { flex: 0 0 auto; color: var(--brand); font-weight: 800; }
.modal .body .pw-s .t { flex: 1; min-width: 0; }
.modal .body .pw-s:last-child .t {
  flex: 0 1 auto; font-weight: 700;
  background: linear-gradient(transparent 64%, rgba(247, 183, 51, .38) 64%);
}
.modal .fine {
  margin-top: .34rem; background: #f9f6f2; border-radius: var(--r-m);
  padding: .28rem .32rem; font-size: .28rem; color: #7d7168; line-height: 1.82;
}
.modal .fine strong { color: #5a4f47; }
.modal .acts { margin-top: .4rem; display: grid; gap: .2rem; }
.btn-ghost {
  min-height: 1.02rem; border-radius: 999px; background: #f4efea;
  color: var(--ink-2); font-size: .36rem; font-weight: 700; width: 100%;
  transition: transform .16s var(--ease);
}
.btn-ghost:active { transform: scale(.975); }
.modal .close-x {
  position: absolute; right: .28rem; top: .24rem;
  width: .64rem; height: .64rem; border-radius: 50%; background: #f4efea;
  color: var(--ink-3); font-size: .3rem; display: grid; place-items: center;
}

/* 支付成功专属：顶部金色光环 + 印章 */
.paymaster { text-align: center; position: relative; }
.paymaster .halo {
  width: 1.6rem; height: 1.6rem; margin: 0 auto .28rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe9a8, #f7b733 60%, #e8990c);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 .16rem .5rem rgba(247, 183, 51, .5);
  animation: popIn .5s var(--ease) both;
}
.paymaster .halo::before {
  content: ''; position: absolute; inset: -.18rem; border-radius: 50%;
  border: 2px solid rgba(247, 183, 51, .4); animation: haloPulse 2.2s var(--ease-out) infinite;
}
@keyframes haloPulse { 0% { transform: scale(.9); opacity: .8; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
.paymaster .halo span { font-size: .76rem; line-height: 1; color: #fff; font-weight: 900; text-shadow: 0 .04rem .12rem rgba(150, 90, 0, .35); }
.paymaster h2 { font-size: .5rem; }
.paymaster .hl { color: var(--brand); }
.stamp {
  display: inline-block; margin: .3rem auto 0; padding: .12rem .4rem;
  border: .06rem solid var(--brand); border-radius: .2rem;
  color: var(--brand); font-size: .4rem; font-weight: 900; letter-spacing: .1em;
  transform: rotate(-7deg); animation: stampIn .5s var(--ease) .15s both;
}
@keyframes stampIn {
  0% { opacity: 0; transform: rotate(-7deg) scale(1.9); }
  62% { opacity: 1; transform: rotate(-7deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}
.confetti-canvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 320;
}

/* 底部抽屉 */
.sheet-mask { align-items: flex-end; padding: 0; }
.sheet {
  width: 100%; max-width: 750px; background: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: .44rem .44rem calc(.44rem + env(safe-area-inset-bottom));
  animation: slideUp .38s var(--ease) both; max-height: 88vh; overflow-y: auto;
}
.sheet::before {
  content: ''; display: block; width: .72rem; height: .08rem; border-radius: 999px;
  background: var(--line); margin: -.2rem auto .28rem;
}
@keyframes slideUp { from { transform: translateY(1rem); opacity: .5; } to { transform: none; opacity: 1; } }
.sheet h3 { font-size: .44rem; font-weight: 900; margin-bottom: .3rem; }

/* ---------- 表单 ---------- */
.field { margin-bottom: .26rem; }
.field label { display: block; font-size: .28rem; color: var(--ink-3); margin-bottom: .1rem; font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 1.04rem; border: 1px solid #e6ded5; border-radius: var(--r-m);
  padding: .2rem .32rem; font-size: .36rem; background: #fbf9f6; outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { min-height: 1.6rem; resize: vertical; }
.field input:focus, .field textarea:focus {
  border-color: rgba(239, 69, 35, .5); background: #fff;
  box-shadow: 0 0 0 .06rem rgba(239, 69, 35, .1);
}
.field .hint { font-size: .24rem; color: var(--ink-4); margin-top: .08rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; }
.code-row { display: flex; gap: .2rem; }
.code-row input { flex: 1; }
.code-row .btn-code {
  flex: 0 0 auto; min-width: 2.3rem; border-radius: var(--r-m); background: #fff3ec;
  color: var(--brand-deep); font-size: .3rem; font-weight: 700; border: 1px solid rgba(239, 69, 35, .2);
}
.code-row .btn-code:disabled { color: var(--ink-4); background: #f4f0eb; border-color: var(--line); }

/* ---------- 订单 / 列表 ---------- */
.list-item {
  background: #fff; border-radius: var(--r-l); padding: .34rem;
  margin-bottom: .22rem; box-shadow: var(--sh-1); border: 1px solid var(--line-2);
}
.li-hd { display: flex; align-items: center; justify-content: space-between; font-size: .28rem; color: var(--ink-3); }
.li-hd .no { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .26rem; }
.badge { font-size: .24rem; font-weight: 800; padding: .04rem .16rem; border-radius: .08rem; }
.badge.wait { background: #f2efeb; color: var(--ink-2); }
.badge.ship { background: #e8f0ff; color: #2563eb; }
.badge.recv { background: #e6f6ee; color: var(--green); }
.badge.review { background: #fff3dc; color: #a96500; }
.badge.paid { background: #e6f6ee; color: var(--green); }
.badge.void { background: #fdecea; color: var(--red); }
.li-bd { margin-top: .22rem; display: flex; gap: .24rem; }
.li-bd .thumb { flex: 0 0 auto; width: 1.36rem; height: 1.36rem; border-radius: var(--r-s); }
.li-bd .meta { flex: 1; min-width: 0; }
.li-bd .name { font-size: .36rem; font-weight: 800; }
.li-bd .desc { font-size: .27rem; color: var(--ink-3); margin-top: .04rem; }
.li-bd .amt { font-size: .4rem; font-weight: 900; color: var(--brand); }

.empty { text-align: center; padding: 1.6rem .32rem; color: var(--ink-4); font-size: .34rem; }
.empty .ico { font-size: 1.1rem; opacity: .3; margin-bottom: .2rem; }

/* ---------- 进度页 ---------- */
.progress-hero {
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 214, 160, .22), transparent 46%),
    linear-gradient(160deg, #2a1710, #4a2413 46%, #7d3a15);
  color: #fff; padding: .5rem .4rem .84rem; position: relative; overflow: hidden;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.progress-hero::after {
  content: ''; position: absolute; right: -1.4rem; top: -1.6rem;
  width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 120, .18), transparent 70%);
}
.status-pill {
  display: inline-flex; align-items: center; gap: .08rem;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px; padding: .08rem .26rem; font-size: .28rem; font-weight: 700;
  backdrop-filter: blur(6px);
}
.progress-hero h1 { font-size: .56rem; font-weight: 900; margin-top: .22rem; line-height: 1.3; letter-spacing: -.02em; }
.progress-hero .desc { font-size: .3rem; opacity: .82; margin-top: .1rem; }

/* 环形进度 */
.ring-wrap { display: flex; align-items: center; gap: .36rem; margin-top: .4rem; position: relative; z-index: 1; }
.ring { position: relative; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bgc { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 10; }
.ring .fgc {
  fill: none; stroke: url(#ringGrad); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: var(--c); stroke-dashoffset: var(--c);
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
.ring .mid {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.ring .mid b { display: block; font-size: .56rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ring .mid span { display: block; font-size: .22rem; opacity: .75; margin-top: .04rem; }
.ring-side { flex: 1; min-width: 0; }
.ring-side .big { font-size: .38rem; font-weight: 800; line-height: 1.4; }
.ring-side .big em { font-style: normal; color: var(--gold-2); font-size: 1.14em; }
.ring-side .sm { font-size: .28rem; opacity: .75; margin-top: .1rem; line-height: 1.6; }
.ring-side .mini-bar { margin-top: .2rem; height: .12rem; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.ring-side .mini-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), #fff); width: 0; transition: width 1.1s var(--ease-out); }

.countdown { display: flex; gap: .14rem; justify-content: center; margin-top: .34rem; position: relative; z-index: 1; }
.countdown .u {
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .18rem; padding: .16rem .2rem;
  text-align: center; min-width: .94rem; backdrop-filter: blur(6px);
}
.countdown .u b { display: block; font-size: .5rem; line-height: 1.1; font-variant-numeric: tabular-nums; font-weight: 900; }
.countdown .u span { font-size: .22rem; opacity: .8; }

.share-link {
  background: #f9f6f2; border: 1px solid var(--line-2); border-radius: var(--r-s);
  padding: .22rem .26rem; font-size: .28rem; color: var(--ink-2); word-break: break-all;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* 分享卡片预览 */
.card-preview {
  border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line);
  background: #fff; margin-top: .26rem;
}
.card-preview .top { height: 2.2rem; }
.card-preview .bot { padding: .22rem .26rem; }
.card-preview .bot .t { font-size: .34rem; font-weight: 800; line-height: 1.45; }
.card-preview .bot .d { font-size: .26rem; color: var(--ink-3); margin-top: .06rem; }

/* 时间轴 */
.timeline { padding-left: .16rem; }
.tl { display: flex; gap: .26rem; padding-bottom: .34rem; position: relative; }
.tl:not(:last-child)::before {
  content: ''; position: absolute; left: .1rem; top: .4rem; bottom: 0; width: 2px;
  background: rgba(45, 30, 20, .12);
}
.tl .dot {
  flex: 0 0 auto; width: .24rem; height: .24rem; border-radius: 50%;
  background: #e2dad1; margin-top: .16rem; position: relative; z-index: 1;
  transition: all .3s var(--ease);
}
.tl.done .dot { background: var(--green); box-shadow: 0 0 0 .08rem rgba(18, 160, 106, .12); }
.tl.cur .dot { background: var(--brand); box-shadow: 0 0 0 .08rem rgba(239, 69, 35, .14); animation: pulseDot 1.8s var(--ease-out) infinite; }
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 .08rem rgba(239, 69, 35, .14); }
  50% { box-shadow: 0 0 0 .18rem rgba(239, 69, 35, .02); }
}
.tl .c { flex: 1; }
.tl .c .t { font-size: .34rem; font-weight: 700; }
.tl.done .c .t, .tl.cur .c .t { color: var(--ink); }
.tl .c .d { font-size: .27rem; color: var(--ink-3); }

/* ---------- 规则页 ---------- */
.rules-head {
  background: linear-gradient(160deg, #2a1710, #4a2413 60%, #7d3a15);
  color: #fff; padding: .56rem .44rem .6rem;
  border-radius: 0 0 var(--r-xl) var(--r-xl); position: relative; overflow: hidden;
}
.rules-head h1 { font-size: .52rem; font-weight: 900; letter-spacing: -.02em; }
.rules-head p { font-size: .3rem; opacity: .72; margin-top: .12rem; }
.rule-item {
  background: #fff; padding: .38rem .38rem; border-bottom: 1px solid var(--line-2);
  margin: 0 .24rem .18rem; border-radius: var(--r-m); box-shadow: var(--sh-1);
}
.rule-item h4 { font-size: .38rem; font-weight: 900; display: flex; gap: .16rem; align-items: baseline; }
.rule-item h4 .idx { color: var(--brand); font-size: .3rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.rule-item p, .rule-item li { font-size: .32rem; color: var(--ink-2); line-height: 1.9; }
.rule-item p + p { margin-top: .1rem; }
.rule-item ul { padding-left: .36rem; margin-top: .1rem; }
.rule-item .warn { color: var(--red); font-weight: 700; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.9);
  background: rgba(26, 16, 12, .92); color: #fff; font-size: .34rem;
  padding: .24rem .44rem; border-radius: .24rem; z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  max-width: 80vw; text-align: center; line-height: 1.5;
  backdrop-filter: blur(8px); box-shadow: 0 .16rem .5rem rgba(0, 0, 0, .3);
}
#toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- 顶部返回 ---------- */
.nav-bar {
  display: flex; align-items: center; gap: .2rem; padding: .2rem .3rem;
  background: rgba(255, 253, 250, .94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; z-index: 60;
}
.nav-bar .back {
  width: .72rem; height: .72rem; border-radius: 50%; background: #f4efea;
  display: grid; place-items: center; font-size: .38rem; color: var(--ink-2);
  transition: transform .16s var(--ease);
}
.nav-bar .back:active { transform: scale(.92); }
.nav-bar h2 { font-size: .38rem; font-weight: 900; }

/* ---------- 个人中心 ---------- */
.me-head {
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 214, 160, .22), transparent 46%),
    linear-gradient(160deg, #2a1710, #4a2413 50%, #7d3a15);
  color: #fff; padding: .52rem .4rem 1.1rem; position: relative;
  border-radius: 0 0 var(--r-xl) var(--r-xl); overflow: hidden;
}
.me-head .ava {
  width: 1.24rem; height: 1.24rem; border-radius: 50%;
  background: linear-gradient(140deg, #ffb27a, #ef4523);
  border: 2px solid rgba(255, 255, 255, .5); display: grid; place-items: center;
  font-size: .52rem; font-weight: 900;
  box-shadow: 0 .12rem .4rem rgba(0, 0, 0, .28);
}
.me-head .nm { font-size: .46rem; font-weight: 900; margin-top: .18rem; letter-spacing: -.02em; }
.me-head .ph2 { font-size: .28rem; opacity: .78; margin-top: .04rem; }
.me-stats {
  margin: -.74rem .24rem 0; background: #fff; border-radius: var(--r-l);
  box-shadow: var(--sh-2); display: flex; padding: .32rem 0; position: relative; z-index: 2;
}
.me-stats .it { flex: 1; text-align: center; }
.me-stats .it b { display: block; font-size: .46rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.me-stats .it span { font-size: .24rem; color: var(--ink-3); }
.me-stats .it + .it { border-left: 1px solid var(--line-2); }

.cell {
  display: flex; align-items: center; gap: .2rem; background: #fff;
  padding: .34rem .3rem; border-bottom: 1px solid var(--line-2); font-size: .36rem;
  transition: background .18s;
}
.cell:last-child { border-bottom: 0; }
.cell:active { background: #fbf7f2; }
.cell .i { width: .52rem; text-align: center; font-size: .38rem; }
.cell .r { margin-left: auto; color: var(--ink-3); font-size: .3rem; display: flex; align-items: center; gap: .14rem; }
.switch { width: .9rem; height: .5rem; border-radius: 999px; background: #e2dad1; position: relative; transition: background .24s; }
.switch::after {
  content: ''; position: absolute; width: .42rem; height: .42rem; border-radius: 50%;
  background: #fff; top: .04rem; left: .04rem; transition: transform .24s var(--ease);
  box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .2);
}
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(.4rem); }

.sms-list .item { background: #fff; padding: .32rem; border-bottom: 1px solid var(--line-2); }
.sms-list .item .t { font-size: .34rem; font-weight: 800; display: flex; justify-content: space-between; }
.sms-list .item .t span { font-weight: 400; font-size: .24rem; color: var(--ink-4); }
.sms-list .item .d { font-size: .3rem; color: var(--ink-2); margin-top: .08rem; line-height: 1.7; }

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
}

/* 支付回跳结果页：加载转圈 */
.spin{width:.72rem;height:.72rem;margin:0 auto;border-radius:50%;
  border:.06rem solid rgba(239,69,35,.15);border-top-color:var(--brand);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}