/* ============================================================
   layout.css — 预加载 / 光标 / 公告条 / 页头巨菜单 / 抽屉
                楼层竖井 / 命令面板 / Toast / 页脚
   ============================================================ */

/* ── 预加载器 ─────────────────────────────────────── */
.preloader{
  position:fixed;inset:0;z-index:var(--z-pre);
  background:var(--gb4-bg);
  display:grid;place-items:center;
  transition:opacity .55s ease,visibility .55s ease;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.preloader__inner{text-align:center;width:min(240px,72vw)}
.preloader__mark{
  width:54px;height:54px;margin:0 auto var(--s-4);
  border:1px solid var(--gb4-border-2);border-radius:14px;
  display:grid;place-items:center;
  font-family:var(--gb-font-head);font-size:20px;color:var(--hud-led);
  box-shadow:var(--hud-glow);
}
.preloader__bar{height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
.preloader__bar span{
  display:block;height:100%;width:0;
  background:var(--hud-led);box-shadow:var(--hud-glow);
  transition:width .18s linear;
}
.preloader__meta{
  display:flex;justify-content:space-between;
  margin-top:.7rem;
  font-family:var(--gb-font-mono);font-size:10px;letter-spacing:.22em;
  color:var(--gb4-text-2);
}

/* ── 滚动进度 ─────────────────────────────────────── */
.sprog{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--hud-led),var(--hud-cyan));
  box-shadow:var(--hud-glow);
  z-index:calc(var(--z-hdr) + 1);
  transition:width .08s linear;
}

/* ── 自定义光标（仅精确指针设备） ──────────────────── */
.cursor,.cursor-glow{
  position:fixed;top:0;left:0;pointer-events:none;display:none;
  z-index:9998;
}
.cursor{
  width:7px;height:7px;border-radius:50%;
  background:var(--hud-led);box-shadow:var(--hud-glow);
  transform:translate3d(-50%,-50%,0);
  transition:transform .06s linear,width .2s,height .2s;
}
.cursor.is-hot{width:26px;height:26px;background:rgba(34,211,238,.18);border:1px solid var(--hud-led)}
.cursor-glow{
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.09),transparent 68%);
  transform:translate3d(-50%,-50%,0);
}
@media (hover:hover) and (pointer:fine){
  .cursor,.cursor-glow{display:block}
}

/* ── 公告滚动条 ───────────────────────────────────── */
.ticker{
  position:relative;overflow:hidden;
  background:var(--gb4-bg-2);
  border-bottom:1px solid var(--gb4-border);
  font-size:12px;
}
.ticker__track{display:flex;width:max-content;animation:tickerMove 42s linear infinite}
@keyframes tickerMove{to{transform:translateX(-50%)}}
.ticker__set{display:flex;flex-shrink:0}
.ticker__item{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.4rem;color:var(--gb4-text-2);white-space:nowrap;
}
.ticker__item b{
  font-family:var(--gb-font-label);font-size:10px;letter-spacing:.14em;
  color:var(--hud-led);
}
.ticker__sep{color:var(--gb4-text-3);align-self:center}
.ticker__close{
  position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
  min-width:var(--gb-tap);min-height:var(--gb-tap);
  display:grid;place-items:center;
  background:var(--gb4-bg-2);border:0;color:var(--gb4-text-3);cursor:pointer;
}
.ticker__close:hover{color:var(--hud-led)}

/* ── 页头 ─────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:var(--z-hdr);
  background:rgba(9,13,21,.88);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gb-border);
  transition:box-shadow var(--t-base),background var(--t-base);
}
.hdr.is-stuck{box-shadow:var(--gb-shadow);background:rgba(9,13,21,.96)}
.hdr__in{
  display:flex;align-items:center;gap:1.25rem;
  height:var(--gb-nav-h);
  max-width:var(--gb-wide);margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2.5rem);
}

.logo{display:flex;align-items:center;gap:.7rem;flex-shrink:0;color:inherit}
.logo__mark{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(140deg,var(--gb-ink-link),var(--gb-heading));
  display:grid;place-items:center;
  font-family:var(--gb-font-head);font-size:16px;color:#fff;font-weight:700;
  box-shadow:0 6px 18px rgba(255,107,26,.34);
}
.logo__txt{
  font-family:var(--gb-font-head);font-size:1.05rem;line-height:1.15;
  color:var(--gb-heading);
}
.logo__sub{
  display:block;font-family:var(--gb-font-label);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gb-text-muted);margin-top:.15rem;
}

.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;
  min-height:var(--gb-tap);padding:0 .8rem;
  font-size:.9rem;font-weight:600;color:var(--gb-heading);
  border-radius:var(--gb-radius-sm);background:none;border:0;cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast);
}
.nav__link:hover,.nav__item.is-open>.nav__link{color:var(--gb-ink-link)}
.nav__chev{width:10px;height:10px;transition:transform var(--t-base);opacity:.6}
.nav__item.is-open .nav__chev{transform:rotate(180deg)}

/* ⚠️ 桥接伪元素：填补导航项底部与面板顶部之间的死区，
   否则鼠标下移越过空隙会触发 mouseleave 导致菜单提前收起。 */
.nav__item.has-mega::after{
  content:"";position:absolute;left:0;right:0;top:100%;
  height:calc((var(--gb-nav-h) - var(--gb-tap)) / 2 + 10px);
  pointer-events:auto;
}

/* 巨菜单面板：作为 .hdr 子元素，top:100% 从页头底部展开 */
.mega{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(10px);
  width:min(880px,calc(100vw - 2.5rem));
  background:var(--gb-white);
  border:1px solid var(--gb-border);border-radius:var(--gb-radius);
  box-shadow:var(--gb-shadow-lg);
  padding:1.75rem;
  display:grid;grid-template-columns:1fr 1fr .95fr;gap:1.75rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-base),transform var(--t-base),visibility var(--t-base);
}
.mega.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega__intro{grid-column:1/-1;font-size:var(--fs-sm);color:var(--gb-text-muted);margin:0 0 -.5rem}
.mega__col h4{
  font-family:var(--gb-font-label);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gb-text-muted);
  margin:0 0 .8rem;
}
.mega__link{display:block;padding:.55rem .7rem;border-radius:var(--gb-radius-sm);transition:background var(--t-fast)}
.mega__link:hover{background:var(--gb-bg)}
.mega__t{display:block;font-size:.92rem;font-weight:600;color:var(--gb-heading)}
.mega__link:hover .mega__t{color:var(--gb-ink-link)}
.mega__d{display:block;font-size:var(--fs-xs);color:var(--gb-text-muted)}

.mega__feat{
  background:linear-gradient(150deg,var(--gb4-bg-2),var(--gb4-bg-3));
  border:1px solid var(--gb4-border);border-radius:var(--gb-radius);
  padding:1.25rem;align-self:start;
}
.mega__feat .pill{background:rgba(255,107,26,.14);color:#FF8A3D;border-color:rgba(255,107,26,.32)}
.mega__feat h5{font-family:var(--gb-font-head);font-size:1.05rem;color:var(--gb4-text);margin:.7rem 0 .4rem}
.mega__feat p{font-size:var(--fs-xs);color:var(--gb4-text-2);margin:0 0 .9rem}

.hdr__actions{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}
.hdr__search{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:var(--gb-tap);padding:0 .8rem;
  border:1px solid var(--gb-border);border-radius:var(--gb-pill);
  background:var(--gb-white);cursor:pointer;
  font-size:var(--fs-xs);color:var(--gb-text-muted);
  transition:border-color var(--t-fast),color var(--t-fast);
}
.hdr__search:hover{border-color:var(--gb-cyan);color:var(--gb-ink-link)}
.hdr__search kbd{
  font-family:var(--gb-font-mono);font-size:10px;
  border:1px solid var(--gb-border);border-radius:4px;padding:.1rem .3rem;
}
.hdr__cta{margin-left:.25rem}

.burger{
  display:none;margin-left:auto;
  min-width:var(--gb-tap);min-height:var(--gb-tap);
  background:none;border:0;cursor:pointer;place-items:center;color:var(--gb-heading);
}

@media (max-width:1024px){
  .nav{display:none}
  .burger{display:grid}
  .hdr__cta{display:none}
  /* 巨菜单是 .nav 的下拉面板：.nav 隐藏后它已无触发入口，
     但 position:absolute 使其 offsetParent 落在 .hdr 上，
     仍会生成布局盒并撑宽文档（320px 实测多出 6px）。
     移动端改用 .drawer，故此处直接移除。 */
  .mega{display:none}
}
@media (max-width:640px){
  .hdr__search kbd,.hdr__search span{display:none}
  .hdr__search{min-width:var(--gb-tap);justify-content:center}
}
/* 超窄屏（≤374px）：页头最小内容宽约 391px，若不收紧则 .burger 会被挤出右边界
   （320px 实测溢出 42px）。此处允许 logo 收缩并隐藏副标题，把页头压回一屏内。
   仅影响 ≤374px；375px 起原本就放得下，不做任何改动。 */
@media (max-width:374px){
  .hdr__in{gap:.5rem;padding-inline:.85rem}
  .logo{min-width:0;flex-shrink:1}
  .logo__mark .logo__img{height:42px}
  .logo__txt{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .logo__sub{display:none}
}

/* ── 移动端抽屉 ───────────────────────────────────── */
.drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(370px,88vw);z-index:var(--z-mega);
  background:var(--gb-white);
  padding:1.25rem;overflow-y:auto;
  transform:translateX(100%);transition:transform var(--t-base);
  box-shadow:var(--gb-shadow-lg);
}
.drawer.is-open{transform:none}
.drawer__scrim{position:fixed;inset:0;background:rgba(6,8,16,.45);z-index:calc(var(--z-mega) - 1)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.drawer__close{min-width:var(--gb-tap);min-height:var(--gb-tap);background:none;border:0;cursor:pointer;display:grid;place-items:center}
.drawer__link{
  display:block;padding:.85rem .25rem;
  border-bottom:1px solid var(--gb-border);
  font-weight:600;color:var(--gb-heading);
}
.drawer__link:hover{color:var(--gb-ink-link)}
.drawer__grp{margin-top:1rem}
.drawer__grp h5{
  font-family:var(--gb-font-label);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gb-text-muted);margin:0 0 .35rem;
}
/* 红线⑥：触控目标 ≥44px。原 padding 上下 .5rem → 实测高 43px（差 1px）。
   抽屉打开后这是真实可点的二级导航，故按标准补齐（不改字号与缩进）。
   用 flex + min-height 兜底而非加大 padding，避免二级项间距被拉散。 */
.drawer__sub{display:flex;align-items:center;min-height:44px;padding:.25rem .25rem .25rem 1rem;font-size:var(--fs-sm);color:var(--gb-text-muted)}
.drawer__sub:hover{color:var(--gb-ink-link)}

/* ── 楼层竖井导航（首页） ─────────────────────────── */
.rail{
  position:fixed;right:1rem;top:50%;transform:translateY(-50%);
  z-index:var(--z-rail);display:none;flex-direction:column;gap:.1rem;
  padding:.5rem;border-radius:var(--gb-pill);
  background:rgba(17,24,39,.80);backdrop-filter:blur(10px);
  border:1px solid var(--gb-border);
}
@media (min-width:1280px){.rail{display:flex}}
.rail__item{
  display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
  /* 红线⑥：触控目标 ≥44px。原 min-height:30px → 实测 71x30。
     竖井为 position:fixed 且垂直居中，加高不影响文档布局。 */
  padding:0 .4rem;min-height:var(--gb-tap);
  background:none;border:0;cursor:pointer;
  font-family:var(--gb-font-mono);font-size:10px;letter-spacing:.12em;
  color:var(--gb-text-muted);border-radius:var(--gb-pill);
  transition:color var(--t-fast);
}
.rail__item:hover{color:var(--gb-ink-link)}
.rail__n{font-weight:600}
.rail__t{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width var(--t-base),opacity var(--t-base);
}
.rail:hover .rail__t{max-width:70px;opacity:1}
.rail__dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--gb-border);transition:all var(--t-base);
}
.rail__item.is-on{color:var(--gb-ink-link)}
.rail__item.is-on .rail__dot{
  background:var(--hud-led);box-shadow:var(--hud-glow);transform:scale(1.5);
}
.rail__item.is-on .rail__t{max-width:70px;opacity:1}

/* ── 命令面板 ⌘K ──────────────────────────────────── */
.cmd{
  position:fixed;inset:0;z-index:var(--z-palette);
  background:rgba(6,8,16,.55);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 1rem 1rem;
}
.cmd__box{
  width:min(640px,100%);
  background:var(--gb-white);border:1px solid var(--gb-border);
  border-radius:var(--gb-radius);box-shadow:var(--gb-shadow-lg);
  overflow:hidden;
}
.cmd__input{
  width:100%;border:0;border-bottom:1px solid var(--gb-border);
  padding:1.05rem 1.25rem;font-size:1rem;font-family:inherit;
  color:var(--gb-heading);outline:none;
  /* GuBruce 2026-10-13 修复：原来这里**没有 background** →
     <input> 用浏览器默认的**白底**，而字色是 var(--gb-heading)（近白 #F7FAFD）
     → **白字压白底，打字完全看不见**（用户报「搜索产品那里打字看不到」）。
     在深色 .cmd__box 里那条突兀的白条就是它。
     ⚠️ 这类 bug 对比度审计抓不到 —— 审计只取「叶子文本节点」，而 <input> 没有子文本节点，
        表单控件必须单独查（见 验收/_体检06_表单控件对比度.cjs）。 */
  background:transparent;
}
.cmd__input::placeholder{color:var(--gb-text-muted)}
.cmd__list{max-height:min(52vh,420px);overflow-y:auto;padding:.5rem}
.cmd__item{
  display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;
  padding:.7rem .8rem;border-radius:var(--gb-radius-sm);
  background:none;border:0;cursor:pointer;
}
.cmd__item:hover,.cmd__item[aria-selected="true"]{background:var(--gb-bg)}
.cmd__t{display:block;font-size:.92rem;font-weight:600;color:var(--gb-heading)}
.cmd__d{display:block;font-size:var(--fs-xs);color:var(--gb-text-muted)}
.cmd__k{
  margin-left:auto;flex-shrink:0;
  font-family:var(--gb-font-mono);font-size:10px;color:var(--gb-text-muted);
  border:1px solid var(--gb-border);border-radius:5px;padding:.15rem .4rem;
}
.cmd__empty{padding:1.5rem;text-align:center;font-size:var(--fs-sm);color:var(--gb-text-muted)}
.cmd__foot{
  border-top:1px solid var(--gb-border);padding:.6rem 1rem;
  display:flex;gap:1rem;font-size:10px;color:var(--gb-text-muted);
  font-family:var(--gb-font-label);letter-spacing:.08em;
}

/* ── Toast ────────────────────────────────────────── */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:var(--z-toast);
  display:flex;align-items:center;gap:.6rem;
  background:var(--gb4-bg-3);color:#fff;
  padding:.85rem 1.15rem;border-radius:var(--gb-radius-sm);
  box-shadow:var(--gb-shadow-lg);font-size:var(--fs-sm);
  transform:translateY(140%);transition:transform var(--t-base);
  max-width:min(340px,90vw);
}
.toast.is-in{transform:none}
.toast i{width:7px;height:7px;border-radius:50%;background:var(--hud-led);box-shadow:var(--hud-glow);flex-shrink:0}

/* ── 页脚 ─────────────────────────────────────────── */
.ftr{
  background:var(--gb4-bg);color:var(--gb4-text-2);
  padding-block:var(--s-16) var(--s-8);
  position:relative;overflow:hidden;
}
.ftr::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(var(--hud-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--hud-grid) 1px,transparent 1px);
  background-size:46px 46px;
}
.ftr__in{
  position:relative;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.5rem;
  max-width:var(--gb-wide);margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}
.ftr__brand .logo__txt{color:var(--gb4-text)}
.ftr__brand .logo__sub{color:var(--gb4-text-2)}
.ftr__brand p{font-size:var(--fs-sm);margin-top:1rem;max-width:34ch}
.ftr__col h5{
  font-family:var(--gb-font-label);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gb4-text);margin:0 0 .9rem;
}
.ftr__link{
  /* 红线⑥：触控目标 ≥44px。原 padding:.4rem 0 → 实测高 40px。
     用 min-height 兜底而非加大 padding，避免链接间距被拉得过开。 */
  display:flex;align-items:center;min-height:44px;padding:0;
  font-size:var(--fs-sm);
  color:var(--gb4-text-2);transition:color var(--t-fast);
}
.ftr__link:hover{color:var(--hud-led)}
.ftr__form{display:flex;gap:.5rem;margin-top:.85rem;flex-wrap:wrap}
.ftr__form label{width:100%;font-size:var(--fs-xs);color:var(--gb4-text-2)}
.ftr__form input{
  flex:1;min-width:150px;min-height:var(--gb-tap);
  padding:.5rem .85rem;border-radius:var(--gb-pill);
  border:1px solid var(--gb4-border-2);
  background:var(--gb4-surface);color:var(--gb4-text);
  font-size:var(--fs-sm);outline:none;
}
.ftr__form input::placeholder{color:var(--gb4-text-3)}
.ftr__form input:focus{border-color:var(--hud-led)}
.ftr__form button{
  min-height:var(--gb-tap);padding:0 1.1rem;border-radius:var(--gb-pill);
  border:0;background:var(--hud-led);color:#04222b;
  font-family:var(--gb-font-label);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.08em;cursor:pointer;transition:filter var(--t-fast);
}
.ftr__form button:hover{filter:brightness(1.12)}
.ftr__bot{
  position:relative;
  border-top:1px solid var(--gb4-border);
  margin-top:3rem;padding:1.5rem clamp(1.25rem,4vw,2.5rem) 0;
  max-width:var(--gb-wide);margin-inline:auto;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  /* 2026-10-13：配合 .ftr__bot a 的 min-height:44px —— 让版权文字与链接行垂直居中对齐 */
  align-items:center;
  font-size:var(--fs-xs);color:var(--gb4-text-2);
}
.ftr__bot a{
  color:var(--gb4-text-2);
  /* 红线⑥：触控目标 ≥44px。
     底部这排「关于我们/技术支持/加入我们/联系我们」原为纯 inline 链接，
     实测 **52×17px** —— 连 WCAG 2.2 AA 的 24×24 最低线都没到（11 页全有）。
     手法与上方 .ftr__link 保持一致（min-height 兜底）。
     ⚠️ 必须用 **inline-flex** 而非 flex —— 这几个链接是并排写在同一个 <span> 里、
       用全角空格分隔的；改成块级 flex 会直接把它们拆成四行。
     ⚠️ 配套给 .ftr__bot 加 align-items:center（见下），否则 44px 的链接行
       会把左侧版权文字按 stretch 顶到行首，两边文字不齐。 */
  display:inline-flex;align-items:center;min-height:44px;
}
.ftr__bot a:hover{color:var(--hud-led)}

@media (max-width:1024px){
  .ftr__in{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:640px){
  .ftr__in{grid-template-columns:1fr}
  .ftr__bot{justify-content:flex-start}
}