/* =========================================================
   m.jshbgkj.cn — 「AI 智造」移动端设计系统 custom-theme.css
   在 top.html 的 footer.css 之后引入（优先级最高）
   ========================================================= */
:root {
  --p-dark:  #0B1220;
  --p-ink:   #18181B;
  --p-blue:  #2563EB;
  --p-blue-d:#1D4ED8;
  --p-cyan:  #22D3EE;
  --p-violet:#8B5CF6;
  --p-red:   #EF4444;
  --p-bg:    #F6F7FB;
  --p-card:  #FFFFFF;
  --p-text:  #1A1A1A;
  --p-text2: #666666;
  --p-text3: #999999;
  --p-line:  #E5E7EB;
  --p-r:     12px;
  --p-r-sm:  8px;
  --p-shadow: 0 4px 12px rgba(24,24,27,.06);
  --p-trans: all .25s cubic-bezier(.4,0,.2,1);
}

/* 基础重置与页面底 */
body { background: var(--p-bg); color: var(--p-text); -webkit-font-smoothing: antialiased; }
#main { max-width: 640px; margin: 0 auto; }

/* ---- 通用按钮 ---- */
.p-btn {
  display:inline-block; padding:10px 22px; border:none; border-radius:20px;
  background:var(--p-ink); color:#fff; font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:var(--p-trans);
  text-align:center; box-sizing:border-box; -webkit-tap-highlight-color:transparent;
}
.p-btn:active { transform:scale(.96); }
.p-btn--blue  { background:var(--p-blue); }
.p-btn--blue:active { background:var(--p-blue-d); }
.p-btn--ghost { background:transparent; color:var(--p-blue); border:1px solid var(--p-blue); }
.p-btn--block { display:block; width:100%; }
.p-btn--disabled { background:#D1D5DB; pointer-events:none; }

/* ---- 玻璃拟态 ---- */
.p-glass { background: rgba(255,255,255,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ---- 通用卡片 ---- */
.p-card { background:var(--p-card); border:1px solid var(--p-line); border-radius:var(--p-r); box-shadow:var(--p-shadow); }

/* ---- 价格 ---- */
.p-price { color: var(--p-red); font-weight:700; }
.p-price small { font-size:12px; font-weight:600; }

/* ---- 区块标题 ---- */
.p-sec { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 8px; }
.p-sec h3 { font-size:16px; font-weight:700; margin:0; display:flex; align-items:center; }
.p-sec h3::before { content:''; width:4px; height:16px; border-radius:2px; background:linear-gradient(180deg,var(--p-blue),var(--p-cyan)); margin-right:8px; }
.p-sec .more { font-size:12px; color:var(--p-text3); text-decoration:none; }

/* ---- 入场动效 ---- */
@keyframes pFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.p-fade { animation: pFadeUp .4s ease both; }

/* ---- 按压缩放 ---- */
.s-press { transition: transform .12s ease; -webkit-tap-highlight-color:transparent; }
.s-press:active { transform: scale(.96); }

/* ---- 空状态（发光圆环） ---- */
.p-empty { padding:60px 20px; text-align:center; color:var(--p-text3); font-size:14px; }
.p-empty .ring { width:64px; height:64px; margin:0 auto 14px; border-radius:50%; border:2px dashed var(--p-blue); opacity:.5; position:relative; }
.p-empty .ring::after { content:''; position:absolute; inset:10px; border-radius:50%; background:radial-gradient(circle, var(--p-cyan) 0%, transparent 70%); opacity:.6; }
.p-empty .p-btn { margin-top:16px; }

/* ---- AI 呼吸光圈 ---- */
@keyframes pAiPulse {
  0%   { box-shadow:0 0 0 0 rgba(37,99,235,.35); }
  70%  { box-shadow:0 0 0 14px rgba(37,99,235,0); }
  100% { box-shadow:0 0 0 0 rgba(37,99,235,0); }
}
.p-ai-pulse { animation: pAiPulse 2.2s ease-out infinite; }

/* ---- 渐变描边卡片（为你优选） ---- */
.p-gradient-card { position:relative; border-radius:var(--p-r); overflow:hidden; }
.p-gradient-card::before {
  content:''; position:absolute; inset:0; padding:1.5px; border-radius:var(--p-r);
  background:linear-gradient(135deg, var(--p-blue), var(--p-cyan), var(--p-violet));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* ---- 分类图标渐变池 ---- */
.p-cat-g0 { background:linear-gradient(135deg,#2563EB,#22D3EE); }
.p-cat-g1 { background:linear-gradient(135deg,#8B5CF6,#2563EB); }
.p-cat-g2 { background:linear-gradient(135deg,#0EA5E9,#22D3EE); }
.p-cat-g3 { background:linear-gradient(135deg,#F59E0B,#F97316); }

/* ---- 吸底玻璃操作栏（配 #main padding-bottom） ---- */
.p-bottom-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:500; max-width:640px; margin:0 auto;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(229,231,235,.8);
  display:flex; align-items:center; justify-content:space-between; gap:12px; box-sizing:border-box;
}
.p-bottom-bar .pbb-total { flex:1; font-size:13px; color:var(--p-text2); }
.p-bottom-bar .pbb-total b { color:var(--p-red); font-size:20px; }

/* ---- 首页 Hero ---- */
.m-hero {
  position:relative; overflow:hidden; color:#fff;
  background: linear-gradient(135deg, #0B1220 0%, #1e3a8a 55%, #2563EB 78%, #22D3EE 110%);
  padding:26px 18px 40px;
}
.m-hero::before, .m-hero::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
.m-hero::before { width:220px; height:220px; top:-70px; right:-40px; background:radial-gradient(circle, rgba(34,211,238,.35), transparent 70%); }
.m-hero::after  { width:180px; height:180px; bottom:-80px; left:-50px;  background:radial-gradient(circle, rgba(139,92,246,.35), transparent 70%); }
.m-hero__hi { position:relative; z-index:1; font-size:20px; font-weight:800; letter-spacing:.5px; }
.m-hero__sub { position:relative; z-index:1; font-size:12px; opacity:.85; margin:6px 0 16px; }
.m-hero__search {
  position:relative; z-index:1; display:flex; align-items:center; height:42px; padding:0 16px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:21px;
  color:#fff; font-size:14px; text-decoration:none; backdrop-filter:blur(8px);
}
.m-hero__search span { flex:1; opacity:.9; }
.m-hero__ai {
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  padding:7px 16px; border-radius:18px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:13px; font-weight:600; text-decoration:none;
}

/* ---- 双列商品卡 ---- */
.m-goods-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 12px 12px; }
.m-goods {
  background:var(--p-card); border-radius:var(--p-r); overflow:hidden; text-decoration:none;
  border:1px solid var(--p-line); box-shadow:var(--p-shadow); display:block; transition:var(--p-trans);
}
.m-goods:active { transform:scale(.98); }
.m-goods img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#f0f0f0; }
.m-goods .name {
  font-size:13px; color:var(--p-text); line-height:1.4; height:36px; overflow:hidden; padding:8px 10px 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.m-goods .price { color:var(--p-red); font-size:17px; font-weight:700; padding:4px 10px 10px; }
.m-goods .price small { font-size:12px; font-weight:600; }