/* ============================================================
   智礼帮 · 现代轻奢风设计系统
   配色：近黑墨绿底 / 暖奶白字 / 暖金强调 + 墨绿次强调
   动效：指数缓动 ease-out，仅 transform / opacity；
         hover 时一道金光扫过
   ============================================================ */

:root{
  /* 色彩 —— 现代轻奢 */
  --bg: #0E1512;            /* 近黑墨绿 */
  --bg-2: #14201B;
  --surface: #18231E;       /* 卡片底 */
  --surface-2: #1F2C26;     /* 次级底 */
  --ink: #F3ECDC;           /* 暖奶白（主文） */
  --ink-soft: #C7BFAE;      /* 次级文 */
  --muted: #8A8878;         /* 弱化文 */
  --line: #2C3A33;          /* 暗金分隔线 */
  --gold: #C9A24B;          /* 主强调：暖金 */
  --gold-deep: #A8842F;
  --gold-soft: #E7CF8E;     /* 亮金 */
  --emerald: #2E4A3C;       /* 次强调：墨绿 */
  --emerald-soft: #3C5C4B;

  --shadow: 0 30px 60px -28px rgba(0,0,0,.75);
  --shadow-sm: 0 10px 26px -16px rgba(0,0,0,.6);
  --gold-line: 0 0 0 1px rgba(201,162,75,.28), 0 14px 34px -20px rgba(201,162,75,.35);
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 460px;
  font-synthesis: none;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 85% -10%, #1B2A22 0%, transparent 55%),
    radial-gradient(120% 90% at -10% 110%, #161F1A 0%, transparent 50%),
    var(--bg);
  display:flex; justify-content:center; align-items:stretch;
  min-height:100dvh;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family:"Noto Serif SC", "Playfair Display", serif; font-weight:600; letter-spacing:.01em; margin:0; }
em{ font-style: italic; font-family:"Playfair Display", serif; color: var(--gold-soft); }

/* 手机外壳 */
.phone{
  position: relative;
  width:100%; max-width: var(--maxw);
  background: var(--bg);
  min-height:100dvh;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.6);
}
@media(min-width:520px){
  .phone{ min-height: min(900px, 96dvh); margin: 2vh 0; border-radius: 34px; border:1px solid var(--line); box-shadow: 0 50px 120px -40px rgba(0,0,0,.8); }
}

/* 顶栏 */
.appbar{
  position: sticky; top:0; z-index: 30;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 12px;
  background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 78%, transparent));
  backdrop-filter: blur(10px);
}
.brand{ display:flex; align-items:center; gap:9px; }
.brand__logo{ height:40px; width:auto; display:block; }
.add-home{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: var(--gold); font-size:12.5px; font-weight:600; font-family:inherit;
  padding:6px 11px; border-radius:999px; cursor:pointer;
  transition: transform .3s var(--ease), background .3s, border-color .3s;
}
.add-home svg{ width:14px; height:14px; }
.add-home:active{ transform: scale(.95); }
.add-home:hover{ background: color-mix(in srgb, var(--gold) 18%, transparent); }

/* 舞台与视图切换 */
.stage{ position:relative; flex:1; overflow:hidden; }
.view{
  position:absolute; inset:0;
  padding: 6px 20px calc(env(safe-area-inset-bottom) + 28px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; transform: translateY(14px);
  pointer-events:none;
  transition: opacity .5s var(--ease), transform .55s var(--ease);
}
.view.is-active{ opacity:1; transform:none; pointer-events:auto; }
.view--detail{ padding:0; }

/* 表单视图：中间区域绝对填充并滚动，底部 CTA 用绝对定位钉死在视图底部
   （不随内容滚动、不依赖 sticky），按钮下方绝无内容；上方以渐隐+底色投影遮罩 */
.view--form{ display:block; overflow:hidden; padding:0; }
.form-scroll{ position:absolute; top:0; left:0; right:0; bottom:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 20px 100px; }

/* ---------- 场景选择 ---------- */
.hero{ position:relative; padding: 24px 4px 10px; }
.hero__mark{ position:absolute; right:-4px; top:-18px; font-family:"Noto Serif SC",serif; font-weight:700; font-size:140px; line-height:1; color: rgba(201,162,75,.07); z-index:0; pointer-events:none; user-select:none; }
.hero__eyebrow, .hero__title, .hero__sub, .hero__rule{ position:relative; z-index:1; }
.hero__eyebrow{ margin:0 0 12px; font-size:12.5px; letter-spacing:.24em; color: var(--gold); text-transform:uppercase; }
.hero__title{ font-size: clamp(27px, 8.4vw, 35px); line-height:1.2; color:var(--ink); }
.hero__sub{ margin:14px 0 0; color: var(--ink-soft); font-size:13.5px; line-height:1.75; max-width:40ch; }
.hero__rule{ margin:22px 0 2px; height:1px; background:linear-gradient(90deg, transparent, rgba(201,162,75,.55), transparent); position:relative; }
.hero__rule::after{ content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%) rotate(45deg); background:var(--gold); box-shadow:0 0 10px rgba(201,162,75,.6); }
.hero__foot{ margin:22px 4px 6px; font-size:12px; color: var(--muted); text-align:center; }

.scene-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:13px;
  margin-top:20px;
}
.scene-card{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  padding:16px 15px 15px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:10px; min-height:120px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  animation: rise .6s var(--ease) both;
}
/* 右下角场景色阴影：锚定在卡片右下角(right:0;bottom:0)，完全在卡片内部，
   不向中间缝隙/屏幕边缘溢出 → 左右两列对称；用各场景 --card-accent 做柔和角晕，填补右侧空白。 */
.scene-card::after{
  content:""; position:absolute; right:0; bottom:0;
  width:64%; height:68%;
  background: radial-gradient(135% 135% at 100% 100%, color-mix(in srgb,var(--card-accent) 36%, transparent), transparent 64%);
  pointer-events:none;
}
.scene-card:active{ transform: scale(.97); }
@media (hover: hover){
  .scene-card:hover{ transform: translateY(-4px); border-color: color-mix(in srgb,var(--gold) 45%, var(--line)); }
  .scene-card:hover::after{ opacity:.55; }
}
.scene-card__ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background: color-mix(in srgb,var(--card-accent) 16%, var(--surface)); color: var(--card-accent); border:1px solid color-mix(in srgb,var(--card-accent) 30%, transparent); }
.scene-card__ic svg{ width:21px; height:21px; }
.scene-card__name{ font-family:"Noto Serif SC",serif; font-weight:600; font-size:17px; color:var(--ink); }
.scene-card__desc{ font-size:12px; color: var(--muted); line-height:1.5; margin-top:auto; }

/* ---------- 统一返回按钮（图标胶囊，与商品列表页一致） ---------- */
.backbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink); font-family:inherit; font-size:15px; font-weight:600;
  padding:10px; margin:0;
  border-radius:999px; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  transition:transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s;
}
.backbtn svg{ width:20px; height:20px; color:var(--gold); flex:none; }
.backbtn span{ line-height:1; letter-spacing:.03em; }
.backbtn:active{ transform:scale(.95); background:color-mix(in srgb,var(--gold) 12%, var(--surface-2)); }
.backbtn--bare{ padding:10px; }
.form-head{ display:flex; align-items:center; gap:10px; padding:14px 2px 18px; }
.form-head__icon{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb,var(--card-accent) 16%, var(--surface)); color:var(--card-accent); border:1px solid color-mix(in srgb,var(--card-accent) 30%, transparent); flex:none; }
.form-head__icon svg{ width:26px; height:26px; }
.form-head__title{ font-size:21px; color:var(--ink); }
.form-head__hint{ margin:3px 0 0; font-size:13px; color:var(--muted); }

.form{ display:flex; flex-direction:column; gap:22px; }
.field{ display:flex; flex-direction:column; gap:10px; }
.field.two{ flex-direction:row; gap:14px; }
.field.two > div{ flex:1; display:flex; flex-direction:column; gap:10px; }
.field__label{ font-size:13.5px; font-weight:600; color:var(--ink); display:flex; align-items:baseline; gap:8px; }
.field__opt{ font-size:11px; font-weight:400; color:var(--muted); }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); font-size:13.5px; font-family:inherit;
  padding:11px 16px; border-radius:999px; cursor:pointer;
  transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s;
  user-select:none;
}
.chip:active{ transform: scale(.94); }
.chip.is-on{
  background: color-mix(in srgb,var(--gold) 16%, var(--surface));
  border-color: var(--gold); color: var(--gold-soft); font-weight:600;
  box-shadow: 0 0 0 3px rgba(201,162,75,.12);
}
.input{
  width:100%; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-sm); padding:13px 14px; font-family:inherit; font-size:14px; color:var(--ink);
  transition: border-color .3s, box-shadow .3s;
}
.input::placeholder{ color:var(--muted); }
.input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,162,75,.16); }
.input--ghost{ background:var(--surface-2); border-color:transparent; }

/* 多选项横向滑动行（节省页面高度；溢出渐隐 + 吸附） */
.chip-scroll{ position:relative; }
.chip-scroll::after{
  content:""; position:absolute; top:0; right:0; width:34px; height:100%;
  background:linear-gradient(to right, transparent, var(--bg) 88%);
  pointer-events:none; border-radius:0 999px 999px 0;
}
.chip-row--scroll{
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:2px 32px 4px 2px; scrollbar-width:none;
}
.chip-row--scroll::-webkit-scrollbar{ display:none; }
.chip-row--scroll .chip{ flex:none; scroll-snap-align:start; }

/* 预算双滑块 */
.budget{ display:flex; flex-direction:column; gap:13px; padding:14px 14px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:linear-gradient(160deg,var(--surface),var(--surface-2)); }
.budget__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.budget__val{ font-size:14px; color:var(--gold-soft); font-weight:700; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
.budget__dash{ color:var(--muted); font-style:normal; font-weight:400; }
.budget__slider{ position:relative; height:36px; display:flex; align-items:center; margin:2px 2px 0; }
.budget__track{ position:absolute; left:0; right:0; height:5px; border-radius:999px; background:var(--surface-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); }
.budget__fill{ position:absolute; height:5px; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); box-shadow:0 0 12px rgba(201,162,75,.45); }
.budget__range{ position:absolute; left:0; right:0; width:100%; height:36px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none; }
.budget__range::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:24px; height:24px; border-radius:50%; background:var(--surface); border:2px solid var(--gold); box-shadow:0 4px 12px rgba(0,0,0,.5), 0 0 0 4px rgba(201,162,75,.14); cursor:pointer; transition: transform .2s var(--ease); }
.budget__range::-webkit-slider-thumb:active{ transform:scale(1.14); }
.budget__range::-moz-range-thumb{ pointer-events:auto; width:22px; height:22px; border-radius:50%; background:var(--surface); border:2px solid var(--gold); cursor:pointer; }
.budget__range::-webkit-slider-runnable-track{ background:transparent; }
.budget__range::-moz-range-track{ background:transparent; }
.budget__scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); padding:0 2px; }

/* 表单底部 CTA：绝对钉在视图底部，不随内容滚动；
   不透明底色 + 上方向外底色投影 + 渐隐过渡，盖住按钮上方邻近内容 */
.form-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  padding:14px 20px calc(env(safe-area-inset-bottom) + 14px);
  background: var(--bg);
  box-shadow: 0 -26px 34px 22px var(--bg);
}
.form-foot::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:120px;
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 30%, transparent 100%);
  pointer-events:none;
}
.form-foot .cta{ width:100%; padding:18px; font-size:16.5px; letter-spacing:.05em; }

.cta{
  margin-top:6px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  color:#1A140A; font-family:inherit; font-size:16px; font-weight:700; letter-spacing:.02em;
  padding:16px; border-radius:16px; box-shadow: 0 16px 34px -14px rgba(201,162,75,.6);
  transition: transform .3s var(--ease), box-shadow .3s, filter .3s;
  position:relative; overflow:hidden;
}
.cta svg{ width:19px; height:19px; transition: transform .4s var(--ease); }
.cta:active{ transform: scale(.98); }
@media (hover: hover){
.cta:hover{ box-shadow: 0 22px 40px -14px rgba(201,162,75,.75); }
.cta:hover svg{ transform: translateX(4px); }
}
.cta::before{ content:""; position:absolute; top:0; left:-70%; width:55%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); transition:left .7s var(--ease); }
@media (hover: hover){
.cta:hover::before{ left:120%; }
}

/* ---------- 思考中 ---------- */
.view--thinking{ display:grid; place-items:center; background: radial-gradient(120% 90% at 50% 32%, var(--bg-2), var(--bg) 72%); }
.think{ text-align:center; padding:0 24px; }
.think__orbit{ position:relative; width:74px; height:74px; margin:0 auto 26px; }
.think__orbit span{ position:absolute; inset:0; border-radius:50%; border:2px solid transparent; border-top-color:var(--gold); animation: spin 1.1s linear infinite; }
.think__orbit span:nth-child(2){ inset:9px; border-top-color:var(--gold-soft); animation-duration:1.5s; animation-direction:reverse; }
.think__orbit span:nth-child(3){ inset:18px; border-top-color:var(--emerald-soft); animation-duration:.9s; }
.think__title{ font-size:19px; margin:0 0 12px; color:var(--ink); }
.think__stream{ font-size:14px; color:var(--ink-soft); line-height:1.8; min-height:3.2em; }
.think__stream b{ color:var(--gold-soft); font-weight:600; }

/* ---------- 推荐结果 ---------- */
.results-head{ display:flex; align-items:center; gap:10px; padding:14px 2px 6px; }
.results-head__txt{ flex:1; }
.results-head__scene{ margin:0; font-size:12.5px; color:var(--gold); letter-spacing:.04em; }
.results-head__title{ font-size:22px; margin:3px 0 0; color:var(--ink); }
.reco-reason{ margin:6px 2px 16px; font-size:13.5px; color:var(--ink-soft); line-height:1.75;
  background: linear-gradient(160deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-left:3px solid var(--gold);
  padding:12px 14px; border-radius: var(--r-sm); }

.cards{ display:flex; flex-direction:column; gap:14px; }
.card{
  display:flex; gap:14px; padding:12px; cursor:pointer;
  background: linear-gradient(160deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--r-md);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
  animation: rise .55s var(--ease) both;
}
.card:active{ transform: scale(.99); }
@media (hover: hover){
.card:hover{ transform: translateY(-3px); border-color: color-mix(in srgb,var(--gold) 45%, var(--line)); box-shadow: var(--gold-line); }
}
.card__cover{ width:92px; height:92px; border-radius:13px; flex:none; position:relative; overflow:hidden;
  background: color-mix(in srgb,var(--card-accent) 16%, var(--surface)); border:1px solid color-mix(in srgb,var(--card-accent) 28%, transparent); }
.card__cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.card__title{ font-size:14.5px; font-weight:600; line-height:1.45; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__meta{ margin-top:7px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.card__shop{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:9em; }
.card__price{ margin-top:auto; display:flex; align-items:baseline; gap:7px; }
.card__now{ color:var(--gold-soft); font-weight:700; font-size:17px; font-variant-numeric:tabular-nums; }
.card__now::before{ content:"¥"; font-size:12px; margin-right:1px; }
.card__old{ color:var(--muted); text-decoration:line-through; font-size:12px; }
.card__tag{ align-self:flex-start; margin-top:8px; font-size:11px; color:var(--gold-soft);
  background: color-mix(in srgb,var(--gold) 14%, var(--surface)); padding:3px 8px; border-radius:999px; }
.card__why{ margin-top:7px; font-size:12px; color:var(--ink-soft); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.results-foot{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 0 30px; }
/* 无限滚动：加载中指示 */
.reco-loading{ display:inline-flex; align-items:center; gap:9px; color:var(--ink-soft); font-size:13px; letter-spacing:.03em; }
.reco-loading[hidden]{ display:none; }
.reco-loading__spin{ width:15px; height:15px; border-radius:50%;
  border:2px solid color-mix(in srgb,var(--gold) 32%, transparent); border-top-color:var(--gold);
  animation:reco-spin .7s linear infinite; }
@keyframes reco-spin{ to{ transform:rotate(360deg); } }
/* 到底提示 */
.reco-end{ color:var(--muted); font-size:12.5px; letter-spacing:.05em; margin:0; }
.reco-end[hidden]{ display:none; }
/* 滚动哨兵：仅用于 IntersectionObserver 触发，无视觉 */
.reco-sentinel{ width:100%; height:1px; }

/* ---------- 详情 ---------- */
.detail-scroll{ position:absolute; inset:0; overflow-y:auto; padding-bottom:96px; }
.detail-gallery{ position:relative; height:300px; background:var(--bg-2); overflow:hidden; }
.detail-gallery__track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.detail-gallery__track::-webkit-scrollbar{ display:none; }
.detail-gallery__slide{ flex:0 0 100%; height:100%; background-size:cover; background-position:center; background-color:var(--bg-2); scroll-snap-align:center; }
.detail-gallery__dots{ position:absolute; left:0; right:0; bottom:12px; z-index:3; display:flex; justify-content:center; gap:6px; }
.detail-gallery__dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); transition:width .3s var(--ease), background .3s; }
.detail-gallery__dot.is-on{ width:16px; border-radius:3px; background:#fff; }
.detail-hero__badge{ position:absolute; left:16px; top:16px; z-index:4; background:rgba(20,26,22,.7); color:var(--gold-soft);
  font-size:11px; padding:5px 10px; border-radius:999px; font-weight:600; backdrop-filter:blur(4px); border:1px solid rgba(201,162,75,.3); }
.detail-body{ padding:20px 20px 0; }
.detail-title{ font-size:19px; line-height:1.5; font-family:"Noto Serif SC",serif; font-weight:600; color:var(--ink); }
.detail-shop{ display:flex; align-items:center; gap:7px; margin-top:12px; font-size:13px; color:var(--muted); }
.detail-shop__dot{ width:18px; height:18px; border-radius:5px; background:var(--surface-2); display:grid; place-items:center; font-size:10px; color:var(--ink-soft); }
.detail-price{ display:flex; align-items:baseline; gap:10px; margin:16px 0 4px; }
.detail-price__now{ color:var(--gold-soft); font-weight:700; font-size:28px; font-variant-numeric:tabular-nums; }
.detail-price__now::before{ content:"¥"; font-size:16px; }
.detail-price__old{ color:var(--muted); text-decoration:line-through; font-size:13px; }
.detail-price__coupon{ font-size:12px; color:#1A140A; background:linear-gradient(135deg,var(--gold-soft),var(--gold)); padding:3px 8px; border-radius:6px; font-weight:600; }
.detail-stats{ display:flex; gap:18px; margin:14px 0; font-size:12.5px; color:var(--ink-soft); }
.detail-stats b{ color:var(--ink); font-weight:700; }
.detail-sec{ margin-top:18px; }
.detail-sec__h{ font-size:13.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.detail-sec__h::before{ content:""; width:3px; height:14px; border-radius:2px; background:var(--gold); }
.detail-sec__p{ font-size:14px; color:var(--ink-soft); line-height:1.8; margin:0; }
.detail-callout{ margin:14px 0 0; padding:14px 15px; border:1px solid color-mix(in srgb,var(--gold) 35%, var(--line)); border-radius:var(--r-sm); background:linear-gradient(160deg, color-mix(in srgb,var(--gold) 10%, var(--surface)), var(--surface)); }
.detail-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.detail-tags span{ font-size:12px; color:var(--gold-soft); background:color-mix(in srgb,var(--gold) 12%,var(--surface)); padding:5px 11px; border-radius:999px; }
.detail-imgs{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.detail-img{ width:100%; display:block; border-radius:var(--r-sm); background:var(--bg-2); }
.ad-flag{ display:inline-block; font-size:10.5px; color:var(--muted); border:1px solid var(--line); padding:1px 6px; border-radius:5px; margin-left:6px; vertical-align:middle; }

.detail-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; gap:14px; padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(transparent, var(--bg) 32%);
  border-top:1px solid var(--line);
}
.detail-bar__price{ flex:none; display:flex; flex-direction:column; }
.detail-bar__now{ color:var(--gold-soft); font-weight:700; font-size:20px; font-variant-numeric:tabular-nums; }
.detail-bar__now::before{ content:"¥"; font-size:12px; }
.detail-bar__coupon{ font-size:11px; color:var(--muted); }
.cta--buy{ flex:1; margin:0; }
.ic-cart{ width:18px; height:18px; }

/* 详情页：悬浮胶囊，沿用同一金色箭头图标 */
.backbtn--float{ position:absolute; left:12px; top:calc(env(safe-area-inset-top) + 10px); z-index:6;
  width:auto; height:auto; padding:9px 11px; border-radius:999px;
  background:rgba(18,24,20,.66); backdrop-filter:blur(6px);
  box-shadow:var(--shadow-sm); border:1px solid rgba(201,162,75,.4); }
.backbtn--float svg{ color:var(--gold); }

/* ---------- 底部弹层 ---------- */
.sheet{ position:absolute; inset:0; z-index:50; visibility:hidden; }
.sheet.is-open{ visibility:visible; }
.sheet__mask{ position:absolute; inset:0; background:rgba(6,9,8,.6); opacity:0; transition:opacity .4s var(--ease); }
.sheet.is-open .sheet__mask{ opacity:1; }
.sheet__panel{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); border-radius:24px 24px 0 0;
  padding:10px 20px calc(env(safe-area-inset-bottom) + 22px);
  transform: translateY(100%); transition: transform .5s var(--ease);
  box-shadow: 0 -20px 50px -20px rgba(0,0,0,.7);
  border-top:1px solid color-mix(in srgb,var(--gold) 22%, var(--line));
}
.sheet.is-open .sheet__panel{ transform:none; }
.sheet__grab{ width:40px; height:4px; border-radius:999px; background:var(--line); margin:6px auto 14px; }
.sheet__title{ font-size:18px; margin-bottom:14px; color:var(--ink); }

.buy-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.buy-head__logo{ background:linear-gradient(135deg,#FF6A00,#FF5000); color:#fff; font-size:13px; font-weight:700; padding:4px 9px; border-radius:7px; letter-spacing:.02em; }
.buy-tip{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 16px; }
.buy-actions{ display:flex; flex-direction:column; gap:10px; }
.buy-act{ display:flex; align-items:center; gap:13px; text-align:left; border:1px solid var(--line);
  background:var(--surface-2); border-radius:14px; padding:13px 15px; cursor:pointer; font-family:inherit;
  transition:transform .3s var(--ease), border-color .3s; }
.buy-act:active{ transform:scale(.98); }
.buy-act:hover{ border-color: color-mix(in srgb,var(--gold) 45%, var(--line)); }
.buy-act__ic{ width:38px; height:38px; border-radius:11px; background:color-mix(in srgb,var(--gold) 14%, var(--surface)); display:grid; place-items:center; flex:none; }
.buy-act__ic::before{ content:""; width:18px; height:18px; display:block; background:var(--gold); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.ic-link::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 14a4 4 0 005.66 0l3-3A4 4 0 0010 5.34l1.5 1.5A2 2 0 1114 11l-3 3zm4-4a4 4 0 00-5.66 0l-3 3A4 4 0 0014 18.66l-1.5-1.5A2 2 0 1110 13l3-3z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 14a4 4 0 005.66 0l3-3A4 4 0 0010 5.34l1.5 1.5A2 2 0 1114 11l-3 3zm4-4a4 4 0 00-5.66 0l-3 3A4 4 0 0014 18.66l-1.5-1.5A2 2 0 1110 13l3-3z'/></svg>"); }
.ic-copy::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 1H4a2 2 0 00-2 2v12h2V3h12V1zm3 4H8a2 2 0 00-2 2v14a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h11v14z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 1H4a2 2 0 00-2 2v12h2V3h12V1zm3 4H8a2 2 0 00-2 2v14a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h11v14z'/></svg>"); }
.ic-pwd::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H8l-5 4V5zm6 4h2v2H9V9zm4 0h2v2h-2V9z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H8l-5 4V5zm6 4h2v2H9V9zm4 0h2v2h-2V9z'/></svg>"); }
.buy-act span{ display:flex; flex-direction:column; }
.buy-act b{ font-size:14.5px; color:var(--ink); }
.buy-act i{ font-style:normal; font-size:12px; color:var(--muted); margin-top:2px; }
.sheet__close{ width:100%; margin-top:14px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); font-family:inherit; font-size:14px; padding:13px; border-radius:14px; cursor:pointer; }
.sheet__close:active{ opacity:.6; }

/* Toast —— 暗底上用奶白底深字 */
.toast{ position:absolute; left:50%; bottom:80px; transform:translate(-50%,20px); z-index:80;
  background:rgba(243,236,220,.96); color:#1A140A; font-size:13px; font-weight:600; padding:10px 18px; border-radius:999px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease); max-width:80%; text-align:center; box-shadow:0 10px 30px -12px rgba(0,0,0,.6); }
.toast.is-show{ opacity:1; transform:translate(-50%,0); }

/* 次数上限弹窗 */
.limit-modal{ position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:24px; }
.limit-modal.is-open{ display:flex; }
.limit-modal__mask{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.limit-modal__panel{ position:relative; width:100%; max-width:320px; background:linear-gradient(160deg, var(--surface), var(--surface-2)); border:1px solid var(--line); border-radius:var(--r-md); padding:26px 22px 20px; text-align:center; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); animation:pop .35s var(--ease) both; }
.limit-modal__ic{ width:46px; height:46px; margin:0 auto 12px; color:var(--gold); }
.limit-modal__ic svg{ width:100%; height:100%; }
.limit-modal__title{ font-size:17px; color:var(--ink); margin:0 0 8px; font-weight:700; }
.limit-modal__msg{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0 0 18px; }
.limit-modal__panel .cta{ width:100%; justify-content:center; }
@keyframes pop{ from{ transform:scale(.92); opacity:0; } to{ transform:none; opacity:1; } }

/* 动画 */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------- PWA 安装引导弹层（多平台手动步骤） ---------- */
.install-guide{ position:absolute; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease); }
.install-guide.is-show{ opacity:1; visibility:visible; }
.install-guide__mask{ position:absolute; inset:0; background:rgba(10,14,12,.5); }
.install-guide__panel{ position:relative; width:100%; background:var(--surface,#fff); border-radius:20px 20px 0 0;
  padding:14px 18px calc(env(safe-area-inset-bottom) + 18px); transform:translateY(100%); transition:transform .35s var(--ease);
  box-shadow:0 -8px 30px rgba(0,0,0,.18); }
.install-guide.is-show .install-guide__panel{ transform:none; }
.install-guide__grab{ width:40px; height:4px; border-radius:2px; background:var(--line,#ddd); margin:0 auto 12px; }
.install-guide__title{ font-size:16px; font-weight:600; color:var(--ink,#1a1a1a); margin:0 0 12px; text-align:center; }
.install-guide__list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:10px; }
.install-guide__list li{ font-size:13px; color:#555; line-height:1.5; }
.install-guide__list b{ color:var(--ink,#1a1a1a); }

/* ---------- 备案号（底部居中） ---------- */
.footer-beian{ text-align:center; padding:8px 0 10px; margin-top:10px; }
.footer-beian a{ font-size:11px; color:var(--line,#555); text-decoration:none; letter-spacing:.5px;
  transition:color .2s; }
.footer-beian a:hover{ color:var(--gold-soft,#C9A24B); }