/* =========================================
   【设计规范系统 (Design Tokens) v3.0】
   ========================================= */
:root {
	/* --- 核心色彩：低调庄重政务紫 --- */
	/* 采用更深的渐变，增加权威感 */
	--edrc-gradient: linear-gradient(135deg, #6a4c93 0%, #4a3570 100%);
	--edrc-purple-dark: #4a3570;
	--edrc-purple-light: #EAE6F2; /* 极淡的紫色背景，用于Tag */

	/* --- 辅助色 --- */
	--accent-gold: #c7b299;       /* 哑光金，用于细节点缀 */
	--bg-body: #f5f7fa;           /* 专业的政务灰底 */
	--bg-white: #ffffff;

	/* --- 文字系统 --- */
	--text-primary: #2d3748;      /* 深灰黑，比纯黑更高级 */
	--text-secondary: #718096;    /* 辅助信息灰 */
	--text-muted: #a0aec0;        /* 弱化信息 */
	--border-color: #e2e8f0;      /* 极细边框 */

	/* --- 阴影系统 --- */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-purple: 0 10px 15px -3px rgba(106, 76, 147, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
	background-color: var(--bg-body);
color: var(--text-primary);
       font-size: 15px;
       line-height: 1.6;
       -webkit-font-smoothing: antialiased; /* 让字体在Mac上更清晰 */
}

a { text-decoration: none; color: inherit; transition: all 0.2s ease; }
ul { list-style: none; }

/* =========================================
   【头部与导航 (Header & Nav)】
   ========================================= */
.header {
background: var(--bg-white);
	    box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
     z-index: 1000;
     border-top: 4px solid var(--edrc-purple-dark); /* 顶部的紫色官帽 */
}

.container {
	max-width: 1024px;
margin: 0 auto;
padding: 0 20px;
}

.header-inner {
display: flex;
	 align-items: center;
	 justify-content: space-between;
height: 64px;
}

/* 品牌区 */
.brand { display: flex; align-items: center; gap: 12px; }
/* =========================================
   【修改 CSS 部分】
   ========================================= */

/* 1. 删除或注释掉原本的 .brand-logo 样式 */
/*
   .brand-logo {
width: 36px;
height: 36px;
background: var(--edrc-gradient);
color: white;
font-size: 16px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
letter-spacing: 1px;
}
 */

/* 2. 新增图片容器的样式 (用于精确控制图标大小) */
.brand-logo-img {
width: 40px;  /* 根据您的骨折眉图标比例调整宽度 */
height: 40px; /* 根据比例调整高度，保持包含关系 */
display: flex;
	 align-items: center;
	 justify-content: center;
	 /* 如果图标是透明背景的黑色线条，可以给个淡紫色背景衬托一下（可选） */
	 /* background: var(--edrc-purple-light); */
	 /* border-radius: 4px; */
}

/* 3. 稍微调整一下右侧文字的间距，让它们离图标近一点 */
.brand-text {
	margin-left: 8px; /* 原本可能是 gap:12px，现在图标大了，可以近一点 */
}

/* --- 移动端适配调整 --- */
@media (max-width: 768px) {
	/* 手机上图标稍微小一点 */
	.brand-logo-img {
width: 32px;
height: 32px;
	}
}

.brand-text h1 {
	font-size: 18px;
	font-weight: 700;
color: var(--edrc-purple-dark);
       line-height: 1.2;
}
.brand-text p {
	font-size: 11px;
color: var(--text-secondary);
       font-weight: 500;
       letter-spacing: 0.5px;
}

/* 桌面导航 */
.nav-desktop { display: flex; gap: 8px; }
.nav-link {
	font-size: 14px;
	font-weight: 500;
padding: 8px 12px;
	 border-radius: 4px;
color: var(--text-primary);
}
.nav-link:hover, .nav-link.active {
color: var(--edrc-purple-dark);
background: var(--edrc-purple-light);
}

/* 移动端菜单按钮 */
.menu-btn {
display: none;
color: var(--edrc-purple-dark);
padding: 8px;
cursor: pointer;
}
.menu-btn svg { width: 24px; height: 24px; }

/* =========================================
   【修复：悬浮菜单样式 (Overlay Menu)】
   ========================================= */

.mobile-menu {
	/* 1. 关键属性：让它飘起来，脱离文档流，不占位置 */
position: absolute; 

	  /* 2. 定位：紧贴在 Header 底部 */
top: 100%; 
left: 0;
width: 100%;

       /* 3. 视觉：白底 + 阴影 (防止和底下内容混在一起) */
background: var(--bg-white);
	    border-top: 1px solid var(--border-color);
	    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* 增加深度感 */

	    /* 4. 层级：保证它盖在所有内容上面 */
	    z-index: 9999;

	    /* 5. 交互状态 */
display: none; /* 默认隐藏 */
	 transform-origin: top; /* 从顶部展开 */
}

/* 激活状态：显示 */
.mobile-menu.open {
display: block;
	 /* 可选：加一个小动画，像卷帘门一样 */
animation: menuSlide 0.2s ease-out forwards;
}

/* 动画定义 */
@keyframes menuSlide {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* 链接样式微调 */
.mobile-link {
display: block;
padding: 15px 20px; /* 加大点击区域，更适合手机 */
	 font-size: 15px;
	 font-weight: 500;
color: var(--text-primary);
       border-bottom: 1px dashed var(--border-color);
background: #fff; /* 确保背景不透明 */
}
.mobile-link:active {
	background-color: var(--edrc-purple-light);
color: var(--edrc-purple-dark);
}


/* =========================================
   【核心区域 (Hero & Search)】
   ========================================= */

/* 1. 区域背景：增加一点点冷感，不再是纯白，而是像是纸张或金属的底色 */
.hero-section {
    background: var(--bg-white); /* 如果有条件，建议改为极淡的灰 #f9f9f9 */
    padding: 60px 0 50px; /* 增加上下留白，体现大厂的呼吸感 */
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

/* 2. 主标题：EOVO 需要像刻在墙上的字 */
.hero-title {
    font-size: 32px; /* 加大字号，更有冲击力 */
    font-weight: 800; /* 加粗，用最重的字重 */
    color: var(--edrc-purple-dark);
    margin-bottom: 16px;
    letter-spacing: -0.5px; /* 字距收紧，显得紧凑有力 */
    line-height: 1.2;
}
/* 给 EOVO 单独的强调色（如果您在HTML里加了<span>） */
.hero-title .highlight {
    color: var(--edrc-purple-dark); 
    /* 或者用黑色，体现绝对的冷峻 */
}

/* 3. 副标题：Slogan 需要像说明书一样清晰 */
.hero-subtitle {
    font-size: 15px; /* 稍微大一点，易读 */
    color: var(--text-secondary);
    margin-bottom: 40px;
    letter-spacing: 1px; /* 字距拉开，体现“意趣”的优雅 */
    font-family: monospace, sans-serif; /* 尝试混入等宽字体，增加“数据感” */
}
/* 分割线 | 的样式 */
.hero-subtitle .divider {
    color: #ddd; /* 极淡的灰色，不要抢戏 */
    margin: 0 10px;
    font-weight: 300;
}

/* 4. 搜索框容器：政务/基建风格 */
.search-box {
    max-width: 640px; /* 稍微宽一点 */
    margin: 0 auto;
    position: relative;
}

/* 5. 输入框：去圆角，像命令行 */
.search-input {
    width: 100%;
    padding: 18px 24px;
    padding-right: 140px; /* 给右边按钮留更多空间 */
    
    /* 核心修改：方角！不要圆角！ */
    border-radius: 25px; /* 或者直接写 0 */
    border: 2px solid var(--border-color);
    background: #fff;
    
    font-size: 16px;
    font-family: inherit; /* 继承字体 */
    color: #333;
    
    transition: all 0.2s ease;
    outline: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* 增加一点悬浮感 */
}

/* 聚焦状态：变成“紫色光标” */
.search-input:focus { 
    border-color: var(--edrc-purple-dark);
    box-shadow: 0 0 0 3px rgba(74, 53, 112, 0.1); /* 紫色微光 */
}

/* 6. 搜索按钮：去渐变，改实色，像物理按钮 */
.search-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 8px;
    padding: 0 28px;
    
    /* 核心修改：去掉花哨的渐变，回归权力的纯色 */
    background: var(--edrc-purple-dark); /* 实色紫 */
    /* 或者用纯黑 background: #000; 会更酷 */
    
    color: white;
    border: none;
    border-radius: 25px; /* 对应输入框的方角 */
    
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px; /* 增加指令感 */
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase; /* 如果是英文，强制大写 */
}

.search-btn:hover { 
    background: #3a2a5c; /* 深紫色 hover */
    /* opacity: 0.9; 不推荐用透明度，直接变色更有质感 */
    transform: translateY(-1px); /* 微微上浮，增加按键反馈感 */
}
/* =========================================
   【移动端适配 (Mobile Responsive)】
   ========================================= */
@media (max-width: 768px) {
    /* 1. 针对副标题的布局调整 */
    .hero-subtitle {
        font-size: 14px; /* 稍微调小一点，防止太满 */
        line-height: 1.6; /* 增加行高，呼吸感 */
        padding: 0 20px; /* 防止文字贴边 */
    }

    /* 2. 隐藏中间的竖线 | */
    .slogan-divider {
        display: none;
    }

    /* 3. 让两句话变成块级元素，强制分行 */
    .slogan-part {
        display: block; 
        width: 100%;
    }

    /* 4. 上半部分（不三不四）：加重一点，作为主标 */
    .slogan-part.values {
        font-weight: 700; /* 加粗 */
        color: var(--edrc-purple-dark); /* 用主题色强调 */
        margin-bottom: 4px; /*哪怕是两行，也要紧凑 */
    }

    /* 5. 下半部分（资源保障）：变淡一点，作为注解 */
    .slogan-part.mission {
        color: #888; /* 弱化视觉 */
        font-size: 12px; /* 稍微缩小，形成层级感 */
    }
}


/* =========================================
   【内容区域 (Content Cards)】
   ========================================= */
.main-content { padding: 40px 0; }

/* 区块标题 */
.section-header {
display: flex;
	 align-items: center;
	 justify-content: space-between;
	 margin-bottom: 24px;
}
.section-title {
	font-size: 18px;
	font-weight: 700;
color: var(--text-primary);
display: flex;
	 align-items: center;
}
.section-title::before {
content: '';
display: block;
width: 4px;
height: 18px;
background: var(--edrc-purple-dark);
	    margin-right: 12px;
	    border-radius: 2px;
}
.more-link { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.more-link:hover { color: var(--edrc-purple-dark); }

/* 卡片容器 */
.card {
background: var(--bg-white);
	    border-radius: 8px;
	    box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
overflow: hidden;
	  margin-bottom: 30px;
}

/* 列表项 */
.list-item {
display: flex;
	 align-items: center;
padding: 16px 24px;
	 border-bottom: 1px solid var(--border-color);
transition: background 0.2s;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: #fcfcfd; }

.item-content { flex: 1; min-width: 0; /* 防止文本溢出 */ }
.item-title {
	font-size: 15px;
	font-weight: 600;
color: var(--text-primary);
       margin-bottom: 6px;
display: block;
	 white-space: nowrap;
overflow: hidden;
	  text-overflow: ellipsis;
}
.item-meta {
	font-size: 12px;
color: var(--text-secondary);
display: flex;
	 align-items: center;
gap: 12px;
}

/* 标签样式 */
.tag {
	font-size: 11px;
	font-weight: 600;
padding: 2px 8px;
	 border-radius: 4px;
background: var(--edrc-purple-light);
color: var(--edrc-purple-dark);
}
.tag.top { background: #fff5f5; color: #B91C1C; } /* 置顶红 */

.item-date { font-family: monospace; color: var(--text-muted); }

/* 快捷服务宫格 */
.service-grid {
display: grid;
	 grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border-color); /* 用背景色做网格线 */
	    border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-color);
}
.service-item {
background: var(--bg-white);
padding: 24px;
	 text-align: center;
transition: all 0.2s;
}
.service-item:hover { background: #fcfcfd; }
.service-icon {
width: 40px;
height: 40px;
margin: 0 auto 12px;
background: var(--edrc-purple-light);
color: var(--edrc-purple-dark);
       border-radius: 8px;
display: flex;
	 align-items: center;
	 justify-content: center;
}
.service-icon svg { width: 20px; height: 20px; }
.service-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* 页脚 */
.footer {
background: var(--bg-white);
padding: 30px 0;
	 text-align: center;
	 border-top: 1px solid var(--border-color);
}
.footer p { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.footer strong { color: var(--edrc-purple-dark); }

/* =========================================
   【移动端适配 (Mobile Responsive)】
   ========================================= */
@media (max-width: 768px) {
	/* 头部调整 */
	.header-inner { height: 56px; }
	.brand-logo { width: 32px; height: 32px; font-size: 14px; }
	.brand-text h1 { font-size: 16px; }
	.brand-text p { display: none; } /* 手机隐藏副标题 */
	.nav-desktop { display: none; }
	.menu-btn { display: block; }

	/* Hero区调整 */
	.hero-section { padding: 30px 0 20px; }
	.hero-title { font-size: 20px; }
	.search-box { max-width: 100%; }
	.search-input { padding: 12px 16px; padding-right: 90px; font-size: 14px; }
	.search-btn { padding: 0 16px; font-size: 13px; top: 4px; bottom: 4px; right: 4px; }

	/* 内容调整 */
	.main-content { padding: 20px 0; }
	.list-item { padding: 16px; flex-direction: column; align-items: flex-start; }
	.item-title { font-size: 15px; white-space: normal; margin-bottom: 8px; }
	.item-meta { width: 100%; justify-content: space-between; }

	/* 服务宫格变两列 */
	.service-grid { grid-template-columns: repeat(2, 1fr); }
	.service-item { padding: 20px; }
}

/* 骨架屏基础样式 */
.skeleton-placeholder {
    pointer-events: none;
}

.skeleton-line {
    background: rgba(74, 53, 112, 0.1); /* 使用我们的主题紫 #4a3570 的淡色版 */
    border-radius: 4px;
    margin-bottom: 8px;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}

.skeleton-line.title { width: 70%; height: 20px; }
.skeleton-line.tag { width: 60px; height: 16px; display: inline-block; margin-right: 10px; }
.skeleton-line.date { width: 80px; height: 16px; display: inline-block; }

@keyframes skeleton-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}


/* =========================================
   🔍 EDRC 搜索结果页专属样式
   ========================================= */

/* 1. 顶部标题区：气场全开 */
.search-page-header {
    text-align: center;
    padding: 80px 20px 40px; /* 上留白多一点，显大气 */
    background: linear-gradient(to bottom, #f9f9f9, #ffffff); /* 极淡的渐变 */
    border-bottom: 1px solid #eee;
}

.search-page-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 10px;
    letter-spacing: -1px; /* 紧凑的现代感 */
}

.search-page-header p {
    color: #666;
    font-size: 1.1rem;
}

/* 2. 结果容器：保持页面中心阅读流 */
.search-results-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

/* 3. 搜索条目：去卡片化，改为分割线列表 */
.search-item {
    background: #fff; /* 去掉白色背景块 */
    border: none;
    border-bottom: 0px solid #4a3570; /* 仅保留底部分割线 */
    border-radius: 8px; /* 拒绝圆角，保持棱角 */
    padding: 20px 12px; /* 上下留白，左右不留 */
    margin-bottom: 10px;
    
    list-style: none;
    position: relative;
    
    /* 没有任何位移动画 */
    transition: background-color 0.1s ease; 
}

/* 悬停效果：仅做极克制的背景高亮，不浮动 */
.search-item:hover {
    background-color: rgba(0, 0, 0, 0.02); /* 极淡的灰色，像光标扫过 */
    transform: none; /* 禁止上浮 */
    box-shadow: none; /* 禁止阴影 */
    /* 唯一的交互反馈：鼠标变手型 */
    cursor: pointer;
}

/* 彻底删掉左侧那个花哨的紫色装饰条 */
.search-item::before {
    display: none;
}

/* 标题样式：像文件索引 */
.search-item .item-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2d3748; /* 深灰近黑 */
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    font-family: inherit; /* 继承系统字体，不做作 */
}

/* 标题悬停：仅变色，不加下划线 */
.search-item .item-title:hover {
    color: var(--edrc-purple-dark); /* 只有这里允许出现一点主题色 */
}

/* 元数据行（标签和日期） */
.item-meta {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 标签样式：像盖在档案上的印章 */
.tag {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 2px; /* 方角标签 */
    font-weight: 500;
    line-height: 1;
}

/* 针对不同类型的标签配色（可选） */
.tag-book {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
}
.tag-article {
    background-color: #f0f0f0;
    color: var(--edrc-purple-dark);
    border: 1px solid #ddd;
}

/* 标签样式 (书籍章节) */
.search-item .tag {
    background-color: #f3e8ff; /* 浅紫色背景 */
    color: #6b46c1; /* 深紫色文字 */
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* 来源书籍信息 */
.search-item .item-date {
    font-style: italic; /* 斜体更有书卷气 */
    color: #999;
}

/* 4. 空状态/错误状态的美化 */
.search-results-container li:not(.search-item) {
    text-align: center;
    padding: 40px;
    color: #a0aec0;
    font-style: italic;
    border: 2px dashed #e2e8f0;
}




/* =========================================
   👑 EDRC 核心样式表 - 皇家典藏版 (v3.0)
   ========================================= */

/* 1. 全局背景：极淡灰蓝，衬托白纸 */
body {
    background-color: #f7f9fc;
}

/* =========================================
   📄 阅读容器 - 悬浮白纸风格
   ========================================= */
.article-container {
    background-color: #ffffff;
    /* 悬浮阴影 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 60px 50px !important;
    margin-top: 40px;
    margin-bottom: 60px;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .article-container {
        padding: 30px 20px !important;
        margin-top: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* =========================================
   📖 文章排版 - 深度优化
   ========================================= */

/* 1. 正文基础 */
.article-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
    color: #374151;      /* 深灰文本 */
    letter-spacing: 0.01em;
}

/* 2. 段落节奏 */
.article-content p {
    margin-bottom: 1.5em;
    text-align: justify;
}

/* 3. 标题层级 */
.article-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111;
    margin-top: 2.5em;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #eeeaf5; /* 底部淡线 (新配色) */
}

.article-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #4a3570;       /* 标题深紫 (新配色) */
    margin-top: 2em;
    margin-bottom: 0.8em;
    border-left: 4px solid #4a3570; /* 左侧深紫竖条 (新配色) */
    padding-left: 12px;
}

/* 4. 引用块 (Blockquote) */
.article-content blockquote {
    background: #f9fafb;
    border-left: 4px solid #4a3570; /* 深紫强调线 (新配色) */
    margin: 2em 0;
    padding: 1.5em 2em;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #555;
}

/* 5. 粗体强调 (Strong) */
.article-content strong {
    color: #111;
    /* 底部荧光笔效果 (换成了淡紫灰) */
    background: linear-gradient(120deg, transparent 60%, #eeeaf5 0);
    padding: 0 2px;
}

/* =========================================
   💻 代码块与技术元素
   ========================================= */

/* 代码块容器 (Pre) */
.article-content pre {
    background: #f8fafc;        /* 极淡灰背景 */
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    margin: 1.5em 0;
    border: 1px solid #e2e8f0;
}

/* 行内代码 (Code) */
.article-content code {
    background: #eeeaf5;        /* 淡紫灰背景 (新配色) */
    color: #4a3570;             /* 深紫文字 (新配色) */
    padding: 2px 5px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9em;
}

/* 修正：Pre 里面的 Code 不需要额外背景 */
.article-content pre code {
    background: none;
    color: #334155;
    padding: 0;
}

/* =========================================
   📊 Markdown 列表与表格
   ========================================= */

/* 1. 列表 */
.article-content ul, 
.article-content ol {
    margin-bottom: 1.5em;
    padding-left: 2em;
    color: #374151;
}

.article-content li { margin-bottom: 0.5em; }

/* 列表符号变色 */
.article-content ul li::marker,
.article-content ol li::marker {
    color: #4a3570; /* 深紫 (新配色) */
    font-weight: 600;
}

/* 2. 表格 (商务风格) */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-size: 0.95em;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.article-content th {
    background-color: #4a3570;  /* 深紫表头 (新配色) */
    color: #ffffff;             /* 白字 */
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
}

.article-content td {
    padding: 12px 15px;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563;
}

.article-content tr:nth-child(even) { background-color: #fafafa; }
.article-content tr:hover { background-color: #fdf4ff; }