/* ==========================================================
   芒瓜电竞商城 · H5 通用样式（浅色 · 橙色主调）
   ========================================================== */
:root{
  --bg:#F5F6F8;
  --bg2:#FFFFFF;
  --panel:#FFFFFF;
  --card:#FFFFFF;
  --card2:#FAFAFB;
  --line:#EEEFF2;
  --line2:#E3E5EA;
  --text:#1B1D21;
  --sub:#868B95;
  --sub2:#A7ABB4;
  --brand:#FF6A00;
  --brand2:#FF9A3D;
  --brand-grad:linear-gradient(135deg,#FF8A2B 0%,#FF5A00 100%);
  --brand-soft:#FFF3E9;
  --hot:#FF5000;
  --gold:#FF9500;
  --ok:#12B76A;
  --alipay:#1677FF;
  --wechat:#07C160;
  --radius:12px;
  --radius-s:10px;
  --shadow:0 2px 12px rgba(17,18,22,.06);
  --nav-h:46px;
  --tab-h:52px;
  --maxw:480px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#EDEEF1;
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
input,button,textarea,select{font-family:inherit;font-size:inherit;color:inherit;outline:none;border:none;background:none;}
button{cursor:pointer;}
ul,li{list-style:none;}
svg{display:block;}
::-webkit-scrollbar{width:0;height:0;}
select option{background:#fff;color:var(--text);}

/* ---------- H5 容器 ---------- */
#app{
  position:relative;z-index:1;
  width:100%;max-width:var(--maxw);min-height:100vh;
  margin:0 auto;background:var(--bg);
  box-shadow:0 0 0 1px rgba(17,18,22,.05),0 8px 40px rgba(17,18,22,.10);
  overflow:hidden;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
}
.page{padding-top:var(--nav-h);min-height:100vh;}
.no-tab #app{padding-bottom:0;}
.no-tab .tabbar{display:none;}

/* ---------- 顶部导航 ---------- */
.navbar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--maxw);height:var(--nav-h);z-index:60;
  display:flex;align-items:center;gap:8px;padding:0 10px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.navbar.transparent{background:var(--bg);border-bottom-color:var(--line);}
.nav-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto;color:var(--text);}
.nav-back:active{background:var(--line);}
.nav-back svg{width:20px;height:20px;}
.nav-title{
  flex:1;min-width:0;font-size:16px;font-weight:600;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-title.left{text-align:left;}
.nav-right{min-width:32px;display:flex;align-items:center;gap:6px;color:var(--text);}
.nav-search{
  flex:1;height:34px;border-radius:17px;background:var(--bg);
  border:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px;color:var(--sub);
}
.nav-search svg{width:15px;height:15px;flex:0 0 auto;}
.nav-search input{flex:1;background:none;border:none;font-size:13px;color:var(--text);}
.nav-search input::placeholder{color:var(--sub2);}

/* ---------- 底部 tabbar ---------- */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--maxw);height:var(--tab-h);z-index:60;
  display:flex;background:#fff;
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--sub2);position:relative;}
.tab-item svg{width:22px;height:22px;}
.tab-item span{font-size:10px;}
.tab-item.active{color:var(--brand);}
.tab-badge{
  position:absolute;top:3px;left:50%;margin-left:6px;
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--hot);color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:600;
}

/* ---------- 通用组件 ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:44px;border-radius:22px;font-size:15px;font-weight:600;
  background:var(--brand-grad);color:#fff;
  transition:transform .12s,opacity .12s;
  box-shadow:0 4px 14px rgba(255,106,0,.22);
}
.btn:active{transform:scale(.97);opacity:.9;}
.btn-block{width:100%;}
.btn-ghost{background:#fff;border:1px solid var(--line2);color:var(--text);box-shadow:none;}
.btn-danger{background:linear-gradient(135deg,#FF5A5F,#FF8A2B);}
.btn-lg{height:48px;border-radius:24px;font-size:16px;}
.btn-sm{height:32px;border-radius:16px;font-size:12px;padding:0 14px;box-shadow:none;}
.btn:disabled,.btn.disabled{background:var(--line2);color:var(--sub2);pointer-events:none;box-shadow:none;}
.btn svg{width:16px;height:16px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.p12{padding:12px}.p16{padding:16px}
.row{display:flex;align-items:center;}
.row-b{display:flex;align-items:center;justify-content:space-between;}
.col{display:flex;flex-direction:column;}
.grow{flex:1;min-width:0;}
.center{display:flex;align-items:center;justify-content:center;}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ell2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.muted{color:var(--sub);}
.small{font-size:12px;}
.tiny{font-size:11px;}
.b{font-weight:600;}
.price{color:var(--hot);font-weight:700;font-family:'DIN Alternate','Bahnschrift',system-ui;}
.price i{font-size:.72em;font-style:normal;margin-right:1px;}
.price .int{font-size:1.25em;}
.section-title{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 10px;}
.section-title h3{font-size:15px;font-weight:700;}
.section-title .more{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:2px;}
.section-title .more svg{width:12px;height:12px;}
.divider{height:8px;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

.tag{
  display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:3px;
  font-size:10px;font-weight:600;letter-spacing:.2px;
}
.tag-hot{background:#FFEAE3;color:var(--hot);}
.tag-new{background:#E8F2FF;color:#1D7BE8;}
.tag-limit{background:#FFF1DB;color:#C77700;}
.tag-vir{background:var(--brand-soft);color:var(--brand);border:1px solid #FFD9BC;}
.tag-send{background:#E6F7EF;color:#0E9F5D;}

/* ---------- 商品图（SVG 主题卡） ---------- */
.thumb{
  position:relative;overflow:hidden;border-radius:var(--radius-s);
  background:linear-gradient(145deg,#FFF7F1,#F3F4F7);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.thumb::before{content:none;}
.thumb::after{content:none;}
.thumb svg{position:relative;z-index:1;width:52%;height:52%;color:var(--brand);}
.thumb img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;}

/* 图片加载失败后的图标占位（动态图 / 静态图都拿不到时兜底） */
.img-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--sub2);}
.img-ph svg{width:44%;height:44%;}
.gc-cover .img-ph{position:absolute;top:0;left:0;right:0;bottom:0;}
.thumb .glow{display:none;}

/* ---------- 商品网格 ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 12px;}
.grid-title{grid-column:1/-1;padding:10px 0 0;font-size:13px;font-weight:600;}
.goods{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:block;
}
.goods .thumb{aspect-ratio:1/1;border-radius:0;border:none;border-bottom:1px solid var(--line);}
.goods-body{padding:9px 10px 11px;}
.goods-name{font-size:13px;font-weight:500;line-height:1.35;height:35px;}
.goods-tags{display:flex;gap:4px;margin:6px 0 5px;min-height:18px;flex-wrap:wrap;}
.goods-price{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;}
.goods-price .price{font-size:16px;}
.goods-price del{color:var(--sub2);font-size:11px;}
.gm-diamond{font-size:11px;color:var(--sub);}
.goods-meta{display:flex;justify-content:space-between;color:var(--sub2);font-size:11px;margin-top:5px;}

/* ---------- 列表行 ---------- */
.list{padding:0 12px;}
.li{
  display:flex;align-items:center;gap:12px;padding:14px 0;
  border-bottom:1px solid var(--line);
}
.li:last-child{border-bottom:none;}
.li-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand);flex:0 0 auto;}
.li-icon svg{width:18px;height:18px;}
.li-arrow{width:16px;height:16px;color:var(--sub2);flex:0 0 auto;}

/* ---------- 表单 ---------- */
.field{
  display:flex;align-items:center;gap:10px;height:50px;
  border-bottom:1px solid var(--line);
}
.field svg{width:18px;height:18px;color:var(--sub);flex:0 0 auto;}
.field input{flex:1;height:100%;font-size:15px;}
.field input::placeholder{color:var(--sub2);}
.field .code-btn{
  flex:0 0 auto;font-size:12px;color:var(--brand);border:1px solid #FFD0AE;
  height:30px;padding:0 12px;border-radius:15px;
}
.field .code-btn.disabled{color:var(--sub2);border-color:var(--line2);}

/* ---------- Toast / 弹层 ---------- */
#toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999;
  max-width:76%;padding:11px 18px;border-radius:10px;
  background:rgba(27,29,33,.92);border:none;
  color:#fff;font-size:13px;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.24);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
}
#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1.02);}
.mask{
  position:fixed;inset:0;z-index:200;background:rgba(17,18,22,.45);
  display:none;align-items:flex-end;justify-content:center;
}
.mask.show{display:flex;}
.mask-inner{
  width:100%;max-width:var(--maxw);background:#fff;
  border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  animation:slideUp .24s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mask-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mask-head h4{font-size:16px;font-weight:600;}
.mask-close svg{width:20px;height:20px;color:var(--sub);}

/* ---------- 空状态 ---------- */
.empty{
  padding:70px 20px;text-align:center;color:var(--sub2);
}
.empty svg{width:64px;height:64px;margin:0 auto 14px;opacity:.5;}
.empty p{font-size:13px;}

/* ---------- 骨架/加载 ---------- */
.loading{padding:40px;text-align:center;color:var(--sub2);font-size:12px;}

/* ---------- 底部安全条 ---------- */
.foot-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--maxw);z-index:58;
  display:flex;align-items:center;gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);
}
.foot-bar .price{font-size:19px;}
.foot-bar .btn{flex:1;max-width:170px;}
.has-foot{padding-bottom:76px !important;}
.no-tab .foot-bar{bottom:0;}
.has-foot + .tabbar{display:none;}

/* ---------- 徽标/渐变文字 ---------- */
.grad-text{
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.chip{
  display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 12px;border-radius:14px;
  background:#fff;border:1px solid var(--line2);font-size:12px;color:var(--sub);
}
.chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:600;}
.chip svg{width:13px;height:13px;}

/* ---------- 数量步进器 ---------- */
.stepper{display:flex;align-items:center;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:#fff;}
.stepper button{width:30px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--card2);color:var(--sub);}
.stepper button svg{width:13px;height:13px;}
.stepper input{width:44px;height:28px;text-align:center;font-size:13px;border-left:1px solid var(--line);border-right:1px solid var(--line);}

/* ---------- 单选勾 ---------- */
.radio{
  width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line2);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.radio.on{background:var(--brand);border-color:var(--brand);}
.radio.on svg{width:12px;height:12px;color:#fff;}
.radio svg{display:none;}
.radio.on svg{display:block;}