body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at center,
    #0a0a0a 0%,
    #000000 100%);
  font-family: "JetBrains Mono", monospace;
  color: #e0e0e0;
}

/* 主框架 */
.nav-frame {
  padding: 60px;
}

/* 标题 */
.nav-title {
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.15em;
  color: #ff5533;
  text-shadow:
    0 0 12px rgba(255, 80, 40, 0.8),
    0 0 24px rgba(255, 120, 60, 0.6);
}

.nav-sub {
  margin-top: 6px;
  font-size: 14px;
  color: #ffaa66;
  opacity: 0.8;
}

/* 导航网格 */
.nav-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 36px;
}

/* 导航按钮 */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px;
  border-radius: 14px;

  background: rgba(0, 60, 120, 0.25);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0, 120, 255, 0.4);

  box-shadow:
    0 0 18px rgba(0, 120, 255, 0.45),
    inset 0 0 22px rgba(255, 255, 255, 0.15);

  text-decoration: none;
  color: #cce8ff;
  transition: all 0.25s ease;
}

/* 图标 */
.nav-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

/* 标签 */
.nav-label {
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* 悬停效果 */
.nav-item:hover {
  background: rgba(0, 90, 180, 0.35);
  box-shadow:
    0 0 26px rgba(0, 153, 255, 0.9),
    inset 0 0 28px rgba(255, 255, 255, 0.25);
  transform: translateY(-4px);
}

/* 分区模块 */
.section {
  margin-top: 60px;
}

/* 分区标题：蒸汽朋克猩红色发光 */
.section-title {
  font-size: 20px;
  letter-spacing: 0.18em;
  color: #ff5533;
  margin-bottom: 40px;
  text-shadow:
    0 0 10px rgba(255, 80, 40, 0.8),
    0 0 20px rgba(255, 120, 60, 0.6),
    0 0 30px rgba(255, 150, 80, 0.4);
}

/* 蒸汽朋克齿轮 */
.gear {
  width: 28px;
  height: 28px;
  display: inline-block;
  margin-right: 12px;

  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
    <g fill='%23aa3a2a'>\
      <circle cx='50' cy='50' r='22'/>\
      <path d='M50 5 L60 20 L50 35 L40 20 Z'/>\
      <path d='M95 50 L80 60 L65 50 L80 40 Z'/>\
      <path d='M50 95 L60 80 L50 65 L40 80 Z'/>\
      <path d='M5 50 L20 60 L35 50 L20 40 Z'/>\
    </g>\
  </svg>");
  
  background-size: cover;
  filter: drop-shadow(0 0 6px rgba(255, 80, 40, 0.6));
  animation: gearSpin 12s linear infinite;
}

/* 齿轮缓慢旋转动画 */
@keyframes gearSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 搜索框容器 */
.nav-search {
  margin: 40px auto 20px auto;
  width: 60%;
  display: flex;
  justify-content: center;
}

/* 搜索框本体：玻璃质感 + 猩红发光 + 赛博边框 */
.nav-search input {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;

  color: #ffe6d9;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 80, 40, 0.55); /* 猩红色蒸汽朋克边框 */
  border-radius: 10px;

  backdrop-filter: blur(8px);
  box-shadow:
    0 0 12px rgba(255, 80, 40, 0.6),
    inset 0 0 18px rgba(255, 255, 255, 0.15);

  transition: all 0.25s ease;
}

/* 聚焦时更亮、更神秘 */
.nav-search input:focus {
  outline: none;
  box-shadow:
    0 0 20px rgba(255, 120, 60, 0.9),
    inset 0 0 24px rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* placeholder 风格 */
.nav-search input::placeholder {
  color: rgba(255, 200, 180, 0.45);
}

/* 返回主站按钮：左上角烫金箭头 */
.back-home-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 32px;
  height: 32px;
  display: block;
  z-index: 9999;

  /* 向左箭头形状 */
  clip-path: polygon(
    70% 0%,   /* 右上 */
    30% 50%,  /* 中心尖端 */
    70% 100%, /* 右下 */
    0% 50%    /* 左尖端 */
  );

  /* 烫金质感渐变 */
  background: linear-gradient(135deg,
    rgba(255, 180, 60, 0.9) 0%,   /* 金色高光 */
    rgba(255, 120, 40, 0.85) 40%, /* 烫金橙 */
    rgba(180, 60, 20, 0.9) 100%   /* 深金属红 */
  );

  /* 金属边缘发光 */
  box-shadow:
    0 0 8px rgba(255, 150, 60, 0.7),
    0 0 14px rgba(255, 100, 40, 0.6),
    inset 0 0 6px rgba(255, 255, 255, 0.25);

  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* 悬停时运动风烫金闪光 */
.back-home-btn:hover {
  transform: translateX(-3px);
  box-shadow:
    0 0 12px rgba(255, 180, 80, 0.9),
    0 0 20px rgba(255, 120, 40, 0.8),
    inset 0 0 10px rgba(255, 255, 255, 0.35);
}

/* 右上角赛博朋克地球按钮 */
#cyber-earth {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
  display: block;
  z-index: 9999;

  /* 地球形状 */
  border-radius: 50%;

  /* 赛博朋克地球渐变 */
  background: radial-gradient(circle at center,
    rgba(0, 200, 255, 0.9) 0%,   /* 亮青色能量核 */
    rgba(0, 120, 200, 0.85) 40%, /* 深蓝赛博光 */
    rgba(0, 40, 80, 0.95) 100%   /* 深色太空蓝 */
  );

  /* 能量环 + 微光 */
  box-shadow:
    0 0 14px rgba(0, 200, 255, 0.8),   /* 外部能量光晕 */
    0 0 28px rgba(0, 120, 200, 0.6),   /* 深蓝扩散光 */
    inset 0 0 10px rgba(255, 255, 255, 0.25); /* 内部镜面反光 */

  /* 赛博朋克扫描线效果 */
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.15) 0px,
      rgba(255,255,255,0.15) 2px,
      transparent 2px,
      transparent 4px
    );

  cursor: pointer;
  transition: all 0.25s ease;
}

/* 悬停时：地球旋转 + 能量增强 */
#cyber-earth:hover {
  transform: rotate(12deg) scale(1.05);
  box-shadow:
    0 0 20px rgba(0, 240, 255, 1),
    0 0 32px rgba(0, 160, 220, 0.9),
    inset 0 0 14px rgba(255, 255, 255, 0.35);
}