/* ===================================================================
 * 自定义图标样式 - 完全脱钩安知鱼图标系统
 * 使用自定义shijianus-icon前缀替代anzhiyu-icon
 * =================================================================== */

/* 基础图标样式 - 兼容FontAwesome和其他图标库 */
[class^="shijianus-icon-"], [class*=" shijianus-icon-"] {
  /* 使用Font Awesome作为后备方案 */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif !important;
  font-style: normal;
  font-weight: 900;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

/* 图标映射到Font Awesome或其他通用图标 */
.shijianus-icon-box-archive::before { content: "\f187"; } /* fa-archive */
.shijianus-icon-shapes::before { content: "\f1db"; }   /* fa-shapes */
.shijianus-icon-tags::before { content: "\f02c"; }      /* fa-tags */
.shijianus-icon-link::before { content: "\f0c1"; }      /* fa-link */
.shijianus-icon-artstation::before { content: "\f77a"; } /* fa-artstation */
.shijianus-icon-envelope::before { content: "\f0e0"; }  /* fa-envelope */
.shijianus-icon-music::before { content: "\f001"; }     /* fa-music */
.shijianus-icon-bilibili::before { content: "\e05d"; }  /* fa-bilibili (自定义) */
.shijianus-icon-images::before { content: "\f302"; }    /* fa-images */
.shijianus-icon-fan::before { content: "\f863"; }       /* fa-fan */
.shijianus-icon-paper-plane::before { content: "\f1d8"; } /* fa-paper-plane */
.shijianus-icon-lightbulb::before { content: "\f0eb"; }  /* fa-lightbulb */
.shijianus-icon-shoe-prints1::before { content: "\f54b"; } /* fa-shoe-prints */
.shijianus-icon-github::before { content: "\f09b"; }     /* fa-github */
.shijianus-icon-weibo::before { content: "\f18a"; }     /* fa-weibo */
.shijianus-icon-facebook1::before { content: "\f09a"; } /* fa-facebook */
.shijianus-icon-rss::before { content: "\f09e"; }       /* fa-rss */
.shijianus-icon-tiktok::before { content: "\e07b"; }    /* fa-tiktok */
.shijianus-icon-copyright-line::before { content: "\f1f9"; } /* fa-copyright */
.shijianus-icon-code::before { content: "\f121"; }      /* fa-code */
.shijianus-icon-graduation-cap::before { content: "\f19d"; } /* fa-graduation-cap */
.shijianus-icon-book::before { content: "\f02d"; }      /* fa-book */
.shijianus-icon-share::before { content: "\f064"; }     /* fa-share */

/* 其他常用图标映射 */
.shijianus-icon-home::before { content: "\f015"; }      /* fa-home */
.shijianus-icon-user::before { content: "\f007"; }      /* fa-user */
.shijianus-icon-setting::before { content: "\f013"; }   /* fa-cog */
.shijianus-icon-heart::before { content: "\f004"; }     /* fa-heart */
.shijianus-icon-star::before { content: "\f005"; }      /* fa-star */
.shijianus-icon-clock::before { content: "\f017"; }     /* fa-clock */
.shijianus-icon-calendar::before { content: "\f133"; }  /* fa-calendar */
.shijianus-icon-comment::before { content: "\f075"; }   /* fa-comment */
.shijianus-icon-search::before { content: "\f002"; }    /* fa-search */
.shijianus-icon-menu::before { content: "\f0c9"; }     /* fa-bars */
.shijianus-icon-close::before { content: "\f00d"; }     /* fa-times */
.shijianus-icon-check::before { content: "\f00c"; }     /* fa-check */
.shijianus-icon-arrow-left::before { content: "\f060"; } /* fa-arrow-left */
.shijianus-icon-arrow-right::before { content: "\f061"; } /* fa-arrow-right */
.shijianus-icon-arrow-up::before { content: "\f062"; }   /* fa-arrow-up */
.shijianus-icon-arrow-down::before { content: "\f063"; } /* fa-arrow-down */

/* 技术图标映射 */
.shijianus-icon-html5::before { content: "\f13b"; }     /* fa-html5 */
.shijianus-icon-css3::before { content: "\f13c"; }      /* fa-css3 */
.shijianus-icon-javascript::before { content: "\f3b8"; } /* fa-square-js */
.shijianus-icon-react::before { content: "\f41b"; }     /* fa-react */
.shijianus-icon-vue::before { content: "\f42f"; }       /* fa-vuejs */
.shijianus-icon-node::before { content: "\f419"; }       /* fa-node */
.shijianus-icon-python::before { content: "\f3e2"; }     /* fa-python */
.shijianus-icon-docker::before { content: "\f21a"; }     /* fa-docker */
.shijianus-icon-git::before { content: "\f1d3"; }       /* fa-git-alt */

/* 调试图标显示 - 如果图标不显示，显示文字标签 */
.shijianus-icon-debug {
  position: relative;
}

.shijianus-icon-debug::after {
  content: attr(data-icon-name);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #666;
  font-family: monospace;
  white-space: nowrap;
}

/* 确保图标在所有情况下都能正常显示 */
.fallback-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
  background: #f0f0f0;
  border-radius: 2px;
  color: #666;
  font-size: 0.8em;
  line-height: 1em;
}

/* CSS变量定义（用于主题兼容性） */
:root {
  --shijianus-main: #425AEF;
  --shijianus-fontcolor: #1F2D3D;
  --shijianus-card-bg: #ffffff;
  --shijianus-background: #f7f9fe;
  --shijianus-scrollbar: #666666;
  --shijianus-code-stress: #2d2d2d;
}

/* 覆盖原anzhiyu变量以确保兼容性 */
:root {
  --anzhiyu-main: var(--shijianus-main);
  --anzhiyu-fontcolor: var(--shijianus-fontcolor);
  --anzhiyu-card-bg: var(--shijianus-card-bg);
  --anzhiyu-background: var(--shijianus-background);
  --anzhiyu-scrollbar: var(--shijianus-scrollbar);
  --anzhiyu-code-stress: var(--shijianus-code-stress);
}

/* 图标动画效果 */
.shijianus-icon-spin {
  animation: shijianus-spin 1s linear infinite;
}

.shijianus-icon-pulse {
  animation: shijianus-spin 1s steps(8) infinite;
}

@keyframes shijianus-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 响应式图标 */
@media (max-width: 768px) {
  [class^="shijianus-icon-"], [class*=" shijianus-icon-"] {
    font-size: 0.9em;
  }
}

/* 图标颜色类 */
.shijianus-icon-primary { color: var(--shijianus-main); }
.shijianus-icon-secondary { color: var(--shijianus-fontcolor); }
.shijianus-icon-success { color: #28a745; }
.shijianus-icon-danger { color: #dc3545; }
.shijianus-icon-warning { color: #ffc107; }
.shijianus-icon-info { color: #17a2b8; }

/* 特殊图标效果 */
.shijianus-icon-hover:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.shijianus-icon-shadow {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}