.topbar {
  background: linear-gradient(180deg, #1e40af 0%, #2563eb 100%);
  color: #fff;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
[data-theme="dark"] .topbar { background: linear-gradient(180deg, #0c1e3d 0%, #1e3a8a 100%); }
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* 公告可能很长：单行截断，绝不把 topbar-right 挤出视口 */
.topbar-announce {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar a { color: rgba(255,255,255,.85); }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.topbar-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: rgba(255,255,255,.10);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
.topbar-icon:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }
.topbar-icon svg, .topbar-icon i { width: 14px; height: 14px; display: block; }
.topbar-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  background: var(--accent-red, #ef4444);
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
}

.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 8px;
  display: grid; place-items: center;
  color: #fff; font-size: 20px;
  font-family: "STKaiti", "KaiTi", serif;
}
.logo-img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; display: block; }
.header-search { position: relative; display: inline-flex; align-items: center; }
.header-search-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
}
.header-search-toggle:hover { color: var(--primary); border-color: var(--primary); }
.header-search-toggle[hidden] { display: none; }
.header-search-form { width: 260px; }
@media (min-width: 901px) {
  .header-search-form { width: 320px; }
}
.header .search {
  max-width: 420px;
  position: relative;
}
.header-search-form[hidden] { display: none; }
.header .search input {
  width: 100%;
  height: 38px;
  padding: 0 16px 0 40px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--font);
  /* input[type=search] 在 WebKit 下会套用 searchfield 外观，
     把上面的圆角/内边距顶掉，这里显式关掉。 */
  -webkit-appearance: none;
  appearance: none;
}
/* 保留 WebKit 的原生清除按钮（type=search 才有），只调成主题的灰度 */
.header .search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-faint);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  cursor: pointer;
  opacity: .7;
}
.header .search input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
.header .search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.header .search::before {
  font-family: "bootstrap-icons" !important;
  content: "\f52a";
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; opacity: .5;
}
.header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}
.avatar img { width: 100%; height: 100%; display: block; border-radius: 50%; }

/* 头像下拉菜单 */
.user-menu { position: relative; display: inline-flex; align-items: center; }
.user-menu > .avatar { transition: box-shadow .15s; }
.user-menu:hover > .avatar,
.user-menu.is-open > .avatar { box-shadow: 0 0 0 2px var(--primary); }
.user-menu-dropdown {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 8px;
  min-width: 180px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown,
.user-menu.is-open .user-menu-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* 悬浮时鼠标从头像移到菜单不会掉出去 */
.user-menu-dropdown::before {
  content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
.user-menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.user-menu-name {
  display: block;
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-menu-dropdown > a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.user-menu-dropdown > a:hover {
  background: var(--surface-2);
  color: var(--primary);
  text-decoration: none;
}
.user-menu-dropdown > a.user-menu-logout:hover { color: var(--danger, #ef4444); }

/* 吸顶偏移：登录用户前台会带 WordPress 管理条（fixed 定位），
   sticky top:0 会被它压在下面，所以按管理条高度让出空间。
   ≤782px 管理条变高（46px）；≤600px 它改成 absolute 会随页面滚走，偏移归零。 */
body { --jx-sticky-top: 0px; }
body.admin-bar { --jx-sticky-top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --jx-sticky-top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar { --jx-sticky-top: 0px; }
}

.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: var(--jx-sticky-top, 0px); z-index: 10;
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  /* 这里绝对不能加 overflow。原先是 overflow-x:auto + overflow-y:visible，
     但按规范一个轴是 visible、另一个轴不是时，visible 会被计算成 auto ——
     于是导航条变成两个方向的滚动容器，把绝对定位的下拉面板整个裁掉，
     表现就是"悬浮有反应、菜单却看不见"。项目过多时改为换行，不再横向滚动。 */
}
.nav-inner > li {
  list-style: none;
  position: relative;
  display: block;
}
.nav-inner > li > a {
  display: block;
  padding: 12px 18px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  text-decoration: none;
}
.nav-inner > li > a:hover { color: var(--primary); text-decoration: none; }
.nav-inner > li.current-menu-item > a,
.nav-inner > li.current-menu-parent > a,
.nav-inner > li.current-menu-ancestor > a,
.nav-inner > li.current_page_item > a {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* 多级下拉：任意层级都要能定位，所以 position:relative 不能只给一级 li */
.nav-inner li { position: relative; list-style: none; }

.nav-inner .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  /* 宽度跟着最长一项走：原先写死 min-width:180px，菜单名短时右侧留一大片空白。
     max-content 取最长项的宽度，再由 max-width 收口，超长标题转为换行。
     min-width 只兜一个下限，避免一两个字的菜单缩成一条细缝。 */
  width: max-content;
  min-width: 96px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  list-style: none;
  margin: 0; padding: 6px 0;
  display: none;
  z-index: 20;
}
/* 三级及更深：向右侧飞出，而不是叠在父级面板上。
   -7px = 父面板的 6px 内边距 + 1px 边框，让子面板与父项顶部对齐 */
.nav-inner .sub-menu .sub-menu {
  top: -7px;
  left: 100%;
  margin-left: 2px;
}
/* 贴近视口右边时由 nav.js 加这个类，改为朝左展开 */
.nav-inner > li > .sub-menu.is-flipped { left: auto; right: 0; }
.nav-inner .sub-menu .sub-menu.is-flipped {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 2px;
}

/* 三种展开途径：键盘 focus（全设备）、点按钮展开（.is-open）、鼠标悬浮 */
.nav-inner li:focus-within > .sub-menu { display: block; }
.nav-inner > li.is-open > .sub-menu { display: block; }
/* 悬浮展开的生效条件必须与"开合按钮隐藏"的条件严格互补，即
   恰好是下面那条按钮显示规则 `(hover: none), (max-width: 900px)` 的反面。
   否则窄屏用鼠标时两套机制同时生效：点按钮收起了 .is-open，
   指针还停在菜单项上，:hover 又把面板顶开，表现就是"只能展开不能收缩"。 */
@media (hover: hover) and (min-width: 901px) {
  .nav-inner li:hover > .sub-menu { display: block; }
}

.nav-inner .sub-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}
.nav-inner .sub-menu a:hover { background: var(--bg); color: var(--primary); }
.nav-inner .sub-menu .current-menu-item > a,
.nav-inner .sub-menu .current-menu-parent > a,
.nav-inner .sub-menu .current-menu-ancestor > a { color: var(--primary); }

/* 有子菜单的项加箭头：一级朝下，更深层朝右 */
.nav-inner li.has-sub > a { padding-right: 30px; }
.nav-inner li.has-sub > a::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: .55;
}
.nav-inner .sub-menu li.has-sub > a::after {
  right: 12px;
  transform: translateY(-50%) rotate(-45deg);
}
.nav-inner .sub-menu li.has-sub > a { padding-right: 26px; }

/* 条目很多时面板自身可滚动，不至于长到屏幕外还没法滚到。
   只对"没有再嵌套子菜单"的面板生效：overflow 会裁掉向右飞出的子面板，
   所以带下级的面板绝不能加 overflow。不支持 :has() 的浏览器退化成不限高，
   与改动前行为一致。 */
@media (min-width: 901px) {
  .nav-inner > li > .sub-menu:not(:has(.sub-menu)) {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}

/* 子菜单开合按钮：鼠标设备靠悬浮，不需要它；触屏和窄屏必须有它才点得开 */
.nav-sub-toggle {
  display: none;
  align-items: center;
  /* 箭头靠左紧跟文字：若居中，28px 宽的按钮会在文字和箭头之间留出一大段空白。
     按钮本身保持一定宽度 + 纵向撑满，点击区域仍然够大。 */
  justify-content: flex-start;
  width: 22px;
  padding: 0 0 0 2px;
  align-self: stretch;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.nav-sub-toggle::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}
.nav-inner > li.is-open > .nav-sub-toggle { color: var(--primary); }
.nav-inner > li.is-open > .nav-sub-toggle::before { transform: translateY(1px) rotate(-135deg); }

/* 没有悬浮能力（触屏，含 >900px 的平板）或窄屏时启用按钮 */
@media (hover: none), (max-width: 900px) {
  .nav-sub-toggle { display: inline-flex; }
  .nav-inner > li { display: flex; align-items: center; }
  /* 按钮承担了展开职责，一级项自己的箭头就多余了。
     右内边距收到 4px，让箭头紧挨文字（原来 12px + 按钮内的空白，间距过大） */
  .nav-inner > li.has-sub > a { padding-right: 4px; }
  .nav-inner > li.has-sub > a::after { content: none; }
}

@media (max-width: 900px) {
  .topbar-inner { padding: 0 12px; gap: 10px; }

  .header-inner { flex-wrap: nowrap; gap: 12px; padding: 12px; }
  /* 站点名允许收缩并截断，否则会把右侧操作区推出视口 */
  .logo { font-size: 20px; flex: 1; min-width: 0; }
  .logo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo small { display: none; }          /* 副标题在窄屏没有空间 */
  .logo-icon, .logo-img { width: 30px; height: 30px; }
  .logo-icon { font-size: 17px; }

  .header-actions { gap: 8px; flex-shrink: 0; }
  .header-search-form { width: 200px; }
  .header .search input { font-size: 16px; height: 36px; }
  .header-search-toggle { width: 32px; height: 32px; font-size: 14px; }
  .avatar, .avatar img { width: 32px; height: 32px; }

  .nav-inner { padding: 0 8px; }
  .nav-inner > li > a { padding: 10px 12px; }
}

/* 平铺折叠面板：窄屏放不下飞出式多级菜单；触屏（含宽度大于 900px 的平板）
   没有 hover，飞出的三级菜单根本点不开 —— 两种情况都改成平铺。
   面板本身仍然挂在所属一级项下方、按内容宽度显示，不做通栏。 */
@media (hover: none), (max-width: 900px) {
  .nav-inner > li > .sub-menu {
    top: 100%;
    left: 0;
    right: auto;
    /* 贴着视口宽度收口，窄屏也不会溢出；靠右的项由 nav.js 翻转对齐 */
    max-width: min(280px, calc(100vw - 20px));
    max-height: 70vh;
    overflow-y: auto;
  }
  .nav-inner > li > .sub-menu.is-flipped { left: auto; right: 0; }
  /* 面板内部的下级全部静态平铺 + 缩进，取消飞出定位。
     它们在流内，跟着面板一起滚动，不会被 overflow 裁掉。 */
  .nav-inner > li > .sub-menu .sub-menu {
    display: block;
    position: static;
    top: auto; left: auto; right: auto;
    margin: 0 0 0 12px;
    min-width: 0; max-width: none;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  /* 平铺后深层项不再需要朝右的箭头 */
  .nav-inner .sub-menu li.has-sub > a { padding-right: 16px; }
  .nav-inner .sub-menu li.has-sub > a::after { content: none; }
  .nav-inner .sub-menu a { padding: 9px 16px; }
}
@media (max-width: 480px) {
  .header-inner { padding: 10px 8px; gap: 8px; }
  .logo { font-size: 17px; }
  /* 窄屏放不下"站点名 + 搜索框"：展开时浮在标题行上方，避免撑破视口或换行抖动 */
  .header .header-search-form {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: min(74vw, 260px);
    max-width: none;
    z-index: 15;
  }
  .nav-inner { padding: 0 4px; }
  .nav-inner > li > a { padding: 10px; font-size: 13px; }
}