:is(.workbench-nav,.nav-workbench-link) .nav-new-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:middle;margin-left:3px;padding:2px 5px;border:1px solid #65e6bd55;border-radius:5px;background:#17392f;color:#8ff1cc;font-size:9px!important;font-weight:700;line-height:1.1;letter-spacing:.3px;white-space:nowrap}
/* 页头放不下时收成 ☰ —— 所有带 .site-header 的页面共用这一份。
 *
 * 2026-09-24 实测（Chromium，10 种语言 × 首页/转换器页 × 1440…360 共 8 档）：
 * 改之前，页头在 1440px 下不加任何东西就溢出 —— 西语超出内容区 179px、葡语
 * 196、荷兰语 202、德语 106、日语 22，主按钮被挤出屏幕；手机上所有语言的主按钮
 * 都在屏幕外。内容区最宽只有 1132px，屏幕再宽也不会变宽，所以这不是「加个
 * 断点」能解决的：长语言在任何桌面宽度下都放不下。
 *
 * 站主选的方案 D：
 *   1. 页头去掉 FAQ 和 Privacy 两个链接（FAQ 在各页正文里，Privacy 挪到页脚）。
 *      只这一步，1280px 以上 10 种语言就全部放得下。
 *   2. 仍然放不下时（平板、手机），nav-fit.js 按实际宽度判断，把导航收成
 *      「logo · 语言 · ☰」。判断看的是真实排版，不是断点 —— 以后改文案、加语言
 *      都不用回来调。
 *   3. 手机上去掉页头主按钮；语言名太长放不下时站名收成只剩 logo。
 * 结果：160 个组合 0 处溢出，任何宽度下主按钮都在屏幕内。
 *
 * 只用各页已有的 token（--line/--text/--surface），三份样式表里都定义了。
 */

/* 收起后的页头照 audioeditor.org 的手机版：logo · 语言 · ☰（2026-09-24 站主指定）。
   脚本判定放不下时给 .site-header 加 .nav-collapsed：完整导航藏起来，换上一个
   独立的语言按钮（脚本从导航里复制出来的）和 ☰。
   手机上（≤640px）主按钮直接去掉 —— 站主要求，不挪进 ☰；平板上收起后若仍放得下
   就保留，放不下时脚本加 .nav-cta-hidden 去掉。
   没有 JS 时保持原来的完整导航 —— 退化到改之前的样子，而不是什么都没有。 */
.nav-burger,
.nav-lang-compact { display: none; }
.site-header.nav-collapsed .desktop-nav { display: none; }
.site-header.nav-collapsed .nav-burger,
.site-header.nav-collapsed .nav-lang-compact { display: block; }
.site-header.nav-cta-hidden .nav-tools > .nav-action { display: none; }

/* 语言按钮紧挨在 ☰ 左边，和参考站一样。 */
.nav-tools { gap: 6px; }
/* Leave room for Workbench + NEW on desktop before falling back to the
   compact menu. Keep this shared by every page and retain mobile sizing. */
@media (min-width: 1025px) {
  .site-header .nav-wrap { max-width: 1440px; gap: 16px; }
  .site-header .desktop-nav > a,
  .site-header .nav-menu-button { padding-left: 10px; padding-right: 10px; }
}
/* 语言按钮被挪出了 .desktop-nav，拿不到那里的字号，会按 .nav-tools 的继承值变大
   一号，把站名挤掉。这里对齐导航栏本来的 13.5px/600。 */
.nav-lang-compact .nav-menu-button { color: var(--text); font-size: 13.5px; font-weight: 600; }
.nav-lang-compact .nav-menu-button .nav-icon { opacity: 1; }

/* ☰ 是一个不带边框的图标，和参考站一样。 */
.nav-burger .nav-menu-button {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  color: var(--text);
}
.nav-burger .nav-menu-button::after { display: none; }   /* 不要下拉小箭头 */
.nav-burger .nav-menu-button .nav-icon { width: 22px; height: 22px; opacity: 1; }

/* ☰ 在页头最右边，面板必须向左展开，否则伸出屏幕。 */
.nav-burger .nav-menu-panel {
  left: auto;
  right: -6px;
  width: min(340px, calc(100vw - 24px));
  min-width: 0;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.nav-burger-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--line);
  list-style: none;
}

/* 语言名较长（Nederlands、Português）又碰上窄手机时，站名收成只剩 logo，
   语言名保持完整。是否需要由脚本按实际排版判断（.nav-brand-compact），
   不写死断点 —— 英文在 360px 就用不着收。 */
.site-header.nav-brand-compact .brand > span:last-child { display: none; }

/* 窄屏下的下拉面板（工具、语言、☰ 都是）：原来写的是 position: fixed; top: 72px，
   假设页头就在屏幕最上面。工具页的页头上方现在有一条「收藏本页」横幅，页面停在
   顶部时页头往下挪了一截，固定的 72px 就压在页头上。改成以整条页头为锚点
   （.site-header 是 sticky，本身就是定位元素），有没有横幅、滚到哪里都贴着页头底边。 */
@media (max-width: 820px) {
  .site-header .nav-menu { position: static; }
  .site-header .nav-menu::after { display: none; }       /* 这条悬停缝隙会变成横跨全宽的透明条 */
  .site-header .nav-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* 下拉菜单点开后收不回来（2026-09-24 站主报告）。
   三份样式表里，面板除了 .open 之外还会因为两件事展开：
     :hover        —— 触屏上点过的元素会一直处于 hover，手机上等于永远展开；
     :focus-within —— 本意是给键盘 Tab 用的，但鼠标/手指点按钮也会把焦点留在按钮上。
   所以第二次点按钮时 nav-menu.js 虽然去掉了 .open，面板照样开着，只有点别处
   让焦点离开才会收起。实测复现过：再点按钮后 .open=false、面板仍可见。
   两条修正：
     1. 触屏设备（hover: none）只认 .open —— 点一下开，再点一下关。
     2. 其余设备保留鼠标悬停展开；焦点展开只在键盘聚焦（:focus-visible）时生效，
        点击留下的焦点不再撑开面板。不支持 :has() 的旧浏览器会忽略这条，
        退回原来的行为，不会更糟。 */
@media (hover: none) {
  .nav-menu:not(.open) .nav-menu-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }
}
.nav-menu:focus-within:not(.open):not(:hover):not(:has(:focus-visible)) .nav-menu-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

/* ☰ 和收起后的语言按钮是点击式菜单：只认 .open，悬停和焦点都不撑开。
   否则桌面上再点一次按钮时鼠标还停在上面，:hover 又把面板打开，必须把鼠标
   移走才会收起。键盘用户按 Enter/空格一样会触发 click，不受影响。 */
.nav-burger:not(.open) .nav-menu-panel,
.nav-lang-compact:not(.open) .nav-menu-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

/* 点击（或 Esc）关掉的菜单：鼠标还停在上面也不再被 :hover / :focus-within 撑开。
   鼠标移出菜单或焦点离开后，nav-menu.js 去掉 .hover-off，悬停展开恢复。 */
.nav-menu.hover-off:not(.open) .nav-menu-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

/* Tools: AI processing, spatial effects and format conversion. */
.site-header .nav-tools-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:8px; width:760px; min-width:0; max-width:calc(100vw - 32px); padding:16px; }
.nav-tool-group { list-style:none; min-width:0; }
.nav-tool-heading { margin:0 12px 9px; padding-bottom:10px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.nav-tool-list { margin:0; padding:0; list-style:none; }
.nav-tool-list a { padding:10px 12px; }
.nav-tool-group + .nav-tool-group { border-left:1px solid var(--line); padding-left:8px; }
.nav-burger .nav-tool-group + .nav-tool-group { border-left:0; padding-left:0; margin-top:14px; }
.nav-burger .nav-tool-heading { margin-bottom:4px; }
@media(max-width:820px) { .site-header .nav-tools-grid { width:auto; max-width:none; grid-template-columns:1fr; }.site-header .nav-tools-grid .nav-tool-group + .nav-tool-group { border-left:0; padding-left:0; margin-top:14px; } }

/* Effects are a full catalogue; keep desktop and touch menus in the viewport. */
.nav-tools-grid { max-height:calc(100dvh - 130px); overflow-y:auto; }
.nav-tool-group[data-tool-group="effects"] .nav-menu-text strong { white-space:normal; }
/* A small flame marks the new workbench without moving the menu layout. */
:is(.workbench-nav,.nav-workbench-link) .nav-new-badge::before{content:'🔥';display:inline-block;font-size:12px;line-height:1;margin-right:3px;transform-origin:50% 90%;animation:workbench-flame 1.5s ease-in-out infinite;filter:drop-shadow(0 0 2px #fb923c66)}
@keyframes workbench-flame{0%,100%{transform:rotate(-5deg) scale(.95);opacity:.85}50%{transform:rotate(5deg) scale(1.1);opacity:1}}
@media(prefers-reduced-motion:reduce){:is(.workbench-nav,.nav-workbench-link) .nav-new-badge::before{animation:none;transform:none}}

/* Featured workflow entry spans the tool categories and is cloned into the compact menu. */
.nav-workbench-feature{grid-column:1/-1;list-style:none;min-width:0;margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.site-header .nav-workbench-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid #8d75db66;border-radius:10px;background:linear-gradient(115deg,#29203f,#1d2637);text-decoration:none}
.site-header .nav-workbench-link:hover,.site-header .nav-workbench-link:focus-visible{border-color:#b89bff;background:linear-gradient(115deg,#34264f,#24334a)}
.nav-workbench-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:#7653bc;color:#fff}
.nav-workbench-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-workbench-link .nav-menu-text strong{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav-burger .nav-workbench-feature{margin:0 0 12px;padding-bottom:12px}