:root {
    --color-dark-bg: #0A0A1F;       /* 深空黑 */
    --color-neon-blue: #00FFFF;    /* 主霓虹蓝 */
    --color-neon-purple: #FF00FF;  /* 赛博紫 */
    --font-mono: 'Roboto Mono', monospace;
}

body {
    /* **【背景图片设置和网格保留】** */
    background-image: url('./bg.jpg'), 
                      radial-gradient(#1A1A3F 1px, transparent 1px); 
    
    background-color: var(--color-dark-bg);
    background-size: cover, 25px 25px;
    background-attachment: fixed;
    background-position: center center, 0 0;
    
    color: #E0E0E0; 
    font-family: var(--font-mono);
    margin: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

/* 链接样式 - 增强霓虹发光 */
a {
    color: var(--color-neon-blue);
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
    text-shadow: 0 0 3px var(--color-neon-blue); /* 基础霓虹光晕 */
}
a:hover {
    color: #FFFFFF;
    /* 悬停时，光晕增强 */
    text-shadow: 
        0 0 10px var(--color-neon-blue), 
        0 0 20px var(--color-neon-purple); 
}

/* 自适应容器 */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* 模块基础样式：使用 Grid 布局 */
.module {
    padding: 40px;
    margin-bottom: 40px;
    /* **【模块背景使用带透明度的深色，提高可读性】** */
    background-color: rgba(18, 18, 42, 0.85); /* #12122A 的 85% 不透明度 */
    backdrop-filter: blur(3px); /* 可选：轻微模糊效果 */
    /* ---------------------------------------------------- */

    border: 1px solid rgba(0, 255, 255, 0.2);
    transition: box-shadow 0.5s;
}
.module:hover {
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4); /* 模块悬浮时发光 */
}

/* **【正文段落柔和霓虹效果】** */
.module p {
    color: #E0E0E0; /* 保持浅灰，以保证可读性 */
    line-height: 1.6;
    text-shadow: 0 0 1px var(--color-neon-blue); /* 柔和的文字发光 */
}
/* **【模块标题 (H2) 霓虹效果】** */
.module h2 {
    color: var(--color-neon-blue); /* 霓虹蓝 */
    font-size: 1.8em;
    border-bottom: 2px solid rgba(0, 255, 255, 0.4);
    padding-bottom: 5px;
    margin-bottom: 20px;
    /* H2 的发光略微柔和 */
    text-shadow: 
        0 0 5px rgba(0, 255, 255, 0.8),
        0 0 10px rgba(0, 255, 255, 0.5);
}


/* 技能网格布局 */
.skills-grid {
    display: grid;
    /* 桌面端：三列 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px;
}
/* 技能项标题使用霓虹蓝 */
.skill-item h3 {
    color: var(--color-neon-blue);
    text-shadow: 0 0 3px var(--color-neon-blue);
}

/* 项目卡片 Flexbox 布局 */
.projects-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}
.project-card {
    flex: 1 1 300px; /* 自适应卡片宽度 */
    /* **【卡片背景使用带透明度的深色】** */
    background-color: rgba(26, 26, 63, 0.9); /* #1A1A3F 的 90% 不透明度 */
    /* ---------------------------------------------------- */
    padding: 20px;
    border-left: 3px solid var(--color-neon-purple);
}


/* 页头 - 核心发光体 */
.hero-section {
    position: relative;
    text-align: center;
    padding: 100px 0;
    overflow: hidden;
}
.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--color-neon-blue);
    box-shadow: 0 0 20px var(--color-neon-blue); /* 头像发光 */
    transition: transform 0.5s;
}
.avatar:hover {
    transform: scale(1.05) rotate(3deg);
}

/* **【主标题 H1 的强烈霓虹发光效果】** */
.hero-section h1 {
    font-size: 3em;
    color: #FFFFFF; 
    /* 核心赛博朋克霓虹发光效果 */
    text-shadow: 
        0 0 7px var(--color-neon-blue),  /* 近距离高光 */
        0 0 15px var(--color-neon-blue), /* 中距离光晕 */
        0 0 25px var(--color-neon-purple), /* 远距离扩散光晕 */
        0 0 40px var(--color-neon-purple); /* 颜色混合，增强深度 */
    margin: 10px 0 5px;
}

/* 职业介绍标题 (profession-title) 使用霓虹色 */
.profession-title {
    color: var(--color-neon-purple);
    font-size: 1.2em;
    text-shadow: 0 0 5px var(--color-neon-purple);
}

/* 响应式调整 (移动端) */
@media (max-width: 768px) {
    .hero-section {
        padding: 50px 0;
    }
    .hero-section h1 {
        font-size: 2em;
    }
    /* 移动端项目列表单列显示 */
    .projects-list {
        flex-direction: column;
    }
}

/* 页脚样式 (Footer) - 保持简洁的赛博风格 */
.footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    background-color: rgba(10, 10, 31, 0.7);
    color: #777777;
    font-size: 0.8em;
}