/* ═══ 公共底部导航 TabBar（首页/房间/社区/我的）═══
 * 深色主题 + 金色高亮，与全站设计一致
 * 用法：页面底部放 <nav class="tabbar">，当前页 tab 加 class="active"
 */
.tabbar{
  position:fixed; bottom:0; left:0; right:0;
  z-index:100;
  display:flex;
  background:rgba(12,8,3,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top:1px solid rgba(201,169,110,0.16);
  padding:6px 8px calc(env(safe-area-inset-bottom) + 6px);
}
.tabbar-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 4px;
  text-decoration:none;
  color:var(--muted, #857867);
  font-family:inherit;
  background:none; border:none; cursor:pointer;
  transition: color var(--duration-instant, 0.15s) ease;
}
.tabbar-item .tab-ico{ font-size:20px; line-height:1.2; }
.tabbar-item .tab-lbl{ font-size:10px; letter-spacing:0.05em; }
.tabbar-item:hover{ color:var(--gold-light, #eabb79); }
.tabbar-item.active{ color:var(--gold-light, #eabb79); }
.tabbar-item.active .tab-ico{ transform:translateY(-1px); }
.tabbar-item.active .tab-lbl{ font-weight:600; }

/* ═══ 全站 SVG 图标（icons/ 目录，线性白色）═══ */
.ico{ width:20px; height:20px; vertical-align:-4px; }
.ico-sm{ width:16px; height:16px; vertical-align:-3px; }
.ico-lg{ width:36px; height:36px; vertical-align:-8px; opacity:.55; }
.ico-em{ width:1em; height:1em; vertical-align:-0.12em; }
/* TabBar 图标：CSS mask 实现，颜色跟随 currentColor（未激活灰、激活金） */
.tab-ico-img{
  width:24px; height:24px; display:block;
  background-color:currentColor;
  -webkit-mask-image:var(--ico); -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-image:var(--ico); mask-repeat:no-repeat;
  mask-position:center; mask-size:contain;
}

/* 页面底部留白，避免内容被 TabBar 遮挡 */
.has-tabbar{ padding-bottom: calc(72px + env(safe-area-inset-bottom)); }