/* 公共导航栏样式 - 全局统一（垂直排列+字体居中版） */
.navbar {
  /* 宽度调整：垂直导航固定宽度，适配内容 */
  width: 200px; 
  max-width: 200px; /* 覆盖原有最大宽度，适配垂直布局 */
  margin: 0;        /* 取消水平居中（垂直导航通常贴边） */
  
  /* 高度调整：取消固定高度，适配垂直内容 */
  height: auto;
  line-height: normal; /* 取消行高，改用内边距控制垂直间距 */
  
  /* 布局调整：flex垂直排列 + 内容居中 */
  display: flex;
  flex-direction: column; /* 核心：垂直排列 */
  align-items: center;    /* 子元素（logo/菜单）水平居中 */
  justify-content: flex-start; /* 整体从顶部开始排列 */
  
  /* 配色保留 */
  background-color: #2c3e50;
  color: #ffffff;
  
  /* 内边距调整：垂直布局更合理 */
  padding: 16px 0; /* 左右0，上下16px，避免居中偏移 */
  
  /* 其他基础样式保留 */
  box-sizing: border-box;
  position: relative;
  top: 0;
  left: 0;
}

/* 导航菜单样式统一（垂直+字体居中） */
.navbar .nav-menu {
  display: flex;
  flex-direction: column; /* 菜单项垂直排列 */
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%; /* 菜单占满导航栏宽度 */
  margin-top: 20px; /* 与logo拉开间距 */
  align-items: center; /* 菜单项文字水平居中 */
}

.navbar .nav-menu li {
  margin: 8px 0; /* 垂直间距，取消水平间距 */
  width: 100%; /* 菜单项占满宽度，保证点击区域 */
  text-align: center; /* 文字强制居中（兜底） */
}

.navbar .nav-menu a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s;
  display: block; /* 点击区域占满菜单项 */
  padding: 8px 0; /* 增加点击区域高度 */
  text-align: center; /* 链接文字居中（双重保障） */
}

.navbar .nav-menu a:hover {
  color: #3498db;
}

/* 响应式适配（小屏+居中） */
@media (max-width: 768px) {
  .navbar {
    padding: 8px 0; /* 小屏上下内边距缩小 */
    width: 100%; /* 小屏占满宽度，适配移动端 */
    max-width: 100%; /* 覆盖最大宽度 */
  }
  .navbar .nav-menu li {
    margin: 6px 0;
  }
  .navbar .nav-menu a {
    font-size: 13px;
    padding: 6px 0;
  }
}