/*=============================================
   中签吧 H5 · 通用组件样式
   对应小程序 navigationBar + custom-tab-bar + toast
   =============================================*/

/* ---- 顶部导航栏（对应 navigationBar：#E84D43 底白字）---- */
.h5-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--b500);
  color: #fff;
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 12) rgba(232, 77, 67, 0.18);
}
.h5-nav-inner {
  height: calc(var(--rpx) * 88);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s4);
}
.h5-nav-title {
  font-size: var(--font-lg);
  font-weight: 600;
  flex: 1;
  text-align: center;
  min-width: 0;
}
.h5-nav-back {
  width: calc(var(--rpx) * 64);
  font-size: calc(var(--rpx) * 48);
  line-height: 1;
  color: #fff;
  flex-shrink: 0;
}
.h5-nav-back-hidden { visibility: hidden; }
.h5-nav-right { width: calc(var(--rpx) * 64); text-align: right; font-size: var(--font-xs); flex-shrink: 0; }

/* ---- 底部 TabBar（对应 custom-tab-bar）---- */
.h5-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(calc(var(--rpx) * 100) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: calc(var(--rpx) * 0.5) solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 calc(var(--rpx) * -2) calc(var(--rpx) * 16) rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: flex-start;
  z-index: 999;
}
.h5-tab-item { transition: opacity var(--fast); }
.h5-tab-item:active { opacity: 0.6; }
.h5-tab-center-btn { transition: transform var(--fast) var(--ease); }
.h5-tab-item:active .h5-tab-center-btn { transform: scale(0.92); }
@media (min-width: 480px) {
  .h5-tabbar { max-width: 480px; left: 50%; transform: translateX(-50%); }
}
.h5-tab-item {
  flex: 1;
  height: calc(var(--rpx) * 100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.h5-tab-icon { width: calc(var(--rpx) * 38); height: calc(var(--rpx) * 38); display: block; }
.h5-tab-text { font-size: calc(var(--rpx) * 20); line-height: 1; margin-top: calc(var(--rpx) * 6); color: var(--w400); }
.h5-tab-active .h5-tab-text { color: var(--brand); font-weight: 500; }

/* 中间发布按钮 */
.h5-tab-center-wrap { justify-content: flex-start; padding-top: calc(var(--rpx) * 8); }
.h5-tab-center-btn {
  width: calc(var(--rpx) * 88);
  height: calc(var(--rpx) * 88);
  border-radius: 50%;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(var(--rpx) * 6) calc(var(--rpx) * 20) rgba(232, 77, 67, 0.35);
  border: calc(var(--rpx) * 6) solid var(--surf);
  margin-top: calc(var(--rpx) * -36);
}
.h5-tab-center-plus { color: #fff; font-size: calc(var(--rpx) * 48); line-height: 1; font-weight: 300; }
.h5-tab-center-text { margin-top: calc(var(--rpx) * 4); }

/* 有 tabbar 的页面底部留白 */
body.has-tabbar { padding-bottom: calc(calc(var(--rpx) * 110) + env(safe-area-inset-bottom)); }

/* ---- SVG 图标基线对齐 ---- */
.ic { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }

/* ---- 空态图标徽章（SVG in 品牌浅底圆） ---- */
.empty-state .empty-icon {
  width: calc(var(--rpx) * 120);
  height: calc(var(--rpx) * 120);
  border-radius: 50%;
  background: var(--b50);
  color: var(--b400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--rpx) * 52);
  margin-bottom: var(--s4);
  opacity: 1;
}
.empty-state .empty-icon .ic { font-size: inherit; width: 1em; height: 1em; }

/* ---- Toast ---- */
.h5-toast {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: var(--s3) var(--s5);
  border-radius: var(--rMd);
  font-size: var(--font-sm);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: 80%;
  text-align: center;
}
.h5-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }