/* ============ 设计令牌 · 贝母白 + 香槟金 ============ */
:root{
  --bg:#F6F3ED; --shell:#E4DED3;
  --sf:#FFFFFF; --sf2:#FCFAF6; --sf3:#F5F1E9; --sf4:#ECE5D8;
  --gold:#A87F2E; --gold-hi:#D9B877; --gold-lo:#7C5C1B; --gold-dim:#F3EADA;
  --txt:#1D1A15; --txt2:#5E574C; --txt3:#8E867A; --txt4:#B5AEA1;
  --line:rgba(29,26,21,.09); --line2:rgba(29,26,21,.05);
  --up:#CE3B2E; --down:#12835A; --warn:#BE7618;
  --gold-bg:rgba(168,127,46,.08); --red-bg:rgba(206,59,46,.07); --grn-bg:rgba(18,131,90,.07);
  --r:18px; --r2:12px;
  --sh:0 1px 2px rgba(29,26,21,.04),0 6px 20px rgba(29,26,21,.05);
  --sh2:0 2px 6px rgba(29,26,21,.05),0 18px 44px rgba(29,26,21,.10);
  --shg:0 6px 22px rgba(168,127,46,.20);
  --grad:linear-gradient(135deg,#C49E52 0%,#A87F2E 46%,#8A6620 100%);
}
html[data-theme="dark"]{
  --bg:#0A0B0E; --shell:#05060A;
  --sf:#121419; --sf2:#181B22; --sf3:#20242D; --sf4:#2A2F3A;
  --gold:#C9A45C; --gold-hi:#EBD9A9; --gold-lo:#8C6E38; --gold-dim:#3A2F1C;
  --txt:#F4F2ED; --txt2:#9DA1AC; --txt3:#666A75; --txt4:#454952;
  --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.045);
  --up:#E5484D; --down:#2FA86A; --warn:#D98E2B;
  --gold-bg:rgba(201,164,92,.10); --red-bg:rgba(229,72,77,.10); --grn-bg:rgba(47,168,106,.10);
  --sh:0 8px 32px rgba(0,0,0,.45);
  --sh2:0 12px 48px rgba(0,0,0,.55);
  --shg:0 6px 22px rgba(201,164,92,.22);
  --grad:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 48%,var(--gold-lo) 100%);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ============ 动画 ============ */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slideInL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.86)}60%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes popSoft{0%{transform:scale(.9)}55%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}65%{transform:translate(-50%,-50%) scale(1.04)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes drawRing{from{stroke-dashoffset:166}to{stroke-dashoffset:0}}
@keyframes drawTick{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
@keyframes burst{0%{transform:scale(.2) rotate(0);opacity:1}100%{transform:scale(2.6) rotate(90deg);opacity:0}}
@keyframes confetti{0%{transform:translate3d(0,0,0) rotate(0);opacity:1}100%{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot));opacity:0}}
@keyframes shine{0%{background-position:-180% 0}100%{background-position:260% 0}}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(206,59,46,.34)}70%{box-shadow:0 0 0 13px rgba(206,59,46,0)}100%{box-shadow:0 0 0 0 rgba(206,59,46,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes stripMove{0%{background-position:0 0}100%{background-position:36px 0}}
@keyframes countPulse{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}
@keyframes ripple{0%{transform:scale(0);opacity:.42}100%{transform:scale(2.4);opacity:0}}
@keyframes arrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes growBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tabPop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-4px) scale(1.16)}100%{transform:translateY(-1px) scale(1.08)}}

/* 页面转场容器 */
#scroll>*{animation-duration:.34s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.22,.68,.3,1)}
.tr-fwd>*{animation-name:slideInR}
.tr-back>*{animation-name:slideInL}
.tr-none>*{animation-name:fadeIn;animation-duration:.22s}
/* 列表逐项入场 */
.stg>*{opacity:0;animation:fadeUp .42s cubic-bezier(.22,.68,.3,1) forwards}
.stg>*:nth-child(1){animation-delay:.02s}
.stg>*:nth-child(2){animation-delay:.06s}
.stg>*:nth-child(3){animation-delay:.10s}
.stg>*:nth-child(4){animation-delay:.14s}
.stg>*:nth-child(5){animation-delay:.18s}
.stg>*:nth-child(6){animation-delay:.22s}
.stg>*:nth-child(7){animation-delay:.26s}
.stg>*:nth-child(8){animation-delay:.30s}
.stg>*:nth-child(n+9){animation-delay:.34s}
/* 通用悬浮 */
.lift{transition:transform .22s cubic-bezier(.22,.68,.3,1),box-shadow .22s}
.lift:active{transform:scale(.982)}
/* 金色渐变文字 */
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:shine 5s linear infinite}
/* 骨架条纹 */
.sk{background:linear-gradient(100deg,var(--sf3) 30%,var(--sf4) 48%,var(--sf3) 66%);
  background-size:220% 100%;animation:shine 1.5s linear infinite}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--txt);
  margin:0;padding:0;min-height:100vh;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  overscroll-behavior-y:contain;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ============ 外壳 ============ */
.device{
  width:100%;min-height:100dvh;position:relative;max-width:100vw;
  background:var(--bg);
  overflow:hidden;display:flex;flex-direction:column;
}
.notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:150px;height:30px;background:#000;z-index:60;border-radius:0 0 20px 20px;
}
html[data-theme="dark"] .notch{background:#05060A}
.notch::after{content:'';position:absolute;top:11px;right:22px;width:8px;height:8px;border-radius:50%;background:#20242C}
/* 状态栏 */
.stat{
  height:48px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 30px 6px;font-size:14px;font-weight:650;letter-spacing:.3px;position:relative;z-index:55;
}
.stat .sr{display:flex;align-items:center;gap:5px}
.sig{display:flex;align-items:flex-end;gap:2px;height:11px}
.sig i{width:3px;background:currentColor;border-radius:1px;display:block}
.bat{width:23px;height:11px;border:1.2px solid currentColor;border-radius:3px;position:relative;opacity:.9}
.bat::after{content:'';position:absolute;right:-3.5px;top:3px;width:2px;height:5px;background:currentColor;border-radius:0 1px 1px 0}
.bat i{position:absolute;inset:1.3px;width:66%;background:currentColor;border-radius:1.5px}
/* ============ 导航栏 ============ */
.nav{
  flex-shrink:0;height:45px;display:flex;align-items:center;padding:0 8px;gap:2px;
  position:relative;z-index:50;background:var(--bg);
}
.nav.hide{display:none}
.nb{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:var(--txt);cursor:pointer;flex-shrink:0;border-radius:10px;transition:background .15s;
}
.nb:active{background:var(--sf3)}
.nb.dis{opacity:.35;pointer-events:none}
.nt{
  flex:1;text-align:center;font-size:16.5px;font-weight:650;letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;
}
.n-search{
  flex:1;height:33px;background:var(--sf2);border:1px solid var(--line);border-radius:9px;
  display:flex;align-items:center;gap:6px;padding:0 11px;color:var(--txt3);font-size:13px;margin:0 4px;
}
/* ============ 滚动容器 ============ */
.scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;background:var(--bg);
}
.scroll::-webkit-scrollbar{display:none}
.pb{padding-bottom:24px}
/* ============ Tabbar ============ */
.tabbar{
  flex-shrink:0;height:66px;display:flex;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--sf) 88%,transparent);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  padding-bottom:8px;position:relative;z-index:50;
}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--txt3);transition:color .18s}
.tb.on{color:var(--gold)}
.tb svg{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.tb.on svg{transform:translateY(-1px) scale(1.08)}
.tb span{font-size:10.5px;font-weight:600;letter-spacing:.2px}
.tb.dot{position:absolute;top:9px;margin-left:16px;width:6px;height:6px;border-radius:50%;background:var(--up);border:1.5px solid var(--sf)}

/* ============ 通用组件 ============ */
.card{margin:10px 14px;background:var(--sf);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh)}
.card-i{padding:14px 15px}
.sec{margin:20px 14px 10px;display:flex;align-items:baseline;justify-content:space-between}
.sec h3{font-size:16px;font-weight:700;letter-spacing:.2px}
.sec .more{font-size:12px;color:var(--txt3);cursor:pointer}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between}
.grow{flex:1;min-width:0}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}
.t13{font-size:13px}.t12{font-size:12px}.t11{font-size:11px}.t15{font-size:15px}
.c2{color:var(--txt2)}.c3{color:var(--txt3)}
.hr{height:1px;background:var(--line2);margin:0 15px}
.padx{padding-left:15px;padding-right:15px}

/* 按钮 */
.btn{
  height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:15.5px;font-weight:650;letter-spacing:.6px;cursor:pointer;border:none;
  background:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 45%,var(--gold-lo) 100%);
  color:#FAF6EC;box-shadow:var(--shg);transition:transform .12s,opacity .12s;
}
html[data-theme="dark"] .btn{color:#1A1408}
.btn:active{transform:scale(.985);opacity:.92}
.btn.ghost{background:var(--sf3);color:var(--txt2);box-shadow:none;border:1px solid var(--line)}
.btn.line{background:transparent;border:1px solid var(--gold);color:var(--gold);box-shadow:none}
.btn.dis{opacity:.4;pointer-events:none}
.btn.sm{height:38px;font-size:14px;border-radius:10px}

/* 输入 */
.inp{
  height:48px;background:var(--sf2);border:1px solid var(--line);border-radius:12px;
  display:flex;align-items:center;padding:0 14px;gap:10px;
}
.inp input{
  flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:15px;
  font-family:inherit;min-width:0;
}
.inp input::placeholder{color:var(--txt4)}
.flabel{font-size:13px;color:var(--txt2);font-weight:600;margin-bottom:9px;display:block}

/* badge */
.badge{font-size:10px;padding:2.5px 6px;border-radius:5px;font-weight:650;letter-spacing:.2px;white-space:nowrap}
.b-gold{background:var(--gold-bg);color:var(--gold)}
.b-red{background:var(--red-bg);color:var(--up)}
.b-grn{background:var(--grn-bg);color:var(--down)}
.b-gray{background:var(--sf3);color:var(--txt3)}

/* 列表项 */
.li{display:flex;align-items:center;gap:11px;padding:14px 15px;cursor:pointer;transition:background .15s}
.li:active{background:var(--sf2)}
.li+.li{border-top:1px solid var(--line2)}
.ico{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--sf3);color:var(--gold);flex-shrink:0;
}

/* tabs */
.tabs{display:flex;gap:6px;padding:2px;background:var(--sf2);border-radius:11px;border:1px solid var(--line)}
.tab{
  flex:1;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:600;color:var(--txt3);border-radius:9px;cursor:pointer;transition:.18s;
}
.tab.on{background:var(--sf4);color:var(--txt);box-shadow:0 1px 4px rgba(0,0,0,.2)}
html[data-theme="dark"] .tab.on{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06)}
/* 下划线 tab */
.utabs{display:flex;border-bottom:1px solid var(--line2);background:var(--sf)}
.utab{
  flex:1;height:43px;display:flex;align-items:center;justify-content:center;position:relative;
  font-size:14.5px;font-weight:600;color:var(--txt3);cursor:pointer;transition:color .18s;
}
.utab.on{color:var(--gold)}
.utab.on::after{
  content:'';position:absolute;bottom:0;width:26px;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold));
}

/* 空状态 */
.empty{padding:70px 20px;text-align:center;color:var(--txt4)}
.empty svg{opacity:.28;margin-bottom:14px}
.empty p{font-size:13.5px}

/* toast */
#toast{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  background:rgba(20,22,28,.94);backdrop-filter:blur(10px);
  color:#fff;padding:12px 20px;border-radius:12px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.22s cubic-bezier(.34,1.4,.64,1);z-index:200;
  border:1px solid rgba(255,255,255,.1);text-align:center;max-width:240px;
}
html[data-theme="dark"] #toast{background:rgba(20,22,28,.92)}
#toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* mask+弹窗 */
.mask{
  position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:150;
  display:flex;align-items:center;justify-content:center;padding:34px;
  opacity:0;pointer-events:none;transition:.2s;backdrop-filter:blur(2px);
}
.mask.on{opacity:1;pointer-events:auto}
.dialog{
  width:100%;background:var(--sf);border-radius:18px;overflow:hidden;
  border:1px solid var(--line);transform:scale(.9);transition:.24s cubic-bezier(.34,1.4,.64,1);
  box-shadow:var(--sh);max-height:78%;display:flex;flex-direction:column;
}
.mask.on .dialog{transform:scale(1)}
.dg-h{padding:22px 22px 14px;text-align:center}
.dg-t{font-size:16.5px;font-weight:700;margin-bottom:9px}
.dg-c{font-size:14px;color:var(--txt2);line-height:1.65}
.dg-f{display:flex;border-top:1px solid var(--line2)}
.dg-b{flex:1;height:49px;display:flex;align-items:center;justify-content:center;font-size:15.5px;font-weight:600;color:var(--txt2);cursor:pointer}
.dg-b.pri{color:var(--gold);font-weight:700}
.dg-b+.dg-b{border-left:1px solid var(--line2)}

/* ============ 成功特效层 ============ */
#fx{position:absolute;inset:0;z-index:180;display:none;align-items:center;justify-content:center;
  background:rgba(29,26,21,.30);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:34px}
html[data-theme="dark"] #fx{background:rgba(0,0,0,.5)}
#fx.on{display:flex;animation:fadeIn .2s ease}
.fx-card{
  width:100%;background:var(--sf);border:1px solid var(--line);border-radius:22px;padding:30px 26px 28px;
  text-align:center;box-shadow:var(--sh2);animation:popIn .46s cubic-bezier(.24,1.5,.4,1) both;position:relative;overflow:hidden}
.fx-card::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:280px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(168,127,46,.16),transparent 70%);pointer-events:none}
.fx-ring{display:flex;justify-content:center;margin-bottom:16px;position:relative}
#fxRing{animation:drawRing .58s cubic-bezier(.5,.1,.3,1) .12s forwards}
#fxRing2{animation:drawRing .58s cubic-bezier(.5,.1,.3,1) forwards}
#fxTick{animation:drawTick .34s cubic-bezier(.5,.1,.3,1) .42s forwards}
.fx-title{font-size:19px;font-weight:750;letter-spacing:-.2px;margin-bottom:6px;position:relative}
.fx-sub{font-size:13.5px;color:var(--txt3);line-height:1.7;position:relative}
.fx-price{margin-top:14px;font-size:26px;font-weight:750;color:var(--gold);letter-spacing:-.5px;position:relative;
  opacity:0;animation:fadeUp .4s .52s forwards}
/* 迸发粒子 + 彩带 */
#fxBurst{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bu{position:absolute;left:50%;top:44%;width:9px;height:9px;border-radius:2px;animation:confetti 1.05s cubic-bezier(.2,.6,.3,1) forwards}
.bu.r{width:10px;height:10px;border-radius:50%}
/* 进度条 growth */
.prog i{transform-origin:left;animation:growBar .8s cubic-bezier(.22,.68,.3,1) both}
/* tabbar 图标弹性 */
.tb.on svg{animation:tabPop .42s cubic-bezier(.34,1.56,.64,1)}
/* 呼吸灯（抢购中） */
.live{animation:pulseRing 1.9s ease-out infinite;border-radius:inherit}
/* 浮动 */
.fl{animation:floaty 3.2s ease-in-out infinite}
/* 按钮波纹 */
.btn,.ico,.kg-i{position:relative;overflow:hidden}
.rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;
  animation:ripple .58s ease-out forwards;transform:translate(-50%,-50%)}
html[data-theme="dark"] .rp{background:rgba(255,255,255,.3)}
/* 箭头轻推 */
.arw-n{animation:arrowNudge 1.8s ease-in-out infinite}
/* 数字跳动 */
.ck{display:inline-block;animation:countPulse .42s cubic-bezier(.34,1.56,.64,1)}
/* 骨架 */
.skbar{height:13px;border-radius:7px}
/* 刷新旋转 */
.spin{animation:spin .85s linear infinite}
/* 扫描/条纹背景 */
.strip{background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(168,127,46,.05) 10px,rgba(168,127,46,.05) 18px);
  background-size:36px 36px;animation:stripMove 1.2s linear infinite}

.adm-btn{margin-top:14px;display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  text-decoration:none;color:inherit;border:1px solid rgba(168,127,46,.28);
  background:linear-gradient(120deg,rgba(168,127,46,.10),rgba(168,127,46,.03));
  transition:transform .16s,box-shadow .2s,border-color .2s}
.adm-btn:hover{transform:translateY(-2px);box-shadow:var(--shg);border-color:rgba(168,127,46,.55)}
.adm-i{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:var(--grad);color:#FFF8E8;font-weight:750;font-size:14px;
  box-shadow:var(--shg)}
.adm-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.adm-t b{font-size:13px;font-weight:650;color:var(--txt)}
.adm-t i{font-style:normal;font-size:11px;color:var(--txt4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-a{color:var(--gold);font-size:17px;flex-shrink:0}
/* ============ 页面专用 ============ */
/* hero */
.hero{position:relative;padding:20px 18px 22px;overflow:hidden;animation:fadeUp .5s cubic-bezier(.22,.68,.3,1) both}
.hero::before{
  content:'';position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:340px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,127,46,.20),transparent 68%);pointer-events:none;
}
.hero>*{position:relative}
/* 金刚区 */
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 4px}
.kg{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer}
.kg-i{
  width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--sf3),var(--sf2));border:1px solid var(--line);color:var(--gold);
  transition:transform .16s;
}
.kg:active .kg-i{transform:scale(.93)}
.kg span{font-size:11.5px;color:var(--txt2);font-weight:500}
/* 商品卡 */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pcard{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  cursor:pointer;transition:transform .2s cubic-bezier(.22,.68,.3,1),box-shadow .2s;box-shadow:var(--sh)}
.pcard:active{transform:scale(.972);box-shadow:0 1px 3px rgba(29,26,21,.06)}
.pimg{
  height:126px;display:flex;align-items:center;justify-content:center;position:relative;
  background:linear-gradient(150deg,var(--sf3),var(--sf2));
}
.pimg svg{opacity:.32}
.pbody{padding:10px 11px 12px}
/* 抢购倒计时 chips */
.chip{
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;
  font-size:11px;font-weight:650;background:var(--sf3);color:var(--txt2);
}
.chip.hot{background:var(--red-bg);color:var(--up)}
.chip.gold{background:var(--gold-bg);color:var(--gold)}
/* 倒计时数字 */
.cd{display:flex;align-items:center;gap:3px}
.cd b{
  background:var(--txt);color:var(--bg);font-size:12px;font-weight:700;
  padding:2px 5px;border-radius:5px;min-width:22px;text-align:center;
}
html[data-theme="dark"] .cd b{background:var(--txt);color:#fff}
.cd i{font-style:normal;color:var(--txt3);font-size:12px;font-weight:700}
/* 订单卡字段 */
.kv{display:flex;justify-content:space-between;font-size:12.5px;line-height:1.9}
.kv .k{color:var(--txt3);flex-shrink:0}
.kv .v{color:var(--txt);font-weight:500;text-align:right;word-break:break-all}
/* 签名画布 */
.sign-wrap{
  height:170px;background:var(--sf2);border:1.5px dashed var(--line);border-radius:12px;
  position:relative;overflow:hidden;cursor:crosshair;
}
.sign-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--txt4);gap:6px;pointer-events:none;font-size:13px;
}
.sign-line{position:absolute;bottom:34px;left:24px;right:24px;height:1px;background:var(--line)}
/* 上传凭证 */
.up-box{
  height:112px;border:1.5px dashed var(--line);border-radius:12px;background:var(--sf2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  color:var(--txt3);cursor:pointer;transition:border-color .16s;
}
.up-box:active{border-color:var(--gold)}
.up-box.done{border-style:solid;border-color:var(--gold)}
.up-box.done{color:var(--gold)}
/* 二维码 */
.qr{
  width:158px;height:158px;background:var(--txt);border-radius:12px;padding:9px;
  display:grid;grid-template-columns:repeat(25,1fr);grid-template-rows:repeat(25,1fr);gap:0;
}
.qr i{background:transparent}
.qr i.f{background:var(--bg)}
html[data-theme="dark"] .qr i.f{background:#fff}
/* 金额 */
.amt{font-size:32px;font-weight:750;letter-spacing:-.5px}
.amt.s{font-size:21px}
/* 光晕金币卡 */
.coin-c{
  position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(168,127,46,.16),rgba(168,127,46,.03) 55%,transparent);
  border:1px solid rgba(168,127,46,.22);border-radius:var(--r);
}
.coin-c::after{
  content:'';position:absolute;top:-70px;right:-40px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,127,46,.16),transparent 70%);pointer-events:none;
}
/* 筛选 pill */
.pills{display:flex;gap:7px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{
  flex-shrink:0;height:30px;padding:0 13px;border-radius:15px;background:var(--sf2);
  border:1px solid var(--line);display:flex;align-items:center;font-size:12.5px;color:var(--txt2);
  cursor:pointer;transition:.16s;font-weight:500;
}
.pill.on{background:var(--gold-bg);border-color:var(--gold);color:var(--gold);font-weight:650}
/* swiper dots */
.dots{display:flex;gap:4px;justify-content:center}
.dots i{width:5px;height:5px;border-radius:3px;background:var(--txt4);transition:.2s}
.dots i.on{width:14px;background:var(--gold)}
/* 商品图占位 thumb */
.thumb{border-radius:10px;background:linear-gradient(150deg,var(--sf3),var(--sf2));display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line)}
/* 进度条 */
.prog{height:5px;background:var(--sf3);border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}
.prog i.red{background:linear-gradient(90deg,#8B282C,var(--up))}
/* 侧边元信息 */
.meta{display:flex;gap:14px;align-items:center}
/* 主题按钮 */
.theme-btn{
  position:absolute;top:70px;right:-58px;width:44px;height:44px;border-radius:12px;
  background:var(--sf);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:20;
}
/* 控制台 */
@media(max-width:900px){
  body{flex-direction:column;padding:14px;gap:20px;align-items:center}
  .theme-btn{position:fixed;top:16px;right:16px}
  }

/* ==================== 生产版补充 ==================== */
.pb{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.nav{padding-top:calc(6px + env(safe-area-inset-top))}
.tabbar{padding-bottom:env(safe-area-inset-bottom)}

img{display:block;max-width:100%}
.pimg>img,.gimg{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .34s ease}
.pimg>img.on,.gimg.on{opacity:1}
.ph{background:linear-gradient(135deg,var(--sf3),var(--sf2));display:flex;align-items:center;justify-content:center;overflow:hidden}

.empty{padding:70px 24px;text-align:center;color:var(--txt3)}
.empty svg{opacity:.3;margin-bottom:14px}
.empty .t{font-size:15px;color:var(--txt2);margin-bottom:6px}
.empty .d{font-size:13px;color:var(--txt3)}

.skel{padding:0 14px}
.sk-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line2)}
.sk-box{background:var(--sf3);border-radius:8px;height:12px}
.sk-ico{width:54px;height:54px;border-radius:12px;flex-shrink:0}
.sk-line{flex:1;display:flex;flex-direction:column;gap:9px;justify-content:center}

.ptr{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--txt3);transition:height .25s}
.ptr.on{height:44px}

.neterr{padding:60px 24px;text-align:center}
.neterr .btn{width:auto;display:inline-flex;padding:0 26px;margin-top:14px}

.viewer{position:fixed;inset:0;z-index:200;background:rgba(12,11,9,.94);
  display:flex;align-items:center;justify-content:center}
.viewer img{max-width:100%;max-height:100%;animation:zoomIn .26s cubic-bezier(.22,.68,.3,1) both}

.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ell2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.inp{width:100%;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--sf2);
  padding:0 14px;font-size:15.5px;color:var(--txt);outline:none;transition:border-color .18s,box-shadow .18s}
.inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.inp::placeholder{color:var(--txt4)}
.fg{margin-bottom:16px}
.fg>label{display:block;font-size:13px;color:var(--txt2);margin-bottom:8px;font-weight:500}

/* ---- 导航栏内部元素 ---- */
.nl{height:42px;display:flex;align-items:center;gap:6px;padding:0 12px}
.nt{font-size:16.5px;font-weight:650;letter-spacing:-.2px}
.ib{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--txt);cursor:pointer;border-radius:9px;flex-shrink:0}
.ib:active{background:var(--sf3)}
.sb{flex:1;height:34px;border-radius:17px;background:var(--sf3);display:flex;align-items:center;
  gap:6px;padding:0 13px;color:var(--txt3);font-size:13.5px;cursor:pointer}

/* ---- 区块标题 ---- */
.sec-t{display:flex;align-items:center;gap:8px;padding:20px 16px 11px;
  font-size:15.5px;font-weight:700;letter-spacing:-.2px}

/* ---- 通用列表项 ---- */
.list-item{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line2)}
.list-item:last-child{border-bottom:none}
.ti{flex:1;min-width:0}
.de{font-size:12px;color:var(--txt3);margin-top:3px}
.arw{color:var(--txt4);flex-shrink:0;display:flex}
.ico36{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}

/* ---- 弹窗 ---- */
.dlg-t{font-size:16.5px;font-weight:700;text-align:center;margin-bottom:8px}
.dlg-c{font-size:14px;color:var(--txt2);text-align:center;line-height:1.75;margin-bottom:18px}
.dlg-btns{display:flex;gap:10px}
.dlg-btns .btn{flex:1}

.seg{display:flex;background:var(--sf3);border-radius:11px;padding:3px;gap:2px}
.seg>*{flex:1;text-align:center;height:32px;line-height:32px;font-size:13.5px;border-radius:9px;
  color:var(--txt2);cursor:pointer;transition:all .2s}
.seg>.on{background:var(--sf);color:var(--gold);font-weight:650;box-shadow:var(--sh)}

.step{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.step>span{width:34px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--txt2);cursor:pointer;background:var(--sf2)}
.step>span:active{background:var(--sf3)}
.step>b{min-width:44px;text-align:center;font-size:14.5px;font-weight:600}

@media(min-width:520px){
  .device{max-width:430px;margin:0 auto;min-height:100dvh;
    box-shadow:0 0 0 1px var(--line),0 30px 70px rgba(74,63,47,.14)}
}
@media(max-width:360px){ .amt{font-size:26px} }