/* ==========================================================================
   统一导航条组件  ·  nav.css
   四个页面共用，配色通过 var(--x, fallback) 自动适配各页主题变量命名差异
   （portal/admin/calculator 用 --amber，index 用 --amber/--border/--muted）

   间距规范（8pt 网格）：
     条高 52px ｜ 左右内边距 18px ｜ 品牌与导航组分隔 20px
     导航项内边距 7px 14px ｜ 项间距 2px ｜ 圆角 9px ｜ 条底部留白 20px
   ========================================================================== */

.wb-navbar {
  /* 主题适配：各页变量名不同，逐项给 fallback */
  --nb-panel:  var(--panel,  #201a14);
  --nb-panel2: var(--panel2, var(--panel-2, #26211a));
  --nb-line:   var(--border, var(--line, #3a332a));
  --nb-amber:  var(--amber,  #ffb454);
  --nb-amber2: var(--amber-2, var(--amber, #ffc061));
  --nb-coral:  var(--coral,  #ff7a59);
  --nb-text:   var(--text,   #ece5d8);
  --nb-muted:  var(--muted,  #9a8f7d);

  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px;
  margin: 0 0 var(--sp-sec, 20px);
  border: 1px solid var(--nb-line);
  border-radius: var(--radius, 14px);
  /* 与页面卡片同材质（渐变方向、描边一致），仅阴影略轻以区分浮层层级 */
  background: linear-gradient(180deg, var(--nb-panel2), var(--nb-panel));
  box-shadow: 0 6px 20px rgba(0, 0, 0, .34);

  /* 吸顶：计算器 / 运行日志等长页面滚动时，导航常驻可达。
     层级 40：低于弹窗(50) 与 toast(99)，不会遮挡交互层。 */
  position: sticky;
  top: 0;
  z-index: 40;
}

/* 吸顶遮挡条：滚上来的内容先经过这块同色区域，
   不会从导航条顶部两个圆角的缝隙里透出来（视觉上成了一张贴顶的卡片） */
.wb-navbar::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -1px;
  right: -1px;
  height: 16px;
  background: var(--nb-panel2);
  border-left: 1px solid var(--nb-line);
  border-right: 1px solid var(--nb-line);
}

/* --- 品牌区 --- */
.wb-navbar .wb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-right: 20px;
  margin-right: 12px;
  border-right: 1px solid var(--nb-line);
  font-size: 15px;
  font-weight: 700;
  color: var(--nb-amber2);
  text-decoration: none;
  letter-spacing: .3px;
  white-space: nowrap;
}
.wb-navbar .wb-brand .wb-logo { font-size: 17px; line-height: 1; }

/* --- 主导航组 --- */
.wb-navbar .wb-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;      /* Firefox */
}
.wb-navbar .wb-links::-webkit-scrollbar { display: none; }

.wb-navbar .wb-links a {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--nb-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
.wb-navbar .wb-links a:hover {
  color: var(--nb-text);
  background: rgba(255, 255, 255, .055);
  border-color: var(--nb-line);
}
/* 当前页高亮 */
.wb-navbar .wb-links a.on {
  color: #1c1610;
  background: linear-gradient(145deg, var(--nb-amber), var(--nb-coral));
  border-color: transparent;
  font-weight: 600;
}
.wb-navbar .wb-links a.on:hover { color: #1c1610; }

/* --- 右侧用户区 --- */
.wb-navbar .wb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid var(--nb-line);
}
.wb-navbar .wb-who {
  font-size: 12.5px;
  color: var(--nb-muted);
  white-space: nowrap;
}
.wb-navbar .wb-role {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 180, 84, .14);
  color: var(--nb-amber2);
}
.wb-navbar .wb-out {
  padding: 6px 12px;
  border: 1px solid var(--nb-line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--nb-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.wb-navbar .wb-out:hover {
  color: var(--nb-coral);
  border-color: var(--nb-coral);
  background: rgba(255, 122, 89, .1);
}

/* --- 响应式：窄屏收缩 padding 并隐藏角色徽章 --- */
@media (max-width: 720px) {
  .wb-navbar { height: 48px; padding: 0 12px; margin-bottom: 16px; }
  .wb-navbar .wb-brand { padding-right: 12px; margin-right: 6px; font-size: 14px; }
  .wb-navbar .wb-brand .wb-text { display: none; }
  .wb-navbar .wb-links a { padding: 6px 11px; font-size: 13px; }
  .wb-navbar .wb-user { padding-left: 10px; gap: 7px; }
  .wb-navbar .wb-who { display: none; }
}