/* =========================================================================
   GIVO DESIGN 商城 · 前台样式（H5 / 小程序风格）
   风格：暖黑奢华（暖炭黑底 + 香槟金强调）· 内容基准宽 390px
   两种布局模式见文件末尾「布局模式」段：app（生产整屏）/ prototype（演示手机壳）
   ========================================================================= */
:root{
  --page:#14110D;
  --card:#211D18;
  --card-2:#2B2620;
  --line:#363028;
  --tan:#C9A876;
  --tan-l:#E4C99C;
  --tan-bg:rgba(201,168,118,.13);
  --price:#E2B482;
  --tx:#F3EEE3;
  --tx2:#A79D8E;
  --tx3:#6F675A;
  --ok:#8FB8A8;
  --warn:#D0855E;
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#EFEBE4;color:var(--tx);
  min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  gap:28px;padding:28px 20px 60px;flex-wrap:wrap;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button{font-family:inherit}

/* ---------- phone shell ---------- */
.phone{
  width:390px;height:780px;background:var(--page);
  border-radius:44px;border:10px solid #17140F;
  position:relative;overflow:hidden;flex:0 0 auto;
  box-shadow:0 24px 60px rgba(30,24,16,.45),0 0 0 1px rgba(201,168,118,.12);
}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:118px;height:24px;background:#17140F;border-radius:0 0 15px 15px;z-index:60}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}
.statusbar{height:46px;flex:0 0 auto;display:flex;align-items:center;
  padding:0 24px;font-size:13px;font-weight:500;color:var(--tx);position:relative;z-index:50}
.statusbar .r{margin-left:auto;display:flex;gap:5px;align-items:center;font-size:11px;color:var(--tx2)}
.navbar{height:44px;flex:0 0 auto;display:none;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;position:relative;letter-spacing:.4px;color:var(--tx);z-index:45}
.navbar.show{display:flex}
.navbar .back{position:absolute;left:12px;font-size:20px;line-height:1;cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--tx);background:var(--card);border:1px solid var(--line)}
.navbar .back:active{background:var(--card-2)}
.navbar .act{position:absolute;right:14px;font-size:12.5px;color:var(--tan);cursor:pointer;font-weight:500}

/* ---------- scroll body ---------- */
.body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:none}
.body::-webkit-scrollbar{display:none}
.body.lock{overflow:hidden;display:flex;flex-direction:column}
.page{display:none}
.page.active{display:block}
.page.active.fill{display:flex;flex-direction:column;flex:1;min-height:0}

/* ---------- tabbar ---------- */
.tabbar{flex:0 0 auto;height:60px;display:flex;background:#1B1712;
  border-top:1px solid var(--line);position:relative;z-index:40;padding-bottom:2px}
.tabbar.hide{display:none}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:10px;color:var(--tx3);cursor:pointer;user-select:none;position:relative}
.tab.on{color:var(--tan)}
.tab svg{width:22px;height:22px;display:block}
.tab .dot{position:absolute;top:7px;margin-left:16px;min-width:15px;height:15px;
  background:var(--tan);color:#1A1510;border-radius:9px;font-size:9px;padding:0 4px;font-weight:700;
  display:none;align-items:center;justify-content:center}
.tab .dot.show{display:flex}

/* ---------- hero / search ---------- */
.hero{padding:2px 16px 18px;position:relative}
.hero::before{content:"";position:absolute;right:-60px;top:-70px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(201,168,118,.16),transparent 65%);pointer-events:none}
.search{height:40px;background:var(--card-2);border:1px solid var(--line);border-radius:20px;
  display:flex;align-items:center;padding:0 14px;gap:8px;font-size:13px;color:var(--tx3);cursor:pointer}
.search:active{border-color:rgba(201,168,118,.35)}
.brandline{display:flex;align-items:center;gap:10px;margin:15px 2px 0}
.brandline .logo{width:40px;height:40px;border-radius:11px;background:rgba(201,168,118,.10);
  border:1px solid rgba(201,168,118,.28);display:flex;align-items:center;justify-content:center;
  padding:5px;box-shadow:0 4px 14px rgba(201,168,118,.18)}
.brandline .logo img{width:100%;height:100%;object-fit:contain;display:block}
.brandline h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.6px;color:var(--tx)}
.brandline p{margin:3px 0 0;font-size:10px;letter-spacing:2.5px;color:var(--tx2);text-transform:uppercase}

/* ---------- carousel ---------- */
.slides{position:relative;height:140px;margin:14px 16px 0;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 20px 18px;opacity:0;transition:opacity .5s}
.slide.on{opacity:1}
.slide h3{margin:0 0 5px;font-size:18px;font-weight:600;color:#F7F2E8;letter-spacing:.5px}
.slide p{margin:0;font-size:11.5px;color:rgba(247,242,232,.75);letter-spacing:.4px}
.slide .badge{display:inline-flex;width:fit-content;margin-bottom:8px;padding:4px 10px;border-radius:12px;
  background:rgba(201,168,118,.22);color:var(--tan-l);font-size:9.5px;letter-spacing:1.5px;
  border:1px solid rgba(201,168,118,.35)}
.s1{background:radial-gradient(circle at 78% 22%,rgba(255,214,150,.34),transparent 42%),
  radial-gradient(circle at 20% 80%,rgba(201,168,118,.14),transparent 50%),
  linear-gradient(120deg,#241C12,#3B2E1D 60%,#191410)}
.s2{background:radial-gradient(circle at 22% 25%,rgba(255,228,180,.30),transparent 45%),
  linear-gradient(120deg,#33261A,#4A3823 55%,#201810)}
.s3{background:radial-gradient(circle at 80% 70%,rgba(201,168,118,.20),transparent 48%),
  linear-gradient(120deg,#1C1A17,#33302A 60%,#14120F)}
.dots{position:absolute;bottom:12px;right:16px;display:flex;gap:5px;z-index:5}
.dots i{width:5px;height:5px;border-radius:50%;background:rgba(243,238,227,.3);display:block;transition:all .3s}
.dots i.on{background:var(--tan);width:16px;border-radius:3px}

/* ---------- kingkong ---------- */
.kk{display:grid;grid-template-columns:repeat(5,1fr);gap:2px 0;padding:15px 8px;background:var(--card);
  margin:12px 12px 0;border-radius:18px;border:1px solid var(--line)}
.kk-a{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;padding:5px 0;border-radius:10px}
.kk-a:active{background:var(--card-2)}
.kk-i{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:var(--tan-bg);border:1px solid rgba(201,168,118,.22)}
.kk-a span{font-size:10.5px;color:var(--tx2)}

/* ---------- section ---------- */
.sec{margin:20px 12px 0}
.sec-hd{display:flex;align-items:baseline;padding:0 6px;margin-bottom:11px}
.sec-hd h2{margin:0;font-size:15.5px;font-weight:600;letter-spacing:.5px;color:var(--tx)}
.sec-hd small{margin-left:8px;font-size:10.5px;color:var(--tan);letter-spacing:.5px}
.sec-hd a{margin-left:auto;font-size:11px;color:var(--tx3);text-decoration:none;letter-spacing:.3px;cursor:pointer}

/* ---------- goods ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;transition:transform .12s}
.card:active{transform:scale(.98)}
.thumb{height:136px;display:flex;align-items:center;justify-content:center;font-size:38px;
  position:relative;flex:0 0 auto}
.thumb .tag{position:absolute;top:9px;left:9px;background:linear-gradient(135deg,#D8B888,#B08D5C);
  color:#211A10;font-size:9.5px;padding:3px 8px;border-radius:6px;font-weight:700;letter-spacing:.4px}
.thumb .tag.n{background:rgba(20,17,13,.65);color:var(--tan-l);border:1px solid rgba(201,168,118,.4);backdrop-filter:blur(4px)}
.thumb .off{position:absolute;inset:0;background:rgba(18,15,11,.62);display:flex;align-items:center;
  justify-content:center;font-size:11.5px;color:var(--tx2);letter-spacing:1px}
.card-b{padding:11px 12px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.card-b h3{margin:0;font-size:12.5px;font-weight:500;line-height:1.5;color:var(--tx);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-b p{margin:0;font-size:10px;color:var(--tx3);letter-spacing:.3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.prow{display:flex;align-items:baseline;margin-top:auto;padding-top:3px}
.price{color:var(--price);font-weight:600;font-size:15.5px;letter-spacing:.2px}
.price i{font-size:10.5px;font-style:normal;font-weight:500}
.price s{color:var(--tx3);font-size:10px;font-weight:400;margin-left:5px}
.sold{margin-left:auto;font-size:10px;color:var(--tx3)}

/* ---------- rows / cart ---------- */
.row{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:12px;margin-bottom:10px;align-items:flex-start}
.row .rt{width:70px;height:70px;border-radius:13px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:28px;position:relative;overflow:hidden}
.row .rb{flex:1;min-width:0}
.row .rb h4{margin:0 0 5px;font-size:13px;font-weight:500;line-height:1.45;color:var(--tx)}
.row .rb .sp{font-size:10.5px;color:var(--tx3);margin-bottom:7px;letter-spacing:.3px}
.chk{width:19px;height:19px;border-radius:50%;border:1.5px solid #4A4438;flex:0 0 auto;
  margin-top:25px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.chk.on{background:var(--tan);border-color:var(--tan)}
.chk.on::after{content:"\2713";color:#1A1510;font-size:11px;font-weight:700}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;width:fit-content;background:var(--card-2)}
.stepper b{width:25px;height:25px;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--tx2);cursor:pointer;font-weight:400}
.stepper b:active{color:var(--tan)}
.stepper span{width:32px;text-align:center;font-size:12.5px;color:var(--tx)}

/* ---------- bars ---------- */
.cartbar,.detbar,.paybar{flex:0 0 auto;background:#1B1712;border-top:1px solid var(--line);
  display:none;align-items:center;padding:0 14px;gap:9px}
.cartbar.show,.detbar.show,.paybar.show{display:flex}
.cartbar{height:56px;font-size:12px;color:var(--tx2)}
.detbar{height:62px;padding:0 12px;gap:6px}
.detbar .ic{flex:0 0 auto;width:44px;display:flex;flex-direction:column;align-items:center;
  gap:2px;font-size:9.5px;color:var(--tx2);cursor:pointer}
.detbar .ic svg{width:19px;height:19px}
.detbar .btns{display:flex;flex:1;gap:8px;margin-left:5px}
.detbar .btns button{flex:1;border:none;border-radius:22px;padding:11px 0;font-size:13px;
  font-weight:700;cursor:pointer;letter-spacing:.4px}
.detbar .btns .a{background:var(--card-2);color:var(--tan-l);border:1px solid rgba(201,168,118,.35)}
.detbar .btns .b{background:linear-gradient(135deg,#D8B888,#B8905C);color:#211A10;
  box-shadow:0 4px 14px rgba(201,168,118,.25)}
.paybar{height:60px;justify-content:flex-end}
.btn{background:linear-gradient(135deg,#D8B888,#B8905C);color:#211A10;border:none;border-radius:22px;
  padding:10px 24px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  letter-spacing:.4px;box-shadow:0 4px 16px rgba(201,168,118,.28)}
.btn:active{opacity:.85}
.btn:disabled{opacity:.4;box-shadow:none}
.btn.ghost{background:var(--card-2);color:var(--tan-l);border:1px solid rgba(201,168,118,.35);box-shadow:none}
.btn.wide{width:100%;border-radius:24px;padding:13px}
.btn.sm{padding:6px 14px;font-size:12px;border-radius:16px}
.btn.mini{padding:5px 12px;font-size:11px;border-radius:14px;box-shadow:none}
.btn.plain{background:transparent;color:var(--tx2);border:1px solid var(--line);box-shadow:none}

/* ---------- segment / category ---------- */
.segbar{padding:14px 12px 10px;flex:0 0 auto}
.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.seg button{flex:1;border:none;background:transparent;color:var(--tx3);font-size:12.5px;
  font-weight:500;letter-spacing:.4px;padding:9px 0;border-radius:11px;cursor:pointer;transition:all .22s}
.seg button.on{background:var(--tan-bg);color:var(--tan-l);font-weight:600;box-shadow:inset 0 0 0 1px rgba(201,168,118,.35)}
.catwrap{display:flex;height:100%;min-height:0}
.catside{width:90px;flex:0 0 auto;background:#171310;overflow-y:auto;scrollbar-width:none;
  border-right:1px solid var(--line);position:relative}
.catside::-webkit-scrollbar{display:none}
.catside a{display:block;padding:16px 8px;font-size:12px;color:var(--tx3);text-align:center;
  text-decoration:none;border-left:2.5px solid transparent;letter-spacing:.5px;cursor:pointer}
.catside a.on{color:var(--tan);font-weight:600;border-left-color:var(--tan);
  background:linear-gradient(90deg,rgba(201,168,118,.10),transparent)}
.catmain{flex:1;overflow-y:auto;padding:16px 14px;scrollbar-width:none}
.catmain::-webkit-scrollbar{display:none}
.catmain h3{margin:0 0 11px;font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--tx)}
.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px 8px;margin-bottom:24px}
.sub-a{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer}
.sub-a .si{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;font-size:23px;background:var(--card);border:1px solid var(--line)}
.sub-a span{font-size:10.5px;color:var(--tx2);text-align:center;line-height:1.3}
.catbar{position:absolute;left:0;width:2.5px;height:44px;border-radius:2px;
  background:linear-gradient(180deg,#D8B888,#B08D5C);transition:transform .3s cubic-bezier(.22,.9,.28,1);
  pointer-events:none;box-shadow:0 0 10px rgba(201,168,118,.45)}

/* ---------- detail ---------- */
.det-hero{height:280px;display:flex;align-items:center;justify-content:center;font-size:88px;
  position:relative;border-bottom:1px solid var(--line)}
.det-hero .wm{position:absolute;right:14px;bottom:12px;width:46px;opacity:.5;pointer-events:none;z-index:2;
  filter:drop-shadow(0 2px 8px rgba(201,168,118,.25))}
.det-hero::after{content:"";position:absolute;left:50%;top:18%;transform:translateX(-50%);
  width:230px;height:150px;background:radial-gradient(ellipse,rgba(255,222,168,.20),transparent 62%);pointer-events:none}
.det-block{background:var(--card);padding:15px 16px;margin:8px 12px 0;border-radius:18px;border:1px solid var(--line)}
.det-block h2{margin:10px 0 9px;font-size:16px;font-weight:600;line-height:1.5;color:var(--tx);letter-spacing:.3px}
.tagline{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.tagline span{font-size:10px;color:var(--tan-l);background:var(--tan-bg);padding:3.5px 9px;
  border-radius:7px;border:1px solid rgba(201,168,118,.22);letter-spacing:.4px}
.priceline{display:flex;align-items:baseline;gap:8px}
.priceline .price{font-size:27px}
.priceline .price i{font-size:13px}
.metarow{display:flex;gap:14px;font-size:11px;color:var(--tx2);margin-top:10px;letter-spacing:.3px;flex-wrap:wrap}
.opt{margin-bottom:15px}
.opt-t{font-size:12px;color:var(--tx2);margin-bottom:9px;font-weight:500;letter-spacing:.4px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 15px;border-radius:9px;border:1px solid var(--line);font-size:12px;
  cursor:pointer;background:var(--card-2);color:var(--tx2);letter-spacing:.3px}
.chip.on{border-color:var(--tan);background:var(--tan-bg);color:var(--tan-l);font-weight:600}
.svc{display:flex;gap:16px;font-size:11.5px;color:var(--tx2);letter-spacing:.3px;flex-wrap:wrap}
.svc b{color:var(--tan);font-weight:600}
.det-imgs{padding:4px 12px 0}
.det-imgs .ph{height:155px;border-radius:18px;margin-bottom:10px;display:flex;align-items:center;
  justify-content:center;font-size:11.5px;color:var(--tx3);letter-spacing:.5px;border:1px solid var(--line);
  background:radial-gradient(circle at 30% 25%,rgba(255,222,168,.10),transparent 55%),var(--card)}
.review{background:var(--card);padding:15px 16px;margin:8px 12px 0;border-radius:18px;border:1px solid var(--line)}
.rev{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.rev:last-child{border:none;margin:0;padding:0}
.rev-hd{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.av{width:26px;height:26px;border-radius:50%;background:var(--tan-bg);color:var(--tan-l);
  border:1px solid rgba(201,168,118,.3);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;flex:0 0 auto}
.rev-hd b{font-size:12px;font-weight:500;color:var(--tx)}
.stars{color:var(--tan);font-size:11px;letter-spacing:2px}
.rev p{margin:0;font-size:12px;color:var(--tx2);line-height:1.7}

/* 参数表 */
.spectable{width:100%;border-collapse:collapse;font-size:12px}
.spectable td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--tx2)}
.spectable tr:last-child td{border:none}
.spectable td:first-child{width:38%;color:var(--tx3)}
.spectable td:last-child{color:var(--tx)}

/* ---------- mine ---------- */
.mine-hero{padding:58px 18px 62px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 85% 10%,rgba(201,168,118,.18),transparent 45%),
  radial-gradient(circle at 10% 90%,rgba(201,168,118,.08),transparent 40%),
  linear-gradient(160deg,#241E15,#171310)}
.mine-hero .u{display:flex;align-items:center;gap:13px;position:relative;z-index:1;cursor:pointer}
.mine-hero .wm{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:148px;
  opacity:.55;pointer-events:none;filter:drop-shadow(0 2px 12px rgba(201,168,118,.22))}
.mine-hero .u .av{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#D8B888,#B08D5C);
  color:#211A10;font-size:21px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(201,168,118,.3)}
.mine-hero .u .av.guest{background:var(--card-2);color:var(--tx2);border:1px solid var(--line);box-shadow:none;font-size:24px}
.mine-hero h2{margin:0;font-size:16.5px;font-weight:600;letter-spacing:.5px;color:var(--tx)}
.mine-hero p{margin:4px 0 0;font-size:11px;color:var(--tx2);letter-spacing:.4px}
.vip{display:inline-flex;align-items:center;gap:4px;margin-top:8px;background:var(--tan-bg);
  border:1px solid rgba(201,168,118,.35);padding:3px 10px;border-radius:11px;font-size:10px;
  color:var(--tan-l);letter-spacing:.5px}
.order-panel{background:var(--card);border:1px solid var(--line);border-radius:18px;
  margin:-42px 12px 0;position:relative;padding:15px 6px 13px;box-shadow:0 10px 30px rgba(15,12,8,.45)}
.op-hd{display:flex;align-items:center;padding:0 13px 12px;border-bottom:1px solid var(--line)}
.op-hd h3{margin:0;font-size:13.5px;font-weight:600;letter-spacing:.5px;color:var(--tx)}
.op-hd a{margin-left:auto;font-size:11px;color:var(--tx3);text-decoration:none;cursor:pointer}
.op-grid{display:grid;grid-template-columns:repeat(5,1fr);padding-top:14px}
.op-a{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative}
.op-a .oi{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:18px;background:var(--card-2);border:1px solid var(--line)}
.op-a span{font-size:10px;color:var(--tx2)}
.op-a .badge{position:absolute;top:-5px;right:4px;background:var(--tan);color:#1A1510;font-size:9px;
  min-width:15px;height:15px;border-radius:8px;display:none;align-items:center;justify-content:center;
  padding:0 3px;font-weight:700;box-shadow:0 2px 8px rgba(201,168,118,.4)}
.op-a .badge.show{display:flex}
.assets{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border:1px solid var(--line);
  border-radius:18px;margin:10px 12px 0;padding:15px 0}
.asset{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.asset b{font-size:16px;color:var(--tan-l);font-weight:600;letter-spacing:.3px}
.asset span{font-size:10.5px;color:var(--tx3);letter-spacing:.4px}
.tools{background:var(--card);border:1px solid var(--line);border-radius:18px;margin:10px 12px 0;overflow:hidden}
.tool{display:flex;align-items:center;padding:15px;cursor:pointer;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--tx);letter-spacing:.3px}
.tool:last-child{border:none}
.tool .ti{margin-right:11px;font-size:15px;width:30px;height:30px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:var(--card-2);border:1px solid var(--line)}
.tool .ar{margin-left:auto;color:var(--tx3);font-size:15px}
.tool .val{margin-left:auto;color:var(--tx3);font-size:11.5px;margin-right:8px}
.tool .ar.noval{margin-left:8px}
.mine-pad{height:20px}

/* ---------- 表单 / 登录 ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;margin:10px 12px 0;padding:16px}
.panel.tight{padding:6px 16px}
.field{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.field:last-child{border:none}
.field label{width:64px;flex:0 0 auto;font-size:12.5px;color:var(--tx2)}
.field input,.field select,.field textarea{
  flex:1;background:transparent;border:none;outline:none;color:var(--tx);
  font-size:13.5px;font-family:inherit;min-width:0}
.field input::placeholder,.field textarea::placeholder{color:var(--tx3)}
.field .suffix{font-size:12px;color:var(--tan);cursor:pointer;white-space:nowrap}
.field .suffix.off{color:var(--tx3);cursor:default}
.field.col{flex-direction:column;align-items:stretch;gap:8px}
.field.col label{width:auto}
.field.col textarea{background:var(--card-2);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;resize:none;height:70px;font-size:12.5px;line-height:1.6}
.auth-head{padding:34px 24px 22px;text-align:center}
.auth-head img{width:60px;height:60px;object-fit:contain;margin-bottom:14px}
.auth-head h1{margin:0;font-size:20px;font-weight:600;letter-spacing:.6px}
.auth-head p{margin:8px 0 0;font-size:11.5px;color:var(--tx2);letter-spacing:.4px}
.auth-tabs{display:flex;gap:22px;padding:0 24px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.auth-tabs div{padding:0 2px 11px;font-size:14px;color:var(--tx3);cursor:pointer;position:relative;font-weight:500}
.auth-tabs div.on{color:var(--tan-l);font-weight:600}
.auth-tabs div.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;
  width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,#D8B888,#B08C5C)}
.agree{display:flex;align-items:flex-start;gap:9px;padding:16px 4px 4px;font-size:11px;color:var(--tx2);line-height:1.7}
.agree .chk{margin:1px 0 0;width:16px;height:16px;flex:0 0 auto}
.agree .chk::after{font-size:10px}
.agree em{color:var(--tan-l);font-style:normal}
.auth-alt{display:flex;align-items:center;gap:12px;margin:26px 0 18px;color:var(--tx3);font-size:11px}
.auth-alt::before,.auth-alt::after{content:"";flex:1;height:1px;background:var(--line)}
.wx-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px;
  border-radius:24px;border:1px solid rgba(143,184,168,.4);background:rgba(143,184,168,.10);
  color:#A9CDBF;font-size:13.5px;font-weight:600;cursor:pointer;letter-spacing:.4px}
.wx-btn:active{opacity:.85}
.err{font-size:11.5px;color:var(--warn);padding:8px 2px 0;min-height:16px}
.hintline{font-size:10.5px;color:var(--tx3);line-height:1.8;padding:12px 4px 0}

/* ---------- 列表页 / 订单 ---------- */
.filterbar{display:flex;gap:0;padding:12px 14px 10px;align-items:center;background:var(--page);
  position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}
.filterbar .st{font-size:12.5px;color:var(--tx3);cursor:pointer;margin-right:18px;letter-spacing:.3px}
.filterbar .st.on{color:var(--tan);font-weight:600}
.filterbar .rn{margin-left:auto;font-size:11px;color:var(--tx3)}
.ordertabs{display:flex;gap:2px;padding:12px 8px 0;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);background:var(--page)}
.ordertabs::-webkit-scrollbar{display:none}
.ordertabs div{flex:1;min-width:64px;text-align:center;padding:0 4px 11px;font-size:12.5px;
  color:var(--tx3);cursor:pointer;position:relative;white-space:nowrap}
.ordertabs div.on{color:var(--tan-l);font-weight:600}
.ordertabs div.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,#D8B888,#B08C5C)}
.ordercard{background:var(--card);border:1px solid var(--line);border-radius:18px;margin:11px 12px 0;overflow:hidden}
.order-hd{display:flex;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line);font-size:11.5px}
.order-hd .no{color:var(--tx3);letter-spacing:.3px}
.order-hd .st{margin-left:auto;font-weight:600;font-size:12px}
.order-items{padding:4px 15px}
.order-item{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.order-item:last-child{border:none}
.order-item .it{width:58px;height:58px;border-radius:12px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:24px}
.order-item .ib{flex:1;min-width:0}
.order-item h4{margin:0 0 4px;font-size:12.5px;font-weight:500;line-height:1.45;color:var(--tx);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.order-item .sp{font-size:10.5px;color:var(--tx3);margin-bottom:5px}
.order-item .ip{display:flex;align-items:baseline}
.order-item .ip .price{font-size:13.5px}
.order-item .ip .q{margin-left:auto;font-size:11px;color:var(--tx3)}
.order-foot{padding:12px 15px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.order-foot .sum{margin-left:auto;font-size:12px;color:var(--tx2)}
.order-foot .sum b{color:var(--price);font-size:15px;font-weight:600}
.order-acts{display:flex;gap:8px;margin-left:auto}
.order-note{padding:0 15px 12px;font-size:11px;color:var(--tx3);line-height:1.6}
.addr-card{background:var(--card);border:1px solid var(--line);border-radius:18px;margin:12px 12px 0;
  padding:15px;display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.addr-card.free{border:1px dashed rgba(201,168,118,.4);background:var(--card-2)}
.addr-card .an{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:6px}
.addr-card .an em{font-style:normal;color:var(--tx2);font-weight:400;font-size:12px;margin-left:9px}
.addr-card .at{font-size:11.5px;color:var(--tx2);line-height:1.7}
.addr-card .ad{position:absolute;right:34px}
.addr-tag{display:inline-block;font-size:9px;color:var(--tan-l);border:1px solid rgba(201,168,118,.4);
  background:var(--tan-bg);border-radius:5px;padding:1.5px 6px;margin-right:7px;vertical-align:middle}
.kv{display:flex;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.kv:last-child{border:none}
.kv .k{color:var(--tx2);flex:0 0 auto}
.kv .v{margin-left:auto;color:var(--tx);text-align:right}
.kv .v.gold{color:var(--tan-l)}
.kv .v.price{font-size:14px}
.kv .v .sub{display:block;font-size:10.5px;color:var(--tx3);margin-top:3px}
.kv.big{padding:14px 0}
.kv.big .k{font-size:13px;font-weight:600;color:var(--tx)}
.kv.big .v.price{font-size:19px}
.success-wrap{padding:44px 24px 0;text-align:center}
.success-wrap .tick{width:74px;height:74px;border-radius:50%;margin:0 auto 20px;
  background:var(--tan-bg);border:1px solid rgba(201,168,118,.4);display:flex;
  align-items:center;justify-content:center;font-size:34px;color:var(--tan-l);
  box-shadow:0 6px 30px rgba(201,168,118,.22)}
.success-wrap h2{margin:0 0 9px;font-size:18px;font-weight:600;letter-spacing:.5px}
.success-wrap p{margin:0;font-size:12px;color:var(--tx2);line-height:1.8}
.sheet-mask{position:absolute;inset:0;background:rgba(10,8,6,.62);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:80}
.sheet-mask.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#1E1A15;border-radius:22px 22px 0 0;
  border-top:1px solid rgba(201,168,118,.22);transform:translateY(102%);transition:transform .3s cubic-bezier(.22,.9,.3,1);
  z-index:85;max-height:76%;display:flex;flex-direction:column}
.sheet.on{transform:none}
.sheet-hd{display:flex;align-items:center;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.sheet-hd h3{margin:0;font-size:14.5px;font-weight:600;letter-spacing:.4px}
.sheet-hd .x{margin-left:auto;color:var(--tx3);font-size:19px;cursor:pointer;line-height:1}
.sheet-bd{overflow-y:auto;padding:14px 18px 6px;scrollbar-width:none}
.sheet-bd::-webkit-scrollbar{display:none}
.sheet-ft{padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.sheet-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.sheet-item:last-child{border:none}
.sheet-item.on .si-t{color:var(--tan-l)}
.sheet-item .si-t{font-size:12.5px;margin-bottom:4px;color:var(--tx)}
.sheet-item .si-s{font-size:11px;color:var(--tx3);line-height:1.6}
.sheet-item .si-r{margin-left:auto;flex:0 0 auto;color:var(--tan);font-size:13px;padding-top:2px}
.sheet-item .del{color:var(--warn);font-size:11px;margin-left:10px;flex:0 0 auto}
.picked{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.picked .pi{width:56px;height:56px;border-radius:13px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:24px}

/* ---------- 搜索页 ---------- */
.kwbox{display:flex;align-items:center;gap:9px;margin:14px 16px 0;height:40px;
  background:var(--card-2);border:1px solid var(--line);border-radius:20px;padding:0 14px}
.kwbox input{flex:1;background:transparent;border:none;outline:none;color:var(--tx);font-size:13px;min-width:0}
.kwbox input::placeholder{color:var(--tx3)}
.kwtags{display:flex;gap:8px;flex-wrap:wrap;padding:14px 16px 0}
.kwtags span{font-size:11.5px;color:var(--tx2);background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:6px 13px;cursor:pointer}
.kwtags span:active{border-color:rgba(201,168,118,.4);color:var(--tan-l)}

/* ---------- admin entry (手机端) ---------- */
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 12px}
.admin-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;cursor:pointer}
.admin-card .ic{font-size:22px;margin-bottom:9px}
.admin-card h4{margin:0 0 4px;font-size:13.5px;font-weight:600;color:var(--tx)}
.admin-card p{margin:0;font-size:10.5px;color:var(--tx3);line-height:1.6}
.statrow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 12px;margin-top:10px}
.statbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.statbox b{display:block;font-size:19px;color:var(--tan-l);font-weight:600;letter-spacing:.2px}
.statbox span{font-size:10.5px;color:var(--tx3)}

/* ---------- misc ---------- */
.empty{text-align:center;padding:64px 0;color:var(--tx3)}
.empty .e{font-size:44px;margin-bottom:12px}
.empty p{margin:0 0 16px;font-size:12.5px}
.safe{height:16px}
.note-warn{margin:10px 12px 0;padding:11px 13px;border-radius:12px;font-size:11px;line-height:1.7;
  background:rgba(208,133,94,.10);border:1px solid rgba(208,133,94,.3);color:#DDA383}
.side-panel{width:300px;flex:0 0 auto;background:#FFFDF9;border-radius:18px;padding:22px;
  box-shadow:0 8px 30px rgba(30,24,16,.12);align-self:flex-start;position:sticky;top:28px;
  border:1px solid #E5DFD3;max-height:calc(100vh - 56px);overflow-y:auto}
.side-panel h3{margin:0 0 4px;font-size:14px;font-weight:600;color:#2A2620}
.side-panel .sub{font-size:11.5px;color:#8A8375;margin:0 0 16px;line-height:1.7}
.pg{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;font-size:12.5px;
  color:#5F594E;cursor:pointer;margin-bottom:4px}
.pg:hover{background:#F3EEE4}
.pg.on{background:#F1E6D2;color:#7A5E32;font-weight:600}
.pg .n{width:20px;height:20px;border-radius:6px;background:#EDE8DD;display:flex;align-items:center;
  justify-content:center;font-size:10.5px;font-weight:600;color:#8A8375;flex:0 0 auto}
.pg.on .n{background:#C9A876;color:#FFFDF9}
.side-panel hr{border:none;border-top:1px solid #EAE4D8;margin:16px 0}
.legend{font-size:11px;color:#8A8375;line-height:2}
.legend b{color:#4A443A;font-weight:600}
.legend code{background:#F1ECE2;padding:1px 5px;border-radius:4px;font-size:10.5px;color:#7A5E32}
.toast{position:absolute;left:50%;bottom:130px;transform:translate(-50%,10px);
  background:rgba(201,168,118,.96);color:#211A10;font-size:12.5px;padding:10px 20px;
  border-radius:22px;opacity:0;transition:all .25s;pointer-events:none;z-index:99;
  white-space:nowrap;font-weight:600;letter-spacing:.3px;max-width:80%;overflow:hidden;
  text-overflow:ellipsis;box-shadow:0 8px 24px rgba(201,168,118,.35)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.sbar{position:absolute;left:0;right:0;height:2px;z-index:70;top:90px;pointer-events:none;
  opacity:0;transition:opacity .3s}
.sbar.on{opacity:1}
.sbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#B8905C,#E4C99C);
  box-shadow:0 0 8px rgba(201,168,118,.6)}

/* ---------- scroll-driven animation ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.rv{opacity:0}
.rv.in{animation:rise .62s cubic-bezier(.22,.9,.28,1) both}
.rv.d1.in{animation-delay:.06s}
.rv.d2.in{animation-delay:.12s}
.rv.d3.in{animation-delay:.18s}
.rv.d4.in{animation-delay:.24s}
.sub-a.rv.in,.op-a.rv.in{animation-name:fadeUp;animation-duration:.44s}
.ordercard.rv.in,.addr-card.rv.in,.admin-card.rv.in{animation-name:popIn;animation-duration:.5s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;animation:none!important;transform:none!important}
  .slide{transition:none}
}
@media(max-width:820px){html[data-layout="prototype"] .side-panel{display:none}}

/* =========================================================================
   布局模式（由 index.html <head> 内联脚本在首屏前设定）
     html[data-layout="app"]        生产默认：整屏 H5 商城，铺满视口 + 真机安全区
     html[data-layout="prototype"]  对内演示：手机壳 mockup + 右侧说明面板
                                     （仅 ?demo=1 或本地 file:// 打开）
   下面所有 app 规则都用 html[data-layout="app"] 提权，
   不依赖书写顺序，也不影响 admin.html（后台自带样式、不用本文件）。
   ========================================================================= */

/* ---------- app：整屏铺满 ---------- */
html[data-layout="app"]{height:100%;background:var(--page)}
html[data-layout="app"] body{
  display:block;height:100%;min-height:100%;overflow:hidden;
  padding:0;gap:0;background:var(--page);
  overscroll-behavior:none;                 /* 关掉整页橡皮筋 / 下拉刷新 */
}
html[data-layout="app"] .phone{
  width:100%;max-width:none;height:100vh;height:100dvh;
  margin:0 auto;border:0;border-radius:0;
  box-shadow:none;background:var(--page);
}
html[data-layout="app"] .notch,
html[data-layout="app"] .side-panel{display:none}

/* 假状态栏 → 变成真机顶部安全区占位条（非刘海设备 env()=0，自动收起为 0 高） */
html[data-layout="app"] .statusbar{
  height:0;min-height:0;padding:0;background:var(--page);
}
@supports(height:env(safe-area-inset-top,0px)){
  html[data-layout="app"] .statusbar{height:env(safe-area-inset-top,0px)}
}
html[data-layout="app"] .statusbar>*{display:none!important}

/* 滚动进度条：贴到导航栏下沿（导航栏 44px） */
html[data-layout="app"] .sbar{
  top:44px;
  top:calc(44px + env(safe-area-inset-top,0px));
}

/* 底部各操作条 / Tab 栏：叠加 iPhone home indicator 安全区
   （env() 不支持时整条声明作废，自动回落到上面的固定高度） */
html[data-layout="app"] .tabbar{
  height:calc(60px + env(safe-area-inset-bottom,0px));
  padding-bottom:calc(2px + env(safe-area-inset-bottom,0px));
}
html[data-layout="app"] .cartbar{
  height:calc(56px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html[data-layout="app"] .detbar{
  height:calc(62px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html[data-layout="app"] .paybar{
  height:calc(60px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html[data-layout="app"] .body{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}

/* 桌面端：居中单列 H5（不套手机壳，也不让内容拉成超宽行） */
@media(min-width:821px){
  html[data-layout="app"] body{background:#0B0907}
  html[data-layout="app"] .phone{
    max-width:480px;
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    box-shadow:0 0 70px rgba(0,0,0,.55);
  }
}

/* ---------- 文案开关：生产不展示「固定验证码」等演示话术 ---------- */
html[data-layout="app"] [data-demo-only]{display:none!important}
html[data-layout="prototype"] [data-prod-only]{display:none!important}

/* ---------- prototype：演示壳的小屏兜底（别撑出横向滚动） ---------- */
@media(max-width:820px){
  html[data-layout="prototype"] body{padding:16px 0 36px;gap:0}
  html[data-layout="prototype"] .phone{
    width:100%;max-width:390px;
    height:min(780px,calc(100dvh - 52px));
    border-width:8px;border-radius:38px;
  }
}

/* ---------- 演示模式标识 ---------- */
.chip-demo{display:inline-block;vertical-align:1px;margin-left:6px;padding:2px 7px;border-radius:9px;
  background:#F1E6D2;color:#7A5E32;font-size:10px;font-weight:600;letter-spacing:.4px}
.pg.exit{text-decoration:none;background:#F3EEE4;color:#7A5E32;font-weight:600;margin-bottom:10px}
.pg.exit:hover{background:#EDE5D6}