/* Shared global top bar for the public Pokedex + Profile Dex pages.
   Uses the shared palette vars (defined by pokedex.css / profiles.css) so it
   flips with the light/dark theme. .etb- prefixed to avoid clashes. */
.espio-topbar {
  position: sticky; top: 0; z-index: 9999;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  padding: 9px 18px;
  background: var(--bg-2, #031e28); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line, #174155);
  font-family: "Consolas", "SFMono-Regular", "Courier New", monospace;
}
.espio-topbar::-webkit-scrollbar { height: 0; }
.espio-topbar * { box-sizing: border-box; flex-shrink: 0; }
.espio-topbar .etb-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.espio-topbar .etb-brand img { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(70, 232, 224, 0.5)); }
.espio-topbar .etb-brand span { font-weight: 700; letter-spacing: 0.22em; color: var(--neon, #46e8e0); font-size: 14px; }
/* Gold section tag = "you are in a separate sub-section" indicator */
.espio-topbar .etb-sep {
  margin-right: auto; padding: 3px 9px;
  border: 1px solid var(--gold, #d1b235); color: var(--gold, #d1b235);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.espio-topbar .etb-nav {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sky, #9fc4d2); text-decoration: none; padding: 6px 9px; border: 1px solid transparent;
}
.espio-topbar .etb-nav:hover, .espio-topbar .etb-nav.active { color: var(--neon, #46e8e0); border-color: var(--line, #174155); }
.espio-topbar .etb-home { color: var(--gold, #d1b235); }
.espio-topbar .etb-disc { color: #fff; background: #5865F2; border-radius: 6px; padding: 6px 12px; font-size: 12px; text-decoration: none; }
.espio-topbar .etb-disc:hover { filter: brightness(1.1); }
.espio-topbar .etb-toggle {
  background: transparent; color: var(--sky, #9fc4d2); border: 1px solid var(--line, #174155);
  font-family: inherit; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 10px; cursor: pointer;
}
.espio-topbar .etb-toggle:hover { color: var(--neon, #46e8e0); border-color: var(--neon, #46e8e0); }

@media (max-width: 720px) {
  .espio-topbar { padding: 8px 12px; }
  .espio-topbar .etb-sep { margin-right: 8px; }
}