/* ================= 办公导航页 ================= */
/* 本页无底部 CTA：去掉首页 main 为 CTA 预留的 120px 下留白 */
main{padding-bottom:0}
.page-head .g{position:absolute;border-radius:50%;pointer-events:none;filter:blur(100px);z-index:0}
.page-head .orb-1{width:380px;height:380px;left:-90px;top:-110px}
.page-head .orb-2{width:330px;height:330px;right:5%;top:-90px}
/* 首屏背景：底色 + Canvas 霓虹光斑（#haCanvas 实绘，会游动、跟鼠标）。
   这里的静态渐变只作兜底（Canvas 不可用时仍有橙紫色彩）。
   底部渐隐回白，与下方白色板块无缝衔接。 */
.band.page-head{
  padding:calc(var(--nav-h) + clamp(72px,8.4vw,128px)) var(--gut) clamp(48px,5.4vw,76px);
  background-color:var(--orange-wash);
  background-image:
    radial-gradient(62% 92% at 5% 0%,    rgba(255,153,0,.46) 0%, rgba(255,153,0,0) 60%),
    radial-gradient(56% 86% at 97% 2%,   rgba(102,0,255,.40) 0%, rgba(102,0,255,0) 62%),
    radial-gradient(68% 94% at 86% 114%, rgba(169,125,255,.46) 0%, rgba(169,125,255,0) 66%),
    radial-gradient(72% 94% at 10% 118%, rgba(255,196,107,.50) 0%, rgba(255,196,107,0) 68%),
    linear-gradient(152deg,#FFF3E1 0%,#F7EDFF 50%,#FFF2DE 100%);
}
.band.page-head+.band{border-top:0}
/* 首屏光斑画布：铺满页头，位于内容之下 */
.ha-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 搜索门户：首屏只有搜索框，整体居中（引擎行放宽到 860px，保证 8 个按钮单行） */
.portal{max-width:860px;margin:0 auto;text-align:center}

/* 搜索框：默认即为点亮态（橙描边 + 橙色生长阴影）；聚焦再加重一档 */
.psearch{
  position:relative;display:flex;align-items:center;gap:12px;
  max-width:680px;margin:0 auto;
  background:#fff;border:1px solid var(--orange);border-radius:999px;
  padding:0 22px;height:58px;
  box-shadow:var(--sh-size) rgba(255,153,0,.26);
  transition:border-color .3s var(--ease), box-shadow 1.05s var(--ease);
}
.psearch:focus-within{border-color:var(--orange);box-shadow:var(--sh-size) rgba(255,153,0,.40)}
.psearch .ic{width:18px;height:18px;flex:none;color:var(--ink-4)}
.psearch input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:inherit;font-size:16px;color:var(--ink);
}
.psearch input::placeholder{color:var(--ink-4)}
.psearch .nclear{
  flex:none;width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;
  background:var(--panel-2);color:var(--ink-4);font-size:15px;line-height:1;
  display:none;align-items:center;justify-content:center;
}
.psearch.has .nclear{display:flex}
/* 空关键词点按钮：描边转橙 + 轻微横向抖动，只作提示、无位移残留 */
.psearch.need{border-color:var(--orange);box-shadow:var(--sh-size) rgba(255,153,0,.28);animation:pshake .36s var(--ease)}
@keyframes pshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* 引擎按钮行：搜索框下方、水平居中 */
.engines{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.engine{
  position:relative;z-index:0;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .5s var(--ease);
}
/* 光点层：与首页按钮同一套（品牌橙、跟随鼠标、模糊局部点亮） */
.engine::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:150px;height:150px;border-radius:50%;
  left:var(--mx,50%);top:var(--my,50%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,153,0,.44) 0%,rgba(255,153,0,.13) 44%,rgba(255,153,0,0) 72%);
  filter:blur(11px);
  opacity:0;transition:opacity .4s var(--ease);
}
.engine:hover::before{opacity:1}
.engine:hover{background:#fff;border-color:var(--orange);color:var(--ink);box-shadow:var(--sh-size) rgba(255,153,0,.20)}
.engine .dot{position:relative;z-index:1;width:5px;height:5px;border-radius:50%;background:var(--line-2);transition:background .3s var(--ease)}
.engine:hover .dot{background:var(--orange)}

/* 门户提示行（空关键词预警也走这里） */
.phint{margin:18px 0 0;font-size:13px;line-height:1.7;color:var(--ink-4);transition:color .3s var(--ease)}
.phint.warn{color:var(--orange)}

/* 内部快捷入口条：去掉标题，整条水平居中 */
.band.qband{padding:clamp(4px,1vw,10px) var(--gut) clamp(6px,1.4vw,14px)}
.qrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.qchip{
  position:relative;z-index:0;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;color:var(--ink-2);text-align:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .5s var(--ease);
}
/* 光点层：与首页按钮同一套（跟随鼠标、模糊局部点亮） */
.qchip::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:150px;height:150px;border-radius:50%;
  left:var(--mx,50%);top:var(--my,50%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,153,0,.44) 0%,rgba(255,153,0,.13) 44%,rgba(255,153,0,0) 72%);
  filter:blur(11px);
  opacity:0;transition:opacity .4s var(--ease);
}
.qchip:hover::before{opacity:1}
.qchip .ic{position:relative;z-index:1;width:13px;height:13px;color:var(--ink-4);transition:transform .3s var(--ease), color .3s var(--ease)}
.qchip:hover{background:#fff;border-color:var(--line-2);color:var(--ink);box-shadow:var(--sh-size) rgba(19,21,25,.10)}
.qchip:hover .ic{transform:translateX(3px);color:var(--orange)}

/* 筛选行 */
.filter{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,42px)}

/* 分类区块 */
.ngroup+.ngroup{margin-top:clamp(30px,3.4vw,48px)}
.nghead{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.nghead h2{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.nghead .ngline{flex:1;height:1px;background:var(--line)}
.ngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* 工具卡 */
.ncard{
  position:relative;display:flex;align-items:center;gap:14px;min-width:0;
  border-radius:var(--r-card);border:1px solid var(--line);background:#fff;
  padding:16px 18px;
  transition:border-color .34s var(--ease), box-shadow .34s var(--ease);
}
.ncard:hover{border-color:var(--line-2);box-shadow:var(--sh-size) rgba(19,21,25,.10)}
.ncard .nico{
  flex:none;width:42px;height:42px;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line);
}
.ncard .nico img{width:26px;height:26px;object-fit:contain;display:block}
/* 字标（无图标的站点）：白字压品牌底色（底色由数据内联给出，兜底品牌紫） */
.ncard .nico-t{
  font-size:15px;font-weight:700;color:#fff;
  background:var(--purple);border-color:transparent;
}
.ncard .ntxt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.ncard .ntxt b{
  font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ncard .ntxt em{
  font-style:normal;font-size:13px;line-height:1.5;color:var(--ink-4);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ncard .ntxt em.dim{color:var(--line-2)}
.ncard .ngo{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-4);background:var(--panel-2);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.ncard .ngo .ic{width:13px;height:13px}
.ncard:hover .ngo{color:#fff;background:var(--orange)}

/* 空状态 */
.nempty{padding:60px 0;text-align:center;color:var(--ink-4);font-size:15px}

@media (max-width:1180px){
  .ngrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .ngrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .ngrid{grid-template-columns:1fr;gap:12px}
  .psearch{height:52px;padding:0 18px;gap:10px}
  .engines{gap:8px;margin-top:18px}
  .engine{padding:8px 15px}
  .band.qband{padding:4px var(--gut) 10px}
}