/* ==================================================================
   nav-vben.css — 主站顶部导航 · vben 统一风格
   ==================================================================
   背景：此前 nav-color.css + nav-premium.css 两套叠加
   （14 处 linear-gradient、多色主题悬停、余额金黄渐变、
    滚动彩虹线），与用户中心 vben 顶栏视觉割裂。

   现在按 vben 的设计 token 重写：
     · 纯色，无渐变
     · 中性灰阶（vben 的 border/background/foreground 变量）
     · 悬停 = 背景 accent 变化，不变色不变彩虹
     · 高度 50px，与 vben header 一致
     · 圆角 6px（vben 的 --radius）
     · 暗色模式同步
   ================================================================== */

:root {
  --nv-h: 50px;
  --nv-bg: #ffffff;
  --nv-border: rgb(0 0 0 / 8%);
  --nv-fg: #1f2329;
  --nv-fg-muted: #6b7280;
  --nv-accent: rgb(0 0 0 / 5%);
  --nv-primary: #536dfe;
  --nv-radius: 6px;
}

html.dark {
  --nv-bg: #1b1d21;
  --nv-border: rgb(255 255 255 / 10%);
  --nv-fg: #e5e7eb;
  --nv-fg-muted: #9ca3af;
  --nv-accent: rgb(255 255 255 / 8%);
  --nv-primary: #8ba1ff;
}

/* ---------------- 顶栏容器 ---------------- */
header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--nv-h);
  padding: 0 16px;
  background: var(--nv-bg);
  border-bottom: 1px solid var(--nv-border);
  backdrop-filter: none;
  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* 去掉旧版叠加的渐变与彩虹线（选择器兜底，防 nav-premium 残留） */
header.nav::before,
header.nav::after {
  display: none !important;
  content: none !important;
}

/* ---------------- 品牌 ---------------- */
.brand {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--nv-fg);
  text-decoration: none;
}

.brand .nv-mark,
.brand .brand-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.brand .nv-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nv-primary);
  color: #fff;
}

.brand .nv-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nv-fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- 链接区 ---------------- */
nav.links {
  display: flex;
  flex: 1;
  gap: 4px;
  align-items: center;
  margin-left: 8px;
}

nav.links > a {
  padding: 6px 12px;
  border-radius: var(--nv-radius);
  font-size: 13.5px;
  color: var(--nv-fg-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

nav.links > a:hover {
  background: var(--nv-accent);
  color: var(--nv-fg);
}

nav.links > a.active {
  background: var(--nv-accent);
  font-weight: 600;
  color: var(--nv-fg);
}

/* 主题切换按钮：中性 */
nav.links .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--nv-radius);
  background: transparent;
  color: var(--nv-fg-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

nav.links .theme-toggle:hover {
  background: var(--nv-accent);
  color: var(--nv-fg);
}

/* ---------------- 右侧动作区 ---------------- */
nav.links .nav-avatar-link {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease;
}

nav.links .nav-avatar-link:hover {
  background: var(--nv-accent);
}

nav.links .nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nv-primary);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

nav.links .nav-avatar.has-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

nav.links .nav-avatar-text {
  font-size: 13px;
  color: var(--nv-fg-muted);
}

nav.links .admin-link {
  padding: 6px 12px;
  border-radius: var(--nv-radius);
  font-size: 13px;
  color: var(--nv-fg-muted);
  text-decoration: none;
}

nav.links .admin-link:hover {
  background: var(--nv-accent);
  color: var(--nv-fg);
}

/* 退出按钮：ghost 风 */
nav.links form button.btn.alt {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius);
  background: transparent;
  font-size: 13px;
  color: var(--nv-fg-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

nav.links form button.btn.alt:hover {
  background: var(--nv-accent);
  color: var(--nv-fg);
}

/* 登录 / 注册（访客态）：主按钮 + 次按钮，vben 式 */
nav.links > a[href='/login/'] {
  color: var(--nv-fg-muted);
}

nav.links > a.btn[href='/register/'] {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--nv-radius);
  background: var(--nv-primary);
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  line-height: 32px;
  transition: filter 0.15s ease;
}

nav.links > a.btn[href='/register/']:hover {
  background: var(--nv-primary);
  filter: brightness(1.06);
}

/* 余额 pill：纯色，去金黄渐变 */
nav.links .nav-balance,
nav.links [class*='balance'] {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--nv-accent);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nv-fg);
  background-image: none !important;
}

/* 消息红点 */
nav.links .nav-dot,
nav.links [class*='notif'] .dot {
  background: #ef4444 !important;
  background-image: none !important;
  animation: none !important;
}

/* ---------------- 移动端 ---------------- */
@media (max-width: 767px) {
  header.nav {
    height: 46px;
    padding: 0 12px;
    gap: 10px;
  }

  nav.links {
    gap: 2px;
    margin-left: 0;
  }

  nav.links > a {
    padding: 6px 9px;
    font-size: 13px;
  }
}

/* ---------------- 汉堡按钮（窄屏）---------------- */
header.nav .hamburger {
  display: none;
  width: 32px;
  height: 32px;
  padding: 7px;
  border: 0;
  border-radius: var(--nv-radius);
  background: transparent;
  cursor: pointer;
}

header.nav .hamburger:hover {
  background: var(--nv-accent);
}

header.nav .hamburger span {
  display: block;
  height: 2px;
  margin-bottom: 4px;
  border-radius: 2px;
  background: var(--nv-fg);
}

header.nav .hamburger span:last-child {
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  header.nav .hamburger {
    display: block;
  }
}


/* ============================================================================
   首页专用覆盖（body.is-front-page）
   ============================================================================
   app.css 里有一整套「首页专属导航」样式：白色胶囊 + 彩虹渐变描边 +
   浮起阴影 + 红色圆形 logo。它优先级更高（带 !important），
   把统一导航盖掉了 —— 站内换页时导航会突然从胶囊变成通栏。

   这里用同等特异性 + !important 还原成统一样式。
   ============================================================================ */
/* 导航与页面内容对齐：
   内容区是「居中 1080px」，导航却铺满全宽（left=22 / width=1396），
   两者左边缘一个在 22、一个在 180，看起来导航是脱开的。
   这里让导航内部也居中到同一宽度。 */
body.is-front-page > main.shell > header.nav {
  position: sticky !important;
  top: 0 !important;
  height: 50px !important;
  min-height: 0 !important;
  margin: 0 -22px !important;
  padding: 0 max(22px, calc((100% - 1080px) / 2)) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nv-border) !important;
  border-radius: 0 !important;
  background: var(--nv-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* 去掉彩虹渐变描边 */
body.is-front-page > main.shell > header.nav::before {
  display: none !important;
  content: none !important;
}

/* 品牌标记：app.css 用 ::before 画了个红色渐变球，
   上传 logo 时会把它压在图片上（表现为「一片蓝色方块」）。
   这里直接隐藏这个伪元素，让真实 logo / 内置 SVG 标记正常显示。 */
body.is-front-page .nav .brand::before {
  display: none !important;
  content: none !important;
}

/* 没有上传 logo 时，内置标记用主色方块 */
body.is-front-page .nav .brand .nv-mark {
  background: var(--nv-primary) !important;
}

body.is-front-page .nav .brand {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--nv-fg) !important;
}

/* 链接与按钮：去胶囊圆角，与站内一致 */
body.is-front-page .nav .links a:not(.btn) {
  padding: 6px 12px !important;
  border-radius: var(--nv-radius) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--nv-fg-muted) !important;
}

body.is-front-page .nav .links a:not(.btn):hover,
body.is-front-page .nav .links a.active {
  background: var(--nv-accent) !important;
  color: var(--nv-fg) !important;
}

body.is-front-page .nav .links a.btn {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: var(--nv-radius) !important;
  background: var(--nv-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* 首页 hero 顶部留白收紧（原来是 88px + 导航 66px 显得空） */
body.is-front-page .h-hero {
  padding-top: 48px !important;
  padding-bottom: 44px !important;
}

@media (max-width: 767px) {
  body.is-front-page > main.shell > header.nav {
    height: 46px !important;
    padding: 0 12px !important;
  }

  body.is-front-page .h-hero {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}


/* ============================================================================
   交互细节完善
   ============================================================================
   之前缺的三类状态：
     · 键盘焦点不可见（Tab 键用户无法定位）
     · 按下时没有反馈
     · 当前所在页面没有高亮
   ============================================================================ */

/* 焦点环：只在键盘导航时出现，鼠标点击不显示 */
nav.links > a:focus-visible,
nav.links .theme-toggle:focus-visible,
header.nav .hamburger:focus-visible,
nav.links form button:focus-visible,
nav.links .nav-avatar-link:focus-visible {
  outline: 2px solid var(--nv-primary);
  outline-offset: 2px;
  border-radius: var(--nv-radius);
}

/* 按下反馈 */
nav.links > a:active,
nav.links .theme-toggle:active {
  background: rgb(0 0 0 / 8%);
}

html.dark nav.links > a:active,
html.dark nav.links .theme-toggle:active {
  background: rgb(255 255 255 / 12%);
}

/* 当前页高亮：由 aria-current 或 .active 触发 */
nav.links > a.active,
nav.links > a[aria-current='page'] {
  background: var(--nv-accent);
  font-weight: 600;
  color: var(--nv-fg);
}

/* 图标垂直居中：SVG 与文字基线天然错位，统一对齐 */
header.nav svg,
nav.links svg {
  display: block;
  flex-shrink: 0;
}

/* 主题按钮里的方块去掉多余行高 */
nav.links .theme-toggle span,
nav.links .theme-toggle .theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* 品牌名称与 logo 对齐 */
.brand .nv-name {
  line-height: 1.2;
}

/* 滚动后给顶栏一点层次，避免和白色内容粘连 */
header.nav.is-scrolled {
  box-shadow: 0 1px 0 rgb(0 0 0 / 6%);
}

html.dark header.nav.is-scrolled {
  box-shadow: 0 1px 0 rgb(255 255 255 / 8%);
}

/* ============================================================================
   移动端：折叠菜单
   ============================================================================
   窄屏下链接挤成一排会换行，把顶栏撑高。
   改为：品牌 + 汉堡按钮，点开后在下方展开菜单面板。
   ============================================================================ */
@media (max-width: 767px) {
  header.nav .hamburger {
    display: block;
    order: 3;
    margin-left: auto;
  }

  nav.links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
    margin: 0;
    padding: 8px 12px 12px;
    border-bottom: 1px solid var(--nv-border);
    background: var(--nv-bg);
    box-shadow: 0 8px 20px -12px rgb(16 24 40 / 20%);
  }

  nav.links.is-open {
    display: flex;
  }

  nav.links > a {
    padding: 10px 12px;
    border-radius: var(--nv-radius);
    font-size: 14px;
  }

  nav.links .nav-avatar-link {
    justify-content: flex-start;
    padding: 8px 12px;
    border-radius: var(--nv-radius);
  }

  /* 主题切换与退出按钮在菜单里左对齐 */
  nav.links .theme-toggle {
    align-self: flex-start;
    margin: 4px 0 2px;
  }

  nav.links form {
    width: 100%;
  }

  nav.links form button.btn.alt {
    width: 100%;
    height: 38px;
  }
}


/* ============================================================================
   移动端菜单：覆盖 app.css 里的旧规则
   ============================================================================
   app.css 有 3 段互相冲突的移动端 .links 规则：
     · flex-wrap:wrap          → 链接换行，把顶栏撑到 96px
     · position:fixed;inset:0  → 全屏遮罩式菜单
     · display:flex!important  → 强制展开，汉堡按钮失效
   三者叠加的结果是：链接挤在第二行、汉堡点不动、菜单永远是开的。

   这里用更高特异性把它们统一成「点击汉堡 → 顶栏下方展开面板」。
   ============================================================================ */
@media (max-width: 860px) {
  /* 顶栏不换行 */
  body.is-front-page > main.shell > header.nav,
  header.nav {
    flex-wrap: nowrap !important;
    min-height: 0 !important;
    height: 46px !important;
    padding: 0 12px !important;
  }

  /* 菜单默认收起：覆盖 display:flex!important */
  body.is-front-page .nav .links,
  header.nav nav.links,
  header.nav .links {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 8px 12px 12px !important;
    overflow-y: auto !important;
    border-bottom: 1px solid var(--nv-border) !important;
    background: var(--nv-bg) !important;
    box-shadow: 0 10px 24px -14px rgb(16 24 40 / 24%) !important;
    z-index: 60 !important;
  }

  /* 展开态 */
  body.is-front-page .nav .links.is-open,
  header.nav nav.links.is-open,
  header.nav .links.is-open {
    display: flex !important;
  }

  /* 菜单项左对齐、够大好点 */
  header.nav nav.links > a,
  body.is-front-page .nav .links a:not(.btn) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 11px 12px !important;
    border-radius: var(--nv-radius) !important;
    font-size: 14px !important;
    color: var(--nv-fg) !important;
    text-align: left !important;
  }

  /* 汉堡：固定在右侧 */
  header.nav .hamburger {
    display: flex !important;
    order: 99;
    margin-left: auto;
  }

  /* 品牌区不抢满宽 */
  body.is-front-page .nav .brand {
    flex: 0 1 auto !important;
  }
}


/* ============================================================================
   移动端抽屉菜单
   ============================================================================
   手机顶栏放不下导航项，用底部弹出面板收纳。
   面板内容与主站导航保持一致（按后台开关动态生成）。
   ============================================================================ */
.mobile-menu-btn {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--nv-radius);
  background: transparent;
  color: var(--nv-fg);
  cursor: pointer;
}

.mobile-menu-btn:hover {
  background: var(--nv-accent);
}

.mobile-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.mobile-sheet[hidden] {
  display: none;
}

.mobile-sheet__mask {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 42%);
  animation: m-sheet-fade 0.18s ease;
}

.mobile-sheet__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 82vh;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  background: var(--nv-bg);
  animation: m-sheet-up 0.22s ease;
}

.mobile-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 2px auto 12px;
  border-radius: 2px;
  background: rgb(0 0 0 / 12%);
}

html.dark .mobile-sheet__handle {
  background: rgb(255 255 255 / 16%);
}

.mobile-sheet__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.mobile-sheet__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 12px 4px;
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--nv-fg-muted);
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
}

.mobile-sheet__item:hover,
.mobile-sheet__item:active {
  background: var(--nv-accent);
}

.mobile-sheet__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--nv-accent);
  color: var(--nv-fg);
}

.mobile-sheet__close {
  width: 100%;
  height: 44px;
  margin-top: 14px;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius);
  background: transparent;
  font-size: 14px;
  color: var(--nv-fg-muted);
  cursor: pointer;
}

.mobile-sheet__close:active {
  background: var(--nv-accent);
}

@keyframes m-sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes m-sheet-up {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

@media (max-width: 860px) {
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sheet__mask,
  .mobile-sheet__panel {
    animation: none;
  }
}


/* ============================================================================
   移动端 App 顶栏：修 4 列布局
   ============================================================================
   app.css 里 .mobile-app-header 是 grid-template-columns: 44px 1fr auto（3 列），
   但顶栏实际有 4 个元素：左侧标识/返回、标题、右侧动作区、汉堡按钮。
   第 4 个元素自动换到第二行 —— 表现为「两行顶栏」。
   这里改为 4 列，并让右侧动作区与汉堡并排。
   ============================================================================ */
@media (max-width: 860px) {
  .mobile-app-header {
    grid-template-columns: 40px 1fr auto auto !important;
    gap: 2px !important;
    height: 50px !important;
    min-height: 0 !important;
  }

  .mobile-app-header > strong {
    min-width: 0;
    overflow: hidden;
    font-size: 16px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 右侧动作区不换行，图标间距收紧 */
  .mobile-app-actions {
    display: flex !important;
    gap: 2px !important;
    align-items: center !important;
    justify-self: end;
  }

  .mobile-app-actions > a,
  .mobile-app-actions > button {
    width: 34px !important;
    height: 34px !important;
  }

  /* 登录按钮：之前宽度被压到 34px（跟图标同宽），文字折成两行「登/录」。
     这里单独放开宽度限制并禁止换行。 */
  .mobile-app-actions > .mobile-login-link,
  .mobile-login-link {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 52px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: var(--nv-radius) !important;
    background: var(--nv-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .mobile-menu-btn {
    justify-self: end;
  }
}


/* ============================================================================
   窄屏：桌面导航让位给移动端 App 顶栏
   ============================================================================
   app.css 只在 max-width:700px 隐藏 header.nav，
   701~860px 之间会出现「桌面导航 + 移动顶栏」两条顶栏并存。
   这里把断点对齐到 860px。
   ============================================================================ */
@media (max-width: 860px) {
  body.is-front-page > main.shell > header.nav,
  body.is-front-page > .shell > header.nav,
  main.shell > header.nav {
    display: none !important;
  }
}