/* ===== 仙里仙气 · 底部导航 ===== */
/* 禁用项：保留 DOM 占位，视觉隐藏，不影响 flex 布局 */
.bottom-nav .nav-item.nav-item--disabled {
  visibility: hidden;
  pointer-events: none;
}
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom,0));
  background: rgba(7,7,13,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(180,140,80,.12);
}
.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #9b8ec4;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: all .25s;
  position: relative;
}
.bottom-nav .nav-item .nav-icon {
  font-size: 22px;
  transition: transform .25s;
}
.bottom-nav .nav-item:hover { color: #c4b5fd; }
.bottom-nav .nav-item.active {
  color: #f0c060;
  font-weight: 600;
}
.bottom-nav .nav-item.active::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #d4a843, #f0c060, #d4a843);
  box-shadow: 0 0 6px rgba(240,192,96,.35);
}
.bottom-nav .nav-item.plus .nav-icon {
  background: conic-gradient(#d4a843, #9b59b6, #00d2ff, #d4a843);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 16px rgba(155,89,182,.35);
  animation: plusGlow 3s ease-in-out infinite alternate;
}
@keyframes plusGlow {
  0% { box-shadow: 0 4px 14px rgba(155,89,182,.3); }
  100% { box-shadow: 0 4px 22px rgba(240,192,96,.45); }
}
.nav-badge {
  position: absolute;
  z-index: 999;
  top: -4px;
  right: -16px;
  background: linear-gradient(135deg, #d4a843, #e08030);
  color: #fff;
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
  font-weight: 700;
  border: 1.5px solid rgba(7,7,13,.8);
}

/* ============================================================
   底部导航图标 — CSS手绘 + 仙侠特效 (黑色为主，金色点缀)
   ============================================================ */
.bn-icon {
  display: inline-block;
  width: 22px; height: 22px;
  position: relative;
  vertical-align: middle;
  font-style: normal;
  transition: all .25s;
}

/* ── 通用 Hover 灵气粒子 ── */
@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); }
}

.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));
}

/* ===== 1. Home — 洞府 (小房子) ===== */
.bn-icon--home {
  width: 22px; height: 20px;
}
.bn-icon--home::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 11px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-top: none;
  border-radius: 0 0 1px 1px;
}
.bn-icon--home::after {
  content: '';
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 8px solid #2a2a3e;
  filter: drop-shadow(0 0 3px rgba(200,160,40,.15));
}
.nav-item.active .bn-icon--home::before { border-color: #C5A028; }
.nav-item.active .bn-icon--home::after { border-bottom-color: #C5A028; }

/* ===== 2. Friends — 仙友 (双圆点) ===== */
.bn-icon--friends {
  width: 22px; height: 22px;
}
.bn-icon--friends::before {
  content: '';
  position: absolute;
  top: 2px; left: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  animation: bnBreathe 3s ease-in-out infinite;
}
.bn-icon--friends::after {
  content: '';
  position: absolute;
  top: 2px; right: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  animation: bnBreathe 3s ease-in-out .8s infinite;
}
.nav-item.active .bn-icon--friends::before,
.nav-item.active .bn-icon--friends::after { border-color: #C5A028; background: #1a1a3e; }

/* ===== 3. Plus — 开坛 (十字) ===== */
.bn-icon--plus {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  color: #fff;
  text-shadow: 0 0 6px rgba(200,160,40,.4);
}

/* ===== 4. Message — 传音 (气泡) ===== */
.bn-icon--message {
  width: 22px; height: 22px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 8px 8px 8px 2px;
}
.bn-icon--message::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-top: 5px solid #2a2a3e;
}
.nav-item.active .bn-icon--message { border-color: #C5A028; }

/* ===== 5. User — 道号 (人形) ===== */
.bn-icon--user {
  width: 22px; height: 22px;
}
.bn-icon--user::before {
  content: '';
  position: absolute;
  top: 1px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid #2a2a3e;
  background: #1a1a2e;
}
.bn-icon--user::after {
  content: '';
  position: absolute;
  bottom: 1px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 9px;
  border-radius: 0 0 4px 4px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-top: none;
}
.nav-item.active .bn-icon--user::before,
.nav-item.active .bn-icon--user::after { border-color: #C5A028; }

/* ===== 6. Search — 探索 (放大镜) ===== */
.bn-icon--search {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid #2a2a3e;
  background: transparent;
  position: relative; top: 2px; left: 2px;
}
.bn-icon--search::after {
  content: '';
  position: absolute;
  bottom: -4px; right: -4px;
  width: 7px; height: 2px;
  background: #2a2a3e;
  border-radius: 1px;
  transform: rotate(45deg);
  transform-origin: top left;
}
.nav-item.active .bn-icon--search { border-color: #C5A028; }
.nav-item.active .bn-icon--search::after { background: #C5A028; }

/* ===== 7. Menu — 阵法 (三道横线) ===== */
.bn-icon--menu {
  width: 20px; height: 16px;
}
.bn-icon--menu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: #2a2a3e;
  box-shadow: 0 6px 0 #2a2a3e, 0 12px 0 #2a2a3e;
}
.nav-item.active .bn-icon--menu::before {
  background: #C5A028;
  box-shadow: 0 6px 0 #C5A028, 0 12px 0 #C5A028;
}

/* ===== 8. Live — 灵视 (天线波纹) ===== */
.bn-icon--live {
  width: 22px; height: 22px;
}
.bn-icon--live::before {
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 12px;
  background: #2a2a3e;
}
.bn-icon--live::after {
  content: '';
  position: absolute;
  bottom: 1px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 6px solid #2a2a3e;
  animation: bnBreathe 2s ease-in-out infinite;
}
.nav-item.active .bn-icon--live::before { background: #C5A028; }
.nav-item.active .bn-icon--live::after { border-top-color: #C5A028; }

/* ===== 9. Follow — 关注 (眼睛) ===== */
.bn-icon--follow {
  width: 22px; height: 16px;
  border: 1.5px solid #2a2a3e;
  border-radius: 50%;
  background: #1a1a2e;
}
.bn-icon--follow::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2a2a3e;
}
.nav-item.active .bn-icon--follow { border-color: #C5A028; }
.nav-item.active .bn-icon--follow::before { background: #C5A028; }

/* ===== 10. Group — 仙盟 (三个竖条) ===== */
.bn-icon--group {
  width: 22px; height: 22px;
}
.bn-icon--group::before {
  content: '';
  position: absolute;
  bottom: 2px; left: 2px;
  width: 4px; height: 14px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 1px 1px 0 0;
}
.bn-icon--group::after {
  content: '';
  position: absolute;
  bottom: 2px; right: 2px;
  width: 4px; height: 19px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 1px 1px 0 0;
}
.nav-item.active .bn-icon--group::before,
.nav-item.active .bn-icon--group::after { border-color: #C5A028; }

/* ===== 11. Shop — 坊市 (菱形+横线) ===== */
.bn-icon--shop {
  width: 20px; height: 20px;
  transform: rotate(45deg);
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
}
.bn-icon--shop::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 1.5px;
  background: #2a2a3e;
}
.nav-item.active .bn-icon--shop { border-color: #C5A028; }
.nav-item.active .bn-icon--shop::after { background: #C5A028; }

/* ===== 12. Location — 灵脉 (定位针) ===== */
.bn-icon--location {
  width: 22px; height: 22px;
}
.bn-icon--location::before {
  content: '';
  position: absolute;
  top: 1px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #2a2a3e;
  background: #1a1a2e;
}
.bn-icon--location::after {
  content: '';
  position: absolute;
  bottom: 1px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #2a2a3e;
}
.nav-item.active .bn-icon--location::before { border-color: #C5A028; }
.nav-item.active .bn-icon--location::after { border-top-color: #C5A028; }

/* ===== 13. Checkin — 签到 (日历页) ===== */
.bn-icon--checkin {
  width: 20px; height: 22px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 2px;
}
.bn-icon--checkin::before {
  content: '';
  position: absolute;
  top: -3px; left: 3px; right: 3px;
  height: 3px;
  background: #2a2a3e;
  border-radius: 1px 1px 0 0;
}
.bn-icon--checkin::after {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 1.5px;
  background: #2a2a3e;
  box-shadow: 0 3px 0 #2a2a3e, 0 6px 0 #2a2a3e;
}
.nav-item.active .bn-icon--checkin { border-color: #C5A028; }
.nav-item.active .bn-icon--checkin::before { background: #C5A028; }
.nav-item.active .bn-icon--checkin::after { background: #C5A028; box-shadow: 0 3px 0 #C5A028, 0 6px 0 #C5A028; }

/* ===== 扩展图标 (common.js 仙侠辞典) ===== */
.bn-icon--star {
  width: 22px; height: 22px;
}
.bn-icon--star::before {
  content: '✦';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #C5A028;
  text-shadow: 0 0 6px rgba(200,160,40,.4);
}
.bn-icon--bagua {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #2a2a3e;
  background: #1a1a2e;
}
.bn-icon--bagua::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px; right: 3px; bottom: 3px;
  border-radius: 50%;
  border: 1px solid rgba(200,160,40,.2);
}
.bn-icon--sword {
  width: 22px; height: 22px;
}
.bn-icon--sword::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 3px; height: 14px;
  background: #2a2a3e;
  border-radius: 0 0 1px 1px;
}
.bn-icon--sword::after {
  content: '';
  position: absolute;
  bottom: 1px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 3px;
  background: #2a2a3e;
  border-radius: 1px;
}
.bn-icon--furnace {
  width: 20px; height: 22px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 3px 3px 1px 1px;
}
.bn-icon--furnace::after {
  content: '';
  position: absolute;
  top: 4px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 1.5px;
  background: #2a2a3e;
  border-radius: 1px;
  box-shadow: 0 3px 0 #2a2a3e;
}
.bn-icon--talisman {
  width: 16px; height: 22px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
}
.bn-icon--talisman::after {
  content: '';
  position: absolute;
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 10px;
  background: #2a2a3e;
}
.bn-icon--cloud {
  width: 22px; height: 16px;
  background: radial-gradient(circle at 20% 50%, #1a1a2e 40%, transparent 40%),
              radial-gradient(circle at 50% 20%, #1a1a2e 45%, transparent 45%),
              radial-gradient(circle at 80% 50%, #1a1a2e 40%, transparent 40%);
  border: 1px solid #2a2a3e;
  border-radius: 50%;
}
.bn-icon--lotus {
  width: 22px; height: 22px;
}
.bn-icon--lotus::before {
  content: '';
  position: absolute;
  bottom: 1px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #1a1a2e;
  filter: drop-shadow(0 -1px 0 #2a2a3e);
}
.bn-icon--lotus::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 8px;
  background: #2a2a3e;
}
.bn-icon--mushroom {
  width: 18px; height: 22px;
}
.bn-icon--mushroom::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 10px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 8px 8px 2px 2px;
}
.bn-icon--mushroom::after {
  content: '';
  position: absolute;
  bottom: 1px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 12px;
  background: #2a2a3e;
  border-radius: 0 0 2px 2px;
}
.bn-icon--scroll {
  width: 20px; height: 22px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 2px;
}
.bn-icon--scroll::before,
.bn-icon--scroll::after {
  content: '';
  position: absolute;
  top: 2px; bottom: 2px;
  width: 4px;
  background: #2a2a3e;
  border-radius: 2px;
}
.bn-icon--scroll::before { left: -2px; }
.bn-icon--scroll::after { right: -2px; }
.bn-icon--pagoda {
  width: 20px; height: 22px;
}
.bn-icon--pagoda::before {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 14px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
}
.bn-icon--pagoda::after {
  content: '';
  position: absolute;
  bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid #2a2a3e;
}
.bn-icon--crane {
  width: 22px; height: 22px;
}
.bn-icon--crane::before {
  content: '';
  position: absolute;
  top: 3px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid #2a2a3e;
}
.bn-icon--crane::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 12px;
  background: #2a2a3e;
  border-radius: 1px;
}

/* ===== 14. Recommend — 推荐 (星辰) ===== */
.bn-icon--recommend {
  width: 22px; height: 22px;
}
.bn-icon--recommend::before {
  content: '✦';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 18px;
  color: #2a2a3e;
}
.nav-item.active .bn-icon--recommend::before { color: #C5A028; text-shadow: 0 0 6px rgba(200,160,40,.5); }

/* ===== 15. Bagua — 八卦 (圆分两半+两点) ===== */
.bn-icon--bagua {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #2a2a3e;
  background: conic-gradient(#1a1a2e 0% 50%, #2a2a3e 50% 100%);
}
.bn-icon--bagua::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2a2a3e;
}
.bn-icon--bagua::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #1a1a2e;
}
.nav-item.active .bn-icon--bagua { border-color: #C5A028; background: conic-gradient(#1a1a3e 0% 50%, #C5A028 50% 100%); }
.nav-item.active .bn-icon--bagua::before { background: #C5A028; }
.nav-item.active .bn-icon--bagua::after { background: #1a1a3e; }

/* ===== 16. Taiji — 太极 (双鱼) ===== */
.bn-icon--taiji {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #2a2a3e;
  background: #1a1a2e;
}
.bn-icon--taiji::before {
  content: '';
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2a2a3e;
}
.bn-icon--taiji::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2a2a3e;
}
.nav-item.active .bn-icon--taiji { border-color: #C5A028; }
.nav-item.active .bn-icon--taiji::before,
.nav-item.active .bn-icon--taiji::after { background: #C5A028; }

/* ===== 17. Flysword — 飞剑 (斜线+菱形) ===== */
.bn-icon--flysword {
  width: 22px; height: 22px;
  transform: rotate(45deg);
}
.bn-icon--flysword::before {
  content: '';
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 14px;
  background: #2a2a3e;
}
.bn-icon--flysword::after {
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  background: #2a2a3e;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.nav-item.active .bn-icon--flysword::before { background: #C5A028; }
.nav-item.active .bn-icon--flysword::after { background: #C5A028; }

/* ===== 18. Furnace — 丹炉 (圆底壶) ===== */
.bn-icon--furnace {
  width: 22px; height: 22px;
}
.bn-icon--furnace::before {
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 12px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 6px 6px 2px 2px;
}
.bn-icon--furnace::after {
  content: '';
  position: absolute;
  top: 15px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 4px solid #2a2a3e;
}
.nav-item.active .bn-icon--furnace::before { border-color: #C5A028; }
.nav-item.active .bn-icon--furnace::after { border-top-color: #C5A028; }

/* ===== 19. Talisman — 符箓 (竖长矩形+横线) ===== */
.bn-icon--talisman {
  width: 22px; height: 22px;
}
.bn-icon--talisman::before {
  content: '';
  position: absolute;
  top: 1px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 18px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 1px;
}
.bn-icon--talisman::after {
  content: '';
  position: absolute;
  top: 7px; left: 7px; right: 9px;
  height: 1px;
  background: #2a2a3e;
  box-shadow: 0 3.5px 0 #2a2a3e, 0 7px 0 #2a2a3e;
}
.nav-item.active .bn-icon--talisman::before { border-color: #C5A028; }
.nav-item.active .bn-icon--talisman::after { background: #C5A028; box-shadow: 0 3.5px 0 #C5A028, 0 7px 0 #C5A028; }

/* ===== 20. Cloud — 祥云 (叠加圆) ===== */
.bn-icon--cloud {
  width: 22px; height: 22px;
}
.bn-icon--cloud::before {
  content: '';
  position: absolute;
  bottom: 2px; left: 2px;
  width: 16px; height: 12px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 8px 8px 2px 2px;
}
.bn-icon--cloud::after {
  content: '';
  position: absolute;
  top: 3px; left: 5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  box-shadow: 6px 0 0 -1.5px #1a1a2e, 6px 0 0 0 #2a2a3e;
}
.nav-item.active .bn-icon--cloud::before { border-color: #C5A028; }
.nav-item.active .bn-icon--cloud::after { border-color: #C5A028; }

/* ===== 21. Lotus — 莲花 (菱形花瓣) ===== */
.bn-icon--lotus {
  width: 22px; height: 22px;
}
.bn-icon--lotus::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.bn-icon--lotus::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 5px;
  background: #2a2a3e;
}
.nav-item.active .bn-icon--lotus::before { border-color: #C5A028; background: #1a1a3e; }
.nav-item.active .bn-icon--lotus::after { background: #C5A028; }

/* ===== 22. Ganoderma — 灵芝 (伞盖+柄) ===== */
.bn-icon--ganoderma {
  width: 22px; height: 22px;
}
.bn-icon--ganoderma::before {
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 10px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 7px 7px 2px 2px;
}
.bn-icon--ganoderma::after {
  content: '';
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 8px;
  background: #2a2a3e;
}
.nav-item.active .bn-icon--ganoderma::before { border-color: #C5A028; }
.nav-item.active .bn-icon--ganoderma::after { background: #C5A028; }

/* ===== 23. Scroll — 卷轴 (文档页) ===== */
.bn-icon--scroll {
  width: 22px; height: 22px;
}
.bn-icon--scroll::before {
  content: '';
  position: absolute;
  top: 2px; left: 4px;
  width: 12px; height: 16px;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 1px;
}
.bn-icon--scroll::after {
  content: '';
  position: absolute;
  top: 6px; left: 7px; right: 6px;
  height: 1px;
  background: #2a2a3e;
  box-shadow: 0 3px 0 #2a2a3e, 0 6px 0 #2a2a3e;
}
.nav-item.active .bn-icon--scroll::before { border-color: #C5A028; }
.nav-item.active .bn-icon--scroll::after { background: #C5A028; box-shadow: 0 3px 0 #C5A028, 0 6px 0 #C5A028; }

/* ===== 24. Star — 星辰 (五角星) ===== */
.bn-icon--star {
  width: 22px; height: 22px;
}
.bn-icon--star::before {
  content: '★';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 20px;
  color: #2a2a3e;
}
.nav-item.active .bn-icon--star::before { color: #C5A028; text-shadow: 0 0 6px rgba(200,160,40,.5); }

/* ===== 25. Pagoda — 宝塔 (叠加梯形) ===== */
.bn-icon--pagoda {
  width: 22px; height: 22px;
}
.bn-icon--pagoda::before {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 6px solid #2a2a3e;
}
.bn-icon--pagoda::after {
  content: '';
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 5px solid #2a2a3e;
}
.nav-item.active .bn-icon--pagoda::before,
.nav-item.active .bn-icon--pagoda::after { border-bottom-color: #C5A028; }

/* ===== 26. Crane — 仙鹤 (V形+线) ===== */
.bn-icon--crane {
  width: 22px; height: 22px;
}
.bn-icon--crane::before {
  content: '';
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 2px;
  background: #2a2a3e;
}
.bn-icon--crane::after {
  content: '';
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #2a2a3e;
}
.nav-item.active .bn-icon--crane::before { background: #C5A028; }
.nav-item.active .bn-icon--crane::after { border-bottom-color: #C5A028; }