/* ============================================================
   TA TA 导航 2026 — 悬浮磨砂玻璃圆角长条 · 六大分类
   自包含组件层：加载于 main.css / agent.css 之后
   ============================================================ */

/* ---------- 悬浮长条 ---------- */
#nav {
  inset: 14px 0 auto 0;
  background: transparent;
  border-bottom: 0;
  pointer-events: none;
}
#nav .nav-inner {
  pointer-events: auto;
  max-width: 1340px;
  height: 62px;
  padding: 0 12px 0 20px;
  gap: 20px;
  background: rgba(11, 11, 16, 0.52);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  backdrop-filter: blur(22px) saturate(1.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transition: background 0.35s ease, box-shadow 0.35s ease, height 0.35s ease, border-color 0.35s ease;
}
#nav.scrolled .nav-inner {
  height: 56px;
  background: rgba(9, 9, 13, 0.80);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#nav-links { gap: 4px; align-items: center; }
#nav-links > a, #nav-links .nav-drop > button {
  padding: 8px 11px;
  border-radius: 11px;
  font-size: 14.5px;
  transition: background 0.22s, color 0.22s;
}
#nav-links > a:hover, #nav-links .nav-drop > button:hover { background: rgba(255, 255, 255, 0.07); }
#nav-links a.active::after { display: none; }
#nav-links a.active { color: var(--ink); }
#nav-links .nav-vault {
  color: #F2C94C !important;
  border: 1px solid rgba(242, 201, 76, 0.35);
  background: rgba(242, 201, 76, 0.08);
  margin-left: 6px;
  font-weight: 600;
}
#nav-links .nav-vault:hover { background: rgba(242, 201, 76, 0.16); }
.nav-actions .nav-cta { border-radius: 13px; }

/* ---------- 下拉（玻璃面板） ---------- */
.nav-drop { position: relative; }
.nav-drop > button {
  background: none; border: 0; color: var(--ink-2); font-family: var(--font-cn);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.nav-drop > button .caret { font-size: 10px; color: var(--ink-3); transition: transform 0.25s; }
.nav-drop:hover > button .caret, .nav-drop.open > button .caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 10px);
  min-width: 252px;
  background: rgba(13, 13, 19, 0.78);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 17px;
  padding: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  z-index: 130;
}
.nav-drop.open .nav-drop-menu, .nav-drop:hover .nav-drop-menu {
  opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
}
.nav-drop-menu a {
  display: block; padding: 10px 14px; border-radius: 11px;
  color: var(--ink-2); font-size: 14px; transition: background 0.18s, color 0.18s;
}
.nav-drop-menu a:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.nav-drop-menu a small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.nav-menu-label {
  font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink-3);
  padding: 12px 14px 5px; text-transform: uppercase; user-select: none;
}
.nav-menu-label:first-child { padding-top: 5px; }

/* ---------- 能力巨型菜单（四域） ---------- */
.nav-drop-mega .nav-drop-menu {
  width: min(900px, 94vw);
  left: -160px;
  transform: translate(0, 10px);
  padding: 16px 18px 12px;
}
.nav-drop-mega.open .nav-drop-menu, .nav-drop-mega:hover .nav-drop-menu { transform: translate(0, 0); }
.mega-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 4px 11px; margin-bottom: 12px;
}
.mega-top b { color: var(--ink); font-size: 14.5px; font-weight: 650; }
.mega-top a { padding: 0 !important; font-size: 13px; color: #67E8F9 !important; }
.mega-top a:hover { background: none !important; text-decoration: underline; }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 20px; }
.mega-col h6 {
  margin: 0 0 7px; font-size: 11.5px; letter-spacing: 0.13em; font-weight: 700;
}
.mega-col a { padding: 5px 8px !important; font-size: 13.5px; border-radius: 8px; }
.mega-col a small { font-size: 10.5px; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 移动菜单（分组玻璃面板） ---------- */
.m-group {
  font-size: 11px; letter-spacing: 0.18em; color: var(--ink-3);
  padding: 16px 0 4px; text-transform: uppercase;
}
.m-group:first-child { padding-top: 2px; }
@media (max-width: 1080px) {
  #nav .nav-inner { height: 58px; border-radius: 17px; }
  #nav-mobile {
    top: 84px; left: 12px; right: 12px;
    border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 18px;
    background: rgba(11, 11, 16, 0.88);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
    max-height: calc(100vh - 110px); overflow-y: auto;
  }
}
@media (max-width: 1280px) {
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-drop-mega .nav-drop-menu { width: min(560px, 94vw); }
}

/* ---------- 页脚六列（首页） ---------- */
.footer-2026 .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr; gap: 36px; }
.footer-2026 .footer-brand a { display: block; color: var(--ink-2); font-size: 14px; padding: 3px 0; }
.footer-2026 .footer-brand .brand { display: flex; padding: 0; }
@media (max-width: 1080px) { .footer-2026 .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- 变量兜底（无 main.css 的页面） ---------- */
#nav, #nav-mobile { --ink: #F4F6F9; --ink-2: #B9C1CD; --ink-3: #7E8898; --line: rgba(255,255,255,0.10); }

/* ---------- 移动面板完整规则（自包含） ---------- */
#nav-mobile { display: none; }
@media (max-width: 1080px) {
  #nav-mobile {
    display: block; position: fixed; top: 84px; left: 12px; right: 12px; z-index: 99;
    padding: 14px 22px 20px; transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: all 0.3s ease; max-height: calc(100vh - 108px); overflow-y: auto;
  }
  #nav-mobile.open { transform: none; opacity: 1; pointer-events: auto; }
  #nav-mobile a {
    display: block; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--ink-2, #B9C1CD); font-size: 15.5px; text-decoration: none;
  }
  /* A 类页面：汉堡切换 #nav-links.open 的面板化 */
  #nav-links.open {
    position: fixed; top: 84px; left: 12px; right: 12px; z-index: 125;
    display: flex !important; flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(11, 11, 16, 0.92);
    -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.11); border-radius: 18px;
    box-shadow: 0 26px 60px rgba(0,0,0,0.55);
    padding: 14px 16px; max-height: calc(100vh - 108px); overflow-y: auto;
  }
  #nav-links.open .nav-drop > button { width: 100%; justify-content: space-between; padding: 11px 4px; font-size: 15.5px; }
  #nav-links.open .nav-drop-menu {
    position: static; opacity: 1; pointer-events: auto; transform: none;
    background: transparent; border: 0; box-shadow: none; padding: 2px 0 8px 14px; min-width: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #nav-links.open .mega-grid { grid-template-columns: 1fr 1fr; }
  #nav-links.open .mega-top { display: none; }
  #nav-links.open > a { padding: 11px 4px; }
}