/* ============================================================
   拾光好物 —— 商品售卖网站样式
   设计：移动端电商 App 风格，桌面端居中显示为手机视窗
   ============================================================ */

:root{
  --bg: #F4F1FA;
  --surface: #FFFFFF;
  --ink: #201A33;
  --muted: #8E89A3;
  --rule: #ECE8F4;
  --accent: #FF4D6A;      /* 主推珊瑚红（购买/价格） */
  --accent2: #6C5CE7;     /* 紫色（品牌/流体） */
  --accent3: #2BB673;     /* 微信绿 */
  --gold: #F2A93B;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 30px rgba(108,92,231,.10);
  --shadow-soft: 0 4px 16px rgba(32,26,51,.06);
  --maxw: 430px;
  /* 液态玻璃 Dock 变量 */
  --theme-color: rgb(108,92,231);
  --dock-bg-rgb: 255, 255, 255;
  --slider-tint-rgb: 0, 0, 0;
  --inner-shadow-color: #ffffff;
  --inner-shadow-blur: 20px;
  --inner-shadow-spread: -5px;
  --outer-shadow-blur: 24px;
  --clipL: 4px;
  --clipW: 79px;
  --clipT: 3.5px;
  --clipH: 48px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #E9E3FB 0%, transparent 55%),
    radial-gradient(900px 500px at -10% 110%, #FFE5EB 0%, transparent 55%),
    var(--bg);
  min-height:100%;
  display:flex;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
}

/* 手机视窗外壳（桌面端装饰） */
.phone-shell{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  min-height:100vh;
  background:var(--bg);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(32,26,51,.18);
}
@media(min-width:480px){
  body{ padding:24px 0; }
  .phone-shell{
    min-height:calc(100vh - 48px);
    border-radius:34px;
    overflow:hidden;
  }
}

/* 视图通用 */
.view{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--bg);
  opacity:0; visibility:hidden;
  transform:translateX(40px);
  transition:opacity .32s ease, transform .32s ease, visibility .32s;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.view.active{ opacity:1; visibility:visible; transform:translateX(0); }
.view.prev{ transform:translateX(-40px); }

/* ---------- 顶部导航条（列表/详情/订单共用） ---------- */
.navbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  height:54px; padding:0 14px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.navbar .back{
  width:34px; height:34px; border:none; background:transparent;
  font-size:22px; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  border-radius:50%;
}
.navbar .back:active{ background:var(--rule); }
.navbar .nav-title{
  font-size:17px; font-weight:700; letter-spacing:.5px; flex:1;
  text-align:center; margin-right:34px;
}

/* ============================================================
   主界面 home
   ============================================================ */
.home-scroll{ padding:18px 16px 110px; }

/* 顶部：左头像+名称  右流体展示框 */
.home-top{
  display:flex; gap:14px; align-items:stretch;
}

.merchant{
  flex:0 0 96px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
}
.merchant .avatar{
  width:78px; height:78px; border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 6px 18px rgba(108,92,231,.28);
  background:#fff;
}
.merchant .m-name{ font-size:15px; font-weight:800; }
.merchant .m-tag{
  font-size:10px; color:var(--accent2); font-weight:700;
  background:rgba(108,92,231,.12); padding:2px 8px; border-radius:20px;
  white-space:nowrap;
}

/* 流体展示框 */
.fluid-box{
  position:relative; flex:1; min-height:120px;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(135deg,#6C5CE7,#8E7BFF 40%,#FF6FA5);
  box-shadow:var(--shadow);
  display:flex; align-items:center;
}
.fluid-blobs{ position:absolute; inset:0; filter:url(#goo); }
.fluid-blobs span{
  position:absolute; display:block; border-radius:50%;
  mix-blend-mode:screen; opacity:.9;
}
.b1{ width:70px;height:70px; background:#FFD36E; top:-10px; left:14px; animation:move1 9s ease-in-out infinite; }
.b2{ width:54px;height:54px; background:#7AF7C9; top:40px; left:46%; animation:move2 11s ease-in-out infinite; }
.b3{ width:64px;height:64px; background:#FF8FB1; bottom:-12px; right:10px; animation:move3 10s ease-in-out infinite; }
.b4{ width:46px;height:46px; background:#9BB0FF; bottom:18px; left:20%; animation:move4 8s ease-in-out infinite; }
.b5{ width:40px;height:40px; background:#FFFFFF; top:6px; right:34%; animation:move5 12s ease-in-out infinite; opacity:.8; }

@keyframes move1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(26px,30px)} }
@keyframes move2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,18px)} }
@keyframes move3{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-24px,-30px)} }
@keyframes move4{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(28px,-20px)} }
@keyframes move5{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,24px)} }

.fluid-text{
  position:relative; z-index:2;
  padding:16px 16px;
  color:#fff; font-size:13px; line-height:1.7; font-weight:600;
  text-shadow:0 1px 6px rgba(60,30,90,.35);
}
.fluid-text .ft-title{ font-size:16px; font-weight:800; margin-bottom:4px; }
.fluid-text .ft-sub{ opacity:.95; font-weight:500; font-size:12px; }

/* 分类区标题 */
.section-title{
  display:flex; align-items:center; gap:10px;
  margin:26px 4px 16px;
}
.section-title .bar{ width:4px; height:18px; border-radius:4px; background:linear-gradient(var(--accent2),var(--accent)); }
.section-title h2{ font-size:18px; font-weight:800; }
.section-title .sub{ font-size:12px; color:var(--muted); margin-left:auto; }

/* 四个类别 2x2 网格 */
.cat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.cat-card{
  position:relative; border:none; cursor:pointer; text-align:left;
  border-radius:var(--radius); padding:18px 16px;
  color:#fff; overflow:hidden; min-height:118px;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cat-card:active{ transform:scale(.96); }
.cat-card .cat-icon{ font-size:34px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.cat-card .cat-name{ font-size:16px; font-weight:800; }
.cat-card .cat-sub{ font-size:11px; opacity:.9; font-weight:600; letter-spacing:1px; }
.cat-card .cat-go{
  position:absolute; right:12px; bottom:12px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.35); color:#fff;
  display:grid; place-items:center; font-size:16px; font-weight:700;
  backdrop-filter:blur(2px);
}

.home-foot{
  margin-top:28px; text-align:center; color:var(--muted); font-size:11px; line-height:1.8;
}
.home-foot .heart{ color:var(--accent); }

/* ============================================================
   二级界面 商品列表 list
   ============================================================ */
.list-banner{
  margin:14px 14px 6px; padding:16px 18px; border-radius:var(--radius);
  color:#fff; background:linear-gradient(120deg,var(--accent2),#9B7BE0);
  box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:space-between;
}
.list-banner .lb-name{ font-size:18px; font-weight:800; }
.list-banner .lb-sub{ font-size:11px; opacity:.9; margin-top:2px; }
.list-banner .lb-emoji{ font-size:34px; }

/* 列表页滚动提示条 */
.list-notice{
  margin:0 14px 8px; padding:8px 12px; border-radius:14px;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,247,230,.92);
  border:1px solid rgba(255,193,106,.45);
  box-shadow:0 2px 10px rgba(255,167,38,.12);
  overflow:hidden;
}
.list-notice .ln-icon{ flex:0 0 auto; font-size:14px; }
.list-notice .ln-track{
  flex:1; overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.list-notice .ln-text{
  display:inline-block; padding-left:100%;
  font-size:12.5px; font-weight:700; color:#B26A00;
  animation:ln-marquee 12s linear infinite;
}
@keyframes ln-marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

.prod-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:12px 14px 110px;
}
.prod-card{
  background:var(--surface); border-radius:var(--radius);
  overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-soft);
  transition:transform .16s ease;
}
.prod-card:active{ transform:scale(.97); }
.prod-thumb{
  position:relative; width:100%; aspect-ratio:1/1;
  display:grid; place-items:center; font-size:60px;
  overflow:hidden;
}
.prod-thumb .prod-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.prod-thumb .tag-row{
  position:absolute; top:8px; left:8px; display:flex; gap:4px; flex-wrap:wrap;
}
.tag{
  font-size:10px; font-weight:700; color:#fff; padding:2px 7px; border-radius:6px;
  background:linear-gradient(90deg,var(--accent),#FF7A8A);
  box-shadow:0 2px 6px rgba(255,77,106,.3);
}
.tag.gray{ background:rgba(32,26,51,.55); box-shadow:none; }
.tag.tag-welfare{ background:linear-gradient(90deg,#FF6B6B,#EE5A24); box-shadow:0 2px 6px rgba(255,107,107,.35); }
.prod-body{ padding:10px 11px 12px; }
.prod-name{
  font-size:13px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:36px;
}
.prod-meta{ display:flex; align-items:baseline; gap:6px; margin-top:8px; }
.prod-price{ font-size:18px; font-weight:800; color:var(--accent); }
.prod-price .yen{ font-size:12px; }
.prod-orig{ font-size:11px; color:var(--muted); text-decoration:line-through; }
.prod-sales{ font-size:11px; color:var(--muted); margin-top:5px; }

/* ============================================================
   三级界面 商品详情 detail
   ============================================================ */
.detail-scroll{ padding-bottom:180px; }

.detail-hero{
  position:relative; width:100%; aspect-ratio:1/1;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px;
  overflow:hidden;
}
.detail-hero .hero-img{
  grid-column:1/-1; grid-row:1/-1;
  width:100%; height:100%; object-fit:cover; display:block;
}
.detail-hero .cell{ display:grid; place-items:center; font-size:54px; }
.detail-hero .hero-name{
  position:absolute; left:14px; bottom:14px; z-index:3;
  color:#fff; font-size:20px; font-weight:800; letter-spacing:1px;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.detail-hero .pager{
  position:absolute; right:12px; bottom:12px; z-index:3;
  background:rgba(0,0,0,.4); color:#fff; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:20px;
}

/* 价格区块 */
.price-block{
  background:linear-gradient(180deg,#FFF1F3,#fff 70%);
  padding:14px 16px 16px;
}
.price-row{ display:flex; align-items:baseline; gap:10px; }
.price-now{ font-size:30px; font-weight:900; color:var(--accent); line-height:1; }
.price-now .yen{ font-size:16px; }
.price-orig{ font-size:13px; color:var(--muted); text-decoration:line-through; }
.promo-tag{
  font-size:11px; font-weight:700; color:#fff; padding:2px 8px; border-radius:6px;
  background:linear-gradient(90deg,#FF4D6A,#FF8A5C);
}
.price-side{ margin-left:auto; text-align:right; }
.price-side .ps1{ font-size:11px; color:var(--accent); font-weight:700; }
.price-side .ps2{ font-size:10px; color:var(--muted); }
.green-bar{
  margin-top:12px; background:linear-gradient(90deg,#E8F8EF,#F1FBF5);
  color:var(--accent3); font-size:11px; font-weight:700;
  padding:7px 12px; border-radius:10px; display:flex; align-items:center; gap:6px;
}

/* 标题与店铺 */
.detail-title{ padding:14px 16px 6px; }
.shop-line{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.shop-badge{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:800; color:var(--gold);
  background:linear-gradient(90deg,#FFF3DF,#FFE9C7); padding:2px 8px; border-radius:6px;
}
.d-name{ font-size:16px; font-weight:700; line-height:1.4; }
.d-tags{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.d-tags .tag{ background:linear-gradient(90deg,#2BB673,#3FD08A); box-shadow:0 2px 6px rgba(43,182,115,.3); }

/* 数据条 */
.stat-bar{
  margin:12px 16px; padding:12px; background:var(--surface); border-radius:var(--radius-sm);
  display:grid; grid-template-columns:repeat(4,1fr); box-shadow:var(--shadow-soft);
}
.stat-bar .s-item{ text-align:center; border-right:1px solid var(--rule); }
.stat-bar .s-item:last-child{ border-right:none; }
.stat-bar .s-num{ font-size:15px; font-weight:800; color:var(--accent); }
.stat-bar .s-label{ font-size:10px; color:var(--muted); margin-top:3px; }

/* 实时拼单动态 */
.live-card{
  margin:12px 16px; background:var(--surface); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-soft); overflow:hidden;
}
.live-head{ padding:10px 14px; font-size:13px; font-weight:800; display:flex; align-items:center; gap:6px; }
.live-head .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.live-row{
  display:flex; align-items:center; gap:10px; padding:9px 14px; border-top:1px solid var(--rule);
}
.live-row .av{
  width:30px;height:30px;border-radius:50%; display:grid; place-items:center; font-size:14px; color:#fff; flex:0 0 auto;
}
.live-row .lr-mid{ flex:1; min-width:0; }
.live-row .lr-name{ font-size:12px; font-weight:700; }
.live-row .lr-desc{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-row .lr-btn{
  font-size:11px; font-weight:700; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(90deg,var(--accent),#FF7A8A); padding:5px 9px; border-radius:14px;
}

/* 服务保障 */
.service-bar{
  margin:12px 16px; padding:10px 14px; background:#F7F5FC; border-radius:var(--radius-sm);
  font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 14px;
}
.service-bar b{ color:var(--ink); font-weight:600; }

/* 规格选择 */
.spec-block{ margin:12px 16px; background:var(--surface); border-radius:var(--radius-sm); box-shadow:var(--shadow-soft); padding:14px; }
.spec-row{ margin-bottom:14px; }
.spec-row:last-child{ margin-bottom:0; }
.spec-label{ font-size:13px; font-weight:700; margin-bottom:8px; }
.spec-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.spec-opt{
  font-size:12px; padding:6px 12px; border-radius:8px; cursor:pointer;
  background:#F4F1FA; color:var(--ink); border:1px solid transparent; font-weight:600;
  transition:all .15s;
}
.spec-opt.on{ background:rgba(108,92,231,.12); color:var(--accent2); border-color:var(--accent2); }
.spec-opt .opt-price{ margin-left:4px; font-weight:800; color:var(--accent); }
.spec-opt.trial-used{ opacity:.45; text-decoration:line-through; pointer-events:none; }

/* 详情图文 */
.desc-block{ margin:12px 16px; background:var(--surface); border-radius:var(--radius-sm); box-shadow:var(--shadow-soft); padding:16px; }
.desc-block h3{ font-size:14px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.desc-block p{ font-size:13px; line-height:1.8; color:#4a445c; }
.desc-strip{
  margin-top:14px; height:120px; border-radius:12px; display:grid; place-items:center;
  font-size:40px; color:rgba(255,255,255,.85); font-weight:700; letter-spacing:2px;
}

/* 底部购买栏（详情页）—— 高斯模糊 + 折射边框，与 Dock 栏同款效果 */
.buy-bar{
  position:fixed; left:12px; right:12px; bottom:90px; margin:0 auto;
  max-width:calc(var(--maxw) - 24px); z-index:40;
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:rgba(255,255,255,.15);
  border-radius:40px;
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);
  backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:
    0 16px 32px 2px rgba(0,0,0,.15),
    0 4px 12px 1px rgba(0,0,0,.08),
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -1.5px 1.5px rgba(255,255,255,.5),
    inset 1.5px 0 1.5px rgba(255,255,255,.6),
    inset -1.5px 0 1.5px rgba(255,255,255,.6);
}
.buy-bar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  padding:2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.8) 0%, transparent 40%),
    linear-gradient(-35deg, rgba(255,255,255,.8) 0%, transparent 40%),
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35));
  mix-blend-mode:plus-lighter;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.bb-icon{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; width:46px; font-size:11px; color:var(--muted); }
.bb-icon .bi{ font-size:20px; }
.bb-btns{ flex:1; display:flex; gap:8px; }
.bb-btns button{
  flex:1; border:none; cursor:pointer; height:46px; border-radius:30px;
  font-size:15px; font-weight:800; color:#fff;
}
.btn-cart{ background:linear-gradient(90deg,#FFB13B,#FF8A3D); }
.btn-buy{ background:linear-gradient(90deg,var(--accent),#FF7A8A); }
.bb-contact{ flex:1; display:flex; }
.btn-contact{
  flex:1; border:none; cursor:pointer; height:46px; border-radius:30px;
  font-size:15px; font-weight:800; color:#fff;
  background:linear-gradient(90deg,var(--accent2),#9B7BE0);
  box-shadow:0 4px 14px rgba(108,92,231,.3);
}

/* ============================================================
   订单页 order
   ============================================================ */
.order-scroll{ padding:14px 14px 200px; }
.sec-card{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  padding:14px 16px; margin-bottom:14px;
}
.addr-card{ position:relative; overflow:hidden; }
.addr-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:repeating-linear-gradient(45deg,var(--accent) 0 10px,#fff 10px 20px,var(--accent2) 20px 30px,#fff 30px 40px);
}
.addr-top{ display:flex; align-items:center; gap:10px; }
.addr-top .ai{ font-size:22px; }
.addr-name{ font-size:15px; font-weight:800; }
.addr-name .phone{ font-weight:600; color:var(--muted); margin-left:8px; font-size:13px; }
.addr-detail{ font-size:13px; color:#5a5470; margin-top:6px; line-height:1.5; }

.order-item{ display:block; }
.oi-thumb{
  width:74px; height:74px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; font-size:34px;
}
.oi-mid{ flex:1; min-width:0; }
.oi-name{ font-size:13px; font-weight:600; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.oi-spec{ font-size:11px; color:var(--muted); margin-top:4px; background:#F4F1FA; display:inline-block; padding:2px 8px; border-radius:6px; }
.oi-right{ text-align:right; flex:0 0 auto; }
.oi-price{ font-size:15px; font-weight:800; color:var(--accent); }
.oi-qty{ font-size:12px; color:var(--muted); margin-top:3px; }

.fee-row{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; }
.fee-row .muted{ color:var(--muted); }
.fee-total{ border-top:1px dashed var(--rule); margin-top:6px; padding-top:10px; }
.fee-total .ft-label{ font-size:13px; font-weight:700; }
.fee-total .ft-val{ font-size:20px; font-weight:900; color:var(--accent); }

.pay-label{ font-size:13px; font-weight:700; margin-bottom:4px; }
.pay-opt{
  display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--rule);
}
.pay-opt:last-child{ border-bottom:none; }
.pay-opt .po-icon{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:20px; color:#fff; }
.pay-opt .po-name{ font-size:14px; font-weight:700; flex:1; }
.pay-opt .po-name .po-sub{ font-size:11px; color:var(--muted); font-weight:500; margin-top:2px; }
.radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--rule); flex:0 0 auto; position:relative; }
.radio.on{ border-color:var(--accent3); background:var(--accent3); }
.radio.on::after{ content:"✓"; position:absolute; inset:0; color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; }
.pay-disabled{ opacity:.5; }
.pay-disabled .po-name{ color:var(--muted); }

/* 订单底部支付栏 —— 高斯模糊 + 折射边框，与购买栏同款效果 */
.pay-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:90px; width:calc(100% - 24px); max-width:calc(var(--maxw) - 24px); z-index:40;
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:rgba(255,255,255,.15);
  border-radius:40px;
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);
  backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:
    0 16px 32px 2px rgba(0,0,0,.15),
    0 4px 12px 1px rgba(0,0,0,.08),
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -1.5px 1.5px rgba(255,255,255,.5),
    inset 1.5px 0 1.5px rgba(255,255,255,.6),
    inset -1.5px 0 1.5px rgba(255,255,255,.6);
}
.pay-bar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  padding:2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.8) 0%, transparent 40%),
    linear-gradient(-35deg, rgba(255,255,255,.8) 0%, transparent 40%),
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35));
  mix-blend-mode:plus-lighter;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.pay-bar .pb-total{ flex:1; }
.pay-bar .pb-total .pt-label{ font-size:11px; color:var(--muted); }
.pay-bar .pb-total .pt-val{ font-size:22px; font-weight:900; color:var(--accent); }
.pay-bar .pb-btn{
  border:none; cursor:pointer; height:48px; padding:0 30px; border-radius:24px;
  font-size:16px; font-weight:800; color:#fff;
  background:linear-gradient(90deg,#07C160,#2BB673);
  box-shadow:0 6px 18px rgba(7,193,96,.35);
}

/* ============================================================
   微信支付页面（全屏）
   ============================================================ */
.mask{
  position:fixed; inset:0; z-index:60; background:rgba(20,15,35,.5);
  display:none; align-items:flex-end; justify-content:center;
  animation:fade .25s ease;
}
.mask.show{ display:flex; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.pay-page{
  position:fixed; inset:0; z-index:60; background:#fff;
  display:none; flex-direction:column; align-items:center;
  animation:fade .25s ease; overflow-y:auto;
}
.pay-page.show{ display:flex; }

.pp-content{
  width:100%; max-width:var(--maxw); min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding-bottom:40px;
}

/* 绿色渐变头部 */
.pp-header{
  width:100%; height:120px;
  background:linear-gradient(180deg, #07C160 0%, #06AD56 100%);
  display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative;
}
.pp-logo{
  width:36px; height:36px; background:rgba(255,255,255,.2);
  border-radius:8px; display:grid; place-items:center;
}
.pp-brand{
  color:#fff; font-size:18px; font-weight:600; letter-spacing:1px;
}

/* 支付金额 */
.pp-amount-area{
  text-align:center; padding:32px 20px 20px;
}
.pp-amount{
  font-size:42px; font-weight:700; color:#1A1A1A; line-height:1.2;
}
.pp-amount .pp-yen{ font-size:22px; font-weight:600; vertical-align:top; margin-right:2px; }
.pp-merch{
  font-size:14px; color:#999; margin-top:8px;
}

/* 二维码区域 */
.pp-qr-area{
  display:flex; flex-direction:column; align-items:center;
  margin:8px 0 4px;
}
.pp-qr-box{
  width:200px; height:200px; padding:12px;
  background:#fff; border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  border:1px solid #EEE;
}
.pp-qr-img{
  width:100%; height:100%; object-fit:contain; display:block;
  border-radius:8px;
}
.pp-qr-tip{
  font-size:13px; color:#999; margin-top:14px; text-align:center;
}

/* 操作按钮 */
.pp-actions{
  width:calc(100% - 40px); max-width:360px;
  margin:20px 0 16px;
}
.pp-action-btn{
  width:100%; border:none;
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:48px; border-radius:12px; cursor:pointer;
  font-size:16px; font-weight:600;
  transition:opacity .15s, transform .15s;
}
.pp-action-btn:active{ transform:scale(.98); }
.pp-scan{
  background:linear-gradient(135deg,#07C160,#06AD56); color:#fff;
  box-shadow:0 6px 18px rgba(7,193,96,.32);
}

/* 辅助链接 */
.pp-links{
  width:calc(100% - 40px); max-width:360px;
  display:flex; justify-content:center; gap:32px; margin:12px 0 24px;
}
.pp-link{
  display:flex; align-items:center; gap:5px;
  font-size:14px; color:#888; cursor:pointer; text-decoration:none;
}
.pp-link:active{ color:#576B95; }

/* 关闭按钮 */
.pp-close{
  position:fixed; top:16px; right:16px; z-index:61;
  width:32px; height:32px; border-radius:50%;
  border:none; background:rgba(255,255,255,.25); color:#fff;
  display:grid; place-items:center; cursor:pointer;
}
.pp-close:active{ background:rgba(255,255,255,.4); }

/* 支付成功 */
.success-view{
  position:fixed; inset:0; z-index:70; background:#fff;
  display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px;
}
.success-view.show{ display:flex; animation:fade .3s ease; }
.suc-ring{
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg,#07C160,#2BB673);
  display:grid; place-items:center; color:#fff; font-size:48px; font-weight:800;
  box-shadow:0 14px 40px rgba(7,193,96,.4);
  animation:pop .5s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes pop{ 0%{transform:scale(0)} 100%{transform:scale(1)} }
.suc-ring-pending{
  background:linear-gradient(135deg,#F2A93B,#FF8A5C);
  box-shadow:0 14px 40px rgba(242,169,59,.4);
  font-size:42px;
  animation:pop .5s cubic-bezier(.18,.89,.32,1.28), spin-pulse 2s ease-in-out infinite;
}
@keyframes spin-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.success-view h2{ font-size:22px; font-weight:800; margin-top:22px; }
.success-view p{ font-size:14px; color:var(--muted); margin-top:8px; }
.suc-info{ margin-top:24px; width:100%; max-width:300px; background:#F7F5FC; border-radius:14px; padding:16px; }
.suc-info .si-row{ display:flex; justify-content:space-between; font-size:13px; padding:5px 0; }
.suc-info .si-row .muted{ color:var(--muted); }
.suc-back{
  margin-top:28px; border:none; cursor:pointer; height:48px; padding:0 40px; border-radius:24px;
  background:linear-gradient(90deg,var(--accent2),#9B7BE0); color:#fff; font-size:15px; font-weight:800;
}

/* Toast */
.toast{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9);
  background:rgba(20,15,35,.92); color:#fff; font-size:13px; font-weight:600;
  padding:12px 20px; border-radius:12px; z-index:80; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; max-width:80%; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* 数量步进器 */
.qty-stepper{ display:flex; align-items:center; gap:14px; }
.qty-stepper button{
  width:30px; height:30px; border-radius:50%; border:none; background:#F4F1FA; color:var(--ink);
  font-size:18px; font-weight:800; cursor:pointer;
}
.qty-stepper .qv{ font-size:16px; font-weight:800; min-width:24px; text-align:center; }

/* ============================================================
   液态玻璃 Dock 导航栏（3 项：主页 / 购物车 / 我的）
   ============================================================ */
.bottom-dock{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:24px; z-index:1000; pointer-events:none;
}
@media(max-width:430px){ .bottom-dock{ bottom:18px; } }

.dock-wrapper{
  width:243px; height:55px; pointer-events:auto;
}

.dock-container{
  width:100%; height:100%; position:relative;
  transform-origin:center center; pointer-events:auto;
  --innerGlowOp:0; --edgeGlowOp:0; --glowRadius:1;
  touch-action:none;
}

.dock-shadow-layer{
  position:absolute; top:2px; bottom:2px; left:8px; right:8px;
  z-index:0; pointer-events:none; border-radius:25px;
  box-shadow:0 16px 32px 2px rgba(0,0,0,.15), 0 4px 12px 1px rgba(0,0,0,.08);
}

.dock-base{
  position:absolute; inset:0; z-index:1; overflow:hidden; padding:4px;
  background:rgba(var(--dock-bg-rgb),.23); transform:translateZ(0);
  -webkit-mask-image:var(--mask-solid); mask-image:var(--mask-solid);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-backdrop-filter:url(#dock-glass-filter) saturate(1.5);
  backdrop-filter:url(#dock-glass-filter) saturate(1.5);
}

.glow-layer{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(calc(100px * var(--glowRadius)) circle at var(--innerX,-999px) var(--innerY,-999px),
    rgba(255,255,255,calc(.5 * var(--innerGlowOp))) 0%,
    rgba(255,255,255,calc(.1 * var(--innerGlowOp))) 50%, transparent 80%);
  -webkit-mask-image:var(--mask-solid); mask-image:var(--mask-solid);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

.dock-base::after{
  content:""; position:absolute; inset:0; z-index:10; pointer-events:none;
  background:
    radial-gradient(calc(120px * var(--glowRadius)) circle at var(--edgeX,-999px) var(--edgeY,-999px),
      rgba(255,255,255,calc(.7 * var(--edgeGlowOp))) 0%,
      rgba(255,255,255,calc(.15 * var(--edgeGlowOp))) 50%, transparent 80%),
    linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%),
    linear-gradient(-35deg, rgba(255,255,255,.4) 0%, transparent 50%);
  mix-blend-mode:plus-lighter;
  -webkit-mask-image:var(--mask-hollow); mask-image:var(--mask-hollow);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

.ripple-layer{
  position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none;
  -webkit-mask-image:var(--mask-solid); mask-image:var(--mask-solid);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

.ripple-wave{
  position:absolute; width:120px; height:120px; border-radius:50%;
  pointer-events:none; opacity:1;
  background:radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 60%);
  transform:translate(-50%,-50%) scale(0);
  animation:ripple-anim .6s cubic-bezier(.25,1,.5,1) forwards;
}
@keyframes ripple-anim{ to{ opacity:0; transform:translate(-50%,-50%) scale(2.2); } }

.dock-items-wrap, .dock-active-layer{
  position:absolute; inset:0; z-index:998;
}

.dock-items-wrap{
  color:var(--ink); touch-action:none;
  -webkit-mask-image:linear-gradient(#000,#000), var(--slider-mask-solid);
  mask-image:linear-gradient(#000,#000), var(--slider-mask-solid);
  -webkit-mask-size:100% 100%, var(--clipW) var(--clipH);
  mask-size:100% 100%, var(--clipW) var(--clipH);
  -webkit-mask-position:0 0, var(--clipL) var(--clipT);
  mask-position:0 0, var(--clipL) var(--clipT);
  -webkit-mask-repeat:no-repeat, no-repeat;
  mask-repeat:no-repeat, no-repeat;
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}

.dock-item{
  position:absolute; top:3.5px; width:81.5px; height:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:inherit; cursor:pointer; z-index:3;
  transform-origin:center center;
  transition:transform .3s cubic-bezier(.25,1,.5,1);
}
.dock-item:nth-child(1){ left:3px; }
.dock-item:nth-child(2){ left:83px; }
.dock-item:nth-child(3){ left:162px; }

.dock-item svg{ width:25px; height:25px; }
.dock-item span{
  margin-top:4px; font-size:10px; font-weight:800;
  letter-spacing:.5px; text-transform:uppercase;
}

.dock-active-layer{
  color:var(--theme-color); opacity:1; pointer-events:none;
  -webkit-mask-image:var(--slider-mask-solid);
  mask-image:var(--slider-mask-solid);
  -webkit-mask-size:var(--clipW) var(--clipH);
  mask-size:var(--clipW) var(--clipH);
  -webkit-mask-position:var(--clipL) var(--clipT);
  mask-position:var(--clipL) var(--clipT);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

.dock-container.expanding .dock-active-layer .dock-item{ transform:scale(1.1); }

#frosted-slider{
  position:absolute; top:3.5px; left:4px;
  width:79px; height:48px; z-index:999; overflow:hidden;
  opacity:1; pointer-events:auto; touch-action:none;
  background-color:rgba(var(--slider-tint-rgb),.15);
  box-shadow:0 2px 8px rgba(0,0,0,.06); transform:translateZ(0);
  -webkit-mask-image:var(--slider-mask-solid);
  mask-image:var(--slider-mask-solid);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-backdrop-filter:url(#liquid-glass-dispersion-filter);
  backdrop-filter:url(#liquid-glass-dispersion-filter);
  transition:background-color .4s ease, box-shadow .4s ease;
}

#frosted-slider.expanding{
  background-color:rgba(var(--slider-tint-rgb),.06);
  box-shadow:
    inset 0 0 var(--inner-shadow-blur) var(--inner-shadow-spread) var(--inner-shadow-color),
    0 2px var(--outer-shadow-blur) rgba(0,0,0,.2);
}

#frosted-slider::after{
  content:""; position:absolute; inset:0; z-index:9999;
  pointer-events:none; opacity:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9) 0%, transparent 50%),
    linear-gradient(-35deg, rgba(255,255,255,.9) 0%, transparent 50%);
  mix-blend-mode:plus-lighter;
  -webkit-mask-image:var(--slider-mask-hollow);
  mask-image:var(--slider-mask-hollow);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  transition:opacity .4s ease;
}

#frosted-slider.expanding::after{ opacity:1; }

/* ============================================================
   购物车视图 cart
   ============================================================ */
.cart-scroll{ padding:14px 14px 110px; }
.cart-empty{
  text-align:center; padding:60px 20px;
}
.cart-empty svg{ width:64px; height:64px; margin:0 auto 16px; color:var(--muted); }
.cart-empty .ce-text{ color:var(--muted); font-size:15px; margin-bottom:16px; }
.cart-empty .ce-btn{
  display:inline-block; background:var(--accent2); color:#fff; border:none;
  padding:10px 24px; border-radius:22px; font-weight:700; font-size:14px; cursor:pointer;
}

/* ============================================================
   我的视图 profile
   ============================================================ */
.profile-scroll{ padding:0 0 110px; }
.profile-header{
  background:linear-gradient(135deg, var(--accent2), #9B7BE0);
  padding:30px 20px 24px; text-align:center; color:#fff;
}
.profile-avatar{
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,.25); margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; border:3px solid rgba(255,255,255,.4);
}
.profile-name{ margin-top:12px; font-size:18px; font-weight:800; }
.profile-sub{ font-size:12px; opacity:.85; margin-top:4px; }
.profile-stats{
  display:flex; justify-content:space-around;
  padding:16px 0; background:rgba(255,255,255,.12);
}
.profile-stat{ text-align:center; }
.profile-stat .ps-num{ font-size:18px; font-weight:800; }
.profile-stat .ps-label{ font-size:11px; opacity:.8; margin-top:2px; }

.profile-menu{ background:var(--surface); margin:14px; border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden; }
.profile-menu-item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--rule); cursor:pointer;
  transition:background .15s;
}
.profile-menu-item:last-child{ border-bottom:none; }
.profile-menu-item:active{ background:var(--bg); }
.profile-menu-item .pmi-icon{ font-size:20px; margin-right:12px; }
.profile-menu-item .pmi-text{ flex:1; font-size:14px; font-weight:600; }
.profile-menu-item .pmi-arrow{ color:var(--muted); font-size:16px; }

/* ============================================================
   缺货 / 单点不售 样式
   ============================================================ */
.bb-stockout{
  flex:1; text-align:center; height:46px; line-height:46px;
  font-size:15px; font-weight:800; color:var(--muted);
  background:rgba(142,137,163,.15); border-radius:24px;
}
.stock-mask{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  display:grid; place-items:center; color:#fff; font-size:18px; font-weight:800;
  letter-spacing:2px; z-index:2;
}
.stock-tag{ background:rgba(142,137,163,.7) !important; }

/* ============================================================
   购物车商品列表
   ============================================================ */
.cart-list{ padding:0; }
.cart-item{
  display:flex; gap:12px; align-items:center; padding:14px;
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  margin-bottom:10px;
}
.cart-item .ci-thumb{
  width:64px; height:64px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; font-size:30px;
}
.cart-item .ci-mid{ flex:1; min-width:0; }
.cart-item .ci-name{ font-size:14px; font-weight:700; }
.cart-item .ci-spec{
  font-size:11px; color:var(--muted); margin-top:4px;
  background:#F4F1FA; display:inline-block; padding:2px 8px; border-radius:6px;
}
.cart-item .ci-bottom{ display:flex; align-items:baseline; justify-content:space-between; margin-top:8px; }
.cart-item .ci-price{ font-size:15px; font-weight:800; color:var(--accent); }
.cart-item .ci-qty{ font-size:12px; color:var(--muted); }
.cart-item .ci-remove{
  flex:0 0 auto; color:var(--muted); font-size:16px; padding:8px; cursor:pointer;
}
.cart-item .ci-remove:active{ color:var(--accent); }

/* 购物车结算栏 —— 高斯模糊 + 折射边框，与 Dock 栏同款效果 */
.cart-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:90px; width:calc(100% - 24px); max-width:calc(var(--maxw) - 24px); z-index:40;
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:rgba(255,255,255,.15);
  border-radius:40px;
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);
  backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:
    0 16px 32px 2px rgba(0,0,0,.15),
    0 4px 12px 1px rgba(0,0,0,.08),
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -1.5px 1.5px rgba(255,255,255,.5),
    inset 1.5px 0 1.5px rgba(255,255,255,.6),
    inset -1.5px 0 1.5px rgba(255,255,255,.6);
}
.cart-bar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  padding:2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.8) 0%, transparent 40%),
    linear-gradient(-35deg, rgba(255,255,255,.8) 0%, transparent 40%),
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35));
  mix-blend-mode:plus-lighter;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.cart-bar .cb-total{ flex:1; }
.cart-bar .cb-total .ct-label{ font-size:11px; color:var(--muted); }
.cart-bar .cb-total .ct-val{ font-size:22px; font-weight:900; color:var(--accent); }
.cart-bar .cb-btn{
  border:none; cursor:pointer; height:48px; padding:0 30px; border-radius:24px;
  font-size:16px; font-weight:800; color:#fff;
  background:linear-gradient(90deg,var(--accent),#FF7A8A);
  box-shadow:0 6px 18px rgba(255,77,106,.35);
}

/* ============================================================
   地址编辑弹窗
   ============================================================ */
.addr-sheet{
  width:100%; max-width:var(--maxw); background:#fff; border-radius:22px 22px 0 0;
  padding:18px 20px calc(20px + env(safe-area-inset-bottom)); animation:slideup .3s ease;
}
.as-head{
  text-align:center; font-size:16px; font-weight:800;
  padding-bottom:14px; border-bottom:1px solid var(--rule);
}
.as-form{ margin-top:16px; }
.as-field{ margin-bottom:16px; }
.as-field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.as-field input, .as-field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--rule); border-radius:10px;
  font-size:14px; font-family:inherit; resize:none; background:#FAFAFE;
  transition:border-color .15s, background .15s;
}
.as-field input:focus, .as-field textarea:focus{
  outline:none; border-color:var(--accent2); background:#fff;
}
.as-confirm{
  margin-top:8px; width:100%; height:48px; border:none; cursor:pointer; border-radius:24px;
  background:var(--accent2); color:#fff; font-size:16px; font-weight:800;
  box-shadow:0 6px 18px rgba(108,92,231,.35);
}
.as-cancel{
  width:100%; margin-top:10px; height:44px; border:none; background:transparent;
  color:var(--muted); font-size:14px; cursor:pointer;
}

/* 地址编辑提示 */
.addr-edit{ font-size:12px; color:var(--accent2); font-weight:700; flex:0 0 auto; }

/* ============================================================
   订单页多商品行
   ============================================================ */
.oi-row{
  display:flex; gap:12px; align-items:center; padding:8px 0;
  border-bottom:1px solid var(--rule);
}
.oi-row:last-child{ border-bottom:none; }

/* ============================================================
   登录界面
   ============================================================ */
.login-scroll{
  padding:60px 30px 120px; display:flex; flex-direction:column; align-items:center;
  min-height:100%; background:linear-gradient(180deg,#F4F1FA 0%,#fff 40%);
}
.login-logo{
  width:88px; height:88px; border-radius:24px; font-size:44px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent2),#9B7BE0);
  box-shadow:0 12px 30px rgba(108,92,231,.3); margin-bottom:18px;
}
.login-title{ font-size:26px; font-weight:900; color:var(--ink); }
.login-sub{ font-size:13px; color:var(--muted); margin-top:6px; margin-bottom:36px; }
.login-form{ width:100%; max-width:340px; }
.login-field{
  margin-bottom:16px; position:relative;
}
.login-field input{
  width:100%; height:50px; padding:0 16px; border:1.5px solid var(--rule);
  border-radius:14px; font-size:15px; font-family:inherit; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.login-field input:focus{
  outline:none; border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(108,92,231,.12);
}
.login-captcha-row{ display:flex; gap:10px; align-items:center; }
.login-captcha-row input{ flex:1; }
.captcha-box{
  flex:0 0 auto; width:120px; height:50px; border-radius:14px;
  background:linear-gradient(135deg,#E9E3FB,#FFE5EB); cursor:pointer;
  display:grid; place-items:center; font-size:24px; font-weight:900;
  letter-spacing:6px; color:var(--accent2); font-style:italic;
  user-select:none; border:1.5px solid var(--rule);
  text-decoration:line-through; text-decoration-color:rgba(108,92,231,.3);
}
.login-forgot-row{
  display:flex; justify-content:flex-end; margin-bottom:22px;
}
.login-register{
  font-size:13px; color:var(--accent2); font-weight:700; cursor:pointer;
}
.login-btn{
  width:100%; height:52px; border:none; border-radius:26px;
  font-size:17px; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--accent2),#9B7BE0);
  box-shadow:0 8px 24px rgba(108,92,231,.35);
  transition:transform .1s;
}
.login-btn:active{ transform:scale(.98); }

/* ============================================================
   我的订单界面
   ============================================================ */
.orders-scroll{ padding:14px 14px 120px; }
.order-card{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  padding:16px; margin-bottom:14px;
}
.oc-top{ display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--rule); }
.oc-status{
  margin-left:auto; font-size:12px; font-weight:700; padding:3px 10px; border-radius:10px;
}
.oc-status.shipped{ background:rgba(43,182,115,.12); color:#2BB673; }
.oc-status.pending{ background:rgba(242,169,59,.12); color:#F2A93B; }
.oc-status.done{ background:rgba(142,137,163,.12); color:var(--muted); }
.oc-status.cancelled{ background:rgba(255,77,106,.12); color:var(--accent); }
.oc-body{ padding:12px 0; }
.oc-item{ display:flex; gap:10px; align-items:center; padding:6px 0; }
.oc-thumb{
  width:52px; height:52px; border-radius:10px; flex:0 0 auto;
  display:grid; place-items:center; font-size:24px;
}
.oc-mid{ flex:1; min-width:0; }
.oc-name{ font-size:13px; font-weight:600; }
.oc-spec{ font-size:11px; color:var(--muted); margin-top:3px; }
.oc-price{ font-size:13px; font-weight:700; color:var(--accent); }
.oc-qty{ font-size:11px; color:var(--muted); }
.oc-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:1px solid var(--rule);
}
.oc-total{ font-size:13px; color:var(--muted); }
.oc-total b{ font-size:16px; color:var(--ink); font-weight:800; }
.oc-actions{ display:flex; gap:8px; }
.oc-btn{
  padding:7px 16px; border-radius:18px; font-size:12px; font-weight:700; cursor:pointer;
  border:1.5px solid var(--rule); background:#fff; color:var(--ink); transition:all .15s;
}
.oc-btn:active{ transform:scale(.96); }
.oc-btn.danger{ border-color:var(--accent); color:var(--accent); }
.oc-btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.oc-btn.disabled{ opacity:.4; pointer-events:none; }
.orders-empty{
  text-align:center; padding:80px 20px; color:var(--muted);
}
.orders-empty .oe-icon{ font-size:56px; margin-bottom:14px; }
.orders-empty .oe-text{ font-size:14px; }

/* ============================================================
   我的收藏界面
   ============================================================ */
.fav-scroll{ padding:14px 14px 120px; }
.fav-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.fav-card{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  overflow:hidden; cursor:pointer; transition:transform .15s;
}
.fav-card:active{ transform:scale(.97); }
.fav-thumb{
  height:130px; display:grid; place-items:center; font-size:48px; position:relative;
}
.fav-remove{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; display:grid; place-items:center;
  font-size:14px; cursor:pointer; z-index:2;
}
.fav-body{ padding:10px 12px 14px; }
.fav-name{ font-size:13px; font-weight:600; line-height:1.4; }
.fav-price{ font-size:16px; font-weight:800; color:var(--accent); margin-top:6px; }
.fav-empty{
  text-align:center; padding:80px 20px; color:var(--muted);
}
.fav-empty .fe-icon{ font-size:56px; margin-bottom:14px; }
.fav-empty .fe-text{ font-size:14px; }
.fav-empty .fe-btn{
  margin-top:18px; padding:10px 28px; border:none; border-radius:22px;
  background:var(--accent2); color:#fff; font-size:14px; font-weight:700; cursor:pointer;
}

/* ============================================================
   收货地址界面
   ============================================================ */
.addr-list-scroll{ padding:14px 14px 90px; }
.addr-item{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  padding:16px; margin-bottom:12px; position:relative;
}
.ai-name{ font-size:15px; font-weight:800; }
.ai-name .ai-phone{ font-weight:600; color:var(--muted); margin-left:10px; font-size:13px; }
.ai-detail{ font-size:13px; color:#5a5470; margin-top:8px; line-height:1.5; }
.ai-tag{
  display:inline-block; font-size:11px; font-weight:700; color:var(--accent2);
  background:rgba(108,92,231,.1); padding:2px 8px; border-radius:6px; margin-top:8px;
}
.ai-actions{
  display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--rule);
}
.ai-act{
  padding:5px 14px; border-radius:14px; font-size:12px; font-weight:600; cursor:pointer;
  border:1px solid var(--rule); background:#fff; color:var(--ink);
}
.ai-act.danger{ color:var(--accent); border-color:rgba(255,77,106,.3); }
.addr-add-bar{
  position:fixed; left:0; right:0; bottom:90px; padding:10px 16px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px); z-index:35;
  max-width:var(--maxw); margin:0 auto;
}
.addr-add-bar button{
  width:100%; height:48px; border:none; border-radius:24px;
  font-size:15px; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--accent2),#9B7BE0);
  box-shadow:0 6px 20px rgba(108,92,231,.3);
}
.addr-empty{
  text-align:center; padding:80px 20px; color:var(--muted);
}
.addr-empty .ae-icon{ font-size:56px; margin-bottom:14px; }
.addr-empty .ae-text{ font-size:14px; }

/* ============================================================
   注册弹窗
   ============================================================ */
.reg-sheet{
  width:100%; max-width:var(--maxw); background:#fff; border-radius:22px 22px 0 0;
  padding:18px 20px calc(20px + env(safe-area-inset-bottom)); animation:slideup .3s ease;
}

/* ============================================================
   通用确认弹窗（居中）
   ============================================================ */
.confirm-sheet{
  width:78%; max-width:300px; background:#fff; border-radius:20px;
  padding:30px 24px 20px; text-align:center; animation:popin .25s ease;
}
@keyframes popin{
  from{ opacity:0; transform:scale(.85); }
  to{ opacity:1; transform:scale(1); }
}
.cs-icon{ font-size:42px; margin-bottom:14px; }
.cs-text{ font-size:16px; font-weight:700; color:var(--ink); line-height:1.5; }
.cs-btns{ display:flex; gap:12px; margin-top:22px; }
.cs-cancel-btn{
  flex:1; height:44px; border:1.5px solid var(--rule); border-radius:22px;
  background:#fff; color:var(--ink); font-size:14px; font-weight:700; cursor:pointer;
}
.cs-ok-btn{
  flex:1; height:44px; border:none; border-radius:22px;
  background:var(--accent); color:#fff; font-size:14px; font-weight:700; cursor:pointer;
}
#confirm-mask, #cancel-mask, #contact-mask, #pay-notice-mask{ align-items:center; justify-content:center; }

/* 支付提示弹窗 */
.pay-notice-sheet{ width:84%; max-width:320px; }
.pay-notice-text{
  font-size:14px; font-weight:600; color:#555; line-height:1.7;
  text-align:left; padding:0 4px;
}
.pay-notice-text strong{ color:var(--accent); }
#pay-notice-ok{ flex:1; background:var(--accent3); }

/* ============================================================
   联系商家弹窗（定制商品）
   ============================================================ */
.contact-sheet{
  width:80%; max-width:310px; background:#fff; border-radius:20px;
  padding:30px 24px 20px; text-align:center; animation:popin .25s ease;
}
.ct-icon{ font-size:42px; margin-bottom:10px; }
.ct-title{ font-size:17px; font-weight:800; color:var(--ink); }
.ct-desc{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.5; }
.ct-qq-box{
  margin:18px 0 4px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg, rgba(108,92,231,.08), rgba(255,77,106,.08));
  border:1.5px dashed rgba(108,92,231,.3);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.ct-qq-label{ font-size:12px; font-weight:700; color:var(--muted); }
.ct-qq-num{ font-size:22px; font-weight:900; color:var(--accent2); letter-spacing:1px; }