/*
         ============================================================
         【网站样式总说明】
         你后续主要微调下面几个位置：
         1. 顶部固定菜单：.top-nav、.top-nav-inner、.site-brand、.nav-menu、.nav-menu a
         2. 蓝色首屏区域：.hero
         3. 头像大小与上下距离：.avatar, .logo-text
         4. 正文最大宽度：main
         5. 卡片间距/阴影/圆角：section、.management-card、.project-card
         6. 右下角返回顶部按钮：.back-top

         常用调整方法：
         - 想让元素更靠左/右：改 padding、margin、gap
         - 想让字体变大/变小：改 font-size
         - 想让蓝色区域更高/更矮：改 .hero 的 padding
         - 想让菜单固定/不固定：改 .top-nav 的 position
         ============================================================
        */
        /* 全局盒模型：保持元素宽度计算稳定，建议不要改 */
        * { box-sizing: border-box; }
        /* 页面整体基础设置：字体、背景色、默认文字颜色 */
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
            background-color: #f7f9fb;
            color: #2f3a43;
            line-height: 1.58;
        }
        /* 全站链接默认样式：继承文字颜色，去掉下划线 */
        a { color: inherit; text-decoration: none; }
        /* 平滑滚动；scroll-padding-top 用于锚点跳转时避开顶部固定菜单遮挡 */
        html { scroll-behavior: smooth; scroll-padding-top: 78px; }
        /*
         【蓝色首屏区域】
         - background：蓝色渐变背景
         - padding：控制蓝色区域内，上方菜单与头像、下方联系行之间的空间
           当前为 94px 20px 16px，分别代表：上、左右、下
           想让头像整体下移：增大第一个数值 94px
           想让底部邮箱那一行离蓝区下边更远：增大最后一个数值 16px
         */
        .hero {
            position: relative;
            background: linear-gradient(135deg, #003f73, #005a9c);
            color: #ffffff;
            padding: 88px 20px 8px;
            text-align: center;
        }
        /*
         【顶部固定菜单外层】
         - position: fixed 表示滚动页面时菜单固定不动
         - top/left/right 控制菜单贴在页面顶部并铺满宽度
         - background 控制顶部菜单蓝色背景
         - z-index 越大越靠上，防止被正文遮挡
         */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background: linear-gradient(135deg, rgba(0,63,115,0.98), rgba(0,90,156,0.98));
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }
        /*
         【顶部菜单内容容器】
         - padding: 13px 28px 控制品牌和菜单距离浏览器边缘的远近
           想让左上 WangFei.pro 更靠左：减小第二个数值 28px
           想让右侧菜单更靠右：同样减小第二个数值 28px
         - gap 控制左品牌和右菜单之间最小距离
         */
        .top-nav-inner {
            width: 100%;
            margin: 0 auto;
            padding: 13px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        /* 左上角品牌名称 WangFei.pro：调整字体大小、粗细、颜色 */
        .site-brand {
            color: #ffffff;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 0.3px;
            white-space: nowrap;
            text-shadow: 0 1px 2px rgba(0,0,0,0.18);
        }
        /*
         【右上角菜单整体浅色背景框】
         - gap：菜单文字之间的距离，数值越大间距越大
         - padding：浅色背景框内部上下左右留白
         - border-radius：圆角大小
         - background：白色半透明背景，数值越大越明显
         */
        .nav-menu {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 32px;
            padding: 8px 24px;
            border-radius: 12px;
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.20);
            box-shadow: 0 4px 14px rgba(0,0,0,0.08);
        }
        /* 右上角每一个菜单链接：调整字体大小、粗细、颜色 */
        .nav-menu a {
            color: #ffffff;
            font-size: 15.5px;
            font-weight: 650;
            white-space: nowrap;
            text-shadow: 0 1px 2px rgba(0,0,0,0.16);
        }
        .nav-menu a:hover {
            color: #dceeff;
        }
        /*
         【头像 / WF备用圆形标志】
         - width/height：头像大小
         - margin: 0 auto 7px：头像下方到姓名的距离，7px 可微调
         - border：头像白色边框
         */
        .avatar, .logo-text {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.9);
            margin: 0 auto 7px;
            display: block;
            object-fit: cover;
        }
        .logo-text {
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
            background: rgba(255,255,255,0.08);
        }
        /* 蓝区姓名主标题：王飞 | Wang Fei */
        .hero h1 {
            margin: 0;
            font-size: 28px;
            line-height: 1.08;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        /* 英文职位标题 */
        .hero .title {
            margin: 6px 0 5px;
            font-size: 16px;
            color: #dceeff;
        }
        /* 中文职业定位长句 */
        .hero .tagline {
            max-width: 820px;
            margin: 6px auto 0;
            font-size: 14.5px;
            line-height: 1.45;
            color: #eef7ff;
        }
        /* “专注：开发项目...”这一排浅色反衬框 */
        .hero .position-line {
            max-width: 800px;
            margin: 9px auto 0;
            padding: 7px 14px;
            border-radius: 10px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            font-size: 14.5px;
            line-height: 1.42;
            color: #ffffff;
        }
        /* 蓝区最底部联系方式一行：邮箱 / 网站 / 简历下载 */
        .hero .contact-line {
            margin-top: 8px;
            font-size: 14px;
            color: #cde8ff;
        }
        .hero .contact-line a {
            margin: 0 7px;
            border-bottom: 1px solid rgba(255,255,255,0.35);
        }
        /* 正文内容最大宽度和上下留白：max-width 控制整体内容宽窄 */
        main {
            max-width: 980px;
            margin: 0 auto;
            padding: 30px 22px 48px;
        }
        /* 每一个白色内容卡片：控制卡片间距、内边距、圆角、阴影 */
        section {
            margin-bottom: 28px;
            background: #ffffff;
            padding: 25px 28px;
            border-radius: 14px;
            box-shadow: 0 8px 22px rgba(0,50,90,0.055);
        }
        /* 每个模块标题，例如“职业定位与管理优势” */
        section h2 {
            margin: 0 0 18px;
            padding-bottom: 9px;
            font-size: 21px;
            font-weight: 700;
            border-bottom: 2px solid #0b4f86;
            color: #1f3342;
        }
        .profile-text {
            margin: 0 0 12px;
            font-size: 15.5px;
            text-align: justify;
        }
        .profile-text:last-child { margin-bottom: 0; }
        /* 四个核心数字卡片的外层网格：20年、4项、多品牌、全流程 */
        .highlights {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 13px;
            margin-bottom: 18px;
        }
        .highlight-card {
            padding: 16px 12px;
            border-radius: 12px;
            background: #f0f6fb;
            border: 1px solid #dceaf5;
            text-align: center;
        }
        .highlight-card strong {
            display: block;
            font-size: 22px;
            color: #004b82;
            margin-bottom: 4px;
        }
        .highlight-card span {
            font-size: 13px;
            color: #425466;
        }
        /* 管理型核心价值六宫格：两列布局 */
        .management-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 13px;
        }
        .management-card {
            padding: 16px 16px;
            border-radius: 12px;
            background: #fbfdff;
            border: 1px solid #e0ebf3;
        }
        .management-card h3 {
            margin: 0 0 7px;
            font-size: 16px;
            color: #0b4f86;
        }
        .management-card p {
            margin: 0;
            font-size: 14.2px;
            color: #425466;
        }
        /* 工作经历时间轴外层 */
        .timeline { position: relative; }
        /* 每一段工作经历：左侧竖线和上下间距 */
        .job {
            padding: 0 0 24px 22px;
            border-left: 2px solid #d7e5ef;
            position: relative;
        }
        .job:last-child { padding-bottom: 0; }
        .job::before {
            content: "";
            position: absolute;
            left: -7px;
            top: 5px;
            width: 12px;
            height: 12px;
            background: #0b4f86;
            border-radius: 50%;
            border: 2px solid #ffffff;
            box-shadow: 0 0 0 2px #d7e5ef;
        }
        .job-company {
            font-size: 17px;
            font-weight: 700;
            color: #1f3342;
        }
        .job-meta {
            margin-top: 2px;
            font-size: 14px;
            color: #607080;
        }
        .job-content {
            margin: 11px 0 0;
            padding-left: 0;
            list-style: none;
        }
        .job-content li {
            margin-bottom: 7px;
            font-size: 14.5px;
        }
        .job-content li::before {
            content: "•";
            color: #0b4f86;
            font-weight: 700;
            margin-right: 8px;
        }
        /* 三个项目经验卡片的外层网格 */
        .project-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        .project-card {
            padding: 18px;
            border-radius: 12px;
            background: #f7fafc;
            border: 1px solid #e1edf5;
        }
        .project-card h3 {
            margin: 0 0 9px;
            font-size: 16.5px;
            color: #0b4f86;
        }
        .project-card p {
            margin: 0;
            font-size: 14px;
            color: #425466;
        }
        .education-item { margin-bottom: 12px; }
        .education-item strong { color: #1f3342; }
        .education-item span { color: #607080; font-size: 14px; }
        .skill-group { margin-bottom: 18px; }
        .skill-group h3 {
            margin: 0 0 10px;
            font-size: 16px;
            color: #1f3342;
        }
        /* 技能标签外层：gap 控制标签之间的距离 */
        .tags { display: flex; flex-wrap: wrap; gap: 9px; }
        .tag {
            display: inline-block;
            padding: 7px 12px;
            border-radius: 999px;
            background: #e9f2fa;
            color: #23475f;
            font-size: 14px;
            border: 1px solid #d8e7f2;
        }
        .patent-list { display: flex; flex-wrap: wrap; gap: 10px; }
        .patent {
            padding: 8px 12px;
            background: #f0f6fb;
            border: 1px solid #dceaf5;
            border-radius: 8px;
            font-size: 14px;
            color: #23475f;
        }
        .contact-list { list-style: none; padding: 0; margin: 0; }
        .contact-list li { margin-bottom: 10px; font-size: 15px; }
        .contact-list strong { display: inline-block; width: 86px; color: #1f3342; }
        .contact-list a { color: #0b4f86; border-bottom: 1px solid #b7d4e8; }
        /*
         【右下角返回顶部按钮】
         - right/bottom：按钮距离右边和底部的位置
         - width/height：按钮大小
         - background：按钮颜色
         */
        .back-top {
            position: fixed;
            right: 28px;
            bottom: 28px;
            z-index: 998;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0b4f86;
            color: #ffffff;
            font-size: 22px;
            font-weight: 800;
            box-shadow: 0 8px 22px rgba(0,50,90,0.22);
            border: 1px solid rgba(255,255,255,0.45);
        }
        .back-top:hover {
            background: #005a9c;
            transform: translateY(-2px);
        }
        /* 页面底部版权栏 */
        footer {
            background: #003f73;
            color: #dceeff;
            text-align: center;
            padding: 18px 16px;
            font-size: 13px;
        }
        /*
         【平板/小屏幕适配】
         屏幕宽度小于 820px 时生效，主要调整菜单间距、卡片列数、蓝区顶部距离。
         */
        @media (max-width: 820px) {
            /* 四个核心数字卡片的外层网格：20年、4项、多品牌、全流程 */
        .highlights { grid-template-columns: repeat(2, 1fr); }
            .management-grid, .project-grid { grid-template-columns: 1fr; }
            /* 每一个白色内容卡片：控制卡片间距、内边距、圆角、阴影 */
        section { padding: 22px 20px; }
            .hero { padding-top: 104px; }
            /* 蓝区姓名主标题：王飞 | Wang Fei */
        .hero h1 { font-size: 26px; }
            /*
         【顶部菜单内容容器】
         - padding: 13px 28px 控制品牌和菜单距离浏览器边缘的远近
           想让左上 WangFei.pro 更靠左：减小第二个数值 28px
           想让右侧菜单更靠右：同样减小第二个数值 28px
         - gap 控制左品牌和右菜单之间最小距离
         */
        .top-nav-inner { padding: 12px 20px; gap: 14px; }
            /*
         【右上角菜单整体浅色背景框】
         - gap：菜单文字之间的距离，数值越大间距越大
         - padding：浅色背景框内部上下左右留白
         - border-radius：圆角大小
         - background：白色半透明背景，数值越大越明显
         */
        .nav-menu { gap: 18px; padding: 8px 16px; }
            /* 右上角每一个菜单链接：调整字体大小、粗细、颜色 */
        .nav-menu a { font-size: 14.5px; }
        }
        /*
         【手机端适配】
         屏幕宽度小于 480px 时生效，菜单会换行，头像缩小。
         */
        @media (max-width: 480px) {
            /* 正文内容最大宽度和上下留白：max-width 控制整体内容宽窄 */
        main { padding: 24px 14px 40px; }
            /* 每一个白色内容卡片：控制卡片间距、内边距、圆角、阴影 */
        section { margin-bottom: 22px; border-radius: 12px; }
            /* 四个核心数字卡片的外层网格：20年、4项、多品牌、全流程 */
        .highlights { grid-template-columns: 1fr; }
            .hero { padding: 130px 16px 14px; }
            /*
         【顶部菜单内容容器】
         - padding: 13px 28px 控制品牌和菜单距离浏览器边缘的远近
           想让左上 WangFei.pro 更靠左：减小第二个数值 28px
           想让右侧菜单更靠右：同样减小第二个数值 28px
         - gap 控制左品牌和右菜单之间最小距离
         */
        .top-nav-inner { flex-direction: column; align-items: stretch; padding: 10px 16px; gap: 8px; }
            /* 左上角品牌名称 WangFei.pro：调整字体大小、粗细、颜色 */
        .site-brand { font-size: 17px; }
            /*
         【右上角菜单整体浅色背景框】
         - gap：菜单文字之间的距离，数值越大间距越大
         - padding：浅色背景框内部上下左右留白
         - border-radius：圆角大小
         - background：白色半透明背景，数值越大越明显
         */
        .nav-menu { justify-content: center; gap: 12px; padding: 7px 12px; flex-wrap: wrap; }
            /* 右上角每一个菜单链接：调整字体大小、粗细、颜色 */
        .nav-menu a { font-size: 13.5px; }
            /*
         【头像 / WF备用圆形标志】
         - width/height：头像大小
         - margin: 0 auto 7px：头像下方到姓名的距离，7px 可微调
         - border：头像白色边框
         */
        .avatar, .logo-text { width: 66px; height: 66px; }
            /* 蓝区姓名主标题：王飞 | Wang Fei */
        .hero h1 { font-size: 24px; }
            /* 英文职位标题 */
        .hero .title { font-size: 15px; }
            .back-top { right: 18px; bottom: 20px; width: 42px; height: 42px; font-size: 20px; }
            .contact-list strong { display: block; width: auto; margin-bottom: 2px; }
        }
    

/* 当前栏目高亮 */
.nav-menu a.active {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
}

/* ============================================================
   【二级页面通用样式】
   下面这些样式用于：技术文章、软件分享、工艺教程、关于页面。
   你后续新增页面时，只要套用这些 class，就能保持统一风格。
   ============================================================ */
.page-hero {
    padding-top: 104px;
    padding-bottom: 34px;
    min-height: 260px;
}
.page-hero-content {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.page-hero-content .eyebrow {
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.16);
    color: #dceeff;
    font-size: 13.5px;
}
.page-hero-content h1 {
    margin: 0 0 10px;
    font-size: 31px;
    line-height: 1.25;
}
.page-hero-content p {
    max-width: 760px;
    margin: 0 auto;
    color: #eef7ff;
    font-size: 15.5px;
}
.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
}
.content-panel, .side-panel {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0,50,90,0.055);
}
.content-panel { padding: 26px 28px; }
.side-panel {
    padding: 22px;
    align-self: start;
    position: sticky;
    top: 92px;
}
.content-panel h2, .side-panel h3 {
    margin: 0 0 16px;
    color: #1f3342;
}
.content-panel h2 {
    padding-bottom: 9px;
    font-size: 21px;
    border-bottom: 2px solid #0b4f86;
}
.side-panel h3 { font-size: 17px; }
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}
.category-tabs span {
    padding: 8px 14px;
    border-radius: 999px;
    background: #e9f2fa;
    border: 1px solid #d8e7f2;
    color: #23475f;
    font-size: 14px;
}
.featured-scroll {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 2px 2px 14px;
}
.article-card {
    padding: 18px;
    border-radius: 12px;
    background: #f7fafc;
    border: 1px solid #e1edf5;
    scroll-snap-align: start;
}
.article-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    color: #0b4f86;
}
.article-card p {
    margin: 0 0 12px;
    color: #425466;
    font-size: 14.5px;
}
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #607080;
    font-size: 13px;
}
.article-meta span {
    padding: 4px 8px;
    border-radius: 999px;
    background: #edf5fb;
}
.article-list { display: grid; gap: 14px; }
.article-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid #e1edf5;
    border-radius: 12px;
    background: #fbfdff;
}
.article-row .date { color: #0b4f86; font-weight: 700; font-size: 14px; }
.article-row h3 { margin: 0 0 6px; color: #1f3342; font-size: 17px; }
.article-row p { margin: 0; color: #425466; font-size: 14.5px; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li {
    padding: 10px 0;
    border-bottom: 1px solid #edf3f7;
    color: #425466;
    font-size: 14.5px;
}
.side-list li:last-child { border-bottom: none; }
.note-box {
    padding: 15px;
    margin: 18px 0 0;
    border-radius: 12px;
    background: #f0f6fb;
    border: 1px solid #dceaf5;
    color: #425466;
    font-size: 14.5px;
}
.template-tip {
    border-left: 4px solid #0b4f86;
    padding: 12px 14px;
    margin: 18px 0;
    background: #f7fafc;
    color: #425466;
    font-size: 14.5px;
}
.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.about-card {
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #e1edf5;
    background: #f7fafc;
}
.about-card h3 { margin: 0 0 8px; color: #0b4f86; font-size: 17px; }
.about-card p { margin: 0; color: #425466; font-size: 14.5px; }
.empty-state {
    padding: 22px;
    border-radius: 12px;
    background: repeating-linear-gradient(45deg, #f7fafc, #f7fafc 10px, #f1f7fb 10px, #f1f7fb 20px);
    border: 1px dashed #b7d4e8;
    color: #425466;
    font-size: 14.5px;
}
@media (max-width: 820px) {
    .page-layout { grid-template-columns: 1fr; }
    .side-panel { position: static; }

    .about-grid { grid-template-columns: 1fr; }
    .page-hero-content h1 { font-size: 27px; }
}
@media (max-width: 480px) {
    .page-hero { padding-top: 120px; padding-bottom: 26px; }
    .content-panel, .side-panel { padding: 20px; }
    .article-row { grid-template-columns: 1fr; gap: 8px; }

}