/* 悬浮底部导航（白色半透明 + 图标上文字下，紧凑版） */
.floating-nav{
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;

  width: max-content;
  max-width: 90vw;

  background: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.62) 100%);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 8px 22px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.55);
  z-index: 1000;
}
@supports not (backdrop-filter: blur(1px)) {
  .floating-nav{ background: rgba(255,255,255,.92); }
}

/* 单个按钮：更小更紧凑 */
.fn-btn{
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-width: 66px;
  height: 54px;
  padding: 6px 8px;

  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
  text-decoration: none;

  font-size: 12px;
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease,
              background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.fn-btn svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  display: block;
}
.fn-btn span{
  font-size: 11px;
  line-height: 1;
  letter-spacing: .02em;
  transform: translateY(-1px);
}

.fn-btn:hover{ box-shadow: 0 3px 10px rgba(15,23,42,.08); }
.fn-btn:active{ transform: translateY(1px); }

/* 当前页高亮（绿色） */
.fn-btn.active{
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
  box-shadow: 0 6px 14px rgba(34,197,94,.32);
}
.fn-btn.active svg{ stroke: currentColor; }

/* 页面底部留白也缩小一点 */
.page{ padding-bottom: calc(84px + env(safe-area-inset-bottom)); }