/* ════════════════════════════════════════════════════════════════
   统一顶部导航（所有页面共用）。
   gen-themes 处理：rep 重配色（导航底=主题色渐变）+ postProcess(keepWhite=true)
   保留浅色高亮(rgba 白) + 把 #ffffff 按导航底亮度替换成 白/深色（保证字看得清）。
   ════════════════════════════════════════════════════════════════ */

/* 取消各页为 fixed 导航留的 padding-top（改用 sticky，无需留白）*/
body { padding-top: 0 !important; }

.top-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 12px 15px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.97), rgba(217, 119, 6, 0.97));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.top-nav::-webkit-scrollbar { display: none; }

.nav-brand {
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  margin-right: 10px;
  letter-spacing: 0.3px;
  opacity: 0.95;
  white-space: nowrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 17px;
  border-radius: 25px;
  background: transparent;
  border: 1px solid transparent;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0.9;
  transition: background 0.25s ease, opacity 0.25s ease;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}
.nav-link.active {
  background: rgba(255, 255, 255, 0.30);
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.nav-link i { font-size: 0.9rem; }

/* voice-room 的房间标识 */
.room-badge {
  margin-left: auto;
  color: #ffffff;
  font-size: 0.8rem;
  opacity: 0.9;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .top-nav { justify-content: flex-start; padding: 8px 10px; gap: 5px; }
  .nav-link { padding: 7px 12px; font-size: 0.78rem; }
  .nav-link i { display: none; }
  .nav-brand { font-size: 0.9rem; margin-right: 6px; }
}