:root{
  --bg:#f5f5f5;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#e1251b;
  --primary2:#ff4d4f;
  --danger:#e1251b;
  --border:#ececec;
  --shadow:0 6px 18px rgba(0,0,0,.08);
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(900px 320px at 50% -180px, rgba(215,0,15,.14), transparent 60%), var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none;}
.container{max-width:520px;margin:0 auto;padding:10px 12px 86px;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;}
.topbar .title{font-weight:800;color:#1f2937;}
.search{flex:1;margin:0 10px;}
.search input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text);outline:none;box-shadow:inset 0 1px 2px rgba(15,23,42,.04);}
.search input::placeholder{color:#9ca3af;}
.banner{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid #f3f4f6;}
.banner img{display:block;width:100%;height:auto;aspect-ratio:1200/320;object-fit:contain;background:#fff5f5;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;}
.grid .item{background:#fff;border-radius:16px;padding:10px 6px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--border);}
.grid .icon{width:34px;height:34px;border-radius:12px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;}
.grid .label{font-size:12px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.section{margin-top:14px;}
.section-head{display:flex;align-items:center;justify-content:space-between;padding:6px 2px;}
.section-head .h{font-weight:800;}
.section-head .more{color:var(--muted);font-size:12px;}
.cards{display:grid;grid-template-columns:1fr;gap:10px;}
.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--border);}
.card .row{display:flex;gap:10px;padding:10px;}
.thumb{width:110px;height:76px;border-radius:14px;object-fit:cover;background:#f3f4f6;border:1px solid var(--border);}

.card .meta{flex:1;min-width:0;}
.card .meta .name{font-weight:800;line-height:1.2;margin-top:2px;}
.card .meta .desc{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.35;max-height:34px;overflow:hidden;}
.card .meta .bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.price{color:var(--danger);font-weight:800;}
.tag{font-size:12px;color:var(--muted);}
.avatar{width:36px;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:.5px;background:linear-gradient(135deg,#ffb020,#ff6b35);color:#fff;border:1px solid #ffd5b0;}

.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;
  background:#ffffff;
  border-top:1px solid var(--border);
  box-shadow:0 -8px 20px rgba(15,23,42,.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav .inner{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);}
.bottom-nav a{padding:10px 6px;text-align:center;color:var(--muted);font-size:12px;}
.bottom-nav .i{display:block;margin:0 auto 2px;width:22px;height:22px;border-radius:8px;background:#f3f4f6;border:1px solid var(--border);}
.bottom-nav a.active{color:var(--primary);}
.bottom-nav a.active .i{background:#fff0ef;border-color:#ffc8c5;}

.notice{background:#fff1f2;border:1px solid #fecdd3;color:#be123c;border-radius:12px;padding:10px 12px;margin:10px 0;}
.alert{background:#ecfeff;border:1px solid #a5f3fc;color:#0e7490;border-radius:12px;padding:10px 12px;margin:10px 0;}

.form{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:14px;border:1px solid var(--border);}
.form label{display:block;font-size:12px;color:var(--muted);margin-top:10px;}
.form input,.form textarea{width:100%;margin-top:6px;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--text);font-size:14px;outline:none;}
.form input::placeholder,.form textarea::placeholder{color:#9ca3af;}
.form textarea{min-height:110px;resize:vertical;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:14px;padding:12px 14px;font-weight:800;cursor:pointer;}
.btn.primary{background:linear-gradient(90deg, var(--primary), var(--primary2));color:#fff;box-shadow:0 8px 18px rgba(215,0,15,.24);}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--border);}
.btn.danger{background:var(--danger);color:#fff;}
.btn.full{width:100%;}
.row2{display:flex;gap:10px;}
.row2 .btn{flex:1;}

.pay-methods{display:flex;gap:10px;flex-wrap:wrap;}
.pay-method{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);padding:10px 12px;border-radius:14px;flex:1;min-width:160px;}
.pay-method input{transform:scale(1.15);}
.badge{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:800;color:#fff;}
.badge.wechat{background:#22c55e;}
.badge.alipay{background:#1677ff;}

.product-hero{background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--border);}
.product-hero img{width:100%;height:200px;object-fit:cover;display:block;}
.product-hero .p{padding:12px;}
.product-hero .t{font-weight:900;font-size:18px;}
.product-hero .sub{color:var(--muted);font-size:13px;margin-top:8px;line-height:1.5;}
.product-hero .stat{display:flex;gap:10px;color:var(--muted);font-size:12px;margin-top:10px;}

.actionbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);box-shadow:0 -8px 20px rgba(15,23,42,.06);padding-bottom: env(safe-area-inset-bottom, 0px);} 
.actionbar .inner{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px;}
.actionbar .mini{width:44px;text-align:center;color:var(--muted);font-size:12px;}
.actionbar .mini .i{width:22px;height:22px;border-radius:8px;background:#f3f4f6;border:1px solid var(--border);margin:0 auto 2px;}
.actionbar .cta{flex:1;display:flex;gap:10px;}
.actionbar .cta form{flex:1;margin:0;}
.actionbar .cta .btn{width:100%;border-radius:999px;padding:12px 14px;}
.actionbar .cta .btn.buy{background:linear-gradient(90deg, #fb7185, #f97316);color:#fff;}

.license-card{display:flex;gap:12px;align-items:center;padding:10px;}
.license-thumb{width:92px;height:72px;border-radius:14px;object-fit:cover;object-position:center 30%;background:#f3f4f6;border:1px solid var(--border);}
.license-meta{flex:1;min-width:0;}
.license-title{font-weight:900;line-height:1.2;}
.license-sub{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.35;}

.footer-icp{
  margin:14px 0 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  position:relative;
  z-index:1;
}
.footer-icp a{color:inherit;text-decoration:none;display:inline-block;padding:2px 0;}
.footer-icp a:hover{text-decoration:underline;}
.footer-icp .lic-no{margin-top:4px;}

.chat{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.bubble{max-width:85%;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--border);line-height:1.55;font-size:13px;}
.bubble.me{align-self:flex-end;background:#fff5f5;border-color:#ffd4d2;}
.bubble .meta{font-size:11px;color:var(--muted);margin-top:6px;}

@media (max-width:420px){
  .container{padding:8px 8px 86px;}
  .topbar{padding:6px 0;gap:6px;}
  .topbar .title{font-size:20px;white-space:nowrap;}
  .search{margin:0 6px;}
  .search input{padding:9px 10px;font-size:14px;}
  .card .row{gap:8px;padding:8px;}
  .thumb{width:96px;height:68px;}
  .card .meta .name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
  .card .meta .desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;max-height:none;}
  .bottom-nav a{padding:8px 4px;font-size:11px;}
}

@media (max-width:360px){
  .grid{grid-template-columns:repeat(4,1fr);}
  .license-thumb{width:82px;height:64px;}
}