/* --- 全局重置 --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #ffffff; /* 整个网页的大背景 */
            color: #333;
            font-size: 14px;
        }

        a { text-decoration: none; color: #333; }
        a:hover { color: #2b76c9; text-decoration: underline; }

        /* --- 核心容器 (控制宽度一致的关键) --- */
        .container {
            width: 100%;
            max-width: 1200px; /* 这里设定宽度，导航和内容都会遵守这个宽度 */
            margin: 20px auto; /* 上下间距20px，左右自动居中 */
            background-color: #eef4f9; /* 浅蓝灰背景，对应图中内容区背景 */
            border: 1px solid #dce6f0; /* 淡淡的边框 */
        }

        /* --- 顶部工具栏 --- */
        .top-bar {
            padding: 5px 10px;
            font-size: 12px;
            color: #666;
            background-color: #fff; /* 顶部通常是白色或透明 */
            border-bottom: 1px solid #ddd;
        }
        .top-bar a { margin-right: 15px; color: #666; }

        /* --- 头部区域 (Logo + 导航) --- */
        .header {
            background-color: #fff; /* 头部底色 */
            padding-bottom: 0;
        }

        /* Logo 区域 */
        .logo-area {
            padding: 20px 15px;
            display: flex;
            align-items: center;
        }
        .logo-area img {
            height: 58px; /* 根据实际图片调整高度 */
            width: auto;
        }

        /* 主导航栏 (主蓝色) */
        .main-nav {
            background-color: #2b76c9; /* 主蓝色 */
            height: 40px;
            display: flex;
            align-items: center;
            padding-left: 10px;
        }
        .main-nav ul {
            display: flex;
            list-style: none;
        }
        .main-nav li a {
            display: block;
            color: #fff;
            padding: 0 10px;
            line-height: 40px;
            font-weight: bold;
            font-size: 14px;
            border-right: 1px solid rgba(255,255,255,0.2); /* 分割线效果 */
        }
        .main-nav li a:hover {
            background-color: #1a5ca0; /* 悬停加深 */
            text-decoration: none;
        }

        /* --- 页面标题横幅 --- */
        .page-banner {
            background-color: #eef4f9; /* 浅蓝灰背景 */
            text-align: center;
            padding: 15px;
            font-size: 16px;
            color: #555;
            border-bottom: 1px solid #dce6f0;
        }

        /* --- 面包屑导航 --- */
        .breadcrumb {
            padding: 10px 15px;
            font-size: 12px;
            color: #666;
            background-color: #fff; /* 面包屑通常在白色背景上 */
        }
        .breadcrumb span { margin: 0 5px; color: #ccc; }

        /* --- 主要内容区域 --- */
        .content {
            background-color: #fff; /* 内容通常是白底 */
            min-height: 400px;
            padding: 20px;
            position: relative;
        }

        /* 模拟图中的小头像/图标 */
        .post-meta {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: #888;
            font-size: 12px;
        }
        .post-meta img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            background-color: #eee;
            border: 1px solid #ddd;
        }

        /* 右侧的红色广告/提示文字 */
        .right-promo {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #cc0000;
            font-weight: bold;
        }
        .right-promo a { color: #cc0000; }

        /* 文章标题 */
        h1.post-title {
            font-size: 18px;
            color: #333;
            margin-top: 10px;
            font-weight: normal;
        }

        /* --- 响应式适配 --- */
        @media (max-width: 768px) {
            .container { margin: 0; width: 100%; max-width: 100%; border: none; }
            .main-nav { overflow-x: auto; white-space: nowrap; } /* 手机端导航可横向滚动 */
            .right-promo { position: static; margin-top: 20px; display: block; }
        }
        /* =========================================
           底部样式 (新增重点部分)
           ========================================= */
        .site-footer {
            background-color: #fff; /* 底部背景通常为白或极浅灰 */
            padding: 20px 15px;
            color: #666;
            font-size: 12px;
            width: 100%; max-width: 1200px; 
            margin: 0 auto;
            overflow: hidden; /* 清除浮动 */
        }

        /* 左侧：版权信息 */
        .footer-left {
            float: left;
        }
        .footer-left p {
            margin-bottom: 5px;
        }
        .powered-by span {
            font-weight: bold;
            color: #333;
        }

        /* 右侧：链接与性能数据 */
        .footer-right {
            float: right;
            text-align: right;
        }
        .footer-links {
            margin-bottom: 8px;
        }
        .footer-links a {
            margin-left: 10px;
            color: #333;
        }
        .footer-links a:first-child { margin-left: 0; }
        
        /* 分割线样式 */
        .pipe {
            margin: 0 5px;
            color: #ccc;
        }

        .performance-data {
            color: #999;
            font-family: Arial, sans-serif; /* 数字用Arial更好看 */
            font-size: 11px;
        }

        /* --- 响应式适配 (手机端优化) --- */
        @media (max-width: 768px) {
            .container { width: 95%; margin-top: 10px; }
            
            /* 手机端底部改为上下堆叠，居中对齐 */
            .site-footer { text-align: center; padding: 30px 10px; }
            .footer-left, .footer-right { 
                float: none; 
                text-align: center; 
                width: 100%;
            }
            .footer-right { margin-top: 15px; }
            .footer-links a { margin: 0 8px; }
        }