/* ==========================================================================
   全站统一导航条 + 公告条皮肤（2026-11-02 二版）
   —— 一处定义，所有主页面在 <head> 末尾引入：
        <link rel="stylesheet" href="./nav.css">
        <script src="./nav.js" defer></script>
      body 内放 <div id="shell-nav"></div>
   —— 本文件负责：占位高度（防布局跳动）、导航样式、公告条深色胶囊、
      跨页面平滑过渡（View Transitions，Chrome 126+）。
      导航项数据仍在 nav.js 的 NAV 数组，样式只在这里改。
   ========================================================================== */

/* ---------- 0. 占位：nav 由 JS 渲染，先预留「高度 + 下边距」，插入时不推动下方内容 ---------- */
#shell-nav {
  min-height: 40px;
  margin-bottom: clamp(14px, 2vw, 24px);
  position: relative;
  z-index: 6;
}

/* ---------- 1. 公告条：统一深色胶囊（覆盖 admin.css 里的旧蓝条） ---------- */
.topbar {
  background: #22211b;
  border-radius: 999px;
  color: #f6f3e9;
  padding: 0 18px;
  height: 40px;              /* 定高：不同页面字体取整会差 1px，定死后导航条纹丝不动 */
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  max-width: 860px;
  margin: 0 auto 20px;
  border: none;
  box-shadow: none;
}
.topbar .pill {
  background: #ffd400;
  color: #1d1c17;
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 11px;
  flex: none;
}
.topbar .msg {
  color: rgba(246, 243, 233, .75);
  opacity: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .close {
  color: rgba(246, 243, 233, .6);
  margin-left: auto;
  cursor: pointer;
  opacity: 1;
  font-size: 13px;
  flex: none;
}
.topbar .topbar-user { color: #f6f3e9; }
.topbar .topbar-user a { color: rgba(246, 243, 233, .85); }
.topbar .topbar-user a:hover { color: #f6f3e9; }

/* ---------- 2. 顶栏：logo · 居中导航 · 账号 ---------- */
#shell-nav .v4-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;                 /* 间距由 #shell-nav 统一占位，避免插入时二次位移 */
  position: relative;
  z-index: 5;
}
#shell-nav .v4-brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
#shell-nav .v4-brand img { height: 28px; width: auto; display: block; }

#shell-nav .v4-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}
#shell-nav .v4-nav::-webkit-scrollbar { display: none; }
#shell-nav .v4-nav a {
  white-space: nowrap;
  text-decoration: none;
  color: #57534a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  padding: 9px 14px;
  border-radius: 999px;
  transition: background .16s, color .16s;
  flex: none;
}
#shell-nav .v4-nav a:hover { color: #1d1c17; background: rgba(29, 28, 23, .06); }
#shell-nav .v4-nav a.on { background: #22211b; color: #f6f3e9; font-weight: 600; }

#shell-nav .v4-actions { display: flex; align-items: center; gap: 10px; flex: none; }
#shell-nav .v4-user {
  display: none;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #1d1c17;
  font-weight: 600;
  font-size: 13px;
}
#shell-nav .v4-user.ready { display: inline-flex; }
#shell-nav .v4-user #headName { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#shell-nav .v4-ava {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fffefb; box-shadow: 0 1px 4px rgba(35, 32, 22, .22);
  background: #f5efdf; display: block;
}
/* 顶栏头像容器 + 有效期内才显示的王冠（右上角 45° 斜戴） */
#shell-nav .v4-ava-wrap { position: relative; display: inline-block; flex: none; line-height: 0; overflow: visible; }
#shell-nav .v4-crown {
  position: absolute; top: -21%; right: -17%; width: 72%; height: auto;
  transform: rotate(24deg); display: none; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(35, 32, 22, .28));
}
#shell-nav .v4-ava-wrap.crown-on .v4-crown { display: block; }
#shell-nav .v4-logout { color: #8f8a7c; font-size: 12.5px; text-decoration: none; flex: none; }
#shell-nav .v4-logout:hover { color: #1d1c17; }
/* 账户中心：头像左侧的黄色胶囊入口（信号黄，醒目） */
#shell-nav .v4-acct {
  color: #1d1c17; font-size: 13px; font-weight: 700; text-decoration: none;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap; flex: none;
  background: #ffd400; border: 1px solid rgba(255,212,0, .6);
  box-shadow: 0 2px 10px rgba(255,212,0, .42);
  transition: background .16s, color .16s, box-shadow .16s;
}
#shell-nav .v4-acct:hover { color: #1d1c17; background: #ffe44d; border-color: rgba(255, 228, 77, .7); box-shadow: 0 4px 14px rgba(255, 228, 77, .55); }

@media (max-width: 1180px) {
  #shell-nav .v4-nav a { padding: 9px 11px; font-size: 12.5px; }
  #shell-nav .v4-user span { display: none; }
}
/* 跳跳糖带「（COMING SOON!）」后整体变长，中窄屏再收一档，避免被裁掉 */
@media (max-width: 1100px) {
  #shell-nav .v4-nav a { padding: 8px 9px; font-size: 12px; }
  #shell-nav .v4-nav { gap: 0; }
}
/* 980px 以下：导航折成第二行（跳跳糖那个长标签在单行放不下，宁可折行也不裁字） */
@media (max-width: 980px) {
  #shell-nav { min-height: 78px; }        /* 品牌行 + 10px 间距 + 导航行 */
  #shell-nav .v4-top { flex-wrap: wrap; gap: 10px; }
  #shell-nav .v4-nav { order: 3; flex: 0 0 100%; justify-content: flex-start; }
  #shell-nav .v4-actions { margin-left: auto; }
  #shell-nav .v4-brand img { height: 24px; }
}
@media (max-width: 820px) {
  #shell-nav .v4-logout { display: none; }
  .topbar { margin-bottom: 14px; }
  .topbar .msg { display: none; }
}

/* ---------- 3. 跨页面切换：导航条原地不动，内容淡入（不再整页白闪） ---------- */
@view-transition { navigation: auto; }
#shell-nav { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation-duration: .001s; }
::view-transition-old(root) { animation-duration: .16s; }
::view-transition-new(root) { animation-duration: .2s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(site-nav),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}