/* ══════════════════════════════════════════════════════════
   wenai.work 全站共享样式（12 个页面共用这一份）
   —— 文件名沿用 nav.css，但职责已不止导航：凡是「每页都有、必须长一样」
      的部件都收在这里（导航 / 用户面板 / 手机菜单 / 页脚分组）。
   —— 改这里 = 全站生效。绝不要再把这些规则复制回单个页面，
      2026-08-28 就是因为页脚样式各写各的，漂移出两套排版。
   ══════════════════════════════════════════════════════════ */

/* ⚠️ 导航自带一套颜色，绝不读页面的 --accent/--fg/--bg 等变量。
   踩过的坑：sponsor.html 把 --accent 定义成【完整颜色】hsl(82 68% 55%)，
   而其他所有页面是【裸三元组】82 68% 55%。导航里写 hsl(var(--accent))
   在 sponsor 页会展开成 hsl(hsl(...)) 直接失效 —— 按钮变暗、链接掉色。
   自带 token 之后，任何页面引入导航都长一模一样，加新页也不用管它的变量体系。 */
nav.top, .mobile-nav-overlay, #userPanel{
  --nav-accent:hsl(82 68% 55%);
  --nav-fg:#f5f5f5;
  /* 链接常态。原来用页面的 --fg-55（55% 灰）偏暗，全站统一提亮到这一档。 */
  --nav-dim:rgba(255,255,255,0.78);
}

nav.top{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 32px;
  background:rgba(20,20,20,0.75);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:0;
  transition:background 0.3s ease;
  /* 底部不用实线：暗色上一条硬边很扎眼，改成两端渐隐的虚影（见下方 ::after）。
     ⚠️ 这里绝不能写 position:relative —— 会覆盖上面的 fixed，导航变成占位元素，
     正文被整体推下 64px。fixed 本身就是绝对定位子元素的包含块，不需要再声明。 */
}
nav.top::after{content:'';position:absolute;left:6%;right:6%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 22%,rgba(255,255,255,.09) 78%,transparent);
  pointer-events:none}
@media(min-width:1024px){nav.top{padding:0 64px}}
nav.top .brand{font-size:1.25rem;font-weight:600;letter-spacing:-0.02em;color:var(--nav-fg)}
nav.top .brand .accent{color:#fff}
nav.top .nav-ai-btn{display:none;align-items:center;gap:6px;background:var(--nav-accent);color:#0a0a0a;padding:8px 16px;border-radius:14px;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;transition:filter .2s;text-decoration:none}
@media(min-width:768px){nav.top .nav-ai-btn{display:inline-flex}}
nav.top .nav-ai-btn:hover{filter:brightness(1.1)}
nav.top .nav-ai-wrap{position:relative;display:none}
@media(min-width:768px){nav.top .nav-ai-wrap{display:block}}
nav.top .nav-ai-wrap .nav-ai-btn{display:inline-flex}
nav.top .nav-ai-dd{display:none;position:absolute;top:100%;left:0;padding-top:4px;z-index:100}
nav.top .nav-ai-dd-inner{background:hsl(0 0% 8%);border:1px solid hsl(0 0% 15%);border-radius:10px;padding:4px;min-width:auto;width:max-content;box-shadow:0 12px 40px rgba(0,0,0,0.6)}
nav.top .nav-ai-wrap:hover .nav-ai-dd{display:block}
nav.top .nav-links .nav-ai-wrap .nav-ai-dd{left:50%;transform:translateX(-50%)}
nav.top .nav-ai-dd a{display:block;padding:9px 14px;border-radius:14px;font-size:0.76rem;font-weight:500;color:hsl(0 0% 70%);transition:all 0.15s;text-decoration:none;white-space:nowrap;letter-spacing:0;text-transform:none}
nav.top .nav-ai-dd a:hover{background:hsl(0 0% 14%);color:#f5f5f5}
nav.top .nav-links{display:none;list-style:none;gap:32px}
@media(min-width:900px){nav.top .nav-links{display:flex}}
nav.top .nav-links a{font-size:0.82rem;letter-spacing:0;text-transform:none;color:var(--nav-dim);transition:color .2s}
nav.top .nav-links a:hover{color:var(--nav-fg)}
nav.top .nav-links a.active{color:var(--nav-accent)}
nav.top .nav-cta{
  display:none;align-items:center;
  background:rgba(245,245,245,0.1);color:var(--nav-fg);
  padding:10px 22px;border-radius:14px;
  font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
  transition:background 0.2s,transform 0.12s;cursor:pointer;
}
@media(min-width:768px){nav.top .nav-cta{display:inline-flex}}
nav.top .nav-cta:hover{background:rgba(245,245,245,0.15)}
nav.top .nav-cta:active{transform:scale(0.97)}

/* ── Hamburger ── */
.nav-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;padding:6px;cursor:pointer;
  background:none;border:none;z-index:60;
}
.nav-hamburger span{
  display:block;width:100%;height:2px;
  background:var(--nav-fg);border-radius:10px;
  transition:transform 0.3s,opacity 0.3s;
}
.nav-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── Mobile nav overlay ── */
.mobile-nav-overlay{
  display:none;position:fixed;top:0;left:0;right:0;z-index:55;
  background:hsla(0,0%,3%,0.97);backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  flex-direction:column;align-items:stretch;
  padding:70px 24px 28px;
  border-bottom:1px solid rgba(255,255,255,0.09);
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  transform:translateY(-100%);transition:transform 0.3s ease,opacity 0.3s;opacity:0;
}
.mobile-nav-overlay.active{display:flex;transform:translateY(0);opacity:1}
.mobile-nav-overlay a{
  font-size:0.95rem;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:rgba(255,255,255,0.72);
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.05);transition:color 0.2s;
}
.mobile-nav-overlay a:last-child{border-bottom:none}
.mobile-nav-overlay a:hover,.mobile-nav-overlay a:active{color:var(--nav-accent)}
.mobile-nav-overlay .mobile-nav-cta{
  margin-top:12px;background:var(--nav-accent);color:#0a0a0a;
  padding:14px 0;border-radius:14px;font-size:0.85rem;
  font-weight:700;letter-spacing:0.1em;text-align:center;border-bottom:none;
}
.mobile-nav-scrim{display:none;position:fixed;inset:0;z-index:54;background:rgba(0,0,0,0.5)}
.mobile-nav-scrim.active{display:block}



/* ── 用户面板（与主站其他页同款） ── */
#userPanel{display:none;position:fixed;top:68px;right:24px;z-index:200;background:rgba(18,18,18,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:1.6rem 1.8rem;min-width:260px;box-shadow:0 16px 48px rgba(0,0,0,0.5);backdrop-filter:blur(24px);overflow:hidden}
#userPanel::before{content:'';position:absolute;bottom:-40px;left:-40px;width:140px;height:140px;background:radial-gradient(circle,rgba(180,120,60,0.1) 0%,transparent 70%);pointer-events:none}
#userPanel::after{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;background:radial-gradient(circle,hsl(82 68% 55% / 0.08) 0%,transparent 70%);pointer-events:none}
#userPanel.open{display:block}
#userPanel .up-label{font-family:var(--font-ui, inherit);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.38);margin-bottom:0.3rem;font-weight:400}
#userPanel .up-val{font-family:var(--font-ui, inherit);font-size:0.9rem;color:var(--nav-fg);margin-bottom:1rem;letter-spacing:0.01em;font-weight:500}
#userPanel .up-val .accent{color:var(--nav-accent)}
#userPanel .up-row{display:flex;gap:1.6rem;margin-bottom:1rem;position:relative;z-index:1}
#userPanel .up-row .up-col{flex:1}
#userPanel .up-divider{border:none;border-top:1px solid rgba(255,255,255,0.06);margin:1rem 0}
#userPanel .up-btn{display:block;width:100%;text-align:center;font-family:var(--font-ui, inherit);font-size:0.75rem;padding:0.65rem;cursor:pointer;transition:all 0.2s;text-decoration:none;border-radius:10px;font-weight:500;position:relative;z-index:1}
#userPanel .up-btn-main{background:var(--nav-accent);color:#0a0a0a;font-weight:700;border:none;margin-bottom:0.5rem}
#userPanel .up-btn-main:hover{filter:brightness(1.1)}
#userPanel .up-btn-ghost{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.52);border:1px solid rgba(255,255,255,0.08)}


/* ── 二级弹出：常用工具 ▸ ────────────────────────────────
   一级只放创作大功能（影像/声乐），零散小工具收进这个抽屉，
   以后再加十个也不会把导航撑乱。 */
nav.top .nav-sub{position:relative}
nav.top .nav-sub > a{display:flex;align-items:center;justify-content:space-between;gap:14px}
nav.top .nav-sub > a::after{content:'\203A';font-size:0.9rem;opacity:.5;line-height:1}
nav.top .nav-sub-dd{
  display:none;position:absolute;left:100%;top:-4px;padding-left:6px;z-index:110;
}
nav.top .nav-sub:hover > .nav-sub-dd{display:block}
nav.top .nav-sub-dd-inner{
  background:hsl(0 0% 8%);border:1px solid hsl(0 0% 15%);border-radius:10px;padding:4px;
  width:max-content;box-shadow:0 12px 40px rgba(0,0,0,.6);
}
/* 右侧空间不够时（窄屏/靠边），朝左弹避免出屏 */
@media(max-width:1180px){
  nav.top .nav-sub-dd{left:auto;right:100%;padding-left:0;padding-right:6px}
}
/* 手机端：二级直接平铺展开，hover 在触屏上不可用 */
@media(max-width:767px){
  nav.top .nav-sub-dd{display:block;position:static;padding:0}
  nav.top .nav-sub-dd-inner{background:none;border:none;box-shadow:none;padding:0 0 0 14px}
  nav.top .nav-sub > a::after{content:''}
}

/* 「工具 ▾」这类下拉父项：原来写死在 HTML 内联 style 里，内联优先级最高 →
   常态被锁成暗色、当前页也高亮不了。样式挪到这里，active 才压得住。 */
nav.top .nav-links a.nav-group-link{font-size:0.82rem;letter-spacing:0;text-transform:none;background:none;padding:0;border-radius:0;font-weight:400}
/* 「常用工具」只是分组标题，不是链接（无 href，不参与当前页高亮） */
nav.top .nav-sub > a.nav-group-hd{cursor:default}

/* 汉堡按钮基础样式是 display:none，但原来全站都缺一条「小屏打开它」的规则 →
   窄屏下导航项隐藏、汉堡也隐藏，等于没有任何导航入口。
   断点跟 .nav-links 的 900px 对齐。 */
@media(max-width:899px){nav.top .nav-hamburger{display:flex}}

/* 手机菜单里「工具」的下属项：缩进 + 略小字号，一眼看出层级 */
.mobile-nav-overlay a.mnav-sub{padding-left:18px;font-size:0.82rem;opacity:.86}
.mobile-nav-overlay a.mnav-sub::before{content:'└';margin-right:8px;opacity:.35;font-size:0.75rem}

/* ══════ 滚动收缩胶囊导航（0827，参考 hejustinsun.com 的交互）══════
   实测参考站：宽 1440→1000、圆角 0→100px、top 0→24px、高度不变、blur 12px。
   它是亮色站（白底融白底），我们是暗色站，转译成深色毛玻璃胶囊。

   ⚠️ 关键：导航外壳本身绝不参与动画。
   第一版直接过渡 inset / width / transform，但 left:0→50%、right:0→auto
   这类「长度 → auto」在 CSS 里无法插值，浏览器只能瞬间跳变 ——
   看起来就是「先缩回去、再弹出来」的生硬感。
   现在改成：外壳始终全宽不动，只让 ::before 背景层的 inset 与圆角做动画
   （纯长度值，可平滑插值），内容靠 padding 同步内收。全程连续无跳变。

   ⚠️ 只在 ≥768px 生效：手机端导航本来就窄，再收缩会挤坏汉堡菜单。 */
@media(min-width:768px){
  nav.top, .site-nav{
    background:transparent !important;          /* 底色交给 ::before 画 */
    backdrop-filter:none; -webkit-backdrop-filter:none;
    transition:padding .55s cubic-bezier(.22,1,.36,1);
  }
  nav.top::before, .site-nav::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:rgba(20,20,20,0.75);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-radius:0;
    border:1px solid transparent;
    box-shadow:0 0 0 rgba(0,0,0,0);
    transition:inset .55s cubic-bezier(.22,1,.36,1),
               border-radius .55s cubic-bezier(.22,1,.36,1),
               background .45s ease, box-shadow .55s ease, border-color .45s ease;
  }
  /* 收缩态：背景层四边内收成胶囊，内容用 padding 跟上，两者同一条缓动曲线 */
  nav.top.shrunk::before, .site-nav.shrunk::before{
    inset:9px max(18px, calc((100% - 1120px) / 2));
    border-radius:999px;
    background:rgba(16,16,16,0.86);
    border-color:rgba(255,255,255,0.09);
    box-shadow:0 14px 44px rgba(0,0,0,0.5);
  }
  nav.top.shrunk, .site-nav.shrunk{
    padding-left:max(46px, calc((100% - 1120px) / 2 + 28px));
    padding-right:max(40px, calc((100% - 1120px) / 2 + 22px));
  }
  /* 收成胶囊后底部那条渐变虚影就多余了（胶囊本身有描边） */
  nav.top.shrunk::after, .site-nav.shrunk::after{opacity:0}
  nav.top::after, .site-nav::after{transition:opacity .45s ease}
  nav.top.shrunk .nav-ai-dd{padding-top:10px}
}

/* 中英切换按钮：原来样式写死在 HTML 内联 style 里，字号 0.62rem、等宽字体、
   0.6 白 —— 三项都比导航其他元素小/暗/异体，看着像外来件。
   现在对齐导航体系：字号跟「立即加入」同档，字体继承导航，颜色跟导航链接同档。 */
nav.top .nav-lang{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:30px; padding:6px 13px; margin-left:8px;
  background:none; border:1px solid rgba(255,255,255,0.16); border-radius:999px;
  color:var(--nav-dim); font-family:inherit; font-size:0.72rem;
  letter-spacing:0.12em; font-weight:500; cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
nav.top .nav-lang:hover{
  color:var(--nav-fg); border-color:rgba(255,255,255,0.32);
  background:rgba(255,255,255,0.05);
}

/* ══════ 页脚分组（全站统一，以首页排版为准）══════
   子页原本是「编号绝对定位贴左 + 标题 0.62rem」，编号和标题挤一行、标题明显偏小；
   首页是「编号独占一行 + 标题 0.95rem」。老板 0828 拍板全站按首页来。
   用 footer 前缀提高特异性，压住各页残留的旧规则，不必逐页去删。 */
footer .foot-col{ position:relative; padding-left:0; }
footer .foot-col::before{
  content:attr(data-num); display:block; position:static;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:0.6rem; letter-spacing:0.24em; color:hsl(82 68% 55%);
  opacity:0.8; margin-bottom:12px;
}
footer .foot-col h5{
  font-size:0.95rem; letter-spacing:0.02em; color:rgba(255,255,255,0.92);
  margin:0 0 22px; font-weight:600; text-transform:none;
}
footer .foot-col a{ font-size:0.82rem; }