/* 自定义图标 - Font Awesome替代方案 */

/* 基础样式 - 增强版 */
.fas,
.far,
.fab {
    font-family: 'CustomIcons', sans-serif;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    width: 1.2em;
    height: 1.2em;
    text-align: center;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    color: currentColor;
    transition: all 0.2s ease;
}

/* 图标通用样式增强 */
.fas {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 主题图标变量定义 */
:root {
    --theme-sun-icon: url('浅色模式.svg');
    --theme-moon-icon: url('深色模式.svg');
    --theme-play-icon: url('浅色播放.svg');
    --theme-pause-icon: url('浅色暂停.svg');
    --theme-prev-icon: url('浅色上一首.svg');
    --theme-next-icon: url('浅色下一首.svg');
    --theme-times-icon: url('X.svg');
    --theme-bars-icon: url('菜单.svg');
    --theme-music-icon: url('音乐播放器.svg');
    --theme-info-icon: '';
    --theme-random-icon: url('浅色随机播放.svg');
    --theme-random-active-icon: url('深色随机播放.svg');
    --theme-repeat-one-icon: url('浅色循环播放.svg');
    --theme-repeat-active-icon: url('./深色循环播放.svg');
    --theme-chart-icon: url('浅色排行榜.svg');

    /* 技能专长图标 */
    --skill-code-icon: url('技能专长/前端开发.svg');
    --skill-mobile-icon: url('技能专长/移动开发.svg');
    --skill-design-icon: url('技能专长/UIUX设计.svg');
    --skill-backend-icon: url('技能专长/后端开发.svg');
    --skill-cloud-icon: url('技能专长/云服务.svg');
    --skill-tools-icon: url('技能专长/开发工具.svg');

    /* 精选项目图标 */
    --project-user-icon: url('精选项目/个人主页.svg');
    --project-note-icon: url('精选项目/笔记.svg');
    --project-music-icon: url('精选项目/音乐播放器-5.svg');
    --project-cloud-icon: url('精选项目/云盘.svg');
    --project-flask-icon: url('精选项目/实验室.svg');
    --project-robot-icon: url('精选项目/聊天助手.svg');

    /* 联系图标 */
    --contact-email-icon: url('联系/深色邮箱.svg');
    --contact-github-icon: url('联系/深色github.svg');
    --contact-phone-icon: url('联系/深色电话.svg');
}

[data-theme="dark"] {
    --theme-sun-icon: url('深色模式.svg');
    --theme-moon-icon: url('浅色模式.svg');
    --theme-play-icon: url('深色播放.svg');
    --theme-pause-icon: url('深色暂停.svg');
    --theme-prev-icon: url('深色上一首.svg');
    --theme-next-icon: url('深色下一首.svg');
    --theme-times-icon: url('X.svg');
    --theme-bars-icon: url('菜单.svg');
    --theme-music-icon: url('音乐播放器.svg');
    --theme-info-icon: '';
    --theme-random-icon: url('深色随机播放.svg');
    --theme-random-active-icon: url('深色随机播放.svg');
    --theme-repeat-one-icon: url('深色循环播放.svg');
    --theme-repeat-active-icon: url('深色循环播放.svg');
    --theme-chart-icon: url('深色排行榜.svg');
    
    /* 技能专长图标 - 深色模式下使用相同图标但确保显示效果 */
    --skill-code-icon: url('技能专长/前端开发.svg');
    --skill-mobile-icon: url('技能专长/移动开发.svg');
    --skill-design-icon: url('技能专长/UIUX设计.svg');
    --skill-backend-icon: url('技能专长/后端开发.svg');
    --skill-cloud-icon: url('技能专长/云服务.svg');
    --skill-tools-icon: url('技能专长/开发工具.svg');
    
    /* 精选项目图标 - 深色模式下使用相同图标但确保显示效果 */
    --project-user-icon: url('精选项目/个人主页.svg');
    --project-note-icon: url('精选项目/笔记.svg');
    --project-music-icon: url('精选项目/音乐播放器-5.svg');
    --project-cloud-icon: url('精选项目/云盘.svg');
    --project-flask-icon: url('精选项目/实验室.svg');
    --project-robot-icon: url('精选项目/聊天助手.svg');
    
    /* 联系图标 - 深色模式下切换为浅色图标以确保在深色背景上可见 */
    --contact-email-icon: url('联系/浅色邮箱.svg');
    --contact-github-icon: url('联系/浅色github.svg');
    --contact-phone-icon: url('联系/浅色电话.svg');
}

/* SVG图标样式实现 */
.fas.fa-sun {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-sun-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

.fas.fa-sun::before {
    content: '';
}

.fas.fa-moon {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-moon-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-shadow: 0 0 5px rgba(150, 150, 255, 0.3);
}

.fas.fa-moon::before {
    content: '';
}

.fas.fa-info-circle {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    color: #4A90E2;
    background-image: var(--theme-info-icon, "ℹ");
    background-size: contain;
}

/* 联系图标样式 */
.fas.fa-envelope {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--contact-email-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

.fas.fa-envelope::before {
    content: '';
}

.fas.fa-envelope:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.fab.fa-github {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--contact-github-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

.fab.fa-github::before {
    content: '';
}

.fab.fa-github:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* 电话图标样式 */
.fas.fa-phone {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--contact-phone-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

.fas.fa-phone::before {
    content: '';
}

.fas.fa-phone:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.fas.fa-info-circle {
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-info-circle::before {
    content: "ℹ";
    font-size: 1.4em;
}

.fas.fa-times {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-times-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-times::before {
    content: '';
}

.fas.fa-times::after {
    content: '';
}

.fas.fa-play {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-play-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-play::before {
    content: '';
}

.fas.fa-pause {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-pause-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-pause::before {
    content: '';
}

.fas.fa-pause::after {
    content: '';
}

.fas.fa-bars {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-bars-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-bars::before {
    content: '';
}

.fas.fa-bars::after {
    content: '';
}

.fas.fa-bars span::before {
    content: '';
}

.fas.fa-music {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-music-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-music::before {
    content: '';
}

.fas.fa-step-backward {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-prev-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-step-backward::before {
    content: '';
}

.fas.fa-step-backward::after {
    content: '';
}

.fas.fa-step-forward {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-next-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-step-forward::before {
    content: '';
}

/* 随机播放图标 */
.fas.fa-random {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-random-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-random::before {
    content: '';
}

/* 单曲重复图标 */
.fas.fa-repeat-1 {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-repeat-one-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-repeat-1::before {
    content: '';
}

/* 排行榜图标 */
.fas.fa-chart-line {
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: var(--theme-chart-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fas.fa-chart-line::before {
    content: '';
}

.fas.fa-step-forward::after {
    content: '';
}

/* SVG图标样式 - 增强版 */
.svg-icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    stroke-width: 1.5;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.2s ease;
}

.svg-icon:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* 动画效果增强 */
.fas.fa-spin {
    animation: fa-spin 1.5s infinite linear;
}

@keyframes fa-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 悬停效果 */
.fas:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* 点击效果 */
.fas:active {
    transform: scale(0.95);
}

/* 技能专长图标样式 */
.skills-grid .skill-icon .fas {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

.skills-grid .skill-icon .fas.fa-code {
    background-image: var(--skill-code-icon);
}

.skills-grid .skill-icon .fas.fa-mobile-alt {
    background-image: var(--skill-mobile-icon);
}

.skills-grid .skill-icon .fas.fa-palette {
    background-image: var(--skill-design-icon);
}

.skills-grid .skill-icon .fas.fa-server {
    background-image: var(--skill-backend-icon);
}

.skills-grid .skill-icon .fas.fa-cloud {
    background-image: var(--skill-cloud-icon);
}

.skills-grid .skill-icon .fas.fa-tools {
    background-image: var(--skill-tools-icon);
}

/* 精选项目图标样式 */
.projects-simple .project-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.projects-simple .project-icon .fas {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

.projects-simple .project-icon .fas.fa-user {
    background-image: var(--project-user-icon);
}

.projects-simple .project-icon .fas.fa-sticky-note {
    background-image: var(--project-note-icon);
}

.projects-simple .project-icon .fas.fa-music {
    background-image: var(--project-music-icon);
}

.projects-simple .project-icon .fas.fa-cloud {
    background-image: var(--project-cloud-icon);
}

.projects-simple .project-icon .fas.fa-flask {
    background-image: var(--project-flask-icon);
}

.projects-simple .project-icon .fas.fa-robot {
    background-image: var(--project-robot-icon);
}

/* 移除默认图标显示 */
.skills-grid .skill-icon .fas::before,
.projects-simple .project-icon::before {
    content: '';
}

/* 确保精选项目图标正确显示 */
.projects-simple .project-icon {
    font-family: inherit;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
}

.projects-simple .project-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 为每个精选项目图标设置正确的背景图 */
.projects-simple .fa-user.project-icon::after {
    background-image: var(--project-user-icon);
}

.projects-simple .fa-sticky-note.project-icon::after {
    background-image: var(--project-note-icon);
}

.projects-simple .fa-music.project-icon::after {
    background-image: var(--project-music-icon);
}

.projects-simple .fa-cloud.project-icon::after {
    background-image: var(--project-cloud-icon);
}

.projects-simple .fa-flask.project-icon::after {
    background-image: var(--project-flask-icon);
}

.projects-simple .fa-robot.project-icon::after {
    background-image: var(--project-robot-icon);
}

/* 响应式调整 */
@media (max-width: 768px) {

    .fas,
    .far,
    .fab {
        width: 1.4em;
        height: 1.4em;
        line-height: 1.4;
    }

    .skills-grid .skill-icon .fas,
    .projects-simple .project-icon {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 480px) {

    .skills-grid .skill-icon .fas,
    .projects-simple .project-icon {
        width: 23px;
        height: 23px;
    }
}