/* =====================================================================
   吉搭 NEO · 浅色高质感 + 拟物柔光微交互层（加性，不覆盖业务样式）
   仅新增 / 增强，不动任何布局属性（宽高/边距/定位）。
   rem 走站点既有令牌；组件内部用 px（自包含微件）。
   ===================================================================== */
:root{
  --neo-shadow-s: 0 0.06rem 0.18rem rgba(40,30,16,.08), 0 0.02rem 0.04rem rgba(40,30,16,.05);
  --neo-shadow:   0 0.14rem 0.40rem rgba(40,30,16,.10), 0 0.04rem 0.10rem rgba(40,30,16,.06);
  --neo-shadow-l: 0 0.26rem 0.70rem rgba(40,30,16,.14);
  --neo-hi: inset 0 0.01rem 0 rgba(255,255,255,.72);
  --neo-ease: cubic-bezier(.22,.61,.36,1);
  --neo-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 高质感卡：柔光长投影 + 发丝边 + 顶高光（不影响布局） ---------- */
.card{
  border:0.01rem solid var(--line);
  box-shadow:var(--neo-shadow), var(--neo-hi);
  transition:transform .2s var(--neo-ease), box-shadow .2s var(--neo-ease);
}

/* ---------- 按钮：拟物按压缩陷 + 柔光 ---------- */
.btn{
  position:relative; overflow:hidden; cursor:pointer;
  box-shadow:var(--neo-shadow-s), var(--neo-hi);
  transition:transform .14s var(--neo-ease), box-shadow .16s var(--neo-ease), filter .16s;
}
.btn--dark{ box-shadow:0 0.12rem 0.30rem rgba(18,58,44,.28), var(--neo-hi); }
.btn--gold{ box-shadow:0 0.12rem 0.30rem rgba(150,110,40,.28), var(--neo-hi); }
.btn.is-down{ transform:translateY(0.02rem) scale(.985);
  box-shadow:inset 0 0.03rem 0.08rem rgba(0,0,0,.18), var(--neo-hi); }
.btn--dark.is-down{ box-shadow:inset 0 0.04rem 0.10rem rgba(0,0,0,.30); }
.btn--gold.is-down{ box-shadow:inset 0 0.04rem 0.10rem rgba(80,55,10,.30); }
.btn[disabled]{ box-shadow:none; }

/* 涟漪 */
.neo-ripple{ position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.45); pointer-events:none; animation:neo-rip .6s var(--neo-ease) forwards; }
.btn--gold .neo-ripple, .btn--ghost .neo-ripple{ background:rgba(18,58,44,.14); }
@keyframes neo-rip{ to{ transform:scale(2.6); opacity:0; } }

/* 通用可点元素轻柔按压 */
[data-neo-tap]{ cursor:pointer; transition:transform .12s var(--neo-ease), box-shadow .14s; }
[data-neo-tap].is-down{ transform:scale(.975); }

/* 平滑惯性滚动观感 */
.wrap, .page{ -webkit-overflow-scrolling:touch; }

/* =====================================================================
   组件 ①：完成反馈按钮  .neo-feedback
   ===================================================================== */
.neo-feedback{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.neo-feedback__btn{
  position:relative; overflow:hidden; width:230px; height:58px; border:none; cursor:pointer;
  border-radius:18px; background:linear-gradient(180deg,#2C6E54,#1F5A43); color:#F7F1E6;
  font-size:17px; font-weight:700; letter-spacing:3px; font-family:inherit;
  box-shadow:0 12px 24px rgba(31,90,67,.32), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .14s var(--neo-ease), box-shadow .16s, background .4s, width .5s var(--neo-spring), border-radius .5s;
  display:flex; align-items:center; justify-content:center;
}
.neo-feedback__btn:active{ transform:translateY(2px) scale(.99);
  box-shadow:0 4px 9px rgba(31,90,67,.28), inset 0 3px 8px rgba(0,0,0,.22); }
.neo-feedback__label{ transition:opacity .2s, transform .3s var(--neo-ease); }
.neo-feedback__btn.is-loading{ background:linear-gradient(180deg,#3a7d63,#2a6651); }
.neo-feedback__btn.is-done{ width:58px; border-radius:50%;
  background:linear-gradient(180deg,#34A06F,#1F8A58);
  box-shadow:0 12px 26px rgba(31,138,88,.40), inset 0 1px 0 rgba(255,255,255,.3); }
.neo-feedback__btn.is-done .neo-feedback__label{ opacity:0; transform:scale(.4); position:absolute; }
.neo-feedback__check{ position:absolute; width:30px; height:30px; opacity:0; transform:scale(.4);
  transition:opacity .2s .12s, transform .4s .12s var(--neo-spring); }
.neo-feedback__btn.is-done .neo-feedback__check{ opacity:1; transform:scale(1); }
.neo-feedback__check path{ fill:none; stroke:#fff; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; }
.neo-feedback__btn.is-done .neo-feedback__check path{ animation:neo-draw .5s .22s var(--neo-ease) forwards; }
.neo-feedback__ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(31,138,88,.5); opacity:0; pointer-events:none; }
.neo-feedback__btn.is-done .neo-feedback__ring{ animation:neo-fbring .7s var(--neo-ease) forwards; }
@keyframes neo-fbring{ 0%{opacity:.7;transform:scale(.7);} 100%{opacity:0;transform:scale(1.9);} }
.neo-feedback__cap{ font-size:13px; color:#1F5A43; font-weight:600; letter-spacing:1px;
  opacity:0; transform:translateY(6px); transition:.35s var(--neo-ease); }
.neo-feedback__cap.show{ opacity:1; transform:none; }

/* =====================================================================
   组件 ②：勾选联动  .neo-check
   ===================================================================== */
.neo-check{ display:flex; flex-direction:column; gap:11px; }
.neo-check__row{ position:relative; display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:16px;
  background:linear-gradient(180deg,#fff,#FBF6EC); border:1px solid var(--line);
  box-shadow:var(--neo-shadow-s), var(--neo-hi); }
.neo-check__row.is-down{ transform:scale(.99); }
.neo-check__box{ width:30px; height:30px; flex:0 0 auto; border-radius:10px; border:2px solid rgba(25,21,18,.12);
  background:#fff; display:flex; align-items:center; justify-content:center;
  transition:all .25s var(--neo-spring); box-shadow:var(--neo-hi); }
.neo-check__row.on .neo-check__box{ background:linear-gradient(180deg,#2C6E54,#1F5A43); border-color:#1F5A43;
  box-shadow:0 4px 10px rgba(31,90,67,.30), inset 0 1px 0 rgba(255,255,255,.25); }
.neo-check__box svg{ width:18px; height:18px; }
.neo-check__box path{ fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; }
.neo-check__row.on .neo-check__box path{ animation:neo-draw .4s var(--neo-ease) forwards; }
.neo-check__main{ font-size:15px; font-weight:600; }
.neo-check__sub{ font-size:11.5px; color:var(--ink3,#736B5C); margin-top:2px; }
.neo-check__master{ background:linear-gradient(180deg,#FBF3E2,#F4E7CC); border:1px solid rgba(185,138,62,.3); }
.neo-check__master.on .neo-check__box{ background:linear-gradient(180deg,#D2A762,#B9853B); border-color:#B9853B;
  box-shadow:0 4px 10px rgba(150,110,40,.30), inset 0 1px 0 rgba(255,255,255,.35); }
.neo-check__beam{ position:absolute; left:31px; height:2px; transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold,#B98A3E),rgba(185,138,62,0)); border-radius:2px; pointer-events:none; z-index:5; }
.neo-check__beam.go{ animation:neo-beam .5s var(--neo-ease) forwards; }
@keyframes neo-beam{ 0%{transform:scaleX(0);opacity:.9;} 60%{opacity:.9;} 100%{transform:scaleX(1);opacity:0;} }
@keyframes neo-draw{ to{ stroke-dashoffset:0; } }

/* =====================================================================
   组件 ③：叠卡展开  .neo-stack
   ===================================================================== */
.neo-stack{ position:relative; width:100%; height:360px; perspective:1200px; }
.neo-stack__deck{ position:absolute; inset:0; transform-style:preserve-3d; }
.neo-stack__card{ position:absolute; left:0; right:0; top:20px; height:300px; border-radius:22px; padding:20px;
  background:linear-gradient(165deg,#fff,#F6EFE1); border:1px solid var(--line);
  box-shadow:0 16px 34px rgba(60,48,32,.18), var(--neo-hi);
  transition:transform .55s var(--neo-spring), opacity .4s, box-shadow .4s; cursor:pointer; overflow:hidden; }
.neo-stack__k{ font-size:11px; letter-spacing:2px; color:var(--gold,#B98A3E); font-weight:600; }
.neo-stack__t{ font-family:var(--serif,"Songti SC",serif); font-size:23px; font-weight:700; margin:8px 0 4px; letter-spacing:1px; }
.neo-stack__d{ font-size:12.5px; color:var(--ink2,#57503F); line-height:1.7; margin-top:10px; }
.neo-stack__foot{ position:absolute; left:20px; right:20px; bottom:18px; display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--ink3,#736B5C); opacity:0; transition:opacity .4s .1s; }
.neo-stack__tag{ background:var(--green-l,#E7F1EA); color:var(--green,#1F5A43); padding:5px 11px; border-radius:999px; font-weight:600; font-size:11px; }
.neo-stack__card.is-expanded{ z-index:30; transform:translateY(0) scale(1) rotate(0)!important;
  box-shadow:0 26px 54px rgba(60,48,32,.26), var(--neo-hi); }
.neo-stack__card.is-expanded .neo-stack__foot{ opacity:1; }
.neo-stack__card.is-back{ opacity:.55; filter:saturate(.8); }

/* =====================================================================
   组件 ④：吸附卡加画线  .neo-sticky
   ===================================================================== */
.neo-sticky{ position:relative; }
.neo-sticky__head{ position:sticky; top:0; z-index:20; margin:0 14px; padding:14px 18px; border-radius:0 0 20px 20px;
  background:linear-gradient(180deg,#fff,#FBF5EA); border:1px solid var(--line); border-top:none;
  box-shadow:0 10px 22px rgba(60,48,32,.10); display:flex; align-items:center; justify-content:space-between; }
.neo-sticky__t{ font-family:var(--serif,"Songti SC",serif); font-size:16px; font-weight:700; }
.neo-sticky__p{ font-family:var(--serif,"Songti SC",serif); font-size:22px; color:var(--green,#1F5A43); font-weight:700; }
.neo-sticky__timeline{ position:relative; padding:26px 24px 60px 40px; }
.neo-sticky__svg{ position:absolute; left:33px; top:26px; bottom:60px; width:6px; overflow:visible; }
.neo-sticky__svg path{ fill:none; stroke:url(#neo-tlg); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.neo-sticky__item{ position:relative; margin-bottom:30px; padding-left:8px; }
.neo-sticky__node{ position:absolute; left:-27px; top:4px; width:20px; height:20px; border-radius:50%; background:#fff;
  border:2px solid rgba(25,21,18,.12); box-shadow:var(--neo-hi); transition:all .4s var(--neo-spring); z-index:2; }
.neo-sticky__item.reached .neo-sticky__node{ background:linear-gradient(180deg,#2C6E54,#1F5A43); border-color:#1F5A43;
  transform:scale(1.12); box-shadow:0 4px 10px rgba(31,90,67,.3); }
.neo-sticky__card{ background:linear-gradient(180deg,#fff,#FBF6EC); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; box-shadow:var(--neo-shadow-s), var(--neo-hi); transition:transform .4s var(--neo-ease), box-shadow .4s; }
.neo-sticky__item.reached .neo-sticky__card{ transform:translateX(2px); }
.neo-sticky__step{ font-size:10.5px; letter-spacing:2px; color:var(--gold,#B98A3E); font-weight:600; }
.neo-sticky__title{ font-family:var(--serif,"Songti SC",serif); font-size:16px; font-weight:700; margin:5px 0 4px; }
.neo-sticky__desc{ font-size:12px; color:var(--ink2,#57503F); line-height:1.6; }

/* =====================================================================
   组件 ⑤：惯性滚轮  .neo-wheel
   ===================================================================== */
.neo-wheel{ position:relative; overflow:hidden; height:300px; }
.neo-wheel__track{ display:flex; gap:14px; position:absolute; top:50%; left:0; transform:translateY(-50%);
  padding:0 50%; will-change:transform; cursor:grab; }
.neo-wheel__track.drag{ cursor:grabbing; }
.neo-wheel__card{ flex:0 0 168px; height:228px; border-radius:22px; padding:18px;
  background:linear-gradient(165deg,#fff,#F4ECDB); border:1px solid var(--line);
  box-shadow:0 14px 30px rgba(60,48,32,.16), var(--neo-hi); user-select:none; }
.neo-wheel__card.dim{ opacity:.5; transform:scale(.92); transition:opacity .3s, transform .3s; }
.neo-wheel__emo{ font-size:34px; }
.neo-wheel__t{ font-family:var(--serif,"Songti SC",serif); font-size:19px; font-weight:700; margin-top:10px; letter-spacing:.5px; }
.neo-wheel__d{ font-size:11.5px; color:var(--ink2,#57503F); margin-top:8px; line-height:1.6; }
.neo-wheel__dots{ display:flex; gap:7px; justify-content:center; margin-top:12px; }
.neo-wheel__dots i{ width:7px; height:7px; border-radius:50%; background:rgba(25,21,18,.16); transition:.3s; }
.neo-wheel__dots i.on{ width:20px; border-radius:4px; background:var(--green,#1F5A43); }
.neo-wheel__meter{ text-align:center; font-size:11.5px; color:var(--ink3,#736B5C); margin-top:14px; }
.neo-wheel__meter b{ color:var(--green,#1F5A43); font-family:var(--serif,"Songti SC",serif); font-size:14px; }

/* =====================================================================
   组件 ⑥：圆形扩散转场  .neo-reveal
   ===================================================================== */
.neo-reveal{ position:relative; overflow:hidden; }
.neo-reveal__screen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; padding:40px; transition:clip-path .62s var(--neo-ease); }
.neo-reveal__a{ background:linear-gradient(170deg,#EAF2EC,#D7E7DC); z-index:1; }
.neo-reveal__b{ background:linear-gradient(170deg,#FBF1DE,#F1E2C4); z-index:2; clip-path:circle(0% at 50% 100%); }
.neo-reveal__b.show{ clip-path:circle(150% at var(--cx,50%) var(--cy,50%)); }
.neo-reveal__emo{ font-size:54px; }
.neo-reveal__t{ font-family:var(--serif,"Songti SC",serif); font-size:24px; font-weight:700; letter-spacing:1px; }
.neo-reveal__d{ font-size:13px; color:var(--ink2,#57503F); line-height:1.7; max-width:240px; }