:root{
  --bg:#070a14;
  --card:rgba(255,255,255,.06);
  --text:#e5e7eb;
  --muted:#a1a1aa;
  --primary:#a78bfa;
  --primary2:#22d3ee;
  --danger:#fb7185;
  --border:rgba(255,255,255,.10);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(1200px 500px at 50% -120px, rgba(167,139,250,.25), 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:700;}
.search{flex:1;margin:0 10px;}
.search input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.06);color:var(--text);outline:none;}
.search input::placeholder{color:rgba(229,231,235,.55);}
.banner{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);}

.banner img{display:block;width:100%;height:140px;object-fit:cover;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;}
.grid .item{background:var(--card);border-radius:16px;padding:10px 6px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.25);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:#0b1020;font-weight:900;background:rgba(255,255,255,.9);}
.grid .label{font-size:12px;color:var(--text);opacity:.9;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:18px;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:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);}

.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, rgba(34,211,238,.9), rgba(167,139,250,.9));color:#0b1020;border:1px solid rgba(255,255,255,.15);}


.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;
  background:rgba(10,14,30,.78);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,.10);
  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:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);}
.bottom-nav a.active{color:var(--primary2);}
.bottom-nav a.active .i{background:rgba(34,211,238,.18);border-color:rgba(34,211,238,.30);}


.notice{background:rgba(251,113,133,.10);border:1px solid rgba(251,113,133,.25);color:#fecdd3;border-radius:12px;padding:10px 12px;margin:10px 0;}
.alert{background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.25);color:#cffafe;border-radius:12px;padding:10px 12px;margin:10px 0;}


.form{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:14px;}
.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:rgba(255,255,255,.06);color:var(--text);font-size:14px;outline:none;}
.form input::placeholder,.form textarea::placeholder{color:rgba(229,231,235,.55);}

.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(--primary2), var(--primary));color:#0b1020;}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border);}
.btn.danger{background:var(--danger);color:#0b1020;}

.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:#f3f4f6;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;}

.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:rgba(10,14,30,.78);backdrop-filter: blur(10px);border-top:1px solid rgba(255,255,255,.10);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:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);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:#0b1020;}

.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:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);}
.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:rgba(255,255,255,.06);border:1px solid var(--border);line-height:1.55;font-size:13px;}
.bubble.me{align-self:flex-end;background:linear-gradient(90deg, rgba(34,211,238,.16), rgba(167,139,250,.16));border-color:rgba(167,139,250,.32);}
.bubble .meta{font-size:11px;color:var(--muted);margin-top:6px;}

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