/* Public tool navigation. Visibility is controlled only by the native hidden attribute. */
.pnav.xnav-header { --xnav-surface:var(--card,#fff); --xnav-muted:var(--muted,#52627a); --xnav-border:var(--line,#e2e8f0); --xnav-soft:var(--brand-soft,#eaf0ff); --xnav-shadow:0 18px 48px -16px rgba(15,23,42,.24); }
.pnav.xnav-header > .wrap { position:relative; gap:20px; }
.pnav.xnav-header .links { display:flex; align-items:center; gap:18px; min-width:0; }
.pnav.xnav-header .logo { flex:0 0 auto; }
.pnav.xnav-header .links > .xnav-secondary { min-height:44px; white-space:nowrap; }
.pnav.xnav-header .links > .xnav-blog { display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; font-size:15px; }
.pnav.xnav-header .cta { align-items:center; flex:0 0 auto; gap:8px; }
.pnav.xnav-header .cta .btn { display:inline-flex; min-height:44px; }
.pnav.xnav-header .xnav-cta-short { display:none; }
.pnav.xnav-header .xnav-account { min-width:0; gap:0; }
.pnav.xnav-header .xnav-account-name { max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnav .xnav-tools { min-width:0; }
.pnav .xnav-entry { display:flex; align-items:center; gap:0; border:1px solid transparent; border-radius:10px; }
.pnav .xnav-directory { padding:0 3px 0 10px; white-space:nowrap; font-weight:650; }
.pnav .xnav-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; min-height:44px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink-2,#334155); font:inherit; cursor:pointer; }
.pnav .xnav-toggle svg { transition:transform .16s ease; }
.pnav .xnav-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.pnav .xnav-entry:has(.xnav-toggle[aria-expanded="true"]) { background:var(--xnav-soft); border-color:var(--xnav-border); }
.pnav .xnav-toggle:hover,.pnav .xnav-directory:hover { background:var(--xnav-soft); color:var(--brand-2,#1d4ed8); }
.pnav .xnav-panel { position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); z-index:110; width:min(1200px,calc(100vw - 32px)); max-height:calc(100vh - 92px); max-height:calc(100dvh - 92px); padding:22px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; background:var(--xnav-surface); color:var(--ink,#0f172a); border:1px solid var(--xnav-border); border-radius:16px; box-shadow:var(--xnav-shadow); }
.pnav .xnav-panel[hidden],.pnav .xnav-panel [hidden] { display:none!important; }
.pnav .xnav-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.pnav .xnav-panel h2 { margin:0 0 5px; font-size:20px; font-weight:750; letter-spacing:-.3px; line-height:1.4; }
.pnav .xnav-panel-head p { margin:0; color:var(--xnav-muted); font-size:14px; line-height:1.6; }
.pnav .xnav-search { width:300px; max-width:100%; flex:0 0 auto; }
.pnav .xnav-search label { display:block; margin-bottom:5px; font-weight:600; font-size:13px; line-height:1.4; }
.pnav .xnav-search input { width:100%; min-width:0; min-height:44px; margin:0; padding:9px 13px; border:1px solid var(--line-2,#cbd5e1); border-radius:9px; background:var(--xnav-surface); color:var(--ink,#0f172a); font:inherit; font-size:16px; line-height:1.5; }
.pnav .xnav-search input::placeholder { color:var(--xnav-muted); opacity:1; }
.pnav .xnav-search-status { margin:12px 0 14px; font-size:13px; color:var(--xnav-muted); line-height:1.5; }
.pnav .xnav-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.pnav .xnav-grid:has(>.xnav-group:nth-child(5)) { grid-template-columns:repeat(5,minmax(0,1fr)); }
.pnav .xnav-group { min-width:0; }
.pnav .xnav-group h3 { margin:0 0 7px; padding:0 7px 9px; border-bottom:1px solid var(--xnav-border); font-size:14px; font-weight:750; letter-spacing:.1px; color:var(--ink-2,#334155); line-height:1.45; }
.pnav .links .xnav-tool { display:flex; align-items:flex-start; gap:9px; min-height:58px; padding:8px 7px; margin:2px 0; border:1px solid transparent; border-radius:9px; color:var(--ink,#0f172a); text-decoration:none; transition:background-color .15s,border-color .15s; }
.pnav .xnav-icon { display:inline-flex; flex:0 0 29px; width:29px; height:29px; align-items:center; justify-content:center; margin-top:2px; border-radius:8px; background:#edf2ff; color:#315bbc; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; line-height:1; font-weight:750; }
.pnav .xnav-group[data-tools-group-kind="sales"] .xnav-icon { background:#e9f6f2; color:#176449; }
.pnav .xnav-group[data-tools-group-kind="design"] .xnav-icon { background:#f4edff; color:#7040a8; }
.pnav .xnav-group[data-tools-group-kind="development"] .xnav-icon { background:#edf3f8; color:#355b78; }
.pnav .xnav-group[data-tools-group-kind="industry"] .xnav-icon { background:#fff4e6; color:#91520e; }
.pnav .xnav-tool-copy { display:block; min-width:0; }
.pnav .xnav-tool-name { display:block; font-size:16px; line-height:1.4; font-weight:650; overflow-wrap:anywhere; }
.pnav .xnav-tool-desc { display:block; margin-top:3px; font-size:13px; line-height:1.45; color:var(--xnav-muted); overflow-wrap:anywhere; }
.pnav .links .xnav-tool:hover,.pnav .links .xnav-tool[aria-current="page"] { background:var(--xnav-soft); border-color:var(--xnav-border); color:var(--brand-2,#1d4ed8); }
.pnav .xnav-empty { padding:24px 12px; border:1px dashed var(--xnav-border); border-radius:10px; text-align:center; color:var(--xnav-muted); font-size:16px; }
.pnav .xnav-panel-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:12px; border-top:1px solid var(--xnav-border); }
.pnav .links .xnav-panel-foot a { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:6px 12px; border-radius:8px; font-size:14px; line-height:1.5; font-weight:600; }
.pnav .links .xnav-all { background:var(--xnav-soft); color:var(--brand-2,#1d4ed8); }
.pnav .links .xnav-professional { color:var(--xnav-muted); }
.pnav .links .xnav-panel-foot a:hover { background:var(--xnav-soft); color:var(--brand-2,#1d4ed8); }
.pnav .xnav-no-script { padding:8px; font-size:14px; }
.pnav.xnav-header :is(a,button,input):focus-visible { outline:3px solid var(--brand,#2f6bff); outline-offset:3px; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav.xnav-header { --xnav-surface:#141e30; --xnav-muted:#b0bfd3; --xnav-border:#344156; --xnav-soft:#243758; --xnav-shadow:0 18px 48px -16px rgba(0,0,0,.65); background:rgba(15,23,42,.96); color:#e7eef9; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav.xnav-header :is(.logo,.xnav-directory,.xnav-toggle,.xnav-secondary,.xnav-group h3,.xnav-tool,.xnav-panel h2,.xnav-search input) { color:#e7eef9; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav .xnav-panel { color:#e7eef9; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav.xnav-header .cta .btn-ghost { color:#e7eef9; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav.xnav-header .logo-text > span { color:var(--xnav-muted); }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav .xnav-icon { background:#253956; color:#c1d3ff; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav .xnav-group[data-tools-group-kind="sales"] .xnav-icon { background:#193d38; color:#b4e8d6; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav .xnav-group[data-tools-group-kind="design"] .xnav-icon { background:#392b50; color:#dfc4ff; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav .xnav-group[data-tools-group-kind="development"] .xnav-icon { background:#263846; color:#c0d9ed; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav .xnav-group[data-tools-group-kind="industry"] .xnav-icon { background:#44351e; color:#f4d59c; }
html:is([data-theme="dark"],[data-xunl-theme="dark"]) .pnav .links :is(.xnav-all,.xnav-tool:hover,.xnav-panel-foot a:hover) { color:#c1d3ff; }
@media (max-width:1199px) {
  .pnav .xnav-grid:has(>.xnav-group:nth-child(5)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pnav.xnav-header > .wrap { gap:14px; }
  .pnav.xnav-header .links { gap:12px; }
}
@media (max-width:1020px) {
  .pnav.xnav-header .links > .xnav-secondary { display:none; }
  .pnav.xnav-header .links { justify-content:flex-end; }
}
@media (max-width:960px) {
  .pnav.xnav-header .links { display:flex; }
  .pnav.xnav-header .xnav-grid,.pnav.xnav-header .xnav-grid:has(>.xnav-group:nth-child(5)) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .pnav .xnav-panel { width:calc(100vw - 32px); padding:20px; }
}
@media (max-width:640px) {
  .pnav.xnav-header > .wrap { min-height:64px; gap:10px; padding-inline:12px; }
  .pnav.xnav-header .logo { gap:7px; }
  .pnav.xnav-header .logo-text > span { display:none; }
  .pnav.xnav-header .logo-text b { font-size:14px; white-space:nowrap; }
  .pnav.xnav-header .links { gap:0; }
  .pnav.xnav-header .xnav-directory { font-size:14px; padding-inline:5px 0; }
  .pnav.xnav-header .cta { gap:4px; }
  .pnav.xnav-header .cta .btn { display:inline-flex; padding-inline:8px; font-size:14px; }
  .pnav.xnav-header .xnav-cta-full { display:none; }
  .pnav.xnav-header .xnav-cta-short { display:inline; }
  .pnav.xnav-header .xnav-account-name { display:none; }
  .pnav .xnav-panel { top:calc(100% + 3px); width:calc(100vw - 16px); max-height:calc(100vh - 76px); max-height:calc(100dvh - 76px); padding:16px; border-radius:12px; }
  .pnav .xnav-panel-head { display:block; }
  .pnav .xnav-panel h2 { font-size:18px; }
  .pnav .xnav-panel-head p { font-size:13px; }
  .pnav .xnav-search { width:100%; margin-top:12px; }
  .pnav.xnav-header .xnav-grid,.pnav.xnav-header .xnav-grid:has(>.xnav-group:nth-child(5)) { grid-template-columns:1fr; gap:20px; }
  .pnav .xnav-tool-name { font-size:16px; }
  .pnav .xnav-tool-desc { font-size:14px; }
  .pnav .xnav-panel-foot { display:flex; flex-wrap:wrap; justify-content:stretch; }
  .pnav .links .xnav-panel-foot a { width:100%; }
}
@media (max-width:420px) {
  .pnav.xnav-header .logo-text { display:none; }
  .pnav.xnav-header > .wrap { gap:8px; }
  .pnav.xnav-header .logo-mark { width:30px; height:30px; }
  .pnav.xnav-header .xnav-entry { border-radius:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .pnav .xnav-toggle svg,.pnav .links .xnav-tool { transition:none; }
}
@media print { .pnav .xnav-panel { display:none!important; } }