/* 郑和号科技有限公司 - 样式文件
   功能说明：
   1) 定义全局设计变量（Design Tokens），确保设计风格一致
   2) 提供基础样式和布局结构
   3) 为各个页面组件提供特定样式
   4) 实现响应式设计，适配不同屏幕尺寸

   设计风格：
   - 顶部导航：深色一体，使用深蓝色背景
   - 内容区域：浅色分层，使用白色和浅灰色背景
   - 整体风格：简洁干净，现代专业

   页面样式模块：
   - 首页：英雄区域、服务板块、关于我们预览、最新动态、联系我们
   - 国别风险评估报告：按大洲分类的国家风险报告展示
   - 海外安全动态：传统新闻网页风格，按分类展示安全资讯
   - 产品服务：产品卡片展示，包含图片和详细描述
   - 郑和号观察：深度分析文章展示
   - 关于我们：公司简介、海外风险知多少、海外利益保护、我们的使命、联系我们

   基础组件样式：
   - 顶部导航栏：包含品牌 logo 和导航链接
   - 页脚：包含公司信息和二维码
   - 按钮：多种样式的按钮组件
   - 加载状态：页面加载时的提示
   - 分页：页面导航控件

   响应式断点：
   - 小桌面：1200px 以下
   - 平板：980px 以下
   - 移动端：640px 以下
*/

/* 设计变量（Design Tokens）
   目标：顶部导航“深色一体”，内容区与背景“浅色分层”，整体简洁干净。 */
:root {
  --nav-bg: #000000; /* 导航栏背景色 */
  --bg: #f2f3f5; /* 页面背景色 */
  --surface: #ffffff; /* 卡片/表面背景色 */
  --border: #e6e8eb; /* 边框颜色 */
  --text: #0f172a; /* 主要文本颜色 */
  --muted: rgba(15, 23, 42, 0.68); /* 次要文本颜色 */
  --muted2: rgba(15, 23, 42, 0.52); /* 更次要的文本颜色 */
  --accent: #1d4ed8; /* 强调色 */
  --danger: #ef4444; /* 危险/错误颜色 */
  --shadow: 0 12px 28px rgba(15, 23, 42, 0.08); /* 阴影效果 */
  --radius: 12px; /* 圆角半径 */
  --active: #f59e0b; /* 激活状态颜色 */
}

/* 全局样式重置 */
* {
  box-sizing: border-box; /* 统一盒模型，确保元素宽度包含边框和内边距 */
}

/* 基础HTML和Body样式 */
html,
body {
  height: 100%; /* 设置HTML和Body高度为100%，确保页面占满整个屏幕 */
}

body {
  margin: 0; /* 去除默认边距 */
  /* 优先使用系统中文字体：避免引入外网字体依赖导致加载失败 */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  background: var(--bg); /* 使用设计变量中的页面背景色 */
  color: var(--text); /* 使用设计变量中的主要文本颜色 */
}

/* 链接基础样式 */
a {
  color: var(--accent); /* 使用设计变量中的强调色 */
  text-decoration: none; /* 去除默认下划线 */
}

a:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

/* 容器样式：内容最大宽度与左右留白，桌面端居中，移动端自适应 */
.container {
  width: 100%; /* 宽度100%，适应不同屏幕尺寸 */
  max-width: 1200px; /* 最大宽度1200px，确保内容在大屏幕上不过宽 */
  padding: 0 24px; /* 左右留白24px，增加内容与边缘的间距 */
  margin: 0 auto; /* 水平居中 */
}

/* 顶部导航栏：固定在顶部，形成“深色顶栏 + 浅色内容区”的视觉分割 */
.nav {
  position: sticky; /* 粘性定位，滚动时固定在顶部 */
  top: 0; /* 固定在顶部 */
  z-index: 30; /* 确保导航栏在其他元素之上 */
  background: #202739; /* 深蓝色背景 */
  color: #ffffff; /* 白色文本 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* 底部边框，增加层次感 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* 阴影效果，增加立体感 */
}

/* 导航栏内部布局：flex布局，左侧品牌，右侧联系方式和导航链接 */
.nav-inner {
  display: flex; /* 使用flex布局 */
  height: 110px; /* 导航栏高度 */
  padding: 1px 24px; /* 上下内边距和左右内边距 */
  gap: 20px; /* 子元素间距 */
}

/* 品牌区域：左侧logo和公司名称 */
.brand {
  display: flex; /* 使用flex布局 */
  gap: 12px; /* logo和文字间距 */
  align-items: center; /* 垂直居中 */
  flex: 0 0 auto; /* 不拉伸，保持原始宽度 */
  height: 100%; /* 高度100%，与导航栏同高 */
}

/* Logo样式：图片 logo */
.logo {
  width: 120px; /* logo宽度 */
  height: 80px; /* logo高度 */
  border-radius: 8px; /* 圆角效果 */
  object-fit: contain; /* 保持图片比例 */
  display: block; /* 作为块级元素 */
}

/* 品牌标题：公司名称和标语 */
.brand-title {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  line-height: 1.1; /* 行高 */
}

.brand-title strong {
  font-size: 18px; /* 公司名称字体大小 */
  color: #ffffff; /* 白色文本 */
  font-weight: bold; /* 粗体 */
}

.brand-title span {
  font-size: 14px; /* 标语字体大小 */
  color: rgba(255, 255, 255, 0.9); /* 半透明白色 */
}

/* 导航右侧区域：包含电话号码和导航链接 */
.nav-right {
  flex: 1; /* 占据剩余空间 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  justify-content: space-between; /* 上下分布 */
}

/* 导航顶部：电话号码 */
.nav-top {
  display: flex; /* 使用flex布局 */
  justify-content: flex-end; /* 右对齐 */
  align-items: flex-start; /* 顶部对齐 */
  padding-top: 25px; /* 顶部内边距 */
}

/* 导航底部：导航链接 */
.nav-bottom {
  display: flex; /* 使用flex布局 */
  justify-content: flex-end; /* 右对齐 */
  align-items: flex-end; /* 底部对齐 */
  padding-bottom: 5px; /* 底部内边距 */
}

/* 导航链接容器 */
.nav-links {
  display: flex; /* 使用flex布局 */
  gap: 20px; /* 链接间距 */
  align-items: flex-end; /* 底部对齐 */
}

/* 汉堡菜单按钮 */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 50;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: #ffffff;
  margin: 4px 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(45deg) translate(-6px, -6px);
}

/* 移动端导航菜单 */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
  display: none;
}

.mobile-nav-overlay.active {
  display: block;
}

.mobile-nav-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background: #202739;
  padding: 80px 24px 24px;
  z-index: 45;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.mobile-nav-menu.active {
  right: 0;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-links a {
  display: block;
  color: #ffffff;
  font-size: 18px;
  padding: 16px 20px;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--active);
}

.mobile-nav-phone {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-phone a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}

.mobile-nav-phone svg {
  width: 24px;
  height: 24px;
}

/* 导航下拉菜单容器 */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  height: 100%;
  align-items: center;
}

/* 下拉菜单列表 */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(15, 23, 42, 0.95);
  min-width: 200px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 鼠标悬停显示下拉菜单 */
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* 下拉菜单项 */
.nav-dropdown-menu a {
  display: block !important;
  height: auto !important;
  padding: 12px 20px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: none !important;
  white-space: nowrap;
  transition: background 0.2s ease !important;
  transform: none !important;
}

/* 下拉菜单项悬停效果 */
.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--active) !important;
}

/* 移动端下拉菜单样式调整 */
.mobile-nav-dropdown-menu {
  display: none;
  flex-direction: column;
  padding-left: 20px;
  margin-top: 10px;
}

.nav-dropdown.active .mobile-nav-dropdown-menu {
  display: flex;
}

.mobile-nav-dropdown-menu a {
  font-size: 16px !important;
  padding: 10px 0 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 导航链接样式：使用底部下划线表示当前激活页 */
.nav-links a {
  color: #ffffff; /* 白色文本 */
  font-size: 16px; /* 导航链接字体大小 */
  font-family: 'Source Han Sans CN', 'Source Han Sans', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 现代简洁字体 */
  opacity: 1; /* 不透明 */
  height: 30px; /* 链接高度 */
  display: inline-flex; /* 内联flex布局 */
  align-items: center; /* 垂直居中 */
  border-bottom: 3px solid transparent; /* 透明底部边框 */
  padding: 0 8px; /* 左右内边距 */
  transition: all 0.3s ease-in-out; /* 过渡效果 */
  position: relative; /* 相对定位 */
  font-weight: 500; /* 中等粗细 */
}

/* 导航链接悬停效果 */
.nav-links a:hover {
  text-decoration: none; /* 去除下划线 */
  opacity: 1; /* 不透明 */
  color: var(--active); /* 使用激活状态颜色 */
  border-bottom-color: var(--active); /* 底部边框颜色 */
  transform: translateY(-2px); /* 向上移动2px */
}

/* 导航链接激活状态 */
.nav-links a.active {
  color: var(--active); /* 使用激活状态颜色 */
  border-bottom-color: var(--active); /* 底部边框颜色 */
  opacity: 1; /* 不透明 */
}

/* 电话号码样式 */
.nav-phone {
  color: #ffffff; /* 白色文本 */
  font-weight: 600; /* 半粗体 */
  letter-spacing: 0.2px; /* 字间距 */
  font-size: 24px; /* 电话号码字体大小 */
  font-family: 'Source Han Sans CN', 'Source Han Sans', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 现代简洁字体 */
  text-decoration: none; /* 去除下划线 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px; /* 图标和文字间距 */
}

/* 导航图标样式 */
.nav-icon {
  width: 24px; 
  height: 24px; 
  color: #ffffff; 
}

/* 电话号码悬停效果 */
.nav-phone:hover {
  text-decoration: none; /* 去除下划线 */
  color: #ffffff; /* 白色文本 */
  opacity: 0.9; /* 轻微透明 */
}

/* 信息栏：底部深色背景区域 */
.info-bar {
  background: #202739; /* 深蓝色背景 */
  color: #ffffff; /* 白色文本 */
  padding: 24px 0; /* 上下内边距 */
  border-top: 1px solid rgba(255, 255, 255, 0.12); /* 顶部边框，增加层次感 */
}

/* 信息栏内容布局 */
.info-bar-content {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 两端对齐 */
  flex-wrap: nowrap; /* 电脑端不换行 */
  gap: 40px; /* 子元素间距 */
  width: 100%;
}

/* 信息栏Logo区域 */
.info-bar-logo {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 12px; /* logo和文字间距 */
  flex: 0 0 auto; /* 不拉伸，保持原始宽度 */
}

/* 信息栏Logo样式 */
.info-bar-logo .logo {
  width: 200px; /* logo宽度 */
  height: 160px; /* logo高度 */
  border-radius: 8px; /* 圆角效果 */
  object-fit: contain; /* 保持图片比例 */
  display: block; /* 作为块级元素 */
}

/* 信息栏品牌标题 */
.info-bar-logo .brand-title strong {
  font-size: 18px; /* 公司名称字体大小 */
  color: #ffffff; /* 白色文本 */
  font-weight: bold; /* 粗体 */
}

.info-bar-logo .brand-title span {
  font-size: 14px; /* 标语字体大小 */
  color: #ffffff; /* 白色文本 */
  opacity: 0.9; /* 轻微透明 */
}

/* 信息栏二维码区域 */
.info-bar-qr {
  display: flex; /* 使用flex布局 */
  gap: 30px; /* 二维码间距 */
  flex: 0 0 auto; /* 不拉伸 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 单个二维码项目 */
.qr-item {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  gap: 12px; /* 二维码和标签间距 */
}

/* 二维码占位符 */
.qr-placeholder {
  width: 80px; /* 占位符宽度 */
  height: 80px; /* 占位符高度 */
  background: #ffffff; /* 白色背景 */
  border-radius: 8px; /* 圆角效果 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 12px; /* 字体大小 */
  text-align: center; /* 文本居中 */
  color: #000000; /* 黑色文本 */
  font-weight: bold; /* 粗体 */
}

/* 二维码图片 */
.qr-code {
  width: 100px; /* 二维码宽度 */
  height: 100px; /* 二维码高度 */
  border-radius: 8px; /* 圆角效果 */
  object-fit: contain; /* 保持图片比例 */
  display: block; /* 作为块级元素 */
}

/* 二维码标签 */
.qr-label {
  font-size: 14px; /* 标签字体大小 */
  color: #ffffff; /* 白色文本 */
  opacity: 0.9; /* 轻微透明 */
  text-align: center; /* 文本居中 */
  font-family: 'Source Han Sans CN', 'Source Han Sans', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 现代简洁字体 */
}

/* 信息栏联系信息 */
.info-bar-contact {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 8px; /* 联系项间距 */
  flex: 1; /* 占据剩余空间 */
  min-width: 250px; /* 最小宽度 */
  align-items: flex-start; /* 左侧对齐 */
}

/* 联系信息项 */
.contact-item {
  display: flex; /* 使用flex布局 */
  align-items: flex-start; /* 顶部对齐 */
  gap: 8px; /* 图标和文字间距 */
  font-size: 14px; /* 字体大小 */
  color: #ffffff; /* 白色文本 */
  opacity: 0.9; /* 轻微透明 */
  line-height: 1.4; /* 行高 */
  width: 100%; /* 宽度100% */
  font-family: 'Source Han Sans CN', 'Source Han Sans', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 现代简洁字体 */
}

/* 页脚图标 */
.footer-icon {
  width: 16px; /* 图标宽度 */
  height: 16px; /* 图标高度 */
  color: #ffffff; /* 白色图标 */
  flex-shrink: 0; /* 不缩小 */
  margin-top: 2px; /* 顶部边距 */
}

/* 联系图标（隐藏） */
.contact-icon {
  display: none; /* 隐藏联系图标 */
}

/* 联系文本 */
.contact-text {
  flex: 1; /* 占据剩余空间 */
  word-break: break-word; /* 自动换行 */
}

/* 页脚：版权信息 */
.footer {
  border-top: 1px solid var(--border); /* 顶部边框 */
  padding: 24px 0 44px; /* 上下内边距 */
  color: var(--muted2); /* 使用设计变量中的次要文本颜色 */
  font-size: 13px; /* 字体大小 */
  background: var(--bg); /* 使用设计变量中的页面背景色 */
  font-family: 'Source Han Sans CN', 'Source Han Sans', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 现代简洁字体 */
  text-align: center; /* 文本居中 */
}

/* 提示框样式 */
.toast {
  position: fixed; /* 固定定位 */
  right: 16px; /* 距离右侧16px */
  bottom: 16px; /* 距离底部16px */
  z-index: 60; /* 确保提示框在其他元素之上 */
  max-width: 360px; /* 最大宽度 */
  border: 1px solid var(--border); /* 边框 */
  background: rgba(15, 23, 42, 0.92); /* 半透明背景 */
  border-radius: 14px; /* 圆角效果 */
  padding: 12px 14px; /* 内边距 */
  box-shadow: var(--shadow); /* 阴影效果 */
}

/* 提示框标题 */
.toast strong {
  display: block; /* 作为块级元素 */
  font-size: 13px; /* 字体大小 */
}

/* 提示框内容 */
.toast span {
  display: block; /* 作为块级元素 */
  margin-top: 4px; /* 顶部边距 */
  color: var(--muted); /* 使用设计变量中的次要文本颜色 */
  font-size: 12px; /* 字体大小 */
  line-height: 1.5; /* 行高 */
}

/* 国别风险评估报告页面样式 */
.report-page {
  padding: 40px 0 60px; /* 上下内边距 */
  background: var(--bg); /* 使用设计变量中的页面背景色 */
}

/* 报告页面头部 */
.report-header {
  text-align: center; /* 文本居中 */
  margin-bottom: 40px; /* 底部边距 */
}

/* 报告页面标题 */
.report-title {
  font-size: 36px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 20px; /* 底部边距 */
  color: var(--text); /* 使用设计变量中的主要文本颜色 */
}

/* 报告页面描述 */
.report-description {
  max-width: 800px; /* 最大宽度 */
  margin: 0 auto 30px; /* 水平居中，底部边距 */
  color: var(--muted); /* 使用设计变量中的次要文本颜色 */
  line-height: 1.6; /* 行高 */
  font-size: 16px; /* 字体大小 */
}

/* 搜索栏 */
.search-bar {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  gap: 10px; /* 输入框和按钮间距 */
  margin-top: 20px; /* 顶部边距 */
  align-items: center; /* 垂直居中 */
}

/* 搜索输入框 */
.search-input {
  width: 300px; /* 宽度 */
  height: 40px; /* 高度 */
  border-radius: 8px; /* 圆角效果 */
  border: 1px solid var(--border); /* 边框 */
  padding: 0 16px; /* 左右内边距 */
  font-size: 14px; /* 字体大小 */
  background: var(--surface); /* 卡片背景色 */
  text-align: flex-start; /* 文本居左 */
}

/* 搜索按钮 */
.search-btn {
  border-radius: 8px; /* 圆角效果 */
  padding: 0 24px; /* 左右内边距 */
  font-size: 14px; /* 字体大小 */
  line-height:1;
  height: 40px; /* 高度 */
  text-align: center; /* 文本居中 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background: var(--surface); /* 卡片背景色 */
  border: 1px solid var(--border); /* 边框 */
  color: var(--text); /* 文本颜色 */
  transition: all 0.2s ease; /* 过渡效果 */
}

/* 搜索按钮悬停效果 */
.search-btn:hover {
  background: var(--accent); /* 强调色 */
  color: white; /* 白色文本 */
  border-color: var(--accent); /* 边框颜色 */
}

/* 大洲标签容器 */
.continent-tabs {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  gap: 8px; /* 标签间距 */
  margin-bottom: 30px; /* 底部边距 */
  flex-wrap: wrap; /* 自动换行 */
}

/* 大洲标签 */
.continent-tab {
  padding: 8px 16px; /* 内边距 */
  border: 1px solid var(--border); /* 边框 */
  background: var(--surface); /* 使用设计变量中的卡片背景色 */
  border-radius: 4px; /* 圆角效果 */
  cursor: pointer; /* 鼠标指针 */
  transition: all 0.2s ease; /* 过渡效果 */
  font-size: 14px; /* 字体大小 */
  font-weight: 400; /* 正常粗细 */
}

/* 大洲标签悬停效果 */
.continent-tab:hover {
  background: var(--accent); /* 使用设计变量中的强调色 */
  color: white; /* 白色文本 */
}

/* 大洲标签激活状态 */
.continent-tab.active {
  background: var(--accent); /* 使用设计变量中的强调色 */
  color: white; /* 白色文本 */
  box-shadow: 0 2px 4px rgba(29, 78, 216, 0.2); /* 阴影效果 */
}

/* 国家卡片网格 */
.countries-grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* 自动填充，最小宽度320px */
  gap: 20px; /* 卡片间距 */
  margin-bottom: 30px; /* 底部边距 */
}

/* 国家卡片 */
.country-card {
  background: var(--surface); /* 使用设计变量中的卡片背景色 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  overflow: hidden; /* 隐藏溢出内容 */
  transition: all 0.2s ease; /* 过渡效果 */
  border: 1px solid var(--border); /* 边框 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
}

/* 国家卡片悬停效果 */
.country-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增强阴影效果 */
}

/* 国家卡片图片区域 (比例 3:2) */
.country-card-image {
  width: 100%; /* 宽度100% */
  aspect-ratio: 3 / 2; /* 固定比例 3:2 */
  height: auto; /* 高度由比例决定 */
  position: relative; /* 相对定位 */
  background: #f3f4f6; /* 灰色背景 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  overflow: hidden; /* 隐藏溢出 */
}

.country-card-image img.cover-image {
  width: 90%; /* 宽度缩小到90% */
  height: 90%; /* 高度缩小到90% */
  object-fit: contain; /* 包含模式，保持比例显示完整 */
  background-color: transparent; /* 背景透明，使用容器的灰色背景 */
  margin: auto; /* 居中显示 */
}

.country-card-image .country-flag {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 居中调整 */
  font-size: 48px; /* 字体大小（用于显示国旗） */
  line-height: 1; /* 行高 */
}

/* 国家卡片内容区域 */
.country-card-content {
  padding: 16px; /* 内边距 */
  flex: 1; /* 占据剩余空间 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
}

/* 国家名称 */
.country-name {
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 半粗体 */
  margin-bottom: 8px; /* 底部边距 */
  color: var(--text); /* 使用设计变量中的主要文本颜色 */
}

/* 国家元信息 */
.country-meta {
  display: flex; /* 使用flex布局 */
  gap: 12px; /* 元信息间距 */
  font-size: 13px; /* 字体大小 */
  color: var(--muted); /* 使用设计变量中的次要文本颜色 */
  flex-wrap: wrap; /* 自动换行 */
  margin-bottom: 12px; /* 底部边距 */
}

/* 国家摘要 */
.country-summary {
  font-size: 14px; /* 字体大小 */
  color: var(--text); /* 使用设计变量中的主要文本颜色 */
  line-height: 1.5; /* 行高 */
  margin-bottom: 16px; /* 底部边距 */
  flex: 1; /* 占据剩余空间 */
  overflow: hidden; /* 隐藏溢出 */
  display: -webkit-box; /* 弹性盒子 */
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical; /* 垂直排列 */
}

/* 国家卡片按钮 */
.country-card-content .btn {
  align-self: flex-end; /* 右对齐 */
}

/* 海外安全动态页面样式 - 传统新闻网页风格 */
.news-page {
  padding: 30px 0 50px; /* 上下内边距 */
  background: #f8f9fa; /* 浅灰色背景 */
}

/* 新闻页面头部 */
.news-header {
  background: linear-gradient(135deg, #1a365d, #2a4365); /* 蓝色渐变背景 */
  color: white; /* 白色文本 */
  padding: 40px 0; /* 上下内边距 */
  margin-bottom: 30px; /* 底部边距 */
  border-bottom: 4px solid #ed8936; /* 橙色底部边框 */
}

/* 新闻页面头部容器 */
.news-header .container {
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 24px; /* 左右内边距 */
}

/* 新闻页面标题 */
.news-title {
  font-size: 36px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 15px; /* 底部边距 */
  color: white; /* 白色文本 */
  text-align: left; /* 左侧对齐 */
}

/* 新闻页面描述 */
.news-description {
  max-width: 800px; /* 最大宽度 */
  margin: 0 0 20px; /* 底部边距 */
  color: rgba(255, 255, 255, 0.9); /* 半透明白色 */
  line-height: 1.6; /* 行高 */
  font-size: 16px; /* 字体大小 */
  text-align: left; /* 左侧对齐 */
}

/* 搜索栏 */
.search-bar {
  display: flex; /* 使用flex布局 */
  gap: 10px; /* 输入框和按钮间距 */
  margin-top: 20px; /* 顶部边距 */
  margin-bottom: 30px; /* 底部边距 */
  max-width: 500px; /* 最大宽度 */
}

/* 搜索输入框 */
.search-input {
  flex: 1; /* 占据剩余空间 */
  height: 40px; /* 高度 */
  border-radius: 4px; /* 圆角效果 */
  border: 1px solid #ced4da; /* 边框 */
  padding: 0 15px; /* 左右内边距 */
  font-size: 14px; /* 字体大小 */
  background: white; /* 白色背景 */
}

/* 搜索按钮 */
.search-btn {
  border-radius: 4px; /* 圆角效果 */
  padding: 0 24px; /* 左右内边距 */
  font-size: 14px; /* 字体大小 */
  height: 40px; /* 高度 */
  background: #ed8936; /* 橙色背景 */
  border: 1px solid #ed8936; /* 橙色边框 */
  color: white; /* 白色文本 */
}

/* 搜索按钮悬停效果 */
.search-btn:hover {
  background: #dd6b0f; /* 深橙色背景 */
  border-color: #dd6b0f; /* 深橙色边框 */
}

/* 分类标签容器 */
.category-tabs {
  display: flex; /* 使用flex布局 */
  gap: 5px; /* 标签间距 */
  margin-bottom: 30px; /* 底部边距 */
  border-bottom: 2px solid #e9ecef; /* 底部边框 */
  padding-bottom: 10px; /* 底部内边距 */
  flex-wrap: wrap; /* 自动换行 */
}

/* 分类标签 */
.category-tab {
  padding: 8px 16px; /* 内边距 */
  border: 1px solid #dee2e6; /* 边框 */
  background: white; /* 白色背景 */
  border-radius: 4px 4px 0 0; /* 圆角效果 */
  cursor: pointer; /* 鼠标指针 */
  transition: all 0.3s ease; /* 过渡效果 */
  font-size: 14px; /* 字体大小 */
  font-weight: 500; /* 中等粗细 */
  color: #495057; /* 灰色文本 */
  margin-right: 2px; /* 右侧边距 */
}

/* 分类标签悬停效果 */
.category-tab:hover {
  background: #e9ecef; /* 浅灰色背景 */
  color: #212529; /* 深灰色文本 */
  transform: none; /* 无变换 */
}

/* 分类标签激活状态 */
.category-tab.active {
  background: #ed8936; /* 橙色背景 */
  color: white; /* 白色文本 */
  border-color: #ed8936; /* 橙色边框 */
  box-shadow: none; /* 无阴影 */
}

/* 新闻卡片网格 */
.news-grid {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 20px; /* 卡片间距 */
  margin-bottom: 40px; /* 底部边距 */
}

/* 新闻列表 */
.news-list {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 20px; /* 卡片间距 */
}

/* 新闻卡片 */
.news-card {
  background: white; /* 白色背景 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  overflow: hidden; /* 隐藏溢出 */
  transition: all 0.3s ease; /* 过渡效果 */
  border: 1px solid #e9ecef; /* 边框 */
  display: flex; /* 使用flex布局 */
  flex-direction: row; /* 横向排列 */
}

/* 新闻卡片悬停效果 */
.news-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
}

/* 新闻卡片图片区域 (比例 4:3) */
.news-card-image {
  width: 200px; /* 电脑端固定宽度 */
  aspect-ratio: 4 / 3; /* 固定比例 4:3 */
  height: auto; /* 高度由比例决定 */
  background: #f3f4f6; /* 灰色背景 */
  flex-shrink: 0; /* 不缩小 */
  display: flex; /* 使用flex布局，确保内部图片能绝对居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.news-card-image img.news-cover {
  width: 90%; /* 宽度缩小到90% */
  height: 90%; /* 高度缩小到90% */
  object-fit: contain; /* 包含模式，保持比例显示完整 */
  background-color: transparent; /* 背景透明，使用容器的灰色背景 */
  margin: auto; /* 居中显示 */
}

.news-card-image .news-placeholder {
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  color: #9ca3af; /* 灰色图标 */
}

.news-card-image .news-placeholder svg {
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
}

/* 新闻卡片内容区域 */
.news-card-content {
  flex: 1; /* 占据剩余空间 */
  padding: 20px; /* 内边距 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
}

/* 新闻卡片标题 */
.news-card-content .news-title {
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 半粗体 */
  margin-bottom: 8px; /* 底部边距 */
  color: #212529; /* 深灰色文本 */
  line-height: 1.3; /* 行高 */
}

/* 新闻卡片标题悬停效果 */
.news-card-content .news-title:hover {
  color: #ed8936; /* 橙色文本 */
}

/* 新闻元信息 */
.news-meta {
  display: flex; /* 使用flex布局 */
  gap: 16px; /* 元信息间距 */
  font-size: 13px; /* 字体大小 */
  color: #6c757d; /* 灰色文本 */
  margin-bottom: 12px; /* 底部边距 */
}

/* 新闻摘要 */
.news-summary {
  color: #495057; /* 灰色文本 */
  line-height: 1.6; /* 行高 */
  font-size: 14px; /* 字体大小 */
  margin-bottom: 16px; /* 底部边距 */
  flex: 1; /* 占据剩余空间 */
  overflow: hidden; /* 隐藏溢出 */
  display: -webkit-box; /* 弹性盒子 */
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical; /* 垂直排列 */
}

/* 新闻卡片按钮 */
.news-card-content .btn {
  align-self: flex-end; /* 右对齐 */
  background: #1a365d; /* 蓝色背景 */
  border: 1px solid #1a365d; /* 蓝色边框 */
  color: white; /* 白色文本 */
  border-radius: 4px; /* 圆角效果 */
  padding: 6px 16px; /* 内边距 */
  font-size: 13px; /* 字体大小 */
  height: 32px; /* 高度 */
}

/* 新闻卡片按钮悬停效果 */
.news-card-content .btn:hover {
  background: #2a4365; /* 深蓝色背景 */
  border-color: #2a4365; /* 深蓝色边框 */
}

/* 分类标签颜色 */
.category-tab:nth-child(1).active {
  background: #3182ce; /* 蓝色背景 */
  border-color: #3182ce; /* 蓝色边框 */
}

.category-tab:nth-child(2).active {
  background: #38a169; /* 绿色背景 */
  border-color: #38a169; /* 绿色边框 */
}

.category-tab:nth-child(3).active {
  background: #dd6b20; /* 橙色背景 */
  border-color: #dd6b20; /* 橙色边框 */
}

.category-tab:nth-child(4).active {
  background: #805ad5; /* 紫色背景 */
  border-color: #805ad5; /* 紫色边框 */
}

.category-tab:nth-child(5).active {
  background: #e53e3e; /* 红色背景 */
  border-color: #e53e3e; /* 红色边框 */
}

/* 产品服务页面样式 */
.service-page {
  padding: 30px 0 50px; /* 上下内边距 */
  background: #f8f9fa; /* 浅灰色背景 */
}

/* 服务页面头部 */
.service-header {
  background: linear-gradient(135deg, #1a365d, #2a4365); /* 蓝色渐变背景 */
  color: white; /* 白色文本 */
  padding: 50px 0; /* 上下内边距 */
  margin-bottom: 40px; /* 底部边距 */
  border-bottom: 4px solid #ed8936; /* 橙色底部边框 */
}

/* 服务页面头部容器 */
.service-header .container {
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 24px; /* 左右内边距 */
}

/* 服务页面标题 */
.service-title {
  font-size: 36px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 20px; /* 底部边距 */
  color: white; /* 白色文本 */
  text-align: left; /* 左侧对齐 */
}

/* 服务页面描述 */
.service-description {
  max-width: 800px; /* 最大宽度 */
  margin: 0 0 0; /* 无底部边距 */
  color: rgba(255, 255, 255, 0.9); /* 半透明白色 */
  line-height: 1.6; /* 行高 */
  font-size: 16px; /* 字体大小 */
  text-align: left; /* 左侧对齐 */
}

/* 服务页面顶部区域 */
.service-top-section {
  margin-bottom: 50px;
}

/* 顶部区域标题 */
.service-top-title {
  font-size: 24px;
  font-weight: bold;
  color: #1a365d;
  text-align: center;
  margin-bottom: 30px;
}

/* 顶部卡片容器 */
.service-top-cards {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 顶部卡片 */
.service-top-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  flex: 1;
  min-width: 280px;
  max-width: 350px;
}

/* 顶部卡片标题 */
.service-top-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a365d;
  margin-bottom: 15px;
}

/* 顶部卡片图片 */
.service-top-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
}

/* 顶部卡片描述 */
.service-top-card i {
  font-size: 14px;
  color: #495057;
  line-height: 1.5;
  margin: 0 0 25px;
  display: block;
  text-align: center;
}

/* 顶部卡片描述 */
.service-top-card p {
  font-size: 14px;
  color: #495057;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* 服务详情区域 */
.service-details {
  margin-bottom: 40px;
}

/* 服务项目 */
.service-item {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 40px;
  border: 1px solid #e9ecef;
}

/* 服务项目头部 */
.service-item-header {
  text-align: center;
  margin-bottom: 30px;
}

/* 服务项目标题 */
.service-item-title {
  font-size: 24px;
  font-weight: bold;
  color: #1a365d;
  margin-bottom: 15px;
}

/* 服务项目描述 */
.service-item-description {
  font-size: 16px;
  line-height: 1.6;
  color: #495057;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* 服务项目内容 */
.service-item-content {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* 服务项目图片 */
.service-item-image {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  min-width: 300px;
}

.service-item-image img {
  width: 100%;
  height: auto;
  display: block;
  min-height: 300px;
  object-fit: cover;
}

/* 服务项目特色 */
.service-item-features {
  flex: 1;
  min-width: 300px;
}

.service-item-features h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a365d;
  margin-bottom: 20px;
}

/* 服务特色列表 */
.service-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.5;
  color: #495057;
}

/* 特色图标 */
.feature-icon {
  width: 20px;
  height: 20px;
  color: #38a169;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 服务行动召唤区域 */
.service-cta {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9); /* 柔和的灰色渐变背景 */
  color: #334155; /* 深灰色文本 */
  padding: 50px 0; /* 上下内边距 */
  border-radius: 12px; /* 圆角效果 */
  margin-top: 40px; /* 顶部边距 */
  border: 1px solid #e2e8f0; /* 边框 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .service-item-content {
    flex-direction: column;
  }
  
  .service-item-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .service-item-features {
    width: 100%;
  }
}

/* 行动召唤内容 */
.cta-content {
  text-align: center; /* 文本居中 */
  max-width: 800px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 24px; /* 左右内边距 */
}

/* 行动召唤标题 */
.cta-content h2 {
  font-size: 28px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 15px; /* 底部边距 */
}

/* 行动召唤描述 */
.cta-content p {
  font-size: 16px; /* 字体大小 */
  line-height: 1.6; /* 行高 */
  margin-bottom: 30px; /* 底部边距 */
  opacity: 0.9; /* 轻微透明 */
}

/* 行动召唤按钮容器 */
.cta-buttons {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  gap: 20px; /* 按钮间距 */
  flex-wrap: wrap; /* 自动换行 */
}

/* 大按钮 */
.btn.large {
  padding: 12px 30px; /* 内边距 */
  font-size: 16px; /* 字体大小 */
  height: 44px; /* 高度 */
  min-width: 160px; /* 最小宽度 */
}

/* 主要大按钮 */
.btn.primary.large {
  background: white; /* 白色背景 */
  color: #ed8936; /* 橙色文本 */
  border: 1px solid white; /* 白色边框 */
}

/* 主要大按钮悬停效果 */
.btn.primary.large:hover {
  background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  color: #dd6b0f; /* 深橙色文本 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn.large {
    width: 100%;
    max-width: 300px;
  }
}

/* 郑和号观察页面样式 */
.observation-page {
  padding: 30px 0 50px; /* 上下内边距 */
  background: #f5f5f5; /* 浅灰色背景 */
}

/* 观察页面头部 */
.observation-header {
  background: linear-gradient(135deg, #1a365d, #2a4365); /* 蓝色渐变背景，与产品服务保持一致 */
  color: white; /* 白色文本 */
  padding: 50px 0; /* 上下内边距 */
  margin-bottom: 40px; /* 底部边距 */
  border-bottom: 4px solid #ed8936; /* 橙色底部边框，与产品服务保持一致 */
}

/* 观察页面头部容器 */
.observation-header .container {
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 24px; /* 左右内边距 */
}

/* 观察页面标题 */
.observation-title {
  font-size: 36px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 20px; /* 底部边距 */
  color: white; /* 白色文本 */
  text-align: left; /* 左侧对齐 */
  font-family: 'Source Han Sans CN', 'Source Han Sans', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 现代简洁字体 */
}

/* 观察页面描述 */
.observation-description {
  max-width: 800px; /* 最大宽度 */
  margin: 0 0 0; /* 无底部边距 */
  color: rgba(255, 255, 255, 0.9); /* 半透明白色 */
  line-height: 1.6; /* 行高 */
  font-size: 16px; /* 字体大小 */
  text-align: left; /* 左侧对齐 */
}

/* 观察文章网格 */
.observations-grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); /* 自动填充，最小宽度380px */
  gap: 30px; /* 卡片间距 */
  margin-bottom: 40px; /* 底部边距 */
}

/* 观察文章卡片 */
.observation-card {
  background: white; /* 白色背景 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  overflow: hidden; /* 隐藏溢出 */
  transition: all 0.3s ease; /* 过渡效果 */
  border-left: 4px solid #4299e1; /* 蓝色左侧边框 */
  position: relative; /* 相对定位 */
  display: flex; /* 使用flex布局 */
  flex-direction: row; /* 横向排列 */
}

/* 观察文章卡片图片区域 (比例 1:1) */
.observation-card-image {
  width: 200px; /* 电脑端固定宽度 */
  aspect-ratio: 1 / 1; /* 固定比例 1:1 */
  height: auto; /* 高度由比例决定 */
  background: #f3f4f6; /* 灰色背景 */
  flex-shrink: 0; /* 不缩小 */
  display: flex; /* 使用flex布局，确保内部图片能绝对居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.observation-card-image img.observation-cover {
  width: 90%; /* 宽度缩小到90% */
  height: 90%; /* 高度缩小到90% */
  object-fit: contain; /* 包含模式，保持比例显示完整 */
  background-color: transparent; /* 背景透明，使用容器的灰色背景 */
  margin: auto; /* 居中显示 */
}

.observation-card-image .observation-placeholder {
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  color: #9ca3af; /* 灰色图标 */
}

.observation-card-image .observation-placeholder svg {
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
}

/* 观察文章卡片内容 */
.observation-card-content {
  flex: 1; /* 占据剩余空间 */
  padding: 20px; /* 内边距 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
}

/* 观察文章卡片悬停效果 */
.observation-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
  transform: translateY(-2px); /* 向上移动2px */
}

/* 观察文章日期 */
.observation-date {
  font-size: 12px; /* 字体大小 */
  color: #718096; /* 灰色文本 */
  margin-bottom: 10px; /* 底部边距 */
  display: inline-block; /* 内联块级元素 */
}

/* 观察文章标题 */
.observation-card-title {
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 半粗体 */
  margin-bottom: 12px; /* 底部边距 */
  color: #2d3748; /* 深灰色文本 */
  line-height: 1.3; /* 行高 */
  margin-top: 0; /* 无顶部边距 */
  font-family: 'Source Han Sans CN', 'Source Han Sans', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 现代简洁字体 */
}

/* 观察文章摘要 */
.observation-card-summary {
  color: #4a5568; /* 灰色文本 */
  line-height: 1.6; /* 行高 */
  font-size: 14px; /* 字体大小 */
  margin-bottom: 16px; /* 底部边距 */
  flex: 1; /* 占据剩余空间 */
  overflow: hidden; /* 隐藏溢出 */
  display: -webkit-box; /* 弹性盒子 */
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical; /* 垂直排列 */
}

/* 观察文章按钮 */
.observation-card-content .btn {
  align-self: flex-end; /* 右对齐 */
  background: #4299e1; /* 蓝色背景 */
  border: 1px solid #4299e1; /* 蓝色边框 */
  color: white; /* 白色文本 */
  border-radius: 4px; /* 圆角效果 */
  padding: 6px 16px; /* 内边距 */
  font-size: 13px; /* 字体大小 */
  height: 32px; /* 高度 */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 观察文章按钮悬停效果 */
.observation-card-content .btn:hover {
  background: #3182ce; /* 深蓝色背景 */
  border-color: #3182ce; /* 深蓝色边框 */
}

/* 响应式设计 */
@media (max-width: 992px) {
  .observations-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .observation-header {
    padding: 40px 0;
  }
  
  .observation-title {
    font-size: 30px;
  }
  
  .observations-grid {
    grid-template-columns: 1fr;
  }
  
  .observation-card {
    padding: 20px;
  }
  
  .observation-card-title {
    font-size: 18px;
  }
}

/* 首页样式 */

/* 英雄区域 */
.hero {
  background: linear-gradient(135deg, #0a1929 0%, #1a365d 100%); /* 深蓝色渐变背景 */
  color: #ffffff; /* 白色文本 */
  padding: 120px 0; /* 上下内边距 */
  text-align: center; /* 文本居中 */
  position: relative; /* 相对定位 */
  overflow: hidden; /* 溢出隐藏 */
}

/* 英雄区域背景图案 */
.hero::before {
  content: ''; /* 空内容 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 距离顶部0 */
  left: 0; /* 距离左侧0 */
  right: 0; /* 距离右侧0 */
  bottom: 0; /* 距离底部0 */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="rgba(255,255,255,0.05)" /></svg>'); /* 背景图案 */
  background-size: cover; /* 背景覆盖 */
  z-index: 1; /* 层级 */
}

/* 英雄区域内容 */
.hero-content {
  position: relative; /* 相对定位 */
  z-index: 2; /* 层级 */
  max-width: 900px; /* 增大最大宽度以容纳长标题，原本是 800px */
  margin: 0 auto; /* 水平居中 */
}

/* 英雄区域标题 */
.hero h1 {
  font-size: 2.8rem; /* 稍微减小字体大小，原本是 3rem */
  font-weight: 700; /* 粗体 */
  margin-bottom: 24px; /* 底部边距 */
  line-height: 1.2; /* 行高 */
  white-space: nowrap; /* 强制不换行 */
}

/* 英雄区域描述 */
.hero p {
  font-size: 1.25rem; /* 字体大小 */
  margin-bottom: 40px; /* 底部边距 */
  opacity: 0.9; /* 轻微透明 */
}

/* 英雄区域按钮容器 */
.hero-buttons {
  display: flex; /* 使用flex布局 */
  gap: 20px; /* 按钮间距 */
  justify-content: center; /* 水平居中 */
  flex-wrap: wrap; /* 自动换行 */
}

/* 服务板块 */
.services {
  padding: 100px 0; /* 上下内边距 */
  background: #f8f9fa; /* 浅灰色背景 */
}

/* 服务卡片网格 */
.service-grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(2, 1fr); /* 2列布局 */
  gap: 30px; /* 卡片间距 */
  margin-top: 60px; /* 顶部边距 */
}

/* 服务卡片 */
.service-card {
  background: #ffffff; /* 白色背景 */
  padding: 40px; /* 内边距 */
  border-radius: 12px; /* 圆角效果 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
  text-align: center; /* 文本居中 */
  aspect-ratio: 1; /* 正方形比例 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  justify-content: space-between; /* 空间分布 */
}

/* 服务卡片悬停效果 */
.service-card:hover {
  transform: translateY(-10px); /* 向上移动10px */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
}

/* 服务图标 */
.service-icon {
  width: 80px; /* 图标宽度 */
  height: 80px; /* 图标高度 */
  background: #e6f7ff; /* 浅蓝色背景 */
  border-radius: 50%; /* 圆形 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin: 0 auto 24px; /* 水平居中，底部边距 */
}

/* 服务图标样式 */
.service-icon i {
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
  color: #1890ff; /* 蓝色图标 */
}

/* 服务卡片标题 */
.service-card h3 {
  font-size: 1.5rem; /* 字体大小 */
  font-weight: 600; /* 半粗体 */
  margin-bottom: 16px; /* 底部边距 */
  color: #333333; /* 深灰色文本 */
}

/* 服务卡片描述 */
.service-card p {
  color: #666666; /* 灰色文本 */
  margin-bottom: 24px; /* 底部边距 */
  line-height: 1.6; /* 行高 */
}

/* 关于我们预览 */
.about-preview {
  padding: 100px 0; /* 上下内边距 */
  background: #ffffff; /* 白色背景 */
}

/* 关于我们内容 */
.about-content {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 60px; /* 文本和图片间距 */
  flex-wrap: wrap; /* 自动换行 */
}

/* 关于我们文本 */
.about-text {
  flex: 1; /* 占据剩余空间 */
  min-width: 300px; /* 最小宽度 */
}

/* 关于我们按钮 */
.about-text .btn {
  margin-top: 30px; /* 增加按钮与上方文本的间距 */
}

/* 关于我们图片 */
.about-image {
  flex: 1; /* 恢复 flex: 1 让它占据右侧剩余空间 */
  min-width: 300px; /* 恢复最小宽度 */
  border-radius: 12px; /* 圆角效果 */
  overflow: hidden; /* 溢出隐藏 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: flex-end; /* 让图片靠右对齐 */
}

/* 公司logo样式调整，保持比例显示完整 */
.about-image img.company-logo {
  max-width: 100%; /* 防止图片超出屏幕宽度 */
  height: auto; /* 保持图片原有比例 */
  max-height: 400px; /* 限制最大高度，防止图片过大破坏布局 */
  display: block; /* 消除底部间隙 */
}

/* 图片占位符 */
.image-placeholder {
  font-size: 1.25rem; /* 字体大小 */
  color: #999999; /* 灰色文本 */
  text-align: center; /* 文本居中 */
}

/* 最新动态预览 */
.news-preview {
  padding: 100px 0; /* 上下内边距 */
  background: #f8f9fa; /* 浅灰色背景 */
}

/* 板块头部 */
.section-header {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 左右分布 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 40px; /* 底部边距 */
  flex-wrap: wrap; /* 自动换行 */
  gap: 20px; /* 标题和按钮间距 */
}

/* 首页新闻卡片网格 */
.home-news-grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(2, 1fr); /* 2列布局 */
  gap: 30px; /* 卡片间距 */
}

/* 首页新闻卡片 */
.home-news-card {
  background: #ffffff; /* 白色背景 */
  border-radius: 8px; /* 圆角效果 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* 阴影效果 */
  display: flex; /* 使用flex布局 */
  flex-direction: row; /* 横向排列 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

/* 首页新闻卡片悬停效果 */
.home-news-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* 增强阴影效果 */
  transform: translateY(-2px); /* 向上移动 */
}

/* 首页新闻图片区域 (比例 4:3) */
.home-news-image {
  width: 200px; /* 电脑端固定宽度 */
  aspect-ratio: 4 / 3; /* 固定比例 4:3 */
  height: auto; /* 高度由比例决定 */
  background: #f3f4f6; /* 灰色背景 */
  flex-shrink: 0; /* 不缩小 */
  display: flex; /* 使用flex布局，确保内部图片能绝对居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.home-news-image img.news-cover {
  width: 90%; /* 宽度缩小到90% */
  height: 90%; /* 高度缩小到90% */
  object-fit: contain; /* 包含模式，保持比例显示完整 */
  background-color: transparent; /* 背景透明，使用容器的灰色背景 */
  margin: auto; /* 居中显示 */
}

.home-news-image .news-placeholder {
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  color: #9ca3af; /* 灰色图标 */
}

.home-news-image .news-placeholder svg {
  width: 32px; /* 图标宽度 */
  height: 32px; /* 图标高度 */
}

/* 首页新闻内容区域 */
.home-news-content {
  flex: 1; /* 占据剩余空间 */
  padding: 16px; /* 内边距 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
}

/* 首页新闻标题 */
.home-news-content h3 {
  font-size: 16px; /* 字体大小 */
  font-weight: 600; /* 半粗体 */
  margin-bottom: 8px; /* 底部边距 */
  color: #2d3748; /* 深灰色文本 */
  line-height: 1.3; /* 行高 */
  margin-top: 0; /* 无顶部边距 */
  font-family: 'Source Han Sans CN', 'Source Han Sans', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 现代简洁字体 */
}

/* 首页新闻日期 */
.home-news-date {
  font-size: 12px; /* 字体大小 */
  color: #718096; /* 灰色文本 */
  margin-bottom: 8px; /* 底部边距 */
}

/* 首页新闻摘要 */
.home-news-summary {
  color: #4a5568; /* 灰色文本 */
  line-height: 1.5; /* 行高 */
  font-size: 13px; /* 字体大小 */
  margin-bottom: 12px; /* 底部边距 */
  flex: 1; /* 占据剩余空间 */
  overflow: hidden; /* 隐藏溢出 */
  display: -webkit-box; /* 弹性盒子 */
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical; /* 垂直排列 */
}

/* 公司logo样式 */
.company-logo {
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  object-fit: cover; /* 覆盖模式，填充整个容器 */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .home-news-grid {
    grid-template-columns: 1fr; /* 单列布局 */
  }
  
  .home-news-card {
    flex-direction: column; /* 垂直排列 */
  }
  
  .home-news-image {
    width: 100%; /* 宽度100% */
    height: 180px; /* 高度调整 */
  }
}

/* 新闻卡片网格 */
.news-grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 自动填充，最小宽度350px */
  gap: 40px; /* 卡片间距 */
}

/* 新闻卡片 */
.news-card {
  background: #ffffff; /* 白色背景 */
  border-radius: 12px; /* 圆角效果 */
  overflow: hidden; /* 溢出隐藏 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

/* 新闻卡片悬停效果 */
.news-card:hover {
  transform: translateY(-5px); /* 向上移动5px */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
}

/* 新闻图片 */
.news-image {
  height: 200px; /* 高度 */
  background: #f0f0f0; /* 浅灰色背景 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 新闻内容 */
.news-content {
  padding: 24px; /* 内边距 */
}

/* 新闻标题 */
.news-card h3 {
  font-size: 1.25rem; /* 字体大小 */
  font-weight: 600; /* 半粗体 */
  margin-bottom: 12px; /* 底部边距 */
  color: #333333; /* 深灰色文本 */
}

/* 新闻日期 */
.news-date {
  font-size: 0.875rem; /* 字体大小 */
  color: #999999; /* 灰色文本 */
  margin-bottom: 12px; /* 底部边距 */
  display: block; /* 作为块级元素 */
}

/* 新闻描述 */
.news-card p {
  color: #666666; /* 灰色文本 */
  margin-bottom: 20px; /* 底部边距 */
  line-height: 1.6; /* 行高 */
}

/* 联系我们预览 */
.contact-preview {
  padding: 100px 0; /* 上下内边距 */
  background: linear-gradient(135deg, #0a1929 0%, #1a365d 100%); /* 深蓝色渐变背景 */
  color: #ffffff; /* 白色文本 */
  text-align: center; /* 文本居中 */
}

/* 联系我们标题 */
.contact-preview h2 {
  color: #ffffff; /* 白色文本 */
  margin-bottom: 16px; /* 底部边距 */
}

/* 联系我们描述 */
.contact-preview p {
  font-size: 1.125rem; /* 字体大小 */
  margin-bottom: 40px; /* 底部边距 */
  opacity: 0.9; /* 轻微透明 */
  max-width: 600px; /* 最大宽度 */
  margin-left: auto; /* 水平居中 */
  margin-right: auto; /* 水平居中 */
}

/* 按钮样式 */
.btn {
  display: inline-block; /* 内联块级元素 */
  padding: 12px 24px; /* 内边距 */
  border-radius: 8px; /* 圆角效果 */
  font-size: 1rem; /* 字体大小 */
  font-weight: 600; /* 半粗体 */
  text-decoration: none; /* 去除下划线 */
  transition: all 0.3s ease; /* 过渡效果 */
  cursor: pointer; /* 鼠标指针 */
  border: none; /* 无边框 */
  font-family: 'Source Han Sans CN', 'Source Han Sans', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 现代简洁字体 */
}

/* 主要按钮 */
.btn-primary {
  background: #1890ff; /* 蓝色背景 */
  color: #ffffff; /* 白色文本 */
}

/* 主要按钮悬停效果 */
.btn-primary:hover {
  background: #40a9ff; /* 浅蓝色背景 */
  transform: translateY(-2px); /* 向上移动2px */
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3); /* 阴影效果 */
}

/* 次要按钮 */
.btn-secondary {
  background: #ffffff; /* 白色背景 */
  color: #0a1929; /* 深蓝色文本 */
  border: 2px solid #ffffff; /* 白色边框 */
}

/* 次要按钮悬停效果 */
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
  color: #ffffff; /* 白色文本 */
  transform: translateY(-2px); /* 向上移动2px */
}

/* 禁用/已读按钮 */
.btn-disabled {
  background: #d9d9d9; /* 灰色背景 */
  color: #999999; /* 深灰色文本 */
  cursor: not-allowed; /* 禁止光标 */
}

/* 消息预览样式 */
.message-preview {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666666;
}

/* 文本静音样式 */
.text-muted {
  color: #999999;
}

/* 数据统计页面样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-card h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #666666;
  font-weight: normal;
}

.stat-card .stat-value {
  margin: 0;
  font-size: 28px;
  font-weight: bold;
  color: #333333;
}

.stats-section {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333333;
}

.period-selector {
  display: flex;
  gap: 10px;
}

.period-btn {
  padding: 6px 16px;
  border: 1px solid #ddd;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #666666;
  transition: all 0.3s;
}

.period-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.period-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

.chart-container {
  margin-bottom: 20px;
}

.chart {
  height: 200px;
  position: relative;
}

.chart svg {
  width: 100%;
  height: 180px;
  background: #fafafa;
  border-radius: 4px;
}

.chart-x-axis {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 12px;
  color: #999999;
}

.no-data {
  text-align: center;
  padding: 40px;
  color: #999999;
}

.stats-table h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333333;
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
}

.activity-table th,
.activity-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.activity-table th {
  background: #fafafa;
  font-weight: bold;
  color: #666666;
}

.activity-table tr:hover {
  background: #f9f9f9;
}

/* 链接按钮 */
.btn-link {
  background: transparent; /* 透明背景 */
  color: #1890ff; /* 蓝色文本 */
  padding: 8px 0; /* 上下内边距 */
  font-size: 0.875rem; /* 字体大小 */
  text-decoration: underline; /* 下划线 */
}

/* 链接按钮悬停效果 */
.btn-link:hover {
  color: #40a9ff; /* 浅蓝色文本 */
  transform: none; /* 无变换 */
}

/* 通用样式 */
.section-title {
  font-size: 2.25rem; /* 字体大小 */
  font-weight: 700; /* 粗体 */
  color: #333333; /* 深灰色文本 */
  text-align: center; /* 文本居中 */
  margin-bottom: 16px; /* 底部边距 */
}

/* 响应式设计 */
/* 平板断点（768px以下） */
@media (max-width: 768px) {
  /* 英雄区域调整 */
  .hero {
    padding: 80px 0; /* 减少上下内边距 */
  }

  /* 英雄区域标题调整 */
  .hero h1 {
    font-size: 2rem; /* 减小字体大小 */
  }

  /* 英雄区域描述调整 */
  .hero p {
    font-size: 1rem; /* 减小字体大小 */
  }

  /* 服务、关于我们、新闻、联系我们板块调整 */
  .services,
  .about-preview,
  .news-preview,
  .contact-preview {
    padding: 60px 0; /* 减少上下内边距 */
  }

  /* 关于我们内容调整 */
  .about-content {
    flex-direction: column; /* 垂直排列 */
    gap: 40px; /* 文本和图片间距 */
  }

  /* 关于我们文本和图片调整 */
  .about-text,
  .about-image {
    flex: 0 0 auto; /* 不自动撑满剩余空间 */
    width: 100%; /* 移动端宽度100% */
  }

  /* 移除固定高度，让内容自适应 */
  .about-image {
    /* 移除之前的固定高度设定 */
  }

  /* 板块头部调整 */
  .section-header {
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左侧对齐 */
  }

  /* 新闻卡片网格调整 */
  .news-grid {
    grid-template-columns: 1fr; /* 单列布局 */
  }

  /* 服务卡片网格调整 */
  .service-grid {
    grid-template-columns: 1fr; /* 单列布局 */
  }
}

/* 移动端断点（640px以下） */
@media (max-width: 640px) {
  /* 英雄区域标题调整 */
  .hero h1 {
    font-size: 1.75rem; /* 进一步减小字体大小 */
  }

  /* 英雄区域按钮调整 */
  .hero-buttons {
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
  }

  /* 按钮调整 */
  .btn {
    width: 100%; /* 宽度100% */
    max-width: 200px; /* 最大宽度 */
    text-align: center; /* 文本居中 */
  }

  /* 板块标题调整 */
  .section-title {
    font-size: 1.75rem; /* 减小字体大小 */
  }
}

/* 管理员登录页面样式 */
.admin-login-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #ffffff;
  padding: 40px 20px 20px;
}

.login-container {
  width: 100%;
  max-width: 480px;
}

.login-title {
  font-size: 24px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 32px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}

.form-input {
  width: 100%;
  height: 48px;
  border: 1px solid #e6e8eb;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 14px;
  background: #f2f3f5;
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #1d4ed8;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.1);
}

.login-button {
  width: 100%;
  height: 48px;
  background: #1d4ed8;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-button:hover {
  background: #1e40af;
  transform: translateY(-1px);
}

.login-button:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
}

/* 关于我们页面样式 */
.about-page {
  padding: 30px 0 50px; /* 上下内边距 */
  background: #f8f9fa; /* 浅灰色背景 */
}

/* 关于我们页面头部 */
.about-header {
  background: linear-gradient(135deg, #1a365d, #2a4365); /* 蓝色渐变背景 */
  color: white; /* 白色文本 */
  padding: 60px 0; /* 上下内边距 */
  margin-bottom: 50px; /* 底部边距 */
  border-bottom: 4px solid #ed8936; /* 橙色底部边框 */
}

/* 关于我们页面头部容器 */
.about-header .container {
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 24px; /* 左右内边距 */
  text-align: center; /* 文本居中 */
}

/* 关于我们页面标题 */
.about-title {
  font-size: 42px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 15px; /* 底部边距 */
  color: white; /* 白色文本 */
}

/* 关于我们页面副标题 */
.about-subtitle {
  font-size: 18px; /* 字体大小 */
  opacity: 0.9; /* 轻微透明 */
  margin: 0; /* 无外边距 */
}

/* 关于我们页面板块标题 */
.section-title {
  font-size: 30px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 20px; /* 底部边距 */
  color: #1a365d; /* 蓝色文本 */
  text-align: center; /* 文本居中 */
}

/* 关于我们页面板块描述 */
.section-description {
  text-align: center; /* 文本居中 */
  color: #495057; /* 灰色文本 */
  font-size: 16px; /* 字体大小 */
  margin-bottom: 40px; /* 底部边距 */
  max-width: 800px; /* 最大宽度 */
  margin-left: auto; /* 水平居中 */
  margin-right: auto; /* 水平居中 */
}

/* 公司简介 */
.company-intro {
  margin-bottom: 60px; /* 底部边距 */
}

/* 公司简介内容 */
.intro-content {
  display: flex; /* 使用flex布局 */
  gap: 40px; /* 图片和文本间距 */
  align-items: center; /* 垂直居中 */
  background: white; /* 白色背景 */
  padding: 40px; /* 内边距 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 公司简介图片 */
.intro-image {
  flex: 0 0 400px; /* 固定宽度400px */
  border-radius: 8px; /* 圆角效果 */
  overflow: hidden; /* 溢出隐藏 */
}

/* 公司简介图片样式 */
.intro-image img {
  width: 100%; /* 宽度100% */
  height: auto; /* 高度自适应 */
}

/* 公司简介文本 */
.intro-text {
  flex: 1; /* 占据剩余空间 */
}

/* 公司简介文本段落 */
.intro-text p {
  font-size: 16px; /* 字体大小 */
  line-height: 1.6; /* 行高 */
  color: #495057; /* 灰色文本 */
  margin-bottom: 25px; /* 底部边距 */
}

/* 海外风险知多少 */
.risk-section {
  margin-bottom: 60px; /* 底部边距 */
}

/* 风险卡片网格 */
.risk-grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充，最小宽度300px */
  gap: 24px; /* 卡片间距 */
}

/* 风险卡片 */
.risk-card {
  background: white; /* 白色背景 */
  padding: 30px; /* 内边距 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  text-align: center; /* 文本居中 */
  transition: all 0.3s ease; /* 过渡效果 */
  border: 1px solid #e9ecef; /* 边框 */
}

/* 风险卡片悬停效果 */
.risk-card:hover {
  transform: translateY(-4px); /* 向上移动4px */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 增强阴影效果 */
}

/* 风险图标 */
.risk-icon {
  width: 48px; /* 图标宽度 */
  height: 48px; /* 图标高度 */
  color: #ed8936; /* 橙色图标 */
  margin-bottom: 20px; /* 底部边距 */
}

/* 风险卡片标题 */
.risk-card h3 {
  font-size: 18px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 15px; /* 底部边距 */
  color: #1a365d; /* 蓝色文本 */
}

/* 风险卡片描述 */
.risk-card p {
  font-size: 14px; /* 字体大小 */
  line-height: 1.6; /* 行高 */
  color: #495057; /* 灰色文本 */
  margin: 0; /* 无外边距 */
}

/* 海外利益保护 */
.protection-section {
  margin-bottom: 60px; /* 底部边距 */
}

/* 管理员界面样式 */
.admin-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 40px 0;
}

.login-form {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  max-width: 400px;
  width: 100%;
  border: 1px solid var(--border);
}

.login-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  color: var(--text);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text);
}

.input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.file-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.file-name {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  word-break: break-all;
}

.btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn.primary {
  background: var(--accent);
  color: white;
}

.btn.primary:hover:not(:disabled) {
  background: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

.btn.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn.secondary:hover {
  background: var(--bg);
  border-color: var(--accent);
}

.btn.danger {
  background: var(--danger);
  color: white;
}

.btn.danger:hover {
  background: #dc2626;
}

.btn.small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn.large {
  padding: 12px 32px;
  font-size: 16px;
}

.admin-nav {
  background: #202739;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 70px;
}

.admin-brand h1 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  color: white;
}

.admin-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-spacer {
  flex: 1;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.nav-link.active {
  background: var(--accent);
  color: white;
}

.admin-content {
  padding: 40px 0;
  background: var(--bg);
  min-height: calc(100vh - 70px);
}

.admin-content h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  color: var(--text);
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.admin-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.admin-card h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  color: var(--text);
}

.admin-card p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.upload-form {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  border: 1px solid var(--border);
  max-width: 600px;
  margin: 0 auto;
}

.file-type-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.file-type-selector .btn {
  flex: 1;
  min-width: 150px;
}

.file-type-selector .btn.active {
  background: var(--accent);
  color: white;
}

.file-list {
  margin-top: 30px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}

.file-table {
  width: 100%;
  border-collapse: collapse;
}

.file-table th,
.file-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.file-table th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text);
}

.file-table tr:hover {
  background: rgba(29, 78, 216, 0.05);
}

/* 封面图片（国别风险报告、后台管理等通用封面） */
.cover-thumb,
.cover-preview .preview-image {
  object-fit: contain; /* 包含模式，保持比例显示完整 */
  background-color: #f3f4f6;
}

.cover-thumb {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

.no-cover {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.cover-preview {
  margin-bottom: 12px;
}

.cover-preview .preview-image {
  max-width: 200px;
  max-height: 150px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.cover-preview p {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.modal-content h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  padding: 20px 30px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 30px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 15px 30px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  border: 1px solid var(--border);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 12px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: var(--accent);
  margin: 0;
}

.recent-activity {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  border: 1px solid var(--border);
}

.recent-activity h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--text);
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
}

.activity-table th,
.activity-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.activity-table th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text);
}

.loading {
  text-align: center;
  padding: 40px;
  color: var(--muted);
}

/* 管理员界面专用样式调整 */
.admin-page,
.admin-upload-page,
.admin-manage-page,
.admin-stats-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-content {
  flex: 1;
  padding: 60px 0;
  background: var(--bg);
}

.admin-content .container {
  max-width: 1000px;
  padding: 0 32px;
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.admin-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-card h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  color: var(--text);
}

.admin-card p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

.upload-form {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  border: 1px solid var(--border);
  max-width: 700px;
  margin: 0 auto;
}

/* 消息管理页面样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 消息列表 */
.messages-list {
  margin-top: 20px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 0;
  color: var(--muted);
}

/* 消息表格 */
.message-table {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}

.message-table table {
  width: 100%;
  border-collapse: collapse;
}

.message-table th,
.message-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.message-table th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.message-table tbody tr {
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.message-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.message-table tbody tr.unread {
  background-color: rgba(66, 153, 225, 0.05);
}

.message-table tbody tr:last-child td {
  border-bottom: none;
}

/* 状态点 */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.unread {
  background-color: #ef4444;
}

.status-dot.read {
  background-color: #9ca3af;
}

/* 徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
}

.badge-danger {
  background-color: #ef4444;
  color: white;
}

/* 小按钮 */
.btn-sm {
  padding: 4px 12px;
  font-size: 13px;
  height: 28px;
}

.btn-danger {
  background-color: #ef4444;
  border-color: #ef4444;
  color: white;
}

.btn-danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

/* 弹窗覆盖层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 弹窗内容 */
.modal-content {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 24px;
  max-height: 400px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}

/* 详情行 */
.detail-row {
  margin-bottom: 16px;
  line-height: 1.6;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-weight: 600;
  color: var(--text);
}

.message-content {
  margin-top: 8px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-break: break-all;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
}

.form-group label .optional {
  color: #9ca3af;
  font-weight: normal;
  font-size: 12px;
}

.input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s ease;
}

.file-type-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.file-type-selector .btn {
  flex: 1;
  min-width: 180px;
  padding: 12px 16px;
}

.file-list {
  margin-top: 40px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}

.file-table th,
.file-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-bottom: 50px;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
  border: 1px solid var(--border);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recent-activity {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  border: 1px solid var(--border);
}

.activity-table th,
.activity-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

/* 简洁登录页面样式 */
.admin-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  padding: 40px 0;
}

.login-container {
  width: 300px;
  height: 400px;
  margin: 0 auto 24px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: transparent;
}

.login-container.login-button-container {
  margin-top: 48px;
  margin-bottom: 0;
}

.login-title-simple {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}



.login-input-simple {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  transition: border-color 0.2s ease;
}

.login-input-simple:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.login-field-label {
  font-size: 16px;
  color: #555;
  font-weight: 500;
  text-align: left;
}


.login-button-simple {
  width: 100%;
  padding: 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.login-button-simple:hover {
  background: #0069d9;
}

.login-button-simple:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-nav-inner {
    flex-direction: column;
    height: auto;
    padding: 16px 24px;
    gap: 12px;
  }



  .admin-content {
    padding: 40px 0;
  }

  .admin-content .container {
    padding: 0 20px;
  }

  .upload-form {
    margin: 0 20px;
    padding: 32px;
  }

  .file-type-selector {
    flex-direction: column;
  }

  .file-type-selector .btn {
    width: 100%;
  }

  .admin-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .stats-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .file-table {
    font-size: 14px;
  }

  .file-table th,
  .file-table td {
    padding: 12px 16px;
  }

  .stat-card {
    padding: 28px;
  }

  .recent-activity {
    padding: 32px;
  }

  /* 响应式登录页面 */
  .login-form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .login-label-simple {
    min-width: auto;
  }

  .login-input-simple {
    width: 100%;
  }
}

/* 海外利益保护内容 */
.protection-content {
  display: flex; /* 使用flex布局 */
  gap: 40px; /* 图片和文本间距 */
  align-items: center; /* 垂直居中 */
  background: white; /* 白色背景 */
  padding: 40px; /* 内边距 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 海外利益保护图片 */
.protection-image {
  flex: 0 0 400px; /* 固定宽度400px */
  border-radius: 8px; /* 圆角效果 */
  overflow: hidden; /* 溢出隐藏 */
}

/* 海外利益保护图片样式 */
.protection-image img {
  width: 100%; /* 宽度100% */
  height: auto; /* 高度自适应 */
}

/* 海外利益保护文本 */
.protection-text {
  flex: 1; /* 占据剩余空间 */
}

/* 海外利益保护文本标题 */
.protection-text h3 {
  font-size: 20px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 20px; /* 底部边距 */
  color: #1a365d; /* 蓝色文本 */
}

/* 海外利益保护列表 */
.protection-list {
  list-style: none; /* 无列表样式 */
  padding: 0; /* 无内边距 */
  margin: 0 0 25px; /* 底部边距 */
}

/* 海外利益保护列表项 */
.protection-list li {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 12px; /* 图标和文字间距 */
  margin-bottom: 15px; /* 底部边距 */
  font-size: 15px; /* 字体大小 */
  color: #495057; /* 灰色文本 */
}

/* 详情页面样式 */
.detail-page {
  min-height: 100vh;
  background: #ffffff;
}

.detail-content {
  padding: 40px 0;
}

/* 加载状态容器 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
}

/* 旋转加载动画 */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #4299e1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-container p {
  color: #6b7280;
  font-size: 14px;
}

/* 面包屑导航 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 14px;
  color: #6b7280;
}

.breadcrumb a {
  color: #4299e1;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: #9ca3af;
}

/* 文章标题区域 */
.article-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.article-title {
  font-size: 36px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 16px;
  line-height: 1.4;
  text-align: center;
}

.article-meta {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-size: 14px;
  color: #6b7280;
}

.article-date {
  color: #6b7280;
}

.article-views {
  color: #6b7280;
}

.article-collect {
  color: #f59e0b;
  cursor: pointer;
}

.article-collect:hover {
  color: #d97706;
}

/* 文章内容区域 */
.article-body {
  margin-top: 40px;
}

/* 文章内容 */
.article-content {
  color: #374151;
  line-height: 2;
  font-size: 16px;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  color: #1f2937;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 15px;
}

.article-content h1 { 
  font-size: 24px; 
  border-bottom: 2px solid #4299e1;
  padding-bottom: 10px;
}
.article-content h2 { font-size: 22px; }
.article-content h3 { font-size: 20px; }
.article-content h4 { font-size: 18px; }

.article-content p {
  margin-bottom: 18px;
  text-align: justify;
  text-indent: 2em;
}

.article-content ul,
.article-content ol {
  padding-left: 30px;
  margin-bottom: 18px;
}

.article-content li {
  margin-bottom: 10px;
  line-height: 2;
}

.article-content a {
  color: #4299e1;
  text-decoration: none;
}

.article-content a:hover {
  text-decoration: underline;
}

.article-content img {
  max-width: 100%;
  margin: 15px 0;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.article-content th,
.article-content td {
  border: 1px solid #e5e7eb;
  padding: 12px;
  text-align: left;
}

.article-content th {
  background-color: #f9fafb;
  font-weight: bold;
}

/* 三列目录布局 */
.article-content .table-of-contents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 30px 0;
}

.article-content .toc-column {
  padding: 20px;
  background: #f9fafb;
}

.article-content .toc-column h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #4299e1;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.article-content .toc-column ul {
  padding-left: 20px;
  margin: 0;
}

.article-content .toc-column li {
  margin-bottom: 8px;
  font-size: 14px;
}

/* PDF 预览容器 */
.pdf-container {
  margin-top: 30px;
}

.pdf-embed {
  width: 100%;
  height: 700px;
}

/* 文章操作区域 */
.article-actions {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.article-actions .btn {
  padding: 12px 30px;
  background: #4299e1;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.article-actions .btn:hover {
  background: #3182ce;
}

/* 未找到内容 */
.not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.not-found h2 {
  font-size: 28px;
  color: #1f2937;
  margin-bottom: 16px;
}

.not-found p {
  color: #6b7280;
  margin-bottom: 24px;
}

/* Toast 加载状态美化 */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 16px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast strong {
  font-weight: 600;
  font-size: 14px;
}

.toast span {
  font-size: 14px;
  opacity: 0.9;
}

/* 管理员界面加载状态 */
.admin-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.admin-loading .spinner {
  width: 32px;
  height: 32px;
}

/* 列表图标 */
.list-icon {
  width: 20px; /* 图标宽度 */
  height: 20px; /* 图标高度 */
  color: #38a169; /* 绿色图标 */
  flex-shrink: 0; /* 不缩小 */
}

/* 我们的使命 */
.mission-section {
  margin-bottom: 60px; /* 底部边距 */
}

/* 我们的使命内容 */
.mission-content {
  display: flex; /* 使用flex布局 */
  gap: 30px; /* 使命项间距 */
  justify-content: center; /* 水平居中 */
  flex-wrap: wrap; /* 自动换行 */
}

/* 我们的使命项 */
.mission-item {
  background: white; /* 白色背景 */
  padding: 30px; /* 内边距 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  text-align: center; /* 文本居中 */
  flex: 1; /* 占据剩余空间 */
  min-width: 250px; /* 最小宽度 */
  max-width: 300px; /* 最大宽度 */
  transition: all 0.3s ease; /* 过渡效果 */
  border: 1px solid #e9ecef; /* 边框 */
}

/* 我们的使命项悬停效果 */
.mission-item:hover {
  transform: translateY(-4px); /* 向上移动4px */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 增强阴影效果 */
}

/* 我们的使命图标 */
.mission-icon {
  width: 48px; /* 图标宽度 */
  height: 48px; /* 图标高度 */
  color: #4299e1; /* 蓝色图标 */
  margin-bottom: 20px; /* 底部边距 */
}

/* 我们的使命项标题 */
.mission-item h3 {
  font-size: 18px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 15px; /* 底部边距 */
  color: #1a365d; /* 蓝色文本 */
}

/* 我们的使命项描述 */
.mission-item p {
  font-size: 14px; /* 字体大小 */
  line-height: 1.6; /* 行高 */
  color: #495057; /* 灰色文本 */
  margin: 0; /* 无外边距 */
}

/* 联系我们 */
.contact-section {
  margin-bottom: 40px; /* 底部边距 */
}

/* 联系我们内容 */
.contact-content {
  display: flex; /* 使用flex布局 */
  gap: 40px; /* 联系信息和表单间距 */
  background: white; /* 白色背景 */
  padding: 40px; /* 内边距 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 联系信息 */
.about-contact-info {
  flex: 0 0 300px; /* 固定宽度300px */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  min-height: 300px; /* 最小高度 */
}

/* 联系信息项 */
.about-contact-item {
  display: flex; /* 使用flex布局 */
  align-items: flex-start; /* 顶部对齐 */
  gap: 15px; /* 图标和文字间距 */
  margin-bottom: 25px; /* 底部边距 */
}

/* 联系信息图标 */
.about-contact-icon {
  width: 24px; /* 图标宽度 */
  height: 24px; /* 图标高度 */
  color: #1a365d; /* 蓝色图标 */
  flex-shrink: 0; /* 不缩小 */
  margin-top: 0; /* 无顶部边距 */
  align-self: flex-start; /* 顶部对齐 */
  padding-top: 2px; /* 顶部内边距 */
}

/* 联系信息项标题 */
.about-contact-item h3 {
  font-size: 16px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 5px; /* 底部边距 */
  color: #1a365d; /* 蓝色文本 */
  margin-top: 0; /* 无顶部边距 */
  line-height: 1.2; /* 行高 */
}

/* 联系信息项内容 */
.about-contact-item p {
  font-size: 14px; /* 字体大小 */
  color: #495057; /* 灰色文本 */
  margin: 0; /* 无外边距 */
}

/* 联系表单 */
.contact-form {
  flex: 1; /* 占据剩余空间 */
}

/* 联系表单标题 */
.contact-form h3 {
  font-size: 20px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  margin-bottom: 20px; /* 底部边距 */
  color: #1a365d; /* 蓝色文本 */
}

/* 表单组 */
.form-group {
  margin-bottom: 20px; /* 底部边距 */
}

/* 表单输入框和文本域 */
.form-group input,
.form-group textarea {
  width: 100%; /* 宽度100% */
  padding: 12px; /* 内边距 */
  border: 1px solid #ced4da; /* 边框 */
  border-radius: 4px; /* 圆角效果 */
  font-size: 14px; /* 字体大小 */
  background: #f8f9fa; /* 浅灰色背景 */
  transition: border-color 0.3s ease; /* 过渡效果 */
}

/* 表单输入框和文本域焦点效果 */
.form-group input:focus,
.form-group textarea:focus {
  outline: none; /* 无轮廓 */
  border-color: #ed8936; /* 橙色边框 */
  box-shadow: 0 0 0 0.2rem rgba(237, 137, 54, 0.25); /* 橙色阴影 */
}

/* 响应式设计 */
/* 平板断点（992px以下） */
@media (max-width: 992px) {
  /* 垂直排列内容 */
  .intro-content,
  .protection-content,
  .contact-content {
    flex-direction: column; /* 垂直排列 */
    align-items: stretch; /* 拉伸对齐 */
  }
  
  /* 调整图片和联系信息宽度 */
  .intro-image,
  .protection-image,
  .about-contact-info {
    flex: 0 0 auto; /* 自动宽度 */
    width: 100%; /* 宽度100% */
  }
  
  /* 调整风险卡片网格 */
  .risk-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自动填充，最小宽度250px */
  }
}

/* 移动端断点（768px以下） */
@media (max-width: 768px) {
  /* 调整头部内边距 */
  .about-header {
    padding: 40px 0; /* 减少上下内边距 */
  }
  
  /* 调整标题字体大小 */
  .about-title {
    font-size: 32px; /* 减小字体大小 */
  }
  
  /* 调整板块标题字体大小 */
  .section-title {
    font-size: 24px; /* 减小字体大小 */
  }
  
  /* 调整内容内边距 */
  .intro-content,
  .protection-content,
  .contact-content {
    padding: 20px; /* 减少内边距 */
  }
  
  /* 调整使命内容布局 */
  .mission-content {
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
  }
  
  /* 调整使命项宽度 */
  .mission-item {
    max-width: 100%; /* 宽度100% */
  }
}

/* 加载状态 */
.loading {
  text-align: center; /* 文本居中 */
  padding: 60px 0; /* 上下内边距 */
  color: var(--muted); /* 灰色文本 */
  font-size: 16px; /* 字体大小 */
}

/* 分页样式 */
.pagination {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  gap: 8px; /* 按钮间距 */
  margin-top: 40px; /* 顶部边距 */
}

/* 分页按钮样式 */
.pagination .btn {
  min-width: 40px; /* 最小宽度 */
  height: 40px; /* 高度 */
  border-radius: 8px; /* 圆角效果 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 分页按钮激活状态 */
.pagination .btn.active {
  background: var(--accent); /* 橙色背景 */
  color: white; /* 白色文本 */
  border-color: var(--accent); /* 橙色边框 */
}

/* 小桌面断点：调整信息栏布局 */
@media (max-width: 1200px) {
  /* 调整信息栏内容间距 */
  .info-bar-content {
    gap: 30px; /* 减少间距 */
  }
  
  /* 调整联系信息宽度 */
  .info-bar-contact {
    min-width: 300px; /* 最小宽度 */
  }
  
  /* 调整联系信息字体大小 */
  .contact-item {
    font-size: 13px; /* 减小字体大小 */
  }
}

/* 平板断点：信息栏改为垂直布局 */
@media (max-width: 980px) {
  /* 信息栏垂直布局 */
  .info-bar-content {
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    text-align: center; /* 文本居中 */
    gap: 30px; /* 间距 */
    flex-wrap: wrap; /* 平板端允许换行 */
  }
  
  /* 调整logo容器对齐 */
  .info-bar-logo {
    justify-content: center; /* 水平居中 */
  }
  
  /* 调整二维码容器对齐 */
  .info-bar-qr {
    justify-content: center; /* 水平居中 */
    gap: 30px; /* 二维码间距 */
  }
  
  /* 调整二维码占位符大小 */
  .qr-placeholder {
    width: 80px; /* 宽度 */
    height: 80px; /* 高度 */
  }
  
  /* 调整二维码大小 */
  .qr-code {
    width: 80px; /* 宽度 */
    height: 80px; /* 高度 */
  }
  
  /* 调整联系信息对齐 */
  .info-bar-contact {
    align-items: center; /* 水平居中 */
    width: 100%; /* 宽度100% */
  }
  
  /* 调整联系信息项对齐 */
  .contact-item {
    justify-content: center; /* 水平居中 */
    width: 100%;
    text-align: center;
  }
}

/* 移动端断点：隐藏中间导航链接（避免拥挤），内容改为单列 */
@media (max-width: 640px) {
  /* 隐藏导航链接 */
  .nav-links {
    display: none; /* 隐藏 */
  }
  
  /* 显示汉堡菜单按钮 */
  .hamburger {
    display: flex;
  }
  
  /* 隐藏导航右侧区域 */
  .nav-right {
    display: none;
  }
  
  /* 导航栏高度调整 */
  .nav-inner {
    height: 70px;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
  }
  
  /* 品牌区域调整 */
  .brand {
    height: auto;
  }
  
  /* 移动端信息栏调整 */
  .info-bar-content {
    gap: 20px; /* 减少间距 */
  }
  
  /* 调整logo大小 */
  .info-bar-logo .logo {
    width: 60px; /* 宽度 */
    height: 60px; /* 高度 */
    object-fit: contain; /* 保持比例 */
    display: block;
  }
  
  /* 调整品牌标题字体大小 */
  .info-bar-logo .brand-title strong {
    font-size: 16px; /* 减小字体大小 */
  }
  
  /* 调整品牌副标题字体大小 */
  .info-bar-logo .brand-title span {
    font-size: 12px; /* 减小字体大小 */
  }
  
  /* 调整二维码容器 */
  .info-bar-qr {
    flex-wrap: wrap; /* 自动换行 */
    justify-content: center; /* 水平居中 */
    gap: 20px; /* 二维码间距 */
  }
  
  /* 调整二维码项 */
  .qr-item {
    flex: 1 1 30%; /* 弹性布局 */
    max-width: 120px; /* 最大宽度 */
  }
  
  /* 调整二维码占位符大小 */
  .qr-placeholder {
    width: 60px; /* 宽度 */
    height: 60px; /* 高度 */
    font-size: 10px; /* 字体大小 */
  }
  
  /* 调整二维码大小 */
  .qr-code {
    width: 60px; /* 宽度 */
    height: 60px; /* 高度 */
  }
  
  /* 调整二维码标签字体大小 */
  .qr-label {
    font-size: 12px; /* 减小字体大小 */
  }
  
  /* 调整联系信息字体大小 */
  .contact-item {
    font-size: 12px; /* 减小字体大小 */
  }
  
  /* 调整联系信息宽度 */
  .info-bar-contact {
    min-width: 250px; /* 最小宽度 */
  }
}

/* 文件管理页面站点筛选样式 */
.category-selector {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.selector-label {
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

.selector-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.selector-btn {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #4b5563;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.selector-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.selector-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.selector-btn.active:hover {
  background: #2563eb;
  border-color: #2563eb;
}

/* 站点标签样式 */
.site-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.site-badge.cn {
  background: #dbeafe;
  color: #1d4ed8;
}

.site-badge.en {
  background: #dcfce7;
  color: #15803d;
}

/* 统计页面站点卡片样式 */
.site-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.site-card.cn {
  border-left: 4px solid #3b82f6;
}

.site-card.en {
  border-left: 4px solid #10b981;
}