/**
 * Navegação superior de categorias (Vídeo / Música / Imagem / Voz).
 * Pílula premium de vidro escuro (glassmorphism), centralizada — estilo ChatGPT/Runway/Leonardo.
 * Componente compartilhado: não altera a lógica de nenhum módulo.
 */
.category-nav {
  display: flex;
  justify-content: center;
  /* Espaçamento menor entre o header e a navegação */
  padding: 10px 14px 2px;
  background: transparent;
  border: none;
}

.category-nav-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 6px;
  border-radius: 999px;
  background: rgba(18, 20, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 10px 34px rgba(18, 20, 38, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
  animation: catNavIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.category-nav-inner::-webkit-scrollbar { display: none; }

@keyframes catNavIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.category-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-tab .cat-ico { font-size: 1.05rem; line-height: 1; }

.category-tab:hover:not(.is-disabled):not(.active) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
}

.category-tab.active {
  background: linear-gradient(135deg, #7c6cf0 0%, #5b4cdb 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(91, 76, 219, 0.45);
  animation: catTabPop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes catTabPop {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.category-tab.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cat-soon {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 600px) {
  .category-nav { padding: 8px 10px 2px; }
  .category-nav-inner { gap: 3px; padding: 5px; }
  .category-tab { padding: 8px 13px; font-size: 0.83rem; }
  .category-tab .cat-label { font-size: 0.83rem; }
}