/* ══════════════════════════════════════════════
   VUC DeepSpace 导航栏组件 v1.0
   适用于: SPA 首页 + 所有独立子页
   色板: Steel Blue #6ca0dc / Amber #c9a96e
   ══════════════════════════════════════════════ */

/* ── 导航容器 ── */
.vuc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 48px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(10,14,23,.72);
  border-bottom: 1px solid rgba(108,160,220,.08);
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.vuc-nav.scrolled {
  background: rgba(10,14,23,.94);
  border-bottom-color: rgba(201,169,110,.18);
  box-shadow: 0 0 40px rgba(108,160,220,.06);
}
.vuc-nav.scrolled::after {
  content: '';
  position: absolute; bottom: -1px; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.35), transparent);
}

/* ── Logo ── */
.vuc-nav-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem; font-weight: 800;
  letter-spacing: 2px;
  text-decoration: none;
  background: linear-gradient(135deg, #a8c8e8, #c9a96e);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity .25s;
  flex-shrink: 0;
}
.vuc-nav-logo:hover { opacity: .82; }

/* ── 链接列表 ── */
.vuc-nav-links {
  display: flex; gap: 6px; list-style: none; align-items: center;
  margin: 0; padding: 0;
}
.vuc-nav-links > li { position: relative; }

.vuc-nav-links a {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 8px;
  color: rgba(220,232,250,.72);
  font-size: .82rem; letter-spacing: .04em;
  text-decoration: none;
  transition: color .25s, background .25s;
  white-space: nowrap;
}
.vuc-nav-links a:hover {
  color: #c9a96e;
  background: rgba(201,169,110,.07);
}

/* ── 当前页高亮 ── */
.vuc-nav-links a.active,
.vuc-nav-links a[aria-current="page"] {
  color: #c9a96e;
  background: rgba(201,169,110,.1);
  font-weight: 600;
}

/* ── 下拉菜单 ── */
.vuc-nav-dropdown { position: relative; }
.vuc-nav-dropdown > a { cursor: pointer; }
.vuc-nav-dropdown > a::after {
  content: '▾'; font-size: .55em; margin-left: 3px;
  opacity: .45; transition: opacity .25s, transform .25s;
}
.vuc-nav-dropdown:hover > a::after {
  opacity: 1; transform: translateY(2px);
}

.vuc-nav-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  padding: 8px 0;
  background: rgba(14,20,35,.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(108,160,220,.12);
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(108,160,220,.06) inset;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .22s, visibility .22s, transform .22s;
  list-style: none; margin: 0;
}
.vuc-nav-dropdown:hover .vuc-nav-dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.vuc-nav-dropdown-menu li { padding: 0; margin: 0; }
.vuc-nav-dropdown-menu li a {
  display: block; padding: 9px 22px;
  color: rgba(220,232,250,.72);
  font-size: .8rem; border-radius: 0;
  transition: color .2s, background .2s;
}
.vuc-nav-dropdown-menu li a:hover {
  color: #c9a96e;
  background: rgba(201,169,110,.06);
}

.vuc-nav-dropdown-divider {
  height: 1px; margin: 6px 14px;
  background: rgba(108,160,220,.1);
}

/* ── 用户区 ── */
.vuc-nav-user { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.vuc-nav-user .vuc-nav-btn {
  padding: 8px 20px; border-radius: 50px;
  font-size: .78rem; letter-spacing: .06em;
  cursor: pointer; transition: all .25s;
  font-family: inherit; border: none;
  text-decoration: none; display: inline-flex; align-items: center;
}
.vuc-nav-btn-login {
  background: transparent;
  border: 1px solid rgba(108,160,220,.32) !important;
  color: #a8c8e8;
}
.vuc-nav-btn-login:hover {
  background: rgba(108,160,220,.08);
  border-color: rgba(108,160,220,.5) !important;
}
.vuc-nav-btn-register {
  background: linear-gradient(135deg, rgba(108,160,220,.18), rgba(201,169,110,.12));
  border: 1px solid rgba(201,169,110,.28) !important;
  color: #dcc898;
}
.vuc-nav-btn-register:hover {
  background: linear-gradient(135deg, rgba(108,160,220,.28), rgba(201,169,110,.2));
  border-color: rgba(201,169,110,.5) !important;
  box-shadow: 0 0 20px rgba(201,169,110,.1);
}

/* ── 汉堡菜单按钮 ── */
.vuc-nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 8px; cursor: pointer;
  background: none; border: none;
  z-index: 210;
}
.vuc-nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(220,232,250,.7);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.vuc-nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.vuc-nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.vuc-nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── 响应式 ── */
@media (max-width: 860px) {
  .vuc-nav { padding: 12px 20px; }
  .vuc-nav-hamburger { display: flex; }
  .vuc-nav-links {
    display: none;
    position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
    flex-direction: column; gap: 4px;
    padding: 20px;
    background: rgba(10,14,23,.97);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    overflow-y: auto;
  }
  .vuc-nav-links.open { display: flex; }
  .vuc-nav-links a { padding: 12px 16px; font-size: .92rem; border-radius: 10px; }
  .vuc-nav-dropdown-menu {
    position: static; transform: none;
    opacity: 1; visibility: visible;
    background: transparent; border: none;
    box-shadow: none; padding: 0 0 0 20px;
  }
  .vuc-nav-dropdown > a::after { display: none; }
  .vuc-nav-user { display: none; }
  .vuc-nav-links .vuc-nav-user-mobile {
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 16px; margin-top: 12px;
    border-top: 1px solid rgba(108,160,220,.08);
  }
  .vuc-nav-links .vuc-nav-user-mobile .vuc-nav-btn {
    text-align: center; justify-content: center;
  }
}