/* ============================================================
* strategy-hub 统一顶栏（阶段 6 + 导航栏强化）
* 由 /shared/hub-nav.js 注入 .hub-nav 元素并给 加
* .has-hub-nav 类；本文件只负责样式与 sticky 偏移适配。
* 引入方式（面板页面，位于自身 style.css 之后亦可）：
*
*
* ============================================================ */
/* ---- 顶栏本体：深蓝条，全站统一入口 ---- */
.hub-nav {
position: sticky;
top: 0;
z-index: 300; /* 高于面板 .app-header（z-index:100）与 quick/board-nav */
height: var(--hub-nav-height, 44px);
background: #001B45;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 4px 12px rgba(0, 10, 35, 0.55);
font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, 0.88);
}
/* 顶栏内容容器：与各面板内容区对齐（max-width: 1280px, padding: 0 24px） */
.hub-nav-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
height: 100%;
display: flex;
align-items: center;
gap: 18px;
box-sizing: border-box;
}
.hub-nav .hub-nav-brand {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.6px;
color: #fff;
text-decoration: none;
white-space: nowrap;
}
.hub-nav .hub-nav-brand:hover { color: var(--zw-sky-blue, #99E5FF); }
.hub-nav .hub-nav-brand .hub-nav-logo {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--zw-green, #22C55E);
box-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
}
.hub-nav .hub-nav-links {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
}
.hub-nav .hub-nav-links::-webkit-scrollbar { display: none; }
.hub-nav .hub-nav-link {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.80);
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hub-nav .hub-nav-link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.10);
}
/* 当前面板：绿色实心药丸，醒目高亮 */
.hub-nav .hub-nav-link.is-active {
color: #fff;
font-weight: 700;
background: var(--zw-green, #22C55E);
border-color: rgba(34, 197, 94, 0.45);
box-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}
/* ---- sticky 偏移适配：有顶栏时，面板自己的 sticky 头下移 ----
二级导航板(board-nav)被 JS 提到一级导航下方，标题栏(app-header)
再下移一档 board-nav 高度。 */
body.has-hub-nav {
--hub-sticky-offset: var(--hub-nav-height, 44px);
}
body.has-hub-nav .app-header {
position: relative;
top: auto;
}
/* 兼容各面板可能存在的其它 sticky 顶元素（quick-nav / board-nav 等
跟随 .app-header 之后 sticky 的，统一偏移一档顶栏高度） */
@media (max-width: 720px) {
/* 移动端高度同步：顶栏变矮时，sticky 偏移变量一并变矮，避免一级/二级导航间出现缝隙 */
body.has-hub-nav { --hub-nav-height: 40px; --hub-sticky-offset: 40px; }
.hub-nav { height: var(--hub-nav-height, 40px); }
.hub-nav-inner { padding: 0 16px; gap: 14px; }
.hub-nav { font-size: 13px; }
.hub-nav .hub-nav-link { padding: 5px 10px; font-size: 13px; }
.hub-nav .hub-nav-link.is-active::after { left: 10px; right: 10px; }
.hub-nav .hub-nav-brand-text { display: none; }
}