/**
 * Xian Icons v5 — 星缘图标系统 (SVG)
 * 将 CSS 伪元素手绘图标迁移为 SVG 背景引用
 * 使用方式：所有前端页面和后台页面均需加载此文件
 * SVG 文件位于 template/common/icons/ 目录
 */

/* ===== 通用动画 ===== */
@keyframes bnGlow {
  0%,100% { box-shadow: 0 0 4px rgba(200,160,40,.15); }
  50% { box-shadow: 0 0 10px rgba(200,160,40,.4); }
}
@keyframes bnBreathe {
  0%,100% { opacity: .6; }
  50% { opacity: 1; }
}
@keyframes bnRune {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spiritBreath {
  0%,100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes goldShimmer {
  0% { box-shadow: 0 0 0 0 rgba(240,192,96,.4); }
  70% { box-shadow: 0 0 0 6px rgba(240,192,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,192,96,0); }
}
@keyframes baguaSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes likePop {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ===== 前端底部导航图标容器 (.bn-icon) ===== */
.bn-icon {
  display: inline-block;
  width: 22px; height: 22px;
  position: relative;
  vertical-align: middle;
  font-style: normal;
  transition: all .25s;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;  /* 隐藏旧文字内容 (如 + 号) */
  text-indent: -9999px;
  overflow: hidden;
}

.nav-item:hover .bn-icon {
  filter: drop-shadow(0 0 6px rgba(200,160,40,.4));
}
.nav-item.active .bn-icon {
  filter: drop-shadow(0 0 8px rgba(240,192,96,.5));
}

/* ===== BN 图标 SVG 引用 ===== */
.bn-icon--bagua {
  background-image: url('../icons/bn-bagua.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--bagua, .bn-icon--bagua.active {
  color: #C5A028;
}
.bn-icon--checkin {
  background-image: url('../icons/bn-checkin.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--checkin, .bn-icon--checkin.active {
  color: #C5A028;
}
.bn-icon--cloud {
  background-image: url('../icons/bn-cloud.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--cloud, .bn-icon--cloud.active {
  color: #C5A028;
}
.bn-icon--crane {
  background-image: url('../icons/bn-crane.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--crane, .bn-icon--crane.active {
  color: #C5A028;
}
.bn-icon--flysword {
  background-image: url('../icons/bn-flysword.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--flysword, .bn-icon--flysword.active {
  color: #C5A028;
}
.bn-icon--follow {
  background-image: url('../icons/bn-follow.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--follow, .bn-icon--follow.active {
  color: #C5A028;
}
.bn-icon--friends {
  background-image: url('../icons/bn-friends.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--friends, .bn-icon--friends.active {
  color: #C5A028;
}
.bn-icon--furnace {
  background-image: url('../icons/bn-furnace.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--furnace, .bn-icon--furnace.active {
  color: #C5A028;
}
.bn-icon--ganoderma {
  background-image: url('../icons/bn-ganoderma.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--ganoderma, .bn-icon--ganoderma.active {
  color: #C5A028;
}
.bn-icon--group {
  background-image: url('../icons/bn-group.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--group, .bn-icon--group.active {
  color: #C5A028;
}
.bn-icon--home {
  background-image: url('../icons/bn-home.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--home, .bn-icon--home.active {
  color: #C5A028;
}
.bn-icon--live {
  background-image: url('../icons/bn-live.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--live, .bn-icon--live.active {
  color: #C5A028;
}
.bn-icon--location {
  background-image: url('../icons/bn-location.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--location, .bn-icon--location.active {
  color: #C5A028;
}
.bn-icon--lotus {
  background-image: url('../icons/bn-lotus.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--lotus, .bn-icon--lotus.active {
  color: #C5A028;
}
.bn-icon--menu {
  background-image: url('../icons/bn-menu.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--menu, .bn-icon--menu.active {
  color: #C5A028;
}
.bn-icon--message {
  background-image: url('../icons/bn-message.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--message, .bn-icon--message.active {
  color: #C5A028;
}
.bn-icon--mushroom {
  background-image: url('../icons/bn-mushroom.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--mushroom, .bn-icon--mushroom.active {
  color: #C5A028;
}
.bn-icon--pagoda {
  background-image: url('../icons/bn-pagoda.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--pagoda, .bn-icon--pagoda.active {
  color: #C5A028;
}
.bn-icon--plus {
  background-image: url('../icons/bn-plus.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--plus, .bn-icon--plus.active {
  color: #C5A028;
}
.bn-icon--recommend {
  background-image: url('../icons/bn-recommend.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--recommend, .bn-icon--recommend.active {
  color: #C5A028;
}
.bn-icon--scroll {
  background-image: url('../icons/bn-scroll.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--scroll, .bn-icon--scroll.active {
  color: #C5A028;
}
.bn-icon--search {
  background-image: url('../icons/bn-search.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--search, .bn-icon--search.active {
  color: #C5A028;
}
.bn-icon--shop {
  background-image: url('../icons/bn-shop.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--shop, .bn-icon--shop.active {
  color: #C5A028;
}
.bn-icon--st {
  background-image: url('../icons/bn-st.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--st, .bn-icon--st.active {
  color: #C5A028;
}
.bn-icon--star {
  background-image: url('../icons/bn-star.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--star, .bn-icon--star.active {
  color: #C5A028;
}
.bn-icon--sword {
  background-image: url('../icons/bn-sword.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--sword, .bn-icon--sword.active {
  color: #C5A028;
}
.bn-icon--taiji {
  background-image: url('../icons/bn-taiji.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--taiji, .bn-icon--taiji.active {
  color: #C5A028;
}
.bn-icon--talisman {
  background-image: url('../icons/bn-talisman.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--talisman, .bn-icon--talisman.active {
  color: #C5A028;
}
.bn-icon--user {
  background-image: url('../icons/bn-user.svg');
  color: #8a8a9e;
}
.nav-item.active .bn-icon--user, .bn-icon--user.active {
  color: #C5A028;
}

/* BN 图标特殊尺寸覆盖 */
.bn-icon--home { width: 22px; height: 20px; }
.bn-icon--search { width: 16px; height: 16px; top: 2px; left: 2px; }
.bn-icon--menu { width: 20px; height: 16px; }
.bn-icon--follow { height: 16px; }
.bn-icon--shop { width: 20px; height: 20px; }
.bn-icon--checkin { width: 20px; height: 22px; }
.bn-icon--talisman { width: 16px; height: 22px; }
.bn-icon--cloud { height: 16px; }
.bn-icon--mushroom { width: 18px; height: 22px; }
.bn-icon--scroll { width: 20px; height: 22px; }
.bn-icon--pagoda { width: 20px; height: 22px; }
.bn-icon--furnace { width: 20px; height: 22px; }
.bn-icon--lotus { width: 18px; height: 22px; }
.bn-icon--st { width: 22px; height: 22px; }

/* ===== 星缘图标容器 (.si) ===== */
.si {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== SI 星缘图标 SVG 引用 ===== */
.si-canghai {
  background-image: url('../icons/si-canghai.svg');
}
.si-cangjing {
  background-image: url('../icons/si-cangjing.svg');
}
.si-checkin {
  background-image: url('../icons/si-checkin.svg');
}
.si-chuanyin {
  background-image: url('../icons/si-chuanyin.svg');
}
.si-danfang {
  background-image: url('../icons/si-danfang.svg');
}
.si-daobiao {
  background-image: url('../icons/si-daobiao.svg');
}
.si-daoyou {
  background-image: url('../icons/si-daoyou.svg');
}
.si-diexian {
  background-image: url('../icons/si-diexian.svg');
}
.si-dongfu {
  background-image: url('../icons/si-dongfu.svg');
}
.si-fabu {
  background-image: url('../icons/si-fabu.svg');
}
.si-favorites {
  background-image: url('../icons/si-favorites.svg');
}
.si-feisheng {
  background-image: url('../icons/si-feisheng.svg');
}
.si-feishu {
  background-image: url('../icons/si-feishu.svg');
}
.si-hamburger {
  background-image: url('../icons/si-hamburger.svg');
}
.si-hanbing {
  background-image: url('../icons/si-hanbing.svg');
}
.si-history {
  background-image: url('../icons/si-history.svg');
}
.si-jianzhen {
  background-image: url('../icons/si-jianzhen.svg');
}
.si-jingjuan {
  background-image: url('../icons/si-jingjuan.svg');
}
.si-liantai {
  background-image: url('../icons/si-liantai.svg');
}
.si-lingcao {
  background-image: url('../icons/si-lingcao.svg');
}
.si-lingguang {
  background-image: url('../icons/si-lingguang.svg');
}
.si-liuguang {
  background-image: url('../icons/si-liuguang.svg');
}
.si-lundao {
  background-image: url('../icons/si-lundao.svg');
}
.si-qingfeng {
  background-image: url('../icons/si-qingfeng.svg');
}
.si-rihui {
  background-image: url('../icons/si-rihui.svg');
}
.si-search {
  background-image: url('../icons/si-search.svg');
}
.si-shenlong {
  background-image: url('../icons/si-shenlong.svg');
}
.si-shouye {
  background-image: url('../icons/si-shouye.svg');
}
.si-st {
  background-image: url('../icons/si-st.svg');
}
.si-taohua {
  background-image: url('../icons/si-taohua.svg');
}
.si-tianjie {
  background-image: url('../icons/si-tianjie.svg');
}
.si-tianyan {
  background-image: url('../icons/si-tianyan.svg');
}
.si-wo {
  background-image: url('../icons/si-wo.svg');
}
.si-xianbang {
  background-image: url('../icons/si-xianbang.svg');
}
.si-xiandun {
  background-image: url('../icons/si-xiandun.svg');
}
.si-xianfu {
  background-image: url('../icons/si-xianfu.svg');
}
.si-xiangong {
  background-image: url('../icons/si-xiangong.svg');
}
.si-xiangyun {
  background-image: url('../icons/si-xiangyun.svg');
}
.si-xianjian {
  background-image: url('../icons/si-xianjian.svg');
}
.si-xianjing {
  background-image: url('../icons/si-xianjing.svg');
}
.si-xianli {
  background-image: url('../icons/si-xianli.svg');
}
.si-xianlu {
  background-image: url('../icons/si-xianlu.svg');
}
.si-xianquan {
  background-image: url('../icons/si-xianquan.svg');
}
.si-xianshan {
  background-image: url('../icons/si-xianshan.svg');
}
.si-xianshi {
  background-image: url('../icons/si-xianshi.svg');
}
.si-xianwen {
  background-image: url('../icons/si-xianwen.svg');
}
.si-xianyuan {
  background-image: url('../icons/si-xianyuan.svg');
}
.si-xingchen {
  background-image: url('../icons/si-xingchen.svg');
}
.si-xinggui {
  background-image: url('../icons/si-xinggui.svg');
}
.si-xinghe {
  background-image: url('../icons/si-xinghe.svg');
}
.si-xingmang {
  background-image: url('../icons/si-xingmang.svg');
}
.si-yirong {
  background-image: url('../icons/si-yirong.svg');
}
.si-yuehua {
  background-image: url('../icons/si-yuehua.svg');
}
.si-zhanbu {
  background-image: url('../icons/si-zhanbu.svg');
}
.si-zhenhuo {
  background-image: url('../icons/si-zhenhuo.svg');
}
.si-zhulin {
  background-image: url('../icons/si-zhulin.svg');
}

/* SI 特殊尺寸覆盖 */
.si-liuguang { width:4px; height:24px; }
.si-zhenhuo { width:16px; height:24px; }
.si-tianjie { width:6px; height:24px; }
.si-xianjian { width:6px; height:24px; }
.si-hanbing { width:16px; height:22px; }
.si-qingfeng { height:8px; }
.si-liantai { height:12px; }
.si-xiangyun { height:16px; }
.si-tianyan { height:16px; }
.si-feishu { height:16px; }
.si-diexian { height:16px; }

/* ===== xi- 前缀别名映射 (56个) — 直接复用对应 si- 图标的 SVG ===== */
.si.xi-user, .si-daoyou {
  background-image: url('../icons/si-daoyou.svg');
}
.si.xi-publish, .si-fabu {
  background-image: url('../icons/si-fabu.svg');
}
.si.xi-message, .si-chuanyin {
  background-image: url('../icons/si-chuanyin.svg');
}
.si.xi-home, .si-dongfu {
  background-image: url('../icons/si-dongfu.svg');
}
.si.xi-topic, .si-xianwen {
  background-image: url('../icons/si-xianwen.svg');
}
.si.xi-forum, .si-lundao {
  background-image: url('../icons/si-lundao.svg');
}
.si.xi-library, .si-cangjing {
  background-image: url('../icons/si-cangjing.svg');
}
.si.xi-alchemy, .si-danfang {
  background-image: url('../icons/si-danfang.svg');
}
.si.xi-ranking, .si-xianbang {
  background-image: url('../icons/si-xianbang.svg');
}
.si.xi-market, .si-xianshi {
  background-image: url('../icons/si-xianshi.svg');
}
.si.xi-yuan, .si-xianyuan {
  background-image: url('../icons/si-xianyuan.svg');
}
.si.xi-stars, .si-xingchen {
  background-image: url('../icons/si-xingchen.svg');
}
.si.xi-goldlight, .si-lingguang {
  background-image: url('../icons/si-lingguang.svg');
}
.si.xi-orbit, .si-xinggui {
  background-image: url('../icons/si-xinggui.svg');
}
.si.xi-starburst, .si-xingmang {
  background-image: url('../icons/si-xingmang.svg');
}
.si.xi-flow, .si-liuguang {
  background-image: url('../icons/si-liuguang.svg');
}
.si.xi-moon, .si-yuehua {
  background-image: url('../icons/si-yuehua.svg');
}
.si.xi-sun, .si-rihui {
  background-image: url('../icons/si-rihui.svg');
}
.si.xi-fire, .si-zhenhuo {
  background-image: url('../icons/si-zhenhuo.svg');
}
.si.xi-spring, .si-xianquan {
  background-image: url('../icons/si-xianquan.svg');
}
.si.xi-herb, .si-lingcao {
  background-image: url('../icons/si-lingcao.svg');
}
.si.xi-tribulation, .si-tianjie {
  background-image: url('../icons/si-tianjie.svg');
}
.si.xi-shield, .si-xiandun {
  background-image: url('../icons/si-xiandun.svg');
}
.si.xi-sword, .si-xianjian {
  background-image: url('../icons/si-xianjian.svg');
}
.si.xi-crystal, .si-xianjing {
  background-image: url('../icons/si-xianjing.svg');
}
.si.xi-signin, .si-daobiao {
  background-image: url('../icons/si-daobiao.svg');
}
.si.xi-divine, .si-zhanbu {
  background-image: url('../icons/si-zhanbu.svg');
}
.si.xi-disguise, .si-yirong {
  background-image: url('../icons/si-yirong.svg');
}
.si.xi-palace, .si-xiangong {
  background-image: url('../icons/si-xiangong.svg');
}
.si.xi-setting, .si-jianzhen {
  background-image: url('../icons/si-jianzhen.svg');
}
.si.xi-talisman, .si-xianfu {
  background-image: url('../icons/si-xianfu.svg');
}
.si.xi-ascend, .si-feisheng {
  background-image: url('../icons/si-feisheng.svg');
}
.si.xi-scroll, .si-jingjuan {
  background-image: url('../icons/si-jingjuan.svg');
}
.si.xi-eye, .si-tianyan {
  background-image: url('../icons/si-tianyan.svg');
}
.si.xi-flybook, .si-feishu {
  background-image: url('../icons/si-feishu.svg');
}
.si.xi-gift, .si-xianli {
  background-image: url('../icons/si-xianli.svg');
}
.si.xi-peach, .si-taohua {
  background-image: url('../icons/si-taohua.svg');
}
.si.xi-deer, .si-xianlu {
  background-image: url('../icons/si-xianlu.svg');
}
.si.xi-dragon, .si-shenlong {
  background-image: url('../icons/si-shenlong.svg');
}
.si.xi-butterfly, .si-diexian {
  background-image: url('../icons/si-diexian.svg');
}
.si.xi-lotus, .si-liantai {
  background-image: url('../icons/si-liantai.svg');
}
.si.xi-cloud, .si-xiangyun {
  background-image: url('../icons/si-xiangyun.svg');
}
.si.xi-sea, .si-canghai {
  background-image: url('../icons/si-canghai.svg');
}
.si.xi-ice, .si-hanbing {
  background-image: url('../icons/si-hanbing.svg');
}
.si.xi-wind, .si-qingfeng {
  background-image: url('../icons/si-qingfeng.svg');
}
.si.xi-mountain, .si-xianshan {
  background-image: url('../icons/si-xianshan.svg');
}
.si.xi-bamboo, .si-zhulin {
  background-image: url('../icons/si-zhulin.svg');
}
.si.xi-galaxy, .si-xinghe {
  background-image: url('../icons/si-xinghe.svg');
}
.si.xi-shouye, .si-shouye {
  background-image: url('../icons/si-shouye.svg');
}
.si.xi-wo, .si-wo {
  background-image: url('../icons/si-wo.svg');
}
.si.xi-search, .si-search {
  background-image: url('../icons/si-search.svg');
}
.si.xi-history, .si-history {
  background-image: url('../icons/si-history.svg');
}
.si.xi-favorites, .si-favorites {
  background-image: url('../icons/si-favorites.svg');
}
.si.xi-checkin, .si-checkin {
  background-image: url('../icons/si-checkin.svg');
}
.si.xi-st, .si-st {
  background-image: url('../icons/si-st.svg');
}
.si.xi-hamburger, .si-hamburger {
  background-image: url('../icons/si-hamburger.svg');
}
.si-zhulin { width: 16px; }
.si-xinghe { height: 6px; }
.si-daoyou { width: 20px; height: 20px; }
.si-search { width: 24px; height: 24px; }
.si-history { width: 24px; height: 24px; }

/* ===== 交互图标 (文章卡片 / 侧栏) ===== */
.si-like {
  background-image: url('../icons/si-like.svg');
  width: 16px; height: 16px;
}
.si-comment {
  background-image: url('../icons/si-comment.svg');
  width: 16px; height: 16px;
}
.si-favorite {
  background-image: url('../icons/si-favorite.svg');
  width: 16px; height: 16px;
}
.si-share {
  background-image: url('../icons/si-share.svg');
  width: 16px; height: 16px;
}

/* 交互图标悬浮 — 金色光晕 */
.si-like:hover, .si-comment:hover, .si-favorite:hover, .si-share:hover {
  filter: drop-shadow(0 0 4px rgba(240,192,96,.5));
}

/* 点赞激活态 */
.si-like.liked {
  filter: drop-shadow(0 0 6px rgba(240,192,96,.7));
  animation: likePop .35s ease;
}
.si-like.liked::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,192,96,.3) 0%, transparent 70%);
  animation: goldShimmer .6s ease-out;
  pointer-events: none;
}

/* 收藏激活态 */
.si-favorite.favorited {
  filter: drop-shadow(0 0 6px rgba(240,192,96,.7));
}
.si-favorite.favorited::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,192,96,.25) 0%, transparent 70%);
  animation: goldShimmer .6s ease-out;
  pointer-events: none;
}

/* 八卦旋转 (si-st 阵图) */
.si-st {
  transition: transform .6s ease;
}
.si-st:hover {
  animation: baguaSpin 3s linear infinite;
}