/* ============================================================
   TOKEN DISPLAY IN HEADER
   ============================================================ */
.token-display {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
}

.token-balance-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 20px;
  transition: all 0.2s;
}

.token-balance-btn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.token-balance-btn i {
  color: var(--color-primary);
  font-size: 0.8rem;
}

.token-balance-count {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.8rem;
  min-width: 20px;
  text-align: center;
}

.dark .token-balance-btn {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
  border-color: rgba(99, 102, 241, 0.3);
}

.dark .token-balance-btn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
}