/**
 * ============================================================
 * lbsd-global.css - 老兵闪到全站统一样式库
 * ============================================================
 * 图标风格规范（参照基本信息页面截图）：
 *   - 无背景容器，图标直接显示在白色列表上
 *   - 彩色描边 SVG 图标（约20px）
 *   - 每个图标类型有独立颜色
 *   - stroke-width: 1.5，圆角端点
 *   - 列表式布局 + 分组分割线
 * ============================================================
 */

/* ══════════════════════════════════════════════════════════
 * 一、图标基础样式（无背景容器）
 * ═══════════════════════════════════════════════════════════ */

/* 基础图标容器 - 无背景，直接显示彩色图标，全站图标尺寸统一 22px */
.wx-icon,
.nav-icon,
.item-icon,
.card-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-right: 12px !important;
}

/* 图标容器内的 SVG - 彩色描边，全站图标尺寸统一 22px */
.wx-icon svg,
.nav-icon svg,
.item-icon svg,
.card-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.5 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* 信息行图标容器 - 登录信息/联系方式/认证信息等页面，容器 34px 底衬 + 图标 22px */
.info-icon {
  width: 34px !important;
  height: 34px !important;
  background: transparent !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* 信息行图标 SVG - 全站统一 22px */
.info-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.5 !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ═══════════════════════════════════════════════════════════
 * 二、图标颜色定义
 * ═══════════════════════════════════════════════════════════ */

/* 绿色 - 基本资料/服务站点/任务类 */
.wx-icon--green,
.nav-icon--green,
.nav-icon--jbxx,
.nav-icon--fwrwgl,
.nav-icon--staff,
.nav-icon--xzfl,
.nav-icon--rwgl {
  color: #07C160 !important;
}

.wx-icon--green svg,
.nav-icon--green svg,
.nav-icon--jbxx svg,
.nav-icon--fwrwgl svg,
.nav-icon--staff svg,
.nav-icon--xzfl svg,
.nav-icon--rwgl svg {
  stroke: #07C160 !important;
}

/* 信息行图标 - 绿色底衬加强显示 */
.info-icon--green,
.info-icon--cyan {
  color: #07C160 !important;
  background: #f0fff4 !important;
}
.info-icon--green svg,
.info-icon--cyan svg {
  stroke: #07C160 !important;
}

/* 橙色 - 认证信息/金融类 */
.wx-icon--orange,
.nav-icon--orange,
.nav-icon--fwrw,
.nav-icon--jrgl,
.nav-icon--jjpw {
  color: #FA9D3B !important;
}

.wx-icon--orange svg,
.nav-icon--orange svg,
.nav-icon--fwrw svg,
.nav-icon--jrgl svg,
.nav-icon--jjpw svg {
  stroke: #FA9D3B !important;
}

/* 信息行图标 - 橙色底衬加强显示 */
.info-icon--orange {
  color: #FA9D3B !important;
  background: #fff7e6 !important;
}
.info-icon--orange svg {
  stroke: #FA9D3B !important;
}

/* 红色 - 联系方式/重要操作类 */
.wx-icon--red,
.nav-icon--red {
  color: #FA5151 !important;
}

.wx-icon--red svg,
.nav-icon--red svg {
  stroke: #FA5151 !important;
}

/* 信息行图标 - 红色底衬加强显示 */
.info-icon--red {
  color: #FA5151 !important;
  background: #fff2f0 !important;
}
.info-icon--red svg {
  stroke: #FA5151 !important;
}

/* 蓝色 - 用户协议/隐私政策/数据类 */
.wx-icon--blue,
.nav-icon--blue,
.nav-icon--data,
.nav-icon--agreement,
.nav-icon--app,
.nav-icon--param {
  color: #1989FA !important;
}

.wx-icon--blue svg,
.nav-icon--blue svg,
.nav-icon--data svg,
.nav-icon--agreement svg,
.nav-icon--app svg,
.nav-icon--param svg {
  stroke: #1989FA !important;
}

/* 信息行图标 - 蓝色底衬加强显示 */
.info-icon--blue,
.info-icon--purple {
  color: #1989FA !important;
  background: #e6f7ff !important;
}
.info-icon--blue svg,
.info-icon--purple svg {
  stroke: #1989FA !important;
}

/* 青色 - 消息/通知/经营类 */
.wx-icon--cyan,
.nav-icon--cyan,
.nav-icon--xtxx,
.nav-icon--biz,
.nav-icon--xxxt,
.nav-icon--message,
.nav-icon--zjgl {
  color: #06B6D4 !important;
}

.wx-icon--cyan svg,
.nav-icon--cyan svg,
.nav-icon--xtxx svg,
.nav-icon--biz svg,
.nav-icon--xxxt svg,
.nav-icon--message svg,
.nav-icon--zjgl svg {
  stroke: #06B6D4 !important;
}

/* 紫色 - 专属客服/设置/管理类 */
.wx-icon--purple,
.nav-icon--purple,
.nav-icon--iniset,
.nav-icon--xzsp,
.nav-icon--xzgl,
.nav-icon--khgl {
  color: #A855F7 !important;
}

.wx-icon--purple svg,
.nav-icon--purple svg,
.nav-icon--iniset svg,
.nav-icon--xzsp svg,
.nav-icon--xzgl svg,
.nav-icon--khgl svg {
  stroke: #A855F7 !important;
}

/* 金色 - 会员/等级/资金类 */
.wx-icon--gold,
.nav-icon--gold,
.nav-icon--money,
.nav-icon--keyacc {
  color: #F59E0B !important;
}

.wx-icon--gold svg,
.nav-icon--gold svg,
.nav-icon--money svg,
.nav-icon--keyacc svg {
  stroke: #F59E0B !important;
}

/* 蓝 - 协议/合同类 */
.wx-icon--indigo,
.nav-icon--indigo {
  color: #6366F1 !important;
}

.wx-icon--indigo svg,
.nav-icon--indigo svg {
  stroke: #6366F1 !important;
}

/* 粉色 - 关注/收藏类 */
.wx-icon--pink,
.nav-icon--pink,
.nav-icon--magenta,
.nav-icon--fjlb {
  color: #EC4899 !important;
}

.wx-icon--pink svg,
.nav-icon--pink svg,
.nav-icon--magenta svg,
.nav-icon--fjlb svg {
  stroke: #EC4899 !important;
}

/* 灰色 - 登录信息/次要功能类 */
.wx-icon--gray,
.nav-icon--gray,
.nav-icon--account,
.nav-icon--zhsz {
  color: #9CA3AF !important;
}

.wx-icon--gray svg,
.nav-icon--gray svg,
.nav-icon--account svg,
.nav-icon--zhsz svg {
  stroke: #9CA3AF !important;
}

/* ═══════════════════════════════════════════════════════════
 * 三、导航列表项样式
 * ═══════════════════════════════════════════════════════════ */

/* 导航项容器 - 列表式布局 */
.wx-nav-item,
.nav-item {
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #f0f0f0 !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

.wx-nav-item:active,
.nav-item:active {
  background-color: #f7f8fa !important;
}

.wx-nav-item:last-child,
.nav-item:last-child {
  border-bottom: none !important;
}

/* 导航项文字 */
.wx-nav-text,
.nav-text {
  flex: 1 !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
  font-weight: 400 !important;
}

/* 导航项箭头 */
.wx-nav-arrow,
.nav-arrow {
  color: #c9cdd4 !important;
  font-size: 14px !important;
  margin-left: 8px !important;
}

/* ══════════════════════════════════════════════════════════
 * 四、状态标签样式
 * ═══════════════════════════════════════════════════════════ */

/* 已填/已认证标签 - 绿色 */
.status-done {
  color: #07C160 !important;
  background: #f0fff4 !important;
  padding: 2px 8px !important;
  border-radius: 0 !important;
  font-size: 12px !important;
}

/* 部分完成标签 - 红色 */
.status-partial {
  color: #FA5151 !important;
  background: #fff2f0 !important;
  padding: 2px 8px !important;
  border-radius: 0 !important;
  font-size: 12px !important;
}

/* ══════════════════════════════════════════════════════════
 * 五、初始化设置图标样式
 * ═══════════════════════════════════════════════════════════ */

.item-card--locked .item-icon {
  opacity: 0.4 !important;
}

.item-card--locked .item-icon svg {
  stroke: #bbb !important;
}

/* ═══════════════════════════════════════════════════════════
 * 六、卡片图标样式
 * ═══════════════════════════════════════════════════════════ */

.card-icon {
  font-size: 22px !important;
}