/* ===== 包才道通 H5 样式 ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  background:#F5F7FA; color:#2c3e50; font-size:14px; padding-bottom:70px; }
a { text-decoration:none; color:inherit; }
button { border:none; outline:none; cursor:pointer; font-family:inherit; }

/* 顶部 */
.topbar {
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,#1B5E9D 0%, #2980b9 100%);
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
.brand { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.logo {
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg,#FFB300,#FF6F00);
  color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center;
  font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.brand-text .cn { font-size:15px; color:#fff; font-weight:600; line-height:1.1; }
.brand-text .en { font-size:9px; color:#BBDEFB; letter-spacing:1px; }
.search {
  flex:1; background:rgba(255,255,255,.95); border-radius:18px;
  padding:7px 12px; display:flex; align-items:center; gap:6px; font-size:12px; color:#999;
}
.search .icon { font-size:14px; }
.top-icon { font-size:22px; color:#fff; padding:4px; }

/* Banner */
.banner { position:relative; padding:12px; }
.slider { position:relative; height:140px; border-radius:12px; overflow:hidden; }
.slide {
  position:absolute; inset:0; padding:18px; color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; transition:opacity .6s;
}
.slide.active { opacity:1; }
.slide-tag {
  display:inline-block; padding:3px 10px; background:rgba(255,255,255,.25);
  border-radius:12px; font-size:11px; width:fit-content; margin-bottom:8px; backdrop-filter:blur(4px);
}
.slide-title { font-size:22px; font-weight:700; margin-bottom:4px; }
.slide-sub { font-size:12px; opacity:.9; margin-bottom:10px; }
.slide-btn {
  align-self:flex-start; background:#fff; color:#1B5E9D;
  padding:6px 16px; border-radius:16px; font-size:12px; font-weight:600;
}
.dots { display:flex; justify-content:center; gap:6px; margin-top:8px; }
.dot { width:6px; height:6px; background:#CFD8DC; border-radius:50%; }
.dot.active { width:18px; background:#1B5E9D; border-radius:3px; }

/* 九宫格 */
.grid-cats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  background:#fff; margin:0 12px; border-radius:12px; padding:14px 6px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.cat { display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px; }
.cat-icon {
  width:46px; height:46px; border-radius:12px; font-size:24px;
  display:flex; align-items:center; justify-content:center;
}
.cat-name { font-size:11px; color:#37474F; }

/* 通用块 */
.block {
  background:#fff; margin:12px; border-radius:12px; padding:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.block-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.block-title { display:flex; align-items:center; gap:8px; }
.block-title h3 { font-size:15px; color:#1B5E9D; font-weight:700; }
.badge {
  background:#FF1744; color:#fff; padding:2px 8px; border-radius:4px;
  font-size:10px; font-weight:600;
}
.badge.live { background:linear-gradient(90deg,#FF1744,#FF6E40); }
.block-more { font-size:11px; color:#90A4AE; }

/* 秒杀 */
.seckill-list { display:flex; flex-direction:column; gap:10px; }
.seckill-card {
  display:flex; gap:12px; padding:10px;
  background:linear-gradient(135deg,#FFF8E1,#FFECB3); border-radius:10px;
}
.seckill-img {
  width:80px; height:80px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:36px;
}
.seckill-info { flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.seckill-name { font-size:13px; color:#37474F; font-weight:500; }
.seckill-progress { display:flex; align-items:center; gap:6px; font-size:10px; color:#FF6F00; }
.seckill-progress .bar { flex:1; height:6px; background:rgba(255,255,255,.6); border-radius:3px; overflow:hidden; }
.seckill-progress .fill { height:100%; background:linear-gradient(90deg,#FF6F00,#FFB300); border-radius:3px; }
.price-row { display:flex; align-items:baseline; gap:6px; }
.price-row .now { color:#E53935; font-size:18px; font-weight:700; }
.price-row .now .unit { font-size:10px; font-weight:400; color:#E53935; }
.price-row .old { color:#90A4AE; font-size:11px; text-decoration:line-through; }
.join-btn {
  align-self:flex-end; background:linear-gradient(90deg,#FF6F00,#FFB300);
  color:#fff; padding:4px 12px; border-radius:12px; font-size:11px; font-weight:600;
  margin-top:-22px;
}

/* 数据驾驶舱 */
.dashboard .data-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center;
}
.data-cell { padding:8px 4px; background:linear-gradient(135deg,#E3F2FD,#BBDEFB); border-radius:8px; }
.data-cell:nth-child(2) { background:linear-gradient(135deg,#FFF3E0,#FFE0B2); }
.data-cell:nth-child(3) { background:linear-gradient(135deg,#E8F5E9,#C8E6C9); }
.data-cell:nth-child(4) { background:linear-gradient(135deg,#FCE4EC,#F8BBD0); }
.data-cell .num { font-size:16px; font-weight:700; color:#1B5E9D; }
.data-cell .lbl { font-size:10px; color:#546E7A; margin-top:2px; }

/* 直播 */
.live-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.live-card { background:#fff; border-radius:8px; overflow:hidden; border:1px solid #ECEFF1; }
.live-cover {
  height:90px; position:relative;
  display:flex; align-items:flex-end; padding:8px;
}
.live-tag {
  position:absolute; top:6px; left:6px;
  background:rgba(0,0,0,.6); color:#fff; padding:2px 6px; border-radius:3px;
  font-size:10px;
}
.live-viewer { font-size:11px; color:#fff; background:rgba(0,0,0,.4); padding:1px 5px; border-radius:3px; }
.live-info { padding:8px; }
.live-title { font-size:12px; font-weight:500; color:#37474F; margin-bottom:2px; }
.live-host { font-size:10px; color:#90A4AE; }

/* 解决方案 */
.solutions .sol-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px; text-align:center;
}
.sol-item {
  padding:10px 4px; border-radius:8px;
  background:linear-gradient(135deg,#F5F7FA,#ECEFF1);
  border:1px solid #ECEFF1;
  transition:transform .2s;
}
.sol-item:active { transform:scale(.95); }
.sol-icon { font-size:24px; margin-bottom:4px; }
.sol-name { font-size:11px; font-weight:600; color:#37474F; }
.sol-sub { font-size:9px; color:#78909C; margin-top:2px; }
.sol-1 { background:linear-gradient(135deg,#E3F2FD,#BBDEFB); }
.sol-2 { background:linear-gradient(135deg,#FFF3E0,#FFE0B2); }
.sol-3 { background:linear-gradient(135deg,#E8F5E9,#C8E6C9); }
.sol-4 { background:linear-gradient(135deg,#FCE4EC,#F8BBD0); }
.sol-5 { background:linear-gradient(135deg,#F3E5F5,#E1BEE7); }

/* 供应商 */
.sup-list { display:flex; flex-direction:column; gap:10px; }
.sup-card {
  display:flex; gap:12px; padding:10px; background:#F5F7FA; border-radius:10px;
  border:1px solid #ECEFF1;
}
.sup-logo {
  width:48px; height:48px; border-radius:8px;
  background:linear-gradient(135deg,#1B5E9D,#4FC3F7);
  color:#fff; font-size:18px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sup-info { flex:1; min-width:0; }
.sup-name { font-size:13px; font-weight:600; color:#263238; margin-bottom:2px; }
.cert { background:#4CAF50; color:#fff; font-size:9px; padding:1px 4px; border-radius:3px; font-weight:400; }
.sup-meta { font-size:11px; color:#78909C; margin-bottom:4px; }
.sup-tags { display:flex; gap:4px; flex-wrap:wrap; }
.sup-tags span {
  background:#fff; padding:2px 6px; border-radius:3px;
  font-size:10px; color:#546E7A; border:1px solid #ECEFF1;
}

/* 服务市场 */
.svc-list {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.svc-item {
  background:#F5F7FA; padding:10px 4px; border-radius:6px;
  text-align:center; font-size:11px; color:#37474F;
  border:1px solid #ECEFF1;
}
.svc-item span { display:block; font-size:20px; margin-bottom:2px; }

/* CTA */
.cta-banner {
  margin:12px;
  background:linear-gradient(135deg,#1B5E9D,#2980b9);
  border-radius:12px; padding:18px; color:#fff; text-align:center;
}
.cta-title { font-size:17px; font-weight:700; margin-bottom:4px; }
.cta-sub { font-size:12px; opacity:.85; margin-bottom:14px; }
.cta-btns { display:flex; gap:8px; justify-content:center; }
.cta-btn {
  padding:8px 20px; border-radius:18px; font-size:13px; font-weight:600;
}
.cta-btn.primary { background:#FFB300; color:#1B5E9D; }
.cta-btn.ghost { background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.4); }

/* TabBar */
.tabbar {
  position:fixed; bottom:0; left:0; right:0;
  background:#fff; display:flex;
  border-top:1px solid #ECEFF1;
  padding:6px 0 calc(6px + env(safe-area-inset-bottom));
  z-index:99;
}
.tab {
  flex:1; text-align:center; padding:4px 0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.tab-icon { font-size:20px; }
.tab-name { font-size:10px; color:#90A4AE; }
.tab.active .tab-name { color:#1B5E9D; font-weight:600; }

/* 浮动客服 */
.float-kefu {
  position:fixed; right:14px; bottom:80px;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,#FF6F00,#FFB300);
  color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(255,111,0,.4);
  z-index:98;
}

/* 响应式 */
@media (min-width:768px) {
  body { max-width:480px; margin:0 auto; background:#E0E0E0; }
  .topbar, .tabbar { max-width:480px; left:auto; right:auto; }
  .float-kefu { right:calc(50% - 240px + 14px); }
}