/* 克宝 · 粉白电商风
   照抄真电商的肌肉记忆：圆角卡片、大红按钮、双列瀑布流。
   ⚠️ 不是小克黑金风——逼真感优先（PLAN.md §5）。
   全离线：不引任何外部字体/图库/CDN。 */

:root{
  --pink:#ff4d6d;          /* 主色，取淘宝橙红与小红书粉之间 */
  --pink-deep:#e6294b;
  --pink-soft:#fff0f3;
  --orange:#ff6b35;
  --bg:#f6f6f8;
  --card:#fff;
  --ink:#1f1f24;
  --ink-2:#6b6b76;
  --ink-3:#9b9ba6;
  --line:#ececf0;
  --ok:#00b578;
  --gold:#ffb800;
  --r:14px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Helvetica,Arial,"Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;font-size:16px} /* 16px 防 iOS 聚焦缩放 */
img{display:block;max-width:100%}

#app{max-width:520px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative}

/* ───────── 通用视图 ───────── */
.view{display:none;animation:fade .18s ease}
.view.on{display:block}
@keyframes fade{from{opacity:.4}to{opacity:1}}

.pad{padding:12px}
.hide{display:none!important}

/* ───────── 顶部：余额条（仿支付宝首页） ───────── */
.topbar{
  background:linear-gradient(160deg,var(--pink) 0%,var(--orange) 100%);
  color:#fff; padding:calc(var(--safe-t) + 14px) 16px 18px;
  border-radius:0 0 20px 20px;
}
.topbar .brand{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;opacity:.95}
.topbar .brand .logo{
  width:24px;height:24px;border-radius:7px;background:#fff;color:var(--pink);
  display:grid;place-items:center;font-size:14px;font-weight:800
}
.balance-label{font-size:12px;opacity:.85;margin:12px 0 2px;letter-spacing:.5px}
.balance{font-size:34px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.1}
.balance .cur{font-size:20px;margin-right:2px;font-weight:700}
.topbar .sub{display:flex;gap:14px;margin-top:10px;font-size:11.5px;opacity:.9}
.topbar .sub b{font-weight:700}

/* ───────── 楼层 tab ───────── */
.floors{
  display:flex;gap:6px;overflow-x:auto;padding:12px 12px 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  position:sticky;top:0;z-index:20;background:var(--bg);
}
.floors::-webkit-scrollbar{display:none}
.floor-tab{
  flex:0 0 auto;padding:7px 13px;border-radius:999px;background:#fff;
  font-size:13px;color:var(--ink-2);white-space:nowrap;border:1px solid var(--line);
  transition:.15s;
}
.floor-tab.on{background:var(--pink);color:#fff;border-color:var(--pink);font-weight:600}

/* ───────── 商品瀑布流（双列） ───────── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:4px 12px 90px}
.card{
  background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05);position:relative;
}
.card:active{transform:scale(.985)}
.thumb{
  aspect-ratio:1/1;display:grid;place-items:center;font-size:52px;
  background:linear-gradient(140deg,#f3f3f6,#e9e9ef);position:relative
}
.media{overflow:hidden}
.media>img{width:100%;height:100%;object-fit:cover;display:block;grid-area:1/1}
.media>.media-emoji{grid-area:1/1}
.card .info{padding:8px 9px 10px}
.card .name{font-size:13px;line-height:1.35;height:36px;overflow:hidden;color:var(--ink)}
.card .price{margin-top:6px;color:var(--pink);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.card .price .cur{font-size:11px;font-weight:700;margin-right:1px}
.card .owned{
  position:absolute;top:7px;left:7px;background:rgba(0,181,120,.92);color:#fff;
  font-size:10px;padding:2px 6px;border-radius:5px;font-weight:600
}
.badge-hero{
  position:absolute;top:7px;right:7px;background:var(--gold);color:#7a4b00;
  font-size:10px;padding:2px 6px;border-radius:5px;font-weight:700
}
.card .del{
  position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;font-size:14px;line-height:22px;text-align:center
}

/* ───────── 商品详情 ───────── */
.nav{
  position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px;padding:calc(var(--safe-t) + 10px) 12px 10px;
}
.nav .back{font-size:20px;width:30px}
.nav .title{font-size:16px;font-weight:600;flex:1;text-align:center;margin-right:30px}
.hero-img{aspect-ratio:1/1;display:grid;place-items:center;font-size:110px;background:linear-gradient(140deg,#f3f3f6,#e6e6ee)}
.detail-body{background:#fff;padding:14px 16px 20px}
.detail-price{color:var(--pink);font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.detail-price .cur{font-size:16px}
.detail-name{font-size:16px;font-weight:600;margin:8px 0 6px;line-height:1.4}
.detail-desc{font-size:13.5px;color:var(--ink-2);line-height:1.65}
.sec{background:#fff;margin-top:9px;padding:14px 16px}
.sec h4{margin:0 0 10px;font-size:13px;color:var(--ink-2);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:7px 14px;border-radius:8px;background:#f4f4f7;font-size:13px;
  border:1.5px solid transparent;color:var(--ink)
}
.chip.on{border-color:var(--pink);color:var(--pink);background:var(--pink-soft);font-weight:600}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:fit-content}
.qty button{width:38px;height:34px;font-size:18px;background:#f8f8fa;color:var(--ink-2)}
.qty span{width:48px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}

/* ───────── 底部大红按钮 ───────── */
.buybar{
  position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;
  background:#fff;border-top:1px solid var(--line);z-index:40;
  padding:10px 12px calc(10px + var(--safe-b));display:flex;gap:10px;align-items:center;
}
.btn{
  flex:1;height:46px;border-radius:23px;font-size:16px;font-weight:700;
  background:linear-gradient(90deg,var(--orange),var(--pink));color:#fff;
  display:grid;place-items:center;
}
.btn:active{filter:brightness(.94)}
.btn.ghost{background:#f2f2f5;color:var(--ink)}
.btn.flat{border-radius:10px}
.btn[disabled]{opacity:.5}

/* ───────── 订单确认 / 收银台 ───────── */
.addr{background:#fff;padding:14px 16px;display:flex;gap:10px;align-items:flex-start}
.addr .pin{font-size:18px}
.addr .who{font-size:14.5px;font-weight:600}
.addr .where{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.addr input{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font-size:13.5px;margin-top:6px
}
.row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:14px}
.row+.row{border-top:1px solid var(--line)}
.row .k{color:var(--ink-2)}
.row .v{font-variant-numeric:tabular-nums}
.row.total .v{color:var(--pink);font-weight:800;font-size:19px}
.mini-item{display:flex;gap:10px;padding:12px 0;align-items:center}
.mini-thumb{
  width:56px;height:56px;border-radius:9px;background:linear-gradient(140deg,#f3f3f6,#e9e9ef);
  display:grid;place-items:center;font-size:28px;flex:0 0 auto
}
.mini-item .m-n{font-size:13.5px;line-height:1.4}
.mini-item .m-s{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.mini-item .m-p{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}

.pay-amount{text-align:center;padding:26px 0 20px;background:#fff}
.pay-amount .lb{font-size:12.5px;color:var(--ink-2)}
.pay-amount .big{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:6px}
.pay-amount .big .cur{font-size:24px}
.pay-method{display:flex;align-items:center;gap:11px;padding:15px 16px;background:#fff;margin-top:9px}
.pay-method .ic{
  width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#1677ff,#00b9ff);
  display:grid;place-items:center;font-size:18px
}
.pay-method .nm{font-size:14.5px;font-weight:500}
.pay-method .tip{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.pay-method .radio{
  margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--pink);
  display:grid;place-items:center
}
.pay-method .radio::after{content:'';width:11px;height:11px;border-radius:50%;background:var(--pink)}

/* ───────── 刷脸支付 ───────── */
#faceView{
  position:fixed;inset:0;z-index:900;background:#0b0b0f;display:none;
  flex-direction:column;align-items:center;justify-content:center;color:#fff
}
#faceView.on{display:flex}
.face-ring{position:relative;width:238px;height:238px;display:grid;place-items:center}
.face-frame{
  width:210px;height:210px;border-radius:50%;overflow:hidden;background:#15151c;
  display:grid;place-items:center;position:relative
}
.face-frame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.scan-ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid transparent;border-top-color:#22e07a;border-right-color:#22e07a;
  animation:spin 1.05s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-line{
  position:absolute;left:14px;right:14px;height:2px;
  background:linear-gradient(90deg,transparent,#22e07a,transparent);
  animation:scan 1.5s ease-in-out infinite;
}
@keyframes scan{0%,100%{top:22%}50%{top:78%}}
.face-fallback{font-size:76px;opacity:.55;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.97)}50%{opacity:.8;transform:scale(1.03)}}
.face-tip{margin-top:26px;font-size:15px;letter-spacing:1px;opacity:.9}
.face-amt{margin-top:8px;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.face-note{position:absolute;bottom:calc(28px + var(--safe-b));font-size:11px;opacity:.42;padding:0 30px;text-align:center;line-height:1.6}
.face-ok{font-size:74px;color:#22e07a;animation:pop .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.face-cancel{position:absolute;top:calc(var(--safe-t) + 16px);left:18px;font-size:22px;opacity:.7}

/* ───────── 支付成功特效 ───────── */
#fxView{position:fixed;inset:0;z-index:950;background:linear-gradient(170deg,#ff5c7a,#ff8a3d);display:none;color:#fff}
#fxView.on{display:block}
#fxCanvas{position:absolute;inset:0;width:100%;height:100%}
.fx-inner{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 24px;text-align:center
}
.fx-check{font-size:66px;animation:pop .45s cubic-bezier(.2,1.5,.4,1)}
.fx-title{font-size:27px;font-weight:800;margin-top:10px;animation:pop .5s .06s backwards cubic-bezier(.2,1.5,.4,1)}
.fx-amt{font-size:46px;font-weight:900;margin-top:14px;font-variant-numeric:tabular-nums;text-shadow:0 3px 14px rgba(0,0,0,.18)}
.fx-combo{
  font-size:32px;font-weight:900;margin-top:8px;color:#fff36b;
  text-shadow:0 2px 10px rgba(0,0,0,.25);animation:combo .55s cubic-bezier(.2,1.6,.4,1)
}
@keyframes combo{0%{transform:scale(0) rotate(-14deg)}70%{transform:scale(1.25) rotate(5deg)}100%{transform:scale(1) rotate(-3deg)}}
.fx-saved{margin-top:20px;background:rgba(255,255,255,.2);border-radius:14px;padding:12px 20px;backdrop-filter:blur(6px)}
.fx-saved .l{font-size:12px;opacity:.9}
.fx-saved .v{font-size:22px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.fx-next{margin-top:30px;background:#fff;color:var(--pink);padding:12px 34px;border-radius:24px;font-weight:700;font-size:15px}

/* ───────── 情绪卡 ───────── */
#moodView{position:fixed;inset:0;z-index:960;background:rgba(0,0,0,.45);display:none;align-items:flex-end}
#moodView.on{display:flex}
.mood-card{
  background:#fff;width:100%;max-width:520px;margin:0 auto;
  border-radius:20px 20px 0 0;padding:22px 20px calc(20px + var(--safe-b));
  animation:up .25s ease
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mood-card h3{margin:0 0 4px;font-size:18px}
.mood-card .sb{font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.mood-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mood-chip{
  padding:14px;border-radius:12px;background:#f5f5f8;font-size:15px;
  border:2px solid transparent;text-align:center
}
.mood-chip.on{border-color:var(--pink);background:var(--pink-soft);color:var(--pink);font-weight:600}
.mood-card textarea{
  width:100%;margin-top:12px;border:1px solid var(--line);border-radius:10px;
  padding:10px;font-size:14px;resize:none;height:62px
}
.mood-acts{display:flex;gap:10px;margin-top:14px}

/* ───────── 底部 tabbar ───────── */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;z-index:50;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:var(--safe-b)
}
.tab{padding:7px 0 6px;text-align:center;color:var(--ink-3);font-size:10.5px}
.tab .i{font-size:21px;display:block;line-height:1.25}
.tab.on{color:var(--pink)}
.tab .dot{
  display:inline-block;min-width:15px;height:15px;background:var(--pink);color:#fff;
  border-radius:8px;font-size:10px;line-height:15px;padding:0 4px;
  position:relative;top:-8px;left:-6px;margin-right:-8px;font-weight:700
}

/* ───────── 攒钱 / 目标 ───────── */
.goal{background:#fff;border-radius:var(--r);padding:14px 15px;margin-bottom:10px}
.goal .g-h{display:flex;justify-content:space-between;align-items:baseline}
.goal .g-n{font-size:15px;font-weight:600}
.goal .g-p{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bar{height:9px;background:#f0f0f4;border-radius:5px;overflow:hidden;margin:10px 0 8px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--pink));border-radius:5px;transition:width .5s ease}
.goal.done .bar i{background:linear-gradient(90deg,#00d68f,var(--ok))}
.goal .g-f{display:flex;gap:8px;align-items:center}
.goal .g-f .pct{font-size:12px;color:var(--ink-3);margin-right:auto;font-variant-numeric:tabular-nums}
.tiny{padding:6px 12px;border-radius:14px;background:var(--pink-soft);color:var(--pink);font-size:12.5px;font-weight:600}
.tiny.gray{background:#f2f2f5;color:var(--ink-2)}
.tiny.green{background:#e6f9f1;color:var(--ok)}

.empty{text-align:center;color:var(--ink-3);font-size:13.5px;padding:46px 24px;line-height:1.8}
.empty .big{font-size:44px;display:block;margin-bottom:10px;opacity:.5}

/* ───────── 账本 ───────── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.stat{background:#fff;border-radius:var(--r);padding:14px}
.stat .l{font-size:11.5px;color:var(--ink-2)}
.stat .v{font-size:21px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;color:var(--pink)}
.stat .v.sm{font-size:15px}
.mbar{display:flex;align-items:center;gap:9px;margin:9px 0;font-size:12.5px}
.mbar .mk{width:42px;color:var(--ink-2);flex:0 0 auto}
.mbar .mt{flex:1;height:16px;background:#f2f2f6;border-radius:8px;overflow:hidden}
.mbar .mt i{display:block;height:100%;border-radius:8px;transition:width .4s}
.mbar .mv{width:56px;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.month-h{font-size:13px;color:var(--ink-2);margin:16px 0 8px;font-weight:600}
.log{background:#fff;border-radius:var(--r);overflow:hidden}
.log-row{display:flex;gap:10px;align-items:center;padding:11px 13px}
.log-row+.log-row{border-top:1px solid var(--line)}
.log-row .le{font-size:22px;width:26px;text-align:center;flex:0 0 auto}
.log-row .le.media{height:26px;border-radius:6px;display:grid;place-items:center}
.log-row .ln{font-size:13.5px;line-height:1.35}
.log-row .ld{font-size:11px;color:var(--ink-3);margin-top:2px}
.log-row .lp{margin-left:auto;font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums;font-size:14px;flex:0 0 auto}

/* ───────── 订单 / 拆快递 ───────── */
.order{background:#fff;border-radius:var(--r);padding:13px 14px;margin-bottom:10px}
.order .o-h{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-bottom:9px}
.order .o-st{font-weight:700}
.order .o-st.ship{color:var(--orange)}
.order .o-st.arr{color:var(--ok)}
.order .o-st.done{color:var(--ink-3)}
.eta{font-size:11.5px;color:var(--ink-3);margin-top:8px}

#boxView{position:fixed;inset:0;z-index:940;background:rgba(20,14,10,.75);display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
#boxView.on{display:flex}
.box-wrap{text-align:center;padding:0 28px;width:100%;max-width:420px}
.box{
  width:158px;height:120px;margin:0 auto;position:relative;
  background:linear-gradient(160deg,#d4a373,#b8845a);border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.box .lid{
  position:absolute;top:0;left:0;right:0;height:34px;
  background:linear-gradient(160deg,#c68f5e,#a5734b);border-radius:8px 8px 0 0;
  transform-origin:top center;transition:transform .55s cubic-bezier(.3,1.4,.5,1)
}
.box .tape{position:absolute;top:0;bottom:0;left:50%;width:20px;transform:translateX(-50%);background:rgba(255,255,255,.28)}
.box.open .lid{transform:rotateX(-125deg)}
.box .pop{
  position:absolute;left:50%;top:36px;transform:translate(-50%,0) scale(0);
  font-size:56px;transition:.55s cubic-bezier(.2,1.6,.4,1) .18s
}
.box .pop.media{width:92px;height:92px;border-radius:16px;display:grid;place-items:center}
.box.open .pop{transform:translate(-50%,-72px) scale(1)}
.box-name{color:#fff;font-size:17px;font-weight:700;margin-top:26px;opacity:0;transition:.4s .5s}
.box.open ~ .box-name{opacity:1}
.note-card{
  background:#fffdf5;border-radius:12px;padding:15px 17px;margin-top:18px;
  font-size:14px;line-height:1.7;color:#4a3d2a;text-align:left;
  box-shadow:0 6px 22px rgba(0,0,0,.22);opacity:0;transform:translateY(10px);transition:.45s .7s
}
.note-card.on{opacity:1;transform:translateY(0)}
.note-card .sig{display:block;margin-top:9px;font-size:12px;color:#9c8a68;text-align:right}

/* ───────── 仓库 ───────── */
.wh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding-bottom:90px}
.wh{background:#fff;border-radius:12px;padding:11px 7px;text-align:center;position:relative}
.wh .we{font-size:34px}
.wh .wn{font-size:10.5px;color:var(--ink-2);margin-top:6px;line-height:1.3;height:27px;overflow:hidden}
.wh .wc{
  position:absolute;top:5px;right:5px;background:var(--ink);color:#fff;
  font-size:9.5px;border-radius:7px;padding:1px 5px;font-weight:700
}
.wh .wi{width:38px;height:38px;margin:0 auto;border-radius:8px;display:grid;place-items:center}

/* ───────── 弹窗 / 表单 ───────── */
.sheet{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.42);display:none;align-items:flex-end}
.sheet.on{display:flex}
.sheet-in{
  background:#fff;width:100%;max-width:520px;margin:0 auto;border-radius:20px 20px 0 0;
  padding:20px 18px calc(18px + var(--safe-b));animation:up .25s ease;max-height:88vh;overflow-y:auto
}
.sheet-in h3{margin:0 0 15px;font-size:17px}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.fld input,.fld select{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:15px;background:#fff
}
.fld input[type=file]{padding:8px;font-size:13px}
.preview{width:74px;height:74px;border-radius:10px;background-size:cover;background-position:center;background-color:#f2f2f5;margin-top:8px}

.set-row{display:flex;align-items:center;padding:14px 15px;background:#fff;font-size:14.5px}
.set-row+.set-row{border-top:1px solid var(--line)}
.set-row .sk{flex:1}
.set-row .sv{color:var(--ink-3);font-size:13px}
.switch{width:46px;height:27px;border-radius:14px;background:#e3e3e9;position:relative;transition:.2s;flex:0 0 auto}
.switch.on{background:var(--ok)}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on::after{left:22px}

.toast{
  position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:999;
  background:rgba(0,0,0,.82);color:#fff;padding:10px 18px;border-radius:22px;font-size:13.5px;
  opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;max-width:86vw
}
.toast.on{opacity:1;bottom:104px}

.sec-title{font-size:14px;font-weight:700;margin:16px 2px 9px}
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.6;padding:10px 4px 0}