/* ============================================================
   AI 综合站 · 全站统一导航布局层 nav.css
   ------------------------------------------------------------
   结构（与 hao.uisdc.com 一致）：
     body.nav-page
       └ .nav-wrap            1720px 容器，padding-left:180px 让出侧栏
          ├ .nav-sidebar      透明悬浮左侧栏（position:absolute）
          └ .nav-main         右侧内容区

   配色全部走 app.css 的 CSS 变量，亮/暗双主题自动适配。
   本文件作用于全站前台（body.nav-page），首页额外叠加 home.css。
   ============================================================ */

/* ============================================================
   ① 斜体复位（关键）
   ------------------------------------------------------------
   优设 DOM 大量使用语义化 <i> 做结构容器（.in / .ico / .item-ico），
   <i> 浏览器默认 font-style:italic —— 不复位就会出现「左侧字体倾斜」。
   ============================================================ */
/* 用 !important 彻底压住浏览器默认的 <i>/<em> 斜体，
   避免任何继承路径导致侧栏文字看起来倾斜 */
.nav-page i,
.nav-page em,
.nav-page strong,
.nav-page b,
.nav-page .in,
.nav-page .ns-a,
.nav-page .nsn-btn {
  font-style: normal !important;
}
/* 侧栏文字本身也显式正体（双保险） */
/* 斜体复位（只针对文字容器，不影响布局样式） */
.nav-sidebar-menu .ns-a .in,
.nav-sidebar-menu .ns-a .in *,
.nav-sidebar-navs .nsn-btn {
  font-style: normal !important;
  font-weight: 500;
}
.nav-sidebar-navs .nsn-btn:hover { color: var(--accent); border-color: var(--accent); }
.nav-sidebar-navs .nsn-btn.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.nav-sidebar-navs .nsn-btn.active .nsn-ico { background: rgba(255, 255, 255, .22); color: #fff; }
.nav-sidebar-navs .nsn-btn.active .ico-more { color: rgba(255, 255, 255, .8); }
.nav-sidebar-navs .nsn-btn .nsn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: top; width: 20px; height: 20px;
  background: var(--accent); color: var(--on-accent);
  border-radius: 5px; margin-right: 6px; font-size: 12px;
  line-height: 1; text-align: center;
}
.nav-sidebar-navs .nsn-btn .nsn-ico svg {
  width: 13px; height: 13px; display: block; stroke-width: 2.2;
}
.nav-sidebar-navs .nsn-btn .ico-more {
  display: block; position: absolute; right: 10px; top: 50%;
  transform: translate(0, -50%); font-size: 10px; color: #b5b5b5;
  font-style: normal;
}

/* ============================================================
   ② 页面骨架
   ============================================================ */
body.nav-page {
  --nav-page-bg: #eff4f8;
  --nav-panel: #ffffff;
  --nav-ink: #3c3c3c;
  --nav-ink-2: #5a5a5a;
  --nav-muted: #8f8f8f;
  --nav-line: #f1f4f9;
  --nav-banner-1: #3d6fe0;
  --nav-banner-2: #6fa0f0;
  --nav-icon-bg: #f2f5fb;
  --nav-icon-ink: #5a6b88;
  overflow-x: hidden;
}
html[data-theme="dark"] body.nav-page {
  --nav-page-bg: #0c1526;
  --nav-panel: #131f38;
  --nav-ink: #e7edfb;
  --nav-ink-2: #a5b3d4;
  --nav-muted: #7482a6;
  --nav-line: #22304f;
  --nav-banner-1: #2b4fa8;
  --nav-banner-2: #1b3570;
  --nav-icon-bg: #1c2842;
  --nav-icon-ink: #93a4c8;
}
body.nav-page {
  background: var(--nav-page-bg);
  color: var(--nav-ink);
}
body.nav-page::before { display: none; }  /* 纯色底，不叠星空背景 */
body.nav-page svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }

/* 页面容器：flex 两栏 —— 左（侧栏 177px 固定） + 右（内容自适应）
   ⚠ 必须用 flex：之前侧栏用 position:absolute + margin-left:-177px
   叠在 padding-left 上，窄屏/滚动时容易错位；改 flex 后布局稳定，
   侧栏再用 position:sticky 钉住即可。 */
.nav-wrap {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.nav-main { padding: 30px 0 0; min-width: 0; flex: 1 1 auto; }
.nav-main-inner { padding: 0; min-width: 0; }
.nav-main-wrap { max-width: 1660px; margin: 0 auto; min-width: 0; }

/* 全站头部统一为首页的蓝色玻璃头 */
body.nav-page .main-body { max-width: none; padding: 0 0 40px; }
body.nav-page .header-inner { max-width: 1720px; padding: 0 30px; }
body.nav-page .site-logo { flex: 0 0 auto; margin-right: 26px; display: flex; align-items: center; }
body.nav-page .site-logo-img { height: 34px; width: auto; }
body.nav-page .main-nav { margin-left: 0; }
body.nav-page .footer-inner { max-width: 1720px; padding: 38px 30px 30px; }
body.nav-page .bottom-nav { display: none; }
/* 全站头部：不透明纯色
   ⚠ 之前用半透明 rgba(65,127,249,.9)，而 .header-inner 只有 1720px 居中，
   宽屏时 header 两侧会透出 body::before 的星空背景图 → 左深右浅两种颜色。
   改成不透明纯色后，两侧露出的也是同一颜色，色差消失；
   内容仍保持 1720px 居中，不会跑位。 */
body.nav-page .site-header {
  background: #3D6FE0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
/* ⚠ app.css 给 .header-inner 加了 backdrop-filter: saturate(200%)，
   它会对 header 背景做 2 倍饱和度 → 头部中间变成 #0E72FF（更亮的蓝），
   而 header-inner 之外仍是 #3D6FE0 → 左右两种颜色。
   nav-page 头部已是纯色，不需要毛玻璃，这里关掉。 */
body.nav-page .site-header .header-inner {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.nav-page .site-header .main-nav a { color: rgba(255, 255, 255, .82); }
body.nav-page .site-header .main-nav a:hover { color: #fff; background: rgba(0, 0, 0, .10); }
body.nav-page .site-header .main-nav a.active { color: #fff; background: rgba(0, 0, 0, .10); }
body.nav-page .site-header .site-logo-img-light { display: none; }
body.nav-page .site-header .site-logo-img-dark { display: block; }
body.nav-page .site-header .header-search input {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .26); color: #fff;
}
body.nav-page .site-header .header-search input::placeholder { color: rgba(255, 255, 255, .72); }
body.nav-page .site-header .theme-toggle {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .26); color: #fff;
}
body.nav-page .site-header .theme-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
html[data-theme="dark"] body.nav-page .site-header { background: #16255A; }
html[data-theme="dark"] body.nav-page .site-header .header-search input {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); color: #E7EDFB;
}

/* ============================================================
   ③ 左侧导航（透明悬浮，与优设 .part-sidebar 一致）
   ============================================================ */
/* 左侧分类栏：flex 定宽 177px + position:sticky 钉在视口内。
   页面滚动时它固定不动（不随右侧内容滚走），
   栏内分类过多时只滚动栏自身。 */
.nav-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  flex: 0 0 177px; width: 177px;
  align-self: flex-start;
  z-index: 2;
  max-height: calc(100vh - var(--header-h) - 32px);
  display: flex; flex-direction: column;
  /* 侧栏与内容之间的间距（替代原来的 padding-left 技巧） */
  margin-right: 30px;
}
.nav-sidebar-navs { margin-bottom: 15px; }
.nav-sidebar-navs .nsn-btn {
  display: block; line-height: 20px; padding: 11px 20px 11px 15px;
  color: var(--nav-ink-2); white-space: nowrap;
  background: var(--nav-panel); border-radius: 10px; font-size: 14px;
  position: relative; font-weight: 500;
  width: 100%;
  transition: color .15s;
}
.nav-sidebar-navs .nsn-btn:hover { color: var(--accent); }
.nav-sidebar-navs .nsn-btn .nsn-ico {
  display: inline-block; vertical-align: top; width: 20px; height: 20px;
  line-height: 20px; background: var(--accent); color: var(--on-accent);
  border-radius: 4px; margin-right: 5px; font-size: 12px; text-align: center;
}
.nav-sidebar-navs .nsn-btn .nsn-ico svg { width: 13px; height: 13px; display: block; margin: 3.5px auto 0; stroke-width: 2.2; }
.nav-sidebar-navs .nsn-btn .ico-more {
  display: block; position: absolute; right: 10px; top: 50%;
  transform: translate(0, -50%); font-size: 10px; color: #b5b5b5;
}
.nav-sidebar-menu {
  position: relative; padding-left: 0;
  flex: 1 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
}
/* ⚠ ul 有浏览器默认的 padding-left:40px，会把侧栏项挤窄 40px
   （实测 .ns-item 只有 110px 而不是 150px，文字被截断） */
.nav-sidebar-menu ul.menu,
.nav-sidebar-menu .menu {
  list-style: none; margin: 0; padding: 0;
}
.nav-sidebar-menu::-webkit-scrollbar { display: none; }
/* 侧栏项宽度：撑满菜单区（菜单区 = 侧栏宽 177 - 左内边距 27 = 150） */
.nav-sidebar-menu .ns-item { display: block; width: 100%; }
.nav-sidebar-menu .ns-a {
  display: block; width: 100%; border-radius: 10px; font-size: 14px;
  padding: 11px 20px 11px 14px; position: relative; color: var(--nav-ink-2);
  transition: background .15s, color .15s;
  border: 1px solid transparent;
}
.nav-sidebar-menu .ns-a .in {
  /* ⚠ 关键：inline-flex 会按内容收缩宽度，长文字被 overflow 裁掉。
     改成 block + float 图标：文字正常占满整行（可省略号），
     图标 float 在左，两者基线由 line-height 对齐。 */
  display: block; line-height: 20px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-style: normal;
}
.nav-sidebar-menu .ns-a .ns-ico {
  float: left; margin-right: 5px; display: inline-flex;
  align-items: center; justify-content: center;
  width: 20px; height: 20px; text-align: center; font-size: 13px;
  border-radius: 4px; color: var(--nav-ink-2); line-height: 1;
  margin-top: 0;
}
.nav-sidebar-menu .ns-a .ns-ico svg {
  width: 15px; height: 15px; display: block;
  stroke-width: 2; color: currentColor;
}
.nav-sidebar-menu .ns-a:hover { background: var(--nav-panel); color: var(--accent); }
.nav-sidebar-menu .ns-a:hover .ns-ico,
.nav-sidebar-menu .ns-a:hover .ns-ico svg { color: var(--accent); }
.nav-sidebar-menu .ns-a.active { background: var(--accent); color: var(--on-accent); }
.nav-sidebar-menu .ns-a.active .ns-ico,
.nav-sidebar-menu .ns-a.active .ns-ico svg { color: var(--on-accent); }
.nav-sidebar-menu .ns-sep-holder { height: auto; }
.nav-sidebar-menu .ns-sep {
  width: 100%; height: 0; border-top: 1px solid var(--nav-line);
  margin: 10px 0;
}

/* 侧栏计数（可选，小字淡色） */
.nav-sidebar-menu .ns-a .ns-cnt {
  float: right; font-size: 11px; color: var(--nav-muted);
  font-variant-numeric: tabular-nums; margin-left: 4px;
}
.nav-sidebar-menu .ns-a.active .ns-cnt { color: rgba(255, 255, 255, .8); }

/* ============================================================
   ④ 内容区块通用样式（全站卡片语言统一）
   ============================================================ */
.nav-block { margin-bottom: 40px; }
.nav-block .nb-title {
  height: 26px; line-height: 26px; margin-bottom: 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.nav-block .nb-title .l { flex-grow: 0; white-space: nowrap; overflow: hidden; }
.nav-block .nb-title .l strong { font-size: 20px; color: var(--nav-ink); font-weight: 700; }
.nav-block .nb-title .l strong a { color: inherit; }
.nav-block .nb-title .l .nb-sub {
  display: inline-block; vertical-align: top; margin-left: 20px; font-size: 13px;
  color: var(--nav-ink-2); background: var(--nav-panel); border-radius: 26px;
  padding: 0 10px; cursor: pointer; transition: background .15s, color .15s;
}
.nav-block .nb-title .l .nb-sub:hover { background: var(--accent); color: var(--on-accent); }
.nav-block .nb-title .r { flex-grow: 0; display: flex; justify-content: flex-end; align-items: center; }
.nav-block .nb-title .nb-more {
  display: block; border-radius: 26px; font-size: 12px; padding: 0 20px 0 12px;
  color: #8f8f8f; background: var(--nav-panel); position: relative;
  line-height: 26px; transition: all .15s; white-space: nowrap; margin-left: 10px;
}
.nav-block .nb-title .nb-more:hover { background: var(--accent); color: var(--on-accent); }
.nav-block .nb-title .nb-more .ico-more { display: inline-block; position: relative; top: 1px; font-size: 11px; margin-left: 2px; }

/* 网格：百分比宽度 + 负 margin（与优设一致） */
.nav-block .nb-loop {
  display: flex; flex-wrap: wrap; align-items: stretch;
  margin: 0 -12px -20px;
}
.nav-block .nb-item {
  flex: 0 0 16.66666667%; width: 16.66666667%; max-width: 16.66666667%;
  padding: 0 12px; margin-bottom: 24px;
}
.nav-block .nb-item .nb-box {
  display: flex; flex-direction: column;
  width: 100%; height: 100%; padding: 14px;
  background: var(--nav-panel); border-radius: 10px; overflow: hidden;
  border: 1px solid var(--nav-line);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.nav-block .nb-item .nb-box:hover { transform: translateY(-4px); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
.nav-block .nb-item .nb-box:hover .nb-name { color: var(--accent); text-decoration: underline; }
.nav-block .nb-item .nb-head {
  display: flex; align-items: center; gap: 8px;
  line-height: 32px; margin-bottom: 8px; white-space: nowrap; overflow: hidden;
  color: var(--nav-ink); margin: 0; font-size: 15px;
}
/* 卡片图标：统一为浅灰底 + 深色字（不再用 6 种彩色 mark-cN 背景），
   避免整页五颜六色。图片图标保持原样（object-fit: cover） */
.nav-block .nb-item .nb-ico {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: top; width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 8px; overflow: hidden; margin-right: 8px;
  background: var(--nav-icon-bg); color: var(--nav-icon-ink);
  text-align: center; line-height: 1; font-size: 15px; font-weight: 700;
}
/* 强制覆盖 app.css 的 mark-cN 彩色背景（首页卡片内统一色调） */
.nav-block .nb-item .nb-ico.mark-c0,
.nav-block .nb-item .nb-ico.mark-c1,
.nav-block .nb-item .nb-ico.mark-c2,
.nav-block .nb-item .nb-ico.mark-c3,
.nav-block .nb-item .nb-ico.mark-c4,
.nav-block .nb-item .nb-ico.mark-c5 {
  background: var(--nav-icon-bg) !important;
  color: var(--nav-icon-ink) !important;
}
/* 有真实图片时保持透明（图片自己就是图标） */
.nav-block .nb-item .nb-ico.has-img { background: transparent !important; }
.nav-block .nb-item .nb-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 100%; display: block; }
.nav-block .nb-item .nb-name {
  font-size: 14.5px; color: var(--nav-ink); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.nav-block .nb-item .nb-desc {
  font-size: 12.5px; color: var(--nav-muted); line-height: 20px;
  min-height: 40px; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nav-block .nb-item .nb-foot {
  display: flex; align-items: center; gap: 6px; margin-top: auto;
  padding-top: 4px;
}
.nav-block .nb-item .nb-tag {
  display: inline-block; font-size: 11px; line-height: 18px; padding: 0 6px;
  border-radius: 3px; background: var(--accent-soft); color: var(--accent);
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-block .nb-item .nb-rating { font-size: 11px; color: var(--star); font-weight: 700; margin-left: auto; }
.nav-block .nb-empty {
  background: var(--nav-panel); border-radius: 10px; padding: 40px 0;
  text-align: center; color: var(--nav-muted); font-size: 13px;
}

/* ============================================================
   ⑤ 响应式
   ============================================================ */
@media (max-width: 1659px) {
  .nav-sidebar { flex-basis: 167px; width: 167px; margin-right: 24px; }
}
@media (max-width: 1329px) {
  .nav-block .nb-item { flex-basis: 25%; width: 25%; max-width: 25%; }
}
@media (max-width: 1199px) {
  .nav-page .nav-dual, .nav-page .nav-rank { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 999px) {
  .nav-wrap { padding-left: 0; padding: 0 12px; }
  .nav-sidebar { display: none; }
  .nav-block .nb-item { flex-basis: 33.33333333%; width: 33.33333333%; max-width: 33.33333333%; }
  .nav-block .nb-loop { margin: 0; }
  .nav-block .nb-item { padding: 0 6px; }
  .nav-main-inner { padding: 0 12px; }
  .nav-page .header-inner { max-width: 100%; padding: 0 20px; }
  .nav-page .main-nav { margin-left: 0; }
  .nav-page .footer-inner { max-width: 100%; padding: 30px 20px 24px; }
  .nav-page .bottom-nav { display: block; }
  .nav-page .main-body { padding-bottom: 80px; }
}
@media (max-width: 749px) {
  .nav-block .nb-item { flex-basis: 50%; width: 50%; max-width: 50%; }
  .nav-block .nb-title { padding-bottom: 10px; position: relative; margin-bottom: 15px; }
  .nav-block .nb-title .l strong { font-size: 17px; }
  .nav-block .nb-title .nb-sub { display: none; }
}

/* ============================================================
   ⑥ 内页：去掉旧的双栏布局（左侧已有统一导航）
   ============================================================ */
.nav-page .tools-layout.tools-layout-nav {
  display: block;
  margin-top: 20px;
}
.nav-page .tools-layout.tools-layout-nav .tools-side { display: none; }
.nav-page .page-hero {
  background: var(--nav-panel);
  border: 1px solid var(--nav-line);
  border-radius: 10px;
  box-shadow: none;
}
.nav-page .tool-card,
.nav-page .prompt-card,
.nav-page .art-card {
  background: var(--nav-panel);
  border-color: var(--nav-line);
}

/* ============================================================
   ⑦ 内页卡片：与首页风格协调（保留原有信息结构，只统一色调/边框）
   —— 内页 .tool-card 保留「评分 + 价格 + 简介 + 标签」等信息，
      只去掉液态玻璃质感，改用与首页一致的纯色卡片 + 细边框。
   ============================================================ */
.nav-page .tool-card,
.nav-page .prompt-card,
.nav-page .news-card,
.nav-page .art-card {
  background: var(--nav-panel) !important;
  background-image: none !important;
  border: 1px solid var(--nav-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-page .tool-card:hover,
.nav-page .prompt-card:hover,
.nav-page .news-card:hover,
.nav-page .art-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .07) !important;
}
.nav-page .tool-foot { border-top-color: var(--nav-line); }

/* ============================================================
   ⑧ 工具箱页：工具列表已移到左侧固定导航，内容区改为单列
   ============================================================ */
.nav-page .tb-wrap {
  display: block;
  margin-top: 22px;
}
.nav-page .tb-panel {
  background: var(--nav-panel);
  border: 1px solid var(--nav-line);
  border-radius: 10px;
  padding: 26px 28px;
  min-width: 0;
  box-shadow: none;
}