/**
 * @file common.css
 * @description 子页面共用基础样式 / Shared base styles for sub-pages
 *
 * 包含全局重置、导航栏、移动端菜单等各页通用组件
 * Contains global reset, navbar, mobile menu, and other shared components
 *
 * 所有子页面（about/services/contact/query/404）都引用此文件
 * All sub-pages (about/services/contact/query/404) reference this file
 *
 * 首页 index.html 不加载此文件，它用 style.css + index.css
 * Homepage index.html does NOT load this; it uses style.css + index.css
 *
 * Style A: 科技棱角 / Tech Angular
 */

/* 全局盒模型重置 / Global box-model reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration:none;
  color:inherit;
  transition:color .3s;
}

/* ===== 顶部导航栏 / Top Navigation Bar ===== */
.nav {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:72px;
  background:#12121a;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  border-bottom:2px solid #3b82f6;
}

/* 导航内容容器，最大宽1100px / Nav content container, max-width 1100px */
.nav-inner {
  width:100%;
  max-width:1100px;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* 左上角品牌 LOGO / Top-left brand logo */
.nav-logo {
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-family:'JetBrains Mono','Noto Sans SC',monospace;
  font-size:20px;
  font-weight:700;
  color:#e2e8f0;
}

.nav-logo span {
  color:#3b82f6;
}

/* 导航菜单链接组 / Navigation menu links */
.nav-links {
  display:flex;
  gap:6px;
  list-style:none;
  font-size:13px;
  font-weight:500;
  letter-spacing:.03em;
}

.nav-links a {
  color:rgba(226,232,240,.55);
  padding:8px 14px;
  border-radius:2px;
  background:rgba(255,255,255,.03);
  transition:all .3s;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:'JetBrains Mono','Noto Sans SC',monospace;
}

.nav-links a:hover {
  background:rgba(59,130,246,.1);
  color:#e2e8f0;
}

/* 当前页面高亮 / Active page highlight */
.nav-links a.active {
  background:rgba(59,130,246,.2);
  color:#fff;
  font-weight:600;
  border-bottom:2px solid #3b82f6;
  box-shadow:0 2px 12px rgba(59,130,246,.25);
}

.nav-links a i {
  font-size:14px;
}

/* 汉堡按钮，仅移动端显示 / Hamburger button, mobile only */
.nav-mobile {
  display:none;
  background:none;
  border:none;
  font-size:20px;
  color:#e2e8f0;
  cursor:pointer;
}

/* ===== 移动端弹出菜单 / Mobile Slide-out Menu ===== */
.mobile-menu {
  display:none;
  position:fixed;
  inset:0;
  top:72px;
  background:rgba(10,10,15,.98);
  backdrop-filter:blur(20px);
  z-index:99;
  flex-direction:column;
  align-items:center;
  padding-top:48px;
  gap:12px;
}

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

.mobile-menu a {
  font-size:15px;
  color:rgba(226,232,240,.55);
  font-weight:500;
  padding:10px 24px;
  border-radius:2px;
  background:rgba(255,255,255,.03);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .3s;
  font-family:'JetBrains Mono','Noto Sans SC',monospace;
  border-left:2px solid transparent;
}

.mobile-menu a:hover {
  color:#e2e8f0;
  background:rgba(59,130,246,.1);
  border-left-color:#3b82f6;
}

.mobile-menu a.active {
  color:#fff;
  background:rgba(59,130,246,.2);
  border-left:2px solid #3b82f6;
  box-shadow:0 2px 12px rgba(59,130,246,.25);
}

::-webkit-scrollbar {
  width:8px;
}

::-webkit-scrollbar-track {
  background:#0a0a0f;
}

::-webkit-scrollbar-thumb {
  background:rgba(59,130,246,.3);
  border-radius:2px;
}

::-webkit-scrollbar-thumb:hover {
  background:rgba(59,130,246,.5);
}

/* 平滑滚动 / Smooth scrolling */
html {
  scrollbar-width:thin;
  scrollbar-color:rgba(59,130,246,.3) #0a0a0f;
}