/* 全站统一底部导航 —— 由 /assets/nav.js 注入 DOM，本文件只负责外观
   各模块页面底色不同（门户深色 / 资讯、问答浅色），故导航一律用
   半透明深色 + 金色高亮，深浅底都能压住，不跟各家的主题色打架。*/
:root { --nav-h: 60px; } /* 导航条高度，供各页底部让位复用 */
#relic-nav {
  /* 经典稳健写法：导航条本身是 position:fixed; bottom:0 的一条，
     由 nav.js 按 visualViewport 把 bottom 抬到「工具栏之上」（iOS 强制 44px，
     安卓用 innerHeight - vv.height 算工具栏高度），无论地址栏/底栏怎么显隐都贴住可视底部。
     不再用铺满视口的 flex 外壳（那种写法在部分 Chrome 上会偶发错位）。 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99990;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
#relic-nav * { box-sizing: border-box; }

/* ---------- 「工具」弹出菜单（锚定在 .rn-tools 容器上）---------- */
.rn-menu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  min-width: 200px;
  padding: 6px;
  background: #1b1e26;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px) scale(.96);
  transform-origin: 50% 100%;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.rn-tools.rn-open .rn-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
.rn-menu::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #1b1e26;
  border-right: 1px solid rgba(255, 255, 255, .09);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  transform: rotate(45deg);
}
.rn-mi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  text-decoration: none;
  color: #e8e8ea;
  transition: background .15s;
}
.rn-mi:hover, .rn-mi:active { background: rgba(200, 163, 90, .14); }
.rn-mi-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(200, 163, 90, .14);
  font-size: 17px;
  line-height: 1;
}
.rn-mi-txt { flex: 1; min-width: 0; }
.rn-mi-txt b { display: block; font-size: 14px; font-weight: 600; letter-spacing: .3px; }
.rn-mi-txt em { display: block; font-style: normal; font-size: 11px; color: #8b90a0; margin-top: 2px; }

/* ---------- 导航条本体 ---------- */
.rn-bar {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: rgba(20, 22, 28, .94);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  min-height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
}
/* 非工具项（<a>）与工具容器（<div>）共用：flex 布局 + 默认灰字 */
.rn-item, .rn-tools {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 0 6px;
  text-decoration: none;
  color: #8b90a0;
  font-size: 11px;
  letter-spacing: .3px;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.rn-item svg, .rn-trigger svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.rn-item:active svg, .rn-trigger:active svg { transform: scale(.88); }
.rn-item.on, .rn-tools.on { color: #c8a35a; }
.rn-item.on svg, .rn-tools.on .rn-trigger svg { transform: translateY(-1px); }

/* 「工具」触发按钮：撑满容器，外观复用 rn-item 视觉 */
.rn-trigger {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  font-size: 11px;
  letter-spacing: .3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  -webkit-tap-highlight-color: transparent;
}

.rn-dot {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c8a35a;
  opacity: 0;
  transition: opacity .18s;
}
.rn-item.on .rn-dot, .rn-tools.on .rn-dot { opacity: 1; }

/* 页面底部让位：避免最后一块内容被导航条压住（--nav-h 由 nav.js 写入真实高度） */
body.rn-space { padding-bottom: var(--nav-h, 56px) !important; }

@media (min-width: 720px) {
  #relic-nav { left: 50%; width: 720px; margin-left: -360px; }
  .rn-bar { border-radius: 14px 14px 0 0; }
}