.beta-badge {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.2));
    color: var(--accent); /* O el color principal de tu tema */
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    user-select: none;
}

/* Si no tienes definida la variable RGB del acento, puedes usar esta versión simplificada: */
/*
.beta-badge {
    background: rgba(0, 255, 127, 0.1); 
    color: #00ff7f;
    border: 1px solid rgba(0, 255, 127, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
}
*/

.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.navbtn--user{
  text-transform:none;
  justify-content: center;
  padding: 8px 14px;
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbtn--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--text);
  box-shadow: none;
  opacity: 0.8;
}

.topbar-actions form {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.navbtn--ghost:hover{
  border-color: rgba(26,208,170,.6);
  opacity: 1;
}