/* AINIVERSE 全站固定底部导航：主页与内容页共用同一套视觉。 */
:root{
  --zlb-nav-bg:rgba(255,255,255,.95);
  --zlb-nav-ink:#626a7a;
  --zlb-nav-active:#061a40;
  --zlb-nav-gold:#e7b85e;
  --zlb-nav-height:57px;
}

.bottom-nav{
  z-index:60;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  flex:0 0 auto;
  width:100%;
  min-height:var(--zlb-nav-height);
  padding:8px 8px max(8px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(16,31,64,.08);
  background:var(--zlb-nav-bg);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 -12px 30px rgba(16,31,64,.08);
}
.bottom-nav a{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
  color:var(--zlb-nav-ink);
  font:400 9px/1.25 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  text-decoration:none;
}
.bottom-nav a:hover{text-decoration:none}
.bottom-nav svg{width:20px;height:20px;stroke:currentColor}
.bottom-nav a.is-active{color:var(--zlb-nav-active);font-weight:900}
.bottom-nav a.is-active::after{
  content:"";
  position:absolute;
  bottom:-5px;
  width:18px;
  height:3px;
  border-radius:99px;
  background:var(--zlb-nav-gold);
}

/* 非首页内容页固定在视口底部，并与 650px 应用窗口同宽。 */
.bottom-nav.zlb-global-nav{
  position:fixed;
  left:50%;
  bottom:0;
  z-index:2147483000;
  width:min(100%,650px);
  transform:translateX(-50%);
}
html.zlb-global-nav-on{
  scroll-padding-bottom:calc(var(--zlb-nav-height) + env(safe-area-inset-bottom) + 12px);
  overflow-x:hidden;
}
html.zlb-global-nav-on body{
  padding-bottom:calc(var(--zlb-nav-height) + env(safe-area-inset-bottom)) !important;
  overflow-x:hidden;
}

/* 电子书有自己的翻页栏：让翻页栏和阅读舞台位于全站导航上方。 */
html.zlb-global-nav-on .zfoot{
  bottom:calc(var(--zlb-nav-height) + env(safe-area-inset-bottom));
}
html.zlb-global-nav-on .zstage{
  bottom:calc((env(safe-area-inset-bottom) * 2) + var(--footh) + var(--zlb-nav-height));
}
html.zlb-global-nav-on .zdw .panel{
  bottom:calc(var(--zlb-nav-height) + env(safe-area-inset-bottom));
  max-height:calc(78dvh - var(--zlb-nav-height));
}
html.zlb-global-nav-on .ztoast{
  bottom:calc((env(safe-area-inset-bottom) * 2) + var(--footh) + var(--zlb-nav-height) + 14px);
}

@media(min-width:700px){
  .bottom-nav.zlb-global-nav{border-radius:0 0 14px 14px}
}