/* ==========================================================================
   view-shop.css（B2 · 商城/福利/微信/预算/AI 一族专属视觉，vs- 前缀）
   规则：全部走令牌，禁直接色值字面量；第二流令牌一律 var(--xx, token 兜底)
   ========================================================================== */

/* ---- 通用数值位（价格/库存/金额右对齐） ---- */
.vs-num{
  font-family: var(--font-num, inherit);
  font-weight: var(--fw-bold, 700);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vs-dim{ color: var(--dim); font-size: var(--fs-sm, 0.85em); }

/* ---- 商品卡（shop.html 商品 / renderShops 附近网点） ---- */
.vs-shops{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4, 12px); }
.vs-good{ position: relative; overflow: hidden; }
.vs-price{ display: flex; align-items: baseline; justify-content: flex-end; gap: var(--sp-2, 6px); }
.vs-price > b{ font-size: var(--fs-xl, 1.25em); }
.vs-price > s{ color: var(--dim-2, var(--dim)); font-size: var(--fs-sm, 0.85em); }
.vs-stock{ text-align: right; font-size: var(--fs-sm, 0.85em); color: var(--dim); }
.vs-stock.vs-low{ color: var(--red, var(--brand)); }

/* ---- 附近网点（shops.js） ---- */
.shop-item.vs-shop{ display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.vs-shop-top{ display: flex; align-items: center; gap: var(--sp-2, 6px); }
.vs-shop-top > b{ flex: 1 1 auto; min-width: 0; }
.vs-shop-dist{ flex: none; color: var(--dim); font-size: var(--fs-sm, 0.85em); }
.vs-shop-addr{ color: var(--dim); font-size: var(--fs-sm, 0.85em); }
.shop-map{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2, 6px); margin-bottom: var(--sp-3, 8px); }
.si-nav{ flex: none; }

/* ---- 福利/积分（welfare.js） ---- */
.vs-points-row{ display: flex; align-items: center; gap: var(--sp-3, 8px); }
.vs-hint{ font-size: var(--fs-sm, 0.85em); color: var(--dim); }
.vs-quota{ text-align: center; padding: var(--sp-1, 4px) 0 var(--sp-3, 8px); font-size: var(--fs-sm, 0.85em); color: var(--dim); }

/* ---- 微信绑定（wx.js） ---- */
.vs-step{ display: flex; align-items: flex-start; gap: var(--sp-3, 8px); }
.vs-step-num{
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  font-weight: var(--fw-bold, 700); font-size: var(--fs-sm, 0.85em);
}

/* ---- AI 推荐 / 号码展示（ai.js） ---- */
.vs-nums{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2, 6px); }
.vs-ball{
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  font-weight: var(--fw-bold, 700); font-family: var(--font-num, inherit);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -2px 0 var(--line-soft, transparent);
}
.vs-ball.vs-blue{ background: var(--blue-soft, var(--brand-soft)); color: var(--blue, var(--brand)); }
.vs-plus{ color: var(--dim); font-weight: var(--fw-bold, 700); }
.vs-gap{ height: var(--sp-2, 6px); }
.vs-meta{ margin-top: var(--sp-2, 6px); }

/* ---- 可点列表项/行内激活态 ---- */
.vs-li{ cursor: pointer; }
.vs-row{ cursor: default; }
.vs-act{ cursor: pointer; color: var(--brand); }

/* ---- AI 不可用动态弹窗（showAiUnavailable） ---- */
/* 动态弹窗的颜色全部走 CSS 变量（在根令牌以外的地方兜底同样走 var，不落裸值字面量） */
.vs-mask{ position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: var(--mask); z-index: 9999; }
.vs-modal-box{ background: var(--bg-1); border-radius: var(--r-lg); padding: var(--sp-5); max-width: 400px; width: 100%; }
.vs-modal-title{ font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--sp-2); }
.vs-modal-sub{ font-size: var(--fs-md); color: var(--ink); line-height: 1.75; margin-bottom: var(--sp-2); }
.vs-modal-hint{ font-size: var(--fs-sm); color: var(--dim); line-height: 1.7; margin-bottom: var(--sp-2); }
.vs-modal-meta{ font-size: var(--fs-xs); color: var(--dim-2); line-height: 1.6; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line-soft); }
.vs-modal-ok{ margin-top: var(--sp-3); width: 100%; padding: var(--sp-3); border: 0; border-radius: var(--r-md); background: var(--brand); color: var(--on-brand); font-size: var(--fs-md); font-weight: var(--fw-bold); cursor: pointer; }