/* 门户共享导航样式（★单一 SSOT：改导航/顶栏样式只改此文件，全站 7 页生效） */
html { scrollbar-gutter: stable; }  /* 滚动条出现/消失时页面不左右跳动 */

/* ★2026-10-19 全站自定义滚动条：细、圆角、悬浮式浅灰，贴合门户浅色风格（Chrome/Edge + Firefox） */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
::-webkit-scrollbar-corner { background: transparent; }
.topbar { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e2e8f0; z-index: 20; padding-bottom: 10px; box-shadow: 0 1px 4px rgba(30,41,59,.04); }
/* ★2026-10-26 顶栏防错位：h1 允许整条换行（flex-wrap）但文本不折行（nowrap）；
   nav-tabs 禁止收缩（flex-shrink:0）、胶囊文字禁止折行（white-space:nowrap），
   避免 updated 文案较长时（如消息页）把标题/tab 挤到折行、胶囊高低不一 */
.topbar h1 { font-size: 20px; color: #1e3a8a; margin: 14px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; row-gap: 2px; white-space: nowrap; }
.nav-tabs { display: inline-flex; margin-left: 16px; gap: 8px; flex-shrink: 0; }
.nav-tabs a { border: 1px solid transparent; background: rgba(255,255,255,.65); color: #334155; padding: 8px 18px; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .15s ease; white-space: nowrap; }
.nav-tabs a:hover { background: rgba(214,234,248,.55); color: #1d4ed8; }
.nav-tabs a.active { background: rgba(214,234,248,.78); color: #1d4ed8; border-color: transparent; box-shadow: none; font-weight: 700; }
.updated { color: #8a96a3; font-size: 12px; margin-left: auto; padding-left: 12px; font-weight: 400; flex-shrink: 0; }
.visit-badge { color: #2563eb; font-size: 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 2px 10px; font-weight: 600; margin-left: 10px; }

/* ★2026-10-20 P0 移动端适配（≤768px）
   ★2026-10-21 P0 调整：移动端隐藏顶栏横向 tab，统一改由底部固定 tab bar（/nav.js 注入）承载导航，
     避免「顶栏 tab + 底栏 tab」双导航；桌面（≥769px）完全不受影响。 */
@media (max-width: 768px) {
  .topbar { padding-bottom: 6px; }
  .topbar h1 { font-size: 17px; flex-wrap: wrap; row-gap: 6px; }
  .nav-tabs { display: none; }
  .updated { margin-left: 0; }
  .visit-badge { margin-left: 0; }
}

/* ★2026-11-14 顶栏右上信息组（数据时刻 / 主题切换，按页取用）：**改为 h1 内流内元素**。
   原实现 absolute + right:0，9 个 tab 撑满时会把这段文字压在「运维监控」上（用户实测截图）。
   流内 + margin-left:auto：宽度够就靠右、不够就随 flex-wrap 换行，永不重叠。 */
.tb-right { display: flex; align-items: center; gap: 8px; margin-left: auto; z-index: 1; flex-shrink: 0; }
.tb-right .updated { margin-left: 0; padding-left: 0; }
.tb-right .visit-badge { margin-left: 0; }
@media (max-width: 1280px) {
  .tb-right { margin-left: auto; }
}
@media (max-width: 768px) {
  .tb-right { margin-left: 0; gap: 8px; }
  .tb-right .updated { display: inline-flex; margin-top: 0; }
}

/* ★2026-11-14 顶栏「日期 + 批次」胶囊（全站唯一展示形态，用户口径）
   内容只有 `MM-DD HH:MM`：不显示秒、不显示年份、不带「数据 / 更新」字样。
   ★配色口径（用户 2026-11-14 追加）：**浅色 / 淡色**——淡底、淡边、淡字，
     不抢顶栏导航的视觉重量；暗色主题由 qn-theme.css 接管。
   由 nav.js 的 QN_ASOF.paint() 填充，任何页面不要自己拼字符串。 */
.qn-asof {
  display: inline-flex; align-items: center;
  font: 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .5px; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid #e8eef6;
  background: #f6f9fd;
  color: #8a99ab;
  white-space: nowrap; flex-shrink: 0;
  margin-right: 8px;                    /* ★2026-11-14 用户口径：不要贴最右，往左让一点 */
  position: relative; top: 2px;         /* ★2026-11-14 用户口径：原来看着靠上，下沉 2px */
}
.qn-asof:empty { display: none; }   /* 未填数据时不占位、不显示空胶囊 */

/* ★2026-11-08 受限 TAB 入口：默认隐藏，后端判定为授权 IP 后由 access.js 给 body 加
   .qn-allow-restricted 放出来。放这里而不是 JS 注入，是为了首屏就隐藏、不出现
   「先看见入口、点进去 403、再消失」的闪动。 */
.nav-tabs a[href$="/quant/reports.html"],
.nav-tabs a[href$="/quant/docs.html"],
.nav-tabs a[href$="/quant/ops.html"] { display: none; }

body.qn-allow-restricted .nav-tabs a[href$="/quant/reports.html"],
body.qn-allow-restricted .nav-tabs a[href$="/quant/docs.html"],
body.qn-allow-restricted .nav-tabs a[href$="/quant/ops.html"] { display: inline-flex; }

/* ★2026-11-12 菜单图标（由 /qn-icons.js 注入，currentColor 跟随主题与 active 态）
   顶栏 tab 用 inline-flex 保证图标与文字垂直居中；左侧目录保持 inline 流，
   用 vertical-align 对齐（.pct 仍是 float:right，不能改成 flex 容器）。 */
.nav-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.nav-tabs a .qi-svg { flex: none; opacity: .88; }
.nav-tabs a.active .qi-svg { opacity: 1; }
.pool-side button .qi-svg { vertical-align: -2px; margin-right: 7px; opacity: .78; }
.pool-side button.active .qi-svg { opacity: 1; }
html[data-theme="dark"] .nav-tabs a .qi-svg { opacity: .82; }
html[data-theme="dark"] .nav-tabs a.active .qi-svg {
  opacity: 1; filter: drop-shadow(0 0 6px rgba(56,214,255,.75));
}
html[data-theme="dark"] .pool-side button.active .qi-svg {
  filter: drop-shadow(0 0 5px rgba(56,214,255,.55));
}
