/* ============================================================
   项目导航条 —— 两个项目共用一套账号密码，靠这条在之间切换
   左侧「基础运营奖」  右侧「配件KPI」
   ------------------------------------------------------------
   两个页面的主题色不同（基础运营奖是深蓝头图，配件KPI是浅色卡片），
   所以这里刻意用一块中性的深色条，两边都放得下、看起来还是同一个产品。
   改这一份，两个页面同时生效（不要各页面各写一套，迟早会不一致）。
   ============================================================ */

#nav {
  --navh: 44px;
  --nav-bg: #0f1e2e;
  --nav-ink: #a3b6cd;
  --nav-ink-on: #ffffff;
  --nav-rule: #ffd166;

  display: flex;
  flex: 0 0 auto;
  background: var(--nav-bg);
  position: relative;
  z-index: 8;
}

#nav a {
  flex: 1 1 0;
  height: var(--navh);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--nav-ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  -webkit-tap-highlight-color: transparent;
}

#nav a + a { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .10); }

#nav a:hover { color: var(--nav-ink-on); background: rgba(255, 255, 255, .04); }

#nav a.on {
  color: var(--nav-ink-on);
  font-weight: 600;
  border-bottom-color: var(--nav-rule);
  background: rgba(255, 255, 255, .07);
}

/* 本店没有那一套数据时：入口置灰、点不动（点击后会在对话区说明原因）。
   放在共用样式里 —— 两页都可能遇到（配件KPI 家的基础奖、基础奖家的配件KPI）。 */
#nav a.off { color: #5d6b7d; cursor: default; }
#nav a.off:hover { background: none; color: #5d6b7d; }

/* 手机上窄一些，两个词要能并排放得下 */
@media (max-width: 420px) {
  #nav a { font-size: 12.5px; }
}