/* --- Modern Dark Theme with Blue Accent --- */
:root {
  --bg-main: #1d1d1f; /* 主背景: 近似黑色的深灰 */
  --bg-sidebar: #2c2c2e; /* 侧边栏和Header: 深灰色 */
  --bg-card: #2c2c2e; /* 卡片背景: 与侧边栏一致，保持统一 */
  --bg-card-hover: #3a3a3c; /* 卡片/项目悬停: 稍亮的灰色 */
  --border-color: #444446; /* 边框: 中度灰色，用于分割 */
  --text-primary: #f5f5f7; /* 主要文字: 苹果风格的灰白色 */
  --text-secondary: #8d8d93; /* 次要文字: 中度亮灰色 */
  --text-active: #ffffff; /* 激活文字: 纯白 */
  --accent-color: #0a84ff; /* 强调色: 鲜艳的蓝色 */
  --shadow-color: rgba(0, 0, 0, 0.3) 0px 8px 24px; /* 更深邃的阴影 */
}
/* --- Light Theme (淡蓝色马卡龙配色) --- */
body.light-theme {
  --bg-main: #f0f4f8; /* 主背景: 淡蓝灰色 */
  --bg-sidebar: #ffffff; /* 侧边栏和Header: 纯白 */
  --bg-card: #ffffff; /* 卡片背景: 纯白 */
  --bg-card-hover: #e8f2f7; /* 卡片悬停: 淡蓝色 */
  --border-color: #d4e2ed; /* 边框: 柔和的蓝灰色 */
  --text-primary: #2c3e50; /* 主要文字: 深蓝灰色 */
  --text-secondary: #7b8fa3; /* 次要文字: 中度蓝灰色 */
  --text-active: #1a365d; /* 激活文字: 深蓝色 */
  --accent-color: #5ca3e6; /* 强调色: 马卡龙蓝色 */
  --shadow-color: rgba(92, 163, 230, 0.15) 0px 8px 24px; /* 柔和的蓝色阴影 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-size: 14px;
}
/* --- Dark Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #666;
}
.app-layout {
  display: flex;
  height: 100vh;
}

/* --- 左侧导航栏 --- */
.sidebar {
  width: 240px;
  height: 100vh;
  background-color: var(--bg-sidebar);
  padding: 20px 10px;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  z-index: 20;
}
.logo {
  display: flex;
  align-items: center;
  padding: 0 10px 20px 10px;
  font-size: 18px;
  font-weight: bold;
}
.logo img {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 8px;
}
.sidebar-nav {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 5px;
}
.sidebar-nav ul {
  list-style-type: none;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
}
.sidebar-nav a.active {
  background-color: var(--accent-color);
  color: var(--text-active);
}
.sidebar-nav a:hover {
  background-color: var(--bg-card-hover);
  color: var(--text-primary);
}
.sidebar-nav svg {
  margin-right: 15px;
  flex-shrink: 0;
}

/* START: 优化后的二级菜单样式 */
.sidebar-submenu {
  list-style: none;
  padding-left: 10px;
  overflow: hidden;
  max-height: 0; /* 核心：默认通过最大高度为0来隐藏 */
  transition: max-height 0.4s ease-in-out; /* 更平滑的动画效果 */
}

/* 当父级 li.has-submenu 拥有 active 类时，展开二级菜单 */
li.has-submenu.active > .sidebar-submenu {
  /* --- FIX: 增加最大高度以容纳“机械选型”下的所有子项 --- */
  max-height: 1000px; /* 展开：设置一个足够大的高度 (原500px太小) */
}

/* --- 二级菜单链接的专属样式 --- */
.sidebar-submenu a {
  padding-left: 50px; /* 关键：增加左内边距，实现视觉缩进 */
  font-size: 13px; /* 关键：字号比一级菜单小 */
  font-weight: 400; /* 字体更细 */
  color: var(--text-secondary); /* 使用次要文字颜色 */
  background-color: transparent;
}

/* 二级菜单链接的激活状态 */
.sidebar-submenu a.active {
  color: var(--text-primary); /* 激活时文字变亮 */
  font-weight: 600; /* 字体加粗 */
  background-color: rgba(
    255,
    255,
    255,
    0.05
  ); /* 用一个非常浅的、半透明的白色背景来表示选中 */
}

/* 二级菜单链接的悬停状态 */
.sidebar-submenu a:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.08);
}
/* END: 优化后的二级菜单样式 */

/* --- 主内容区和Header样式 --- */
.main-content {
  flex-grow: 1;
  padding: 0 40px 25px 40px;
  overflow-y: auto;
  height: 100vh;
  background-color: var(--bg-main);
}
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-color);
  padding: 15px 40px;
  margin: 0 -40px;
}
.top-nav a,
.header-actions a {
  color: var(--text-secondary);
  margin: 0 15px;
  font-weight: 500;
  transition: color 0.2s ease;
  text-decoration: none;
}
.top-nav a:hover,
.header-actions a:hover,
.header-actions .search-icon:hover {
  color: var(--text-primary);
}
.top-nav a.active {
  color: var(--text-primary);
}

/* --- 内容区样式 --- */
.category:first-of-type {
  margin-top: 30px;
}
.category {
  margin-bottom: 40px;
}
.category-title {
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}
.subcategory-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}
.subcategory-nav a {
  text-decoration: none;
  color: var(--text-secondary);
  padding: 5px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.05);
}
.subcategory-nav a:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.1);
}
.subcategory-nav a.active {
  color: var(--text-active);
  background-color: var(--accent-color);
}
.subcategory-block {
  display: none;
}
.subcategory-block.active {
  display: block;
}

/* --- 新增：顶部横幅广告样式 --- */
.ad-banner-top {
  margin: 30px 0; /* 与上下内容保持间距 */
  text-align: center; /* 图片居中 */
}
.ad-banner-top img {
  max-width: 100%; /* 响应式，确保在小屏幕上不会超出边界 */
  height: auto;
  border-radius: 8px; /* 轻微的圆角，使其更融入设计 */
  border: 1px solid var(--border-color);
}

/* --- 卡片样式 --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.link-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 18px;
  background-color: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition: all 0.25s ease;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  opacity: 0;
}
.link-card.is-visible {
  animation: fadeInUp 0.5s ease-out forwards;
}
.link-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-color);
  border-color: var(--accent-color);
  background-color: var(--bg-card-hover);
}
.card-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  margin-right: 15px;
}
.card-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: #fff; /* 确保favicon背景是白色 */
}
/* --- 更新后的卡片文本样式 --- */
.card-text {
    flex-grow: 1;
    display: flex; /* 使用flex布局来更好地控制内部元素 */
    flex-direction: column;
    justify-content: center; /* 垂直居中对齐文本内容 */
    min-width: 0; /* 修复flex布局中 ellipsis 不生效的问题 */
}

.card-text h3.card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px; /* 标题和描述之间的间距 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-text p.card-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px; /* 描述和URL之间的间距 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4; /* 保证行高一致性 */
}

.card-text p.card-url {
    font-size: 12px; /* 让URL字号更小，作为辅助信息 */
    color: var(--text-secondary);
    opacity: 0.6; /* 降低URL的透明度，使其更不显眼 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-arrow {
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: bold;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.link-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --- FAB 悬浮按钮 --- */
.fab-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
}
.fab-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.fab-button:hover {
  background-color: var(--accent-color);
  color: white;
  transform: scale(1.1);
  border-color: transparent;
}
#back-to-top {
  display: none;
}

/* --- 新增：侧边栏广告样式 --- */
.ad-sidebar {
  margin-top: auto; /* 关键！将它推到侧边栏最底部 */
  padding: 20px 15px;
}
.ad-sidebar a {
  display: block;
  background-color: rgba(0, 0, 0, 0.2); /* 与背景略有区分的深色 */
  border-radius: 8px;
  padding: 15px;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.ad-sidebar a:hover {
  background-color: rgba(0, 0, 0, 0.3);
  transform: scale(1.03);
  color: var(--text-primary);
}
.ad-sidebar img {
  max-width: 50px; /* 控制小图标大小 */
  margin-bottom: 10px;
}
.ad-sidebar p {
  font-size: 13px;
  line-height: 1.5;
}

/* --- 新增：广告卡片的特殊样式 (最终版) --- */
.link-card.ad-card {
  position: relative;
}
.ad-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background-color: #ff9f43; /* 柔和的橙色，在暗色背景下很醒目 */
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
/* --- 联系站长 悬浮提示框样式 --- */

/* 1. 提高整个头部的层级，确保它在最上层 (关键修正) */
.main-header {
  z-index: 30 !important; /* 原为10，提高到30，高于侧边栏的20，确保绝对置顶 */
}

/* 2. 让链接本身成为定位的“父容器” */
#contact-link01 {
  position: relative; /* 必不可少，作为::after伪元素的定位锚点 */
}

/* 3. 使用 ::after 伪元素创建提示框 */
#contact-link01:after {
  /* --- 提示框内容 --- */
  content: "微信: zhaotaidong \A邮箱: 616218240@qq.com";
  white-space: pre; /* 这行是实现换行的关键 */

  /* --- 外观和定位 --- */
  position: absolute;
  bottom: -75px; /* 定位在链接下方，使用负的bottom值更可靠 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */

  background-color: #333; /* 提示框背景色 */
  color: #fff; /* 文字颜色 */
  padding: 10px 15px; /* 内边距 */
  border-radius: 6px; /* 圆角 */
  font-size: 14px;
  min-width: 220px; /* 最小宽度，防止内容挤压 */
  text-align: left; /* 文本左对齐 */
  line-height: 1.6; /* 增加行高，更易读 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

  /* --- 默认隐藏 --- */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 防止鼠标事件穿透 */
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 4. 鼠标悬停时显示提示框 */
#contact-link01:hover::after {
  opacity: 1;
  visibility: visible;
}

/* --- 联系方式图片弹窗样式 --- */

/* 1. 关键：确保头部允许内容溢出 */
.main-header {
  overflow: visible !important;
  z-index: 30 !important;
}

/* 2. 图片弹窗 (#contact-popup) 的样式 */
#contact-popup {
  position: absolute;
  top: 130%; /* 定位在容器下方 */
  left: 50%;
  transform: translateX(-50%);

  background-color: #ffffff; /* 图片弹窗建议用白色背景，让二维码更清晰 */
  color: #333; /* 弹窗内的文字用深色 */
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 100;

  /* 布局和内容样式 */
  width: 200px; /* 设置一个合适的宽度 */
  text-align: center; /* 让内部内容居中 */
  line-height: 1.5;
}

#contact-popup p {
  font-size: 14px;
  margin-bottom: 10px; /* 让文字和图片之间有间距 */
}

/* 最后一个p标签不需要下边距 */
#contact-popup p:last-of-type {
  margin-bottom: 0;
}

#contact-popup img {
  display: block; /* 确保图片是块级元素，方便居中和设置边距 */
  margin: 0 auto 15px auto; /* 上下边距15px，左右自动居中 */
}

/* --- 顶部提交网站链接样式 --- */
.submit-link-top {
    color: var(--accent-color); /* 使用主题的强调色 */
    font-weight: 500;
    background-color: rgba(10, 132, 255, 0.1); /* 添加一个淡淡的背景色 */
    padding: 4px 10px;
    border-radius: 6px;
    margin-left: 8px; /* 和“关于本站”拉开一点距离 */
}

.submit-link-top:hover {
    background-color: rgba(10, 132, 255, 0.2); /* 悬停时背景色加深 */
    color: var(--accent-color); /* 保持颜色不变 */
}
/* --- 日间模式配色 --- */
body.light-theme {
  --bg-main: #f0f4f8;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #e8f2f7;
  --border-color: #d4e2ed;
  --text-primary: #2c3e50;
  --text-secondary: #7b8fa3;
  --text-active: #1a365d;
  --accent-color: #5ca3e6;
  --shadow-color: rgba(92, 163, 230, 0.15) 0px 8px 24px;
}

/* --- 下拉菜单样式 --- */
.dropdown-container {
    position: relative;
    display: inline-block;
    margin: 0 15px;
}

.dropdown-trigger {
    color: var(--text-secondary);
    font-weight: 500;
    transition: color 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.dropdown-trigger:hover {
    color: var(--text-primary);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 140px;
    box-shadow: var(--shadow-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

.dropdown-container:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    margin: 0;
}

.dropdown-menu a:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

/* --- 主题切换按钮样式 --- */
.theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    border-radius: 6px;
}

.theme-toggle-btn:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

body.light-theme .theme-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 默认显示月亮图标(夜间模式) */
.sun-icon {
    display: none;
}

.moon-icon {
    display: block;
}

/* 日间模式显示太阳图标 */
body.light-theme .sun-icon {
    display: block;
}

body.light-theme .moon-icon {
    display: none;
}