/* ══════════════════════════════════════════════
   SPACESHIELD AI v5.2 · topbar-menu.css
   Tema: STAR WARS · CONSOLE HOLOGRÁFICO GALÁCTICO
══════════════════════════════════════════════ */

.topbar-menu-dropdown {
    display: inline-flex;
}

.topbar-menu-toggle {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    padding:         6px 12px;
    background:      rgba(255,0,170,.06);
    border:          1px solid rgba(255,0,170,.35);
    color:           var(--pink);
    font-family:     var(--three-d-font);
    font-size:       7px;
    letter-spacing:  1px;
    cursor:          pointer;
    transition:      all .1s;
    clip-path:       polygon(4px 0%, 100% 0%, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0% 100%, 0% 4px);
}

.topbar-menu-toggle:hover {
    background:  rgba(255,0,170,.15);
    border-color: var(--pink);
    color:       var(--pink);
    box-shadow:  var(--glow-pink);
    text-shadow: var(--glow-pink);
}

.topbar-menu-dropdown.open .topbar-menu-toggle {
    background:  rgba(255,0,170,.15);
    border-color: var(--pink);
    color:       var(--pink);
    box-shadow:  var(--glow-pink);
}

.topbar-menu-toggle.has-alert::after {
    content:    '';
    width:      6px;
    height:     6px;
    background: var(--yellow);
    box-shadow: var(--glow-yellow);
    margin-left: 2px;
}

/* Lista do menu — dropdown 3D */
.topbar-menu-list {
    right:      0;
    left:       auto;
    min-width:  200px;
    background: linear-gradient(180deg, #0d0028 0%, #07001a 100%);
    border:     2px solid rgba(255,0,170,0.4);
    box-shadow: var(--glow-pink),
                0 10px 30px rgba(0,0,0,0.8);
}

.topbar-menu-list .topbar-menu-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    width:           100%;
    margin:          0;
    font-family:     var(--three-d-font);
    font-size:       7px;
}

/* ── Botão DEMO API ── */
.demo-api-btn {
    background:     rgba(0,255,65,.06);
    border:         1px solid rgba(0,255,65,.3) !important;
    color:          var(--green) !important;
    font-family:    var(--three-d-font);
    font-size:      7px;
    letter-spacing: .5px;
    cursor:         pointer;
    transition:     all .1s;
}

.demo-api-btn:hover {
    background:   rgba(0,255,65,.15) !important;
    border-color: var(--green) !important;
    box-shadow:   var(--glow-green) !important;
}

/* Ponto pulsante "LIVE" */
.demo-api-dot {
    display:    inline-block;
    width:      5px;
    height:     5px;
    background: var(--green);
    box-shadow: var(--glow-green);
    animation:  threeDPulse 1s steps(2,end) infinite;
    flex-shrink: 0;
}

@media (max-width: 680px) {
    .topbar-menu-toggle  { padding: 5px 9px; font-size: 6px; }
    .topbar-menu-list    { display: flex; min-width: 170px; right: auto; left: 0; }
}