/* 全局重置，初始化样式，确保一致的浏览器显示 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 让宽高包含内边距和边框 */
  font-family: "Segoe UI", sans-serif;
}

/* 页面基础布局 */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 禁止整个页面的滚动 */
}

body {
  color: #333;
  background: #f5f7fa;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 背景置底 */
  background: linear-gradient(to bottom, #f0f9ff, #d0e8ff); /* 默认背景 */
  background-size: cover;
  background-repeat: no-repeat;
}

/* 顶部导航 */
nav {
  background: #00bcd4;
  color: white;
  padding: 5px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 导航链接样式 */
nav a {
  margin-left: 20px;
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: opacity 0.3s;
}

/* 导航链接悬停效果 */
nav a:hover {
  opacity: 0.8;
}

.nav-links {
  flex-wrap: wrap;
}

/* Logo 和链接部分 */
.nav-left, .nav-right {
  display: flex;
  align-items: center;
  flex-direction: row; /* 横向排列 */
  flex-wrap: nowrap;   /* 不允许换行 */
}

.nav-right a {
  white-space: nowrap; /* 防止文字换行 */
}

/* Logo样式 */
.logo {
  font-size: 22px;
  font-weight: bold;
  margin-right: 30px;
  color: white;
}

/* 页脚 */
footer {
  width: 100%;
  flex-shrink: 0; /* 防止页脚被压缩 */
  text-align: center;
  padding: 10px;
  background: #eeeeee;
  font-size: 0.9em;
  color: #555;
}

main {
  flex: 1; /* 主体自动撑开 */
  display: flex;
  flex-direction: column;
}

/* 主体居中容器 */
.container {
  flex: 1; /* 内容区域撑开 */
  display: flex;            /* 启用 Flex 布局 */
  text-align: center; /* 确保所有内容（包括标题）居中 */
  flex-direction: column;
  overflow-y: auto; /* 允许内容滚动 */
}

/* 保证页面内容区域滚动 */
.content-wrapper {
  flex: 1; /* 内容区域撑开 */
  display: flex;
  max-width: 1000px;         /* 限制内容区域的最大宽度为 1000 像素 */
  margin: 0 auto;            /* 上下外边距为 0，左右自动（水平居中整个容器） */
  padding: 20px 20px;        /* 内边距，上下左右各 20 像素 */
  text-align: center;        /* 让容器内的文本及行内元素（包括标题）居中对齐 */
  display: inline-block;     /* 让容器的宽度根据内容自动决定，而不是占满整行 */
}

/* Hero 区 */
.hero {
  text-align: center;
  padding: 100px 20px 60px;
  background: linear-gradient(to right, #00bcd4, #00796b);
  color: white;
}

.hero h1 {
  font-size: 40px;
  margin-bottom: 15px;
}

.hero p {
  font-size: 20px;
  margin-bottom: 25px;
}

/* CTA 按钮样式 */
.cta-button {
  padding: 12px 24px;
  background-color: white;
  color: #00796b;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s, color 0.3s;
}

.cta-button:hover {
  background-color: #00796b;
  color: white;
}

/* 核心功能 */
.features {
  padding: 40px 20px;
  text-align: center;
}

.features h2 {
  font-size: 28px;
  margin-bottom: 30px;
}

.feature-list {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.feature-item {
  background: #ffffff;
  padding: 25px;
  width: 280px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
}

.feature-item h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #00796b;
}





/* 平台与网站介绍 */
.platform-intro {
  background: #f1f8e9; /* 淡绿色背景 */
  padding: 40px 20px;
  text-align: left;
  border-radius: 12px;
  margin: 0px auto;
  max-width: 900px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.platform-intro h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #33691e;
}

.platform-intro h3 {
  font-size: 20px;
  margin-top: 25px;
  margin-bottom: 10px;
  color: #558b2f;
}

.platform-intro p,
.platform-intro ul {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.platform-intro ul {
  padding-left: 20px;
  list-style-type: circle;
}

/* 软件与插件介绍 */
.software-plugin {
  background: #e8eaf6; /* 淡蓝紫背景 */
  padding: 40px 20px;
  text-align: left;
  border-radius: 12px;
  margin: 40px auto;
  max-width: 900px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.software-plugin h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #1a237e;
}

.software-plugin h3 {
  font-size: 20px;
  margin-top: 25px;
  margin-bottom: 10px;
  color: #3949ab;
}

.software-plugin p,
.software-plugin ul {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.software-plugin ul {
  padding-left: 20px;
  list-style-type: circle;
}





/* 下载区 */
.download {
  background: #e0f2f1;
  padding: 40px 20px;
  text-align: center;
}

.download h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

/* 动态新闻 */
.news {
  padding: 40px 20px;
  text-align: center;
}

.news h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.news ul {
  list-style: none;
  margin-top: 10px;
}

.news li {
  margin: 8px 0;
}

/* CTA底部引导 */
.cta-bottom {
  margin-top: auto;       /* 把它推到 main 底部 */
  text-align: center;
  padding: 40px 20px;
  background: #f1f8e9;
  font-size: 1em;
}

.cta-bottom a {
  color: #00796b;
  font-weight: bold;
  text-decoration: none;
}
/* 首页 */

/* 软件 */
/* Hero 区 */
.software-hero {
  background: linear-gradient(to right, #00bcd4, #00796b);
  color: white;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
}

/* 下载卡片区 */
.download-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 60px;
}

.download-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  width: 260px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.download-card h3 {
  margin-bottom: 10px;
  color: #00796b;
}

.btn-download {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 24px;
  background: linear-gradient(145deg, #00bfa5, #00796b);
  color: white;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-download::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.15);
  transform: rotate(45deg) translate(-100%, -100%);
  transition: all 0.5s ease;
}

.btn-download:hover {
  background: linear-gradient(145deg, #00e6c3, #004d40);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn-download:hover::after {
  transform: rotate(45deg) translate(0, 0);
}

.btn-source {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 24px;
  background: linear-gradient(145deg, #00bfa5, #00796b);
  color: white;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-source::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.15);
  transform: rotate(45deg) translate(-100%, -100%);
  transition: all 0.5s ease;
}

.btn-source:hover {
  background: linear-gradient(145deg, #00e6c3, #004d40);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn-source:hover::after {
  transform: rotate(45deg) translate(0, 0);
}

/* 更新日志 */
.changelog {
  list-style: none;
  margin-top: 10px;
  padding-left: 0;
}

.changelog li {
  margin: 8px 0;
}


.changelog-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 高宽比 */
  margin-top: 0px;
}

.changelog-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

/* 系统要求 */
.requirements-section {
  margin-bottom: 40px;
}

.requirements-section ul {
  list-style: none;
  margin-top: 20px;
  padding-left: 0;
}

.requirements-section li {
  margin: 8px 0;
}

/* 外层容器控制并排布局 */
.info-row {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* 控制每个区域的宽度（原样保留内部样式） */
.info-row > section {
  flex: 1;
  min-width: 280px;
}

/* 截图样式 */
.screenshot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-top: 40px;
}

.screenshot-grid img {
  width: auto;       /* 宽度填满屏幕或容器 */
  height: auto;      /* 高度按比例缩放 */
  max-width: 100%;   /* 防止超出容器 */
  display: block;    /* 居中 */
  margin: 0 auto;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.doc-section {
  margin-bottom: 10px; 
}

/* 快速入口 */
.doc-section a {
  color: #00796b;
  text-decoration: none;
  font-weight: bold;
}

.doc-section a:hover {
  text-decoration: underline;
}
/* 软件 */

/* 许可证页面 */
/* Hero */
.license-hero {
  background: linear-gradient(to right, #00bcd4, #00796b);
  color: white;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
}

/* 内容区 */
.license-section {
  margin-top: 40px;
  text-align: center;
}

.license-details {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: left; /* 强制左对齐 */
}

.license-details ul {
  list-style: none; /* 去掉默认黑点 */
  padding-left: 0;
  margin: 0;
}

.license-details li {
  margin: 16px 0;
  padding-left: 28px;
  position: relative;
  font-size: 15px;
  line-height: 1.6;
}

/* 自定义前置小图标（圆点/符号） */
.license-details li::before {
  content: "✔";  /* 你也可以换成 "🔑" "💻" "🧩" */
  position: absolute;
  left: 0;
  top: 0;
  color: #0078d7;  /* 主色调，蓝色更显眼 */
  font-weight: bold;
}

.license-details strong {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

.license-details p {
  margin: 6px 0 6px 1em; /* 二级内容缩进一点 */
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}


/* 卡片排列 */
.license-card-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.license-card {
  background: #ffffff;
  padding: 20px;
  width: 260px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 使用条款 */
.license-terms {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
}

.license-terms li {
  margin: 8px 0;
}

.license-terms li span {
  display: inline-block;
}
/* 许可证页面 */

/* 知识库页面 */
/* Hero */
.docs-hero {
  background: linear-gradient(to right, #00bcd4, #00796b);
  color: white;
  border-radius: 12px;
  padding: 20px 20px;
  text-align: center;
}

.search-box {
  padding: 10px;
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
}

/* === 搜索结果整体容器样式 === */
.search-card {
  padding: 10px;                        /* 内边距，确保内容不贴边 */
  background-color: #f9f9f9;           /* 背景浅灰 */
  border: 1px solid #ccc;              /* 灰色边框 */
  border-radius: 4px;                  /* 圆角边框 */
  margin-top: 20px;                    /* 与上方元素留间距 */
  
  max-height: 280px;                   /* 限制最大高度，避免撑满页面 */
  overflow-y: auto;                    /* 超出部分出现滚动条 */
}

/* === 每条搜索结果的样式块 === */
.result-item {
  margin-bottom: 12px;                 /* 与下一项的间距 */
  padding: 10px;                       /* 内容内边距 */
  border-bottom: 1px solid #eee;       /* 每项之间的下边线 */
  transition: background-color 0.2s;   /* 鼠标悬停背景色过渡效果 */
}

/* 鼠标悬停在某条结果时改变背景色 */
.result-item:hover {
  background-color: #f0f8ff;           /* 淡蓝色高亮 */
}

/* === 包裹标题的链接样式（去掉下划线、统一颜色） === */
.result-link {
  text-decoration: none;               /* 去掉超链接下划线 */
  color: #000;                         /* 链接默认颜色为黑色 */
}

/* === 搜索结果标题（链接中的 <h3>） === */
.result-link h3 {
  margin: 0;                           /* 去掉默认外边距 */
  font-size: 16px;                     /* 设置标题字号 */
  color: #333;                         /* 字体颜色偏深灰，易读 */
}

/* === 搜索结果正文（摘要部分） === */
.result-item p {
  margin: 4px 0 0;                     /* 顶部 4px 间距，底部无间距 */
  font-size: 16px;                     /* 字号稍小于标题 */
  color: #666;                         /* 字体颜色灰色，次要信息 */
}

/* 分类卡片 */
.docs-section {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.docs-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.docs-card {
  background: #fff;
  width: 340px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  text-align: left;
}

.docs-card h3 {
  margin-bottom: 10px;
  color: #00796b;
}

.docs-card p {
  font-size: 0.95em;
  margin-bottom: 10px;
  color: #444;
}

.docs-card a {
  color: #00796b;
  font-weight: bold;
  text-decoration: none;
}

.docs-card a:hover {
  text-decoration: underline;
}
/* 知识库页面 */

/* 社区页面 */
/* Hero */
.forum-hero {
  background: linear-gradient(to right, #00bcd4, #00796b);
  color: white;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
}

.forum-section {
  margin-top: 20px;
  text-align: center;
}

.forum-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.forum-card {
  background: white;
  padding: 20px;
  width: 260px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  text-align: left;
}

.forum-card h3 {
  margin-bottom: 8px;
  color: #00796b;
}

.forum-card p {
  font-size: 0.95em;
  margin-bottom: 8px;
}

.forum-card span {
  font-size: 0.85em;
  color: #777;
}

/* 话题列表 */
.topic-list {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 20px auto;
  text-align: left;
}

.topic-list li {
  margin: 10px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.topic-list a {
  text-decoration: none;
  color: #00796b;
  font-weight: bold;
}

.topic-list span {
  font-size: 0.85em;
  color: #888;
  margin-left: 10px;
}
/* 社区页面 */

/* 默认 sidebar 显示 */
.sidebar {
  width: auto; /* 自动宽度，基于内容的长度 */
  min-width: 220px; /* 设置最小宽度 */
  transition: transform 0.3s ease;
  position: relative;
  padding: 20px;
  background-color: #f8f9fa; /* 给 sidebar 添加背景色 */
  box-sizing: border-box;
  overflow-y: auto;
}

/* 移动端 */
@media (max-width: 768px) {
  .sidebar {
    position: absolute; /* 使用绝对定位 */
    top: 0; /* 固定在父容器顶部 */
    left: 0; /* 固定在父容器左侧 */
    height: 100%; /* 高度填满父容器 */
    transform: translateX(0); /* 初始时显示菜单栏 */
    z-index: 1000;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }

  .sidebar.closed {
    transform: translateX(-100%); /* 隐藏菜单栏 */
  }

  .docs-layout {
    position: relative; 
    display: flex;
    flex-direction: column;
    height: 100vh; /* 使文档区域填满屏幕 */
  }

  .content-area {
    flex: 1;
    padding: 20px;
  }

  .main-content {
    display: flex;
  }
}

/* 桌面端：内容区域的最大宽度 */
.docs-layout {
  display: flex;
  height: 100vh;
}

.content-area {
  flex: 1;
  padding: 20px;
  max-width: 100%;  /* 最大宽度 */
  box-sizing: border-box;
  background-color: #ffffff;
  overflow-y: auto;
}

.sidebar {
  min-width: 220px;
  width: auto;
  background-color: #f8f9fa;
  padding: 20px;
}

.sidebar ul {
  list-style: none;
  padding-left: 0;
}

.sidebar li {
  margin-bottom: 10px;
}

.sidebar a {
  text-decoration: none;
  color: #007bff;
}

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

.sidebar a.active {
  font-weight: bold;
  color: #007bff;
}

/* 忘记密码、保持登录部分 */
.form-aux {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  margin-top: 10px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 5px; /* 控制复选框与文字的间距 */
  white-space: nowrap; /* 防止文字换行 */ 
}

.remember-me input[type="checkbox"] {
  width: 16px;           /* 与文字高度接近 */
  height: 16px;
  margin: 0;             /* 移除默认外边距 */
  vertical-align: middle;
}

.form-aux a {
  color: #00796b;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: bold; /* 加粗文字 */
}

.form-aux a:hover {
  color: #007bff;
}
/* 忘记密码、保持登录部分 */


/* 商店 */
/* Hero 区 */
.store-hero {
  background: linear-gradient(to right, #00bcd4, #00796b);
  color: white;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
}

/* Hero 搜索 */
.hero-search {
  width: 100%;
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-search input,
.hero-search select {
   flex: 1;               /* 宽度自动填满父容器 */
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.hero-search input:focus,
.hero-search select:focus {
  outline: none;
  border-color: #00bcd4;
  box-shadow: 0 0 5px rgba(0,188,212,0.5);
}

/* 插件网格外层容器 */
.plugin-section {
  max-width: 1200px;
  margin: 20px auto;
  padding: 10px;
}

.plugin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.plugin-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}

.plugin-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.plugin-header {
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px;
  border-bottom: 1px solid #eee;
  background-color: #e0f7fa; /* 头部背景色 */
}

.plugin-header h3 {
  flex: 0;                  /* 宽度根据内容自适应 */
  text-align: left;
  font-size: 18px;
  margin: 0;                /* 紧贴左侧 */
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.plugin-header img {
  position: absolute;
  left: 50%;                
  transform: translateX(-50%);
  object-fit: cover;      /* 可选，保持图片完整显示 */
  border-radius: 0px;
}

/* 公共状态样式 */
.status {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 16px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

/* 免费状态 */
.status.free {
  background: linear-gradient(45deg, #4caf50, #81c784); /* 渐变绿 */
  border: 1px solid #2e7d32;
}

/* 付费状态 */
.status.paid {
  background: linear-gradient(45deg, #ff9800, #ffb74d); /* 渐变橙金 */
  border: 1px solid #f57c00;
}



.plugin-info {
  padding: 10px 15px;
  font-size: 14px;
  color: #555;
  flex-grow: 1;
}

.plugin-actions {
  display: flex;
  justify-content: space-between; /* 左右分布 */
  align-items: flex-end;          /* 让按钮靠底部对齐 */
  padding: 10px 15px;
  border-top: 1px solid #eee;
  gap: 10px;                      /* 按钮间距 */
}

.plugin-actions a {
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  background-color: #007bff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  transition: background-color 0.2s;
}

.plugin-actions a.btn-buy {
  background-color: #ff9800;
}

.plugin-actions a:hover {
  opacity: 0.85;
}

.plugin-actions a.btn-download:only-child {
  margin-left: auto; /* 单独下载按钮靠右 */
}



.plugin-actions {
  display: flex;
  align-items: center;
  gap: 10px; /* 控制间距 */
}

.plugin-price {
  font-weight: bold;
  color: #ff9800;
}



.icp-link {
  color: inherit;          /* 和前面的文字一样颜色 */
  text-decoration: none;   /* 去掉默认的下划线 */
  transition: color 0.3s;  /* 平滑过渡效果，可选 */
}
 
.icp-link:hover {
  color: blue;             /* 鼠标悬停时变蓝色 */
  text-decoration: underline; /* 鼠标悬停时出现下划线 */
}