/* ============================================================
   舰桥 chrome
   ① 首页：页头被彻底打散——不再是一条固定在顶部的横栏。
      品牌交给左上舷窗、导航变右侧频道柱、搜索沉到首屏底部、
      动作按钮散在右上角，全部随首屏滚走，不常驻。
   ② 文章页（bridge / immersive）：保留顶栏但 HUD 化——阅读场景
      需要随时可达的导航，散点会伤可用性。
   只改皮与定位，不动 DOM：所有 class / id / Vue 挂载点原样，
   搜索、暗切、登录、移动端菜单照常工作。
   ============================================================ */

/* ============================================================
   一、首页：页头解构（散点布局）
   ============================================================ */

:is(body.bridge-home, .bridge-home) {
  --hud-line: #38D9FF;
  --hud-line-dim: rgba(56, 217, 255, 0.32);
  /* 2026-10-19 提亮一档：欢哥「整体有点暗，费视力」，页头/导航这批小字最暗 */
  --hud-ink: #DDEAF5;
  --hud-dim: #8399AB;
  --hud-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
  /* 频道竖轴在视口里的落点 —— 首屏（页头里的绝对定位）与第二屏（rail 里的
     sticky）共用这一个值。两屏各写各的会飘：首屏 27vh、第二屏按"可视带居中"
     算出来的 50vh-44px，1440×900 下差 164px，翻过屏菜单就往下跳一截。
     矮视口（≤820）在下面统一改成 30vh。 */
  --hud-nav-top: 27vh;
}

/* 整页底色，消除滚动时顶部露白 */
:is(body.bridge-home, .bridge-home) { background: #0C1219 !important; }

/* 页头容器：脱离文档流、零高度、透明——只当散点的定位基准 */
:is(body.bridge-home, .bridge-home) .site-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  z-index: 900;
  pointer-events: none;
}
:is(body.bridge-home, .bridge-home) .site-header::after { display: none !important; }
:is(body.bridge-home, .bridge-home) .site-header__top,
:is(body.bridge-home, .bridge-home) .site-header__bottom {
  position: static !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}
:is(body.bridge-home, .bridge-home) .site-header__top-inner,
:is(body.bridge-home, .bridge-home) .site-header__bottom-inner,
:is(body.bridge-home, .bridge-home) .site-header__left {
  position: static !important;
  display: block !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
/* 注意：.site-header__actions 不在上面这组里——它要脱离文档流散到右上角，
   若被 position:static !important 锁住，会一直停在左上角。 */

/* 品牌：交给左上舷窗（舷窗里的 618A 文字已带首页链接），这里不再重复 */
:is(body.bridge-home, .bridge-home) .site-logo { display: none !important; }

/* 搜索框：首页不再在页头里放第二个入口。
   右上角状态条里的放大镜已经能唤起搜索弹窗，顶部中线再摆一条输入框，
   同一个功能在视口里出现两次，纯属占地方。表单本身由父主题输出，
   这里只做隐藏 —— 父主题的按钮/弹窗逻辑不依赖这个 form 是否可见。 */
:is(body.bridge-home, .bridge-home) .site-header__search { display: none !important; }

/* 主导航：不是"右侧一列文字"，而是一条**示波器式的主轴**。
   一根竖轴从顶到底，每个频道从轴上伸出一段分支刻度，前面挂两位编号。
   这样它读起来像仪表的通道索引，而不是网站的导航条。 */
:is(body.bridge-home, .bridge-home) .site-nav--inline {
  position: absolute;
  right: 26px;
  top: var(--hud-nav-top, 27vh);
  width: 152px;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  max-height: none;
  overflow: visible; /* 绝不能 auto/scroll：会把二级菜单整个裁掉（「显示不全」的直接原因） */
  pointer-events: auto;
}
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 2px 0 2px 16px;
  list-style: none;
  counter-reset: bh-ch;
  border-left: 1px solid rgba(56, 217, 255, 0.22);
  position: relative;
}
/* 主轴顶端的端帽 + 底端渐隐，让这根线看起来是"有始有终"的轴，不是一段边框 */
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -4px;
  width: 5px;
  height: 5px;
  background: var(--hud-line);
  box-shadow: 0 0 9px rgba(56, 217, 255, 0.9);
}
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -18px;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, rgba(56, 217, 255, 0.22), transparent);
}
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li {
  counter-increment: bh-ch;
  position: relative;
  padding: 6px 0;
}
/* 从主轴伸出的分支刻度 */
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: rgba(56, 217, 255, 0.26);
  transition: width 0.22s, background 0.18s;
}
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li:hover::before {
  width: 15px;
  background: var(--hud-line);
}
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list a {
  font-family: var(--hud-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--hud-ink) !important;
  transition: color 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 0;
}
/* 编号：01 / 02 / 03 —— 读数感比小横线强得多 */
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li > a::before {
  content: counter(bh-ch, decimal-leading-zero);
  display: inline-block;
  width: 20px;
  flex: 0 0 20px;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgba(56, 217, 255, 0.38);
  vertical-align: middle;
  margin-right: 8px;
  transition: color 0.15s;
  font-variant-numeric: tabular-nums;
}
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list a:hover,
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list .current-menu-item > a { color: var(--hud-line) !important; }
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list a:hover::before,
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list .current-menu-item > a::before {
  color: var(--hud-line);
}
/* 二级导航是同一菜单的第二份副本，散点布局里只留一份 */
:is(body.bridge-home, .bridge-home) .site-header__bottom { display: none !important; }

/* 右上角：搜索 / 账户 / 时间 —— 以前是三块各自为政的小方块（40 / 76 / 44 宽、
   边框有的有一半没有、行高也各不相同），时间面板还单独悬在下面一行，读起来
   就是"没排过"。现在并成一条 34px 高的状态条：最右是时间读数，往左依次接
   账户、搜索，共用一副外框 + 1px 分隔线。宽度是固定的，所以甲板不需要跟着动。 */
:is(body.bridge-home, .bridge-home) .site-header__actions {
  position: absolute !important;
  top: 24px !important;
  right: 226px !important; /* = 24 外边距 + 202 时间面板宽，接缝严丝合缝 */
  left: auto !important;
  width: auto !important;
  height: 34px !important;
  display: flex !important;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(10, 15, 24, 0.86);
  border: 1px solid var(--hud-line-dim);
  border-right: 0; /* 右边接时间面板，那边已有边框，不画双线 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
:is(body.bridge-home, .bridge-home) .site-header__search-btn {
  width: 40px;
  height: 100% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--hud-dim) !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--hud-line-dim) !important;
  border-radius: 0 !important;
  transition: color 0.15s, background 0.15s;
}
:is(body.bridge-home, .bridge-home) .site-header__search-btn:hover {
  color: var(--hud-line) !important;
  border-color: var(--hud-line-dim) !important;
  background: rgba(56, 217, 255, 0.08) !important;
}
:is(body.bridge-home, .bridge-home) .theme-toggle {
  color: var(--hud-dim) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
:is(body.bridge-home, .bridge-home) .theme-toggle:hover { color: var(--hud-line) !important; }
:is(body.bridge-home, .bridge-home) .nav-toggle { display: none !important; }

/* 账户格：登录态是头像、游客态是「登录」文字，两种都撑满整格高度，
   否则会和左边的搜索格差半个像素，接缝一眼能看出来。 */
:is(body.bridge-home, .bridge-home) .site-header__actions .user-menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
}
:is(body.bridge-home, .bridge-home) .site-header__actions .user-avatar-wrapper { display: flex; }
:is(body.bridge-home, .bridge-home) .site-header__actions .user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(56, 217, 255, 0.45);
  box-shadow: none;
  background: #0F1520;
  object-fit: cover;
}
:is(body.bridge-home, .bridge-home) .site-header__actions .user-menu:hover .user-avatar {
  border-color: var(--hud-line);
}
:is(body.bridge-home, .bridge-home) .header-login-btn {
  display: inline-flex !important;
  align-items: center;
  height: 100% !important;
  padding: 0 2px !important;
  font-family: var(--hud-mono) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.06em;
  color: var(--hud-line) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
:is(body.bridge-home, .bridge-home) .header-login-btn:hover {
  color: #EAF6FF !important;
  background: transparent !important;
}
:is(body.bridge-home, .bridge-home) .user-dropdown {
  background: rgba(14, 20, 32, 0.97) !important;
  border: 1px solid var(--hud-line-dim) !important;
  color: var(--hud-ink);
}
:is(body.bridge-home, .bridge-home) .user-menu-link { color: var(--hud-ink); }
:is(body.bridge-home, .bridge-home) .user-menu-link:hover { background: rgba(56, 217, 255, 0.1); color: var(--hud-line); }
:is(body.bridge-home, .bridge-home) .user-dropdown .dropdown-divider { border-color: rgba(56, 217, 255, 0.15); }
:is(body.bridge-home, .bridge-home) .user-dropdown-email { color: var(--hud-dim); }

/* 搜索弹窗同套暗色 */
:is(body.bridge-home, .bridge-home) .search-modal__content {
  background: rgba(14, 20, 32, 0.97) !important;
  border: 1px solid var(--hud-line-dim) !important;
}
:is(body.bridge-home, .bridge-home) .search-modal__overlay { background: rgba(4, 8, 14, 0.72) !important; }
:is(body.bridge-home, .bridge-home) .search-modal__input,
:is(body.bridge-home, .bridge-home) .search-modal__icon,
:is(body.bridge-home, .bridge-home) .search-modal__close { color: var(--hud-ink); font-family: var(--hud-mono); }

/* 矮视口：顶栏整体上提，给甲板腾高度 */
@media (max-height: 820px) and (min-width: 901px) {
  :is(body.bridge-home, .bridge-home) .site-header__actions { top: 14px !important; }
  /* 竖轴落点跟着抬（两屏同一个变量，rail 里的 sticky 自动同步） */
  :is(body.bridge-home, .bridge-home) { --hud-nav-top: 30vh; }
}

/* 移动端：散点布局整体回退成常规顶栏，否则没法用 */
@media (max-width: 900px) {
  :is(body.bridge-home, .bridge-home) .site-header {
    position: sticky !important;
    height: auto !important;
    background: rgba(11, 15, 23, 0.94) !important;
    border-bottom: 1px solid var(--hud-line-dim) !important;
    backdrop-filter: blur(10px);
    pointer-events: auto;
  }
  :is(body.bridge-home, .bridge-home) .site-header__top { display: block !important; height: auto !important; }
  :is(body.bridge-home, .bridge-home) .site-header__top-inner {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 56px;
  }
  :is(body.bridge-home, .bridge-home) .site-logo { display: flex !important; }
  :is(body.bridge-home, .bridge-home) .site-nav--inline { display: none !important; }
  :is(body.bridge-home, .bridge-home) .site-header__bottom { display: none !important; }
  :is(body.bridge-home, .bridge-home) .site-header__search { display: none !important; }
  :is(body.bridge-home, .bridge-home) .nav-toggle { display: inline-flex !important; }
  /* 移动端顶栏是常规 sticky 条，桌面那条「搜索 / 账户 / 时间」连体状态条
     在这里要拆回两个独立小按钮 —— 不然会贴着顶边挂一条 34px 的横带。 */
  :is(body.bridge-home, .bridge-home) .site-header__actions {
    position: static !important;
    margin-left: auto;
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: auto !important;
    border: 0 !important;
    background: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  :is(body.bridge-home, .bridge-home) .site-header__search-btn {
    width: 32px;
    height: 32px !important;
    border: 1px solid var(--hud-line-dim) !important;
    border-radius: 1px !important;
  }
  :is(body.bridge-home, .bridge-home) .site-header__actions .user-menu { padding: 0 2px; }
  :is(body.bridge-home, .bridge-home) .site-header__actions .user-avatar {
    width: 26px;
    height: 26px;
  }
}

/* ============================================================
   二、文章页：保留顶栏，HUD 化（阅读场景需要常驻导航）
   ============================================================ */

:is(body.bridge-single--bridge, .bridge-single--bridge) .site-header,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-header {
  --hud-line: #38D9FF;
  --hud-line-dim: rgba(56, 217, 255, 0.32);
  --hud-ink: #C9DCE8;
  --hud-dim: #5F7A8C;
  --hud-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
  background: linear-gradient(180deg, rgba(11, 15, 23, 0.92) 0%, rgba(11, 15, 23, 0.8) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hud-line-dim) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  color: var(--hud-ink) !important;
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-header::after,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hud-line), transparent);
  opacity: 0.55;
  pointer-events: none;
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-logo-text,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-logo-text {
  font-family: var(--hud-mono);
  letter-spacing: 0.08em;
  color: #EAF6FF !important;
  font-weight: 600;
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-header__search,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-header__search {
  background: rgba(14, 20, 32, 0.7) !important;
  border: 1px solid var(--hud-line-dim) !important;
  border-radius: 1px !important;
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-header__search-input,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-header__search-input {
  font-family: var(--hud-mono);
  font-size: 12.5px;
  color: var(--hud-ink) !important;
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-header__search-input::placeholder,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-header__search-input::placeholder { color: var(--hud-dim); }
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-nav .nav-list a,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-nav .nav-list a {
  font-family: var(--hud-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--hud-ink) !important;
  transition: color 0.15s;
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-nav .nav-list a::before,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-nav .nav-list a::before {
  content: "▸ ";
  color: var(--hud-line-dim);
  font-size: 11px;
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-nav .nav-list a:hover,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-nav .nav-list a:hover,
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-nav .nav-list .current-menu-item > a,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-nav .nav-list .current-menu-item > a { color: var(--hud-line) !important; }
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-header__bottom,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-header__bottom {
  border-top: 1px solid rgba(56, 217, 255, 0.12);
  background: rgba(11, 15, 23, 0.55);
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-header__actions,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-header__actions { color: var(--hud-ink); }
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-header__search-btn,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-header__search-btn,
:is(body.bridge-single--bridge, .bridge-single--bridge) .theme-toggle,
:is(body.bridge-single--immersive, .bridge-single--immersive) .theme-toggle,
:is(body.bridge-single--bridge, .bridge-single--bridge) .nav-toggle,
:is(body.bridge-single--immersive, .bridge-single--immersive) .nav-toggle { color: var(--hud-dim); }
:is(body.bridge-single--bridge, .bridge-single--bridge) .site-header__search-btn:hover,
:is(body.bridge-single--immersive, .bridge-single--immersive) .site-header__search-btn:hover,
:is(body.bridge-single--bridge, .bridge-single--bridge) .theme-toggle:hover,
:is(body.bridge-single--immersive, .bridge-single--immersive) .theme-toggle:hover,
:is(body.bridge-single--bridge, .bridge-single--bridge) .nav-toggle:hover,
:is(body.bridge-single--immersive, .bridge-single--immersive) .nav-toggle:hover { color: var(--hud-line); }
:is(body.bridge-single--bridge, .bridge-single--bridge) .header-login-btn,
:is(body.bridge-single--immersive, .bridge-single--immersive) .header-login-btn {
  font-family: var(--hud-mono);
  font-size: 12.5px;
  color: var(--hud-line) !important;
  background: rgba(56, 217, 255, 0.08) !important;
  border: 1px solid var(--hud-line-dim) !important;
  border-radius: 1px !important;
  padding: 5px 14px;
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .user-dropdown,
:is(body.bridge-single--immersive, .bridge-single--immersive) .user-dropdown {
  background: rgba(14, 20, 32, 0.97) !important;
  border: 1px solid var(--hud-line-dim) !important;
  color: var(--hud-ink);
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .user-menu-link,
:is(body.bridge-single--immersive, .bridge-single--immersive) .user-menu-link { color: var(--hud-ink); }
:is(body.bridge-single--bridge, .bridge-single--bridge) .user-menu-link:hover,
:is(body.bridge-single--immersive, .bridge-single--immersive) .user-menu-link:hover { background: rgba(56, 217, 255, 0.1); color: var(--hud-line); }
:is(body.bridge-single--bridge, .bridge-single--bridge) .search-modal__content,
:is(body.bridge-single--immersive, .bridge-single--immersive) .search-modal__content {
  background: rgba(14, 20, 32, 0.97) !important;
  border: 1px solid var(--hud-line-dim) !important;
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .search-modal__overlay,
:is(body.bridge-single--immersive, .bridge-single--immersive) .search-modal__overlay { background: rgba(4, 8, 14, 0.72) !important; }
:is(body.bridge-single--bridge, .bridge-single--bridge) .mobile-nav,
:is(body.bridge-single--immersive, .bridge-single--immersive) .mobile-nav {
  background: rgba(11, 15, 23, 0.98) !important;
  color: var(--hud-ink);
}
:is(body.bridge-single--bridge, .bridge-single--bridge) .mobile-nav a,
:is(body.bridge-single--immersive, .bridge-single--immersive) .mobile-nav a { color: var(--hud-ink); }