/* ============================================================
   灵串 DIY · 水晶手串小程序 原型 · 设计系统
   移动端 375 × 812
   ============================================================ */
:root{
  --ink:#211A32;
  --ink2:#57506F;
  --ink3:#968FAB;
  --bg:#F7F4FC;
  --card:#FFFFFF;
  --pur:#6F52B8;
  --pur-d:#4A3282;
  --pur-m:#B29BEA;
  --pur-l:#F0E9FD;
  --pink:#E197B7;
  --pink-l:#FDEEF5;
  --mint:#7FC3B6;
  --gold:#C8A65A;
  --line:#EEE8F8;
  --sd:0 10px 26px rgba(82,54,140,.09);
  --sd2:0 3px 10px rgba(82,54,140,.06);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  height:100vh;overflow:hidden;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:13px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
ul,li{margin:0;padding:0;list-style:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;border:none;background:none;padding:0;color:inherit;cursor:pointer;}
input,textarea{font-family:inherit;border:none;outline:none;background:none;color:inherit;}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{display:none;}

/* ---------------- 状态栏 ---------------- */
.statusbar{
  flex:none;height:44px;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 22px 6px;font-size:13px;font-weight:600;letter-spacing:.2px;position:relative;z-index:60;
}
.statusbar .sb-time{font-family:-apple-system,"SF Pro Text",sans-serif;}
.statusbar svg{display:block;}
.statusbar.on-dark,.statusbar.on-dark svg{color:#fff;}
.statusbar.on-dark svg [stroke]{stroke:#fff;}
.statusbar.on-dark svg [fill]{fill:#fff;}

/* ---------------- 导航栏 ---------------- */
.navbar{
  flex:none;height:46px;display:flex;align-items:center;gap:10px;
  padding:0 16px;position:relative;z-index:50;
}
.navbar .nav-title{
  font-size:17px;font-weight:600;letter-spacing:.5px;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.navbar.center .nav-title{text-align:center;}
.navbar .nav-back{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  margin-left:-6px;border-radius:50%;
}
.navbar .nav-right{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--ink2);}
.navbar .nav-right .pill{
  padding:5px 11px;border-radius:20px;background:rgba(255,255,255,.72);
  border:1px solid var(--line);font-size:11.5px;color:var(--pur);font-weight:500;
}
.navbar.on-dark,.navbar.on-dark .nav-title,.navbar.on-dark .nav-right{color:#fff;}
.navbar.on-dark .pill{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff;}

/* ---------------- 底部 Tabbar ---------------- */
.tabbar{
  flex:none;height:58px;display:flex;align-items:stretch;
  background:rgba(255,255,255,.94);backdrop-filter:blur(18px);
  border-top:1px solid var(--line);padding-bottom:0;z-index:70;
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:10px;color:var(--ink3);letter-spacing:.2px;padding-top:4px;
}
.tabbar a svg{width:22px;height:22px;stroke:#A9A2BA;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.tabbar a.active{color:var(--pur);font-weight:600;}
.tabbar a.active svg{stroke:var(--pur);}
.tabbar a.active svg .dotfill{fill:var(--pur);stroke:none;}

/* ---------------- 通用 ---------------- */
.sec{padding:0 16px;}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 16px;margin:20px 0 10px;}
.sec-head h3{margin:0;font-size:15px;font-weight:600;letter-spacing:.3px;}
.sec-head h3 em{font-style:normal;font-size:11px;color:var(--ink3);font-weight:400;margin-left:6px;letter-spacing:0;}
.sec-head .more{font-size:11px;color:var(--ink3);display:flex;align-items:center;gap:2px;}
.card{background:var(--card);border-radius:18px;box-shadow:var(--sd2);}
.divider{height:8px;background:linear-gradient(180deg,#F1ECFA,#F7F4FC);}
.hr{height:1px;background:var(--line);margin:0 16px;}
.muted{color:var(--ink3);}
.tiny{font-size:10.5px;color:var(--ink3);line-height:1.5;}
.row{display:flex;align-items:center;}
.gap8{gap:8px;}.gap10{gap:10px;}.gap12{gap:12px;}
.grow{flex:1;min-width:0;}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 标签 */
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;font-size:10px;line-height:1.5;background:var(--pur-l);color:var(--pur);}
.tag.pink{background:var(--pink-l);color:#C2708F;}
.tag.gold{background:#FBF3E2;color:#A5822F;}
.tag.mint{background:#E9F6F3;color:#4E9587;}
.tag.gray{background:#F3F1F8;color:var(--ink3);}
.tag.solid{background:linear-gradient(135deg,#8C6BD8,#6E4FBF);color:#fff;}

/* 价格 */
.price{color:#C0507F;font-weight:700;font-family:-apple-system,"SF Pro Display",sans-serif;}
.price small{font-size:10px;font-weight:600;margin-right:1px;}
.price .cur{font-size:12px;}
.price-lg{font-size:21px;}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:22px;font-size:13px;font-weight:600;padding:10px 18px;transition:transform .15s;}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,#8A6BCE 0%,#5B3F9E 100%);color:#fff;box-shadow:0 6px 16px rgba(105,68,190,.28);}
.btn-ghost{background:#fff;color:var(--pur);border:1px solid #DED2F7;}
.btn-soft{background:var(--pur-l);color:var(--pur);}
.btn-line{background:#fff;color:var(--ink2);border:1px solid var(--line);}
.btn-block{display:flex;width:100%;}
.btn-sm{padding:7px 13px;font-size:12px;border-radius:16px;}

/* 头像 */
.avatar{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;letter-spacing:.5px;}
.av1{background:linear-gradient(135deg,#C0A6F0,#8E6BD8);}
.av2{background:linear-gradient(135deg,#F3B6C8,#DE86A8);}
.av3{background:linear-gradient(135deg,#9BD8CC,#63B7A6);}
.av4{background:linear-gradient(135deg,#F0CE93,#D3A45B);}
.av5{background:linear-gradient(135deg,#A8C2F2,#7A9CE0);}

/* ---------------- 水晶珠 ---------------- */
.bead{
  position:absolute;border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 18%, transparent 42%),
    radial-gradient(circle at 68% 78%, var(--c2) 0%, transparent 62%),
    radial-gradient(circle at 42% 40%, var(--c1) 0%, var(--c2) 96%);
  box-shadow:inset -2px -3px 7px rgba(40,20,70,.22), inset 2px 2px 5px rgba(255,255,255,.5), 0 3px 8px rgba(80,50,130,.16);
  transform:translate(-50%,-50%);
}
.bracelet{position:relative;width:100%;}
.bracelet .hole{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff 0%,#F3EEFB 70%,#E6DEF6 100%);box-shadow:inset 0 1px 3px rgba(80,50,130,.18);transform:translate(-50%,-50%);}
.thread-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);transform:translate(-50%,-50%);}

/* 图片占位（渐变质感图） */
.ph{position:relative;overflow:hidden;background:linear-gradient(150deg,#F4ECFB,#E6DBF8);}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.75),transparent 55%);}
.ph.g2{background:linear-gradient(150deg,#FCEFF4,#F4D5E3);}
.ph.g3{background:linear-gradient(150deg,#EAF7F4,#CFECE5);}
.ph.g4{background:linear-gradient(150deg,#F7F2E6,#EADFC8);}
.ph.g5{background:linear-gradient(150deg,#EFF3FC,#D8E2F6);}

/* ---------------- 搜索框 ---------------- */
.searchbar{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:18px;
  background:rgba(255,255,255,.86);border:1px solid #EFEAF9;color:var(--ink3);font-size:12px;
  box-shadow:0 2px 8px rgba(82,54,140,.05);
}
.searchbar svg{flex:none;stroke:#B1A9C4;fill:none;stroke-width:1.7;}

/* ---------------- Chips / 分段 ---------------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 16px 2px;}
.chips::-webkit-scrollbar{display:none;}
.chip{
  flex:none;padding:6px 13px;border-radius:15px;font-size:12px;color:var(--ink2);
  background:#fff;border:1px solid var(--line);white-space:nowrap;
}
.chip.active{background:linear-gradient(135deg,#8A6BCE,#5B3F9E);color:#fff;border-color:transparent;font-weight:600;box-shadow:0 4px 12px rgba(105,68,190,.24);}
.chip.soft{background:var(--pur-l);color:var(--pur);border-color:transparent;}
.seg{display:flex;background:#F2EEFA;border-radius:12px;padding:3px;gap:2px;}
.seg span{flex:1;text-align:center;font-size:11.5px;padding:5px 0;border-radius:9px;color:var(--ink2);}
.seg span.on{background:#fff;color:var(--pur);font-weight:600;box-shadow:0 2px 6px rgba(82,54,140,.1);}

/* 进度 / 开关 */
.switch{width:38px;height:21px;border-radius:11px;background:#DED8EC;position:relative;transition:.2s;flex:none;}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:.2s;}
.switch.on{background:linear-gradient(135deg,#8A6BCE,#5B3F9E);}
.switch.on::after{left:19px;}

/* ---------------- 底部操作栏 ---------------- */
.actionbar{
  flex:none;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding:10px 14px 14px;z-index:70;
}
.actionbar .ab-row{display:flex;align-items:center;gap:10px;}

/* ---------------- 弹窗 ---------------- */
.mask{
  position:fixed;inset:0;background:rgba(30,18,52,.42);backdrop-filter:blur(2px);
  display:none;align-items:flex-end;justify-content:center;z-index:200;
}
.mask.show{display:flex;}
.sheet{
  width:100%;background:#fff;border-radius:22px 22px 0 0;padding:20px 18px 20px;
  animation:up .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes up{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet h4{margin:0 0 4px;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:space-between;}
.sheet .sheet-sub{font-size:11.5px;color:var(--ink3);margin-bottom:16px;}
.sheet .field{margin-bottom:14px;}
.sheet .field label{display:block;font-size:12px;color:var(--ink2);margin-bottom:6px;}
.sheet .input{background:#F7F4FC;border-radius:12px;padding:11px 13px;font-size:13px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;}
.sheet .input .ph-txt{color:#B7B0C8;}
.sheet .opt-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;font-size:13px;}
.sheet .btns{display:flex;gap:10px;margin-top:8px;}
.sheet .btns .btn{flex:1;}
.sheet .close{width:26px;height:26px;border-radius:50%;background:#F3EFFB;display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:14px;font-weight:400;}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  background:rgba(33,22,54,.9);color:#fff;font-size:12.5px;padding:11px 18px;border-radius:14px;
  opacity:0;pointer-events:none;transition:.22s;z-index:300;max-width:240px;text-align:center;line-height:1.5;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ---------------- 列表行 ---------------- */
.list-row{display:flex;align-items:center;gap:11px;padding:14px 16px;background:#fff;font-size:13.5px;}
.list-row .li-ic{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--pur-l);flex:none;}
.list-row .li-ic svg{width:16px;height:16px;stroke:var(--pur);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.list-row .li-ar{color:#C7C0D8;font-size:14px;}
.list-row + .list-row{border-top:1px solid #F6F3FC;}

/* ---------------- 空状态 ---------------- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 20px;text-align:center;}
.empty p{margin:0;font-size:12px;color:var(--ink3);line-height:1.7;}

/* ---------------- 支付 / 优惠券 通用组件 ---------------- */
.pay-card{display:flex;align-items:center;gap:12px;background:#FAF7FE;border-radius:14px;padding:13px 14px;font-size:12.5px;}
.pay-way{display:flex;gap:8px;margin:12px 0 16px;}
.pay-way .pw{flex:1;text-align:center;font-size:11.5px;color:var(--ink2);background:#F7F4FC;border:1px solid transparent;border-radius:11px;padding:9px 6px;}
.pay-way .pw.on{color:#6F52B8;background:#F3EAFE;border-color:#DCCCF7;font-weight:600;}

.coupon-pick{display:flex;align-items:center;gap:12px;padding:13px 12px;border:1px solid #EFEAF8;border-radius:14px;margin-bottom:9px;background:#fff;}
.coupon-pick.on{border-color:#D9C4F6;background:#FBF7FF;}
.coupon-pick .cp-l{width:62px;flex:none;text-align:center;border-right:1px dashed #E6DDF5;padding-right:8px;}
.coupon-pick .cp-l b{display:block;font-size:17px;color:#C2708F;font-family:-apple-system,sans-serif;letter-spacing:-.5px;}
.coupon-pick .cp-l span{font-size:9px;color:var(--ink3);}
.coupon-pick .cp-ck{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#9678D6,#6F52B8);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;flex:none;}
.coupon-pick .cp-ck.off{background:transparent;border:1.3px solid #DCD4EA;}

.stepper{display:flex;align-items:center;border:1px solid #E8E2F3;border-radius:9px;overflow:hidden;height:26px;}
.stepper span{width:24px;text-align:center;font-size:13px;color:var(--ink2);line-height:24px;}
.stepper b{width:30px;text-align:center;font-size:11.5px;font-weight:500;border-left:1px solid #EFEAF8;border-right:1px solid #EFEAF8;line-height:24px;}