/* 定义CSS变量，用于实现主题切换（浅色/深色模式） */
    :root {
      /* 浅色主题变量定义 */
      --bg-color: #FFFFFF; /* 页面背景色 */
      --text-color: #000000; /* 文本颜色 */
      --card-bg: #FFFFFF; /* 卡片背景色 */
      --section-bg: #f9f9f9; /* 部分区域背景色（如作品区） */
      --border-color: #000000; /* 边框、按钮颜色 */
      --card-shadow: rgba(0,0,0,0.08); /* 卡片阴影 */
      --hero-bg: url('./bj_w.png'); /* 深色主题首屏背景图 */
      --logo-url: url('./KHZ_B.png'); /* 浅色主题logo图片 */
    }

    /* 深色主题变量定义，当html元素具有data-theme="dark"属性时应用 */
    [data-theme="dark"] {
      /* 深色主题变量覆盖 */
      --bg-color: #121212; /* 深色背景 */
      --text-color: #FFFFFF; /* 浅色文本 */
      --card-bg: #1e1e1e; /* 深色卡片背景 */
      --section-bg: #181818; /* 深色区域背景 */
      --border-color: #FFFFFF; /* 浅色边框 */
      --card-shadow: rgba(0,0,0,0.4); /* 深色阴影 */
      --hero-bg: url('./bj_b.jpg'); /* 深色主题首屏背景图 */
      --logo-url: url('./KHZ_W.png'); /* 深色主题logo */
    }

    /* 通用重置和基础样式 */
    *, *::before, *::after { 
      -webkit-tap-highlight-color: transparent;
      outline: none;
      box-sizing: border-box;
     } /* 盒模型设置为border-box，便于尺寸控制 */
    /* 页面基础样式 */
    body, html { 
      margin: 0; padding: 0; /* 移除默认边距和填充 */
      font-family: MiSans, sans-serif; /* 字体设置，优先使用MiSans字体 */
      background: var(--bg-color); /* 使用CSS变量设置背景色 */
      color: var(--text-color); /* 使用CSS变量设置文本颜色 */
      transition: background-color 0.3s, color 0.3s; /* 背景色和文字颜色切换时的过渡动画 */
      scroll-behavior: smooth; /* 启用平滑滚动 */
    }

    /* 顶部导航栏样式 */
    .header {
      position: fixed;
      z-index: 1;
      width: 100%; height: 80px; /* 固定高度 */
      display: flex; justify-content: space-between; align-items: center; /* 两端对齐，垂直居中 */
      padding: 0 40px; /* 左右内边距 */
    }

    /* Logo容器样式 */
    .logo-container {
      width: 48px; height: 48px; /* 固定尺寸 */
      background-image: var(--logo-url); /* 使用CSS变量设置logo图片 */
      background-size: contain; /* 背景图完整显示在容器内 */
      background-repeat: no-repeat; /* 不重复 */
      background-position: center; /* 居中 */
    }

    /* 导航项通用样式 */
    .nav-item { cursor: pointer; transition: opacity 0.2s; } /* 鼠标指针为手型，悬停时有透明度变化 */
    .nav-item:hover { opacity: 0.6; } /* 悬停时降低不透明度 */

    /* 主题切换按钮容器 */
    #theme-toggle-wrapper { display: flex; align-items: center; cursor: pointer; } /* 水平排列，垂直居中，手型指针 */

    /* 作品网格容器 */
    .grid-container {
      display: grid; /* 使用网格布局 */
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* 自适应列数，每列最小350px，最大1fr */
      gap: 48px; /* 网格项之间的间距 */
    }

    /* 卡片样式 */
    .card {
      background: var(--card-bg); /* 卡片背景色使用CSS变量 */
      border-radius: 16px; /* 圆角 */
      padding: 32px; /* 内边距 */
      box-shadow: 0px 4px 20px var(--card-shadow); /* 阴影使用CSS变量 */
      display: flex; flex-direction: column; gap: 16px; /* 垂直排列，子元素间距16px */
      cursor: pointer; /* 鼠标指针为手型 */
    }
    /* 卡片内容区域样式 */
    .card-content {
      font-size: 14px; line-height: 1.6; /* 字体大小和行高 */
      color: var(--text-color); opacity: 0.8; /* 文字颜色和透明度 */
      overflow: hidden; /* 隐藏超出部分 */
      display: -webkit-box; /* 使用-webkit-box布局，用于多行文本截断 */
      -webkit-line-clamp: 3; /* 限制显示3行 */
      -webkit-box-orient: vertical; /* 垂直方向排列 */
      height: 67.2px; min-height: 67.2px; /* 固定高度，与3行文本匹配 */
    }
    /* 卡片底部样式（包含日期和爱心图标） */
    .card-footer { 
      margin-top: auto; /* 自动上边距，将底部元素推到底部 */
      display: flex; justify-content: space-between; /* 两端对齐 */
      color: #999; font-size: 12px; /* 颜色和字体大小 */
    }

        /* --- 通用弹窗（Modal）样式 --- */
    /* 弹窗遮罩层 */
    .modal-overlay {
      position: fixed; /* 固定定位，覆盖整个视口 */
      top: 0; left: 0; width: 100%; height: 100%; /* 全屏 */
      background: rgba(0,0,0,0.5); /* 半透明黑色背景 */
      display: none; /* 默认隐藏 */
      justify-content: center; align-items: center; /* 水平垂直居中 */
      z-index: 1000; /* 较高层级，确保在最上层 */
      backdrop-filter: blur(4px); /* 背景模糊效果 */
    }
    /* 弹窗卡片样式 */
    .modal-card {
      background: var(--card-bg); color: var(--text-color); /* 使用CSS变量设置背景和文字颜色 */
      width: 90vw; max-width: 500px; max-height: 85vh; /* 最大宽度和高度限制 */
      overflow-y: auto; /* 内容超出时垂直滚动 */
      padding: 32px; /* 内边距 */
      border-radius: 16px; /* 圆角 */
      display: flex; flex-direction: column; gap: 20px; /* 垂直排列，子元素间距20px */
      box-shadow: 0 10px 40px rgba(0,0,0,0.2); /* 阴影 */
    }

    /* 输入框和文本域通用样式 */
    input[type="text"], textarea {
      padding: 12px; /* 内边距 */
      border: 1px solid rgba(128,128,128,0.2); /* 边框颜色 */
      border-radius: 8px; /* 圆角 */
      background: transparent; /* 透明背景 */
      color: var(--text-color); /* 文字颜色使用CSS变量 */
      font-family: inherit; /* 继承字体 */
      font-size: 14px; /* 字体大小 */
      transition: border-color 0.2s; /* 边框颜色过渡动画 */
    }

    /* 主要按钮样式（如提交按钮） */
    .btn-main {
      padding: 14px; /* 内边距 */
      background: var(--border-color); /* 背景色使用边框颜色变量 */
      color: var(--bg-color); /* 文字颜色使用背景颜色变量 */
      border: none; border-radius: 8px; /* 无边框，圆角 */
      cursor: pointer; font-weight: bold; font-size: 16px; /* 手型指针，字体加粗和大小 */
    }

    /* Lucide图标通用样式 */
    .lucide { 
      width: 18px; height: 18px; /* 图标尺寸 */
      vertical-align: middle; /* 垂直对齐方式 */
      cursor: pointer; /* 鼠标指针为手型 */
    }

    /* 输入框和文本域获取焦点时的样式 */
    input:focus, textarea:focus { 
      outline: none; /* 移除默认轮廓线 */
      border-color: var(--border-color); /* 边框颜色使用CSS变量 */
    }

    /* 表单样式 */
    /* 输入组（标签+输入框） */
    .input-group { display: flex; flex-direction: column; gap: 8px; } /* 垂直排列，间距8px */
    .input-group label { font-size: 12px; opacity: 0.7; } /* 标签样式 */


    /* --- 全屏文章详情样式 --- */
    #full-article-detail {
      position: fixed; /* 固定定位，覆盖整个视口 */
      top: 0; left: 0; width: 100%; height: 100%; /* 全屏 */
      background: var(--bg-color); color: var(--text-color); /* 使用CSS变量 */
      z-index: 2000; /* 层级比弹窗更高 */
      display: none; /* 默认隐藏 */
      flex-direction: column; /* 垂直排列 */
      padding: 40px; /* 内边距 */
      overflow-y: auto; /* 垂直滚动 */
    }
    /* 全屏详情页关闭按钮样式 */
    .detail-close-btn { 
      position: sticky; /* 粘性定位，滚动时保持可见 */
      top: 0; /* 距离顶部0 */
      align-self: flex-end; /* 自身右对齐 */
      cursor: pointer; /* 鼠标指针为手型 */
      padding: 10px; /* 内边距 */
    }
    /* 详情内容容器 */
    .detail-body-container { 
      max-width: 800px; /* 最大宽度限制 */
      margin: 40px auto; /* 上下外边距40px，水平居中 */
      width: 100%; /* 宽度100% */
    }
    /* 详情页标题样式 */
    .detail-display-title { 
      font-size: 32px; font-weight: bold; /* 字体大小和加粗 */
      margin-bottom: 24px; /* 下边距 */
    }
    /* 详情页内容样式 */
    .detail-display-content { 
      font-size: 18px; line-height: 1.8; /* 字体大小和行高 */
      white-space: pre-wrap; /* 保留空白和换行 */
      opacity: 0.9; /* 透明度 */
    }

        /* 详情页信息项样式 */
    .info-item { margin-bottom: 20px; line-height: 1.6; } /* 下边距和行高 */
    .info-item h4 { 
      margin: 0 0 8px 0; /* 外边距 */
      border-left: 3px solid var(--border-color); /* 左侧边框，使用CSS变量 */
      padding-left: 8px; /* 左侧内边距 */
    }
    
    /* 页脚居中与链接样式 */
.footer {
  background-color: var(--section-bg);   /* 浅灰色背景，柔和美观 */
  padding: 2rem 0;             /* 上下内边距，增加呼吸空间 */
  margin-top: auto;            /* 配合 body flex 布局，可将页脚推至底部（可选） */
}

/* 容器：限制最大宽度并自动水平居中 */
.container {
  width: 100%;
  max-width: 1200px;           /* 内容最大宽度，大屏幕舒适阅读 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* 核心：flex 列向 + 交叉轴居中 → 实现完美水平居中 */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;         /* 让每个子项（版权段、链接组）在水平方向上居中 */
  gap: 0.75rem;               /* 版权与链接组之间的间距 */
}

/* 版权文字：保证多行时也居中（可选，单行无影响） */
.footer-content p {
  text-align: center;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-color);
}

/* 链接组：弹性布局 + 居中换行，确保窄屏下依然居中 */
.footer-links {
  display: flex;
  gap: 1.5rem;                /* 链接之间的间距 */
  flex-wrap: wrap;            /* 小屏幕自动换行 */
  justify-content: center;    /* 换行后每行内容也居中 */
}

/* ★ 核心需求：a 标签保持蓝色链接样式（未访问、已访问、悬停、激活均为蓝色） */
.footer a,
.footer a:link,
.footer a:visited,
.footer a:hover,
.footer a:active {
  color: #0066cc;             /* 标准蓝色，更护眼且符合现代设计 */
  text-decoration: underline; /* 保留下划线，增强可识别性 */
  transition: color 0.2s ease;
}

/* 可选：悬停时稍微加深，保持蓝色调，交互反馈更友好 */
.footer a:hover {
  color: #004499;
  text-decoration: underline;
}

    /* 隐藏投稿弹窗的滚动条 */
#postModal .modal-card {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
#postModal .modal-card::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}


/* 响应式调整 */
@media (max-width: 425px) {
    .header {
      /*position: fixed;*/
      /*z-index: 1;*/
      /*width: 100%; height: 80px;  固定高度 
      display: flex; justify-content: space-between; align-items: center; /* 两端对齐，垂直居中 */
      padding: 0 14px; /* 左右内边距 */
    }
    
    .grid-container {
    grid-template-columns: 1fr; /* 单列，占满 */
    /*gap: 24px;*/
  }
}